projects / sdk / online-doc.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 34d3c46)
Importing restructured docs
authorDonghyun Lee <dh0922.lee@samsung.com>
Fri, 27 Mar 2015 04:49:42 +0000 (13:49 +0900)
committerDonghyun Lee <dh0922.lee@samsung.com>
Fri, 27 Mar 2015 04:51:48 +0000 (13:51 +0900)
Signed-off-by: Donghyun Lee <dh0922.lee@samsung.com>
1907 files changed:
org.tizen.devtools/.project [new file with mode: 0644] patch | blob
org.tizen.devtools/META-INF/MANIFEST.MF [new file with mode: 0644] patch | blob
org.tizen.devtools/about.html [new file with mode: 0644] patch | blob
org.tizen.devtools/build.properties [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/certificate_registration.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/connection_explorer.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/emulator.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/emulator_features.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/event_injec.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/log_view.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/project_explorer.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/smart_dev_bridge.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/smart_launch.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/common_tools/tools_common.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/cover_page.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/css/snippet.css [new file with mode: 0644] patch | blob
org.tizen.devtools/html/css/styles.css [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/alt.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_GroupName1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_custom_add.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_custom_confirm.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_custom_create.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_custom_data.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_custom_delete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_editor_area.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_outline_add_frame_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_outline_lock_off.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_outline_view_off.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_tab.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_WidgetList.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_animationState.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_copy.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_delete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_ease.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_keyframe.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_outline.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_paste.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_preview.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_ruler.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_timeBar.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_timeTextBox.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_timeline.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_toolbar.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_timeline_zooml.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_backward_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_ease_inout.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_filter_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_forward_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_play_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/animator_toolbar_stop.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/app_exit.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/arrow_down.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/arrow_up.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/article.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/aside.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/audio.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/author_certificate.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/bg_util_bar.gif [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/binding_info_designer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/binding_info_panel.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/binding_info_toggle.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/binding_info_toggle_delete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/binding_link.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/btn_top.gif [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/canvas.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/checking_css_automatic_check.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_01.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_010.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_011.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_012.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_013.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_014.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_015.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_016.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_017.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_018.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_019.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_02.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_020.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_021.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_022.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_023.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_024.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_025.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_026.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_027.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_028.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_029.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_03.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_030.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_031.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_04.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_05.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_06.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_07.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_08.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_09.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_10.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_11.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_12.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_13.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_14.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_15.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_20.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_22.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_3.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_4.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_5.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_6.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_7.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_8.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/color_9.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/command.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/command_html.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/config_tab.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/connection_explorer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/content_assist_java.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/css_layer1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/css_layer2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/css_layer3.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/css_layers.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_edit_chart_dialog.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_network.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_network_api_list.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_network_chart.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_network_details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_analysis.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_api_list.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_chart_details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_chart_rate.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_chart_time.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_context.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_context_changed.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_program.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_program_details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_redundant.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_statistics.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_opengl_texture.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/da_summary_info.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_add.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_clear.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_collapse.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_compacted.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_create.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_delete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_down.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_expand.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_formatted.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_item.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_open.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_panel.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_reload.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_remove.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_remove_all.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_model_up.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_api.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_create.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_delete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_dialog.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_empty.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_file.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_panel.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_remote.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_set.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/data_source_static.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_calendar.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_call_history.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_contact.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_file_system.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_remote.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_static.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/databinding_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/datalist.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_areasize.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_max.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_next.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_previous.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_resolution.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_zoomin.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/designer_zoomout.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/device_change.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/device_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/device_select.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/devices.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/devices_page.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/dynamic_analyzer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ecp_cli_modes.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/editor_area.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_cli.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_controls_mobile.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_controls_wearable.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_manager.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_network_architecture.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_about.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_autocomplete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_basic_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_candidate.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_console.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_find.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_function.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_goto.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_highlight.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_layout.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_lines.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_liveedit.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_part_objects.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_preview_object.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_redo.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_save.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_setting.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_settings_window.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_source_code.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_status.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_swallow.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/enventor_undo.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/eventcast_architecture.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/feature_details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/features_tab.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/figure.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/file_api_list.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/file_chart.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/file_detail_info.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/file_tab.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/footer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/header.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/hgroup.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/hori_split_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/html_assist.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/html_breadcrumb.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/html_breadcrumb_toggle.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/html_hover.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/html_refactor_after.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/html_refactor_before.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ico_arr_hidden.gif [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ico_bullet_2_7.gif [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/js_automatic_analysis.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/js_colors.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/js_problems_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/js_rule_checker.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/jsdebugger_panels.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/keygen.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/launch.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/leak_candidates_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/leak_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/live_highlight.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mac.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mark.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/math.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/meter.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mn_division.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mn_fold.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mn_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mod_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/multitouch_add.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/multitouch_invalidate.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/multitouch_move.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mw_division.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mw_fold.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/n_division.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/n_fold.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/native_app_outline_001.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nav.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/navigation_001.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/navigation_002.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/navigation_003.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nscreen_feature.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nscreen_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nscreen_view_devices.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_areasize_0.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_editor.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_max_0.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_next_0.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_previous_0.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_resolution.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_zoomin_0.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/nuib_we_zoomout_0.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/other_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/outline_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/output.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/page_designer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/pages.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/pages_template.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/path.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/path_controller.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/path_edge.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/path_handler.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/po_file_editor1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/po_file_editor2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/po_file_editor3.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/po_file_editor4.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/potential_bug_result.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/potential_bug_select.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/power_manager_simulator.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/problems_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/progress.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/proj_component.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/project_explorer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_add.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_add_selector.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_delete.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_forward.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_forward_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_go_to.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_go_to_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_html.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_remove.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_specification.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_specification_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/properties_style.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/range_context_menu.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/range_info.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/range_info_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_console.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_elements.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_network.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_profiles.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_resources.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_sources.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/remote_inspector_timeline.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/resources.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/resources_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ruby.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/run_test2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/run_test3.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/running_tizen_sa.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/sa_property_page.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/screen_enable.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/section.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/set_range_chart.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_address_bar.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_browsing_history.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_config_button.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_info_button.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_accelerometer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_accelerometer_gyro.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_bearer.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_bluetooth.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_button.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_call.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_callscreen.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_download.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_feature_configuration.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_geolocation.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_messaging.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_network.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_nfc.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_notification.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_notification_none.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_package.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_package_callback.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_push.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_push_connect.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_push_register.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_resolution_orientation.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_panel_system_summary.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_reload_button.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_save_button.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/simulator_sensor_webgl.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/skin.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/skin_emulator_mobile.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/skin_emulator_wearable.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/smart_launch.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/smart_launch_config.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/smart_launch_five_config.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/smart_launch_history.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/snapshot_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/source.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/source_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/summary.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/svg.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/synchronization_parent.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/tab_pages.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/test_stubs1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/test_stubs2.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/thread_analysis.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/thread_api_list_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/thread_details.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/thread_parent.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/thread_pool_lifecycle_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/time.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/timeline.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/timeline_buttons.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/timeline_chart.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/timeline_chart_min.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/timeline_lifecycle_bar.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/timeline_scale.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/tizen_sa_result.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/tizen_web_simulator.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/toolbar_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ubuntu.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ui_builder_1.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ui_builder_config.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/uibuilder.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/vert_split_view.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/video.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/w_division.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/w_fold.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/windows.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ww_division.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ww_fold.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.devtools/html/index.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/call_stack_view_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/command_line_interface_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/content_assist_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_file_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_network_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_opengl_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_overview_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_range_info_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_summary_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_thread_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_timeline_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/da_views_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/enventor_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/manifest_elements_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/po_file_editor_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/project_wizard_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/static_analyzer_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/tools_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/uibuilder_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/native_tools/valgrind_n.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/common.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/core.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/jquery.util.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/jquery.zclip.min.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/navi.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/search.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/showhide.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/scripts/snippet.js [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/code_beautifier_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/code_minifier_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/command_line_interface_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/config_editor_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/content_assist_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/css_editor_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/css_preview_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/html_editor_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/html_preview_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/js_analyzer_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/js_editor_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/js_log_console_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/live_editing_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/privilege_checker_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/remote_inspector_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/set_ide_preference_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/tools_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/uibuilder_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/web_simulator_features_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/web_simulator_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm [new file with mode: 0644] patch | blob
org.tizen.devtools/index.xml [new file with mode: 0644] patch | blob
org.tizen.devtools/plugin.xml [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/.project [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/META-INF/MANIFEST.MF [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/about.html [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/build.properties [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/app_model/application_model.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/app_model/application_model_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/app_model/application_model_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/cover_page.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/css/snippet.css [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/css/styles.css [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/app_filtering.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/details.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/error_handling.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/io_overview.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/key_events.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/sec_privileges.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/tizen_apis.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/tizen_websites.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/details/web_runtime_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/first_app/first_app.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/app_dev_process_mn.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/app_dev_process_mw.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/app_filtering_basic_flow.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/application_package_manager.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/bg_util_bar.gif [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/breakpoint_set.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/btn_top.gif [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/code_assist.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/coolbar.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/create_project.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/deactivate.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/dead_lock_warning.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/debug_view_resume.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/debug_view_stepinto.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/debug_view_stepover.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/debug_view_stepreturn.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/debug_view_suspend.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/debug_view_terminate.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/design_page_layout.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/expressions.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/hello.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/hello_world_n.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/helloworld_emulator.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/helloworld_helloworld.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/helloworld_js.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/hover_help.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/hybrid_app_package_manager.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ico_arr_hidden.gif [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ico_bullet_2_7.gif [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ide_interactions.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/installer.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/localize_widget.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/memory_leaks.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/menu_key.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mn_division.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mn_fold.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mn_icon.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/multiple_apps.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mw_division.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mw_fold.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/mw_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/n_division.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/n_fold.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/native_api_layout.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_app_xml.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_folder.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_includes.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_layout_tuml.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_project_explorer.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_tizen_icon.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/nuib_soubp_tizen_manifest_xml.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/open_trace.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/package_id.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/page_event_handler.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/page_event_handler2.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/page_event_sequence.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/page_object.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/permissions.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/remote_debug.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/remote_debug_sdk.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/resume.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/running_project.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/signature.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/source_view.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/stepin.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/stepout.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/stepover.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/sync_chart.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/thread_create.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/thread_exit.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/thread_load.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/timeline_cpu_chart.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/tizen_project_explorer.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_components.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_css.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_files_folders.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_folder.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_html.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_indexxml.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_js.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/uibuilder_xml.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/user_template_export.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/valgrind_general.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/valgrind_heap.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/view_package_mw.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/view_source.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/w_division.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/w_fold.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/watchpoint_setting.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/wearable_web_application_project.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/web_app_directory_structure.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/web_application_project.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/what_is_tizen_architecture.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/widget_object.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ww_app_directory_structure.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ww_division.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ww_fold.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/images/ww_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/index.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/preface/preface.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/app_dev_process.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/app_dev_process_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/app_dev_process_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/building_app_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/coding_app_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/creating_app_project_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/debugging_app_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/designing_app_ui_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/designing_app_ui_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/performance_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/run_debug_app_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/running_app_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/setting_properties_n.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/process/setting_properties_w.htm [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/common.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/core.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/jquery.util.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/navi.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/search.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/showhide.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/html/scripts/snippet.js [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/index.xml [new file with mode: 0644] patch | blob
org.tizen.gettingstarted/plugin.xml [new file with mode: 0644] patch | blob
org.tizen.guides/.project [new file with mode: 0644] patch | blob
org.tizen.guides/META-INF/MANIFEST.MF [new file with mode: 0644] patch | blob
org.tizen.guides/about.html [new file with mode: 0644] patch | blob
org.tizen.guides/build.properties [new file with mode: 0644] patch | blob
org.tizen.guides/html/cover_page.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/css/snippet.css [new file with mode: 0644] patch | blob
org.tizen.guides/html/css/styles.css [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/4_columns.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/align.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/align_hints.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/app_run.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/app_state_transitions.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/app_states.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/aspect-control-both.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/aspect-control-horizontal.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/aspect-control-none.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/audio_input.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/audio_input_interrupt_state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/audio_output.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/audio_output_interrupt_state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/badge.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/base_scale.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/bg.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/bg_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/bg_util_bar.gif [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/bidirection.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/border.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/bottom.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/box.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/box_model_properties_struct.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/btn_top.gif [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_anchor.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_bottom.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_circle.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_drawers.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_dropdown.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_hover_v.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_hover_v_entry.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_hoversel.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_hoversel_entry.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_option.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_recorder.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_title_cancel.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_title_done.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/button_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/calendar_alarm.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/calendar_db.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/calendar_entity.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/calendar_model.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/calendar_property.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/calling_img_sep.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/camera_images.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/captured_screen1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/captured_screen2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/check.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/check_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/check_favorite.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/check_on_off.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/check_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/codec_state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/coin_flip_effect.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/color_colorplane.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/color_filter_app_multi_thread.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/color_filter_app_ui_thread.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/colorsel.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/colorselector_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/column_break.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/column_gap.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/column_rule.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/column_span.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/column_width.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/comp_test_result.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/comp_test_support.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/conformant.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contact_property.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contacts_children.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contacts_contact_entity.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contacts_contact_structure.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contacts_link_person.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contacts_person_record.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/contacts_unlink_contact.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/content.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/cors_preflight.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/cors_simple.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/css_bg1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/css_result.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup_dropdown.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup_dropdown_label.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ctxpopup_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/datacontrol.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/date2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/datetime_date_layout.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/datetime_time_24h.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/datetime_time_layout.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/datetime_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/debugging.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/device_axes.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/dlog_architecture.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/download_state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/efl_layers.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/efl_notilevels.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/efl_phone.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/efl_windowlayer.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/efllibs.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/elementary.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/elementary_app.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/email_architecture.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/emulator-screenshot.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/enlarge_low_res_image.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/entry.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/entry2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/entry_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/entry_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_architecture.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_blur1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_blur2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_image_loader.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_image_scaling.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_10.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_11.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_4.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_5.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_6.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_7.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_8.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_map_9.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_object_display.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_partial_update.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_scaling1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_scaling2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_scaling3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_smooth_disabled.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/evas_smooth_enabled.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/events.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/events2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/events3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/events_flow.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/events_scope.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/exporting_datacontrol.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/face_down.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/flex_container.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/flip_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/flipsel_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/fmradio-state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_0.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_4.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_5.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_6.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/form_7.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_album_pre.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_block.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_def.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_def_gridtext.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_def_gridtext2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_def_style.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_grp_index.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gengrid_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/genlist.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/genlist_htree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/genlist_multi.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/genlist_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gl-default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gl-double-label.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/gl-end-icon.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/glview.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/glview_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ico_arr_hidden.gif [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ico_bullet_2_7.gif [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_apps.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_arrowdown.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_arrowleft.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_arrowright.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_arrowup.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_chat.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_clock.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_close.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_delete.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_edit.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_file.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_forward.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_home.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_info.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_apps.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_arrdown.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_arrleft.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_arrright.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_arrup.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_chat.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_clock.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_close.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_delete.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_edit.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_file.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_folder.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_home.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_nophoto.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_menu_refresh.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_next.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_pause.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_photo_nophoto.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_play.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_prev.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_refresh.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_rewind.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_stop.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_apps.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_arrdown.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_arrleft.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_arrright.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_arrup.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_chat.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_clock.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_close.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_delete.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_edit.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_file.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_folder.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_moremenu.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_toolbar_refresh.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/icon_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/idlers.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/image.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/image_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/immediate_mode.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/import_css_area.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/import_linked_in_head.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/index.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/index_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/index_default02.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/index_pagecontrol.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/index_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_array.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_cache.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_chaining.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_debug.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_jquery_dom.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_js_dom.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_literal.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_loop.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_selector1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/js_perform_result_selector2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/key_manager.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/label.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/label_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_app.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_calculator.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_calculator_absolute.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_calculator_relative.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_fixed_media.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_flexible_media.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_image.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_image_scaled.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_original.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_original_scaled.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_sample.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_sample_ok.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/layout_sample_ugly.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/life_cycle_model_new.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/life_cycle_model_old.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/list.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/list_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/loc_priv_setting.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/localize_widget.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/location_setting_and_indicator.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/map_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mapbuf_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mascot.gif [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/memory.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/memory2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/memory3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/message_port.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/message_port_trusted.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/metadata.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mime_type.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/minimize_doc_flow.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mn_division.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mn_fold.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mn_icon.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/move_ear.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/multi_button_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/multiple_layout_example.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/multithreadapp_event_inspector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/multithreadapp_memory_inspector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mw_division.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mw_fold.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/mw_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/n_division.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/n_fold.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/network.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/network2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/network3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/network_speed_sprite.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/nfc_record.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/notification.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/notify_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/opengl1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/opengl2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/package_structure_new.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/package_structure_old.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/padding-hints.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/panel_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/panel_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/panes.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/photo_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/photocam_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/plug_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/popup.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/popup_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/popup_toast.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/popup_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/porting_installation_process.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/pos_map_all.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/progressbar.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/progressbar_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/progressbar_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/progressbar_wheel.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/quality_high.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/quality_highest.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/quality_low.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/quality_lowest.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/quality_medium.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/radio.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/radio_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/radio_state_changes.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/radio_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/redrawing01.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/redrawing02.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/redrawing03.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/redrawing04.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/redrawing05.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/rel1_rel2_offsets.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/rel1_rel2_offsets_and_relative.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/rendering1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/retained_mode.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/scale.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/scale_1.3_finger_50.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/scale_1_finger_50.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/scale_1_finger_90.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/scaling.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/segm_control_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/segment.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/segment_control_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/segment_text.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/sensor_types_accelerometer_vector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/sensor_types_deviceorientation_frame.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/sensor_types_gravity_frame.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/sensor_types_gyro_vector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/sensor_types_magnetic_vector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/sensor_types_useracceleration_vector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/service_app.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/service_architecture.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/shake.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/slider.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/slider_hor.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/slider_hor_center.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/slider_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/slider_ver.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/slider_ver_center.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/snap.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/spin.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/spinner_hor.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/spinner_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/spinner_ver.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/state_model_new.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/state_model_old.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/stt_lifecycle.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_def.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_defstyle.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_doublelabel.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_end.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_full.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_group.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_message.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/styleguide_genlist_oneicon.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/telephony.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/thread_pool_lifecycle_1.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/thread_pool_lifecycle_2.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/thread_pool_lifecycle_3.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/tilt.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/tone.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/toolbar.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/toolbar_default.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/toolbar_navigation.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/toolbar_tabbar.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/toolbar_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/transcoder.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/trusted_communication.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/tts_lifecycle.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ui_push_message.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uithreadapp_event_inspector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uithreadapp_memory_inspector.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uix_acceleration_sensor_output_bottom_top.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uix_acceleration_sensor_output_top_bottom.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uix_acceleration_sensor_output_up_down.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uix_acceleration_sensor_output_up_left.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uix_acceleration_sensor_output_up_right.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/uix_acceleration_sensor_output_up_top.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/unidirection.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/user_scenario.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/using_camera_states.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/using_import_attribute.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/using_players_interrupted_state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/using_players_state_changes.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/using_recorder_states.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/using_videoplayer_interrupted_state.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/w_division.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/w_fold.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/wav_player_state_changes.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/web_ime_architecture.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/web_ime_create_project.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/web_ime_setting_main.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/web_ime_setting_text_input.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/win_tree.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/wrist_up.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ww_division.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ww_fold.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/ww_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/index.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/app_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/app_manager_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/application_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/badge_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/bundle_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/data_control_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/message_port_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/notification_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/package_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/service_app_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/app/shortcut_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/base/base_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/base/i18n_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/content/content_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/content/download_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/content/media_content_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/content/mime_type_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/context/activity_recognition_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/context/context_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/context/gesture_recognition_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/graphics/cairo_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/graphics/graphics_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/graphics/opengles_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/graphics/tbm_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/guides_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/location/location_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/messaging/email_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/messaging/messages_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/messaging/messaging_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/messaging/push_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/audio_io_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/camera_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/image_util_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/media_codecs_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/media_tools_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/player_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/radio_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/recorder_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/sound_manager_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/tone_player_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/video_util_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/multimedia/wav_player_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/network/bluetooth_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/network/connection_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/network/network_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/network/nfc_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/network/wifi_direct_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/network/wifi_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/porting/api_comparison_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/porting/porting_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/security/key_manager_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/security/privilege_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/security/security_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/social/account_manager_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/social/calendar_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/social/contact_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/social/social_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/device_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/dlog_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/media_keys_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/runtime_info_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/sensors_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/settings_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/storage_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/sysinfo_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/system/system_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/telephony/telephony_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/animations_effects_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/containers_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/data_types_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/ecore_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/edc_part_block_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/edje_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/efl_extension_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/efl_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/efl_util_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/eina_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/eina_tools_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/elementary_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/evas_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/event_types_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/events_effects_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/font_setting_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/main_loop_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/multiple_screens_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/threads_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/ui_control_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/ui_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/ui_widgets_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/ui/widget_preferences_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/uix/stt_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/uix/tts_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/uix/uix_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/native/web/web_guide_n.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/common.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/core.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/jquery.util.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/jquery.zclip.min.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/navi.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/search.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/showhide.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/scripts/snippet.js [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/guides_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/application/alarm_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/application/app_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/application/application_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/application/data_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/application/package_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/communication/messaging_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/communication/nfc_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/communication/push_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/communication/secure_element_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/content/content_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/content/content_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/content/download_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/content/exif_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/dynamic/dynamic_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/guides_tizen_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/ime/ime_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/input_output/archive_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/input_output/message_port_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/localization/localization_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/multimedia/sound_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/service/service_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/account_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/bookmark_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/calendar_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/call_history_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/contact_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/data_sync_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/social/social_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/fm_radio_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/ham_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/power_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/sensor_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/system_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/system_info_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/system_setting_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/time_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/system/web_setting_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/ui/badge_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/ui/noti_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/communication/server_sent_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/communication/websocket_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/battery_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/browser_state_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/device_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/device_orientation_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/touch_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/device/vibration_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/animation_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/background_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/color_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/flexible_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/font_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/html5forms_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/media_query_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/multi_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/selector_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/session_history_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/text_module_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/transform_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/transition_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/dom/woff_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/graphics/canvas_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/graphics/svg_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/guides_w3c_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/location/geolocation_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/location/location_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/media/getusermedia_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/media/media_capture_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/media/media_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/media/video_audio_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/media/webaudio_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/page_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/security/cors_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/security/iframe_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/security/security_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/storage/appcache_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/storage/file_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/storage/indexdb_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/storage/web_storage_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/storage/websql_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/supplement/camera_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/supplement/webgl_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/ui/clipboard_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/html_priority_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/performance_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm [new file with mode: 0644] patch | blob
org.tizen.guides/index.xml [new file with mode: 0644] patch | blob
org.tizen.guides/plugin.xml [new file with mode: 0644] patch | blob
org.tizen.tutorials/.project [new file with mode: 0644] patch | blob
org.tizen.tutorials/META-INF/MANIFEST.MF [new file with mode: 0644] patch | blob
org.tizen.tutorials/about.html [new file with mode: 0644] patch | blob
org.tizen.tutorials/build.properties [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/cover_page.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/css/snippet.css [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/css/styles.css [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/3d.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/3d_final.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/9patch.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/accordion_menu.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/account_signin.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/animation1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/animation_up_down.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/application_page_layout.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/application_store_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/arraybuffer.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/base_layout.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/basic_layout_480x800.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/basic_layout_720x1280.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/bg_util_bar.gif [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/blue_box.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/bluetooth_onoff.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/bluetooth_visibility.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/bluetoothchat.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/box_model_properties.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/btn_top.gif [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/cairo-ex1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/calculator_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/calllog.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/canvas_drawing_masks.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/canvas_drawing_shapes1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/canvas_drawing_shapes2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/canvas_drawing_shapes3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/canvas_using_images.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/changing_batterystatus.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/charging_battery.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/chatter.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/clamped_array.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/clockwidget_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/color_final.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/color_vertex.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/column_settings.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/compass.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/contactsexchanger.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/content_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/copy_pasting.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/css_bg_tutorial1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/css_bg_tutorial2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/css_color_tutorial1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/css_transforms1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/css_transforms2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/css_transforms5.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/cube.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/cube_matrix.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/data_view.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/demo_gradation2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/demo_rectangle2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/demo_resizing2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/dice.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/dice_3d.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/downloadmanager.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/dragdrop.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_line_loop.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_line_sequence.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_line_strip.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_lines.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_points.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_triangle_fan.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_triangle_strip.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/drawing_triangles.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/dynamic_layout_480x800.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/dynamic_layout_720x1280.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/efl_complex_clock.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/efl_complex_clock_tree.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/efl_libraries.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/efl_simple_clock.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/efl_simple_clock_tree.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/email_sample.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/eventmanager.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/events_using_css3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/events_using_javascript.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/execution_screen.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/fade_affect_animation.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/file1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/file2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/file3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/file4.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/file5.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/file6.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/filemanager.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/flexcontainer_properties.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/flexible_box_allignment.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/flexible_default_structure.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/flexible_screen_size.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/flexitem_properties.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/font_face.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/font_properties.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/form_contact_layout.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/fullscreen.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/genlist_1line.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/genlist_item.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/geolocation.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/gesture_view2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/graph_app.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/grid_layout.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/ico_arr_hidden.gif [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/ico_bullet_2_7.gif [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/image_after.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/image_before.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/initializing_buffers.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/initializing_buffers_coordsystem.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/media_capture_activating_features.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/media_capture_file_types.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/media_queries1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/media_queries3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/memory_using_css3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/memory_using_javascript.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/menu_skeleton.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/message_port_bi-directional_communication.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/message_port_trusted_uni-directional_comm.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/message_port_uni-directional_communication.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mn_division.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mn_fold.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mn_icon.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/multi_node_selection.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/multipoint_touch.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mw_division.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mw_fold.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/mw_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/n_division.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/n_fold.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/nfc_onoff.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/notification_bar_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/notification_status_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/opengl1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/opengl2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/page_visibility_change.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/page_visibility_get.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/pane_tuto.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/piano.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/pseudo_elements_selector_range.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/pseudo_elements_selector_required.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/push_overview.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/push_state_transitions.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/sandbox_cookie_access.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/sandbox_form_submission.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/sandbox_page_redirection.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/sandbox_popup.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/screen_orientation.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/screenshot_1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/screenshot_2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/selfcamera.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/sensorball.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/server-sent_message.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/server-sent_request.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/setting_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/single_node_selection.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/static_cube.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/systeminfo_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/text_properties.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/texture.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/threejs.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/timing.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/touch1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/touch2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/touch3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/touchpaint_sd.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/touchpaint_sd_ww.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/transit_rotation_zoom.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/transitions1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/transitions2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/transitions3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/transitions5.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/typed_array_implementation.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/uilayout_view2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio3.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio4.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio5.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio6.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio7.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/video_audio8.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/view_main.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/w_division.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/w_fold.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/web_audio1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/web_audio2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/web_storage1.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/web_storage2.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/window_layout.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/ww_division.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/ww_fold.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/images/ww_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/index.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/base/base_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/content/content_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/content/download_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/context/activity_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/context/context_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/location/location_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/network/connection_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/network/network_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/security/key_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/security/security_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/social/account_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/social/contact_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/social/social_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/device_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/storage_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/system/system_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/form_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/native/web/web_tutorials_n.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/common.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/core.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/jquery.util.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/jquery.zclip.min.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/navi.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/search.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/showhide.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/scripts/snippet.js [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/graphics/task_clockwidget_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm [new file with mode: 0644] patch | blob
org.tizen.tutorials/index.xml [new file with mode: 0644] patch | blob
org.tizen.tutorials/plugin.xml [new file with mode: 0644] patch | blob
org.tizen.web.apireference/.project [new file with mode: 0644] patch | blob
org.tizen.web.apireference/META-INF/MANIFEST.MF [new file with mode: 0644] patch | blob
org.tizen.web.apireference/about.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/build.properties [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/cover_page.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/css/snippet.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/css/styles.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/device_api_cover.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/index.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/account.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/application.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/content.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/download.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio-state.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/linux-foundation-color.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/logo-tizen.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/package.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/power.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/push.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/se.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/snippet.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/styles-systeminfo.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/time.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/index.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/application.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/content.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/download.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/linux-foundation-color.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/logo-tizen.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/package.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/power.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/snippet.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/styles-systeminfo.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/time.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/Thumbs.db [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/bg_util_bar.gif [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/btn_top.gif [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ico_arr_hidden.gif [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ico_bullet_2_7.gif [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mn_division.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mn_fold.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mn_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mw_division.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mw_fold.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mw_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/mw_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/n_division.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/n_fold.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ui_icon_detail.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ui_icon_overflow.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ui_icon_selectall.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/w_division.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/w_fold.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ww_division.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ww_fold.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ww_icon.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/images/ww_icon_optional.png [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/index.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/common.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/core.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/jquery.util.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/jquery.zclip.min.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/navi.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/search.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/showhide.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/scripts/snippet.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Autodividers.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Checkboxradio.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Collapsible.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Controlgroup.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Drawer.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_FastScroll.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Fliptoggle.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Gallery.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ListDivider.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_MultimediaView.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Navigation.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Notification.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Progress.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ProgressBar.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ScrollHandler.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SearchBar.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SelectMenu.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Slider.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Swipe.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Tokentextarea.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/page/app_page_layout.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/page/multi_page.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_change.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_event.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_DOM.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_selectors.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/util/util.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/snippet.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/snippet.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/styles.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/event/drag.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/event/events.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/event/gesture.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/event/swipe.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/page/multi_page.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_change.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_event.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_checkbox.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_indexscrollbar.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_processing.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_progress.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_section_changer.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_slider.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_swipelist.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_toggleswitch.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_virtuallist.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/camera_w.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/tizen/snippet.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/tizen/tizen.css [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/tizen/tizen.js [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/w3c_api_m.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/w3c_api_w.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/w3c_api/w3c_dependencies.html [new file with mode: 0644] patch | blob
org.tizen.web.apireference/html/web_api_reference.htm [new file with mode: 0644] patch | blob
org.tizen.web.apireference/index.xml [new file with mode: 0644] patch | blob
org.tizen.web.apireference/plugin.xml [new file with mode: 0644] patch | blob

diff --git a/org.tizen.devtools/.project b/org.tizen.devtools/.project
new file mode 100644 (file)
index 0000000..f6fa5d6
--- /dev/null
+++ b/org.tizen.devtools/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+       <name>org.tizen.devtools_2.3.0</name>
+       <comment></comment>
+       <projects>
+       </projects>
+       <buildSpec>
+               <buildCommand>
+                       <name>org.eclipse.pde.ManifestBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+               <buildCommand>
+                       <name>org.eclipse.pde.SchemaBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+       </buildSpec>
+       <natures>
+               <nature>org.eclipse.pde.PluginNature</nature>
+       </natures>
+</projectDescription>
diff --git a/org.tizen.devtools/META-INF/MANIFEST.MF b/org.tizen.devtools/META-INF/MANIFEST.MF
new file mode 100644 (file)
index 0000000..0d652b0
--- /dev/null
+++ b/org.tizen.devtools/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Tizen Development Environment and Tools
+Bundle-SymbolicName: org.tizen.devtools;singleton=true
+Bundle-Version: 2.3.1
+Bundle-Vendor: The Linux Foundation
+
diff --git a/org.tizen.devtools/about.html b/org.tizen.devtools/about.html
new file mode 100644 (file)
index 0000000..a4c64b7
--- /dev/null
+++ b/org.tizen.devtools/about.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head> 
+  <script type="text/javascript" src="html/scripts/snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="html/css/styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>About This Content</title> 
+ </head> 
+ <body onload="prettyPrint()"> 
+ 
+  <h1><a name="Creating2" id="Creating2">About This Content</a></h1> 
+  <p>Tizen 2.3.0</p> 
+
+  <h1>License</h1> 
+   <p>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>
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/build.properties b/org.tizen.devtools/build.properties
new file mode 100644 (file)
index 0000000..5c90a0d
--- /dev/null
+++ b/org.tizen.devtools/build.properties
@@ -0,0 +1,8 @@
+bin.includes = plugin.xml,\
+               META-INF/,\
+               html/,\
+               build.properties,\
+               .project,\
+               about.html,\
+               index.xml
+
diff --git a/org.tizen.devtools/html/common_tools/certificate_registration.htm b/org.tizen.devtools/html/common_tools/certificate_registration.htm
new file mode 100644 (file)
index 0000000..f92ab34
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/certificate_registration.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Certificate Registration</title>
+</head>
+
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+
+<h1>Certificate Registration</h1>
+<p>To create packages or launch applications, you must register an author certificate in the Tizen IDE.</p>
+<p>To register an author certificate:</p>
+<ol>
+<li>In the Tizen IDE, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Security Profiles</strong>.</li>
+<li>To add a signed profile, click <strong>Add</strong> in the <strong>Profiles</strong> panel.</li>
+<li>Click <strong>Generate</strong> in the <strong>Author Certificate</strong> panel to generate an author certificate, if you do not have one.</li>
+<li>In the <strong>Author Certificate</strong> panel, click <strong>Edit</strong> to set the author certificate path and password.</li>
+</ol>
+<p>To change distributor certificates, select a table item and then click <strong>Edit</strong> in the <strong>Distributor Certificate</strong> panel.</p>
+<p>The first distributor certificate is required and the default information is filled automatically when a profile is created. The second distributor certificate is optional and is used only for special purposes. In general, you are not required to modify distributor certificates.</p>
+
+<p class="figure">Figure: Author certificate</p>
+
+<p style="text-align: center;">
+<img alt="Author certificate" src="../images/author_certificate.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/common_tools/connection_explorer.htm b/org.tizen.devtools/html/common_tools/connection_explorer.htm
new file mode 100644 (file)
index 0000000..6761e65
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/connection_explorer.htm
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Connection Explorer View </title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a class="opensection" href="#target">Testing with a Target Device</a></li>
+                               <li><a class="opensection" href="#emulator">Testing with the Emulator</a></li>
+                               <li><a class="opensection" href="#transfer">Transferring Files with Connected Devices</a></li>
+                               <li><a class="opensection" href="#preference">Setting Preferences</a></li>
+               </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Connection Explorer View</h1>
+
+                       <p>You can test Tizen applications with connected devices by using the following alternative ways:</p> 
+<ul class="ul">
+<li>Testing applications on a physical device connected to the host system.</li>
+<li>Testing them on an Emulator that emulates a real device as a software component installed on the host computer.</li>
+<li>A list of connected devices is available in the <strong>Connection Explorer</strong> view after connecting a device or launching a Tizen Emulator with a tree view.</li></ul>
+
+<p>The <strong>Connection Explorer</strong> view shows the devices connected to the system. It provides the following actions for using connected devices:</p>
+<ul class="ul">
+<li>Show connected devices</li>
+<li>Provide file operations on connected devices</li>
+<li>Send or receive files between the <strong>Project Explorer</strong> view and <strong>Connection Explorer</strong> view by dragging and dropping them between the views</li>
+<li>Explore the file system on connected devices</li>
+<li>Launch the Emulator Manager to handle the Emulator with multi-instances</li>
+</ul>
+<p class="figure">Figure: Connection Explorer view</p>
+<p style="text-align:center;"><img alt="Connection Explorer view"
+src="../images/connection_explorer.png" /></p>
+
+<h2 id="target" name="target">Testing with a Target Device</h2>
+<p>You can test your application by running and debugging it on a real target device:</p>
+<ul class="ul">
+<li>Connect your device to the host system by using a USB connector. The device icon (<img alt="Device icon" src="../images/device_icon.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></ul> 
+
+<h2 id="emulator" name="emulator">Testing with the Emulator</h2>
+<p>You can test your application by running and debugging it on the Emulator.</p>
+<p>To start the Emulator, click the Emulator Manager icon on the toolbar, select the Emulator in the Emulator Manager, and click <strong>Launch</strong>.</p>
+
+<p>The Emulator icon (<img alt="Emulator icon" src="../images/emulator_icon.png"/>) is displayed in the <strong>Connection Explorer</strong> view, and the Emulator is ready for testing the application.</p>
+
+
+<h2 id="transfer" name="transfer">Transferring Files with Connected Devices</h2>
+
+<p>You can transfer files between the connected devices and the host system:</p>
+<ul class="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>
+
+<h2 id="preference" name="preference">Setting Preferences</h2>
+<p>You can set the following Connection Explorer preferences:</p>
+<ul class="ul">
+<li>Change the Emulator Manager path</li>
+<li>Set the file transfer timeout value</li>
+</ul>
+
+<p>To set the Connection Explorer preferences, right-click the project and select <strong>Preferences &gt; Tizen SDK &gt; Tools &gt; Connection Explorer</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/common_tools/emulator.htm b/org.tizen.devtools/html/common_tools/emulator.htm
new file mode 100644 (file)
index 0000000..87ced6e
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/emulator.htm
@@ -0,0 +1,2186 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Emulator</title>      
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#features">Using the Emulator</a></li>
+                       <li><a href="#startup">Emulator Start-up Options</a></li>
+                       <li><a href="#support">Supported Features</a></li>
+                       <li><a href="#manager">Emulator Manager</a></li>
+                       <li><a href="#controls">Emulator Control Keys and Menu</a></li>
+                       <li><a href="#dir">Emulator Directory Structure</a></li>
+                       <li><a href="#ecp">Emulator Control Panel</a></li>
+               </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Emulator</h1>
+
+<p>The Tizen SDK includes a virtual device Emulator. The Emulator provides the full stacks of the Tizen platform so that you can test Tizen applications before deploying them         to the real target device. The Emulator is based on the open source QEMU project and comprises virtual CPU, memory, and various peripherals. Currently, the Tizen SDK only supports the x86 machine architecture for guest. You can use the <a href="#manager">Emulator Manager</a> to create and launch a Virtual Machine instance. You can communicate with the Emulator instance using the <a href="smart_dev_bridge.htm">Smart Development Bridge (SDB)</a>.</p>
+
+
+
+<p>The main <a href="#support">features</a> of the Emulator are:</p>
+<ul>
+<li>Providing full system emulation, including CPU, memory, and peripheral devices</li>
+<li>Simulating events with the <a href="#ecp">Emulator Control Panel</a></li>
+<li>Accelerating guest operations using host CPU or GPU</li>
+</ul>
+
+<h2 id="features" name="features">Using the Emulator</h2>
+
+<p>To run applications on the Emulator:</p>
+
+<ol>
+<li>Start the Emulator.
+<p>You can launch the Emulator from both the Emulator Manager and the command line. If you are using the command line, you can modify the <a href="#startup">start-up options</a>.</p></li>
+<li>While running the Emulator, you can use <a href="#controls">the control keys and context menu</a> to control the Emulator. You can use <a href="emulator_features.htm">extended features</a> while running applications, such as multi-point touch and a Webcam.</li>
+</ol>
+
+<h2 id="startup" name="startup">Emulator Start-up Options</h2>
+<p>You can launch the Emulator with specific settings by defining start-up options in the command line:</p>
+<pre class="prettyprint">
+# ./emulator-x86 --skin-args &lt;skin options&gt; --qemu-args &lt;QEMU options&gt;
+</pre>
+
+<p>The Emulator binaries are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin</span> directory. The Tizen Emulator provides 2 types of start-up options that you can set: skin options (such as width and height) and QEMU options (such as network and memory).</p>
+
+
+<p>The following tables list the available options.</p>
+<table style="width: 100%" border="1">
+  <caption>Table: Emulator skin options</caption>
+  <tbody>
+  <tr>
+  <th>Category</th>
+  <th>Option</th>
+  <th>Mandatory</th>
+  <th>Description</th>
+</tr>
+<tr>
+<td rowspan="2">Resolution</td>
+<td><span style="font-family: Courier New,Courier,monospace">width=x</span></td>
+<td>Yes</td>
+<td>This option makes the Emulator use a specific skin image width. The width value must be one of the video resolutions that the Emulator can support. </td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">height=x</span></td>
+<td>Yes</td>
+<td>This option makes the Emulator use a specific skin image height. The height value must be one of the video resolutions that the Emulator can support. 
+</td>
+</tr>
+
+<tr>
+<td>Heartbeat</td>
+<td><span style="font-family: Courier New,Courier,monospace">hb.ignore=x</span></td>
+<td>No</td>
+<td>This option is used to activate the Emulator debugging mode. Generally, a skin process for the Emulator periodically checks the heartbeat that an Emulator process sends.<br/>
+When the Emulator is in the debugging mode using gdb, the skin process is terminated automatically, because the Emulator cannot send a heartbeat to the skin process. In that case, you can set the <span style="font-family: Courier New,Courier,monospace">hb.ignore</span> option as <span style="font-family: Courier New,Courier,monospace">true</span> to debug the Emulator.<br/>
+If this option is <span style="font-family: Courier New,Courier,monospace">true</span>, the skin process does not check the heartbeat that the Emulator sends. The default value of this option is <span style="font-family: Courier New,Courier,monospace">false</span>.
+</td>
+</tr>
+<tr>
+<td>Skin image file path</td>
+<td><span style="font-family: Courier New,Courier,monospace">skin.path=xxx</span></td>
+<td>Yes</td>
+<td>Emulator loads the skin image files in this path. If this option is omitted, the Emulator finds the image files in the installed &#39;skins&#39; directory.</td>
+</tr>
+</tbody>
+</table> 
+
+<table style="width: 100%" border="1">
+  <caption>Table: Emulator QEMU options</caption>
+  <tbody>
+  <tr>
+  <th>Category</th>
+  <th>Option</th>
+  <th>Description</th>
+</tr>
+       <tr>
+<td rowspan="1">File system image</td>
+<td><span style="font-family: Courier New,Courier,monospace">-drive file=&lt;IMAGE_PATH&gt;/emulimg.x86</span></td>
+<td>Sets an image path to the file to be used as a drive image.</td>
+</tr>
+<tr>
+<td rowspan="1">Swap file system image</td>
+<td><span style="font-family: Courier New,Courier,monospace">-drive file=&lt;SWAP_IMAGE_PATH&gt;/swap.img</span></td>
+<td>Sets a swap image path to the file to be used as a swap image.</td>
+</tr>
+<tr>
+<td rowspan="2">Network</td>
+<td><span style="font-family: Courier New,Courier,monospace">-net user</span></td>
+<td>Uses the user mode network stack, which requires no administrator privilege to run.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">-net nic,model=virtio,macaddr=&lt;MAC_ADDRESS&gt;  
+</span></td>
+<td>Creates a new network interface card and connects it to VIRTIO. &lt;MAC_ADDRESS&gt; is recorded in <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;/emulator/vms/.tizen-em-info</span>. For example: <span style="font-family: Courier New,Courier,monospace">E8:11:32:33:38:81</span>
+</td>
+</tr>
+<tr>
+<td>USB</td>
+<td><span style="font-family: Courier New,Courier,monospace">-usb</span></td>
+<td>Enables the USB driver.</td>
+</tr>
+<tr>
+<td>TouchScreen</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-touchscreen-pci</span></td>
+<td>Uses the Maru Touchscreen device for display.</td>
+</tr>
+<tr>
+<td>Kernel</td>
+<td><span style="font-family: Courier New,Courier,monospace">-kernel &lt;KERNEL_PATH&gt;</span></td>
+<td>Uses bzImage as the kernel image.</td>
+</tr>
+<tr>
+<td rowspan="2">BIOS</td>
+<td><span style="font-family: Courier New,Courier,monospace">-vga none</span></td>
+<td>Sets the VGA card.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">-L &lt;BIOS_PATH&gt;</span></td>
+<td>Sets the directory for the BIOS, VGA BIOS, and key maps.</td>
+</tr>
+<tr>
+<td>Time</td>
+<td><span style="font-family: Courier New,Courier,monospace">-rtc base=utc</span></td>
+<td>Sets the real time clock with UTC.</td>
+</tr>
+<tr>
+<td>KVM (in Ubuntu&reg;)</td>
+<td><span style="font-family: Courier New,Courier,monospace">-enable-kvm</span></td>
+<td>Enables KVM (hardware virtualization support).</td>
+</tr>
+<tr>
+<td>HAX (in Windows&reg; or Mac OS&reg; X)</td>
+<td><span style="font-family: Courier New,Courier,monospace">-enable-hax</span></td>
+<td>Enables HAX (hardware virtualization support).</td>
+</tr>
+<tr>
+<td>Boot order</td>
+<td><span style="font-family: Courier New,Courier,monospace">-boot c</span></td>
+<td>Sets the boot order of the Emulator. The letter c indicates a hard disk.</td>
+</tr>
+<tr>
+<td>Kernel parameters </td>
+<td><span style="font-family: Courier New,Courier,monospace">-append&lt;parameters&gt;</span></td>
+<td>Sets the kernel command line parameters from the Emulator to the kernel.</td>
+</tr>
+<tr>
+<td>Kernel log</td>
+<td><span style="font-family: Courier New,Courier,monospace">-serial file:&lt;LOG_PATH&gt;/emulator.klog</span></td>
+<td>Writes the kernel log into the <span style="font-family: Courier New,Courier,monospace">&lt;LOG_PATH&gt;/emulator.klog</span> file.</td>
+</tr>
+<tr>
+<td>Memory</td>
+<td><span style="font-family: Courier New,Courier,monospace">-m &lt;MEMORY_SIZE&gt;</span></td>
+<td>Sets the memory size in the Tizen platform to, for example, 512 or 1024.</td>
+</tr>
+<tr>
+<td>Board</td>
+<td><span style="font-family: Courier New,Courier,monospace">-M maru-x86-machine</span></td>
+<td>Sets the Emulator machine as <span style="font-family: Courier New,Courier,monospace">maru-x86-machine</span>.</td>
+</tr>
+<tr>
+<td rowspan="2">Video card</td>
+<td><span style="font-family: Courier New,Courier,monospace">-enable-vigs</span></td>
+<td>Enables VIGS (Virtualized Graphics System) as the video card.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">-vigs-backend &lt;VIGS_BACKEND&gt;</span></td>
+<td>Sets the back end as <span style="font-family: Courier New,Courier,monospace">sw</span> or <span style="font-family: Courier New,Courier,monospace">gl</span> (software or OpenGL&reg;).</td>
+</tr>
+<tr>
+<td rowspan="2">GPU support</td>
+<td><span style="font-family: Courier New,Courier,monospace">-enable-yagl</span></td>
+<td>Enables host GL acceleration.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">-yagl-backend &lt;YAGL_BACKEND&gt;  
+</span></td>
+<td>Sets the back end as vigs or offscreen.</td>
+</tr>
+<tr>
+<td>Sound</td>
+<td><span style="font-family: Courier New,Courier,monospace">-soundhw all</span></td>
+<td>Enables all sound cards.</td>
+</tr>
+<tr>
+<td>Display booting status</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-esm-pci</span></td>
+<td>Sets the display booting status of the Emulator.</td>
+</tr>
+<tr>
+<td>Codec</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device codec-pci</span></td>
+<td>Enables codec devices.</td>
+</tr>
+
+<tr>
+<td>Hardware key</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-hwkey-pci</span></td>
+<td>Enables hardware keys.</td>
+</tr>
+
+<tr>
+<td>Host keyboard</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-keyboard-pci</span></td>
+<td>Enables host keyboards.</td>
+</tr>
+
+<tr>
+<td>Brightness</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device maru-brightness</span></td>
+<td>Enables the brightness control.</td>
+</tr>
+
+<tr>
+<td>Camera</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device maru-camera</span></td>
+<td>Enables the host Webcam support.</td>
+</tr>
+
+<tr>
+<td>Power</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-power-pci</span></td>
+<td>Enables the battery.</td>
+</tr>
+
+<tr>
+<td>Jack</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-jack-pci,jacks=&lt;Jack types&gt;</span></td>
+<td>Enables jack devices. Supported jacks are USB, ear jack, ear key, HDMI, and charger.  The ampersand (&#39;&amp;&#39;) symbol is used for multiple jacks. </td>
+</tr>
+
+<tr>
+<td>Emulator virtual device interface</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-evdi-pci</span></td>
+<td>Enables the common interface between the Emulator daemon on the guest side and the Emulator on the host side. 
+<p>To use the Emulator Control Panel, this option is required.</p></td>
+</tr>
+
+<tr>
+<td>Sensors</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-sensor-pci,sensors=&lt;Sensor types&gt;</span></td>
+<td>Enables sensor devices. Supported sensors are accelerometer, gyroscope, geomagnetic, light, proximity, haptic, pressure, ultraviolet, and heart rate monitor. 
+<p>The names of sensor types are accel, gyro, geo, light, proxy, haptic, press, uv, and hrm, respectively. The ampersand (&#39;&amp;&#39;) symbol is used for multiple sensor support.</p></td>
+</tr>
+
+<tr>
+<td>Vmodem</td>
+<td><span style="font-family: Courier New,Courier,monospace">-device virtio-vmodem-pci</span></td>
+<td>Enables the Virtual Modem.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following command is an example of using the Emulator start-up options:</p>
+
+<ul>
+  <li>Mobile                    
+<pre class="prettyprint">&lt;TIZEN_SDK&gt;/tools/emulator/bin/emulator-x86.exe --skin-args width=480 height=800 skin.path=
+&lt;TIZEN_SDK&gt;/platforms/&lt;PROFILE_NAME&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt; --qemu-args -drive file=
+&lt;TIZEN_SDK_DATA&gt;/emulator/vms/&lt;VM_NAME&gt;/emulimg-&lt;VM_NAME&gt;.x86,if=virtio,index=1 -boot c -append &quot;console=ttyS0 video=LVDS-1:480x800-32@60 dpi=2330 ip=10.0.2.16::10.0.2.2:255.255.255.0::eth0:none vm_name=&lt;VM_NAME&gt;&quot; -serial file:
+&lt;TIZEN_SDK_ DATA &gt;/emulator/vms/&lt;VM_NAME&gt;/logs/emulator.klog -m 512 -M maru-x86-machine -net nic,model=virtio,macaddr=&lt;MAC_ADDRESS&gt; -soundhw all -usb -vga none -enable-vigs -L 
+&lt;TIZEN_SDK&gt;/tools/emulator/data/bios -kernel 
+&lt;TIZEN_SDK&gt;/tools/emulator/data/kernel/bzImage.x86 -net user,dhcpstart=10.0.2.16 -rtc base=utc -drive file=
+&lt;TIZEN_SDK_DATA&gt;/emulator/vms/&lt;VM_NAME&gt;/swap-&lt;VM_NAME&gt;.img,if=virtio,
+index=2 -enable-hax -vigs-backend gl -enable-yagl -yagl-backend vigs -device virtio-esm-pci -device virtio-hwkey-pci -device 
+virtio-keyboard-pci -device virtio-evdi-pci -device virtio-sensor-pci,sensors=accel&amp;geo&amp;gyro&amp;light&amp;proxi&amp;
+haptic&amp;press&amp;uv&amp;hrm -device virtio-power-pci -device 
+virtio-jack-pci,jacks=earjack&amp;charger&amp;usb -device codec-pci -device 
+maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-touchscreen-pci,max_point=10</pre>
+       </li>   
+
+  <li>Wearable
+<pre class="prettyprint">&lt;TIZEN_SDK&gt;/tools/emulator/bin/emulator-x86.exe --skin-args width=360 height=480 skin.path=
+&lt;TIZEN_SDK&gt;/platforms/&lt;PROFILE_NAME&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt; --qemu-args -drive file=
+&lt;TIZEN_SDK_DATA&gt;/emulator/vms/
+&lt;VM_NAME&gt;/emulimg-&lt;VM_NAME&gt;.x86,if=virtio,index=1 -boot c -append &amp;quot;console=ttyS0 video=LVDS-1:360x480-32@60 dpi=3000 ip=10.0.2.16::10.0.2.2:255.255.255.0::eth0:none vm_name=&lt;VM_NAME&gt;&amp;quot; -serial file:
+&lt;TIZEN_SDK_DATA&gt;/emulator/vms/&lt;VM_NAME&gt;/logs/emulator.klog -m 512 -M maru-x86-machine -net nic,model=virtio,macaddr=&lt;MAC_ADDRESS&gt; -soundhw all -usb -vga none -enable-vigs -L 
+&lt;TIZEN_SDK&gt;/tools/emulator/data/bios -kernel &lt;TIZEN_SDK&gt;/tools/emulator/data/kernel/bzImage.x86 -net user,dhcpstart=10.0.2.16 -rtc base=utc -drive file=
+&lt;TIZEN_SDK_DATA&gt;/emulator/vms/&lt;VM_NAME&gt;/swap-&lt;VM_NAME&gt;.img,if=virtio,index=2 -enable-hax -vigs-backend gl -enable-yagl -yagl-backend vigs -device 
+virtio-esm-pci -device virtio-hwkey-pci -device virtio-evdi-pci -device virtio-sensor-pci,
+sensors=accel&amp;geo&amp;gyro&amp;light&amp;proxi&amp;haptic&amp;press&amp;uv&amp;hrm -device 
+virtio-power-pci -device virtio-jack-pci,jacks=charger&amp;usb -device codec-pci -device 
+maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-touchscreen-pci,max_point=2</pre>         
+  </li>
+       
+</ul>
+
+
+<h2 id="support" name="support">Supported Features </h2>
+<p>The Emulator provides support to various media formats and codecs and <a href="#opengl">OpenGL&reg; ES acceleration</a>. The Emulator, however, has some limitations and <a href="#target">differences compared to physical target devices</a>.</p>
+
+<p>The following table lists the basic features supported in the Emulator.</p>
+<table style="width: 100%" border="1">
+  <caption>Table: Supported Emulator features</caption>
+  <tbody>
+  <tr>
+  <th>Feature</th>             
+  <th>Detail</th>      
+  <th>Status</th>
+  <th>Notes</th>
+  </tr>
+       
+<tr>
+<td>Skin</td>
+<td><p>Skins are fitted to the screen resolution:</p> 
+<ul>
+<li>Mobile
+       <ul><li>WVGA (480 x 800, default)</li>
+                <li>qHD (540 x 960)</li>
+                <li>HD (720 x 1280)</li>
+               </ul>
+       </li> 
+<li>Wearable
+       <ul><li>320 x 320</li>
+       <li>360 x 480 (default)</li>
+               </ul>
+       </li>
+</ul> 
+
+
+<p>4 orientation modes are supported:</p> 
+<ul>
+<li>Portrait (default), landscape, reverse portrait, and reverse landscape</li></ul>
+
+</td>
+<td>Supported</td>
+<td>2 skin layout types are supported:
+<ul>
+       <li>Profile-specific skin</li>
+       <li>General purpose skin</li>
+</ul></td>
+</tr>
+<tr>
+<td>Touch</td>
+<td>Maru touchscreen device</td>
+<td>Supported</td>
+<td>Multi-touch is supported.</td>
+</tr>
+
+
+<tr>
+<td>Key</td>
+<td>HW keys, host keyboard, and SW keypad</td>
+<td>Supported</td>
+<td>The host keyboard is not supported for the Wearable Emulator.</td>
+</tr>
+
+
+<tr>
+<td>Display</td>
+<td>VGA card with 100 levels of brightness control</td>
+<td>Supported</td>
+<td>-</td>
+</tr>
+
+<tr>
+<td>OpenGL&reg; ES</td>
+<td>Compatible with OpenGL&reg; ES 1.1 and 2.0
+<p>OpenGL&reg; ES API pass-through via PCI</p>
+</td>
+<td>Supported
+</td>
+<td>The OpenGL&reg; ES 1.1 functionality is not guaranteed on the Emulator, unless the graphics hardware of your computer supports OpenGL&reg; 1.5.
+<p>The OpenGL&reg; ES 2.0 functionality is not guaranteed on the Emulator, unless the graphics hardware of your computer supports OpenGL&reg; 2.1.</p>
+<p>The host machine must support OpenGL&reg; 1.4.</p></td>
+</tr>
+
+
+<tr>
+<td>Sound</td>
+<td>AC97 device</td>
+<td>Supported</td>
+<td>Audio in: 
+<ul>
+<li>Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine.</li> 
+
+<li>On Windows&reg; 7, inject the microphone into the host machine before starting the Emulator.</li> </ul>
+
+<p>Audio out:</p> 
+<ul>
+<li>On Windows&reg; 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled.</li> 
+<li>While the Emulator is running, do not disable the audio out device, as it can lock the audio system of the guest platform.</li></ul>
+</td>
+</tr>
+
+<tr>
+<td>Network connection</td>
+<td>Virtio</td>
+<td>Supported</td>
+<td>Raw socket protocol, such as ICMP, is not supported.</td>
+</tr>
+
+
+<tr>
+<td>Emulator Control Panel</td>
+<td>The Emulator Control Panel (ECP) supports different features depending on the deice profile:
+<ul>
+       <li>Mobile
+               <ul>
+                       <li>Device Manager: Device Tree, Network, Host Directory Sharing</li>
+                       <li>Event Injector: Battery, RSSI, 3-Axis Sensor, Light, Proximity, Pressure, Ultraviolet, Heart Rate Monitor, Motion, Ear Jack, USB, SDCard, Location, Telephony</li>
+                       </ul>
+               </li>
+       <li>Wearable
+               <ul>
+                       <li>Device Manager: Network, Host Directory Sharing</li>
+                       <li>App Manager: Uninstaller</li>
+                       <li>Event Injector: Battery, 3-Axis Sensor, Light, Proximity, Pedometer, Pressure, Ultraviolet, Heart Rate Monitor, Gesture, USB</li>
+                       </ul>
+               </li>
+       </ul>
+
+</td>
+<td>Supported</td>
+<td>The Emulator Control Panel is a standalone tool, which replaces the Event Injector. It helps to control and monitor the Emulator features, and can be launched from the Emulator context menu.</td>
+</tr>
+
+
+<tr>
+<td>Camera</td>
+<td><p>Virtual camera device connecting a host machine&#39;s Webcam</p> 
+<p>Support: preview, capture, and record</p>
+<p>Image format: YUYV, I420, and YV12</p> 
+<p>Attributes: brightness and contrast </p>  
+<p>Resolution: 160 x 120, 176 x 144, 320 x 240, 352 x 288, and 640 x 480</p>
+<p>Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices.</p> 
+<p>The supported video codecs are MPEG-4, H.263, VC-1 for both encoding and decoding, and H.264 for only decoding.</p>
+</td>
+<td>Supported</td>
+<td>While recording a video using the Emulator, an audio-video synchronization error can occur depending on your computer hardware and performance.</td>
+</tr>
+
+<tr>
+<td>Bluetooth</td>
+<td>-</td>
+<td>Not supported</td>
+<td>-</td>
+</tr>
+
+<tr>
+<td>Wi-Fi</td>
+<td>-</td>
+<td>Not supported</td>
+<td>-</td>
+</tr>
+<tr>
+<td>Wi-Fi Direct&trade;</td>
+<td>-</td>
+<td>Not supported</td>
+<td>-</td>
+</tr>
+
+</tbody>
+</table>
+
+<h3 id="opengl" name="opengl">OpenGL&reg; ES Acceleration Support</h3>
+
+<p>For the Emulator to support OpenGL&reg; ES acceleration, you need: </p>
+<ul>
+<li>Graphics chipset driver that supports OpenGL&reg; 1.4 installed on the host machine</li>
+<li>All chipset vendors and driver versions available to support the OpenGL&reg; 1.4 standard</li>
+</ul>
+
+<table class="note">
+
+      <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">Emulator supports only ES 1.1, ES 2.0, and EGL&trade; 1.4 versions.</td>
+
+        </tr>
+      </tbody>
+    </table>
+
+<h3 id="target" name="target">Differences between the Emulator and Target</h3>
+
+<p>The following tables describe the differences between a real target device and the Emulator. For more detailed information, see the differences in:</p>
+<ul>
+<li><a href="#input">Input system</a></li>
+<li><a href="#graphics">Graphics and display</a></li>
+<li><a href="#sensor">Virtual sensor</a></li>
+<li><a href="#telephony">Telephony</a></li>
+<li><a href="#power">Power management</a></li>
+<li><a href="#codec">Supported media formats and codecs</a></li>
+</ul>
+
+<table border="1">
+  <caption>Table: Comparison summary</caption>
+  <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;">Subject</th>       
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
+    </tr>
+         <tr>
+                 <td rowspan ="5">Development environment</td>
+                 <td>Target</td>
+                 <td>Buy a target device or reference board (by model)</td>
+                 <td>Download the SDK (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>
+                 <td>Not supported</td>
+               </tr>
+
+               <tr>
+                 <td>Bluetooth</td>
+                 <td>Fully supported</td>
+                 <td>Not supported</td>
+               </tr>  
+  
+               <tr>
+                 <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>
+                 <td>Emulated I/O (relatively slow)</td>
+               </tr>
+</tbody>
+</table>
+
+<h4 id="input" name="input">Input System </h4>
+
+<table border="1">
+  <caption>Table: Input differences</caption>
+  <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;">Physical target</th>       
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
+   </tr>
+
+
+       <tr>
+                 <td>Touch screen panel</td>
+                 <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>  
+</table>
+
+<h4 id="graphics" name="graphics">Graphics and display</h4>
+
+ 
+ <table border="1">
+  <caption>Table: Graphics and display differences</caption>
+  <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;">Physical target</th>       
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">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>  
+</table>
+   
+ <h4 id="sensor" name="sensor">Virtual Sensor (Emulator Control Panel)</h4>
+   
+  
+<table border="1">
+  <caption>Table: Virtual sensor differences</caption>
+  <tbody>  
+
+  <tr>
+  <th colspan="2">Category</th>
+     <th>Physical target</th>
+        <th>Emulator</th>
+  </tr>
+ 
+        <tr>
+     <td rowspan="8">Sensor</td>
+        <td>Acceleration</td>
+  <td>Receives the actual acceleration value of the device.</td>
+  <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>
+     <td>Receives the virtual proximity value through the Emulator Control Panel.
+        <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>
+     <td>Receives the virtual ambient light value through the Emulator Control Panel.
+        <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 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> 
+    </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> 
+    </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>
+     <td>Supported by lbsFW.</td>
+     <td>Receives the virtual GPS log file through the Emulator Control Panel.
+        <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>
+
+
+<h4 id="telephony" name="telephony">Telephony</h4>
+
+ <table border="1">
+  <caption>Table: Telephony differences</caption>
+  <tbody>  
+ 
+ <tr>
+    <th colspan="2">Category</th>
+       <th>Physical target</th>
+       <th>Emulator</th>
+   </tr>
+   <tr>
+ <td rowspan="2">Telephony</td>
+     <td>Call</td>
+        <td>Calls and video calls are supported.</td>
+        <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>
+        <td>SMS messaging with the Emulator Control Panel is supported.
+        <p>Sending Emulator-to-Emulator SMS messages is not supported.</p></td>
+        </tr>
+ </tbody>
+ </table> 
+   
+   
+<h4 id="power" name="power">Power Management</h4>
+ 
+ <table border="1">
+  <caption>Table: Power management differences</caption>
+  <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> 
+</table>
+
+
+<h4 id="codec" name="codec">Supported Media Formats and Codecs</h4>
+
+ <table border="1">
+  <caption>Table: Media format and codec differences</caption>
+  <tbody>  
+ 
+ <tr>
+       <th colspan="2">Category</th>
+       <th>Physical target</th>
+       <th>Emulator</th>
+</tr>
+   <tr>
+ <td rowspan="1">Decoder</td>
+     
+     <td>FLAC</td>
+        <td>Supported</td>
+        <td>Not supported</td>
+        </tr> 
+        <tr>
+        <td>Encoder</td>
+     <td>H.264</td>
+        <td>Supported</td>
+        <td>Not supported</td>
+        </tr>
+ </tbody>
+ </table>
+
+<h2 id="manager" name="manager">Emulator Manager</h2>
+<p>The Emulator Manager enables you to define certain hardware aspects of your own emulated device, such as screen resolution and RAM size, and to create multiple images, which is useful for testing multiple environments. With the Emulator Manager, you can also control and customize <a href="#vm">virtual machines</a>.</p>
+
+<p>The VM list contains all VM versions. <span style="font-family: Courier New,Courier,monospace">&lt;Profile&gt;&lt;VERSION&gt;</span> refers to the image version. The list under the <strong>mobile-custom</strong> or <strong>wearable-custom</strong> group depends on the profile but not the version.</p>
+
+<p>When you create a new VM by clicking <strong>Create New VM</strong> or <strong>Create New</strong> in the list, the VM is added under the current group. You can modify and delete the VMs you have added.</p>
+
+<p class="figure">Figure: Emulator Manager</p>
+
+<p style="text-align:center;"><img alt="Emulator Manager"
+src="../images/emulator_manager.png" /></p>
+
+<p>To start the Emulator Manager:</p>
+<ul>
+<li>Using the Desktop or Start menu: 
+       <ul>
+               <li>In Linux: <strong>Desktop &gt; Applications &gt; Tizen SDK &gt; Emulator Manager</strong></li>
+               <li>In Windows&reg;: <strong>Start &gt; All Programs &gt; Tizen SDK &gt; Emulator Manager</strong></li>
+       </ul>
+</li>
+<li>Using the command line:
+
+To start the Emulator Manager, type the following command in the Emulator installation directory at the command line (<span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator</span>):
+       <ul>
+               <li>In Linux:
+               <pre class="prettyprint">$./bin/em-cli</pre></li>
+               <li>In Windows&reg;:
+               <pre class="prettyprint">bin\em-cli.exe</pre></li>
+       </ul>
+</li>
+<li>Using the command line with arguments:
+<p>You can use all the Emulator functions through the command line interface commands.</p>
+
+<p class="figure">Figure: Emulator Manager command line</p> 
+<p style="text-align:center;"><img alt="Emulator Manager command line" src="../images/emulator_cli.png" /></p> 
+</li>
+</ul>
+
+<p>To stop the Emulator, right-click the Emulator and select <strong>Close</strong>.</p>
+
+
+<h3 id="vm" name="vm">Virtual Machine</h3>
+<p>A virtual machine (VM) is a set of hardware options including the file system image. The Emulator Manager controls the virtual machines. When you launch the Emulator, you can specify the VM that you want to customize. Each VM has its own Emulator file system image. In other words, different VMs have different states of Emulators.</p>
+<table class="note">
+
+      <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">If you update the <span style="font-family: Courier New,Courier,monospace">EMULATOR_IMAGE</span> package on Tizen SDK Install Manager, existing VMs are not launched properly as the Base Image file is modified. To use the existing VMs after updating, the Emulator Manager provides the &#39;creating a base image&#39; feature through the <strong>Export as</strong> button. With this functionality, you can keep the existing VMs in the new Base Image.</td>
+        </tr>
+      </tbody>
+    </table>
+<p>On the Emulator Manager:</p>
+<ul>
+<li>To create a VM, select <strong>Create New</strong> and then click <strong>Confirm</strong>.</li>
+<li>To modify a VM, click the <strong>Modify</strong> icon (<img alt="Modify icon" src="../images/mod_icon.png" />), make the appropriate changes, and click <strong>Confirm</strong>.</li>
+<li>To delete a VM, click <strong>Delete</strong> or press the <strong>Delete</strong> keyboard key (<strong>fn + Delete</strong> in Mac OS&reg; X).</li>
+<li>To create a base image of a VM, select the VM and <strong>Export as</strong>, and enter a name and location for the base image.</li>
+<li>To launch a VM, click the <strong>Launch</strong> button (<img alt="launch" src="../images/launch.png" />) or press the <strong>Enter</strong> keyboard key.</li>
+</ul>
+
+<p>You can set the following VM details:</p>
+<ul>
+<li>Name
+<p>The following rules apply for naming a VM:</p>
+<ul>
+<li>The length of the name must be at most 20 characters.</li>
+<li>Different VMs must not have the same name.</li>
+<li>Only the following characters are accepted: -, _, 0-9, a - z, and A - Z</li>
+</ul></li>
+
+<li>Base Image
+<p>You can use the default base image. You can also change the base image and choose another image when you create a VM by clicking <strong>Create New</strong> under the &quot;mobile-custom/wearable-custom&quot; tab folder. This new VM is added under the &quot;each custom&quot; group. The correct image file extension of the custom base image is <span style="font-family: Courier New,Courier,monospace">.x86</span>.</p></li>
+
+<li>Display Resolution
+<p>Note that the following resolution has its own default display density.</p>
+<ul>
+  <li>Mobile
+  <ul>
+    <li>480 x 800 (WVGA)</li>
+       <li>540 x 960 (qHD)</li>
+    <li>720 x 1280 (HD)</li>
+  </ul></li>
+  <li>Wearable
+  <ul>
+    <li>320 x 320</li>
+    <li>360 x 480</li>
+  </ul></li> 
+</ul>
+</li>
+
+<li>Display Density
+<p>DPI (Dots Per Inch) value of the Emulator. The DPI depends on the display resolution.</p>
+<ul>
+  <li>Mobile
+  <ul>
+    <li>233 (480 x 800)</li>
+       <li>220 (540 x 960)</li>
+    <li>306 (720 x 1280)</li>
+  </ul></li>
+  <li>Wearable
+  <ul>
+    <li>316 (320 x 320)</li>
+    <li>300 (360 x 480)</li>
+  </ul></li>
+</ul>
+</li>
+
+<li>Skin
+<p>The VM UI style. Select 1 or more of the available skins. The skin depends on the display resolution.</p></li>
+
+<li>RAM Size
+<p>The RAM size.</p>
+
+<table class="note">
+
+      <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">In Windows&reg;, only the 512 MB size is available.</td>
+        </tr>
+      </tbody>
+    </table>
+       
+<ul>
+<li>512 MB</li>
+<li>768 MB</li>
+<li>1024 MB</li>
+</ul></li>
+
+<li>File Sharing
+<p>You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to <strong>ON</strong> and define the input directory to share in the <strong>directory</strong> field. For more information, see <a href="emulator_features.htm#file">File Sharing</a>.</p></li>
+
+<li>CPU VT
+<p>The Emulator supports hardware virtualization. It is kvm on Ubuntu and HAX on Windows&reg;. If the host CPU supports hardware virtualization and a hardware virtualization module is installed, you can change this value. For more information, see <a href="emulator_features.htm#hw">Using Hardware Virtualization</a>.</p></li>
+
+<li>GPU
+<p>The Emulator supports hardware OpenGL&reg; acceleration. If the host graphic card driver supports hardware acceleration and you select <strong>ON</strong>, the feature operates properly. Otherwise, do not try to make the Emulator support hardware acceleration. If the GPU option is enabled, the rendering performance of the video player or camera can degrade.</p>
+</li>
+
+<li>Advanced Option
+<p>You can attach and detach devices.</p>
+<ul>
+  <li>Mobile
+  <ul>
+    <li>Sensor: accelerometer, gyroscope, geo-magnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>
+    <li>Device: camera, battery</li>
+    <li>Jack: ear jack, charger, USB</li>
+  </ul></li>
+  <li>Wearable
+  <ul>
+    <li>Sensor: accelerometer, gyroscope, geomagnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>
+    <li>Device: camera, battery</li>
+    <li>Jack: charger, USB</li>
+  </ul></li>
+</ul>
+</li>
+
+</ul>
+
+<h2 id="controls" name="controls">Emulator Control Keys and Menu</h2>
+
+<p>The Tizen Emulator provides a variety of control keys and menus.</p>
+<h3 id="general" name="general">General Purpose Skin</h3>
+<p>The image of the general purpose skin is generated by nine-patch image processing. The Emulator skin frame has the same appearance on every state of resolution, scale, or rotation. Unlike the <a href="#phone">profile-specific skin</a>, the layout of the general purpose skin is not configurable.</p>
+
+<ul>
+<li>Key window
+<p>The key window displays an independent hardware key input window, which can be moved to any position on the screen or docked to the left or right side of the main window. If the key window is docked with the main window, both windows can be moved together on the screen.</p>
+</li>
+<li>Toggle button
+<p>Use the toggle button to show or hide the key window.</p>
+</li>
+<li>Pair tag
+<p>The pair tag indicates that the Emulator main window and key window are in a pair. This tag is activated when the key window is open. The pair tag color changes every time the Emulator boot occurs.</p>
+</li>
+</ul>
+
+<p>The following figure illustrates the general purpose skin Emulator.</p>
+
+<p class="figure">Figure: General purpose skin Emulator</p>
+<p style="text-align:center;"><img align="center" alt="General purpose skin Emulator Wearable" src="../images/skin_emulator_wearable.png" /> <img align="center" alt="General purpose skin Emulator Mobile" src="../images/skin_emulator_mobile.png" /></p>
+
+<h3 id="phone" name="phone">Profile-specific Skin</h3>
+<p>The profile-specific skin has a real device-shaped image frame, and its hardware keys are on the main window skin. You can <a href="emulator_features.htm#skin">configure the profile-specific skin</a>.</p>
+
+
+<p class="figure">Figure: Profile-specific skin Emulator</p>
+
+<p style="text-align:center;"><img align="center" alt="Profile-specific skin Emulator Wearable" src="../images/emulator_controls_wearable.png" /> <img align="center" alt="Profile-specific skin Emulator Mobile" src="../images/emulator_controls_mobile.png" /></p>
+
+
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+               <tr>
+                       <td class="note">In Ubuntu, you need to change a global GNOME setting to view the menu icons:
+                       <ol>
+                       <li>In the command console, execute the <span style="font-family: Courier New,Courier,monospace">gconf-editor</span> command.</li>
+                       <li>In the tree, navigate to <strong>desktop &gt; gnome &gt; interface</strong>.</li>
+                       <li>Enable the <strong>menus_have_icons</strong> option.</li>
+                       </ol>
+               </td>
+               </tr>
+  </tbody>
+</table>
+
+<h3 id="controlkeys" name="controlkeys">Control Keys</h3>
+<p>The following keys are available on the Emulator:</p>
+<ul>
+       <li><strong>Menu</strong> (mobile only)
+               <p>When you tap, it opens a list of options available for the current screen.</p>
+               </li>
+  <li><strong>Home</strong> (mobile only)
+       <p>If you long press the <strong>Home</strong> key, the Task switcher application appears as in a real device. 
+               If you double-click the <strong>Home</strong> key, the Search application appears as in a real device.</p>
+       </li>   
+  <li><strong>Back</strong> (mobile only)
+       <p>When you tap, it returns to the previous screen.</p>
+       </li>   
+  <li><strong>Power</strong>
+       <p>You can power off the display by clicking the <strong>Power</strong> key in most general situations. 
+               Sometimes, the display does not power off though you click the <strong>Power</strong> key. 
+               This is to guarantee the operation of a current application, such as the Stopwatch in the Clock App. 
+               If you click <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)
+       <p>You can control the volume with the <strong>Volume Up</strong> and <strong>Volume Down</strong> keys.</p>
+       </li>
+</ul>
+
+
+
+<h3 id="menu" name="menu">Context Menu</h3>
+<p>You can access the context menu by right-clicking on the Emulator. In the menu, you can select:</p>
+
+<ul>
+<li>Emulator name (the top row in the menu)
+<p>Display the <strong>Detail Info</strong> window, showing the following information.</p>
+<table border="1">
+       <caption>Table: Emulator details</caption>
+               <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>       
+                       </tr>
+                       
+                       <tr>
+                         <td>VM Name</td>
+                         <td>VM name</td>
+                       </tr>
+
+                       <tr>
+                         <td>Skin Name</td>
+                         <td>Skin name</td>
+                       </tr>
+                                               
+                       <tr>
+                         <td>CPU</td>
+                         <td>CPU architecture</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>RAM Size</td>
+                         <td>RAM size (MB)</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>Display Resolution</td>
+                         <td>Target display resolution</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>Display Density</td>
+                         <td>DPI (dots per inch)</td>
+                       </tr>
+                       
+                                       
+                       <tr>
+                         <td>File Sharing</td>
+                         <td>Whether host file sharing is supported</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>File Shared Path</td>
+                         <td>Path to the shared host file</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>CPU Virtualization</td>
+                         <td>Whether hardware virtualization is supported</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>GPU Virtualization</td>
+                         <td>Whether GPU virtualization is supported</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>Image Path 1</td>
+                         <td>Target image path</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>Image Path 2</td>
+                         <td>Swap image path</td>
+                       </tr>
+                       
+                       <tr>
+                         <td>Log Path</td>
+                         <td>Emulator log file path</td>
+                       </tr>
+               </tbody>
+</table></li>
+
+<li><strong>Always On Top</strong>
+<p>Select this option to keep the Emulator window on top of other windows.</p>
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+               <tr>
+                       <td class="note">The <strong>Always On Top</strong> feature is not supported in Mac OS&reg; X.</td>
+               </tr>
+  </tbody>
+</table>
+</li>
+<li><strong>Rotate</strong>
+<p>Select either <strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, or <strong>Reverse Landscape</strong> as the orientation of the Emulator.</p></li>
+
+<li><strong>Scale</strong> (mobile only)
+<p>Scale the size of the Emulator between 1x, 1/2x (default), 3/4x, and 1/4x.</p></li>
+
+<li><strong>Key Window</strong>
+<p>Show or hide the key window.</p>
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+               <tr>
+                       <td class="note">The <strong>Key Window</strong> menu is not supported in the profile-specific skin.</td>
+               </tr>
+  </tbody>
+</table></li>
+<li><strong>Advanced &gt; Screenshot</strong>
+<p>Capture a screenshot of the Emulator.</p></li>
+
+<li><strong>Advanced &gt; About</strong>
+<p>Display the Emulator version, build time, and Git version.</p></li>
+
+<li><strong>Advanced &gt; Force Close</strong>
+<p>Force the Emulator to exit. Since force stopping the Emulator can cause problems, use the <strong>Close</strong> option to exit the Emulator. Use <strong>Force Close</strong> only when absolutely necessary.</p></li>
+
+<li><strong>Shell</strong>
+<p>Open a Smart Development Bridge (SDB) shell command window.</p></li>
+
+<li><strong>Control Panel</strong>
+<p>Help to control or monitor the state of the Emulator dynamically. </p></li>
+
+<li><strong>Close</strong>
+<p>Exit the Emulator.</p></li>
+
+</ul>
+
+ <h2 id="dir" name="dir">Emulator Directory Structure</h2>
+    
+<p>The following table describes the content of the Emulator directory, located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator</span> folder.</p>
+
+       <table border="1">
+               <caption>Table: Emulator directory content</caption>
+               <tbody>
+                       <tr>
+                               <th>Folder or file</th>
+                               <th>Description</th>
+                       </tr>
+
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/</span></td>
+                               <td>Binary files</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-control-panel.jar</span></td>
+                               <td>Emulator Control Panel</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-control-panel-cli.jar</span></td>
+                               <td>Emulator Control Panel CLI (Command Line Interface)</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-manager</span></td>
+                               <td>Emulator manager binary to launch the <span style="font-family: Courier New, Courier, monospace">emulator-manager.jar</span> file
+                               </td>
+                       </tr>
+
+
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-manager.jar</span></td>
+                               <td>Emulator manager jar, which can also launch the
+                                       Emulator with the <a href="#manager">Emulator
+                                               Manager</a>.
+                               </td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/em-cli</span></td>
+                               <td>Emulator manager CLI (Command Line Interface)</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-skin.jar</span></td>
+                               <td>Emulator skin</td>
+                       </tr>
+
+
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/emulator-x86</span></td>
+                               <td>x86 Emulator binary, including QEMU</td>
+                       </tr>
+
+
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/protobuf.jar</span></td>
+                               <td>Protocol buffer library</td>
+                       </tr>
+
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/libecp.jar</span></td>
+                               <td>profile independent library for ECP</td>
+                       </tr>
+                       
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/swt.jar</span></td>
+                               <td>SWT library</td>
+                       </tr>
+                       
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">bin/jna-&lt;version&gt;.jar</span></td>
+                               <td>JNA library</td>
+                       </tr>
+
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">data/bios/</span></td>
+                               <td><span style="font-family: Courier New, Courier, monospace">.bin</span>
+                                       files for initializing the guest OS</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">data/kernel/</span></td>
+                               <td>Kernel image for the guest Linux OS</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">storages/sdcard/sdcard_xxx.img</span></td>
+                               <td><span style="font-family: Courier New, Courier, monospace">.img</span>
+                                       files (base sdcard images) specific to the data size used by the
+                                       Emulator Manager</td>
+                       </tr>
+                       <tr>
+                               <td><span style="font-family: Courier New, Courier, monospace">storages/swap/swap.img</span></td>
+                               <td>Disk image for swap</td>
+                       </tr>
+               </tbody>
+       </table>
+
+       <p>The following table describes the platform directories that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/platform/&lt;Profile&gt;-&lt;VERSION&gt;/emulator-images</span> folder.</p>
+   
+  
+  <table border="1">
+  <caption>Table: Platform image directory content</caption>
+  <tbody>
+    <tr>
+           <th>Name</th>
+               <th>Description</th>
+       </tr>
+        
+<tr>
+       <td><span style="font-family: Courier New,Courier,monospace">x86-standard/</span></td>  
+       <td>Platform directory</td>
+       </tr> 
+         <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">x86-standard/emuling-&lt;VERSION&gt;.x86</span></td>       
+       <td>Base image, which represents an Emulator root file system for x86 in the guest OS view</td>
+       </tr>  
+  <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">x86-standard/info.ini</span></td>  
+       <td>File for specifying information of the Emulator disk image</td>
+       </tr> 
+ </tbody>
+</table>       
+
+<p>The following table describes the platform directories that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/platforms/&lt;Profile&gt;-&lt;VERSION&gt;/emulator-resources</span> folder.</p>
+<table border="1">
+  <caption>Table: Platform directory resource content</caption>
+  <tbody>
+    <tr>
+           <th>Name</th>
+               <th>Description</th>
+       </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">plugins/</span></td>       
+       <td>Plugins for profile</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">plugins/ecp-plugin.jar</span></td> 
+       <td>Plugin for the Emulator Control Panel</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">plugins/ecp-plugin.xml</span></td> 
+       <td>XML file for the <span style="font-family: Courier New,Courier,monospace">ecp-plugin.jar</span> file configuration</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">plugins/em-plugin.jar</span></td>  
+       <td>Plugin for the Emulator Manager</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">skins/</span></td> 
+       <td>Emulator skin images specific to the Emulator resolution, and icons for the Emulator option button and shortcut</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;skin name&gt;/default.dbi</span></td>    
+       <td>Metafile for the Emulator skin layout</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;skin name&gt;/info.ini</span></td>       
+       <td>File for specifying Emulator skin information</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">template/&lt;image name&gt;.xml</span></td>        
+       <td>XML file for default configuration of the virtual machine created by the Emulator Manage</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">template/&lt;image name&gt;-template.xml</span></td>       
+       <td>XML file for the template of the virtual machine created by the Emulator Manager</td>
+       </tr>
+</tbody>
+</table>
+
+    
+<p>The following table describes the directory structure of the user-specific files that are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;/emulator/vms</span> folder.</p>
+   
+  
+  <table border="1">
+  <caption>Table: User directory content</caption>
+  <tbody>
+    <tr>
+           <th>Name</th>
+               <th>Description</th>
+       </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">emulator-manager.log</span></td>   
+       <td>Emulator Manager log file</td>
+       </tr>   
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">last-created_&lt;PROFILE&gt;-&lt;VERSION&gt;_&lt;image name&gt;.xml</span></td>    
+       <td>This file saves properties of VM that user created last. And when user create new VM next time, properties in this file is displayed as default</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">.em.lock</span></td>       
+       <td>This lock file is used for synchronization between VM operation like modify, delete, launch</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">.tizen-em-info</span></td> 
+       <td>Configuration file for Emulator Manager</td>
+       </tr>
+ <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/</span></td>    
+       <td>Target-specific images</td>
+       </tr>   
+ <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/.skin.properties</span></td>    
+       <td>Hidden data for the Emulator skin</td>
+       </tr>    
+  <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/emulimg-&lt;image name&gt;.x86</span></td>      
+       <td>Writable <span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;</span> image file</td>
+       </tr> 
+         <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/swap-&lt;image name&gt;.img</span></td> 
+       <td>Swap image file</td>
+       </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/vm_config.xml</span></td>       
+       <td>Hardware configuration (for more information, see <a href="#vm">Virtual Machine</a>)</td>
+       </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/${USER}.lock</span></td>        
+       <td>This lock file is used for synchronization between VM and Emulator Control Panel to set/get operations</td>
+       </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">&lt;image name&gt;/logs/</span></td>       
+       <td>Log files (Emulator, kernel, emulator-skin log)</td>
+       </tr>
+ </tbody>
+</table> 
+
+ 
+<h2 id="ecp" name="ecp">Emulator Control Panel</h2>
+<p>The Emulator Control Panel (ECP) is a tool to control and monitor the state of the Emulator dynamically.</p>
+
+<p>To access the ECP:</p>
+
+<ol>
+<li>Start the Emulator.</li>
+<li>Right-click the Emulator and select <strong>Control Panel</strong>.</li>
+</ol>
+
+<p>The main features of ECP:</p> 
+<ul>
+
+       <li>Command line interface (CLI)
+       <p>ECP CLI provides functional tools for controlling the Tizen Emulator without using the ECP UI application.</p>
+
+<p>The CLI is located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin</span> directory.</p>
+
+<p>The main features of the CLI are:</p>
+
+<ul><li>Mode:
+<ul><li>Session mode
+<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 <span style="font-family: Courier New,Courier,monospace">exit</span> command.</p></li>
+<li>Shell mode
+<p>This mode is used for one-time message handling.</p></li></ul></li>
+<li>Bash completion in Linux:
+<p>In both shell and session mode, the auto completion is used with the TAB button.</p></li></ul>
+
+<p class="figure">Figure: Session and shell modes</p> 
+<p style="text-align: center;"> <img alt="Session and shell modes" src="../images/ecp_cli_modes.png" /> </p> 
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The ECP CLI supports all the functionalities of the ECP UI application.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+ 
+
+<p>The following tables list the supported commands of the ECP CLI.</p>
+
+<table>
+<caption>Table: CLI Common commands</caption>
+<tbody>
+<tr>
+ <th>Commands</th>
+ <th>Syntax</th>
+ <th>Description</th>
+</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">help</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">help [device]</span></td>
+ <td>To get help, type the command as <span style="font-family: Courier New,Courier,monospace">help</span>. For more a specific device help, use the device parameter.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">keycode</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">keycode &lt;key-code&gt; [period|press|release]</span></td>
+ <td>To enter a key code for a mobile device:
+ <ul><li>114: volume down</li>
+<li>115: volume up</li>
+<li>139: HOME</li>
+<li>158: BACK</li>
+<li>189: MENU</li></ul></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">hmp</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">hmp &lt;hmp command&gt;</span></td>
+ <td>Access the QEMU human monitor protocol commands. For a list of provided commands, enter the <span style="font-family: Courier New,Courier,monospace">ecp-cli hmp help</span> command.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">qmp</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">qmp &lt;qmp command&gt;</span></td>
+ <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <span style="font-family: Courier New,Courier,monospace">{ &quot;execute&quot;: &quot;qmp_capabilities&quot; }</span> 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>
+ </tr>
+ <tr>
+ <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">hds</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">hds mount &lt;path&gt;</span></td>
+ <td>Enable the host directory sharing feature with the specified host path to <span style="font-family: Courier New,Courier,monospace">/mnt/hosts</span> in the Emulator. The specified path must be a folder, not a file.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">hds unmount</span></td>
+ <td>Unmount the mounted host directory sharing path.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">hds status</span></td>
+ <td>Show the current host directory sharing status.</td>
+ </tr>
+ </tbody></table> 
+
+<table>
+<caption>Table: CLI profile commands</caption>
+<tbody>
+<tr>
+ <th>Device</th>
+ <th>Command</th>
+ <th>Mobile</th>
+ <th>Wearable</th>
+ <th>Syntax</th> 
+</tr>
+
+ <tr>
+ <td rowspan="5">call</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">dial</span></td>
+ <td rowspan="5">Yes</td>
+ <td rowspan="5">No</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">call dial &lt;number&gt;</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">hidden-dial</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">call hidden-dial &lt;number&gt;</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">connect</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">call connect</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">disconnect</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">call disconnect &lt;call id&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">call status</span></td>
+ </tr>                         
+ <tr>
+ <td rowspan="4">sms</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">send</span></td>
+ <td rowspan="4">Yes</td>
+ <td rowspan="4">No</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">sms send &lt;number&gt; &lt;text&gt;</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">set status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sms set &lt;available | unavailable&gt;</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sms status</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">mms_status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sms mms_status</span></td>
+ </tr> 
+ <tr>
+ <td rowspan="4">location</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="4">Yes</td>
+ <td rowspan="4">Yes</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">location set &lt;longitude> &lt;latitude&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">location status</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">stop</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">location stop</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">location file &lt;file-path&gt;</span></td>
+ </tr>
+ <tr>
+ <td rowspan="3">battery</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">level</span></td>
+ <td rowspan="3">Yes</td>
+ <td rowspan="3">Yes</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">battery level &lt;percent&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">charger</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">battery charger &lt;on | off&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">battery status</span></td>
+ </tr>
+ <tr>
+ <td rowspan="2">earjack</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2">Yes</td>
+ <td rowspan="2">No</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">earjack set &lt;3wire | 4wire | off&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">earjack status</span></td>
+ </tr>
+ <tr>
+ <td rowspan="2">usb</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2">Yes</td>
+ <td rowspan="2">Yes</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">usb set &lt;on | off&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">usb status</span></td>
+ </tr>
+ <tr>
+ <td rowspan="2">rssi</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
+ <td rowspan="2">Yes</td>
+ <td rowspan="2">No</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">rssi set &lt;0~4&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">rssi status</span></td>
+ </tr>
+ <tr>
+ <td rowspan="3">sdcard</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">mount</span></td>
+ <td rowspan="3">Yes</td>
+ <td rowspan="3">No</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">sdcard mount &lt;sdcard_ext4_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">unmount</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sdcard unmount</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sdcard status</span></td>
+ </tr>
+ <tr>
+ <td rowspan="10">sensor</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">accelerometer</span></td>
+ <td rowspan="10">Yes</td>
+ <td rowspan="10">Yes</td> 
+ <td><span style="font-family: Courier New,Courier,monospace">sensor accelerometer &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
+ </tr> 
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">gyroscope</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor gyroscope &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">magnetic</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor magnetic &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">proximity</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor proximity &lt;value&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">light</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor light &lt;value&gt;</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">pressure</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor pressure &lt;level&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">uv</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor uv &lt;level&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">hrm</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor hrm &lt;level&gt;</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor status [sensor]</span></td>
+ </tr>
+  <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor file &lt;sensor> &lt;path&gt;</span></td>
+ </tr>
+ </tbody></table>
+       </li>
+    <li>Device Manager
+       <p>The following table lists the Device Manager features and their availability on different profiles.</p>
+
+            <table border="1">
+                <caption>Table: Device Manager features</caption>
+         <tbody>
+
+          <tr>
+                       <th>Feature</th>
+                       <th>Mobile</th>       
+                       <th>Wearable</th>
+                               <th>Description</th>
+          </tr>
+  
+          <tr>
+                       <td>Device Tree</td>
+                       <td>Yes</td>
+                       <td>No</td>
+                       <td>The Device Tree is a data structure for describing hardware. 
+                               You can see the device information that actually loaded in the main system bus. 
+                               It shows a simple tree structure of nodes and properties. Nodes are generally a device or another bus. 
+                               Properties are key-value pairs where the value can either be empty or contain an arbitrary byte stream.</td>
+                     </tr>
+               
+                     <tr>
+                       <td>Network</td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can view a network device list and control the user network. 
+                               To forward a remote or local port to an inside port of the Emulator, click <strong>Add port–forwarding</strong>, 
+                               enter values in text boxes, and click <strong>Apply port–forwarding</strong>.</td>
+                     </tr>
+                         
+                         <tr>
+                       <td>Host Directory Sharing</td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>The specified host directory is mounted to <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> to share resources. Therefore, the file transfer is possible through the host directory sharing feature without using the sdb utility.</td>
+                     </tr>
+               
+          </tbody>  
+        </table>  </li>
+    
+    <li>App Manager
+       <p>The following table lists the App Manager features and their availability on different profiles.</p>
+       
+            <table border="1">
+                <caption>Table: App Manager features</caption>
+         <tbody>
+
+          <tr>
+                       <th>Feature</th>
+                       <th>Mobile</th>       
+                       <th>Wearable</th>
+                               <th>Description</th>
+          </tr>
+  
+          <tr>
+                       <td>Uninstaller</td>
+                       <td>No</td>
+                       <td>Yes</td>
+                       <td>You can see user-installed applications and uninstall them.</td>
+                     </tr>             
+                     
+          </tbody>  
+        </table>  
+</li>
+  
+  
+       <li>Event Injector
+       <p>The following table lists the <a href="event_injec.htm">Event Injector</a> features and their availability on different profiles.</p>
+       
+                    <table border="1">
+                        <caption>Table: Event Injector features</caption>
+         <tbody>
+
+          <tr>
+                       <th colspan = "2">Feature</th>
+                       <th>Mobile</th>       
+                       <th>Wearable</th>
+                               <th>Description</th>
+          </tr>
+  
+          <tr>
+                       <td colspan = "2"><a href="event_injec.htm#device">Battery</a></td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can set the battery level using the Level slider. 
+                               To set the charger status to connected or disconnected, select the appropriate Charger radio button.</td>
+                     </tr>
+                     
+                     <tr>
+                       <td colspan = "2"><a href="event_injec.htm#device">RSSI</a></td>
+                       <td>Yes</td>
+                       <td>No</td>
+                       <td>You can set the remote signal strength using the level bar.</td>
+                     </tr>             
+                     
+                     <tr>
+                       <td rowspan = "6"><a href="event_injec.htm#sensor">Sensor</a></td>      
+                       <td>3-Axis Sensor</td>                          
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject user acceleration, magnetic, gyroscope using slider bars or text input.</td>         
+                     </tr>                                    
+                     
+                     <tr>
+                       <td>Light</td>                          
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject a lux value into light sensor. 
+                               If you set brightness as auto, then display will be changed by injecting light value.</td>                               
+               </tr>
+
+               <tr>
+                        <td>Proximity</td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject the presence of nearby objects.</td> 
+               </tr>
+               
+               <tr>
+                        <td>Pressure</td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject a hPa value into the pressure sensor.</td>   
+               </tr>
+               
+               <tr>
+                        <td>Ultraviolet</td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject an ultraviolet index.</td>   
+               </tr>
+               <tr>
+                        <td>Heart Rate Monitor</td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject the heart rate and peek-to-peek time in milliseconds.</td>   
+               </tr>                   
+
+          <tr>
+                       <td colspan = "2"><a href="event_injec.htm#device">Ear Jack</a></td>
+                       <td>Yes</td>
+                       <td>No</td>
+                       <td> You can inject adding or removing headset.</td>
+                     </tr>
+                     
+                     <tr>
+                       <td colspan = "2">Gesture</td>
+                       <td>No</td>
+                       <td>Yes</td>
+                       <td>You can inject flick up (menu button) or flick down (back button) events in the wearable profile.</td>
+                     </tr>
+                     
+                     <tr>
+                       <td colspan = "2"><a href="event_injec.htm#device">USB</a></td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can add or remove a USB device by setting the USB device setting to the connected or disconnected state.</td>
+                     </tr>
+                     
+                     <tr>
+                       <td colspan = "2"><a href="event_injec.htm#device">SDCard</a></td>
+                       <td>Yes</td>
+                       <td>No</td>
+                       <td>You can inject 4, 8, 16, or 32G SD card.</td>
+                     </tr>
+                     
+                     <tr>
+                       <td colspan = "2"><a href="event_injec.htm#location">Location</a></td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can inject latitude and longitude value via map. Also you can inject these manually. Log file as well.</td>
+                     </tr>
+                     
+                     <tr>
+                       <td colspan = "2"><a href="event_injec.htm#telephony">Telephony</a></td>
+                       <td>Yes</td>
+                       <td>Yes</td>
+                       <td>You can make/receive a call via Call tab. Also you can send/receive SMS via SMS tab.</td>
+                     </tr>
+                                     
+          </tbody>  
+        </table> 
+</li>
+</ul>
+
+<p>The ECP supports the following shortcuts:</p>
+<ul>
+       <li>Key shortcuts for Windows&reg; and Ubuntu&reg; (Alt + &lt;Key&gt;)
+       <table border="1">
+       <tbody>
+                               <tr align="center">
+                                       <th colspan="2">Common</th>
+                                       <th colspan="2">Mobile</th>
+                                       <th colspan="2">Wearable</th>
+                               </tr>
+                               <tr align="center">
+                                       <th>Key</th>
+                                       <th>Device</th>
+                                       <th>Key</th>
+                                       <th>Device</th>
+                                       <th>Key</th>
+                                       <th>Device</th>
+                               </tr>
+                               <tr align="center">
+                                       <td>D</td>
+                                       <td>Device Tree</td>
+                                       <td>B</td>
+                                       <td>Battery</td>
+                                       <td>B</td>
+                                       <td>Battery</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>N</td>
+                                       <td>Network</td>
+                                       <td>R</td>
+                                       <td>RSSI</td>
+                                       <td>A</td>
+                                       <td>3-Axis sensor</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>U</td>
+                                       <td>Uninstaller</td>
+                                       <td>A</td>
+                                       <td>3-Axis sensor</td>
+                                       <td>I</td>
+                                       <td>Light</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>H</td>
+                                       <td>HDS (Host Directory Sharing)</td>
+                                       <td>I</td>
+                                       <td>Light</td>
+                                       <td>X</td>
+                                       <td>Proximity</td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>X</td>
+                                       <td>Proximity</td>
+                                       <td>E</td>
+                                       <td>Pressure</td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>E</td>
+                                       <td>Pressure</td>
+                                       <td>V</td>
+                                       <td>Ultraviolet</td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>V</td>
+                                       <td>Ultraviolet</td>
+                                       <td>M</td>
+                                       <td>Heart Rate Monitor</td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>M</td>
+                                       <td>Heart Rate Monitor</td>
+                                       <td>G</td>
+                                       <td>Touch gesture</td>
+                               </tr>                           
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>K</td>
+                                       <td>Ear Jack</td>
+                                       <td>S</td>
+                                       <td>USB</td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>S</td>
+                                       <td>USB</td>
+                                       <td></td>
+                                       <td></td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>D</td>
+                                       <td>SD Card</td>
+                                       <td></td>
+                                       <td></td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>L</td>
+                                       <td>Location</td>
+                                       <td></td>
+                                       <td></td>
+                               </tr>
+                               <tr align="center">
+                                       <td></td>
+                                       <td></td>
+                                       <td>T</td>
+                                       <td>Telephony</td>
+                                       <td></td>
+                                       <td></td>
+                               </tr>
+               </tbody>
+                       </table>
+               </li>
+               <li>Arrows and tabs in the menu
+                       <table border="1">
+                       <tbody>
+                               <tr align="center">
+                                       <th>Key</th>
+                                       <th>Action</th>
+                               </tr>
+                               <tr align="center">
+                                       <td>Up Arrow</td>
+                                       <td>Upper menu focus movement</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>Down Arrow</td>
+                                       <td>Underneath menu focus movement</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>Left Arrow</td>
+                                       <td>Collapse tree menu</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>Right Arrow</td>
+                                       <td>Expand tree menu</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>Tab</td>
+                                       <td>Move focus to next control</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>Shift + Tab</td>
+                                       <td>Move focus to previous control</td>
+                               </tr>
+                               <tr align="center">
+                                       <td>Enter</td>
+                                       <td>Menu selection</td>
+                               </tr>
+                               </tbody>
+                       </table>
+               </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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/common_tools/emulator_features.htm b/org.tizen.devtools/html/common_tools/emulator_features.htm
new file mode 100644 (file)
index 0000000..0503c4e
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/emulator_features.htm
@@ -0,0 +1,512 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Extended Emulator Features </title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#multi">Using Multi-point Touch</a></li>
+                       <li><a href="#webcam">Using a Webcam</a></li>
+                       <li><a href="#net">Using Emulator in a Network</a></li>
+                       <li><a href="#skin">Using Custom Skin Layout</a></li>
+                       <li><a href="#file">File Sharing</a></li>
+                       <li><a href="#hw">Using Hardware Virtualization</a></li>
+                       <li><a href="#eventcast">Using EventCast</a></li>
+               </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Using the Extended Emulator Features</h1>
+<p>The Emulator features can be extended in many ways. With the Emulator, you can:</p>
+<ul>
+<li><a href="#multi">Use multi-point touch</a></li>
+<li><a href="#webcam">Use a Webcam</a></li>
+<li><a href="#net">Use network features</a></li>
+<li><a href="#skin">Use custom skin layout</a></li>
+<li><a href="#file">Share files</a></li>
+<li><a href="#hw">Use hardware virtualization</a></li>
+<li><a href="#eventcast">Use EventCast</a></li>
+</ul>
+
+<h2 id="multi" name="multi">Using Multi-point Touch</h2>
+
+<p>To create a multi-point touch effect in the Emulator, press and hold the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS&reg; X), while mouse-clicking on the Emulator screen.</p>
+
+<h3 id="add" name="add">Adding a Touch Point</h3>
+
+<p>To add a touch point on the Emulator screen, press and hold the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS&reg; X) and mouse-click a point on the screen.</p>
+<p>You can add touch points up to the maximum amount of multi-point touches. To get the maximum amount, use the <span
+      style="font-family: Courier New,Courier,monospace">System::SystemInfo::GetValue()</span> method with the <span
+      style="font-family: Courier New,Courier,monospace">MultiPointTouchCount</span> key.</p>
+
+<p class="figure">Figure: Adding a touch point</p>
+
+<p style="text-align:center;"><img alt="Adding a touch point"
+src="../images/multitouch_add.png"
+style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
+
+<h3 id="move" name="move">Moving an Existing Point</h3>
+
+<p>To move an existing point, press and hold the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS&reg; X), mouse-click an existing point, and move it to another location on the screen.</p>
+
+<p class="figure">Figure: Moving an existing point</p>
+
+<p style="text-align:center;"><img alt="Moving an existing point"
+src="../images/multitouch_move.png"
+style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
+
+<h3 id="end" name="end">Ending the Multi-point Touch</h3>
+
+<p>To end the multi-point touch, release the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS&reg; X). The touched points on the Emulator screen are invalidated, and the next screen touch event is read as a new event, not part of the previous multi-point touch event.</p>
+
+<p class="figure">Figure: Invalidating touched points</p>
+
+<p style="text-align:center;"><img alt="Invalidating touched points"
+src="../images/multitouch_invalidate.png"
+style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
+
+<h2 id="webcam" name="webcam">Using a Webcam</h2>
+<p>With the Emulator, you can host a Webcam just like a device camera.</p>
+
+<p>Before running the application, install a USB-connected Webcam or embedded Webcam on your machine. On Linux, the Webcam feature uses libv4l-0. If you do not have it on your machine, this feature does not work properly. You can check the feature status with the following command:</p>
+<pre class="prettyprint">$ dpkg -l | grep libv4l-0</pre>
+<table class="note">
+
+      <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">
+                 <ul>
+                 <li>The Webcam must support video4linux2. (Currently, only &#39;/dev/video0&#39; is supported.)</li>
+<li>Multiple instances of the Emulator can be launched, but only a single Emulator instance can use the camera feature.</li>
+<li>Depending on the Webcam in use, the Emulator camera feature may not work properly.</li>
+</ul>
+</td>
+        </tr>
+      </tbody>
+    </table>
+<p>The following table lists the host Webcam features.</p>
+<table style="width: 100%" border="1">
+  <caption>Table: Webcam features</caption>
+  
+  <col width="25%"/>
+  <col width="25%"/>
+  <col width="50%"/>
+  <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;">
+        Detail</th>
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">
+        Notes</th>
+               </tr>
+       
+<tr>
+<td>FPS</td>
+<td>30 fps</td>
+<td>-</td>
+</tr>
+<tr>
+<td>Preview image format</td>
+<td>YUYV<br/>
+I420<br/>
+YV12<br/> 
+</td>
+<td>-</td>
+</tr>
+
+<tr>
+<td>Capture image format </td>
+<td>YUYV<br/>
+I420<br/>
+YV12<br/>
+JPEG<br/> 
+</td>
+<td>-</td>
+</tr>
+<tr>
+<td>Preview resolution</td>
+<td>QSIF: 160 x 120<br/>
+QCIF: 176 x 144<br/>
+QVGA: 320 x 240<br/>
+CIF: 352 x 288<br/>
+VGA: 640 x 480<br/>
+</td>
+<td>-</td>
+</tr>
+<tr>
+<td>Capture resolution</td>
+<td>QSIF: 160 x 120<br/>
+QCIF: 176 x 144<br/>
+QVGA: 320 x 240<br/>
+CIF: 352 x 288<br/>
+VGA: 640 x 480<br/> 
+</td>
+<td>-</td>
+</tr>
+<tr>
+<td>Attributes</td>
+<td>Brightness<br/>
+Contrast<br/> 
+</td>
+<td>Unsupported attributes can return an error. For example, the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> method returns an error.</td>
+</tr>
+</tbody>
+</table>
+
+
+<h2 id="net" name="net">Using Emulator in a Network</h2>
+
+
+<p>The Tizen Emulator is based on the QEMU virtual machine, and uses QEMU user networking (SLIRP), which is the default networking backend and generally the easiest to use. The Emulator supports TCP and UDP, and &quot;ping&quot; within a guest (QEMU is patched for ping to work; however, raw socket is not supported). For more information, see <a href="http://wiki.qemu.org/Documentation/Networking" target="_blank">QEMU Networking documentation</a>.</p> 
+
+<p>The Emulator provides a sub-network, such as the following:</p> 
+<ul>
+<li>10.0.2.2: Gateway, host machine</li>
+
+<li>10.0.2.3: DNS (you can specify the Emulator to use the host DNS IP when the Emulator starts)</li> 
+
+<li>10.0.2.16: Guest OS IP (different from QEMU&#39;s default setting of 10.0.2.15)</li> 
+</ul>
+
+<p class="figure">Figure: Emulator network architecture</p>
+
+<p style="text-align:center;"><img alt="Emulator network architecture"
+src="../images/emulator_network_architecture.png"/></p>
+
+<h3 id="network" name="network">Network Connections</h3>
+
+The Emulator provides the following network connection solutions (external to internal): 
+<ul>
+<li>Guest to External: Connection available</li> 
+
+<li>External to Guest: Port redirection required when starting to boot
+<p>The QEMU redirection option can be appended in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;/emulator/vms/&lt;image name&gt;/vm_config.xml</span> file with the following appending command:</p>
+<pre class="prettyprint">-redir &lt;PROTOCOL&gt;:&lt;HOST_PORT&gt;:10.0.2.16:&lt;GUEST_PORT&gt;</pre>
+<p>Note that <span style="font-family: Courier New,Courier,monospace">&lt;PROTOCOL&gt;</span> supports only  <span style="font-family: Courier New,Courier,monospace">udp</span> and <span style="font-family: Courier New,Courier,monospace">tcp</span> in the <span style="font-family: Courier New,Courier,monospace">&lt;advancedOptions&gt;</span> section:</p>
+<pre class="prettyprint">&lt;usability&gt;
+&nbsp;&nbsp;&nbsp;&lt;logging&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;level&gt;NONE&lt;/level&gt;
+&nbsp;&nbsp;&nbsp;&lt;/logging&gt;
+&nbsp;&nbsp;&nbsp;&lt;fileSharing/&gt;
+&nbsp;&nbsp;&nbsp;&lt;hwVirtualization&gt;true&lt;/hwVirtualization&gt;
+&nbsp;&nbsp;&nbsp;&lt;advancedOptions&gt;-redir tcp:1202:10.0.2.16:22&lt;/advancedOptions&gt;
+&lt;/usability&gt;</pre>
+
+<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 <span style="font-family: Courier New,Courier,monospace">10.0.2.16:&lt;ServerPort&gt;</span>.</li> 
+
+<li>On A, append the <span style="font-family: Courier New,Courier,monospace">-redir tcp:&lt;B&#39;s localPort&gt;:10.0.2.16:&lt;A&#39;s serverPort&gt;</span> redirection option in the <span style="font-family: Courier New,Courier,monospace">vm_config.xml</span> file.</li> 
+
+<li>On B, let the client connect to <span style="font-family: Courier New,Courier,monospace">10.0.2.2:&lt;B&#39;s localPort&gt;</span>.
+</li></ol>
+
+</li> 
+
+</ul>
+
+<p>For more information, see <a href="http://www.h7.dion.ne.jp/%7Eqemu-win/HowToNetwork-en.html#redir" shape="rect" target="_blank">How to use Network</a>.</p> 
+
+<h3 id="proxy" name="proxy">Proxy Configuration</h3>
+<p>The Tizen Emulator uses a host network proxy when connecting to the Internet.</p> 
+<p>Direct Internet and manual proxy configuration are supported, but the following preallocated addresses are not supported as a manual proxy:</p>
+<ul>
+<li>Localhost</li>
+<li>127.0.0.0/8</li>
+<li>10.0.0.0/16</li>   
+</ul>
+<p>The automatic proxy configuration is not supported, due to license issues.</p>
+
+
+
+<h2 id="skin" name="skin">Using Custom Skin Layout</h2>
+
+<p>An Emulator skin comprises an XML meta file, which defines layout-related information, such as skin image file name, display location, and the location of hardware keys. This file is located in <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/platform/&lt;PROFILE_NAME&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt;/default.dbi</span>.</p>
+
+<p>The following example shows the contents of the <span style="font-family: Courier New,Courier,monospace">default.dbi</span> 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/skin/dbi&quot;
+&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dbi version=&quot;2.0&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;rotations&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Skin mode definition --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;rotation name=&quot;Portrait&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Display number of identification --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;display id=&quot;0&quot;&gt;&quot;&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;35&quot; top=&quot;86&quot; width=&quot;480&quot; height=&quot;800&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/display&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;imageList&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;mainImage&gt;default_0.png&lt;/mainImage&gt;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Resource file name of the skin image when HW key events occur --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;keyPressedImage&gt;default_0_p.png&lt;/keyPressedImage&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/imageList&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;keyMapList&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;keyMap&gt; &lt;!-- Optional --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- HW 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;238&quot; top=&quot;887&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;eventInfo&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;keyName&gt;HOME&lt;/keyName&gt; &lt;!-- HW key name --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/eventInfo&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 HW 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;&lt;/keyMap&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/keyMapList&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/rotation&gt;
+&nbsp;&nbsp;&nbsp;&lt;/rotations&gt;
+&nbsp;&nbsp;&nbsp;&lt;hover&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- RGB color of the HW key hover --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;color B=&quot;255&quot; G=&quot;255&quot; R=&quot;255&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&lt;/hover&gt;
+&lt;/EmulatorUI&gt;</pre>
+
+<p>The Emulator skin also comprises a property file, which defines skin-related information, such as skin name and supported resolutions. This file is located in <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/skins/&lt;SKIN_NAME&gt;/info.ini</span>.</p>
+
+<p>The following example shows the contents of the <span style="font-family: Courier New,Courier,monospace">info.ini</span> property file:</p>
+<pre class="prettyprint">skin.name=Phone 480x800
+resolution.width=480
+resolution.height=800
+</pre>
+
+
+<p>To create your own skin layout:</p>
+<ol>
+       <li>Create a new skin folder in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/skins/</span> folder.</li>
+       <li>In the skin folder, define the contents of the <span style="font-family: Courier New,Courier,monospace">default.dbi</span> and <span style="font-family: Courier New,Courier,monospace">info.ini</span> files and include the required skin image files.</li>
+       <li><p>Select the skin name in the <a href="emulator.htm#manager">Emulator Manager</a>. You can also use the <a href="emulator.htm#startup">Emulator start-up options</a> in the command line.</p>
+       <p>The image defined in your modified XML meta file is displayed when the Emulator is launched.</p></li>
+</ol>
+
+<table>
+ <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">If you re-install the Tizen IDE, the custom skin folders are reset.</td>
+
+        </tr>
+      </tbody>
+    </table>
+
+<h2 id="file" name="file">File Sharing</h2>
+
+<p>You are able to share a directory between Emulator and your computer. The host machine&#39;s directory is shown as <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> in the Emulator.</p>
+
+<ol>
+<li>Run the Emulator Manager and click <strong>Create New</strong> or <strong>Modify</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.
+</li>
+</ol>
+
+<p>You can also add a shared directory in the Emulator Control Panel:</p>
+
+<ol>
+<li>Start the Emulator.</li>
+<li>Right-click the Emulator and select <strong>Control Panel</strong> .</li>
+<li>Move to the <strong>Host Directory Sharing</strong> tab.</li>
+<li>Mount/unmount the host machine directory.
+</li>
+</ol>
+
+  <table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+    <tr>
+      <td class="note">You must have a read/write permission for the directory you want to share. You can share only one directory.</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h2 id="hw" name="hw">Using Hardware Virtualization</h2>
+<p>The performance of the Tizen x86 Emulator on which the x86-compiled binaries are run can be enhanced by using <a href="http://www.linux-kvm.org/page/Main_Page" target="_blank">KVM</a> (Kernel-based Virtual Machine in Linux) or <a href="https://developer.tizen.org/sdk/haxm" target="_blank">HAX</a> (Hardware Accelerated eXecution in Windows&reg; and Mac OS&reg; X) with HW virtualization support.</p> 
+
+
+<h3 id="prerequisite" name="prerequisite">Prerequisites</h3>
+
+<p>To use HW virtualization, you need:</p>
+
+<ul>
+<li>In Linux:
+<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</pre>
+
+<p>If the output of the command is <span style="font-family: Courier New,Courier,monospace">0</span>, 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></li>
+
+<li>In Windows&reg;:
+<p>To use HAX, you need Intel VT-x-supported CPU, and you must enable the NX-related setting in the PC BIOS.</p> </li>
+
+<li>In Mac OS&reg; X:
+<p>To use HAX, install EFI-related updates on your Intel-based Mac system. For more information, see <a href="http://support.apple.com/kb/HT1237" target="_blank">EFI and SMC firmware updates for Intel-based Macs</a>.</p> </li>
+</ul>
+
+
+<h3 id="install" name="install">Installing KVM or HAX</h3>
+
+<p>To install KVM or HAX:</p>
+
+<ul>
+<li>In Linux:
+<p>No installation is required for KVM.</p> 
+</li>
+<li>In Windows&reg; and Mac OS&reg; X:
+<p>The HAXM driver is installed during the Tizen SDK installation. See the installation manual on the <a href="https://developer.tizen.org/sdk/haxm" target="_blank">Tizen developer site</a>.</p>
+<table class="note">
+
+      <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">
+                 <p>If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).</p>
+</td>
+        </tr>
+      </tbody>
+    </table></li></ul>
+       
+<p>No configuration is required for KVM or HAX.</p>
+
+
+<h3 id="run" name="run">Running the Emulator</h3>
+<p>To run the Emulator with HW virtualization support in the Emulator Manager, set the <strong>HW Virtualization</strong> field to <strong>Supported</strong>. The field is disabled if your system cannot support HW virtualization.</p>
+<p>You can also run the Emulator with HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Linux) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>
+
+<h2 id="eventcast" name="eventcast">Using EventCast</h2>
+
+<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 illustrated 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 class="figure">Figure: EventCast architecture</p> 
+               <p style="text-align:center;"><img alt="eventcast_architecture" src="../images/eventcast_architecture.png" /></p>
+
+<p>EventCast provides the following features:</p>
+<ul>
+       <li>Touch: Maximum number of touch points is 10</li>
+       <li>Sensors: Accelerometer, gyroscope, geo-magnetic, proximity, light sensors</li>
+       <li>Display: Getting images of the Tizen Emulator and drawing them when using touch features</li>
+</ul>
+
+<h3 id="eventpre" name="eventpre">Prerequisites</h3>
+
+<p>When connecting through USB, ADB is required to make a connection. If you have already installed Android SDK on the PC, ADB is located at a <span style="font-family: Courier New,Courier,monospace;">&lt;installed Android SDK&gt;/sdk/platform-tools</span> directory. Otherwise, you can download only ADB or install Android SDK.</p>
+<p>To install ADB:</p>
+       <ol><li><p>Linux/Mac OS&reg; X: Download ADB and then install it in the <span style="font-family: Courier New,Courier,monospace;">/usr/bin</span> directory.</p>
+       <p>For more information, see <a href="http://code.google.com/p/adb-fastboot-install/" target="_blank">http://code.google.com/p/adb-fastboot-install/</a>.</p></li>
+       <li><p>Download ADB and install it in the <span style="font-family: Courier New,Courier,monospace;">C:\ADB</span> directory.</p>
+       <p>For more information, see <a href="http://rubenalamina.mx/custom-installers/android-adb-fastboot/" target="_blank">http://rubenalamina.mx/custom-installers/android-adb-fastboot/</a>.</p></li></ol>
+       
+<p>When connecting through Wi-Fi, make sure that your android device and PC 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>You can install 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>
+
+<h3 id="eventconn" name="eventconn">Connecting EventCaster to the Emulator</h3>
+
+<p>To connect the EventCaster application to the Emulator:</p>
+
+<ul>
+<li>Connect through USB:
+
+       <ol>
+               <li>Locate the developer options
+                       <p>On most devices running Android 3.2 or older, you can find the option under <strong>Settings &gt; Applications &gt; Development</strong>.</p>
+                       <p>On Android 4.0 and newer, it is in <strong>Settings &gt; Developer options</strong>.</p>
+
+                       <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">On Android 4.2 and newer, the developer options are hidden by default. To make them available, go to <strong>Settings &gt; About phone</strong> and tap <strong>Build number</strong> seven times. Return to the previous screen to find the developer options.</td> 
+      </tr>
+</tbody></table>
+</li>
+<li>Enable USB debugging.</li>
+<li>Connect the device to a computer through USB.</li>
+<li>Launch the EventCaster.</li>
+<li>Start the server using default port (7000) or enter the port number.</li>
+<li>Forward a TCP port using the <span style="font-family: Courier New,Courier,monospace;">adb forward</span> command.
+<p>For example, you can forward the 7000 port in the application to the 1234 port in your computer: <span style="font-family: Courier New,Courier,monospace;">adb forward tcp:1234 tcp:7000</span></p></li>
+<li>Launch the Tizen Emulator and the Emulator Control Panel (ECP) in the Emulator context menu.</li>
+<li>Select the <strong>USB</strong> checkbox on the <strong>EventCast</strong> tab of the Emulator Control Panel.</li>
+<li>Enter the forwarded port number and click <strong>Connection</strong> on the ECP.
+<p>If the Emulator connects to app successfully, the <strong>Show Event</strong> button in the application is activated.</p></li>
+<li>Click <strong>Show Event</strong>. You can now inject a sensor or touch value to the Emulator.</li>
+</ol></li>
+
+<li>Connect through Wi-Fi:
+<ol>
+       <li>Enable Wi-Fi on device and select the Wi-Fi network.</li>
+       <li>Connect the Android device to a network where you also have a computer running the Emulator.</li>
+       <li>Launch EventCaster and click <strong>Read WiFi</strong>.
+       <p>The application gets the IP address of the connected network.</p></li>
+       <li>Choose <strong>Start Server</strong> button.</li>
+       <li>Select the <strong>Wi-Fi</strong> checkbox on the <strong>EventCast</strong> tab of the Emulator Control Panel.</li>
+       <li>Enter the IP address and port number using EventCaster and then click <strong>Connect</strong> on the Emulator Control Panel.
+       <p>If the Emulator connects to the application successfully, the <strong>Show Event</strong> button in the application is activated.</p></li>
+       <li>Click <strong>Show Event</strong>. You can now inject a sensor or touch value to the Emulator.</li>
+</ol></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/event_injec.htm b/org.tizen.devtools/html/common_tools/event_injec.htm
new file mode 100644 (file)
index 0000000..e37f4cb
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/event_injec.htm
@@ -0,0 +1,290 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Injector</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#device">Providing Device Data</a></li>
+                               <li><a href="#location">Providing Location Data</a></li>
+                               <li><a href="#nfc">Providing NFC Data</a></li>
+                               <li><a href="#sensor">Providing Sensor Data</a></li>
+                               <li><a href="#telephony">Providing Telephony Features</a></li>
+               </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Event Injector</h1>
+
+<h2 id="device" name="device">Providing Device Data</h2>
+
+<p>The Emulator Control Panel (ECP) can be used to simulate device data, such as the battery level, adding or removing a ear jack (headset) or USB device, setting RSSI (remote signal strength indicator) information, and attaching and detaching the SD card in the <strong>Device</strong> tab:</p>
+
+<ul>
+
+<li>Setting the battery level
+<p>In the <strong>Battery</strong> tab, set the battery level using the <strong>Level</strong> slider. To set the charger status to connected or disconnected, select the appropriate <strong>Charger</strong> radio button.</p></li>
+
+
+<li>Adding or removing an ear jack
+<p>In the <strong>EarJack</strong> tab, select the ear jack setting:</p>
+<ul>
+  <li>3 Wire</li>
+  <li>4 Wire</li>
+  <li>Disconnect</li>
+</ul></li>
+
+<li>Adding or removing a USB device
+<p>In the <strong>USB</strong> tab, set the USB device setting to the connected or disconnected state.</p>
+</li>
+
+<li>Setting the RSSI information
+<p>In the <strong>RSSI</strong> tab, set the RSSI information level using the <strong>Level</strong> slider.</p></li>
+
+
+<li>Attaching and detaching the SD card
+<p>In the <strong>SD Card</strong> tab, select the 4G, 8G, 16G, or 32G SD card and attach it to the Emulator at runtime.</p>
+
+
+<table class="note">
+      <tbody>
+        <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">The same SD card cannot be attached to multiple Emulators at the same time.</td>
+        </tr>
+      </tbody>
+    </table></li></ul>
+       
+<p>The device information set using the ECP is reflected on the indicator bar of the device.</p>
+
+
+<h2 id="location" name="location">Providing Location Data</h2>
+
+<p>The Emulator Control Panel (ECP) can be used to provide imitated responses to location data requests by loading GPS log files, manually entering location coordinates, or injecting markers directly on the map in the <strong>Location</strong> tab:</p>
+
+<ul><li>Loading a GPS log file
+<p>In the <strong>Log</strong> section, select the pre-logged GPS data file (NMEA183 format) and click <strong>Inject Log</strong> to send the location data to the Emulator.</p></li>
+
+<li>Manually entering location coordinates
+<p>In the <strong>Manual</strong> section, enter the coordinates and click <strong>Inject Location</strong> to send the location data to the Emulator. The range of the latitude, longitude, altitude, and horizontal accuracy is from -90 to 90, -180 to 180, -300 to 100000, and 0 to 100000, respectively.</p></li>
+
+
+<li>Injecting markers on the map
+<p>In the <strong>Map</strong> section, right-click the desired map locations and click <strong>Inject Markers </strong> to send the location data to the Emulator.</p>
+</li></ul>
+
+<h2 id="nfc" name="nfc">Providing NFC Data</h2>
+
+<p>The Emulator Control Panel (ECP) can be used to test the near-field communication (NFC) features, such as NFC data exchange format (NDEF) events, NFC tag detection, and peer-to-peer (P2P) data connections in the <strong>NFC</strong> tab.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+          <th class="note">Note</th>
+        </tr>
+        <tr>
+          <td class="note">The Event Injector view sends only NFC-related events to the Emulator. There is no actual information exchange between the Event Injector and Emulator. Therefore, for features such as writing information to an NFC tag, the Emulator simply displays a success message.</td>
+
+        </tr>
+    </tbody>
+</table>
+
+
+<h3 id="ndef" name="ndef">Creating NDEF Messages</h3>
+<p>An NDEF message contains one or more NDEF records.</p>
+
+<p>In the <strong>NDEF Message</strong> section:</p>
+<ol>
+<li>Select the record type name format.</li>
+<li>Enter the record type name, ID, and payload.</li>
+<li>Click <strong>Add</strong>.
+<p>You can add multiple NDEF records as required in the NDEF message.</p></li>
+</ol>
+<p>Click <strong>Edit</strong> or <strong>Remove</strong> to modify or delete a selected record.</p>
+
+<h3 id="nfctags" name="nfctags">Attaching and Detaching NFC Tags</h3>
+
+<p>In the <strong>NFC Tag</strong> section:</p>
+<ol>
+<li>Select the tag type.</li>
+<li>Click <strong>Tag Attach</strong>.
+<p>If the NDEF records list is not empty, an NDEF message is created using this list and the attach message is sent to the Emulator with the NDEF message.</p></li>
+<li>When the tag operation is finished, click <strong>Tag Detach</strong>.</li>
+</ol>
+
+<h3 id="p2p" name="p2p">Creating a P2P data Connection</h3>
+
+<p>In the <strong>Peer to Peer</strong> section:</p>
+<ol>
+<li>To send the Emulator the discovered state of the new device, click <strong>P2P Discovered</strong>.</li>
+<li>To send the Emulator an NDEF message, click <strong>P2P Send</strong>.</li>
+<li>To send the Emulator the detached state of the connected device, click <strong>P2P Detached</strong>.</li>
+</ol>
+
+
+<h2 id="sensor" name="sensor">Providing Sensor Data</h2>
+<p>The Emulator Control Panel (ECP) can be used to imitate user actions, such as shaking, throwing, and tilting the device. You can generate 
+single sensor events, or design sensor profiles for different sensors, containing sensor data that describes a series 
+of sensor events. </p>
+
+<p>The sensor profiles have a simple data structure and are stored in TXT files. The sensor data can be input in the specified data structure from the <a href="#axis">3-axis</a>, <a href="#light">light, proximity, pressure, ultraviolet, or HRM</a> sensors.</p>
+<p>The sensor profiles are of 2 types: </p>
+<ul>
+<li>With timestamp
+ <p>The Emulator tries to inject each item at its specified time. Events are discarded if they violate certain 
+ performance, resource, or logic limits.</p></li> 
+<li>Without timestamp
+ <p>The Emulator injects each item without any specific time considerations.
+  Profile data is not discarded.</p></li> 
+</ul>
+
+<h3 id="axis" name="axis">Controlling 3-axis Sensors</h3>
+<p>The ECP can be used to adjust the acceleration, magnetic, and gyro sensors of the Emulator in the <strong>Event Injector &gt; Sensor &gt; 3-Axis Sensors</strong> tab.</p>
+
+<p>On the <strong>GUI</strong> subtab, you can select which sensors are active, and you can move the Emulator using the 3 axis sliders or the direction buttons (<strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, and <strong>Reverse Landscape</strong>). The Emulator image shows the current position of the Emulator.</p>
+
+<p>To better control the movement, select the <strong>With axis</strong> check box to see the axes in the Emulator image. You can also fix the y- or z-axis by selecting the <strong>X/Z</strong> or <strong>X/Y</strong> radio button, respectively. To change the Emulator accelerator value in the direction of the movement, select the <strong>Move</strong> radio button.</p>
+
+<p>To adjust the individual sensors:</p>
+
+<ul>
+<li>Acceleration sensor:
+<p>This sensor is used to control the acceleration values along the coordinate axes. If the Emulator is standing, the y axis gets the acceleration value -1g as gravitational acceleration.</p>
+
+<p>To change the acceleration value manually, use the sliders on the <strong>Acceleration</strong> subtab to set a value between -2 and 2 g. </p>
+<p>You can input a log file with up to 5 repeats for the acceleration sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>
+
+
+
+<li>Magnetic sensor:
+<p>This sensor is used to control the Emulator&#39;s magnetic tesla value along the coordinate axes. If the Emulator is standing, the magnetic tesla value is set by heading for real north (azimuth 0).</p>
+
+<p>To change the magnetic tesla value manually, use the sliders on the <strong>Magnetic</strong> subtab to set a value between -2000 and 2000 uT. </p>
+<p>You can input a log file with up to 5 repeats for the magnetic sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>
+
+
+<li>Gyro sensor:
+<p>This sensor is used to control the Emulator&#39;s rotation angle per second along the coordinate axes.</p>
+
+<p>To change the gyro value manually, use the sliders on the <strong>Gyro</strong> subtab to set a value between -10 and 10 rad. </p>
+<p>You can input a log file with up to 5 repeats for the gyro sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>
+</ul>
+
+
+<h3 id="light" name="light">Controlling Other Sensors</h3>
+
+<p>You can control the light, proximity, pressure, ultraviolet, and HRM sensor of the Emulator under the <strong>Event Injector &gt; Sensor</strong> tab:</p>
+
+<ul><li>
+<p>To control the light sensor, set the <strong>Lux</strong> value in the <strong>Light</strong>  tab. The range of this value is from 0 to 65535.</p></li>
+
+<li><p>To control the proximity sensor, set it on or off in the <strong>Proximity</strong> tab.</p></li>
+
+<li><p>To control the pressure sensor, set the <strong>hPa</strong> (Hectopascal) value in the <strong>Pressure</strong> tab. The range of this value is from 260 to 1260.</p></li>
+
+<li><p>To control the ultraviolet sensor, use the slider in the <strong>Ultraviolet</strong> tab. The unit is UV index and the range of this value is from 0 to 15.0.</p></li>
+
+<li><p>To control the HRM (Heart Rate Monitor) sensor, use the sliders in the <strong>Heart Rate Monitor</strong> tab. You can set the <strong>Heart Rate</strong> value between 0 and 220, and the <strong>Peek-to-Peek</strong> value between 0 and 5000.</p></li>
+
+</ul>
+
+<h2 id="telephony" name="telephony">Providing Telephony Features</h2>
+
+<p>The Emulator Control Panel (ECP) can be used to generate <a href="#call">incoming calls</a> and <a href="#message">messages</a> in the <strong>Telephony</strong> tab.</p>
+
+<h3 id="call" name="call">Generating Incoming Calls</h3>
+<p>Incoming calls are generated in the <strong>Event Injector &gt; Telephony &gt; Call</strong> tab.</p>
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+    <tr>
+      <td class="note">A Mobile Termination (MT) call is made from the Event Injector view to the Emulator. A Mobile Origination (MO) call is made from the Emulator to the Event Injector view using the phone application of the Emulator.</td>
+    </tr>
+  </tbody>
+</table>
+
+<p>To make an MT call:</p>
+<ol>
+  <li>Enter the phone number you want to imitate the call from.</li>
+  <li>Click <strong>Connect</strong>.</li>
+  <li><p>To hide the phone number on the Emulator, select the <strong>Hidden</strong> option.</p>
+  <p>The caller ID on the Emulator is set to &quot;Unknown&quot;.</p></li>
+</ol>
+
+<p>To make an MO call, use the Emulator&#39;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>
+</ol>
+
+
+<h3 id="message" name="message">Generating Messages</h3>
+<p>SMS messages are generated in the <strong>Event Injector &gt; Telephony &gt; Messaging</strong> tab. After sending a message, your application waits for the asynchronous send status message. You can generate this status report for SMS messages using the same <strong>Messaging</strong> tab.</p>
+
+<p>To generate an SMS message:</p>
+<ol>
+  <li>Enter the sender phone number you want to imitate.</li>
+  <li>Enter the message body text and click <strong>Send Msg</strong>.</li>
+</ol>
+
+<p>To generate status reports, set the sending status value for the SMS message:</p>
+<ul>
+  <li>SMS OK (Success)</li>
+  <li>SMS Not Available</li>
+</ul>
+
+<p>You can also generate MMS message status reports. To generate MMS status reports, set the sending status value for the MMS message:</p>
+<ul>
+  <li>MMS OK (Success)</li>
+  <li>MMS Failure</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
new file mode 100644 (file)
index 0000000..147cfd9
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
@@ -0,0 +1,910 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Keyboard Shortcuts</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#connection">Connection Explorer</a></li>
+                       <li><a href="#build">Build and Run</a></li>
+                       <li><a href="#debug">Debug</a></li>
+                       <li><a href="#content">Content Assist</a></li>
+                       <li><a href="#project">Project Management</a></li>
+                       <li><a href="#editor">Editor</a></li>
+                       <li><a href="#refactor">Refactor</a></li>
+                       <li><a href="#ui">Web UI Builder</a></li>
+                       <li><a href="#ide">Native IDE</a></li>
+                       <li><a href="#web_ide">Web IDE</a></li>
+                       <li><a href="#da">Dynamic Analyzer</a></li>
+                       <li><a href="#emulator">Emulator Manager</a></li>
+               </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+<h1>Keyboard Shortcuts</h1>
+
+<p>The following symbols are used to define the supported operating system for each shortcut:</p> 
+<ul>
+<li><p style="text-align:left;"><img alt="windows" src="../images/windows.png" />: Windows&reg;</p></li>
+<li><p style="text-align:left;"><img alt="ubuntu" src="../images/ubuntu.png" />: Ubuntu</p></li>
+<li><p style="text-align:left;"><img alt="mac" src="../images/mac.png" />: Mac OS&reg;</p></li>
+</ul>
+
+  <h2 id="connection" name="connection">Connection Explorer</h2>
+  <table border="1" style="width: 100%">
+  <colgroup>
+  <col width="40%" />
+  <col width="20%" />
+  <col width="40%" />
+  </colgroup>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td>Delete</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Delete</td>
+       </tr>
+       <tr>
+               <td>Rename</td>
+               <td><img alt="windows_symbol" src="../images/windows.png" /><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F2</td>
+       </tr>
+       <tr>
+               <td>Refresh</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F5</td>
+       </tr>
+       <tr>
+               <td>Property</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Alt+Enter</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="build" name="build">Build and Run</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="2">Build all</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+B</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+B</td>
+       </tr>
+       <tr>
+               <td>Make target build</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Shift+F9</td>
+       </tr>
+       <tr>
+               <td>Rebuild last target</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F9</td>
+       </tr>
+       <tr>
+               <td>Build project</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F10</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Run last launched</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+F11</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+F11</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="debug" name="debug">Debug</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td>Step into</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F5</td>
+       </tr>
+       <tr>
+               <td>Step over</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F6</td>
+       </tr>
+       <tr>
+               <td>Step return</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F7</td>
+       </tr>
+       <tr>
+               <td>Resume</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F8</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Debug</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+F11</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+F11</td>
+       </tr>
+       <tr>
+               <td>Debug last launched</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F11</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Toggle breakpoint</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+B</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+B</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="content" name="content">Content Assist</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td>Content assist</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Ctrl+Space</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="project" name="project">Project Management</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="2">New project and file using the Wizard</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+N</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+N</td>
+       </tr>
+       <tr>
+               <td rowspan="2">New project and file</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Alt+N</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Alt+N</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Open resource</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+R</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+R</td>
+       </tr>
+       <tr>
+               <td>Properties</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Alt+Enter</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Save</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+S</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+S</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Save all</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+S</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+S</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Close</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+W</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+W</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Close all</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+W</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+W</td>
+       </tr>
+       <tr>
+               <td>Refresh</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F5</td>
+       </tr>
+       <tr>
+               <td>Rename</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F2</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="editor" name="editor">Editor</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="2">Find and replace</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+F</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+F</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Quick fix</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+1</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+1</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Redo</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Z</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+Z</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Undo</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Z</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Z</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Go to line</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+L</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+L</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Delete line</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+D</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+D</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Go to matching bracket</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+P</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+P</td>
+       </tr>
+       <tr>
+               <td>Move lines down</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Alt+<img alt="arrow_down" src="../images/arrow_down.png" /></td>
+       </tr>
+       <tr>
+               <td>Move lines up</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Alt+<img alt="arrow_up" src="../images/arrow_up.png" /></td>
+       </tr>
+       <tr>
+               <td>Show tooltip</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F2</td>
+       </tr>
+       <tr>
+               <td>Open declaration</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F3</td>
+       </tr>
+       <tr>
+               <td>Open type hierarchy</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F4</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Open type</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+T</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+T</td>
+       </tr>
+       <tr>
+               <td rowspan="2">To lower case</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+Y</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+Y</td>
+       </tr>
+       <tr>
+               <td rowspan="2">To upper case</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+Z</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+Z</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Correct indentation</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+I</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+I</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Format</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+F</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+F</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Add/remove comment</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+/</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+/</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Add/remove block comment</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+/</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+/</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="refactor" name="refactor">Refactor</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="2">Rename-refactoring</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+R</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Alt+R</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Move-refactoring</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+V</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Alt+V</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Change method signature</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+C</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Alt+C</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Extract method</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+M</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Alt+M</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Extract local variable</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+L</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Alt+L</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="ui" name="ui">Web UI Builder</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td>Toggle editor</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Ctrl+Tab</td>
+       </tr>
+
+       <tr>
+               <td>Toggle editor reverse</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Shift+Ctrl+Tab</td>
+       </tr>
+
+       <tr>
+               <td>Toggle page designer mode</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Ctrl+&#39;</td>
+       </tr>
+
+</tbody>
+</table>
+
+<h2 id="ide" name="ide">Native IDE</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="2">Insert snippet</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+I</td>
+       </tr>
+       <tr>
+       
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+I</td>
+       </tr>   
+       <tr>
+               <td rowspan="2">New launch configuration</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+F12</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="mac" src="../images/alt.png" />+F12</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Forward launch history</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+[</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="mac" src="../images/alt.png" />+[</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Backward launch history</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Alt+Shift+]</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="mac" src="../images/alt.png" />+]</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="web_ide" name="web_ide">Web IDE</h2>
+  <table border="1" style="width: 100%">
+    <col width="15%"/>
+       <col width="25%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+       <tr>
+               <th colspan="2">Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="8">HTML editor</td>
+               <td rowspan="2">Vertical layout</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+F9</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+F9</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Graphical designer</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+F10</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+F10</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Horizontal layout</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+F11</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+F11</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Source code</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+Shift+F12</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+Shift+F12</td>
+       </tr>
+       <tr>
+               <td colspan="2" rowspan="2">Preview</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+4</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+4</td>
+       </tr>
+       <tr>
+               <td colspan="2" rowspan="2">Code minifier</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+5</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+5</td>
+       </tr>
+       <tr>
+               <td colspan="2" rowspan="2">Code beautifier</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+6</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+6</td>
+       </tr>
+       <tr>
+               <td colspan="2" rowspan="2">Assignment tracing - next</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+]</td>
+       </tr>
+       <tr>
+               
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+]</td>
+       </tr>
+       <tr>
+               <td colspan="2" rowspan="2">Assignment tracing - previous</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+[</td>
+       </tr>
+       <tr>
+               
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+[</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="da" name="da">Dynamic Analyzer</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+               <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td>About Tizen Dynamic Analyzer</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F1</td>
+       </tr>
+       <tr>
+               <td>Configuration</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F2</td>
+       </tr>
+       <tr>
+               <td>Enable the source view of the toolbar</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>F3</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Select the Timeline tab</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+1</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+1</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Select the File tab</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+2</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+2</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Select the Thread tab</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+3</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+3</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Select the User Interface tab</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+4</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+4</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Select the Summary tab</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+5</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+5</td>
+       </tr>
+       
+       <tr>
+               <td rowspan="2">Select the Range tab</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+6</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+6</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Start/stop trace</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+g</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+g</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Open trace</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+o</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+o</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Save trace</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+s</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+s</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Replay</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+p</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+p</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Toggle the range information between create and remove</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+r</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+r</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Open the search dialog box</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Ctrl+f</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td><img alt="command" src="../images/command.png" />+f</td>
+       </tr>
+       <tr>
+               <td rowspan="2">Delete the saved file of the open trace dialog box</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Delete</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td>fn+Delete</td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="emulator" name="emulator">Emulator Manager</h2>
+  <table border="1" style="width: 100%">
+    <col width="40%"/>
+  <col width="20%"/>
+  <col width="40%"/>
+<tbody>
+               <tr>
+               <th>Command</th>
+               <th>Support</th>
+               <th>Shortcut</th>
+       </tr>
+       <tr>
+               <td rowspan="2">Delete virtual machine</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
+               <td>Delete</td>
+       </tr>
+       <tr>
+               <td><img alt="mac" src="../images/mac.png" /></td>
+               <td>fn+Delete</td>
+       </tr>
+       <tr>
+               <td>Launch virtual machine</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Enter</td>
+       </tr>
+       <tr>
+               <td>Select virtual machine</td>
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
+               <td>Arrow key</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/common_tools/log_view.htm b/org.tizen.devtools/html/common_tools/log_view.htm
new file mode 100644 (file)
index 0000000..feb75cf
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/log_view.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Log View </title>
+</head>
+
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+<h1>Log View</h1>
+
+<p>While the application is running in the Emulator or target device, the IDE&#39;s <strong>Log</strong> view shows the log, debug, and exception messages. If the <strong>Log</strong> view is not visible, open it by selecting <strong>Window &gt; Show View &gt; Log</strong> from the IDE menu.</p>
+
+<p>In the <strong>Log</strong> view, you can:</p>
+<ul>
+<li>Work with LogTabs
+<p>Each device has at least 1 default LogTab associated with it. If a device is connected, the default LogTab is not editable or removable. However, you can add additional LogTabs with more filtering options. Additional LogTabs are editable and removable.</p>
+</li>
+<li>Filter log messages by using the <strong>V</strong>, <strong>D</strong>, <strong>I</strong>, <strong>W</strong>, <strong>E</strong>, and <strong>F</strong>  buttons to show only specific log message types (verbose, debug, info, warning, error, and fatal).</li>
+<li>Search for logs by selecting the field (Pid, Tag, or Message) to be searched from the drop-down list, and entering the keyword. Multiple keywords must be separated by a space and a comma.</li>
+<li>Export a log by clicking <strong>Export the log</strong> and saving current log messages from the <strong>Log</strong> view as a log file on the host system.</li>
+<li>Remove all log messages from the <strong>Log</strong> view by clicking <strong>Clear the log</strong>.</li>
+
+</ul>
+
+<p>You can create logs in the native framework using the methods defined in the log macros.</p>
+
+ 
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/common_tools/project_explorer.htm b/org.tizen.devtools/html/common_tools/project_explorer.htm
new file mode 100644 (file)
index 0000000..03aaaad
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/project_explorer.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Project Explorer View </title>
+</head>
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+<h1>Project Explorer View</h1>
+<p>The <strong>Project Explorer</strong> view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating a widget or an application.</p>
+
+<p>The following figure shows and example of the <strong>Project Explorer</strong> view with a Web application.</p>
+
+<p class="figure">Figure: Project Explorer view</p>
+
+<p style="text-align:center;"><img alt="Project Explorer view"
+src="../images/project_explorer.png"
+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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
new file mode 100644 (file)
index 0000000..3f8d006
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
@@ -0,0 +1,302 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>Smart Development Bridge </title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#command">SDB Commands</a></li>
+                       <li><a href="#log">Controlling Log Output</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Smart Development Bridge</h1>
+
+<p>The Smart Development Bridge (SDB) is a device management tool included in the Tizen SDK:</p>
+<ul>
+       <li>The SDB manages multiple device connections. You can list connected devices and send a command to a specific device with a serial number that is created by the SDB.</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 <a href="#log">controlling</a> device log output.</li>
+       <li>The SDB also includes the Emulator.</li>
+</ul>
+
+<p>To use the SDB:</p>
+<ol>
+<li>To use the SDB in a target device, set the device to the SDB mode by going to <strong>Settings &gt; More system settings &gt; Developer options &gt; USB debugging</strong> in the device menu.</li>
+<li>Run the SDB with a shell using the following command:
+<pre class="prettyprint">&#36; sdb [option] &lt;command&gt; [parameters]</pre>
+
+<p>Where <span style="font-family: Courier New,Courier,monospace;">[option]</span> can be:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">-d</span>: Directs the command to the only connected USB device and return an error if more than one USB device is present.</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">-e</span>: Direct the command to the only running Emulator and return an error if more than one Emulator is present.</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">-s &lt;serial number&gt;</span>: Direct the command to the USB device or Emulator with the defined serial number.
+<p>If multiple Emulator or device instances are running, you need to specify a target instance in the SDB command.</p>
+       </li>
+       <li><span style="font-family: Courier New,Courier,monospace;">devices</span>: List all connected devices.
+<p>Before issuing SDB commands, it is helpful to know which Emulator or device instances are connected to the SDB server. In response to this command option, the SDB prints the serial number (a string created by the SDB to uniquely identify an Emulator or device instance) and connection status for each connected device. The connection status can be offline (the instance is not connected to the SDB or is not responding) or device (the instance is connected to the SDB server).</p>
+<p>The following snippet shows an example of the command output:</p>
+<pre class="prettyprint">&#36; sdb devices
+List of devices attached 
+emulator-26100 device myemulator1
+emulator-26200 device myemulator2
+&#36;
+</pre>
+       
+       
+       </li>
+</ul>
+<p>For more information about the available commands and their parameters (<span style="font-family: Courier New,Courier,monospace;">&lt;command&gt; [parameters]</span>), see <a href="#command">SDB Commands</a>.</p>
+</li>
+<li>To stop the SDB server, use the <span style="font-family: Courier New,Courier,monospace;">kill-server</span> command.
+<p>If the SDB does not respond to a command, try to terminate and restart it to resolve the problem. You can restart the server after stopping it by issuing any SDB command.</p>
+</li>
+</ol>
+
+
+<h2 id="command" name="command">SDB Commands</h2>
+
+<p>The following table lists the commands available for the Smart Development Bridge (SDB).</p>
+
+<table border="1">
+  <caption>Table: SDB commands</caption>
+  <col width="30%"/>
+  <col width="70%"/>
+  <tbody>
+  
+    <tr>
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Command</th>
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">sdb devices</span></td>
+               <td>List all connected devices.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">sdb connect &lt;host&gt;[:&lt;port&gt;]</span></td>
+               <td>Connect to a device through TCP/IP.</td>
+       </tr>
+       
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">sdb disconnect &lt;host&gt;[:&lt;port&gt;]</span></td>
+               <td>Disconnect from a TCP/IP device.
+               <p>Port 26101 is used by default if no port number is specified. Using this command with no additional arguments disconnects from all connected TCP/IP devices.</p></td>
+       </tr>
+       
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb push &lt;local&gt; &lt;remote&gt; [-with-utf8]</span></td>
+                 <td>Copy a file or directory recursively to the device&#39;s data file.
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> parameters refer to the paths to the target files or directories on the development machine (local) and the device instance (remote). The following command shows an example:</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">[-with-utf8]</span> parameter creates the remote file with the UTF-8 character encoding.</p>
+<pre class="prettyprint">$ sdb push data.txt /opt/apps/org.tizen.hellotizen/data/data.txt</pre>
+                 </td>
+               </tr>
+       
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb pull &lt;remote&gt; [&lt;local&gt;]</span></td>
+                 <td>Copy a file or directory recursively from the device&#39;s data file.
+                 <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> parameters refer to the paths to the target files or directories on the device instance (remote) and the development machine (local). The following command shows an example:</p>
+<pre class="prettyprint">$ sdb pull /opt/apps/org.tizen.hellotizen/data/data.txt data.txt</pre></td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb shell</span></td>
+                 <td>Run a remote shell interactively by dropping into a remote shell on an Emulator or device instance.
+<p>To exit the remote shell, press <strong>Ctrl+D</strong> or use the <span style="font-family: Courier New,Courier,monospace;">exit</span> command to end the shell session.</p>
+                 </td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb shell &lt;command&gt;</span></td>
+                 <td>Run a remote shell command without entering the SDB remote shell on the device. The following commands are available:<p><span style="font-family: Courier New,Courier,monospace;">ls</span>, <span style="font-family: Courier New,Courier,monospace;">rm</span>, <span style="font-family: Courier New,Courier,monospace;">mv</span>, <span style="font-family: Courier New,Courier,monospace;">cd</span>, <span style="font-family: Courier New,Courier,monospace;">mkdir</span>, <span style="font-family: Courier New,Courier,monospace;">cp</span>, <span style="font-family: Courier New,Courier,monospace;">touch</span>, <span style="font-family: Courier New,Courier,monospace;">echo</span>, <span style="font-family: Courier New,Courier,monospace;">tar</span>, <span style="font-family: Courier New,Courier,monospace;">grep</span>, <span style="font-family: Courier New,Courier,monospace;">cat</span>, <span style="font-family: Courier New,Courier,monospace;">chmod</span>, <span style="font-family: Courier New,Courier,monospace;">rpm</span>, <span style="font-family: Courier New,Courier,monospace;">find</span>, <span style="font-family: Courier New,Courier,monospace;">uname</span>, <span style="font-family: Courier New,Courier,monospace;">netstat</span>, and <span style="font-family: Courier New,Courier,monospace;">killall</span></p></td>
+               </tr>
+               
+               <tr id="filter">
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb dlog [option] [&lt;filter-spec&gt;]</span></td>
+                 <td>View and follow the content of the device log buffers.
+<p>To view the log output in your development computer or from a remote SDB shell, use the <span style="font-family: Courier New,Courier,monospace;">sdb dlog</span> or <span style="font-family: Courier New,Courier,monospace;">dlogutil</span> command, respectively.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">[&lt;filter-spec&gt;]</span> parameter defines the tag of interest (the system component from which the message originates) and the minimum level of priority to report for that tag. The format is <span style="font-family: Courier New,Courier,monospace;">tag:priority</span>, and multiple filters must be separated with a space. The available priorities (from lowest to highest) are <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).</p>
+
+<p>For example, to view all log messages of the info priority in addition to the MyApp tag messages of the debug priority, use the following command:</p>
+
+<pre class="prettyprint">$ sdb dlog MyApp:D *:E</pre>
+
+
+<p>For more information about the command options, see <a href="#log">Controlling Log Output</a>.</p>
+                 </td>
+               </tr>
+               
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace;">sdb install &lt;path_to_tpk&gt;</span></td>
+                       <td><p>Push the <span style="font-family: Courier New,Courier,monospace;">tpk</span> package file to the device and install it.</p>
+                       <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;path_to_tpk&gt;</span> parameter defines to the path to the <span style="font-family: Courier New,Courier,monospace;">tpk</span> file. The following command shows an example:</p>
+<pre class="prettyprint">$ sdb install /home/tizen/ko983dw33q-1.0.0-i386.tpk</pre>
+                       </td>
+               </tr>
+               
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace;">sdb uninstall &lt;appid&gt;</span></td>
+                       <td><p>Uninstall the application from the device.</p>
+                       <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;appid&gt;</span> parameter defines the application ID of the application. The following command shows an example:</p>
+                       <pre class="prettyprint">$ sdb uninstall ko983dw33q</pre>
+                       </td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb forward &lt;local&gt; &lt;remote&gt;</span></td>
+                 <td>Set up arbitrary port forwarding of requests from a specific host port to a different port on a device instance.
+<p>The format for the <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> parameters is <span style="font-family: Courier New,Courier,monospace;">tcp:&lt;port&gt;</span>. The following example shows how to forward requests from host port 26102 to device port 9999:</p>
+<pre class="prettyprint">$ sdb forward tcp:26102 tcp:9999</pre>
+
+<p>After setting up port forwarding, development tools between the device and host can work remotely. For example, gdb in a host/gdbserver in a device, and gdbserver in a device open with the tcp:9999 port:</p>
+<pre class="prettyprint">$ sdb shell gdbserver:9999 hellotizen</pre>
+
+<p>gdb in a host connects to localhost:26102</p>
+<pre class="prettyprint">$ gdb hellotizen ... (gdb) target remote localhost:26102</pre>
+
+
+</td>
+               </tr>
+       
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb help</span></td>
+                 <td>Show the help message.</td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb version</span></td>
+                 <td>Show the version number.</td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb start-server</span></td>
+                 <td>Start the server if it is not running.</td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb kill-server</span></td>
+                 <td>Stop the server if it is running.</td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb get-state</span></td>
+                 <td>Print the target device connection status: <span style="font-family: Courier New,Courier,monospace;">device</span> of <span style="font-family: Courier New,Courier,monospace;">offline</span>.</td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb get-serialno</span></td>
+                 <td>Print the serial number of the target device.</td>
+               </tr>
+               
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb status-window</span></td>
+                 <td>Continuously print the connection status for a specified device.</td>
+               </tr>
+               <tr>
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb root &lt;on|off&gt;</span></td>
+                 <td>Switch between the root and developer account mode.
+                                       <p>The <span style="font-family: Courier New,Courier,monospace;">on</span> value sets the root mode and the <span style="font-family: Courier New,Courier,monospace;">off</span> value sets the developer account mode.</p></td>
+               </tr>
+       </tbody>
+</table>   
+
+<h2 id="log" name="log">Controlling Log Output</h2>
+
+<p>The following list defines the available options for the <span style="font-family: Courier New,Courier,monospace;">sdb dlog</span> and <span style="font-family: Courier New,Courier,monospace;">logutil</span> commands:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">-b &lt;buffer&gt;</span>
+               <p>Alternate log buffer. The main buffer is used as a default buffer.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-c</span>
+               <p>Clear the entire log and exit.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-d</span>
+               <p>Dump the log and exit.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-f &lt;filename&gt;</span>
+               <p>Write the log to the <span style="font-family: Courier New,Courier,monospace;">&lt;filename&gt;</span> file. The default file is <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-g</span>
+               <p>Print the size of the specified log buffer and exit.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-n &lt;count&gt;</span>
+               <p>Set the maximum number of rotated logs to &lt;count&gt;. The default value is 4. This option also requires the <span style="font-family: Courier New,Courier,monospace;">-r</span> option.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-r &lt;Kbytes&gt;</span>
+               <p>Rotate the log file every &lt;Kbytes&gt; of output. The default value is 16. This option also requires the <span style="font-family: Courier New,Courier,monospace;">-f</span> option.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-s</span>
+               <p>Set the default filter to silent.</p>
+       </li>
+       
+       <li><span style="font-family: Courier New,Courier,monospace;">-v &lt;format&gt;</span>
+               <p>Set the output format for log messages.</p>
+<p>You can define which metadata fields (such as <a href="#filter">tag and priority</a>) are included in log messages by setting one of the following output formats:</p> 
+<ul>
+       <li><strong>brief</strong>: Displays the priority/tag and PID of the originating process. This is the default format.</li>
+       <li><strong>process</strong>: Displays the PID only.</li>
+       <li><strong>tag</strong>: Displays the priority/tag only.</li>
+       <li><strong>thread</strong>: Displays the process:thread and priority/tag only.</li>
+       <li><strong>raw</strong>: Displays the raw log message, with no other metadata fields.</li>
+       <li><strong>time</strong>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li>
+       <li><strong>long</strong>: Displays all metadata fields and separate messages with a blank line.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/smart_launch.htm b/org.tizen.devtools/html/common_tools/smart_launch.htm
new file mode 100644 (file)
index 0000000..9d2e72f
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/smart_launch.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Smart Launch</title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+  <h1>Smart Launch</h1> 
+  <p>Smart Launch allows you to launch Tizen projects in an integrated environment. You can use Smart Launch to set the project launch settings, such as the project name, build configuration, launch mode, and shortcuts. The application launch device can be selected using the <a href="connection_explorer.htm">Connection Explorer</a>.</p> 
+  
+  <p>To use Smart Launch, click the icon on the Tizen IDE toolbar.</p>
+  <p class="figure">Figure: Smart Launch</p> 
+  <p style="text-align:center;"><img alt="Smart Launch" src="../images/smart_launch.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+
+  <p>If there is a launch history in the IDE, a list of previous project launch settings is displayed.</p>
+  <p class="figure">Figure: Launch history</p> 
+  <p style="text-align:center;"><img alt="Launch history" src="../images/smart_launch_history.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  
+  <p>To set a new launch configuration, select <strong>New Configuration</strong> or use the <strong>Shift+Alt+F12</strong> key (<strong>option+F12</strong> key in Mac OS&reg; X) combination.</p>
+  <p>The <strong>New Launch Configuration</strong> window:</p>
+  <ul>
+  <li>Suggests a configuration name and project name at first launch.</li>
+  <li>Creates a configuration and uses it to launch your project.</li>
+  <li>Launches your project without a configuration if a profile has been defined.</li>
+  </ul>
+  <p class="figure">Figure: New smart launch configuration</p> 
+  <p style="text-align:center;"><img alt="New smart launch configuration" src="../images/smart_launch_config.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  
+  <p>To view the current launch information, including the configuration name and device serial number, use the  <strong>Shift+Alt+[</strong> key (<strong>option+[</strong> key in Mac OS&reg; X) or <strong>Shift+Alt+]</strong> key (<strong>option+]</strong> key in Mac OS&reg; X) combinations.</p> 
+  
+  <p class="figure">Figure: Latest launch information</p> 
+  <p style="text-align:center;"><img alt="Latest launch configurations" src="../images/smart_launch_five_config.png" 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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/tools_common.htm b/org.tizen.devtools/html/common_tools/tools_common.htm
new file mode 100644 (file)
index 0000000..62aca3d
--- /dev/null
+++ b/org.tizen.devtools/html/common_tools/tools_common.htm
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Tools</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+    </div>
+       
+ <h1>Common Tools</h1>
+
+                <p>The Tizen SDK provides the following set of common tools for application development:</p>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<ul>
+    <li><strong>Application generation management tools</strong>
+    <ul>
+               <li><strong><a href="project_explorer.htm">Project Explorer view</a></strong>  <p>Shows a hierarchical view of all project resources in the workspace.</p></li>
+       
+               <li><a href="certificate_registration.htm">Certificate Registration</a>
+        <p>This tool is used to register the author certificate.</p></li>
+       </ul></li>      
+
+       <li><strong>Application running and testing tools</strong>
+    <ul>                       
+               <li><strong><a href="connection_explorer.htm">Connection Explorer view</a></strong>  <p>Shows the connected targets (emulators and devices) and provides tools for exploring them.</p></li>
+               
+               <li><a href="smart_launch.htm">Smart Launch</a>  <p>This tool allows you to launch applications in an integrated environment.</p></li>
+               
+               <li><a href="smart_dev_bridge.htm">Smart Development Bridge</a>  <p>This tool manages multiple device and Emulator connections.</p></li>
+               
+               <li><a href="emulator.htm">Emulator</a>  <p>This tool emulates the target device and provides an optimized environment to debug and test applications on the local machine before deploying it to the real target device.</p></li>
+       </ul></li>      
+               
+       <li><strong>Analysis and debugging tools</strong>
+    <ul>
+               <li><a href="log_view.htm">Log view</a>  <p>Shows the log, debug, and exception messages.</p></li>
+       </ul></li>
+       <li><strong>Tips for tool usage</strong>
+    <ul>       
+               <li><a href="keyboard_shortcuts.htm">Keyboard Shortcuts</a> <p>This tool allows you to operate more quickly and easily in different operating systems.</p></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/cover_page.htm b/org.tizen.devtools/html/cover_page.htm
new file mode 100644 (file)
index 0000000..a33fa39
--- /dev/null
+++ b/org.tizen.devtools/html/cover_page.htm
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 Development Environment and Tools</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/></p>
+    </div>
+       
+ <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+ <font size="11">Development Environment and Tools</font></h1>
+<p>To help you develop your applications, Tizen provides the Tizen SDK (software development kit) and related tools.</p>
+
+<p>The Tizen SDK consists of the following:</p>
+<ul>
+  <li style="font-weight: normal;"><strong>Platform binaries and libraries</strong>
+  <p>Binaries of Tizen and 3<sup>rd</sup> party libraries</p></li>
+
+  <li style="font-weight: normal;"><strong>Header files</strong>
+  <p>Header files of Tizen</p></li>
+
+  <li><strong>IDE</strong>
+<p>The Tizen Integrated Development Environment (IDE) is based on the JSDT (JavaScript Development Tools) and Eclipse CDT (C/C++ Development Tools). </p>
+    </li>
+  <li style="font-weight: normal;"><strong>Tools</strong>
+    <p>The Tizen SDK provides various tools for <a href="web_tools/tools_w.htm">Web application</a> and <a href="native_tools/tools_n.htm">native application</a> development. Some <a href="common_tools/tools_common.htm">common tools</a> can be used for all application types.</p></li>
+  <li style="font-weight: normal;"><strong>Sample applications</strong>
+       <p>The Tizen SDK includes <a href="https://developer.tizen.org/downloads/sample-applications" target="blank">practical examples</a> of using Tizen APIs in mobile Web, wearable Web, and mobile native applications.</p>
+    </li>
+
+</ul>
+
+<p>The following table briefly describes the main contents of the SDK
+folders.</p>
+
+<table border="1" style="width: 100%">
+  <caption>Table: Contents of the SDK folders</caption>
+  <col />
+  <col />
+  <tbody>
+    <tr>
+      <th style="text-align:center;">Folder</th>
+      <th style="text-align:center;">Contents</th>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">documents</span></td>
+      <td>General Tizen documentation</td>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">ide</span></td>
+      <td>Tizen IDE</td>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">install-manager</span></td>
+      <td>Tizen SDK Install Manager</td>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">library</span></td>
+      <td>Tizen library and 3<sup>rd</sup> party libraries</td>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">license</span></td>
+      <td>Tizen SDK license</td>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">platforms</span></td>
+      <td>Tizen libraries, samples, and public header files</td>
+    </tr>
+    <tr>
+      <td><span
+style="font-family: Courier New,Courier,monospace">tools</span></td>
+      <td>Tools available through the IDE that enable you to create application
+      functionality and perform application development steps more easily</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>
+
+<a class="top sms" href="#"><img src="images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/css/snippet.css b/org.tizen.devtools/html/css/snippet.css
new file mode 100644 (file)
index 0000000..f880409
--- /dev/null
+++ b/org.tizen.devtools/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #793AFF }  /* string content */
+  .kwd { color: #7F0055 }  /* a keyword */
+  .com { color: green}  /* a comment */
+  .typ { color: #1C1C1C }  /* a type name */
+  .lit { color: black }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #1C1C1C}
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/org.tizen.devtools/html/css/styles.css b/org.tizen.devtools/html/css/styles.css
new file mode 100644 (file)
index 0000000..c4eb32b
--- /dev/null
+++ b/org.tizen.devtools/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";
+
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+       
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+       
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+       background: white;
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}      
+       
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }       
+       
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+       
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/* Classes for creating collapsible content */
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
+#main {width: 75%; height: 90%;}
+#container {width:100%;}
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
+body.no-toc #container #contents {right: 0;padding-right:30px;}
+body.no-toc #navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+       .devicespecs-util ul.dutil li a:hover { color:#222; }
+       .devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr     {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr em  {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+       ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+       
+.top {text-align: right;}
+.toc, ul.toc{
+       margin: 10px 0px 0px 0px;
+       padding-left: 13px;
+       list-style: disc;
+       font-size: 9pt;
+       line-height: 115%; 
+       }
+       
+.toc-title {
+       font-size: 12pt;
+       color: #0E437D; 
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+       
+a.top {
+       display:block; 
+       float: right; 
+       position:fixed;
+       width: 28px; 
+       height:89px; 
+       bottom:50px;
+       z-index: 101;
+       right: 19%;
+       }
+
+a img {border: 0;}
+       
+/*     Footer includes space and a gray line above             */
+#footer {
+       position: fixed;
+       /* width: 100%; */
+    bottom: 0px;
+       text-align: center;
+       border-top: 1px solid #CCCCCC;
+       background-color: #FFFFFF;      
+       left: 21px;  right: 21px;
+}
+
+.footer {font-size: 8pt;}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;} 
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+    position: relative;
+}
+#profile p {
+       text-align: right;
+}
+
+div#toc_border {
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
+}
+
+#contents li {
+       padding-top: 3px;
+       margin-top: 5px;
+       /* overflow: auto; */
+}
+
+p {
+       /* overflow: auto; */
+}
+
+div.table {
+       /* overflow: auto; */
+}
\ No newline at end of file
diff --git a/org.tizen.devtools/html/images/alt.png b/org.tizen.devtools/html/images/alt.png
new file mode 100644 (file)
index 0000000..50e1552
Binary files /dev/null and b/org.tizen.devtools/html/images/alt.png differ
diff --git a/org.tizen.devtools/html/images/animator.png b/org.tizen.devtools/html/images/animator.png
new file mode 100644 (file)
index 0000000..7c10db8
Binary files /dev/null and b/org.tizen.devtools/html/images/animator.png differ
diff --git a/org.tizen.devtools/html/images/animator_GroupName1.png b/org.tizen.devtools/html/images/animator_GroupName1.png
new file mode 100644 (file)
index 0000000..785b1f2
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_GroupName1.png differ
diff --git a/org.tizen.devtools/html/images/animator_custom_add.png b/org.tizen.devtools/html/images/animator_custom_add.png
new file mode 100644 (file)
index 0000000..c752063
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_custom_add.png differ
diff --git a/org.tizen.devtools/html/images/animator_custom_confirm.png b/org.tizen.devtools/html/images/animator_custom_confirm.png
new file mode 100644 (file)
index 0000000..693e4ad
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_custom_confirm.png differ
diff --git a/org.tizen.devtools/html/images/animator_custom_create.png b/org.tizen.devtools/html/images/animator_custom_create.png
new file mode 100644 (file)
index 0000000..59ed0fb
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_custom_create.png differ
diff --git a/org.tizen.devtools/html/images/animator_custom_data.png b/org.tizen.devtools/html/images/animator_custom_data.png
new file mode 100644 (file)
index 0000000..0ebe9b1
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_custom_data.png differ
diff --git a/org.tizen.devtools/html/images/animator_custom_delete.png b/org.tizen.devtools/html/images/animator_custom_delete.png
new file mode 100644 (file)
index 0000000..f52d910
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_custom_delete.png differ
diff --git a/org.tizen.devtools/html/images/animator_editor_area.png b/org.tizen.devtools/html/images/animator_editor_area.png
new file mode 100644 (file)
index 0000000..078da6f
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_editor_area.png differ
diff --git a/org.tizen.devtools/html/images/animator_outline_add_frame_normal.png b/org.tizen.devtools/html/images/animator_outline_add_frame_normal.png
new file mode 100644 (file)
index 0000000..2fd09cc
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_outline_add_frame_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_outline_lock_off.png b/org.tizen.devtools/html/images/animator_outline_lock_off.png
new file mode 100644 (file)
index 0000000..674aa97
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_outline_lock_off.png differ
diff --git a/org.tizen.devtools/html/images/animator_outline_view_off.png b/org.tizen.devtools/html/images/animator_outline_view_off.png
new file mode 100644 (file)
index 0000000..84fb063
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_outline_view_off.png differ
diff --git a/org.tizen.devtools/html/images/animator_tab.png b/org.tizen.devtools/html/images/animator_tab.png
new file mode 100644 (file)
index 0000000..edb49d6
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_tab.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline.png b/org.tizen.devtools/html/images/animator_timeline.png
new file mode 100644 (file)
index 0000000..7f61517
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_WidgetList.png b/org.tizen.devtools/html/images/animator_timeline_WidgetList.png
new file mode 100644 (file)
index 0000000..daa634a
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_WidgetList.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png
new file mode 100644 (file)
index 0000000..656e7db
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png
new file mode 100644 (file)
index 0000000..ee382b4
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png
new file mode 100644 (file)
index 0000000..f95f66c
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png b/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png
new file mode 100644 (file)
index 0000000..7ce4ec7
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png b/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png
new file mode 100644 (file)
index 0000000..9a992fe
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png b/org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png
new file mode 100644 (file)
index 0000000..b79a526
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_animationState.png b/org.tizen.devtools/html/images/animator_timeline_animationState.png
new file mode 100644 (file)
index 0000000..00cac8b
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_animationState.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_copy.png b/org.tizen.devtools/html/images/animator_timeline_copy.png
new file mode 100644 (file)
index 0000000..a064106
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_copy.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_delete.png b/org.tizen.devtools/html/images/animator_timeline_delete.png
new file mode 100644 (file)
index 0000000..9da273b
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_delete.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_ease.png b/org.tizen.devtools/html/images/animator_timeline_ease.png
new file mode 100644 (file)
index 0000000..dcd9aa0
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_ease.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_keyframe.png b/org.tizen.devtools/html/images/animator_timeline_keyframe.png
new file mode 100644 (file)
index 0000000..1834b2a
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_keyframe.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png b/org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png
new file mode 100644 (file)
index 0000000..977380a
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png b/org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png
new file mode 100644 (file)
index 0000000..a4ceadd
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_outline.png b/org.tizen.devtools/html/images/animator_timeline_outline.png
new file mode 100644 (file)
index 0000000..d2348d0
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_outline.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_paste.png b/org.tizen.devtools/html/images/animator_timeline_paste.png
new file mode 100644 (file)
index 0000000..9f9f032
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_paste.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_preview.png b/org.tizen.devtools/html/images/animator_timeline_preview.png
new file mode 100644 (file)
index 0000000..4553136
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_preview.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_ruler.png b/org.tizen.devtools/html/images/animator_timeline_ruler.png
new file mode 100644 (file)
index 0000000..98ecb64
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_ruler.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_timeBar.png b/org.tizen.devtools/html/images/animator_timeline_timeBar.png
new file mode 100644 (file)
index 0000000..bd6ea0f
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_timeBar.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_timeTextBox.png b/org.tizen.devtools/html/images/animator_timeline_timeTextBox.png
new file mode 100644 (file)
index 0000000..44b0496
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_timeTextBox.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_timeline.png b/org.tizen.devtools/html/images/animator_timeline_timeline.png
new file mode 100644 (file)
index 0000000..4539918
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_timeline.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_toolbar.png b/org.tizen.devtools/html/images/animator_timeline_toolbar.png
new file mode 100644 (file)
index 0000000..ff8d13e
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_toolbar.png differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_zooml.png b/org.tizen.devtools/html/images/animator_timeline_zooml.png
new file mode 100644 (file)
index 0000000..d84515c
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_timeline_zooml.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_backward_normal.png b/org.tizen.devtools/html/images/animator_toolbar_backward_normal.png
new file mode 100644 (file)
index 0000000..41cc06b
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_backward_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png b/org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png
new file mode 100644 (file)
index 0000000..384661e
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png b/org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png
new file mode 100644 (file)
index 0000000..48e3397
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_ease_inout.png b/org.tizen.devtools/html/images/animator_toolbar_ease_inout.png
new file mode 100644 (file)
index 0000000..4319396
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_ease_inout.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_filter_normal.png b/org.tizen.devtools/html/images/animator_toolbar_filter_normal.png
new file mode 100644 (file)
index 0000000..fb8555b
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_filter_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_forward_normal.png b/org.tizen.devtools/html/images/animator_toolbar_forward_normal.png
new file mode 100644 (file)
index 0000000..259d650
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_forward_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_play_normal.png b/org.tizen.devtools/html/images/animator_toolbar_play_normal.png
new file mode 100644 (file)
index 0000000..06c2dd9
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_play_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png b/org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png
new file mode 100644 (file)
index 0000000..81d0da9
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_stop.png b/org.tizen.devtools/html/images/animator_toolbar_stop.png
new file mode 100644 (file)
index 0000000..297ac88
Binary files /dev/null and b/org.tizen.devtools/html/images/animator_toolbar_stop.png differ
diff --git a/org.tizen.devtools/html/images/app_exit.png b/org.tizen.devtools/html/images/app_exit.png
new file mode 100644 (file)
index 0000000..6f6a9f3
Binary files /dev/null and b/org.tizen.devtools/html/images/app_exit.png differ
diff --git a/org.tizen.devtools/html/images/arrow_down.png b/org.tizen.devtools/html/images/arrow_down.png
new file mode 100644 (file)
index 0000000..463a733
Binary files /dev/null and b/org.tizen.devtools/html/images/arrow_down.png differ
diff --git a/org.tizen.devtools/html/images/arrow_up.png b/org.tizen.devtools/html/images/arrow_up.png
new file mode 100644 (file)
index 0000000..89031aa
Binary files /dev/null and b/org.tizen.devtools/html/images/arrow_up.png differ
diff --git a/org.tizen.devtools/html/images/article.png b/org.tizen.devtools/html/images/article.png
new file mode 100644 (file)
index 0000000..e12a4f1
Binary files /dev/null and b/org.tizen.devtools/html/images/article.png differ
diff --git a/org.tizen.devtools/html/images/aside.png b/org.tizen.devtools/html/images/aside.png
new file mode 100644 (file)
index 0000000..3f01598
Binary files /dev/null and b/org.tizen.devtools/html/images/aside.png differ
diff --git a/org.tizen.devtools/html/images/audio.png b/org.tizen.devtools/html/images/audio.png
new file mode 100644 (file)
index 0000000..9a4d54d
Binary files /dev/null and b/org.tizen.devtools/html/images/audio.png differ
diff --git a/org.tizen.devtools/html/images/author_certificate.png b/org.tizen.devtools/html/images/author_certificate.png
new file mode 100644 (file)
index 0000000..71927de
Binary files /dev/null and b/org.tizen.devtools/html/images/author_certificate.png differ
diff --git a/org.tizen.devtools/html/images/bg_util_bar.gif b/org.tizen.devtools/html/images/bg_util_bar.gif
new file mode 100644 (file)
index 0000000..977f94d
Binary files /dev/null and b/org.tizen.devtools/html/images/bg_util_bar.gif differ
diff --git a/org.tizen.devtools/html/images/binding_info_designer.png b/org.tizen.devtools/html/images/binding_info_designer.png
new file mode 100644 (file)
index 0000000..f178656
Binary files /dev/null and b/org.tizen.devtools/html/images/binding_info_designer.png differ
diff --git a/org.tizen.devtools/html/images/binding_info_panel.png b/org.tizen.devtools/html/images/binding_info_panel.png
new file mode 100644 (file)
index 0000000..e211811
Binary files /dev/null and b/org.tizen.devtools/html/images/binding_info_panel.png differ
diff --git a/org.tizen.devtools/html/images/binding_info_toggle.png b/org.tizen.devtools/html/images/binding_info_toggle.png
new file mode 100644 (file)
index 0000000..feb5b82
Binary files /dev/null and b/org.tizen.devtools/html/images/binding_info_toggle.png differ
diff --git a/org.tizen.devtools/html/images/binding_info_toggle_delete.png b/org.tizen.devtools/html/images/binding_info_toggle_delete.png
new file mode 100644 (file)
index 0000000..407061c
Binary files /dev/null and b/org.tizen.devtools/html/images/binding_info_toggle_delete.png differ
diff --git a/org.tizen.devtools/html/images/binding_link.png b/org.tizen.devtools/html/images/binding_link.png
new file mode 100644 (file)
index 0000000..820059e
Binary files /dev/null and b/org.tizen.devtools/html/images/binding_link.png differ
diff --git a/org.tizen.devtools/html/images/btn_top.gif b/org.tizen.devtools/html/images/btn_top.gif
new file mode 100644 (file)
index 0000000..d35e824
Binary files /dev/null and b/org.tizen.devtools/html/images/btn_top.gif differ
diff --git a/org.tizen.devtools/html/images/canvas.png b/org.tizen.devtools/html/images/canvas.png
new file mode 100644 (file)
index 0000000..1dd9ee5
Binary files /dev/null and b/org.tizen.devtools/html/images/canvas.png differ
diff --git a/org.tizen.devtools/html/images/checking_css_automatic_check.png b/org.tizen.devtools/html/images/checking_css_automatic_check.png
new file mode 100644 (file)
index 0000000..87ed940
Binary files /dev/null and b/org.tizen.devtools/html/images/checking_css_automatic_check.png differ
diff --git a/org.tizen.devtools/html/images/color_01.png b/org.tizen.devtools/html/images/color_01.png
new file mode 100644 (file)
index 0000000..0e335e6
Binary files /dev/null and b/org.tizen.devtools/html/images/color_01.png differ
diff --git a/org.tizen.devtools/html/images/color_010.png b/org.tizen.devtools/html/images/color_010.png
new file mode 100644 (file)
index 0000000..a136fe6
Binary files /dev/null and b/org.tizen.devtools/html/images/color_010.png differ
diff --git a/org.tizen.devtools/html/images/color_011.png b/org.tizen.devtools/html/images/color_011.png
new file mode 100644 (file)
index 0000000..9be9631
Binary files /dev/null and b/org.tizen.devtools/html/images/color_011.png differ
diff --git a/org.tizen.devtools/html/images/color_012.png b/org.tizen.devtools/html/images/color_012.png
new file mode 100644 (file)
index 0000000..d2b4f79
Binary files /dev/null and b/org.tizen.devtools/html/images/color_012.png differ
diff --git a/org.tizen.devtools/html/images/color_013.png b/org.tizen.devtools/html/images/color_013.png
new file mode 100644 (file)
index 0000000..4fe2009
Binary files /dev/null and b/org.tizen.devtools/html/images/color_013.png differ
diff --git a/org.tizen.devtools/html/images/color_014.png b/org.tizen.devtools/html/images/color_014.png
new file mode 100644 (file)
index 0000000..0acb38a
Binary files /dev/null and b/org.tizen.devtools/html/images/color_014.png differ
diff --git a/org.tizen.devtools/html/images/color_015.png b/org.tizen.devtools/html/images/color_015.png
new file mode 100644 (file)
index 0000000..be9b34d
Binary files /dev/null and b/org.tizen.devtools/html/images/color_015.png differ
diff --git a/org.tizen.devtools/html/images/color_016.png b/org.tizen.devtools/html/images/color_016.png
new file mode 100644 (file)
index 0000000..ae7a7bd
Binary files /dev/null and b/org.tizen.devtools/html/images/color_016.png differ
diff --git a/org.tizen.devtools/html/images/color_017.png b/org.tizen.devtools/html/images/color_017.png
new file mode 100644 (file)
index 0000000..a9e71f6
Binary files /dev/null and b/org.tizen.devtools/html/images/color_017.png differ
diff --git a/org.tizen.devtools/html/images/color_018.png b/org.tizen.devtools/html/images/color_018.png
new file mode 100644 (file)
index 0000000..0acb38a
Binary files /dev/null and b/org.tizen.devtools/html/images/color_018.png differ
diff --git a/org.tizen.devtools/html/images/color_019.png b/org.tizen.devtools/html/images/color_019.png
new file mode 100644 (file)
index 0000000..bdf5ec4
Binary files /dev/null and b/org.tizen.devtools/html/images/color_019.png differ
diff --git a/org.tizen.devtools/html/images/color_02.png b/org.tizen.devtools/html/images/color_02.png
new file mode 100644 (file)
index 0000000..a136fe6
Binary files /dev/null and b/org.tizen.devtools/html/images/color_02.png differ
diff --git a/org.tizen.devtools/html/images/color_020.png b/org.tizen.devtools/html/images/color_020.png
new file mode 100644 (file)
index 0000000..d6407cf
Binary files /dev/null and b/org.tizen.devtools/html/images/color_020.png differ
diff --git a/org.tizen.devtools/html/images/color_021.png b/org.tizen.devtools/html/images/color_021.png
new file mode 100644 (file)
index 0000000..312b8da
Binary files /dev/null and b/org.tizen.devtools/html/images/color_021.png differ
diff --git a/org.tizen.devtools/html/images/color_022.png b/org.tizen.devtools/html/images/color_022.png
new file mode 100644 (file)
index 0000000..c7434e5
Binary files /dev/null and b/org.tizen.devtools/html/images/color_022.png differ
diff --git a/org.tizen.devtools/html/images/color_023.png b/org.tizen.devtools/html/images/color_023.png
new file mode 100644 (file)
index 0000000..8f3bffc
Binary files /dev/null and b/org.tizen.devtools/html/images/color_023.png differ
diff --git a/org.tizen.devtools/html/images/color_024.png b/org.tizen.devtools/html/images/color_024.png
new file mode 100644 (file)
index 0000000..8e4edbe
Binary files /dev/null and b/org.tizen.devtools/html/images/color_024.png differ
diff --git a/org.tizen.devtools/html/images/color_025.png b/org.tizen.devtools/html/images/color_025.png
new file mode 100644 (file)
index 0000000..bdf5ec4
Binary files /dev/null and b/org.tizen.devtools/html/images/color_025.png differ
diff --git a/org.tizen.devtools/html/images/color_026.png b/org.tizen.devtools/html/images/color_026.png
new file mode 100644 (file)
index 0000000..2a6b0ec
Binary files /dev/null and b/org.tizen.devtools/html/images/color_026.png differ
diff --git a/org.tizen.devtools/html/images/color_027.png b/org.tizen.devtools/html/images/color_027.png
new file mode 100644 (file)
index 0000000..082923f
Binary files /dev/null and b/org.tizen.devtools/html/images/color_027.png differ
diff --git a/org.tizen.devtools/html/images/color_028.png b/org.tizen.devtools/html/images/color_028.png
new file mode 100644 (file)
index 0000000..eb40353
Binary files /dev/null and b/org.tizen.devtools/html/images/color_028.png differ
diff --git a/org.tizen.devtools/html/images/color_029.png b/org.tizen.devtools/html/images/color_029.png
new file mode 100644 (file)
index 0000000..499e714
Binary files /dev/null and b/org.tizen.devtools/html/images/color_029.png differ
diff --git a/org.tizen.devtools/html/images/color_03.png b/org.tizen.devtools/html/images/color_03.png
new file mode 100644 (file)
index 0000000..9be9631
Binary files /dev/null and b/org.tizen.devtools/html/images/color_03.png differ
diff --git a/org.tizen.devtools/html/images/color_030.png b/org.tizen.devtools/html/images/color_030.png
new file mode 100644 (file)
index 0000000..23dc640
Binary files /dev/null and b/org.tizen.devtools/html/images/color_030.png differ
diff --git a/org.tizen.devtools/html/images/color_031.png b/org.tizen.devtools/html/images/color_031.png
new file mode 100644 (file)
index 0000000..0c8f782
Binary files /dev/null and b/org.tizen.devtools/html/images/color_031.png differ
diff --git a/org.tizen.devtools/html/images/color_04.png b/org.tizen.devtools/html/images/color_04.png
new file mode 100644 (file)
index 0000000..d2b4f79
Binary files /dev/null and b/org.tizen.devtools/html/images/color_04.png differ
diff --git a/org.tizen.devtools/html/images/color_05.png b/org.tizen.devtools/html/images/color_05.png
new file mode 100644 (file)
index 0000000..ebbdc64
Binary files /dev/null and b/org.tizen.devtools/html/images/color_05.png differ
diff --git a/org.tizen.devtools/html/images/color_06.png b/org.tizen.devtools/html/images/color_06.png
new file mode 100644 (file)
index 0000000..b3b3381
Binary files /dev/null and b/org.tizen.devtools/html/images/color_06.png differ
diff --git a/org.tizen.devtools/html/images/color_07.png b/org.tizen.devtools/html/images/color_07.png
new file mode 100644 (file)
index 0000000..f7a0cbd
Binary files /dev/null and b/org.tizen.devtools/html/images/color_07.png differ
diff --git a/org.tizen.devtools/html/images/color_08.png b/org.tizen.devtools/html/images/color_08.png
new file mode 100644 (file)
index 0000000..8f64c64
Binary files /dev/null and b/org.tizen.devtools/html/images/color_08.png differ
diff --git a/org.tizen.devtools/html/images/color_09.png b/org.tizen.devtools/html/images/color_09.png
new file mode 100644 (file)
index 0000000..0e335e6
Binary files /dev/null and b/org.tizen.devtools/html/images/color_09.png differ
diff --git a/org.tizen.devtools/html/images/color_1.png b/org.tizen.devtools/html/images/color_1.png
new file mode 100644 (file)
index 0000000..a0b96e3
Binary files /dev/null and b/org.tizen.devtools/html/images/color_1.png differ
diff --git a/org.tizen.devtools/html/images/color_10.png b/org.tizen.devtools/html/images/color_10.png
new file mode 100644 (file)
index 0000000..11e3eb4
Binary files /dev/null and b/org.tizen.devtools/html/images/color_10.png differ
diff --git a/org.tizen.devtools/html/images/color_11.png b/org.tizen.devtools/html/images/color_11.png
new file mode 100644 (file)
index 0000000..4eba3f2
Binary files /dev/null and b/org.tizen.devtools/html/images/color_11.png differ
diff --git a/org.tizen.devtools/html/images/color_12.png b/org.tizen.devtools/html/images/color_12.png
new file mode 100644 (file)
index 0000000..06430f1
Binary files /dev/null and b/org.tizen.devtools/html/images/color_12.png differ
diff --git a/org.tizen.devtools/html/images/color_13.png b/org.tizen.devtools/html/images/color_13.png
new file mode 100644 (file)
index 0000000..d94bbfa
Binary files /dev/null and b/org.tizen.devtools/html/images/color_13.png differ
diff --git a/org.tizen.devtools/html/images/color_14.png b/org.tizen.devtools/html/images/color_14.png
new file mode 100644 (file)
index 0000000..8abb8f9
Binary files /dev/null and b/org.tizen.devtools/html/images/color_14.png differ
diff --git a/org.tizen.devtools/html/images/color_15.png b/org.tizen.devtools/html/images/color_15.png
new file mode 100644 (file)
index 0000000..9aa548b
Binary files /dev/null and b/org.tizen.devtools/html/images/color_15.png differ
diff --git a/org.tizen.devtools/html/images/color_2.png b/org.tizen.devtools/html/images/color_2.png
new file mode 100644 (file)
index 0000000..654e9d3
Binary files /dev/null and b/org.tizen.devtools/html/images/color_2.png differ
diff --git a/org.tizen.devtools/html/images/color_20.png b/org.tizen.devtools/html/images/color_20.png
new file mode 100644 (file)
index 0000000..b9ff685
Binary files /dev/null and b/org.tizen.devtools/html/images/color_20.png differ
diff --git a/org.tizen.devtools/html/images/color_22.png b/org.tizen.devtools/html/images/color_22.png
new file mode 100644 (file)
index 0000000..a0c0a75
Binary files /dev/null and b/org.tizen.devtools/html/images/color_22.png differ
diff --git a/org.tizen.devtools/html/images/color_3.png b/org.tizen.devtools/html/images/color_3.png
new file mode 100644 (file)
index 0000000..ff00923
Binary files /dev/null and b/org.tizen.devtools/html/images/color_3.png differ
diff --git a/org.tizen.devtools/html/images/color_4.png b/org.tizen.devtools/html/images/color_4.png
new file mode 100644 (file)
index 0000000..76716df
Binary files /dev/null and b/org.tizen.devtools/html/images/color_4.png differ
diff --git a/org.tizen.devtools/html/images/color_5.png b/org.tizen.devtools/html/images/color_5.png
new file mode 100644 (file)
index 0000000..58cc496
Binary files /dev/null and b/org.tizen.devtools/html/images/color_5.png differ
diff --git a/org.tizen.devtools/html/images/color_6.png b/org.tizen.devtools/html/images/color_6.png
new file mode 100644 (file)
index 0000000..9adb025
Binary files /dev/null and b/org.tizen.devtools/html/images/color_6.png differ
diff --git a/org.tizen.devtools/html/images/color_7.png b/org.tizen.devtools/html/images/color_7.png
new file mode 100644 (file)
index 0000000..3882ae5
Binary files /dev/null and b/org.tizen.devtools/html/images/color_7.png differ
diff --git a/org.tizen.devtools/html/images/color_8.png b/org.tizen.devtools/html/images/color_8.png
new file mode 100644 (file)
index 0000000..11e3eb4
Binary files /dev/null and b/org.tizen.devtools/html/images/color_8.png differ
diff --git a/org.tizen.devtools/html/images/color_9.png b/org.tizen.devtools/html/images/color_9.png
new file mode 100644 (file)
index 0000000..7a6ca10
Binary files /dev/null and b/org.tizen.devtools/html/images/color_9.png differ
diff --git a/org.tizen.devtools/html/images/command.png b/org.tizen.devtools/html/images/command.png
new file mode 100644 (file)
index 0000000..0e274f3
Binary files /dev/null and b/org.tizen.devtools/html/images/command.png differ
diff --git a/org.tizen.devtools/html/images/command_html.png b/org.tizen.devtools/html/images/command_html.png
new file mode 100644 (file)
index 0000000..fafefbd
Binary files /dev/null and b/org.tizen.devtools/html/images/command_html.png differ
diff --git a/org.tizen.devtools/html/images/config_tab.png b/org.tizen.devtools/html/images/config_tab.png
new file mode 100644 (file)
index 0000000..427c1d0
Binary files /dev/null and b/org.tizen.devtools/html/images/config_tab.png differ
diff --git a/org.tizen.devtools/html/images/connection_explorer.png b/org.tizen.devtools/html/images/connection_explorer.png
new file mode 100644 (file)
index 0000000..6310062
Binary files /dev/null and b/org.tizen.devtools/html/images/connection_explorer.png differ
diff --git a/org.tizen.devtools/html/images/content_assist_java.png b/org.tizen.devtools/html/images/content_assist_java.png
new file mode 100644 (file)
index 0000000..950f085
Binary files /dev/null and b/org.tizen.devtools/html/images/content_assist_java.png differ
diff --git a/org.tizen.devtools/html/images/css_layer1.png b/org.tizen.devtools/html/images/css_layer1.png
new file mode 100644 (file)
index 0000000..2b1bed8
Binary files /dev/null and b/org.tizen.devtools/html/images/css_layer1.png differ
diff --git a/org.tizen.devtools/html/images/css_layer2.png b/org.tizen.devtools/html/images/css_layer2.png
new file mode 100644 (file)
index 0000000..88270e3
Binary files /dev/null and b/org.tizen.devtools/html/images/css_layer2.png differ
diff --git a/org.tizen.devtools/html/images/css_layer3.png b/org.tizen.devtools/html/images/css_layer3.png
new file mode 100644 (file)
index 0000000..a456920
Binary files /dev/null and b/org.tizen.devtools/html/images/css_layer3.png differ
diff --git a/org.tizen.devtools/html/images/css_layers.png b/org.tizen.devtools/html/images/css_layers.png
new file mode 100644 (file)
index 0000000..b4e49b8
Binary files /dev/null and b/org.tizen.devtools/html/images/css_layers.png differ
diff --git a/org.tizen.devtools/html/images/da_edit_chart_dialog.png b/org.tizen.devtools/html/images/da_edit_chart_dialog.png
new file mode 100644 (file)
index 0000000..c459e4e
Binary files /dev/null and b/org.tizen.devtools/html/images/da_edit_chart_dialog.png differ
diff --git a/org.tizen.devtools/html/images/da_network.png b/org.tizen.devtools/html/images/da_network.png
new file mode 100644 (file)
index 0000000..a657968
Binary files /dev/null and b/org.tizen.devtools/html/images/da_network.png differ
diff --git a/org.tizen.devtools/html/images/da_network_api_list.png b/org.tizen.devtools/html/images/da_network_api_list.png
new file mode 100644 (file)
index 0000000..a89a55a
Binary files /dev/null and b/org.tizen.devtools/html/images/da_network_api_list.png differ
diff --git a/org.tizen.devtools/html/images/da_network_chart.png b/org.tizen.devtools/html/images/da_network_chart.png
new file mode 100644 (file)
index 0000000..3c5b643
Binary files /dev/null and b/org.tizen.devtools/html/images/da_network_chart.png differ
diff --git a/org.tizen.devtools/html/images/da_network_details.png b/org.tizen.devtools/html/images/da_network_details.png
new file mode 100644 (file)
index 0000000..ebc585f
Binary files /dev/null and b/org.tizen.devtools/html/images/da_network_details.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_analysis.png b/org.tizen.devtools/html/images/da_opengl_analysis.png
new file mode 100644 (file)
index 0000000..0f0f7c8
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_analysis.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_api_list.png b/org.tizen.devtools/html/images/da_opengl_api_list.png
new file mode 100644 (file)
index 0000000..4e5a418
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_api_list.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_chart_details.png b/org.tizen.devtools/html/images/da_opengl_chart_details.png
new file mode 100644 (file)
index 0000000..666818a
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_chart_details.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_chart_rate.png b/org.tizen.devtools/html/images/da_opengl_chart_rate.png
new file mode 100644 (file)
index 0000000..53f499c
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_chart_rate.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_chart_time.png b/org.tizen.devtools/html/images/da_opengl_chart_time.png
new file mode 100644 (file)
index 0000000..192c6ab
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_chart_time.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_context.png b/org.tizen.devtools/html/images/da_opengl_context.png
new file mode 100644 (file)
index 0000000..9cab10a
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_context.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_context_changed.png b/org.tizen.devtools/html/images/da_opengl_context_changed.png
new file mode 100644 (file)
index 0000000..4859e77
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_context_changed.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_details.png b/org.tizen.devtools/html/images/da_opengl_details.png
new file mode 100644 (file)
index 0000000..445502f
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_details.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_program.png b/org.tizen.devtools/html/images/da_opengl_program.png
new file mode 100644 (file)
index 0000000..b75ff96
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_program.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_program_details.png b/org.tizen.devtools/html/images/da_opengl_program_details.png
new file mode 100644 (file)
index 0000000..64ecf31
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_program_details.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_redundant.png b/org.tizen.devtools/html/images/da_opengl_redundant.png
new file mode 100644 (file)
index 0000000..ca8103f
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_redundant.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_statistics.png b/org.tizen.devtools/html/images/da_opengl_statistics.png
new file mode 100644 (file)
index 0000000..5f2865a
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_statistics.png differ
diff --git a/org.tizen.devtools/html/images/da_opengl_texture.png b/org.tizen.devtools/html/images/da_opengl_texture.png
new file mode 100644 (file)
index 0000000..32a7acf
Binary files /dev/null and b/org.tizen.devtools/html/images/da_opengl_texture.png differ
diff --git a/org.tizen.devtools/html/images/da_summary_info.png b/org.tizen.devtools/html/images/da_summary_info.png
new file mode 100644 (file)
index 0000000..ba3c09e
Binary files /dev/null and b/org.tizen.devtools/html/images/da_summary_info.png differ
diff --git a/org.tizen.devtools/html/images/data_model_add.png b/org.tizen.devtools/html/images/data_model_add.png
new file mode 100644 (file)
index 0000000..996189f
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_add.png differ
diff --git a/org.tizen.devtools/html/images/data_model_clear.png b/org.tizen.devtools/html/images/data_model_clear.png
new file mode 100644 (file)
index 0000000..9ed325c
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_clear.png differ
diff --git a/org.tizen.devtools/html/images/data_model_collapse.png b/org.tizen.devtools/html/images/data_model_collapse.png
new file mode 100644 (file)
index 0000000..4da7cfd
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_collapse.png differ
diff --git a/org.tizen.devtools/html/images/data_model_compacted.png b/org.tizen.devtools/html/images/data_model_compacted.png
new file mode 100644 (file)
index 0000000..2ae03e8
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_compacted.png differ
diff --git a/org.tizen.devtools/html/images/data_model_create.png b/org.tizen.devtools/html/images/data_model_create.png
new file mode 100644 (file)
index 0000000..2a983a3
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_create.png differ
diff --git a/org.tizen.devtools/html/images/data_model_delete.png b/org.tizen.devtools/html/images/data_model_delete.png
new file mode 100644 (file)
index 0000000..c1b2c24
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_delete.png differ
diff --git a/org.tizen.devtools/html/images/data_model_down.png b/org.tizen.devtools/html/images/data_model_down.png
new file mode 100644 (file)
index 0000000..5cfbfa7
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_down.png differ
diff --git a/org.tizen.devtools/html/images/data_model_expand.png b/org.tizen.devtools/html/images/data_model_expand.png
new file mode 100644 (file)
index 0000000..f43c9f4
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_expand.png differ
diff --git a/org.tizen.devtools/html/images/data_model_formatted.png b/org.tizen.devtools/html/images/data_model_formatted.png
new file mode 100644 (file)
index 0000000..1a0e8d4
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_formatted.png differ
diff --git a/org.tizen.devtools/html/images/data_model_item.png b/org.tizen.devtools/html/images/data_model_item.png
new file mode 100644 (file)
index 0000000..20c7a05
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_item.png differ
diff --git a/org.tizen.devtools/html/images/data_model_open.png b/org.tizen.devtools/html/images/data_model_open.png
new file mode 100644 (file)
index 0000000..06caecc
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_open.png differ
diff --git a/org.tizen.devtools/html/images/data_model_panel.png b/org.tizen.devtools/html/images/data_model_panel.png
new file mode 100644 (file)
index 0000000..53e2cd7
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_panel.png differ
diff --git a/org.tizen.devtools/html/images/data_model_reload.png b/org.tizen.devtools/html/images/data_model_reload.png
new file mode 100644 (file)
index 0000000..64fd456
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_reload.png differ
diff --git a/org.tizen.devtools/html/images/data_model_remove.png b/org.tizen.devtools/html/images/data_model_remove.png
new file mode 100644 (file)
index 0000000..fbd8e22
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_remove.png differ
diff --git a/org.tizen.devtools/html/images/data_model_remove_all.png b/org.tizen.devtools/html/images/data_model_remove_all.png
new file mode 100644 (file)
index 0000000..58fa3f9
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_remove_all.png differ
diff --git a/org.tizen.devtools/html/images/data_model_up.png b/org.tizen.devtools/html/images/data_model_up.png
new file mode 100644 (file)
index 0000000..6971be6
Binary files /dev/null and b/org.tizen.devtools/html/images/data_model_up.png differ
diff --git a/org.tizen.devtools/html/images/data_source1.png b/org.tizen.devtools/html/images/data_source1.png
new file mode 100644 (file)
index 0000000..a7a8254
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source1.png differ
diff --git a/org.tizen.devtools/html/images/data_source2.png b/org.tizen.devtools/html/images/data_source2.png
new file mode 100644 (file)
index 0000000..c94fff0
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source2.png differ
diff --git a/org.tizen.devtools/html/images/data_source_api.png b/org.tizen.devtools/html/images/data_source_api.png
new file mode 100644 (file)
index 0000000..0ee84b7
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_api.png differ
diff --git a/org.tizen.devtools/html/images/data_source_create.png b/org.tizen.devtools/html/images/data_source_create.png
new file mode 100644 (file)
index 0000000..ea2c2f5
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_create.png differ
diff --git a/org.tizen.devtools/html/images/data_source_delete.png b/org.tizen.devtools/html/images/data_source_delete.png
new file mode 100644 (file)
index 0000000..319143f
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_delete.png differ
diff --git a/org.tizen.devtools/html/images/data_source_dialog.png b/org.tizen.devtools/html/images/data_source_dialog.png
new file mode 100644 (file)
index 0000000..cc5091b
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_dialog.png differ
diff --git a/org.tizen.devtools/html/images/data_source_empty.png b/org.tizen.devtools/html/images/data_source_empty.png
new file mode 100644 (file)
index 0000000..02774ec
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_empty.png differ
diff --git a/org.tizen.devtools/html/images/data_source_file.png b/org.tizen.devtools/html/images/data_source_file.png
new file mode 100644 (file)
index 0000000..4fca812
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_file.png differ
diff --git a/org.tizen.devtools/html/images/data_source_panel.png b/org.tizen.devtools/html/images/data_source_panel.png
new file mode 100644 (file)
index 0000000..e567a68
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_panel.png differ
diff --git a/org.tizen.devtools/html/images/data_source_remote.png b/org.tizen.devtools/html/images/data_source_remote.png
new file mode 100644 (file)
index 0000000..f7c3c9b
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_remote.png differ
diff --git a/org.tizen.devtools/html/images/data_source_set.png b/org.tizen.devtools/html/images/data_source_set.png
new file mode 100644 (file)
index 0000000..a855089
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_set.png differ
diff --git a/org.tizen.devtools/html/images/data_source_static.png b/org.tizen.devtools/html/images/data_source_static.png
new file mode 100644 (file)
index 0000000..a9bee48
Binary files /dev/null and b/org.tizen.devtools/html/images/data_source_static.png differ
diff --git a/org.tizen.devtools/html/images/databinding_calendar.png b/org.tizen.devtools/html/images/databinding_calendar.png
new file mode 100644 (file)
index 0000000..7552515
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_calendar.png differ
diff --git a/org.tizen.devtools/html/images/databinding_call_history.png b/org.tizen.devtools/html/images/databinding_call_history.png
new file mode 100644 (file)
index 0000000..fd533e4
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_call_history.png differ
diff --git a/org.tizen.devtools/html/images/databinding_contact.png b/org.tizen.devtools/html/images/databinding_contact.png
new file mode 100644 (file)
index 0000000..6b24f3f
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_contact.png differ
diff --git a/org.tizen.devtools/html/images/databinding_file_system.png b/org.tizen.devtools/html/images/databinding_file_system.png
new file mode 100644 (file)
index 0000000..0667154
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_file_system.png differ
diff --git a/org.tizen.devtools/html/images/databinding_remote.png b/org.tizen.devtools/html/images/databinding_remote.png
new file mode 100644 (file)
index 0000000..1706664
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_remote.png differ
diff --git a/org.tizen.devtools/html/images/databinding_static.png b/org.tizen.devtools/html/images/databinding_static.png
new file mode 100644 (file)
index 0000000..5e3bba9
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_static.png differ
diff --git a/org.tizen.devtools/html/images/databinding_view.png b/org.tizen.devtools/html/images/databinding_view.png
new file mode 100644 (file)
index 0000000..f3598af
Binary files /dev/null and b/org.tizen.devtools/html/images/databinding_view.png differ
diff --git a/org.tizen.devtools/html/images/datalist.png b/org.tizen.devtools/html/images/datalist.png
new file mode 100644 (file)
index 0000000..32569a4
Binary files /dev/null and b/org.tizen.devtools/html/images/datalist.png differ
diff --git a/org.tizen.devtools/html/images/designer_areasize.png b/org.tizen.devtools/html/images/designer_areasize.png
new file mode 100644 (file)
index 0000000..a779f85
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_areasize.png differ
diff --git a/org.tizen.devtools/html/images/designer_max.png b/org.tizen.devtools/html/images/designer_max.png
new file mode 100644 (file)
index 0000000..3fe0848
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_max.png differ
diff --git a/org.tizen.devtools/html/images/designer_next.png b/org.tizen.devtools/html/images/designer_next.png
new file mode 100644 (file)
index 0000000..57d6648
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_next.png differ
diff --git a/org.tizen.devtools/html/images/designer_previous.png b/org.tizen.devtools/html/images/designer_previous.png
new file mode 100644 (file)
index 0000000..6f02ea5
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_previous.png differ
diff --git a/org.tizen.devtools/html/images/designer_resolution.png b/org.tizen.devtools/html/images/designer_resolution.png
new file mode 100644 (file)
index 0000000..1ec808d
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_resolution.png differ
diff --git a/org.tizen.devtools/html/images/designer_view.png b/org.tizen.devtools/html/images/designer_view.png
new file mode 100644 (file)
index 0000000..8dfd991
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_view.png differ
diff --git a/org.tizen.devtools/html/images/designer_zoomin.png b/org.tizen.devtools/html/images/designer_zoomin.png
new file mode 100644 (file)
index 0000000..4037d41
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_zoomin.png differ
diff --git a/org.tizen.devtools/html/images/designer_zoomout.png b/org.tizen.devtools/html/images/designer_zoomout.png
new file mode 100644 (file)
index 0000000..2fdc457
Binary files /dev/null and b/org.tizen.devtools/html/images/designer_zoomout.png differ
diff --git a/org.tizen.devtools/html/images/details.png b/org.tizen.devtools/html/images/details.png
new file mode 100644 (file)
index 0000000..66990ec
Binary files /dev/null and b/org.tizen.devtools/html/images/details.png differ
diff --git a/org.tizen.devtools/html/images/device_change.png b/org.tizen.devtools/html/images/device_change.png
new file mode 100644 (file)
index 0000000..65afaa6
Binary files /dev/null and b/org.tizen.devtools/html/images/device_change.png differ
diff --git a/org.tizen.devtools/html/images/device_icon.png b/org.tizen.devtools/html/images/device_icon.png
new file mode 100644 (file)
index 0000000..c215668
Binary files /dev/null and b/org.tizen.devtools/html/images/device_icon.png differ
diff --git a/org.tizen.devtools/html/images/device_select.png b/org.tizen.devtools/html/images/device_select.png
new file mode 100644 (file)
index 0000000..1bc02a9
Binary files /dev/null and b/org.tizen.devtools/html/images/device_select.png differ
diff --git a/org.tizen.devtools/html/images/devices.png b/org.tizen.devtools/html/images/devices.png
new file mode 100644 (file)
index 0000000..cd72bd7
Binary files /dev/null and b/org.tizen.devtools/html/images/devices.png differ
diff --git a/org.tizen.devtools/html/images/devices_page.png b/org.tizen.devtools/html/images/devices_page.png
new file mode 100644 (file)
index 0000000..de58169
Binary files /dev/null and b/org.tizen.devtools/html/images/devices_page.png differ
diff --git a/org.tizen.devtools/html/images/dynamic_analyzer.png b/org.tizen.devtools/html/images/dynamic_analyzer.png
new file mode 100644 (file)
index 0000000..d5c7795
Binary files /dev/null and b/org.tizen.devtools/html/images/dynamic_analyzer.png differ
diff --git a/org.tizen.devtools/html/images/ecp_cli_modes.png b/org.tizen.devtools/html/images/ecp_cli_modes.png
new file mode 100644 (file)
index 0000000..008639a
Binary files /dev/null and b/org.tizen.devtools/html/images/ecp_cli_modes.png differ
diff --git a/org.tizen.devtools/html/images/editor_area.png b/org.tizen.devtools/html/images/editor_area.png
new file mode 100644 (file)
index 0000000..7fe1f8c
Binary files /dev/null and b/org.tizen.devtools/html/images/editor_area.png differ
diff --git a/org.tizen.devtools/html/images/emulator_cli.png b/org.tizen.devtools/html/images/emulator_cli.png
new file mode 100644 (file)
index 0000000..3c4d59f
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_cli.png differ
diff --git a/org.tizen.devtools/html/images/emulator_controls_mobile.png b/org.tizen.devtools/html/images/emulator_controls_mobile.png
new file mode 100644 (file)
index 0000000..f8a0fef
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_controls_mobile.png differ
diff --git a/org.tizen.devtools/html/images/emulator_controls_wearable.png b/org.tizen.devtools/html/images/emulator_controls_wearable.png
new file mode 100644 (file)
index 0000000..a20765c
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_controls_wearable.png differ
diff --git a/org.tizen.devtools/html/images/emulator_icon.png b/org.tizen.devtools/html/images/emulator_icon.png
new file mode 100644 (file)
index 0000000..88a6eef
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_icon.png differ
diff --git a/org.tizen.devtools/html/images/emulator_manager.png b/org.tizen.devtools/html/images/emulator_manager.png
new file mode 100644 (file)
index 0000000..6867e35
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_manager.png differ
diff --git a/org.tizen.devtools/html/images/emulator_network_architecture.png b/org.tizen.devtools/html/images/emulator_network_architecture.png
new file mode 100644 (file)
index 0000000..2b70f8f
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_network_architecture.png differ
diff --git a/org.tizen.devtools/html/images/enventor_about.png b/org.tizen.devtools/html/images/enventor_about.png
new file mode 100644 (file)
index 0000000..7af98e8
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_about.png differ
diff --git a/org.tizen.devtools/html/images/enventor_autocomplete.png b/org.tizen.devtools/html/images/enventor_autocomplete.png
new file mode 100644 (file)
index 0000000..453cf48
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_autocomplete.png differ
diff --git a/org.tizen.devtools/html/images/enventor_basic_view.png b/org.tizen.devtools/html/images/enventor_basic_view.png
new file mode 100644 (file)
index 0000000..8a80b95
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_basic_view.png differ
diff --git a/org.tizen.devtools/html/images/enventor_candidate.png b/org.tizen.devtools/html/images/enventor_candidate.png
new file mode 100644 (file)
index 0000000..8b39467
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_candidate.png differ
diff --git a/org.tizen.devtools/html/images/enventor_console.png b/org.tizen.devtools/html/images/enventor_console.png
new file mode 100644 (file)
index 0000000..9f50f02
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_console.png differ
diff --git a/org.tizen.devtools/html/images/enventor_find.png b/org.tizen.devtools/html/images/enventor_find.png
new file mode 100644 (file)
index 0000000..0343e47
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_find.png differ
diff --git a/org.tizen.devtools/html/images/enventor_function.png b/org.tizen.devtools/html/images/enventor_function.png
new file mode 100644 (file)
index 0000000..da274c6
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_function.png differ
diff --git a/org.tizen.devtools/html/images/enventor_goto.png b/org.tizen.devtools/html/images/enventor_goto.png
new file mode 100644 (file)
index 0000000..a151527
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_goto.png differ
diff --git a/org.tizen.devtools/html/images/enventor_highlight.png b/org.tizen.devtools/html/images/enventor_highlight.png
new file mode 100644 (file)
index 0000000..42d8be2
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_highlight.png differ
diff --git a/org.tizen.devtools/html/images/enventor_layout.png b/org.tizen.devtools/html/images/enventor_layout.png
new file mode 100644 (file)
index 0000000..28bb926
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_layout.png differ
diff --git a/org.tizen.devtools/html/images/enventor_lines.png b/org.tizen.devtools/html/images/enventor_lines.png
new file mode 100644 (file)
index 0000000..2303351
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_lines.png differ
diff --git a/org.tizen.devtools/html/images/enventor_liveedit.png b/org.tizen.devtools/html/images/enventor_liveedit.png
new file mode 100644 (file)
index 0000000..52b59fd
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_liveedit.png differ
diff --git a/org.tizen.devtools/html/images/enventor_part_objects.png b/org.tizen.devtools/html/images/enventor_part_objects.png
new file mode 100644 (file)
index 0000000..356602f
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_part_objects.png differ
diff --git a/org.tizen.devtools/html/images/enventor_preview_object.png b/org.tizen.devtools/html/images/enventor_preview_object.png
new file mode 100644 (file)
index 0000000..9612b27
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_preview_object.png differ
diff --git a/org.tizen.devtools/html/images/enventor_redo.png b/org.tizen.devtools/html/images/enventor_redo.png
new file mode 100644 (file)
index 0000000..254b10c
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_redo.png differ
diff --git a/org.tizen.devtools/html/images/enventor_save.png b/org.tizen.devtools/html/images/enventor_save.png
new file mode 100644 (file)
index 0000000..7b4f0e3
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_save.png differ
diff --git a/org.tizen.devtools/html/images/enventor_setting.png b/org.tizen.devtools/html/images/enventor_setting.png
new file mode 100644 (file)
index 0000000..abeb7b5
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_setting.png differ
diff --git a/org.tizen.devtools/html/images/enventor_settings_window.png b/org.tizen.devtools/html/images/enventor_settings_window.png
new file mode 100644 (file)
index 0000000..f2734b2
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_settings_window.png differ
diff --git a/org.tizen.devtools/html/images/enventor_source_code.png b/org.tizen.devtools/html/images/enventor_source_code.png
new file mode 100644 (file)
index 0000000..44da461
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_source_code.png differ
diff --git a/org.tizen.devtools/html/images/enventor_status.png b/org.tizen.devtools/html/images/enventor_status.png
new file mode 100644 (file)
index 0000000..6cac4b1
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_status.png differ
diff --git a/org.tizen.devtools/html/images/enventor_swallow.png b/org.tizen.devtools/html/images/enventor_swallow.png
new file mode 100644 (file)
index 0000000..84cc55f
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_swallow.png differ
diff --git a/org.tizen.devtools/html/images/enventor_undo.png b/org.tizen.devtools/html/images/enventor_undo.png
new file mode 100644 (file)
index 0000000..3dc01a0
Binary files /dev/null and b/org.tizen.devtools/html/images/enventor_undo.png differ
diff --git a/org.tizen.devtools/html/images/eventcast_architecture.png b/org.tizen.devtools/html/images/eventcast_architecture.png
new file mode 100644 (file)
index 0000000..fa2e22f
Binary files /dev/null and b/org.tizen.devtools/html/images/eventcast_architecture.png differ
diff --git a/org.tizen.devtools/html/images/feature_details.png b/org.tizen.devtools/html/images/feature_details.png
new file mode 100644 (file)
index 0000000..1147482
Binary files /dev/null and b/org.tizen.devtools/html/images/feature_details.png differ
diff --git a/org.tizen.devtools/html/images/features_tab.png b/org.tizen.devtools/html/images/features_tab.png
new file mode 100644 (file)
index 0000000..e78c9f9
Binary files /dev/null and b/org.tizen.devtools/html/images/features_tab.png differ
diff --git a/org.tizen.devtools/html/images/figure.png b/org.tizen.devtools/html/images/figure.png
new file mode 100644 (file)
index 0000000..6266b91
Binary files /dev/null and b/org.tizen.devtools/html/images/figure.png differ
diff --git a/org.tizen.devtools/html/images/file_api_list.png b/org.tizen.devtools/html/images/file_api_list.png
new file mode 100644 (file)
index 0000000..f256c80
Binary files /dev/null and b/org.tizen.devtools/html/images/file_api_list.png differ
diff --git a/org.tizen.devtools/html/images/file_chart.png b/org.tizen.devtools/html/images/file_chart.png
new file mode 100644 (file)
index 0000000..d3178a5
Binary files /dev/null and b/org.tizen.devtools/html/images/file_chart.png differ
diff --git a/org.tizen.devtools/html/images/file_detail_info.png b/org.tizen.devtools/html/images/file_detail_info.png
new file mode 100644 (file)
index 0000000..8104aa5
Binary files /dev/null and b/org.tizen.devtools/html/images/file_detail_info.png differ
diff --git a/org.tizen.devtools/html/images/file_tab.png b/org.tizen.devtools/html/images/file_tab.png
new file mode 100644 (file)
index 0000000..dacf2b2
Binary files /dev/null and b/org.tizen.devtools/html/images/file_tab.png differ
diff --git a/org.tizen.devtools/html/images/footer.png b/org.tizen.devtools/html/images/footer.png
new file mode 100644 (file)
index 0000000..8c80d98
Binary files /dev/null and b/org.tizen.devtools/html/images/footer.png differ
diff --git a/org.tizen.devtools/html/images/header.png b/org.tizen.devtools/html/images/header.png
new file mode 100644 (file)
index 0000000..1dd456d
Binary files /dev/null and b/org.tizen.devtools/html/images/header.png differ
diff --git a/org.tizen.devtools/html/images/hgroup.png b/org.tizen.devtools/html/images/hgroup.png
new file mode 100644 (file)
index 0000000..417e5ef
Binary files /dev/null and b/org.tizen.devtools/html/images/hgroup.png differ
diff --git a/org.tizen.devtools/html/images/hori_split_view.png b/org.tizen.devtools/html/images/hori_split_view.png
new file mode 100644 (file)
index 0000000..c8a0202
Binary files /dev/null and b/org.tizen.devtools/html/images/hori_split_view.png differ
diff --git a/org.tizen.devtools/html/images/html_assist.png b/org.tizen.devtools/html/images/html_assist.png
new file mode 100644 (file)
index 0000000..43e5c82
Binary files /dev/null and b/org.tizen.devtools/html/images/html_assist.png differ
diff --git a/org.tizen.devtools/html/images/html_breadcrumb.png b/org.tizen.devtools/html/images/html_breadcrumb.png
new file mode 100644 (file)
index 0000000..dda03fa
Binary files /dev/null and b/org.tizen.devtools/html/images/html_breadcrumb.png differ
diff --git a/org.tizen.devtools/html/images/html_breadcrumb_toggle.png b/org.tizen.devtools/html/images/html_breadcrumb_toggle.png
new file mode 100644 (file)
index 0000000..ceb8243
Binary files /dev/null and b/org.tizen.devtools/html/images/html_breadcrumb_toggle.png differ
diff --git a/org.tizen.devtools/html/images/html_hover.png b/org.tizen.devtools/html/images/html_hover.png
new file mode 100644 (file)
index 0000000..2433a56
Binary files /dev/null and b/org.tizen.devtools/html/images/html_hover.png differ
diff --git a/org.tizen.devtools/html/images/html_refactor_after.png b/org.tizen.devtools/html/images/html_refactor_after.png
new file mode 100644 (file)
index 0000000..567442b
Binary files /dev/null and b/org.tizen.devtools/html/images/html_refactor_after.png differ
diff --git a/org.tizen.devtools/html/images/html_refactor_before.png b/org.tizen.devtools/html/images/html_refactor_before.png
new file mode 100644 (file)
index 0000000..1d75e94
Binary files /dev/null and b/org.tizen.devtools/html/images/html_refactor_before.png differ
diff --git a/org.tizen.devtools/html/images/ico_arr_hidden.gif b/org.tizen.devtools/html/images/ico_arr_hidden.gif
new file mode 100644 (file)
index 0000000..9a9d3ff
Binary files /dev/null and b/org.tizen.devtools/html/images/ico_arr_hidden.gif differ
diff --git a/org.tizen.devtools/html/images/ico_bullet_2_7.gif b/org.tizen.devtools/html/images/ico_bullet_2_7.gif
new file mode 100644 (file)
index 0000000..8de872c
Binary files /dev/null and b/org.tizen.devtools/html/images/ico_bullet_2_7.gif differ
diff --git a/org.tizen.devtools/html/images/js_automatic_analysis.png b/org.tizen.devtools/html/images/js_automatic_analysis.png
new file mode 100644 (file)
index 0000000..bfb2fe0
Binary files /dev/null and b/org.tizen.devtools/html/images/js_automatic_analysis.png differ
diff --git a/org.tizen.devtools/html/images/js_colors.png b/org.tizen.devtools/html/images/js_colors.png
new file mode 100644 (file)
index 0000000..4f29e2f
Binary files /dev/null and b/org.tizen.devtools/html/images/js_colors.png differ
diff --git a/org.tizen.devtools/html/images/js_problems_view.png b/org.tizen.devtools/html/images/js_problems_view.png
new file mode 100644 (file)
index 0000000..99370b0
Binary files /dev/null and b/org.tizen.devtools/html/images/js_problems_view.png differ
diff --git a/org.tizen.devtools/html/images/js_rule_checker.png b/org.tizen.devtools/html/images/js_rule_checker.png
new file mode 100644 (file)
index 0000000..2f9d073
Binary files /dev/null and b/org.tizen.devtools/html/images/js_rule_checker.png differ
diff --git a/org.tizen.devtools/html/images/jsdebugger_panels.png b/org.tizen.devtools/html/images/jsdebugger_panels.png
new file mode 100644 (file)
index 0000000..e1fc1bc
Binary files /dev/null and b/org.tizen.devtools/html/images/jsdebugger_panels.png differ
diff --git a/org.tizen.devtools/html/images/keygen.png b/org.tizen.devtools/html/images/keygen.png
new file mode 100644 (file)
index 0000000..41310c2
Binary files /dev/null and b/org.tizen.devtools/html/images/keygen.png differ
diff --git a/org.tizen.devtools/html/images/launch.png b/org.tizen.devtools/html/images/launch.png
new file mode 100644 (file)
index 0000000..a81e00b
Binary files /dev/null and b/org.tizen.devtools/html/images/launch.png differ
diff --git a/org.tizen.devtools/html/images/leak_candidates_view.png b/org.tizen.devtools/html/images/leak_candidates_view.png
new file mode 100644 (file)
index 0000000..1fc0a8d
Binary files /dev/null and b/org.tizen.devtools/html/images/leak_candidates_view.png differ
diff --git a/org.tizen.devtools/html/images/leak_view.png b/org.tizen.devtools/html/images/leak_view.png
new file mode 100644 (file)
index 0000000..2f776e6
Binary files /dev/null and b/org.tizen.devtools/html/images/leak_view.png differ
diff --git a/org.tizen.devtools/html/images/live_highlight.png b/org.tizen.devtools/html/images/live_highlight.png
new file mode 100644 (file)
index 0000000..9a887c1
Binary files /dev/null and b/org.tizen.devtools/html/images/live_highlight.png differ
diff --git a/org.tizen.devtools/html/images/mac.png b/org.tizen.devtools/html/images/mac.png
new file mode 100644 (file)
index 0000000..b1dadac
Binary files /dev/null and b/org.tizen.devtools/html/images/mac.png differ
diff --git a/org.tizen.devtools/html/images/mark.png b/org.tizen.devtools/html/images/mark.png
new file mode 100644 (file)
index 0000000..f044543
Binary files /dev/null and b/org.tizen.devtools/html/images/mark.png differ
diff --git a/org.tizen.devtools/html/images/math.png b/org.tizen.devtools/html/images/math.png
new file mode 100644 (file)
index 0000000..ec7096b
Binary files /dev/null and b/org.tizen.devtools/html/images/math.png differ
diff --git a/org.tizen.devtools/html/images/meter.png b/org.tizen.devtools/html/images/meter.png
new file mode 100644 (file)
index 0000000..33e3bf6
Binary files /dev/null and b/org.tizen.devtools/html/images/meter.png differ
diff --git a/org.tizen.devtools/html/images/mn_division.png b/org.tizen.devtools/html/images/mn_division.png
new file mode 100644 (file)
index 0000000..1f7e337
Binary files /dev/null and b/org.tizen.devtools/html/images/mn_division.png differ
diff --git a/org.tizen.devtools/html/images/mn_fold.png b/org.tizen.devtools/html/images/mn_fold.png
new file mode 100644 (file)
index 0000000..1f8d62b
Binary files /dev/null and b/org.tizen.devtools/html/images/mn_fold.png differ
diff --git a/org.tizen.devtools/html/images/mn_icon.png b/org.tizen.devtools/html/images/mn_icon.png
new file mode 100644 (file)
index 0000000..19a0fd3
Binary files /dev/null and b/org.tizen.devtools/html/images/mn_icon.png differ
diff --git a/org.tizen.devtools/html/images/mod_icon.png b/org.tizen.devtools/html/images/mod_icon.png
new file mode 100644 (file)
index 0000000..9abbd5a
Binary files /dev/null and b/org.tizen.devtools/html/images/mod_icon.png differ
diff --git a/org.tizen.devtools/html/images/multitouch_add.png b/org.tizen.devtools/html/images/multitouch_add.png
new file mode 100644 (file)
index 0000000..fb3a45b
Binary files /dev/null and b/org.tizen.devtools/html/images/multitouch_add.png differ
diff --git a/org.tizen.devtools/html/images/multitouch_invalidate.png b/org.tizen.devtools/html/images/multitouch_invalidate.png
new file mode 100644 (file)
index 0000000..de40d07
Binary files /dev/null and b/org.tizen.devtools/html/images/multitouch_invalidate.png differ
diff --git a/org.tizen.devtools/html/images/multitouch_move.png b/org.tizen.devtools/html/images/multitouch_move.png
new file mode 100644 (file)
index 0000000..35d0f20
Binary files /dev/null and b/org.tizen.devtools/html/images/multitouch_move.png differ
diff --git a/org.tizen.devtools/html/images/mw_division.png b/org.tizen.devtools/html/images/mw_division.png
new file mode 100644 (file)
index 0000000..8fc3efa
Binary files /dev/null and b/org.tizen.devtools/html/images/mw_division.png differ
diff --git a/org.tizen.devtools/html/images/mw_fold.png b/org.tizen.devtools/html/images/mw_fold.png
new file mode 100644 (file)
index 0000000..a96e013
Binary files /dev/null and b/org.tizen.devtools/html/images/mw_fold.png differ
diff --git a/org.tizen.devtools/html/images/mw_icon.png b/org.tizen.devtools/html/images/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.devtools/html/images/mw_icon.png differ
diff --git a/org.tizen.devtools/html/images/n_division.png b/org.tizen.devtools/html/images/n_division.png
new file mode 100644 (file)
index 0000000..df38a99
Binary files /dev/null and b/org.tizen.devtools/html/images/n_division.png differ
diff --git a/org.tizen.devtools/html/images/n_fold.png b/org.tizen.devtools/html/images/n_fold.png
new file mode 100644 (file)
index 0000000..6336532
Binary files /dev/null and b/org.tizen.devtools/html/images/n_fold.png differ
diff --git a/org.tizen.devtools/html/images/native_app_outline_001.png b/org.tizen.devtools/html/images/native_app_outline_001.png
new file mode 100644 (file)
index 0000000..5a685b8
Binary files /dev/null and b/org.tizen.devtools/html/images/native_app_outline_001.png differ
diff --git a/org.tizen.devtools/html/images/nav.png b/org.tizen.devtools/html/images/nav.png
new file mode 100644 (file)
index 0000000..9e50b0f
Binary files /dev/null and b/org.tizen.devtools/html/images/nav.png differ
diff --git a/org.tizen.devtools/html/images/navigation_001.png b/org.tizen.devtools/html/images/navigation_001.png
new file mode 100644 (file)
index 0000000..8e344e1
Binary files /dev/null and b/org.tizen.devtools/html/images/navigation_001.png differ
diff --git a/org.tizen.devtools/html/images/navigation_002.png b/org.tizen.devtools/html/images/navigation_002.png
new file mode 100644 (file)
index 0000000..c86700d
Binary files /dev/null and b/org.tizen.devtools/html/images/navigation_002.png differ
diff --git a/org.tizen.devtools/html/images/navigation_003.png b/org.tizen.devtools/html/images/navigation_003.png
new file mode 100644 (file)
index 0000000..3c292d7
Binary files /dev/null and b/org.tizen.devtools/html/images/navigation_003.png differ
diff --git a/org.tizen.devtools/html/images/nscreen_feature.png b/org.tizen.devtools/html/images/nscreen_feature.png
new file mode 100644 (file)
index 0000000..7c52a5f
Binary files /dev/null and b/org.tizen.devtools/html/images/nscreen_feature.png differ
diff --git a/org.tizen.devtools/html/images/nscreen_view.png b/org.tizen.devtools/html/images/nscreen_view.png
new file mode 100644 (file)
index 0000000..d3f38c0
Binary files /dev/null and b/org.tizen.devtools/html/images/nscreen_view.png differ
diff --git a/org.tizen.devtools/html/images/nscreen_view_devices.png b/org.tizen.devtools/html/images/nscreen_view_devices.png
new file mode 100644 (file)
index 0000000..06c8ebf
Binary files /dev/null and b/org.tizen.devtools/html/images/nscreen_view_devices.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_areasize_0.png b/org.tizen.devtools/html/images/nuib_we_areasize_0.png
new file mode 100644 (file)
index 0000000..a779f85
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_areasize_0.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_editor.png b/org.tizen.devtools/html/images/nuib_we_editor.png
new file mode 100644 (file)
index 0000000..959a5c4
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_editor.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_max_0.png b/org.tizen.devtools/html/images/nuib_we_max_0.png
new file mode 100644 (file)
index 0000000..3fe0848
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_max_0.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_next_0.png b/org.tizen.devtools/html/images/nuib_we_next_0.png
new file mode 100644 (file)
index 0000000..57d6648
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_next_0.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_previous_0.png b/org.tizen.devtools/html/images/nuib_we_previous_0.png
new file mode 100644 (file)
index 0000000..6f02ea5
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_previous_0.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_resolution.png b/org.tizen.devtools/html/images/nuib_we_resolution.png
new file mode 100644 (file)
index 0000000..c56ef4e
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_resolution.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_zoomin_0.png b/org.tizen.devtools/html/images/nuib_we_zoomin_0.png
new file mode 100644 (file)
index 0000000..4037d41
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_zoomin_0.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_zoomout_0.png b/org.tizen.devtools/html/images/nuib_we_zoomout_0.png
new file mode 100644 (file)
index 0000000..2fdc457
Binary files /dev/null and b/org.tizen.devtools/html/images/nuib_we_zoomout_0.png differ
diff --git a/org.tizen.devtools/html/images/other_view.png b/org.tizen.devtools/html/images/other_view.png
new file mode 100644 (file)
index 0000000..7fc02ad
Binary files /dev/null and b/org.tizen.devtools/html/images/other_view.png differ
diff --git a/org.tizen.devtools/html/images/outline_view.png b/org.tizen.devtools/html/images/outline_view.png
new file mode 100644 (file)
index 0000000..024126f
Binary files /dev/null and b/org.tizen.devtools/html/images/outline_view.png differ
diff --git a/org.tizen.devtools/html/images/output.png b/org.tizen.devtools/html/images/output.png
new file mode 100644 (file)
index 0000000..3a9b27b
Binary files /dev/null and b/org.tizen.devtools/html/images/output.png differ
diff --git a/org.tizen.devtools/html/images/page_designer.png b/org.tizen.devtools/html/images/page_designer.png
new file mode 100644 (file)
index 0000000..b100457
Binary files /dev/null and b/org.tizen.devtools/html/images/page_designer.png differ
diff --git a/org.tizen.devtools/html/images/pages.png b/org.tizen.devtools/html/images/pages.png
new file mode 100644 (file)
index 0000000..b6e4664
Binary files /dev/null and b/org.tizen.devtools/html/images/pages.png differ
diff --git a/org.tizen.devtools/html/images/pages_template.png b/org.tizen.devtools/html/images/pages_template.png
new file mode 100644 (file)
index 0000000..8db171f
Binary files /dev/null and b/org.tizen.devtools/html/images/pages_template.png differ
diff --git a/org.tizen.devtools/html/images/path.png b/org.tizen.devtools/html/images/path.png
new file mode 100644 (file)
index 0000000..b32154a
Binary files /dev/null and b/org.tizen.devtools/html/images/path.png differ
diff --git a/org.tizen.devtools/html/images/path_controller.png b/org.tizen.devtools/html/images/path_controller.png
new file mode 100644 (file)
index 0000000..9446e43
Binary files /dev/null and b/org.tizen.devtools/html/images/path_controller.png differ
diff --git a/org.tizen.devtools/html/images/path_edge.png b/org.tizen.devtools/html/images/path_edge.png
new file mode 100644 (file)
index 0000000..f710002
Binary files /dev/null and b/org.tizen.devtools/html/images/path_edge.png differ
diff --git a/org.tizen.devtools/html/images/path_handler.png b/org.tizen.devtools/html/images/path_handler.png
new file mode 100644 (file)
index 0000000..046b842
Binary files /dev/null and b/org.tizen.devtools/html/images/path_handler.png differ
diff --git a/org.tizen.devtools/html/images/po_file_editor1.png b/org.tizen.devtools/html/images/po_file_editor1.png
new file mode 100644 (file)
index 0000000..01eeb70
Binary files /dev/null and b/org.tizen.devtools/html/images/po_file_editor1.png differ
diff --git a/org.tizen.devtools/html/images/po_file_editor2.png b/org.tizen.devtools/html/images/po_file_editor2.png
new file mode 100644 (file)
index 0000000..5b18126
Binary files /dev/null and b/org.tizen.devtools/html/images/po_file_editor2.png differ
diff --git a/org.tizen.devtools/html/images/po_file_editor3.png b/org.tizen.devtools/html/images/po_file_editor3.png
new file mode 100644 (file)
index 0000000..93068d4
Binary files /dev/null and b/org.tizen.devtools/html/images/po_file_editor3.png differ
diff --git a/org.tizen.devtools/html/images/po_file_editor4.png b/org.tizen.devtools/html/images/po_file_editor4.png
new file mode 100644 (file)
index 0000000..6206ec8
Binary files /dev/null and b/org.tizen.devtools/html/images/po_file_editor4.png differ
diff --git a/org.tizen.devtools/html/images/potential_bug_result.png b/org.tizen.devtools/html/images/potential_bug_result.png
new file mode 100644 (file)
index 0000000..37b5029
Binary files /dev/null and b/org.tizen.devtools/html/images/potential_bug_result.png differ
diff --git a/org.tizen.devtools/html/images/potential_bug_select.png b/org.tizen.devtools/html/images/potential_bug_select.png
new file mode 100644 (file)
index 0000000..1daa16f
Binary files /dev/null and b/org.tizen.devtools/html/images/potential_bug_select.png differ
diff --git a/org.tizen.devtools/html/images/power_manager_simulator.png b/org.tizen.devtools/html/images/power_manager_simulator.png
new file mode 100644 (file)
index 0000000..c3daaf4
Binary files /dev/null and b/org.tizen.devtools/html/images/power_manager_simulator.png differ
diff --git a/org.tizen.devtools/html/images/problems_view.png b/org.tizen.devtools/html/images/problems_view.png
new file mode 100644 (file)
index 0000000..6fec363
Binary files /dev/null and b/org.tizen.devtools/html/images/problems_view.png differ
diff --git a/org.tizen.devtools/html/images/progress.png b/org.tizen.devtools/html/images/progress.png
new file mode 100644 (file)
index 0000000..9627fe0
Binary files /dev/null and b/org.tizen.devtools/html/images/progress.png differ
diff --git a/org.tizen.devtools/html/images/proj_component.png b/org.tizen.devtools/html/images/proj_component.png
new file mode 100644 (file)
index 0000000..59beb2f
Binary files /dev/null and b/org.tizen.devtools/html/images/proj_component.png differ
diff --git a/org.tizen.devtools/html/images/project_explorer.png b/org.tizen.devtools/html/images/project_explorer.png
new file mode 100644 (file)
index 0000000..7621cc5
Binary files /dev/null and b/org.tizen.devtools/html/images/project_explorer.png differ
diff --git a/org.tizen.devtools/html/images/properties.png b/org.tizen.devtools/html/images/properties.png
new file mode 100644 (file)
index 0000000..609a2cb
Binary files /dev/null and b/org.tizen.devtools/html/images/properties.png differ
diff --git a/org.tizen.devtools/html/images/properties_1.png b/org.tizen.devtools/html/images/properties_1.png
new file mode 100644 (file)
index 0000000..6ac4d52
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_1.png differ
diff --git a/org.tizen.devtools/html/images/properties_add.png b/org.tizen.devtools/html/images/properties_add.png
new file mode 100644 (file)
index 0000000..275bf4c
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_add.png differ
diff --git a/org.tizen.devtools/html/images/properties_add_selector.png b/org.tizen.devtools/html/images/properties_add_selector.png
new file mode 100644 (file)
index 0000000..2d9dcb7
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_add_selector.png differ
diff --git a/org.tizen.devtools/html/images/properties_delete.png b/org.tizen.devtools/html/images/properties_delete.png
new file mode 100644 (file)
index 0000000..3d809d5
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_delete.png differ
diff --git a/org.tizen.devtools/html/images/properties_forward.png b/org.tizen.devtools/html/images/properties_forward.png
new file mode 100644 (file)
index 0000000..0e3f688
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_forward.png differ
diff --git a/org.tizen.devtools/html/images/properties_forward_1.png b/org.tizen.devtools/html/images/properties_forward_1.png
new file mode 100644 (file)
index 0000000..de4cc8d
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_forward_1.png differ
diff --git a/org.tizen.devtools/html/images/properties_go_to.png b/org.tizen.devtools/html/images/properties_go_to.png
new file mode 100644 (file)
index 0000000..f1dbc77
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_go_to.png differ
diff --git a/org.tizen.devtools/html/images/properties_go_to_1.png b/org.tizen.devtools/html/images/properties_go_to_1.png
new file mode 100644 (file)
index 0000000..fb9b0f4
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_go_to_1.png differ
diff --git a/org.tizen.devtools/html/images/properties_html.png b/org.tizen.devtools/html/images/properties_html.png
new file mode 100644 (file)
index 0000000..041d317
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_html.png differ
diff --git a/org.tizen.devtools/html/images/properties_remove.png b/org.tizen.devtools/html/images/properties_remove.png
new file mode 100644 (file)
index 0000000..d1ad534
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_remove.png differ
diff --git a/org.tizen.devtools/html/images/properties_specification.png b/org.tizen.devtools/html/images/properties_specification.png
new file mode 100644 (file)
index 0000000..52d3f79
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_specification.png differ
diff --git a/org.tizen.devtools/html/images/properties_specification_1.png b/org.tizen.devtools/html/images/properties_specification_1.png
new file mode 100644 (file)
index 0000000..eb1b944
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_specification_1.png differ
diff --git a/org.tizen.devtools/html/images/properties_style.png b/org.tizen.devtools/html/images/properties_style.png
new file mode 100644 (file)
index 0000000..5afe9ea
Binary files /dev/null and b/org.tizen.devtools/html/images/properties_style.png differ
diff --git a/org.tizen.devtools/html/images/range_context_menu.png b/org.tizen.devtools/html/images/range_context_menu.png
new file mode 100644 (file)
index 0000000..2ced398
Binary files /dev/null and b/org.tizen.devtools/html/images/range_context_menu.png differ
diff --git a/org.tizen.devtools/html/images/range_info.png b/org.tizen.devtools/html/images/range_info.png
new file mode 100644 (file)
index 0000000..66fb752
Binary files /dev/null and b/org.tizen.devtools/html/images/range_info.png differ
diff --git a/org.tizen.devtools/html/images/range_info_view.png b/org.tizen.devtools/html/images/range_info_view.png
new file mode 100644 (file)
index 0000000..c0baef8
Binary files /dev/null and b/org.tizen.devtools/html/images/range_info_view.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_console.png b/org.tizen.devtools/html/images/remote_inspector_console.png
new file mode 100644 (file)
index 0000000..86c8c56
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_console.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_elements.png b/org.tizen.devtools/html/images/remote_inspector_elements.png
new file mode 100644 (file)
index 0000000..5c08415
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_elements.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_network.png b/org.tizen.devtools/html/images/remote_inspector_network.png
new file mode 100644 (file)
index 0000000..376df62
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_network.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_profiles.png b/org.tizen.devtools/html/images/remote_inspector_profiles.png
new file mode 100644 (file)
index 0000000..f98c5eb
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_profiles.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_resources.png b/org.tizen.devtools/html/images/remote_inspector_resources.png
new file mode 100644 (file)
index 0000000..a63ec21
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_resources.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_sources.png b/org.tizen.devtools/html/images/remote_inspector_sources.png
new file mode 100644 (file)
index 0000000..f7a98ed
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_sources.png differ
diff --git a/org.tizen.devtools/html/images/remote_inspector_timeline.png b/org.tizen.devtools/html/images/remote_inspector_timeline.png
new file mode 100644 (file)
index 0000000..1f43b54
Binary files /dev/null and b/org.tizen.devtools/html/images/remote_inspector_timeline.png differ
diff --git a/org.tizen.devtools/html/images/resources.png b/org.tizen.devtools/html/images/resources.png
new file mode 100644 (file)
index 0000000..7e66612
Binary files /dev/null and b/org.tizen.devtools/html/images/resources.png differ
diff --git a/org.tizen.devtools/html/images/resources_view.png b/org.tizen.devtools/html/images/resources_view.png
new file mode 100644 (file)
index 0000000..c6aa2ea
Binary files /dev/null and b/org.tizen.devtools/html/images/resources_view.png differ
diff --git a/org.tizen.devtools/html/images/ruby.png b/org.tizen.devtools/html/images/ruby.png
new file mode 100644 (file)
index 0000000..8688e0e
Binary files /dev/null and b/org.tizen.devtools/html/images/ruby.png differ
diff --git a/org.tizen.devtools/html/images/run_test2.png b/org.tizen.devtools/html/images/run_test2.png
new file mode 100644 (file)
index 0000000..d4f651a
Binary files /dev/null and b/org.tizen.devtools/html/images/run_test2.png differ
diff --git a/org.tizen.devtools/html/images/run_test3.png b/org.tizen.devtools/html/images/run_test3.png
new file mode 100644 (file)
index 0000000..835d915
Binary files /dev/null and b/org.tizen.devtools/html/images/run_test3.png differ
diff --git a/org.tizen.devtools/html/images/running_tizen_sa.png b/org.tizen.devtools/html/images/running_tizen_sa.png
new file mode 100644 (file)
index 0000000..d412d16
Binary files /dev/null and b/org.tizen.devtools/html/images/running_tizen_sa.png differ
diff --git a/org.tizen.devtools/html/images/sa_property_page.png b/org.tizen.devtools/html/images/sa_property_page.png
new file mode 100644 (file)
index 0000000..42672e6
Binary files /dev/null and b/org.tizen.devtools/html/images/sa_property_page.png differ
diff --git a/org.tizen.devtools/html/images/screen_enable.png b/org.tizen.devtools/html/images/screen_enable.png
new file mode 100644 (file)
index 0000000..a1b8544
Binary files /dev/null and b/org.tizen.devtools/html/images/screen_enable.png differ
diff --git a/org.tizen.devtools/html/images/section.png b/org.tizen.devtools/html/images/section.png
new file mode 100644 (file)
index 0000000..269d720
Binary files /dev/null and b/org.tizen.devtools/html/images/section.png differ
diff --git a/org.tizen.devtools/html/images/set_range_chart.png b/org.tizen.devtools/html/images/set_range_chart.png
new file mode 100644 (file)
index 0000000..0c738bd
Binary files /dev/null and b/org.tizen.devtools/html/images/set_range_chart.png differ
diff --git a/org.tizen.devtools/html/images/simulator_address_bar.png b/org.tizen.devtools/html/images/simulator_address_bar.png
new file mode 100644 (file)
index 0000000..cdf3602
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_address_bar.png differ
diff --git a/org.tizen.devtools/html/images/simulator_browsing_history.png b/org.tizen.devtools/html/images/simulator_browsing_history.png
new file mode 100644 (file)
index 0000000..93c077a
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_browsing_history.png differ
diff --git a/org.tizen.devtools/html/images/simulator_config_button.png b/org.tizen.devtools/html/images/simulator_config_button.png
new file mode 100644 (file)
index 0000000..f2e8eee
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_config_button.png differ
diff --git a/org.tizen.devtools/html/images/simulator_info_button.png b/org.tizen.devtools/html/images/simulator_info_button.png
new file mode 100644 (file)
index 0000000..1ac439e
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_info_button.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_accelerometer.png b/org.tizen.devtools/html/images/simulator_panel_accelerometer.png
new file mode 100644 (file)
index 0000000..62402ad
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_accelerometer.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_accelerometer_gyro.png b/org.tizen.devtools/html/images/simulator_panel_accelerometer_gyro.png
new file mode 100644 (file)
index 0000000..73d42c4
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_accelerometer_gyro.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_bearer.png b/org.tizen.devtools/html/images/simulator_panel_bearer.png
new file mode 100644 (file)
index 0000000..6c66c2b
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_bearer.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_bluetooth.png b/org.tizen.devtools/html/images/simulator_panel_bluetooth.png
new file mode 100644 (file)
index 0000000..e2a54e9
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_bluetooth.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_button.png b/org.tizen.devtools/html/images/simulator_panel_button.png
new file mode 100644 (file)
index 0000000..5d03928
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_button.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_call.png b/org.tizen.devtools/html/images/simulator_panel_call.png
new file mode 100644 (file)
index 0000000..e9cdc2d
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_call.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_callscreen.png b/org.tizen.devtools/html/images/simulator_panel_callscreen.png
new file mode 100644 (file)
index 0000000..6a3b0c5
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_callscreen.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_download.png b/org.tizen.devtools/html/images/simulator_panel_download.png
new file mode 100644 (file)
index 0000000..948fbaa
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_download.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_feature_configuration.png b/org.tizen.devtools/html/images/simulator_panel_feature_configuration.png
new file mode 100644 (file)
index 0000000..cc54bb0
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_feature_configuration.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_geolocation.png b/org.tizen.devtools/html/images/simulator_panel_geolocation.png
new file mode 100644 (file)
index 0000000..0ce500a
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_geolocation.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_messaging.png b/org.tizen.devtools/html/images/simulator_panel_messaging.png
new file mode 100644 (file)
index 0000000..09ac690
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_messaging.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_network.png b/org.tizen.devtools/html/images/simulator_panel_network.png
new file mode 100644 (file)
index 0000000..3a25406
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_network.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_nfc.png b/org.tizen.devtools/html/images/simulator_panel_nfc.png
new file mode 100644 (file)
index 0000000..d0c0734
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_nfc.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_notification.png b/org.tizen.devtools/html/images/simulator_panel_notification.png
new file mode 100644 (file)
index 0000000..6921c59
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_notification.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_notification_none.png b/org.tizen.devtools/html/images/simulator_panel_notification_none.png
new file mode 100644 (file)
index 0000000..03491a7
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_notification_none.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_package.png b/org.tizen.devtools/html/images/simulator_panel_package.png
new file mode 100644 (file)
index 0000000..17b93a8
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_package.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_package_callback.png b/org.tizen.devtools/html/images/simulator_panel_package_callback.png
new file mode 100644 (file)
index 0000000..a9d5b18
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_package_callback.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_push.png b/org.tizen.devtools/html/images/simulator_panel_push.png
new file mode 100644 (file)
index 0000000..113269f
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_push.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_push_connect.png b/org.tizen.devtools/html/images/simulator_panel_push_connect.png
new file mode 100644 (file)
index 0000000..86f0211
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_push_connect.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_push_register.png b/org.tizen.devtools/html/images/simulator_panel_push_register.png
new file mode 100644 (file)
index 0000000..cf3af55
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_push_register.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_resolution_orientation.png b/org.tizen.devtools/html/images/simulator_panel_resolution_orientation.png
new file mode 100644 (file)
index 0000000..c600feb
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_resolution_orientation.png differ
diff --git a/org.tizen.devtools/html/images/simulator_panel_system_summary.png b/org.tizen.devtools/html/images/simulator_panel_system_summary.png
new file mode 100644 (file)
index 0000000..013d0e2
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_panel_system_summary.png differ
diff --git a/org.tizen.devtools/html/images/simulator_reload_button.png b/org.tizen.devtools/html/images/simulator_reload_button.png
new file mode 100644 (file)
index 0000000..be718e0
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_reload_button.png differ
diff --git a/org.tizen.devtools/html/images/simulator_save_button.png b/org.tizen.devtools/html/images/simulator_save_button.png
new file mode 100644 (file)
index 0000000..0c121db
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_save_button.png differ
diff --git a/org.tizen.devtools/html/images/simulator_sensor_webgl.png b/org.tizen.devtools/html/images/simulator_sensor_webgl.png
new file mode 100644 (file)
index 0000000..90d8ea2
Binary files /dev/null and b/org.tizen.devtools/html/images/simulator_sensor_webgl.png differ
diff --git a/org.tizen.devtools/html/images/skin.png b/org.tizen.devtools/html/images/skin.png
new file mode 100644 (file)
index 0000000..8f229e9
Binary files /dev/null and b/org.tizen.devtools/html/images/skin.png differ
diff --git a/org.tizen.devtools/html/images/skin_emulator_mobile.png b/org.tizen.devtools/html/images/skin_emulator_mobile.png
new file mode 100644 (file)
index 0000000..8a86389
Binary files /dev/null and b/org.tizen.devtools/html/images/skin_emulator_mobile.png differ
diff --git a/org.tizen.devtools/html/images/skin_emulator_wearable.png b/org.tizen.devtools/html/images/skin_emulator_wearable.png
new file mode 100644 (file)
index 0000000..c4cb55c
Binary files /dev/null and b/org.tizen.devtools/html/images/skin_emulator_wearable.png differ
diff --git a/org.tizen.devtools/html/images/smart_launch.png b/org.tizen.devtools/html/images/smart_launch.png
new file mode 100644 (file)
index 0000000..36d6ec5
Binary files /dev/null and b/org.tizen.devtools/html/images/smart_launch.png differ
diff --git a/org.tizen.devtools/html/images/smart_launch_config.png b/org.tizen.devtools/html/images/smart_launch_config.png
new file mode 100644 (file)
index 0000000..6e1baf0
Binary files /dev/null and b/org.tizen.devtools/html/images/smart_launch_config.png differ
diff --git a/org.tizen.devtools/html/images/smart_launch_five_config.png b/org.tizen.devtools/html/images/smart_launch_five_config.png
new file mode 100644 (file)
index 0000000..2a13d02
Binary files /dev/null and b/org.tizen.devtools/html/images/smart_launch_five_config.png differ
diff --git a/org.tizen.devtools/html/images/smart_launch_history.png b/org.tizen.devtools/html/images/smart_launch_history.png
new file mode 100644 (file)
index 0000000..df13f00
Binary files /dev/null and b/org.tizen.devtools/html/images/smart_launch_history.png differ
diff --git a/org.tizen.devtools/html/images/snapshot_view.png b/org.tizen.devtools/html/images/snapshot_view.png
new file mode 100644 (file)
index 0000000..b418f26
Binary files /dev/null and b/org.tizen.devtools/html/images/snapshot_view.png differ
diff --git a/org.tizen.devtools/html/images/source.png b/org.tizen.devtools/html/images/source.png
new file mode 100644 (file)
index 0000000..ae57c4a
Binary files /dev/null and b/org.tizen.devtools/html/images/source.png differ
diff --git a/org.tizen.devtools/html/images/source_view.png b/org.tizen.devtools/html/images/source_view.png
new file mode 100644 (file)
index 0000000..f54421a
Binary files /dev/null and b/org.tizen.devtools/html/images/source_view.png differ
diff --git a/org.tizen.devtools/html/images/summary.png b/org.tizen.devtools/html/images/summary.png
new file mode 100644 (file)
index 0000000..5c1d73f
Binary files /dev/null and b/org.tizen.devtools/html/images/summary.png differ
diff --git a/org.tizen.devtools/html/images/svg.png b/org.tizen.devtools/html/images/svg.png
new file mode 100644 (file)
index 0000000..4a00223
Binary files /dev/null and b/org.tizen.devtools/html/images/svg.png differ
diff --git a/org.tizen.devtools/html/images/synchronization_parent.png b/org.tizen.devtools/html/images/synchronization_parent.png
new file mode 100644 (file)
index 0000000..5be078d
Binary files /dev/null and b/org.tizen.devtools/html/images/synchronization_parent.png differ
diff --git a/org.tizen.devtools/html/images/tab_pages.png b/org.tizen.devtools/html/images/tab_pages.png
new file mode 100644 (file)
index 0000000..71b10d9
Binary files /dev/null and b/org.tizen.devtools/html/images/tab_pages.png differ
diff --git a/org.tizen.devtools/html/images/test_stubs1.png b/org.tizen.devtools/html/images/test_stubs1.png
new file mode 100644 (file)
index 0000000..7e50973
Binary files /dev/null and b/org.tizen.devtools/html/images/test_stubs1.png differ
diff --git a/org.tizen.devtools/html/images/test_stubs2.png b/org.tizen.devtools/html/images/test_stubs2.png
new file mode 100644 (file)
index 0000000..c44bb98
Binary files /dev/null and b/org.tizen.devtools/html/images/test_stubs2.png differ
diff --git a/org.tizen.devtools/html/images/thread_analysis.png b/org.tizen.devtools/html/images/thread_analysis.png
new file mode 100644 (file)
index 0000000..f6154a6
Binary files /dev/null and b/org.tizen.devtools/html/images/thread_analysis.png differ
diff --git a/org.tizen.devtools/html/images/thread_api_list_view.png b/org.tizen.devtools/html/images/thread_api_list_view.png
new file mode 100644 (file)
index 0000000..f729d9b
Binary files /dev/null and b/org.tizen.devtools/html/images/thread_api_list_view.png differ
diff --git a/org.tizen.devtools/html/images/thread_details.png b/org.tizen.devtools/html/images/thread_details.png
new file mode 100644 (file)
index 0000000..7bc2aaf
Binary files /dev/null and b/org.tizen.devtools/html/images/thread_details.png differ
diff --git a/org.tizen.devtools/html/images/thread_parent.png b/org.tizen.devtools/html/images/thread_parent.png
new file mode 100644 (file)
index 0000000..7928023
Binary files /dev/null and b/org.tizen.devtools/html/images/thread_parent.png differ
diff --git a/org.tizen.devtools/html/images/thread_pool_lifecycle_1.png b/org.tizen.devtools/html/images/thread_pool_lifecycle_1.png
new file mode 100644 (file)
index 0000000..54af81a
Binary files /dev/null and b/org.tizen.devtools/html/images/thread_pool_lifecycle_1.png differ
diff --git a/org.tizen.devtools/html/images/time.png b/org.tizen.devtools/html/images/time.png
new file mode 100644 (file)
index 0000000..350c953
Binary files /dev/null and b/org.tizen.devtools/html/images/time.png differ
diff --git a/org.tizen.devtools/html/images/timeline.png b/org.tizen.devtools/html/images/timeline.png
new file mode 100644 (file)
index 0000000..f16f327
Binary files /dev/null and b/org.tizen.devtools/html/images/timeline.png differ
diff --git a/org.tizen.devtools/html/images/timeline_buttons.png b/org.tizen.devtools/html/images/timeline_buttons.png
new file mode 100644 (file)
index 0000000..b934be2
Binary files /dev/null and b/org.tizen.devtools/html/images/timeline_buttons.png differ
diff --git a/org.tizen.devtools/html/images/timeline_chart.png b/org.tizen.devtools/html/images/timeline_chart.png
new file mode 100644 (file)
index 0000000..7a1f798
Binary files /dev/null and b/org.tizen.devtools/html/images/timeline_chart.png differ
diff --git a/org.tizen.devtools/html/images/timeline_chart_min.png b/org.tizen.devtools/html/images/timeline_chart_min.png
new file mode 100644 (file)
index 0000000..78aa0c1
Binary files /dev/null and b/org.tizen.devtools/html/images/timeline_chart_min.png differ
diff --git a/org.tizen.devtools/html/images/timeline_lifecycle_bar.png b/org.tizen.devtools/html/images/timeline_lifecycle_bar.png
new file mode 100644 (file)
index 0000000..3d55f64
Binary files /dev/null and b/org.tizen.devtools/html/images/timeline_lifecycle_bar.png differ
diff --git a/org.tizen.devtools/html/images/timeline_scale.png b/org.tizen.devtools/html/images/timeline_scale.png
new file mode 100644 (file)
index 0000000..fb6a8bf
Binary files /dev/null and b/org.tizen.devtools/html/images/timeline_scale.png differ
diff --git a/org.tizen.devtools/html/images/tizen_sa_result.png b/org.tizen.devtools/html/images/tizen_sa_result.png
new file mode 100644 (file)
index 0000000..db19989
Binary files /dev/null and b/org.tizen.devtools/html/images/tizen_sa_result.png differ
diff --git a/org.tizen.devtools/html/images/tizen_web_simulator.png b/org.tizen.devtools/html/images/tizen_web_simulator.png
new file mode 100644 (file)
index 0000000..6d54c51
Binary files /dev/null and b/org.tizen.devtools/html/images/tizen_web_simulator.png differ
diff --git a/org.tizen.devtools/html/images/toolbar_icon.png b/org.tizen.devtools/html/images/toolbar_icon.png
new file mode 100644 (file)
index 0000000..0020ed1
Binary files /dev/null and b/org.tizen.devtools/html/images/toolbar_icon.png differ
diff --git a/org.tizen.devtools/html/images/ubuntu.png b/org.tizen.devtools/html/images/ubuntu.png
new file mode 100644 (file)
index 0000000..8459e92
Binary files /dev/null and b/org.tizen.devtools/html/images/ubuntu.png differ
diff --git a/org.tizen.devtools/html/images/ui_builder_1.png b/org.tizen.devtools/html/images/ui_builder_1.png
new file mode 100644 (file)
index 0000000..5b31760
Binary files /dev/null and b/org.tizen.devtools/html/images/ui_builder_1.png differ
diff --git a/org.tizen.devtools/html/images/ui_builder_config.png b/org.tizen.devtools/html/images/ui_builder_config.png
new file mode 100644 (file)
index 0000000..e04c601
Binary files /dev/null and b/org.tizen.devtools/html/images/ui_builder_config.png differ
diff --git a/org.tizen.devtools/html/images/uibuilder.png b/org.tizen.devtools/html/images/uibuilder.png
new file mode 100644 (file)
index 0000000..cd96e1b
Binary files /dev/null and b/org.tizen.devtools/html/images/uibuilder.png differ
diff --git a/org.tizen.devtools/html/images/vert_split_view.png b/org.tizen.devtools/html/images/vert_split_view.png
new file mode 100644 (file)
index 0000000..0602809
Binary files /dev/null and b/org.tizen.devtools/html/images/vert_split_view.png differ
diff --git a/org.tizen.devtools/html/images/video.png b/org.tizen.devtools/html/images/video.png
new file mode 100644 (file)
index 0000000..658f818
Binary files /dev/null and b/org.tizen.devtools/html/images/video.png differ
diff --git a/org.tizen.devtools/html/images/w_division.png b/org.tizen.devtools/html/images/w_division.png
new file mode 100644 (file)
index 0000000..88d9959
Binary files /dev/null and b/org.tizen.devtools/html/images/w_division.png differ
diff --git a/org.tizen.devtools/html/images/w_fold.png b/org.tizen.devtools/html/images/w_fold.png
new file mode 100644 (file)
index 0000000..1967eb0
Binary files /dev/null and b/org.tizen.devtools/html/images/w_fold.png differ
diff --git a/org.tizen.devtools/html/images/windows.png b/org.tizen.devtools/html/images/windows.png
new file mode 100644 (file)
index 0000000..50474d9
Binary files /dev/null and b/org.tizen.devtools/html/images/windows.png differ
diff --git a/org.tizen.devtools/html/images/ww_division.png b/org.tizen.devtools/html/images/ww_division.png
new file mode 100644 (file)
index 0000000..65e7ab7
Binary files /dev/null and b/org.tizen.devtools/html/images/ww_division.png differ
diff --git a/org.tizen.devtools/html/images/ww_fold.png b/org.tizen.devtools/html/images/ww_fold.png
new file mode 100644 (file)
index 0000000..b3c1361
Binary files /dev/null and b/org.tizen.devtools/html/images/ww_fold.png differ
diff --git a/org.tizen.devtools/html/images/ww_icon.png b/org.tizen.devtools/html/images/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.devtools/html/images/ww_icon.png differ
diff --git a/org.tizen.devtools/html/index.htm b/org.tizen.devtools/html/index.htm
new file mode 100644 (file)
index 0000000..a8e50aa
--- /dev/null
+++ b/org.tizen.devtools/html/index.htm
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+    <script type="text/javascript" src="scripts/snippet.js"></script>
+    <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+
+    <title>Development Tools</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1><a href="cover_page.htm">Development Tools</a></h1>
+
+<ul>
+       <li><a href="common_tools/tools_common.htm">Common Tools</a>
+               <ul>
+           <li><a href="common_tools/project_explorer.htm">Project Explorer View</a></li>
+               <li><a href="common_tools/certificate_registration.htm">Certificate Registration</a></li>
+               <li><a href="common_tools/connection_explorer.htm">Connection Explorer View</a></li>
+               <li><a href="common_tools/smart_launch.htm">Smart Launch</a></li>
+               <li><a href="common_tools/smart_dev_bridge.htm">Smart Development Bridge</a></li>
+               <li><a href="common_tools/emulator.htm">Emulator</a>
+                       <ul>
+                       <li><a href="common_tools/event_injec.htm">Event Injector</a></li>
+                       <li><a href="common_tools/emulator_features.htm">Extended Emulator Features</a></li>
+                       </ul>
+               </li>
+               <li><a href="common_tools/log_view.htm">Log View</a></li>  
+               <li><a href="common_tools/keyboard_shortcuts.htm">Keyboard Shortcuts</a></li>
+               </ul>
+       </li>
+       <li><a href="web_tools/tools_w.htm">Web Tools</a>
+               <ul>
+               <li><a href="web_tools/config_editor_w.htm">Configuration Editor</a></li>
+               <li><a href="web_tools/privilege_checker_w.htm">Privilege Checker</a></li>
+                       <li><a href="web_tools/content_assist_w.htm">Content Assist</a></li>    
+               <li><a href="web_tools/html_editor_w.htm">HTML Editor</a></li>
+               <li><a href="web_tools/html_preview_w.htm">HTML Preview</a></li>
+               <li><a href="web_tools/css_editor_w.htm">CSS Editor</a></li>
+               <li><a href="web_tools/css_preview_w.htm">CSS Preview</a></li>
+               <li><a href="web_tools/js_editor_w.htm">JavaScript Editor</a></li>
+               <li><a href="web_tools/code_beautifier_w.htm">Code Beautifier</a></li>
+               <li><a href="web_tools/code_minifier_w.htm">Code Minifier</a></li>
+               <li><a href="web_tools/live_editing_w.htm">Live Editing</a></li>
+               <li><a href="web_tools/uibuilder_w.htm">UI Builder</a></li>
+               <li><a href="web_tools/command_line_interface_w.htm">Command Line Interface</a></li>
+               <li><a href="web_tools/web_simulator_w.htm">Web Simulator</a>
+                       <ul>
+                       <li><a href="web_tools/web_simulator_features_w.htm">Web Simulator 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/remote_inspector_w.htm">Remote Inspector</a></li>
+               <li><a href="web_tools/js_analyzer_w.htm">JavaScript Analyzer</a></li>
+               <li><a href="web_tools/js_log_console_w.htm">JavaScript Log Console View</a></li>       
+               <li><a href="web_tools/set_ide_preference_w.htm">IDE Preferences</a></li>
+               </ul>
+       </li>
+       <li><a href="native_tools/tools_n.htm">Native Tools</a>
+               <ul>
+               <li><a href="native_tools/project_wizard_n.htm">Project Wizard</a></li>
+               <li><a href="native_tools/api_privilege_checker_n.htm">API and Privilege Checker</a></li>
+               <li><a href="native_tools/content_assist_n.htm">Content Assist</a></li> 
+               <li><a href="native_tools/manifest_text_editor_n.htm">Manifest Text Editor</a>
+                       <ul>
+                       <li><a href="native_tools/manifest_elements_n.htm">Additional Manifest Text Editor Elements</a></li>
+                       </ul>
+               </li>
+               <li><a href="native_tools/po_file_editor_n.htm">PO File Editor</a></li>
+               <li><a href="native_tools/uibuilder_n.htm">UI Builder</a></li>
+               <li><a href="native_tools/enventor_n.htm">Enventor</a></li>
+               <li><a href="native_tools/command_line_interface_n.htm">Command Line Interface</a></li>
+               <li><a href="native_tools/call_stack_view_n.htm">Call Stack View</a></li>
+               <li><a href="native_tools/da_overview_n.htm">Dynamic Analyzer</a>
+                       <ul>
+                       <li><a href="native_tools/da_timeline_n.htm">Timeline</a></li>
+                       <li><a href="native_tools/da_summary_n.htm">Summary</a></li>
+                       <li><a href="native_tools/da_thread_n.htm">Thread Analysis</a></li>
+                       <li><a href="native_tools/da_file_n.htm">File Analysis</a></li>
+                       <li><a href="native_tools/da_network_n.htm">Network Analysis</a></li>
+                       <li><a href="native_tools/da_opengl_n.htm">OpenGL&reg; Analysis</a></li>
+                       <li><a href="native_tools/da_range_info_n.htm">Range</a></li>
+                       <li><a href="native_tools/da_views_n.htm">Other Views</a></li>
+                       </ul>
+               </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>
+               </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>
+
+<div id="footer"><hr size="1"><font size="1">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>.</font></font></div>
+<!--start-->
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->
+
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm b/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
new file mode 100644 (file)
index 0000000..d5706ca
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Privilege Checker</title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+  <h1>API and Privilege Checker</h1> 
+  <p>The IDE provides the API and privilege checker tool to identify potential problems in the application code related to API and <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#native">privilege usage</a>.</p> 
+  <p>You can enable the checks during <a href="../../../org.tizen.gettingstarted/html/process/app_dev_process_n.htm#build">build process</a> or code editing in the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm">project properties</a>. You can also perform the checks manually in the IDE by selecting <strong>Project &gt; Check API and Privilege Violations</strong>.</p> 
+  <p>The results of the check are displayed in the <strong>Problems</strong> view. The following tables define the different alarms that the checks can generate.</p> 
+  <table id="API" border="1">
+<caption>
+     Table: API usage check alarms 
+   </caption> 
+   <colgroup>
+<col width="10%"/>
+<col width="25%"/>
+<col width="40%"/>
+<col width="25%"/>
+</colgroup>
+<tbody>
+<tr>
+<th>Alarm type</th> 
+     <th>Description</th> 
+     <th>Message format</th> 
+     <th>Required actions</th> 
+    </tr>
+<tr>
+<td>API version alarm</td> 
+     <td>The application contains a function, enumerator, or constant which is only provided in a later API version than the one the application is using.</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">{API name} – The API is not supported in API version {version identifier}.</span> <p>For example: <span style="font-family: Courier New,Courier,monospace">account_connect - The API is not supported in API version 2.1.0.</span></p> </td> 
+     <td>Either upgrade the API version in the manifest file accordingly, or stop using the reported API element.</td> 
+    </tr>
+<tr>
+<td>Deprecated API alarm</td> 
+     <td>The application uses a function, enumerator, or constant which has been deprecated.</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">{API name} - The API is deprecated.</span> <p>For example: <span style="font-family: Courier New,Courier,monospace">account_connect - The API is deprecated.</span></p> </td> 
+     <td>Look at the cause of the deprecation and consider modifying the application source to use an alternative API (if one exists) as suggested by the platform. In most cases, an alternative is provided. However, if no alternative exists, you can still use the deprecated API in the current SDK version without exceptions. However, note that deprecated API can be removed from the platform in future without prior notice. </td> 
+    </tr>
+</tbody>
+</table>
+<table id="privilege" border="1">
+<caption>
+     Table: Privilege check alarms 
+   </caption> 
+   <colgroup>
+<col width="10%"/>
+<col width="25%"/>
+<col width="40%"/>
+<col width="25%"/>
+</colgroup>
+<tbody>
+<tr>
+<th>Alarm type</th> 
+     <th>Description</th> 
+     <th>Message format</th> 
+     <th>Required actions</th> 
+    </tr>
+<tr>
+<td>Undefined privilege alarm</td> 
+     <td>The application uses a function whose privilege is not specified in the manifest file.</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">The {Privilege name} privilege is required for {API name}.</span> <p>For example: <span style="font-family: Courier New,Courier,monospace">The http://tizen.org/privilege/alarm.set privilege is required for alarm_cancel.</span></p> </td> 
+     <td>Either assign the privilege in the manifest file in the IDE, or stop using the reported function. Privilege violation is a strong reason for the rejection of an application in the certification process.</td> 
+    </tr>
+<tr>
+<td>Unused privilege alarm</td> 
+     <td>The application does not use any function belonging to a reported privilege.</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">The {Privilege name} privilege is not used. </span> <p>For example: <span style="font-family: Courier New,Courier,monospace">The http://tizen.org/privilege/badge.admin privilege is not used.</span></p> </td> 
+     <td>Remove the privilege from the manifest file in the IDE, or ignore the alarm if you are planning to use the corresponding functions later. </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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/native_tools/call_stack_view_n.htm b/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
new file mode 100644 (file)
index 0000000..748dba3
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Call Stack View</title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+  <h1>Call Stack View </h1> 
+  <p>The <strong>Call Stack</strong> view provides information of the 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 IDE creates a <span style="font-family: Courier New,Courier,monospace">*.cs</span> file in the <span style="font-family: Courier New,Courier,monospace">crash-info</span> folder under the current project and shows the <strong>Call Stack</strong> view automatically. The view can also be opened 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. You can select the left pane to see specific information.</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 right pane.</li> 
+   <li><strong>Debug Message</strong>: Provides the latest debug message and filter function similar to the <strong>Log</strong> view. You can search with keywords filtered by tag, pid, and message.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
new file mode 100644 (file)
index 0000000..c94f513
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
@@ -0,0 +1,359 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Command Line Interface</title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+ <h1>Command Line Interface</h1>
+
+                               
+
+<p>The native CLI (command line interface) provides the functional tools for developing Tizen native applications without the Tizen IDE. It includes the entire developing process from creating to running and debugging the project. The CLI is located in the <span style="font-family: Courier New,Courier,monospace;">$&lt;TIZEN_SDK_HOME&gt;/tools/ide/bin</span> directory. For developing an application using the CLI, set a path to the CLI directory using the following command:</p>
+
+<pre class="prettyprint">
+export PATH=$&lt;TIZEN_SDK_HOME&gt;/tools/ide/bin
+</pre>
+
+<p>The CLI in the IDE provides functional commands for:</p>
+<ul class="ul">
+<li><a href="#cli_config">Setting CLI configuration options</a></li>
+<li><a href="#tizen_list">Displaying a sub-command list</a></li>
+<li><a href="#tizen_create">Creating a project</a></li>
+<li><a href="#tizen_build">Building the project</a></li>
+<li><a href="#tizen_package">Packaging the project</a></li>
+<li><a href="#tizen_install">Installing the package</a></li>
+<li><a href="#tizen_uninstall">Uninstalling the package</a></li>
+<li><a href="#tizen_run">Running the application</a></li>
+<li><a href="#tizen_version">Displaying version information</a></li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To use the CLI, you need the Java Runtime Environment 6 or later. </td>
+</tr>
+</tbody>
+</table> 
+
+<p>The following table lists the available CLI commands.</p>
+
+ <table> 
+   <caption>
+     Table: CLI commands 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Command</th> 
+     <th>Options</th> 
+     <th>Description</th> 
+        <th>Example</th> 
+    </tr> 
+    <tr id="cli_config"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen cli-config</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen cli-config [-g|--global] &lt;key&gt;=&lt;value&gt;
+tizen cli-config -l | --list
+</pre>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-l, --list</span>:
+<p>Shows the list of all CLI configuration keys and values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-g, --global</span>:
+<p>Sets the CLI configuration key and value as global.</p></li>
+</ul></td>
+        <td>Queries, sets, replaces, and unsets CLI setting options.
+        <p>The key and the name are separated by an equal sign.</p>
+<p>The CLI configuration keys are:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">default.build.architecture=&lt;x86|arm&gt;</span><p>
+Sets the default executable architecture type: x86 or arm.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">default.build.compiler=&lt;llvm|gcc&gt;</span><p>
+Sets the default compiler. The default is llvm.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">default.build.configuration=&lt;Debug | Release&gt;</span><p>
+Sets the default build configuration. The default is the debug mode.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">default.profiles.path=&lt;path of profile.xml&gt;</span><p>
+Sets the path to the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">default.sdb.timeout=&lt;timeout value&gt;</span><p>
+Sets the default connection timeout value. The default is 60000 milliseconds.</p></li>
+</ul>
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Set the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> path globally:</p>
+<pre class="prettyprint">
+$ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
+</pre></li>
+<li><p>List all options for which values are set:</p>
+<pre class="prettyprint">
+$ tizen cli-config –l
+default.build.architecture=x86
+default.build.compiler=llvm
+default.build.configuration=Debug
+default.profiles.path=/home/mustafa/workspace/0904/.metadata/.plugins/org.tizen.common.sign/profiles.xml
+default.sdb.timeout=60000
+</pre></li>
+</ul></td>
+        </tr>
+    <tr id="tizen_list"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen list</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen list native-project
+</pre></td>
+        <td>Shows what kind of template each profile supports, and the list corresponding with the given sub-command.
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>List all templates:</p>
+<pre class="prettyprint">
+$ tizen list native-project
+&nbsp;&nbsp;&nbsp;[PROFILE]           [TEMPLATE]
+&nbsp;&nbsp;&nbsp;mobile-2.3           service_app
+&nbsp;&nbsp;&nbsp;mobile-2.3           static_library
+&nbsp;&nbsp;&nbsp;mobile-2.3           basic_edc_ui
+&nbsp;&nbsp;&nbsp;mobile-2.3           shared_library
+&nbsp;&nbsp;&nbsp;mobile-2.3           basic_ui
+&nbsp;&nbsp;&nbsp;wearable-2.3         service_app
+&nbsp;&nbsp;&nbsp;wearable-2.3         static_library
+&nbsp;&nbsp;&nbsp;wearable-2.3         shared_library
+&nbsp;&nbsp;&nbsp;wearable-2.3         basic_ui
+&nbsp;&nbsp;&nbsp;wearable-2.3         basic_edc_ui
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="tizen_create"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen create</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen create native-project [-p|--profile &lt;profile name&gt;] [-t|--template &lt;predefined template&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;[-n|--name &lt;project name&gt;] [-- &lt;project location&gt;]</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-p, --profile</span>:
+<p>Sets the profile name.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --template</span>:
+<p>Sets the template name.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-n, --name</span>:
+<p>Sets the project name.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the project destination directory.</p></li>
+</ul></td>
+        <td>Creates a Tizen native project. If an option is empty, the default project is generated from the default template.</td>
+     <td> 
+<ul class="ul">
+<li><p>Create the template project based on the basic Tizen mobile UI project:</p>
+<pre class="prettyprint">
+$ tizen create native-project –p mobile-2.3 –t basic_ui –n basic -- /home/workspace
+$ cd /home/workspace/basic
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="tizen_build"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen build-native</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen build-native [-a|--arch &lt;architecture name&gt;] [-c|--compiler &lt;compiler name&gt;] 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[-C|--configuration &lt;configuration name&gt;] [--]
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-a, --arch, &lt;x86|arm&gt;</span>:
+<p>Determines the architecture type for the rootstrap.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-c, --compiler &lt;llvm|gcc&gt;</span>:
+<p>Sets the compiler to the native project.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-C, --configuration &lt;Debug|Release&gt;</span>:
+<p>Selects the build configuration to build the native project.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the project path.</p></li>
+</ul></td>
+        <td>Builds the Tizen native project with the default values (if you do not set the options). <p>There are 3 options: architecture, compiler, and configuration. All the options are required and the default values are described in the CLI configuration file.</p> 
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Build the project with the llvm compiler and the debug mode. The x86 executable named basic is generated, if the project is built successfully:</p>
+<pre class="prettyprint">
+$ tizen build-native -–arch x86 –-compiler llvm –-configuration Debug -- /home/workspace/basic
+$ ls /home/workspace/basic/Debug/
+</pre></li>
+<li><p>Build the project with the default options:</p>
+<pre class="prettyprint">
+$ tizen cli-config –l
+default.build.architecture=x86
+default.build.compiler=llvm
+default.build.configuration=Debug
+$ tizen build-native -- /home/workspace/basic
+$ ls /home/workspace/basic/Debug/
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="tizen_package"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen package</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen package [-t | --type &lt;package type&gt;] [-s | --sign &lt;security profile name&gt;] [-S, --strip &lt;on|off&gt;] [--]
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --type &lt;tpk | wgt&gt;</span>:
+<p>Sets the package type.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-s, --sign</span>:
+<p>Sets the profile name to use for signing.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-S, --strip</span>:
+<p>Determines whether to strip the native binary.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace;">off</span>. This option only works when the native binary is based on the <strong>arm</strong> architecture and <strong>release</strong> build configuration.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the project&#39;s build configuration path.</p></li>
+
+</ul></td>
+        <td>Packages the Tizen application with signing. 
+        
+        <p>The Tizen application is signed with a certified profile named <span style="font-family: Courier New,Courier,monospace">profiles.xml</span>. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<span style="font-family: Courier New,Courier,monospace">&lt;Your workspace directory&gt;/.metadata/.plugins/org.tizen.common.sign/profiles.xml</span>). Set the path of the <span style="font-family: Courier New,Courier,monospace">profile.xml</span> file once before packaging the Tizen application (you can use the <span style="font-family: Courier New,Courier,monospace">tizen cli-config</span> command).</p>
+        
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that you already have:</p>
+<pre class="prettyprint">
+$ tizen cli-config –g default.profiles.path=/home/workspace/profiles.xml
+</pre></li>
+<li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that is created from the IDE:</p>
+<pre class="prettyprint">
+$ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
+</pre></li>
+<li><p>Package the profile:</p>
+<pre class="prettyprint">
+$ tizen package –-type tpk –-sign myprofile -- /home/workspace/basic/Debug
+
+$ ls /home/workspace/basic/Debug
+
+org.tizen.basic-1.0.0-i386.tpk
+</pre></li></ul>
+</td>
+        </tr> 
+    <tr id="tizen_install"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen install</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen install &lt;-t | -target &lt;target name&gt;&gt; &lt;-n | --name &lt;package name&gt;&gt; [--]
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
+<p>Sets the target, which installs the Tizen package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-n, --name</span>:
+<p>Sets the Tizen package file name, which is going to be installed on the target.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the path where the package is.</p></li>
+</ul></td>
+        <td>Installs a Tizen application to a Tizen device.
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Install a basic application named <span style="font-family: Courier New,Courier,monospace;">org.tizen.basic-1.0.0-i386.tpk</span> to the emulator-26101:</p>
+<pre class="prettyprint">
+$ tizen install -–target emulator-26101 –-name org.tizen.basic-1.0.0-i386.tpk -- /home/workspace/basic/Debug
+</pre></li></ul>
+</td>
+        </tr>
+    <tr id="tizen_uninstall">  
+     <td><span style="font-family: Courier New,Courier,monospace">tizen uninstall</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen uninstall &lt;-t | --target &lt;target name&gt;&gt; &lt;-p | --pkgid &lt;package id&gt;&gt;
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
+<p>Sets the target, which uninstalls the Tizen package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
+<p>Sets the installed Tizen package ID on the target.</p></li>
+</ul></td>
+        <td>Uninstalls a Tizen application from a Tizen device.</td>
+     <td> 
+<ul class="ul">
+<li><p>Uninstall a basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic</span> from the emulator-26101:</p>
+<pre class="prettyprint">
+$ tizen uninstall -–target emulator-26101 -–pkgid org.tizen.basic
+</pre></li></ul>
+</td>
+        </tr>  
+    <tr id="tizen_run">  
+     <td><span style="font-family: Courier New,Courier,monospace">tizen run</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen run &lt;-t | --target &lt;target name&gt;&gt; &lt;-p | --pkgid &lt;package id&gt;&gt;
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
+<p>Sets the target, which runs the Tizen package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
+<p>Sets the installed Tizen package ID on the target.</p></li>
+</ul></td>
+        <td>Runs the Tizen application.
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Run the basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic </span> on an emulator-26101:</p>
+<pre class="prettyprint">
+$ tizen run -–target emulator-26101 –-pkgid org.tizen.basic
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="tizen_version">  
+     <td><span style="font-family: Courier New,Courier,monospace">tizen version</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen version
+</pre></td>
+        <td>Prints the CLI version number of the executable and exits.</td>
+     <td> 
+<ul class="ul">
+<li><p>Show the version:</p>
+<pre class="prettyprint">
+$ tizen version
+Tizen CLI 1.0.0</pre></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/native_tools/content_assist_n.htm b/org.tizen.devtools/html/native_tools/content_assist_n.htm
new file mode 100644 (file)
index 0000000..dc2ad55
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/content_assist_n.htm
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Content Assist </title> 
+ </head> 
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+
+ <h1>Content Assist</h1>
+  
+                               
+  <p>The Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient:</p> 
+  <ul class="ul">
+  <li>API Assist 
+  <p>This feature is used for writing and editing source code. It helps to create content faster by providing suggestions for the APIs that are already present. A list of API methods, keywords, and macros defined in the native <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> is displayed when you enter prefix words that match related items.</p></li> 
+  <li>API Hover 
+  <p>This features displays information about API methods and API-related types and macros for the native framework.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/native_tools/da_file_n.htm b/org.tizen.devtools/html/native_tools/da_file_n.htm
new file mode 100644 (file)
index 0000000..9b31dd5
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_file_n.htm
@@ -0,0 +1,143 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Analysis</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#chart">File Chart</a>
+                       </li>
+                       <li><a href="#api">File API List</a>
+                       </li>
+                       <li><a href="#details">File Details</a>
+                       </li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>File Analysis</h1> 
+  
+  <p>The <strong>File</strong> tab of the dynamic analyzer shows information associated with file operations. The <strong>File</strong> tab can be enabled or disabled in runtime from the <strong>Configuration</strong> dialog. If the file analysis capabilities are disables, the file API information is not displayed.</p>
+  
+  <p class="figure">Figure: File analysis</p> 
+  <p style="text-align: center;"> <img alt="File analysis" src="../images/file_tab.png" /> </p> 
+  <p>The tab consists of the following views:</p> 
+  <ol> 
+   <li><a href="#chart">File chart</a> shows file operations (open/close, read/write, lock) as a time flow chart.</li> 
+   <li><a href="#api">File API List</a> view shows the file APIs that are associated with the file selected in the file chart.</li> 
+   <li><a href="#details">File Details</a> view shows detail information of the file selected in the file chart.</li> 
+  </ol> 
+  <p>Together, the views shows the following information:</p>
+<ul><li>Name and location of the file</li>
+<li>Current state of the file (closed or open)</li>
+<li>Usage time and size of the data saved or read in the file</li>
+<li>Information of the API used in the file (API name, parameter value, return value, and the success or failure of the API)</li>
+<li>Also Non-target processes as well as target processes are shown on File Chart View. More information are not displayed on File API List and File Details View</li></ul>
+
+<p>Terminology</p>
+<ul>
+<li>A target process is on a given App or Lib that the user is interested in analyzing.</li>
+<li>A non-target process is the opposite of the target process, but they access the target files.</li>
+<li>A target file is the file that has the function calls which the user is interested in.</li>
+<li>A non-target file is the opposite of the target file. For example, if the user is only interested in internal calls, files that include direct call are non-target files.</li>
+</ul>
+
+  <h2 name="chart" 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 class="figure">Figure: File chart</p> 
+  <p style="text-align: center;"> <img alt="File chart" src="../images/file_chart.png" /> </p> 
+ <p>The file chart shows the following information:</p>
+  <ul>
+  <li>The open or closed state of the file is shown through the color of the graph bars:
+  <ul><li>Aqua area indicates the open area of the file.</li>
+<li>Teal area indicates that the file was opened and duplicated by other processes or threads.</li>
+</ul></li>
+
+  <li>The upper line in the bar on the child chart indicates the time of locking the file:
+  <ul><li>Violet area indicates the lock area of the file.</li>
+      <li>Purple area indicates the lock waiting of the file.</li></ul></li>
+
+  <li>The lower line in the bar indicates the time of reading and writing the file:
+  <ul><li>Sky blue area or line indicates the write or read area of the file.</li>
+      <li>Blue area or line indicates the concurrent writing or reading of the file without the lock.</li>
+         <li>Red line indicates that the API has failed.</li></ul></li></ul> 
+
+      <h2 name="api" id="api">File API List</h2> 
+  <p>The <strong>File API List</strong> view shows the APIs that are associated with the file selected in the <strong>File chart</strong>. When the child of the file is selected, this view shows information about the file included in the TID.</p> 
+  <p class="figure">Figure: File API List view</p> 
+  <p style="text-align: center;"> <img alt="File API List view" src="../images/file_api_list.png" /> </p> 
+  <p>The view has the following columns:</p> 
+  <ul> 
+   <li><strong>#</strong> shows the sequence number of the API calls.</li> 
+   <li><strong>Start Time</strong> is the time when the API was called.</li> 
+   <li><strong>Elapsed Time</strong> is the time that elapses while an event occurs.</li>
+   <li><strong>PID</strong> is the name of the API.</li>
+   <li><strong>TID</strong> is the ID of the thread that called the API.</li> 
+   <li><strong>FD</strong> is the ID of the file.</li>
+   <li><strong>API Name</strong> is the name of the API.</li> 
+   <li><strong>Parameter</strong> shows the input parameters of the API.</li> 
+   <li><strong>Return</strong> is the return value of the called API.</li> 
+   <li><strong>Error code</strong> shows the value returned by the API. In case of the APIs associated with glibc, the value is the description of the error number.</li> 
+  </ul> 
+
+    <h2 name="details" id="details">File Details</h2> 
+  <p>The <strong>File Details</strong> view shows detail information of the file selected in the file chart. When the child row of the file is selected, this view shows information of the file that is included in the TID.</p> 
+  <p class="figure">Figure: File Details view</p> 
+  <p style="text-align: center;"> <img alt="File Details view" src="../images/file_detail_info.png" /> </p> 
+  <p>The view has the following fields:</p> 
+  <ul> 
+   <li><strong>File name</strong> is the file name.</li> 
+   <li><strong>File path</strong> shows the path of the file.</li> 
+   <li><strong>File size</strong> is the total size of file.</li> 
+   <li><strong>Read size</strong> is the total size of read.</li> 
+   <li><strong>Write size</strong> is the total size of write.</li> 
+   <li><strong>API count</strong> defines the total API count that is associated with the file.</li> 
+   <li><strong>Failed API count</strong> is the total failed API count.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_network_n.htm b/org.tizen.devtools/html/native_tools/da_network_n.htm
new file mode 100644 (file)
index 0000000..71dc907
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_network_n.htm
@@ -0,0 +1,150 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Analysis</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#chart">Network Chart</a>
+                       </li>
+                       <li><a href="#api">Network API List</a>
+                       </li>
+                       <li><a href="#details">Network Details</a>
+                       </li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Network Analysis</h1> 
+  
+  
+  <p>The <strong>Network</strong> tab of the dynamic analyzer displays network information. It only supports the socket APIs of glibc.</p>
+
+  <p class="figure">Figure: Network analysis</p> 
+  <p style="text-align: center;"> <img alt="Network analysis" src="../images/da_network.png" /> </p> 
+  
+  <p>The tab consists of the following views:</p>
+  <ol> 
+   <li><a href="#chart">Network chart</a> shows socket operations (open/close, using, failed) as a time flow chart.</li> 
+   <li><a href="#api">Network API List</a> view shows the socket APIs that are associated with the socket selected in the socket chart.</li> 
+   <li><a href="#details">Network Details</a> view shows detail information of the socket selected in the socket chart.</li> 
+   </ol>
+
+  <h2 name="chart" id="chart">Network Chart</h2> 
+  
+  
+  <p>The <strong>Network chart</strong> displays the socket object in a tree format using a graph.</p>
+
+  <p class="figure">Figure: Network chart</p> 
+  <p style="text-align: center;"> <img alt="Network chart" src="../images/da_network_chart.png" /> </p> 
+  
+  <p>The color of horizontal bar in the chart indicates the state of the socket:</p>
+  <ul>
+       <li>Yellow area indicates the socket state is open.</li>
+       <li>Green area indicates the socket is closed.</li>
+  </ul>
+  
+  <p>The line in the bar indicates the status of the API of the socket.</p>
+  <ul> 
+   <li>The upper line:
+       <ul>
+        <li>Blue line indicates that the API has been used.</li>
+        <li>Red line indicates that the API has failed.</li>
+       </ul>
+   </li>
+   <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>
+       </ul>
+   </li>
+  </ul>
+
+     <h2 name="api" id="api">Network API List</h2> 
+  
+  
+  <p>The <strong>Network API List</strong> view displays the APIs associated with the socket object selected in the network chart.</p>
+ 
+
+  <p class="figure">Figure: Network API List view</p> 
+  <p style="text-align: center;"> <img alt="Network API List view" src="../images/da_network_api_list.png" /> </p> 
+  
+  <p>The view has the following columns:</p>
+  <ul>
+       <li><strong>#</strong> (integer) shows the unique log index.</li>
+       <li><strong>Start Time</strong> (time) defines the time when the API was called.</li>
+    <li><strong>Elapsed Time</strong> (time) defines the time to return after the call.</li>
+       <li><strong>PID</strong> (integer) is the API process ID.</li>
+       <li><strong>TID</strong> (integer) is the API thread ID.</li>
+    <li><strong>API Name</strong> (text) is the API name.</li>
+       <li><strong>Parameter</strong> shows the input parameter of the API.</li>
+       <li><strong>Return value</strong> (integer) defines the return value.</li>
+    <li><strong>Byte size</strong> (integer) shows a byte size received from the destination address.</li>
+       <li><strong>Payload</strong> (text) shows the content of the data transfer.</li>
+       <li><strong>Error code</strong> (text) shows the error description of the API. Normal end return is the <span style="font-family: Courier New,Courier,monospace;">E_SUCCESS</span>.</li>
+  </ul>
+
+     <h2  name="details" id="details">Network Details</h2> 
+  
+  <p>The <strong>Network Details</strong> view displays detailed information of the network socket object selected in the network chart.</p>
+
+  <p class="figure">Figure: Network Details view</p> 
+  <p style="text-align: center;"> <img alt="Network Details view" src="../images/da_network_details.png" /> </p> 
+  
+  <p>The view has the following fields:</p>
+  <ul>
+       <li><strong>Address</strong> displays the destination address.</li>
+    <li><strong>Recv size</strong> is the byte size received from the destination address.</li>
+       <li><strong>Send size</strong> is the byte size sent to the destination address.</li>
+       <li><strong>Usage time</strong> is the time using the socket object API.</li>
+    <li><strong>Failed API count</strong> is the number of the failed APIs.</li>
+       <li><strong>Send ack time</strong> is the received time after sending to the destination address.</li>
+       <li><strong>Payload (Ascii)</strong> is the content of the data transfer by Ascii.</li>
+    <li><strong>Payload (Hex Code)</strong> is the content of the data transfer by Hex code.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_opengl_n.htm b/org.tizen.devtools/html/native_tools/da_opengl_n.htm
new file mode 100644 (file)
index 0000000..17d1ace
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_opengl_n.htm
@@ -0,0 +1,214 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>OpenGL&reg; Analysis</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#chart">OpenGL&reg; Chart</a></li>
+                       <li><a href="#statistics">Statistics</a></li>
+                       <li><a href="#APIlist">API List</a></li>
+                       <li><a href="#redundant">Redundant List</a></li>
+                       <li><a href="#context">Context List</a></li>
+                       <li><a href="#program">Program List</a></li>
+                       <li><a href="#texture">Texture List</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>OpenGL&reg; Analysis</h1> 
+  
+  <p>The <strong>OpenGL</strong> (Open Graphics Library) page of the dynamic analyzer displays information about OpenGL&reg; 2.0 and EvasGL.</p>
+
+  <p class="figure">Figure: OpenGL&reg; analysis</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; analysis" src="../images/da_opengl_analysis.png" /> </p> 
+  
+  <p>The tab consists of the following views:</p>
+  <ul> 
+   <li><a href="#chart">OpenGL&reg; chart</a> shows the elapsed time of the frame.</li>
+   <li><a href="#statistics">Statistics</a> view displays statistics of APIs related to EvasGL and OpenGL.</li> 
+   <li><a href="#APIlist">API List</a> view shows the OpenGL&reg; APIs that are associated with the values selected in the OpenGL&reg; chart.</li> 
+   <li><a href="#redundant">Redundant</a> list displays the API that is called repeatedly with the same parameters.</li> 
+   <li><a href="#context">Context</a> list displays the render state of the API context selected in the <strong>API List</strong> view.</li> 
+   <li><a href="#program">Program</a> list shows all the shader program information.</li> 
+   <li><a href="#texture">Texture</a> list shows texture information.</li> </ul>
+
+     <h2 name="chart" id="chart">OpenGL&reg; Chart</h2> 
+  
+  <p>The <strong>OpenGL&reg; chart</strong> displays the elapsed frame time with 2 charts:</p>
+  
+  <ul><li>  <p>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>
+
+  <p class="figure">Figure: Frame time chart</p> 
+  <p style="text-align: center;"> <img alt="Frame time chart" src="../images/da_opengl_chart_time.png" /> </p> </li>
+  
+<li>  <p>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.</p>
+  
+   <p class="figure">Figure: Frame rate chart</p> 
+  <p style="text-align: center;"> <img alt="Frame rate chart" src="../images/da_opengl_chart_rate.png" /> </p> </li></ul>
+  
+
+   <p>The <strong>Details</strong> view shows the details of the selected chart.</p>
+  
+      <p class="figure">Figure: OpenGL&reg; Chart Details view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Chart Details view" src="../images/da_opengl_chart_details.png" /> </p> 
+
+  <h2 name="statistics" id="statistics">Statistics</h2> 
+  
+  <p>The <strong>Statistics</strong> view displays the API statistics related to EvasGL and OpenGL&reg; 2.0.</p>
+
+  <p class="figure">Figure: OpenGL&reg; Statistics List view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Statistics List view" src="../images/da_opengl_statistics.png" /> </p> 
+  
+  <p>The view has the following columns:</p>
+  <ul>
+  <li><strong>API</strong> (text) is the API name.</li>
+  <li><strong>Time rate</strong> (long) is the rate of the API that was called.</li>
+  <li><strong>Count</strong> (integer) is the sum of the API that was called.</li>
+  <li><strong>API type</strong> (text) defines what the API operates on and how.</li>
+  </ul>
+   
+     <h2 name="APIlist" id="APIlist">API List</h2> 
+  
+  <p>The <strong>API List</strong> view displays the APIs associated with the values selected in the chart.</p>
+
+  <p class="figure">Figure: OpenGL&reg; API List view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; API List view" src="../images/da_opengl_api_list.png" /> </p> 
+  
+  <p>The view consists of the following columns:</p>
+  <ul>
+       <li><strong>#</strong> (integer) shows the unique log index.</li>
+       <li><strong>Frame</strong> defines the frame index number.</li>
+       <li><strong>Time</strong> (time) defines the time when the API was called.</li>
+    <li><strong>API</strong> (text) is the API name.</li>
+       <li><strong>Parameter</strong> shows the input parameter of the API.</li>
+       <li><strong>Elapsed time</strong> (time) defines the time to return after the call.</li>
+       <li><strong>Error</strong> (text) shows the error description of the API. Normal end return is the <span style="font-family: Courier New,Courier,monospace;">GL_SUCCESS</span>.</li>    <li><strong>PID</strong> (integer) is the API process ID.</li>
+       <li><strong>TID</strong> (integer) is the API thread ID.</li>
+  </ul>
+   
+   <p>The OpenGL&reg; <strong> Details</strong> view displays the detail information associated with the API selected in the <strong>API List</strong> view. The detailed information shows the uniform data and the error value.</p>
+   
+     <p class="figure">Figure: OpenGL&reg; Details view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Details view" src="../images/da_opengl_details.png" /> </p> 
+
+   <h2 name="redundant" id="redundant">Redundant List</h2> 
+  
+  <p>The <strong>Redundant</strong> view displays the APIs that are called repeatedly with the same parameters.</p>
+
+  <p class="figure">Figure: OpenGL&reg; Redundant view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Redundant view" src="../images/da_opengl_redundant.png" /> </p> 
+  
+  <p>The view has the following columns:</p>
+  <ul>
+  <li><strong>Count</strong> (integer) is the sum of the API that was called.</li>
+  <li><strong>Elapsed time</strong> (time) is the sum of the time to return after the called API.</li>
+  <li><strong>API</strong> (text) is the name of the API.</li>
+  <li><strong>Parameter</strong> shows the input parameters of the API.</li>
+  </ul>
+  
+ 
+    <h2 name="context" id="context">Context List</h2> 
+  
+  <p>The <strong>Context</strong> view displays the context rendering state associated with the item selected in the <strong>API List</strong> view. The title of the table refers to the context number of the selected API.</p>
+
+  <p class="figure">Figure: OpenGL&reg; Context view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Context view" src="../images/da_opengl_context.png" /> </p> 
+  
+  <p>The view has the following columns:</p>
+  <ul>
+  <li><strong>Name</strong> (text) shows the state name.</li>
+  <li><strong>Default state</strong> (text) shows the initial state value when the program is started.</li>
+  <li><strong>Current state</strong> (text) shows the current state value.</li>
+  </ul>
+<p>Compare the <strong>Default state</strong> and <strong>Current state</strong> to see changes in any value. Yellow represents a changed state. If you click the filter icon (marked with a red box in the following figure), only the changed state is shown in the list. You can also view the API that changed the value of the state. </p>
+  
+  <p class="figure">Figure: OpenGL&reg; Context view (changed state)</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Context view (changed state)" src="../images/da_opengl_context_changed.png" /> </p> 
+  
+   <h2 name="program" id="program">Program List</h2> 
+  
+  <p>The <strong>Program</strong> view displays the program information associated with the items selected in the <strong>API List</strong> view.</p>
+
+  <p class="figure">Figure: OpenGL&reg; Program view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Program view" src="../images/da_opengl_program.png" /> </p> 
+  
+  <p>The view has the following columns:</p>
+  <ul>
+  <li><strong>Context id</strong> (text) defines the context name.</li>
+  <li><strong>Id</strong> (text) defines the program ID of the context.</li>
+  <li><strong>Vertex shader</strong> (text) defines the vertex shader ID of the program.</li>
+  <li><strong>Fragment shader</strong> (text) defines the fragment shader ID of the program.</li>
+  </ul>
+  
+  <p>The same ID cannot be replicated in a context.</p>
+  
+  <p>The <strong>Details</strong> view displays the source of the selected program.</p>
+  
+  <p class="figure">Figure: OpenGL&reg; Details view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Details view" src="../images/da_opengl_program_details.png" /> </p> 
+  
+  <h2 name="texture" id="texture">Texture List</h2> 
+  
+  <p>The <strong>Texture</strong> view displays the textures associated with the item selected in the <strong>API List</strong> view.</p>
+
+  <p class="figure">Figure: OpenGL&reg; Texture view</p> 
+  <p style="text-align: center;"> <img alt="OpenGL&reg; Texture view" src="../images/da_opengl_texture.png" /> </p> 
+  
+  <p>The view has the following columns:</p>
+  <ul>
+  <li><strong>Context id</strong> (text) defines the context name.</li>
+  <li><strong>Id</strong> (text) defines the texture ID of the context.</li>
+  <li><strong>Type</strong> (text) shows the render state value of the texture type.</li>
+  <li><strong>WRAP_S</strong> (text) shows the render state value of  the WRAP_S texture.</li>
+  <li><strong>WRAP_T</strong> (text) shows the render state value of the WRAP_T texture.</li>
+  <li><strong>MIN_FILTER</strong> (text) shows the render state value of the MIN_FILTER texture.</li>
+  <li><strong>MAG_FILTER</strong> (text) shows the render state value of the MAG_FILTER texture.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_overview_n.htm b/org.tizen.devtools/html/native_tools/da_overview_n.htm
new file mode 100644 (file)
index 0000000..00ca589
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_overview_n.htm
@@ -0,0 +1,151 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Analyzer</title>  
+</head>
+
+
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+<h1>Dynamic Analyzer</h1> 
+  <p>You can monitor the performance and reliability of your Native application on a target device or the Emulator 
+       by <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#running">running the dynamic analyzer tool</a> included within the Tizen SDK.</p> 
+  <p>Dynamic Analyzer provides various functions for profiling applications. To better understand the profiling result, you need to know about each component that tool screen contains, providing you with the tracing information of your application.</p> 
+  <p class="figure">Figure: Dynamic Analyzer screen</p> 
+  <p style="text-align: center;"> <img alt="Dynamic Analyzer screen" src="../images/dynamic_analyzer.png" /> </p> 
+  <ol> 
+   <li><a href="da_timeline_n.htm">Timeline</a> 
+   <p>The <strong>Timeline</strong> tab shows the application data values over time as a graph.</p> </li>
+   <li><a href="da_summary_n.htm">Summary</a>
+   <p>The <strong>Summary</strong> tab consists of views showing failed APIs, leaks, profiling information, and warnings.</p> </li> 
+   <li><a href="da_range_info_n.htm">Range</a>
+   <p>The <strong>Range</strong> tab provides application performance data of a selected range.</p></li> 
+       <li><a href="da_views_n.htm#snapshot">Snapshot</a>
+       <p>The <strong>Snapshot</strong> view shows the current screen capture and CPU usage, process usage, and available memory.</p></li>
+       <li><a href="da_views_n.htm#callstack">Callstack</a>
+       <p>The <strong>Callstack</strong> view shows the callstack of the selected function in the Call Trace.</p></li>
+       <li><a href="#settings">Settings</a>
+       <p>The <strong>Settings</strong> button shows the setting dialog box that you can set the analysis features and other options.</p></li>
+  </ol>
+  
+<p>The dynamic analyzer can also contain the following tabs and pages:</p>  
+   <ul> 
+   <li><a href="da_file_n.htm">File</a> 
+   <p>The <strong>File</strong> tab shows an analysis of file usage.</p> </li>
+   <li><a href="da_thread_n.htm">Thread</a> 
+   <p>The <strong>Thread</strong> tab shows information about thread and synchronization.</p> </li>
+   <li><a href="da_network_n.htm">Network</a> 
+   <p>The <strong>Network</strong> tab displays information about the network.</p></li> 
+<li><a href="da_opengl_n.htm">OpenGL</a> 
+   <p>The <strong>OpenGL</strong> page displays information about OpenGL&reg; 2.0 and EvasGL.</p></li>    
+  </ul>
+  
+  <p>The tabs on the main display can be reordered by dragging and dropping.</p>
+
+  <p class="figure">Figure: Tab pages</p> 
+  <p style="text-align: center;"> <img alt="Tab pages" src="../images/tab_pages.png" /> </p>   
+  
+<p>The analysis result helps you to recognize and fix bottlenecks, bugs, and memory and resource leaks. 
+       For instructions on running the dynamic analyzer and ways to analyze the result and utilize the result 
+       for improving your application performance, see <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#dynamic_analysis">Dynamic Analysis</a>.</p>
+       
+       <h2  id="settings" name="settings">Settings</h2> 
+  <p>The settings button on the toolbar opens the <strong>Settings</strong> dialog box, which is used to adjust the dynamic analyzer functions during operation or stop.</p>
+  <p>The <strong>Settings</strong> dialog box consists of the following tabs:</p>
+  <ul>
+       <li><strong>Features</strong> 
+       <p>The target shows a list of the currently supported profiles.</p>
+       <p>The template is a combination of several useful features and you can set up a template for each target. When you select a template, the template description is displayed on the screen.</p>
+        <p class="figure">Figure: Features tab</p> 
+     <p style="text-align:center;"><img alt="Features tab" src="../images/features_tab.png" /></p>
+        <p>The following templates are provided:</p>
+        <ul>
+               <li><strong>Bottleneck</strong>: This template shows where can be the most bottleneck point while you are using your program.</li>
+               <li><strong>Memory Leaks</strong>: This template shows the memory leak detected by this tool.</li>
+               <li><strong>Process Activity</strong>: This template shows the overall activities of your concerning processes (process CPU load and memory usage).</li>
+               <li><strong>File</strong>: This template shows the operations (open, close, read, write, and lock) of the files that were accessed by your application.</li>
+               <li><strong>Thread Activity</strong>: This template measures CPU usage of threads, visualizes life-cycle of each thread and relationship between threads.</li>
+               <li><strong>Wait Status</strong>: This template shows various information that cause the process become wait status.</li>
+               <li><strong>Network</strong>: This template shows the TCP/UDP network activity of the glibc socket.</li>
+               <li><strong>OpenGL</strong>: This template shows detailed information of the openGL layer.</li>
+               <li><strong>Energy</strong>: This template informs you of power consumption of target device.</li>
+               <li><strong>Custom</strong>: This template can be configured by selecting the desired features. If you change a feature in another template, the change effects the custom template.</li>
+        </ul>   
+        
+        <p>When you click the <strong>Details</strong> button in the Features tab, the <strong>Feature details</strong> dialog appears on the screen.</p>
+        <p class="figure">Figure: Feature details</p> 
+     <p style="text-align:center;"><img alt="Features tab" src="../images/feature_details.png" /></p>
+        
+        <p>The Feature detail dialog contains the following settings for feature analysis:</p>
+        <ul>
+           <li><strong>System</strong>: Displays the system information.</li>
+               <li><strong>Function profiling</strong>: Displays the function profile.</li>
+               <li><strong>Function sampling</strong>: Displays the function sampling.</li>
+               <li><strong>Memory allocation</strong>: Displays the heap memory allocation.</li>
+               <li><strong>File analysis</strong>: Displays the file usage analysis on the <strong>File</strong> tab and the file chart on the <strong>Timeline</strong> tab.</li>
+               <li><strong>Thread analysis</strong>: Displays information about the thread and synchronization.</li>
+               <li><strong>Network analysis</strong>: Displays information about the network.</li>
+               <li><strong>OpenGL&reg; ES analysis</strong>: Displays information about the OpenGL&reg; layer.</li>
+               
+               <li><strong>UI Event</strong>: Displays UI events that occur on the device.</li>
+        </ul></li>
+        
+    <li><strong>Options</strong> 
+       <p>The configuration settings define the dynamic analyzer configuration.</p>
+        <p class="figure">Figure: Options tab</p> 
+     <p style="text-align:center;"><img alt="Option tab" src="../images/config_tab.png" /></p>
+        <ul><li>Recording / Replay option
+        <ul><li><strong>Auto-stop while replaying</strong>: Reproduces the information that was saved through the dynamic analyzer previously. The stored information has an end time. 
+        <p>Select this option to terminate at the same time as before.</p></li>
+        <li><strong>Recording</strong>: Repeats a previous analysis.</li></ul></li>
+        <li>Screenshot option
+        <ul><li><strong>On scene transition</strong>: Shows screenshots of the application UI changes.</li>
+        <li><strong>Periodically</strong>: Shows screenshots according to a set period.</li></ul></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_range_info_n.htm b/org.tizen.devtools/html/native_tools/da_range_info_n.htm
new file mode 100644 (file)
index 0000000..c973a11
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_range_info_n.htm
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Range</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+  <h1>Range</h1> 
+  <p>The range information feature of the dynamic analyzer provides information about the application performance in a selected range.</p> 
+  <p class="figure">Figure: Range information</p> 
+  <p style="text-align:center;"><img alt="Range information" src="../images/range_info.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>The range information can be created in one of the following 2 ways:</p>
+  <ul>
+       <li>Chart (<strong>Timeline</strong>, <strong>File</strong>, and <strong>Thread</strong> tabs)
+       <ul>
+               <li>Set the start and end time using the context menu:
+               <ol>
+                       <li>Right-click and select <strong>Set range start</strong> and <strong>Set range end</strong>.</li>
+                       <li>Right-click and select <strong>Analyze range</strong>.</li>
+               </ol></li>
+               <li>Set the start and end time from the selection area of the timeline using the context menu:
+               <ol>
+                       <li>Drag the timeline, right-click, and select <strong>Set range from selection</strong>.</li>
+                       <li>Right-click and select <strong>Analyze range</strong>.</li>
+               </ol></li>
+       </ul>
+  
+       <p class="figure">Figure: Set range on a chart</p> 
+    <p style="text-align:center;"><img alt="Set range on a chart" src="../images/set_range_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p></li>
+  
+       <li>Table (all tables, except profiling)
+       <ul>
+               <li>Set the start and end time using the context menu:
+               <ol>
+                       <li>Right-click and select <strong>Set range start</strong> and <strong>Set range end</strong>.</li>
+                       <li>Right-click and select <strong>Analyze range</strong>.</li>
+               </ol></li>
+       </ul>
+       
+       <p class="figure">Figure: Set range on a table</p> 
+    <p style="text-align:center;"><img alt="Set range on a table" src="../images/range_context_menu.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p></li>
+
+  </ul>  
+  <p>In the context menu, select <strong>Clear Analyze range</strong> to clear the set range values and close the range page. The start and end time selection is not removed.</p>
+  
+  <p>The <strong>Range</strong> information tab closes when you click <strong>Clear Analyze range</strong> in context menu, close the <strong>Range</strong> tab, or open, replay, or restart a trace. The <strong>Range</strong> tab has the same views as the <a href="da_summary_n.htm">Summary</a> tab, but only the data of the selected range is displayed.</p>
+   
+  <p>When range information is created, the values within the range are displayed in yellow in the other views.</p> 
+
+  <p class="figure">Figure: Range area in the Call Trace view</p> 
+  <p style="text-align:center;"><img alt="Range area in the Call Trace view" src="../images/range_info_view.png" 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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_summary_n.htm b/org.tizen.devtools/html/native_tools/da_summary_n.htm
new file mode 100644 (file)
index 0000000..e268361
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_summary_n.htm
@@ -0,0 +1,117 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Summary</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#leak">Leaks</a>
+                       </li>
+                       <li><a href="#usage">Function Usage Profiling</a>
+                       </li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Summary</h1> 
+  <p>The <strong>Summary</strong> tab of the dynamic analyzer provides various information about the application performance.</p> 
+
+  <p class="figure">Figure: Summary information</p> 
+  <p style="text-align: center;"> <img alt="Summary information" src="../images/da_summary_info.png" /> </p> 
+  <p>The tab consists of the following views:</p> 
+  <ol> 
+
+   <li><a href="#leak">Leaks view</a> shows the leaks that occur when using memory or a file.</li> 
+   
+   <li><a href="#usage">Function Usage Profiling view</a> shows profiling information of the used methods.</li> 
+
+  </ol> 
+
+  
+  <h2 name="leak" id="leak">Leaks</h2> 
+  <p>The <strong>Leaks</strong> view shows data that is recognized as a leak on application runtime, mainly related to memory allocation and file operations.</p> 
+ 
+  <p class="figure">Figure: Leaks view</p> 
+  <p style="text-align: center;"> <img alt="Leaks view" src="../images/leak_view.png" /> </p> 
+ 
+  <p>The <strong>Leak candidates</strong> view shows data that is estimated as a leak in the running application, mainly due to memory allocation and file operations.</p>
+    <p class="figure">Figure: Leak candidates view</p> 
+  <p style="text-align: center;"> <img alt="Leak candidates view" src="../images/leak_candidates_view.png" /> </p> 
+  
+  <p>These views have the following columns:</p> 
+  <ul> 
+   <li><strong>API</strong> is the name of the API.</li> 
+   <li><strong>PID</strong> is the identifier of the process.</li>
+   <li><strong>Category</strong> classifies the API type (such as file or memory).</li>
+   <li><strong>Time</strong> shows the time when the API is called.</li> 
+   <li><strong>File/parameter</strong> shows the parameter (for a memory leak) or the file path (for a file or socket leak).</li> 
+   <li><strong>Return</strong> shows the return value of the API.</li> 
+   <li><strong>Library</strong> is the name of the caller library.</li>
+  </ul> 
+
+<h2 name="usage" id="usage">Function Usage Profiling</h2> 
+  <p>The <strong> Function Usage Profiling</strong> view shows the method usage information of an application. The information is divided into 2 units:</p> 
+  <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 view has the following columns:</p> 
+  <ul> 
+   <li><strong>Library or function name</strong> (text) shows the library unit (application or dependent), the binary/library name, and the method name in a tree format.</li> 
+   <li><strong>Exclusive CPU time</strong> (float, second) defines the exclusive CPU time.</li> 
+   <li><strong>Exclusive CPU rate</strong> (rate, percent) defines the exclusive CPU rate.</li> 
+   <li><strong>Exclusive Elapsed time</strong> (time) defines the exclusive elapsed time. </li> 
+   <li><strong>Inclusive CPU time</strong> (float, second) defines the inclusive CPU time.</li> 
+   <li><strong>Inclusive CPU rate</strong> (rate, percent) defines the inclusive CPU rate.</li> 
+   <li><strong>Inclusive Elapsed time</strong> (time) defines the inclusive elapsed time. </li> 
+   <li><strong>Call count</strong> (integer) shows the number of times the method has been called.</li> 
+  </ul> 
+  <p>Exclusive time is the amount of execution time that passed within the method, excluding the time spent in methods called from the method in question. Inclusive time is the amount of execution time that passed within the method, including the time spent in method called from the method in question. </p> 
+  <p>CPU time is the actual CPU time consumed by the process. The value is obtained by sampling. Elapsed time is the wall-clock time, meaning time elapsed between the method entry and method exit.</p> 
+
+    
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_thread_n.htm b/org.tizen.devtools/html/native_tools/da_thread_n.htm
new file mode 100644 (file)
index 0000000..246a300
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_thread_n.htm
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Thread Analysis</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#thread_chart">Thread Chart</a>
+                       </li>
+                       <li><a href="#threadAPI">Thread API List</a>
+                       </li>
+                       <li><a href="#thread_details">Thread Details</a>
+                       </li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1><a name="thread" id="thread">Thread Analysis</a></h1> 
+  <p>The <strong>Thread</strong> tab of the dynamic analyzer displays information about threads and synchronization.</p> 
+  <p class="figure">Figure: Thread analysis</p> 
+  <p> <img alt="Thread analysis" src="../images/thread_analysis.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>The tab consists of the following views:</p> 
+  <ol> 
+   <li><a href="#thread_chart">Thread chart</a> displays thread and synchronization operations and the thread load as a time flow graph.</li> 
+   <li><a href="#threadAPI">Thread API List</a> view displays the thread or synchronization object APIs selected in the thread chart.</li> 
+   <li><a href="#thread_details">Thread Details</a> view displays detailed information on the thread or synchronization object selected in the thread chart.</li> 
+   <li><a href="da_views_n.htm#snapshot">Snapshot</a> view provides additional information in the form of snapshots.</li>
+  </ol> 
+
+    <h2><a name="thread_chart" id="thread_chart">Thread Chart</a></h2> 
+  <p>The thread chart displays the thread and the related synchronization object in a tree format using a graph.</p> 
+  <p>You can select either thread or synchronization as a parent of the tree.</p> 
+  <p class="figure">Figure: Thread chart - thread parent</p> 
+  <p> <img alt="Thread chart - thread parent" src="../images/thread_parent.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p class="figure">Figure: Thread chart - synchronization parent </p> 
+  <p> <img alt="Thread chart - synchronization parent" src="../images/synchronization_parent.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>The chart classifies thread and synchronization object states by color and shape:</p> 
+  <ul> 
+   <li><strong>Blue</strong> colored area of the thread line depicts the thread load of that time frame. A darker color means higher load.</li> 
+   <li><strong>Yellow</strong> vertical bar points the time when the API was called.</li> 
+   <li><strong>Violet</strong> arrow displays the interaction between threads. The number inside the arrow is the thread ID of the related thread.</li> 
+   <li><strong>Orange</strong> colored area of the synchronization object line displays the possession of that synchronization object (lock). </li> 
+   <li><strong>Grey</strong> colored area of the synchronization object line shows the waiting time for the acquiring that synchronization object.</li> 
+  </ul> 
+  
+  <h2><a name="threadAPI" id="threadAPI">Thread API List</a></h2> 
+  <p>The <strong>Thread API List</strong> view displays the APIs associated with the thread or synchronization object selected in the thread chart.</p> 
+  <p class="figure">Figure: Thread API List view</p> 
+  <p> <img alt="Thread API List view" src="../images/thread_api_list_view.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>The view has the following columns:</p> 
+  <ul> 
+   <li><strong>#</strong> (integer) shows the unique log index.</li> 
+   <li><strong>Time</strong> (time) defines the time when the API was called.</li> 
+   <li><strong>PID</strong> (integer) is the process ID of the API.</li>   
+   <li><strong>TID</strong> (integer) is the thread ID of the API.</li>   
+   <li><strong>API name</strong> (text) is the name of the API.</li> 
+   <li><strong>Parameter</strong> shows the input parameter of the API.</li> 
+   <li><strong>Return</strong> (integer) defines the return value.</li> 
+   <li><strong>Error Code</strong> (text) shows the error description of the API. Normal end return is the <span style="font-family: Courier New,Courier,monospace;">E_SUCCESS</span>.</li> 
+  </ul> 
+
+     <h2><a name="thread_details" id="thread_details">Thread Details</a></h2> 
+  <p>The <strong>Thread Details</strong> view displays detailed information of the thread or synchronization object selected in the thread chart.</p> 
+  <p class="figure">Figure: Thread Details view</p> 
+  <p> <img alt="Thread Details view" src="../images/thread_details.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>The view has the following fields:</p> 
+  <ul>    
+   <li><strong>Type</strong> displays the type of the thread or synchronization object.</li> 
+   <li><strong>Thread ID </strong> is the thread ID (LWP) of the thread.</li> 
+   <li><strong>Thread Function</strong> displays the name of the function, which the thread is executing.</li>
+   <li><strong>Start Time</strong> is the start time of the thread.</li> 
+   <li><strong>End Time</strong> is the end time of the thread.</li> 
+   <li><strong>Attr Type</strong> displays the attribute type of the thread.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_timeline_n.htm b/org.tizen.devtools/html/native_tools/da_timeline_n.htm
new file mode 100644 (file)
index 0000000..b02e3a0
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_timeline_n.htm
@@ -0,0 +1,247 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Timeline chart</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#timechart">Timeline Chart</a></li>
+                       <li><a href="#config">Chart Configuration</a>
+                       </li>
+                       <li><a href="#trace">Call Trace</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Timeline</h1> 
+  <p>The <strong>Timeline</strong> tab of the dynamic analyzer shows the data values over time as a graph.</p> 
+  <p class="figure">Figure: Timeline information</p> 
+  <p style="text-align: center;"> <img alt="Timeline information" src="../images/timeline.png" /> </p> 
+  <p>The tab consists of the following views:</p> 
+  <ol> 
+   <li><a href="#timechart">Timeline chart</a> shows the data values in a graph. The chart content can be edited in the <a href="#config">Edit chart</a> dialog.</li>
+
+   <li><a href="#trace">Call Trace</a> shows the user API calls.</li> 
+  </ol> 
+
+  <h2 name="timechart" id="timechart">Timeline Chart</h2> 
+  <p>The timeline chart shows the data values over time as a chart. You can create 12 different charts, which can be selected from the left side of the window.</p> 
+
+  <p class="figure">Figure: Timeline chart</p> 
+  <p style="text-align: center;"> <img alt="Timeline chart" src="../images/timeline_chart.png" /></p> 
+  <ol> 
+   <li><strong>CPU chart</strong> 
+   <p>Shows CPU usage.</p> 
+   <ul> 
+    <li><p> <img src="../images/color_1.png" />: System CPU usage (%)</p></li> 
+    <li><p> <img src="../images/color_2.png" />: Application CPU Usage (%)</p></li> 
+   </ul> </li>
+   <li><p><strong>CPU core chart</strong></p> <p>Shows CPU core usage. Depending on the number of device cores, the number of lines on the chart varies.</p> 
+    <ul> 
+     <li> <p><img src="../images/color_3.png" />: CPU core0 usage (%)</p></li> 
+     <li><p> <img src="../images/color_4.png" />: CPU core1 usage (%)</p></li> 
+     <li><p> <img src="../images/color_5.png" />: CPU core2 usage (%)</p></li> 
+     <li><p> <img src="../images/color_6.png" />: CPU core3 usage (%)</p></li> 
+        <li><p> <img src="../images/color_01.png" />: CPU core4 usage (%)</p></li>
+        <li><p> <img src="../images/color_02.png" />: CPU core5 usage (%)</p></li>
+        <li><p> <img src="../images/color_03.png" />: CPU core6 usage (%)</p></li>
+        <li><p> <img src="../images/color_04.png" />: CPU core7 usage (%)</p></li>
+    </ul> </li> 
+   <li><strong>CPU frequency chart</strong></li> 
+   <p>Shows CPU frequency. Depending on the number of device cores, the number of lines on the chart varies. In the Emulator, the frequency is always 0.</p> 
+   <ul> 
+    <li><p> <img src="../images/color_05.png" />: CPU core0 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_06.png" />: CPU core1 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_07.png" />: CPU core2 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_08.png" />: CPU core3 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_09.png" />: CPU core4 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_010.png" />: CPU core5 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_011.png" />: CPU core6 frequency (KHz)</p></li>
+       <li><p> <img src="../images/color_012.png" />: CPU core7 frequency (KHz)</p></li>
+   </ul> 
+   <li><p><strong>Heap allocation chart</strong></p></li> 
+   <p>Shows heap memory allocation. System total and app-allocated data is shown. Confirm additional binary allocation if you have set the binary in the setting dialog.</p>
+   <p>If a process is added, a child chart is dynamically created for the added process.
+</p> 
+   <ul> 
+    <li> <p><img src="../images/color_8.png" />: System total allocated (KB)</p></li> 
+    <li> <p><img src="../images/color_9.png" />: App-allocated (KB)</p></li> 
+       <li>Optionally, binary (user set) allocated (KB)</li>
+   </ul> 
+   <li><strong>Process Size chart</strong><p></p> <p>Shows amount of memory usage. VSS is virtual memory, RSS is physical memory and PSS is process&#39;s private memory + shared memory / number of shared processes.</p> 
+   <p>If a process is added, a child chart is dynamically created for the added process.</p>
+   
+    <ul> 
+     <li><p><img src="../images/color_10.png" />: Total VSS (virtual set size) memory (KB) size of the process</p></li> 
+     <li><p><img src="../images/color_11.png" />: Physical RSS (resident set size) memory (KB) size used by the process</p></li> 
+     <li><p><img src="../images/color_12.png" />: PSS (proportional set size) memory (KB) in the following format: [(Unique memory + Shared memory)/number of processes sharing the memory].</p></li> 
+    </ul></li> 
+   <li><strong>Memory chart</strong><p></p> <p> Shows system memory usage.</p> 
+    <ul> 
+     <li><p><img src="../images/color_13.png" />: System maximum memory (KB)</p></li> 
+     <li><p><img src="../images/color_14.png" />: System used memory (KB)</p></li> 
+     <li><p><img src="../images/color_15.png" />: App used memory (KB)</p></li> 
+    </ul></li> 
+
+   <li><p><strong>Screenshot chart</strong></p> <p>Shows screenshots (they can be taken only when the <strong>Take snapshot</strong> button is enabled).</p></li> 
+   <table class="note"> 
+    <tbody> 
+     <tr> 
+      <th class="note">Note</th> 
+     </tr> 
+     <tr> 
+      <td class="note">The screenshot is captured about 2 seconds after the scene or form is transformed. To capture screenshots perfectly, use scene management or animation to transform a panel or form.</td> 
+     </tr> 
+    </tbody> 
+   </table> 
+   <li><p><strong>Disk IO chart</strong></p> <p>Shows the disk&#39;s read and write bytes and the number of sectors.</p> 
+    <ul> 
+     <li><p><img src="../images/color_013.png" />: Disk read operation counts</p></li> 
+     <li><p><img src="../images/color_014.png" />: Disk write operation counts</p></li> 
+     <li><p><img src="../images/color_015.png" />: Disk bytes read size (KB)</p></li> 
+     <li><p><img src="../images/color_016.png" />: Disk bytes written size (KB)</p></li> 
+    </ul></li> 
+   <li><p><strong>Network IO</strong></p> <p>Shows the network send and receive bytes.</p> 
+    <ul> 
+     <li><p><img src="../images/color_017.png" />: Receive bytes (KB)</p></li> 
+     <li><p><img src="../images/color_018.png" />: Send bytes (KB)</p></li> 
+
+    </ul></li>         
+   
+   <li><p><strong>UI Event chart</strong></p> <p>Shows UI events that occur on the device.</p> 
+    <ul> 
+     <li><p><img src="../images/color_20.png" />: Touch event</p></li> 
+     <li><p><img src="../images/color_22.png" />: Orientation event</p></li> 
+    </ul></li> 
+       
+          <li><p><strong>Device chart</strong></p> <p>Shows the status of Wi-Fi, Bluetooth, GPS, DNet, and camera on the device.</p> 
+    <ul> 
+     <li><p><img src="../images/color_019.png" />: Wi-Fi</p></li> 
+     <li><p><img src="../images/color_020.png" />: Bluetooth</p></li> 
+     <li><p><img src="../images/color_021.png" />: GPS</p></li> 
+        <li><p><img src="../images/color_022.png" />: DNet</p></li> 
+     <li><p><img src="../images/color_023.png" />: Camera</p></li> 
+    </ul></li> 
+       
+          <li><p><strong>Energy chart</strong></p> <p>Shows the power consumption of Flash memory, CPU, and LCD.</p> 
+    <ul> 
+     <li><p><img src="../images/color_024.png" />: Total energy usage (mA)</p></li> 
+     <li><p><img src="../images/color_025.png" />: Flash memory (mA)</p></li> 
+     <li><p><img src="../images/color_026.png" />: CPU (mA)</p></li> 
+     <li><p><img src="../images/color_027.png" />: LCD (mA)</p></li>
+    </ul></li> 
+  </ol> 
+  
+  <h3 id="chart" name="chart">Chart Buttons and Slider</h3> 
+  <p>You can use the chart buttons to ease the analysis.</p> 
+  <p class="figure">Figure: Chart buttons</p> 
+  <p style="text-align: center;"> <img src="../images/timeline_buttons.png" /> </p> 
+  <ol> 
+   <li><strong>Add</strong> button <p>The button activates the <strong>Edit chart</strong> dialog. You can define which charts are visible in the <strong>Timeline</strong> page.</p></li> 
+   <li><strong>Chart Minimize</strong> button <p>Comparing different charts can be helpful. You can do it easily by minimizing all the charts.</p> <p style="text-align: center;"> <img alt="Chart Minimize button" src="../images/timeline_chart_min.png" /> </p></li> 
+   <li><strong>Chart Maximize</strong> button <p>To see the chart in more detail, maximize it.</p></li> 
+  </ol> 
+
+  
+  <h3 id="lifecycle" name="lifecycle">Managing Life-cycle and Scale</h3>
+  <p>To manage the process life-cycle and modify the time scale:</p>
+  <ol>
+  <li>Confirm the status of the target process through the life-cycle bar.
+  <p style="text-align: center;"><img alt="Life-cycle bar" src="../images/timeline_lifecycle_bar.png" /></p>
+      <ul> 
+     <li><p><img src="../images/color_028.png" />: Initializing status</p></li> 
+     <li><p><img src="../images/color_029.png" />: Running status</p></li> 
+     <li><p><img src="../images/color_030.png" />: Pausing status</p></li> 
+     <li><p><img src="../images/color_031.png" />: Terminating status</p></li>
+    </ul>
+</li>
+
+  <li>Adjust the chart&#39;s time scale using the scale slider at the bottom left.
+  <p style="text-align: center;"> <img alt="Timeline time scale" src="../images/timeline_scale.png" /> </p>
+
+  </li>
+  </ol>
+  
+   <h2 id="config" name="config">Chart Configuration</h2> 
+  <p>The <strong>Edit chart</strong> dialog is an editor window for managing the <strong>Timeline page</strong> chart. The <strong>Edit chart</strong> dialog can be used to control the order in which the visible charts are shown on the <strong>Timeline</strong> page in runtime. To change the order, drag the applicable chart to the new location. To change the visibility state of a chart, click the chart. For a detailed description of each chart, see <a href="#timechart">Timeline Chart</a>.</p> 
+  <p class="figure">Figure: Chart Configuration</p> 
+  <p style="text-align: center;"> <img alt="Chart Configuration" src="../images/da_edit_chart_dialog.png" /> </p> 
+  <p>The chart classifies the visibility states by color:</p> 
+  <ul> 
+   <li>Blue
+   <p>Chart is visible on the <strong>Timeline</strong> tab.</p> </li> 
+   <li>Grey 
+   <p>Chart is not visible on the <strong>Timeline</strong> tab.</p> </li>
+  </ul> 
+
+ <h2 name="trace"  id="trace">Call Trace</h2> 
+  <p>The <strong>Call Trace</strong> shows the user method callstack that occurs during an application execution.</p> 
+  <p>The <strong>Time</strong> column shows the calling time of the API, <strong>Thread id</strong> column shows the thread ID, and <strong>API</strong> column shows the API name.</p> 
+
+  <p>When you select a list item:</p> 
+  <ul> 
+   <li>The call time is shown in the <strong>Timeline</strong> view. If you select multiple calls, the call time range is shown.</li> 
+   <li>If you select a single call, the status and image is shown in the <a href="da_views_n.htm#snapshot">Snapshot view</a>.</li> 
+   <li>The API callstack is shown in the <a href="da_views_n.htm#callstack">Callstack view</a>.</li> 
+  </ul>
+ <p>The <strong>Call Trace</strong> view can occasionally show methods that you have not defined in the application. If an application class inherits a super class and does not declare the constructor of the super class, the compiler automatically generates the default constructor code in the application binary.</p> 
+     
+       
+        <table class="note"> 
+         <tbody> 
+          <tr> 
+           <th class="note">Note</th> 
+          </tr> 
+          <tr> 
+           <td class="note"> <p>If your application is built by setting the optimization option above <span style="font-family: Courier New,Courier,monospace">O0</span> (default value), the API callstack-related information shown in the <strong>Call Trace</strong> view can be incorrect. To profile your application with the dynamic analyzer, you must not change the optimization option.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/da_views_n.htm b/org.tizen.devtools/html/native_tools/da_views_n.htm
new file mode 100644 (file)
index 0000000..2422767
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/da_views_n.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Other Views</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#callstack">Callstack</a></li>
+                       <li><a href="#snapshot">Snapshot</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Other Views</h1> 
+  <p>The dynamic analyzer provides the <strong>Callstack</strong> and <strong>Snapshot</strong> views.</p>
+
+<h2 name="callstack" id="callstack">Callstack</h2> 
+  <p>The <strong>Callstack</strong> view shows the callstack of the selected API or item.</p> 
+
+ <p>The view has the following columns:</p> 
+  <ul> 
+   <li><strong>Function</strong> shows the symbol name.</li> 
+   <li><strong>Address</strong> shows the symbol address.</li> 
+   <li><strong>Binary path</strong> shows the symbol path.</li> 
+  </ul> 
+  <p>If the symbol is located in the user binary, it is shown in blue. If the symbol name cannot be found, it is marked as an unknown function.</p> 
+  
+ <h2 name="snapshot" id="snapshot">Snapshot</h2> 
+  <p>The <strong>Snapshot</strong> view shows the current screen capture and CPU usage, process usage, and available memory.</p> 
+  <p class="figure">Figure: Snapshot view</p> 
+  <p style="text-align:center;"><img alt="Snapshot view" src="../images/snapshot_view.png" /></p>
+  <p>The <strong>Snapshot</strong> view contains the following components:</p>
+  <ol> 
+   <li>Image viewer<p>The image viewer shows a snapshot of the current screen.</p> <p>If you select an image, the <a href="da_timeline_n.htm#trace">Call Trace</a> view and the <a href="da_timeline_n.htm#timechart">timeline chart</a> content moves to the API at that time.</p> </li> 
+   <li>Latest<p>The latest button is used to show the current state of the snapshot view content.</p> </li> 
+   <li>CPU usage <p>The bar chart shows the CPU use percentage of the selected point. The chart shows the usage of up to 4 CPUs.</p></li> 
+   <li>Process size <p>The circular chart shows the process memory size of the selected point.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/enventor_n.htm b/org.tizen.devtools/html/native_tools/enventor_n.htm
new file mode 100644 (file)
index 0000000..f61cc31
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/enventor_n.htm
@@ -0,0 +1,461 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Enventor</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#layout">Enventor Layout</a>
+               
+                       </li>
+                       <li><a href="#textview">Using the Text View</a>
+               
+                       </li>
+                       <li><a href="#liveview">Using the Live View</a>
+                       </li>
+                       <li><a href="#feedbacks">Interactive Feedback</a>
+                       </li>
+                       <li><a href="#tools">Tool Functions</a>
+                       </li>
+                       <li><a href="#shortcuts">Shortcut Keys</a>
+                       </li>
+                       <li><a href="#conf">Configuration Setting</a>
+                       </li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Enventor</h1> 
+       <p>Tizen SDK provides a useful theme editor tool, Enventor. Enventor supports the text edit function and the preview function for EDC source code. You can edit EDC source code to create your layout using Enventor.</p>
+
+<p>For more information about the EDC format, see <a href="http://docs.enlightenment.org/auto/edje/edje_main.html" target="_blank">Edje</a> module and <a href="http://docs.enlightenment.org/auto/edje/edcref.html" target="_blank">EDC</a> format.</p>
+
+<p class="figure">Figure: Enventor basic view</p> 
+<p style="text-align:center;"><img alt="Enventor basic view" src="../images/enventor_basic_view.png" /></p> 
+  
+<p>Before using Enventor, familiarize yourself with the following:</p>
+<ul>
+       <li><a href="#layout">Enventor Layout</a></li>
+       <li><a href="#textview">Using the Text View</a></li>
+       <li><a href="#liveview">Using the Live View</a></li>
+       <li><a href="#feedbacks">Interactive Feedback</a></li>
+       <li><a href="#tools">Tool Functions</a></li>
+       <li><a href="#shortcuts">Shortcut Keys</a></li>
+       <li><a href="#conf">Configuration Setting</a></li>
+</ul>
+
+
+<h2 id="layout" name="layout">Enventor Layout</h2>
+<p>Basically, the Enventor view is divided into 2 sections, the live view and the text view. The live view is the left pane of the Enventor window and it previews images corresponding to the part objects of EDC source code. The text view is the right pane of the Enventor window and it contains EDC source code.</p>
+
+<p>The following figure illustrates the layout. In the figure:</p>
+<ul>
+<li>Red: Tool bar</li>
+<li>Green: Live view</li>
+<li>Blue: Text view</li>
+<li>Purple: Console view</li>
+<li>Yellow: Status bar</li>
+</ul>
+
+<p class="figure">Figure: Layout of Enventor</p> 
+<p style="text-align:center;"><img alt="Layout of Enventor" src="../images/enventor_layout.png" /></p> 
+
+<h2 id="textview" name="textview">Using the Text View</h2>
+
+<p>The Enventor text view mainly supports text editing. You can write and modify EDC source code in this view. Once part sections are written in the text view and the modified EDC source code is saved, preview images corresponding to the part objects of EDC source code are displayed in the live view.</p>
+<p>Enventor supports the following features:</p>
+<ul>
+<li>Auto-complete
+<p>To help you write EDC source code, Enventor supports the auto-complete function, which lists the reserved keywords in a contextual pop-up.</p>
+<p>When you enter a part of a reserved keyword, a contextual pop-up comes up with a list of keywords beginning with your input string. Choose the keyword with the up and down arrow keys, and press <strong>Enter</strong>. The keyword is selected and the related EDC format is added in the text view automatically. In contrast, if you press the Backspace key, the auto-complete function is cancelled and the contextual pop-up disappears. In addition, you can enable or disable the auto completion function in the configuration setting in the tool bar.</p>
+
+<p>The following figure shows the auto-complete contextual pop-up listing the reserved keywords.</p>
+
+<p class="figure">Figure: Auto-complete pop-up</p> 
+<p style="text-align:center;"><img alt="Auto-complete pop-up" src="../images/enventor_autocomplete.png" /></p> 
+</li>
+
+<li>Candidate list
+
+<p>EDC source code provides a variety of predefined keywords including part object types and program action types. To edit the keywords easily, Enventor supports the candidate list function for the keywords. When you double-click a keyword in the text view, the available candidate keyword list based on the context pops up. If you select one of the candidate keywords, the double-clicked keyword is changed to the selected keyword.</p>
+
+<p>The following figure shows the type candidate list.</p>
+
+<p class="figure">Figure: Candidate list</p> 
+<p style="text-align:center;"><img alt="Candidate list" src="../images/enventor_candidate.png" /></p> 
+
+<p>The candidate list function also helps you to know the available range of the numeric value based on the context. The numeric candidate function shows the range of the available number.</p>
+
+<p class="figure">Figure: Numerical value range</p> 
+<p style="text-align:center;"><img alt="Numerical value range" src="../images/enventor_function.png" /></p> 
+</li>
+</ul>
+
+<h2 id="liveview" name="liveview">Using the Live View</h2>
+
+<p>Enventor also provides another method called LiveEdit function to add part objects more easily. Click the <strong>LiveEdit</strong> button in the toolbar to activate the LiveEdit function. After that you can add a part object using the LiveEdit contextual pop-up and change the position and size of the part object by dragging. While the LiveEdit function is activated, the text view is disabled.</p>
+
+<p>In the live view, you can:</p>
+
+<ul>
+<li>Add a part object.
+<p>When you right-click in the live view, the LiveEdit contextual pop-up pops up. The pop-up contains 6 frequently-used part object types, RECT, IMAGE, SPACER, SWALLOW, and TEXTBLOCK. Click the needed part object type and the corresponding part object appears in the live view.</p>
+
+<p>The following figure shows the LiveEdit contextual pop-up containing part object types.</p>
+
+<p class="figure">Figure: Part object types</p> 
+<p style="text-align:center;"><img alt="Part object types" src="../images/enventor_part_objects.png" /></p> 
+</li>
+
+<li>Set the position and size of the part object.
+
+<p>The position and size of the part object based on pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed on the left top box and on the right bottom box.</p>
+<p>The size of the part object is changed by dragging the left top box and the right bottom box. The position of the part object is changed by dragging the part object itself.</p>
+
+<p>The following figure shows the preview of the rectangle object in the live view with the position and the size information created by the LiveEdit contextual pop-up.</p>
+
+<p class="figure">Figure: Part object position and size settings</p> 
+<p style="text-align:center;"><img alt="Part object position and size settings" src="../images/enventor_preview_object.png" /></p> 
+
+<p>After the position and size of the part object is set, press <strong>Enter</strong> to add the part object. The corresponding EDC source code is added automatically in the text view.</p>
+
+<p>The following figure shows the automatically written EDC source code corresponding to the added rectangle part object.</p>
+
+<p class="figure">Figure: Automatically created source code</p> 
+<p style="text-align:center;"><img alt="Automatically created source code" src="../images/enventor_source_code.png" /></p> 
+</li>
+</ul>
+
+<h2 id="feedbacks" name="feedbacks">Interactive Feedback</h2>
+<p>Enventor has the following ways of providing interactive feedback information while you edit the EDC source code:</p>
+
+<ul>
+<li>Highlight a part object.
+<p>To easily identify the part object that you modify, Enventor provides a function for highlighting the preview image corresponding to a part object. Click a part section in the EDC source code and the preview image corresponding to the part object in the live view gets highlighted.</p></li>
+
+<li>Preview an image file.
+<p>To easily check the image file you use, Enventor provides a function for previewing images files. Write the image keyword and an image file name in the EDC source code and click the image keyword. The preview image pop-up of the clicked image file appears. If other image files are written in the previous or next line of the previewed image file, you can change the preview image by with the arrow keys or scrolling.</p></li>
+
+<li>Execute a program action.
+<p>To easily check the action of a program, Enventor provides a function executing a program action. Click in a program in the EDC source code, the code is executed. If the executed code changes the layout, the changes are applied to the live view.</p></li>
+
+<li>Detect errors.
+<p>To quickly notify ab EDC grammar error, Enventor compiles the EDC source code and detects the errors whenever you save the modified EDC source code. The detected errors are printed in the console view. You can change the size of the console view by dragging the pane divider between the live and text views and the console view. Moreover, you can toggle the console view visibility with the <strong>Console</strong> button in the toolbar.</p></li>
+
+<li>View status information.
+<p>The status bar shows the size of the live view and the absolute coordinates and relative coordinates of the cursor in the live view. The status bar also shows the group name and the line number of the cursor in the text view. In addition, the status bar prints out the saving message with the file path. You can toggle the status bar visibility with the <strong>Status</strong> button in the toolbar.</p></li>
+</ul>
+
+<h2 id="tools" name="tools">Tool Functions</h2>
+<p>Enventor provides useful tool functions. The following table shows the toolbar buttons at the top of the Enventor window and their functions.</p>
+
+<table>
+<caption>Table: Tool buttons and their functions</caption>
+<colgroup> 
+<col width="15%" /> 
+<col width="15%" /> 
+<col width="70%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th colspan="2">Button</th> 
+<th>Function</th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Save" src="../images/enventor_save.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Save</p></td> 
+<td rowspan="1" colspan="1"><p>Save a file.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Undo" src="../images/enventor_undo.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Undo</p></td> 
+<td rowspan="1" colspan="1"><p>Undo text changes.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Redo" src="../images/enventor_redo.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Redo</p></td> 
+<td rowspan="1" colspan="1"><p>Redo text changes.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Highlight" src="../images/enventor_highlight.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Highlight</p></td> 
+<td rowspan="1" colspan="1"><p>Add or remove the part object highlighting in the live view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Swallow" src="../images/enventor_swallow.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Swallow</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide virtual images to visualize SWALLOW part objects in the live view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="LiveEdit" src="../images/enventor_liveedit.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>LiveEdit</p></td> 
+<td rowspan="1" colspan="1"><p>Add or remove the LiveEdit function.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Lines" src="../images/enventor_lines.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Lines</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the line numbers in the text view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Find" src="../images/enventor_find.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Find</p></td> 
+<td rowspan="1" colspan="1"><p>Find the given word.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Goto" src="../images/enventor_goto.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Goto</p></td> 
+<td rowspan="1" colspan="1"><p>Go to the given line in the text view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Console" src="../images/enventor_console.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Console</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the console view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Status" src="../images/enventor_status.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Status</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the status bar.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="Setting" src="../images/enventor_setting.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>Setting</p></td> 
+<td rowspan="1" colspan="1"><p>Show the configure setting window.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p style="text-align:center;"><img alt="About" src="../images/enventor_about.png" /></p> </td> 
+<td rowspan="1" colspan="1"><p>About</p></td> 
+<td rowspan="1" colspan="1"><p>Show shortcut keys.</p></td> 
+</tr>
+</tbody>
+</table>
+
+<h2 id="shortcuts" name="shortcuts">Shortcut Keys</h2>
+<p>Enventor supports various shortcut keys. The following table shows the shortcut keys and their functions.</p>
+
+<table>
+<caption>Table: Shortcut keys</caption>
+<colgroup> 
+<col width="25%" /> 
+<col width="75%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>Shortcut Key</th> 
+<th>Function</th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p>Esc</p></td> 
+<td rowspan="1" colspan="1"><p>Close the menu.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F1</p></td> 
+<td rowspan="1" colspan="1"><p>Show shortcut keys.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F3</p></td> 
+<td rowspan="1" colspan="1"><p>Save the file.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F5</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the line numbers.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F9</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the tool bar.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F10</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the console view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F11</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide the status bar.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>F12</p></td> 
+<td rowspan="1" colspan="1"><p>Show the configuration setting window.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + S</p></td> 
+<td rowspan="1" colspan="1"><p>Quick save and compile EDC.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + I</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable auto indentation.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + O</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable auto completion.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + W</p></td> 
+<td rowspan="1" colspan="1"><p>Show or hide virtual images to visualize SWALLOW part objects.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + H</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable part object highlighting.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Left</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable full text view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Right</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable full live view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Up</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable full console view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Down</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable full live/text view.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + T</p></td> 
+<td rowspan="1" colspan="1"><p>Insert default template code.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + E</p></td> 
+<td rowspan="1" colspan="1"><p>Enable or disable LiveEdit function.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Mouse wheel up</p></td> 
+<td rowspan="1" colspan="1"><p>View scale up/bigger font size.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Mouse wheel down</p></td> 
+<td rowspan="1" colspan="1"><p>View scale down/smaller font size.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Shift + B</p></td> 
+<td rowspan="1" colspan="1"><p>Insert part template code: Textblock.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Shift + I</p></td> 
+<td rowspan="1" colspan="1"><p>Insert part template code: Image.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Shift + R</p></td> 
+<td rowspan="1" colspan="1"><p>Insert part template code: Rectangle.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Shift + T</p></td> 
+<td rowspan="1" colspan="1"><p>Insert part template code: Text.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Shift + S</p></td> 
+<td rowspan="1" colspan="1"><p>Insert part template code: Spacer.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Shift + W</p></td> 
+<td rowspan="1" colspan="1"><p>Insert part template code: Swallow.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + A</p></td> 
+<td rowspan="1" colspan="1"><p>Select all the text.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Double Click</p></td> 
+<td rowspan="1" colspan="1"><p>Select the word.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Z</p></td> 
+<td rowspan="1" colspan="1"><p>Undo text changes.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + R</p></td> 
+<td rowspan="1" colspan="1"><p>Redo text changes.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + C</p></td> 
+<td rowspan="1" colspan="1"><p>Copy selected text.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + V</p></td> 
+<td rowspan="1" colspan="1"><p>Paste copied text.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + X</p></td> 
+<td rowspan="1" colspan="1"><p>Cut selected text.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + D</p></td> 
+<td rowspan="1" colspan="1"><p>Delete a current line.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + F</p></td> 
+<td rowspan="1" colspan="1"><p>Find and replace the given word.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + L</p></td> 
+<td rowspan="1" colspan="1"><p>Go to the given line.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + Home</p></td> 
+<td rowspan="1" colspan="1"><p>Go to the top line.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>Ctrl + End</p></td> 
+<td rowspan="1" colspan="1"><p>Go to the bottom line.</p></td> 
+</tr>
+</tbody>
+</table>
+
+<h2 id="conf" name="conf">Configuration Setting</h2>
+
+<p>The configuration setting allows you to set and control Enventor properties.</p>
+<p>You can set each file path that your EDC source code uses, respectively.</p>
+<p>You can also control the font size and view scale using the sliders in the setting preferences. If you increase or decrease the font size, the font size of EDC source code in the text view is changed. The view scale means the scale factor of your layout. If you change the view scale, the scale factor is applied to your layout and the preview images are newly generated with the modified scale factor.</p>
+<p>Additionally, you can control the tool functions.</p>
+
+<p class="figure">Figure: Configuration Setting window</p> 
+<p style="text-align:center;"><img alt="Configuration Setting window" src="../images/enventor_settings_window.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
new file mode 100644 (file)
index 0000000..69a7658
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
@@ -0,0 +1,363 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Additional Manifest Text Editor Elements</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#appcontrol">&lt;app-control&gt; Element</a>
+                       </li>
+                       <li><a href="#datacontrol">&lt;data-control&gt; Element</a>
+                       </li>
+                       <li><a href="#icon">&lt;icon&gt; Element</a>
+                       </li>
+                       <li><a href="#label">&lt;label&gt; Element</a>
+                       </li>
+                       <li><a href="#metadata">&lt;metadata&gt; Element</a>
+                       </li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Additional Manifest Text Editor Elements</h1> 
+       
+       <h2 name="appcontrol" id="appcontrol">&lt;app-control&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;app-control&gt;</span> element represents Tizen application control configuration information.</p>
+
+<table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;app-control&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+         <p><strong>Expected children:</strong> </p>      
+           <table border="1" id="feature"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+     <th>Occurrences</th> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#operation">&lt;operation&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#uri">&lt;uri&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#mime">&lt;mime&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+</tbody></table>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="operation"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;operation&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Operation type of the application control.</p>
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+<table border="1" id="uri"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;uri&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>URI scheme of the application control.</p>
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+<li>URI scheme string</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="mime"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;mime&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>MIME type of the application control.</p>
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+<li>MIME type string</li> 
+      </ul>
+</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;/app-control&gt;
+</pre>
+
+ <h2 name="datacontrol" id="datacontrol">&lt;datacontrol&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element represents configuration information for the Tizen data controls.</p>
+
+<table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Set of 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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+       <li><a href="#providerid"><span style="font-family: Courier New,Courier,monospace">providerid</span></a></li>
+       <li><a href="#access"><span style="font-family: Courier New,Courier,monospace">access</span></a></li>
+       <li><a href="#type"><span style="font-family: Courier New,Courier,monospace">type</span></a></li></ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="providerid"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">providerid</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>ID of the data control provider.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+         <li>String</li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="access"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">access</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Access mode of the data control.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>String</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="type"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">type</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Type of the data control.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>String</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<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>
+
+  <h2 name="icon" id="icon">&lt;icon&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element represents the icon relative or absolute file path for the Tizen application.</p>
+
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Represents the icon relative or absolute file path.</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> 
+      </ul>
+</td> 
+    </tr>
+  <tr>
+   <td>
+<p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>Icon path</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;icon&gt;testicon.png&lt;/icon&gt;
+</pre>
+
+
+  <h2  name="label" id="label">&lt;label&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;label&gt;</span> element represents the label value for the Tizen application.</p>
+
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;label&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+</td> 
+    </tr>
+  <tr>
+   <td>
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+<li><a href="#section"><span style="font-family: Courier New,Courier,monospace">xml:lang</span></a></li>
+      </ul>
+<p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>Label value in string</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="section"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">xml:lang</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Language of the label.</p>
+         <p><strong>Expected value:</strong> </p>      
+          <ul>
+<li><span style="font-family: Courier New,Courier,monospace">&quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<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;
+</pre>
+
+<h2  name="metadata" id="metadata">&lt;metadata&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;metadata&gt;</span> element represents user-defined key-value pairs for the application.</p>
+
+<table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;metadata&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+       <li><a href="#key"><span style="font-family: Courier New,Courier,monospace">key</span></a></li>
+       <li><a href="#value"><span style="font-family: Courier New,Courier,monospace">value</span></a></li></ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="key"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">key</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Key of metadata.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+         <li>String</li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="value"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">value</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Value of metadata.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>String</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
new file mode 100644 (file)
index 0000000..c60f47b
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
@@ -0,0 +1,1184 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Manifest Text Editor</title> 
+ </head> 
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#hierarchy">Manifest Element Hierarchy</a></li>                    
+                       <li><a href="#manifest">&lt;manifest&gt; Element</a></li>               
+                       <li><a href="#author">&lt;author&gt; Element</a></li>
+                       <li><a href="#description">&lt;description&gt; Element</a></li>
+                       <li><a href="#service">&lt;service-application&gt; Element</a></li>
+                       <li><a href="#ui">&lt;ui-application&gt; Element</a></li>
+                       <li><a href="#account">&lt;account&gt; Element</a></li>
+                       <li><a href="#privileges">&lt;privileges&gt; Element</a></li>
+                       <li><a href="#feature">&lt;feature&gt; Element</a></li>                 
+               </ul>
+       </div></div>
+</div> 
+<div id="container"><div id="contents"><div class="content">
+ 
+  <h1>Manifest Text Editor</h1> 
+    <p>A Tizen native application package consists of exactly 1 manifest file, called <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span>. 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  <span style="font-family: Courier New,Courier,monospace;">&lt;version&gt;</span>, and <span style="font-family: Courier New,Courier,monospace;">&lt;privileges&gt;</span>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>.</p>
+<p>The manifest file information can be edited using the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm#manifest">manifest editor</a>, or you can modify the XML structure directly using the text editor. To open the manifest editor, double-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the text editor, right-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view and select <strong>Open with &gt; Text Editor</strong>.</p>
+
+<table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">The <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> 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.</td> 
+      </tr>
+</tbody></table>
+<p>The following example illustrates the content and structure of a <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
+<pre class="prettyprint">
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
+&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;org.tizen.uiapp&quot; version=&quot;1.0.0&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;author email=&quot;email@email.com&quot; href=&quot;http://test.com&quot;&gt;author&lt;/author&gt;
+&nbsp;&nbsp;&nbsp;&lt;description&gt;testdescriptions&lt;/description&gt;
+&nbsp;&nbsp;&nbsp;&lt;description xml:lang=&quot;en-gb&quot;&gt;testdesc&lt;/description&gt;
+&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.uiapp&quot; auto-restart=&quot;false&quot; exec=&quot;uiapp&quot; multiple=&quot;false&quot; nodisplay=&quot;false&quot; on-boot=&quot;true&quot; taskmanage=&quot;true&quot; type=&quot;capp&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;uiapplication&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;testlang&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;uiapp.png&lt;/icon&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/dial&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/vnd.ms-excel&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/app-control&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datacontrol access=&quot;ReadOnly&quot; providerid=&quot;http://uiapp.com/datacontrol/provider/uiapp&quot; type=&quot;Sql&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
+&nbsp;&nbsp;&nbsp;&lt;account&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;uiapp.png&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;accountSmall&quot;&gt;uiapp.png&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;eng_Text&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;default_Text&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/calendar&lt;/capability&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/account-provider&gt;
+&nbsp;&nbsp;&nbsp;&lt;/account&gt;
+&nbsp;&nbsp;&nbsp;&lt;privileges&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/account.write&lt;/privilege&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/bookmark.admin&lt;/privilege&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/application.admin&lt;/privilege&gt;
+&nbsp;&nbsp;&nbsp;&lt;/privileges&gt;
+&nbsp;&nbsp;&nbsp;&lt;feature name=&quot;http://tizen.org/feature/camera.front.flash&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;feature name=&quot;http://tizen.org/feature/data.encryption&quot;/&gt;
+&lt;/manifest&gt;
+</pre>
+
+
+<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 <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</p> 
+  
+  <table style="border:none;">
+<col width="10%"/>
+<col width="10%"/>
+<col width="10%"/>
+<col width="10%"/>
+<col width="10%"/>
+<col width="10%"/>
+<col width="40%"/>
+<tbody>
+<tr>
+<td colspan="7" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#manifest">&lt;manifest&gt;</a></span></td>
+       </tr>
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
+       </tr>
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
+       </tr>
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#service">&lt;service-application&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#operation">&lt;operation&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#uri">&lt;uri&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#mime">&lt;mime&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#ui">&lt;ui-application&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#operation">&lt;operation&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#uri">&lt;uri&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#mime">&lt;mime&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#account">&lt;account&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#accountprovider">&lt;account-provider&gt;</a></span>
+               </td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="3" style="border:none;"></td>
+               <td colspan="4" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#capability">&lt;capability&gt;</a></span>
+</td>
+       </tr>
+       
+       
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#privileges">&lt;privileges&gt;</a></span>
+</td>
+       </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+               <td colspan="5" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#privilege">&lt;privilege&gt;</a></span>
+               </td>
+       </tr>
+<tr>
+<td style="border:none;"></td>
+               <td colspan="6" style="border:none;">
+               <span style="font-family: Courier New,Courier,monospace"><a href="#feature">&lt;feature&gt;</a></span>
+</td>
+       </tr>
+</tbody>
+</table>
+
+  <h2 name="manifest" id="manifest">&lt;manifest&gt; Element</h2> 
+  <p>The <span style="font-family: Courier New,Courier,monospace">&lt;manifest&gt;</span> element is an easily readable description of the Tizen package and serves as a container for the other elements of the configuration document.</p> 
+
+ <table border="1"><tbody>
+<tr id="manifest_element" name="manifest_element">
+<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;manifest&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Manifest information of the Tizen native 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>
+                 <ul>
+<li><p>1</p></li> 
+          </ul>
+<p><strong>Expected children (in the following order):</strong> </p> 
+                 <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+                                       <th>Occurrences</th> 
+                               </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td> 
+                                       <td>1 (optional)</td> 
+                               </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td> 
+                                       <td>1 or more (optional)</td> 
+                               </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#service">&lt;service-application&gt;</a></span></td> 
+                                       <td>1 (optional)</td> 
+                               </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#ui">&lt;ui-application&gt;</a></span></td> 
+                                       <td>1 (optional)</td> 
+                               </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#account">&lt;account&gt;</a></span></td>
+                                       <td>1 (optional)</td>
+                               </tr>
+                                       <tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#privileges">&lt;privileges&gt;</a></span></td> 
+                                       <td>1 (optional)</td> 
+                                       </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#feature">&lt;feature&gt;</a></span></td> 
+                                       <td>1 or more (optional)</td> 
+                               </tr>
+</tbody></table>
+<p id="attributes"><strong>Attributes:</strong></p>
+               <ul>
+<li><p><span style="font-family: Courier New,Courier,monospace"><a href="#installlocation">install-location</a></span></p></li> 
+<li><p><span style="font-family: Courier New,Courier,monospace"><a href="#package">package</a></span></p></li> 
+<li><p><span style="font-family: Courier New,Courier,monospace"><a href="#packagetype">type</a></span></p></li> 
+<li><p><span style="font-family: Courier New,Courier,monospace"><a href="#version">version</a></span></p></li> 
+<li><p><span style="font-family: Courier New,Courier,monospace"><a href="#apiversion">api-version</a></span></p></li> 
+        </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="installlocation"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">install-location</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Installation location for the application.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li>One of the following values: <span style="font-family: Courier New,Courier,monospace">&quot;auto&quot;</span>, <span style="font-family: Courier New,Courier,monospace">&quot;internal-only&quot;</span>, <span style="font-family: Courier New,Courier,monospace">&quot;prefer-external&quot;</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="package"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">package</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Package of the application.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li><span style="font-family: Courier New,Courier,monospace">&quot;org.tizen.applicationName&quot;</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="packagetype"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">type</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Package type of the application.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li>One of the following values: <span style="font-family: Courier New,Courier,monospace">&quot;rpm&quot;</span>, <span style="font-family: Courier New,Courier,monospace">&quot;tpk&quot;</span>, <span style="font-family: Courier New,Courier,monospace">&quot;wgt&quot;</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="version"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">version</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Version number of the application.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li>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</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="apiversion"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">api-version</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>API version number for the application.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li>Number in the &quot;x.y&quot; format</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<p><strong>For example:</strong> </p> 
+   <pre class="prettyprint">
+&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;org.tizen.uiapp&quot; version=&quot;1.0.0&quot;  api-version=&quot;2.3.0&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;author email=&quot;email@email.com&quot; href=&quot;http://test.com&quot;&gt;author&lt;/author&gt;
+&nbsp;&nbsp;&nbsp;&lt;description&gt;.....&lt;/description&gt;
+&nbsp;&nbsp;&nbsp;&lt;ui-application&gt;.....&lt;/ui-application&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&gt;</pre>
+
+  <h2 name="author" id="author">&lt;author&gt; Element</h2> 
+  <p>The <span style="font-family: Courier New,Courier,monospace">&lt;author&gt;</span> element represents the creator of the Tizen package. This element has no child elements.</p>
+
+ <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;author&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>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> 
+          </ul>
+
+    
+<p><strong>Attributes:</strong></p>
+               <ul>
+<li><p><a href="#authoremail"><span style="font-family: Courier New,Courier,monospace">email</span></a></p></li>
+<li><p><a href="#authorwebsite"><span style="font-family: Courier New,Courier,monospace">href</span></a></p></li>
+</ul></td> </tr>
+</tbody></table>
+
+
+<table border="1" id="authoremail"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">email</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Email of the package creator.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li>Any valid email ID string value</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="authorwebsite"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">href</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Web site of the package creator.</p>
+    <p><strong>Expected value:</strong> </p> 
+    <ul>
+<li>Any valid Web site string value</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<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> 
+
+  <h2 name="description" id="description">&lt;description&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;description&gt;</span> element represents the Tizen package description. The element has not child elements.</p>
+
+  <table border="1"><tbody>
+<tr id="description_element" name="description_element">
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;description&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+
+         <p><strong>Attributes:</strong> </p>      
+         <ul>
+<li><a href="#xmllang"><span style="font-family: Courier New,Courier,monospace">xml:lang</span></a></li>
+      </ul>
+<p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>Description value in string</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="xmllang"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">xml:lang </span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Language and country code.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">&quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<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;
+</pre>
+
+  <h2 name="service" id="service">&lt;service-application&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;service-application&gt;</span> element represents the manifest information of a Tizen native application without a graphical user interface (GUI).</p>
+
+
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;service-application&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Manifest information of a Tizen native service 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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+<p><strong>Expected children (in the following order):</strong> </p>      
+           <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+     <th>Occurrences</th> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+</tbody></table>
+<p><strong>Attributes:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace"><a href="#appid">appid</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#exec">exec</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#multiple">multiple</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#taskmanage">taskmanage</a></span></li>
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#type">type</a></span></li>
+          <li><span style="font-family: Courier New,Courier,monospace"><a href="#auto-restart">auto-restart</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#on-boot">on-boot</a></span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="appid"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">appid</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Application unique ID. This can be used at launching or terminating the application explicitly. </p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">String</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="exec"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">exec</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Application executable file path.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">String</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="multiple"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">multiple</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application can be launched as multiple.</p>
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">false</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+<table border="1" id="taskmanage"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">taskmanage</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is shown in the task manager.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">false</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+
+<table border="1" id="type"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">type</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Tizen application type.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">capp</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">c++app</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">webapp</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+<table border="1" id="auto-restart"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">auto-restart</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is relaunched automatically if it is terminated abnormally.</p>
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="on-boot"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is launched automatically on device booting time or application installation time.</p>
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+<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; 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;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;mime name=&quot;application/pdf&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;testuristring&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;
+&lt;/service-application&gt;
+</pre>  
+  
+ <h2 name="ui" id="ui">&lt;ui-application&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;ui-application&gt;</span> element represents the manifest information of a Tizen native application with a graphical user interface (GUI).</p>
+
+
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;ui-application&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Manifest information of a Tizen native UI 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> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+<p><strong>Expected children (in the following order):</strong> </p>      
+           <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+     <th>Occurrences</th> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+</tbody></table>
+<p><strong>Attributes:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_appid">appid</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_exec">exec</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_multiple">multiple</a></span></li> 
+          <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_nodisplay">nodisplay</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_taskmanage">taskmanage</a></span></li>
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_type">type</a></span></li>
+          <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_auto-restart">auto-restart</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_on-boot">on-boot</a></span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_appid"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">appid</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Application unique ID. This can be used at launching or terminating the application explicitly. </p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">String</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_exec"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">exec</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Application executable file path.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">String</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_multiple"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">multiple</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application can be launched as multiple.</p>
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">false</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_nodisplay"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">nodisplay</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is shown in the app-tray.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">false</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_taskmanage"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">taskmanage</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is shown in the task manager.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">false</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+<table border="1" id="ui_type"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">type</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Tizen application type.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">capp</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">c++app</span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace">webapp</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+<table border="1" id="ui_auto-restart"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">auto-restart</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is relaunched automatically if it is terminated abnormally.</p>
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_on-boot"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is launched automatically on device booting time or application installation time.</p>
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">&lt;ui-application appid=&quot;org.tizen.uiapp&quot; auto-restart=&quot;false&quot; exec=&quot;uiapp&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; on-boot=&quot;true&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; providerid=&quot;http://uiapp.com/datacontrol/provider/uiapp&quot; type=&quot;Sql&quot;/&gt;
+&lt;/ui-application&gt;
+</pre>  
+
+  
+  <h2 name="account" id="account">&lt;account&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;account&gt;</span> element represents user account and account provider-related information in the Tizen application.</p>
+
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;account&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>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> 
+      <ul>
+<li>1 (optional)</li> 
+      </ul>
+<p><strong>Expected children:</strong> </p>      
+           <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+     <th>Occurrences</th> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#accountprovider">&lt;account-provider&gt;</a></span></td> 
+     <td>1 or more</td> 
+    </tr>
+</tbody></table>
+</td> 
+    </tr>
+</tbody></table>
+<h3 id="accountprovider">&lt;account-provider&gt; Element</h3>
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;account-provider&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Specific service provider or user account protocol-related information.</p> <p>
+         </p>
+<p><strong>Expected children:</strong> </p>      
+           <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+     <th>Occurrences</th> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td> 
+     <td>1 or more</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span></td> 
+     <td>1 or more</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#capability">&lt;capability&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+</tbody></table>
+<p><strong>Attributes:</strong> </p>      
+         <ul>
+               <li><span style="font-family: Courier New,Courier,monospace"><a href="#account_appid">appid</a></span></li> 
+               <li><span style="font-family: Courier New,Courier,monospace"><a href="#multipleaccountsupport">multiple-accounts-support</a></span></li> 
+               <li><span style="font-family: Courier New,Courier,monospace"><a href="#providerid">providerid</a></span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="account_appid"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">appid</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Application unique ID. This can be used at launching or terminating the application explicitly. </p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">String</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="multipleaccountsupport"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">multiple-accounts-support</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether multiple accounts are supported.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+          <li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="providerid"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">providerid</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>ID of the account provider. </p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li><span style="font-family: Courier New,Courier,monospace">String</span></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="icon"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Account provider icon image.</p>
+         <p><strong>Attributes:</strong> </p>      
+      <ul>
+<li><span style="font-family: Courier New,Courier,monospace"><a href="#section">section</a></span></li> 
+      </ul>
+<p><strong>Expected value:</strong> </p>      
+      <ul>
+<li>Icon file name</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="section"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">section</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Usage information of the icon image.</p>
+         <p><strong>Expected value:</strong> </p>      
+         <ul>
+<li>
+<span style="font-family: Courier New,Courier,monospace">account</span> (image size: 72 x 72 for density xhigh and 48 x 48 for density high)</li>
+          <li>
+<span style="font-family: Courier New,Courier,monospace">accountSmall</span> (image size: 45 x 45 for density xhigh and 30 x 30 for density high)</li>
+     </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="capability"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;capability&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Account provider capability.</p>
+         <p><strong>Expected value:</strong> </p>      
+      <ul>
+<li>IRI string</li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;account&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;uiapp.png&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;accountSmall&quot;&gt;uiapp.png&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;eng_Text&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;default_Text&lt;/label&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&gt;
+</pre>
+
+                <h2 name="privileges" id="privileges">&lt;privileges&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;privileges&gt;</span> element represents required privileges for the Tizen application.</p>
+
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;privileges&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Set of required privileges for 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> 
+      <ul>
+<li>1 (optional)</li> 
+      </ul>
+<p><strong>Expected children:</strong> </p> 
+  <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th> 
+     <th>Occurrences</th> 
+    </tr>
+<tr>
+<td><a href="#privilege"><span style="font-family: Courier New,Courier,monospace">&lt;privilege&gt;</span></a></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+</tbody></table>
+</td> 
+    </tr>
+</tbody></table>
+  <table border="1" id="privilege"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;privilege&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Required privilege for the Tizen application.</p> <p><strong>Occurrences:</strong> </p> 
+      <ul>
+<li>1 or more (optional)</li> 
+      </ul>
+<p><strong>Expected value:</strong> </p> 
+<p>For example:</p>     
+         <ul>
+         <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.admin</span></li>
+      <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span></li>
+      <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span></li>
+
+      </ul>
+<p>For more information on the expected values, see <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#native">Security and API Privileges</a>.</p> 
+</td> 
+    </tr>
+</tbody></table>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">&lt;privileges&gt;
+&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/application.admin&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/account.read&lt;/privilege&gt;
+&lt;/privileges&gt;
+</pre>
+
+               <h2 id="feature">&lt;feature&gt; Element</h2> 
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> element represents the list of required features for feature-based filtering in the Tizen Store. This element has no child elements.</p>
+  <table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> element</th> 
+    </tr>
+<tr>
+<td> <p>Required feature for feature-based filtering in the Tizen Store.</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> 
+      </ul>
+<p><strong>Attributes:</strong> </p>      
+         <ul>
+<li><a href="#name"><span style="font-family: Courier New,Courier,monospace">name</span></a></li> 
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="name"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">name</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Item name used in feature-based filtering in the Tizen Store.</p>
+<p><strong>Expected value:</strong> </p>      
+<p>For example:</p>
+         <ul>
+    <li><span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/feature/camera&quot;</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/feature/fmradio&quot;</span></li>
+      </ul>
+<p>For more information on the expected values and the application filtering mechanism, see <a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#native">Feature Filtering for Native Applications</a>.</p>
+         </td> 
+    </tr>
+</tbody></table>
+
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;feature name=&quot;http://tizen.org/feature/camera&quot;/&gt;
+&lt;feature name=&quot;http://tizen.org/feature/fmradio&quot;/&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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/po_file_editor_n.htm b/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
new file mode 100644 (file)
index 0000000..d0aea7f
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>PO File Editor</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+<h1>PO File Editor</h1> 
+       <p>PO file editor is used to edit <span style="font-family: Courier New,Courier,monospace">.po</span> files to generate compiled gettext <span style="font-family: Courier New,Courier,monospace">.mo</span> files, which are used by Tizen native applications to localize the user interface.</p>
+
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">There is no specific wizard to create <span style="font-family: Courier New,Courier,monospace">.po</span> files. To create a <span style="font-family: Courier New,Courier,monospace">.po</span> file,  go to <strong>New &gt; Other &gt; General &gt; File</strong> and save the file with the extension <span style="font-family: Courier New,Courier,monospace">.po</span>.</td> 
+      </tr>
+</tbody></table>
+
+<p>To open the PO file editor, double-click the <span style="font-family: Courier New,Courier,monospace">.po</span> file in the Project Explorer.</p>
+
+<p class="figure">Figure: PO file editor</p> 
+<p style="text-align:center;"><img alt="PO file editor" src="../images/po_file_editor1.png" /></p> 
+
+    <p>To add a new message, click <strong>+Msg</strong>. A new row is added in the message table.</p>
+
+    <p>To remove a message, click <strong>-Msg</strong>. Select an item to be removed in the <strong>Remove Messages</strong> dialog.</p>
+<p class="figure">Figure: Removing messages</p> 
+<p style="text-align:center;"><img alt="Removing messages" src="../images/po_file_editor2.png" /></p> 
+
+<p>To add a language, click <strong>+Lang</strong>. Select a language code item in the <strong>Add Languages</strong> dialog.</p>
+       
+<p class="figure">Figure: Adding languages</p> 
+<p style="text-align:center;"><img alt="Adding languages" src="../images/po_file_editor3.png" /></p> 
+
+<p>To remove a language, click <strong>-Lang</strong>. Select a message ID in the <strong>Remove Languages</strong> dialog.</p>
+
+
+<p class="figure">Figure: Removing languages</p> 
+<p style="text-align:center;"><img alt="Removing languages" src="../images/po_file_editor4.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/project_wizard_n.htm b/org.tizen.devtools/html/native_tools/project_wizard_n.htm
new file mode 100644 (file)
index 0000000..baa534e
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/project_wizard_n.htm
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Project Wizard </title> 
+ </head> 
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+
+  <h1>Project Wizard</h1> 
+  <p>The Tizen native Project Wizard is an IDE tool that is used to create a native application project. 
+        It allows you to define the application type and requirements and <a href="#comp">components</a>.</p>
+  <p>The Tizen IDE 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, which the Tizen native Project Wizard uses to automatically create basic functionalities for the native application. The default project files and folders are also created.</p>
+  <p>The following project templates are available:</p> 
+  <ul> 
+   <li><strong>UI Application</strong>
+   <p>This template is suitable for creating a UI application with project files. </p></li> 
+   
+   <li><strong>Service Application</strong> 
+  <p>This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with a UI application.</p></li> </ul>
+  
+  
+  
+   <h2 name="comp" id="comp">Project Components</h2> 
+  <p>On the main page of the Tizen native Project Wizard, you can set basic properties of a project, such as the project name, package name, location, sample, and template.</p> 
+  
+  <p class="figure" style="text-align: center;">Figure: Project Components </p>
+  <p style="text-align:center;"><img alt="Project Component" src="../images/proj_component.png"/></p>
+  
+  <p>The options you can set are listed in the following table.</p>
+  <table border="1"> 
+     <caption>
+       Table: Project component options 
+     </caption> 
+     <tbody> 
+      <tr> 
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">Option</th> 
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+      </tr> 
+      <tr> 
+       <td>Tab</td> 
+       <td>You can create an application based on a template or sample application.</td> 
+      </tr> 
+      <tr> 
+       <td>Category</td> 
+       <td>If the selected category has samples or templates, they are displayed in the list on the left.</td> 
+      </tr> 
+         <tr> 
+       <td>Application Type</td> 
+       <td>Select the application type. It can be previewed in the description view on the right.</td> 
+      </tr>
+         <tr> 
+       <td>Project name</td> 
+       <td>Enter the name for the project to be created. <p>The project names are restricted to the following regular expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.</p></td> 
+      </tr>
+      <tr> 
+       <td>Use default location</td> 
+       <td>If you check this option, the project is created in the <span style="font-family: Courier New,Courier,monospace">$&lt;workspace_location&gt;/$&lt;project_name&gt;</span> directory.</td> 
+      </tr>
+      <tr> 
+       <td>Location</td> 
+       <td>Manually select the location of the project. If you check Use default location, this option is disabled.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/static_analyzer_n.htm b/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
new file mode 100644 (file)
index 0000000..01d2add
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
@@ -0,0 +1,159 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Static Analyzer</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+                               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#run">Running the Static Analyzer</a>
+                       </li>
+                       <li><a href="#bugs">Detectable Bugs</a>
+                       </li>
+                       <li><a href="#view">Viewing Static Analyzer Results</a>
+                       </li>
+                       
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Static Analyzer</h1> 
+       <p>Tizen Static Analyzer is a source code analysis tool that finds bugs in Tizen applications:</p> 
+  <ul>
+<li>
+  <a href="#run">Running the Static Analyzer</a> <p>Describes how to launch the Tizen Static Analyzer with your application.</p>
+</li> 
+
+<li>
+ <a href="#bugs">Detectable Bugs</a> <p>Defines the types of bugs Tizen Static Analyzer can detect.</p>
+</li> 
+<li>
+  <a href="#view">Viewing Static Analyzer Results</a> <p>Describes the results analyzed by Tizen Static Analyzer.</p>
+</li> 
+  </ul>
+  
+  <h2 name="run" id="run">Running the Static Analyzer</h2> 
+       <p>To run a static analysis for your application:</p> 
+  <ol>
+<li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Check Potential Bugs with Build</strong>.</p>
+<p style="text-align:center;"><img alt="Running the Static Analyzer" src="../images/running_tizen_sa.png"/></p></li> 
+
+<li>View the analysis results in the <strong>Potential Bugs</strong> view on the right side. 
+<p style="text-align:center;"><img alt="Potential Bugs view" src="../images/tizen_sa_result.png"/></p>
+</li> 
+  </ol>
+  
+<p>You can also enable the LLVM Static Analyzer to be run during the build process. Change the setting in the project properties: <strong>Tizen SDK &gt; Static Analysis</strong>.</p> 
+ <p class="figure">Figure: Static analysis properties</p> 
+ <p style="text-align:center;"><img alt="Static analysis properties" src="../images/sa_property_page.png"/></p>
+ 
+ 
+ <h2 name="bugs" id="bugs">Detectable Bugs</h2> 
+       <p>Tizen Static Analyzer can detect bugs at compile time based on a set of predefined error conditions. The following table defines the set of bugs detectable by Tizen Static Analyzer.</p>
+
+<table border="1">
+<caption>Table: Detectable bugs</caption>
+  <tbody>
+<tr>
+<th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Bug</th>
+<th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+       </tr>
+<tr>
+<td><strong>Memory Mismanagement</strong></td>
+      <td>Detects memory leaks, double free, double delete, mismatched allocator/deallocator, and use-after free problems.</td>
+       </tr>
+<tr>
+<td><strong>Resource Mismanagement</strong></td>
+      <td>Detects dynamically-allocated resources, such as a file or socket that has not been closed or has been improperly handled.</td>
+       </tr>
+<tr>
+<td><strong>Out of bound access</strong></td>
+      <td>Detects out-of-bound access of an array at static time.</td>
+       </tr>
+<tr>
+<td><strong>Null Dereference</strong></td>
+      <td>Detects dereference of a null pointer.</td>
+       </tr>
+<tr>
+<td><strong>Divide by Zero</strong></td>
+      <td>Detects division by zero issues.</td>
+       </tr>
+<tr>
+<td><strong>Invalid Usage of C String API&#39;s</strong></td>
+      <td>Detects invalid access and usage of C string API&#39;s, such as passing a null pointer to strcpy.</td>
+       </tr>
+</tbody>
+</table>
+  
+ 
+ 
+ <h2 name="view" id="view">Viewing Static Analyzer Results</h2> 
+  <p>The Tizen Static Analyzer results are displayed in the <strong>Potential Bug</strong> view after the analysis is completed.</p> 
+  <p>The <strong>Potential Bug</strong> view opens automatically, when you make a build or check potential bugs. To open the Potential Bugs explicitly:</p>
+  <ol>
+<li>
+Go to <strong>Windows &gt; Show View &gt; Other</strong>.
+</li> 
+<li>
+Type <strong>Potential Bugs</strong>.
+</li> 
+<li>
+Select <strong>Potential Bugs</strong> and click <strong>OK</strong>.
+</li> 
+</ol>
+<p class="figure">Figure: Opening the Potential Bug view</p> 
+  <p style="text-align:center;"><img alt="Opening the Potential Bug view" src="../images/other_view.png"/></p> 
+  <p style="text-align:center;"><img alt="Opening the Potential Bug view" src="../images/potential_bug_select.png"/></p> 
+
+  <p>In the <strong>Potential Bug</strong> view, you can group the warnings based on type or file. You can also select any particular bug and expand it to see the complete flow, which resulted in the issue.</p> 
+  
+  <p class="figure">Figure: Static Analyzer Results</p> 
+  <p style="text-align:center;"><img alt="Static Analyzer Results" src="../images/potential_bug_result.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.devtools/html/native_tools/tools_n.htm b/org.tizen.devtools/html/native_tools/tools_n.htm
new file mode 100644 (file)
index 0000000..bedacd6
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/tools_n.htm
@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Tools</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+
+<div id="container"><div id="contents"><div class="content">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+    </div>
+       
+ <h1>Native Tools</h1>
+
+ <p>The Tizen SDK provides the following set of tools for mobile native application development:</p>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<ul>
+    <li><strong>Application generation management tools</strong>
+    <ul>
+               <li><a href="project_wizard_n.htm">Project Wizard</a>  <p>This tool is used to create an application project.</p></li>
+       </ul></li>
+
+       <li><strong>Rule checking tools</strong>
+    <ul>
+               <li><a href="api_privilege_checker_n.htm">API and Privilege Checker</a> <p>This tool checks for API and privilege usage violations in the application code.</p></li>
+       </ul></li>
+       
+       <li><strong>Editor tools</strong>
+    <ul>       
+               <li><a href="content_assist_n.htm">Content Assist</a>
+               <p>This tool allows you to write quick and efficient code.</p></li>
+               <li><a href="manifest_text_editor_n.htm">Manifest Text Editor</a> <p>This tool allows you to edit the application manifest.</p></li>
+               
+               <li><a href="po_file_editor_n.htm">PO File Editor</a>  <p>This tool is used to edit <span style="font-family: Courier New,Courier,monospace">.po</span> files.</p></li>
+       </ul></li>      
+       <li><strong>UI building tools</strong>
+    <ul>       
+        <li><a href="uibuilder_n.htm">UI Builder</a>  <p>This WYSIWYG (What You See Is What You Get) design environment tool is used to create user interfaces.</p></li>
+       </ul></li>
+
+       <li><strong>UI editor tools</strong>
+    <ul>       
+        <li><a href="enventor_n.htm">Enventor</a>  <p>This tool provides a useful theme editor.</p></li>
+       </ul></li>      
+       <li><strong>Application running and testing tools</strong>
+    <ul>                       
+               <li><a href="command_line_interface_n.htm">Command Line Interface</a>  <p>This tool set allows you to develop Tizen native applications without the Tizen IDE.</p></li>
+       </ul></li>      
+       
+       <li><strong>Analysis and debugging tools</strong>
+    <ul>       
+               <li><a href="call_stack_view_n.htm">Call Stack View</a>  <p>This tool provides useful information for debugging application under crash situation.</p></li>
+               
+               <li><a href="da_overview_n.htm">Dynamic Analyzer</a>  <p>This tool monitors the performance of your application on a target device or Emulator.</p></li>
+               
+               <li><a href="static_analyzer_n.htm">Static Analyzer</a>  <p>This tool is used for source code analysis to finds bugs in Tizen applications.</p></li>
+               
+               <li><a href="valgrind_n.htm">Valgrind</a> <p>This memory profiling tool can be used to detect memory errors or memory leaks in an application.</p></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/uibuilder_n.htm b/org.tizen.devtools/html/native_tools/uibuilder_n.htm
new file mode 100644 (file)
index 0000000..04649e5
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/uibuilder_n.htm
@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+    <script type="text/javascript" src="../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+    <script 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 Builder</title>
+</head>
+
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+
+<h1>UI Builder</h1>
+
+<p>The Tizen native UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen native UIs by allowing you to arrange widgets using a drag-and-drop WYSIWYG (What You See Is What You Get) editor.</p>
+
+<p>The UI Builder supports a variety of UI widgets and <a href="#views">views and editors</a>.</p>
+
+<p>The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the UI Builder project.</p>
+
+<p class="figure">Figure: UI Builder</p>
+<p style="text-align:center;"><img alt="UI Builder" src="../images/ui_builder_1.png" /></p>
+
+
+<h2 id="views" name="views">Supported Views and Editors</h2>
+
+<p>The UI Builder supports the following views and editors:</p>
+
+
+                <h3 id="navigation_view" name="navigation_view">Navigation View</h3>
+                
+
+<p>The <strong>Navigation</strong> view displays thumbnail images of all the views in the currently selected project. If the <strong>Navigation</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Navigation</strong>.</p>
+
+<p class="figure">Figure: Navigation view</p>
+<p style="text-align:center;"><img alt="Navigation view" src="../images/navigation_001.png" /></p>
+
+<p>In the <strong>Navigation</strong> view, you can:</p>
+
+<ul class="ul"><li>Change the current view on the designer by clicking on the thumbnail.</li>
+<li>Re-order views by dragging them to the selected position.</li>
+<li>Create and delete view templates and views using the context menu:
+<ul class="ul">
+       <li>To add an empty view, right-click the view and select <strong>Add Empty View</strong>.</li>
+
+<li>To add a new view through a view template:
+
+<p style="text-align:center;"><img alt="Adding a view" src="../images/navigation_002.png" /></p>
+
+<ol>
+       <li>Right-click the view and select <strong>New</strong>.</li>
+       <li>Select a category.</li>
+       <li>Select a view template.</li>
+       <li>Insert a page ID.</li>
+       <li>Click <strong>Finish</strong>.</li>
+</ol>
+</li>
+
+       <li>To delete a selected view:
+               <ol>
+               <li>Right-click the view and select <strong>Delete</strong>.</li>
+               </ol>
+       </li>
+
+       <li>To create a new view template:
+<p style="text-align:center;"><img alt="Creating a template" src="../images/navigation_003.png" /></p>
+               <ol>
+               <li>Right-click the view and select <strong>Create Template</strong>.</li>
+               <li>Input a category.</li>
+               <li>Insert a view template name.</li>
+               <li>Click <strong>Finish</strong>.</li>
+               </ol>
+       </li>
+
+       <li>To set the startup view:
+               <ol>
+               <li>Right-click the view and select <strong>Set Startup View</strong>.</li>
+               </ol>
+       </li>
+</ul></li></ul>
+
+
+
+
+                <h3 id="outline" name="outline">Outline View</h3>
+              
+<p>The <strong>Outline</strong> view displays the hierarchical structure of the page currently open in the <strong>Page Designer</strong> view. If the <strong>Outline</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; General &gt; Outline</strong>.</p>
+
+<p class="figure">Figure: Outline view</p>
+<p style="text-align:center;"><img alt="Outline view" src="../images/native_app_outline_001.png" /></p>
+
+<p>In the  <strong>Outline</strong> view, you can manage widgets:</p>
+<ul class="ul">
+<li>Change the current view on the designer by selecting the view on the view combobox.</li>
+<li>Move a widget by dragging it to a new position.</li>
+<li>Change the widget ID in the context menu or by pressing the <strong>F2</strong> key. (The view ID cannot be changed.)</li>
+<li>Manage selected widgets by cutting, copying, pasting, and deleting them.</li>
+</ul>
+
+                <h3 id="properties" name="properties">Properties View</h3>
+
+<p>The <strong>Properties</strong> view displays the properties of the widget selected in the <strong>WYSIWYG Editor </strong>view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; General &gt; Properties</strong>.</p>
+
+<p>The <strong>Properties</strong> helps you to edit widget and events.</p>
+
+<p class="figure">Figure: Properties view</p>
+<p style="text-align:center;"><img alt="Properties view" src="../images/properties_1.png" width="420" height="349" /></p>
+
+<p>The <strong>Properties </strong>view consists of <strong>Attributes</strong>, and <strong>Event</strong> tabs:</p>
+<ul class="ul">
+<li><strong>Attributes</strong>
+<p>In the <strong>Attributes</strong> tab, you can edit widget attributes. Attributes are categorized into common (common widget properties) and widget specification (widget-specific properties) attributes. The widget specification attributes are divided into categories according to the widget attributes.</p>
+<ul class="ul">
+<li><strong>Common</strong>
+<p>The <strong>Common</strong> category only includes the ID attribute, which is the default widget identifier in the code.</p>
+</li>
+<li><strong>Widget specification</strong>
+<p>The <strong>Widget specification</strong> category includes all widget-specific attributes.</p>
+</li>
+</ul>
+<p style="text-align:center;"><img alt="Properties specification" src="../images/properties_specification_1.png" /></p>
+</li>
+<li><strong>Event</strong>
+<p>In the <strong>Event</strong> tab, you can create an event handler and bind it. If you click the <img alt="Forward" src="../images/properties_forward_1.png" width="24" height="25" /> button, the C editor opens. When the event handler function is focused, you can start writing code.</p>
+<p style="text-align:center;"><img alt="Properties view" src="../images/properties_go_to_1.png" /></p>
+</li>
+</ul>
+           
+                <h3 id="resources" name="resources">Resources View</h3>
+
+<p>The <strong>Resources</strong> view displays the resources in the selected project. If the <strong>Resources</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Resources</strong>.</p>
+<p class="figure">Figure: Resources view</p>
+<p style="text-align:center;"><img alt="Resources view" src="../images/resources.png" width="291" height="424" /></p>
+<p>The <strong>Resources</strong> view provides the following features:</p>
+<ul class="ul">
+<li>Resource management
+<p>You can copy, paste, delete, and rename resources.</p>
+</li>
+<li>Resource navigation
+<p>You can move files to child and parent folders.</p>
+</li>
+<li>Resource filter
+<p>You can filter the view to show resources of a particular name or extension.</p>
+</li>
+<li>Resource import
+<p>You can import files or folders.</p>
+</li>
+<li>Easy editing
+<p>You can edit the resource property of the widgets using drag and drop.</p>
+</li>
+</ul>
+         
+                <h3 id="wysiwyg" name="wysiwyg">WYSIWYG Editor</h3>
+
+                       
+<p>The <strong>WYSIWYG Editor</strong> view is a WYSIWYG (What You See Is What You Get) editor for the UI Builder project.</p>
+<p class="figure">Figure: WYSIWYG Editor</p>
+<p style="text-align:center;"><img alt="WYSIWYG Editor" src="../images/nuib_we_editor.png" /></p>
+<p>The <strong>WYSIWYG Editor</strong> view consists of the following parts:</p>
+<ul class="ul">
+<li>
+<p>Palette</p>
+<p>The palette contains EFL widgets, which you can select and add to the design area.</p>
+</li>
+<li>
+<p>Toolbar</p>
+<p>The toolbar supports the following functions:</p>
+<ul class="ul">
+<li>Select the view you want to edit using the view combo.
+<table>
+<tbody>
+<tr>
+<th>View button</th>
+<th>Description</th>
+</tr>
+<tr>
+<td><img alt="" src="../images/nuib_we_previous_0.png" width="21" height="21" /></td>
+<td>Move to the previous view.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/nuib_we_next_0.png" width="21" height="21" /></td>
+<td>Move to the next view.</td>
+</tr>
+</tbody>
+</table>
+</li>
+<li>Select the resolution of the design area using the <img alt="" src="../images/nuib_we_resolution.png" width="145" height="25" /> drop-down menu.</li>
+<li>Zoom within the design area.<br />
+<table>
+<tbody>
+<tr>
+<th>Zoom button</th>
+<th>Description</th>
+</tr>
+<tr>
+<td><img alt="" src="../images/nuib_we_zoomout_0.png" width="16" height="16" /></td>
+<td>Zoom out.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/nuib_we_zoomin_0.png" width="16" height="16" /></td>
+<td>Zoom in.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/nuib_we_max_0.png" width="16" height="16" /></td>
+<td>Maximize the design area on the screen.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/nuib_we_areasize_0.png" width="50" height="24" /></td>
+<td>Change the design area size to a predefined percentage value.</td>
+</tr>
+</tbody>
+</table>
+</li>
+</ul>
+</li>
+<li>
+<p>Design area</p>
+<p>You can work with widgets visually so that you can see what your application looks like as you build it.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        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>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/valgrind_n.htm b/org.tizen.devtools/html/native_tools/valgrind_n.htm
new file mode 100644 (file)
index 0000000..53154ce
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/valgrind_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Valgrind </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+   <h1>Valgrind</h1> 
+  <p>Valgrind is a memory profiling tool, which can detect memory errors or memory leaks in an application. The Valgrind tool consists of a core module and various debugging and profiling tools. For more information, see the <a href="http://valgrind.org/docs/manual/manual.html" target="_blank">Valgrind User Manual</a>. The Tizen SDK supports the following tools:</p> 
+  <ul> 
+   <li><strong>Memcheck</strong> <p>Default tool that detects memory errors, memory leaks, incorrect freeing of memory, and usage of undefined or uninitialized values.</p> </li> 
+   <li><strong>Massif</strong> <p>Heap memory profiler.</p> </li> 
+  </ul> 
+ 
+  <p>Tizen IDE provides the interface for <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#running_valgrind">running Valgrind with your application</a> easily. After performance profiling is terminated, you can see the <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#valgrind_result">profiling result</a> and use it for improving performance. </p>
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">You can only use Valgrind with the Emulator.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/scripts/common.js b/org.tizen.devtools/html/scripts/common.js
new file mode 100644 (file)
index 0000000..60250b6
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){
+       $('#contents table').each(function(){
+               if (!$(this).parent().hasClass('table')) {
+                       $(this).wrap('<div class="table"></div>');
+               }
+       });
+
+       // Lnb Menu Initialize
+       if($('div#contents').find('.lnb').length){
+               if($("ul li.events_news").size() > 0) {
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+               }
+               initLnb();
+               initScript(staticURL + "/js/fixednavbar.js", function(){});
+       }
+
+       //family site
+       if($('div#footer').find('dl#familySlider').length){
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+       }
+
+       // Svn Commit Test
+       
+       // Language Selection
+       if($('div#header').find('.util').length){
+               var $lang = $('div#header').find('.util');
+               $lang.find('a.lang').toggle(function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+                       },function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+                       });
+
+               $lang.bind('mouseleave',function(){
+                       $(this).find('ul.language').hide();
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+               });
+
+               $lang.find('ul.language').children().last().on("keydown", function(e) {
+                       if(e.which == 9 && e.shiftKey) {
+                               return true;
+                       }
+                       
+                       if(e.which == 9) {
+                               e.preventDefault();
+                               $lang.find('ul.language').hide();
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+                               setTimeout(function() {
+                                       $("#searchTop").focus();
+                               }, 1);
+                       }
+               });
+       }
+
+       // Open the Sitemap
+       var $open = $('div#header').find('.bt-open');
+       $open.bind('click',function(){
+               var $self = $(this);
+               var $sitemap = $('div#wrapper').find('div#sitemap');
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+               if($sitemap.is(':visible')){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+                       $self.attr('title','open sitemap');
+               }else{
+                       var source = $self.css('background-image').replace('.gif','_.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+                       $self.attr('title','close sitemap');
+               }
+               
+               $self.css('background-image',source);
+               $sitemap.slideToggle('fast');
+               
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       $self.css('background-image',source);
+                       $sitemap.slideToggle('fast');
+               });
+
+       });
+
+       // Search Auto Complete
+       var $search = $('div#header').find('fieldset.search');
+       var $searchList = $search.find('#topAutocomplete>ul');
+
+       if($search.length){
+               $search.find('> input').each(function(){
+                       $(this).bind({
+                               keydown : function(e){
+                       
+                                       if(e.type=='keydown'&& $(this).val().length!=0){
+                                               $search.find('#topAutocomplete').show();
+                                               var hei = $searchList.outerHeight();
+                                               if(hei>400){
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
+                                               }
+                                       }
+                                       if(e.keyCode==9){
+                                               $search.unbind('focusout.search');
+                                       }
+                                       if(e.keyCode==40){
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+                                               //window.scrollTo(0,0);
+                                       }
+                               },
+                               focusin : function(e){
+                                       if($(this).val()==='Search'){
+                                               $(this).val('');
+                                       }
+                               },
+                               focusout : function(e){
+                                       if($(this).val().length==0) $(this).val('Search');
+                               }
+                       });
+               });
+
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+               //      if(e.keyCode==40){
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
+               //      }
+               //});
+
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){
+                       if($search.find('> input').val().length==0){
+                               $search.find('> input').val('Search');
+                       }
+                       $search.find('#topAutocomplete').hide();
+               });
+
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
+                       $search.find('> input').val('Search');
+                       $search.find('#topAutocomplete').hide();
+                       
+                       //$search.bind('focusout.search', function(){
+                       //      $(this).find('> input').val('Search');
+                       //      $(this).find('#topAutocomplete').hide();
+                       //});
+               });
+       }
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+       var script = document.createElement("script");
+       script.type = "text/javascript";
+
+       if(script.readyState){ // 인터넷 익스플로러
+               script.onreadystatechange = function(){
+                       if(script.readyState=="loaded" || script.readyState=="complete"){
+                               script.onreadystatechange = null;
+                               callback();
+                       }
+               };
+       }else{  // 다른  브라우저
+               script.onload = function(){
+                       callback();
+               };
+       }
+
+       script.src = url;
+       document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+       var sMenu = $('.lnb');
+       var sItem = sMenu.find('>li');
+
+       sItem.each(function(){
+               if($(this).find('a').hasClass('more')){
+                       if($(this).find('ul').is(":visible")) {
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
+                       } else {
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+                       }
+               }
+       });
+       
+       var setIcoArrText = function(obj) {
+               if(obj.next().is(":visible")) {
+                       obj.text("close submenu");
+               } else {
+                       obj.text("open submenu");
+               }
+       }
+       
+       sItem.find('.ico-arr').on("click", function() {
+               var $that = $(this);
+               var liBox = $that.parent();   
+               var ulBox = $that.next();
+               
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+               
+               if(liBox.hasClass("on")) {
+                       if(ulBox.is(":visible")) {
+                               ulBox.hide();
+                               $that.addClass("ico-on");
+                       } else {
+                               ulBox.show();
+                               $that.removeClass("ico-on");
+                       }
+                       setIcoArrText($that);
+                       return true;
+               }
+               
+               if(liBox.hasClass("active")) {
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+                       ulBox.hide();
+               } else {
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");
+                       ulBox.show();
+               }
+               setIcoArrText($that);
+       });
+
+       sItem.hover(function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+               $(this).find("a").eq(0).addClass("bov");
+       },function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+                $(this).find("a").eq(0).removeClass("bov");
+
+       });
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+       // 롤링할 객체를 변수에 담아둔다.
+       var el = $('#'+container).find('#'+objectId);
+       var lastChild;
+       var speed = 3000;
+       var timer = 0;
+       var autoplay = false;
+
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
+       el.data('animating',false);
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
+
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
+
+       if(arguments.length==4){
+               el.data('autoStart', auto);
+       }
+
+       if(el.data('autoStart')){
+               if(timer==0){
+                       timer = setInterval(moveNextSlide, speed);
+                       autoplay = true;
+               }
+       }
+
+       el.bind({
+               mouseenter:function(){
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+       el.data('prev').bind({
+               click:function(e){
+                       e.preventDefault();
+                       movePrevSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+       el.data('next').bind({
+               click:function(e){
+                       e.preventDefault();
+                       moveNextSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       function movePrevSlide(){
+               if(!el.data('animating')){
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
+               
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+    function moveNextSlide(){
+               if(!el.data('animating')){
+                       el.data('animating',true);
+
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
+
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+}
+
+function fn_slide(options){
+
+       var opts = jQuery.extend({},options);
+
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
+       var auto = false;
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+       var time;
+
+
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
+       effect = opts.effect;
+       auto = opts.auto;
+
+       if(auto){
+               time = setTimeout('slideShow()',3000);
+       }
+
+       slideShow = function(){
+
+               if(current < len-1){
+                       current++;
+               }else{
+                       current=0;
+               }
+
+               controllStatus();
+
+               moveControl('next');
+
+               time = setTimeout('slideShow()',3000);
+       }
+
+       controllStatus = function(){
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+               if(current>0||current<len-1){                           
+                       $prev.show();
+                       $next.show();
+               }
+               if(current==0){
+                       $prev.hide();
+                       $next.show();
+               }
+               if(current>=len-1){
+                       $prev.show();
+                       $next.hide();
+               }
+       }
+
+       moveControl = function(msg){
+               if(opts.bt!=null){
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
+               }
+
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                       $obj.children().hide();
+                       $obj.children().eq(current).show();
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                       $obj.animate({'left':'-'+size*current},'slow');
+               }
+       }
+
+       $obj.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               }
+       });
+
+       //롤링 버튼 클릭시
+       $bt.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
+
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+                       controllStatus();
+
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                               $obj.children().hide();
+                               $obj.children().eq(current).show();
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                               $obj.animate({'left':'-'+size*current},'slow');
+                       }
+
+                       // 모든 롤링 버튼을 비활성화
+                       $bt.each(function(){
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');
+                                $(this).find('img').attr('src',source);
+                       });
+
+                       // 선택한 롤링버튼을 활성화
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+
+                       return false;
+               }
+       });
+
+       //이전 버튼 클릭시
+       $prev.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
+                       current--;                                                      //이미지 인덱스값 1씩 감소
+
+                       moveControl('prev');
+
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+                       return false;
+               }
+       });
+
+       //다음 버튼 클릭시
+       $next.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       current++;                                                      //이미지 인덱스값 1씩 증가
+                       
+                       moveControl('next');
+
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+                       return false;
+               }
+       });
+
+}
+
+// main rolling banner
+function slideMotion1(){
+       var $banner = $('#rolling .motionview'),
+               //$nav = $('#rolling ul.nav'),
+               banner = {prev:null, next:null},
+               size = $banner.children().length;
+               index = 1,
+               speed = 3000,
+               timer = null,
+               auto = true,
+               width = parseInt(100/size),
+               rest = parseInt(100%size);
+
+       var $nav = $('<ul class="nav">').insertAfter($banner);
+
+       $banner.children().each(function(index){
+               index++;
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+               if(index==size){
+                       $nav.children().eq(-1).find('a').css('background-image','none');
+               }
+       });
+
+       if(rest>0){
+               width+=rest;
+               $nav.children().eq(-1).css('width',width+'%');
+       }
+
+       $nav.delegate("li",'click',function(){
+               var idx = $nav.children().index(this);
+               index = idx;
+               banner.prev = $banner.find('a.active');
+               banner.next = $banner.find('a').eq(index);
+
+               clearInterval(timer);
+               auto = false;
+               
+               $nav.trigger('change.banner',banner)
+                       .trigger('change.tab',index);
+
+               return false;
+       });
+
+       $nav.bind('change.banner',function(event, banner){
+               aniMotion();
+       });
+
+       $nav.bind('change.tab',function(event, index){
+               $nav.children().find('a').removeClass('sel');
+               $nav.children().eq(index).find('a').addClass('sel');
+       });
+
+       timer = setInterval(autoMotion, speed);
+
+       function autoMotion(){
+               if(index > size-1) index = 0;
+
+               aniMotion();
+       }
+
+       function aniMotion(){
+               if(auto){
+                       banner.prev = $banner.find('a.active');
+                       banner.next = $banner.find('a').eq(index);
+
+                       $nav.children().find('a').removeClass('sel');
+                       $nav.children().eq(index).find('a').addClass('sel');
+               }
+               banner.prev.addClass('last-active');
+               banner.next.css({'opacity':0.0})
+                       .addClass('active')
+                       .animate({'opacity':1.0}, 1000, function(){
+                               banner.prev.removeClass('active last-active');
+
+                               if(auto){
+                                       index++;
+                               }else{
+                                       index++;
+                                       timer = setInterval(autoMotion, speed*1.5);
+                                       auto = true;
+                               }
+                       });
+       }
+}
+
+// forum list show or hide function
+function toggleFunc(){
+       
+       var defaulNum = [2];
+
+       $('.forum-tit').each(function(){
+               var self = $(this);
+
+               var idx = $('.forum-tit').index(this);
+
+               for(i=0;i<=defaulNum.length;i++){
+                       if(idx==defaulNum[i]){
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+                               self.find('a.toggle').css('background-image',source);
+
+                               self.find('a.toggle').text('Show');
+                               self.addClass('mb35').next().hide();
+                       }
+               }
+
+               self.find('a.toggle').click(function(){
+                       
+                       if(self.next().is(':visible')){
+                               var source = $(this).css('background-image').replace('.gif','_.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Show');
+                               self.addClass('mb35').next().hide();
+                       }else{
+                               var source = $(this).css('background-image').replace('_.gif','.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Hide');
+                               self.removeClass('mb35').next().show();
+                       }
+
+                       return false;
+
+               });
+
+       });
+}
+
+// 파일 업로드
+function fileUpload( width ){
+       //var $img = $('.attach input[type=image]');
+       //var width = $img.attr('width');
+
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+       var $file = $('.attach input.upload').css({
+               "position": "absolute",
+               "top": "0px",
+               "right": "0px",
+               "width": w,
+               "cursor": "pointer",
+               "opacity": "0.0",
+               "height": "23px"
+       });
+       $file.off('change');
+       $file.on('change',function(e){
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+                       return;
+               }
+               var idx = $file.index(this);
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+               var fileErrMsg = {
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+                           ,ext_ko : "지원하지 않는 확장자 입니다."
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"
+                           ,ext_en : "File extention not allowed for upload."
+               };
+               var initFileInput = function(obj) {
+                       $(obj).parent().find('input.file').val("");
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
+                       else $(obj).val("");
+               };
+               
+               var filename = $(this).val();
+               
+               //CHK File ext
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+                                     , "jpg", "png", "zip"];
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+               var findFlag = false;
+               for(var i = 0; i < imgExts.length; i++) {
+                       if(imgExts[i] == fileExt) {
+                               findFlag = true;
+                               break;
+                       }
+               }
+       
+               if(findFlag == false) {
+                       alert( fileErrMsg["ext_" + localeCode] );
+                       initFileInput(this);
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+                       return;
+               }
+               
+               //CHK File Size
+               if(
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
+                               || $.browser.mozilla //FF
+                               || $.browser.safari //Chrome
+               )
+               {
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+                       if( filesize > 200 ) {
+                               alert( fileErrMsg["limit_" + localeCode] );
+                               initFileInput(this);
+                               return;
+                       }
+               }
+               
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+       });
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+       if(!arguments.length) return false;
+       
+       var bt = $('#'+args.bt);
+       var obj = $('#'+args.obj);
+
+       var source = bt.css('background-image');
+       
+       if(obj.is(':visible')){
+               obj.hide();
+       }
+
+       bt.toggle(function(){
+               var src = source.replace('.gif','_.gif');
+               bt.css('background-image', src);
+               obj.show();
+               
+               return false;
+       },function(){
+               var src = source.replace('_.gif','.gif');
+               bt.css('background-image', src);
+               obj.hide();
+
+               return false;
+       });
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+  var $self = $(this);
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+  
+  $self.find('a').bind('click',function(){
+   $("#selArea ul").hide();
+   /*
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+   $answer.hide().find('.conts').hide();
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+   */
+
+   /* 20120822 hjh modify*/
+   /* if ( this open )?  close : all close, e.target open */
+   var cutTtl  = $(this).parent().children("div").html();
+   var ttl     = $(this).parent().parent().children("td.real_question").html();
+   
+   if($(this).parents('tr').next().find('.answer').is(':visible')){
+    $(this).html(cutTtl);
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+     $answer.hide();
+    });
+   }else{
+    titleInit();
+    $(this).html(ttl);
+    $answer.hide().find('.conts').hide();
+    //$answer.slideUp('normal').find('.conts').hide();
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
+   }   
+
+   return false;
+  });
+ });
+
+ $answer.each(function(){
+  var $self = $(this);
+
+  $(this).find('a.bt-close-faq').bind('click',function(){
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");
+   var cutTtl      = question_td.children("div").html();
+   question_td.children("a").html(cutTtl);
+   
+   $self.find('.conts').slideUp('fast',function(){
+    $self.hide();
+   });
+
+   return false;
+  });
+ });
+ 
+ var titleInit = function() {
+  $question.each(function(i) {
+   $(this).find("a").html($(this).find("div").html());
+  });
+ }
+}
+
+
+
+/**
+ *  쓰기페이지 Tab 영역 컨트롤
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+       var tabs = $('.tab-list').find("li");
+       var elements = $( selector );
+
+       $( elements ).each( function( i ) {
+               if( i != 0 )
+               {
+                       $(this).hide();
+               }
+       })
+
+       // Control Tabs
+       $( tabs ).each( function( i ) {
+               $( this ).click( function(){
+                       resetClass();
+
+                       $( this ).find( 'a' ).addClass( "sel" );
+                       $( elements[i] ).show();
+
+                       return false;
+               });
+       });
+
+       // Class 리셋
+       function resetClass()
+       {
+               $( tabs ).each( function( i ) {
+                       $( this ).find( 'a' ).removeClass( 'sel' );
+               });
+
+               $( elements ).each( function( i ) {
+                       $( this ).hide();
+               });
+       }
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn            = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    $("a.remove-btn").eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ obj.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ 
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile    = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj       = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+  var firstCompFile = compFile.eq(0);
+  firstCompFile.prev().prev().val("");
+  if ($.browser.msie) {
+               $(obj).parent().find('input.file').val("");
+               firstCompFile.replaceWith( firstCompFile.clone(true) );
+       } else {
+               firstCompFile.val("");
+               firstCompFile.prev().prev().val("");
+  }
+ } else {
+  obj.parent().remove();
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+  
+  //add-btn event..
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+ 
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+ 
+ setTimeout(function() {
+  $("#" + id).focus();
+ }, 100);
+ 
+ $("#" + id).on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   var that = $(this);
+   setTimeout(function() {
+    that.prev().focus();
+   }, 1);
+  }
+ });
+ 
+ $("#" + id).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/** 
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );
+ 
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+ 
+ inputFile.on("keydown", function(e) {
+  var that = $(this);
+  
+  if(e.which == 9 && e.shiftKey) {
+   return true;
+  }
+  
+  if(e.which === 9) {
+   e.preventDefault();
+   setTimeout(function() {
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ inputFile.on("focusin", function(e) {
+  $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+  $(this).parent().css("outline", "");
+ });
+ 
+ firstAddAction(btnFileAttach, limit, w, btnName);
+ 
+ /*
+ btnFileAttach.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    inputFile.focus();
+   }, 1);
+  }
+ });
+ 
+ btnFileAttach.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ */
+ /**
+  *  2012-08-08 전종호 추가
+  *  파일 Input Text 영역 너비를 잡아주는 메서드
+  */
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+ 
+ $("#" + removeBtnId).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/** 
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+       var isCompareView=false;
+       $("#devicespecs-list > li").each( 
+               function(i){ 
+                       $(".info", this).bind("click", devicespecsListInfoToggle);
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);
+                       
+                       //detail info layer toggle function
+                       function devicespecsListInfoToggle (){
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+                               return false;
+                       }
+       });
+
+
+       /* DEVICE COMPARE 열리는 부분
+       - defualt : close. 
+       - 최초 한번만 열림 
+       - 현재는 compare 버튼에 공통으로 함수 바인딩
+       */
+       function devicespecsCompareOnOff (){
+               if ( isCompareView ) return;
+               var ww = ( isCompareView ) ? "30px":"207px";
+               $("#devicespecs-compare").animate({
+                   height: ww }, 300, "linear", function(){ });
+
+               isCompareView = ( isCompareView ) ? false:true;
+               return false;
+       }
+
+       //compare 버튼 공통으로 클릭 이벤트 걸림 
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/** 
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+       var isImgView = false;
+       var isView = 0;
+       
+       //thumbnail overevent bind
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+       focusDeviceDetail (1);
+       
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.type === "keydown" && e.which == 9) {
+                       setTimeout(function() {
+                               $("#img-viewer-handle a").eq(0).focus();        
+                       }, 1);
+               }
+       });
+       
+       //thumbnail viewarea controll handler bind
+       $("#img-viewer-handle").click(function () {
+               var ww;
+               var src = $("#img-viewer-handle img").attr("src");
+               if ( isImgView ){
+                       ww = "300px";
+                       src = src.replace(".gif", "_.gif");
+                       $("#img-viewer-thumbnail").hide();
+                       $("#device-info").show();
+               }else{
+                       ww = "730px";
+                       src = src.replace("_.gif", ".gif");
+                       $("#img-viewer-thumbnail").show();
+                       $("#device-info").hide();
+                       focusDeviceDetail(1);
+               }
+               
+               $("#img-viewer-handle img").attr("src", src);
+       $("#img-viewer").animate({
+                   width: ww
+                       }, 300, "linear", function(){
+                       if($.browser.msie)
+                               $("#img-inner").css("width", ww);
+               });
+               
+       isImgView = ( isImgView ) ? false:true;
+    });
+
+       //thumbnail overevent function (update date 2012.09.05 kangki)
+       function focusDeviceDetail ( id ) {
+               if ( isView == id ) return;
+
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+               $( "#img-viewer-bic > img").attr("src", imgSrc);
+               isView = (id);          
+       }
+
+       /*toggle devicespecs List*/
+       if($('div#contents').find('.devicespec-tit').length){
+               
+               $('.devicespec-tit').each(function(){
+                       var self = $(this);
+                       $('a', self).bind ("click", fnToggle);
+
+                       function fnToggle(){
+
+                               if ( $(this).parent().parent().next().is(':visible') ){
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+                                       self.find('em').text('Show');
+                                       self.next().hide();
+
+                                       return false;
+                               }else{
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+                                       self.find('em').text('Hide');
+                                       self.next().show();
+
+                                       return false;
+                               }
+                       }
+                                                       
+               });
+       }
+
+       /*all Show Hide devicespecs List*/
+       if($('div#contents').find('.devicespecs-util').length){
+               var self = $('div#contents').find('.devicespecs-util');
+
+               $('.showA', self).bind ("click", function (){
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( !me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+                                       me.find('em').text('Hide');
+                                       me.next().show();
+                               }
+                       });
+                       return false;
+               })
+               $('.hideA', self).bind ("click", function (){
+                       
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+                                       me.find('em').text('Show');
+                                       me.next().hide();
+                               }
+                                                               
+                       });
+                       return false;
+               })
+       }       
+}
+
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+       var focusTarget = "input";
+
+       $("#searchInput").bind("keydown", checkSearchText);
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+
+       $(".autocomplete").mouseleave(function(){
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".autocomplete").css("visibility", "visible");
+
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+
+                       var hei = $(".autocomplete").find('>ul').outerHeight();
+                       if(hei>400){
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+                       }
+               }
+               else{
+                       $(".autocomplete").css("visibility", "hidden");
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+ */
+
+function setTopScroll(selector) {
+       if ( !selector ) return false;
+       var btn = $( selector );
+       var w = $( window );
+       btn.css( "position", "absolute" );
+
+
+       btn.click( function(){ w.scrollTop( 0 ) } );
+
+       var wheight = w.innerHeight();
+       
+       $(window).resize( function() {
+               wheight = w.innerHeight();
+               redraw();
+       });
+
+       $(window).scroll( function() {
+               redraw();
+       })
+
+       /**
+        *      Top 버튼의 재정렬 메서드
+        */
+       function redraw()
+       {
+               var t = w.scrollTop() + wheight - 289;
+
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {
+                       t = wheight / 2;
+               }
+               
+               btn.clearQueue();
+
+               btn.animate({
+           top: t
+               }, 500, function() {
+           // Animation complete.
+               });
+               //btn.css( "top", t );
+               //console.log( "target : " + t );
+       }
+
+       redraw();
+       /*
+       obj.initTop = position;
+       obj.topLimit = topLimit;
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+       obj.style.position = "absolute";
+       obj.top = obj.initTop;
+       // obj.left = obj.initLeft;
+
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
+               obj.getTop = function() {
+                       return window.pageYOffset;
+               }
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+               obj.getTop = function() {
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+               }
+       } else {
+               obj.getTop = function() {
+                       return 0;
+               }
+       }
+
+       if ( self.innerHeight ) {       //WebKit
+               obj.getHeight = function() {
+                       return self.innerHeight;
+               }
+       } else if( document.documentElement.clientHeight ) {
+               obj.getHeight = function() {
+                       return document.documentElement.clientHeight;
+               }
+       } else {
+               obj.getHeight = function() {
+                       return 500;
+               }
+       }
+
+       obj.move = setInterval( function() {
+               if ( obj.initTop > 0 ) {
+                       pos = obj.getTop() + obj.initTop;
+               } else {
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
+               }
+
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+               if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+               interval = obj.top - pos;
+               obj.top = obj.top - interval / 3;
+               obj.style.top = obj.top + "px";
+       }, 30 )
+       */
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){ 
+       var x,y; 
+       if (window.innerHeight) { // IE 외 모든 브라우저 
+               x = (screen.availWidth - self.innerWidth) / 2; 
+               y = (screen.availHeight - self.innerHeight) / 2; 
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
+               x = (screen.availWidth - document.body.clientWidth) / 2; 
+               y = (screen.availHeight - document.body.clientHeight) / 2; 
+       } 
+       window.moveTo(x,y); 
+}
+
+// Layer Popup Open
+function layer_open(el){
+       var temp = $('#' + el);
+
+       if(!temp.hasClass('sty2')){
+               $('.layer').fadeIn();
+       }
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       if(temp.hasClass('sty2')){
+               temp.fadeIn();
+
+               temp.find('a.cbtn').click(function(e){
+                       temp.fadeOut();
+               });
+               temp.find('a.gbtn').click(function(e){
+                       temp.fadeOut();
+               });
+
+               return false;
+       }
+       // 닫는 버튼 gbtn-c 추가 20130627
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+               $('.layer').fadeOut();
+               return false;
+       });
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+       var temp = $('#' + el);
+       $('input').attr('disabled', 'disabled');
+       $('.layerPop').fadeIn();
+       
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+               $('.layerPop').fadeOut();
+               $('input').removeAttr('disabled');
+               return false;
+       });
+}
+
+
+function pop_account(url){
+       window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+       window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/** 
+ *  [PAGE] Tags
+ *  date : 20120820
+ *  author : 전종호
+ */
+function initTags()
+{
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+       // 마지막 아이템은 제외
+       var eleArr = $(".tag-list").find("li");
+
+       $( eleArr ).each( function( i ) {
+               if( i < eleArr.length - 1 )
+               {
+                       var target = $(this).find("a")[0];
+                       var content = $( target ).html();
+
+                       $( target ).html( content + "," );
+               }
+       })
+}
+
+$(document).ready(function(){
+       $(".tip_info").css("cursor","pointer");
+       $(".tip_info > img").mouseover(function(){
+               $(".tip_cont").css("display","block");
+       });
+       $(".tip_info > img").mouseout(function(){
+               $(".tip_cont").css("display","none");
+       });
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+       var $L = $("#" + id) ;
+       var $D  = $("#" + id + "down") ;
+
+       $T = $("#" + id) ;
+
+       $L.show();
+       isPopup = true ;
+
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+       $("#" + id + "agree").focus() ;
+
+       jQuery(":focusable").focusin(function(e){
+               if (isPopup) {
+                       e.stopPropagation() ;
+                       if ($L.find(jQuery(this)).length > 0) {
+                       } else {
+                               jQuery(this).blur() ;
+                               jQuery("#" + id + " :focusable:first").focus() ;
+                       }
+               }
+       }) ;
+
+       $L.find('.close').click(function(){
+               resetPopup(id) ;
+       });
+
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+       $("#" + T + "down").hide();
+       $("#" + T + "agree").attr("checked", false) ;
+       isPopup = false ;
+       $("#" + T).hide() ;
+       $("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+       if ($("#" + T + "agree").is(':checked')) {
+               commonDownloadLog(F, I) ;
+               resetPopup(T) ;
+       }
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+       if ( "area" === nodeName ) {
+               map = element.parentNode;
+               mapName = map.name;
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+               img = $( "img[usemap=#" + mapName + "]" )[0];
+               return !!img && visible( img );
+       }
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+                       visible( element ) ;
+}
+
+function visible( element ) {
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+               return $.css( this, "visibility" ) === "hidden";
+       }).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device1').hide();
+       
+       $('#thumb_view_btn').hover(function() {
+               $('.view_device1').show();
+       },function() {
+               $('.view_device1').hide();
+       });
+               
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device2').hide();
+       
+       $('#thumb_view_btn2').hover(function() {
+               $('.view_device2').show();
+       },function() {
+               $('.view_device2').hide();
+       });
+               
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+       var $L = $("#" + popId) ;
+       $L.show(100);
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+       $L.find('.close').click(function(){
+               $L.hide();
+       });
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
diff --git a/org.tizen.devtools/html/scripts/core.js b/org.tizen.devtools/html/scripts/core.js
new file mode 100644 (file)
index 0000000..68dea4c
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10. 
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+       if (!seperator) seperator = '-';
+
+       date = $.SD.replaceAll(date, seperator, '');
+       date = $.SD.replaceAll(date, '/', '');
+
+       if (date.length !== 8) return null;
+       
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+       if (date.valueOf().toString() === 'NaN') return null;
+
+       return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+       if (!seperator) seperator = '/';
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+       var str, dateString = date.getFullYear();
+
+       str             = "0" + (date.getMonth()+1);
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+       str             = "0" + date.getDate();
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+
+       return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+       var tnum    = num + "";
+       var tarr    = new Array();
+       var dot     = "";
+       var idxDot  = tnum.indexOf(".");
+       var sign    = "";
+       var tinx    = 0;
+       var fnum    = tnum;
+        
+       
+       if(idxDot > -1) {
+               fnum = tnum.substring(0, idxDot);
+               dot  = tnum.substring(idxDot);
+               tnum = fnum;
+       } 
+       
+       if(tnum.indexOf("-") > -1) {
+               fnum = tnum.substring(1);
+               sign = tnum.substring(0, 1);
+       }
+       
+       for(var inx = fnum.length; inx > 0; ) {
+               tarr[tinx++] = fnum.substring(inx, inx - 3);
+               inx = inx - 3;
+       }
+       
+       return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+       doAjax : function (json) {
+               var param = {
+                       async : json.async,
+                       type : json.type,
+                       dataType : json.dataType,
+                       cache: json.cache,
+                       timeout : json.timeout,
+                       success : json.success,
+                       error : json.error
+               };
+
+               if (param.dataType === 'jsonp') {
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+               } else {
+                       param.url = json.url;
+                       param.data = json.data;
+               }
+               $.ajax(param);
+       },
+       
+       get : function (json) {
+               $.SD.ajax.doAjax({ 
+                       url:json.url,
+                       cache:json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'get', 
+                       dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       },
+       
+       post : function (json) {
+               $.SD.ajax.doAjax({ url:json.url,
+                       cache: json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'post', dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       }
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+       
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/[0-9]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+               return false;
+       }
+       
+       return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+       var scrollbars  = "no";
+       var resizeable  = "no";
+       
+       if(popObj.scrollbars) {
+               scrollbars = popObj.scrollbars; 
+       }
+       
+       if(popObj.resizeable) {
+               resizeable = popObj.resizeable;
+       }
+       
+       var width  = screen.width;
+       var height = screen.height;
+
+       var x = ( width / 2 ) - ( popObj.width / 2 );
+       var y = ( height / 2 ) - ( popObj.height / 2 );
+
+       var opt = "left=" + x +
+                 ",top=" + y +
+                 ",width=" + popObj.width +
+                 ",height=" + popObj.height +
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+                 ",scrollbars=" + scrollbars +
+                 ",resizable=" + resizeable;
+       var pop = window.open(popObj.url, popObj.target, opt);
+       if(pop) {
+               pop.focus();
+       }
+}
+
+$.SD.isValidDate = function(val) {
+       if(val.length != 8) {
+               return false;
+       }
+       
+       var yyyy = Number(val.substring(0, 4)); 
+       var mm   = Number(val.substring(4, 6));
+       var dd   = Number(val.substring(6));
+       
+       if( mm < 1 || mm > 12 ) {
+               return false;
+       }
+       
+       var endDay  = 0;
+       
+       if( mm == 2 ) {
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+                       endDay = 29;
+               } else {
+                       endDay = 28;
+               }
+               
+       } else {
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+               endDay = endDays[mm - 1];
+       }
+       
+       if( dd <= 0 || dd > endDay ) {
+               return false;
+       } 
+       
+       return true;
+       
+}
+
+$.SD.boardDownload = function(option, func) {
+       var jsonData = {
+               url: "/board/ajaxDwnldProc.do",
+               async: false,
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+                               //location.href = $(obj).attr("href");
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDwnldProc.do",
+               async: false,
+               data: {fileName: fileName, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               location.href = fileFullPath;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(target == 'new'){
+                                       window.open(fileFullPath, '');
+                               }else{
+                                       location.href = fileFullPath;
+                               }
+                               
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonAllShareClickCountProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+       var jsonData = {
+               url: "/common/ajaxCommonClickCountProc.do",
+               data: {categoryName: categoryName, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+       var resultSize = 0;
+       if(str == null){
+               return 0;
+       }
+       for(var i=0; i<str.length; i++){
+         var c = escape(str.charAt(i));
+         if(c.length == 1){
+                 resultSize ++;
+         }     else if(c.indexOf("%u") != -1) {
+                 resultSize += 2;
+         }     else if(c.indexOf("%") != -1) {
+                 resultSize += c.length/3;
+         }
+       }
+       return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+       var tempStr = new String(str);
+       var len = 0;
+       for ( var i = 0; i < str.length; i++) {
+               var c = escape(str.charAt(i));
+               if (c.length == 1)
+                       len++;
+               else if (c.indexOf("%u") != -1)
+                       len += 2;
+               else if (c.indexOf("%") != -1)
+                       len += c.length / 3;
+               if (len > limit) {
+                       tempStr = tempStr.substring(0, i);
+                       break;
+               }
+       }
+       return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/** 
+ * Method pagination 
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+       var info = {
+                        prev : 1
+                       ,first : 1
+                       ,begin : pageInfo.begin - 0
+                       ,current : pageInfo.current - 0
+                       ,end : pageInfo.end - 0
+                       ,last : pageInfo.last - 0
+                       ,next : 1
+               },
+               target  = this, 
+               page    = $('<span class="page"></span>'),
+               prev    = "", 
+               next    = "", 
+               i               = 0, 
+               n               = 0;
+
+       info.begin       = info.begin < 1 ? 1 : info.begin;
+       info.current = info.current < 1 ? 1 : info.current;
+       info.end         = info.end < 1 ? 1 : info.end;
+       info.last        = info.last < 1 ? 1 : info.last;
+
+       info.prev = info.current - 1;
+       info.next = info.current + 1;
+
+       target.addClass("pageNumber");
+       target.addClass("mt20");
+       target.children().remove();
+
+       if (info.first < info.begin) {
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.first);
+               }));
+       }
+
+       if (info.prev >= info.first) {
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.prev);
+               }));
+       }
+
+       i = info.begin;
+       n = info.end;
+       for(; i <= n; i++) {
+               if (i === info.current) {
+                       page.append('<strong>'+i+'</strong>');
+               } else {
+                       (function(index){
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+                                       e.preventDefault();
+                                       func(index);
+                               }));
+                       })(i);
+               }
+       }
+
+       target.append(page);
+
+       if (info.next <= info.last) {
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.next);
+               }));
+       }
+       
+       if (info.last > info.end) {
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.last);
+               }));
+       }       
+};
+
+/**
+ *  Method : popup Show Hide 
+ */
+$.fn.popupShow = function(options) {
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);
+       
+       if($("body div#" + opts.maskId).size() == 0) {
+               $("body").append("<div id='" + opts.maskId + "'></div>");
+               $("#" + opts.maskId).css({
+                       "position" : "absolute",
+                       "left"     : "0",
+                       "top"      : "0",
+                       "z-index"  : "9000",
+                       "background-color" : "#000",
+                       "display"  : "none"
+               });
+       }
+       
+       var mask_layer  = $("#" + opts.maskId);
+       var popup_layer = $(this);
+       
+       popup_layer.css("z-index", "9999");
+       
+       var maskHeight = $(document).height();
+       var maskWidth = $(window).width();
+       
+       mask_layer.css({'width':maskWidth,'height':maskHeight});
+       
+       mask_layer.fadeIn(opts.fadeSec);
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);
+       
+       var winH = $(window).height();
+       var winW = $(window).width();
+       
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+       
+       popup_layer.fadeIn(opts.fadeSec);
+       
+       var init_num = 0;
+       
+       if(init_num == 0) {
+               mask_layer.click(function() {
+                       $(this).hide();
+                       popup_layer.hide();
+               });
+               
+               
+               $("#" + opts.closeId).click( function(e) {
+                       e.preventDefault();
+                       popup_layer.popupHidden(opts.maskId);
+               });
+               
+               
+               $(window).resize( function() {
+                       var maskHeight = $(document).height();
+                       var maskWidth  = $(window).width();
+                       var winH       = $(window).height();
+                       var winW       = $(window).width();
+                       
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});
+                       
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+               });
+               
+               init_num++;
+       }
+};
+
+$.fn.popupHidden = function(maskId) {
+       var id = "#";
+       
+       if(maskId) {
+               id = id + maskId;
+       } else {
+               id = id + $.fn.popupShow.defaults.maskId; 
+       }
+       
+       $(id).hide();
+       $(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+       speed : "slow",
+       fadeLow : 0.8,
+       fadeSec : 100,
+       maskId  : "mask",
+       popupId : "layer-pop",
+       closeId : "layer-pop-close"
+};
+
+/**
+ *  Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+       var that = this;
+       var target = null;
+
+       that.each(function (i, item) {
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+               if (filePath != "") {
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+                       if (!imgExts[fileExt]) {
+                               target = item;
+                               return false;
+                       }
+               }
+       });
+
+       return target;
+}      
+
+/**
+ *  Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+       return this.optional(element) 
+              || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+    var label = $(this).data('label');
+    
+    /*
+    if (event && event.type === 'focusin') {
+      label.hide();
+    } else if (event && event.type === 'focusout') {
+      label.css('opacity', options.placeholderOpacity);
+    }
+    */
+    
+    if (event && event.type !== 'keydown') {
+      toggleLabel(this, label);
+    } else {
+      // Use timeout to catch val() just after the key is pressed
+      // Using keyup is too slow.   
+      (function(input) {
+        setTimeout(function() {
+          toggleLabel(input, label);
+        }, 0);
+      })(this);
+    }
+    
+    if (event && event.type === 'focusin') {
+       label.hide();
+    }
+  };
+  
+  var toggleLabel = function(input, label) {
+    if ($(input).val()) {
+      label.hide();
+    } else {
+      label.show();
+    }
+  };
+
+  $.fn.stickyPlaceholders = function(options) {
+    var defaults = {
+      wrapperClass: 'sticky-placeholder-wrapper',
+      wrapperDisplay: 'block',
+      labelClass: 'sticky-placeholder-label',
+      placeholderAttr: 'placeholder',
+      dataAttr: 'data-sticky-placeholder',
+      placeholderColor: '#000',
+      placeholderOpacity: 0.5,
+      placeholderFocusOpacity: 0.25
+    };
+    options = $.extend(defaults, options);
+
+    return this.each(function() {
+      var input       = $(this),
+          placeholder = input.attr(options.placeholderAttr),
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+          labelStyle;
+
+      // store a reference to each input's label
+      input.data('label', label);
+
+      // remove the placeholder attribute to avoid conflcits
+      input.removeAttr('placeholder');
+      
+      // If the dataAttr is set and it's not equal to the placeholderAttr
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+        input.attr('data-sticky-placeholder', placeholder);
+      }
+
+      labelStyle = {
+        'color': options.placeholderColor,
+        'cursor': 'text',
+        'font-family': input.css('font-family'),
+        'font-weight': input.css('font-weight'),
+        'font-size': input.css('font-size'),
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+        'opacity': options.placeholderOpacity,
+        'padding-left': input.css('padding-left'),
+        'padding-top': input.css('padding-top'),
+        'position': 'absolute',
+        'text-transform': input.css('text-transform'),
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+      };
+      label.css(labelStyle);
+      
+      // hide the placeholder if the input already has a value
+      if (input.val()) {
+        label.hide();
+      }
+
+      $(this).bind('keydown input focusin focusout', function(event) {
+        $.SD.alterParent.call(this, options, event);
+      });
+        
+      // prevent click/dblclick from selecting the label text
+      label.bind('mousedown', function(e) {
+        e.preventDefault();
+      });
+      
+      // call alterParent initially without an event to set up the wrapper elements
+      $.SD.alterParent.call(this, options);
+    });
+  };
+ 
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+       $("#" + file_id).on("keydown", function(e) {
+               var that = $(this);
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.which === 9) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + after_id).focus();
+                       }, 1);
+               }
+       });
+       
+       $("#" + after_id).on("keydown", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + file_id).focus();
+                       }, 1);
+               }
+       });
+}  
+
+$.SD.closeWP = function() {
+       var Browser = navigator.appName;
+       var indexB = Browser.indexOf('Explorer');
+       if (indexB > 0) {
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);
+           window.opener.focus();
+           if (Version >= 7) {
+               window.open('', '_self', '');
+               window.close();
+           }
+           else if (Version == 6) {
+               window.opener = null;
+               window.close();
+           }
+           else {
+               window.opener = '';
+               window.close();
+           }
+       }
+       else {
+           window.close();
+       }
+}
+
+$.SD.profileFacebook = function() {
+       location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+        switch($(this).attr('id')) {
+        case 'changeEn': onClickChangeEn(e);  break;
+        case 'changeZh': onClickChangeZh(e); break;
+        case 'changeKo': onClickChangeKo(e); break;
+        case 'signOut': onClickSignOut(e); break;
+        case 'signUp': onClickSignUp(e); break;
+        case 'signIn': onClickSignIn(e); break;
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+        case 'signOff': onClickSignOff(e); break;
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+        case 'deleteAccount' : onClickDeleteAccount(e); break;
+        }
+});
+ 
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+       e.preventDefault();
+       var $this = $(this);
+       
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+               var sns = $this.attr("id").substring(4).toLowerCase();
+               switch(sns) {
+               case "facebook" :
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+                       $("div.content img").each(function() {
+                               var that = $(this);
+                               if(that.width() > 200 && that.height() > 200) {
+                                       imgUrl = that.attr("src");
+                                       return false;
+                               }
+                       });
+                       
+                       var data = {
+                               app_id : $("#sd_appId").text(),
+                               link : copyUrl,
+                               picture : imgUrl,
+                               name : $("title").text(),
+                               caption : "developer.samsung.com",
+                               description : $("div.content p").eq(0).text(),
+                               redirectUri : "http://" + location.host + "/board/sns.do"
+                       };
+                       var url = "https://www.facebook.com/dialog/feed?" ;
+                       url += "app_id=" + data.app_id + "&" ;
+                       url += "link=" + data.link + "&" ;
+                       url += "picture=" + data.picture + "&" ;
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;
+                       url += "redirect_uri=" + data.redirectUri ;
+                       sendSNS(sns, url, 850, 600);
+                       break;
+               case "twitter" :
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+                       break;
+               }
+       }
+       
+       function sendSNS(sns, url, iWidth, iHeight) {
+               var popObj = { url : url
+                                    , width : iWidth
+                                    , height: iHeight
+                                    , target: sns
+                                    , scrollbars: "yes"
+                                    , resizeable: "yes"};
+       
+               $SD.popupCenter(popObj);
+       }
+})
+ 
+//document rady End #########################################
+ });
+
+;(function(){
+       window.deviceImageError = function(el) {
+               var noImage = noImage || '/images/common/device_details_noimage.gif';
+               if (el.src === noImage) 
+                       return;
+               el.src = noImage;
+       };
+})();
+
+function commonDownload(fileName, categoryId){
+       if (fileName == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!!!")
+               return;
+       }else{
+               $SD.commonDownload(fileName, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+               });
+       }
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+/*
+function layer_view(id){
+
+       var $layer = $('#'+id);
+       var $down  = $('.license-layer').find('a#down');
+
+       $layer.show();
+       $layer.find('.close, #down').click(function(){
+               $layer.hide();
+       });
+
+       function countChecked() {
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
+       }
+
+       $(":checkbox").click(countChecked);
+}
+*/
diff --git a/org.tizen.devtools/html/scripts/jquery.util.js b/org.tizen.devtools/html/scripts/jquery.util.js
new file mode 100644 (file)
index 0000000..3fc3ad0
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
+ *          
+ *   class: Inside the class attribute, wrapped in curly braces: { }
+ *   
+ *   elem:  Inside a child element (e.g. a script tag). The
+ *          name parameter indicates *which* element.
+ *          
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ * 
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ * 
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ * 
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ * 
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+       metadata : {
+               defaults : {
+                       type: 'class',
+                       name: 'metadata',
+                       cre: /({.*})/,
+                       single: 'metadata'
+               },
+               setType: function( type, name ){
+                       this.defaults.type = type;
+                       this.defaults.name = name;
+               },
+               get: function( elem, opts ){
+                       var settings = $.extend({},this.defaults,opts);
+                       // check for empty string in single property
+                       if ( !settings.single.length ) settings.single = 'metadata';
+                       
+                       var data = $.data(elem, settings.single);
+                       // returned cached data if it already exists
+                       if ( data ) return data;
+                       
+                       data = "{}";
+                       
+                       if ( settings.type == "class" ) {
+                               var m = settings.cre.exec( elem.className );
+                               if ( m )
+                                       data = m[1];
+                       } else if ( settings.type == "elem" ) {
+                               if( !elem.getElementsByTagName )
+                                       return undefined;
+                               var e = elem.getElementsByTagName(settings.name);
+                               if ( e.length )
+                                       data = $.trim(e[0].innerHTML);
+                       } else if ( elem.getAttribute != undefined ) {
+                               var attr = elem.getAttribute( settings.name );
+                               if ( attr )
+                                       data = attr;
+                       }
+                       
+                       if ( data.indexOf( '{' ) <0 )
+                       data = "{" + data + "}";
+                       
+                       data = eval("(" + data + ")");
+                       
+                       $.data( elem, settings.single, data );
+                       return data;
+               }
+       }
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+       return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+       // http://docs.jquery.com/Plugins/Validation/validate
+       validate: function( options ) {
+
+               // if nothing is selected, return nothing; can't chain anyway
+               if (!this.length) {
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+                       return;
+               }
+
+               // check if a validator for this form was already created
+               var validator = $.data(this[0], 'validator');
+               if ( validator ) {
+                       return validator;
+               }
+
+               // Add novalidate tag if HTML5.
+               this.attr('novalidate', 'novalidate');
+
+               validator = new $.validator( options, this[0] );
+               $.data(this[0], 'validator', validator);
+
+               if ( validator.settings.onsubmit ) {
+
+                       var inputsAndButtons = this.find("input, button");
+
+                       // allow suppresing validation by adding a cancel class to the submit button
+                       inputsAndButtons.filter(".cancel").click(function () {
+                               validator.cancelSubmit = true;
+                       });
+
+                       // when a submitHandler is used, capture the submitting button
+                       if (validator.settings.submitHandler) {
+                               inputsAndButtons.filter(":submit").click(function () {
+                                       validator.submitButton = this;
+                               });
+                       }
+
+                       // validate the form on submit
+                       this.submit( function( event ) {
+                               if ( validator.settings.debug )
+                                       // prevent form submit to be able to see console output
+                                       event.preventDefault();
+
+                               function handle() {
+                                       if ( validator.settings.submitHandler ) {
+                                               if (validator.submitButton) {
+                                                       // insert a hidden input as a replacement for the missing submit button
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+                                               }
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );
+                                               if (validator.submitButton) {
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+                                                       hidden.remove();
+                                               }
+                                               return false;
+                                       }
+                                       return true;
+                               }
+
+                               // prevent submit for invalid forms or custom submit handlers
+                               if ( validator.cancelSubmit ) {
+                                       validator.cancelSubmit = false;
+                                       return handle();
+                               }
+                               if ( validator.form() ) {
+                                       if ( validator.pendingRequest ) {
+                                               validator.formSubmitted = true;
+                                               return false;
+                                       }
+                                       return handle();
+                               } else {
+                                       validator.focusInvalid();
+                                       return false;
+                               }
+                       });
+               }
+
+               return validator;
+       },
+       // http://docs.jquery.com/Plugins/Validation/valid
+       valid: function() {
+        if ( $(this[0]).is('form')) {
+            return this.validate().form();
+        } else {
+            var valid = true;
+            var validator = $(this[0].form).validate();
+            this.each(function() {
+                               valid &= validator.element(this);
+            });
+            return valid;
+        }
+    },
+       // attributes: space seperated list of attributes to retrieve and remove
+       removeAttrs: function(attributes) {
+               var result = {},
+                       $element = this;
+               $.each(attributes.split(/\s/), function(index, value) {
+                       result[value] = $element.attr(value);
+                       $element.removeAttr(value);
+               });
+               return result;
+       },
+       // http://docs.jquery.com/Plugins/Validation/rules
+       rules: function(command, argument) {
+               var element = this[0];
+
+               if (command) {
+                       var settings = $.data(element.form, 'validator').settings;
+                       var staticRules = settings.rules;
+                       var existingRules = $.validator.staticRules(element);
+                       switch(command) {
+                       case "add":
+                               $.extend(existingRules, $.validator.normalizeRule(argument));
+                               staticRules[element.name] = existingRules;
+                               if (argument.messages)
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+                               break;
+                       case "remove":
+                               if (!argument) {
+                                       delete staticRules[element.name];
+                                       return existingRules;
+                               }
+                               var filtered = {};
+                               $.each(argument.split(/\s/), function(index, method) {
+                                       filtered[method] = existingRules[method];
+                                       delete existingRules[method];
+                               });
+                               return filtered;
+                       }
+               }
+
+               var data = $.validator.normalizeRules(
+               $.extend(
+                       {},
+                       $.validator.metadataRules(element),
+                       $.validator.classRules(element),
+                       $.validator.attributeRules(element),
+                       $.validator.staticRules(element)
+               ), element);
+
+               // make sure required is at front
+               if (data.required) {
+                       var param = data.required;
+                       delete data.required;
+                       data = $.extend({required: param}, data);
+               }
+
+               return data;
+       }
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+       // http://docs.jquery.com/Plugins/Validation/blank
+       blank: function(a) {return !$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/filled
+       filled: function(a) {return !!$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/unchecked
+       unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+       this.settings = $.extend( true, {}, $.validator.defaults, options );
+       this.currentForm = form;
+       this.init();
+};
+
+$.validator.format = function(source, params) {
+       if ( arguments.length == 1 )
+               return function() {
+                       var args = $.makeArray(arguments);
+                       args.unshift(source);
+                       return $.validator.format.apply( this, args );
+               };
+       if ( arguments.length > 2 && params.constructor != Array  ) {
+               params = $.makeArray(arguments).slice(1);
+       }
+       if ( params.constructor != Array ) {
+               params = [ params ];
+       }
+       $.each(params, function(i, n) {
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+       });
+       return source;
+};
+
+$.extend($.validator, {
+
+       defaults: {
+               messages: {},
+               groups: {},
+               rules: {},
+               errorClass: "error",
+               validClass: "valid",
+               errorElement: "label",
+               focusInvalid: true,
+               errorContainer: $( [] ),
+               errorLabelContainer: $( [] ),
+               onsubmit: true,
+               ignore: ":hidden",
+               ignoreTitle: false,
+               onfocusin: function(element, event) {
+                       this.lastActive = element;
+
+                       // hide error label and remove error class on focus if enabled
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+                               this.addWrapper(this.errorsFor(element)).hide();
+                       }
+               },
+               onfocusout: function(element, event) {
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+                               this.element(element);
+                       }
+               },
+               onkeyup: function(element, event) {
+                       if ( element.name in this.submitted || element == this.lastElement ) {
+                               this.element(element);
+                       }
+               },
+               onclick: function(element, event) {
+                       // click on selects, radiobuttons and checkboxes
+                       if ( element.name in this.submitted )
+                               this.element(element);
+                       // or option elements, check parent select in that case
+                       else if (element.parentNode.name in this.submitted)
+                               this.element(element.parentNode);
+               },
+               highlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+                       } else {
+                               $(element).addClass(errorClass).removeClass(validClass);
+                       }
+               },
+               unhighlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+                       } else {
+                               $(element).removeClass(errorClass).addClass(validClass);
+                       }
+               }
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+       setDefaults: function(settings) {
+               $.extend( $.validator.defaults, settings );
+       },
+
+       messages: {
+               required: "This field is required.",
+               remote: "Please fix this field.",
+               email: "Please enter a valid email address.",
+               url: "Please enter a valid URL.",
+               date: "Please enter a valid date.",
+               dateISO: "Please enter a valid date (ISO).",
+               number: "Please enter a valid number.",
+               digits: "Please enter only digits.",
+               creditcard: "Please enter a valid credit card number.",
+               equalTo: "Please enter the same value again.",
+               accept: "Please enter a value with a valid extension.",
+               maxlength: $.validator.format("Please enter no more than {0} characters."),
+               minlength: $.validator.format("Please enter at least {0} characters."),
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+               range: $.validator.format("Please enter a value between {0} and {1}."),
+               max: $.validator.format("Please enter a value less than or equal to {0}."),
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")
+       },
+
+       autoCreateRanges: false,
+
+       prototype: {
+
+               init: function() {
+                       this.labelContainer = $(this.settings.errorLabelContainer);
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+                       this.submitted = {};
+                       this.valueCache = {};
+                       this.pendingRequest = 0;
+                       this.pending = {};
+                       this.invalid = {};
+                       this.reset();
+
+                       var groups = (this.groups = {});
+                       $.each(this.settings.groups, function(key, value) {
+                               $.each(value.split(/\s/), function(index, name) {
+                                       groups[name] = key;
+                               });
+                       });
+                       var rules = this.settings.rules;
+                       $.each(rules, function(key, value) {
+                               rules[key] = $.validator.normalizeRule(value);
+                       });
+
+                       function delegate(event) {
+                               var validator = $.data(this[0].form, "validator"),
+                                       eventType = "on" + event.type.replace(/^validate/, "");
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+                       }
+                       $(this.currentForm)
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +
+                                               "[type='range'], [type='color'] ",
+                                               "focusin focusout keyup", delegate)
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+                       if (this.settings.invalidHandler)
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/form
+               form: function() {
+                       this.checkForm();
+                       $.extend(this.submitted, this.errorMap);
+                       this.invalid = $.extend({}, this.errorMap);
+                       if (!this.valid())
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                       this.showErrors();
+                       return this.valid();
+               },
+
+               // 원본소스
+               /*
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               this.check( elements[i] );
+                       }
+                       return this.valid();
+               },
+               */
+
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+                                               this.check( this.findByName( elements[i].name )[cnt] );
+                                       }
+                               } else {
+                                       this.check( elements[i] );
+                               }
+                       }
+                       return this.valid();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/element
+               element: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+                       this.lastElement = element;
+                       this.prepareElement( element );
+                       this.currentElements = $(element);
+                       var result = this.check( element );
+                       if ( result ) {
+                               delete this.invalid[element.name];
+                       } else {
+                               this.invalid[element.name] = true;
+                       }
+                       if ( !this.numberOfInvalids() ) {
+                               // Hide error containers on last error
+                               this.toHide = this.toHide.add( this.containers );
+                       }
+                       this.showErrors();
+                       return result;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+               showErrors: function(errors) {
+                       if(errors) {
+                               // add items to error list and map
+                               $.extend( this.errorMap, errors );
+                               this.errorList = [];
+                               for ( var name in errors ) {
+                                       this.errorList.push({
+                                               message: errors[name],
+                                               element: this.findByName(name)[0]
+                                       });
+                               }
+                               // remove items from success list
+                               this.successList = $.grep( this.successList, function(element) {
+                                       return !(element.name in errors);
+                               });
+                       }
+                       this.settings.showErrors
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+                               : this.defaultShowErrors();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+               resetForm: function() {
+                       if ( $.fn.resetForm )
+                               $( this.currentForm ).resetForm();
+                       this.submitted = {};
+                       this.lastElement = null;
+                       this.prepareForm();
+                       this.hideErrors();
+                       this.elements().removeClass( this.settings.errorClass );
+               },
+
+               numberOfInvalids: function() {
+                       return this.objectLength(this.invalid);
+               },
+
+               objectLength: function( obj ) {
+                       var count = 0;
+                       for ( var i in obj )
+                               count++;
+                       return count;
+               },
+
+               hideErrors: function() {
+                       this.addWrapper( this.toHide ).hide();
+               },
+
+               valid: function() {
+                       return this.size() == 0;
+               },
+
+               size: function() {
+                       return this.errorList.length;
+               },
+
+               focusInvalid: function() {
+                       if( this.settings.focusInvalid ) {
+                               try {
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+                                       .filter(":visible")
+                                       .focus()
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+                                       .trigger("focusin");
+                               } catch(e) {
+                                       // ignore IE throwing errors when focusing hidden elements
+                               }
+                       }
+               },
+
+               findLastActive: function() {
+                       var lastActive = this.lastActive;
+                       return lastActive && $.grep(this.errorList, function(n) {
+                               return n.element.name == lastActive.name;
+                       }).length == 1 && lastActive;
+               },
+
+               elements: function() {
+                       var validator = this,
+                               rulesCache = {};
+
+                       // select all valid inputs inside the form (no submit or reset buttons)
+                       return $(this.currentForm)
+                       .find("input, select, textarea")
+                       .not(":submit, :reset, :image, [disabled]")
+                       .not( this.settings.ignore )
+                       .filter(function() {
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+                               // select only the first element for each name, and only those with rules specified
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+                                       return false;
+
+                               rulesCache[this.name] = true;
+                               return true;
+                       });
+               },
+
+               clean: function( selector ) {
+                       return $( selector )[0];
+               },
+
+               errors: function() {
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+               },
+
+               reset: function() {
+                       this.successList = [];
+                       this.errorList = [];
+                       this.errorMap = {};
+                       this.toShow = $([]);
+                       this.toHide = $([]);
+                       this.currentElements = $([]);
+               },
+
+               prepareForm: function() {
+                       this.reset();
+                       this.toHide = this.errors().add( this.containers );
+               },
+
+               prepareElement: function( element ) {
+                       this.reset();
+                       this.toHide = this.errorsFor(element);
+               },
+
+               check: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+
+                       var rules = $(element).rules();
+                       var dependencyMismatch = false;
+                       for (var method in rules ) {
+                               var rule = { method: method, parameters: rules[method] };
+                               try {
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+                                       // if a method indicates that the field is optional and therefore valid,
+                                       // don't mark it as valid when there are no other rules
+                                       if ( result == "dependency-mismatch" ) {
+                                               dependencyMismatch = true;
+                                               continue;
+                                       }
+                                       dependencyMismatch = false;
+
+                                       if ( result == "pending" ) {
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );
+                                               return;
+                                       }
+
+                                       if( !result ) {
+                                               this.formatAndAdd( element, rule );
+                                               return false;
+                                       }
+                               } catch(e) {
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+                                                + ", check the '" + rule.method + "' method", e);
+                                       throw e;
+                               }
+                       }
+                       if (dependencyMismatch)
+                               return;
+                       if ( this.objectLength(rules) )
+                               this.successList.push(element);
+                       return true;
+               },
+
+               // return the custom message for the given element and validation method
+               // specified in the element's "messages" metadata
+               customMetaMessage: function(element, method) {
+                       if (!$.metadata)
+                               return;
+
+                       var meta = this.settings.meta
+                               ? $(element).metadata()[this.settings.meta]
+                               : $(element).metadata();
+
+                       return meta && meta.messages && meta.messages[method];
+               },
+
+               // return the custom message for the given element name and validation method
+               customMessage: function( name, method ) {
+                       var m = this.settings.messages[name];
+                       return m && (m.constructor == String
+                               ? m
+                               : m[method]);
+               },
+
+               // return the first defined argument, allowing empty strings
+               findDefined: function() {
+                       for(var i = 0; i < arguments.length; i++) {
+                               if (arguments[i] !== undefined)
+                                       return arguments[i];
+                       }
+                       return undefined;
+               },
+
+               defaultMessage: function( element, method) {
+                       return this.findDefined(
+                               this.customMessage( element.name, method ),
+                               this.customMetaMessage( element, method ),
+                               // title is never undefined, so handle empty string as undefined
+                               !this.settings.ignoreTitle && element.title || undefined,
+                               $.validator.messages[method],
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"
+                       );
+               },
+
+               formatAndAdd: function( element, rule ) {
+                       var message = this.defaultMessage( element, rule.method ),
+                               theregex = /\$?\{(\d+)\}/g;
+                       if ( typeof message == "function" ) {
+                               message = message.call(this, rule.parameters, element);
+                       } else if (theregex.test(message)) {
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+                       }
+                       this.errorList.push({
+                               message: message,
+                               element: element
+                       });
+
+                       this.errorMap[element.name] = message;
+                       this.submitted[element.name] = message;
+               },
+
+               addWrapper: function(toToggle) {
+                       if ( this.settings.wrapper )
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+                       return toToggle;
+               },
+
+               defaultShowErrors: function() {
+                       for ( var i = 0; this.errorList[i]; i++ ) {
+                               var error = this.errorList[i];
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+                               this.showLabel( error.element, error.message );
+                       }
+                       if( this.errorList.length ) {
+                               this.toShow = this.toShow.add( this.containers );
+                       }
+                       if (this.settings.success) {
+                               for ( var i = 0; this.successList[i]; i++ ) {
+                                       this.showLabel( this.successList[i] );
+                               }
+                       }
+                       if (this.settings.unhighlight) {
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+                               }
+                       }
+                       this.toHide = this.toHide.not( this.toShow );
+                       this.hideErrors();
+                       this.addWrapper( this.toShow ).show();
+               },
+
+               validElements: function() {
+                       return this.currentElements.not(this.invalidElements());
+               },
+
+               invalidElements: function() {
+                       return $(this.errorList).map(function() {
+                               return this.element;
+                       });
+               },
+
+               showLabel: function(element, message) {
+                       var label = this.errorsFor( element );
+                       if ( label.length ) {
+                               // refresh error/success class
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+                               // check if we have a generated label, replace the message then
+                               label.attr("generated") && label.html(message);
+                       } else {
+                               // create label
+                               label = $("<" + this.settings.errorElement + "/>")
+                                       .attr({"for":  this.idOrName(element), generated: true})
+                                       .addClass(this.settings.errorClass)
+                                       .html(message || "");
+                               if ( this.settings.wrapper ) {
+                                       // make sure the element is visible, even in IE
+                                       // actually showing the wrapped element is handled elsewhere
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+                               }
+                               if ( !this.labelContainer.append(label).length )
+                                       this.settings.errorPlacement
+                                               ? this.settings.errorPlacement(label, $(element) )
+                                               : label.insertAfter(element);
+                       }
+                       if ( !message && this.settings.success ) {
+                               label.text("");
+                               typeof this.settings.success == "string"
+                                       ? label.addClass( this.settings.success )
+                                       : this.settings.success( label );
+                       }
+                       this.toShow = this.toShow.add(label);
+               },
+
+               errorsFor: function(element) {
+                       var name = this.idOrName(element);
+               return this.errors().filter(function() {
+                               return $(this).attr('for') == name;
+                       });
+               },
+
+               idOrName: function(element) {
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+               },
+
+               validationTargetFor: function(element) {
+                       // if radio/checkbox, validate first element in group instead
+                       if (this.checkable(element)) {
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
+                       }
+                       return element;
+               },
+
+               checkable: function( element ) {
+                       return /radio|checkbox/i.test(element.type);
+               },
+
+               findByName: function( name ) {
+                       // select by name and filter by form for performance over form.find("[name=...]")
+                       var form = this.currentForm;
+                       return $(document.getElementsByName(name)).map(function(index, element) {
+                               return element.form == form && element.name == name && element  || null;
+                       });
+               },
+
+               getLength: function(value, element) {
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               return $("option:selected", element).length;
+                       case 'input':
+                               if( this.checkable( element) )
+                                       return this.findByName(element.name).filter(':checked').length;
+                       }
+                       return value.length;
+               },
+
+               depend: function(param, element) {
+                       return this.dependTypes[typeof param]
+                               ? this.dependTypes[typeof param](param, element)
+                               : true;
+               },
+
+               dependTypes: {
+                       "boolean": function(param, element) {
+                               return param;
+                       },
+                       "string": function(param, element) {
+                               return !!$(param, element.form).length;
+                       },
+                       "function": function(param, element) {
+                               return param(element);
+                       }
+               },
+
+               optional: function(element) {
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+               },
+
+               startRequest: function(element) {
+                       if (!this.pending[element.name]) {
+                               this.pendingRequest++;
+                               this.pending[element.name] = true;
+                       }
+               },
+
+               stopRequest: function(element, valid) {
+                       this.pendingRequest--;
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0
+                       if (this.pendingRequest < 0)
+                               this.pendingRequest = 0;
+                       delete this.pending[element.name];
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+                               $(this.currentForm).submit();
+                               this.formSubmitted = false;
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                               this.formSubmitted = false;
+                       }
+               },
+
+               previousValue: function(element) {
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
+                               old: null,
+                               valid: true,
+                               message: this.defaultMessage( element, "remote" )
+                       });
+               }
+
+       },
+
+       classRuleSettings: {
+               required: {required: true},
+               email: {email: true},
+               url: {url: true},
+               date: {date: true},
+               dateISO: {dateISO: true},
+               dateDE: {dateDE: true},
+               number: {number: true},
+               numberDE: {numberDE: true},
+               digits: {digits: true},
+               creditcard: {creditcard: true}
+       },
+
+       addClassRules: function(className, rules) {
+               className.constructor == String ?
+                       this.classRuleSettings[className] = rules :
+                       $.extend(this.classRuleSettings, className);
+       },
+
+       classRules: function(element) {
+               var rules = {};
+               var classes = $(element).attr('class');
+               classes && $.each(classes.split(' '), function() {
+                       if (this in $.validator.classRuleSettings) {
+                               $.extend(rules, $.validator.classRuleSettings[this]);
+                       }
+               });
+               return rules;
+       },
+
+       attributeRules: function(element) {
+               var rules = {};
+               var $element = $(element);
+
+               for (var method in $.validator.methods) {
+                       var value;
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
+                       if (method === 'required' && typeof $.fn.prop === 'function') {
+                               value = $element.prop(method);
+                       } else {
+                               value = $element.attr(method);
+                       }
+                       if (value) {
+                               rules[method] = value;
+                       } else if ($element[0].getAttribute("type") === method) {
+                               rules[method] = true;
+                       }
+               }
+
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+                       delete rules.maxlength;
+               }
+
+               return rules;
+       },
+
+       metadataRules: function(element) {
+               if (!$.metadata) return {};
+
+               var meta = $.data(element.form, 'validator').settings.meta;
+               return meta ?
+                       $(element).metadata()[meta] :
+                       $(element).metadata();
+       },
+
+       staticRules: function(element) {
+               var rules = {};
+               var validator = $.data(element.form, 'validator');
+               if (validator.settings.rules) {
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+               }
+               return rules;
+       },
+
+       normalizeRules: function(rules, element) {
+               // handle dependency check
+               $.each(rules, function(prop, val) {
+                       // ignore rule when param is explicitly false, eg. required:false
+                       if (val === false) {
+                               delete rules[prop];
+                               return;
+                       }
+                       if (val.param || val.depends) {
+                               var keepRule = true;
+                               switch (typeof val.depends) {
+                                       case "string":
+                                               keepRule = !!$(val.depends, element.form).length;
+                                               break;
+                                       case "function":
+                                               keepRule = val.depends.call(element, element);
+                                               break;
+                               }
+                               if (keepRule) {
+                                       rules[prop] = val.param !== undefined ? val.param : true;
+                               } else {
+                                       delete rules[prop];
+                               }
+                       }
+               });
+
+               // evaluate parameters
+               $.each(rules, function(rule, parameter) {
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+               });
+
+               // clean number parameters
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
+                       if (rules[this]) {
+                               rules[this] = Number(rules[this]);
+                       }
+               });
+               $.each(['rangelength', 'range'], function() {
+                       if (rules[this]) {
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+                       }
+               });
+
+               if ($.validator.autoCreateRanges) {
+                       // auto-create ranges
+                       if (rules.min && rules.max) {
+                               rules.range = [rules.min, rules.max];
+                               delete rules.min;
+                               delete rules.max;
+                       }
+                       if (rules.minlength && rules.maxlength) {
+                               rules.rangelength = [rules.minlength, rules.maxlength];
+                               delete rules.minlength;
+                               delete rules.maxlength;
+                       }
+               }
+
+               // To support custom messages in metadata ignore rule methods titled "messages"
+               if (rules.messages) {
+                       delete rules.messages;
+               }
+
+               return rules;
+       },
+
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+       normalizeRule: function(data) {
+               if( typeof data == "string" ) {
+                       var transformed = {};
+                       $.each(data.split(/\s/), function() {
+                               transformed[this] = true;
+                       });
+                       data = transformed;
+               }
+               return data;
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+       addMethod: function(name, method, message) {
+               $.validator.methods[name] = method;
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+               if (method.length < 3) {
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
+               }
+       },
+
+       methods: {
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/required
+               required: function(value, element, param) {
+                       // check if dependency is met
+                       if ( !this.depend(param, element) )
+                               return "dependency-mismatch";
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               // could be an array for select-multiple or a string, both are fine this way
+                               var val = $(element).val();
+                               return val && val.length > 0;
+                       case 'input':
+                               if ( this.checkable(element) )
+                                       return this.getLength(value, element) > 0;
+                       default:
+                               return $.trim(value).length > 0;
+                       }
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote
+               remote: function(value, element, param) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+
+                       var previous = this.previousValue(element);
+                       if (!this.settings.messages[element.name] )
+                               this.settings.messages[element.name] = {};
+                       previous.originalMessage = this.settings.messages[element.name].remote;
+                       this.settings.messages[element.name].remote = previous.message;
+
+                       param = typeof param == "string" && {url:param} || param;
+
+                       if ( this.pending[element.name] ) {
+                               return "pending";
+                       }
+                       if ( previous.old === value ) {
+                               return previous.valid;
+                       }
+
+                       previous.old = value;
+                       var validator = this;
+                       this.startRequest(element);
+                       var data = {};
+                       data[element.name] = value;
+                       $.ajax($.extend(true, {
+                               url: param,
+                               mode: "abort",
+                               port: "validate" + element.name,
+                               dataType: "json",
+                               data: data,
+                               success: function(response) {
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;
+                                       var valid = response === true;
+                                       if ( valid ) {
+                                               var submitted = validator.formSubmitted;
+                                               validator.prepareElement(element);
+                                               validator.formSubmitted = submitted;
+                                               validator.successList.push(element);
+                                               validator.showErrors();
+                                       } else {
+                                               var errors = {};
+                                               var message = response || validator.defaultMessage( element, "remote" );
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+                                               validator.showErrors(errors);
+                                       }
+                                       previous.valid = valid;
+                                       validator.stopRequest(element, valid);
+                               }
+                       }, param));
+                       return "pending";
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
+               minlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+               maxlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+               rangelength: function(value, element, param) {
+                       var length = this.getLength($.trim(value), element);
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/min
+               min: function( value, element, param ) {
+                       return this.optional(element) || value >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/max
+               max: function( value, element, param ) {
+                       return this.optional(element) || value <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/range
+               range: function( value, element, param ) {
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/email
+               email: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/url
+               url: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/date
+               date: function(value, element) {
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+               dateISO: function(value, element) {
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/number
+               number: function(value, element) {
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits
+               digits: function(value, element) {
+                       return this.optional(element) || /^\d+$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+               // based on http://en.wikipedia.org/wiki/Luhn
+               creditcard: function(value, element) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+                       // accept only spaces, digits and dashes
+                       if (/[^0-9 -]+/.test(value))
+                               return false;
+                       var nCheck = 0,
+                               nDigit = 0,
+                               bEven = false;
+
+                       value = value.replace(/\D/g, "");
+
+                       for (var n = value.length - 1; n >= 0; n--) {
+                               var cDigit = value.charAt(n);
+                               var nDigit = parseInt(cDigit, 10);
+                               if (bEven) {
+                                       if ((nDigit *= 2) > 9)
+                                               nDigit -= 9;
+                               }
+                               nCheck += nDigit;
+                               bEven = !bEven;
+                       }
+
+                       return (nCheck % 10) == 0;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept
+               accept: function(value, element, param) {
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+               equalTo: function(value, element, param) {
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+                               $(element).valid();
+                       });
+                       return value == target.val();
+               }
+
+       }
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+       var pendingRequests = {};
+       // Use a prefilter if available (1.5+)
+       if ( $.ajaxPrefilter ) {
+               $.ajaxPrefilter(function(settings, _, xhr) {
+                       var port = settings.port;
+                       if (settings.mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               pendingRequests[port] = xhr;
+                       }
+               });
+       } else {
+               // Proxy ajax
+               var ajax = $.ajax;
+               $.ajax = function(settings) {
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+                       if (mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               return (pendingRequests[port] = ajax.apply(this, arguments));
+                       }
+                       return ajax.apply(this, arguments);
+               };
+       }
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+       // only implement if not provided by jQuery core (since 1.4)
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+               $.each({
+                       focus: 'focusin',
+                       blur: 'focusout'
+               }, function( original, fix ){
+                       $.event.special[fix] = {
+                               setup:function() {
+                                       this.addEventListener( original, handler, true );
+                               },
+                               teardown:function() {
+                                       this.removeEventListener( original, handler, true );
+                               },
+                               handler: function(e) {
+                                       arguments[0] = $.event.fix(e);
+                                       arguments[0].type = fix;
+                                       return $.event.handle.apply(this, arguments);
+                               }
+                       };
+                       function handler(e) {
+                               e = $.event.fix(e);
+                               e.type = fix;
+                               return $.event.handle.call(this, e);
+                       }
+               });
+       };
+       $.extend($.fn, {
+               validateDelegate: function(delegate, type, handler) {
+                       return this.bind(type, function(event) {
+                               var target = $(event.target);
+                               if (target.is(delegate)) {
+                                       return handler.apply(target, arguments);
+                               }
+                       });
+               }
+       });
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.devtools/html/scripts/jquery.zclip.min.js b/org.tizen.devtools/html/scripts/jquery.zclip.min.js
new file mode 100644 (file)
index 0000000..51471a1
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.devtools/html/scripts/navi.js b/org.tizen.devtools/html/scripts/navi.js
new file mode 100644 (file)
index 0000000..badc738
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[
+    var staticURL = "http://img-developer.samsung.com";
+       var sslCall = "";
+
+       if('' !== 'N') {
+               var locationStr = location.href;
+               if(locationStr.indexOf("https://") > -1) {
+                       location.href = "http://" + locationStr.substring(8);
+               }     
+    }
+
+//     if( typeof($) === function ) {
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+               //? ??? ?? ?? ??? ?? ?? ???.
+//     }
+    $SD.pagination.alt = {
+               first:"go first",
+               prev:"go prev",
+               next:"go next",
+               last:"go last"
+    };
+    $(document).ready(function(){
+       var myVar;
+           topSearchInit();//top search ??
+           $('#searchTop').attr("autocomplete","off");
+           var searchingBoolean = false;
+           
+           var topSearchChange = function(){
+               
+               if (searchingBoolean) return;
+               
+                       var searchInput = $('#searchTop').val();
+                       
+                       if($('#searchTop').val() != ""){
+                               $("#topAutocomplete").hide();
+                               searchingBoolean = true;
+                               
+                               var jsonData = {
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+                                               async : true,
+                                               data : { searchInput : searchInput},
+                                               success : function(data){
+                                                       if (searchInput == $('#searchTop').val()){
+                                                               var autoComplete = data.kwdNm;
+                                                               var tmpHtml = "";
+                                                               
+                                                               if (autoComplete.length > 0){
+                                                                       $('#topAutocomplete').children().remove();
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+                                                                       $.each(autoComplete, function(i, item){
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+                                                                               a.data('keyword', item.kwdNm);
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
+                                                                       });
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+                                                                               if(e.which == 9 && e.shiftKey) {
+                                                                                       return true;
+                                                                               }
+                                                                               
+                                                                               if(e.which == 9) {
+                                                                                       e.preventDefault();
+                                                                                       $('#topAutocomplete').hide();   
+                                                                                       setTimeout(function() {
+                                                                                               $("#searchTopBtn").focus();
+                                                                                       }, 1);
+                                                                               }
+                                                                               
+                                                                       });
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});
+                                                                   $("#searchTopBtn").on("focusout", function(e) {
+                                                                               $('#topAutocomplete').hide();
+                                                                       });
+                                                               }else{
+                                                                       $('#topAutocomplete').children().remove();
+                                                               }
+                                                               if($('#searchTop').val() == ""){
+                                                                       $("#topAutocomplete").hide();
+                                                                       searchingBoolean = false;
+                                                                       return;
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               searchingBoolean = false;
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                               if (autoComplete.length == 0){
+                                                                       $("#topAutocomplete").hide();
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               $("#topAutocomplete").show();
+                                                                               var $searchList = $("#topAutocomplete").find('ul');
+                                                                               var hei = $searchList.outerHeight();
+                                                                               if(hei>180){
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
+                                                                               }
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                       }else{
+                                                               searchingBoolean = false;
+                                                               topSearchChange();
+                                                       }
+                                               },
+                                               error : function() {searchingBoolean = false;}
+                                               
+                               };
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
+                               $SD.ajax.get(jsonData);
+                               searchingBoolean = false;
+                       }
+                       
+                       //console.log("/search/autoComplete.do end");
+                       //console.groupEnd();
+               };
+               
+               $('#searchTop').keyup(function(e){
+                       if($('#searchTop').val() == ""){
+                               $('#topAutocomplete').children().remove();
+                               $("#topAutocomplete").hide();
+                       }else{
+                               if(e.which == 13){
+                                       search();
+                               }else{
+                                       topSearchChange();
+                               }
+                       }
+               });
+               
+               var search = function(){
+                       if($.trim($('#searchTop').val()) == ""){
+                               alert('Search keyword is required.');
+                       }else{
+                               $('#topSearchForm').submit();
+                       }
+               };
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){
+                       e.preventDefault();
+                       var keyword = $(this).data('keyword');
+                       $("#searchTop").val(keyword);
+                       $('#topSearchForm').submit();
+               });
+               
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+                       if(e.which == 13) {
+                               e.preventDefault();
+                               var keyword = $(this).data('keyword');
+                               $("#searchTop").val(keyword);
+                               $('#topSearchForm').submit();                   
+                       }
+               });
+               
+               $('#searchTopBtn').click(function(e){
+                       search();       
+               });  
+    });
+    
+    function topSearchEnter(){
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+               alert('Search keyword is required.');
+               return false;
+       }else{
+               return true;
+       }
+    }
+
+/* Tracking Code TOTAL */
+               var _gaq = _gaq || [];
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+               _gaq.push(['_setAccount', 'UA-6892706-3']);
+               _gaq.push(['_setDomainName', 'samsung.com']);
+               _gaq.push(['_setAllowLinker', true]);
+               _gaq.push(['_trackPageview']);
+               (function() {
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                 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);
+               })();
+       
+               <!--// Tracking Code 1 -->
+                       var _gaq = _gaq || [];
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);
+                       _gaq.push(['_trackPageview']);
+                       (function() {
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                         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);
+                       })();
diff --git a/org.tizen.devtools/html/scripts/search.js b/org.tizen.devtools/html/scripts/search.js
new file mode 100644 (file)
index 0000000..d1ae5ad
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+       var focusTarget = "input";
+
+       //$("#autocomplete").hide();
+
+       //$("#searchInput").bind("keydown", checkSearchText);
+       
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $("#autocomplete").bind("mouseleave",function(){
+               $(this).hide();
+               $("#btnDropdown").removeClass("dropdownoff");
+               $("#btnDropdown").addClass("dropdown");         
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       //$(".autocomplete").css("visibility", "visible");
+                       $("#autocomplete").show();
+                       
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+               }
+               else{
+                       //$(".autocomplete").css("visibility", "hidden");
+                       $("#autocomplete").hide();
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+
+
+
+function topSearchInit()
+{
+       var focusTarget = "input";
+
+       //$("#searchTop").bind("keydown", checkSearchText);
+       
+       $("#searchTop").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {       
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchTop" ).focusin( function()   {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchTop").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".topAutocomplete").css("visibility", "visible");
+               }else{
+                       $(".topAutocomplete").css("visibility", "hidden");
+                       $("#topAutocomplete").hide();
+               }
+       }
+}
diff --git a/org.tizen.devtools/html/scripts/showhide.js b/org.tizen.devtools/html/scripts/showhide.js
new file mode 100644 (file)
index 0000000..cf3dc21
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/showhide.js
@@ -0,0 +1,200 @@
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+       me.find('em').text('Hide');
+       me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+       var me = $(this);
+       var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+       if ( me.next().is(':visible') ){
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+               me.find('em').text('Show');
+               me.next().hide();
+       }
+                                       
+});
+return false;
+})
+}      
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+       var idx = $('.devicespec-tit a').index(this);
+
+       if ( $(this).parent().parent().next().is(':visible') ){
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+               self.find('em').text('Show');
+               self.next().hide();
+
+               return false;
+       }else{
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+               self.find('em').text('Hide');
+
+               self.next().show();
+
+               return false;
+       }
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow =  $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+       var openheading = function(target) {
+               var origin = $(target);
+               target = origin.closest('.devicespec-con');
+               if (!(target.length > 0)) {
+                       target = origin.closest('.devicespec-tit');
+               }
+               if (target.length > 0) {
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
+                       }
+               }
+
+               $(window.location.hash)[0].scrollIntoView();
+       };
+
+       $(".opensection").click(function(){
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');
+               openheading(target);
+       });
+
+       if (window.location.hash) {
+               var target = $(window.location.hash);
+               openheading(target);
+               //$(target).focus(); //uncomment if fail to work
+       }
+
+       var isScrolledIntoView = function(elem)
+       {
+               var docViewTop = $('#contents').scrollTop();
+               var docViewBottom = docViewTop + $('#contents').height();
+
+               var elemTop = $(elem).offset().top;
+               var elemBottom = elemTop + $(elem).height();
+
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
+       }
+
+       $('#contents').scroll();
+       
+
+       var updateH = function(){
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+                       $('.help_breadcrumbs').hide();
+               } else {
+                       $('a.top.sms').hide();
+                       $('.help_breadcrumbs').show();
+               }
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
+
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+
+               if ($('a.top').is(':visible'))
+               {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+               } else {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+               }
+               $('#toc').css('height', $('#toc').css('height') - 5);
+
+               $('#toc_border').height($('#toc').outerHeight() + 5);
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+               $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+               //$('#toc').css('width', $('#toc_border').width() - 40);
+               $('#toc').css('width', $('#toc_border').width() - 49);
+       };
+
+       var updateH_no_toc = function() {
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+               } else {
+                       $('a.top.sms').hide();
+               }
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+       }
+
+       if ($('body').hasClass('no-toc')) {
+               updateH = updateH_no_toc;
+       }
+       $(window).resize(updateH);
+       $('#contents').scroll(updateH);
+       $(window).resize();
+       
+       $('a.top').click(function(){$('#contents').scrollTop(0)});
+
+       var hashchanged = function() {
+               if (window.location.hash.length) {
+                       openheading(window.location.hash);
+                       //$(window.location.hash).scrollTo();
+                       $(window.location.hash)[0].scrollIntoView();
+
+               } else 
+               {
+                       $('#contents').scrollTop(0);
+               }
+       };
+
+       if (("onhashchange" in window) && !($.browser.msie)) { 
+               $(window).bind( 'hashchange',hashchanged);
+       }
+       else { 
+               var prevHash = window.location.hash;
+               window.setInterval(function () {
+                       if (window.location.hash != prevHash) {
+                               hashchanged();
+                               prevHash = window.location.hash;
+                       }
+               }, 100);
+       }
+});
diff --git a/org.tizen.devtools/html/scripts/snippet.js b/org.tizen.devtools/html/scripts/snippet.js
new file mode 100644 (file)
index 0000000..777e9ae
--- /dev/null
+++ b/org.tizen.devtools/html/scripts/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.devtools/html/web_tools/code_beautifier_w.htm b/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
new file mode 100644 (file)
index 0000000..a567ced
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Code Beautifier </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+  <h1>Code Beautifier</h1> 
+  <p>The Code Beautifier is a smart decompression tool that beautifies any HTML, CSS, or JavaScript source by reformatting and re-indenting without breaking the content structure.
+</p> 
+  <p>The Code Beautifier has the following features for beautifying HTML, CSS, and JavaScript:</p>
+     <ul><li>Beautifying minified code</li> 
+<li>Inserting indentation</li> 
+<li>Inserting carriage returns</li> 
+</ul>
+  
+  <p>You can beautify code in 3 ways:</p> 
+  <ul><li>In the <strong>Project Explorer</strong> view, right-click a CSS or JavaScript file in the project and select <strong>Code Beautifier</strong>. A beautified file with the extension <span style="font-family: Courier New,Courier,monospace">.beaut.&lt;extension&gt;</span> is generated, and a notification dialog is displayed in the lower-right section of the IDE.</li>
+  <li>In the <strong>Editor </strong> context menu, select <strong>Code Beautifier</strong>.</li>
+  <li>Use the <strong>Ctrl + 6</strong> hotkey.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/code_minifier_w.htm b/org.tizen.devtools/html/web_tools/code_minifier_w.htm
new file mode 100644 (file)
index 0000000..63d5451
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/code_minifier_w.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Code Minifier </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+  <h1>Code Minifier</h1> 
+  <p>The Code Minifier is a smart compression tool that minifies HTML, CSS, and JavaScript source by removing extra white spaces, comments, and other unnecessary characters without breaking the source content structure. The resulting minified code is smaller in size and has a faster load time.</p> 
+  
+  <p>The Code Minifier has the following features:</p> 
+  <ul> 
+   <li>Minifying HTML 
+               <ul>
+               <li>Removing comments</li>              
+               <li>Replacing multiple white space characters and line breaks with spaces</li>          
+               <li>Compressing inline CSS code</li>            
+               <li>Compressing inline JavaScript code</li>             
+               </ul></li>
+   <li>Minifying CSS   
+               <ul>
+               <li>Removing comments and white space</li>
+               <li>Removing the last semi-colon</li> 
+               <li>Removing extra semi-colons</li> 
+               <li>Removing empty declarations</li> 
+               <li>Removing, for example, zero values, floats, and color values</li>           
+               </ul></li>
+   <li>Minifying JavaScript 
+               <ul>
+               <li>Removing comments</li> 
+               <li>Removing extra white space</li> 
+               <li>Replacing identifiers</li> 
+               <li>Performing micro-optimizations</li>                 
+               </ul></li>
+
+
+  </ul> 
+  <p>You can minify code in 3 ways:</p>
+  <ul>
+  <li>In the <strong>Project Explorer</strong> view, right-click a CSS or JavaScript file in the project and select <strong>Code Minifier</strong>. A minified (compressed) file with the extension <span style="font-family: Courier New,Courier,monospace">.min.&lt;extension&gt;</span> is generated, and a notification dialog is displayed in the lower-right section of the IDE.</li>
+  <li>In the <strong>Editor</strong> context menu, select <strong>Code Minifier</strong>.</li>
+  <li>Use the <strong>Ctrl + 5</strong> hotkey.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/command_line_interface_w.htm b/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
new file mode 100644 (file)
index 0000000..f4b4ee0
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
@@ -0,0 +1,366 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Command Line Interface</title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation"></div>
+       
+       
+       
+
+
+<div id="container"><div id="contents"><div class="content">
+
+<div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+       </div>
+ <h1>Command Line Interface</h1>
+
+ <p>The Web CLI (command line interface) provides the functional tools for developing Tizen Web applications without the Tizen IDE. It includes the entire developing process from creating to running and debugging the project. The CLI is located in the <span style="font-family: Courier New,Courier,monospace;">$&lt;TIZEN_SDK_HOME&gt;/tools/ide/bin</span> directory. For developing an application using the CLI, set a path to the CLI directory using the following command:</p>
+
+<pre class="prettyprint">
+export PATH=$&lt;TIZEN_SDK_HOME&gt;/tools/ide/bin
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This tool is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>The CLI in the IDE provides the functional commands for:</p>
+<ul class="ul">
+<li><a href="#mw_cli_config">Setting CLI configuration options</a></li>
+<li><a href="#mw_list">Displaying a sub-command list</a></li>
+<li><a href="#mw_create">Creating a project</a></li>
+<li><a href="#mw_build">Building the project</a></li>
+<li><a href="#mw_package">Packaging the project</a></li>
+<li><a href="#mw_install">Installing the package</a></li>
+<li><a href="#mw_uninstall">Uninstalling the package</a></li>
+<li><a href="#mw_run">Running the application</a></li>
+<li><a href="#mw_version">Displaying version information</a></li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To use the CLI, you need the Java Runtime Environment 6 or later. </td>
+</tr>
+</tbody>
+</table> 
+
+<p>The following table lists the available CLI commands.</p>
+
+ <table> 
+   <caption>
+     Table: CLI commands 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Command</th> 
+     <th>Options</th> 
+     <th>Description</th> 
+        <th>Example</th> 
+    </tr> 
+    <tr id="mw_cli_config"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen cli-config</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen cli-config [-g|--global] &lt;key&gt;=&lt;value&gt;
+tizen cli-config -l | --list
+</pre>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-l, --list</span>:
+<p>Shows the list of all CLI configuration keys and values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-g, --global</span>:
+<p>Sets the CLI configuration key and value as global.</p></li>
+</ul></td>
+        <td>Queries, sets, replaces, and unsets CLI setting options.
+        <p>The key and the name are separated by an equal sign.</p>
+<p>The CLI configuration keys are:</p>
+<ul class="ul">
+
+<li><span style="font-family: Courier New,Courier,monospace;">default.profiles.path=&lt;path of profile.xml&gt;</span><p>
+Sets the path to the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">default.sdb.timeout=&lt;timeout value&gt;</span><p>
+Sets the default connection timeout value. The default is 60000 milliseconds.</p></li>
+</ul>
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Set the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> path globally:</p>
+<pre class="prettyprint">
+$ tizen cli-config -g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
+</pre></li>
+<li><p>List all options for which values are set:</p>
+<pre class="prettyprint">
+$ tizen cli-config -l
+default.build.architecture=x86
+default.build.compiler=llvm
+default.build.configuration=Debug
+default.profiles.path=/home/mustafa/workspace/0904/.metadata/.plugins/org.tizen.common.sign/profiles.xml
+default.sdb.timeout=60000
+</pre></li>
+
+</ul></td>
+        </tr>
+    <tr id="mw_list"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen list</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen list web-project
+</pre></td>
+        <td>Shows what kind of template each profile supports, and the list corresponding with the given sub-command.
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>List all templates:</p>
+<pre class="prettyprint">
+$ tizen list web-project
+&nbsp;&nbsp;&nbsp;[PROFILE]           [TEMPLATE]
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIBuilderforTAUEmptyApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIBuilderforTAUSinglePageApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIBuilderforTAUNavigationApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           jQueryMobileNavigationApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           jQueryMobileMasterDetailApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIFrameworkNavigationApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIFrameworkSinglePageApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIFrameworkMasterDetailApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           jQueryMobileSinglePageApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIBuilderforTAUMultiPageApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           BasicBasicApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           jQueryMobileMultiPageApplication
+&nbsp;&nbsp;&nbsp;mobile-2.3           TizenWebUIFrameworkMultiPageApplication
+&nbsp;&nbsp;&nbsp;wearable-2.3         IMEApplicationWebIMEapplication
+&nbsp;&nbsp;&nbsp;wearable-2.3         BasicjQuerytemplate
+&nbsp;&nbsp;&nbsp;wearable-2.3         BasicBasicapplication
+&nbsp;&nbsp;&nbsp;wearable-2.3         WearableUIBasicapplication
+&nbsp;&nbsp;&nbsp;wearable-2.3         WearableUIListapplication
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="mw_create"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen create</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen create web-project [-p|--profile &lt;profile name&gt;] [-t|--template &lt;predefined template&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;[-n|--name &lt;project name&gt;] [-- &lt;project location&gt;]</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-p, --profile</span>:
+<p>Sets the profile name.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --template</span>:
+<p>Sets the template name.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-n, --name</span>:
+<p>Sets the project name.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the project destination directory.</p></li>
+</ul></td>
+        <td>Creates a Tizen Web project. If an option is empty, the default project is generated from the default template.</td>
+     <td> 
+<ul class="ul">
+<li><p>Create the template project based on the basic Tizen mobile UI project:</p>
+<pre class="prettyprint">
+$ tizen create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- /home/workspace
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="mw_build"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen build-web</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen build-web [-opt | --optimize] [-euf | --exclude-uifw] [-e | --exclude] [-out | --output] [--]
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-opt, --optimize</span>:
+<p>Optimizes the application size. The Javascript and CSS files are minimized and the Tizen Web UI framework source is excluded. The related link address is modified to a platform-dependent location instead.
+</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-euf, --exclude-uifw</span>:
+<p>Specifies whether to exclude the Tizen Web UI framework. Uses the Tizen UI framework in the target. This option is only used for applications using the Tizen UI framework.
+</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-e, --exclude</span>:
+<p>Specifies the exclude file list. Excludes the file pattern. By default, the following resources are excluded:</p>
+<p><span style="font-family: Courier New,Courier,monospace;">.build/*</span>, <span style="font-family: Courier New,Courier,monospace;">.build</span>, <span style="font-family: Courier New,Courier,monospace;">.sign/*</span>, <span style="font-family: Courier New,Courier,monospace;">.sign</span>, <span style="font-family: Courier New,Courier,monospace;">webUnitTest/*</span>, <span style="font-family: Courier New,Courier,monospace;">webUnitTest</span>, <span style="font-family: Courier New,Courier,monospace;">.externalToolBuilders/*</span>, <span style="font-family: Courier New,Courier,monospace;">.externalToolBuilders</span>, <span style="font-family: Courier New,Courier,monospace;">.buildResult/*</span>, <span style="font-family: Courier New,Courier,monospace;">.buildResult</span>, <span style="font-family: Courier New,Courier,monospace;">.settings/*</span>, <span style="font-family: Courier New,Courier,monospace;">.settings</span>, <span style="font-family: Courier New,Courier,monospace;">.package/*</span>, <span style="font-family: Courier New,Courier,monospace;">.package</span>, <span style="font-family: Courier New,Courier,monospace;">.tproject</span>, <span style="font-family: Courier New,Courier,monospace;">.project</span>, <span style="font-family: Courier New,Courier,monospace;">.sdk_delta.info</span>, <span style="font-family: Courier New,Courier,monospace;">.rds_delta</span>, <span style="font-family: Courier New,Courier,monospace;">*.wgt</span>, <span style="font-family: Courier New,Courier,monospace;">.tizen-ui-builder-tool.xml</span></p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">-out, --output</span>:
+<p>Sets the output directory name. If you omit this option, the <span style="font-family: Courier New,Courier,monospace;">.buildResult</span> directory is created under the project directory by default.
+</p></li>
+</ul></td>
+        <td>Builds the Tizen Web project with the default values (if you do not set the options). 
+        <p>In the Web application, there is no need to build a project. However, you can optimize the application (for example, minimize the JavaScript or CSS file and exclude the Tizen Web UI framework sources).</p>
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Build the project with default options:</p>
+<pre class="prettyprint">
+$ tizen build-web -- /home/workspace/basic
+$ cd /home/workspace/basic/.buildResult
+</pre></li>
+</ul>
+</td>
+        </tr>   
+    <tr id="mw_package"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen package</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen package [-t | --type &lt;package type&gt;] [-s | --sign &lt;security profile name&gt;] [--]
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --type</span>:
+<p>Sets the package type.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-s, --sign</span>:
+<p>Sets the profile name to use for signing.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the built project path.</p></li>
+</ul></td>
+        <td>Packages the Tizen application with signing.
+<p>The Tizen application is signed with a certified profile named <span style="font-family: Courier New,Courier,monospace">profiles.xml</span>. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<span style="font-family: Courier New,Courier,monospace">&lt;Your workspace directory&gt;/.metadata/.plugins/org.tizen.common.sign/profiles.xml</span>). Set the path of the <span style="font-family: Courier New,Courier,monospace">profile.xml</span> file once before packaging the Tizen application (you can use the <span style="font-family: Courier New,Courier,monospace">tizen cli-config</span> command).</p>
+
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that you already have:</p>
+<pre class="prettyprint">
+$ tizen cli-config -g default.profiles.path=/home/workspace/profiles.xml
+</pre></li>
+<li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that is created from the IDE:</p>
+<pre class="prettyprint">
+$ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
+</pre></li>
+<li><p>Package the profile:</p>
+<pre class="prettyprint">
+$ tizen package --type wgt --sign myprofile -- /home/workspace/basic/.buildResult
+
+$ cd /home/workspace/basic/.buildResult
+
+basic.wgt
+</pre></li></ul>
+</td>
+        </tr> 
+    <tr id="mw_install"> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen install</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen install &lt;-t | -target &lt;target name&gt;&gt; &lt;-n | --name &lt;package name&gt;&gt; [--]
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
+<p>Sets the target, which installs the Tizen package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-n, --name</span>:
+<p>Sets the Tizen package file name, which is going to be installed on the target.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
+<p>Sets the path where the package is.</p></li>
+</ul> </td>
+        <td>Installs a Tizen application to a Tizen device.
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Install the basic application named <span style="font-family: Courier New,Courier,monospace;">basic.wgt</span> to the emulator-26101:</p>
+<pre class="prettyprint">
+$ tizen install --target emulator-26101 --name basic.wgt -- /home/workspace/basic/.buildResult
+</pre></li></ul>
+</td>
+        </tr>
+    <tr id="mw_uninstall">  
+     <td><span style="font-family: Courier New,Courier,monospace">tizen uninstall</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen uninstall &lt;-t | --target &lt;target name&gt;&gt; &lt;-p | --pkgid &lt;package id&gt;&gt;
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
+<p>Sets the target, which uninstalls the Tizen package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
+<p>Sets the installed Tizen package ID on the target.</p></li>
+</ul></td>
+        <td>Uninstalls a Tizen application from a Tizen device.</td>
+     <td> 
+<ul class="ul">
+<li><p>Uninstall the basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">cRG1sLZpWb</span> from the emulator-26101:</p>
+<pre class="prettyprint">
+$ tizen uninstall --target emulator-26101 --pkgid cRG1sLZpWb
+</pre></li></ul>
+</td>
+        </tr>  
+    <tr id="mw_run">  
+     <td><span style="font-family: Courier New,Courier,monospace">tizen run</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen run &lt;-t | --target &lt;target name&gt;&gt; &lt;-p | --pkgid &lt;package id&gt;&gt;
+</pre>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
+<p>Sets the target, which runs the Tizen package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
+<p>Sets the installed Tizen package ID on the target.</p></li>
+</ul></td>
+        <td>Runs the Tizen application.
+        </td>
+     <td> 
+<ul class="ul">
+<li><p>Run the basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic </span> on the emulator-26101:</p>
+<pre class="prettyprint">
+$ tizen run --target emulator-26101 --pkgid cRG1sLZpWb
+</pre></li></ul>
+</td>
+        </tr>   
+    <tr id="mw_version">  
+     <td><span style="font-family: Courier New,Courier,monospace">tizen version</span> </td> 
+     <td> 
+<pre class="prettyprint">
+tizen version
+</pre></td>
+        <td>Prints the CLI version number of the executable and exits.</td>
+     <td> 
+<ul class="ul">
+<li><p>Show the version:</p>
+<pre class="prettyprint">
+$ tizen version
+Tizen CLI 1.0.0</pre></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/web_tools/config_editor_w.htm b/org.tizen.devtools/html/web_tools/config_editor_w.htm
new file mode 100644 (file)
index 0000000..a3ad968
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/config_editor_w.htm
@@ -0,0 +1,1688 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+    <script type="text/javascript" src="../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Configuration Editor </title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li><a href="#hierarchy">Configuration Element Hierarchy</a></li>
+                       <li><a href="#elements">Configuration Elements</a></li>
+                       <li><a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a></li>
+                       <li><a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a></li>
+        </ul>
+    </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Configuration Editor</h1>
+
+  <p>The Tizen Web widget configuration file is composed of XML elements, including the <span style="font-family: Courier New,Courier,monospace">&lt;widget&gt;</span> element as its root and other elements representing the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications. Note that although the <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> element is a W3C element, a modified Tizen extended version of it is used.</p>
+  <p>The configuration file can be edited with the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#set_widget">widget configuration editor</a>, or you can modify the XML structure directly using the configuration text editor. To open the widget configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the configuration text editor, right-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the Project Explorer view and select <strong>Open with &gt; Text Editor</strong>.
+   </p>
+   <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must conform to both the XML file format and the W3C specification requirements. Editing the file XML structure with the configuration text editor is intended for advanced users only.</td>
+    </tr>
+   </tbody>
+  </table>
+  <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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+    <table style="border:none;">
+  <col width="5%"/>
+  <col width="5%"/>
+  <col width="5%"/>
+  <col width="85%"/>
+   <tbody>
+    <tr>
+        <td colspan="4" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#widget">&lt;widget&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#name">&lt;name&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content">&lt;content&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#param">&lt;param&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#license">&lt;license&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#preference">&lt;preference&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#access">&lt;access&gt;</a></span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#mw_account">&lt;tizen:account&gt;</a></span> (in mobile only)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:display-name&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:capability&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> (in <a href="#mw_appcontrol">mobile</a> or <a href="#appcontrol">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:src&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:operation&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uri&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td style="border:none;"></td>
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:mime&gt;</span></td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
+    </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget&gt;</span> (in <a href="#mw_appwidget">mobile</a> or <a href="#ww_appwidget">wearable</a>)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-label&gt;</span> (in <a href="#mw_box-label">mobile</a> or <a href="#ww_box-label">wearable</a>)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-icon&gt;</span> (in <a href="#mw_box-icon">mobile</a> or <a href="#ww_box-icon">wearable</a>)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-content&gt;</span> (in <a href="#mw_box-content">mobile</a> or <a href="#ww_box-content">wearable</a>)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-size&gt;</span> (in <a href="#mw_box-size">mobile</a> or <a href="#ww_box-size">wearable</a>)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:pd&gt;</span> (in <a href="#mw_pd">mobile</a> or <a href="#ww_pd">wearable</a>)</td>
+       </tr>   
+       
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span> (in <a href="#mw_privilege">mobile</a> or <a href="#ww_privilege">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy&gt;</span> (in <a href="#mw_sec">mobile</a> or <a href="#ww_contentsecpolicy">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only&gt;</span> (in <a href="#mw_secreport">mobile</a> or <a href="#ww_contentsecpolicyreport">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation&gt;</span> (in <a href="#mw_navigation">mobile</a> or <a href="#ww_allownavigation">wearable</a>)</td>
+    </tr>
+    <tr>
+        <td style="border:none;"></td>
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span> (in <a href="#mw_metadata">mobile</a> or <a href="#ww_metadata">wearable</a>)</td>
+    </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span> (in <a href="#mw_profile">mobile</a> or <a href="#ww_profile">wearable</a>)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_ime">&lt;tizen:ime&gt;</a></span> (in wearable only)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uuid&gt;</span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:languages&gt;</span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_language">&lt;tizen:language&gt;</a></span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_category">&lt;tizen:category&gt;</a></span> (in wearable only)</td>
+       </tr>
+
+       <tr>
+               <td style="border:none;"></td>
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service">&lt;tizen:service&gt;</a></span> (in wearable only)</td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-name">&lt;tizen:name&gt;</a></span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-icon">&lt;tizen:icon&gt;</a></span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-content">&lt;tizen:content&gt;</a></span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-description">&lt;tizen:description&gt;</a></span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-metadata">&lt;tizen:metadata&gt;</a></span></td>
+       </tr>
+       <tr>
+               <td style="border:none;"></td>
+               <td style="border:none;"></td>
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-category">&lt;tizen:category&gt;</a></span></td>
+       </tr>   
+   </tbody>
+  </table>
+
+ <h2 id="elements" name="elements">Configuration Elements</h2>
+  <p>The following tables define a summary of the W3C configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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 border="1">
+   <tbody>
+    <tr id="widget" name="widget">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;widget&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the root element of a configuration document.</p> <p><strong>Expected children:</strong> </p>
+       <p><span style="font-family: Courier New,Courier,monospace">&lt;name&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;description&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;author&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;license&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;preference&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;access&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:account&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span></p> <p><strong>Attributes:</strong></p> 
+    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">id</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">version</span>
+    <p>Specific version of the Tizen package. The expected value is <span style="font-family: Courier New,Courier,monospace">[0-255].[0-255].[0-65535]</span>.</p></li>
+    <li><span style="font-family: Courier New,Courier,monospace">height</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">viewmodes</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">defaultlocale</span></li></ul></td>
+    </tr>
+   </tbody>
+  </table>
+
+   <table border="1">
+   <tbody>
+    <tr id="name" name="name">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;name&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the widget name used for example, in the application menu.</p> <p><strong>Expected children:</strong> </p>
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
+    <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">short</span></li></ul> </td>
+    </tr>
+   </tbody>
+  </table>
+
+   <table border="1">
+   <tbody>
+    <tr id="description" name="description">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;description&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents text describing the purpose of the widget.</p> <p><strong>Expected children:</strong> </p>
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
+    <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul> </td>
+    </tr>
+   </tbody>
+  </table>
+   <table border="1">
+   <tbody>
+    <tr id="author" name="author">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;author&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the person that created the widget.</p> <p><strong>Expected children:</strong> </p>
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">href</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">email</span></li></ul> </td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="content" name="content">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the boot-strapping mechanism used to point to the main file of the widget.</p>  <p><strong>Attributes:</strong></p>
+     <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">encoding</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">type</span></li></ul> </td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="icon" name="icon">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;icon&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the widget icon.</p>  <p><strong>Attributes:</strong></p>
+     <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">height</span></li></ul> </td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="license" name="license">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;license&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the license under which the widget is distributed.</p> <p><strong>Expected children:</strong> </p>
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
+    <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">href</span></li></ul></td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="preference" name="preference">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;preference&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Used to declare preferences as key-value pairs for the widget for use at runtime.</p> <p><strong>Attributes:</strong></p>
+        <ul class="ul">
+          <li><span style="font-family: Courier New,Courier,monospace">name</span><p>The maximum length may be limited to 80 bytes.  In that case, leftover bytes are ignored.</p></li>
+          <li><span style="font-family: Courier New,Courier,monospace">value</span><p>The maximum length may be limited to 8192 bytes.  In that case, leftover bytes are ignored.</p></li>
+          <li><span style="font-family: Courier New,Courier,monospace">readonly</span></li>
+         </ul>
+ </td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="access" name="access">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;access&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Used to control network access from within a widget and to request access to certain network resources from the user agent.</p> <p><strong>Attributes:</strong></p> <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">origin</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">subdomains</span></li></ul> </td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="span" name="span">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;span&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Represents the generic container used mainly for internationalization.</p> <p><strong>Expected children:</strong> </p>
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
+    <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul></td>
+    </tr>
+   </tbody>
+  </table>
+  <table border="1">
+   <tbody>
+    <tr id="param" name="param">
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;param&gt; element</span></th>
+    </tr>
+    <tr>
+     <td> <p>Used to declare parameters to be used with a feature in <a href="#mw_feature">mobile</a> and <a href="#ww_feature">wearable</a> applications.</p> <p><strong>Attributes:</strong></p>
+     <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">name</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">value</span></li></ul> </td>
+    </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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The extension elements are denoted as though the following namespace declaration was in effect: <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span>.
+        <p>The maximum length of attribute and element (except <span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span>, W3C preference element) can be limited to 2048 bytes. In this case, leftover bytes are ignored.</p></td>
+    </tr>
+   </tbody>
+  </table>
+
+  <h3 id="mw_account" name="mw_account">Tizen Account</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:account /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to register account provider information.</p>
+
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+    <p><strong>Expected children:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">icon</span> <p>Mandatory. Since the icons are used in the device under <strong>Settings &gt; Accounts</strong>, place them in a shared directory.</p>
+       <p>Attributes:</p>
+       <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">Account</span> - File path of the account provider icon. The icon size is 72 x 72 pixels.</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">AccountSmall</span> - File path of the account provider small icon. The icon size is 45 x 45 pixels. </li></ul></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">display-name</span> <p>Mandatory; display name of the account provider</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">capability</span><p>Optional; capability of the account provider. Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace;">http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</span> IRI format.</p></li>
+      </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">multiple-account-support</span> <p>Mandatory; indicates whether multiple accounts are supported (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>)</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;
+&lt;/tizen:account&gt;</pre><p></p></td>
+    </tr>
+   </tbody>
+  </table>
+
+  <h3 id="mw_appcontrol" name="mw_appcontrol">Tizen Application Control</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+     <p><strong>Expected children:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><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;/&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:app-control&gt;</pre><p></p></td>
+    </tr>
+   </tbody>
+  </table>
+
+    <h3 id="mw_application" name="mw_application">Tizen Application ID</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to uniquely identify a Tizen application.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>1</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen 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 SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></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.1&quot; /&gt;</pre><p></p></td>
+    </tr>
+   </tbody>
+  </table>
+
+      <h3 id="mw_appwidget" name="mw_appwidget">Dynamic Box</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define basic information about a Dynamic Box.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+       <p><strong>Expected children:</strong> </p> 
+      <ul class="ul"> 
+       <li><a href="#mw_box-label">&lt;tizen:box-label /&gt;</a></li>
+          <li><a href="#mw_box-icon">&lt;tizen:box-icon /&gt;</a></li>
+          <li><a href="#mw_box-content">&lt;tizen:box-content /&gt;</a></li>
+      </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; unique ID of the Dynamic Box in the <span style="font-family: Courier New,Courier,monospace;">&lt;TIZEN_APPLICATION_ID&gt;.&lt;STRING&gt;</span> format, where <span style="font-family: Courier New,Courier,monospace;">&lt;STRING&gt;</span> comprises 1 or more characters (0~9, a~z, A~Z).</p></li> 
+       <li><span style="font-family: Courier New,Courier,monospace;">primary</span> <p>Optional; indicates a primary Dynamic Box (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>)</p>
+          <p>If one <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:app-widget&gt;</span> element has already set this attribute to <span style="font-family: Courier New,Courier,monospace;">true</span>, then all other <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:app-widget&gt;</span> elements must set this attribute to <span style="font-family: Courier New,Courier,monospace;">false</span>.</p>
+          <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If 2 or more <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:app-widget&gt;</span> elements have the <span style="font-family: Courier New,Courier,monospace;">primary</span> attribute set to <span style="font-family: Courier New,Courier,monospace;">true</span>, the default icon and title of the parent Web application is used.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+          </li> 
+       <li><span style="font-family: Courier New,Courier,monospace;">update-period</span> <p>Optional; <span style="font-family: Courier New,Courier,monospace;">float</span> update interval in seconds. The default value is <span style="font-family: Courier New,Courier,monospace;">no update</span>. The minimum value is <span style="font-family: Courier New,Courier,monospace;">1800.0</span>.</p></li> 
+       <li><span style="font-family: Courier New,Courier,monospace;">auto-launch</span><p>Optional; indicates whether the Web application is launched at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default)). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p></li> 
+      </ul>
+  
+       <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-widget id=&quot;1234abcDEF.DynamicBox.default&quot; primary=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:box-label&gt;Web Dynamic Box Sample&lt;/tizen:box-label&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:box-icon src=&quot;icon.png&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:box-content src=&quot;app-widget/index.html&quot; mouse-event=&quot;true&quot; touch-effect=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:box-size preview=&quot;app-widget/preview-lb1-11.png&quot;&gt;1x1&lt;/tizen:box-size&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:box-size&gt;2x2&lt;/tizen:box-size&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:pd src=&quot;pd/index.html&quot; width=&quot;720&quot; height=&quot;200&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/tizen:box-content&gt;
+&lt;/tizen:app-widget&gt;
+</pre><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+   <table border="1" id="mw_box-label" name="mw_box-label"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-label /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the name of the Dynamic Box.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1 or more (if duplicates, the first occurrence is considered and all others ignored)</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the box label (available values: <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 border="1" id="mw_box-icon" name="mw_box-icon"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-icon /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the icon of the Dynamic Box.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or 1
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If no box icon is declared, the platform can select a default icon (such as the application icon or a platform-defined icon).
+</td> 
+    </tr> 
+   </tbody> 
+  </table>        
+
+          </li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box icon. The path is relative to the source Web application directory.</p></li> 
+      </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <table border="1" id="mw_box-content" name="mw_box-content"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-content /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the start page of the Dynamic Box.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1</li> 
+       </ul>
+       <p><strong>Expected children:</strong> </p> 
+      <ul class="ul"> 
+       <li><a href="#mw_box-size">&lt;tizen:box-size /&gt;</a></li>
+          <li><a href="#mw_pd">&lt;tizen:pd /&gt;</a></li>
+      </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box start page. The path is relative to the source Web application directory or a remote URL.</p></li> 
+          <li><span style="font-family: Courier New,Courier,monospace;">mouse-event</span> <p>Optional; indicates whether the Dynamic Box receives mouse up and down events (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default)). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p></li>
+          <li><span style="font-family: Courier New,Courier,monospace;">touch-effect</span> <p>Optional; indicates whether UX effects are applied at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p></li>
+      </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <table border="1" id="mw_box-size" name="mw_box-size"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-size /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the size of the Dynamic Box.</p> <p>The available values are <span style="font-family: Courier New,Courier,monospace">1 x 1</span> (mandatory), <span style="font-family: Courier New,Courier,monospace">2 x 1</span> and <span style="font-family: Courier New,Courier,monospace">2 x 2</span>.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">preview</span> <p>Optional; image file path of the box content displayed in the Dynamic Box viewer. The path is relative to the source Web application directory.</p></li> 
+          <li><span style="font-family: Courier New,Courier,monospace;">use-decoration</span> <p>Optional; specifies whether the Dynamic Box Viewer applies frame decoration to the size (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>). The value falls back to the default value if the value is not <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>, empty, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p><p>If a Dynamic Box Viewer does not support frame decoration for the Box, the frame decoration is not applied. Validation of this attribute depends on the Dynamic Box Viewer used.</p></li>
+         </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <table border="1" id="mw_pd" name="mw_pd"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:pd /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the Drop View of the Dynamic Box.</p> 
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or 1</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Drop View&#39;s start page. The path is relative to the source Web application directory or a remote URL.</p></li> 
+          <li><span style="font-family: Courier New,Courier,monospace;">width</span> <p>Optional; Drop View width in pixels. The width is fixed to the device width but a value greater than 0 must be set.</p></li>
+          <li><span style="font-family: Courier New,Courier,monospace;">height</span> <p>Mandatory; Drop View height in pixels. The maximum value is 380 pixels.</p></li>
+         </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  
+    <h3 id="mw_webapp" name="mw_webapp">Tizen-hosted Web Application</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to point to a document which is hosted on an external server and acts as the Web application start page. The Tizen WRT allows the start page to be hosted on an external server.</p>
+     <p>If the start page is contained in the widget package, it is defined with the <a href="#content"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> W3C element</a>. If both <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are defined, the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element is used.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more
+       <p>If more than 1 <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are specified, the first instance of the element is used.</p></li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span><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></p> </td>
+    </tr>
+   </tbody>
+  </table>
+
+    <h3 id="mw_privilege" name="mw_privilege">Tizen Privilege</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to get the required API access privileges for the Web application.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more (if duplicates, the first occurrence is considered and all others ignored)</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span><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></p> </td>
+    </tr>
+   </tbody>
+  </table>
+
+    <h3 id="mw_setting" name="mw_setting">Tizen Settings</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define additional application settings.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; application execution continues when it is moved to the background (available values <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span><p>Optional; viewport orientation lock (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">landscape</span>), auto-rotation</p>If the system auto rotation setting is on, the Web application viewport orientation is changed accordingly by default.<p></p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; application installation location (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">internal-only, prefer-external</span>)</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available values: <span style="font-family: Courier New,Courier,monospace;">menu</span> and <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
+
+
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">/* Web application execution is not suspended */
+/* when the application is sent to the background */
+&lt;tizen:setting background-support=&quot;enable&quot; /&gt;
+
+/* Context menu is not displayed */
+&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;
+
+/* Web applications resources are stored encrypted by the WRT */
+&lt;tizen:setting encryption=&quot;enable&quot; /&gt;
+
+/* Viewport orientation is locked to &quot;landscape&quot; */
+&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;
+
+/* Installation location is set to &quot;internal-only&quot; */
+&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;
+
+/* Hardware key event is sent to the Web application when the hardware key is pressed */
+&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;</pre><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+
+    <h3 id="mw_feature" name="mw_feature">Tizen Feature</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define hardware and software components for a Tizen application. This attribute is only used in the Tizen Store for filtering purposes. It is ignored by the Web Runtime installation procedure.</p>
+     <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
+</td>
+    </tr>
+   </tbody>
+  </table>
+
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a class="opensection" href="../../../org.tizen.gettingstarted/html/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><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="mw_sec" name="mw_sec">Tizen Content Security Policy</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="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&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="mw_secreport" name="mw_secreport">Tizen Content Security Policy Report Only</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="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;
+&lt;/tizen:content-security-policy-report-only&gt;</pre><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="mw_navigation" name="mw_navigation">Tizen Navigation Policy</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="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><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="mw_metadata" name="mw_metadata">Tizen Metadata</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>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/mobile/tizen/application.html">Application</a> API.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">key</span>
+           <p>Mandatory; unique key string.</p>
+           <p>The maximum length can be limited to 80 bytes.  In this case, leftover bytes are ignored.</p>
+       </li>
+       <li><span style="font-family: Courier New,Courier,monospace;">value</span>
+           <p>Optional; string.</p>
+           <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><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+  
+<h3 id="mw_profile" name="mw_profile">Tizen Profile</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the application profile.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1</li>
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> 
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;mobile&quot; /&gt;</pre><p></p> </td>
+    </tr> 
+   </tbody> 
+  </table>
+
+
+<h2 id="ww_extend" name="ww_extend">Extending Configuration Elements in Wearable Applications</h2>
+ <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The extension elements are denoted as though the following namespace declaration was in effect: <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span>.
+       <p>The maximum length of the attribute and element (except <span style="font-family: Courier New,Courier,monospace;">tizen:metadata</span>, W3C preference element) may be limited to 2048 bytes. In that case, leftover bytes are ignored.</p></td>
+    </tr>
+   </tbody>
+  </table>
+
+    <h3 id="ww_application" name="ww_application">Tizen Application</h3>
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to uniquely identify a Tizen wearable application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <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 SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>        
+          <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory;  Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></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.1&quot; /&gt;</pre><p></p></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+    <h3 id="ww_privilege" name="ww_privilege">Tizen Privilege</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to get the required API access privileges for the Web application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span><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></p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  
+  <h3 id="appcontrol" name="appcontrol">Tizen Application Control</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+     <p><strong>Expected children:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><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;/&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:app-control&gt;</pre><p></p></td>
+    </tr>
+   </tbody>
+  </table>
+
+    <h3 id="ww_setting" name="ww_setting">Tizen Settings</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define additional application settings.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+     
+      <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; Sets whether Web Application is suspended when it goes to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, Web Application is not suspended when it goes to the background.</p></li> 
+      <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; Sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Sets whether Web Application resources are encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span> <p>Optional; Sets whether it locks orientation of Web Application (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">  landscape</span>, <span style="font-family: Courier New,Courier,monospace;">  auto-rotation</span>)</p><p>If this option is portrait or landscape, the orientation is locked to portrait or landscape respectively.</p><p>If the option is auto-rotation, it follows device orientation setting.</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; Sets where Web Application is installed (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">  internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">  prefer-external</span>)</p><p>o     auto: the system defined install location.</p><p>o      internal-only: the device internal storage.</p><p>o     prefer-external: the external storage (if exists).</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available value: <span style="font-family: Courier New,Courier,monospace;">back</span>).</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><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+    <h3 id="ww_tizencontent" name="ww_tizencontent">Tizen Content</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the start page to be hosted on an external server.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="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 class="ul"> 
+     
+      <li><span style="font-family: Courier New,Courier,monospace;">src</span> <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><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h3 id="ww_contentsecpolicy" name="ww_contentsecpolicy">Tizen Content Security Policy</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application.</p> 
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="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&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+    <h3 id="ww_contentsecpolicyreport" name="ww_contentsecpolicyreport">Tizen Content Security Policy Report Only</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p> 
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="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;
+&lt;/tizen:content-security-policy-report-only&gt;</pre><p></p> </td> 
+    </tr> 
+   </tbody> 
+      
+  </table>
+  <h3 id="ww_allownavigation" name="ww_allownavigation">Tizen Navigation Policy</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p> 
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="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><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h3 id="ww_metadata" name="ww_metadata">Tizen Metadata</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>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>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">key</span>
+           <p>Mandatory; unique key string.</p>
+           <p>The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored.</p>
+       </li>
+       <li><span style="font-family: Courier New,Courier,monospace;">value</span>
+           <p>Optional; string.</p>
+           <p>The maximum length may 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><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h3 id="ww_ime" name="ww_ime">Tizen IME</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:ime /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to defines the properties of IME (Input Method Editor) type application, which would be used when the developer wants to create his or her own keyboard module for Tizen platform.</p>
+    <table class="note">
+    <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</span> should be defined to activate &lt;tizen:ime&gt;</td> 
+    </tr> 
+    </tbody>
+    </table>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or 1</li> 
+       </ul>
+        <p><strong>Expected children:</strong> </p> 
+    <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">uuid</span> <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><span style="font-family: Courier New,Courier,monospace;">languages</span> <p>Mandatory; list of input languages that the current IME supports</p>
+    <table class="note">
+    <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:language/&gt;</span> elements will be provided as the child elements of this element.</td> 
+    </tr> 
+    </tbody>
+    </table>
+    </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;
+    &lt;tizen:languages&gt;
+        &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;
+        &lt;tizen:language&gt;de-de&lt;/tizen:language&gt;
+    &lt;/tizen:languages&gt;
+&lt;/tizen:ime&gt;
+
+&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</pre><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <table border="1" id="ww_language" name="ww_language"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:language /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the supported input language of the current IME type application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="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;
+  &lt;tizen:language&gt;de-de&lt;/tizen:language&gt;
+&lt;/tizen:languages&gt;</pre><p></p> </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h3 id="ww_category" name="ww_category">Tizen Category</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:category /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define the Tizen wearable application type to be watch clock.</p>
+         <p><strong>Occurrences:</strong> </p>
+        <ul class="ul">
+       <li>0 or more
+       <p>If omitted, the widget defaults to the watch widget type.</p></li>
+        </ul>
+         <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <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><p></p></td>
+    </tr>
+   </tbody>
+  </table>
+
+
+ <h3 id="ww_appwidget" name="ww_appwidget">Dynamic Box</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define basic information about a Dynamic Box.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+    <p><strong>Expected children:</strong> </p>
+      <ul class="ul">
+       <li><a href="#ww_box-label">&lt;tizen:box-label /&gt;</a></li>
+       <li><a href="#ww_box-icon">&lt;tizen:box-icon /&gt;</a></li>
+       <li><a href="#ww_box-content">&lt;tizen:box-content /&gt;</a></li>
+      </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; unique ID of the Dynamic Box in the <span style="font-family: Courier New,Courier,monospace;">&lt;TIZEN_APPLICATION_ID&gt;.&lt;STRING&gt;</span> format, where <span style="font-family: Courier New,Courier,monospace;">&lt;STRING&gt;</span> comprises 1 or more characters (0~9, a~z, A~Z).</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">primary</span> <p>Mandatory; indicates a primary Dynamic Box (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>)</p>
+       <p>If one <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:app-widget&gt;</span> element has already set this attribute to <span style="font-family: Courier New,Courier,monospace;">true</span>, then all other <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:app-widget&gt;</span> elements must set this attribute to <span style="font-family: Courier New,Courier,monospace;">false</span>.</p>
+       <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">If 2 or more <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:app-widget&gt;</span> elements have the <span style="font-family: Courier New,Courier,monospace;">primary</span> attribute set to <span style="font-family: Courier New,Courier,monospace;">true</span>, the default icon and title of the parent Web application is used.</td>
+    </tr>
+   </tbody>
+  </table>
+       </li>
+       <li><span style="font-family: Courier New,Courier,monospace;">update-period</span> <p>Optional; <span style="font-family: Courier New,Courier,monospace;">float</span> update interval in seconds. The default value is <span style="font-family: Courier New,Courier,monospace;">no update</span>. The minimum value is <span style="font-family: Courier New,Courier,monospace;">1800.0</span>.</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">auto-launch</span><p>Optional; indicates whether the Web application is launched at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li>
+      </ul>
+
+    <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-widget id=&quot;1234abcDEF.DynamicBox.default&quot; primary=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:box-label&gt;Web Dynamic Box Sample&lt;/tizen:box-label&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:box-icon src=&quot;icon.png&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:box-content src=&quot;app-widget/index.html&quot; mouse-event=&quot;true&quot; touch-effect=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:box-size preview=&quot;app-widget/preview-lb1-11.png&quot;&gt;1x1&lt;/tizen:box-size&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:box-size&gt;2x2&lt;/tizen:box-size&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:pd src=&quot;pd/index.html&quot; width=&quot;720&quot; height=&quot;200&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/tizen:box-content&gt;
+&lt;/tizen:app-widget&gt;
+</pre><p></p> </td>
+    </tr>
+   </tbody>
+  </table>
+
+   <table border="1" id="ww_box-label" name="ww_box-label">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-label /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define the name of the Dynamic Box.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>1 or more</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the box label (available values: <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 border="1" id="ww_box-icon" name="ww_box-icon">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-icon /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define the icon of the Dynamic Box.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or 1</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box icon. The path is relative to the source Web application directory.</p></li>
+      </ul>
+    </td>
+    </tr>
+   </tbody>
+  </table>
+
+  <table border="1" id="ww_box-content" name="ww_box-content">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-content /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define the start page of the Dynamic Box.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>1</li>
+    </ul>
+    <p><strong>Expected children:</strong> </p>
+      <ul class="ul">
+       <li><a href="#ww_box-size">&lt;tizen:box-size /&gt;</a></li>
+          <li><a href="#ww_pd">&lt;tizen:pd /&gt;</a></li>
+      </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Dynamic Box start page. The path is relative to the source Web application directory or a remote URL.</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">mouse-event</span> <p>Optional; indicates whether the Dynamic Box receives mouse up and down events (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">touch-effect</span> <p>Optional; indicates whether UX effects are applied at the Dynamic Box click event (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>
+      </ul>
+    </td>
+    </tr>
+   </tbody>
+  </table>
+
+  <table border="1" id="ww_box-size" name="ww_box-size">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-size /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define the size of the Dynamic Box.</p> <p>The available values are <span style="font-family: Courier New,Courier,monospace">1 x 1</span> (mandatory), <span style="font-family: Courier New,Courier,monospace">2 x 1</span> and <span style="font-family: Courier New,Courier,monospace">2 x 2</span>.</p>
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>1 or more</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">preview</span> <p>Optional; image file path of the box content displayed in the Dynamic Box viewer. The path is relative to the source Web application directory.</p></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">use-decoration</span> <p>Optional; specifies whether the Dynamic Box Viewer applies frame decoration to the size (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> (default), <span style="font-family: Courier New,Courier,monospace;">false</span>).</p><p>If a Dynamic Box Viewer does not support frame decoration for the Box, the frame decoration is not applied. Validation of this attribute depends on the Dynamic Box Viewer used.</p></li>
+      </ul>
+    </td>
+    </tr>
+   </tbody>
+  </table>
+
+  <table border="1" id="ww_pd" name="ww_pd"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:pd /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the drop view information of the Dynamic Box.</p>
+    <table class="note">
+    <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The platform implementation can decide the actual width according to the device resolution. The height range of the Drop View is 1 to 380 pixels and the width is fixed to the device width.</td> 
+    </tr> 
+    </tbody>
+    </table>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or 1</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; start page file path of drop view. The path is relative to the source Web application directory.</p></li> 
+          <li><span style="font-family: Courier New,Courier,monospace;">width</span> <p>Mandatory; drop view width pixels in integer</p></li>
+          <li><span style="font-family: Courier New,Courier,monospace;">height</span> <p>Mandatory; drop view height pixels in integer</p></li>
+         </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+      <h3 id="ww_service" name="ww_service">Tizen Service</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:service /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define Web Service Application.</p>
+
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+     <p><strong>Expected Children:</strong> </p>
+      <ul class="ul"> 
+       <li><a href="#ww_service-name">&lt;tizen:name /&gt;</a></li>
+       <li><a href="#ww_service-icon">&lt;tizen:icon /&gt;</a></li>
+       <li><a href="#ww_service-content">&lt;tizen:content /&gt;</a></li>
+       <li><a href="#ww_service-description">&lt;tizen:description /&gt;</a></li>
+       <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 class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <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> 
+      </ul>
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">auto-restart</span> <p>Optional; Sets whether service application is re-launched automatically when it is terminated. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li> 
+      </ul>
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">on-boot</span> <p>Optional; Sets whether service application is launched automatically on device booting time. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (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: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:content src=&quot;service/service.js&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;
+&lt;tizen:service&gt;</pre><p></p> </td>
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <table border="1" id="ww_service-name" name="ww_service-name"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:name /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the name of Web Service Application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <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 border="1" id="ww_service-icon" name="ww_service-icon"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the icon of Web Service Application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or 1</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <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 border="1" id="ww_service-content" name="ww_service-content"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the start page of the Web Service Application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <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 border="1" id="ww_service-description" name="ww_service-description"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:description /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the description of the Web Service Application.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or 1</li> 
+       </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <table border="1" id="ww_service-metadata" name="ww_service-metadata"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define metadata information shared with other Web Applications. The defined metadata can be accessed (read-only) through the Tizen Application API.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">key</span> <p>Mandatory; unique key string</p></li> 
+       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Optional; string</p></li> 
+      </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <table border="1" id="ww_service-category" name="ww_service-category"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:category /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the categories that the service application belongs to.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>0 or more</li> 
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> 
+      </ul>
+       </td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h3 id="ww_profile" name="ww_profile">Tizen Profile</h3> 
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile /&gt;</span> element</p></th> 
+    </tr> 
+    <tr> 
+     <td> <p>Used to define the application profile.</p>
+        <p><strong>Occurrences:</strong> </p> 
+       <ul class="ul"> 
+       <li>1</li>
+       </ul>
+        <p><strong>Attributes:</strong> </p> 
+      <ul class="ul"> 
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> 
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;wearable&quot; /&gt;</pre><p></p> </td>
+    </tr> 
+   </tbody> 
+  </table>
+
+
+    <h3 id="ww_feature" name="ww_feature">Tizen Feature</h3>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element</p></th>
+    </tr>
+    <tr>
+     <td> <p>Used to define hardware and software components for a Tizen wearable Web application. This attribute is only used in the Samsung Apps for filtering purposes. It is ignored by the Web Runtime installation procedure.</p>
+     <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
+</td>
+    </tr>
+   </tbody>
+  </table>
+
+     <p><strong>Occurrences:</strong> </p>
+    <ul class="ul">
+       <li>0 or more</li>
+    </ul>
+     <p><strong>Attributes:</strong> </p>
+      <ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a class="opensection" href="../../../org.tizen.gettingstarted/html/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><p></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/content_assist_w.htm b/org.tizen.devtools/html/web_tools/content_assist_w.htm
new file mode 100644 (file)
index 0000000..2a073b0
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/content_assist_w.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Content Assist </title> 
+ </head> 
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+ <h1>Content Assist</h1>
+ 
+ 
+  <p>Content assist is a functionality provided in parts of the Tizen IDE. It helps you to write quick and efficient code as it completes the names of the APIs automatically on writing the initial part of the API name.</p> 
+  <p>Tizen IDE supports <strong>Web API</strong>, <strong>W3C API</strong>, <strong>jQuery API</strong>, and <strong>jQuery Mobile API</strong>. User-defined and third party APIs can be supported by expanding the content assist functionality.</p> 
+  <p class="figure">Figure: Content assist in the JavaScript editor</p> 
+  <p style="text-align: center;"><img alt="Content assist in the JavaScript editor" src="../images/content_assist_java.png" /></p> 
+  <p>In the JavaScript editor or HTML editor, press <strong>Ctrl + Space</strong> to complete the code. A list of available code completions opens. To use content assist:</p> 
+  <ol> 
+   <li>Navigate and select lines in the list. This displays the JSDoc information of the selected line.</li> 
+   <li>Click on the selected line or press <strong>Enter</strong> to insert the selection in the editor.</li> 
+  </ol> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To activate content assist for user-defined and third party APIs, add the WIDL feature in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
+        <p>In the mobile Web JavaScript editor, you can activate content assist by . (dot). It can be set by checking the <strong>Enable auto activation</strong> checkbox in <strong>Window &gt; Preferences &gt; JavaScript &gt; Editor &gt; Content Assist</strong>.</p></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>For more information, see <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#privilege">Specifying Privileges in the Privilege Tab</a>.</p> 
+  <p>To expand content assist functionality to user-defined and third party APIs:</p> 
+  <ol> 
+   <li>Prepare an API definition document using the WIDL standard. The Tizen IDE supports the <span style="font-family: Courier New,Courier,monospace">.xml</span> and <span style="font-family: Courier New,Courier,monospace">.widlprocxml</span> files.</li> 
+   <li>Add the definition file in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/web_tools/css_editor_w.htm b/org.tizen.devtools/html/web_tools/css_editor_w.htm
new file mode 100644 (file)
index 0000000..49e1b61
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/css_editor_w.htm
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Editor </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+<h1>CSS Editor</h1>
+
+  <p>The Tizen IDE provides a CSS editor that allows you to write and edit CSS, and check the CSS syntax. To clean up CSS code by adding indentation and carriage returns, use the <a href="code_beautifier_w.htm">Code Beautifier</a>, and to remove unnecessary content from the CSS files, use the <a href="code_minifier_w.htm">Code Minifier</a>.</p>
+  
+    <p>Content assist is supported for the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> tag <span style="font-family: Courier New,Courier,monospace">id</span> and <span style="font-family: Courier New,Courier,monospace">class</span> attributes, and html5 tag elements. It helps you to write quick and efficient code as it completes the name of the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> tag <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute automatically on writing the initial part of the name.</p>
+
+  
+ <p>CSS syntax checking has the following features:</p> 
+  <ul> 
+   <li>Checking CSS syntax (up to level 2.1)</li> 
+   <li>Checking unknown properties</li> 
+   <li>Displaying error or warning messages in the editor and in the <strong>Problems</strong> view</li> 
+   <li>Setting preferences for the checking level and validation time</li> 
+
+  </ul> 
+  <p>To check CSS:</p> 
+  <ul> 
+   <li>Manual check <p>In the editor pop-up menu, select <strong>Check CSS</strong>.</p>
+   <table class="note"> 
+    <tbody> 
+     <tr> 
+      <th class="note">Note</th> 
+     </tr> 
+     <tr> 
+      <td class="note">You can check JavaScript immediately, even without saving the file. </td> 
+     </tr> 
+    </tbody> 
+   </table> </li>
+   <li>Automatic check <p>If you save a file, the project is built and syntax is checked automatically.</p>
+   <p class="figure">Figure: Checking CSS automatically</p> 
+   <p style="text-align: center;"><img alt="Checking CSS automatically" src="../images/checking_css_automatic_check.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/css_preview_w.htm b/org.tizen.devtools/html/web_tools/css_preview_w.htm
new file mode 100644 (file)
index 0000000..0e2c238
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/css_preview_w.htm
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Preview </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+  <h1>CSS Preview</h1> 
+  <p>The Tizen Web IDE provides the <strong>CSS Preview</strong> view for instantly previewing the entire look and feel of the CSS. All the changes made in the CSS file editor are automatically reflected in the CSS preview, which is based on the Google Chrome&trade; browser.</p> 
+  <p>The CSS preview view has the following features:</p> 
+  <ul> 
+   <li>CSS preview shortcut</li> 
+   <li>Clear selector representation, such as <span style="font-family: Courier New,Courier,monospace">Class class1</span> and <span style="font-family: Courier New,Courier,monospace">Adjacent div+p</span></li> 
+   <li>Support for the <span style="font-family: Courier New,Courier,monospace">&lt;base&gt;</span> element</li> 
+   <li>Support for <span style="font-family: Courier New,Courier,monospace">&lt;!doctype html&gt;</span></li> 
+   <li>IE compatibility using <span style="font-family: Courier New,Courier,monospace">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; /&gt;</span></li> 
+   <li>Support for a multi-depth selector</li> 
+  </ul> 
+  <p>To preview a CSS file in the <strong>CSS Preview</strong> view, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Preview</strong>, or use the <strong>Ctrl + 4</strong> hotkey.</p> 
+ 
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/html_editor_w.htm b/org.tizen.devtools/html/web_tools/html_editor_w.htm
new file mode 100644 (file)
index 0000000..3d3740d
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/html_editor_w.htm
@@ -0,0 +1,342 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+    <script type="text/javascript" src="../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+    <script 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 Editor</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#element">HTML5 Elements</a></li>
+            <li><a href="#breadcrumb">Breadcrumb</a></li>
+            <li><a href="#assist">Advanced Content Assist</a></li>
+            <li><a href="#hover">Advanced Content Hover</a></li>
+            <li><a href="#refactoring">Advanced File Refactoring</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>HTML Editor</h1>
+
+<p>The Tizen Web IDE provides a WYSIWYG editor for editing HTML files. To clean up HTML code by adding indentation and carriage returns, use the <a href="code_beautifier_w.htm">Code Beautifier</a>, and to remove unnecessary content from the HTML files, use the <a href="code_minifier_w.htm">Code Minifier</a>.</p>
+<p>The editor supports a variety of <a href="#element">HTML5 elements</a>. The HTML editor is based on the Web Page Editor (WPE).</p>
+
+<p>The HTML editor has the following features:</p>
+<ul>
+   <li>Design page</li>
+   <li>WYSIWYG Builder
+    <ul>
+     <li>Drag-and-drop HTML components from the <strong>Palette</strong> menu
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">The editor has separate component <strong>Palette</strong> menus for HTML 4.0 and HTML5.</td>
+        </tr>
+       </tbody>
+      </table></li>
+     <li>HTML design view</li>
+    </ul> </li>
+   <li>Modes
+   <ul>
+     <li>Editor mode toolbar</li>
+     <li>The following table lists the available modes.
+      <table>
+       <caption>Available editor modes</caption>
+       <tbody>
+        <tr>
+         <th>Icon</th>
+         <th>Description</th>
+        </tr>
+        <tr>
+         <td><img alt="Horizontal Split View" src="../images/hori_split_view.png" /></td>
+         <td>Horizontally-split View (Ctrl+Shift+F9)</td>
+        </tr>
+        <tr>
+         <td><img alt="Vertical Split View" src="../images/vert_split_view.png" /></td>
+         <td>Vertically-split View (Ctrl+Shift+F10)</td>
+        </tr>
+        <tr>
+         <td><img alt="Designer View" src="../images/designer_view.png" /></td>
+         <td>Designer View (Ctrl+Shift+F11)</td>
+        </tr>
+        <tr>
+         <td><img alt="Source View" src="../images/source_view.png" /></td>
+         <td>Source View (Ctrl+Shift+F12)</td>
+        </tr>
+        <tr>
+         <td><img alt="Skin" src="../images/skin.png" /></td>
+         <td>Manage Skins (see <a href="http://publib.boulder.ibm.com/infocenter/rsasehlp/v7r5m0/index.jsp?topic=%2Forg.eclipse.jst.jsf.doc.user%2Fhtml%2Freference%2Fjsf_design_time_skinning.html" target="_blank">Skins</a>)</td>
+        </tr>
+       </tbody>
+      </table> </li>
+    </ul> 
+ </li>
+ <li>PropertySheet
+  <ul>
+   <li>Edit HTML tag attributes in the <strong>Properties</strong> view
+    <p class="figure">Figure: Properties view</p>
+    <p style="text-align:center;"><img alt="Properties view" src="../images/properties_html.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+   </li>
+   <li>Integration with source editor</li>
+  </ul>
+ </li>
+ <li><a href="#breadcrumb">Breadcrumb in mobile applications</a></li>
+ <li><a href="#assist">Advanced Content Assist in mobile applications</a></li>
+ <li><a href="#hover">Advanced Content Hover in mobile applications </a></li>
+ <li><a href="#refactoring">Advanced File Refactoring in mobile applications</a></li>            
+</ul>
+<p>After creating HTML files, you can <a href="html_preview_w.htm">preview</a> them in a browser.</p>
+
+<h2 id="element" name="element">HTML5 Elements</h2>
+  <p>The following table lists the HTML5 elements supported by the HTML editor.</p>
+  <table>
+   <caption>
+     Supported HTML5 elements
+   </caption>
+   <tbody>
+    <tr>
+     <th>Icon</th>
+     <th>Element</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="article" src="../images/article.png" /></td>
+     <td>article</td>
+     <td>Specifies independent, self-contained content. Articles can be, for example, a forum post or a newspaper article.</td>
+    </tr>
+    <tr>
+     <td><img alt="aside" src="../images/aside.png" /></td>
+     <td>aside</td>
+     <td>Defines content that is related to surrounding content but can also stand alone.</td>
+    </tr>
+    <tr>
+     <td><img alt="audio" src="../images/audio.png" /></td>
+     <td>audio</td>
+     <td>Defines a sound or audio stream.</td>
+    </tr>
+    <tr>
+     <td><img alt="canvas" src="../images/canvas.png" /></td>
+     <td>canvas</td>
+     <td>Provides scripts with a resolution-dependent bitmap canvas that is used for rendering graphs, game graphics, or other visual images on the fly.</td>
+    </tr>
+    <tr>
+     <td><img alt="command" src="../images/command_html.png" /></td>
+     <td>command</td>
+     <td>Defines a command that a user can invoke.</td>
+    </tr>
+    <tr>
+     <td><img alt="datalist" src="../images/datalist.png" /></td>
+     <td>datalist</td>
+     <td>Defines a set of option elements that represent predefined options for other controls.</td>
+    </tr>
+    <tr>
+     <td><img alt="details" src="../images/details.png" /></td>
+     <td>details</td>
+     <td>Defines a disclosure widget from which users obtain additional information or controls.</td>
+    </tr>
+    <tr>
+     <td><img alt="figure" src="../images/figure.png" /></td>
+     <td>figure</td>
+     <td>Defines flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.</td>
+    </tr>
+    <tr>
+     <td><img alt="footer" src="../images/footer.png" /></td>
+     <td>footer</td>
+     <td>Defines a footer for a document or section.</td>
+    </tr>
+    <tr>
+     <td><img alt="header" src="../images/header.png" /></td>
+     <td>header</td>
+     <td>Defines a header for a document or section.</td>
+    </tr>
+    <tr>
+     <td><img alt="hgroup" src="../images/hgroup.png" /></td>
+     <td>hgroup</td>
+     <td>Defines the heading of a section.</td>
+    </tr>
+    <tr>
+     <td><img alt="keygen" src="../images/keygen.png" /></td>
+     <td>keygen</td>
+     <td>Defines a key-pair generator control.</td>
+    </tr>
+    <tr>
+     <td><img alt="mark" src="../images/mark.png" /></td>
+     <td>mark</td>
+     <td>Defines text that is marked or highlighted in a document due to its relevance in another context.</td>
+    </tr>
+    <tr>
+     <td><img alt="math" src="../images/math.png" /></td>
+     <td>math</td>
+     <td>Defines a MathML element.</td>
+    </tr>
+    <tr>
+     <td><img alt="meter" src="../images/meter.png" /></td>
+     <td>meter</td>
+     <td>Defines a scalar measurement within a known range, or a fractional value. For example, disk usage.</td>
+    </tr>
+    <tr>
+     <td><img alt="nav" src="../images/nav.png" /></td>
+     <td>nav</td>
+     <td>Defines a section with navigation links.</td>
+   </tr>
+    <tr>
+     <td><img alt="output" src="../images/output.png" /></td>
+     <td>output</td>
+     <td>Defines a result of a calculation.</td>
+    </tr>
+    <tr>
+     <td><img alt="progress" src="../images/progress.png" /></td>
+     <td>progress</td>
+     <td>Represents the progress of a task.</td>
+    </tr>
+    <tr>
+     <td><img alt="ruby" src="../images/ruby.png" /></td>
+     <td>ruby</td>
+     <td>Defines ruby annotations.</td>
+   </tr>
+    <tr>
+     <td><img alt="section" src="../images/section.png" /></td>
+     <td>section</td>
+     <td>Defines a generic section in a document or application.</td>
+    </tr>
+    <tr>
+     <td><img alt="source" src="../images/source.png" /></td>
+     <td>source</td>
+     <td>Defines multiple alternative media resources for media elements.</td>
+    </tr>
+    <tr>
+     <td><img alt="summary" src="../images/summary.png" /></td>
+     <td>summary</td>
+     <td>Defines a summary, caption, or legend within a details element.</td>
+    </tr>
+   <tr>
+     <td><img alt="svg" src="../images/svg.png" /></td>
+     <td>svg</td>
+     <td>Defines scalable vector graphics (SVG).</td>
+    </tr>
+    <tr>
+     <td><img alt="time" src="../images/time.png" /></td>
+     <td>time</td>
+     <td>Defines the time on a 24-hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.</td>
+    </tr>
+    <tr>
+     <td><img alt="video" src="../images/video.png" /></td>
+     <td>video</td>
+     <td>Used for playing videos or movies, and audio files with captions.</td>
+    </tr>
+   </tbody>
+  </table>
+ 
+<h2 id="breadcrumb" name="breadcrumb in mobile application">Breadcrumb in Mobile Applications</h2>
+
+<p>Breadcrumb (the graphical control) is a navigation aid used in the HTML editor. It allows you to keep track of your location within the HTML code.</p>
+<p>The breadcrumb has the following features:</p>
+<ul><li>HTML hierarchies of the current cursor location.</li>
+<li>Navigates to the selected HTML element.</li>
+<li>Shows the child elements.
+<p>Navigates to the selected child element.</p></li>
+<li>You can show or hide the breadcrumb.
+<p>You can toggle the visibility of the breadcrumb control by pressing <strong>Ctrl+8</strong> or the <strong>Breadcrumb</strong> toolbar icon.</p></li>
+<li>You can set the visibility of the breadcrumb control.
+<p>Select <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web &gt; Editor &gt; HTML Editor</strong>. By default, the breadcrumb is shown in the HTML editor.</p></li></ul>
+<p class="figure">Figure: Toggle the Breadcrumb icon in the toolbar</p> <p style="text-align:center;"><img alt="Toggle the Breadcrumb icon in the toolbar" src="../images/html_breadcrumb_toggle.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: Breadcrumb in the HTML editor</p> <p style="text-align:center;"><img alt="Breadcrumb in the HTML editor" src="../images/html_breadcrumb.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p>To show the child elements, select the arrow button of each element. To navigate to the element, select the element name.</p>
+
+<h2 id="assist" name="assist">Advanced Content Assist in Mobile Applications</h2>
+
+<p>The advanced content assist supports code completion of the attribute values of some elements in the HTML Editor.</p>
+<p>The advanced content assist has the following features:</p>
+<ul><li>Propose code completion of the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element:
+<ul><li>The list of HTML files belonging to the project.</li>
+<li>The list of <span style="font-family: Courier New,Courier,monospace">id</span> values that are assigned to the elements of the editing file.</li></ul></li>
+<li>Propose code completion of the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element.
+<ul><li>The list of CSS files belonging to the project.</li></ul></li>
+<li>Propose code completion of the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element.
+<ul><li>The list of JavaScript files belonging to the project.</li></ul></li>
+<li>Propose code completion of the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;iframe&gt;</span> element.
+<ul><li>The list of HTML files belonging to the project.</li></ul></li>
+<li>Propose code completion of the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element.
+<ul><li>The list of image files belonging to the project.</li></ul></li>
+<li>Propose code completion of <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute values of all elements.
+<ul><li><span style="font-family: Courier New,Courier,monospace">id</span>: The list of id selectors of linked CSS files.</li>
+<li><span style="font-family: Courier New,Courier,monospace">class</span>: The list of class selectors of linked CSS files.</li></ul></li></ul>
+<p class="figure">Figure: Content assist with <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element</p> <p style="text-align:center;"><img alt="Content assist with img element" src="../images/html_assist.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p>In the HTML editor, press <strong>Ctrl + Space</strong> to complete the code. A list of available code completions opens. To use content assist:</p>
+<ol><li>Navigate and select the lines in the list.
+<p>Additional information of the selected line is displayed.</p></li>
+<li>Click on the selected line or press <strong>Enter</strong> to insert the selection in the editor.</li></ol>
+
+<h2 id="hover" name="hover">Advanced Content Hover in Mobile Applications</h2>
+
+<p>The advanced content hover supports additional information of the attribute values of some elements in the HTML editor.</p>
+<p>The advanced content hover has the following features:</p>
+<ul><li>Supports a preview at the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element.
+<ul><li>When the HTML file path is assigned to the <span style="font-family: Courier New,Courier,monospace">href</span> value, the preview shows the HTML code of the linked file.</li>
+<li>When an <span style="font-family: Courier New,Courier,monospace">id</span> element value is assigned to the <span style="font-family: Courier New,Courier,monospace">href</span> value, the preview shows the code snippet of the element that is assigned the <span style="font-family: Courier New,Courier,monospace">id</span> value.</li></ul></li>
+<li>Supports a preview of the CSS file at the <span style="font-family: Courier New,Courier,monospace">href</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element.</li>
+<li>Supports a preview of the JavaScript file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element.</li>
+<li>Supports a preview of the HTML file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;iframe&gt;</span> element.</li>
+<li>Supports a preview of the image file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element.</li>
+<li>Support a preview of the CSS rule at the <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute value of all elements, if the selector (that is made by the <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> value) exists.</li></ul>
+<p class="figure">Figure: Content hover with <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> element</p> <p style="text-align:center;"><img alt="Content hover with link element" src="../images/html_hover.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p>To use the hover feature, in the HTML editor, hover the mouse cursor at the above attributes.</p>
+
+<h2 id="refactoring" name="refactoring">Advanced File Refactoring in Mobile Applications</h2>
+
+<p>The Tizen IDE supports file refactoring in the <strong>Project Explorer</strong> view. When file refactoring occurs, other files to which the refactored file belongs are changed.</p>
+<p>The advanced file refactoring has the following features:</p>
+<ul><li>File rename refactoring
+<p>When a file is renamed, other files to which the renamed file belongs to are changed at the linked line of codes.</p></li>
+<li>File move refactoring
+<p>When a file is moved, other files to which the moved file belongs are changed at the linked line of codes.</p></li>
+<li>File delete refactoring
+<p>When a file is deleted, other files to which the deleted file belongs are commented out at the linked line of codes.</p></li></ul>
+<p class="figure">Figure: Before the CSS file rename refactoring</p> <p style="text-align:center;"><img alt="Before the CSS file rename refactoring" src="../images/html_refactor_before.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: After the CSS file rename refactoring</p> <p style="text-align:center;"><img alt="After the CSS file rename refactoring" src="../images/html_refactor_after.png" 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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/html_preview_w.htm b/org.tizen.devtools/html/web_tools/html_preview_w.htm
new file mode 100644 (file)
index 0000000..388f223
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/html_preview_w.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Preview </title> 
+ </head> 
+
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/>  <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+
+  <h1>HTML Preview</h1> 
+  
+  <p>You can preview an HTML file in a browser. Since the preview is based on the Google Chrome&trade; browser, you have a better rendering result (progressive enhancement) for HTML5 documents than if previewing in the Web Page Editor. All changes made in the HTML code are automatically and immediately reflected in the browser.</p> 
+  <p>The following limitations apply to the HTML preview:</p>
+  <ul>
+       <li>The Device API cannot be run in the Emulator.</li>
+       <li>Some network environments do not support live editing. </li>
+  </ul>
+  <p>To preview a HTML file in the <strong>HTML Preview</strong> view, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Preview</strong>, click the preview icon in the toolbar, or use the <strong>Ctrl + 4</strong> hotkey. The toolbar icon is shown in the following figure.</p> 
+  <p class="caption" style="text-align: center;">Figure: Toolbar icon</p> 
+  <p style="text-align:center;"><img alt="Toolbar icon"
+src="../images/toolbar_icon.png"/></p>
+
+<p>Preview acts as your preference as configured by you. You can <a href="set_ide_preference_w.htm#live">set the preview</a> in <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web &gt; Live Editing</strong>. </p>
+
+  <h2 id="live_highlight" name="live_highlight">Live Highlight</h2>
+  <p>You can synchronize the <strong>Editor</strong> using <a href="set_ide_preference_w.htm#live">Live Highlight</a>. Using this function, the preview shows the cursor&#39;s position in the editor in a shadow box.</p> 
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/js_analyzer_w.htm b/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
new file mode 100644 (file)
index 0000000..c089924
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
@@ -0,0 +1,438 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+    <script type="text/javascript" src="../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+    <title>JavaScript Analyzer</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#use">Using the JavaScript Analyzer</a></li>
+            <li><a href="#support">Supporting Rules</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>JavaScript Analyzer</h1>
+
+<p>The JavaScript Analyzer (JSA) is an analysis tool, which helps to find problems in JavaScript code. When you develop a mobile Web application with a new project in the IDE, you can run JSA to detect potential problems in your JavaScript code. JSA supports 16 rules, including coding rules and Web API usage rules.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This tool is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>To clean up JavaScript code by adding indentation and carriage returns, use the <a href="code_beautifier_w.htm">Code Beautifier</a>, and to remove unnecessary content from the JavaScript files, use the <a href="code_minifier_w.htm">Code Minifier</a>.</p>
+
+<h2 id="use" name="use">Using the JavaScript Analyzer</h2>
+
+<p>To analyze a mobile Web application with the JSA in the IDE, select the target project in the Project Explorer and right-click the project icon. Then, the menu is shown like in Figure 1. and select Run JS Code Analysis.</p>
+
+<p class="figure">Figure: JavaScript Rule Checker</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_rule_checker.png" /></p>
+
+<p>The JSA analyzes JavaScript codes in the selected mobile Web application project after selecting javaScript files and codes segment to analyze. This can be done by parsing the start html file (i.e., index.html, etc) specified in the config.xml.</p>
+
+<p class="figure">Figure: JavaScript Rule Checker</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_automatic_analysis.png" /></p>
+
+<p>If Javascript Analyzer detects the codes which can cause potential problems during its analysis step, the problems are listed up in the JavaScript Problems view. If you want to locate a possibly problematic code line, double-click  the alarm in the view.</p>
+
+<p class="figure">Figure: JavaScript Problems view</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_problems_view.png" /></p>
+
+<h2 id="support" name="support">Supporting Rules</h2>
+
+<h3 id="coding" name="coding">Coding Rules</h3>
+
+<p>The JSA provides coding rules to help in writing better JavaScript code. For more information about these rules, see JSLint and <a href="https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" target="_blank">Google Coding Style Guide</a>.</p>
+
+<h4>Rule 1. Use <span style="font-family: Courier New,Courier,monospace">var</span> to declare variables</h4>
+
+<p>If variables are declared without the <span style="font-family: Courier New,Courier,monospace">var</span> keyword, they are assigned to the global scope in the JavaScript language. This can be dangerous.</p>
+
+<p>For example, if the functions that have a same name are defined as following example codes, the <span style="font-family: Courier New,Courier,monospace">foo</span> function is changed whenever the <span style="font-family: Courier New,Courier,monospace">func1</span> or <span style="font-family: Courier New,Courier,monospace">func2</span> function is called. The <span style="font-family: Courier New,Courier,monospace">foo</span> 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 <span style="font-family: Courier New,Courier,monospace">var</span>, 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>
+
+<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;&nbsp;&nbsp;&nbsp;alert(&#39;func1&#39;);
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;// When the foo function is called, the foo function is not clear
+&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;alert(&#39;func2&#39;);
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;// When the foo function is called, the foo function is not clear.
+&nbsp;&nbsp;&nbsp;foo();
+}</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Use var to declare the variable foo.</pre>
+
+<h4>Rule 2. Do Not Declare an Arguments Array within Functions</h4>
+
+<p>If the <span style="font-family: Courier New,Courier,monospace">arguments</span> array is declared with <span style="font-family: Courier New,Courier,monospace">var</span> in functions, this causes duplication with the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span> of JavaScript language in the functions. </p>
+
+<p>In the following example, the statement <span style="font-family: Courier New,Courier,monospace">var arguments = [];</span> in the function overwrites the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span>. As a result, the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span> 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 = [];
+}</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not declare arguments Array as variables in functions. </pre>
+
+<h4>Rule 3. Do Not Capture Variables in Functions</h4>
+
+<p>If there are captured variables in functions, they can make a closure. The closure may cause potential defects.</p>
+
+<p>In the following example, you always expect 1 to be returned from calling the <span style="font-family: Courier New,Courier,monospace">test</span> function. However, the returned value is not always 1 because the variable <span style="font-family: Courier New,Courier,monospace">x</span> in the function <span style="font-family: Courier New,Courier,monospace">outer</span> 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>
+
+<pre class="prettyprint">var outer = function()
+{
+&nbsp;&nbsp;&nbsp;// Warning case, be careful
+&nbsp;&nbsp;&nbsp;var x = 0;
+
+&nbsp;&nbsp;&nbsp;return function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Variable x of the outer function is captured in the inner function
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ++x;
+&nbsp;&nbsp;&nbsp;}
+}
+var x = -1;
+
+// The inner function of function outer is assigned to variable test outside function outer
+var test = outer();
+
+// Whenever the test is called, the result can be different from the expectation
+
+// 1st return
+test();
+
+// 2nd return
+test();
+
+// 3rd return
+test();</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not capture the variable x in a closure.</pre>
+
+<h4>Rule 4. Do Not Use Extra Semicolons</h4>
+
+<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>
+
+<pre class="prettyprint">function func()
+{
+&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; 10; i++)
+&nbsp;&nbsp;&nbsp;{
+&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;};
+
+&nbsp;&nbsp;&nbsp;return x;
+// Extra semicolon after the function definition statement
+};
+var result = func();</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not use extra semicolons.</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>In the following example, the property <span style="font-family: Courier New,Courier,monospace">value</span> of the instance <span style="font-family: Courier New,Courier,monospace">obj</span> is deleted using the keyword <span style="font-family: Courier New,Courier,monospace">delete</span>. This leads the instance <span style="font-family: Courier New,Courier,monospace">obj</span> not to share the shape of the constructor <span style="font-family: Courier New,Courier,monospace">Obj</span> 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>
+
+<pre class="prettyprint">function Obj()
+{
+&nbsp;&nbsp;&nbsp;this.value = 10;
+};
+var obj = new Obj();
+
+// Deleting properties of objects can make the performance of the program worse
+delete obj.value;</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Use var to declare the variable value.</pre>
+
+<h4>Rule 6. Do Not Use Multi-line Literals</h4>
+
+<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>
+
+<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>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not use multi-line string literals. </pre>
+
+<h4>Rule 7. Do Not Use Array or Object Constructors</h4>
+
+<p>Use array and object literals instead of their constructors to avoid confusing and unexpected results.</p>
+
+<p>In the following example, the array <span style="font-family: Courier New,Courier,monospace">arr2</span> that has 3 values (1, 2, and 3) can be created using an array constructor. In the same way, if  the array <span style="font-family: Courier New,Courier,monospace">arr1</span> 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>
+
+<pre class="prettyprint">var x = 1
+
+// If the variable x is 1, the array arr1 is the array whose length is 1, not arr[0] is 1
+var arr1 = new Array(x);
+
+// The array arr2 is the array which has 3 values, 1, 2, and 3
+var arr2 = new Array(1, 2, 3);</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not use constructors for an Array. </pre>
+
+<h4>Rule 8. Do Not Modify the Prototypes of Built-in Objects</h4>
+
+<p>Modifying built-ins, such as <span style="font-family: Courier New,Courier,monospace">Object.prototype</span> and <span style="font-family: Courier New,Courier,monospace">Array.prototype</span>, can lead to debugging issues in production and must be avoided. </p>
+
+<p>For example, the methods in prototypes of built-in objects are shared by every instance of the built-in objects. If the method are 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>
+
+<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;);
+};</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not modify the prototype of a built-in object Object. </pre>
+
+<h4>Rule 9. Do Not Convert Wrapper Objects to Primitives</h4>
+
+<p>Avoid creating primitive typed values using the constructor of a wrapper objects</p>
+
+<p>If a boolean variable is created by the constructor <span style="font-family: Courier New,Courier,monospace">Boolean</span>, its value is a wrapper object, not <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. In the following example, the program always prints <span style="font-family: Courier New,Courier,monospace">true</span> because the variable <span style="font-family: Courier New,Courier,monospace">bool</span> is a object that has a value, <span style="font-family: Courier New,Courier,monospace">false</span>.</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>
+
+<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;);
+}
+else
+{
+&nbsp;&nbsp;&nbsp;alert(&#39;false&#39;);
+}</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not convert a wrapper object Boolean to a primitive value.</pre>
+
+<h4>Rule 10. Do Not Use the <span style="font-family: Courier New,Courier,monospace">for-in</span> Structure with Arrays</h4>
+
+<p>If the array is used in for-in statement, the operation can be different from the normal for statement. </p>
+
+<p>In the following example, you expect to print <span style="font-family: Courier New,Courier,monospace">a</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">c</span>, but the program prints <span style="font-family: Courier New,Courier,monospace">0</span>, <span style="font-family: Courier New,Courier,monospace">1</span>, and <span style="font-family: Courier New,Courier,monospace">2</span>.</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>
+
+<pre class="prettyprint">var arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
+
+// The variable key is not &#39;a&#39;, &#39;b&#39;, and &#39;c&#39;. It is 0, 1, and 2
+for(var key in arr)
+{
+&nbsp;&nbsp;&nbsp;alert(key);
+}</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Coding Rule] Do not use for-in with arrays. </pre>
+
+<h3 id="api" name="api">Web API Usage Rules</h3>
+
+<p>Tizen Web APIs extend JavaScript APIs to enable you using the device capabilities provided by Tizen devices. The Tizen Web APIs are designed to be simple and intuitive. The following rules notify you, when the APIs are used improperly.</p>
+
+<h4>Rule 1. Accessing Undefined API</h4>
+
+<p>Accessing  API which not provided by the Tizen API modules are notified as an WebAPIError and the analysis proceeded.</p>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.alarm.gett()</span> function does not exist in the Tizen API, so the JSA detects it and creates an alarm.</p>
+
+<pre class="prettyprint">// Mistyping get as gett
+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>
+
+<h4>Rule 2. Wrong Argument Number</h4>
+
+<p>Invoking a method with a wrong argument number is notified as an WebAPIError and the analysis proceeded.</p>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> 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>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] Number of the arguments to tizen.filesystem.resolve is 1; provide arguments of size from 2 to 4.</pre>
+
+<h4>Rule 3. Missing Error Handling</h4>
+
+<p>Invoking an asynchronous method without an error callback is notified as an WebAPIError and the analysis proceeded.</p>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> function needs an error callback function as its third argument. Because the error callback function 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;&nbsp;&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>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] Call to tizen.filesystem.resolve is missing an error callback function; provide an error callback function.</pre>
+
+<h4>Rule 4. Missing Exception Handling</h4>
+
+<p>Invoking an API, which can throw an exception without the <span style="font-family: Courier New,Courier,monospace">try-catch</span> clause is notified as an WebAPIError and the analysis proceeded.</p>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.calendar.getCalendars()</span> is a method that can throw exceptions, so it must be wrapped by a <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement. Because the <span style="font-family: Courier New,Courier,monospace">try-catch</span> 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(&quot;EVENT&quot;, calendarListCallback, errorCallback);</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] Function CalendarManager.prototype.getCalendars may raise an exception; call the function inside the try statement.</pre>
+
+<h4>Rule 5. Wrong Argument Type</h4>
+
+<p>Invoking API which passes wrong type value is notified as an WebAPIError and the is proceeded.</p>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.contact.getAddressBooks()</span> function needs arguments whose type is the <span style="font-family: Courier New,Courier,monospace">function</span> instead of the <span style="font-family: Courier New,Courier,monospace">string</span> and the <span style="font-family: Courier New,Courier,monospace">undefined</span>, so the JSA detects it and makes an alarm.</p>
+
+<pre class="prettyprint">var addressBooksCB = &quot;notFucntion&quot;;
+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);
+}
+catch (e) {}</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] Argument #1 of the function ContactManager.prototype.getAddressBooks is wrong; the expected type is AddressBookArraySuccessCallback.
+[Web API Rule] Argument #2 of the function ContactManager.prototype.getAddressBooks is wrong; the expected type is ErrorCallback.</pre>
+
+<h4>Rule 6. Wrong Dictionary Type</h4>
+
+<p>Creating a dictionary object with wrong key-value pairs is notified as an WebAPIError and the is proceeded.</p>
+
+<p>In the following example, the constructor <span style="font-family: Courier New,Courier,monospace">tizen.Contact()</span> 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;&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;)]
+});
+
+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: &quot;I&#39;m not an member of Contact&quot;</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] The property foo is not a member of the dictionary CantactNameInit.</pre>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/js_editor_w.htm b/org.tizen.devtools/html/web_tools/js_editor_w.htm
new file mode 100644 (file)
index 0000000..e923c92
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/js_editor_w.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>JavaScript Editor </title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#check">Checking JavaScript</a></li>
+                       <li><a href="#view">Viewing Editor Ruler</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>JavaScript Editor</h1> 
+  <p>The Tizen Web IDE provides a JavaScript editor with the following features:</p> 
+  <ul> 
+   <li><a href="#check">Checking JavaScript</a> <p>JavaScript checking allows you to check the JavaScript syntax.</p></li> 
+   <li><a href="#view">Viewing editor ruler</a> <p>Editor ruler area allows you to see errors in the JavaScript syntax.</p></li> 
+  </ul> 
+  <p>To clean up JavaScript code by adding indentation and carriage returns, use the <a href="code_beautifier_w.htm">Code Beautifier</a>, and to remove unnecessary content from the JavaScript files, use the <a href="code_minifier_w.htm">Code Minifier</a>.</p>
+  
+  
+<h2 id="check" name="check">Checking JavaScript</h2> 
+  <p>You can check JavaScript for the following:</p> 
+  <ul> 
+   <li>Syntax, using <a href="http://www.jslint.com/" target="_blank">JSLint</a></li> 
+   <li>Preferences for JSLint options</li> 
+  </ul> 
+  <p>You can check JavaScript in the following ways:</p> 
+  <ul> 
+   <li>Manual check <p>In the editor pop-up menu, select <strong>Check JS</strong>.</p></li> 
+   <li>Automatic check <p>If you save a file, the project is built and syntax is checked automatically.</p></li> 
+  </ul>
+
+<h2 id="view" name="view">Viewing Editor Ruler</h2> 
+  <p>If the JavaScript syntax is incorrect, the errors are displayed in the editor ruler area and in the <strong>Problems</strong> view.</p> 
+  <p class="figure">Figure: Problems view</p> 
+  <p style="text-align:center;"><img alt="Problems view" src="../images/problems_view.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/js_log_console_w.htm b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
new file mode 100644 (file)
index 0000000..ec57021
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>JavaScript Log Console View </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>  
+ 
+  <h1>JavaScript Log Console View</h1> 
+  <p>The <strong>JavaScript Log Console</strong> view provides a functionality to view widget JavaScript logs. The <strong>JavaScript Log Console</strong> view is automatically opened when widget is launched.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If no target is connected, a notification dialog appears at the right-bottom section of the IDE and the <strong>JavaScript Log Console</strong> view is not launched.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The following table shows the methods supported for logging to the JavaScript log.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Supported JavaScript log methods 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Method</th> 
+     <th>Example</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.log</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.log(&quot;console.log&quot;);</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.info</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.info(&quot;console.info&quot;);</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.warn</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.warn(&quot;console.warn&quot;);</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.error</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.error(&quot;console.error&quot;);</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.debug</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">console.debug(&quot;console.debug&quot;);</span></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <p>The JavaScript log methods are shown in the IDE with colors.</p>
+  <p class="figure">Figure: JavaScript log method colors</p>
+
+<p style="text-align:center;"><img alt="JavaScript log method colors"
+src="../images/js_colors.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/live_editing_w.htm b/org.tizen.devtools/html/web_tools/live_editing_w.htm
new file mode 100644 (file)
index 0000000..1369ac0
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/live_editing_w.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+    <script type="text/javascript" src="../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+    </div>
+       
+  <h1>Live Editing</h1>
+  <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="html_preview_w.htm">HTML Preview</a> view and when running the application in the Emulator or the Web Simulator (in mobile applications only).</p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">
+          This feature has the following limitations:
+          <ul>
+               <li>The Tizen Device API does not work on the Emulator.</li>
+               <li>Only specific device APIs are supported by the Web Simulator (live editing is available in mobile applications only).</li>
+               <li>Live editing does not work in certain network environments.</li>
+          </ul>
+        </td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>To enable live editing in the IDE, go to <strong>Run &gt; Run Configuration &gt; Tizen Web Application &gt; {PROJECT NAME}</strong> and check <strong>Enable live editing</strong> at the run configuration. If you are running your application for the first time, you must first create a new configuration.</p>
+
+<p>You can <a href="set_ide_preference_w.htm#live">set live editing preferences</a> in the IDE.</p>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
new file mode 100644 (file)
index 0000000..3395dc0
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Privilege Checker </title> 
+ </head> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+  <h1>Privilege Checker</h1> 
+  <p>The IDE provides the privilege checker tool to identify potential problems in the application code related to <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">privilege usage</a>.</p>
+  <p>You can enable the checks in the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm">project properties </a> during the <a href="../../../org.tizen.gettingstarted/html/process/app_dev_process_w.htm#build">build process</a> or code editing. You can also perform the checks manually in the IDE by selecting <strong>Project &gt; Check Privilege</strong>.</p>
+<p>The Privilege Checker tool is based on the <a href="content_assist_w.htm">Content Assist</a> Engine for Tizen IDE. It is used for codes that do not operate Content Assist and cannot perform checks. Therefore, the check results can possibly have missing (unsound) values.</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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (for a quick fix, use the <strong>Ctrl+1</strong> keyboard shortcut).</p>
+<table border="1">
+  <caption>Table: Privilege check alarms</caption>
+  <tbody> 
+  <tr>
+       <th>Alarm type</th>
+       <th>Description</th>
+       <th>Message format</th>
+       <th>Required actions</th>
+  </tr>
+  <tr>
+       <td>Undefined privilege alarm</td>
+       <td>The application uses a method whose privilege is not specified in the configuration file.</td>
+       <td>The <span style="font-family: Courier New,Courier,monospace">[tizen:Privilege name]</span> privilege is required. <p>For example (in a mobile Web application): <span style="font-family: Courier New,Courier,monospace">[http://tizen.org/privilege/application.launch]</span> privilege is required. </p></td>
+       <td>Assign the privilege in the configuration file in the IDE. Privilege violation is a strong reason for the rejection of an application in the certification process.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.devtools/html/web_tools/remote_inspector_w.htm b/org.tizen.devtools/html/web_tools/remote_inspector_w.htm
new file mode 100644 (file)
index 0000000..dc238f7
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/remote_inspector_w.htm
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+  <title>Remote Inspector</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <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 class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.gettingstarted/html/process/run_debug_app_w.htm">Running and Debugging Applications</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Remote Inspector</h1> 
+  <p>You can <a href="../../../org.tizen.gettingstarted/html/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 class="figure">Figure: JavaScript Debugger panels</p> 
+  <p style="text-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 class="figure">Figure: Elements panel</p> 
+  <p style="text-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 class="figure">Figure: Resources panel</p> 
+  <p style="text-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 class="figure">Figure: Network panel</p> 
+  <p style="text-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 class="figure">Figure: Sources panel</p> 
+  <p style="text-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 class="figure">Figure: Timeline panel</p> 
+  <p style="text-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 class="figure">Figure: Profiles panel</p> 
+  <p style="text-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 class="figure">Figure: Console panel</p> 
+  <p style="text-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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
new file mode 100644 (file)
index 0000000..95e4c66
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
@@ -0,0 +1,165 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+  <title>IDE Preferences </title>
+</head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+       <div id="profile">
+               <p>
+               <img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                  <li><a href="#wid">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>
+                  <li><a href="#css">CSS Editor</a></li>
+                  <li><a href="#html_editor">HTML Editor</a></li>
+                  <li><a href="#javascript">JavaScript Editor</a></li>
+                  <li><a href="#json">Json Editor</a></li>
+                  <li><a href="#nls">National Language Support (NLS)</a></li>
+                  <li><a href="#launch">Launch</a></li>
+                  <li><a href="#live">Live Editing</a></li>
+               </ul>
+       </div></div>    
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>IDE Preferences</h1>
+ 
+  <p>To set Web IDE preferences, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web</strong> in the Tizen IDE menu.</p>
+  <p>You can set the preferences introduced in the following sections.</p>
+
+  <h2 id="wid" name="wid">Widget ID</h2>
+  <p>To set a customized prefix for the widget ID, enter the value in the <strong>Prefix to the Widget ID</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 new widgets in the IDE. You can view the widget ID in the <span style="font-family: Courier New,Courier,monospace">config.xml file of the project.</span></p>
+
+  <h2 id="chrome" name="chrome">Chrome&trade; Browser Path</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Chrome</strong>.</p>
+  <p>The Google Chrome&trade; browser location is automatically set as default if the Chrome&trade; browser is installed in your system.</p>
+  <p>In case you install the browser in a custom path, the IDE cannot automatically detect the path and you must set the location manually.</p>
+
+  <h2 id="editor" name="editor">Editor</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Editor</strong>.</p>
+  <p>Tizen SDK provides advanced editor features, such as file path content assist. These features are required to search files in the project.</p>
+  <p><strong>Project Resource Lookup Setting &gt; Excluded Folders</strong>: Specify the folders that you want to exclude from searching files.</p>
+
+  <h2 id="config" name="config">Configuration Editor</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Editor &gt; Configuration Editor</strong>.</p>
+  <p>To stop error messages from being displayed if you incorrectly modify the <span style="font-family: Courier New,Courier,monospace">config.xml</span> source file, select the <strong>Don&#39;t show error message</strong> check box.</p>
+
+  <h2 id="css" name="css">CSS Editor</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>&gt;Editor &gt; CSS Editor</strong>.</p>
+  <p>Tizen provides the W3C CSS validation parser for checking the CSS syntax.</p>
+  <p>You can set the following validation times:</p>
+  <ul>
+   <li>Build</li>
+   <li>Reconcile</li>
+  </ul>
+  <p>You can set the following check levels:</p>
+  <ul>
+   <li>Ignore</li>
+   <li>Warning</li>
+   <li>Error</li>
+  </ul>
+  <p>You can exclude CSS 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, TAU(Tizen Advanced UI), globalize, coderdeck, modernizr</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.mobile-1.0a4.1.min.css</span> file generates many warnings, the default pattern string values exclude the parsing of this CSS file.</p>
+
+  <h2 id="html_editor" name="html_editor">HTML Editor</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Editor &gt; HTML Editor</strong>.</p>
+  <p>You can set the visibility of the breadcrumb control in the HTML editor. If you clear the <strong>Show breadcrumb</strong> checkbox, the breadcrumb control is not visible in the HTML editor.</p>
+
+  <h2 id="javascript" name="javascript">JavaScript Editor</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Editor &gt; JavaScript Editor</strong>.</p>
+  <p>In the JavaScript Editor, you can modify several <a href="http://www.jslint.com/lint.html" target="_blank">JSLint</a> options. JSLint is a JavaScript code quality tool.</p>
+
+  <h2 id="json" name="json">Json Editor</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Editor &gt; Json Editor</strong>.</p>
+  <p>You can insert spaces for tabs in JSON by selecting the <strong>Insert Spaces for Tabs</strong> check box. In the <strong>Number of spaces to indent </strong> field, enter the number of spaces to indent for tabs.</p>
+
+  <h2 id="nls" name="nls">National Language Support</h2>
+  <p>You can view the Tizen IDE in the following languages:</p>
+  <ul>
+   <li>en (English) <p>This is the default language.</p> </li>
+   <li>de (German)</li>
+   <li>es (Spanish)</li>
+   <li>fr (French)</li>
+   <li>it (Italian)</li>
+   <li>ja (Japanese)</li>
+   <li>ko (Korean)</li>
+   <li>pt_BR (Portuguese)</li>
+   <li>zh (Chinese)</li>
+   <li>zh_TW (Chinese Traditional)</li>
+  </ul>
+  <p>To support a language, you must specify the language code. For example, to support the Korean language, edit the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file, which is located in your <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_HOME&gt;/ide</span> directory.</p>
+  <p>The following snippet shows the current <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file supporting the English language:</p>
+  <pre class="prettyprint">-clean
+-nl
+en
+-vmargs
+</pre>
+  <p>To support the Korean language, replace <span style="font-family: Courier New,Courier,monospace">en</span> with <span style="font-family: Courier New,Courier,monospace">ko</span> and save the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file.</p>
+  <pre class="prettyprint">-clean
+-nl
+ko
+-vmargs
+</pre>
+
+<h2 id="launch" name="launch">Launch</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Launch</strong>.</p>
+  <p>Check the option, if you want to launch the application even when the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has an error. The option is not checked by default.</p>
+
+  <h2 id="live" name="live">Live Editing</h2>
+  <p>In the <strong>Tizen SDK &gt; Web</strong> side menu, go to <strong>Live Editing</strong>.</p>
+  <p>You can select only 1 preview preference option, which is whether file content or editor content in shown in the application:</p>
+<ul>
+<li>Select <strong>File</strong> to change the application when a file is saved.</li>
+<li>Select <strong>Editor</strong> to change the application when the editor content changes. This means that your changes are reflected without saving the changes.</li>
+<li>Select <strong>None</strong> to perform no synchronization.</li></ul>
+
+<p>The following options are also available:</p>
+<ul>
+               <li><strong>Live highlight</strong>: Check to highlight your cursor in the editor.
+            <p>The option is only available when synchronization with the editor is selected above.</p></li>
+        <li><strong>Enable live-editing as default when emulator is launched</strong>: Check to enable live editing by default whenever running an application.</li>
+</ul>  
+
+                <p class="figure">Figure: Live highlight</p> 
+  <p style="text-align: center;"><img alt="Live highlight" src="../images/live_highlight.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/tools_w.htm b/org.tizen.devtools/html/web_tools/tools_w.htm
new file mode 100644 (file)
index 0000000..5f1dbfb
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/tools_w.htm
@@ -0,0 +1,122 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Tools</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+    </div>
+       
+ <h1>Web Tools</h1>
+
+<p>The Tizen SDK provides the following set of features and tools for mobile Web application development:</p>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<ul>
+    <li><strong>Application generation management tools</strong>
+    <ul>
+               <li><a href="config_editor_w.htm">Configuration Editor</a> <p>This tool allows you to configure the application.</p></li>
+       </ul></li>
+
+       <li><strong>Rule checking tools</strong>
+    <ul>
+               <li><a href="privilege_checker_w.htm">Privilege Checker</a> <p>This tool allows you identify potential problems in the application code.</p></li>
+       </ul></li>
+
+       <li><strong>Editor tools</strong>
+    <ul>       
+               <li><a href="content_assist_w.htm">Content Assist</a> <p>This tool allows you to write quick and efficient code.</p></li>
+               <li><a href="html_editor_w.htm">HTML Editor</a> <p>This tool makes it easy to write or edit HTML.</p></li>
+               
+               <li><a href="html_preview_w.htm">HTML Preview</a>  <p>Show real-time previews of changes in an HTML file.</p></li>
+               
+               <li><a href="css_editor_w.htm">CSS Editor</a> <p>This tool makes it easier to write or edit CSS.</p></li>
+               
+               <li><a href="css_preview_w.htm">CSS Preview</a>  <p>Show real-time previews of changes in a CSS file.</p></li>
+               
+        <li><a href="js_editor_w.htm">JavaScript Editor</a> <p>This tool makes it easy to write or edit JavaScript.</p></li>
+
+        <li><a href="code_beautifier_w.htm">Code Beautifier</a> <p>This tool allows you beautify the code.</p></li>
+
+        <li><a href="code_minifier_w.htm">Code Minifier</a> <p>This tool allows you to minimize code.</p></li>
+
+        <li><a href="live_editing_w.htm">Live Editing</a> <p>This tool allows you to apply source changes to the running application immediately (without building, packaging, and relaunching).</p></li>
+       </ul></li>
+               <li><strong>UI building tools</strong>
+    <ul>       
+        <li><a href="uibuilder_w.htm">UI Builder</a> in <span style="color: red">mobile applications only</span>  <p>This WYSIWYG (What You See Is What You Get) design environment tool is used to create user interfaces.</p></li>
+       </ul></li>
+
+       <li><strong>Application running and testing tools</strong>
+    <ul>       
+               <li><a href="command_line_interface_w.htm">Command Line Interface</a> in <span style="color: red">mobile applications only</span>  <p>This tool set allows you to develop Tizen Web applications without the Tizen IDE.</p></li>
+               <li><a href="web_simulator_w.htm">Web Simulator</a>  <p>This tool allows you to run your Web applications to develop and debug them.</p></li>
+               
+               <li><a href="web_unit_test_tool_w.htm">Web Unit Test Tool</a> in <span style="color: red">mobile applications only</span>  <p>This tool provides a set of features for testing the source code.</p></li>
+       </ul></li>
+
+       <li><strong>Analysis and debugging tools</strong>
+    <ul>       
+               <li><a href="remote_inspector_w.htm">Remote Inspector</a> <p>This tool allows you to debug your Web applications.</p></li>
+               
+               <li><a href="js_analyzer_w.htm">JavaScript Analyzer</a> in <span style="color: red">mobile applications only</span> <p>This tool makes it easy to find problems in JavaScript code.</p></li>
+               
+               <li><strong><a href="js_log_console_w.htm">JavaScript Log Console view</a></strong> <p>Shows JavaScript logs for Web widgets.</p></li>
+       </ul></li>
+       
+       <li><strong>Tips for tool usage</strong>
+    <ul>       
+               <li><a href="set_ide_preference_w.htm">Setting IDE Preferences</a> <p>This tool allows you to set Web IDE preferences.</p></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/uibuilder_w.htm b/org.tizen.devtools/html/web_tools/uibuilder_w.htm
new file mode 100644 (file)
index 0000000..68e1968
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/uibuilder_w.htm
@@ -0,0 +1,1802 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+    <script type="text/javascript" src="../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+    <script 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 Builder</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#animator">Animator</a></li>
+            
+            <li><a href="#views">Supported Views and Editors</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>UI Builder</h1>
+
+<p>The Tizen Web UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen Web UIs by allowing you to arrange widgets using a drag-and-drop WYSIWYG (What You See Is What You Get) editor. The UI Builder supports a variety of <a href="#palette">UI widgets</a>, and <a href="#views">views and editors</a>.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This tool is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the <a href="../../../org.tizen.gettingstarted/html/process/designing_app_ui_w.htm#project">UI Builder project</a>.</p>
+
+<p class="figure">Figure: UI Builder</p>
+<p style="text-align:center;"><img alt="UI Builder" src="../images/uibuilder.png" /></p>
+
+<h2 id="animator" name="animator">Animator</h2>
+
+<p>The Tizen Animator can apply CSS3 animations to Web applications created by the Tizen Web UI Builder. The Animator can operate seamlessly within a UI Builder project. To access it, simply select the <strong>Animator</strong> tab in the UI Builder editor <strong>Page Designer</strong> view.</p>
+
+<p>The Animator shares several views with the UI Builder, such as <a href="#outline">Outline</a>, <a href="#properties">Properties</a>, and <a href="#pages">Pages</a> views. The Animator supports a variety of predefined animations using CSS3 properties, such as opacity, translation, and rotation and also creates its own KeyFrame in the <a href="#timeline">Timeline</a> view or the <a href="#animator_editor">Animator Editor</a>.</p>
+
+<p class="figure">Figure: Animator</p>
+<p style="text-align:center;"><img alt="Animator" src="../images/animator.png" /></p>
+
+
+
+<h2 id="views" name="views">Supported Views and Editors</h2>
+
+<p>The UI Builder supports the following views and editors:</p>
+                <h3 id="animator_editor" name="animator_editor">Animator Editor</h3>
+
+<p>The Animator Editor is a tab in the <strong>Page Designer</strong> view in the Tizen Web UI Builder. You can see widgets in the editor and create KeyFrames with play headers in the <a href="#timeline">Timeline</a> view.</p>
+
+<p>To access the editor, select the <strong>Animator</strong> tab in the <strong>Page Designer</strong> view. The design area changes to the editor area, which has no palette, and the <strong>Timeline</strong> view appears.</p>
+
+<p class="figure">Figure: Changing to the Animator view</p>
+<p style="text-align:center;"><img alt="Changing to the Animator view" src="../images/animator_tab.png" /></p>
+
+<p class="figure">Figure: Editor area in animator mode</p>
+<p style="text-align:center;"><img alt="Editor area in animator mode" src="../images/editor_area.png" /></p>
+
+<p>The Animator Editor consists of a toolbar (same as in the <a href="#page_designer">Page Designer</a> view) and the editor area, which lets you work with widgets and animations visually. </p>
+
+<p>After you create a KeyFrame in the <a href="#timeline">Timeline</a> view, you can see the path and path handler that operate the curve path between KeyFrames in the Animator Editor area. The following figure and table illustrate the elements in the editor area that are used to KeyFrame path.</p>
+
+<p class="figure">Figure: Animator Editor area</p>
+<p style="text-align:center;"><img alt="Animator Editor area" src="../images/animator_editor_area.png" /></p>
+
+<table border="1">
+ <caption>
+  Table: Animator editor elements
+ </caption>
+ <colgroup>
+  <col />
+  <col />
+ </colgroup>
+ <tbody>
+  <tr>
+   <th>Icon</th>
+   <th>Element</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><img alt="" src="../images/path.png"/></td>
+   <td>Path</td>
+   <td>Shows the widget moving path, if the animation changes the widget position.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="../images/path_handler.png"/></td>
+   <td>Animator handler</td>
+   <td>Sets position-related properties.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="../images/path_edge.png"/></td>
+   <td>Edge</td>
+   <td>Creates a new curve.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="../images/path_controller.png"/></td>
+   <td>Curve controller</td>
+   <td>Controls the curve angle.</td>
+  </tr>
+ </tbody>
+</table>
+
+                <h3 id="config_editor" name="config_editor">Configuration Editor</h3>  
+
+<p>The configuration editor can be used to configure the settings of the UI Builder project. You can define which devices are available in the Web UI Builder and can be selected from the toolbar in the <a href="#page_designer">Page Designer</a> editor. Based on the detail information of the selected devices, the UI Builder creates a feature list to be used in the <a href="#nscreen">N-Screen view</a>.</p>
+
+<p>To open the configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace;">index.config.xml</span> file in the <strong>Project Explorer</strong> view.</p> 
+
+  <p class="figure">Figure: Configuration editor</p> 
+  <p style="text-align:center;"><img alt="Configuration editor" src="../images/ui_builder_config.png" /></p>
+
+  
+<p>The configuration editor consists of the following parts:</p>
+<ul class="ul"><li>Device List
+<p>Defines the devices available in the <strong>Page Designer</strong> editor. You can only use the selected devices in the <strong>Page Designer</strong> editor.</p></li>
+<li>Device Info
+<p>Includes detail information of the device selected in the Device List. For example, the device name, orientation, device-pixel-ratio, device-width, device-height, width, and height.</p></li>
+<li>Device Feature
+<p>Shows the feature list for the <strong>N-Screen</strong> view:</p>
+<ul class="ul">
+<li>Common
+<p>Contains all devices.</p></li>
+<li>Orientation
+<p>Contains either portrait or landscape.</p></li>
+<li>Pixel-ratio
+<p>Indicates the density of pixels per unit. </p></li>
+<li>Resolution
+<p>Indicates the combination of device-width and device-height. </p></li>
+</ul></li></ul>
+
+                <h3 id="databinding" name="databinding" class="items-tit-h2">DataBinding View</h3>
+
+
+<p>Data binding is a way to bind data and UI at runtime, so when the data changes, the UI updates automatically.</p>
+
+<p>The <strong>DataBinding</strong> view helps you to manage the data source and model easily and show the binding information between data model and UI widgets. If the <strong>DataBinding</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; DataBinding</strong>.</p>
+
+<p>The <strong>DataBinding</strong> view consists of a data source panel, data model panel, and binding information panel.</p>
+
+<p class="figure">Figure: DataBinding view</p>
+<p style="text-align:center;"><img alt="DataBinding view" src="../images/databinding_view.png" /></p>
+
+<p>To bind data between your HTML file in the <strong>Page Designer</strong> editor and the <strong>Data Model</strong> panel, you can:</p>
+
+<ul class="ul">
+    <li>Select the data model item in the <strong>DataBinding</strong> view, and then drag and drop the item to the widget on the <strong>Page Designer</strong> editor.</li>
+    <li>Use the <strong>Set Target</strong> dialog to select the HTML element and bindings.</li>
+</ul>
+
+<h4>Data Source Panel</h4>
+
+<p>The data source panel displays the hierarchical structure of all data sources.</p>
+
+<p class="figure">Figure: Data source panel</p>
+<p style="text-align:center;"><img alt="Data source panel" src="../images/data_source_panel.png" /></p>
+
+<p>The following tables describe the data source panel function buttons and available data source types.</p>
+
+<table border="1">
+   <caption>
+     Table: Data source Panel functions
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Button</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_source_set.png" /></td>
+     <td>Set data source</td>
+     <td>Set the selected data source.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_source_create.png" /></td>
+     <td>Create</td>
+     <td>Create a new data source.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_source_delete.png" /></td>
+     <td>Delete</td>
+     <td>Remove the selected data source.</td>
+    </tr>
+   </tbody>
+</table>
+
+<table border="1">
+   <caption>
+     Table: Data source icons
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Type icon</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_source_empty.png" /></td>
+     <td>Empty data source</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_source_static.png" /></td>
+     <td>Static data source</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_source_remote.png" /></td>
+     <td>Remote call data source</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_source_api.png" /></td>
+        <td>System API call data source (Contact, Calendar, and Call History that use the Tizen Web Device API)</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_source_file.png" /></td>
+     <td>File data source</td>
+    </tr>
+   </tbody>
+</table>
+
+<p>After you create a new data source by clicking the <img alt="" src="../images/data_source_create.png" /> button, select the new source, and click the <img alt="" src="../images/data_source_set.png" /> button, the Set Source window is shown. In the window, you can set data source configurations and show structured data schema:</p>
+
+<ul class="ul">
+    <li>In the data type section, select the data source type.</li>
+    <li>In the settings section, view and set the properties for a specific data source.</li>
+    <li>In the data model section, view the structured data schema, and create, remove, and move items within the schema.</li>
+</ul>
+
+<p class="figure">Figure: Set Source window</p>
+<p style="text-align:center;"><img alt="Set Source window" src="../images/data_source_dialog.png" /></p>
+
+<h5>Data Types</h5>
+
+<p>Each data type provides different options:</p>
+
+<ul class="ul">
+
+<li><strong>Static</strong>
+
+<p>You can easily make a JSON or XML type data with the static data type. You can fill the text box from the input directly, or open the file.</p>
+
+<p>The data model section displays a manageable data schema.</p>
+
+<p style="text-align:center;"><img alt="Static" src="../images/databinding_static.png" /></p>
+
+<table border="1">
+   <caption>
+     Table: Static data source icons
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Icon</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_model_formatted.png" /></td>
+     <td>Show the data in the formatted manner.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_model_compacted.png" /></td>
+     <td>Show the data in the compacted manner.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_open.png" /></td>
+     <td>Open a file (XML or JSON data file).
+      <p>Open the file and fill in the textbox.</p></td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_reload.png" /></td>
+     <td>Reload the opened file.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_clear.png" /></td>
+     <td>Clear the textbox.</td>
+    </tr>
+   </tbody>
+</table>
+
+<table border="1">
+   <caption>
+     Table: Data model section icons
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Icon</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_model_expand.png" /></td>
+     <td>Expand all fields.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_model_collapse.png" /></td>
+     <td>Collapse all fields.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_add.png" /></td>
+     <td>Add a new field.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_remove.png" /></td>
+     <td>Remove the selected field.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_remove_all.png" /></td>
+     <td>Remove all fields.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_up.png" /></td>
+     <td>Move the selected field upwards.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_down.png" /></td>
+     <td>Move the selected field downwards.</td>
+    </tr>
+   </tbody>
+</table>
+
+<p>The same data model section icons are available for all data types.</p>
+
+</li>
+
+<li><strong>Remote Call</strong>
+
+<p>You can easily request data from a remote server using the remote call data type.</p>
+
+<p style="text-align:center;"><img alt="Remote call" src="../images/databinding_remote.png" /></p>
+
+<table border="1">
+   <caption>
+     Table: Properties of the remote data source
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Property</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td>URL</td>
+     <td>URL to which the request is sent.</td>
+    </tr>
+    <tr>
+     <td>METHOD</td>
+     <td>Type of request, at the moment only GET-requests are supported.</td>
+    </tr>
+    <tr>
+     <td>Proxy</td>
+     <td>Protocol of the data.</td>
+    </tr>
+    <tr>
+     <td>Source Type</td>
+     <td>Type of data that is received from the server.</td>
+    </tr>
+    <tr>
+     <td>Timeout</td>
+     <td>Timeout (in milliseconds) for the request.</td>
+    </tr>
+    <tr>
+     <td>Request Parameters</td>
+     <td>Query string for requests.</td>
+    </tr>
+   </tbody>
+</table>
+
+</li>
+
+<li><strong>Contact</strong>
+
+<p>You can easily request data from Tizen address books using the contact data type:</p>
+
+<ul class="ul">
+    <li>Get an array of contacts by selecting an appropriate value in the <strong>AddressBook Type</strong> drop-down menu.</li>
+    <li>If you select &quot;Select addressBook ID&quot; in the <strong>AddressBook Type</strong> drop-down menu, input the ID value in the <strong>Addressbook ID</strong> field.</li>
+</ul>
+
+<p style="text-align:center;"><img alt="Contact" src="../images/databinding_contact.png" /></p>
+
+</li>
+
+<li><strong>Calendar</strong>
+
+<p>You can easily request data from the Tizen calendar using the calendar data type:</p>
+
+<ul class="ul">
+    <li>Get an array of calendar items by selecting an appropriate value in the <strong>Calendar</strong> drop-down menu.</li>
+    <li>Define the calendar type (EVENT or TASK), in the <strong>Calendar Type</strong> field.</li>
+    <li>If you select &quot;Type a Calendar ID&quot; in the <strong>Calendar</strong> drop-down menu, input the ID value in the <strong>Calendar ID</strong> field.</li>
+</ul>
+
+<p style="text-align:center;"><img alt="Calendar" src="../images/databinding_calendar.png" /></p>
+
+</li>
+
+<li><strong>Call History</strong>
+
+<p>You can easily request data from the Tizen call history using the call history data type:</p>
+
+<ul class="ul">
+    <li>Set the service type of the call in the <strong>Type</strong> drop-down menu.</li>
+    <li>Indicate whether the call was dialed, received, missed, blocked, or rejected in the <strong>Direction</strong> drop-down menu.</li>
+    <li>Define the sort order in the <strong>StartTime Order</strong> drop-down menu.</li>
+</ul>
+
+<p style="text-align:center;"><img alt="Call history" src="../images/databinding_call_history.png" /></p>
+
+</li>
+
+<li><strong>File System</strong>
+
+<p>You can easily request data from a file on runtime using the file data type:</p>
+
+<ul class="ul">
+    <li>Select the file in the project using the <strong>Path</strong> field.</li>
+    <li>Define the file content type (JSON or XML) in the <strong>Type</strong> drop-down menu.</li>
+</ul>
+
+<p style="text-align:center;"><img alt="File system" src="../images/databinding_file_system.png" /></p>
+
+</li>
+
+</ul>
+
+<h4>Data Model Panel</h4>
+
+<p>The data model panel displays the data schema. It is used to bind data to widgets on the <strong>Page Designer</strong> editor with drag and drop.</p>
+
+<p>To create the data model, first create a data source in the data source panel, and then drag the data source from the data source panel to the data model panel.</p>
+
+<p class="figure">Figure: Data model panel</p>
+<p style="text-align:center;"><img alt="Data model panel" src="../images/data_model_panel.png" /></p>
+
+<p>The following tables describe the data model panel function buttons and available data model types.</p>
+
+<table border="1">
+   <caption>
+     Table: Data model panel function buttons
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Button</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_model_item.png" /></td>
+     <td>Create Item</td>
+     <td>Create a new data model item.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_model_create.png" /></td>
+     <td>Create Model</td>
+     <td>Create a new data model.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/data_model_delete.png" /></td>
+     <td>Delete</td>
+     <td>Remove the selected data model or selected data model item.</td>
+    </tr>
+   </tbody>
+</table>
+
+<table border="1">
+   <caption>
+     Table: Data model types
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Type icon</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_source1.png" /></td>
+     <td>There is no data source.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/data_source2.png" /></td>
+     <td>There is a data source.</td>
+    </tr>
+   </tbody>
+</table>
+
+<h4>Binding Information Panel</h4>
+
+<p>When the binding is successful, the binding information panel is displayed:</p>
+
+<ul class="ul">
+    <li>The <strong>Data</strong> column displays the data model item name.</li>
+    <li>The <strong>Widget</strong> column displays the page ID and the binding widget ID.</li>
+    <li>The <strong>Binding</strong> column displays the binding format.</li>
+</ul>
+
+<p class="figure">Figure: Binding information panel</p>
+<p style="text-align:center;"><img alt="Binding information panel" src="../images/binding_info_panel.png" /></p>
+
+<p>The following table describes the binding information panel function buttons.</p>
+
+<table border="1">
+   <caption>
+     Table: Binding information Panel function buttons
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Button</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/binding_info_toggle.png" /></td>
+     <td>Toggle</td>
+     <td>Show or hide the binding format message on the tooltip of the widget in the <strong>Page Designer</strong> editor. The message appears when the binding is successful.</td>
+    </tr>
+     <tr>
+     <td><img alt="" src="../images/binding_info_toggle_delete.png" /></td>
+     <td>Delete</td>
+     <td>Remove the selected binding information.</td>
+    </tr>
+   </tbody>
+</table>
+
+<p>If a widget is bound, it has the <img alt="" src="../images/binding_link.png" /> icon in the <strong>Page Designer</strong> editor. To see the binding format, move the cursor on the widget.</p>
+
+<p class="figure">Figure: Binding information in Page Designer</p>
+<p style="text-align:center;"><img alt="Binding information in Page Designer" src="../images/binding_info_designer.png" /></p>
+
+        
+                <h3 id="nscreen" name="nscreen" class="items-tit-h2">N-Screen Views</h3>
+
+
+<p>The <strong>N-Screen</strong> views define how to use content in multiple screens and allows you to change content in other screens easily.</p>
+
+<p>If the <strong>N-Screen</strong> views are not visible, open them from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; NScreen</strong>.</p>
+
+  <p class="figure">Figure: N-Screen views and devices</p> 
+  <p style="text-align:center;"><img alt="N-Screen views and devices" src="../images/nscreen_view_devices.png" /></p>
+ 
+<p>The N-Screen views consist of the <a href="#nscr">N-Screen view</a> and <a href="#device">Devices</a>.</p>
+ 
+ <h4 id="nscr" name="nscr">N-Screen View</h4>
+ 
+ <p>The N-Screen view consists of <a href="#css">CSS Layers</a> and <a href="#screen">screen features</a>.</p>
+ 
+   <p class="figure">Figure: N-Screen view</p> 
+  <p style="text-align:center;"><img alt="N-Screen view" src="../images/nscreen_view.png" /></p>
+ 
+<h5 id="css" name="css">CSS Layers</h5>
+<p>The CSS layer section of the <strong>N-Screen</strong> view displays the CSS layers of the page currently selected in the <strong>Page Designer</strong> view. Enable and disable CSS files in CSS Layers.</p>
+
+<p>When you enable or disable a CSS file, you can see an added or deleted CSS style of the selected page in the <strong>Page Designer</strong>.</p>
+
+  <p class="figure">Figure: CSS Layers</p> 
+  <p style="text-align:center;"><img alt="CSS Layers" src="../images/css_layers.png" /></p>
+  
+<p>The following images show how to enable and disable a CSS file in CSS layers.</p>
+  
+  
+  <p class="figure">Figure: Enable &quot;index_page1_common.css&quot; only and show its CSS style in Page Designer</p> 
+  <p style="text-align:center;"><img alt="Enable index_page1_common.css only and show its CSS style in Page Designer" src="../images/css_layer1.png" /></p> 
+
+  <p class="figure">Figure: Enable &quot;index_page1_320X533.css&quot; only and show its CSS style in Page Designer</p> 
+  <p style="text-align:center;"><img alt="Enable index_page1_320X533.css only and show its CSS style in Page Designer" src="../images/css_layer2.png" /></p>
+   
+  <p class="figure">Figure: Enable both and show all CSS styles in Page Designer</p> 
+  <p style="text-align:center;"><img alt="Enable both and show all CSS styles in Page Designer" src="../images/css_layer3.png" /></p>
+   
+<h5 id="screen" name="screen">Screen Features</h5>
+
+<p>The screen features consist of the detail information of the selected devices in the configuration editor.</p>
+<p>You can select, enable, and disable predefined screen features.</p>
+
+  <p class="figure">Figure: Screen features</p> 
+  <p style="text-align:center;"><img alt="Screen features" src="../images/nscreen_feature.png" /></p>
+  
+<p>Screen features consist of the following features.</p>
+<table>
+<caption>Table: Screen features</caption>
+<tbody>
+<tr>
+ <th>Name</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td>Common</td>
+ <td>Consists of the default screen only, and cannot be disabled. 
+ <p>When a CSS style is added to the Common screen, it is applied to all devices.</p>
+</td>
+</tr>
+<tr>
+ <td>Orientation</td>
+ <td>Consists of portrait and landscape screens, and can be enabled or disabled.
+<p>When a CSS style is added to the portrait screen, it is applied to the portrait view of the screen only.</p>
+</td>
+</tr>
+<tr>
+ <td>Pixel Ratio</td>
+ <td>Consists of various screens, and can be enabled or disabled.
+<p>When a CSS style is added to any screen, it is applied only to the device with an equal screen pixel ratio (density of pixels per unit).</p>
+</td>
+</tr>
+<tr>
+ <td>Resolution</td>
+ <td>Consists of various screens, and can be enabled or disabled.
+<p>When a CSS style is added to any screen, it is applied only to the device with an equal screen size.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+<p>To enable a screen:</p>
+<ol>
+ <li>Right-click the desired screen size and select <strong>Enable</strong>.</li>
+<li>Define the content of the new style sheet (such as <span style="font-family: Courier New,Courier,monospace">index_page1_320x320.css</span>) in the <strong>Project Explorer</strong> view.</li>
+</ol>
+
+  <p class="figure">Figure: Enabling a screen</p> 
+  <p style="text-align:center;"><img alt="Enabling a screen" src="../images/screen_enable.png" /></p>
+
+  <h4 id="device" name="device">Devices</h4>
+  
+<p>The <strong>Devices</strong> menu consists of a selected device list in the configuration editor.</p>
+<p>When you select a screen in the screen features, <strong>Devices</strong> shows a supported device list. If you selected a device in the <strong>Page Designer</strong> view, it is shown with a screen where all CSS styles are applied. The shown screen is the same size as a real device screen.</p>
+  
+ <p class="figure">Figure: Device page of the configuration editor</p> 
+  <p style="text-align:center;"><img alt="Device page of the configuration editor" src="../images/devices_page.png" /></p> 
+  <p class="figure">Figure: Devices</p> 
+  <p style="text-align:center;"><img alt="Devices" src="../images/devices.png" /></p>
+<table>
+ <caption>Table: Devices information</caption>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>W 320x320 [320x320] x1.0 (1:1)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 1.0</p>
+<p>Resolution: 320x320</p>
+</td>
+  </tr>
+  <tr>
+   <td>W 312x496 [312x496] x1.0 (10:16)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 1.0</p>
+<p>Resolution: 312X496</p>
+</td>
+  </tr>
+  <tr>
+   <td>W 360x480 [360x480] x1.0 (3:4)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 1.0</p>
+<p>Resolution: 360x480</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 480x800 [320x533] x1.5 (3:5)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 1.5</p>
+<p>Resolution: 320x533</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 800x480 [533X320] x1.5 (5:3)</td>
+   <td>Orientation: Landscape
+<p>Pixel ratio: 1.5</p>
+<p>Resolution: 533x360</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 540x960 [360x640] x1.5 (9:16)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 1.5</p>
+<p>Resolution: 360x640</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 960X540 [640X360] x1.5 (16:9)</td>
+   <td>Orientation: Landscape
+<p>Pixel ratio: 1.5</p>
+<p>Resolution: 640x360</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 720x1280 [360x640] x2.0 (9:16)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 2.0</p>
+<p>Resolution: 360x640</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 1280X720 [640x360] x2.0 (16:9)</td>
+   <td>Orientation: Landscape
+<p>Pixel ratio: 2.0</p>
+<p>Resolution: 640x360</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 1080x1920 [360x640] x2.0 (9:16)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 2.0</p>
+<p>Resolution: 360x640</p>
+</td>
+  </tr>
+  <tr>
+   <td>M 1920x1080 [640x360] x2.0 (16:9)</td>
+   <td>Orientation: Landscape
+<p>Pixel ratio: 2.0</p>
+<p>Resolution: 640x360</p>
+</td>
+  </tr> 
+  <tr>
+   <td>M 800x1280 [800x1280] x1.0 (10:16)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 1.0</p>
+<p>Resolution: 800x1280</p>
+</td>
+  </tr> 
+  <tr>
+   <td>M 1280x800 [1280x800] x1.0 (16:10)</td>
+   <td>Orientation: Landscape
+<p>Pixel ratio: 1.0</p>
+<p>Resolution: 1280x800</p>
+</td>
+  </tr> 
+  <tr>
+   <td>M 1600x2560 [800x1280] x2.0 (10:16)</td>
+   <td>Orientation: Portrait
+<p>Pixel ratio: 2.0</p>
+<p>Resolution: 800x1280</p>
+</td>
+  </tr>   
+  <tr>
+   <td>M 2560x1600 [1280x800] x2.0 (16:10))</td>
+   <td>Orientation: Landscape
+<p>Pixel ratio: 2.0</p>
+<p>Resolution: 1280x800</p>
+</td>
+  </tr>  
+  </tbody>
+</table>
+
+<p>To select a device:</p>
+<ol>
+ <li>Click the <strong>Common</strong> screen in the <strong>N-Screen</strong> view.</li>
+ <li>Open the <strong>Devices</strong> drop-down menu.</li>
+ <li>Select the desired device.
+  <p style="text-align:center;"><img alt="" src="../images/device_select.png" /></p></li>
+ <li>Change the text in the <strong>Page Designer</strong> toolbar.
+<p>You can view the change in the <strong>Page Designer</strong> view.</p>
+  <p style="text-align:center;"><img alt="" src="../images/device_change.png" /></p></li>
+ </ol>
+
+                <h3 id="outline" name="outline">Outline View</h3>
+
+<p>The <strong>Outline</strong> view displays the hierarchical structure of the page currently open in the <strong>Page Designer</strong> view. If the <strong>Outline</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; General &gt; Outline</strong>.</p>
+
+<p class="figure">Figure: Outline view</p>
+<p style="text-align:center;"><img alt="Outline view" src="../images/outline_view.png" /></p>
+
+<p>You can manage widgets in the <strong>Outline</strong> view:</p>
+
+<ul class="ul">
+    <li>Create a widget by dragging it from the <strong>Palette</strong> to the <strong>Outline</strong> view.</li>
+    <li>Move a widget by dragging it to a new position.</li>
+    <li>Change the widget ID in the context menu or by pressing the <strong>F2</strong> key.</li>
+    <li>Manage selected widgets by cutting, copying, pasting, and deleting them.</li>
+</ul>
+
+
+                <h3 id="pages" name="pages">Pages View</h3>
+               
+
+<p>The <strong>Pages</strong> view displays a thumbnail image of all the pages in the currently selected project. If the <strong>Pages</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Pages</strong>.</p>
+
+<p class="figure">Figure: Pages view</p>
+<p style="text-align:center;"><img alt="Pages view" src="../images/pages.png" /></p>
+
+<p>You can re-order pages by dragging them to the selected position in the <strong>Pages</strong> view.</p>
+<p>You can create and delete page templates and pages in the <strong>Pages</strong> view. Most actions are provided through the context menu:</p>
+<ul class="ul">
+<li><p>To add a basic page:</p>
+<p>Go to <strong>Common &gt; Add Basic Page</strong>.</p></li>
+<li>To add a new page through a page template:
+<ol>
+<li>Right-click the view and select <strong>New Page</strong>.</li>
+<li>Select a group.</li>
+<li>Select a page template.
+<p>5 page templates are provided by default.</p>
+<p style="text-align:center;"><img alt="Pages view" src="../images/pages_template.png" /></p></li>
+<li>Insert a page ID.</li>
+<li>Click <strong>Finish</strong>.</li>
+</ol></li>
+
+<li>To delete a selected page:
+<p>Right-click the page and select <strong>Delete</strong>.</p></li>
+
+<li>To create a new page template:
+<ol>
+<li>Right-click the view and select <strong>Create Template</strong>.</li>
+<li>Select a group.</li>
+<li>Insert a page template name.</li>
+<li>Click <strong>Finish</strong>.</li>
+</ol></li>
+
+<li>To import a page template:
+<ol>
+<li>Right-click the view and select <strong>Import Template</strong>.</li>
+<li>Select a page template.</li>
+<li>Select a group.</li>
+<li>Insert a page template name.</li>
+<li>Click <strong>Finish</strong>.</li>
+</ol></li>
+
+<li>To export a page template:
+<ol>
+<li>Right-click the page and select <strong>Export Template</strong>.</li>
+<li>Select a group.</li>
+<li>Select a page template.</li>
+<li>Select the export location.</li>
+<li>Insert the exported template name.</li>
+</ol>
+</li></ul>
+
+         
+                <h3 id="page_designer" name="page_designer">Page Designer Editor</h3>
+
+
+<p>The <strong>Page Designer</strong> editor is a WYSIWYG editor for the UI Builder project.</p>
+
+<p class="figure">Figure: Page Designer</p>
+<p style="text-align:center;"><img alt="Page Designer" src="../images/page_designer.png" /></p>
+
+<p>The <strong>Page Designer</strong> editor consists of the following parts:</p>
+
+<ul class="ul"><li><a href="#palette">Palette</a>
+
+<p>The palette contains all the TAU widgets and some useful HTML widgets, which you can select and add to the design area.</p></li>
+
+<li>Toolbar
+
+<p>The toolbar supports the following functions:</p>
+<ul class="ul">
+
+<li>Select the page you want to edit using the page combo.
+<table>
+<tbody>
+<tr>
+<th>Page button</th>
+<th>Description</th>
+</tr>
+<tr>
+<td><img alt="" src="../images/designer_previous.png" /></td>
+<td>Move to the previous page.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/designer_next.png" /></td>
+<td>Move to the next page.</td>
+</tr>
+</tbody>
+</table></li>
+
+
+<li>Select the resolution of the design area using the <img alt="" src="../images/designer_resolution.png" /> drop-down menu.</li>
+<li>Zoom within the design area.
+<table>
+<tbody>
+<tr>
+<th>Zoom button</th>
+<th>Description</th>
+</tr>
+<tr>
+<td><img alt="" src="../images/designer_zoomout.png" /></td>
+<td>Zoom out.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/designer_zoomin.png" /></td>
+<td>Zoom in.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/designer_max.png" /></td>
+<td>Maximize the design area on the screen.</td>
+</tr>
+<tr>
+<td><img alt="" src="../images/designer_areasize.png" /></td>
+<td>Change the design area size to a predefined percentage value.</td>
+</tr>
+</tbody>
+</table></li>
+</ul>
+</li>
+<li><p>Design area</p>
+<p>You can work with widgets visually so that you can see what your application looks like as you build it.</p></li>
+</ul>
+
+<h4 id="palette" name="palette">Palette</h4>
+
+<p>The Palette contains all the TAU widgets and some useful HTML widgets. You can select and add a widget to your application screen by dragging it from the palette to the design area.</p>
+
+<p>When you hover on a widget, a description of the widget is displayed.</p>
+
+<h5>Supported Widgets</h5>
+<p>The following table defines the TAU and HTML widget support in the UI Builder.</p>
+
+
+<table style="width: 100%" border="1">
+  <caption>Table: Components supported by the UI Builder</caption>
+  <tbody>
+  <tr>
+  <th style="text-align:center;margin-left:auto;margin-right:auto;">
+        Group</th>
+
+
+  <th style="text-align:center;margin-left:auto;margin-right:auto;">
+        Component</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;">
+        Support</th>
+        </tr>
+
+<tr>
+<td rowspan="2">Buttons</td>
+<td>Controlgroup</td>
+<td>Used to group a set of buttons.</td>
+<td rowspan="2">Yes</td>
+</tr>
+<tr>
+<td>Button</td>
+<td>Shows a control that you can use to generate an action event when pressed and released.</td>
+
+</tr>
+
+<tr>
+<td rowspan="9">Toolbars</td>
+<td>Footer</td>
+<td>Sets the default bar at the bottom of the page.</td>
+<td rowspan="5">Yes</td>
+
+</tr>
+<tr>
+<td>Header</td>
+<td>Sets the default bar at the top of the page.</td>
+
+</tr>
+<tr>
+<td>Search Filter Bar</td>
+<td>Used to search for page content. This widget can be placed in the header.</td>
+
+</tr>
+<tr>
+<td>Tabbar</td>
+<td>Supports the grouped button style in the header.</td>
+
+</tr>
+<tr>
+<td>Tabbar Item</td>
+<td>Used only in the tabbar widget.</td>
+
+</tr>
+<tr>
+<td>Image</td>
+<td>Standard HTML widget.</td>
+<td>Not yet</td>
+
+</tr>
+
+<tr>
+<td>Button</td>
+<td>Shows a control that you can use to generate an action event when pressed and released.</td>
+<td rowspan="3">Yes</td>
+
+</tr>
+<tr>
+<td>Header Button</td>
+<td>Used only in the header widget.</td>
+
+</tr>
+<tr>
+<td>Multiline Text</td>
+<td>Used in the header widget.</td>
+
+</tr>
+<tr>
+<td rowspan="10">Content</td>
+<td>Audio</td>
+<td>Shows a player control that you can use to view and handle multimedia content.</td>
+<td rowspan="3">Not yet</td>
+</tr>
+<tr>
+<td>Gallery</td>
+<td>Shows images in a gallery.</td>
+
+</tr>
+<tr>
+<td>Map</td>
+<td>Shows a map on the screen.</td>
+
+</tr>
+<tr>
+<td>Progress Bar</td>
+<td>Shows a control that indicates the progress percentage of an on-going operation.</td>
+<td>Yes</td>
+</tr>
+<tr>
+<td>Progress</td>
+<td>Shows that an operation is in progress.</td>
+<td>Not yet</td>
+</tr>
+<tr>
+<td>Token Text Area</td>
+<td>Changes a text item to a button.</td>
+<td>Yes</td>
+</tr>
+<tr>
+<td>Video</td>
+<td>Shows a player control that you can use to view and handle multimedia content.</td>
+<td rowspan="2">Not yet</td>
+</tr>
+<tr>
+<td>Virtual Grid</td>
+<td>Used to display a list of unlimited data elements on the screen for better performance.
+<p>This widget displays the data in the grid format by reusing the existing grid control space.</p>
+</td>
+</tr>
+<tr>
+<td>Collapsible set</td>
+<td>Used to create a set of collapsibles.</td>
+<td rowspan="2">Not yet</td>
+</tr>
+<tr>
+<td>Collapsible</td>
+<td>Used to create a collapsible block of content.</td>
+
+</tr>
+<tr>
+<td rowspan="16">List</td>
+<td>Color Bar</td>
+<td>Used only in the list item widget.</td>
+<td>Not yet</td>
+
+</tr>
+<tr>
+<td>List</td>
+<td>Used to display, for example, navigation data, results, and data entries.</td>
+<td rowspan="6">Yes</td>
+
+</tr>
+<tr>
+<td>List Divider</td>
+<td>Used as a list separator for grouping lists. This widget can be used only in the list widget.</td>
+
+</tr>
+<tr>
+<td>List Item</td>
+<td>Used only in the list widget.</td>
+
+</tr>
+<tr>
+<td>List Action Item</td>
+<td>Used only in the list widget.</td>
+
+</tr>
+<tr>
+<td>Button</td>
+<td>Shows a control that you can use to generate an action event when pressed and released.</td>
+
+</tr>
+<tr>
+<td>Check Box Item</td>
+<td>Used only in the check boxes and list item widget.</td>
+
+</tr>
+<tr>
+<td>Flip Toggle Switch</td>
+<td>Shows a 2-state switch on the list item widget.</td>
+<td>Not yet</td>
+
+</tr>
+<tr>
+<td>Maintext Icon1</td>
+<td>Used only in the list item widget.</td>
+<td rowspan="8">Yes</td>
+
+</tr>
+<tr>
+<td>Maintext Icon2</td>
+<td>Used in the list item widget.</td>
+
+</tr>
+<tr>
+<td>Subtext Icon</td>
+<td>Used only in the list item subtext1 widget.</td>
+
+</tr>
+<tr>
+<td>Subtext1</td>
+<td>Used in the list item widget.</td>
+
+</tr>
+<tr>
+<td>Subtext2</td>
+<td>Used in the multiline list item.</td>
+
+</tr>
+<tr>
+<td>Thumbnail</td>
+<td>Used in the list item widget.</td>
+
+</tr>
+<tr>
+<td>Progress Bar</td>
+<td>Shows a control that indicates the progress percentage of an on-going operation.</td>
+
+</tr>
+<tr>
+<td>Radio Button Item</td>
+<td>Used only in the radio button and list item widgets.</td>
+
+</tr>
+<tr>
+<td rowspan="2">Dynamic List</td>
+
+<td>Extendable List</td>
+<td>Used to display a list of unlimited data elements on the screen for better performance.
+<p>The list is extended if you click the button at the bottom of the list to load more data elements.</p>
+</td>
+<td rowspan="2">Not yet</td>
+</tr>
+
+<tr>
+
+<td>Virtual List</td>
+<td>Used to display a list of unlimited data elements on the screen for better performance.
+<p>This widget provides easy access to databases to retrieve and display data.</p>
+</td>
+</tr>
+
+<tr>
+<td rowspan="16">Form Elements</td>
+<td>Form Control</td>
+<td rowspan="6">Standard HTML widget.</td>
+<td rowspan="8">Yes</td>
+</tr>
+<tr>
+<td>Label</td>
+
+</tr>
+<tr>
+<td>Legend</td>
+
+</tr>
+<tr>
+<td>Submit Button</td>
+
+</tr>
+<tr>
+<td>Text Area</td>
+
+</tr>
+<tr>
+<td>Text Input</td>
+
+</tr>
+<tr>
+<td>Check Boxes</td>
+<td>Shows a list of options where 1 or more can be selected.</td>
+
+</tr>
+<tr>
+<td>Check Box Item</td>
+<td>Used only in the check boxes and list item widget.</td>
+
+</tr>
+<tr>
+<td>Date Time Picker</td>
+<td>Enables users to select a date and a time.</td>
+<td>Not yet</td>
+</tr>
+<tr>
+<td>Radio Buttons</td>
+<td>Used to display a list of options of which only 1 can be selected.</td>
+<td rowspan="3">Yes</td>
+</tr>
+<tr>
+<td>Radio Button Item</td>
+<td>Used only in the radio button and list item widget.</td>
+
+</tr>
+<tr>
+<td>Slider</td>
+<td>Used to change values by dragging a handle.</td>
+
+</tr>
+<tr>
+<td>Select Menu</td>
+<td>Used to select a value in the menu.</td>
+<td rowspan="3">Not yet</td>
+
+</tr>
+<tr>
+<td>Select Menu Item Group</td>
+<td>Used only in the select menu widget.</td>
+
+</tr>
+<tr>
+<td>Select Menu Item</td>
+<td>Used only in the select menu and select menu item group widget.</td>
+
+</tr>
+<tr>
+<td>Flip Toggle Switch</td>
+<td>Shows a 2-state switch on the screen.</td>
+<td>Yes</td>
+
+</tr>
+<tr>
+<td rowspan="11">HTML</td>
+<td>Canvas</td>
+<td rowspan="11">Standard HTML widget.</td>
+<td rowspan="11">Yes</td>
+
+</tr>
+<tr>
+<td>Div Control</td>
+
+</tr>
+<tr>
+<td>Form Control</td>
+
+</tr>
+<tr>
+<td>Heading</td>
+
+</tr>
+<tr>
+<td>Image</td>
+
+</tr>
+<tr>
+<td>Label</td>
+
+</tr>
+<tr>
+<td>Link</td>
+
+</tr>
+<tr>
+<td>Submit Button</td>
+
+</tr>
+<tr>
+<td>Text</td>
+
+</tr>
+<tr>
+<td>Text Area</td>
+
+</tr>
+<tr>
+<td>Text Input</td>
+
+</tr>
+</tbody>
+</table>
+
+<h5>Snippets</h5>
+
+<p>To use snippets:</p>
+
+<ul class="ul">
+
+<li>To create a snippet for a widget in the <strong>Page Designer</strong> view:
+    <ol>
+    <li>Right-click a widget and select <strong>Create Snippet</strong>.</li>
+    <li>Select an image file.</li>
+    <li>Insert a snippet name.</li>
+    <li>Click <strong>Finish</strong>.</li>
+    </ol>
+</li>
+
+<li>To rename a snippet in the Snippet palette:
+    <ol>
+    <li>Click the Snippet palette.</li>
+    <li>Right-click a snippet and select <strong>Rename Snippet</strong>. </li>
+    </ol>
+</li>
+
+<li>To import a snippet into the Snippet palette:
+    <ol>
+    <li>Click the Snippet palette.</li>
+    <li>Right-click and select <strong>Import Snippet</strong>.</li>
+    <li>Select the import location.</li>
+    <li>Insert a snippet name.</li>
+    <li>Click <strong>Finish</strong>.</li>
+    </ol>
+</li>
+
+<li>To export a snippet from the Snippet palette:
+    <ol>
+    <li>Click the Snippet palette.</li>
+    <li>Right-click and select <strong>Export Snippet</strong>.</li>
+    <li>Select a snippet.</li>
+    <li>Select the export location.</li>
+    <li>Insert a snippet name.</li>
+    <li>Click <strong>Finish</strong>.</li>
+    </ol>
+</li>
+
+<li>To delete a snippet in the Snippet palette:
+    <ol>
+    <li>Click the Snippet palette.</li>
+    <li>Right-click a snippet and select <strong>Delete Snippet</strong>.</li>
+    </ol>
+</li>
+
+</ul>
+
+                <h3 id="properties" name="properties" class="items-tit-h2">Properties View</h3>
+
+
+<p>The <strong>Properties</strong> view displays the properties of the widget selected in the <strong>Page Designer</strong> view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; General &gt; Properties</strong>.</p>
+<p>The <strong>Properties</strong> helps you to edit widget and CSS properties, and events.</p>
+
+  <p class="figure">Figure: Properties view</p>
+  <p style="text-align:center;"><img alt="Properties view" src="../images/properties.png" /></p>
+
+<p>The <strong>Properties View</strong> consists of <strong>Attributes</strong>, <strong>Style</strong>, and <strong>Event</strong> tabs:</p>
+
+<ul class="ul">
+  <li><strong>Attributes</strong>
+  <p>In the <strong>Attributes</strong> tab, you can edit widget attributes. Attributes are categorized into Common and Widget specification. In the Common category, you can edit common widget properties, and in the Widget specification category, you can edit widget-specific properties. The Widget specification category can be divided into categories in accordance with the widget attributes.</p>
+   <ul class="ul">
+    <li>Common
+     <p>The Common category only includes the ID attribute, which is the default widget identifier in the HTML and JavaScript.</p></li>
+    <li>Widget specification
+    <p style="text-align:center;"><img alt="" src="../images/properties_specification.png" /></p></li>
+    </ul>
+  </li>
+
+  <li><strong>Style</strong>
+  <p>In the <strong>Style</strong> tab, you can edit the CSS properties of the selected widget. These properties include, for example, position, size, text, background, and border. If you select a widget in the <strong>Page Designer</strong> view, the <strong>Style</strong> tab shows an ID selector of a selected widget. The ID selector is the default CSS selector. You can create or remove the CSS selector of a selected widget.</p>
+  <ul class="ul">
+   <li>You can edit the CSS properties, such as the left, top, width, and height styles. The <strong>Page Designer</strong> view reflects the applied style.
+     <p style="text-align:center;"><img alt="Properties view" src="../images/properties_style.png" /></p></li>
+
+   <li>CSS selector
+   <p>To create a CSS selector, click the <img alt="" src="../images/properties_add.png" /> button, and the CSS Selector dialog opens. The dialog shows the live DOM hierarchy and class of the selected widget, and you can select the selector you want.</p>
+     <p style="text-align:center;"><img alt="Properties view" src="../images/properties_add_selector.png" /></p>
+    <p>To remove a CSS selector, click the <img alt="" src="../images/properties_delete.png" /> button. If you remove the default CSS selector, the CSS selector itself is not removed, only the CSS style.</p>
+     <p style="text-align:center;"><img alt="Properties view" src="../images/properties_remove.png" /></p>
+   </li>
+   </ul>
+   </li>
+
+  <li><strong>Action</strong>
+  <p>In the <strong>Action</strong> tab, you can create custom actions and create and bind predefined widget actions with JavaScript functions. Under the applicable event section (such as <strong>Tap</strong>), select the action you want from the <strong>Action</strong> drop-down menu, and define the additional action details.</p>
+
+     <p style="text-align:center;"><img alt="Properties view" src="../images/properties_go_to.png" /></p>
+
+  <p>The following actions are available:</p>
+
+  <ul class="ul">
+   <li><strong>Run Java Script Function</strong>: Create an event handler and bind it with a JavaScript function defined in the <strong>Function</strong> field. If you click the <img alt="" src="../images/properties_forward.png" /> button next to the <strong>Function</strong> field, the JavaScript editor opens. When the JavaScript function is focused, you can start writing code.</li>
+   <li><strong>Go to Page</strong>: Select the page to move to in the <strong>Page</strong> field (<strong>Next Page</strong>, <strong>Previous Page</strong>, or any of the pages that are already created). You can also select a transition effect.
+</li>
+   <li><strong>Open URL</strong>: When an event occurs, move to the defined URL.</li>
+   <li><strong>Start Animation Group</strong>: When an event occurs, start the selected animation group.</li>
+   <li><strong>Pause Animation Group</strong>: When an event occurs, pause the selected animation group.</li>
+   <li><strong>Go to Time in Animation Group</strong>: When an event occurs, move the selected animation group to the animation time defined in the <strong>Time</strong> field.</li>
+</ul>   </li></ul>
+
+         
+                <h3 id="resources" name="resources">Resources View</h3>
+
+<p>The <strong>Resources</strong> view displays the resources in the selected project. If the <strong>Resources</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Resources</strong>.</p>
+
+<p class="figure">Figure: Resources view</p>
+<p style="text-align:center;"><img alt="Resources view" src="../images/resources_view.png" /></p>
+
+<p>The <strong>Resources</strong> view provides the following features:</p>
+
+<ul class="ul">
+<li>Resource management
+<p>You can copy, paste, delete, and rename resources.</p></li>
+<li>Resource navigation
+<p>You can move files to child and parent folders.</p></li>
+<li>Resource filter
+<p>You can filter the view to show resources of a particular name or extension.</p></li>
+<li>Resource import
+<p>You can import files or folders.</p></li>
+<li>Easy editing
+<p>You can edit the resource property of the widgets using drag and drop.</p></li>
+</ul>
+
+         
+                <h3 id="timeline" name="timeline">Timeline View</h3>
+  
+
+<p>The <strong>Timeline</strong> view is part of the <a href="#animator">Animator</a> feature. You can add, delete, and edit animations about HTML widgets on the Animator Editor. In addition, you can preview the animations while making them. In the <strong>Timeline</strong> view, you can create KeyFrames for the animations. If the <strong>Timeline</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Timeline</strong>.</p>
+
+<p>The <strong>Timeline</strong> view consists of a toolbar, outline, and timeline components.</p>
+
+  <p class="figure">Figure: Timeline view</p>
+  <p style="text-align:center;"><img alt="Timeline view" src="../images/animator_timeline.png" /></p>
+
+
+
+<h4>Toolbar Component</h4>
+
+<p>You can use the toolbar to add, edit, and preview animations, and use filter-related tools.</p>
+
+  <p class="figure">Figure: Timeline toolbar</p>
+  <p style="text-align:center;"><img alt="Timeline toolbar" src="../images/animator_timeline_toolbar.png" /></p>
+
+   <table border="1">
+   <caption>
+     Table: Toolbar functions
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Function</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_backward_normal.png"/></td>
+     <td>Backward</td>
+     <td>Move time back towards the beginning of the animation group.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_play_normal.png"/></td>
+     <td>Play</td>
+     <td>Play the animation group.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_forward_normal.png"/></td>
+     <td>Forward</td>
+     <td>Move time forward towards the end of the animation group.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_repeat_normal.png"/></td>
+     <td>Repeat</td>
+     <td>Repeat the animation group.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_timeTextBox.png"/></td>
+     <td>Time Edit Box</td>
+     <td>Show the current time. You can change the time.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_ease_inout.png"/></td>
+     <td>Ease</td>
+     <td>Adjust the playback speed of the animation.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_dropdown_predefined_keyframe.png"/></td>
+     <td>Predefined KeyFrame</td>
+     <td>Add a widget to predefined animations.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_toolbar_filter_normal.png"/></td>
+     <td>Filter</td>
+     <td>Show only animated widgets.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_zooml.png"/></td>
+     <td>Zoom In/Out</td>
+     <td>Zoom in and out in the timeline ruler.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<h4>Outline Component</h4>
+
+<p>You can use the outline to add and edit animation groups and widget HTML and CSS selector lists.</p>
+
+  <p class="figure">Figure: Timeline outline</p>
+  <p style="text-align:center;"><img alt="Timeline outline" src="../images/animator_timeline_outline.png" /></p>
+
+<p>The following tables describe the outline functions for animation groups and HTML and CSS selector lists.</p>
+   <table border="1">
+   <caption>
+     Table: Timeline animation group functions
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Function</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_GroupName1.png"/></td>
+     <td>Animation Group Name</td>
+     <td>Name of the current animation group.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_animationGroupMenu.png"/></td>
+     <td>Animation group drop-down menu</td>
+     <td>Add, delete, and edit animation groups.</td>
+    </tr>
+       </tbody>
+  </table>
+
+   <table border="1">
+   <caption>
+     Table: Timeline HTML and CSS list functions
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Function</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_WidgetList.png"/></td>
+     <td>HTML Widget and CSS Selector List</td>
+     <td>Shows a list of widgets and selectors on the <strong>Animator Editor</strong> view.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_outline_lock_off.png"/></td>
+     <td>Un/Lock</td>
+     <td>Prevent or allow the editing of widgets.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_outline_view_off.png"/></td>
+     <td>In/Visible</td>
+     <td>Hide or show the widget on the <strong>Animator Editor</strong> view.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_outline_add_frame_normal.png"/></td>
+     <td>Add KeyFrame</td>
+     <td>Add the widget to the KeyFrame.</td>
+    </tr>
+       </tbody>
+  </table>
+
+
+<h4>Timeline Component</h4>
+
+
+<p>You can use the timeline to edit KeyFrames and KeyFrame units.</p>
+
+   <p class="figure">Figure: Timeline</p>
+  <p style="text-align:center;"><img alt="Timeline" src="../images/animator_timeline_timeline.png" /></p>
+
+   <table border="1">
+   <caption>
+     Table: Timeline KeyFrame and unit functions
+   </caption>
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Function</th>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_ruler.png"/></td>
+     <td>Time ruler</td>
+     <td>Shows the time in microseconds.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_timeBar.png"/></td>
+     <td>Time bar</td>
+     <td>Shows the current time.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_animationState.png"/></td>
+     <td>Animation state</td>
+     <td>State of the HTML widget animation, shows the play, start, or end time.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_keyframe.png"/></td>
+     <td>KeyFrame</td>
+     <td>Minimum unit for animation.</td>
+    </tr>
+    <tr>
+     <td><img alt="" src="../images/animator_timeline_keyframeUnit.png"/></td>
+     <td>KeyFrame Unit</td>
+     <td>Bundle 2 or more KeyFrames.</td>
+    </tr>
+       </tbody>
+  </table>
+
+
+<h4>Timeline View Operations</h4>
+
+<p>The following operations are possible in the <strong>Timeline</strong> view:</p>
+<ul class="ul">
+<li>Add an animation group:
+<ol>
+<li>Open the animation group drop-down menu.</li>
+<li>Select <strong>New animation group</strong>.</li>
+<li>In the New animation group window, define the new animation group name and attributes, and click <strong>OK</strong>.
+  <p><img alt="" src="../images/animator_timeline_newAnimationGroup.png" /></p>
+<p>The new animation group is now shown in the outline.</p></li>
+</ol>
+</li>
+
+<li>Delete an animation group:
+<ol>
+<li>Open the animation group drop-down menu.</li>
+<li>Select <strong>Delete animation group</strong>.
+<p>If there is only 1 animation group, it cannot be deleted. If there are 2 or more animation groups, select the ones you want to delete and click <strong>OK</strong>.</p>
+</li>
+</ol>
+   </li>
+<li>Add a predefined KeyFrame unit:
+<ul class="ul">
+<li>Use the toolbar:
+ <ol>
+<li>Drag the timeline ruler to the point you want.
+  <p><img alt="" src="../images/animator_timeline_addPreKeyFrame1.png" /></p>
+  </li>
+
+<li>Click <img alt="" src="../images/animator_toolbar_dropdown_predefined_keyframe.png" /><img alt="" src="../images/animator_toolbar_dropdown_normal.png" /> on the toolbar and select <strong>emphasis &gt; flash</strong>.
+  <p><img alt="" src="../images/animator_timeline_addPreKeyFrame3.png" /></p>
+
+ <p>The flash KeyFrame unit is now visible on the timeline.</p></li>
+ </ol>
+</li>
+<li>Use the context menu:
+<ol>
+<li>Drag the timeline ruler to the point you want.</li>
+<li>Right-click the desired line on the timeline and select <strong>Add PredefinedKeyFrame &gt; emphasis &gt; flash</strong>.
+    <p>The flash KeyFrame unit is now visible on the timeline.</p></li>
+</ol>
+</li>
+</ul>
+</li>
+
+<li>Add a KeyFrame or a KeyFrame unit:
+<ol>
+<li>Drag the timeline ruler to the point you want.
+  <p><img alt="" src="../images/animator_timeline_addKeyFrame1.png" /></p></li>
+<li>From the selector list in the outline, select the desired selector and click the <img alt="" src="../images/animator_outline_add_frame_normal.png"/> button.
+  <p><img alt="" src="../images/animator_timeline_addKeyFrame2.png" /></p>
+<p>The KeyFrame is now visible on the timeline.</p>
+  <p><img alt="" src="../images/animator_timeline_addKeyFrame3.png" /></p></li>
+<li>Drag the timeline ruler to a new point.</li>
+<li>Move the widget in the Animator Editor.
+<p>Or perform the move by entering &quot;100&quot; to the top property field in the <strong>Properties</strong> view.</p>
+<p>The KeyFrame unit is now visible on the timeline.</p></li>
+</ol>
+</li>
+
+<li>Delete a KeyFrame or a KeyFrame unit:
+<ol>
+<li>Click the timeline ruler, or enter the desired time to Time Edit Box.</li>
+<li>Right-click the KeyFrame or KeyFrame unit you want to delete, and select <strong>Delete</strong>.
+<p><img alt="" src="../images/animator_timeline_delete.png" /></p></li>
+</ol>
+</li>
+
+<li>Preview an animation:
+<ol>
+<li>Move the timeline ruler to the desired time and click the <img alt="" src="../images/animator_toolbar_play_normal.png"/> button on the toolbar.<p><img alt="" src="../images/animator_timeline_preview.png" /></p>
+<p>To play an animation group repeatedly, click the <img alt="" src="../images/animator_toolbar_repeat_normal.png"/> button.</p></li>
+<li>To stop the preview, click the <img alt="" src="../images/animator_toolbar_stop.png"/> button.</li>
+</ol>
+</li>
+
+<li>Copy, cut and paste KeyFrames or KeyFrame units:
+<ol>
+<li>After adding it, click the desired KeyFrame or KeyFrame unit.
+  <p><img alt="" src="../images/animator_timeline_copy.png" /></p></li>
+
+<li>Right-click the KeyFrame or KeyFrame Unit you want to copy or cut, and select <strong>Copy</strong> or <strong>Cut</strong>.
+  <p><img alt="" src="../images/animator_timeline_paste.png" /></p></li>
+<li>Move the timeline ruler to the wanted time, right-click it and select <strong>Paste</strong>.</li>
+</ol>
+</li>
+
+<li>Filter animations:
+<p>Click the <img alt="" src="../images/animator_toolbar_filter_normal.png" />  button on the toolbar to see only animated HTML widgets in the outline animation group.</p></li>
+
+<li>Ease animations:
+<ol>
+<li>Click the KeyFrame.
+  </li>
+<li>Click the <img alt="" src="../images/animator_toolbar_ease_inout.png"/><img alt="" src="../images/animator_toolbar_dropdown_normal.png" /> button and select <strong>linear</strong>.
+<p><img alt="" src="../images/animator_timeline_ease.png" /></p>
+<p>The applied linear KeyFrame is now visible in the preview.</p></li></ol></li>
+
+<li>Create a custom animation:
+<ol><li>Add the KeyFrame unit for which you want to create a custom animation.</li>
+<li>Right-click the KeyFrame unit, and select <strong>Create Custom Animation</strong>.
+<p><img alt="" src="../images/animator_custom_create.png" /></p></li>
+ 
+<li>Select the icon, and define the category and custom animation name.
+<p><img alt="" src="../images/animator_custom_data.png" /></p></li>
+ 
+<li>Click <strong>Finish</strong>.</li>
+<li>Add the custom animation like a predefined KeyFrame unit.
+<p><img alt="" src="../images/animator_custom_add.png" /></p></li>
+ </ol></li>
+<li>Delete a custom animation:
+<ol><li>Right-click the timeline and select <strong>Delete Custom Animation</strong>.
+<p><img alt="" src="../images/animator_custom_delete.png" /></p></li>
+ 
+<li>Select the custom animations that you want to delete.</li>
+<li>Click <strong>Finish</strong> and confirm the deletion by clicking <strong>OK</strong>.
+<p><img alt="" src="../images/animator_custom_confirm.png" /></p>
+<p>You can check that the selected custom animations have been removed from the predefined list.</p></li>
+ 
+</ol></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        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>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm b/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm
new file mode 100644 (file)
index 0000000..8c8c838
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm
@@ -0,0 +1,310 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Simulator Features</title> 
+ </head> 
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#basic">Basic Panel Operation</a></li>
+                       <li><a href="#panels">Panels</a></li>
+               </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>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 class="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 class="figure">Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)</p> 
+   <p style="text-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 class="figure">Figure: System Summary panel (mobile app on the left, wearable on the right)</p> 
+  <p style="text-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 class="figure">Figure: Geolocation panel</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace;">config.xml</span> 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 class="figure">Figure: Application Configuration panel</p> 
+  <p style="text-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 class="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 class="figure">Figure: Accelerometer sensor (mobile app on the left, wearable on the right)</p> 
+  <p style="text-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 class="figure">Figure: Accelerometer and gyro sensors</p> 
+  <p style="text-align:center;"><img  alt="Accelerometer and gyro sensors" src="../images/simulator_panel_accelerometer_gyro.png" /></p> 
+ <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>If the computer does not fully support WebGL, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.</p> 
+    <p class="figure">Figure: Sensor without WebGL</p> 
+  <p style="text-align:center;"><img  alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p> </td> 
+      </tr> 
+     </tbody> 
+    </table>
+                       
+                       
+                        
+                               <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 class="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 callback functions.</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 function.</li> 
+  </ul>
+  <p>You can use the <strong>Packages and Applications</strong> panel to verify created operations and operation details.</p>
+
+  <p class="figure">Figure: Packages and Applications panel</p> 
+  <p style="text-align:center;"><img  alt="Packages and Applications panel" src="../images/simulator_panel_package.png" /></p>   
+    <br></br>
+  <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 <span style="font-family: Courier New,Courier,monospace">oninstalled</span> event is generated. You can subscribe to these application events by registering the <span style="font-family: Courier New,Courier,monospace">tizen.application.addAppInfoEventListener</span> 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;}
+};
+
+tizen.package.setPackageInfoEventListener(packageEventCallback);</pre>
+
+
+ <h4>Pre-installed Packages and Applications In Mobile Applications</h4>
+ <p>A <strong>Sample Package</strong> is pre-installed 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 <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/send_text</span> 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);
+
+tizen.application.launchAppControl(appControl, null, function()
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;launch app service ...&#39;);
+}, 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 */}
+});</pre>
+
+  <p class="figure">Figure: Providing application callback data</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">application.exit()</span> 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 class="figure">Figure: Launch an application again</p> 
+  <p style="text-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 class="figure">Figure: Calls tab</p> 
+  <p style="text-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 class="figure">Figure: Calling screen</p> 
+  <p style="text-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 class="figure">Figure: Messages tab</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">tizen.push.registerService()</span> 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 class="figure">Figure: Registered for the push service</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">tizen.push.connectService()</span> method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.</p> 
+
+   <p class="figure">Figure: Connected to the push service</p> 
+  <p style="text-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 class="figure">Figure: Push tab</p> 
+  <p style="text-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 class="figure">Figure: Network Management panel</p> 
+
+  <p style="text-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 class="figure">Figure: NFC parameters</p> 
+  <p style="text-align:center;"><img  alt="NFC parameters" src="../images/simulator_panel_nfc.png" /></p> 
+  
+    <p class="figure">Figure: Bluetooth parameters</p> 
+  <p style="text-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 class="figure">Figure: Network bearer selection</p> 
+  <p style="text-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 class="caption" style="text-align: center;">Figure: Power Manager panel</p> 
+  <p style="text-align: center; margin-left: auto; margin-right: auto;"><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: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/small_file.zip</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/big_file.zip</span>. 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;)
+downloadId = tizen.download.start(request)
+tizen.download.setListener(downloadId, listener)
+</pre> 
+  <p class="figure">Figure: Download panel</p> 
+  <p> </p> 
+  <p style="text-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 class="figure">Figure: Notification panel with empty notification</p> 
+
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">post()</span> 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;, 
+{
+&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
+});
+
+</pre> 
+  <p class="figure">Figure: Notification panel with a notification</p> 
+  <p> </p> 
+  <p style="text-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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/web_simulator_w.htm b/org.tizen.devtools/html/web_tools/web_simulator_w.htm
new file mode 100644 (file)
index 0000000..4e17ed3
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/web_simulator_w.htm
@@ -0,0 +1,272 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Simulator </title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <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 id="container"><div id="contents"><div class="content">
+  <h1>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 class="figure">Figure: Tizen Web Simulator</p> 
+  <p style="text-align:center;"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></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> 
+  
+  <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 IDE, 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 style="text-align:left;"><img alt="Address bar" src="../images/simulator_address_bar.png" /></p></li> 
+   <li>Reload button <p>Reloads the current application.</p> <p style="text-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 style="text-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 style="text-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 style="text-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 style="text-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 style="text-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>
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+   
+   </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> 
+  </ul>
+
+<h2 id="pref" name="pref">Simulator Preferences</h2> 
+  <p>To view the Tizen Web Simulator preferences, select <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web &gt; Simulator</strong> in the Web IDE.</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 SDK attempts to discover the location. However, it can be necessary to enter or modify this value manually.</p> 
+  <ul> 
+   <li>For Linux: <span style="font-family: Courier New,Courier,monospace;">/opt/google/chrome/google-chrome</span>.</li> 
+   <li>For Windows&reg; 64-bit: <span style="font-family: Courier New,Courier,monospace;"> C:\Program Files (x86)\Google\Chrome\Application\chrome.exe</span></li> 
+   <li>For Windows&reg; 32-bit: <span style="font-family: Courier New,Courier,monospace;"> C:\Program Files\Google\Chrome\Application\chrome.exe</span></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> 
+  <table style="width: 100%" border="1"> 
+   <caption>
+     Table: Default parameters 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Parameters</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">--allow-access-from-files</span> </td> 
+     <td>Allows the simulator JavaScript APIs to access files on the disk (such as <span style="font-family: Courier New,Courier,monospace;">config.xml</span> and the application icon).</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">--disable-web-security</span> </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> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <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 SDK.</li> 
+     <li>External: Use a custom build or other simulator version. Enter the full path to the <span style="font-family: Courier New,Courier,monospace;">index.html</span> 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> 
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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 widget, 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 widget, and if the mouse pointer is dragged slowly or not in a straight line.</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 <span style="font-family: Courier New,Courier,monospace;">config.xml</span> 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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm b/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm
new file mode 100644 (file)
index 0000000..202c81b
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm
@@ -0,0 +1,151 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Unit Testing Tool</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a class="opensection" href="#generate">Generating Test Stubs</a></li>
+                       <li><a class="opensection" href="#edit">Editing a Test</a></li>
+                       <li><a class="opensection" href="#run">Running Tests</a></li>
+        </ul>
+       </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+  <h1>Web Unit Testing Tool</h1> 
+ <p>The Web unit testing tool provides a set of features for testing the source code. The tool uses the <a href="http://qunitjs.com" target="_blank">QUnit test framework</a> to write and run tests.</p>
+ 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This tool is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+  
+  <p>To unit test your application:</p>
+  <ul> 
+  <li><a href="#generate">Generate test stubs</a> </li>
+   <li><a href="#edit">Edit a test</a></li> 
+   <li><a href="#run">Run the test</a> </li> 
+  </ul> 
+
+  <table class="note">
+       <tbody>
+       <tr>
+       <th class="note">Note</th>
+       </tr>
+       <tr>
+       <td class="note">The Web unit test tool is designed to only support functional testing.</td>
+       </tr>
+       </tbody>
+       </table> 
+       
+<h2 id="generate" name="generate">Generating Test Stubs</h2> 
+
+<p>You can generate unit tests easily with the <strong>New Web Unit Test</strong> wizard.</p> 
+
+<p>To test your project:</p>
+
+<ol>
+<li>To open the wizard, go to <strong>File &gt; New &gt; Tizen Web Unit Test</strong>.</li>
+<li>Select the file to test from the file list on the left pane.</li>
+<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 class="figure">Figure: Generating a test stub</p> 
+<p style="text-align:center;"><img alt="Generating a test stub" src="../images/test_stubs1.png" /></p> 
+
+<p>The test stubs are generated in the <span style="font-family: Courier New,Courier,monospace;">webUnitTest</span> folder.</p>
+
+<p class="figure">Figure: Test stub location</p> 
+<p style="text-align:center;"><img alt="Test stub location" src="../images/test_stubs2.png" /></p>     
+
+<h2 id="edit" name="edit">Editing a Test</h2> 
+
+<p>To edit a unit test:</p>
+
+<ol>
+<li><p>Add a test case using the <span style="font-family: Courier New,Courier,monospace;">test()</span> function:</p>
+<pre class="prettyprint">
+test(name, test2);
+</pre>
+<p>The function takes the following parameters:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name</span>: The title of the test as string, which is used to display the test results.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">test2</span>: The function contains actual testing code that is written with one or more assertions to test.</li>
+</ul>
+</li>
+<li><p>Edit <span style="font-family: Courier New,Courier,monospace;">test2</span> using assertions.</p>
+<p>An assertion is a boolean expression that meaning pass or failure of test. You can test a value generated by your code with expected value using a number of assertions provided by Web unit testing tool.</p>
+  
+<table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">For more information about assertions, see <a href="http://api.qunitjs.com/category/assert/" target="_blank">http://api.qunitjs.com/category/assert/</a>.</td> 
+      </tr>
+</tbody></table>
+</li>
+</ol> 
+
+<h2 id="run" name="run">Running Tests</h2> 
+
+<p>To run a unit test, right-click on your project in the <strong>Package Explorer</strong> view and select <strong>Run As &gt; Tizen Web Unit Test Application</strong>.</p> 
+
+<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. You can use the <strong>Show failed only</strong> button to only display the failed tests.</p>
+
+<p class="figure">Figure: Test result</p> 
+<p style="text-align:center;"><img alt="Test result" src="../images/run_test2.png" /></p>
+
+<p>To repeat the test, select a checkbox and click the <strong>Run checked</strong> button.</p>
+
+<p class="figure">Figure: Repeating a test</p> 
+<p style="text-align:center;"><img alt="Repeating a test" src="../images/run_test3.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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/index.xml b/org.tizen.devtools/index.xml
new file mode 100644 (file)
index 0000000..d532dd1
--- /dev/null
+++ b/org.tizen.devtools/index.xml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="Development Tools" topic="html/cover_page.htm">
+    <topic href="html/common_tools/tools_common.htm" label="Common Tools">
+               <topic href="html/common_tools/project_explorer.htm" label="Project Explorer View"></topic>
+               <topic href="html/common_tools/certificate_registration.htm" label="Certificate Registration"></topic>  
+               <topic href="html/common_tools/connection_explorer.htm" label="Connection Explorer View"></topic>
+               <topic href="html/common_tools/smart_launch.htm" label="Smart Launch"></topic>
+               <topic href="html/common_tools/smart_dev_bridge.htm" label="Smart Development Bridge"></topic>
+               <topic href="html/common_tools/emulator.htm" label="Emulator">
+                       <topic href="html/common_tools/event_injec.htm" label="Event Injector"></topic>
+                       <topic href="html/common_tools/emulator_features.htm" label="Extended Emulator Features"></topic>
+               </topic>
+               <topic href="html/common_tools/log_view.htm" label="Log View"></topic>
+               <topic href="html/common_tools/keyboard_shortcuts.htm" label="Keyboard Shortcuts"></topic>
+       </topic>
+       
+       <topic href="html/web_tools/tools_w.htm" label="Web Tools">
+               <topic href="html/web_tools/config_editor_w.htm" label="Configuration Editor"></topic>
+               <topic href="html/web_tools/privilege_checker_w.htm" label="Privilege Checker"></topic>
+               <topic href="html/web_tools/content_assist_w.htm" label="Content Assist"></topic>       
+               <topic href="html/web_tools/html_editor_w.htm" label="HTML Editor"></topic>
+               <topic href="html/web_tools/html_preview_w.htm" label="HTML Preview"></topic>
+               <topic href="html/web_tools/css_editor_w.htm" label="CSS Editor"></topic>
+               <topic href="html/web_tools/css_preview_w.htm" label="CSS Preview"></topic>
+               <topic href="html/web_tools/js_editor_w.htm" label="JavaScript Editor"></topic>
+               <topic href="html/web_tools/code_beautifier_w.htm" label="Code Beautifier"></topic>
+               <topic href="html/web_tools/code_minifier_w.htm" label="Code Minifier"></topic>
+               <topic href="html/web_tools/live_editing_w.htm" label="Live Editing"></topic>
+               <topic href="html/web_tools/uibuilder_w.htm" label="UI Builder"></topic>
+               <topic href="html/web_tools/command_line_interface_w.htm" label="Command Line Interface"></topic>
+               <topic href="html/web_tools/web_simulator_w.htm" label="Web Simulator">
+                       <topic href="html/web_tools/web_simulator_features_w.htm" label="Web Simulator Features"></topic>
+               </topic>  
+               <topic href="html/web_tools/web_unit_test_tool_w.htm" label="Web Unit Test Tool"></topic>
+               <topic href="html/web_tools/remote_inspector_w.htm" label="Remote Inspector"></topic>
+               <topic href="html/web_tools/js_analyzer_w.htm" label="JavaScript Analyzer"></topic>
+               <topic href="html/web_tools/js_log_console_w.htm" label="JavaScript Log Console View"></topic>
+               <topic href="html/web_tools/set_ide_preference_w.htm" label="IDE Preferences"></topic>          
+       </topic>
+       
+       <topic href="html/native_tools/tools_n.htm" label="Native Tools">
+               <topic href="html/native_tools/project_wizard_n.htm" label="Project Wizard"></topic>
+               <topic href="html/native_tools/api_privilege_checker_n.htm" label="API and Privilege Checker"></topic>
+               <topic href="html/native_tools/content_assist_n.htm" label="Content Assist"></topic>    
+               <topic href="html/native_tools/manifest_text_editor_n.htm" label="Manifest Text Editor">
+                       <topic href="html/native_tools/manifest_elements_n.htm" label="Additional Manifest Text Editor Elements"></topic>
+               </topic>
+               <topic href="html/native_tools/po_file_editor_n.htm" label="PO File Editor"></topic>
+               <topic href="html/native_tools/uibuilder_n.htm" label="UI Builder"></topic>
+               <topic href="html/native_tools/enventor_n.htm" label="Enventor"></topic>
+               <topic href="html/native_tools/command_line_interface_n.htm" label="Command Line Interface"></topic>
+               <topic href="html/native_tools/call_stack_view_n.htm" label="Call Stack View"></topic>
+               <topic href="html/native_tools/da_overview_n.htm" label="Dynamic Analyzer">
+                       <topic href="html/native_tools/da_timeline_n.htm" label="Timeline"></topic>
+                       <topic href="html/native_tools/da_summary_n.htm" label="Summary"></topic>
+                       <topic href="html/native_tools/da_thread_n.htm" label="Thread Analysis"></topic>
+                       <topic href="html/native_tools/da_file_n.htm" label="File Analysis"></topic>
+                       <topic href="html/native_tools/da_network_n.htm" label="Network Analysis"></topic>
+                       <topic href="html/native_tools/da_opengl_n.htm" label="OpenGL&#174; Analysis"></topic>
+                       <topic href="html/native_tools/da_range_info_n.htm" label="Range"></topic>
+                       <topic href="html/native_tools/da_views_n.htm" label="Other Views"></topic>            
+               </topic>
+               <topic href="html/native_tools/static_analyzer_n.htm" label="Static Analyzer"></topic>
+               <topic href="html/native_tools/valgrind_n.htm" label="Valgrind"></topic>
+       </topic>    
+</toc>
+
diff --git a/org.tizen.devtools/plugin.xml b/org.tizen.devtools/plugin.xml
new file mode 100644 (file)
index 0000000..90140e5
--- /dev/null
+++ b/org.tizen.devtools/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+       <extension point="org.eclipse.help.toc">
+               <toc file="index.xml" primary="true" />
+       </extension>
+</plugin>
diff --git a/org.tizen.gettingstarted/.project b/org.tizen.gettingstarted/.project
new file mode 100644 (file)
index 0000000..89c0788
--- /dev/null
+++ b/org.tizen.gettingstarted/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+       <name>org.tizen.gettingstarted_2.3.0</name>
+       <comment></comment>
+       <projects>
+       </projects>
+       <buildSpec>
+               <buildCommand>
+                       <name>org.eclipse.pde.ManifestBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+               <buildCommand>
+                       <name>org.eclipse.pde.SchemaBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+       </buildSpec>
+       <natures>
+               <nature>org.eclipse.pde.PluginNature</nature>
+       </natures>
+</projectDescription>
diff --git a/org.tizen.gettingstarted/META-INF/MANIFEST.MF b/org.tizen.gettingstarted/META-INF/MANIFEST.MF
new file mode 100644 (file)
index 0000000..2113dcd
--- /dev/null
+++ b/org.tizen.gettingstarted/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Getting Started with Tizen
+Bundle-SymbolicName: org.tizen.gettingstarted;singleton=true
+Bundle-Version: 2.3.1
+Bundle-Vendor: The Linux Foundation
+
diff --git a/org.tizen.gettingstarted/about.html b/org.tizen.gettingstarted/about.html
new file mode 100644 (file)
index 0000000..a4c64b7
--- /dev/null
+++ b/org.tizen.gettingstarted/about.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head> 
+  <script type="text/javascript" src="html/scripts/snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="html/css/styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>About This Content</title> 
+ </head> 
+ <body onload="prettyPrint()"> 
+ 
+  <h1><a name="Creating2" id="Creating2">About This Content</a></h1> 
+  <p>Tizen 2.3.0</p> 
+
+  <h1>License</h1> 
+   <p>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>
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/build.properties b/org.tizen.gettingstarted/build.properties
new file mode 100644 (file)
index 0000000..2694af2
--- /dev/null
+++ b/org.tizen.gettingstarted/build.properties
@@ -0,0 +1,11 @@
+bin.includes = plugin.xml,\
+               META-INF/,\
+               html/,\
+               build.properties,\
+               .project,\
+               index.xml,\
+               about.html
+                          
+                                  
+
+
diff --git a/org.tizen.gettingstarted/html/app_model/application_model.htm b/org.tizen.gettingstarted/html/app_model/application_model.htm
new file mode 100644 (file)
index 0000000..8972540
--- /dev/null
+++ b/org.tizen.gettingstarted/html/app_model/application_model.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application Model</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<h1>Tizen Application Model</h1>
+
+<p>Click the application type you want:</p>
+<p><a href="application_model_w.htm"><img alt="Web Application" src="../images/w_division.png"/></a> <a href="application_model_n.htm"><img alt="Native Application" src="../images/n_division.png"/></a></p> 
+ 
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/app_model/application_model_n.htm b/org.tizen.gettingstarted/html/app_model/application_model_n.htm
new file mode 100644 (file)
index 0000000..0444498
--- /dev/null
+++ b/org.tizen.gettingstarted/html/app_model/application_model_n.htm
@@ -0,0 +1,303 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#life">Native Application Life-cycle</a></li>
+                       <li><a href="#start">Starting the Tizen Native Application</a></li>
+                       <li><a href="#packageID">Package ID and Application ID</a></li>
+                       <li><a href="#appdirectory">Application Directory Policy</a></li>
+                       <li><a href="#appmanifest">Application Manifest</a></li>
+                       <li><a href="#signature">Signature</a></li>
+                       <li><a href="#installer">Installer and SMACK</a></li>
+                       <li><a href="#commands">Package Commands</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../details/details.htm">Understanding Tizen Programming</a></li>  
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Tizen Native Application Model</h1>
+<p>The Tizen native application model handles application life-cycle and system events. Tizen native application life-cycle is handled by the  <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a> API. It provides functions to manage the main event loop, the application state change events, and basic system events.</p>
+<p>Tizen supports both UI applications (which have a graphical user interface) and service applications (which have no graphical user interface). The UI and service applications can be packaged together, if necessary; however, a combined application package must contain only 1 UI application, while it can have several service applications. </p>
+<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>
+
+<p>The following figure shows the UI and service application life-cycle.</p>
+
+  <p class="figure">Figure: UI and service application life-cycle</p> 
+  <p><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 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>   
+
+<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 <span style="font-family: Courier New,Courier,monospace;">app_create_cb()</span> 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 <span style="font-family: Courier New,Courier,monospace;">app_pause_cb()</span> 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 Home screen.</p></li>
+    <li><p>A system event (such as an incoming phone call) occurs and causes a resident application with a higher priority to become active and temporarily hide your application.</p></li>
+    <li><p>An alarm is triggered for another application, which becomes the top-most window and hides your application.</p> </li>
+  </ul>
+<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace;">app_resume_cb()</span> 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>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>
+
+<p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace;">app_terminate_cb()</span> callback is invoked. Your application can start the termination process, when:</p>
+  <ul>
+    <li><p>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace;">ui_app_exit()</span> or <span style="font-family: Courier New,Courier,monospace;">service_app_exit()</span> function to terminate the event loop.</p></li>
+    <li><p>The low memory killer is terminating your application in a low memory situation.</p></li>
+  </ul>
+<p>Since the service application has no UI, sit also has no pause state.</p>
+  
+<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/application_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
+ 
+
+<h2 id="start" name="start">Starting the Tizen Native Application</h2>
+
+<p>An application can be launched by the user from the Launcher or by another application. Either way, the Application Framework starts the application by creating a new process and calling the application entry point. Like in a conventional Linux application, the application main function is the entry point. For more information about launching native applications, see <a href="../../../org.tizen.guides/html/native/app/application_n.htm#app_controls">Launching Applications</a>.</p>
+
+
+<h2 id="packageID" name="packageID">Package ID and Application ID</h2>
+
+<p>When developing a Tizen application, you must define a package and application ID:</p>
+<ul>
+<li>Package ID
+<p>The package ID, such as <span style="font-family: Courier New,Courier,monospace;">org.tizen.message</span> or <span style="font-family: Courier New,Courier,monospace;">org.tizen.call</span>, is the application package identifier.</p>
+
+<p>The package ID functions as a unit for package installation, uninstallation, and upgrades. It is also the unit of the application package DRM, sandboxing, and privilege.</p></li>
+
+<li>Application ID
+<p>The application ID (<span style="font-family: Courier New,Courier,monospace;">appid</span>) is the application identifier. Multiple applications are allowed in a package and the application ID is used to identify the different applications.</p>
+
+<p>The application ID must be the same as the package ID if the package contains a single application. If <a href="../process/app_dev_process_n.htm#develop">the package contains multiple applications</a>, the application ID must be assigned with the package ID as a prefix. For example, if the <span style="font-family: Courier New,Courier,monospace;">org.tizen.message</span> package contains two applications, the main application is named as <span style="font-family: Courier New,Courier,monospace;">org.tizen.message</span>, and the second application is named as <span style="font-family: Courier New,Courier,monospace;">org.tizen.message.app2</span>.</p>
+<p>The application ID functions as a unit for launching and terminating applications, and for App Control.</p>
+</li>
+</ul>
+
+<p>The following figure shows how to use the package and application ID.</p>
+
+    <p class="figure">Figure: Package ID and application ID</p> 
+  <p><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>
+
+<p>The following list shows the directory hierarchy:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">bin</span>
+<p>Executable binary path</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">lib</span>
+<p>Library path</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">res</span>
+<p>Resource path</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">data</span>
+<p>The application&#39;s own directory (read or write): no initial data</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">shared/</span>
+<p>For sharing with other applications</p>
+<p>Sandboxing refers to an application package which can access its own directories only. It is used to share resources in the <span style="font-family: Courier New,Courier,monospace;">shared</span> 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 
+uid(root, app) is applied to directories and files.</p></li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file and signature files are located in the application root directory.</p>
+
+<h3>Permissions</h3>
+<p>The installed packages have a user ID, a group ID, permissions, and a smack label.</p>
+
+  <p class="figure">Figure: Permissions</p> 
+  <p><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>
+  
+<table>
+<caption>Table: Package data</caption>
+<tbody>
+<tr>
+ <th>Name</th>
+ <th>File or directory</th>
+ <th>Owner:Group</th>
+ <th>Permission</th>
+ <th>Smack label</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">bin</span></td>
+ <td rowspan="8">Directory</td>
+ <td>root:root</td>
+ <td rowspan="13">rwxr-xr-x</td>
+ <td rowspan="4">{PackageId}<sup>1</sup></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">data</span></td>
+ <td>app:app</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">lib</span></td>
+ <td rowspan="3">root:root</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">res</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared</span></td>
+ <td>_</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared/data</span></td>
+ <td>app:app</td>
+ <td>{Random}<sup>2</sup>, transmute</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared/res</span></td>
+ <td>root:root</td>
+ <td>_</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared/trusted</span></td>
+ <td>app:app</td>
+ <td>{Cert Hash}<sup>3</sup>, transmute</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">author-signature.xml</span></td>
+ <td rowspan="5">File</td>
+ <td rowspan="5">root:root</td>
+ <td rowspan="5">{PackageId}</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">signature1.xml</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">signature2.xml</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">signatureN.xml</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span></td>
+</tr>
+</tbody>
+</table>
+
+<p><sup>1</sup> The {PackageId} is the package ID, such as <span style="font-family: Courier New,Courier,monospace;">org.tizen.browser</span>.<br/>
+<sup>2</sup> {Random} means that there is a 28-byte random string created by the smack module.<br/>
+<sup>3</sup> {Cert Hash} refers to a 28-byte string where [Raw Hash] equals to Base64Encode (SHA1 author certificate in <span style="font-family: Courier New,Courier,monospace;">author-signature.xml</span>) and {Cert Hash} replaces &quot;/&quot; with &quot;#&quot; 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;
+</pre>
+
+<p>The following example shows the syntax of the manifest reference. The <span style="font-family: Courier New,Courier,monospace;">&lt;manifest&gt;</span> 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>
+
+
+<h2 id="signature" name="signature">Signature</h2>
+
+<p>A Tizen package is digitally signed by an author and 1 or more distributors to produce a signature file that cryptographically covers all the package files.</p>
+<p>There are 2 types of signatures:</p>
+<ul>
+<li>Author signature
+<p>The author signature specifies which entity alleges to have authored the package, that the integrity of the package is as the author intended, and whether a set of packages came from the same author.</p></li>
+<li>Distributor signature
+<p>The distributor signature specifies that a particular distributor has distributed a package, that the integrity of the package is as the distributor intended, and whether a set of packages came from the same distributor.</p></li>
+</ul>
+
+<p>The following image describes the relationship between the signatures.</p>
+
+
+  <p class="figure">Figure: Signature</p> 
+  <p><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 class="figure">Figure: Installer</p> 
+  <p><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 <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> 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>
+
+
+<h2 id="commands" name="commands">Package Commands</h2>
+
+
+<p>You can use shell commands to install, uninstall, update, and launch applications.</p>
+
+  <p class="figure">Figure: IDE interactions</p> 
+  <p><img src="../images/ide_interactions.png" alt="IDE 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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/app_model/application_model_w.htm b/org.tizen.gettingstarted/html/app_model/application_model_w.htm
new file mode 100644 (file)
index 0000000..d882022
--- /dev/null
+++ b/org.tizen.gettingstarted/html/app_model/application_model_w.htm
@@ -0,0 +1,281 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.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.htm">Understanding Tizen Programming</a></li>  
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Tizen Web Application Model</h1> 
+  <p>The <a href="../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> enables you to create Web applications and widgets for mobile 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">widget package</a> includes all the support files that are needed by the widget. Therefore, a widget is a complete standalone Web application that can run without any additional external resources or network connectivity.</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> (in mobile applications only), 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> 
+  <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 class="figure">Figure: Application package manager</p> 
+  <p style="text-align:center;"><img alt="Application package manager" src="../images/application_package_manager.png" /></p> 
+
+<h3 id="config" name="config">Web Package Configuration</h3> 
+  <p>Each Web widget package has a configuration file, <span style="font-family: Courier New,Courier,monospace">config.xml</span>, which indicates a packaging format and metadata for the application.</p>
+  <p>The Tizen Web widget must follow the guidelines of <a href="http://www.w3.org/TR/widgets/" target="_blank">W3C Widget Packaging</a> and <a href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_extend">Tizen extended configuration</a>.</p>
+  <p>For more information on the configuration elements, see <a href="../../../org.tizen.devtools/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> 
+  <p>A Web application package must conform to the following conventions:</p>
+<ul>
+<li>Package format and file extension
+       <ul>
+       <li>File format: ZIP archive file format</li>
+       <li>File extension: <span style="font-family: Courier New,Courier,monospace">.wgt</span> (for example, <span style="font-family: Courier New,Courier,monospace">sample.wgt</span>)</li>
+       <li>MIME type: <span style="font-family: Courier New,Courier,monospace">application/widget</span></li>
+       </ul>
+</li>
+<li>Application ID
+       <ul>
+       <li>The application ID cannot be changed after the application is published.
+       </li>
+       </ul>
+</li>
+<li>Package content
+       <ul>
+       <li>File and folders: The root of the Web package is the path of the ZIP archive and contains files and folders, some of which are reserved. The following table shows the content of a package.
+       <table style="width: 100%" border="1"> 
+   <caption>
+     Table: Package content 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Name</th> 
+     <th>Type</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td> 
+     <td rowspan="11">File</td> 
+     <td>Application configuration document</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">icon.gif</span></td> 
+     <td rowspan="5">Application default icon</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">icon.ico</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">icon.jpg</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">icon.png</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">icon.svg</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td> 
+        <td rowspan="5">Application default start file</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.htm</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.svg</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.xhtml</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.xht</span></td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">locales</span></td> 
+     <td>Folder</td> 
+     <td>Container for localized content</td> 
+    </tr>
+       </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 style="text-align:center;"><img alt="Web application directory structure" src="../images/web_app_directory_structure.png" /></p>
+       <table style="width: 100%" border="1"> 
+   <caption>
+     Table: Web application package structure 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Package</th> 
+     <th>Root directory</th> 
+     <th>Application ID</th> 
+     <th>Core XML file</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">App</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">opt/usr/apps/&lt;Package ID&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">opt/usr/apps/qik37po9ck</span>)</p></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;Name&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Sample</span>)</p></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">opt/share/packages/&lt;Package ID&gt;.xml</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">opt/share/packages/qik37po9ck.xml</span>)</p></td> 
+    </tr> 
+       </tbody> 
+  </table> </li>
+</ul>  
+  
+  <h3 id="hap" name="hap">Hybrid Application Package in Mobile Applications</h3> 
+  <p>A hybrid application package must conform to the following conventions:</p>
+  <ul>
+<li>Package format and file extension
+       <ul>
+       <li>File format: ZIP archive file format</li>
+       <li>File extension: <span style="font-family: Courier New,Courier,monospace">.wgt</span> (for example, <span style="font-family: Courier New,Courier,monospace">sample.wgt</span>)</li>
+       </ul>
+</li>
+<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.
+<table border="1"> 
+   <caption>
+     Table: Package content 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Name</th> 
+     <th>Type</th> 
+        <th>Description</th> 
+    </tr> 
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">bin</span></td> 
+               <td rowspan="6">Folder</td>
+               <td>Native application executable binary</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">data</span></td> 
+
+               <td>Web or native application private data</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">info</span></td> 
+
+               <td>Native application metadata</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">lib</span></td> 
+
+               <td>Native application libraries</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">res</span></td> 
+
+               <td>Native application resources or Web application content</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">res/wgt</span></td> 
+
+               <td>Web application project root</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">res/wgt/index.html</span></td> 
+               <td>File</td>
+               <td>Default HTML file for the Web application</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">setting</span></td> 
+               <td rowspan="2">Folder</td>
+               <td>Native application setting</td> 
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">shared</span></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 class="figure">Figure: Hybrid application directory structure</p> 
+  <p style="text-align:center;"><img alt="Hybrid application directory structure" src="../images/hybrid_app_package_manager.png" /></p> 
+       <table style="width: 100%" border="1"> 
+   <caption>
+     Table: Hybrid application package structure 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Package</th> 
+     <th>Root directory</th> 
+     <th>Application ID</th> 
+     <th>Core XML file</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">App1</span> <p>(Web)</p></td> 
+     <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">opt/usr/apps/&lt;Package ID&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">opt/usr/apps/qik37po9ck</span>)</p></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;Name&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Sample</span>)</p></td> 
+     <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">opt/share/packages/&lt;Package ID&gt;.xml</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">opt/share/packages/qik37po9ck.xml</span>)</p></td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">App2</span> <p>(Native)</p></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;ExecutableName1&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Service</span>)</p></td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">App3</span> <p>(Native)</p></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;Package ID&gt;.&lt;ExecutableName2&gt;</span><p>(For example: <span style="font-family: Courier New,Courier,monospace">qik37po9ck.Downloader</span>)</p></td> 
+    </tr> 
+       </tbody> 
+  </table> </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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/cover_page.htm b/org.tizen.gettingstarted/html/cover_page.htm
new file mode 100644 (file)
index 0000000..f6ec5d7
--- /dev/null
+++ b/org.tizen.gettingstarted/html/cover_page.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 Tizen</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/></p>
+       </div>
+       
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Getting Started</font></h1>
+
+
+<p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model:</p>
+
+<ul>
+<li><a href="preface/preface.htm">Preface</a>
+<p>Provides information about the Tizen documentation to help you understand it.</p></li>
+
+<li><a href="first_app/first_app.htm">Creating Your First Tizen Application</a>
+<p>Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.</p></li>
+
+<li><a href="process/app_dev_process.htm">Application Development Process</a>
+<p>Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.</p></li>
+
+<li><a href="app_model/application_model.htm">Tizen Application Model</a>
+<p>Provides an introduction to the Tizen application life-cycle and package contents.</p></li>
+
+<li><a href="details/details.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>
+</li>
+
+<li><a href="details/tizen_websites.htm">Tizen Web Sites</a>
+<p>Introduces the various Web sites that you can use in the application development tasks.</p>
+</li>
+</ul>
+
+<p>For more information about developing Tizen applications, see:</p>
+<ul>
+<li><a href="../../org.tizen.devtools/html/cover_page.htm">Tizen Development Environment and Tools</a></li>
+<li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tizen Tutorials</a></li>
+<li><a href="../../org.tizen.guides/html/cover_page.htm">Tizen Guides</a></li>
+<li><a href="../../org.tizen.web.apireference/html/cover_page.htm">Tizen API References</a></li>
+</ul>
+<p>Before using Tizen development tools and documentation, make sure you are familiar with the license details.</p>    
+       
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/css/snippet.css b/org.tizen.gettingstarted/html/css/snippet.css
new file mode 100644 (file)
index 0000000..f880409
--- /dev/null
+++ b/org.tizen.gettingstarted/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #793AFF }  /* string content */
+  .kwd { color: #7F0055 }  /* a keyword */
+  .com { color: green}  /* a comment */
+  .typ { color: #1C1C1C }  /* a type name */
+  .lit { color: black }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #1C1C1C}
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/org.tizen.gettingstarted/html/css/styles.css b/org.tizen.gettingstarted/html/css/styles.css
new file mode 100644 (file)
index 0000000..c4eb32b
--- /dev/null
+++ b/org.tizen.gettingstarted/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";
+
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+       
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+       
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+       background: white;
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}      
+       
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }       
+       
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+       
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/* Classes for creating collapsible content */
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
+#main {width: 75%; height: 90%;}
+#container {width:100%;}
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
+body.no-toc #container #contents {right: 0;padding-right:30px;}
+body.no-toc #navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+       .devicespecs-util ul.dutil li a:hover { color:#222; }
+       .devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr     {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr em  {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+       ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+       
+.top {text-align: right;}
+.toc, ul.toc{
+       margin: 10px 0px 0px 0px;
+       padding-left: 13px;
+       list-style: disc;
+       font-size: 9pt;
+       line-height: 115%; 
+       }
+       
+.toc-title {
+       font-size: 12pt;
+       color: #0E437D; 
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+       
+a.top {
+       display:block; 
+       float: right; 
+       position:fixed;
+       width: 28px; 
+       height:89px; 
+       bottom:50px;
+       z-index: 101;
+       right: 19%;
+       }
+
+a img {border: 0;}
+       
+/*     Footer includes space and a gray line above             */
+#footer {
+       position: fixed;
+       /* width: 100%; */
+    bottom: 0px;
+       text-align: center;
+       border-top: 1px solid #CCCCCC;
+       background-color: #FFFFFF;      
+       left: 21px;  right: 21px;
+}
+
+.footer {font-size: 8pt;}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;} 
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+    position: relative;
+}
+#profile p {
+       text-align: right;
+}
+
+div#toc_border {
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
+}
+
+#contents li {
+       padding-top: 3px;
+       margin-top: 5px;
+       /* overflow: auto; */
+}
+
+p {
+       /* overflow: auto; */
+}
+
+div.table {
+       /* overflow: auto; */
+}
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/details/app_filtering.htm b/org.tizen.gettingstarted/html/details/app_filtering.htm
new file mode 100644 (file)
index 0000000..1e1082e
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/app_filtering.htm
@@ -0,0 +1,1147 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#web">Feature-based Filtering for Web Applications</a></li>
+                       <li><a href="#native">Feature Filtering for Native Applications</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Application Filtering</h1>
+<div class="cont"><div class="static-cont">    
+       
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+<li>
+                               <div class="devicespec-tit">
+                               <h2 id="web" name="web" class="items-tit-h2"><img alt="Web application" src="../images/w_fold.png"/> Feature Filtering for Web Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<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>
+  
+  <h3 id="filter_w" name="filter_w">Feature-based Filtering</h3>
+  <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 class="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 <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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). 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.
+<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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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 class="figure">Figure: Feature-based filtering</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> 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>
+
+<h4 id="screen_size" name="screen_size">Screen Size Feature</h4>
+<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 <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> 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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, your application can be rejected from the Tizen store.</p>
+ <p>The following tables list the available screen size features. </p>
+ <table>
+       <caption>Table: Available screen size features for mobile applications</caption>
+       <tbody>
+       <tr>
+                       <th>Feature key</th>
+                       <th>Description</th>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+                       <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
+                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+                       <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>   
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+                       <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>           
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+                       <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+                       <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>           
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+                       <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+                       <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+                       <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+                       <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+                       <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></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.
+                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+       </tbody>
+ </table>
+
+ <table>
+       <caption>Table: Available screen size features for wearable applications</caption>
+       <tbody>
+       <tr>
+                       <th>Feature key</th>
+                       <th>Description</th>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+                       <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
+                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>
+
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+                       <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>           
+
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+                       <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>           
+       
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></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.
+                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+       </tbody>
+ </table>
+ 
+  
+<h4 id="hierarchy" name="hierarchy">Feature Hierarchy</h4>  
+
+<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
+<ul class="ul">
+<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
+<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
+<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
+
+<h4 id="adding" name="adding">Adding the Feature List</h4> 
+ 
+ <p>To enable filtering for your Web application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p> 
+  <ol>
+    <li>To open the widget configuration editor in the IDE, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view. </li>
+   <li>In the <strong>Feature</strong> tab, click <strong>Add</strong>.</li>
+   <li>Select a feature from the list.</li>
+   <li>Click <strong>Save</strong>.</li>
+  </ol>
+
+  <p>After setting the feature information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+
+  <p> The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+  <pre class="prettyprint">
+&lt;tizen:feature name=&quot;http://tizen.org/feature/network.nfc&quot;/&gt;
+</pre>
+
+<p>The following tables show the available requirements for Tizen Web application package.</p>
+<table border="1" id="features">
+<caption>Table: Available requirements for mobile Web Device APIs</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
+     <td>Specify this key, if the application requires the DataSync feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+     <td>Specify this key, if the application requires an FM radio.</td>
+       </tr>
+ <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+    <td>Specify this key, if the application requires any of the Human Activity Monitor features.</td>
+    </tr>
+<tr>   
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></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>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+     <td>Specify this key, if the application requires the Bluetooth feature.</td>
+       </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
+        </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+     <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></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>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+     <td>Specify this key, if the application requires the NFC card emulation feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+     <td>Specify this key, if the application requires the network-based push service.</td>
+       </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+     <td>Specify this key, if the application requires the secure element feature.</td>
+        </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+     <td>Specify this key, if the application requires the MMS feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+     <td>Specify this key, if the application requires a barometer sensor for using the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> (Pressure Type) API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+     <td>Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+     <td>Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+     <td>Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+     <td>Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+     <td>Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+     <td>Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.</td>
+    </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for mobile Web W3C/HTML5 APIs</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+     <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></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_m.html#geo">GeoLocation</a> API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+     <td>Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></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_m.html#cache">HTML5 Application caches</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket API</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> API.</td>
+    </tr>      
+<tr>   
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></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>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+     <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+     <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation</a> API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+     <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webspeech">Web Speech</a> API.</td>
+    </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for mobile Web Dynamic Box APIs</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
+     <td>Specify this key, if the application requires the Web Dynamic Box feature.</td>
+   </tr>
+</tbody>
+</table>
+
+
+  <table border="1" id="features">
+<caption>Table: Available requirements for wearable Web Device APIs</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
+     <td>Specify this key, if the application requires the network connection to access the Internet for using the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download</a> API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+     <td><p>Specify this key, if the application requires the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor</a> API.</p>
+         <p>If the key is declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, the application can be installed on the device with any of the Human Activity Monitor features:</p>
+        <ul class="ul">
+               <li>HRM: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></li>
+        <li>PEDOMETER: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></li>
+        <li>WRIST_UP: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></li>
+        <li>GPS: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></li>
+               </ul>
+     </td>
+   </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+     <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP) feature for using the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key</a> API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></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>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+     <td>Specify this key, if the application requires a barometer sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+     <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+     <td>Specify this key, if the application requires a magnetic sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+     <td>Specify this key, if the application requires a pedometer sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+     <td>Specify this key, if the application requires a photometer sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+     <td>Specify this key, if the application requires a proximity sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+     <td>Specify this key, if the application requires an ultraviolet sensor.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+     <td>Specify this key, if the application requires a wrist up sensor.</td>
+    </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for wearable Web W3C/HTML5 APIs</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+     <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></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>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+     <td>Specify this key, if the application requires a microphone for using the getUserMedia API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></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>
+    </tr>      
+<tr>   
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></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>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+     <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+     <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification  API.</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+     <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webspeech">Web Speech</a> API.</td>
+    </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for wearable Web Supplementary APIs</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.audio_recording</span></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>
+   </tr>  
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.image_capture</span></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>
+   </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.video_recording</span></td>
+     <td>Specify this key, if the application requires the video 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> (Video Recording) API.</td>
+   </tr>
+</tbody>
+</table>
+
+<h3 id="profile_w" name="profile_w">Profile-based Filtering</h3>
+<p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
+
+<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+
+<p>The following table lists the Tizen profiles and related profile name attributes.</p>
+ <table border="1" id="feature">
+<caption>Table: Tizen profiles and profile name attributes</caption>
+<tbody>
+<tr>
+<th width="50%">Tizen profile</th> 
+     <th>Profile name attribute</th> 
+    </tr>
+<tr>
+<td>Mobile</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">mobile</span></td> 
+    </tr>
+<tr>
+<td>Wearable</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">wearable</span></td> 
+    </tr>
+<tr>
+<td>TV</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TV</span></td> 
+    </tr>
+</tbody></table>
+
+<p>In a Web application, the profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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;!--OR--&gt;
+&lt;tizen:profile name=&quot;wearable&quot;/&gt;
+</pre>
+
+<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> 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>
+
+<h3 id="multi_profile" name="multi_profile">Single Web Application for Multiple Profiles</h3> 
+<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 <span style="font-family: Courier New,Courier,monospace"> &lt;tizen:profile&gt;</span> 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> 
+               
+</div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="native" name="native" class="items-tit-h2"><img alt="Native application" src="../images/n_fold.png"/> Feature Filtering for Native Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<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>
+  
+  <h3 id="filter_n" name="filter_n">Feature-based Filtering</h3>
+  <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 class="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 <span style="font-family: Courier New,Courier,monospace">system_info_get_*()</span> method of the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API. 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.
+<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 <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> 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 class="figure">Figure: Feature-based filtering</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> 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>
+
+<h4 id="screen_size" name="screen_size">Screen Size Feature</h4>
+<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 <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> 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 <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file, your application can be rejected from the Tizen store.</p>
+ <p>The following table lists the available screen size features. </p>
+ <table>
+       <caption>Table: Available screen size features</caption>
+       <tbody>
+       <tr>
+                       <th>Feature key</th>
+                       <th>Description</th>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+                       <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
+                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+                       <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>   
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+                       <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+                       </td>
+               </tr>           
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+                       <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+                       <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>           
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+                       <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+                       <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+                       <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+                       <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+                       <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
+                       <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></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.
+                       <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+               </tr>
+       </tbody>
+ </table>
+
+  
+<h4 id="hierarchy" name="hierarchy">Feature Hierarchy</h4>  
+
+<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
+<ul class="ul">
+<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
+<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
+<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
+
+<h4 id="adding" name="adding">Adding the Feature List</h4> 
+ 
+<p>To enable filtering for your mobile native application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:</p> 
+  <ol>
+  <li>To open the manifest editor in the IDE, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> 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 (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) 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> 
+  </ol>
+<p>The following table shows 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> 
+  <table border="1">
+<caption>
+     Table: Available requirements 
+   </caption> 
+   <tbody>
+<tr>
+<th>Feature key</th> 
+     <th>Description</th> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td> 
+     <td>Specify this key, if the application requires any kind of a camera.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td> 
+     <td>Specify this key, if the application requires a back-facing camera.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td> 
+     <td>Specify this key, if the application requires a back-facing camera with a flash.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td> 
+     <td>Specify this key, if the application requires a front-facing camera.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td> 
+     <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td> 
+     <td>Specify this key, if the application requires an FM radio.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td> 
+     <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td> 
+     <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td> 
+     <td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td> 
+     <td>Specify this key, if the application requires a LED.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td> 
+     <td>Specify this key, if the application requires any location positioning features.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td> 
+     <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td> 
+     <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td> 
+     <td>Specify this key, if the application requires a microphone.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td> 
+     <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td> 
+     <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td> 
+     <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td> 
+     <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></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> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td> 
+     <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td> 
+     <td>Specify this key, if the application requires the NFC reserved push feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td> 
+     <td>Specify this key, if the application requires the network-based push service.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td> 
+     <td>Specify this key, if the application requires the secure element feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td> 
+     <td>Specify this key, if the application requires the UICC secure element feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td> 
+     <td>Specify this key, if the application requires the ESE secure element feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td> 
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td> 
+     <td>Specify this key, if the application requires the MMS feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
+     <td>Specify this key, if the application requires any kind of tethering feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
+     <td>Specify this key, if the application requires the tethering over Bluetooth feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
+     <td>Specify this key, if the application requires the tethering over USB connection feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
+     <td>Specify this key, if the application requires the tethering over Wi-Fi feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td> 
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td> 
+     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td> 
+     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; display feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td> 
+     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; service discovery feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td> 
+     <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td> 
+     <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td> 
+     <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td> 
+     <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td> 
+     <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td> 
+     <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></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> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></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> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td> 
+     <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td> 
+     <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td> 
+     <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td> 
+     <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td> 
+     <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
+     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td> 
+     <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td> 
+     <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
+     <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td> 
+     <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td> 
+     <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td> 
+     <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td> 
+     <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td> 
+     <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td> 
+     <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td> 
+     <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td> 
+     <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></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> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td> 
+     <td>Specify this key, if the application requires an acceleration sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td> 
+     <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td> 
+     <td>Specify this key, if the application requires a barometer sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td> 
+     <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td> 
+     <td>Specify this key, if the application requires a gyro sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td> 
+     <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td> 
+     <td>Specify this key, if the application requires a magnetic sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td> 
+     <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td> 
+     <td>Specify this key, if the application requires a photometer sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td> 
+     <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td> 
+     <td>Specify this key, if the application requires a proximity sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td> 
+     <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td> 
+     <td>Specify this key, if the application requires a tilt sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td> 
+     <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td> 
+     <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td> 
+     <td>Specify this key, if the application requires a wrist up sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td> 
+     <td>Specify this key, if the application requires a pedometer sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td> 
+     <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td> 
+     <td>Specify this key, if the application requires a temperature sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td> 
+     <td>Specify this key, if the application requires a humidity sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td> 
+     <td>Specify this key, if the application requires a linear acceleration sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td> 
+     <td>Specify this key, if the application requires a rotation vector sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td> 
+     <td>Specify this key, if the application requires a gesture recognition sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td> 
+     <td>Specify this key, if the application requires an activity recognition sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravitiy</span></td> 
+     <td>Specify this key, if the application requires a gravity sensor.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td> 
+     <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td> 
+     <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td> 
+     <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td> 
+     <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td> 
+     <td>Specify this key, if the application requires the USB host feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td> 
+     <td>Specify this key, if the application requires the face recognition feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td> 
+     <td>Specify this key, if the application requires the image recognition feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td> 
+     <td>Specify this key, if the application requires the QR code generation feature.</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td> 
+     <td>Specify this key, if the application requires the QR code recognition feature.</td> 
+    </tr>
+</tbody>
+</table>
+
+
+<h3 id="profile_n" name="profile_n">Profile-based Filtering</h3>
+<p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
+
+<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+
+<p>The following table lists the Tizen profiles and related profile name attributes.</p>
+ <table border="1" id="feature">
+<caption>Table: Tizen profiles and profile name attributes</caption>
+<tbody>
+<tr>
+<th width="50%">Tizen profile</th> 
+     <th>Profile name attribute</th> 
+    </tr>
+<tr>
+<td>Mobile</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">mobile</span></td> 
+    </tr>
+<tr>
+<td>Wearable</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">wearable</span></td> 
+    </tr>
+<tr>
+<td>TV</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TV</span></td> 
+    </tr>
+</tbody></table>
+
+<p>In a native application, the mobile profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file as follows:</p>
+<pre class="prettyprint">
+&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.0&quot; ... &gt;
+&lt;profile name=&quot;mobile&quot;/&gt;
+</pre>
+
+<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> 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>
+
+                       </div>
+               </li>                                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/details.htm b/org.tizen.gettingstarted/html/details/details.htm
new file mode 100644 (file)
index 0000000..c0b9ad0
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/details.htm
@@ -0,0 +1,126 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#platform">Tizen Platform Introduction</a></li>
+                       <li><a href="#architecture">Tizen Architecture</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../app_model/application_model.htm">Tizen Application Model</a></li>
+               </ul>           
+       </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> 
+<ul>
+       <li><a href="tizen_apis.htm#wapi">Tizen APIs</a></li>
+       <li><a href="sec_privileges.htm#web">Security and API Privileges</a></li>
+       <li><a href="app_filtering.htm#web">Application Filtering</a></li>
+       <li><a href="web_runtime_w.htm">Web Runtime</a></li>
+</ul>
+
+<p>Tizen native applications can utilize a greater range of device features and can provide better performance than other applications. This is because native applications use a wide range of device APIs and are particularly lightweight. However, creating native applications can initially be complex if you are not familiar with the native API layout, application architecture, and life-cycle. In addition, you must become familiar with the Enlightenment Foundation Libraries (EFL) that are required to make scalable and fast graphics.</p>
+
+<p>When designing Tizen native applications, you need to take into account the following programming concepts:</p>
+<ul>
+       <li><a href="tizen_apis.htm#napi">Tizen APIs</a></li>
+       <li><a href="sec_privileges.htm#native">Security and API Privileges</a></li>
+       <li><a href="app_filtering.htm#native">Application Filtering</a></li>
+       <li><a href="key_events.htm">Key Event Handling</a></li>
+       <li><a href="io_overview.htm">File System Directory Hierarchy</a></li>
+       <li><a href="error_handling.htm">Error Handling</a></li>        
+</ul>
+
+<h2 id="platform" name="platform">Tizen Platform Introduction</h2> 
+
+<p>Tizen is a user-interactive and service-oriented open-source project that allows you to create feature-rich applications for multiple device categories, such as smartphones, tablets and wearable devices (for example, smartwatches), using various APIs. The Tizen platform allows you to create a wide range of applications for Tizen devices, customized with the common <a href="#architecture">Tizen architecture</a> as its basis. Tizen also provides <a href="tizen_websites.htm">Web sites</a> with tools for creating, distributing, and managing mobile applications efficiently.</p>
+
+<p>The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native 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 are creating a Web or native application.</p>
+
+<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile native profile can be used to develop native applications for mobile devices. </p>
+
+
+<h2 id="architecture" name="architecture">Tizen Architecture</h2> 
+
+<p>Tizen is a standards-based platform that provides Web and native APIs for developing applications for multiple device categories. Tizen is currently targeted for smart phones, tablet devices (mobile profile), and wearable devices (wearable profile), though planned to cover more device categories in the future. The following figure illustrates the Tizen architecture.</p>
+<p class="figure">Figure: Tizen architecture</p>
+
+<p style="text-align:center;"><img alt="Tizen architecture"
+src="../images/what_is_tizen_architecture.png" /></p>
+
+<p>The Tizen architecture consists of the following subsystems:</p>
+
+<ul>
+<li>Web framework
+<p>The Web framework accommodates and leverages most up-to-date Web technologies. It provides a large number of HTML5 functionalities defined by W3C and other standardization groups, such as video, audio, form, 2D canvas, WebGL, CSS3, geolocation, vibration, Web socket, and Web worker. In addition, the framework defines various new device APIs, which enable you to access device functionalities, such as Bluetooth, near field communication (NFC), alarm, and messaging. The device functionalities are provided with a strict rule-based security control system that restricts the malicious use of the device APIs.</p></li>
+
+<li>Native framework 
+<p>The native framework is composed of system services and a set of native modules across various domains, with which native applications can be developed. The modules include, for example, Base, Application framework, Security, UI, Network, Messaging, Social, Locations, and Web. The framework also provides popular standard open source libraries, such as eglibc, libstdc++, libxml2, OpenAL, and OpenMP&reg;, to support efficient application development and the migration of pre-existing applications using such libraries.</p>
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+    <tr>
+      <td class="note">Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> which are managed by API maintainers in the Tizen project.</td>
+    </tr>
+  </tbody>
+</table>
+</li>
+
+<li>Kernel
+<p>The kernel layer contains the Linux kernel and device drivers.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/error_handling.htm b/org.tizen.gettingstarted/html/details/error_handling.htm
new file mode 100644 (file)
index 0000000..496fefe
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/error_handling.htm
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.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.
+In this sense, there are two kinds of native APIs in Tizen:</p>
+
+<ul class="ul">
+<li>APIs directly returning error codes
+<p>All API functions which return error codes have the following section in their description:</p>
+<pre class="prettyprint">
+Returns:
+&nbsp;&nbsp;&nbsp;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>
+<p>For example:</p>
+
+<pre class="prettyprint">
+Return values:
+&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_NONE // Successful
+&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_INVALID_PARAMETER // Invalid parameter
+&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_SERVER_NOT_READY // Server is not ready
+&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED  // Communication with server failed
+</pre>
+</li>
+<li>APIs returning values (indirectly returning error codes)
+<p>All API functions that return values have the following section in their description:</p>
+
+<pre class="prettyprint">
+Remarks:
+The specific error code can be obtained using the get_last_result() method. Error codes are described in Exception section.
+To see all of the available error values, please refer to the Exceptions section in each API function description.
+For example:
+
+Exceptions:
+BUNDLE_ERROR_NONE // Success
+BUNDLE_ERROR_OUT_OF_MEMORY // Out of memory
+</pre>
+</li>
+
+<li>Obtaining a message for specific error code
+<p>Use the get_error_message() to query the meaning of each error code.
+The pointer returned is a static variable, you must not free it.</p>
+
+<p>For example:</p>
+<pre class="prettyprint">
+char* errMsg; 
+location_manager_h location_handle;
+int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
+
+if(LOCATIONS_ERROR_NONE != result)
+{
+&nbsp;&nbsp;&nbsp;errMsg = get_error_message(ret);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;%s&quot;, errMsg);
+&nbsp;&nbsp;&nbsp;...
+}
+</pre>
+<p>The get_error_message() function takes an error code as an input and returns its corresponding error messages, such as &quot;Location service is not available&quot;.</p>
+</li>
+</ul>
+<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>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/details/io_overview.htm b/org.tizen.gettingstarted/html/details/io_overview.htm
new file mode 100644 (file)
index 0000000..6439b2d
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/io_overview.htm
@@ -0,0 +1,231 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+<h1>File System Directory Hierarchy</h1>
+
+<p>The Tizen platform uses the underlying Linux file system.</p>
+
+<p>The following rules apply to the file system access:</p>
+<ul>
+    <li>Native applications can access the file system using Native APIs and opensource libraries such as eglibc, glib, and so on.</li>
+    <li>Applications can use relative paths.</li>
+    <li>The file system is case-sensitive.</li>
+    <li>The I/O resources and limitations depend on the underlying Linux file system or system configuration.
+       <ul>
+       <li> The maximum number of file or directory handles: 1024</li>
+       <li> The maximum length of a file or directory name: 255</li>
+       <li> The maximum length of a full path name: 4096</li>
+       </ul></li>
+</ul>
+<p>The following table shows the application directory hierarchy:</p>
+ 
+<table>
+<caption>Table: Application Package Directory Hierarchy</caption>
+<tbody>
+<tr>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Permission</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">bin</span></td>
+ <td>Executable binary path</td>
+ <td>Owner: Read<p>Others: Access denied</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">lib</span></td>
+ <td>Library path</td>
+ <td>Owner: Read<p>Others: Access denied</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">data</span></td>
+ <td>Used to store private data of an application.
+     <p>To get the application data directory path, call the app_get_data_path() of the App Common module.</p></td>
+ <td>Owner: Read and Write<p>Others: Access denied</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">res</span></td>
+ <td>Used to read resource files that are delivered with the application package.
+     <p>To get the application resource directory path, call the app_get_resource_path() of the App common module.</p>
+ </td>
+ <td>Owner: Read<p>Others: Access denied</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared</span></td>
+ <td>Parent directory of the data, res, and trusted sub-directories. Files in this directory cannot be delivered with the application package.</td>
+ <td>Owner: Read<p> Others: Read</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared/data</span></td>
+ <td>Used to share data with other applications.
+     <p>To get this directory path of your own application, call the app_get_shared_data_path() of the App common module.</p>
+     <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><span style="font-family: Courier New,Courier,monospace;">shared/res</span></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 app_get_shared_resource_path() of the App common module.</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>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">shared/trusted</span></td>
+ <td>Used to share data with family of trusted applications. The family applications signed with the same certificate can access data in the shared/trusted directory.
+     <p>To get this directory path of your own application, call the app_get_shared_trusted_path() of the App common module.</p>
+ </td>
+ <td>Owner: Read and Write<p>Family: Read and Write</p><p> Others: Access denied</p></td>
+</tr>
+</tbody>
+</table>
+
+<p>Every application can access a storage area where media files are stored. This is the media directory. In native applications, to obtain the media directory path, call the storage_get_directory() of Storage module. The following table lists the sub-directories of the media directory.</p>
+
+<table>
+<caption>Table: Media Directory Hierarchy</caption>
+<tbody>
+<tr>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Permission</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Images</span></td>
+ <td>Used for Image data.</td>
+ <td rowspan='7'>Read and Write</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Sounds</span></td>
+ <td>Used for Sound data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vides</span></td>
+ <td>Used for Video data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Cameras</span></td>
+ <td>Used for Camera pictures.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Downloads</span></td>
+ <td>Used for Downloaded data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Music</span></td>
+ <td>Used for Music data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Documents</span></td>
+ <td>Used for Documents.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">System Ringtones</span></td>
+ <td>Used for System default ringtones.</td>
+ <td>Read</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Others</span></td>
+ <td>Used for other types.</td>
+ <td>Read and Write</td> 
+</tr>
+</tbody>
+</table>
+
+
+<p>Every application can also access the external storage, such as MMC. This is the external storage directory. In native applications, to obtain the external storage directory path, call the storage_get_directory() method of the Storage module. The following table lists the sub-directories of the external storage directory.</p>
+
+<table>
+<caption>Table: Media Directory Hierarchy</caption>
+<tbody>
+<tr>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Permission</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Images</span></td>
+ <td>Used for Image data.</td>
+ <td rowspan='7'>Read and Write</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Sounds</span></td>
+ <td>Used for Sound data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vides</span></td>
+ <td>Used for Video data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Cameras</span></td>
+ <td>Used for Camera pictures.
+ </td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Downloads</span></td>
+ <td>Used for Downloaded data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Music</span></td>
+ <td>Used for Music data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Documents</span></td>
+ <td>Used for Documents.
+ </td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Others</span></td>
+ <td>Used for other types.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/key_events.htm b/org.tizen.gettingstarted/html/details/key_events.htm
new file mode 100644 (file)
index 0000000..b242ade
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/key_events.htm
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Key Event Handling</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#menu">Menu Key</a></li>
+                       <li><a href="#back">Back Key</a></li>
+                       <li><a href="#media">Media Key</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Key Event Handling</h1>
+
+<p>The Tizen platform supports hardware keys for user interactions. All Tizen devices provide the Menu and Back hardware keys. You can use the <a href="../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__EVENTS__GROUP.html">Efl Extension Event</a> API to handle key events.</p>
+<p>To provide a full user experience for your application users, you must handle hardware key presses in your application. Follow the hardware key guidelines to ensure predictable and reliable navigation in your application:</p>
+
+
+<h2 id="menu" name="menu">Menu Key</h2>
+<p> All Tizen devices provide a <strong>Menu key</strong>, which is used to present users a context-dependent set of options. Pressing the Menu key shows a hierarchical option menu. The following figure illustrates the Menu key position and the option menu.</p>
+
+<p class="figure">Figure: Menu key</p> 
+  <p style="text-align:center;"><img src="../images/menu_key.png" alt="Menu key" /></p> 
+
+
+<h2 id="back" name="back">Back Key</h2>
+<p>All Tizen devices provide a <strong>Back key</strong> for backward navigation. A back button in the application UI is not required.</p>
+<p>The Back key must support the following features:</p>
+<ul>
+    <li>Hiding the software keyboard</li>
+    <li>Closing windows</li>
+    <li>Closing message boxes</li>
+    <li>Closing pop-ups</li>
+    <li>Handling backward scene transitions</li>
+</ul>
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+    <tr>
+      <td class="note"> More details on using EFL-Extension for <strong>Menu key</strong> and <strong>Back key</strong> events, see the <a href="../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension</a> guide.</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h2 id="media" name="media">Media Key</h2>
+<p>Tizen also supports handling <strong>Media Key</strong> events such as play,stop,pause events from media devices (such as Bluetooth remote controller and earjack).</p>
+<p> To handle the <strong>Media Key</strong> events, use the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html?cp=1_7_1_10_1">Media key</a> API.</p>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/sec_privileges.htm b/org.tizen.gettingstarted/html/details/sec_privileges.htm
new file mode 100644 (file)
index 0000000..cda15e2
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/sec_privileges.htm
@@ -0,0 +1,969 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 and API Privileges</title>
+<style>
+td.key { font-family: Courier New,Courier,monospace }
+tr.partner-level, tr.platform-level { background-color: #cff }
+</style>       
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#web">Security and API Privileges for Web Applications</a></li>
+                       <li><a href="#native">Security and API Privileges for Native Applications</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Security and API Privileges</h1>
+
+<div class="cont"><div class="static-cont">    
+       
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+<li>
+                       <div class="devicespec-tit">
+                               <h2 id="web" name="web" class="items-tit-h2"><img alt="Web application" src="../images/w_fold.png"/> Security and API Privileges for Web Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<p>To effectively protect the mobile 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>
+
+<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.</p>
+
+<p>If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. If the privilege is not present in the file, the system prohibits the application execution.</p>
+<p>The Tizen IDE 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.devtools/html/web_tools/privilege_checker_w.htm">Privilege Checker</a>.</p>
+                       
+<p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
+
+<table id="privileges">
+<caption>Table: Mobile Web Device API privileges</caption> 
+<tbody>
+<tr>
+       <th>Privilege</th>
+       <th>Level</th>
+       <th>Display name</th>
+       <th>Description</th>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/account.read</td>
+       <td>public</td>
+       <td>Reading accounts</td>
+       <td>The application can read accounts.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/account.write</td>
+       <td>public</td>
+       <td>Managing accounts</td>
+       <td>The application can create, edit, and delete accounts.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/alarm</td>
+       <td>public</td>
+       <td>Setting alarms</td>
+       <td>The application can set alarms and wake up the device at scheduled times.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/application.info</td>
+       <td>public</td>
+       <td>Retrieving application information</td>
+       <td>The application can retrieve information related to other applications.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/application.launch</td>
+       <td>public</td>
+       <td>Opening applications</td>
+       <td>The application can open other applications using the application ID or application control.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/appmanager.certificate</td>
+       <td>partner</td>
+       <td>Getting application certificates</td>
+       <td>The application can retrieve specified application certificates.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/appmanager.kill</td>
+       <td>partner</td>
+       <td>Closing applications</td>
+       <td>The application can close other applications.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.admin</td>
+       <td>public</td>
+       <td>Managing Bluetooth general settings</td>
+       <td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
+       <td>public</td>
+       <td>Using Bluetooth GAP</td>
+       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.health</td>
+       <td>public</td>
+       <td>Using Bluetooth HDP</td>
+       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
+       <td>public</td>
+       <td>Using Bluetooth SPP</td>
+       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
+       <td>platform</td>
+       <td>Managing Bluetooth system settings</td>
+       <td>The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/bookmark.read</td>
+       <td>platform</td>
+       <td>Reading bookmarks</td>
+       <td>The application can read bookmarks.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/bookmark.write</td>
+       <td>platform</td>
+       <td>Managing bookmarks</td>
+       <td>The application can create, edit, and delete bookmarks.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/calendar.read</td>
+       <td>public</td>
+       <td>Reading calendar</td>
+       <td>The application can read events and tasks.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/calendar.write</td>
+       <td>public</td>
+       <td>Managing calendar</td>
+       <td>The application can create, update, and delete events and tasks.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/call</td>
+       <td>public</td>
+       <td>Making phone calls</td>
+       <td>The application can make phone calls to numbers when they are tapped without further confirmation.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/callhistory.read</td>
+       <td>public</td>
+       <td>Reading call logs</td>
+       <td>The application can read call log items.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/callhistory.write</td>
+       <td>public</td>
+       <td>Managing call logs</td>
+       <td>The application can create, update, and delete call log items.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/contact.read</td>
+       <td>public</td>
+       <td>Reading contacts</td>
+       <td>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/contact.write</td>
+       <td>public</td>
+       <td>Managing contacts</td>
+       <td>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/content.read</td>
+       <td>public</td>
+       <td>Reading contents</td>
+       <td>The application can read media content information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/content.write</td>
+       <td>public</td>
+       <td>Managing contents</td>
+       <td>The application can create, update, and delete media content information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/datacontrol.consumer</td>
+       <td>public</td>
+       <td>Accessing exported data</td>
+       <td>The application can read data exported by data control providers.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/datasync</td>
+       <td>public</td>
+       <td>Syncing device data</td>
+       <td>The application can synchronize device data, such as contacts and calendar events, using the OMA DS 1.2 protocol.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/download</td>
+       <td>public</td>
+       <td>Downloading via HTTP</td>
+       <td>The application can manage HTTP downloads.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/filesystem.read</td>
+       <td>public</td>
+       <td>Reading file systems</td>
+       <td>The application can read file systems.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/filesystem.write</td>
+       <td>public</td>
+       <td>Writing to file systems</td>
+       <td>The application can write to file systems.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/healthinfo</td>
+       <td>public</td>
+       <td>Reading health related information</td>
+       <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/internet</td>
+       <td>public</td>
+       <td>Accessing Internet</td>
+       <td>The application can access the Internet.This can result in additional charges depending on the user&#39;s payment plan.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/location</td>
+       <td>public</td>
+       <td>Using user location</td>
+       <td>The application can read the user&#39;s location information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/messaging.read</td>
+       <td>public</td>
+       <td>Accessing messages</td>
+       <td>The application can retrieve messages from message boxes or receive messages.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/messaging.write</td>
+       <td>public</td>
+       <td>Writing messages</td>
+       <td>The application can write, send, sync, and remove text messages, multimedia messages, and emails.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/networkbearerselection</td>
+       <td>partner</td>
+       <td>Selecting network connection</td>
+       <td>The application can request and release a specific network connection.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/nfc.admin</td>
+       <td>public</td>
+       <td>Managing NFC general settings</td>
+       <td>The application can change NFC settings, such as turning NFC on or off.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/nfc.cardemulation</td>
+       <td>public</td>
+       <td>Using NFC card emulation mode</td>
+       <td>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/nfc.common</td>
+       <td>public</td>
+       <td>Using NFC common features</td>
+       <td>The application can use NFC common features.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/nfc.p2p</td>
+       <td>public</td>
+       <td>Pushing NFC messages</td>
+       <td>The application can push NFC messages to other devices.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/nfc.tag</td>
+       <td>public</td>
+       <td>Reading/writing to NFC tags</td>
+       <td>The application can read and write NFC tag information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/notification</td>
+       <td>public</td>
+       <td>Providing notifications</td>
+       <td>The application can show and hide its own notifications and badges.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/package.info</td>
+       <td>public</td>
+       <td>Receiving package information</td>
+       <td>The application can retrieve information about installed packages.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/packagemanager.install</td>
+       <td>platform</td>
+       <td>Managing packages</td>
+       <td>The application can install or uninstall application packages.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/power</td>
+       <td>public</td>
+       <td>Managing power</td>
+       <td>The application can control power-related settings, such as dimming the screen.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/push</td>
+       <td>public</td>
+       <td>Receiving push notifications</td>
+       <td>The application can receive notifications from the Internet.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/secureelement</td>
+       <td>public</td>
+       <td>Accessing secure elements</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 class="key">http://tizen.org/privilege/setting</td>
+       <td>public</td>
+       <td>Accessing user settings</td>
+       <td>The application can change and read user settings.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/system</td>
+       <td>public</td>
+       <td>Reading system information</td>
+       <td>The application can read system information.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/systemmanager</td>
+       <td>partner</td>
+       <td>Reading secure system information</td>
+       <td>The application can read secure system information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/volume.set</td>
+       <td>public</td>
+       <td>Adjusting volume</td>
+       <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/websetting</td>
+       <td>public</td>
+       <td>Managing web application settings</td>
+       <td>The application can change its Web application settings, including deleting cookies.</td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Mobile Web W3C/HTML5 API privileges</caption> 
+<tbody>
+<tr>
+       <th>Privilege</th>
+       <th>Level</th>
+       <th>Description</th>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/internet</td>
+       <td>public</td>
+       <td>The application can access the Internet using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches</a>, and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/mediacapture</td>
+       <td>public</td>
+       <td>The application can manipulate streams from cameras and microphones using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/unlimitedstorage</td>
+       <td>public</td>
+       <td>The application can use the storage with unlimited size with the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#directory">File API: Directories and System</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#writer">File API: Writer</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#database">Indexed Database</a>, and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database</a> APIs.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
+<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/notification</td>
+       <td>public</td>
+       <td>The application can  display simple notifications using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webnoti">Web Notifications</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
+<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/location </td>
+       <td>public</td>
+       <td>The application can access geographic locations using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Mobile Web Supplementary API privileges</caption> 
+<tbody>
+<tr>
+       <th>Privilege</th>
+       <th>Level</th>
+       <th>Description</th>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/fullscreen</td>
+       <td>public</td>
+       <td>The application can display in the full-screen mode using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+<ul class="ul"><li>If this privilege is defined, permission is granted without user interaction. Otherwise, permission is granted by user interaction.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Wearable Web Device API privileges</caption> 
+<tbody>
+<tr>
+       <th>Privilege</th>
+       <th>Level</th>
+       <th>Display name</th>
+       <th>Description</th>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/alarm</td>
+       <td>public</td>
+       <td>Setting alarms</td>
+       <td>The application can set alarms and wake up the device at scheduled times.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/application.info</td>
+       <td>public</td>
+       <td>Retrieving application information</td>
+       <td>The application can retrieve information related to other applications.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/application.launch</td>
+       <td>public</td>
+       <td>Opening applications</td>
+       <td>The application can open other applications using the application ID or application control.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/appmanager.certificate</td>
+       <td>partner</td>
+       <td>Getting application certificates</td>
+       <td>The application can retrieve specified application certificates.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/appmanager.kill</td>
+       <td>partner</td>
+       <td>Closing applications</td>
+       <td>The application can close other applications.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/call</td>
+       <td>public</td>
+       <td>Making phone calls</td>
+       <td>The application can make phone calls to numbers when they are tapped without further confirmation.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/content.read</td>
+       <td>public</td>
+       <td>Reading contents</td>
+       <td>The application can read media content information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/content.write</td>
+       <td>public</td>
+       <td>Managing contents</td>
+       <td>The application can create, update, and delete media content information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/download</td>
+       <td>public</td>
+       <td>Downloading via HTTP</td>
+       <td>The application can manage HTTP downloads.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/filesystem.read</td>
+       <td>public</td>
+       <td>Reading file systems</td>
+       <td>The application can read file systems.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/filesystem.write</td>
+       <td>public</td>
+       <td>Writing to file systems</td>
+       <td>The application can write to file systems.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/healthinfo</td>
+       <td>public</td>
+       <td>Reading health related information</td>
+       <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/location</td>
+       <td>public</td>
+       <td>Using user location</td>
+       <td>The application can read the user&#39;s location information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/notification</td>
+       <td>public</td>
+       <td>Providing notifications</td>
+       <td>The application can show and hide its own notifications and badges.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/package.info</td>
+       <td>public</td>
+       <td>Receiving package information</td>
+       <td>The application can retrieve information about installed packages.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/packagemanager.install</td>
+       <td>platform</td>
+       <td>Managing packages</td>
+       <td>The application can install or uninstall application packages.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/power</td>
+       <td>public</td>
+       <td>Managing power</td>
+       <td>The application can control power-related settings, such as dimming the screen.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/setting</td>
+       <td>public</td>
+       <td>Accessing user settings</td>
+       <td>The application can change and read user settings.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/system</td>
+       <td>public</td>
+       <td>Reading system information</td>
+       <td>The application can read system information.</td>
+</tr>
+<tr class="partner-level">
+       <td class="key">http://tizen.org/privilege/systemmanager</td>
+       <td>partner</td>
+       <td>Reading secure system information</td>
+       <td>The application can read secure system information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/volume.set</td>
+       <td>public</td>
+       <td>Adjusting volume</td>
+       <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Wearable Web W3C/HTML5 API privileges</caption> 
+<tbody>
+<tr>
+       <th>Privilege</th>
+       <th>Level</th>
+       <th>Description</th>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/internet</td>
+       <td>public</td>
+       <td>The application can access the Internet using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/mediacapture</td>
+       <td>public</td>
+       <td>The application can manipulate streams from cameras and microphones using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/unlimitedstorage</td>
+       <td>public</td>
+       <td>The application can use the storage with unlimited size with the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
+<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/location </td>
+       <td>public</td>
+       <td>The application can access geographic locations using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation</a> API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Wearable Web Supplementary API privileges</caption> 
+<tbody>
+<tr>
+       <th>Privilege</th>
+       <th>Level</th>
+       <th>Description</th>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/camera</td>
+       <td>public</td>
+       <td>The application can capture video and image on a target device using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording and Image Capture) API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, execution is blocked.</li></ul></td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/audiorecorder</td>
+       <td>public</td>
+       <td>The application can record an audio stream on a target device using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.
+       <p><strong>Privilege behavior:</strong></p>
+       <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, execution is blocked.</li></ul></td>
+</tr>
+</tbody>
+</table>
+       
+                                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="native" name="native" class="items-tit-h2"><img alt="Native application" src="../images/n_fold.png"/> Security and API Privileges for Native Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<p>To effectively protect the mobile 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>
+
+<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_n.htm#manifest">manifest.xml</a> file.</p>
+
+<p>If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the <span style="font-family: Courier New,Courier,monospace">manifest.xml</span> file. If the privilege is not present in the file, the system prohibits the application execution.</p>
+<p>The Tizen IDE 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.devtools/html/native_tools/api_privilege_checker_n.htm">API and Privilege Checker</a>.</p>
+
+<p>The following table lists the API privileges, which you must to declare when using security-sensitive API modules.</p>
+
+<table>
+<caption>Table: API privileges</caption>
+<tbody>
+<tr> 
+<th>Privilege</th> 
+<th>Display name</th> 
+<th>Description</th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></p></td> 
+<td rowspan="1" colspan="1"><p>Reading accounts</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read accounts.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing accounts</p></td> 
+<td rowspan="1" colspan="1"><p>The application can create, edit, and delete accounts.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></p></td> 
+<td rowspan="1" colspan="1"><p>Retrieving alarms</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read information about the saved alarms.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td> 
+<td rowspan="1" colspan="1"><p>Setting alarms</p></td> 
+<td rowspan="1" colspan="1"><p>The application can set alarms and wake the device up at scheduled times.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td> 
+<td rowspan="1" colspan="1"><p>Launching application</p></td> 
+<td rowspan="1" colspan="1"><p>The application can open other applications.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></p></td> 
+<td rowspan="1" colspan="1"><p>Using unrestricted Bluetooth services</p></td> 
+<td rowspan="1" colspan="1"><p>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.read</span></p></td> 
+<td rowspan="1" colspan="1"><p>Reading calendar</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read events and tasks.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.write</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing calendar</p></td> 
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete events and tasks.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></p></td> 
+<td rowspan="1" colspan="1"><p>Making phone calls</p></td> 
+<td rowspan="1" colspan="1"><p>The application can make phone calls to numbers when they are tapped without further confirmation.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></p></td> 
+<td rowspan="1" colspan="1"><p>Reading call logs</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read call log items.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing call logs</p></td> 
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete call log items.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></p></td> 
+<td rowspan="1" colspan="1"><p>Using camera</p></td> 
+<td rowspan="1" colspan="1"><p>The application can take and preview pictures.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></p></td> 
+<td rowspan="1" colspan="1"><p>Reading contacts</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing contacts</p></td> 
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing content</p></td> 
+<td rowspan="1" colspan="1"><p>This application can change media information. This information can be used by other applications.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></p></td> 
+<td rowspan="1" colspan="1"><p>Sharing data between applications</p></td> 
+<td rowspan="1" colspan="1"><p>The application can share data with other applications.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing display settings</p></td> 
+<td rowspan="1" colspan="1"><p>The application can manage display settings, such as the brightness. This can increase battery consumption.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></p></td> 
+<td rowspan="1" colspan="1"><p>Downloading through HTTP</p></td> 
+<td rowspan="1" colspan="1"><p>The application can manage HTTP downloads. This can result in additional charges depending on the user&#39;s payment plan.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing email accounts, mailboxes, and emails</p></td> 
+<td rowspan="1" colspan="1"><p>The application can manage your email accounts, including your folders and emails.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td> 
+<td rowspan="1" colspan="1"><p>Accessing external storage</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write files that are saved to external storage, such as SD cards.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage.appdata</span></p></td> 
+<td rowspan="1" colspan="1"><p>Accessing application data in external storage</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write its own files in external storage, such as SD cards.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing vibration feedback</p></td> 
+<td rowspan="1" colspan="1"><p>The application can control vibration feedback.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td> 
+<td rowspan="1" colspan="1"><p>Accessing Internet</p></td> 
+<td rowspan="1" colspan="1"><p>The application can access the Internet. This can result in additional charges depending on your payment plan.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td> 
+<td rowspan="1" colspan="1"><p>Using secure repository</p></td> 
+<td rowspan="1" colspan="1"><p>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing LEDs</p></td> 
+<td rowspan="1" colspan="1"><p>The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></p></td> 
+<td rowspan="1" colspan="1"><p>Using user location</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read your location information.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td> 
+<td rowspan="1" colspan="1"><p>Accessing media folders</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write files in media folders.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td> 
+<td rowspan="1" colspan="1"><p>Reading text and multimedia messages and related information</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read text and multimedia messages, and any information related to them.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></p></td> 
+<td rowspan="1" colspan="1"><p>Sending text and multimedia messages and updating their statuses</p></td> 
+<td rowspan="1" colspan="1"><p>The application can write, send, delete, and move text and multimedia messages, and change the settings and statuses of the messages, such as read or unread.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td> 
+<td rowspan="1" colspan="1"><p>Reading network information</p></td> 
+<td rowspan="1" colspan="1"><p>The application can retrieve network information such as the status of each network, its type, and detailed network profile information.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing network profiles</p></td> 
+<td rowspan="1" colspan="1"><p>The application can add, remove, and edit network profiles.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing network connections</p></td> 
+<td rowspan="1" colspan="1"><p>The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></p></td> 
+<td rowspan="1" colspan="1"><p>Using basic NFC services</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write NFC tag information, and send NFC messages to other devices.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></p></td> 
+<td rowspan="1" colspan="1"><p>Using NFC card emulation mode</p></td> 
+<td rowspan="1" colspan="1"><p>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></p></td> 
+<td rowspan="1" colspan="1"><p>Providing notifications</p></td> 
+<td rowspan="1" colspan="1"><p>The application can show and hide its own notifications and badges.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td> 
+<td rowspan="1" colspan="1"><p>Retrieving detailed package information</p></td> 
+<td rowspan="1" colspan="1"><p>The application can retrieve detailed application package information.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing power</p></td> 
+<td rowspan="1" colspan="1"><p>The application can control power-related settings, such as dimming the screen.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></p></td> 
+<td rowspan="1" colspan="1"><p>Receiving push notifications</p></td> 
+<td rowspan="1" colspan="1"><p>The application can receive notifications from the Internet.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/recorder</span></p></td> 
+<td rowspan="1" colspan="1"><p>Recording video and audio</p></td> 
+<td rowspan="1" colspan="1"><p>The application can record video and audio.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/shortcut</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing shortcuts</p></td> 
+<td rowspan="1" colspan="1"><p>The application can create and delete shortcuts.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing unrestricted system settings</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></p></td> 
+<td rowspan="1" colspan="1"><p>Accessing telephony information</p></td> 
+<td rowspan="1" colspan="1"><p>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></p></td> 
+<td rowspan="1" colspan="1"><p>Adjusting volume</p></td> 
+<td rowspan="1" colspan="1"><p>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/wifidirect</span></p></td> 
+<td rowspan="1" colspan="1"><p>Managing Wi-Fi Direct information</p></td> 
+<td rowspan="1" colspan="1"><p>The application can enable and disable Wi-Fi Direct, manage Wi-Fi Direct connections, and change Wi-Fi Direct settings.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></p></td> 
+<td rowspan="1" colspan="1"><p>Displaying windows on top of other applications and screen</p></td> 
+<td rowspan="1" colspan="1"><p>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 may prevent you from interacting with other applications or screens until the window for the application is closed.</p></td> 
+</tr>
+</tbody>
+</table>
+
+<h3 name="nonAPI" id="nonAPI">Non-API Bound Privileges</h3>
+
+<p>Tizen application privileges are loosely bound to APIs, so most of the privileges can be identified by the APIs that the application calls. However, there are some privileges that are not coupled with the Tizen APIs. To allow easy identification, those privileges are mapped to corresponding system resources - same as other privileges.</p>
+
+<p>The following table lists the non-API bound privileges.</p>
+
+<table>
+<caption>Table: Non-API bound privileges</caption>
+
+<tbody>
+<tr> 
+<th>Privilege</th> 
+<th>Display name</th> 
+<th>Description</th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td> 
+<td rowspan="1" colspan="1"><p>Internet</p></td> 
+<td rowspan="1" colspan="1"><p>Most of the mobile 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>
+<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 <span style="font-family: Courier New,Courier,monospace;">connect()</span> 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 <span style="font-family: Courier New,Courier,monospace;">listen()</span> and <span style="font-family: Courier New,Courier,monospace;">connect()</span> 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> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td> 
+<td rowspan="1" colspan="1"><p>Media storage</p></td> 
+<td rowspan="1" colspan="1"><p>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>
+<p>If your application does not have this privilege, no file operations into the media storage area (<span style="font-family: Courier New,Courier,monospace;">/opt/usr/media/</span>) 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> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td> 
+<td rowspan="1" colspan="1"><p>External storage</p></td> 
+<td rowspan="1" colspan="1"><p>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 (usually <span style="font-family: Courier New,Courier,monospace;">/opt/storage/sdcard</span>) must be protected with a privilege.</p>
+<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>
+</tbody>
+</table> 
+                       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/tizen_apis.htm b/org.tizen.gettingstarted/html/details/tizen_apis.htm
new file mode 100644 (file)
index 0000000..e8523da
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/tizen_apis.htm
@@ -0,0 +1,1006 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#wapi">Tizen APIs for Web Applications</a></li>
+                       <li><a href="#napi">Tizen APIs for Native Applications</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tizen APIs</h1>
+
+<div class="cont"><div class="static-cont">
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div> 
+       
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="wapi" name="wapi" class="items-tit-h2"><img alt="Web application" src="../images/w_fold.png"/> Tizen APIs for Web Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 mobile Web applications, such as Bluetooth and NFC.</p>
+
+<p>The Tizen platform supports hybrid applications (1 mobile Web application and 1 or more mobile native applications). A hybrid application package is very useful to mobile 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 mobile 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>
+  <table border="1"> 
+   <caption>
+     Table: Device API features provided for mobile applications 
+   </caption> 
+   <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>Tizen</td> 
+     <td>This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. 
+        <p>You can 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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Tizen">Tizen</a></li> 
+      </ul></td> 
+    </tr> 
+    <tr> 
+     <td>Application</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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application</a></li>
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application</a></li> 
+      </ul></td> 
+    </tr>
+       <tr> 
+     <td>Communication</td> 
+     <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, messaging, NFC (Near Field Communication), push, and secure element features. 
+        <p>You can use transfer data over a Bluetooth connection, send and receive messages, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm">Communication</a></li>
+               <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm">Communication</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication</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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content</a></li>        
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content</a></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>Input/Output</td> 
+     <td>These APIs contain classes and interfaces that enable you to manage file system and message port features. 
+        <p>You can access specific parts of the device file system, archive files, and send and receive messages through message ports.</p></td> 
+     <td> 
+      <ul class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output</a></li>        
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#I/O">Input/Output</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 react to dedicated multimedia key presses.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</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>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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/social/social_guide_w.htm">Social</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm">Social</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, and you can use locale-specific calendar features by retrieving date and time information. 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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System</a></li>       
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System</a></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>User Interface</td> 
+     <td>These APIs contain classes and interfaces that enable you to manage badge and notification features. 
+        <p>You can manage and monitor badge numbers, and create and manage notifications about application events.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface</a></li>       
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#User Interface">User Interface</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 widgets.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>       
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Web 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>
+  <table border="1"> 
+   <caption>
+     Table: Device API features provided for wearable applications 
+   </caption> 
+   <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>Tizen</td> 
+     <td>This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. 
+        <p>You can 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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Tizen">Tizen</a></li> 
+      </ul></td> 
+    </tr> 
+    <tr> 
+     <td>Application</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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application</a></li>
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application</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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content</a></li>        
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content</a></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>Input/Output</td> 
+     <td>These APIs contain classes and interfaces that enable you to manage file system and message port features. 
+        <p>You can access specific parts of the device file system, and send and receive messages through message ports.</p></td> 
+     <td> 
+      <ul class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output</a></li>        
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#I/O">Input/Output</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 react to dedicated multimedia key presses.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</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>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, and you can use locale-specific calendar features by retrieving date and time information. You can also manage time features.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System</a></li>       
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System</a></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>User Interface</td> 
+     <td>These APIs contain classes and interfaces that enable you to manage badge features. 
+        <p>You can manage and monitor badge numbers.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface</a></li>       
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface</a></li>  
+       <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#User Interface">User Interface</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 widgets.</p></td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>       
+          <li>API Reference: <a href="../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Web 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>
+  <table border="1"> 
+   <caption>
+     Table: W3C/HTML5 and some supplementary API features provided for mobile applications 
+   </caption> 
+   <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 tre, and store the information of the page that the user has viewed.</td> 
+     <td> 
+      <ul class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>      
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
+               <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>        
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_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 class="ul">      
+               <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm">UI</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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_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>
+  <table border="1"> 
+   <caption>
+     Table: W3C/HTML5 and some supplementary API features provided for wearable applications 
+   </caption> 
+   <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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</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 class="ul"> 
+          <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>      
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_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 class="ul">       
+               <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
+               <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>        
+          <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_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 class="ul"> 
+       <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li> 
+       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_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>
+  </div>
+               </li>
+               <li>
+
+                               <div class="devicespec-tit">
+                               <h2 id="napi" name="napi" class="items-tit-h2"><img alt="Native application" src="../images/n_fold.png"/> Tizen APIs for Native Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 following figure illustrates the native API layout. 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>The following figure shows 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>
+
+<p class="figure" id="layout">Figure: Native API layout</p> 
+<p style="text-align:center;"> <img alt="Native API layout" src="../images/native_api_layout.png" /></p>
+
+<p>The following table describes each API module and the functionality of all the submodule APIs within that module. The table also acts as a reference source 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>
+
+<table border="1" style="width: 100%"> 
+         <caption>Table: Mobile native API modules</caption>
+       <tbody> 
+               <tr> 
+                       <th>API module</th>
+                       <th>Description</th>                                    
+                       <th>API submodule</th> 
+                       <th>Functionality</th> 
+               </tr>   
+               <tr>
+                       <td rowspan="10"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></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.
+                       <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework</a></li></ul>
+                       </td>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a></td>
+                       <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>
+        </tr>
+        <tr>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application</a></td>
+                       <td>Handles Tizen <a href="../../../org.tizen.guides/html/native/app/service_app_n.htm">service application</a> (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.</td>
+               </tr>
+               <tr>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a></td>
+                       <td>Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.</td>
+        </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/badge_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>A bundle is 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>
+                       <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>
+                       <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>
+                       <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>
+                       <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>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
+                       <td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
+</td>
+        </tr> 
+               <tr>
+                       <td rowspan="8"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+                       <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+                       <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base</a></li>
+                       </ul></td>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
+                       <td>Standard C++ library.</td>
+        </tr>
+               <tr>
+       <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
+                       <td>Standard C library.</td>
+        </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>
+                 <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>
+               </tr>
+    <tr>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
+                       <td>This library can be used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
+        </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 <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
+        </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>
+                       <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>
+                       <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+                       <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
+                       <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content</a></li></ul></td>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a></td>
+                       <td>Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.</td>
+        </tr>
+        <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 <span style="font-family: Courier New,Courier,monospace;">.jpeg</span> file extension is mapped to the <span style="font-family: Courier New,Courier,monospace;">image/jpeg</span> 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>
+                       <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>
+                       <td rowspan="2"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></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. 
+                       <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context</a></li>      </ul></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>
+        </tr>
+               <tr>
+               <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
+                       <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
+               </tr>
+               <tr>
+                       <td rowspan="1"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+                       <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+                       <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location</a></li></ul></td>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a></td>
+                       <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
+        </tr>
+               <tr>
+         <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
+                <td rowspan="3">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
+               <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging</a></li></ul>
+
+</td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a></td>
+         <td>Allows composing, sending, and receiving of email messages.</td>
+        </tr>
+        <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>
+         <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="15"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+                <td rowspan="15">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+<p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia</a></li></ul></td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a></td>
+         <td>Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.</td>
+        </tr>
+        <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>
+         <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>
+        </tr>
+     <tr>
+                       <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
+                       <td>EXIF is an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use this format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
+        </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>
+        </tr>
+               <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
+         <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
+        </tr>
+               <tr>
+         <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>            
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
+         <td>Efficiently renders multichannel 3D audio.</td>
+        </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>
+        </tr>
+               <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>
+         <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>
+         <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>
+         <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>
+         <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>            
+         <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="6"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network</a></td>
+                <td rowspan="6">The Network API module contains submodule APIs, which can be used for  data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS).
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network</a></li></ul>
+</td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
+         <td>Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices. </td>
+        </tr>
+        <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a></td>
+         <td>Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.</td>
+        </tr>
+ <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
+         <td>A client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
+        </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>
+        </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>
+         <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>
+         <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security</a></td>
+                <td rowspan="3">The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data.
+               <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security</a></li>   </ul></td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a></td>
+         <td>Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.</td>
+        </tr>
+               <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENSSL__FRAMEWORK.html">OpenSSL</a></td>
+         <td>An open source library that provides basic cryptographic functions and various utility functions.</td>
+        </tr>
+               <tr>
+         <td><a href="../../../org.tizen.native.mobile.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>
+         <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
+                <td rowspan="3">The Social API module contains submodule APIs to manage personal data, such as contacts and calendars on a device.
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social</a></li> </ul></td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
+         <td>An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.</td>
+        </tr>
+        <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a></td>
+         <td>Manages calendars, including events and tasks. It also stores and queries calendar information.</td>
+        </tr>
+        <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a></td>
+         <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
+        </tr>
+                               <tr>
+         <td rowspan="8"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+                <td rowspan="8">The System API module contains submodule APIs for system management.
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System</a></li> </ul>
+</td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
+         <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
+        </tr>
+<tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
+         <td>Provides methods 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>
+         <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'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>
+         <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>
+         <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>
+         <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>
+         <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>
+        </tr>
+
+        <tr>
+         <td rowspan="1"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+                <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony</a></li></ul></td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
+         <td>Obtains call, network, and SIM information.</td>
+        </tr>   
+<tr>
+         <td rowspan="6"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI</a></td>
+                <td rowspan="6">The UI API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI</a></li></ul></td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
+         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
+        </tr>
+<tr>
+<td><a href="../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL</a></td>
+         <td>EFL is 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>
+</tr>
+        <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
+         <td>Gets and sets the priority order of notification windows.</td>
+        </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>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
+        </tr>
+       <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
+         <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
+        </tr>
+               <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
+         <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
+        </tr>
+
+        <tr>
+         <td rowspan="2"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+                <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX</a></li></ul></td>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a></td>
+         <td>This API submodule provides functions to recognize speech.</td>
+        </tr>
+        <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
+         <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
+        </tr>
+                               <tr>
+         <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
+                <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
+                <p>Documentation:</p>
+                       <ul class="ul">
+                       <li>Guides: <a href="../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web</a></li>
+                       <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web</a></li></ul></td>
+        <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
+         <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
+        </tr>
+                                <tr>
+         <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
+         <td>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 may have with another account provider or application. </td>
+        </tr>
+<tr>
+         <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> 
+                 </table>
+                       </div>
+               </li>                   
+       </ul>           
+       
+ </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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/tizen_websites.htm b/org.tizen.gettingstarted/html/details/tizen_websites.htm
new file mode 100644 (file)
index 0000000..69639c9
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/tizen_websites.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Sites </title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+
+<h1>Tizen Web Sites</h1>
+
+<p>The Tizen platform includes the following Web sites that you can use in the application development tasks:</p>
+<ul>
+  <li>Tizen main site (<a href="https://www.tizen.org" target="_blank">https://www.tizen.org</a>)
+  <p>The official site of the Tizen project provides blogs and helpful articles for interests. You can <a href="https://www.tizen.org/user/register" target="_blank">create a Tizen account</a> for other Tizen sites and get the latest news about the project and events.</p></li>
+  <li>Tizen developer site (<a href="https://developer.tizen.org" target="_blank">https://developer.tizen.org</a>)
+  <p>The official site for Tizen developers provides the Tizen SDK and resources for making various applications. You can discuss technical issues with other developers in a forum and get helpful sample codes for developing applications.</p></li>
+  <li>Tizen source site (<a href="https://source.tizen.org" target="_blank">https://source.tizen.org</a>)
+  <p>The official site for Tizen open source project provides the Tizen source code and information about building it. You can use <a href="http://git-scm.com/" target="_blank">git</a> for tracking the source history and get the latest revision of the Tizen project.</p></li>
+  <li>Tizen issue-tracking site (<a href="https://bugs.tizen.org" target="_blank">https://bugs.tizen.org</a>)
+  <p>You can participate in the Tizen project by registering bugs and suggestions. <a href="https://www.tizen.org/community/bug-tracker" target="_blank">JIRA</a> is used to track issues, and to participate, you need to <a href="https://www.tizen.org/user/register" target="_blank">create a Tizen account</a> and:</p>
+  <ul>
+  <li>Read the <a href="https://www.tizen.org/community/guidelines" target="_blank">community guidelines</a> for participating in Tizen.</li>
+<li>Read the <a href="https://www.tizen.org/community/guidelines/bug-guidelines" target="_blank">bug tracker guidelines</a>.</li>
+<li>Learn how to <a href="https://www.tizen.org/community/bug-tracker/how-report-bugs" target="_blank">report bugs</a> for Tizen.</li>
+<li>Watch a <a href="http://www.atlassian.com/software/jira/demo" target="_blank">demo of using JIRA</a>.</li>
+<li>Read the <a href="http://confluence.atlassian.com/display/JIRA/JIRA+User%27s+Guide" target="_blank">JIRA User&#39;s Guide</a>.</li></ul></li>
+  <li>Tizen wiki (<a href="https://wiki.tizen.org" target="_blank">https://wiki.tizen.org</a>)
+  <p>The Tizen wiki is used for collaborating on the documentation related to the Tizen Project. Before contributing to the Tizen wiki, you must:</p>
+<ul>
+<li>Read the Tizen <a href="https://www.tizen.org/community/guidelines" target="_blank">community guidelines</a> for contribution information and consequences associated with violating any of the guidelines.</li>
+<li>Read the <a href="https://wiki.tizen.org/wiki/Wiki_Editing_and_Style_Guidelines" target="_blank">Wiki Editing and Style Guidelines</a> document.</li>
+<li>Consult the <a href="https://meta.wikimedia.org/wiki/Help:Contents" target="_blank">User&#39;s Guide</a> if you are new to using MediaWiki</li>
+<li>Visit the Tizen main site for more information about the project.</li>
+<li>To edit the wiki, sign up for your <a href="https://www.tizen.org/user/register" target="_blank">Tizen account</a> on the main site, and use the account to log into the wiki (and other Tizen services).</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/details/web_runtime_w.htm b/org.tizen.gettingstarted/html/details/web_runtime_w.htm
new file mode 100644 (file)
index 0000000..7be9ba3
--- /dev/null
+++ b/org.tizen.gettingstarted/html/details/web_runtime_w.htm
@@ -0,0 +1,303 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+       
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage">Managing Web Applications</a></li>
+                       <li><a href="#runtime">Web Runtime API Support</a></li>
+                       <li><a href="#security">Web Application Security and Privacy</a></li>
+               </ul>
+       </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 <a class="opensection" href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_extend">Extending Configuration Elements</a>.</p> 
+  <p>You can manage Web applications by:</p> 
+  <ul class="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 widget 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 widget 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>
+<li>Tizen Web API version supported by the Web Runtime is lower than the minimum version required by the Web application.</li>
+<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>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"> A Web application can be installed from the Tizen Store or can be side-loaded (for example, through a browser or Bluetooth).
+The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</span> element is ignored in the Tizen Web application installation process.
+</td> 
+    </tr> 
+   </tbody> 
+  </table>
+</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>
+<ul>
+<li>If the Web application that is being updated has a Tizen AppID, it is not updated unless the new version has the exact same Tizen AppID.</li>
+<li>If the Web application that is being updated has an author signature, it is not updated unless the new version has been signed by the same author.</li>
+<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> 
+   <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: <span style="font-family: Courier New,Courier,monospace;">sms://</span>, <span style="font-family: Courier New,Courier,monospace;">mmsto://</span>, and <span style="font-family: Courier New,Courier,monospace;">mailto://</span>. </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> 
+  <p>It also supports multiple browsing context creation within a single Web application using, for example, the <span style="font-family: Courier New,Courier,monospace;">window.open()</span> 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>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Tizen Device API can only be used with a locally packaged page. Tizen Device APIs are not available in cross-origin pages.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ <p>To access the host page of your Web application, add the domain for access in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. For more information, see <a href="#content">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><span style="font-family: Courier New,Courier,monospace;">maximized</span> and <span style="font-family: Courier New,Courier,monospace;">fullscreen</span> view modes of the <a href="http://www.w3.org/TR/view-mode/" target="_blank">&#39;view-mode&#39; Media Feature</a>.</p></li> 
+
+  </ul>
+
+ <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">Widget Signature</a></li>
+  <li><a href="#protect">Web Application Protection</a></li>
+  <li><a href="#storage">Private Storage Support</a></li>
+  <li><a href="#html5">HTML5 API Security Policy</a></li>
+  <li><a href="#device">Tizen Device API Security Policy</a></li>
+  <li><a href="#content">Content Security Policy</a></li>
+  </ul>
+  
+  <h3 id="signature" name="signature">Widget 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> 
+   <li>The first valid Tizen distributor signature, <span style="font-family: Courier New,Courier,monospace;">signature1.xml</span>, 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> 
+  
+  <h3 id="protect" name="protect">Web Application Protection</h3>
+  <p>For Web applications that <a href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_setting">explicitly turn on encryption</a> using the <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:setting /&gt;</span> element in the configuration file, the Web Runtime provides the following protection features:</p> 
+  <ul class="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>
+  <table border="1">
+        <caption>Table: HTML5 API privileges and behavior</caption>
+       <tbody>
+               <tr>
+                       <th>API</th>
+                       <th>Privilege</th>
+                       <th>BehaviorPrivilege</th>
+               </tr>
+               <tr>
+                       <td>Geolocation</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></td>
+                       <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise block execution.<p><strong>Remote domain</strong>: Popup user prompt if defined, otherwise block execution.</p></td>
+               </tr>
+               <tr>
+                       <td>Getusermedia</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacapture</span></td>
+               </tr>
+               <tr>
+                       <td>Web Notifications (<span style="color: red">in mobile applications only</span>)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></td>
+                       <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise popup user prompt.<p><strong>Remote domain</strong>: Popup user prompt.</p></td>
+               </tr>
+               <tr>
+                       <td>Storage (IndexedDB, FileSystem capacity, quota exceeding WebDatabase)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/unlimitedstorage</span></td>
+               </tr>
+               <tr>
+                       <td>FullScreen (<span style="color: red">in mobile applications only</span>)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">hhttp://tizen.org/privilege/fullscreen</span></td>
+                       <td>If defined, launch in fullscreen mode. If not defined, launch fullscreen mode according to user input (which depends on the content).</td>
+               </tr>
+               <tr>
+                       <td>Audio Recording (<span style="color: red">in wearable applications only</span>)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/audiorecorder</span></td>
+                       <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise block execution.<p><strong>Remote domain</strong>: Block execution. </p>
+</td>
+               </tr>
+               <tr>
+                       <td>Video Recording (<span style="color: red">in wearable applications only</span>)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></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>
+  <table border="1">
+       <caption>Table: Distributor signature type to API privilege level behavior mapping</caption>
+       <tbody>
+               <tr>
+                       <th rowspan="2">API privilege level</th>
+                       <th colspan="3">Distributor signature type (<span style="font-family: Courier New,Courier,monospace;">signature1.xml</span>)</th>
+                       <th rowspan="2">Untrusted</th>
+               </tr>
+               <tr>
+                       <th>Platform</th>
+                       <th>Partner</th>
+                       <th>Public</th>
+               </tr>
+               <tr>
+                       <th>Platform</th>
+                       <td>Allowed</td>
+                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+               </tr>
+               <tr>
+                       <th>Partner</th>
+                       <td>Allowed</td>
+                       <td>Allowed</td>
+                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+               </tr>
+               <tr>
+                       <th>Public</th>
+                       <td>Allowed</td>
+                       <td>Allowed</td>
+                       <td>Allowed</td>
+                       <td>Security error for runtime use (direct API call without <span style="font-family: Courier New,Courier,monospace;">config.xml</span> declaration)<p>Installation fail for <span style="font-family: Courier New,Courier,monospace;">config.xml</span> use</p></td>
+               </tr>
+       </tbody>
+  </table>
+  <h3 id="content" name="content">Content Security Policy</h3>
+    <p>The Web applications can mitigate various kinds of content injection vulnerabilities, such as cross-site scripting (XSS). The content security policy (CSP) is a declarative policy that lets the author or server administrator of a Web application inform the client from where the application expects to load resources. To mitigate XSS, for example, a Web application can declare from where it expects to load scripts, allowing the client to detect and block malicious scripts injected into the application by an attacker.</p>
+  <p>Web application configuration can include 1 or more <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy-report-only&gt;</span>, or <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:allow-navigation&gt;</span> element. If these are included, the Web application is set to the <strong>CSP-based security mode</strong>.</p>
+
+<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): <span style="font-family: Courier New,Courier,monospace;">default-src *; script-src &#39;self&#39;; style-src &#39;self&#39;; object-src &#39;none&#39;;</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">config.xml</span>: <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy&gt;</span> or <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:content-security-policy-report-only&gt;</span>
+       <p>If the CSP is defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> 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 <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file, the default CSP policy is enforced.</p></li>
+       <li>HTTP header: <span style="font-family: Courier New,Courier,monospace;">Content-Security-Policy</span> or <span style="font-family: Courier New,Courier,monospace;">Content-Security-Policy-Report-Only</span>
+       <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 <span style="font-family: Courier New,Courier,monospace;">&lt;access&gt;</span> tag according to <a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/" target="_blank">Widget Access Request Policy</a>.</p>  
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The default CSP enforcement is subject to change in the future.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If a Web application declares the <span style="font-family: Courier New,Courier,monospace;">&lt;tizen:allow-navigation&gt;</span> element in its configuration document, the main resource navigation (through the <span style="font-family: Courier New,Courier,monospace;">window.open()</span> method or a hyperlink) to an external URL is allowed or restricted accordingly.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/first_app/first_app.htm b/org.tizen.gettingstarted/html/first_app/first_app.htm
new file mode 100644 (file)
index 0000000..19563d8
--- /dev/null
+++ b/org.tizen.gettingstarted/html/first_app/first_app.htm
@@ -0,0 +1,518 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#webapp">Creating Your First Mobile Web App</a></li>
+                       <li><a href="#wearapp">Creating Your First Wearable Web App</a></li>
+                       <li><a href="#nativeapp">Creating Your First Mobile Native App</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Your First Tizen Application</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>The following sections teach you how to create simple applications for various Tizen application types.</p>
+
+<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
+               
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+                       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="webapp" name="webapp" class="items-tit-h2"><img alt="Mobile Web" src="../images/mw_fold.png"/> Creating Your First Mobile Web App</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con"> 
+
+  <p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial 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 SDK and installing the created application on the Emulator or target device.</p> 
+  <p>When you are developing a more complex application, you can take advantage of the <a href="../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> 
+  <h3 id="create" name="create">To Create a HelloWorld Application</h3> 
+  <ol class="tutorstep"> 
+   <li>Creating the HelloWorld Project 
+    <ol> 
+     <li>Launch the <strong>Tizen IDE</strong>.</li> 
+     <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Web Project</strong> window, select <strong>Template &gt; Tizen &gt; Basic &gt; Basic Application</strong>.</p> </li> 
+     <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li> 
+    </ol> <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p> 
+    <ul class="ul"> 
+     <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS files directory</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript files directory</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">config.xml</span> file: Application configuration file</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">icon.png</span> file: Icon file</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">index.html</span> file: Default HTML file</li> 
+    </ul> </li> 
+   <li>Configuring the Application and Creating the Application Code <p>The Web project source files already contain the basic application functionality.</p> <p>The automatically-included code creates an application with the title &quot;Application Name&quot;. To change the title to HelloWorld, take the following steps (illustrated in the following figure):</p> 
+    <ol> 
+     <li>Open <span style="font-family: Courier New,Courier,monospace">index.html</span> (1). </li> 
+     <li>Select the title (2). </li> 
+     <li>Locate the title in the code and change &quot;Application Name&quot; into &quot;HelloWorld&quot; (3).</li> 
+    </ol> <p class="figure">Figure: HelloWorld project</p> <p style="text-align: center;"> <img alt="HelloWorld project" src="../images/create_project.png" /> </p> <p>You also have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#design">design the application UI</a>.</p> </li> 
+   <li>Building and Packaging the Application <p>After you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> file.</p> </li> 
+   <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a href="../process/run_debug_app_w.htm#simulator">Simulator</a>, or <a href="../process/run_debug_app_w.htm#target">real target device</a>. </p><p>The following figure shows the widget running in the Emulator.</p> <p class="figure">Figure: Running the project</p> <p style="text-align: center;"> <img alt="Running the project" src="../images/running_project.png" /> </p> <p>On a real target device, you can use the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li> 
+  </ol> 
+  </div>
+               </li>   
+               <li>
+               
+<div class="devicespec-tit">
+                               <h2 id="wearapp" name="wearapp" class="items-tit-h2"><img alt="Wearable Web" src="../images/ww_fold.png"/> Creating Your First Wearable Web App</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+  <p>This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web <a href="../process/app_dev_process_w.htm">application development process</a> and use the Tizen SDK, installing the created application on the Emulator or a target device.</p> 
+  <p>When developing a more complex application, you can take advantage of the <a href="../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to make creating functionality and designing the application UI easier.</p> 
+
+  <h3 id="create_ww" name="create_ww">To Create a HelloWorld Application</h3>
+  <ol class="tutorstep"> 
+   <li>Creating the HelloWorld Project 
+    <ol> 
+     <li>Launch the <strong>Tizen IDE</strong>.</li> 
+     <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>To use the Wearable UI project template, in the <strong>New Tizen Wearable Web Project</strong> window, select <strong>Template &gt; Wearable UI &gt; Basic Application</strong>.</p> </li> 
+     <li>Define <strong>HelloWorld</strong> as the name of your project and click <strong>Finish</strong>.</li> 
+    </ol> 
+<p class="figure">Figure: Creating the HelloWorld project</p> <p style="text-align: center;"> <img alt="Creating the HelloWorld project" src="../images/helloworld_helloworld.png" /> </p>  
+
+<p> The new <strong>HelloWorld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p> 
+    <ul class="ul"> 
+     <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">lib</span> folder: Tizen wearable UI framework directory
+               <ul class="ul">
+         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>
+         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.min.js</span>: Release version of the Tizen wearable UI library </li>
+         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.css</span>: Debug version of the Tizen wearable UI theme </li>
+        <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.js</span>: Debug version of the Tizen wearable UI library </li>
+               </ul>
+     </li> 
+     <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: Default HTML file</li> 
+       
+    </ul> </li>
+   <li>Configuring the Application and Creating the Application Code 
+    <p>The Web project source files already contain the basic application functionality.</p>
+       <ol>
+      <li>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file (1).</li>
+         <li>Set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag (2).</li>
+         <li>Add the <span style="font-family: Courier New,Courier,monospace">tau.min.css</span> file (3).
+         <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li>
+         <li>Add a link to the <span style="font-family: Courier New,Courier,monospace">tau.min.js</span> file in the <span style="font-family: Courier New,Courier,monospace">script</span> element (4).
+         <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li></ol>
+
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace">index.html</span> file</p> <p style="text-align: center;"> <img alt="index.html file" src="../images/helloworld_js.png" /> </p>  
+
+
+    <p>You have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#code">code the application features</a>.</p> </li> 
+  
+
+  <li>Creating a Layout using the Wearable UI Theme <p>In the Wearable UI, each scene is named a <a href="../../../org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm">page</a>. When you include the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class attribute in a <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.</p>
+<p>For more information about the Tizen wearable UI layout and widgets, see <a href="../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Wearable Web UI Framework Reference</a>.</p> </li>
+
+ <li>Building and Packaging the Application 
+ <p>When you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p> </li> 
+   <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a real <a href="../process/run_debug_app_w.htm#target">target device</a>. </p><p>The following figure shows the widget running in the Emulator.</p> 
+   
+   <p class="figure">Figure: Running the project</p> <p style="text-align: center;"> <img alt="Running the project" src="../images/helloworld_emulator.png" /> </p> 
+   
+   <p>On a real target device, you can use the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li> 
+  </ol>
+</div>
+               </li>   
+<li>   
+                               <div class="devicespec-tit">
+                               <h2 id="nativeapp" name="nativeapp" class="items-tit-h2"><img alt="Mobile native" src="../images/mn_fold.png"/> Creating Your First Mobile Native App</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial 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 SDK and installing the created application on the Emulator or target device.</p> 
+  <p>When you are developing a more complex application, you can take advantage of the <a href="../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> 
+  <h3 id="create_n" name="create_n">To Create a HelloWorld Application</h3> 
+  <ol class="tutorstep"> 
+   <li>Creating the HelloWorld Project 
+    <ol> 
+     <li>Launch the <strong>Tizen IDE</strong>.</li> 
+     <li><a href="../process/app_dev_process_n.htm#creating">Create the application project in the IDE</a>. 
+        <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template &gt; MOBILE-&lt;version&gt; &gt; UI Application &gt; Basic UI Application</strong>.</p> </li> 
+     <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li></ol>
+
+<p class="figure">Figure: Creating the helloworld project</p> 
+  <p style="text-align:center;"><img alt="Creating the helloworld project" src="../images/hello_world_n.png" /></p>
+  
+     
+       <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> configuration file as well as in several other project files, including:</p>                  
+       <ul class="ul"> 
+     <li><span style="font-family: Courier New,Courier,monospace">inc</span> folder: Application header file directory</li> 
+     <li><span style="font-family: Courier New,Courier,monospace">src</span> folder: C files directory</li> 
+    </ul>
+</li>
+
+<li>Configuring the Application and Creating the Application Code 
+    <p>To configure the application:</p>
+       <ol>
+      <li><a href="../process/setting_properties_n.htm#manifest">Set the project properties</a> by modifying the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</li>
+         <li>Implement the application code in the <span style="font-family: Courier New,Courier,monospace">helloworld.c</span> file.</li>
+       </ol> 
+
+       <p>When coding the application, note that the Tizen Native API follows the basic principles listed below:</p>
+
+<ul class="ul"><li>Ownership of returned strings
+<p>All strings returned as pointers should be freed by the caller unless stated otherwise.</p>
+<p>To not free memory may lead to memory leaks. Insufficient system memory will trigger a system low memory notification and some applications may be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>
+ 
+<pre class="prettyprint">
+char *app_id_string = NULL;
+if(!app_get_id(&amp;app_id_string))
+{
+&nbsp;&nbsp;&nbsp;// Use app_id_string;
+&nbsp;&nbsp;&nbsp;if(app_id_string != NULL)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(app_id_string);
+}
+</pre></li>
+
+<li>Handles
+<p>A handle provides means to manage an instance associated with it.
+ Handles are widely used in Tizen Native API for ABI compatibility reasons.
+ Creation and destruction functions (create/destroy) are provided for each handle type.
+ They do not create and destroy the handle itself, but they operate on the instance associated with a given handle.
+ It means that a handle is not valid until a corresponding create function has been called and the handle is not
+ valid after a corresponding destroy function has been called. Also accessor functions (getters/setters) are provided
+ to access members of the hidden structure identified by a given handle.</p>
+<pre class="prettyprint">// Text message is represented by a handle
+messages_message_h sms_msg;
+
+// Create message and associate it with this handle
+messages_create_message(MESSAGES_TYPE_SMS, &amp;sms_msg);
+
+// Destroy message
+messages_destroy_message(sms_msg);
+
+// Change the properties of the text message
+messages_set_text(sms_msg,&quot;Hello, how are you?&quot;); 
+messages_add_address (sms_msg,&quot;01020157919&quot;, MESSAGE_RECIPIENT_TO);
+</pre></li>
+
+<li>Asynchronous function calls
+<p>Some of Tizen native API functions are asynchronous.</p>
+<p>An asynchronous function starts the processing and returns before this processing is finished. However, sometimes one should know, when this processing is finished. In such cases, waiting for the processing completion notification must be properly implemented.</p>
+</li>
+<li>Code assist
+<p>Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient.</p>
+<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>
+
+<p class="figure">Figure: Code assist</p> 
+  <p style="text-align:center;"><img src="../images/code_assist.png" alt="Code assist" /></p>          
+</li></ul>     
+</li>
+
+<li>Creating the Application UI with EFL
+<p> The <a href="../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL</a> is the native graphical toolkit for Tizen. This tutorial is an introduction to the EFL rather than a full-fledged Tizen application, as it does not use Appcore.</p>
+
+<p>To create the application UI:</p>
+<ol>
+<li>Add an interface
+
+<p>In this tutorial, there are the following exercises:</p>
+<ul class="ul">
+<li>a window to hold everything</li>
+<li>a conformant, which shows the virtual keyboard (required by Tizen guidelines)</li>
+<li>a naviframe used for applications, which show multiple screens through their lives with back and forth transitions between them (required by Tizen guidelines)</li>
+<li>a horizontal box with
+       <ul class="ul">
+       <li>a label with several lines of text</li>
+       <li>a button</li>
+       </ul>
+</li>
+</ul>
+</li>
+
+<li>Add an application skeleton with appcore
+<p>A pointer to important objects is stored in the following data structure.</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;// All graphical objects here are pointers to the value of the type Evas_Object.
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+} appdata_s;
+</pre>
+<p>The pointer is created and initialized to contain only zeros in the <span style="font-family: Courier New,Courier,monospace">main()</span> function. The same applies for the structure of the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> type, which holds the app-core related callbacks.</p>
+
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">For more information on Appcore, see the <a href="../../../org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm">Application Framework Tutorial</a>.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+</li>
+<li>Create the GUI objects
+<p>The GUI is created with the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. It receives a pointer to fill in the &quot;ad&quot; structure.</p>
+<p>Create the function and mark it static, since it is reachable only from the current compilation unit (which allows the compiler produce faster and smaller code).</p>
+<p>Inside the function, create a window and set its name and title to &quot;Hello World&quot;. Add a callback on the &quot;delete,request&quot; event (when the window is to be closed).</p>
+
+<pre class="prettyprint">static void
+create_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Create the 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;// Advertise which rotations are supported by the application; the
+&nbsp;&nbsp;&nbsp;// device_orientation callback is used to do the actual rotation when
+&nbsp;&nbsp;&nbsp;// the system detects the device&#39;s orientation has changed
+&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, (const int *)(&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Add a callback on the &quot;delete,request&quot; event; it is emitted when
+&nbsp;&nbsp;&nbsp;// the system closes the window 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Alternatively, elm_win_autodel_set() can be used to close
+&nbsp;&nbsp;&nbsp;// the window (not the application) automatically 
+&nbsp;&nbsp;&nbsp;// with the Back button, for example
+&nbsp;&nbsp;&nbsp;// elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+</pre>
+
+<p>The conformant goes inside the window first. Everything created from now on is inside it.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conformant = elm_conformant_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Set the conformant use as much horizontal and vertical space as
+&nbsp;&nbsp;&nbsp;// possible, that is, expand in both directions
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;// Set the conformant as the resize object for the window:
+&nbsp;&nbsp;&nbsp;// the window and the conformant grow together 
+&nbsp;&nbsp;&nbsp;// in proportion to each other
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conformant);
+
+&nbsp;&nbsp;&nbsp;// Show the conformant since all widgets are hidden by default
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);
+</pre>
+
+<p>The naviframe is useful for applications showing multiple screens: it enables displaying a screen, switching to another, moving back to the first (and doing the same with several screens).</p>
+<p>Only one screen is built: the naviframe is created and put inside the conformant.</p>
+
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;naviframe = elm_naviframe_add(ad-&gt;conformant);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conformant, ad-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;// Show the box
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);
+</pre>
+
+<p> The box is probably the most common container; it arranges a set of widgets in a vertical or horizontal way.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the box
+&nbsp;&nbsp;&nbsp;Evas_Object *box = elm_box_add(ad-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;// Set the box vertical
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
+
+&nbsp;&nbsp;&nbsp;// The box expands when its contents need more space
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;// The box fills the available space
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;// Add the box in the naviframe container
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;naviframe, &quot;Hello World&quot;, NULL, NULL, box, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show the box
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+</pre>
+
+<p> Labels hold text with formatting and over multiple lines.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the label
+&nbsp;&nbsp;&nbsp;Evas_Object *label = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;// The label expands when its contents need more space
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;// The box fills the available space on the horizontal axis and is
+&nbsp;&nbsp;&nbsp;// centered on the vertical axis (placed at 0.5 vertically, that is, in the
+&nbsp;&nbsp;&nbsp;// middle)
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);
+
+&nbsp;&nbsp;&nbsp;// Set the text for the label and set formatting through the HTML tags:
+&nbsp;&nbsp;&nbsp;// - &quot;Hello World!&quot; centered on the first line
+&nbsp;&nbsp;&nbsp;// - skip a line
+&nbsp;&nbsp;&nbsp;// - Add a longer text that does not fit on a single line but wraps at
+&nbsp;&nbsp;&nbsp;//   the word boundaries
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;align=center&gt;Hello World!&lt;/align&gt;&lt;br&gt;&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;br&gt;&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;wrap = word&gt;Clicking on the button below closes the application.&lt;/wrap&gt;&quot;);
+
+&nbsp;&nbsp;&nbsp;// Add the label at the end of the box
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label);
+
+&nbsp;&nbsp;&nbsp;// Show the label
+&nbsp;&nbsp;&nbsp;evas_object_show(label);
+</pre>
+<p> The last widget is the button. It exits the application when clicked.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the button
+&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(box);
+
+&nbsp;&nbsp;&nbsp;// The box expands when its contents need more space
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;// The button fills the available space on the horizontal axis and is
+&nbsp;&nbsp;&nbsp;// placed at the bottom of the vertical axis (1 is the end of the axis,
+&nbsp;&nbsp;&nbsp;// the coordinates start at (0, 0) on the top-left corner
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);
+
+&nbsp;&nbsp;&nbsp;// Set the text for the button
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Close!&quot;);
+
+&nbsp;&nbsp;&nbsp;// Add a callback on the button for the &quot;clicked&quot; event; implementation of
+&nbsp;&nbsp;&nbsp;// the callback is below
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Add the widget at the end of the box; since the axis starts in the top left
+&nbsp;&nbsp;&nbsp;// corner and the box is vertical, the end of the box is below the label
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+
+&nbsp;&nbsp;&nbsp;// Show the button
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+</pre>
+
+<p> This is how to set the window displaying everything on screen at once.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Show window after the GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre> 
+</li>
+<li>Exit the GUI
+
+<p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>
+<p>For more details on the callbacks, see the <a href="../../../org.tizen.guides/html/native/ui/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
+<pre class="prettyprint">static void
+clicked_cb(void *user_data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;elm_exit();
+}
+</pre>
+</li>
+</ol>
+</li>
+  
+  <li>Building and Packaging the Application  
+    <p>After you have finished implementing your application, you must <a href="../process/building_app_n.htm">build it</a>.</p>
+       
+       <p>After building, the Tizen IDE automatically packages the project.</p>
+</li>
+
+<li>Running and Debugging the Application  
+    <p>You can run the HelloWorld application on the <a href="../process/running_app_n.htm">Emulator</a>. </p>
+       
+       <p>The following figure shows the widget running in the Emulator.</p> <p class="figure">Figure: Running the project</p> 
+  <p style="text-align:center;"><img alt="Running the project" src="../images/hello.png" /></p>
+</li>
+
+</ol>
+</div>
+       </li>   
+               
+       </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/images/app_dev_process_mn.png b/org.tizen.gettingstarted/html/images/app_dev_process_mn.png
new file mode 100644 (file)
index 0000000..97edba1
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/app_dev_process_mn.png differ
diff --git a/org.tizen.gettingstarted/html/images/app_dev_process_mw.png b/org.tizen.gettingstarted/html/images/app_dev_process_mw.png
new file mode 100644 (file)
index 0000000..87cc5e7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/app_dev_process_mw.png differ
diff --git a/org.tizen.gettingstarted/html/images/app_filtering_basic_flow.png b/org.tizen.gettingstarted/html/images/app_filtering_basic_flow.png
new file mode 100644 (file)
index 0000000..69880a8
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/app_filtering_basic_flow.png differ
diff --git a/org.tizen.gettingstarted/html/images/application_package_manager.png b/org.tizen.gettingstarted/html/images/application_package_manager.png
new file mode 100644 (file)
index 0000000..a7885c2
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/application_package_manager.png differ
diff --git a/org.tizen.gettingstarted/html/images/bg_util_bar.gif b/org.tizen.gettingstarted/html/images/bg_util_bar.gif
new file mode 100644 (file)
index 0000000..977f94d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/bg_util_bar.gif differ
diff --git a/org.tizen.gettingstarted/html/images/breakpoint_set.png b/org.tizen.gettingstarted/html/images/breakpoint_set.png
new file mode 100644 (file)
index 0000000..86a346f
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/breakpoint_set.png differ
diff --git a/org.tizen.gettingstarted/html/images/btn_top.gif b/org.tizen.gettingstarted/html/images/btn_top.gif
new file mode 100644 (file)
index 0000000..d35e824
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/btn_top.gif differ
diff --git a/org.tizen.gettingstarted/html/images/code_assist.png b/org.tizen.gettingstarted/html/images/code_assist.png
new file mode 100644 (file)
index 0000000..fbaa2a4
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/code_assist.png differ
diff --git a/org.tizen.gettingstarted/html/images/coolbar.png b/org.tizen.gettingstarted/html/images/coolbar.png
new file mode 100644 (file)
index 0000000..4bbd2e1
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/coolbar.png differ
diff --git a/org.tizen.gettingstarted/html/images/create_project.png b/org.tizen.gettingstarted/html/images/create_project.png
new file mode 100644 (file)
index 0000000..8ee430f
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/create_project.png differ
diff --git a/org.tizen.gettingstarted/html/images/deactivate.png b/org.tizen.gettingstarted/html/images/deactivate.png
new file mode 100644 (file)
index 0000000..aeca177
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/deactivate.png differ
diff --git a/org.tizen.gettingstarted/html/images/dead_lock_warning.png b/org.tizen.gettingstarted/html/images/dead_lock_warning.png
new file mode 100644 (file)
index 0000000..75f685b
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/dead_lock_warning.png differ
diff --git a/org.tizen.gettingstarted/html/images/debug_view_resume.png b/org.tizen.gettingstarted/html/images/debug_view_resume.png
new file mode 100644 (file)
index 0000000..f95e586
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/debug_view_resume.png differ
diff --git a/org.tizen.gettingstarted/html/images/debug_view_stepinto.png b/org.tizen.gettingstarted/html/images/debug_view_stepinto.png
new file mode 100644 (file)
index 0000000..91121b7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/debug_view_stepinto.png differ
diff --git a/org.tizen.gettingstarted/html/images/debug_view_stepover.png b/org.tizen.gettingstarted/html/images/debug_view_stepover.png
new file mode 100644 (file)
index 0000000..d98ac39
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/debug_view_stepover.png differ
diff --git a/org.tizen.gettingstarted/html/images/debug_view_stepreturn.png b/org.tizen.gettingstarted/html/images/debug_view_stepreturn.png
new file mode 100644 (file)
index 0000000..3c678a7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/debug_view_stepreturn.png differ
diff --git a/org.tizen.gettingstarted/html/images/debug_view_suspend.png b/org.tizen.gettingstarted/html/images/debug_view_suspend.png
new file mode 100644 (file)
index 0000000..57c15e2
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/debug_view_suspend.png differ
diff --git a/org.tizen.gettingstarted/html/images/debug_view_terminate.png b/org.tizen.gettingstarted/html/images/debug_view_terminate.png
new file mode 100644 (file)
index 0000000..03764e0
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/debug_view_terminate.png differ
diff --git a/org.tizen.gettingstarted/html/images/design_page_layout.png b/org.tizen.gettingstarted/html/images/design_page_layout.png
new file mode 100644 (file)
index 0000000..97ab94d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/design_page_layout.png differ
diff --git a/org.tizen.gettingstarted/html/images/expressions.png b/org.tizen.gettingstarted/html/images/expressions.png
new file mode 100644 (file)
index 0000000..9a5a2db
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/expressions.png differ
diff --git a/org.tizen.gettingstarted/html/images/hello.png b/org.tizen.gettingstarted/html/images/hello.png
new file mode 100644 (file)
index 0000000..8f178a2
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/hello.png differ
diff --git a/org.tizen.gettingstarted/html/images/hello_world_n.png b/org.tizen.gettingstarted/html/images/hello_world_n.png
new file mode 100644 (file)
index 0000000..6856aca
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/hello_world_n.png differ
diff --git a/org.tizen.gettingstarted/html/images/helloworld_emulator.png b/org.tizen.gettingstarted/html/images/helloworld_emulator.png
new file mode 100644 (file)
index 0000000..23f5f8e
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/helloworld_emulator.png differ
diff --git a/org.tizen.gettingstarted/html/images/helloworld_helloworld.png b/org.tizen.gettingstarted/html/images/helloworld_helloworld.png
new file mode 100644 (file)
index 0000000..0a5bec7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/helloworld_helloworld.png differ
diff --git a/org.tizen.gettingstarted/html/images/helloworld_js.png b/org.tizen.gettingstarted/html/images/helloworld_js.png
new file mode 100644 (file)
index 0000000..b4e036e
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/helloworld_js.png differ
diff --git a/org.tizen.gettingstarted/html/images/hover_help.png b/org.tizen.gettingstarted/html/images/hover_help.png
new file mode 100644 (file)
index 0000000..283d655
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/hover_help.png differ
diff --git a/org.tizen.gettingstarted/html/images/hybrid_app_package_manager.png b/org.tizen.gettingstarted/html/images/hybrid_app_package_manager.png
new file mode 100644 (file)
index 0000000..19cf57f
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/hybrid_app_package_manager.png differ
diff --git a/org.tizen.gettingstarted/html/images/ico_arr_hidden.gif b/org.tizen.gettingstarted/html/images/ico_arr_hidden.gif
new file mode 100644 (file)
index 0000000..9a9d3ff
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ico_arr_hidden.gif differ
diff --git a/org.tizen.gettingstarted/html/images/ico_bullet_2_7.gif b/org.tizen.gettingstarted/html/images/ico_bullet_2_7.gif
new file mode 100644 (file)
index 0000000..8de872c
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ico_bullet_2_7.gif differ
diff --git a/org.tizen.gettingstarted/html/images/ide_interactions.png b/org.tizen.gettingstarted/html/images/ide_interactions.png
new file mode 100644 (file)
index 0000000..41d562b
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ide_interactions.png differ
diff --git a/org.tizen.gettingstarted/html/images/installer.png b/org.tizen.gettingstarted/html/images/installer.png
new file mode 100644 (file)
index 0000000..b77762e
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/installer.png differ
diff --git a/org.tizen.gettingstarted/html/images/localize_widget.png b/org.tizen.gettingstarted/html/images/localize_widget.png
new file mode 100644 (file)
index 0000000..9d446df
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/localize_widget.png differ
diff --git a/org.tizen.gettingstarted/html/images/memory_leaks.png b/org.tizen.gettingstarted/html/images/memory_leaks.png
new file mode 100644 (file)
index 0000000..8cadb19
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/memory_leaks.png differ
diff --git a/org.tizen.gettingstarted/html/images/menu_key.png b/org.tizen.gettingstarted/html/images/menu_key.png
new file mode 100644 (file)
index 0000000..eb6c230
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/menu_key.png differ
diff --git a/org.tizen.gettingstarted/html/images/mn_division.png b/org.tizen.gettingstarted/html/images/mn_division.png
new file mode 100644 (file)
index 0000000..1f7e337
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mn_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/mn_fold.png b/org.tizen.gettingstarted/html/images/mn_fold.png
new file mode 100644 (file)
index 0000000..1f8d62b
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mn_fold.png differ
diff --git a/org.tizen.gettingstarted/html/images/mn_icon.png b/org.tizen.gettingstarted/html/images/mn_icon.png
new file mode 100644 (file)
index 0000000..19a0fd3
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mn_icon.png differ
diff --git a/org.tizen.gettingstarted/html/images/multiple_apps.png b/org.tizen.gettingstarted/html/images/multiple_apps.png
new file mode 100644 (file)
index 0000000..3bcec5a
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/multiple_apps.png differ
diff --git a/org.tizen.gettingstarted/html/images/mw_division.png b/org.tizen.gettingstarted/html/images/mw_division.png
new file mode 100644 (file)
index 0000000..8fc3efa
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mw_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/mw_fold.png b/org.tizen.gettingstarted/html/images/mw_fold.png
new file mode 100644 (file)
index 0000000..a96e013
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mw_fold.png differ
diff --git a/org.tizen.gettingstarted/html/images/mw_icon.png b/org.tizen.gettingstarted/html/images/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mw_icon.png differ
diff --git a/org.tizen.gettingstarted/html/images/mw_icon_optional.png b/org.tizen.gettingstarted/html/images/mw_icon_optional.png
new file mode 100644 (file)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mw_icon_optional.png differ
diff --git a/org.tizen.gettingstarted/html/images/n_division.png b/org.tizen.gettingstarted/html/images/n_division.png
new file mode 100644 (file)
index 0000000..df38a99
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/n_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/n_fold.png b/org.tizen.gettingstarted/html/images/n_fold.png
new file mode 100644 (file)
index 0000000..6336532
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/n_fold.png differ
diff --git a/org.tizen.gettingstarted/html/images/native_api_layout.png b/org.tizen.gettingstarted/html/images/native_api_layout.png
new file mode 100644 (file)
index 0000000..26b4d66
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/native_api_layout.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png b/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png
new file mode 100644 (file)
index 0000000..a956c46
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_app_xml.png b/org.tizen.gettingstarted/html/images/nuib_soubp_app_xml.png
new file mode 100644 (file)
index 0000000..49f7192
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_app_xml.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_folder.png b/org.tizen.gettingstarted/html/images/nuib_soubp_folder.png
new file mode 100644 (file)
index 0000000..0d35993
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_folder.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_includes.png b/org.tizen.gettingstarted/html/images/nuib_soubp_includes.png
new file mode 100644 (file)
index 0000000..f9e1a16
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_includes.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_layout_tuml.png b/org.tizen.gettingstarted/html/images/nuib_soubp_layout_tuml.png
new file mode 100644 (file)
index 0000000..4a1b06e
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_layout_tuml.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_project_explorer.png b/org.tizen.gettingstarted/html/images/nuib_soubp_project_explorer.png
new file mode 100644 (file)
index 0000000..b349201
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_project_explorer.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_tizen_icon.png b/org.tizen.gettingstarted/html/images/nuib_soubp_tizen_icon.png
new file mode 100644 (file)
index 0000000..958049d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_tizen_icon.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_soubp_tizen_manifest_xml.png b/org.tizen.gettingstarted/html/images/nuib_soubp_tizen_manifest_xml.png
new file mode 100644 (file)
index 0000000..0611ceb
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/nuib_soubp_tizen_manifest_xml.png differ
diff --git a/org.tizen.gettingstarted/html/images/open_trace.png b/org.tizen.gettingstarted/html/images/open_trace.png
new file mode 100644 (file)
index 0000000..f52304e
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/open_trace.png differ
diff --git a/org.tizen.gettingstarted/html/images/package_id.png b/org.tizen.gettingstarted/html/images/package_id.png
new file mode 100644 (file)
index 0000000..2f5ee1d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/package_id.png differ
diff --git a/org.tizen.gettingstarted/html/images/page_event_handler.png b/org.tizen.gettingstarted/html/images/page_event_handler.png
new file mode 100644 (file)
index 0000000..c652530
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/page_event_handler.png differ
diff --git a/org.tizen.gettingstarted/html/images/page_event_handler2.png b/org.tizen.gettingstarted/html/images/page_event_handler2.png
new file mode 100644 (file)
index 0000000..9ff1ed8
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/page_event_handler2.png differ
diff --git a/org.tizen.gettingstarted/html/images/page_event_sequence.png b/org.tizen.gettingstarted/html/images/page_event_sequence.png
new file mode 100644 (file)
index 0000000..a5b8ab8
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/page_event_sequence.png differ
diff --git a/org.tizen.gettingstarted/html/images/page_object.png b/org.tizen.gettingstarted/html/images/page_object.png
new file mode 100644 (file)
index 0000000..c1ebbd7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/page_object.png differ
diff --git a/org.tizen.gettingstarted/html/images/permissions.png b/org.tizen.gettingstarted/html/images/permissions.png
new file mode 100644 (file)
index 0000000..436653d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/permissions.png differ
diff --git a/org.tizen.gettingstarted/html/images/remote_debug.png b/org.tizen.gettingstarted/html/images/remote_debug.png
new file mode 100644 (file)
index 0000000..fe31163
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/remote_debug.png differ
diff --git a/org.tizen.gettingstarted/html/images/remote_debug_sdk.png b/org.tizen.gettingstarted/html/images/remote_debug_sdk.png
new file mode 100644 (file)
index 0000000..14f1811
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/remote_debug_sdk.png differ
diff --git a/org.tizen.gettingstarted/html/images/resume.png b/org.tizen.gettingstarted/html/images/resume.png
new file mode 100644 (file)
index 0000000..89d6695
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/resume.png differ
diff --git a/org.tizen.gettingstarted/html/images/running_project.png b/org.tizen.gettingstarted/html/images/running_project.png
new file mode 100644 (file)
index 0000000..83d3048
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/running_project.png differ
diff --git a/org.tizen.gettingstarted/html/images/signature.png b/org.tizen.gettingstarted/html/images/signature.png
new file mode 100644 (file)
index 0000000..6465152
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/signature.png differ
diff --git a/org.tizen.gettingstarted/html/images/source_view.png b/org.tizen.gettingstarted/html/images/source_view.png
new file mode 100644 (file)
index 0000000..f69e8e8
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/source_view.png differ
diff --git a/org.tizen.gettingstarted/html/images/stepin.png b/org.tizen.gettingstarted/html/images/stepin.png
new file mode 100644 (file)
index 0000000..3f90971
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/stepin.png differ
diff --git a/org.tizen.gettingstarted/html/images/stepout.png b/org.tizen.gettingstarted/html/images/stepout.png
new file mode 100644 (file)
index 0000000..8488588
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/stepout.png differ
diff --git a/org.tizen.gettingstarted/html/images/stepover.png b/org.tizen.gettingstarted/html/images/stepover.png
new file mode 100644 (file)
index 0000000..fab11a1
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/stepover.png differ
diff --git a/org.tizen.gettingstarted/html/images/sync_chart.png b/org.tizen.gettingstarted/html/images/sync_chart.png
new file mode 100644 (file)
index 0000000..96b23f4
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/sync_chart.png differ
diff --git a/org.tizen.gettingstarted/html/images/thread_create.png b/org.tizen.gettingstarted/html/images/thread_create.png
new file mode 100644 (file)
index 0000000..c50b0c7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/thread_create.png differ
diff --git a/org.tizen.gettingstarted/html/images/thread_exit.png b/org.tizen.gettingstarted/html/images/thread_exit.png
new file mode 100644 (file)
index 0000000..c503634
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/thread_exit.png differ
diff --git a/org.tizen.gettingstarted/html/images/thread_load.png b/org.tizen.gettingstarted/html/images/thread_load.png
new file mode 100644 (file)
index 0000000..9bd0a1f
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/thread_load.png differ
diff --git a/org.tizen.gettingstarted/html/images/timeline_cpu_chart.png b/org.tizen.gettingstarted/html/images/timeline_cpu_chart.png
new file mode 100644 (file)
index 0000000..82b6842
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/timeline_cpu_chart.png differ
diff --git a/org.tizen.gettingstarted/html/images/tizen_project_explorer.png b/org.tizen.gettingstarted/html/images/tizen_project_explorer.png
new file mode 100644 (file)
index 0000000..abd5fb9
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/tizen_project_explorer.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_components.png b/org.tizen.gettingstarted/html/images/uibuilder_components.png
new file mode 100644 (file)
index 0000000..81475ba
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_components.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_css.png b/org.tizen.gettingstarted/html/images/uibuilder_css.png
new file mode 100644 (file)
index 0000000..4d4e727
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_css.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_files_folders.png b/org.tizen.gettingstarted/html/images/uibuilder_files_folders.png
new file mode 100644 (file)
index 0000000..e2f36d3
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_files_folders.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_folder.png b/org.tizen.gettingstarted/html/images/uibuilder_folder.png
new file mode 100644 (file)
index 0000000..fb94e93
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_folder.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_html.png b/org.tizen.gettingstarted/html/images/uibuilder_html.png
new file mode 100644 (file)
index 0000000..b365660
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_html.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_indexxml.png b/org.tizen.gettingstarted/html/images/uibuilder_indexxml.png
new file mode 100644 (file)
index 0000000..d849801
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_indexxml.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_js.png b/org.tizen.gettingstarted/html/images/uibuilder_js.png
new file mode 100644 (file)
index 0000000..faf7eca
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_js.png differ
diff --git a/org.tizen.gettingstarted/html/images/uibuilder_xml.png b/org.tizen.gettingstarted/html/images/uibuilder_xml.png
new file mode 100644 (file)
index 0000000..b81433b
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/uibuilder_xml.png differ
diff --git a/org.tizen.gettingstarted/html/images/user_template_export.png b/org.tizen.gettingstarted/html/images/user_template_export.png
new file mode 100644 (file)
index 0000000..da788a9
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/user_template_export.png differ
diff --git a/org.tizen.gettingstarted/html/images/valgrind_general.png b/org.tizen.gettingstarted/html/images/valgrind_general.png
new file mode 100644 (file)
index 0000000..229529d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/valgrind_general.png differ
diff --git a/org.tizen.gettingstarted/html/images/valgrind_heap.png b/org.tizen.gettingstarted/html/images/valgrind_heap.png
new file mode 100644 (file)
index 0000000..9c3b709
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/valgrind_heap.png differ
diff --git a/org.tizen.gettingstarted/html/images/view_package_mw.png b/org.tizen.gettingstarted/html/images/view_package_mw.png
new file mode 100644 (file)
index 0000000..9b5bbff
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/view_package_mw.png differ
diff --git a/org.tizen.gettingstarted/html/images/view_source.png b/org.tizen.gettingstarted/html/images/view_source.png
new file mode 100644 (file)
index 0000000..fd05405
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/view_source.png differ
diff --git a/org.tizen.gettingstarted/html/images/w_division.png b/org.tizen.gettingstarted/html/images/w_division.png
new file mode 100644 (file)
index 0000000..88d9959
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/w_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/w_fold.png b/org.tizen.gettingstarted/html/images/w_fold.png
new file mode 100644 (file)
index 0000000..1967eb0
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/w_fold.png differ
diff --git a/org.tizen.gettingstarted/html/images/watchpoint_setting.png b/org.tizen.gettingstarted/html/images/watchpoint_setting.png
new file mode 100644 (file)
index 0000000..c3f0472
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/watchpoint_setting.png differ
diff --git a/org.tizen.gettingstarted/html/images/wearable_web_application_project.png b/org.tizen.gettingstarted/html/images/wearable_web_application_project.png
new file mode 100644 (file)
index 0000000..0ae1291
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/wearable_web_application_project.png differ
diff --git a/org.tizen.gettingstarted/html/images/web_app_directory_structure.png b/org.tizen.gettingstarted/html/images/web_app_directory_structure.png
new file mode 100644 (file)
index 0000000..0ede1f1
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/web_app_directory_structure.png differ
diff --git a/org.tizen.gettingstarted/html/images/web_application_project.png b/org.tizen.gettingstarted/html/images/web_application_project.png
new file mode 100644 (file)
index 0000000..61d8e2d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/web_application_project.png differ
diff --git a/org.tizen.gettingstarted/html/images/what_is_tizen_architecture.png b/org.tizen.gettingstarted/html/images/what_is_tizen_architecture.png
new file mode 100644 (file)
index 0000000..ac2efed
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/what_is_tizen_architecture.png differ
diff --git a/org.tizen.gettingstarted/html/images/widget_object.png b/org.tizen.gettingstarted/html/images/widget_object.png
new file mode 100644 (file)
index 0000000..4f7fade
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/widget_object.png differ
diff --git a/org.tizen.gettingstarted/html/images/ww_app_directory_structure.png b/org.tizen.gettingstarted/html/images/ww_app_directory_structure.png
new file mode 100644 (file)
index 0000000..0ede1f1
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ww_app_directory_structure.png differ
diff --git a/org.tizen.gettingstarted/html/images/ww_division.png b/org.tizen.gettingstarted/html/images/ww_division.png
new file mode 100644 (file)
index 0000000..65e7ab7
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ww_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/ww_fold.png b/org.tizen.gettingstarted/html/images/ww_fold.png
new file mode 100644 (file)
index 0000000..b3c1361
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ww_fold.png differ
diff --git a/org.tizen.gettingstarted/html/images/ww_icon.png b/org.tizen.gettingstarted/html/images/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ww_icon.png differ
diff --git a/org.tizen.gettingstarted/html/images/ww_icon_optional.png b/org.tizen.gettingstarted/html/images/ww_icon_optional.png
new file mode 100644 (file)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/ww_icon_optional.png differ
diff --git a/org.tizen.gettingstarted/html/index.htm b/org.tizen.gettingstarted/html/index.htm
new file mode 100644 (file)
index 0000000..8a88eb8
--- /dev/null
+++ b/org.tizen.gettingstarted/html/index.htm
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 Tizen</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1><a href="cover_page.htm">Getting Started with Tizen</a></h1>
+
+       <h2><a href="preface/preface.htm">Preface</a></h2>
+
+       <h2><a href="first_app/first_app.htm">Creating Your First Tizen Application</a></h2>
+
+       <h2><a href="process/app_dev_process.htm">Application Development Process</a></h2>      
+
+       <ul>
+               <li><a href="process/app_dev_process_w.htm">Web Application</a>
+               <ul>
+                       <li><a href="process/creating_app_project_w.htm">Creating the Application Project</a></li>
+                       <li><a href="process/setting_properties_w.htm">Setting Project Properties</a></li>
+                       <li><a href="process/designing_app_ui_w.htm">Creating Application UIs with UI Builder</a></li>
+                       <li><a href="process/coding_app_w.htm">Coding Applications</a></li>
+                       <li><a href="process/run_debug_app_w.htm">Running and Debugging Applications</a></li>
+               </ul>
+               </li>
+               <li><a href="process/app_dev_process_n.htm">Native Application</a>
+               <ul>
+                       <li><a href="process/setting_properties_n.htm">Setting Project Properties</a></li>
+                       <li><a href="process/designing_app_ui_n.htm">Creating Application UIs with UI Builder</a></li>
+                       <li><a href="process/building_app_n.htm">Building Applications</a></li>
+                       <li><a href="process/running_app_n.htm">Running Applications</a></li>
+                       <li><a href="process/debugging_app_n.htm">Debugging Applications</a></li>
+                       <li><a href="process/performance_n.htm">Optimizing Application Performance</a></li>
+               </ul>
+               </li>
+       </ul>
+
+       <h2><a href="app_model/application_model.htm">Tizen Application Model</a></h2>
+       <ul>
+               <li><a href="app_model/application_model_w.htm">Web Application</a></li>
+               <li><a href="app_model/application_model_n.htm">Native Application</a></li>
+       </ul> 
+
+       <h2><a href="details/details.htm">Understanding Tizen Programming</a></h2>
+       <ul>
+               <li><a href="details/tizen_apis.htm">Tizen APIs</a></li>
+               <li><a href="details/sec_privileges.htm">Security and API Privileges</a></li>
+               <li><a href="details/app_filtering.htm">Application Filtering</a></li>
+               <li><a href="details/web_runtime_w.htm">Web Runtime</a></li>
+               <li><a href="details/key_events.htm">Key Event Handling</a></li>
+               <li><a href="details/io_overview.htm">File System Directory Hierarchy</a></li>
+               <li><a href="details/error_handling.htm">Error Handling</a></li>        
+       </ul>
+       <h2><a href="details/tizen_websites.htm">Tizen Web Sites</a></h2>
+
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+</div></div></div>
+
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/preface/preface.htm b/org.tizen.gettingstarted/html/preface/preface.htm
new file mode 100644 (file)
index 0000000..7de539f
--- /dev/null
+++ b/org.tizen.gettingstarted/html/preface/preface.htm
@@ -0,0 +1,128 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Preface</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+<h1>Preface</h1>
+
+<p>Welcome to Tizen!</p>
+
+<p>Tizen is an open-source project that allows you to create feature-rich applications for multiple device categories.</p>
+
+<p>The <a href="../details/details.htm#platform">Tizen platform</a> supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native 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 Web or native framework to create them.</p>
+
+<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile native profile can be used to develop native applications for mobile devices.</p>
+
+<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; stands for the Web application profiles.</p>
+
+<table border="1"> 
+   <caption>
+     Table: Tizen profiles 
+   </caption> 
+   <colgroup> 
+    <col width="20%" /> 
+    <col width="40%" /> 
+    <col width="40%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Profile</th> 
+     <th>Icon</th> 
+    </tr>
+       <tr> 
+     <td>Mobile Web</td> 
+     <td><img alt="Mobile Web" src="../images/mw_icon.png"/> or <img alt="Optional Mobile Web" src="../images/mw_icon_optional.png"/></td> 
+    </tr>
+       <tr> 
+     <td>Wearable Web</td> 
+     <td><img alt="Wearable Web" src="../images/ww_icon.png"/> or <img alt="Optional Wearable Web" src="../images/ww_icon_optional.png"/></td> 
+    </tr>
+       <tr> 
+     <td>Mobile Native</td> 
+     <td><img alt="Native Web" src="../images/mn_icon.png"/></td> 
+    </tr>
+   </tbody> 
+  </table>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. The 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></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  
+
+
+<h2 id="tizen_doc" name="tizen_doc">Tizen Documentation</h2>
+
+<p>To make the most of your Tizen applications, get familiar with the Tizen documentation:</p>
+
+<ul>
+       <li><a href="../cover_page.htm">Getting Started</a>
+       <p>The getting started with Tizen documentation provides all the information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>
+       </li>
+       <li><a href="../../../org.tizen.devtools/html/cover_page.htm">Development Environment and Tools</a>
+       <p>The development environment and tools documentation introduces the Tizen software development kit (SDK) and related tools you can use when developing your Tizen application.</p>
+       </li>
+       <li><a href="../../../org.tizen.tutorials/html/cover_page.htm">Tutorials</a>
+       <p>The Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials contain detailed code examples to help you write the required code in practice.</p>
+       </li>
+       <li><a href="../../../org.tizen.guides/html/cover_page.htm">Guides</a>
+       <p>The Tizen developer guides introduce the various features that you can use in creating Tizen applications. You can select an API domain to implement its functionalities into your Tizen application.</p>
+       </li>
+       <li><a href="../../../org.tizen.web.apireference/html/cover_page.htm">API References</a>
+       <p>The Tizen API References provide descriptions of all the Tizen API domains, subdomains, classes, interfaces, and methods.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/process/app_dev_process.htm b/org.tizen.gettingstarted/html/process/app_dev_process.htm
new file mode 100644 (file)
index 0000000..e3905e1
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/app_dev_process.htm
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Development Process</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<h1>Application Development Process</h1>
+
+<p>Click the application type you want:</p>
+<p><a href="app_dev_process_w.htm"><img alt="Web Application" src="../images/w_division.png"/></a> <a href="app_dev_process_n.htm"><img alt="Native Application" src="../images/n_division.png"/></a></p>
+    
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/process/app_dev_process_n.htm b/org.tizen.gettingstarted/html/process/app_dev_process_n.htm
new file mode 100644 (file)
index 0000000..94a6c87
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/app_dev_process_n.htm
@@ -0,0 +1,185 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#planning">Planning and Designing</a></li>
+                       <li><a href="#creating">Creating the Project</a></li>
+                       <li><a href="#setting">Setting Properties</a></li>
+                       <li><a href="#designing">Designing the UI and Implementing Code</a></li>
+                       <li><a href="#build">Building</a></li>
+                       <li><a href="#debugging">Running and Debugging</a></li>
+                       <li><a href="#packaging">Packaging</a></li>
+                       <li><a href="#develop">Developing Multi-projects</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Native Application Development Process</h1>
+
+  <p>The following figure illustrates the process of developing a Tizen native application. Tizen provides the tools required to manage your application&#39;s life-cycle from product conception, through development and release, to end-of-life application retirement.</p> 
+  <p class="figure">Figure: Native application development process</p> 
+<p style="text-align:center;"><img alt="Native application development process" src="../images/app_dev_process_mn.png" /></p> 
+  <p>To develop an application with Tizen:</p>
+
+<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>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 IDE 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, which the Tizen native <a href="../../../org.tizen.devtools/html/native_tools/project_wizard_n.htm">Project Wizard</a> uses to automatically create basic functionalities that the native application implements to be able to execute. The default project files and folders are also created.</p>
+  <p>The following project templates are available:</p> 
+  <ul> 
+   <li><strong>UI Application</strong>
+   <p>This template is suitable for creating a UI application with project files. </p></li> 
+   
+   <li><strong>Service Application</strong>
+  <p>This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with UI Application.</p></li> 
+  
+  </ul> 
+
+<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="designing_app_ui_n.htm">design and create the application UI (user interface) with UI Builder</a>.</p> 
+        <p>UI Builder is included in the Tizen SDK, and functions as a WYSIWYG (What You See Is What You Get) design environment for creating UIs for native applications.</p>
+       <table class="note"> 
+    <tbody> 
+     <tr> 
+      <th class="note">Note</th> 
+     </tr> 
+     <tr> 
+      <td class="note">You can also design the application UI using the controls defined in <a href="../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI</a> guide.
+        </td> 
+     </tr> 
+    </tbody> 
+   </table>
+        </li>
+   <li><strong>Coding applications</strong> 
+        <p>Code your application in the IDE using the namespaces defined in the <a href="../../../org.tizen.native.mobile.apireference/index.html">Native API Reference</a>.</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> 
+   <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 SDK, 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="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 IDE. If you want to register your application in the Tizen store, <a href="../../../org.tizen.devtools/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>Right-click the project and select <strong>Project &gt; Build Package &gt; TPK</strong>.</p></li>
+   
+  </ol> 
+
+<p>After the packaging 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>You can develop a UI project and service or shared library projects as a package.</p> 
+  <p>To develop a multi-project native application:</p> 
+  <ol> 
+   <li><a href="#creating">Create a form-based or tab-based UI application</a>.</li> 
+   <li>Create a service application.</li> 
+   <li>Package a multi-project application using Tizen IDE: 
+     <ol> 
+      <li>In the IDE, 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 IDE.</p> </li> 
+      <li><p>To establish a project reference between UI application and service application:</p> 
+       <ul> 
+        <li>In the <strong>Project Explorer</strong> view, right-click the UI application.</li> 
+        <li>Select <strong>Properties &gt; Project References</strong>.</li> 
+        <li>Select the check box for the service application or shared library, 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 <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> files are merged into one. <a href="../app_model/application_model_n.htm#packageID">The application ID in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> 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 application or shared library is built and run automatically while the UI application is built and run.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/process/app_dev_process_w.htm b/org.tizen.gettingstarted/html/process/app_dev_process_w.htm
new file mode 100644 (file)
index 0000000..b716d09
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/app_dev_process_w.htm
@@ -0,0 +1,270 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#plan">Planning and Designing</a></li>
+                       <li><a href="#create">Creating the Project</a></li>
+                       <li><a href="#set">Setting Properties</a></li>
+                       <li><a href="#design">Designing the UI</a></li>
+                       <li><a href="#code">Coding</a></li>
+                       <li><a href="#build">Building</a></li>
+                       <li><a href="#run">Running and Debugging</a></li>
+                       <li><a href="#package">Packaging</a></li>
+                       <li><a href="#multi">Developing Multi-projects</a></li>
+                       <li><a href="#cert">Certifying and Publishing</a></li>
+                       <li><a href="#upgrade">Upgrading</a></li>
+               </ul>
+</div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Web Application Development Process</h1>
+
+  <p>The following figure illustrates the process of developing a Tizen Web application. Tizen provides the tools required to manage your application&#39;s life-cycle from product conception, through development and release, to end-of-life application retirement.</p> 
+  <p class="figure">Figure: Web application development process</p> 
+  <p style="text-align:center;"><img alt="Web application development process" src="../images/app_dev_process_mw.png" /></p> 
+  <p>To develop an application with Tizen:</p> 
+  
+<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> 
+
+<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 IDE. You can also <a href="designing_app_ui_w.htm#project">create a UI Builder project</a>, which enables you to design your application with the <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a>.</p> 
+  <p>When creating the application project, use an applicable project template or sample. Based on the selection, the Project Wizard automatically creates basic functionalities that the application has to implement to be able to run. You can select from a variety of <a class="opensection" href="creating_app_project_w.htm#template">templates and samples</a>. You can also create <a class="opensection" href="creating_app_project_w.htm#user">custom user templates</a>.</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 widget</a> to achieve the required functionality and features for your application.</p>  
+
+<h2 id="design" name="design" >Designing the Application UI</h2>
+
+<p>You can <a href="designing_app_ui_w.htm">design and create the application UI (user interface) with UI Builder</a>.</p> 
+<p>UI Builder is included in the Tizen SDK, and functions as a WYSIWYG (What You See Is What You Get) design environment for creating UIs for Web applications.</p>
+   <table class="note"> 
+    <tbody> 
+     <tr> 
+      <th class="note">Note</th> 
+     </tr> 
+     <tr> 
+      <td class="note">You can also design the application UI using the widgets defined in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Web UI Framework Reference</a>.</td> 
+     </tr> 
+    </tbody> 
+   </table>
+
+<h2 id="code" name="code">Coding the Application</h2>
+
+<p><a href="coding_app_w.htm">Code your application</a> in the IDE 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> 
+
+<h2 id="build" name="build" >Building the Application</h2>
+
+  <p>When the IDE builds an application, the following process is executed:</p>
+  <ol><li>Validation check for:
+  <ul><li>JavaScript</li>
+  <li>CSS</li></ul></li>
+  <li>Compile for:
+        <ul class="ul"><li>Coffeescript</li>
+               <li>Less</li></ul></li></ol>
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">About the output files: 
+      <ul class="ul"> 
+       <li>Compiled coffeescript output file name is <span style="font-family: Courier New,Courier,monospace">&lt;file name&gt;.js</span>. 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 <span style="font-family: Courier New,Courier,monospace">&lt;file name&gt;.css</span>. 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> 
+      </ul></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <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 widget automatically or manually:</p> 
+  <ul> 
+   <li>Automatic build: <p>In the IDE 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 IDE automatically recognizes any saved changes and rebuilds the project source.</p> </li> 
+   <li>Manual build: <p>In the IDE 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> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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 <strong>Project &gt; Clean</strong> in the IDE menu.</li> 
+      </ul></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <p>To customize a widget, set the build properties:</p> 
+  <ul><li>JS validation
+  <p>Set the options in the IDE menu: <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web &gt; Editor &gt; JavaScript Editor</strong>.</p></li>
+  <li>CSS validation
+  <p>Set the options in IDE menu: <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web &gt; Editor &gt; Css Editor</strong>.</p></li></ul>
+
+<h2 id="run" name="run">Running and Debugging the Application</h2>
+
+  <p>When the IDE runs or debugs the application, the following process is executed:</p>
+  <ol><li>Build automatically if no build has been created yet.</li>
+  <li>Package.
+<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 SDK, 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> 
+
+  <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>
+  <li>You can use the live editing mode to test faster (debug mode does not support it).</li></ul>
+  <p>For more information about the debugging process and tools, see <a href="run_debug_app_w.htm#debug">Debugging Widgets</a>.</p>
+
+<h2 id="package" name="package">Packaging the Application</h2>
+
+  <p>When the IDE packages the application, the following process is executed:</p>
+  <ol><li>Build automatically if no build has been created yet</li>
+  <li>Optimize resources:
+  <ul><li>Obfuscation (for JavaScript)</li>
+  <li>Minification (for HTML, JavaScript, CSS, and PNG)</li></ul></li>
+  <li>Create the frame structure (for hybrid core applications).</li>
+  <li>Make up resources (for hybrid core, font, and UI framework applications).</li>
+  <li>Handle signing.</li></ol>
+  <p>Web application packaging process is based on the W3C packaging and configuration.</p>
+  <p>You can package a widget using the <span style="font-family: Courier New,Courier,monospace">web-packaging</span> command in the <a href="../../../org.tizen.devtools/html/web_tools/command_line_interface_w.htm">Command Line Interface (CLI)</a>, which is an IDE functional tool in the Tizen SDK:</p>
+  <pre class="prettyprint">web-packaging project.wgt project/</pre>
+
+  <p>The Tizen Web SDK provides the functionality to package a widget quickly in the required format and to set the package properties.</p>
+
+  <p>You can set the package properties in <strong>IDE &gt; Project &gt;  Properties &gt;  Tizen SDK &gt;  Package</strong> by selecting the resources to be included in the package. For a Web application, you can set the properties in <strong>IDE &gt; Project &gt; Properties &gt; Tizen SDK &gt; Package &gt; Web</strong>:</p>
+  <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> (in mobile applications only)</li></ul>
+
+  <p>By default, the widget package is created once. You can view the package content at any point of the application development process by double-clicking the project <span style="font-family: Courier New,Courier,monospace">.wgt</span> 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 class="figure">Figure: Viewing the widget package</p> 
+  <p style="text-align:center;"><img alt="Viewing the widget 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 widget</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 <a class="opensection" href="creating_app_project_w.htm#template">application templates in Hybrid and Companion Applications</a>.</p>
+
+  <h3 id="hybrid">Packaging Hybrid Applications in Mobile 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="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 <strong>Project Explorer</strong> view, right-click the Web UI application.</li>
+               <li>Select <strong>Properties &gt; Project References</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><a href="app_dev_process_w.htm#build">Build</a> and <a href="app_dev_process_w.htm#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="app_dev_process_n.htm#build">Building the Application</a>.</p></li>
+   </ol>
+   <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 <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> and <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a>, can be used in a hybrid application package.</p>
+   <p>For more information on hybrid applications and their package structure, see <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">HybridWebApp and HybridServiceApp</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> 
+  <ul>
+       <li>Upload your mobile Web application to the Tizen Store or  your wearable Web application to the Samsung Galaxy Apps Store for certification.
+               <p>After the application is uploaded, the application is signed as a certified application installer package and the <span style="font-family: Courier New,Courier,monospace">&lt;Application_name&gt;.wgt</span> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
+       </li>
+       <li>Check your application to the Tizen Store or Samsung Galaxy Apps Store for selling.
+               <p>The Tizen Store or Samsung Galaxy Apps Store checks whether your application functions properly.</p>
+       </li>
+  </ul>
+  <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> 
+  <ol>
+       <li>Update your application version, and if needed the privileges, in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file in the IDE.</li>
+       <li>Update the application code as needed.</li>
+       <li>If needed, update the privileges in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file in the IDE.</li>
+       <li>Build, test, and repackage the application.</li>
+       <li>Register the upgraded application on the Tizen Store or Samsung Galaxy Apps Store.</li>
+  </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> 
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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--> 
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/building_app_n.htm b/org.tizen.gettingstarted/html/process/building_app_n.htm
new file mode 100644 (file)
index 0000000..d97de51
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/building_app_n.htm
@@ -0,0 +1,198 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+                       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#build">Building the Application in the IDE</a></li>
+                       <li><a href="#prop">Build Properties</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Building Applications</h1> 
+
+  <p>In the Tizen IDE, 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 <span style="font-family: Courier New,Courier,monospace">Debug</span> 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 <span style="font-family: Courier New,Courier,monospace">Release</span> 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> 
+
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The Tizen IDE automatically switches application logging off in the release mode. To enable logging in the release mode:<p></p> 
+        <ol> 
+         <li>In the IDE menu, select <strong>Project &gt; Properties</strong>.</li> 
+         <li>In the <strong>Properties</strong> window, go to <strong>C/C++Build &gt; Settings &gt; C Complier &gt; Debugging</strong>.</li> 
+         <li>Select the <strong>Enable application logging</strong> check box.</li> 
+        </ol></td> 
+      </tr> 
+     </tbody> 
+    </table></li> 
+  </ul>
+
+<p>To set the target architecture:</p>
+        <ol> 
+         <li>In the IDE 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 IDE</h2> 
+  <p>To create an application project build:</p> 
+  <ol> 
+   <li><p>Select the build configuration: </p> 
+    <ol> 
+     <li><p>Right-click the project in the Tizen IDE <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 IDE menu, whenever you make any change to a source or resource and save the project, the IDE 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> 
+       <li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li> 
+       <li><p>In the IDE 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 IDE 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>.<p></p></li> 
+   <li>On the <strong>Platform</strong> tab, set the detailed target and tool information.
+    <ul> 
+     <li>Rootstrap Informations
+        <p>Shows the rootstrap-related information:</p>
+               <ul>
+               <li>Platform
+               <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></li>
+               <li>Name
+               <p>Set the rootstrap name.</p></li>
+               </ul></li>
+     <li>Toolchain Informations
+        <p>Shows the toolchain-related information:</p>
+        <ul>
+               <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></p> <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> 
+        <table class="note"> 
+         <tbody> 
+          <tr> 
+           <th class="note">Note</th> 
+          </tr> 
+          <tr> 
+           <td class="note"> <p>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.</p></td> 
+          </tr> 
+         </tbody> 
+        </table></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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/process/coding_app_w.htm b/org.tizen.gettingstarted/html/process/coding_app_w.htm
new file mode 100644 (file)
index 0000000..88f1307
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/coding_app_w.htm
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#hover">Using Hover Help</a></li>
+                       <li><a class="opensection" href="#add">Adding External Source Code or Library</a></li>
+               </ul>
+
+       </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 IDE supports hover help for Web API and W3C widgets. The hover help provides input from the <a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">API Reference</a>.</p> 
+  <p class="figure">Figure: Hover help</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">/js</span> and <span style="font-family: Courier New,Courier,monospace">/css</span> 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 <span style="font-family: Courier New,Courier,monospace">/css</span> 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> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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 opens, and allows you to either copy the file or create a link to it.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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--> 
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/creating_app_project_w.htm b/org.tizen.gettingstarted/html/process/creating_app_project_w.htm
new file mode 100644 (file)
index 0000000..72ea802
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/creating_app_project_w.htm
@@ -0,0 +1,203 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#import">Importing a Project</a></li>
+                       <li><a class="opensection" href="#export">Exporting a Project User Template</a></li>
+                       <li><a class="opensection" href="#template">Supported Templates and Samples</a></li>
+                       <li><a class="opensection" href="#user">User Template</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Creating the Application Project</h1> 
+  <p>You can create a Web application project by selecting from a variety of <a href="#template">templates and samples</a>. 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 IDE, select <strong>File &gt; New &gt; Tizen Web Project</strong>. <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you need.</p></li> 
+   <li>In the <strong>New Tizen Web Project</strong> window, define the project details: 
+    <ol> 
+     <li>Select the project type.</li> 
+     <li>Define the name of your project. <p>The default location for your application project is defined.</p> 
+      <table class="note"> 
+       <tbody> 
+        <tr> 
+         <th class="note">Note</th> 
+        </tr> 
+        <tr> 
+         <td class="note">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}.</td> 
+        </tr> 
+       </tbody> 
+      </table></li> 
+    </ol> </li> 
+   <li>Some templates allow you to customize some part of the project. <p>If the <strong>Next</strong> button is enabled, click it and customize the jQuery Mobile settings.</p></li> 
+   <li>Click <strong>Finish</strong>.</li> 
+  </ol> 
+  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders.</p> 
+ <p class="figure">Figure: Creating a Tizen mobile Web project</p> 
+ <p style="text-align:center;"><img alt="Creating a Tizen mobile Web project" src="../images/web_application_project.png" /></p>
+
+<p class="figure">Figure: Creating a Tizen wearable Web project</p> 
+<p style="text-align:center;"><img alt="Creating a Tizen wearable Web project" src="../images/wearable_web_application_project.png" /></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 IDE:</p> 
+  <ol> 
+   <li>Select <strong>File &gt; Import &gt; Tizen &gt; Web Projects and Widget file</strong>.</li> 
+   <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or widget file (with the <span style="font-family: Courier New,Courier,monospace">.wgt</span> extension). <p>After selecting the project, you can copy it into the workspace by selecting the <strong>Copy projects into workspace</strong> check box.</p></li> 
+   <li>Click <strong>Finish</strong>.</li> 
+  </ol> 
+  <h2 id="export" name="export">Exporting a Project User Template</h2> 
+  <p>To export an existing project as a <a href="#user">user template</a> that you can use as a basis for creating other projects:</p> 
+  <ol> 
+   <li>Select <strong>File &gt; Export &gt; Tizen &gt; Tizen User Template</strong>.</li> 
+   <li>In the <strong>User Template Export Wizard</strong> window, define the project and user template details: 
+    <ol> 
+     <li>Select the source project.</li> 
+     <li>Define the name of your user template.</li> 
+     <li>Click <strong>Browse</strong> and select the export location. <p>You can add the template to the <strong>User Template</strong> tab of the <strong>New Tizen Web Project</strong> window by selecting the <strong>Import a template to the new project wizard automatically</strong> check box. To select a template description, preview image, and icon files to be shown in the Project Wizard, click <strong>Next</strong>.</p></li> 
+    </ol> </li> 
+   <li>Click <strong>Finish</strong>.</li> 
+  </ol> 
+  
+   <h2 name="template" id="template">Supported Templates and Samples</h2> 
+  <p>You can create Tizen Web applications based on a variety of templates and samples. In addition to the predefined templates and samples, you can also <a href="#export">create your own user templates</a>.</p> 
+  <p>The following table lists the available templates for Tizen Web application development. For more information about the available samples, see <a href="https://developer.tizen.org/downloads/sample-applications" target="blank">Sample Applications</a>.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Templates 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Project type</th> 
+     <th>Application type</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>Basic</td> 
+     <td>Blank Application</td> 
+     <td>This is a Tizen blank application template.</td> 
+    </tr> 
+    <tr> 
+     <td>jQuery Mobile</td> 
+     <td> 
+      <ul> 
+       <li>Single Page Application</li> 
+       <li>Multi Page Application</li> 
+       <li>Master Detail Application</li> 
+       <li>Navigation Application</li> 
+      </ul></td> 
+     <td>These templates are based on <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a>. <p>You can alter the application page header, body, and footer based on the following color themes:</p> 
+      <ul> 
+       <li>A - Black</li> 
+       <li>B - Blue</li> 
+       <li>C - Grey</li> 
+       <li>D - Light grey</li> 
+       <li>E - Yellow</li> 
+      </ul> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <h2 name="user" id="user">User Template</h2> 
+  <p>You can <a href="#export">create custom user templates from existing projects</a> and then use these templates to create new projects. The created user templates are located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;/ide/user-templates/web</span> directory and a user-defined directory. When you create a user template, you can define the export location in the User Template Export Wizard.</p> 
+  <p class="figure">Figure: User template export location</p> 
+  <p style="text-align:center;"><img alt="User template export location" src="../images/user_template_export.png" /></p> 
+  
+  <p>The <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;</span> directory is different for different platforms:</p> 
+  <ul> 
+   <li>In Windows&reg; XP: <span style="font-family: Courier New,Courier,monospace">C:\tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">C:\tizen-wearable-sdk-data</span> (in wearable Web projects)</li> 
+   <li>In Windows&reg; 7: <span style="font-family: Courier New,Courier,monospace">C:\tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">C:\tizen-wearable-sdk-data</span> (in wearable Web projects)</li> 
+   <li>In Linux: <span style="font-family: Courier New,Courier,monospace">/home/${USER_NAME}/tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">/home/${USER_NAME}/tizen-wearable-sdk-data</span> (in wearable Web projects)</li> 
+
+  </ul> 
+  <p>The <span style="font-family: Courier New,Courier,monospace">project</span> folder of a user template consists of project-related files that are copied into new projects created using the user template. You can modify these files in your new project.</p> 
+  <p>The following table describes the files included in a user template in addition to the <span style="font-family: Courier New,Courier,monospace">project</span> folder content.</p> 
+  <table border="1"> 
+   <caption>
+     Table: User template files 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>File</th> 
+     <th>Contents</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">description.xml</span></td> 
+     <td><p>This file consists of the following template description information that is displayed in the Project Wizard:</p> 
+      <ul> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;SampleName&gt;</span> tag: Project type name. Several project types can be created using the same user template.</li> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;SampleVersion&gt;</span> tag: Project type version.</li> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;Preview&gt;</span> tag: Preview file name.</li> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;Description&gt;</span> tag: Description title.</li> 
+      </ul></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tizen-app-template.xml</span></td> 
+     <td><p>This file consists of the following template definition information that is displayed in the Project Wizard:</p> 
+      <ul> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;template-name&gt;</span> tag: User template name.</li> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;widget-type&gt;</span> tag: Widget type, which is set as <span style="font-family: Courier New,Courier,monospace">TIZEN</span> by default.</li> 
+       <li><span style="font-family: Courier New,Courier,monospace">&lt;description-file-name&gt;</span> tag: Description file name, which is set as <span style="font-family: Courier New,Courier,monospace">description.xml</span> by default.</li> 
+       <li><span style="font-family: Courier New,Courier,monospace">icon64</span> and <span style="font-family: Courier New,Courier,monospace">icon32</span> attributes: Icon image file name. The number suffixes refer to the icon size.</li> 
+      </ul></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>To create a new user template from an existing user template (instead of an exporting the template from an existing project):</p> 
+  <ol> 
+   <li>Copy and rename the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;/ide/user-templates/web</span> folder. <p>The folder contains a default template layout.</p></li> 
+   <li>Edit the files within the new folder, or add new files (such as snapshot or icon images and JavaScript and CSS files), as needed.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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--> 
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/debugging_app_n.htm b/org.tizen.gettingstarted/html/process/debugging_app_n.htm
new file mode 100644 (file)
index 0000000..9a73e55
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/debugging_app_n.htm
@@ -0,0 +1,447 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#debug">Debug View</a></li>
+                       <li><a href="#methods">Application Debugging Methods</a></li>
+                       <li><a href="#remote">Remote Debugging</a></li>
+                       <li><a href="#logs">Debugging with Logs</a></li>
+                       <li><a href="#break">Break Points</a></li>
+                       <li><a href="#watch">Watch Points</a></li>
+                       <li><a href="#emulator">Debugging Applications on the Emulator</a></li>
+               </ul>
+       </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 IDE, 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> and <a href="#watch">watch 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 IDE 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> 
+  <table> 
+   <caption>
+     Table: Debug view control buttons 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Button</th> 
+     <th>Shortcut key</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 IDE 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 IDE 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> 
+  <p>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 - Attach</strong>.</p> <p>The <strong>Select Process</strong> window shows the list of processes currently running on the target system.</p> </li> 
+   <li><p>Select the process to which you want to attach the debugger, and click <strong>OK</strong>.</p> <p>Debugging starts.</p> <p>Note that if you type the name of the application in the text field shown on the upper part on the window, all processes matching the application are listed in the lower part.</p> </li> 
+  </ol> 
+ <h2 name="remote" id="remote">Remote Debugging</h2> 
+  <p>The Tizen SDK 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 class="figure">Figure: Remote debugging</p> 
+  <p><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 IDE supports the UI and control of the debugging process. The following figure shows the control flow of the remote debugging process.</p> 
+  <p class="figure">Figure: Remote debugging control flow</p> 
+  <p><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 (<span style="font-family: Courier New,Courier,monospace;">EINA_LOG</span>) for logging information. It has the following levels:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_CRITICAL = 0</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_ERR = 1</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_WARN = 2</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_INFO = 3</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVEL_DBG = 4</span></li>
+</ul>
+
+<p>Execute the application using one of the following commands:</p>
+<pre class="prettyprint">
+EINA_LOG_LEVEL=1 ./sample
+// OR
+export EINA_LOG_LEVEL=1
+</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">EINA_LOG_LEVELS=elementary:1,evas:4</span> parameters to see the logs domain by domain, and change the log level using <span style="font-family: Courier New,Courier,monospace;">EINA_LOG_ABORT_LEVEL</span>.</p>
+<p>To terminate the application when <span style="font-family: Courier New,Courier,monospace;">EINA_LOG</span> is shown, use <span style="font-family: Courier New,Courier,monospace;">EINA_LOG_ABORT=1</span>.</p>
+
+<h3>Already Deleted Parameter Log</h3>
+<p>The following log is shown when the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function is used and the pointer address is deleted again.</p>
+<p>When you use <span style="font-family: Courier New,Courier,monospace;">ecore_timer</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator</span>, and <span style="font-family: Courier New,Courier,monospace;">ecore_idler</span>, you can often see this log.</p>
+
+<pre class="prettyprint">
+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:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
+*** SPANK SPANK SPANK!!!
+*** Now go fix your code. Tut tut tut!
+</pre>
+
+<p>To fix the problem:</p>
+
+<ol><li><p>Make a new <span style="font-family: Courier New,Courier,monospace;">ecore_idler</span> and save the pointer address to <span style="font-family: Courier New,Courier,monospace;">myidler</span>:</p>
+
+<pre class="prettyprint">Ecore_Idler *myidler = ecore_idler_add(_idler_cb, data);</pre></li>
+
+<li><p>Define the idler callback. When it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the <span style="font-family: Courier New,Courier,monospace;">ecore_idler</span> is deleted. The pointer address in <span style="font-family: Courier New,Courier,monospace;">myidler</span> is not deleted. So you add <span style="font-family: Courier New,Courier,monospace;">myidler = NULL</span>:</p>
+<pre class="prettyprint">
+static Eina_Bool
+_idler_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;myidler = NULL; 
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+</pre>
+<p>Similarly, if you use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function, add <span style="font-family: Courier New,Courier,monospace;">myidler = NULL</span>:</p>
+<pre class="prettyprint">
+if (myidler)
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_idler_del(myidler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myidler = NULL;
+}
+</pre></li></ol>
+
+<h3>Parameter Logs</h3>
+<p>The following log is shown when the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> parameter is of the wrong type:</p>
+<pre class="prettyprint">
+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:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
+*** SPANK SPANK SPANK!!!
+*** Now go fix your code. Tut tut tut!
+</pre>
+
+
+<h3>Part Name Logs</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">elm_object_part_content_set()</span> 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);
+</pre>
+<p>The following log is shown when the <span style="font-family: Courier New,Courier,monospace;">hahaha</span> swallow part does not exist:</p>
+<pre class="prettyprint">
+ERR&lt;6919&gt;:elementary elm_layout.c:969 _elm_layout_elm_container_content_set() could not swallow 0x80000005a000002e into part 'hahaha'
+</pre>
+
+<h3>Premultiplied Color Log</h3>
+<p>Evas supports a premultiplied color, where the RGB color values must be less than the alpha value:</p>
+
+<pre class="prettyprint">evas_object_color_set(rect, 255, 0, 0, 100);</pre>
+<p>If you write the above code, the following ERR log is shown:</p>
+
+<pre class="prettyprint">ERR&lt;4639&gt;:evas_main lib/evas/canvas/evas_object_main.c:1313 _evas_object_color_set() Evas only handles pre multiplied colors!</pre>
+
+<h3>EDC Logs</h3>
+<p>The following examples are common mistakes when writing EDC:</p>
+
+<ul><li>
+<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;}
+}
+</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
+</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;}
+}
+</pre>
+
+<p>Part1 is calculated by part2 and part1 is of the minimum size, (100, 100). But the size of part2 is no bigger than 50. So edje has no idea how to calculate part1. Use <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1;</span> on part1 for the correct calculation to fix the problem:</p>
+
+<pre class="prettyprint">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> 
+<!--
+  <p class="figure">Figure: Setting break points</p> 
+  <p style="text-align:center;"><img align="center" alt="Setting break points" src="../images/breakpoint_set.png" /></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> 
+  <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> 
+  <p>To edit the properties:</p> 
+  <ol> 
+   <li>Right-click in the marker bar area and select <strong>Breakpoint Properties</strong>.</li> 
+   <li>To define actions, select <strong>Actions</strong> in the left side menu.</li> 
+   <li>Click <strong>New</strong> and select an action type. The available action types are: 
+    <ul> 
+     <li>Sound Action <p>You can make sound when the break point stops.</p> </li> 
+     <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></li> 
+   <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> 
+  
+  <h2 name="watch" id="watch">Watch Points</h2> 
+  <p>A watch point suspends the execution of a program at the location where the expression is read or written.</p> 
+  <p>To add a watch point:</p> 
+  <ol> 
+   <li>In the <strong>Variables</strong>, <strong>Outline</strong>, or <a href="#expressions">Expressions</a> view, right-click a variable, and select <strong>Add Watchpoint (C/C++)</strong>.</li> 
+   <li>Define the details and click <strong>OK</strong>.</li> 
+  </ol> 
+  <p class="figure">Figure: Watch point details</p> 
+  <p><img alt="Watch point details" src="../images/watchpoint_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></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 class="figure">Figure: Expressions view</p> 
+  <p style="text-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.devtools/html/common_tools/emulator.htm">
+       Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p> 
+  <p>To debug your application on the Emulator:</p> 
+  <ol> 
+   <li>Start the Emulator in the <strong>Connections</strong> view.<p></p></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 IDE menu, go to <strong>Debug &gt; Debug As &gt; Tizen native Application</strong>.</li> 
+     <li>On the Tizen IDE 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 IDE&#39;s <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>Debugger</strong> tab, select <strong>Verbose console mode</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> 
+       <p>While the application is running, the IDE&#39;s 
+               <a href="../../../org.tizen.devtools/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 IDE, 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.devtools/html/common_tools/emulator.htm#ecp">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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/designing_app_ui_n.htm b/org.tizen.gettingstarted/html/process/designing_app_ui_n.htm
new file mode 100644 (file)
index 0000000..d01de34
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/designing_app_ui_n.htm
@@ -0,0 +1,227 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application UIs with UI Builder</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#project">Creating a UI Builder Project</a></li>   
+                       <li><a href="#layout">Creating and Designing Page Layouts</a></li>
+                       <li><a href="#event">Handling Events and Testing</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Creating Application UIs with UI Builder</h1>   
+  <p>Tizen provides a WYSIWYG (What You See Is What You Get) <a href="../../../org.tizen.devtools/html/native_tools/uibuilder_n.htm">UI Builder</a> tool in the IDE for creating application UIs. The UI Builder includes the following features:</p> 
+  <ul> 
+   <li><a href="#project">Creating a UI Builder project</a></li> 
+   <li><a href="#layout">Creating and designing page layouts</a></li> 
+   <li><a href="#event">Handling events and testing</a></li>    
+  </ul>
+
+<h2 name="project" id="project">Creating a UI Builder Project</h2> 
+  <p>A UI Builder project creates the source code and required files and folders in the IDE workspace for building a Tizen native application using the UI Builder. You can use the UI Builder to create and modify the page layout using a graphical user interface.</p>
+<p>To create a native UI Builder project:</p>
+<ol>
+       <li>In the IDE, select <strong>File &gt; New &gt; Tizen Native Project</strong>.
+       <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Native UI Builder). To switch perspectives, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you need.</p>
+       </li>
+       <li>In the <strong>New Tizen Native Project</strong> window, select the <strong>Template</strong> tab and define the project details:
+
+       <ul>
+               <li>Select the <strong>Tizen Native UI Builder</strong> project type.</li>
+               <li>Define the name for your project.
+                       <table class="note">
+       <tbody>
+       <tr>
+       <th class="note">Note</th>
+       </tr>
+       <tr>
+       <td class="note">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-z OR A-Z][a-z OR A-Z OR 0-9]{2,49}.</td>
+       </tr>
+       </tbody>
+       </table>
+               <p>The default location for your application project is defined.</p>
+               </li>
+       </ul>
+       </li>
+       <li>Click <strong>Finish</strong>.</li>
+</ol>
+<p>The new application project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">app.xml</span> file as well as in <a href="#structure">several project folders</a>.</p>
+
+
+<h3 name="structure" id="structure">Structure of a UI Builder Project</h3> 
+
+<p>The following figure illustrates the default project folder structure for Tizen UI Builder applications.</p>
+<p class="figure">Figure: Default project folder structure</p>
+<p style="text-align:center;"><img alt="Default project folder structure" src="../images/nuib_soubp_project_explorer.png" width="372" height="629" /></p>
+<p>The following table describes the content of the default project folders.</p>
+<table border="1">
+ <caption>
+     Table: Default project folder content
+   </caption> 
+<tbody>
+<tr>
+<th>File or folder</th>
+<th>Content</th>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_includes.png" width="23" height="19" /><span>includes</span></td>
+<td>Native UI framework</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>res</span></td>
+<td>Icons or images</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>src</span></td>
+<td>Application source files</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>layout</span></td>
+<td>Layout folder</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>lib</span></td>
+<td>Library folder</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>shared</span></td>
+<td>Shared folder</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>res</span></td>
+<td>Resource folder of the Tizen IDE</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_layout_tuml.png" width="15" height="16" /><span>layout.tuml</span></td>
+<td>Layout meta file (tuml: Tizen UI Markup Language)</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_tizen_icon.png" width="19" height="17" /><span>nativeuibuilder</span></td>
+<td>Application icon file</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_app_xml.png" width="16" height="19" /><span>app.xml</span></td>
+<td>Application information file</td>
+</tr>
+<tr>
+<td><img alt="Default project folder structure" src="../images/nuib_soubp_tizen_manifest_xml.png" width="16" height="18" /><span>tizen-manifest.xml</span></td>
+<td>Manifest XML file of the Tizen IDE</td>
+</tr>
+</tbody>
+</table>
+  
+<h2 name="layout" id="layout">Creating and Designing Page Layouts</h2> 
+
+<p>You can create and design native <a href="../../../org.tizen.devtools/html/native_tools/uibuilder_n.htm">UI Builder</a> application pages in the <strong>WYSIWYG Editor </strong>view.</p>
+
+<h3 id="create" name="create">Creating a New Native UI Builder Application View</h3>
+
+<p>You can create multiple views for a native UI Builder application. To add a new view:</p>
+<ol>
+       <li>In the IDE, select <strong>File &gt; New &gt; Project</strong>.</li>
+       <li>In the <strong>New</strong> window, select <strong>Tizen Native Project</strong> and click <strong>Next</strong>.</li>
+       <li>Select <strong>UI Builder Application &gt; Empty Application</strong>.</li>
+       <li>Enter the new project name in the <strong>Project Name</strong> field.</li>
+       <li>Click <strong>Finish</strong>.
+       <p>The new project appears in the <strong>Project Explorer</strong> view.</p>
+       </li>
+</ol>
+<h3 id="design" name="design">Using the WYSIWYG Editor View</h3>
+
+<p>You can configure the design area of the <strong>WYSIWYG Editor</strong> view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to the available screen space.</p>
+<p>You can add a UI widget in the <strong>WYSIWYG Editor</strong> view and set its properties:</p>
+<ol>
+<li>In the <strong>Project Explorer</strong> view, double-click the <strong>layout.tuml</strong> file to which you want to add widgets.
+<p>A design area is displayed in the <strong>WYSIWYG Editor </strong>view.</p>
+</li>
+<li>Drag the widget from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view.
+<p style="text-align:center;"><img alt="Designing page layout" src="../images/nuib_cadvl_wysiwyg_editor.png" width="696" height="688" /></p>
+</li>
+<li>Select the widget in the <strong>WYSIWYG Editor</strong> or <strong>Outline</strong> view.</li>
+<li>In the <strong>Properties</strong> view, set the widget properties.</li>
+</ol>
+<p>You can move the widgets around in the <strong>WYSIWYG Editor</strong>.</p>
+
+<h3 id="widget" name="widget">Placing Widgets</h3>
+<p>You can place a variety of widgets in the <strong>WYSIWYG Editor </strong>view.</p>
+<p>To place a widget, drag the widget from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view. The next empty position in the <strong>WYSIWYG Editor</strong> view is marked with a dotted rectangle.</p>
+<p>You can add child widgets in a container, such as a Table. For example, you can add a set of Image widgets in a Table container widget. When adding the Image widget, some areas in the Table container change to the blue color, which implies that the widget can be placed.</p>
+
+  
+  
+<h2 name="event" id="event">Handling Events and Testing</h2> 
+ <p>You can select a UI widget from the design area of the <strong>WYSIWYG Editor</strong> view and add event handlers to it.</p>
+<p>To add an event handler to a selected widget:</p>
+<ol>
+<li>In the <strong>Properties</strong> view, select the <strong>Event</strong> sub-tab.</li>
+<li>In the list, select the event to which you want to add an event handler.</li>
+<li>If you want to add a <strong>click event</strong>, click the <strong>+</strong> button on the right side of the <strong>clicked</strong> label.</li>
+<li>Click the right arrow on the right side of Combo.<br />
+       The UI Builder generates a skeleton code for the event handler, and the event handler for the selected event is displayed.</li>
+<li>Enter the application-specific event handler-related code.</li>
+<li>Press <strong>Ctrl+s</strong>.<br />
+       The Tizen native application is rendered as it is on the Emulator (target).</li>
+</ol>
+<p>All widgets have their own unique ID in a specific view, and you can access the widgets in the event handler code using the ID. You can view and edit the widget ID in the <strong>Outline</strong> view.</p>
+<p>For example, if your view (with the <span style="font-family: Courier New,Courier,monospace">view1</span> ID) has a button (with the <span style="font-family: Courier New,Courier,monospace">button1</span> ID), you can create an event handler for the button tap that changes the heading text:</p>
+<pre class="prettyprint">
+void view1_button1_onclicked(uib_view1_view_context *vc, Evas_object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(vc-&gt;button1, &quot;Hello button1&quot;);
+}
+</pre>
+
+<h3 id="test" name="test">Testing a UI Builder Project</h3>
+<p>To test the UI Builder project:</p>
+<ol>
+<li>Select the project in the <strong>Project Explorer</strong> view.</li>
+<li>In the IDE menu, select <strong>Run &gt; Run as &gt; Tizen Native Application</strong> to test the project on the Emulator or target device.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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--> 
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/designing_app_ui_w.htm b/org.tizen.gettingstarted/html/process/designing_app_ui_w.htm
new file mode 100644 (file)
index 0000000..0820768
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/designing_app_ui_w.htm
@@ -0,0 +1,572 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application UIs with UI Builder</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#project">Creating a UI Builder Project</a></li>
+                       <li><a href="#layout">Creating and Designing Page Layouts</a></li>
+                       <li><a href="#event">Handling Events and Testing</a></li>
+                       <li><a href="#migration">Migrating UI Builder Projects</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Creating Application UIs with UI Builder</h1>   
+  <p>Tizen provides a WYSIWYG (What You See Is What You Get) <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a> tool in the IDE for creating application UIs. The UI Builder includes the following features:</p> 
+  <ul> 
+   <li><a href="#project">Creating a UI Builder project</a></li> 
+   <li><a href="#layout">Creating and designing page layouts</a></li> 
+   <li><a href="#event">Handling events and testing</a></li> 
+   <li><a href="#migration">Migrating UI Builder projects</a></li>    
+  </ul>
+
+<h2 name="project" id="project">Creating a UI Builder Project</h2> 
+  <p>A UI Builder project creates source code and required files and folders in the IDE workspace for building a Tizen Web application using the UI Builder. You can use the UI Builder to create and modify the page layout using a graphical user interface. The project uses the <a href="#frame">Web UI Builder framework</a> as a guide for the programming model.</p> 
+  <p>To create a Web UI Builder project:</p> 
+  <ol> 
+   <li>In the IDE, select <strong>File &gt; New &gt; Tizen Web Project</strong>. <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you need.</p></li> 
+   <li>In the <strong>New Tizen Web Project</strong> window, select the <strong>Template</strong> tab and define the project details: 
+    <ol> 
+     <li>Select the <strong>Tizen Web UI Builder</strong> project type.</li> 
+     <li>Define the name of your project. <p>The default location for your application project is defined.</p>
+     <table class="note"> 
+      <tbody> 
+       <tr> 
+        <th class="note">Note</th> 
+       </tr> 
+       <tr> 
+        <td class="note">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-z OR A-Z][a-z OR A-Z OR 0-9]{2,49}.</td> 
+       </tr> 
+      </tbody> 
+     </table> </li> 
+    </ol> </li> 
+   <li>Click <strong>Finish</strong>.</li> 
+  </ol> 
+  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in <a href="#structure">several project folders</a>.</p>
+
+<h3 name="frame" id="frame">UI Builder Framework</h3> 
+  <p>The Tizen Web UI Builder framework consists of a set of managed code as a guide for the programming model using event handlers.</p> 
+  <p>An application consists of pages and the transition between pages. A page is a set of widgets and event handlers. To develop each element of an application, the Web UI Builder provides several components.</p> 
+  <p class="figure">Figure: Relationship between application elements and UI Builder components</p> 
+  <p style="text-align:center;"><img alt="Relationship between application elements and UI Builder components" src="../images/uibuilder_components.png" /></p> 
+  <p>The Web UI Builder framework provides the following abstract objects to handle the events of application, pages and widgets:</p> 
+  <ul> 
+   <li><a href="#app">App Object</a></li> 
+   <li><a href="#page">Page Object</a></li> 
+  </ul>
+  
+<h3 name="app" id="app">App Object</h3> 
+  <p>The app object is an abstraction of the application. It contains the runtime information and event handler of the application life-cycle.</p> 
+  <p>The app object is declared in the <span style="font-family: Courier New,Courier,monospace">page-system.js</span> file. As the app object is a global object, it is accessible in every JavaScript file.</p> 
+  <pre class="prettyprint">/* page-system.js */
+window.app = new _app();</pre> 
+  <p>When the application is running, the app object always exists and has a valid value. The following tables list the available member objects and event handlers.</p> 
+  <table border="1"> 
+   <caption>
+     Table: App objects 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Method</th> 
+     <th>Description</th> 
+     <th>Example</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">setCurrentPageId()</span></td> 
+     <td>Sets the current page ID</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.setCurrentPageId(&quot;page1&quot;);</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">getCurrentPageId()</span></td> 
+     <td>Returns the current page ID</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.getCurrentPageId();</span></td> 
+    </tr>  
+   </tbody> 
+  </table> 
+  <table border="1"> 
+   <caption>
+     Table: Event handlers 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Handler</th> 
+     <th>Reference</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">load</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onload</span></td> 
+     <td>When the document is ready</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">unload</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onunload</span></td> 
+     <td>When the window is unloaded</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">show</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onshow</span></td> 
+     <td>When the window is shown</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">hide</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onhide</span></td> 
+     <td>When the window is hidden</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagebeforechange</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onpagebeforechange</span></td> 
+     <td>Before switching from the current page</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagechange</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onpagechange</span></td> 
+     <td>After switching from the current page to the new page</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagechangefailed</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onpagechangefailed</span></td>
+     <td>When the page switching fails</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagebeforeload</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onpagebeforeload</span></td> 
+     <td>Before an external page is loaded</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pageload</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">app.onpageload</span></td>  
+     <td>After an external page is loaded</td> 
+    </tr>
+       
+   </tbody> 
+  </table> 
+  <p>The prototype of the event handler is declared in the <span style="font-family: Courier New,Courier,monospace">app.js</span> file.</p> 
+  <pre class="prettyprint">
+app.onload = function() 
+{
+&nbsp;&nbsp;&nbsp;/* App initialization */
+&nbsp;&nbsp;&nbsp;console.log(&quot;loaded&quot;);     
+};
+
+app.onunload = function() 
+{
+&nbsp;&nbsp;&nbsp;/* App termination */
+&nbsp;&nbsp;&nbsp;console.log(&quot;unloaded&quot;);
+};
+
+app.onshow = function() 
+{
+&nbsp;&nbsp;&nbsp;/* App is shown */
+&nbsp;&nbsp;&nbsp;console.log(&quot;shown&quot;);
+};
+
+app.onhide = function() 
+{
+&nbsp;&nbsp;&nbsp;/* App is hidden */
+&nbsp;&nbsp;&nbsp;console.log(&quot;hidden&quot;);
+};
+
+app.onpagebeforechange= function() 
+{
+&nbsp;&nbsp;&nbsp;/* Before switching from the current page */
+&nbsp;&nbsp;&nbsp;console.log(&quot;onpagebeforechange &quot;);
+};
+
+app.onpagechange = function() 
+{
+&nbsp;&nbsp;&nbsp;/* After switching from the current page to the new page */
+&nbsp;&nbsp;&nbsp;console.log(&quot;onpagechange &quot;);
+};
+
+app.onpagechangefailed = function() 
+{
+&nbsp;&nbsp;&nbsp;/* When the page switching fails */
+&nbsp;&nbsp;&nbsp;console.log(&quot;onpagechangefailed &quot;);
+};
+
+app.onpagebeforeload = function() 
+{
+&nbsp;&nbsp;&nbsp;/* Before an external page is loaded */
+&nbsp;&nbsp;&nbsp;console.log(&quot;onpagebeforeload &quot;);
+};
+
+app.onpageload = function() 
+{
+&nbsp;&nbsp;&nbsp;/* After an external page is loaded */
+&nbsp;&nbsp;&nbsp;console.log(&quot;onpageload &quot;);
+};
+</pre>
+
+<h3 name="page" id="page">Page Object</h3> 
+  <p>The page object is an abstraction object of each page. It contains the layout information of the widget and the event handler of the page or widget event.</p> 
+  <p>In the event handler of pages or widgets, you can access the corresponding page object using the <span style="font-family: Courier New,Courier,monospace">this</span> keyword.</p> 
+  <pre class="prettyprint">/* index.js */
+page1_page.prototype.onpageinit = function(event) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;HTML: &#39; + this.pageID);
+};
+
+page1_page.prototype.button1_ontap = function(event) 
+{
+&nbsp;&nbsp;&nbsp;this.headingone1.innerText = &#39;Hello World!&#39;;
+};
+</pre> 
+  <p class="figure">Figure: Page object</p> 
+  <p style="text-align:center;"><img alt="Page object" src="../images/page_object.png" /></p> 
+  <p>The page object exists when a page is being loaded, and has a valid value only when the page is shown. You cannot access the event handler in other pages. The following table lists the available member objects.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Page member objects 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Member</th> 
+     <th>Type</th> 
+     <th>Description</th> 
+     <th>Value</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pageID</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td> 
+     <td>Page ID</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">&quot;page1&quot;</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">obj</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">HTML element</span></td> 
+     <td>HTML element of page</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;div data-role=&quot;page&quot; id=&quot;page1&quot;&gt;...&lt;/div&gt;</span></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tauObj</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">object</span></td> 
+     <td>Advanced page object</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{id: &quot;page1&quot;, name: &quot;Page&quot;, namespace: &quot;mobile&quot;, widgetName: &quot;page&quot;, ...}</span></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>You can access the widget of the page as a member variable of the page object.</p> 
+  <pre class="prettyprint">/* index.js */
+page1_page.prototype.button1_ontap = function(event)
+{
+&nbsp;&nbsp;&nbsp;this.headingone1.innerText = &#39;Hello World!&#39;; 
+};
+</pre> 
+  <p class="figure">Figure: Widget object</p> 
+  <p style="text-align:center;"><img alt="Widget object" src="../images/widget_object.png" /></p> 
+  <p>The following table lists the available events of the page.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Page events 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Handler</th> 
+     <th>Occurred time</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagebeforecreate</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagebeforecreate</span></td> 
+     <td>Before the page is initialized</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagecreate</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagecreate</span></td> 
+     <td>After the page is added to DOM</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pageinit</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpageinit</span></td> 
+     <td>After the page is initialized</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagebeforehide</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagebeforehide</span></td> 
+     <td>Before the page is hidden</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagehide</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagehide</span></td> 
+     <td>After the page is hidden</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pagebeforeshow</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagebeforeshow</span></td> 
+     <td>Before the page is shown</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pageshow</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpageshow</span></td> 
+     <td>After the page is shown</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">pageremove</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpageremove</span></td> 
+     <td>Before the page is removed from DOM</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The following figure describes the sequence of events and the life-cycle of pages when there is a page transition. Currently, this also applies to the JQM page transition scheme.</p> 
+  <p class="figure">Figure: Page event sequence</p> 
+  <p style="text-align:center;"><img alt="Page event sequence" src="../images/page_event_sequence.png" /></p> 
+  <p>You can add a page event handler using the <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a>.</p> 
+  <p class="figure">Figure: Page event handler</p> 
+  <p style="text-align:center;"><img alt="Page event handler" src="../images/page_event_handler.png" /></p> 
+  <p class="figure">Figure: Page event handler code</p> 
+  <p style="text-align:center;"><img alt="Page event handler code" src="../images/page_event_handler2.png" /></p> 
+  <p>Every widget has some event of its own. The following table list the events of button widgets.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Button widget events 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Handler</th> 
+    </tr> 
+    <tr> 
+     <td>Tap</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_ontap</span></td> 
+    </tr> 
+    <tr> 
+     <td>Tap hold</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_ontaphold</span></td> 
+    </tr> 
+    <tr> 
+     <td>Swipe</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_onswipe</span></td> 
+    </tr> 
+    <tr> 
+     <td>Swipe left</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_onswipeleft</span></td> 
+    </tr> 
+    <tr> 
+     <td>Swipe right</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_onswiperight</span></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h3 name="structure" id="structure">Structure of a UI Builder Project</h3> 
+  <p>The following figure illustrates the default project folder structure for Tizen UI Builder applications.</p> 
+  <p class="figure">Figure: Default project folder structure</p> 
+  <p style="text-align:center;"><img alt="Default project folder structure" src="../images/uibuilder_files_folders.png" /></p> 
+  <p>The following table describes the contents of the default project folders.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Default project folder contents 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>File or folder</th> 
+     <th>Content</th> 
+    </tr> 
+    <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">lib</span></td> 
+     <td>UI framework</td> 
+    </tr>
+       <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">res</span></td> 
+     <td>Icons</td> 
+    </tr>
+       <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">tizen-ui-builder-fw</span></td> 
+     <td>UI Builder framework</td> 
+    </tr>
+       <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">tizen-ui-builder-tool</span></td> 
+     <td>UI Builder Tool framework</td> 
+    </tr>
+       <tr>
+         <td><img alt="Default project folder structure" src="../images/uibuilder_xml.png" /><span style="font-family: Courier New,Courier,monospace">config.xml</span></td> 
+     <td>Tizen Web application configuration file</td> 
+    </tr>
+       <tr>
+         <td><img alt="Default project folder structure" src="../images/uibuilder_indexxml.png" /><span style="font-family: Courier New,Courier,monospace">index.config.xml</span></td> 
+     <td>UI Builder project configuration file</td> 
+    </tr>      
+       <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_html.png" /><span style="font-family: Courier New,Courier,monospace">index.html</span></td> 
+     <td>Application master HTML file</td> 
+    </tr>
+         <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_js.png" /><span style="font-family: Courier New,Courier,monospace">index.js</span></td> 
+     <td>Application, page, and widgets event handler file</td> 
+    </tr> 
+    <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_css.png" /><span style="font-family: Courier New,Courier,monospace">index.managed.css</span></td> 
+     <td>Automatically generated file for multi screen</td> 
+    </tr> 
+    <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_js.png" /><span style="font-family: Courier New,Courier,monospace">index.managed.js</span></td> 
+     <td>Automatically generated file for app and page initialization</td> 
+    </tr> 
+       <tr> 
+     <td><img alt="Default project folder structure" src="../images/uibuilder_css.png" /><span style="font-family: Courier New,Courier,monospace">page1_common.css</span></td> 
+     <td>Automatically generated page style file</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h2 name="layout" id="layout">Creating and Designing Page Layouts</h2> 
+  <p>You can create and design Web <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a> application pages in the <strong>Page Designer</strong> view.</p> 
+  <h3 id="newpage" name="newpage">Creating a New Web UI Builder Application Page</h3> 
+  <p>You can create multiple pages for a Web UI Builder application. To add a new page:</p> 
+  <ol> 
+   <li>In the IDE, select <strong>File &gt; New &gt; Other</strong>.</li> 
+   <li>In the <strong>New</strong> window, select <strong>Tizen &gt; Tizen Web UI Builder Page</strong> and click <strong>Next</strong>.</li> 
+   <li>Select a project to be added and click <strong>Next</strong>.</li> 
+   <li>Select a page template and enter the new page ID.</li>
+   <li>Click <strong>Finish</strong>. <p>The new page appears in the <strong>Page Designer</strong> view.</p></li> 
+  </ol> 
+  <h3 id="design" name="design">Using the Page Designer View</h3> 
+  <p>You can configure the design area in the <strong>Page Designer</strong> view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to available screen space.</p> 
+  <p>You can add a UI widget in the <strong>Page Designer</strong> view and set its properties:</p> 
+  <ol> 
+   <li>In the <strong>Project Explorer</strong> view, double-click the page file to which you want to add widgets. <p>The page file displays a design area in the <strong>Page Designer</strong> view.</p></li> 
+   <li>Drag the widget from the <strong>Palette</strong> area to the design area. <p style="text-align:center;"><img alt="Designing page layout" src="../images/design_page_layout.png" /></p></li> 
+   <li>Select the widget in the design area or in the <strong>Outline</strong> view.</li> 
+   <li>In the <strong>Properties</strong> view, set the widget properties.</li> 
+  </ol> 
+  <p>You can move the widgets around in the design area.</p> 
+  <h3 id="widget" name="widget">Placing Widgets</h3> 
+  <p>You can place a variety of widgets in the <strong>Page Designer</strong>.</p> 
+  <p>To place a widget, drag the widget from the <strong>Palette</strong> area to the design area. The next empty position in the design area is marked with a dotted rectangle. The parent widget or content object is blue in color.</p> 
+  <p>You can add child widgets in a container, such as a <strong>List</strong>. For example, you can add a set of <strong>ListItem</strong> widgets in a <strong>List</strong> container widget. If the design area <strong>List</strong> container widget does not contain any <strong>ListItem</strong> widgets, the <strong>List</strong> widget displays a &quot;Drop a List Item&quot; message.</p> 
+  <p>You can only add widgets of a fixed type in container widgets. For example, you can add a <strong>ListItem</strong> widget only to a <strong>List</strong> widget. If you try to add a <strong>ListItem</strong> widget to a wrong widget, the design area changes to red color, which implies that the widget cannot be placed. If you add the widget to the correct container widget, the design area changes to blue color, which implies that the widget can be placed.</p>
+  
+<h2 name="event" id="event">Handling Events and Testing</h2> 
+  <p>You can select a UI widget from the design area of the <strong>Page Designer</strong> view and add event handlers for it.</p> 
+  <p>To add an event handler for the selected widget:</p> 
+  <ol> 
+   <li>In the <strong>Properties</strong> view, select the <strong>Event</strong> sub-tab.</li>
+   <li>Click the <strong>+</strong> button on the right side of the <strong>Tap</strong> label.</li>
+   <li>Click the combo on the right side of <strong>Action</strong>.</li>
+   <li>In the <strong>Add</strong> drop-down list, select the event to which you want to add an event handler. <p>The event handler for the selected event is displayed.</p></li> 
+   <li>Define a name for the event handler, and click the play button next to it. <p>The UI Builder generates a skeleton code for the event handler.</p></li> 
+   <li>Enter the application-specific event handler-related code.</li> 
+  </ol> 
+  <p>All widgets have their own unique ID in a specific page, and you can access the widgets in the event handler code using the ID. You can view and edit the widget ID in the <strong>Outline</strong> view. </p> 
+  <p>For example, if your page has a button (with the <span style="font-family: Courier New,Courier,monospace">button1</span> ID) and a heading (with the <span style="font-family: Courier New,Courier,monospace">heading1</span> ID), you can create an event handler for the button tap that changes the heading text:</p> 
+  <pre class="prettyprint">
+page1.button1_tap = function(event) 
+{ 
+&nbsp;&nbsp;&nbsp;this.heading1.text(&quot;Hello World!&quot;);
+};
+</pre> 
+  <h3 id="test" name="test">Testing a UI Builder Project</h3> 
+  <p>To test the UI Builder project:</p> 
+  <ol> 
+   <li>Select the project in the <strong>Project Explorer</strong> view.</li> 
+   <li>In the IDE menu, select one of the following: 
+    <ul> 
+     <li><strong>Run &gt; Run as &gt; Tizen Web Application</strong> to test the project on the Emulator or target device.</li> 
+     <li><strong>Run &gt; Run as &gt; Tizen Web Simulator Application</strong> to test the project on the Web Simulator.</li> 
+    </ul> </li> 
+  </ol>
+
+  <h2 id="migration" name="migration">Migrating UI Builder Projects</h2> 
+
+<p>You can migrate your UI Builder project from the Tizen 2.2.1 SDK to the 2.3 version to keep your old files and settings:</p>
+
+<ol><li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Import</strong>.</li>
+<li>Select <strong>Tizen &gt; Tizen Web UI Builder Project with Migration</strong> and click <strong>Next</strong>.</li>
+<li>Select the project whose version is &quot;tizen 2.2.1&quot;.</li>
+<li>Enter the migration project name and click <strong>Finish</strong>.</li>
+
+<li>Implement project changes required by the migration:
+<ol><li>Copy the original project under the new name.</li>
+<li>Generate new files (&quot;page#&quot; refers to the ID of each page):
+<ul><li><span style="font-family: Courier New,Courier,monospace;">.tizen-ui-builder-tool.xml</span>: Contains the version information.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">index.html</span>: Generated with reference to the following:
+<ul><li><span style="font-family: Courier New,Courier,monospace;">app.xml</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">page#.page</span></li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace;">index.meta.xml</span>: Generated with reference to the following:
+<ul><li><span style="font-family: Courier New,Courier,monospace;">page#.page</span></li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace;">index.js</span>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">app.js</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">page#.js</span></li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace;">page#_common.css</span>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">page#.managed.css</span></li></ul></li></ul></li>
+<li>Copy the old CSS files:
+<ul><li><span style="font-family: Courier New,Courier,monospace;">page#.css</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">app.css</span></li></ul></li>
+<li>Edit the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file
+<p>Content: <span style="font-family: Courier New,Courier,monospace;">app.xml</span> &gt; <span style="font-family: Courier New,Courier,monospace;">index.html</span></p></li>
+<li>Generate code:
+<ul><li><span style="font-family: Courier New,Courier,monospace;">index.managed.js</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">index.managed.css</span></li></ul></li>
+<li>Replace:
+<ul><li>UI frameworks</li>
+<li>UI Builder frameworks</li>
+<li>UI Builder Tool frameworks</li>
+<li><span style="font-family: Courier New,Courier,monospace;">/res</span> folder</li>
+<li><span style="font-family: Courier New,Courier,monospace;">icon.png</span></li></ul></li>
+<li>Delete files that are no longer needed.</li></ol></li></ol>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">While every effort has been made to avoid breakage, some incompatibility areas with the new APIs must be checked.
+        <p>Check the <span style="font-family: Courier New,Courier,monospace;">href</span> attribute, since it is not automatically translated with the href URL. For example:</p>
+<pre class="prettyprint">&lt;a href=&quot;page1.html&quot;&gt;LINK&lt;/a&gt;</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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--> 
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/performance_n.htm b/org.tizen.gettingstarted/html/process/performance_n.htm
new file mode 100644 (file)
index 0000000..4ae9a00
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/performance_n.htm
@@ -0,0 +1,505 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#measure">Measuring Application Performance</a></li>
+                       <li><a href="#performance">Performance Tips</a></li>
+                       <li><a href="#dynamic_analysis">Dynamic Analysis</a></li>
+                       <li><a href="#valgrind_analysis">Valgrind Analysis</a></li>                     
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Optimizing Application Performance</h1> 
+  
+  <p>The application performance optimization features include measuring and improving application performance.</p>
+  
+  <p>An application that performs poorly and gives delayed responses to user actions mars good user experience. Some parts of the code can be optimized to avoid these delays.</p> 
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">pthreads</span>, 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 <span style="font-family: Courier New,Courier,monospace">pthreads</span>, allowing you to focus on the native application development without worrying about thread level management.</p> 
+
+  <p>To improve the performance of an application:</p> 
+  <ol> 
+   <li>Identify the bottlenecks which need to be optimized.</li> 
+   <li>Optimize the bottlenecks by code refactoring.</li> 
+   <li><a href="#measure">Measure performance</a> to compare refactoring gains.</li> 
+   <li>If the performance goal is met, you can stop the process, else go to step 2 and repeat till the goal is met.</li> 
+  </ol> 
+  <h2 id="measure" name="measure">Measuring Application Performance</h2> 
+  <p>Tizen SDK supports various tools which help to measure performance and increase performance at runtime:</p> 
+  <ul>
+       <li><a href="../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a>
+       <p>Dynamic Analyzer helps to identify bottlenecks and improve resource usage patterns in native applications. For more information on its usage, see <a href="#dynamic_analysis">Dynamic Analysis</a>.</p></li>
+
+       <li><a href="../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a> <p>Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see <a href="#valgrind_analysis">Valgrind Analysis</a>.</p></li>
+  </ul>
+  <p>Measuring performance allows you to identify bottlenecks that take a critical amount of time during the program execution and to compare the code execution time before and after optimization.</p> 
+  <p>Profiling can show unexpected bottleneck locations that you have not noticed otherwise. Once bottlenecks are identified, you can consider applying threading mechanism to clear them. This solution does not work in all situations or for all algorithms, but it can be worth spending your time to investigate the possibilities. Code refactoring is required to apply the threading mechanism.</p> 
+  
+  <h2 id="performance" name="performance">Performance Tips</h2> 
+  <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> 
+   <li>Select the right algorithm and data structures.</li> 
+   <li>High-level optimization is important because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, 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> 
+   <li>Do not run heavy calculations in the same thread as your GUI.</li> 
+   <li>Use optimization options provided by toolchains.</li> 
+  </ul> 
+
+ 
+ 
+ <h2 id="dynamic_analysis" name="dynamic_analysis">Dynamic Analysis</h2> 
+  <p>To make your applications powerful, faster, and more stable, you need to analyze their performance to recognize and fix bottlenecks, bugs, and memory and resource leaks.</p> 
+  <p>The following instructions and examples help you to use the dynamic analyzer effectively:</p> 
+  <ul> 
+   <li><a href="#running">Running Dynamic Analyzer</a> <p>Describes how to launch the dynamic analyzer.</p></li> 
+   <li><a href="#result">Using the Analysis Result</a> <p>Describes how to utilize the dynamic analyzer for various improvement purposes.</p></li> 
+   
+  </ul>
+  
+    <h3 id="running" name="running">Running Dynamic Analyzer</h3> 
+  <p>You can launch the dynamic analyzer in the IDE or as a standalone application from the Tizen SDK submenu.</p> 
+  <p>To launch the dynamic analyzer in the IDE:</p> 
+  <ol> 
+   <li>Right-click your project in the Tizen IDE <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></li> 
+  </ol> 
+  <p>To run the dynamic analyzer as a standalone from the Tizen SDK menu:</p> 
+  <ol> 
+   <li>Launch the dynamic analyzer from the SDK submenu.</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>Trace Start</strong> button.</li> 
+  </ol> 
+  <p>The performance details of your application retrieved during tracing are stored in trace files. You can manage the trace files through the <strong>Toolbar</strong>.</p> 
+  <p>The following figure illustrates the components of the <strong>Toolbar</strong> used for running the dynamic analyzer.</p> 
+  <p class="figure">Figure: Toolbar</p> 
+  <p style="text-align: center;"> <img alt="Toolbar" src="../images/coolbar.png" /> </p> 
+  <ol> 
+   <li><strong>Target</strong> 
+   <p>The <strong>Target</strong> combo box shows a serial number (if the target is a device), or the Emulator name (if the target is the Emulator).</p> </li>
+   <li><strong>Application</strong> 
+   <p>The <strong>Application</strong> combo box contains a list of applications in the selected target.</p> 
+   <p>If the <strong>Target</strong> combo box is empty or disabled, the <strong>Application</strong> combo box is disabled.</p></li> 
+   <li><strong>Start/Stop</strong>
+   <p>The <strong>Start/Stop</strong> button starts or stops the tracing of the selected application. While tracing, the trace result and UI sequence is automatically recorded and temporarily saved. To store the record permanently, click <strong>Save Trace</strong>.</p> </li> 
+   <li><strong>Timer</strong>
+   <p>The timer starts when you click the <strong>Start</strong> button and updates every second. It shows the current running time of the dynamic analyzer. If you click <strong>Stop</strong>, the timer stops when the analysis processing is complete.</p> </li> 
+   <li><strong>Save Trace</strong>
+   <p>Clicking the <strong>Save Trace</strong> button saves the trace data permanently.</p> </li> 
+   <li><strong>Open Trace</strong> 
+   <p>Clicking the <strong>Open Trace</strong> button loads and displays the saved trace data.</p> 
+   <p style="text-align: center;"> <img alt="Open Trace window" src="../images/open_trace.png" /> </p> 
+   <p>The <strong>Open Trace</strong> window consists of the following panels:</p> 
+   <ul> 
+    <li><strong>Saved file</strong> 
+    <p>Shows the trace saved by clicking the <strong>Save Trace</strong> button.</p> 
+    <p>An invalid save version trace is shown in orange color and cannot be opened. A valid trace is shown in black color. The currently opened trace is shown in blue color.</p> </li>
+    <li><strong>Temporary file</strong>
+    <p>Shows the temporary traces. A temporary trace refers to a trace that has not been saved and is deleted when the program exits.</p> </li> 
+    <li><strong>Trace details</strong> 
+    <p>Shows trace information of the saved traces from the <strong>Saved file</strong> and <strong>Temporary file</strong> panels.</p> </li>
+   </ul> 
+   <p>To open a trace, double-click the trace or select the trace and click <strong>Open</strong>.</p> 
+   <p>To delete a trace, select the trace and click the delete key on your keyboard.</p> </li>
+   <li><strong>Replay</strong>
+   <p>Clicking <strong>Replay</strong> repeats a previous analysis. You can use data from a previous dynamic analyzer instance or a saved trace data file. If the target or application do not match, the button is disabled.</p> </li> 
+    <li><strong>View Source</strong>
+   <p>The <strong>View Source</strong> button displays the source code. If you click the button and the mouse is on the method name in any table-like view, the source code is displayed as a tooltip. By double-clicking the tooltip you can see the source code in the IDE. Apart from the Callstack view, the source code displayed is the caller part of the selected API, not the API definition.</p>
+
+ <p>If an API is called from a shared library, the source code is not displayed as the source code of the shared library is not available.</p> 
+
+  <p>In the <strong>Callstack</strong> view, the source code corresponding to the address of the selected callstack unit is displayed.</p> 
+
+        <table class="note"> 
+         <tbody> 
+          <tr> 
+           <th class="note">Note</th> 
+          </tr> 
+          <tr> 
+           <td class="note"> <p>If the source code exists outside Tizen IDE, for example, in a built-in application on a device, the <strong>View Source</strong> button is disabled. The source view is available only for applications which are built as normal native projects in the IDE on the local machine.</p></td> 
+          </tr> 
+         </tbody> 
+        </table></li> 
+   <li><strong>Settings</strong>
+   <p>The <strong>Settings</strong> button opens the <strong>Settings</strong> window. It supports the runtime configuration feature and other settings.</p></li>
+   <li><strong>About</strong> 
+   <p>The <strong>About</strong> button opens the <strong>About</strong> window, which displays the dynamic analyzer version, build time, and license.</p> </li>
+  </ol> 
+ 
+<h3 id="result" name="result">Using the Analysis Result</h3> 
+  <p>After the profiling is terminated by the dynamic analyzer, analyze the result. The dynamic analyzer provides a variety of information collected while your application was run. Use the result selectively to meet your improvement purposes.</p>
+  <p>The following instructions help you to utilize the analysis result:</p>
+  <ul>
+   <li><a href="#performance_analysis">Performance Analysis</a> <p>Describes how to analyze application performance.</p></li> 
+
+   <li><a href="#detecting">Detecting Leaks</a> <p>Describes how to detect memory and resource leaks.</p></li> 
+   <li><a href="#multithread">Multi-threaded Application and Synchronization Analysis</a> <p>Describes how to analyze threads and synchronization.</p></li> 
+  </ul>
+
+<h4 id="performance_analysis" name="performance_analysis">Performance Analysis</h4> 
+  <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, which 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> 
+   <li>User 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 used methods in the dynamic analyzer.</p> 
+  <p>To detect and fix the methods consuming the most time:</p> 
+  <ol> 
+   <li>Select the <a href="../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab and view the <strong>Function Usage Profiling</strong> view displaying the methods consuming the most time. Click the title of a column to view the sorted results.</li> 
+
+   <li>To view the execution time of the methods called within a specific time period, use the <a href="../../../org.tizen.devtools/html/native_tools/da_range_info_n.htm">range information feature</a> of the dynamic analyzer. 
+       <p>The time consumed by UI-related methods is displayed on the <strong>UI Function Profiling</strong> view of the <strong>UI</strong> tab.</p> </li>
+  </ol>  
+   </li> 
+   <li>Timeline CPU Chart 
+   <p>When analyzing application performance, the CPU load is one of the most significant factors. A CPU load peak can result in a performance bottleneck. High CPU load leads to increased memory consumption, which shortens the battery life of the device running the application. To avoid this, you need to optimize your code.</p> 
+  <p class="figure">Figure: Timeline CPU chart</p> 
+  <p style="text-align:center;"><img alt="Timeline CPU chart" src="../images/timeline_cpu_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>To detect and fix CPU load peaks with the CPU load feature of the dynamic analyzer:</p> 
+  <ol> 
+   <li>Select the <strong>Timeline</strong> tab and view the CPU chart.</li> 
+   <li>Hover the mouse on a CPU peak to view the CPU load value in a tooltip.</li> 
+   <li>Click the CPU peak to highlight the last user method called before the peak in the <strong>Call Trace</strong> view.</li> 
+   <li>Click the <strong>View Source</strong> button and place the mouse on the highlighted method. The source code is displayed as a tooltip. To investigate the method, double-click on it, and the source code is displayed in the IDE.</li> 
+   <li>Modify the code in the IDE, re-build, and re-analyze the application to see if the bottleneck has been eliminated.</li> 
+  </ol> 
+   
+   </li> 
+   <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.</p> 
+  <p class="figure">Figure: Thread load</p> 
+  <p style="text-align:center;"><img alt="Thread load" src="../images/thread_load.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p>The thread line displayed in blue indicates the thread load within a time frame. The darker the color, the higher the load.</p>
+   
+   </li> 
+  </ul> 
+  <p>When modifying the application code to improve its performance, consider the following:</p> 
+  <ul> 
+   <li>Select the right algorithm and data structures.</li> 
+   <li>High-level optimization is important because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, use optimal algorithms and data structures.</li> 
+   <li>Running high and low priority jobs in a single task causes delays. Split the jobs into multiple tasks.</li> 
+   <li>Do not run heavy calculations in the same thread with your GUI.</li> 
+   <li>Use optimization options provided by toolchains.</li> 
+  </ul> 
+
+ 
+ <h4 id="detecting" name="detecting">Detecting Leaks</h4> 
+  <p>To improve the performance of your application, you can use the dynamic analyzer to detect memory leaks.</p> 
+
+  <p>Memory leaks occur when memory capacity that is dynamically allocated during application execution is not returned after the execution stops. Severe or accumulating memory leaks can affect the performance of other applications and programs.</p> 
+  <p>To detect and fix memory leaks using the dynamic analyzer:</p> 
+  <ol> 
+   <li>To view the memory leaks occurring during application analysis, select the <a href="../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab.
+   <p style="text-align:center;"><img alt="Memory leaks" src="../images/memory_leaks.png" /></p> 
+   <p>All the listed items are not memory leaks. To identify actual memory leaks, look for applications that are already terminated but have not returned the allocated memory. When these leaks are fixed, they disappear from the list.</p></li> 
+   <li>Click the <strong>View Source</strong> icon in the toolbar. <p style="text-align:center;"><img alt="View source" src="../images/view_source.png" /></p></li> 
+   <li>Move the mouse pointer to the list item you want to check. The source code is displayed as a tooltip. The part causing the memory leak is displayed in red. 
+       <p style="text-align:center;"><img alt="Source View" src="../images/source_view.png" /></p>
+       </li> 
+   <li>To view the entire source code in the IDE and fix the leak, double-click the list item. If the IDE is not running the dynamic analyzer launches it automatically.</li> 
+  </ol> 
+ 
+ <h4 id="multithread" name="multithread">Multi-threaded Application and Synchronization Analysis</h4> 
+  <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.</p> 
+  <p>You can use the dynamic analyzer to:</p> 
+  <ul> 
+   <li><a href="#life">Analyze thread life-cycle</a></li> 
+   <li><a href="#concurrency">Analyze thread concurrency</a></li> 
+   <li><a href="#sync">Analyze synchronization</a></li> 
+  </ul> 
+  <h5 id="life" name="life">Analyzing Thread Life-cycle</h5> 
+  <p>Testing threads is difficult as they are nondeterministic. Visualizing the thread life-cycle is an effective method for analyzing the thread life-cycle. </p> 
+  <p>The dynamic analyzer has 3 types of user threads:</p> 
+  <ul> 
+   <li><strong>Main thread</strong> created from the system for running applications</li> 
+   <li><strong>Tizen threads</strong> including worker threads and event-driven threads</li> 
+   <li><strong>pthread</strong></li> 
+  </ul> 
+  <p>In the thread chart, the thread life-cycle is displayed as follows:</p> 
+  <ul> 
+   <li><strong>Thread creation</strong>: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. <p class="figure">Figure: Creating a thread</p> <p style="text-align:center;"><img alt="thread create" src="../images/thread_create.png" /></p></li> 
+   <li><strong>Thread exiting</strong>: When a thread exits, a purple bar is displayed with a joined <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. If another thread calls the API of the exited thread, a yellow bar is displayed. <p class="figure">Figure: Exiting a thread</p> <p style="text-align:center;"><img alt="thread exit" src="../images/thread_exit.png" /></p></li> 
+  </ul> 
+  <p>A new thread is created in a joinable state. Otherwise, memory and resource leaks can occur until the process ends. To make the process faster, set the thread to the detach state, or call the detach API. You can check the state of the thread on the <strong>Thread</strong> tab.</p> 
+  <h5 id="concurrency" name="concurrency">Analyzing Thread Concurrency</h5> 
+  <p>The number of live threads and their resource usage can be used to determine an efficient thread concurrency.</p> 
+  <p>The thread chart displays the relationship and progress between threads and allows you to check the number of live threads. The CPU load of a thread is also displayed.</p> 
+  <h5 id="sync" name="sync">Analyzing Synchronization</h5> 
+  <p>When multiple threads access the same resources, data race occurs. To avoid this, threads must be synchronized.</p> 
+  <p>The synchronization chart in the dynamic analyzer has the following synchronization objects:</p> 
+  <ul> 
+   <li>Tizen mutex</li> 
+   <li>Tizen monitor</li> 
+   <li>Tizen semaphore</li> 
+   <li>pthread mutex</li> 
+   <li>pthread condition variable</li> 
+  </ul> 
+  <p>You can view the synchronization chart based on the thread, or the synchronization status:</p> 
+  <ul> 
+   <li> To view the child of each thread chart item, select <strong>Thread</strong> in the synchronization chart combo box. </li> 
+   <li>To view the parent item with the thread for each usage showing the child items, select <strong>Sync</strong>.</li> 
+  </ul> 
+  <p class="figure">Figure: Synchronization chart types</p> 
+  <p style="text-align:center;"><img alt="Synchronization chart types" src="../images/sync_chart.png" /></p> 
+  <p>A synchronization object can be checked using the synchronization chart. When a synchronization object acquires a lock, the thread enters the critical section. The dynamic analyzer analyzes the critical section duration and waiting time. </p> 
+  <p>If the critical section duration increases, the thread stops working concurrently and affects the performance. If a thread acquires a lock, the critical section waiting time of the other threads increases. To avoid potential dead lock, reduce the waiting time.</p> 
+  <p class="figure">Figure: Dead lock warning</p> 
+  <p style="text-align:center;"><img alt="Dead lock warning" src="../images/dead_lock_warning.png" /></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 the Valgrind effectively:</p> 
+  <ul> 
+   <li><a href="#running_valgrind">Running Valgrind</a> <p>Describes how to launch the 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</strong> &gt; <strong>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 <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 class="figure">Figure: Memory error and memory leak data options</p> <p style="text-align:center;"><img alt="Memory error and memory leak data options" src="../images/valgrind_general.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+    <table style="width: 100%" border="1"> 
+     <caption>
+       Table: General setting options 
+     </caption> 
+     <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>trace children on exec</td> 
+       <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> on exit</td> 
+       <td><p>This option is only relevant when running Valgrind on Linux.</p> <p>The GNU C library (<span style="font-family: Courier New,Courier,monospace;">libc.so</span>), 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 <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> at exit. Unfortunately, in some very old versions of glibc, <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> 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 <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span>. 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 <span style="font-family: Courier New,Courier,monospace;">libc.so</span>. </p></td> 
+      </tr> 
+      <tr> 
+       <td>demangle C++ names</td> 
+       <td><p>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> <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>num callers in stack trace</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 four 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></p> <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>limit errors reported</td> 
+       <td><p>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.</p></td> 
+      </tr> 
+      <tr> 
+       <td>show errors below main</td> 
+       <td><p>By default, stack traces for errors do not show any methods that appear beneath <span style="font-family: Courier New,Courier,monospace;">main()</span>. Alternatively, if <span style="font-family: Courier New,Courier,monospace;">main()</span> is not present in the stack trace, it does not show any methods below <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods, such as glibc&#39;s <span style="font-family: Courier New,Courier,monospace;">__libc_start_main()</span>. Furthermore, if <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are present in the trace, they are normalized as (below <span style="font-family: Courier New,Courier,monospace;">main()</span>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are not normalized.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>max size of stack frame</td> 
+       <td><p>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> <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>suppressions file</td> 
+       <td><p>This option specifies an extra file from which to read descriptions of errors to suppress. You can use up to 100 extra suppression files.</p></td> 
+      </tr> 
+     </tbody> 
+    </table></li> 
+   <li><p>On the <strong>Tool Advanced setting</strong> tab, set the advanced options.</p> <p>The tab content depends on the selection you have made on the <strong>Collect data</strong> tab.</p> 
+    <table style="width: 100%" border="1"> 
+     <caption>
+       Table: Tool Advanced setting options for memory error and memory leak profiling 
+     </caption> 
+     <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>leak check</td> 
+       <td><p>This option, when enabled, searches for memory leaks when the client application finishes. If set to summary, it lists out how many leaks occurred. If set to full or yes, it also gives details of each individual leak.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>leak resolution</td> 
+       <td><p>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 low, only the first 2 entries need match. When set to med, 4 entries have to match. When high, all entries need to match.</p> <p>For hardcore leak debugging, you probably want to use --leak-resolution=high together with --num-callers=40 or a similar large number. The --leak-resolution 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>freelist size (blocks)</td> 
+       <td><p>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> <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>show reachable blocks</td> 
+       <td><p>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 --show-all would be a better name for it.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>allow partial loads</td> 
+       <td><p>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 yes, 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> <p>When set to no, 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>undef value errors</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 no. It also has the side effect of slightly speeding up <strong>Memcheck</strong>.<p></p> </td> 
+      </tr> 
+     </tbody> 
+    </table> 
+    <table style="width: 100%" border="1"> 
+     <caption>
+       Table: Tool Advanced setting options for heap memory profiling 
+     </caption> 
+     <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>profile heap</td> 
+       <td><p>This option specifies whether heap profiling is done.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>administrative bytes per block</td> 
+       <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>profile stack</td> 
+       <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>allocation tree depth</td> 
+        <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>heap allocation threshold</td> 
+       <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>allocation peak inaccuracy</td> 
+       <td><p><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 every one 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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>time unit</td> 
+       <td><p>This option specifies the time unit used for the profiling. There are 3 possibilities: </p> 
+        <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 and/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>detailed snapshot frequency</td> 
+       <td><p>This option specifies the frequency of detailed snapshots. With --detailed-freq=1, every snapshot is detailed.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>max snapshots</td> 
+       <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>minimum heap block alignment</td> 
+       <td><p>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.</p> </td> 
+      </tr> 
+      <tr> 
+       <td>allocation functions</td> 
+       <td><p>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> <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 --alloc-fn=malloc2 has no effect. You need to specify --alloc-fn=malloc1 as well. This is a little inconvenient, but the reason is that checking for allocation method 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> is the error or leak type.</li> 
+   <li><strong>Function name</strong> is the location where the error occurred.</li> 
+   <li><strong>Sizes</strong> is the memory size of the error.</li> 
+   <li><strong>Address</strong> is the code memory address.</li> 
+   <li><strong>Location</strong> is the source or executable path, or library path, where the error occurred.</li> 
+   <li><strong>pid</strong> is the process ID, and <strong>tid</strong> is the 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> 
+  <p class="figure">Figure: Heap memory profiling results</p> 
+  <p style="text-align:center;"><img alt="Heap memory profiling results" src="../images/valgrind_heap.png" /></p> 
+  <ul> 
+   <li><strong>Snapshot</strong> is the index number of the snapshot.</li> 
+   <li><strong>Time (i)</strong> is the number of instructions being executed.</li> 
+   <li><strong>Total (B)</strong> is the total heap memory consumption byte size.</li> 
+   <li><strong>Useful Heap (B)</strong> is the size of the heap memory used by the program.</li> 
+   <li><strong>Extra Heap (B)</strong> is the size of the heap memory allocated in excess of what the program is using. The source of 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> is the 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>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 load a saved Valgrind result file, select <strong>File &gt; Open File</strong> in the IDE menu.</p>  
+  
+   
+  
+  
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/run_debug_app_w.htm b/org.tizen.gettingstarted/html/process/run_debug_app_w.htm
new file mode 100644 (file)
index 0000000..57412ef
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/run_debug_app_w.htm
@@ -0,0 +1,241 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#emulator">Running Widgets on the Emulator</a></li>
+                       <li><a href="#target">Running Widgets on a Target Device</a></li>
+                       <li><a href="#simulator">Running Mobile Widgets on the Simulator</a></li>
+                       <li><a href="#debug">Debugging Widgets</a></li>
+                       <li><a href="#rds">Rapid Development Support</a></li>
+               </ul>
+</div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Running and Debugging Applications</h1>
+
+<p>You can run your application on the <a href="#emulator">Emulator</a> or the <a href="#target">target device</a>. You can also run mobile applications on the <a href="#simulator">simulator</a>. Use the <a href="#rds">Rapid Development Support</a> feature to speed up the development tasks. If your application does not run without problems, you can <a href="#debug">debug</a> it.</p>
+
+
+
+   <h2 name="emulator" id="emulator">Running Widgets on the Emulator</h2> 
+  <p>You can debug Tizen widgets on the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Running an Emulator image requires a minimum free disk space of 20 MB. The image can occupy up to 10 GB of disk space.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>To launch the Emulator, do one of the following:</p> 
+  <ul> 
+   <li>Use the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm#manager">Emulator Manager</a>: 
+    <ol> 
+     <li>Start the Emulator Manager using the Desktop (in Linux) or Start menu (in Windows&reg;), or using the command line.</li> 
+     <li>In the <strong>Emulator Manager</strong> window, select the Emulator image in the <strong>Name</strong> column. <p>If you are using the Emulator Manager for the first time, you must create an Emulator image. To create an Emulator image, click <strong>Create New</strong>, set the image details, and click <strong>Save</strong>.</p></li> 
+     <li>Click <strong>Launch</strong>.</li> 
+    </ol> </li> 
+   <li>Use the <a href="../../../org.tizen.devtools/html/common_tools/emulator.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 IDE menu, go to <strong>Run &gt; Run As &gt; Tizen Web Application</strong>.</li> 
+   <li>On the Tizen IDE toolbar, click <strong>Run</strong>.</li> 
+  </ul> 
+  <p>To stop the Emulator, right-click the Emulator and click <strong>Close</strong>.</p>
+  
+   <h2 name="target" id="target">Running Widgets on a Target Device</h2> 
+  <p>You can run Tizen widgets on a target device using the <strong>Project Explorer</strong> view or the Tizen IDE 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 IDE 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 SDK &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 IDE menu, go to <strong>Run &gt; Run As &gt; Tizen Web Application</strong>.</li> 
+   <li>On the Tizen IDE toolbar, click <strong>Run</strong>.</li> 
+  </ul> 
+  <p>If the Web application successfully launches on the target device, the <a href="../../../org.tizen.devtools/html/web_tools/js_log_console_w.htm">JavaScript Log Console View</a> is automatically launched in the Tizen IDE. The JavaScript Log Console view displays Web application JavaScript logs.</p>
+  
+    <h2 name="simulator" id="simulator">Running Mobile Widgets on the Simulator</h2> 
+  <p>You can run Tizen widgets on the <a href="../../../org.tizen.devtools/html/web_tools/web_simulator_w.htm">Web Simulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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.devtools/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>If you are running your widget 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 IDE 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 IDE menu, go to <strong>Run &gt; Run As &gt; Tizen Web Simulator Application</strong>.</li> 
+   <li>On the Tizen IDE 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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. The mostly commonly specified file is <span style="font-family: Courier New,Courier,monospace">index.html</span>.</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 in the simulator, including the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool, which can be accessed by pressing the <strong>F12</strong> keyboard key. 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 the widget.</p> 
+  
+  <h2 name="debug" id="debug">Debugging Widgets</h2> 
+  <p>Debugging a widget enables you to understand its flow of control. You can debug a widget by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote 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 IDE 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 SDK &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>.</li> 
+   <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 IDE menu, go to <strong>Run &gt; Debug As &gt; Tizen Web Application</strong>.</li> 
+    <li>On the Tizen IDE toolbar, click <strong>Debug</strong>.</li> 
+   </ul> 
+   <p>The Remote Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Remote Inspector:</p> 
+   <ul> 
+    <li>Inspect styles</li> 
+    <li>Inspect the DOM</li> 
+    <li>Inspect resources</li> 
+    <li>Debug JavaScript code</li> 
+   </ul> 
+   <table class="note"> 
+    <tbody> 
+     <tr> 
+      <th class="note">Note</th> 
+     </tr> 
+     <tr> 
+      <td class="note"> <p>The Remote Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Remote Inspector browser is not supported.</p> <p>Installing Google Chrome on the device is mandatory for the Remote Inspector to work. When Google Chrome is installed on the device, the Tizen SDK automatically detects it. To select the browser path, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web &gt; Chrome</strong>.</p> </td> 
+     </tr> 
+    </tbody> 
+   </table> 
+   <li>To debug the JavaScript code, click <strong>Sources</strong> in the Remote Inspector menu.</li> 
+   <p>You must enable debugging before debugging JavaScript code.</p> 
+   <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>.</li> 
+   <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> 
+   <table> 
+    <caption>
+      Table: Control buttons for debugging between break points 
+    </caption> 
+    <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> 
+  </ol> 
+  <p>If the Web application successfully launches on the target device, the <a href="../../../org.tizen.devtools/html/web_tools/js_log_console_w.htm">JavaScript Log Console View</a> is automatically launched in the Tizen IDE. 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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has been modified, execute directory installation.</li> 
+  </ol> 
+  <p>The RDS option is enabled as default. To disable it, in the Tizen SDK, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Rapid Development Support</strong>.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"><p>RDS is not supported in multi-app projects.</p> <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> </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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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--> 
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/process/running_app_n.htm b/org.tizen.gettingstarted/html/process/running_app_n.htm
new file mode 100644 (file)
index 0000000..e113935
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/running_app_n.htm
@@ -0,0 +1,101 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+<h1>Running Applications</h1> 
+  <p>You can run Tizen native applications on the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm">
+       Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE 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 IDE.</p>
+        <p>If you have already registered your certificate in the IDE, 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 IDE menu, go to <strong>Run &gt; Run As &gt; Tizen native Application</strong>.</li> 
+     <li>On the Tizen IDE 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 IDE&#39;s Log 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 <span style="font-family: Courier New,Courier,monospace">manifest.xml</span> file has been modified, execute directory installation.</li> 
+  </ol> 
+  <p>The RDS option is enabled as default. To disable it, in the Tizen SDK, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Rapid Development Support</strong>.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Currently, this option is not supported in multi-app projects.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/process/setting_properties_n.htm b/org.tizen.gettingstarted/html/process/setting_properties_n.htm
new file mode 100644 (file)
index 0000000..7ef7dc0
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/setting_properties_n.htm
@@ -0,0 +1,342 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#api">Checking API Usage</a></li>
+                       <li><a href="#chapi">Checking API Privileges</a></li>
+                       <li><a href="#manifest">Setting the Application Manifest</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../details/app_filtering.htm#native">Feature Filtering</a></li>
+                       <li><a href="../details/sec_privileges.htm#native">Security and API Privileges</a></li>
+               </ul>
+       </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. To set the application project properties, right-click the project in the Tizen IDE <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>Apply</strong>.</p> 
+
+<p>The settings that you can define in the application project properties include:</p> 
+  <ul>
+<li><a href="#api">API usage check</a></li> 
+<li><a href="#chapi">API privilege check</a></li>
+  </ul>
+  
+<p>You can define the <a href="#manifest">application manifest settings</a> in the  <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+    </tr>
+<tr>
+<td class="note">Only modify the manifest file by using the manifest editor in the Tizen IDE. If you create or edit the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file using any other text editor, your application may not work as expected.</td> 
+    </tr>
+</tbody></table>
+  
+<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 Usage</h2> 
+  <p>You can check the source code in your project for any violation of API usage. To enable the API check:</p> 
+  <ol>
+<li><p>In the <strong>Properties</strong> window, select <strong>C/C++ Build &gt; Tizen Settings &gt; API and Privilege Checker</strong>.</p></li> 
+   <li>
+<p>Select the required <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm#API">API problems</a> in the <strong>API Check</strong> panel.</p> </li> 
+  </ol>
+<p>To perform API usage checks automatically, 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> 
+  </ul>
+<p>You can also <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">perform the API usage checks manually</a> after building the application by selecting <strong>Project &gt; Check API and Privilege Violations</strong>. The results are displayed in the <strong>Problems</strong> view.</p> 
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+    </tr>
+<tr>
+<td class="note">If the application has conflicting API versions, the build fails and the results are displayed in the <strong>Problems</strong> view.</td> 
+    </tr>
+</tbody></table>
+<h2 id="chapi" name="chapi">Checking API Privileges</h2> 
+  <p>You can check the source code in your project for any violation of privileges. To enable the privilege check:</p> 
+  <ol>
+<li>In the <strong>Properties</strong> window, select <strong>C/C++ Build &gt; Tizen Settings &gt; API and Privilege Checker</strong>.</li> 
+   <li>
+<p>Select the required <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm#privilege">privilege problems</a> in the <strong>Privilege Check</strong> panel.</p> </li> 
+  </ol>
+<p>To perform privilege checks automatically, 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> 
+  </ul>
+<p>You can also <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">perform privilege checks manually</a> after building the application by selecting <strong>Project &gt; Check API and Privilege Violations</strong>. The results are displayed in the <strong>Problems</strong> view.</p> 
+
+<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 <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file present in the project folder of the application.</p>
+       <p class="figure">Figure: Setting the application manifest</p>
+       <p style="text-align: center;">
+               <img alt="Setting the application manifest" src="../images/tizen_project_explorer.png"/>
+       </p>
+       <p>You can edit application properties using the tabs of the manifest editor.</p>
+
+
+<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, description, in the <strong>Overview</strong> tab of the manifest editor. Additionally, you can specify the application icon.</p> 
+  <p>You can perform the following tasks using the <strong>Overview</strong> tab:</p> 
+  <ul class="ul">
+<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 application label. <p>The application label represents the label of the application.</p> </li>
+       <li>Set the API version. <p>The API version format is &quot;x.y&quot;.</p> </li>
+   <li>Add application icon. <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel. The following table describes the available icons.</p> 
+    <table border="1">
+<caption>
+       Table: Application icons 
+     </caption> 
+     <colgroup>
+<col width="10%"/>
+<col width="5%"/>
+<col width="20%"/>
+<col width="17%"/>
+<col width="17%"/>
+<col width="30%"/>
+</colgroup>
+<tbody>
+<tr>
+<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Icon</th> 
+       <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Mandatory</th> 
+       <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Format</th> 
+       <th colspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Size</th> 
+       <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+      </tr>
+<tr>
+<th style="text-align:center;margin-left:auto;margin-right:auto;">Xhigh (HD)</th> 
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">High (WVGA)</th> 
+      </tr>
+<tr>
+<td>MainMenu</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>
+</tbody>
+</table>
+</li> 
+<li>Set the application author.
+       <p>The application author represents the creator of the Tizen mobile native application package. You can set the name, email ID, and Web site of the author.</p>
+       </li> 
+<li>Set the application description.
+       <p>The application description represents the human-readable descriptions of the Tizen mobile native application package.</p>
+       </li>
+  </ul>
+
+<h3 id="features" name="features">Declaring Required Software or Hardware Features in the Features Tab</h3>
+
+       <p>You can declare required software or hardware features. This declaration can be used for application filtering in the Tizen Store.</p>
+  
+  <p>To enable filtering for your mobile native application:</p> 
+  <ol>
+<li>In the <strong>Features</strong> tab of the manifest editor, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) 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> 
+  </ol>
+<p>For more information on the available requirements for an application package, see <a href="../details/app_filtering.htm#native">Feature Filtering for Native Applications</a>. 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> 
+
+<h3 id="privileges" name="privileges">Specifying Privileges in the Privilege Tab</h3>
+
+       <p>You can use features and services provided by <a href="../details/sec_privileges.htm#native">privileged APIs</a>, which handle platform and user-sensitive data. Assign specific privileges to your application in the <strong>Privilege</strong> tab of the manifest editor, according to the application functionality that you want to develop.</p> 
+
+<h3 id="localization" name="localization">Setting the Supported Locales in the Localization Tab</h3>
+
+       <p>You can set the supported locales for selected node elements of the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file. You can provide localization support for the label and description of the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file in the <strong>Localization</strong> tab of the manifest editor.</p> 
+
+<h3 id="advanced" name="advanced">Defining Advanced Features in the Advanced Tab</h3>
+
+
+       <p>You can define advanced features of the application, 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 class="ul">
+       <li>Add metadata. <p>You can add user-defined key-value pairs to the application to be used for filtering in the package manager.</p> </li>     
+   <li>Set miscellaneous options. 
+   <p>You can set as true or false various application options:</p>
+   <ul class="ul">
+   <li>Set multiple <p>This attribute indicates whether the application can be launched as multiple.</p></li>
+   <li>Set taskmanage <p>This attribute indicates whether the application is shown in the task manager.</p></li>
+   <li>Set nodisplay for UI application<p>This attribute indicates whether the application is shown in the app-tray. For service applications, nodisplay is always true.</p></li>
+   <li>Set auto-restart <p>This attribute indicates whether the application is relaunched automatically when it is terminated abnormally.</p></li>
+   <li>Set on-boot <p>This attribute indicates whether the application is launched automatically on device booting time or application installation time.</p></li>
+       </ul>
+</li> 
+<li>Define application control.
+<p>You can <a href="../../../org.tizen.guides/html/native/app/application_n.htm#export_appcontrol">export the application control functionality</a> of your application. To define an application control used to access the functionality of your application, click <strong>Add</strong> in the <strong>Application Control</strong> section of the <strong>Advanced</strong> tab of the manifest editor.</p> 
+<p>Each application control can have multiple operation, mime type, and uri attributes.</p> </li>  
+  <li>Add an account. 
+   <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 by clicking <strong>Add</strong> in the <strong>Account</strong> section of the <strong>Advanced</strong> tab of the manifest editor, as described in the following table.</p>
+   <table border="1">
+<caption>
+     Table: Account provider properties 
+   </caption> 
+   <tbody>
+<tr>
+<th>Account property</th> 
+     <th>Data type</th> 
+     <th>Property type</th> 
+    </tr>
+<tr>
+<td>Multiple accounts support</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">bool</span> </td> 
+     <td>
+<p>Indicates whether multiple accounts are supported.</p>
+<p>This is a mandatory property.</p>
+</td> 
+    </tr>
+<tr>
+<td>Provider ID</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td>
+<p>ID of the account provider.</p>
+</td> 
+    </tr>
+<tr>
+<td>Display label</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td>
+<p>Display name of the account provider.</p>
+<p>This is a mandatory property.</p>
+</td> 
+    </tr>
+<tr>
+<td>Icon</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td>
+<p>File path of the account provider icon.</p> <p>The icon size is:</p>
+        <ul class="ul">
+<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>
+<p>This is a mandatory property.</p>
+</td> 
+    </tr>
+<tr>
+<td>Small icon</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td>
+<p>File path of the account provider icon.</p> <p>The icon size is:</p>
+        <ul class="ul">
+<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>
+<p>This is a mandatory property.</p>
+</td> 
+    </tr>
+
+<tr>
+<td>Labels</td> 
+     <td>
+<span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td>
+<p>Localization support for the display name.</p>
+</td> 
+    </tr>
+<tr>   
+<td>Capabilities</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+     <td> <p>Capability of the account provider.</p>
+<p>Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace">http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</span> IRI format.</p> <p>The following predefined capabilities can be used in Tizen:</p> 
+      <ul class="ul">
+<li>
+<span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> <p>Used when the account is related to the contacts.</p>
+</li> 
+       <li>
+<span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> <p>Used when the account is related to the calendar.</p>
+</li> 
+      </ul>
+<p>This is an optional property.</p>
+</td> 
+    </tr>
+</tbody>
+</table>
+</li>
+   <li>Export DataControl functionality. <p>You can <a href="../../../org.tizen.guides/html/native/app/data_control_n.htm#export">export data functionalities</a> of your Tizen native application.</p> <p>To define a data control used to export application data, click <strong>Add</strong> and define the data control details.</p> </li> 
+
+  </ul>
+
+<h3 id="source" name="source">Editing the tizen-manifest.xml File in the tizen-manifest.xml Tab</h3>
+
+       <p>The <strong>tizen-manifest.xml</strong> tab of the manifest editor shows the code of the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file. You can <a href="../../../org.tizen.devtools/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>
+       <table class="note">
+               <tbody>
+                       <tr>
+                               <th class="note">Note</th>
+                       </tr>
+                       <tr>
+                               <td class="note">If you edit application information manually in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file source code, you can introduce errors preventing the application from running normally.
+                               </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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.gettingstarted/html/process/setting_properties_w.htm b/org.tizen.gettingstarted/html/process/setting_properties_w.htm
new file mode 100644 (file)
index 0000000..40a39af
--- /dev/null
+++ b/org.tizen.gettingstarted/html/process/setting_properties_w.htm
@@ -0,0 +1,566 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#api">Checking API Privileges</a></li>
+                       <li><a class="opensection" href="#set">Setting Build Properties</a></li>
+                       <li><a class="opensection" href="#set_json">Setting the JSON Property</a></li>
+                       <li><a class="opensection" href="#set_widget">Setting the Web Application Configuration</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../details/app_filtering.htm#web">Feature Filtering</a></li>
+                       <li><a href="../details/sec_privileges.htm#web">Security and API Privileges</a></li>
+               </ul>
+       </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. To set the application project properties, right-click the project in the Tizen IDE <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>Apply</strong>.</p> 
+
+  <p>The settings that you can define in the application project properties include:</p> 
+  <ul> 
+   <li><a href="#api">Checking API privileges</a></li> 
+   <li><a href="#set">Setting build properties</a></li>
+   <li><a href="#set_json">Setting the JSON property</a></li>
+  </ul>
+
+  <p>You can <a href="#set_widget">set the Web application configuration</a> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Only modify the widget configuration by using the configuration editor in the Tizen IDE. If you create or edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file using any other text editor, your application may not work as expected.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  
+  <p>After you have finished setting the project properties, you are ready to <a class="opensection" href="app_dev_process_w.htm#design">design the UI</a>.</p> 
+  
+  <h2 id="api" name="api">Checking API Privileges</h2> 
+  <p>You can check the source code in your project for any violation of API privileges. To enable the privilege check:</p> 
+  <ol> 
+   <li><p>In the <strong>Properties</strong> window, select <strong>Project &gt; Properties &gt; Tizen SDK &gt; Web &gt; Privilege</strong>.</p></li> 
+   <li><p>If you want to exclude JavaScript files in specified folders, you can do so in the <strong>Excluded Folder Settings</strong> panel.</p> <p>This configuration helps to avoid unnecessary analysis for library files like <span style="font-family: Courier New,Courier,monospace">jQuery</span>.</p></li> 
+  </ol> 
+  <p>To perform privilege checks automatically, select the required option in the <strong>Mode Settings</strong> panel. To check during the <a class="opensection" href="app_dev_process_w.htm#build">build process</a>, select the <strong>Run privilege checks with build</strong> option.</p> 
+  <p>You can also perform the checks manually in the IDE by selecting <strong>Project &gt; Check Privilege</strong> from the context menu. The results are displayed in the <strong>Problems</strong> view.</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 SDK &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> 
+  <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 SDK &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> 
+  <p>Every application has a <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file. The Tizen IDE provides a widget configuration editor for configuring the application.</p> 
+  <p>To edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, open it by double-clicking the file in the <strong>Project Explorer</strong> view.</p> 
+  <p>You can edit widget properties using the tabs of the widget configuration editor.</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 widget in the <strong>Overview</strong> tab of the widget configuration editor.</p> 
+
+  <p>The following table lists the widget properties you can edit in the <strong>Overview</strong> tab.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Widget general information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Property</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>Identifier</td> 
+     <td>Widget identifier</td> 
+    </tr> 
+    <tr> 
+     <td>Version</td> 
+     <td>Current version of the widget</td> 
+    </tr> 
+    <tr> 
+     <td>Name</td> 
+     <td>Widget name that is displayed in an application menu or in other contexts</td> 
+    </tr> 
+    <tr> 
+     <td>Content</td> 
+     <td>Start-up file of the widget </td> 
+    </tr> 
+    <tr> 
+     <td>Icon </td> 
+     <td>Custom icon for the widget, displayed in the main menu.
+        <p>The following icon format and sizes can be used:</p>
+        <table border="1"> 
+        <tbody>
+               <tr> 
+               <th>Format</th> 
+               <th>Size [Xhigh (HD)]</th> 
+               </tr>
+               <tr> 
+               <td>32-bit PNG with alpha</td> 
+               <td>117 x 117 pixels</td>
+               </tr>   
+        </tbody> 
+        </table>
+        </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="widget" name="widget">Defining Widget License Information and UI Preferences in the Widget Tab</h3>
+
+  <p>You can define license information and UI preferences of the widget in the <strong>Widget</strong> tab of the widget configuration editor.</p> 
+
+  <p>The following table lists the widget properties you can edit in the <strong>Widget</strong> tab.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Widget license and UI information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Property</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td colspan="2"><strong>Managing the Widget</strong></td> 
+    </tr> 
+    <tr> 
+     <td>Author </td> 
+     <td>Person or organization that created the widget </td> 
+    </tr> 
+    <tr> 
+     <td>E-mail</td> 
+     <td>Email address of the author</td> 
+    </tr> 
+    <tr> 
+     <td>Web Site </td> 
+     <td> IRI associated with the widget, such as a homepage or a profile on a social network </td> 
+    </tr> 
+    <tr> 
+     <td>License</td> 
+     <td>Software license, which can include content, such as a usage agreement, redistribution statement, and copyright license terms, under which the content of the widget package is provided </td> 
+    </tr> 
+    <tr> 
+     <td>License URL</td> 
+     <td> Valid IRI or path associated with the software or content license </td> 
+    </tr> 
+    <tr> 
+     <td>Description</td> 
+     <td>Free-form widget description</td> 
+    </tr> 
+    <tr> 
+     <td colspan="2"><strong>Managing the Widget UI</strong></td> 
+    </tr> 
+    <tr> 
+     <td>Width</td> 
+     <td> Start-up file viewport width </td> 
+    </tr> 
+    <tr> 
+     <td>Height</td> 
+     <td>Start-up file viewport height</td> 
+    </tr> 
+    <tr> 
+     <td>View Modes</td> 
+     <td> Preferred view mode (maximized fullscreen)</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="feature" name="feature">Declaring Required Software or Hardware Features in the Features Tab</h3>
+
+ <p>You can declare required software or hardware features. This declaration can be used for application filtering in the Tizen Store.</p> 
+
+  <p>To enable filtering for your mobile Web application:</p> 
+  <ol>
+   <li>In the <strong>Feature</strong> tab of the widget configuration editor, click <strong>Add</strong>.</li> 
+   <li>Select a feature from the list.</li> 
+   <li>Click <strong>Save</strong>.</li> 
+  </ol> 
+  
+    <p>After setting the feature information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p> 
+       
+  <p> The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> 
+  <pre class="prettyprint">
+&lt;tizen:feature name=&quot;http://tizen.org/feature/network.nfc&quot;/&gt;
+</pre> 
+
+<p>For more information on the available requirements for an application package, see <a href="../details/app_filtering.htm#web">Feature Filtering for Web Applications</a>.</p> 
+
+<h3 id="privilege" name="privilege">Specifying Privileges in the Privilege Tab</h3>
+
+       <p>You can use features and services provided by <a href="../details/sec_privileges.htm#web">privileged APIs</a>, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the widget in the <strong>Privilege</strong> tab of the widget configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a widget to use at runtime.</p> 
+
+  <p>To add a privilege:</p> 
+  <ol> 
+   <li>In the <strong>Privilege</strong> tab of the widget configuration editor, click <strong>Add</strong>.</li> 
+   <li>In the <strong>Add privilege</strong> window, select an option: 
+    <ul class="ul"> 
+     <li><strong>Internal</strong>: Select a privilege from the predefined list of APIs. You can select multiple privileges by holding the <strong>CTRL</strong> key. </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 <span style="font-family: Courier New,Courier,monospace">.xml</span> or <span style="font-family: Courier New,Courier,monospace">.widlprocxml</span> extension).</li> 
+    </ul> </li> 
+   <li>Click <strong>Finish</strong>.</li> 
+  </ol> 
+     <p>After setting the privilege information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>  
+  <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> 
+  <pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&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 widget using the <strong>Policy</strong> tab of the widget configuration editor.</p> 
+
+
+    
+  <p>The following table lists the policy properties you can edit in the <strong>Policy</strong> tab.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Policy information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Property</th> 
+     <th>Description</th> 
+    </tr>  
+    <tr> 
+     <td>content-security-policy</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>.
+        <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+        <pre class="prettyprint">&lt;tizen:content-security-policy&gt;
+&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;
+&lt;/tizen:content-security-policy&gt;</pre>
+</td> 
+    </tr> 
+    <tr> 
+     <td>content-security-policy-report-only</td> 
+     <td>Used to define an additional content security policy for a packaged or hosted application  (for monitoring purposes only). 
+<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+<pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;
+&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; 
+&nbsp;&nbsp;&nbsp;report-uri=&quot;http://example.com/report.cgi&quot;
+&lt;/tizen:content-security-policy-report-only&gt;</pre>
+</td> 
+    </tr> 
+    <tr> 
+     <td>allow-navigation</td> 
+     <td>Used to define a list of URL domains allowed for the Web application. 
+<p>This attribute is optional.</p>
+<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+<pre class="prettyprint">&lt;tizen:allow-navigation&gt;
+&nbsp;&nbsp;&nbsp;tizen.org *.tizen.org
+&lt;tizen:allow-navigation/&gt;</pre>
+</td> 
+    </tr> 
+    <tr> 
+     <td>access</td> 
+     <td><p>Used to define network resource permissions.</p>
+        <p>To request network resource permissions, click <strong>Add</strong> and enter the resource URLs in the <strong>Network URL</strong> column. You can allow the widget to access the URL sub-domains by setting the <strong>Allow subdomain</strong> column value as <span style="font-family: Courier New,Courier,monospace">true</span>.</p> 
+        <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> 
+  <pre class="prettyprint">
+&lt;access origin=&quot;http://www.tizen.org&quot; subdomains=&quot;true&quot;/&gt;</pre> </td> 
+    </tr> 
+    
+   </tbody> 
+  </table> 
+  
+  <p>After setting the policy information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+
+<h3 id="localization" name="localization">Setting the Supported Locales in the Localization Tab</h3>
+
+  <p>You can provide localization support for name, description, and license elements of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Localization</strong> tab of the widget configuration editor.</p> 
+  
+<p>To add localization:</p> 
+<ol><li>In the <strong>Name</strong> panel, click <strong>Add</strong>.
+<p>Select a language and enter your name.</p>
+<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+  <pre class="prettyprint">
+&lt;name xml:lang=&quot;en-gb&quot;&gt;Lee&lt;/name&gt;
+</pre></li>
+<li>In the <strong>Description</strong> panel, click <strong>Add</strong>. 
+<p>Select a language and enter the description of the widget.</p>
+<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+  <pre class="prettyprint">
+&lt;description xml:lang=&quot;en-gb&quot;&gt;Widget&lt;/description&gt;
+</pre></li>
+<li>In the <strong>License</strong> panel, click <strong>Add</strong>. 
+<p>Select a language and manually enter the license and license URI.</p>
+  <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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&gt;
+</pre> </li>
+</ol>
+  <p>After setting the localization information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</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.</p> 
+<p>To localize a Web application:</p> 
+<ol> 
+       <li>Launch the Localization Wizard by doing one of the following: 
+               <ul> 
+                       <li>In the <strong>Project Explorer</strong> view, right-click the widget and select <strong>Localization &gt; Localization Wizard</strong>.</li> 
+                       <li>In the Tizen IDE menu, go to <strong>Project &gt; Localization &gt; Localization Wizard</strong>.</li> 
+               </ul> 
+       </li> 
+       <li>In the <strong>Localization Wizard</strong> view, select the files to localize from the list of files and click <strong>Next</strong>. <p>The files that are already localized are grayed out.</p></li> 
+       <li>In the <strong>Available locales</strong> list, select the locales and add them to the <strong>Selected locales</strong> list. Click <strong>Next</strong>. <p>The locales that are already supported are grayed out.</p></li> 
+       <li>Associate the selected files with the specified locales by selecting the check boxes under the desired locale column. <p>The check boxes for files that are already localized for a particular locale are grayed out.</p></li> 
+       <li>Click <strong>Finish</strong>. <p>In the <strong>Project Explorer</strong> view, a new <span style="font-family: Courier New,Courier,monospace">locales</span> folder is created containing separate sub-folders for each locale. The sub-folders contain a copy of the selected files. Use that copy to create a localized version of the file.</p></li> 
+</ol> 
+<p class="figure">Figure: Locale folders</p> 
+<p style="text-align:center;"><img alt="Locale folders" src="../images/localize_widget.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></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 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 widget configuration editor. These name-value pairs, or preferences, are used by the widget during execution.</p> 
+
+  <p>To add preferences, click <strong>Add</strong> and 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 <span style="font-family: Courier New,Courier,monospace">true</span>.</p> 
+   <p>After setting the preference information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p> 
+  <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> 
+  <pre class="prettyprint">
+&lt;preference name=&quot;key&quot; value=&quot;value&quot; readonly=&quot;false&quot;/&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 widget 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> 
+  <table border="1"> 
+   <caption>
+     Table: Tizen-specific information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Property</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td colspan="2"><strong>application</strong></td> 
+    </tr> 
+    <tr> 
+     <td>ID</td> 
+     <td><p>Tizen application ID, which is randomly created from the Tizen package ID and project name.</p> <p>This attribute is mandatory.</p></td> 
+    </tr>
+       <tr> 
+     <td>Package</td> 
+     <td><p>10-character alphanumeric value used to identify a Tizen application package and automatically assigned by the Tizen SDK.</p> <p>This attribute is mandatory.</p></td> 
+    </tr>
+    <tr> 
+     <td>Required version</td> 
+     <td><p>Indicates the minimum API version that the Web application supports.</p> <p>This attribute is mandatory and must be a float value, such as 1.0 or 2.0.</p> </td> 
+    </tr> 
+    <tr> 
+     <td colspan="2"><strong>content</strong></td> 
+    </tr> 
+    <tr> 
+     <td>src</td> 
+     <td><p>In Widget Packaging and XML Configuration, the Web application start page is a document within the widget package. The Tizen WRT allows the start page to be hosted on an external server.</p> <p>The <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element is used to point to the relevant document.</p> </td> 
+    </tr> 
+    <tr> 
+     <td colspan="2"><strong>setting</strong></td> 
+    </tr> 
+    <tr> 
+     <td>screen-orientation</td> 
+     <td><p>Used to set the application screen orientation to landscape or portrait mode, or auto-rotation.</p> <p>This attribute is optional. The default mode is <strong>portrait</strong>.</p> </td> 
+    </tr> 
+    <tr> 
+     <td>context-menu</td> 
+     <td> <p>Used to set the Web application support for context menus.</p> <p>This attribute is optional. The default value is <strong>enable</strong>.</p> </td> 
+    </tr> 
+    <tr> 
+     <td>background-support</td> 
+     <td> <p>Used to define whether the execution of the Web application continues when the application is sent to the background.</p> <p>This attribute is optional. The default value is <strong>disable</strong>.</p> </td> 
+    </tr> 
+    <tr> 
+     <td>encryption</td> 
+     <td> <p>Used to set the encryption of application resources (<span style="font-family: Courier New,Courier,monospace">JS/CSS/HTML</span> files).</p> <p>This attribute is optional. The default mode is <strong>disable</strong>.</p> </td> 
+    </tr> 
+    <tr> 
+     <td>install-location</td> 
+     <td> <p>Used to set the installation location, for example, the SD card.</p> <p>This attribute is optional. The default mode is <strong>auto</strong>.</p> </td> 
+    </tr> 
+    <tr> 
+     <td>hwkey-event</td> 
+     <td> <p>Used to set the support for the hardware key.</p> <p>This attribute is optional. The default mode is <strong>enable</strong>.</p> </td> 
+    </tr>      
+    <tr> 
+     <td><strong>app-control</strong></td> 
+     <td><p>Describes the <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">application control functionalities</a> provided by the application. 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 <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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 colspan="2"><strong>app-widget</strong></td>
+       </tr>    
+        <tr> 
+     <td>id</td> 
+     <td> <p>Unique Dynamic Box ID.</p> <p>The ID format is <span style="font-family: Courier New,Courier,monospace">[&lt;tizen:application&gt; id].[any string]</span>.</p> </td> 
+    </tr> 
+       <tr> 
+     <td>primary</td> 
+     <td> <p>When you click the Web application icon to add a Dynamic Box. using the <strong>Add from app tray</strong> option, the primary Dynamic Box is displayed on the home screen. Secondary Dynamic Box can be added using the <strong>Add more app-widget</strong> option.</p><p>Only 1 Dynamic Box can have the value <span style="font-family: Courier New,Courier,monospace">true</span> for this attribute.</p>  </td> 
+    </tr> 
+       <tr> 
+     <td>auto-launch</td> 
+     <td> <p>To launch the application when the Dynamic Box is clicked, set auto-launch as <strong>true</strong>.</p></td> 
+    </tr> 
+       <tr> 
+     <td>update-period</td> 
+     <td> <p>Used to determine how often the Dynamic Box is reloaded. The minimum value is 1800.0 and the unit is second. The default behavior is <strong>no-update</strong>.</p></td> 
+    </tr> 
+       <tr> 
+     <td>box-label</td> 
+     <td> <p>Used to define the name of the Dynamic Box.</p></td> 
+    </tr> 
+       <tr> 
+     <td>box-icon</td> 
+     <td> <p>This icon is displayed on the list when you select the <strong>Add more app-widget</strong> option.</p></td> 
+    </tr>
+       <tr> 
+     <td>box-content</td> 
+     <td>The <strong>src</strong> attribute specifies the start page relative path based on the application root directory.
+        <p>The <strong>mouse-event</strong> attribute specifies the flag that indicates that the Dynamic Box content receives mouse down and up events.</p>
+        <p>The <strong>touch-effect</strong> attribute specifies the flag that indicates that special UX effect must be applied to the Dynamic Box when the user clicks the Dynamic Box.</p>
+</td> 
+    </tr>
+       <tr> 
+     <td>box-size</td> 
+     <td><p>The <strong>preview</strong> attribute specifies path of the image file displayed on the Dynamic Box.</p>
+        <p>The <strong>use-decoration</strong> attribute specifies whether the Dynamic Box Viewer applies a frame decoration to the box size.</p></td> 
+    </tr>
+       <tr> 
+     <td>pd</td> 
+     <td><p>The <strong>src</strong> attribute specifies the start page relative path based on the application root directory, and is used to display Drop View. You can also define the Drop View height; the Drop View width is always fixed to the device width.</p></td> 
+    </tr>
+       
+       <tr> 
+     <td colspan="2"><strong>account</strong></td>
+       </tr>
+       <tr> 
+     <td>Display name</td> 
+     <td><p>Used to define the display name of the account provider.</p><p>This attribute is mandatory.</p></td> 
+    </tr>      
+        <tr> 
+     <td>Multiple account</td> 
+     <td><p>Indicates whether multiple accounts are supported.</p><p>This attribute is mandatory.</p></td> 
+    </tr>
+       <tr> 
+     <td>Icon</td> 
+     <td><p>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><p>This attribute is mandatory.</p></td> 
+    </tr>
+       <tr> 
+     <td>Small icon</td> 
+     <td><p>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><p>This attribute is mandatory.</p></td> 
+    </tr>
+       <tr> 
+     <td>Capabilities</td> 
+     <td><p>The capabilities of the account provider defined in the IRI format:</p>
+        <p><span style="font-family: Courier New,Courier,monospace">http://&lt;vendor information&gt;/accounts/capability/&lt;name&gt;</span></p>
+        <p>The following predefined capabilities can be used:</p>
+        <ul class="ul">
+        <li><p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span></p>
+        <p>Used when the account is related to contacts.</p></li>
+        <li><p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span></p>
+        <p>Used when the account is related to calendar.</p></li>
+        </ul>
+<p>This attribute is optional.</p></td> 
+    </tr>
+       <tr> 
+     <td colspan="2"><strong>metadata</strong></td>
+       </tr>   
+               <tr> 
+     <td>key</td> 
+     <td><p>Used to define metadata that can be accessed (read-only) through the Tizen Application API:</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> 
+        <p>This attribute is optional. The value must be a unique string.</p></td> 
+    </tr>
+               <tr> 
+     <td>value</td> 
+     <td><p>Used to define metadata that can be accessed (read-only) through the Tizen Application API.</p>
+<p>This attribute is optional. The value must be a string.</p></td> 
+    </tr>
+   </tbody> 
+  </table> 
+
+<h3 id="source" name="source">Editing the config.xml File in the Source Tab</h3>
+
+  <p>The <strong>Source</strong> tab of the widget configuration editor shows the code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. You can edit an XML document and immediately see how changes made on the other tabs are reflected in the raw XML source content.</p> 
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must conform not only to the XML file format but also to the W3C specification requirements. Editing the configuration file in XML format is intended for advanced users only.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/scripts/common.js b/org.tizen.gettingstarted/html/scripts/common.js
new file mode 100644 (file)
index 0000000..60250b6
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){
+       $('#contents table').each(function(){
+               if (!$(this).parent().hasClass('table')) {
+                       $(this).wrap('<div class="table"></div>');
+               }
+       });
+
+       // Lnb Menu Initialize
+       if($('div#contents').find('.lnb').length){
+               if($("ul li.events_news").size() > 0) {
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+               }
+               initLnb();
+               initScript(staticURL + "/js/fixednavbar.js", function(){});
+       }
+
+       //family site
+       if($('div#footer').find('dl#familySlider').length){
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+       }
+
+       // Svn Commit Test
+       
+       // Language Selection
+       if($('div#header').find('.util').length){
+               var $lang = $('div#header').find('.util');
+               $lang.find('a.lang').toggle(function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+                       },function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+                       });
+
+               $lang.bind('mouseleave',function(){
+                       $(this).find('ul.language').hide();
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+               });
+
+               $lang.find('ul.language').children().last().on("keydown", function(e) {
+                       if(e.which == 9 && e.shiftKey) {
+                               return true;
+                       }
+                       
+                       if(e.which == 9) {
+                               e.preventDefault();
+                               $lang.find('ul.language').hide();
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+                               setTimeout(function() {
+                                       $("#searchTop").focus();
+                               }, 1);
+                       }
+               });
+       }
+
+       // Open the Sitemap
+       var $open = $('div#header').find('.bt-open');
+       $open.bind('click',function(){
+               var $self = $(this);
+               var $sitemap = $('div#wrapper').find('div#sitemap');
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+               if($sitemap.is(':visible')){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+                       $self.attr('title','open sitemap');
+               }else{
+                       var source = $self.css('background-image').replace('.gif','_.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+                       $self.attr('title','close sitemap');
+               }
+               
+               $self.css('background-image',source);
+               $sitemap.slideToggle('fast');
+               
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       $self.css('background-image',source);
+                       $sitemap.slideToggle('fast');
+               });
+
+       });
+
+       // Search Auto Complete
+       var $search = $('div#header').find('fieldset.search');
+       var $searchList = $search.find('#topAutocomplete>ul');
+
+       if($search.length){
+               $search.find('> input').each(function(){
+                       $(this).bind({
+                               keydown : function(e){
+                       
+                                       if(e.type=='keydown'&& $(this).val().length!=0){
+                                               $search.find('#topAutocomplete').show();
+                                               var hei = $searchList.outerHeight();
+                                               if(hei>400){
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
+                                               }
+                                       }
+                                       if(e.keyCode==9){
+                                               $search.unbind('focusout.search');
+                                       }
+                                       if(e.keyCode==40){
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+                                               //window.scrollTo(0,0);
+                                       }
+                               },
+                               focusin : function(e){
+                                       if($(this).val()==='Search'){
+                                               $(this).val('');
+                                       }
+                               },
+                               focusout : function(e){
+                                       if($(this).val().length==0) $(this).val('Search');
+                               }
+                       });
+               });
+
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+               //      if(e.keyCode==40){
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
+               //      }
+               //});
+
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){
+                       if($search.find('> input').val().length==0){
+                               $search.find('> input').val('Search');
+                       }
+                       $search.find('#topAutocomplete').hide();
+               });
+
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
+                       $search.find('> input').val('Search');
+                       $search.find('#topAutocomplete').hide();
+                       
+                       //$search.bind('focusout.search', function(){
+                       //      $(this).find('> input').val('Search');
+                       //      $(this).find('#topAutocomplete').hide();
+                       //});
+               });
+       }
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+       var script = document.createElement("script");
+       script.type = "text/javascript";
+
+       if(script.readyState){ // 인터넷 익스플로러
+               script.onreadystatechange = function(){
+                       if(script.readyState=="loaded" || script.readyState=="complete"){
+                               script.onreadystatechange = null;
+                               callback();
+                       }
+               };
+       }else{  // 다른  브라우저
+               script.onload = function(){
+                       callback();
+               };
+       }
+
+       script.src = url;
+       document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+       var sMenu = $('.lnb');
+       var sItem = sMenu.find('>li');
+
+       sItem.each(function(){
+               if($(this).find('a').hasClass('more')){
+                       if($(this).find('ul').is(":visible")) {
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
+                       } else {
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+                       }
+               }
+       });
+       
+       var setIcoArrText = function(obj) {
+               if(obj.next().is(":visible")) {
+                       obj.text("close submenu");
+               } else {
+                       obj.text("open submenu");
+               }
+       }
+       
+       sItem.find('.ico-arr').on("click", function() {
+               var $that = $(this);
+               var liBox = $that.parent();   
+               var ulBox = $that.next();
+               
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+               
+               if(liBox.hasClass("on")) {
+                       if(ulBox.is(":visible")) {
+                               ulBox.hide();
+                               $that.addClass("ico-on");
+                       } else {
+                               ulBox.show();
+                               $that.removeClass("ico-on");
+                       }
+                       setIcoArrText($that);
+                       return true;
+               }
+               
+               if(liBox.hasClass("active")) {
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+                       ulBox.hide();
+               } else {
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");
+                       ulBox.show();
+               }
+               setIcoArrText($that);
+       });
+
+       sItem.hover(function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+               $(this).find("a").eq(0).addClass("bov");
+       },function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+                $(this).find("a").eq(0).removeClass("bov");
+
+       });
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+       // 롤링할 객체를 변수에 담아둔다.
+       var el = $('#'+container).find('#'+objectId);
+       var lastChild;
+       var speed = 3000;
+       var timer = 0;
+       var autoplay = false;
+
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
+       el.data('animating',false);
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
+
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
+
+       if(arguments.length==4){
+               el.data('autoStart', auto);
+       }
+
+       if(el.data('autoStart')){
+               if(timer==0){
+                       timer = setInterval(moveNextSlide, speed);
+                       autoplay = true;
+               }
+       }
+
+       el.bind({
+               mouseenter:function(){
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+       el.data('prev').bind({
+               click:function(e){
+                       e.preventDefault();
+                       movePrevSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+       el.data('next').bind({
+               click:function(e){
+                       e.preventDefault();
+                       moveNextSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       function movePrevSlide(){
+               if(!el.data('animating')){
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
+               
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+    function moveNextSlide(){
+               if(!el.data('animating')){
+                       el.data('animating',true);
+
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
+
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+}
+
+function fn_slide(options){
+
+       var opts = jQuery.extend({},options);
+
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
+       var auto = false;
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+       var time;
+
+
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
+       effect = opts.effect;
+       auto = opts.auto;
+
+       if(auto){
+               time = setTimeout('slideShow()',3000);
+       }
+
+       slideShow = function(){
+
+               if(current < len-1){
+                       current++;
+               }else{
+                       current=0;
+               }
+
+               controllStatus();
+
+               moveControl('next');
+
+               time = setTimeout('slideShow()',3000);
+       }
+
+       controllStatus = function(){
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+               if(current>0||current<len-1){                           
+                       $prev.show();
+                       $next.show();
+               }
+               if(current==0){
+                       $prev.hide();
+                       $next.show();
+               }
+               if(current>=len-1){
+                       $prev.show();
+                       $next.hide();
+               }
+       }
+
+       moveControl = function(msg){
+               if(opts.bt!=null){
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
+               }
+
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                       $obj.children().hide();
+                       $obj.children().eq(current).show();
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                       $obj.animate({'left':'-'+size*current},'slow');
+               }
+       }
+
+       $obj.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               }
+       });
+
+       //롤링 버튼 클릭시
+       $bt.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
+
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+                       controllStatus();
+
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                               $obj.children().hide();
+                               $obj.children().eq(current).show();
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                               $obj.animate({'left':'-'+size*current},'slow');
+                       }
+
+                       // 모든 롤링 버튼을 비활성화
+                       $bt.each(function(){
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');
+                                $(this).find('img').attr('src',source);
+                       });
+
+                       // 선택한 롤링버튼을 활성화
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+
+                       return false;
+               }
+       });
+
+       //이전 버튼 클릭시
+       $prev.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
+                       current--;                                                      //이미지 인덱스값 1씩 감소
+
+                       moveControl('prev');
+
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+                       return false;
+               }
+       });
+
+       //다음 버튼 클릭시
+       $next.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       current++;                                                      //이미지 인덱스값 1씩 증가
+                       
+                       moveControl('next');
+
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+                       return false;
+               }
+       });
+
+}
+
+// main rolling banner
+function slideMotion1(){
+       var $banner = $('#rolling .motionview'),
+               //$nav = $('#rolling ul.nav'),
+               banner = {prev:null, next:null},
+               size = $banner.children().length;
+               index = 1,
+               speed = 3000,
+               timer = null,
+               auto = true,
+               width = parseInt(100/size),
+               rest = parseInt(100%size);
+
+       var $nav = $('<ul class="nav">').insertAfter($banner);
+
+       $banner.children().each(function(index){
+               index++;
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+               if(index==size){
+                       $nav.children().eq(-1).find('a').css('background-image','none');
+               }
+       });
+
+       if(rest>0){
+               width+=rest;
+               $nav.children().eq(-1).css('width',width+'%');
+       }
+
+       $nav.delegate("li",'click',function(){
+               var idx = $nav.children().index(this);
+               index = idx;
+               banner.prev = $banner.find('a.active');
+               banner.next = $banner.find('a').eq(index);
+
+               clearInterval(timer);
+               auto = false;
+               
+               $nav.trigger('change.banner',banner)
+                       .trigger('change.tab',index);
+
+               return false;
+       });
+
+       $nav.bind('change.banner',function(event, banner){
+               aniMotion();
+       });
+
+       $nav.bind('change.tab',function(event, index){
+               $nav.children().find('a').removeClass('sel');
+               $nav.children().eq(index).find('a').addClass('sel');
+       });
+
+       timer = setInterval(autoMotion, speed);
+
+       function autoMotion(){
+               if(index > size-1) index = 0;
+
+               aniMotion();
+       }
+
+       function aniMotion(){
+               if(auto){
+                       banner.prev = $banner.find('a.active');
+                       banner.next = $banner.find('a').eq(index);
+
+                       $nav.children().find('a').removeClass('sel');
+                       $nav.children().eq(index).find('a').addClass('sel');
+               }
+               banner.prev.addClass('last-active');
+               banner.next.css({'opacity':0.0})
+                       .addClass('active')
+                       .animate({'opacity':1.0}, 1000, function(){
+                               banner.prev.removeClass('active last-active');
+
+                               if(auto){
+                                       index++;
+                               }else{
+                                       index++;
+                                       timer = setInterval(autoMotion, speed*1.5);
+                                       auto = true;
+                               }
+                       });
+       }
+}
+
+// forum list show or hide function
+function toggleFunc(){
+       
+       var defaulNum = [2];
+
+       $('.forum-tit').each(function(){
+               var self = $(this);
+
+               var idx = $('.forum-tit').index(this);
+
+               for(i=0;i<=defaulNum.length;i++){
+                       if(idx==defaulNum[i]){
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+                               self.find('a.toggle').css('background-image',source);
+
+                               self.find('a.toggle').text('Show');
+                               self.addClass('mb35').next().hide();
+                       }
+               }
+
+               self.find('a.toggle').click(function(){
+                       
+                       if(self.next().is(':visible')){
+                               var source = $(this).css('background-image').replace('.gif','_.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Show');
+                               self.addClass('mb35').next().hide();
+                       }else{
+                               var source = $(this).css('background-image').replace('_.gif','.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Hide');
+                               self.removeClass('mb35').next().show();
+                       }
+
+                       return false;
+
+               });
+
+       });
+}
+
+// 파일 업로드
+function fileUpload( width ){
+       //var $img = $('.attach input[type=image]');
+       //var width = $img.attr('width');
+
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+       var $file = $('.attach input.upload').css({
+               "position": "absolute",
+               "top": "0px",
+               "right": "0px",
+               "width": w,
+               "cursor": "pointer",
+               "opacity": "0.0",
+               "height": "23px"
+       });
+       $file.off('change');
+       $file.on('change',function(e){
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+                       return;
+               }
+               var idx = $file.index(this);
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+               var fileErrMsg = {
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+                           ,ext_ko : "지원하지 않는 확장자 입니다."
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"
+                           ,ext_en : "File extention not allowed for upload."
+               };
+               var initFileInput = function(obj) {
+                       $(obj).parent().find('input.file').val("");
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
+                       else $(obj).val("");
+               };
+               
+               var filename = $(this).val();
+               
+               //CHK File ext
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+                                     , "jpg", "png", "zip"];
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+               var findFlag = false;
+               for(var i = 0; i < imgExts.length; i++) {
+                       if(imgExts[i] == fileExt) {
+                               findFlag = true;
+                               break;
+                       }
+               }
+       
+               if(findFlag == false) {
+                       alert( fileErrMsg["ext_" + localeCode] );
+                       initFileInput(this);
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+                       return;
+               }
+               
+               //CHK File Size
+               if(
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
+                               || $.browser.mozilla //FF
+                               || $.browser.safari //Chrome
+               )
+               {
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+                       if( filesize > 200 ) {
+                               alert( fileErrMsg["limit_" + localeCode] );
+                               initFileInput(this);
+                               return;
+                       }
+               }
+               
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+       });
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+       if(!arguments.length) return false;
+       
+       var bt = $('#'+args.bt);
+       var obj = $('#'+args.obj);
+
+       var source = bt.css('background-image');
+       
+       if(obj.is(':visible')){
+               obj.hide();
+       }
+
+       bt.toggle(function(){
+               var src = source.replace('.gif','_.gif');
+               bt.css('background-image', src);
+               obj.show();
+               
+               return false;
+       },function(){
+               var src = source.replace('_.gif','.gif');
+               bt.css('background-image', src);
+               obj.hide();
+
+               return false;
+       });
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+  var $self = $(this);
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+  
+  $self.find('a').bind('click',function(){
+   $("#selArea ul").hide();
+   /*
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+   $answer.hide().find('.conts').hide();
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+   */
+
+   /* 20120822 hjh modify*/
+   /* if ( this open )?  close : all close, e.target open */
+   var cutTtl  = $(this).parent().children("div").html();
+   var ttl     = $(this).parent().parent().children("td.real_question").html();
+   
+   if($(this).parents('tr').next().find('.answer').is(':visible')){
+    $(this).html(cutTtl);
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+     $answer.hide();
+    });
+   }else{
+    titleInit();
+    $(this).html(ttl);
+    $answer.hide().find('.conts').hide();
+    //$answer.slideUp('normal').find('.conts').hide();
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
+   }   
+
+   return false;
+  });
+ });
+
+ $answer.each(function(){
+  var $self = $(this);
+
+  $(this).find('a.bt-close-faq').bind('click',function(){
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");
+   var cutTtl      = question_td.children("div").html();
+   question_td.children("a").html(cutTtl);
+   
+   $self.find('.conts').slideUp('fast',function(){
+    $self.hide();
+   });
+
+   return false;
+  });
+ });
+ 
+ var titleInit = function() {
+  $question.each(function(i) {
+   $(this).find("a").html($(this).find("div").html());
+  });
+ }
+}
+
+
+
+/**
+ *  쓰기페이지 Tab 영역 컨트롤
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+       var tabs = $('.tab-list').find("li");
+       var elements = $( selector );
+
+       $( elements ).each( function( i ) {
+               if( i != 0 )
+               {
+                       $(this).hide();
+               }
+       })
+
+       // Control Tabs
+       $( tabs ).each( function( i ) {
+               $( this ).click( function(){
+                       resetClass();
+
+                       $( this ).find( 'a' ).addClass( "sel" );
+                       $( elements[i] ).show();
+
+                       return false;
+               });
+       });
+
+       // Class 리셋
+       function resetClass()
+       {
+               $( tabs ).each( function( i ) {
+                       $( this ).find( 'a' ).removeClass( 'sel' );
+               });
+
+               $( elements ).each( function( i ) {
+                       $( this ).hide();
+               });
+       }
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn            = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    $("a.remove-btn").eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ obj.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ 
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile    = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj       = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+  var firstCompFile = compFile.eq(0);
+  firstCompFile.prev().prev().val("");
+  if ($.browser.msie) {
+               $(obj).parent().find('input.file').val("");
+               firstCompFile.replaceWith( firstCompFile.clone(true) );
+       } else {
+               firstCompFile.val("");
+               firstCompFile.prev().prev().val("");
+  }
+ } else {
+  obj.parent().remove();
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+  
+  //add-btn event..
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+ 
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+ 
+ setTimeout(function() {
+  $("#" + id).focus();
+ }, 100);
+ 
+ $("#" + id).on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   var that = $(this);
+   setTimeout(function() {
+    that.prev().focus();
+   }, 1);
+  }
+ });
+ 
+ $("#" + id).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/** 
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );
+ 
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+ 
+ inputFile.on("keydown", function(e) {
+  var that = $(this);
+  
+  if(e.which == 9 && e.shiftKey) {
+   return true;
+  }
+  
+  if(e.which === 9) {
+   e.preventDefault();
+   setTimeout(function() {
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ inputFile.on("focusin", function(e) {
+  $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+  $(this).parent().css("outline", "");
+ });
+ 
+ firstAddAction(btnFileAttach, limit, w, btnName);
+ 
+ /*
+ btnFileAttach.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    inputFile.focus();
+   }, 1);
+  }
+ });
+ 
+ btnFileAttach.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ */
+ /**
+  *  2012-08-08 전종호 추가
+  *  파일 Input Text 영역 너비를 잡아주는 메서드
+  */
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+ 
+ $("#" + removeBtnId).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/** 
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+       var isCompareView=false;
+       $("#devicespecs-list > li").each( 
+               function(i){ 
+                       $(".info", this).bind("click", devicespecsListInfoToggle);
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);
+                       
+                       //detail info layer toggle function
+                       function devicespecsListInfoToggle (){
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+                               return false;
+                       }
+       });
+
+
+       /* DEVICE COMPARE 열리는 부분
+       - defualt : close. 
+       - 최초 한번만 열림 
+       - 현재는 compare 버튼에 공통으로 함수 바인딩
+       */
+       function devicespecsCompareOnOff (){
+               if ( isCompareView ) return;
+               var ww = ( isCompareView ) ? "30px":"207px";
+               $("#devicespecs-compare").animate({
+                   height: ww }, 300, "linear", function(){ });
+
+               isCompareView = ( isCompareView ) ? false:true;
+               return false;
+       }
+
+       //compare 버튼 공통으로 클릭 이벤트 걸림 
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/** 
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+       var isImgView = false;
+       var isView = 0;
+       
+       //thumbnail overevent bind
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+       focusDeviceDetail (1);
+       
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.type === "keydown" && e.which == 9) {
+                       setTimeout(function() {
+                               $("#img-viewer-handle a").eq(0).focus();        
+                       }, 1);
+               }
+       });
+       
+       //thumbnail viewarea controll handler bind
+       $("#img-viewer-handle").click(function () {
+               var ww;
+               var src = $("#img-viewer-handle img").attr("src");
+               if ( isImgView ){
+                       ww = "300px";
+                       src = src.replace(".gif", "_.gif");
+                       $("#img-viewer-thumbnail").hide();
+                       $("#device-info").show();
+               }else{
+                       ww = "730px";
+                       src = src.replace("_.gif", ".gif");
+                       $("#img-viewer-thumbnail").show();
+                       $("#device-info").hide();
+                       focusDeviceDetail(1);
+               }
+               
+               $("#img-viewer-handle img").attr("src", src);
+       $("#img-viewer").animate({
+                   width: ww
+                       }, 300, "linear", function(){
+                       if($.browser.msie)
+                               $("#img-inner").css("width", ww);
+               });
+               
+       isImgView = ( isImgView ) ? false:true;
+    });
+
+       //thumbnail overevent function (update date 2012.09.05 kangki)
+       function focusDeviceDetail ( id ) {
+               if ( isView == id ) return;
+
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+               $( "#img-viewer-bic > img").attr("src", imgSrc);
+               isView = (id);          
+       }
+
+       /*toggle devicespecs List*/
+       if($('div#contents').find('.devicespec-tit').length){
+               
+               $('.devicespec-tit').each(function(){
+                       var self = $(this);
+                       $('a', self).bind ("click", fnToggle);
+
+                       function fnToggle(){
+
+                               if ( $(this).parent().parent().next().is(':visible') ){
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+                                       self.find('em').text('Show');
+                                       self.next().hide();
+
+                                       return false;
+                               }else{
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+                                       self.find('em').text('Hide');
+                                       self.next().show();
+
+                                       return false;
+                               }
+                       }
+                                                       
+               });
+       }
+
+       /*all Show Hide devicespecs List*/
+       if($('div#contents').find('.devicespecs-util').length){
+               var self = $('div#contents').find('.devicespecs-util');
+
+               $('.showA', self).bind ("click", function (){
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( !me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+                                       me.find('em').text('Hide');
+                                       me.next().show();
+                               }
+                       });
+                       return false;
+               })
+               $('.hideA', self).bind ("click", function (){
+                       
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+                                       me.find('em').text('Show');
+                                       me.next().hide();
+                               }
+                                                               
+                       });
+                       return false;
+               })
+       }       
+}
+
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+       var focusTarget = "input";
+
+       $("#searchInput").bind("keydown", checkSearchText);
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+
+       $(".autocomplete").mouseleave(function(){
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".autocomplete").css("visibility", "visible");
+
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+
+                       var hei = $(".autocomplete").find('>ul').outerHeight();
+                       if(hei>400){
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+                       }
+               }
+               else{
+                       $(".autocomplete").css("visibility", "hidden");
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+ */
+
+function setTopScroll(selector) {
+       if ( !selector ) return false;
+       var btn = $( selector );
+       var w = $( window );
+       btn.css( "position", "absolute" );
+
+
+       btn.click( function(){ w.scrollTop( 0 ) } );
+
+       var wheight = w.innerHeight();
+       
+       $(window).resize( function() {
+               wheight = w.innerHeight();
+               redraw();
+       });
+
+       $(window).scroll( function() {
+               redraw();
+       })
+
+       /**
+        *      Top 버튼의 재정렬 메서드
+        */
+       function redraw()
+       {
+               var t = w.scrollTop() + wheight - 289;
+
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {
+                       t = wheight / 2;
+               }
+               
+               btn.clearQueue();
+
+               btn.animate({
+           top: t
+               }, 500, function() {
+           // Animation complete.
+               });
+               //btn.css( "top", t );
+               //console.log( "target : " + t );
+       }
+
+       redraw();
+       /*
+       obj.initTop = position;
+       obj.topLimit = topLimit;
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+       obj.style.position = "absolute";
+       obj.top = obj.initTop;
+       // obj.left = obj.initLeft;
+
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
+               obj.getTop = function() {
+                       return window.pageYOffset;
+               }
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+               obj.getTop = function() {
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+               }
+       } else {
+               obj.getTop = function() {
+                       return 0;
+               }
+       }
+
+       if ( self.innerHeight ) {       //WebKit
+               obj.getHeight = function() {
+                       return self.innerHeight;
+               }
+       } else if( document.documentElement.clientHeight ) {
+               obj.getHeight = function() {
+                       return document.documentElement.clientHeight;
+               }
+       } else {
+               obj.getHeight = function() {
+                       return 500;
+               }
+       }
+
+       obj.move = setInterval( function() {
+               if ( obj.initTop > 0 ) {
+                       pos = obj.getTop() + obj.initTop;
+               } else {
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
+               }
+
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+               if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+               interval = obj.top - pos;
+               obj.top = obj.top - interval / 3;
+               obj.style.top = obj.top + "px";
+       }, 30 )
+       */
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){ 
+       var x,y; 
+       if (window.innerHeight) { // IE 외 모든 브라우저 
+               x = (screen.availWidth - self.innerWidth) / 2; 
+               y = (screen.availHeight - self.innerHeight) / 2; 
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
+               x = (screen.availWidth - document.body.clientWidth) / 2; 
+               y = (screen.availHeight - document.body.clientHeight) / 2; 
+       } 
+       window.moveTo(x,y); 
+}
+
+// Layer Popup Open
+function layer_open(el){
+       var temp = $('#' + el);
+
+       if(!temp.hasClass('sty2')){
+               $('.layer').fadeIn();
+       }
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       if(temp.hasClass('sty2')){
+               temp.fadeIn();
+
+               temp.find('a.cbtn').click(function(e){
+                       temp.fadeOut();
+               });
+               temp.find('a.gbtn').click(function(e){
+                       temp.fadeOut();
+               });
+
+               return false;
+       }
+       // 닫는 버튼 gbtn-c 추가 20130627
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+               $('.layer').fadeOut();
+               return false;
+       });
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+       var temp = $('#' + el);
+       $('input').attr('disabled', 'disabled');
+       $('.layerPop').fadeIn();
+       
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+               $('.layerPop').fadeOut();
+               $('input').removeAttr('disabled');
+               return false;
+       });
+}
+
+
+function pop_account(url){
+       window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+       window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/** 
+ *  [PAGE] Tags
+ *  date : 20120820
+ *  author : 전종호
+ */
+function initTags()
+{
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+       // 마지막 아이템은 제외
+       var eleArr = $(".tag-list").find("li");
+
+       $( eleArr ).each( function( i ) {
+               if( i < eleArr.length - 1 )
+               {
+                       var target = $(this).find("a")[0];
+                       var content = $( target ).html();
+
+                       $( target ).html( content + "," );
+               }
+       })
+}
+
+$(document).ready(function(){
+       $(".tip_info").css("cursor","pointer");
+       $(".tip_info > img").mouseover(function(){
+               $(".tip_cont").css("display","block");
+       });
+       $(".tip_info > img").mouseout(function(){
+               $(".tip_cont").css("display","none");
+       });
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+       var $L = $("#" + id) ;
+       var $D  = $("#" + id + "down") ;
+
+       $T = $("#" + id) ;
+
+       $L.show();
+       isPopup = true ;
+
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+       $("#" + id + "agree").focus() ;
+
+       jQuery(":focusable").focusin(function(e){
+               if (isPopup) {
+                       e.stopPropagation() ;
+                       if ($L.find(jQuery(this)).length > 0) {
+                       } else {
+                               jQuery(this).blur() ;
+                               jQuery("#" + id + " :focusable:first").focus() ;
+                       }
+               }
+       }) ;
+
+       $L.find('.close').click(function(){
+               resetPopup(id) ;
+       });
+
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+       $("#" + T + "down").hide();
+       $("#" + T + "agree").attr("checked", false) ;
+       isPopup = false ;
+       $("#" + T).hide() ;
+       $("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+       if ($("#" + T + "agree").is(':checked')) {
+               commonDownloadLog(F, I) ;
+               resetPopup(T) ;
+       }
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+       if ( "area" === nodeName ) {
+               map = element.parentNode;
+               mapName = map.name;
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+               img = $( "img[usemap=#" + mapName + "]" )[0];
+               return !!img && visible( img );
+       }
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+                       visible( element ) ;
+}
+
+function visible( element ) {
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+               return $.css( this, "visibility" ) === "hidden";
+       }).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device1').hide();
+       
+       $('#thumb_view_btn').hover(function() {
+               $('.view_device1').show();
+       },function() {
+               $('.view_device1').hide();
+       });
+               
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device2').hide();
+       
+       $('#thumb_view_btn2').hover(function() {
+               $('.view_device2').show();
+       },function() {
+               $('.view_device2').hide();
+       });
+               
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+       var $L = $("#" + popId) ;
+       $L.show(100);
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+       $L.find('.close').click(function(){
+               $L.hide();
+       });
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
diff --git a/org.tizen.gettingstarted/html/scripts/core.js b/org.tizen.gettingstarted/html/scripts/core.js
new file mode 100644 (file)
index 0000000..68dea4c
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10. 
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+       if (!seperator) seperator = '-';
+
+       date = $.SD.replaceAll(date, seperator, '');
+       date = $.SD.replaceAll(date, '/', '');
+
+       if (date.length !== 8) return null;
+       
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+       if (date.valueOf().toString() === 'NaN') return null;
+
+       return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+       if (!seperator) seperator = '/';
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+       var str, dateString = date.getFullYear();
+
+       str             = "0" + (date.getMonth()+1);
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+       str             = "0" + date.getDate();
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+
+       return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+       var tnum    = num + "";
+       var tarr    = new Array();
+       var dot     = "";
+       var idxDot  = tnum.indexOf(".");
+       var sign    = "";
+       var tinx    = 0;
+       var fnum    = tnum;
+        
+       
+       if(idxDot > -1) {
+               fnum = tnum.substring(0, idxDot);
+               dot  = tnum.substring(idxDot);
+               tnum = fnum;
+       } 
+       
+       if(tnum.indexOf("-") > -1) {
+               fnum = tnum.substring(1);
+               sign = tnum.substring(0, 1);
+       }
+       
+       for(var inx = fnum.length; inx > 0; ) {
+               tarr[tinx++] = fnum.substring(inx, inx - 3);
+               inx = inx - 3;
+       }
+       
+       return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+       doAjax : function (json) {
+               var param = {
+                       async : json.async,
+                       type : json.type,
+                       dataType : json.dataType,
+                       cache: json.cache,
+                       timeout : json.timeout,
+                       success : json.success,
+                       error : json.error
+               };
+
+               if (param.dataType === 'jsonp') {
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+               } else {
+                       param.url = json.url;
+                       param.data = json.data;
+               }
+               $.ajax(param);
+       },
+       
+       get : function (json) {
+               $.SD.ajax.doAjax({ 
+                       url:json.url,
+                       cache:json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'get', 
+                       dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       },
+       
+       post : function (json) {
+               $.SD.ajax.doAjax({ url:json.url,
+                       cache: json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'post', dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       }
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+       
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/[0-9]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+               return false;
+       }
+       
+       return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+       var scrollbars  = "no";
+       var resizeable  = "no";
+       
+       if(popObj.scrollbars) {
+               scrollbars = popObj.scrollbars; 
+       }
+       
+       if(popObj.resizeable) {
+               resizeable = popObj.resizeable;
+       }
+       
+       var width  = screen.width;
+       var height = screen.height;
+
+       var x = ( width / 2 ) - ( popObj.width / 2 );
+       var y = ( height / 2 ) - ( popObj.height / 2 );
+
+       var opt = "left=" + x +
+                 ",top=" + y +
+                 ",width=" + popObj.width +
+                 ",height=" + popObj.height +
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+                 ",scrollbars=" + scrollbars +
+                 ",resizable=" + resizeable;
+       var pop = window.open(popObj.url, popObj.target, opt);
+       if(pop) {
+               pop.focus();
+       }
+}
+
+$.SD.isValidDate = function(val) {
+       if(val.length != 8) {
+               return false;
+       }
+       
+       var yyyy = Number(val.substring(0, 4)); 
+       var mm   = Number(val.substring(4, 6));
+       var dd   = Number(val.substring(6));
+       
+       if( mm < 1 || mm > 12 ) {
+               return false;
+       }
+       
+       var endDay  = 0;
+       
+       if( mm == 2 ) {
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+                       endDay = 29;
+               } else {
+                       endDay = 28;
+               }
+               
+       } else {
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+               endDay = endDays[mm - 1];
+       }
+       
+       if( dd <= 0 || dd > endDay ) {
+               return false;
+       } 
+       
+       return true;
+       
+}
+
+$.SD.boardDownload = function(option, func) {
+       var jsonData = {
+               url: "/board/ajaxDwnldProc.do",
+               async: false,
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+                               //location.href = $(obj).attr("href");
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDwnldProc.do",
+               async: false,
+               data: {fileName: fileName, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               location.href = fileFullPath;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(target == 'new'){
+                                       window.open(fileFullPath, '');
+                               }else{
+                                       location.href = fileFullPath;
+                               }
+                               
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonAllShareClickCountProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+       var jsonData = {
+               url: "/common/ajaxCommonClickCountProc.do",
+               data: {categoryName: categoryName, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+       var resultSize = 0;
+       if(str == null){
+               return 0;
+       }
+       for(var i=0; i<str.length; i++){
+         var c = escape(str.charAt(i));
+         if(c.length == 1){
+                 resultSize ++;
+         }     else if(c.indexOf("%u") != -1) {
+                 resultSize += 2;
+         }     else if(c.indexOf("%") != -1) {
+                 resultSize += c.length/3;
+         }
+       }
+       return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+       var tempStr = new String(str);
+       var len = 0;
+       for ( var i = 0; i < str.length; i++) {
+               var c = escape(str.charAt(i));
+               if (c.length == 1)
+                       len++;
+               else if (c.indexOf("%u") != -1)
+                       len += 2;
+               else if (c.indexOf("%") != -1)
+                       len += c.length / 3;
+               if (len > limit) {
+                       tempStr = tempStr.substring(0, i);
+                       break;
+               }
+       }
+       return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/** 
+ * Method pagination 
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+       var info = {
+                        prev : 1
+                       ,first : 1
+                       ,begin : pageInfo.begin - 0
+                       ,current : pageInfo.current - 0
+                       ,end : pageInfo.end - 0
+                       ,last : pageInfo.last - 0
+                       ,next : 1
+               },
+               target  = this, 
+               page    = $('<span class="page"></span>'),
+               prev    = "", 
+               next    = "", 
+               i               = 0, 
+               n               = 0;
+
+       info.begin       = info.begin < 1 ? 1 : info.begin;
+       info.current = info.current < 1 ? 1 : info.current;
+       info.end         = info.end < 1 ? 1 : info.end;
+       info.last        = info.last < 1 ? 1 : info.last;
+
+       info.prev = info.current - 1;
+       info.next = info.current + 1;
+
+       target.addClass("pageNumber");
+       target.addClass("mt20");
+       target.children().remove();
+
+       if (info.first < info.begin) {
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.first);
+               }));
+       }
+
+       if (info.prev >= info.first) {
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.prev);
+               }));
+       }
+
+       i = info.begin;
+       n = info.end;
+       for(; i <= n; i++) {
+               if (i === info.current) {
+                       page.append('<strong>'+i+'</strong>');
+               } else {
+                       (function(index){
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+                                       e.preventDefault();
+                                       func(index);
+                               }));
+                       })(i);
+               }
+       }
+
+       target.append(page);
+
+       if (info.next <= info.last) {
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.next);
+               }));
+       }
+       
+       if (info.last > info.end) {
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.last);
+               }));
+       }       
+};
+
+/**
+ *  Method : popup Show Hide 
+ */
+$.fn.popupShow = function(options) {
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);
+       
+       if($("body div#" + opts.maskId).size() == 0) {
+               $("body").append("<div id='" + opts.maskId + "'></div>");
+               $("#" + opts.maskId).css({
+                       "position" : "absolute",
+                       "left"     : "0",
+                       "top"      : "0",
+                       "z-index"  : "9000",
+                       "background-color" : "#000",
+                       "display"  : "none"
+               });
+       }
+       
+       var mask_layer  = $("#" + opts.maskId);
+       var popup_layer = $(this);
+       
+       popup_layer.css("z-index", "9999");
+       
+       var maskHeight = $(document).height();
+       var maskWidth = $(window).width();
+       
+       mask_layer.css({'width':maskWidth,'height':maskHeight});
+       
+       mask_layer.fadeIn(opts.fadeSec);
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);
+       
+       var winH = $(window).height();
+       var winW = $(window).width();
+       
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+       
+       popup_layer.fadeIn(opts.fadeSec);
+       
+       var init_num = 0;
+       
+       if(init_num == 0) {
+               mask_layer.click(function() {
+                       $(this).hide();
+                       popup_layer.hide();
+               });
+               
+               
+               $("#" + opts.closeId).click( function(e) {
+                       e.preventDefault();
+                       popup_layer.popupHidden(opts.maskId);
+               });
+               
+               
+               $(window).resize( function() {
+                       var maskHeight = $(document).height();
+                       var maskWidth  = $(window).width();
+                       var winH       = $(window).height();
+                       var winW       = $(window).width();
+                       
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});
+                       
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+               });
+               
+               init_num++;
+       }
+};
+
+$.fn.popupHidden = function(maskId) {
+       var id = "#";
+       
+       if(maskId) {
+               id = id + maskId;
+       } else {
+               id = id + $.fn.popupShow.defaults.maskId; 
+       }
+       
+       $(id).hide();
+       $(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+       speed : "slow",
+       fadeLow : 0.8,
+       fadeSec : 100,
+       maskId  : "mask",
+       popupId : "layer-pop",
+       closeId : "layer-pop-close"
+};
+
+/**
+ *  Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+       var that = this;
+       var target = null;
+
+       that.each(function (i, item) {
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+               if (filePath != "") {
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+                       if (!imgExts[fileExt]) {
+                               target = item;
+                               return false;
+                       }
+               }
+       });
+
+       return target;
+}      
+
+/**
+ *  Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+       return this.optional(element) 
+              || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+    var label = $(this).data('label');
+    
+    /*
+    if (event && event.type === 'focusin') {
+      label.hide();
+    } else if (event && event.type === 'focusout') {
+      label.css('opacity', options.placeholderOpacity);
+    }
+    */
+    
+    if (event && event.type !== 'keydown') {
+      toggleLabel(this, label);
+    } else {
+      // Use timeout to catch val() just after the key is pressed
+      // Using keyup is too slow.   
+      (function(input) {
+        setTimeout(function() {
+          toggleLabel(input, label);
+        }, 0);
+      })(this);
+    }
+    
+    if (event && event.type === 'focusin') {
+       label.hide();
+    }
+  };
+  
+  var toggleLabel = function(input, label) {
+    if ($(input).val()) {
+      label.hide();
+    } else {
+      label.show();
+    }
+  };
+
+  $.fn.stickyPlaceholders = function(options) {
+    var defaults = {
+      wrapperClass: 'sticky-placeholder-wrapper',
+      wrapperDisplay: 'block',
+      labelClass: 'sticky-placeholder-label',
+      placeholderAttr: 'placeholder',
+      dataAttr: 'data-sticky-placeholder',
+      placeholderColor: '#000',
+      placeholderOpacity: 0.5,
+      placeholderFocusOpacity: 0.25
+    };
+    options = $.extend(defaults, options);
+
+    return this.each(function() {
+      var input       = $(this),
+          placeholder = input.attr(options.placeholderAttr),
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+          labelStyle;
+
+      // store a reference to each input's label
+      input.data('label', label);
+
+      // remove the placeholder attribute to avoid conflcits
+      input.removeAttr('placeholder');
+      
+      // If the dataAttr is set and it's not equal to the placeholderAttr
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+        input.attr('data-sticky-placeholder', placeholder);
+      }
+
+      labelStyle = {
+        'color': options.placeholderColor,
+        'cursor': 'text',
+        'font-family': input.css('font-family'),
+        'font-weight': input.css('font-weight'),
+        'font-size': input.css('font-size'),
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+        'opacity': options.placeholderOpacity,
+        'padding-left': input.css('padding-left'),
+        'padding-top': input.css('padding-top'),
+        'position': 'absolute',
+        'text-transform': input.css('text-transform'),
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+      };
+      label.css(labelStyle);
+      
+      // hide the placeholder if the input already has a value
+      if (input.val()) {
+        label.hide();
+      }
+
+      $(this).bind('keydown input focusin focusout', function(event) {
+        $.SD.alterParent.call(this, options, event);
+      });
+        
+      // prevent click/dblclick from selecting the label text
+      label.bind('mousedown', function(e) {
+        e.preventDefault();
+      });
+      
+      // call alterParent initially without an event to set up the wrapper elements
+      $.SD.alterParent.call(this, options);
+    });
+  };
+ 
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+       $("#" + file_id).on("keydown", function(e) {
+               var that = $(this);
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.which === 9) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + after_id).focus();
+                       }, 1);
+               }
+       });
+       
+       $("#" + after_id).on("keydown", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + file_id).focus();
+                       }, 1);
+               }
+       });
+}  
+
+$.SD.closeWP = function() {
+       var Browser = navigator.appName;
+       var indexB = Browser.indexOf('Explorer');
+       if (indexB > 0) {
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);
+           window.opener.focus();
+           if (Version >= 7) {
+               window.open('', '_self', '');
+               window.close();
+           }
+           else if (Version == 6) {
+               window.opener = null;
+               window.close();
+           }
+           else {
+               window.opener = '';
+               window.close();
+           }
+       }
+       else {
+           window.close();
+       }
+}
+
+$.SD.profileFacebook = function() {
+       location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+        switch($(this).attr('id')) {
+        case 'changeEn': onClickChangeEn(e);  break;
+        case 'changeZh': onClickChangeZh(e); break;
+        case 'changeKo': onClickChangeKo(e); break;
+        case 'signOut': onClickSignOut(e); break;
+        case 'signUp': onClickSignUp(e); break;
+        case 'signIn': onClickSignIn(e); break;
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+        case 'signOff': onClickSignOff(e); break;
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+        case 'deleteAccount' : onClickDeleteAccount(e); break;
+        }
+});
+ 
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+       e.preventDefault();
+       var $this = $(this);
+       
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+               var sns = $this.attr("id").substring(4).toLowerCase();
+               switch(sns) {
+               case "facebook" :
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+                       $("div.content img").each(function() {
+                               var that = $(this);
+                               if(that.width() > 200 && that.height() > 200) {
+                                       imgUrl = that.attr("src");
+                                       return false;
+                               }
+                       });
+                       
+                       var data = {
+                               app_id : $("#sd_appId").text(),
+                               link : copyUrl,
+                               picture : imgUrl,
+                               name : $("title").text(),
+                               caption : "developer.samsung.com",
+                               description : $("div.content p").eq(0).text(),
+                               redirectUri : "http://" + location.host + "/board/sns.do"
+                       };
+                       var url = "https://www.facebook.com/dialog/feed?" ;
+                       url += "app_id=" + data.app_id + "&" ;
+                       url += "link=" + data.link + "&" ;
+                       url += "picture=" + data.picture + "&" ;
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;
+                       url += "redirect_uri=" + data.redirectUri ;
+                       sendSNS(sns, url, 850, 600);
+                       break;
+               case "twitter" :
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+                       break;
+               }
+       }
+       
+       function sendSNS(sns, url, iWidth, iHeight) {
+               var popObj = { url : url
+                                    , width : iWidth
+                                    , height: iHeight
+                                    , target: sns
+                                    , scrollbars: "yes"
+                                    , resizeable: "yes"};
+       
+               $SD.popupCenter(popObj);
+       }
+})
+ 
+//document rady End #########################################
+ });
+
+;(function(){
+       window.deviceImageError = function(el) {
+               var noImage = noImage || '/images/common/device_details_noimage.gif';
+               if (el.src === noImage) 
+                       return;
+               el.src = noImage;
+       };
+})();
+
+function commonDownload(fileName, categoryId){
+       if (fileName == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!!!")
+               return;
+       }else{
+               $SD.commonDownload(fileName, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+               });
+       }
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+/*
+function layer_view(id){
+
+       var $layer = $('#'+id);
+       var $down  = $('.license-layer').find('a#down');
+
+       $layer.show();
+       $layer.find('.close, #down').click(function(){
+               $layer.hide();
+       });
+
+       function countChecked() {
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
+       }
+
+       $(":checkbox").click(countChecked);
+}
+*/
diff --git a/org.tizen.gettingstarted/html/scripts/jquery.util.js b/org.tizen.gettingstarted/html/scripts/jquery.util.js
new file mode 100644 (file)
index 0000000..3fc3ad0
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
+ *          
+ *   class: Inside the class attribute, wrapped in curly braces: { }
+ *   
+ *   elem:  Inside a child element (e.g. a script tag). The
+ *          name parameter indicates *which* element.
+ *          
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ * 
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ * 
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ * 
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ * 
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+       metadata : {
+               defaults : {
+                       type: 'class',
+                       name: 'metadata',
+                       cre: /({.*})/,
+                       single: 'metadata'
+               },
+               setType: function( type, name ){
+                       this.defaults.type = type;
+                       this.defaults.name = name;
+               },
+               get: function( elem, opts ){
+                       var settings = $.extend({},this.defaults,opts);
+                       // check for empty string in single property
+                       if ( !settings.single.length ) settings.single = 'metadata';
+                       
+                       var data = $.data(elem, settings.single);
+                       // returned cached data if it already exists
+                       if ( data ) return data;
+                       
+                       data = "{}";
+                       
+                       if ( settings.type == "class" ) {
+                               var m = settings.cre.exec( elem.className );
+                               if ( m )
+                                       data = m[1];
+                       } else if ( settings.type == "elem" ) {
+                               if( !elem.getElementsByTagName )
+                                       return undefined;
+                               var e = elem.getElementsByTagName(settings.name);
+                               if ( e.length )
+                                       data = $.trim(e[0].innerHTML);
+                       } else if ( elem.getAttribute != undefined ) {
+                               var attr = elem.getAttribute( settings.name );
+                               if ( attr )
+                                       data = attr;
+                       }
+                       
+                       if ( data.indexOf( '{' ) <0 )
+                       data = "{" + data + "}";
+                       
+                       data = eval("(" + data + ")");
+                       
+                       $.data( elem, settings.single, data );
+                       return data;
+               }
+       }
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+       return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+       // http://docs.jquery.com/Plugins/Validation/validate
+       validate: function( options ) {
+
+               // if nothing is selected, return nothing; can't chain anyway
+               if (!this.length) {
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+                       return;
+               }
+
+               // check if a validator for this form was already created
+               var validator = $.data(this[0], 'validator');
+               if ( validator ) {
+                       return validator;
+               }
+
+               // Add novalidate tag if HTML5.
+               this.attr('novalidate', 'novalidate');
+
+               validator = new $.validator( options, this[0] );
+               $.data(this[0], 'validator', validator);
+
+               if ( validator.settings.onsubmit ) {
+
+                       var inputsAndButtons = this.find("input, button");
+
+                       // allow suppresing validation by adding a cancel class to the submit button
+                       inputsAndButtons.filter(".cancel").click(function () {
+                               validator.cancelSubmit = true;
+                       });
+
+                       // when a submitHandler is used, capture the submitting button
+                       if (validator.settings.submitHandler) {
+                               inputsAndButtons.filter(":submit").click(function () {
+                                       validator.submitButton = this;
+                               });
+                       }
+
+                       // validate the form on submit
+                       this.submit( function( event ) {
+                               if ( validator.settings.debug )
+                                       // prevent form submit to be able to see console output
+                                       event.preventDefault();
+
+                               function handle() {
+                                       if ( validator.settings.submitHandler ) {
+                                               if (validator.submitButton) {
+                                                       // insert a hidden input as a replacement for the missing submit button
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+                                               }
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );
+                                               if (validator.submitButton) {
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+                                                       hidden.remove();
+                                               }
+                                               return false;
+                                       }
+                                       return true;
+                               }
+
+                               // prevent submit for invalid forms or custom submit handlers
+                               if ( validator.cancelSubmit ) {
+                                       validator.cancelSubmit = false;
+                                       return handle();
+                               }
+                               if ( validator.form() ) {
+                                       if ( validator.pendingRequest ) {
+                                               validator.formSubmitted = true;
+                                               return false;
+                                       }
+                                       return handle();
+                               } else {
+                                       validator.focusInvalid();
+                                       return false;
+                               }
+                       });
+               }
+
+               return validator;
+       },
+       // http://docs.jquery.com/Plugins/Validation/valid
+       valid: function() {
+        if ( $(this[0]).is('form')) {
+            return this.validate().form();
+        } else {
+            var valid = true;
+            var validator = $(this[0].form).validate();
+            this.each(function() {
+                               valid &= validator.element(this);
+            });
+            return valid;
+        }
+    },
+       // attributes: space seperated list of attributes to retrieve and remove
+       removeAttrs: function(attributes) {
+               var result = {},
+                       $element = this;
+               $.each(attributes.split(/\s/), function(index, value) {
+                       result[value] = $element.attr(value);
+                       $element.removeAttr(value);
+               });
+               return result;
+       },
+       // http://docs.jquery.com/Plugins/Validation/rules
+       rules: function(command, argument) {
+               var element = this[0];
+
+               if (command) {
+                       var settings = $.data(element.form, 'validator').settings;
+                       var staticRules = settings.rules;
+                       var existingRules = $.validator.staticRules(element);
+                       switch(command) {
+                       case "add":
+                               $.extend(existingRules, $.validator.normalizeRule(argument));
+                               staticRules[element.name] = existingRules;
+                               if (argument.messages)
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+                               break;
+                       case "remove":
+                               if (!argument) {
+                                       delete staticRules[element.name];
+                                       return existingRules;
+                               }
+                               var filtered = {};
+                               $.each(argument.split(/\s/), function(index, method) {
+                                       filtered[method] = existingRules[method];
+                                       delete existingRules[method];
+                               });
+                               return filtered;
+                       }
+               }
+
+               var data = $.validator.normalizeRules(
+               $.extend(
+                       {},
+                       $.validator.metadataRules(element),
+                       $.validator.classRules(element),
+                       $.validator.attributeRules(element),
+                       $.validator.staticRules(element)
+               ), element);
+
+               // make sure required is at front
+               if (data.required) {
+                       var param = data.required;
+                       delete data.required;
+                       data = $.extend({required: param}, data);
+               }
+
+               return data;
+       }
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+       // http://docs.jquery.com/Plugins/Validation/blank
+       blank: function(a) {return !$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/filled
+       filled: function(a) {return !!$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/unchecked
+       unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+       this.settings = $.extend( true, {}, $.validator.defaults, options );
+       this.currentForm = form;
+       this.init();
+};
+
+$.validator.format = function(source, params) {
+       if ( arguments.length == 1 )
+               return function() {
+                       var args = $.makeArray(arguments);
+                       args.unshift(source);
+                       return $.validator.format.apply( this, args );
+               };
+       if ( arguments.length > 2 && params.constructor != Array  ) {
+               params = $.makeArray(arguments).slice(1);
+       }
+       if ( params.constructor != Array ) {
+               params = [ params ];
+       }
+       $.each(params, function(i, n) {
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+       });
+       return source;
+};
+
+$.extend($.validator, {
+
+       defaults: {
+               messages: {},
+               groups: {},
+               rules: {},
+               errorClass: "error",
+               validClass: "valid",
+               errorElement: "label",
+               focusInvalid: true,
+               errorContainer: $( [] ),
+               errorLabelContainer: $( [] ),
+               onsubmit: true,
+               ignore: ":hidden",
+               ignoreTitle: false,
+               onfocusin: function(element, event) {
+                       this.lastActive = element;
+
+                       // hide error label and remove error class on focus if enabled
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+                               this.addWrapper(this.errorsFor(element)).hide();
+                       }
+               },
+               onfocusout: function(element, event) {
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+                               this.element(element);
+                       }
+               },
+               onkeyup: function(element, event) {
+                       if ( element.name in this.submitted || element == this.lastElement ) {
+                               this.element(element);
+                       }
+               },
+               onclick: function(element, event) {
+                       // click on selects, radiobuttons and checkboxes
+                       if ( element.name in this.submitted )
+                               this.element(element);
+                       // or option elements, check parent select in that case
+                       else if (element.parentNode.name in this.submitted)
+                               this.element(element.parentNode);
+               },
+               highlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+                       } else {
+                               $(element).addClass(errorClass).removeClass(validClass);
+                       }
+               },
+               unhighlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+                       } else {
+                               $(element).removeClass(errorClass).addClass(validClass);
+                       }
+               }
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+       setDefaults: function(settings) {
+               $.extend( $.validator.defaults, settings );
+       },
+
+       messages: {
+               required: "This field is required.",
+               remote: "Please fix this field.",
+               email: "Please enter a valid email address.",
+               url: "Please enter a valid URL.",
+               date: "Please enter a valid date.",
+               dateISO: "Please enter a valid date (ISO).",
+               number: "Please enter a valid number.",
+               digits: "Please enter only digits.",
+               creditcard: "Please enter a valid credit card number.",
+               equalTo: "Please enter the same value again.",
+               accept: "Please enter a value with a valid extension.",
+               maxlength: $.validator.format("Please enter no more than {0} characters."),
+               minlength: $.validator.format("Please enter at least {0} characters."),
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+               range: $.validator.format("Please enter a value between {0} and {1}."),
+               max: $.validator.format("Please enter a value less than or equal to {0}."),
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")
+       },
+
+       autoCreateRanges: false,
+
+       prototype: {
+
+               init: function() {
+                       this.labelContainer = $(this.settings.errorLabelContainer);
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+                       this.submitted = {};
+                       this.valueCache = {};
+                       this.pendingRequest = 0;
+                       this.pending = {};
+                       this.invalid = {};
+                       this.reset();
+
+                       var groups = (this.groups = {});
+                       $.each(this.settings.groups, function(key, value) {
+                               $.each(value.split(/\s/), function(index, name) {
+                                       groups[name] = key;
+                               });
+                       });
+                       var rules = this.settings.rules;
+                       $.each(rules, function(key, value) {
+                               rules[key] = $.validator.normalizeRule(value);
+                       });
+
+                       function delegate(event) {
+                               var validator = $.data(this[0].form, "validator"),
+                                       eventType = "on" + event.type.replace(/^validate/, "");
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+                       }
+                       $(this.currentForm)
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +
+                                               "[type='range'], [type='color'] ",
+                                               "focusin focusout keyup", delegate)
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+                       if (this.settings.invalidHandler)
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/form
+               form: function() {
+                       this.checkForm();
+                       $.extend(this.submitted, this.errorMap);
+                       this.invalid = $.extend({}, this.errorMap);
+                       if (!this.valid())
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                       this.showErrors();
+                       return this.valid();
+               },
+
+               // 원본소스
+               /*
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               this.check( elements[i] );
+                       }
+                       return this.valid();
+               },
+               */
+
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+                                               this.check( this.findByName( elements[i].name )[cnt] );
+                                       }
+                               } else {
+                                       this.check( elements[i] );
+                               }
+                       }
+                       return this.valid();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/element
+               element: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+                       this.lastElement = element;
+                       this.prepareElement( element );
+                       this.currentElements = $(element);
+                       var result = this.check( element );
+                       if ( result ) {
+                               delete this.invalid[element.name];
+                       } else {
+                               this.invalid[element.name] = true;
+                       }
+                       if ( !this.numberOfInvalids() ) {
+                               // Hide error containers on last error
+                               this.toHide = this.toHide.add( this.containers );
+                       }
+                       this.showErrors();
+                       return result;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+               showErrors: function(errors) {
+                       if(errors) {
+                               // add items to error list and map
+                               $.extend( this.errorMap, errors );
+                               this.errorList = [];
+                               for ( var name in errors ) {
+                                       this.errorList.push({
+                                               message: errors[name],
+                                               element: this.findByName(name)[0]
+                                       });
+                               }
+                               // remove items from success list
+                               this.successList = $.grep( this.successList, function(element) {
+                                       return !(element.name in errors);
+                               });
+                       }
+                       this.settings.showErrors
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+                               : this.defaultShowErrors();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+               resetForm: function() {
+                       if ( $.fn.resetForm )
+                               $( this.currentForm ).resetForm();
+                       this.submitted = {};
+                       this.lastElement = null;
+                       this.prepareForm();
+                       this.hideErrors();
+                       this.elements().removeClass( this.settings.errorClass );
+               },
+
+               numberOfInvalids: function() {
+                       return this.objectLength(this.invalid);
+               },
+
+               objectLength: function( obj ) {
+                       var count = 0;
+                       for ( var i in obj )
+                               count++;
+                       return count;
+               },
+
+               hideErrors: function() {
+                       this.addWrapper( this.toHide ).hide();
+               },
+
+               valid: function() {
+                       return this.size() == 0;
+               },
+
+               size: function() {
+                       return this.errorList.length;
+               },
+
+               focusInvalid: function() {
+                       if( this.settings.focusInvalid ) {
+                               try {
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+                                       .filter(":visible")
+                                       .focus()
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+                                       .trigger("focusin");
+                               } catch(e) {
+                                       // ignore IE throwing errors when focusing hidden elements
+                               }
+                       }
+               },
+
+               findLastActive: function() {
+                       var lastActive = this.lastActive;
+                       return lastActive && $.grep(this.errorList, function(n) {
+                               return n.element.name == lastActive.name;
+                       }).length == 1 && lastActive;
+               },
+
+               elements: function() {
+                       var validator = this,
+                               rulesCache = {};
+
+                       // select all valid inputs inside the form (no submit or reset buttons)
+                       return $(this.currentForm)
+                       .find("input, select, textarea")
+                       .not(":submit, :reset, :image, [disabled]")
+                       .not( this.settings.ignore )
+                       .filter(function() {
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+                               // select only the first element for each name, and only those with rules specified
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+                                       return false;
+
+                               rulesCache[this.name] = true;
+                               return true;
+                       });
+               },
+
+               clean: function( selector ) {
+                       return $( selector )[0];
+               },
+
+               errors: function() {
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+               },
+
+               reset: function() {
+                       this.successList = [];
+                       this.errorList = [];
+                       this.errorMap = {};
+                       this.toShow = $([]);
+                       this.toHide = $([]);
+                       this.currentElements = $([]);
+               },
+
+               prepareForm: function() {
+                       this.reset();
+                       this.toHide = this.errors().add( this.containers );
+               },
+
+               prepareElement: function( element ) {
+                       this.reset();
+                       this.toHide = this.errorsFor(element);
+               },
+
+               check: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+
+                       var rules = $(element).rules();
+                       var dependencyMismatch = false;
+                       for (var method in rules ) {
+                               var rule = { method: method, parameters: rules[method] };
+                               try {
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+                                       // if a method indicates that the field is optional and therefore valid,
+                                       // don't mark it as valid when there are no other rules
+                                       if ( result == "dependency-mismatch" ) {
+                                               dependencyMismatch = true;
+                                               continue;
+                                       }
+                                       dependencyMismatch = false;
+
+                                       if ( result == "pending" ) {
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );
+                                               return;
+                                       }
+
+                                       if( !result ) {
+                                               this.formatAndAdd( element, rule );
+                                               return false;
+                                       }
+                               } catch(e) {
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+                                                + ", check the '" + rule.method + "' method", e);
+                                       throw e;
+                               }
+                       }
+                       if (dependencyMismatch)
+                               return;
+                       if ( this.objectLength(rules) )
+                               this.successList.push(element);
+                       return true;
+               },
+
+               // return the custom message for the given element and validation method
+               // specified in the element's "messages" metadata
+               customMetaMessage: function(element, method) {
+                       if (!$.metadata)
+                               return;
+
+                       var meta = this.settings.meta
+                               ? $(element).metadata()[this.settings.meta]
+                               : $(element).metadata();
+
+                       return meta && meta.messages && meta.messages[method];
+               },
+
+               // return the custom message for the given element name and validation method
+               customMessage: function( name, method ) {
+                       var m = this.settings.messages[name];
+                       return m && (m.constructor == String
+                               ? m
+                               : m[method]);
+               },
+
+               // return the first defined argument, allowing empty strings
+               findDefined: function() {
+                       for(var i = 0; i < arguments.length; i++) {
+                               if (arguments[i] !== undefined)
+                                       return arguments[i];
+                       }
+                       return undefined;
+               },
+
+               defaultMessage: function( element, method) {
+                       return this.findDefined(
+                               this.customMessage( element.name, method ),
+                               this.customMetaMessage( element, method ),
+                               // title is never undefined, so handle empty string as undefined
+                               !this.settings.ignoreTitle && element.title || undefined,
+                               $.validator.messages[method],
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"
+                       );
+               },
+
+               formatAndAdd: function( element, rule ) {
+                       var message = this.defaultMessage( element, rule.method ),
+                               theregex = /\$?\{(\d+)\}/g;
+                       if ( typeof message == "function" ) {
+                               message = message.call(this, rule.parameters, element);
+                       } else if (theregex.test(message)) {
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+                       }
+                       this.errorList.push({
+                               message: message,
+                               element: element
+                       });
+
+                       this.errorMap[element.name] = message;
+                       this.submitted[element.name] = message;
+               },
+
+               addWrapper: function(toToggle) {
+                       if ( this.settings.wrapper )
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+                       return toToggle;
+               },
+
+               defaultShowErrors: function() {
+                       for ( var i = 0; this.errorList[i]; i++ ) {
+                               var error = this.errorList[i];
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+                               this.showLabel( error.element, error.message );
+                       }
+                       if( this.errorList.length ) {
+                               this.toShow = this.toShow.add( this.containers );
+                       }
+                       if (this.settings.success) {
+                               for ( var i = 0; this.successList[i]; i++ ) {
+                                       this.showLabel( this.successList[i] );
+                               }
+                       }
+                       if (this.settings.unhighlight) {
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+                               }
+                       }
+                       this.toHide = this.toHide.not( this.toShow );
+                       this.hideErrors();
+                       this.addWrapper( this.toShow ).show();
+               },
+
+               validElements: function() {
+                       return this.currentElements.not(this.invalidElements());
+               },
+
+               invalidElements: function() {
+                       return $(this.errorList).map(function() {
+                               return this.element;
+                       });
+               },
+
+               showLabel: function(element, message) {
+                       var label = this.errorsFor( element );
+                       if ( label.length ) {
+                               // refresh error/success class
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+                               // check if we have a generated label, replace the message then
+                               label.attr("generated") && label.html(message);
+                       } else {
+                               // create label
+                               label = $("<" + this.settings.errorElement + "/>")
+                                       .attr({"for":  this.idOrName(element), generated: true})
+                                       .addClass(this.settings.errorClass)
+                                       .html(message || "");
+                               if ( this.settings.wrapper ) {
+                                       // make sure the element is visible, even in IE
+                                       // actually showing the wrapped element is handled elsewhere
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+                               }
+                               if ( !this.labelContainer.append(label).length )
+                                       this.settings.errorPlacement
+                                               ? this.settings.errorPlacement(label, $(element) )
+                                               : label.insertAfter(element);
+                       }
+                       if ( !message && this.settings.success ) {
+                               label.text("");
+                               typeof this.settings.success == "string"
+                                       ? label.addClass( this.settings.success )
+                                       : this.settings.success( label );
+                       }
+                       this.toShow = this.toShow.add(label);
+               },
+
+               errorsFor: function(element) {
+                       var name = this.idOrName(element);
+               return this.errors().filter(function() {
+                               return $(this).attr('for') == name;
+                       });
+               },
+
+               idOrName: function(element) {
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+               },
+
+               validationTargetFor: function(element) {
+                       // if radio/checkbox, validate first element in group instead
+                       if (this.checkable(element)) {
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
+                       }
+                       return element;
+               },
+
+               checkable: function( element ) {
+                       return /radio|checkbox/i.test(element.type);
+               },
+
+               findByName: function( name ) {
+                       // select by name and filter by form for performance over form.find("[name=...]")
+                       var form = this.currentForm;
+                       return $(document.getElementsByName(name)).map(function(index, element) {
+                               return element.form == form && element.name == name && element  || null;
+                       });
+               },
+
+               getLength: function(value, element) {
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               return $("option:selected", element).length;
+                       case 'input':
+                               if( this.checkable( element) )
+                                       return this.findByName(element.name).filter(':checked').length;
+                       }
+                       return value.length;
+               },
+
+               depend: function(param, element) {
+                       return this.dependTypes[typeof param]
+                               ? this.dependTypes[typeof param](param, element)
+                               : true;
+               },
+
+               dependTypes: {
+                       "boolean": function(param, element) {
+                               return param;
+                       },
+                       "string": function(param, element) {
+                               return !!$(param, element.form).length;
+                       },
+                       "function": function(param, element) {
+                               return param(element);
+                       }
+               },
+
+               optional: function(element) {
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+               },
+
+               startRequest: function(element) {
+                       if (!this.pending[element.name]) {
+                               this.pendingRequest++;
+                               this.pending[element.name] = true;
+                       }
+               },
+
+               stopRequest: function(element, valid) {
+                       this.pendingRequest--;
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0
+                       if (this.pendingRequest < 0)
+                               this.pendingRequest = 0;
+                       delete this.pending[element.name];
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+                               $(this.currentForm).submit();
+                               this.formSubmitted = false;
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                               this.formSubmitted = false;
+                       }
+               },
+
+               previousValue: function(element) {
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
+                               old: null,
+                               valid: true,
+                               message: this.defaultMessage( element, "remote" )
+                       });
+               }
+
+       },
+
+       classRuleSettings: {
+               required: {required: true},
+               email: {email: true},
+               url: {url: true},
+               date: {date: true},
+               dateISO: {dateISO: true},
+               dateDE: {dateDE: true},
+               number: {number: true},
+               numberDE: {numberDE: true},
+               digits: {digits: true},
+               creditcard: {creditcard: true}
+       },
+
+       addClassRules: function(className, rules) {
+               className.constructor == String ?
+                       this.classRuleSettings[className] = rules :
+                       $.extend(this.classRuleSettings, className);
+       },
+
+       classRules: function(element) {
+               var rules = {};
+               var classes = $(element).attr('class');
+               classes && $.each(classes.split(' '), function() {
+                       if (this in $.validator.classRuleSettings) {
+                               $.extend(rules, $.validator.classRuleSettings[this]);
+                       }
+               });
+               return rules;
+       },
+
+       attributeRules: function(element) {
+               var rules = {};
+               var $element = $(element);
+
+               for (var method in $.validator.methods) {
+                       var value;
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
+                       if (method === 'required' && typeof $.fn.prop === 'function') {
+                               value = $element.prop(method);
+                       } else {
+                               value = $element.attr(method);
+                       }
+                       if (value) {
+                               rules[method] = value;
+                       } else if ($element[0].getAttribute("type") === method) {
+                               rules[method] = true;
+                       }
+               }
+
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+                       delete rules.maxlength;
+               }
+
+               return rules;
+       },
+
+       metadataRules: function(element) {
+               if (!$.metadata) return {};
+
+               var meta = $.data(element.form, 'validator').settings.meta;
+               return meta ?
+                       $(element).metadata()[meta] :
+                       $(element).metadata();
+       },
+
+       staticRules: function(element) {
+               var rules = {};
+               var validator = $.data(element.form, 'validator');
+               if (validator.settings.rules) {
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+               }
+               return rules;
+       },
+
+       normalizeRules: function(rules, element) {
+               // handle dependency check
+               $.each(rules, function(prop, val) {
+                       // ignore rule when param is explicitly false, eg. required:false
+                       if (val === false) {
+                               delete rules[prop];
+                               return;
+                       }
+                       if (val.param || val.depends) {
+                               var keepRule = true;
+                               switch (typeof val.depends) {
+                                       case "string":
+                                               keepRule = !!$(val.depends, element.form).length;
+                                               break;
+                                       case "function":
+                                               keepRule = val.depends.call(element, element);
+                                               break;
+                               }
+                               if (keepRule) {
+                                       rules[prop] = val.param !== undefined ? val.param : true;
+                               } else {
+                                       delete rules[prop];
+                               }
+                       }
+               });
+
+               // evaluate parameters
+               $.each(rules, function(rule, parameter) {
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+               });
+
+               // clean number parameters
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
+                       if (rules[this]) {
+                               rules[this] = Number(rules[this]);
+                       }
+               });
+               $.each(['rangelength', 'range'], function() {
+                       if (rules[this]) {
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+                       }
+               });
+
+               if ($.validator.autoCreateRanges) {
+                       // auto-create ranges
+                       if (rules.min && rules.max) {
+                               rules.range = [rules.min, rules.max];
+                               delete rules.min;
+                               delete rules.max;
+                       }
+                       if (rules.minlength && rules.maxlength) {
+                               rules.rangelength = [rules.minlength, rules.maxlength];
+                               delete rules.minlength;
+                               delete rules.maxlength;
+                       }
+               }
+
+               // To support custom messages in metadata ignore rule methods titled "messages"
+               if (rules.messages) {
+                       delete rules.messages;
+               }
+
+               return rules;
+       },
+
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+       normalizeRule: function(data) {
+               if( typeof data == "string" ) {
+                       var transformed = {};
+                       $.each(data.split(/\s/), function() {
+                               transformed[this] = true;
+                       });
+                       data = transformed;
+               }
+               return data;
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+       addMethod: function(name, method, message) {
+               $.validator.methods[name] = method;
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+               if (method.length < 3) {
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
+               }
+       },
+
+       methods: {
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/required
+               required: function(value, element, param) {
+                       // check if dependency is met
+                       if ( !this.depend(param, element) )
+                               return "dependency-mismatch";
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               // could be an array for select-multiple or a string, both are fine this way
+                               var val = $(element).val();
+                               return val && val.length > 0;
+                       case 'input':
+                               if ( this.checkable(element) )
+                                       return this.getLength(value, element) > 0;
+                       default:
+                               return $.trim(value).length > 0;
+                       }
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote
+               remote: function(value, element, param) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+
+                       var previous = this.previousValue(element);
+                       if (!this.settings.messages[element.name] )
+                               this.settings.messages[element.name] = {};
+                       previous.originalMessage = this.settings.messages[element.name].remote;
+                       this.settings.messages[element.name].remote = previous.message;
+
+                       param = typeof param == "string" && {url:param} || param;
+
+                       if ( this.pending[element.name] ) {
+                               return "pending";
+                       }
+                       if ( previous.old === value ) {
+                               return previous.valid;
+                       }
+
+                       previous.old = value;
+                       var validator = this;
+                       this.startRequest(element);
+                       var data = {};
+                       data[element.name] = value;
+                       $.ajax($.extend(true, {
+                               url: param,
+                               mode: "abort",
+                               port: "validate" + element.name,
+                               dataType: "json",
+                               data: data,
+                               success: function(response) {
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;
+                                       var valid = response === true;
+                                       if ( valid ) {
+                                               var submitted = validator.formSubmitted;
+                                               validator.prepareElement(element);
+                                               validator.formSubmitted = submitted;
+                                               validator.successList.push(element);
+                                               validator.showErrors();
+                                       } else {
+                                               var errors = {};
+                                               var message = response || validator.defaultMessage( element, "remote" );
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+                                               validator.showErrors(errors);
+                                       }
+                                       previous.valid = valid;
+                                       validator.stopRequest(element, valid);
+                               }
+                       }, param));
+                       return "pending";
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
+               minlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+               maxlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+               rangelength: function(value, element, param) {
+                       var length = this.getLength($.trim(value), element);
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/min
+               min: function( value, element, param ) {
+                       return this.optional(element) || value >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/max
+               max: function( value, element, param ) {
+                       return this.optional(element) || value <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/range
+               range: function( value, element, param ) {
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/email
+               email: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/url
+               url: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/date
+               date: function(value, element) {
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+               dateISO: function(value, element) {
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/number
+               number: function(value, element) {
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits
+               digits: function(value, element) {
+                       return this.optional(element) || /^\d+$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+               // based on http://en.wikipedia.org/wiki/Luhn
+               creditcard: function(value, element) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+                       // accept only spaces, digits and dashes
+                       if (/[^0-9 -]+/.test(value))
+                               return false;
+                       var nCheck = 0,
+                               nDigit = 0,
+                               bEven = false;
+
+                       value = value.replace(/\D/g, "");
+
+                       for (var n = value.length - 1; n >= 0; n--) {
+                               var cDigit = value.charAt(n);
+                               var nDigit = parseInt(cDigit, 10);
+                               if (bEven) {
+                                       if ((nDigit *= 2) > 9)
+                                               nDigit -= 9;
+                               }
+                               nCheck += nDigit;
+                               bEven = !bEven;
+                       }
+
+                       return (nCheck % 10) == 0;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept
+               accept: function(value, element, param) {
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+               equalTo: function(value, element, param) {
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+                               $(element).valid();
+                       });
+                       return value == target.val();
+               }
+
+       }
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+       var pendingRequests = {};
+       // Use a prefilter if available (1.5+)
+       if ( $.ajaxPrefilter ) {
+               $.ajaxPrefilter(function(settings, _, xhr) {
+                       var port = settings.port;
+                       if (settings.mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               pendingRequests[port] = xhr;
+                       }
+               });
+       } else {
+               // Proxy ajax
+               var ajax = $.ajax;
+               $.ajax = function(settings) {
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+                       if (mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               return (pendingRequests[port] = ajax.apply(this, arguments));
+                       }
+                       return ajax.apply(this, arguments);
+               };
+       }
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+       // only implement if not provided by jQuery core (since 1.4)
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+               $.each({
+                       focus: 'focusin',
+                       blur: 'focusout'
+               }, function( original, fix ){
+                       $.event.special[fix] = {
+                               setup:function() {
+                                       this.addEventListener( original, handler, true );
+                               },
+                               teardown:function() {
+                                       this.removeEventListener( original, handler, true );
+                               },
+                               handler: function(e) {
+                                       arguments[0] = $.event.fix(e);
+                                       arguments[0].type = fix;
+                                       return $.event.handle.apply(this, arguments);
+                               }
+                       };
+                       function handler(e) {
+                               e = $.event.fix(e);
+                               e.type = fix;
+                               return $.event.handle.call(this, e);
+                       }
+               });
+       };
+       $.extend($.fn, {
+               validateDelegate: function(delegate, type, handler) {
+                       return this.bind(type, function(event) {
+                               var target = $(event.target);
+                               if (target.is(delegate)) {
+                                       return handler.apply(target, arguments);
+                               }
+                       });
+               }
+       });
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js b/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js
new file mode 100644 (file)
index 0000000..51471a1
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/scripts/navi.js b/org.tizen.gettingstarted/html/scripts/navi.js
new file mode 100644 (file)
index 0000000..badc738
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[
+    var staticURL = "http://img-developer.samsung.com";
+       var sslCall = "";
+
+       if('' !== 'N') {
+               var locationStr = location.href;
+               if(locationStr.indexOf("https://") > -1) {
+                       location.href = "http://" + locationStr.substring(8);
+               }     
+    }
+
+//     if( typeof($) === function ) {
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+               //? ??? ?? ?? ??? ?? ?? ???.
+//     }
+    $SD.pagination.alt = {
+               first:"go first",
+               prev:"go prev",
+               next:"go next",
+               last:"go last"
+    };
+    $(document).ready(function(){
+       var myVar;
+           topSearchInit();//top search ??
+           $('#searchTop').attr("autocomplete","off");
+           var searchingBoolean = false;
+           
+           var topSearchChange = function(){
+               
+               if (searchingBoolean) return;
+               
+                       var searchInput = $('#searchTop').val();
+                       
+                       if($('#searchTop').val() != ""){
+                               $("#topAutocomplete").hide();
+                               searchingBoolean = true;
+                               
+                               var jsonData = {
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+                                               async : true,
+                                               data : { searchInput : searchInput},
+                                               success : function(data){
+                                                       if (searchInput == $('#searchTop').val()){
+                                                               var autoComplete = data.kwdNm;
+                                                               var tmpHtml = "";
+                                                               
+                                                               if (autoComplete.length > 0){
+                                                                       $('#topAutocomplete').children().remove();
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+                                                                       $.each(autoComplete, function(i, item){
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+                                                                               a.data('keyword', item.kwdNm);
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
+                                                                       });
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+                                                                               if(e.which == 9 && e.shiftKey) {
+                                                                                       return true;
+                                                                               }
+                                                                               
+                                                                               if(e.which == 9) {
+                                                                                       e.preventDefault();
+                                                                                       $('#topAutocomplete').hide();   
+                                                                                       setTimeout(function() {
+                                                                                               $("#searchTopBtn").focus();
+                                                                                       }, 1);
+                                                                               }
+                                                                               
+                                                                       });
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});
+                                                                   $("#searchTopBtn").on("focusout", function(e) {
+                                                                               $('#topAutocomplete').hide();
+                                                                       });
+                                                               }else{
+                                                                       $('#topAutocomplete').children().remove();
+                                                               }
+                                                               if($('#searchTop').val() == ""){
+                                                                       $("#topAutocomplete").hide();
+                                                                       searchingBoolean = false;
+                                                                       return;
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               searchingBoolean = false;
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                               if (autoComplete.length == 0){
+                                                                       $("#topAutocomplete").hide();
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               $("#topAutocomplete").show();
+                                                                               var $searchList = $("#topAutocomplete").find('ul');
+                                                                               var hei = $searchList.outerHeight();
+                                                                               if(hei>180){
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
+                                                                               }
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                       }else{
+                                                               searchingBoolean = false;
+                                                               topSearchChange();
+                                                       }
+                                               },
+                                               error : function() {searchingBoolean = false;}
+                                               
+                               };
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
+                               $SD.ajax.get(jsonData);
+                               searchingBoolean = false;
+                       }
+                       
+                       //console.log("/search/autoComplete.do end");
+                       //console.groupEnd();
+               };
+               
+               $('#searchTop').keyup(function(e){
+                       if($('#searchTop').val() == ""){
+                               $('#topAutocomplete').children().remove();
+                               $("#topAutocomplete").hide();
+                       }else{
+                               if(e.which == 13){
+                                       search();
+                               }else{
+                                       topSearchChange();
+                               }
+                       }
+               });
+               
+               var search = function(){
+                       if($.trim($('#searchTop').val()) == ""){
+                               alert('Search keyword is required.');
+                       }else{
+                               $('#topSearchForm').submit();
+                       }
+               };
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){
+                       e.preventDefault();
+                       var keyword = $(this).data('keyword');
+                       $("#searchTop").val(keyword);
+                       $('#topSearchForm').submit();
+               });
+               
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+                       if(e.which == 13) {
+                               e.preventDefault();
+                               var keyword = $(this).data('keyword');
+                               $("#searchTop").val(keyword);
+                               $('#topSearchForm').submit();                   
+                       }
+               });
+               
+               $('#searchTopBtn').click(function(e){
+                       search();       
+               });  
+    });
+    
+    function topSearchEnter(){
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+               alert('Search keyword is required.');
+               return false;
+       }else{
+               return true;
+       }
+    }
+
+/* Tracking Code TOTAL */
+               var _gaq = _gaq || [];
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+               _gaq.push(['_setAccount', 'UA-6892706-3']);
+               _gaq.push(['_setDomainName', 'samsung.com']);
+               _gaq.push(['_setAllowLinker', true]);
+               _gaq.push(['_trackPageview']);
+               (function() {
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                 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);
+               })();
+       
+               <!--// Tracking Code 1 -->
+                       var _gaq = _gaq || [];
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);
+                       _gaq.push(['_trackPageview']);
+                       (function() {
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                         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);
+                       })();
diff --git a/org.tizen.gettingstarted/html/scripts/search.js b/org.tizen.gettingstarted/html/scripts/search.js
new file mode 100644 (file)
index 0000000..d1ae5ad
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+       var focusTarget = "input";
+
+       //$("#autocomplete").hide();
+
+       //$("#searchInput").bind("keydown", checkSearchText);
+       
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $("#autocomplete").bind("mouseleave",function(){
+               $(this).hide();
+               $("#btnDropdown").removeClass("dropdownoff");
+               $("#btnDropdown").addClass("dropdown");         
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       //$(".autocomplete").css("visibility", "visible");
+                       $("#autocomplete").show();
+                       
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+               }
+               else{
+                       //$(".autocomplete").css("visibility", "hidden");
+                       $("#autocomplete").hide();
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+
+
+
+function topSearchInit()
+{
+       var focusTarget = "input";
+
+       //$("#searchTop").bind("keydown", checkSearchText);
+       
+       $("#searchTop").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {       
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchTop" ).focusin( function()   {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchTop").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".topAutocomplete").css("visibility", "visible");
+               }else{
+                       $(".topAutocomplete").css("visibility", "hidden");
+                       $("#topAutocomplete").hide();
+               }
+       }
+}
diff --git a/org.tizen.gettingstarted/html/scripts/showhide.js b/org.tizen.gettingstarted/html/scripts/showhide.js
new file mode 100644 (file)
index 0000000..cf3dc21
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/showhide.js
@@ -0,0 +1,200 @@
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+       me.find('em').text('Hide');
+       me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+       var me = $(this);
+       var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+       if ( me.next().is(':visible') ){
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+               me.find('em').text('Show');
+               me.next().hide();
+       }
+                                       
+});
+return false;
+})
+}      
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+       var idx = $('.devicespec-tit a').index(this);
+
+       if ( $(this).parent().parent().next().is(':visible') ){
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+               self.find('em').text('Show');
+               self.next().hide();
+
+               return false;
+       }else{
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+               self.find('em').text('Hide');
+
+               self.next().show();
+
+               return false;
+       }
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow =  $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+       var openheading = function(target) {
+               var origin = $(target);
+               target = origin.closest('.devicespec-con');
+               if (!(target.length > 0)) {
+                       target = origin.closest('.devicespec-tit');
+               }
+               if (target.length > 0) {
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
+                       }
+               }
+
+               $(window.location.hash)[0].scrollIntoView();
+       };
+
+       $(".opensection").click(function(){
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');
+               openheading(target);
+       });
+
+       if (window.location.hash) {
+               var target = $(window.location.hash);
+               openheading(target);
+               //$(target).focus(); //uncomment if fail to work
+       }
+
+       var isScrolledIntoView = function(elem)
+       {
+               var docViewTop = $('#contents').scrollTop();
+               var docViewBottom = docViewTop + $('#contents').height();
+
+               var elemTop = $(elem).offset().top;
+               var elemBottom = elemTop + $(elem).height();
+
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
+       }
+
+       $('#contents').scroll();
+       
+
+       var updateH = function(){
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+                       $('.help_breadcrumbs').hide();
+               } else {
+                       $('a.top.sms').hide();
+                       $('.help_breadcrumbs').show();
+               }
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
+
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+
+               if ($('a.top').is(':visible'))
+               {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+               } else {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+               }
+               $('#toc').css('height', $('#toc').css('height') - 5);
+
+               $('#toc_border').height($('#toc').outerHeight() + 5);
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+               $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+               //$('#toc').css('width', $('#toc_border').width() - 40);
+               $('#toc').css('width', $('#toc_border').width() - 49);
+       };
+
+       var updateH_no_toc = function() {
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+               } else {
+                       $('a.top.sms').hide();
+               }
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+       }
+
+       if ($('body').hasClass('no-toc')) {
+               updateH = updateH_no_toc;
+       }
+       $(window).resize(updateH);
+       $('#contents').scroll(updateH);
+       $(window).resize();
+       
+       $('a.top').click(function(){$('#contents').scrollTop(0)});
+
+       var hashchanged = function() {
+               if (window.location.hash.length) {
+                       openheading(window.location.hash);
+                       //$(window.location.hash).scrollTo();
+                       $(window.location.hash)[0].scrollIntoView();
+
+               } else 
+               {
+                       $('#contents').scrollTop(0);
+               }
+       };
+
+       if (("onhashchange" in window) && !($.browser.msie)) { 
+               $(window).bind( 'hashchange',hashchanged);
+       }
+       else { 
+               var prevHash = window.location.hash;
+               window.setInterval(function () {
+                       if (window.location.hash != prevHash) {
+                               hashchanged();
+                               prevHash = window.location.hash;
+                       }
+               }, 100);
+       }
+});
diff --git a/org.tizen.gettingstarted/html/scripts/snippet.js b/org.tizen.gettingstarted/html/scripts/snippet.js
new file mode 100644 (file)
index 0000000..777e9ae
--- /dev/null
+++ b/org.tizen.gettingstarted/html/scripts/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.gettingstarted/index.xml b/org.tizen.gettingstarted/index.xml
new file mode 100644 (file)
index 0000000..2f874ee
--- /dev/null
+++ b/org.tizen.gettingstarted/index.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="Getting Started with Tizen" topic="html/cover_page.htm">
+       
+       <topic href="html/preface/preface.htm" label="Preface"> 
+       </topic>
+       <topic href="html/first_app/first_app.htm" label="Creating Your First Tizen Application">       
+       </topic>
+       <topic href="html/process/app_dev_process.htm" label="Application Development Process">
+               <topic href="html/process/app_dev_process_w.htm" label="Web Application">
+                       <topic href="html/process/creating_app_project_w.htm" label="Creating the Application Project"></topic>
+                       <topic href="html/process/setting_properties_w.htm" label="Setting Project Properties"></topic>
+                       <topic href="html/process/designing_app_ui_w.htm" label="Creating Application UIs with UI Builder"></topic>
+                       <topic href="html/process/coding_app_w.htm" label="Coding Applications"></topic>
+                       <topic href="html/process/run_debug_app_w.htm" label="Running and Debugging Applications"></topic>
+               </topic>        
+               
+               <topic href="html/process/app_dev_process_n.htm" label="Native Application">
+                       <topic href="html/process/setting_properties_n.htm" label="Setting Project Properties"></topic>
+                       <topic href="html/process/designing_app_ui_n.htm" label="Creating Application UIs with UI Builder"></topic>
+                       <topic href="html/process/building_app_n.htm" label="Building Applications"></topic>
+                       <topic href="html/process/running_app_n.htm" label="Running Applications"></topic>
+                       <topic href="html/process/debugging_app_n.htm" label="Debugging Applications"></topic>
+                       <topic href="html/process/performance_n.htm" label="Optimizing Application Performance"></topic>
+               </topic>
+       </topic>
+
+       <topic href="html/app_model/application_model.htm" label="Tizen Application Model">
+               <topic href="html/app_model/application_model_w.htm" label="Web Application"></topic>
+               <topic href="html/app_model/application_model_n.htm" label="Native Application"></topic>
+       </topic>
+       
+       <topic href="html/details/details.htm" label="Understanding Tizen Programming">
+               <topic href="html/details/tizen_apis.htm" label="Tizen APIs"></topic>   
+               <topic href="html/details/sec_privileges.htm" label="Security and API Privileges"></topic>
+               <topic href="html/details/app_filtering.htm" label="Application Filtering"></topic>
+               <topic href="html/details/web_runtime_w.htm" label="Web Runtime"></topic>
+               <topic href="html/details/key_events.htm" label="Key Event Handling"></topic>
+               <topic href="html/details/io_overview.htm" label="File System Directory Hierarchy"></topic>
+               <topic href="html/details/error_handling.htm" label="Error Handling"></topic>                   
+       </topic>
+       <topic href="html/details/tizen_websites.htm" label="Tizen Web Sites"></topic>
+
+</toc>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/plugin.xml b/org.tizen.gettingstarted/plugin.xml
new file mode 100644 (file)
index 0000000..4e5954f
--- /dev/null
+++ b/org.tizen.gettingstarted/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+       <extension point="org.eclipse.help.toc">
+               <toc file="index.xml" primary="true" />
+       </extension>    
+</plugin>
diff --git a/org.tizen.guides/.project b/org.tizen.guides/.project
new file mode 100644 (file)
index 0000000..5b99a96
--- /dev/null
+++ b/org.tizen.guides/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+       <name>org.tizen.guides_2.3.0</name>
+       <comment></comment>
+       <projects>
+       </projects>
+       <buildSpec>
+               <buildCommand>
+                       <name>org.eclipse.pde.ManifestBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+               <buildCommand>
+                       <name>org.eclipse.pde.SchemaBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+       </buildSpec>
+       <natures>
+               <nature>org.eclipse.pde.PluginNature</nature>
+       </natures>
+</projectDescription>
diff --git a/org.tizen.guides/META-INF/MANIFEST.MF b/org.tizen.guides/META-INF/MANIFEST.MF
new file mode 100644 (file)
index 0000000..7b9f156
--- /dev/null
+++ b/org.tizen.guides/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Tizen Guides
+Bundle-SymbolicName: org.tizen.guides;singleton=true
+Bundle-Version: 2.3.1
+Bundle-Vendor: The Linux Foundation
+
diff --git a/org.tizen.guides/about.html b/org.tizen.guides/about.html
new file mode 100644 (file)
index 0000000..a4c64b7
--- /dev/null
+++ b/org.tizen.guides/about.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head> 
+  <script type="text/javascript" src="html/scripts/snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="html/css/styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>About This Content</title> 
+ </head> 
+ <body onload="prettyPrint()"> 
+ 
+  <h1><a name="Creating2" id="Creating2">About This Content</a></h1> 
+  <p>Tizen 2.3.0</p> 
+
+  <h1>License</h1> 
+   <p>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>
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/build.properties b/org.tizen.guides/build.properties
new file mode 100644 (file)
index 0000000..b84ff38
--- /dev/null
+++ b/org.tizen.guides/build.properties
@@ -0,0 +1,8 @@
+bin.includes = plugin.xml,\
+               META-INF/,\
+               html/,\
+               build.properties,\
+               .project,\
+                          about.html,\
+               index.xml
+
diff --git a/org.tizen.guides/html/cover_page.htm b/org.tizen.guides/html/cover_page.htm
new file mode 100644 (file)
index 0000000..3104a57
--- /dev/null
+++ b/org.tizen.guides/html/cover_page.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Guides</font></h1>
+
+<p>Click the application type you want:</p>
+<p><a href="web/guides_w.htm"><img alt="Web Application" src="images/w_division.png"/></a> <a href="native/guides_n.htm"><img alt="Native Application" src="images/n_division.png"/></a></p> 
+
+   
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/css/snippet.css b/org.tizen.guides/html/css/snippet.css
new file mode 100644 (file)
index 0000000..f880409
--- /dev/null
+++ b/org.tizen.guides/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #793AFF }  /* string content */
+  .kwd { color: #7F0055 }  /* a keyword */
+  .com { color: green}  /* a comment */
+  .typ { color: #1C1C1C }  /* a type name */
+  .lit { color: black }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #1C1C1C}
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/org.tizen.guides/html/css/styles.css b/org.tizen.guides/html/css/styles.css
new file mode 100644 (file)
index 0000000..c4eb32b
--- /dev/null
+++ b/org.tizen.guides/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";
+
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+       
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+       
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+       background: white;
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}      
+       
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }       
+       
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+       
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/* Classes for creating collapsible content */
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
+#main {width: 75%; height: 90%;}
+#container {width:100%;}
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
+body.no-toc #container #contents {right: 0;padding-right:30px;}
+body.no-toc #navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+       .devicespecs-util ul.dutil li a:hover { color:#222; }
+       .devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr     {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr em  {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+       ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+       
+.top {text-align: right;}
+.toc, ul.toc{
+       margin: 10px 0px 0px 0px;
+       padding-left: 13px;
+       list-style: disc;
+       font-size: 9pt;
+       line-height: 115%; 
+       }
+       
+.toc-title {
+       font-size: 12pt;
+       color: #0E437D; 
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+       
+a.top {
+       display:block; 
+       float: right; 
+       position:fixed;
+       width: 28px; 
+       height:89px; 
+       bottom:50px;
+       z-index: 101;
+       right: 19%;
+       }
+
+a img {border: 0;}
+       
+/*     Footer includes space and a gray line above             */
+#footer {
+       position: fixed;
+       /* width: 100%; */
+    bottom: 0px;
+       text-align: center;
+       border-top: 1px solid #CCCCCC;
+       background-color: #FFFFFF;      
+       left: 21px;  right: 21px;
+}
+
+.footer {font-size: 8pt;}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;} 
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+    position: relative;
+}
+#profile p {
+       text-align: right;
+}
+
+div#toc_border {
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
+}
+
+#contents li {
+       padding-top: 3px;
+       margin-top: 5px;
+       /* overflow: auto; */
+}
+
+p {
+       /* overflow: auto; */
+}
+
+div.table {
+       /* overflow: auto; */
+}
\ No newline at end of file
diff --git a/org.tizen.guides/html/images/4_columns.png b/org.tizen.guides/html/images/4_columns.png
new file mode 100644 (file)
index 0000000..2f96626
Binary files /dev/null and b/org.tizen.guides/html/images/4_columns.png differ
diff --git a/org.tizen.guides/html/images/align.png b/org.tizen.guides/html/images/align.png
new file mode 100644 (file)
index 0000000..720016f
Binary files /dev/null and b/org.tizen.guides/html/images/align.png differ
diff --git a/org.tizen.guides/html/images/align_hints.png b/org.tizen.guides/html/images/align_hints.png
new file mode 100644 (file)
index 0000000..4ca26c6
Binary files /dev/null and b/org.tizen.guides/html/images/align_hints.png differ
diff --git a/org.tizen.guides/html/images/app_run.png b/org.tizen.guides/html/images/app_run.png
new file mode 100644 (file)
index 0000000..9d83887
Binary files /dev/null and b/org.tizen.guides/html/images/app_run.png differ
diff --git a/org.tizen.guides/html/images/app_state_transitions.png b/org.tizen.guides/html/images/app_state_transitions.png
new file mode 100644 (file)
index 0000000..840505c
Binary files /dev/null and b/org.tizen.guides/html/images/app_state_transitions.png differ
diff --git a/org.tizen.guides/html/images/app_states.png b/org.tizen.guides/html/images/app_states.png
new file mode 100644 (file)
index 0000000..3bcec5a
Binary files /dev/null and b/org.tizen.guides/html/images/app_states.png differ
diff --git a/org.tizen.guides/html/images/aspect-control-both.png b/org.tizen.guides/html/images/aspect-control-both.png
new file mode 100644 (file)
index 0000000..b807599
Binary files /dev/null and b/org.tizen.guides/html/images/aspect-control-both.png differ
diff --git a/org.tizen.guides/html/images/aspect-control-horizontal.png b/org.tizen.guides/html/images/aspect-control-horizontal.png
new file mode 100644 (file)
index 0000000..143d8fb
Binary files /dev/null and b/org.tizen.guides/html/images/aspect-control-horizontal.png differ
diff --git a/org.tizen.guides/html/images/aspect-control-none.png b/org.tizen.guides/html/images/aspect-control-none.png
new file mode 100644 (file)
index 0000000..6d35d33
Binary files /dev/null and b/org.tizen.guides/html/images/aspect-control-none.png differ
diff --git a/org.tizen.guides/html/images/audio_input.png b/org.tizen.guides/html/images/audio_input.png
new file mode 100644 (file)
index 0000000..b8614ac
Binary files /dev/null and b/org.tizen.guides/html/images/audio_input.png differ
diff --git a/org.tizen.guides/html/images/audio_input_interrupt_state.png b/org.tizen.guides/html/images/audio_input_interrupt_state.png
new file mode 100644 (file)
index 0000000..16d0d0c
Binary files /dev/null and b/org.tizen.guides/html/images/audio_input_interrupt_state.png differ
diff --git a/org.tizen.guides/html/images/audio_output.png b/org.tizen.guides/html/images/audio_output.png
new file mode 100644 (file)
index 0000000..c892df1
Binary files /dev/null and b/org.tizen.guides/html/images/audio_output.png differ
diff --git a/org.tizen.guides/html/images/audio_output_interrupt_state.png b/org.tizen.guides/html/images/audio_output_interrupt_state.png
new file mode 100644 (file)
index 0000000..48a369b
Binary files /dev/null and b/org.tizen.guides/html/images/audio_output_interrupt_state.png differ
diff --git a/org.tizen.guides/html/images/badge.png b/org.tizen.guides/html/images/badge.png
new file mode 100644 (file)
index 0000000..ed94bb5
Binary files /dev/null and b/org.tizen.guides/html/images/badge.png differ
diff --git a/org.tizen.guides/html/images/base_scale.png b/org.tizen.guides/html/images/base_scale.png
new file mode 100644 (file)
index 0000000..a381204
Binary files /dev/null and b/org.tizen.guides/html/images/base_scale.png differ
diff --git a/org.tizen.guides/html/images/bg.png b/org.tizen.guides/html/images/bg.png
new file mode 100644 (file)
index 0000000..929cd71
Binary files /dev/null and b/org.tizen.guides/html/images/bg.png differ
diff --git a/org.tizen.guides/html/images/bg_tree.png b/org.tizen.guides/html/images/bg_tree.png
new file mode 100644 (file)
index 0000000..ab87495
Binary files /dev/null and b/org.tizen.guides/html/images/bg_tree.png differ
diff --git a/org.tizen.guides/html/images/bg_util_bar.gif b/org.tizen.guides/html/images/bg_util_bar.gif
new file mode 100644 (file)
index 0000000..977f94d
Binary files /dev/null and b/org.tizen.guides/html/images/bg_util_bar.gif differ
diff --git a/org.tizen.guides/html/images/bidirection.png b/org.tizen.guides/html/images/bidirection.png
new file mode 100644 (file)
index 0000000..365cd87
Binary files /dev/null and b/org.tizen.guides/html/images/bidirection.png differ
diff --git a/org.tizen.guides/html/images/border.png b/org.tizen.guides/html/images/border.png
new file mode 100644 (file)
index 0000000..faa0736
Binary files /dev/null and b/org.tizen.guides/html/images/border.png differ
diff --git a/org.tizen.guides/html/images/bottom.png b/org.tizen.guides/html/images/bottom.png
new file mode 100644 (file)
index 0000000..6d33368
Binary files /dev/null and b/org.tizen.guides/html/images/bottom.png differ
diff --git a/org.tizen.guides/html/images/box.png b/org.tizen.guides/html/images/box.png
new file mode 100644 (file)
index 0000000..8446f9a
Binary files /dev/null and b/org.tizen.guides/html/images/box.png differ
diff --git a/org.tizen.guides/html/images/box_model_properties_struct.png b/org.tizen.guides/html/images/box_model_properties_struct.png
new file mode 100644 (file)
index 0000000..158f9ec
Binary files /dev/null and b/org.tizen.guides/html/images/box_model_properties_struct.png differ
diff --git a/org.tizen.guides/html/images/btn_top.gif b/org.tizen.guides/html/images/btn_top.gif
new file mode 100644 (file)
index 0000000..d35e824
Binary files /dev/null and b/org.tizen.guides/html/images/btn_top.gif differ
diff --git a/org.tizen.guides/html/images/button.png b/org.tizen.guides/html/images/button.png
new file mode 100644 (file)
index 0000000..d724a19
Binary files /dev/null and b/org.tizen.guides/html/images/button.png differ
diff --git a/org.tizen.guides/html/images/button_anchor.png b/org.tizen.guides/html/images/button_anchor.png
new file mode 100644 (file)
index 0000000..a61ea1f
Binary files /dev/null and b/org.tizen.guides/html/images/button_anchor.png differ
diff --git a/org.tizen.guides/html/images/button_bottom.png b/org.tizen.guides/html/images/button_bottom.png
new file mode 100644 (file)
index 0000000..2d66145
Binary files /dev/null and b/org.tizen.guides/html/images/button_bottom.png differ
diff --git a/org.tizen.guides/html/images/button_circle.png b/org.tizen.guides/html/images/button_circle.png
new file mode 100644 (file)
index 0000000..fce8c6f
Binary files /dev/null and b/org.tizen.guides/html/images/button_circle.png differ
diff --git a/org.tizen.guides/html/images/button_default.png b/org.tizen.guides/html/images/button_default.png
new file mode 100644 (file)
index 0000000..6e02fd5
Binary files /dev/null and b/org.tizen.guides/html/images/button_default.png differ
diff --git a/org.tizen.guides/html/images/button_drawers.png b/org.tizen.guides/html/images/button_drawers.png
new file mode 100644 (file)
index 0000000..d5068e0
Binary files /dev/null and b/org.tizen.guides/html/images/button_drawers.png differ
diff --git a/org.tizen.guides/html/images/button_dropdown.png b/org.tizen.guides/html/images/button_dropdown.png
new file mode 100644 (file)
index 0000000..37a1db3
Binary files /dev/null and b/org.tizen.guides/html/images/button_dropdown.png differ
diff --git a/org.tizen.guides/html/images/button_hover_v.png b/org.tizen.guides/html/images/button_hover_v.png
new file mode 100644 (file)
index 0000000..4281042
Binary files /dev/null and b/org.tizen.guides/html/images/button_hover_v.png differ
diff --git a/org.tizen.guides/html/images/button_hover_v_entry.png b/org.tizen.guides/html/images/button_hover_v_entry.png
new file mode 100644 (file)
index 0000000..c73a97d
Binary files /dev/null and b/org.tizen.guides/html/images/button_hover_v_entry.png differ
diff --git a/org.tizen.guides/html/images/button_hoversel.png b/org.tizen.guides/html/images/button_hoversel.png
new file mode 100644 (file)
index 0000000..a7be917
Binary files /dev/null and b/org.tizen.guides/html/images/button_hoversel.png differ
diff --git a/org.tizen.guides/html/images/button_hoversel_entry.png b/org.tizen.guides/html/images/button_hoversel_entry.png
new file mode 100644 (file)
index 0000000..0136605
Binary files /dev/null and b/org.tizen.guides/html/images/button_hoversel_entry.png differ
diff --git a/org.tizen.guides/html/images/button_option.png b/org.tizen.guides/html/images/button_option.png
new file mode 100644 (file)
index 0000000..1f56c8e
Binary files /dev/null and b/org.tizen.guides/html/images/button_option.png differ
diff --git a/org.tizen.guides/html/images/button_recorder.png b/org.tizen.guides/html/images/button_recorder.png
new file mode 100644 (file)
index 0000000..c1dab83
Binary files /dev/null and b/org.tizen.guides/html/images/button_recorder.png differ
diff --git a/org.tizen.guides/html/images/button_title_cancel.png b/org.tizen.guides/html/images/button_title_cancel.png
new file mode 100644 (file)
index 0000000..96c74ae
Binary files /dev/null and b/org.tizen.guides/html/images/button_title_cancel.png differ
diff --git a/org.tizen.guides/html/images/button_title_done.png b/org.tizen.guides/html/images/button_title_done.png
new file mode 100644 (file)
index 0000000..fa219ab
Binary files /dev/null and b/org.tizen.guides/html/images/button_title_done.png differ
diff --git a/org.tizen.guides/html/images/button_tree.png b/org.tizen.guides/html/images/button_tree.png
new file mode 100644 (file)
index 0000000..0df481a
Binary files /dev/null and b/org.tizen.guides/html/images/button_tree.png differ
diff --git a/org.tizen.guides/html/images/calendar_alarm.png b/org.tizen.guides/html/images/calendar_alarm.png
new file mode 100644 (file)
index 0000000..6732f24
Binary files /dev/null and b/org.tizen.guides/html/images/calendar_alarm.png differ
diff --git a/org.tizen.guides/html/images/calendar_db.png b/org.tizen.guides/html/images/calendar_db.png
new file mode 100644 (file)
index 0000000..359f6fd
Binary files /dev/null and b/org.tizen.guides/html/images/calendar_db.png differ
diff --git a/org.tizen.guides/html/images/calendar_entity.png b/org.tizen.guides/html/images/calendar_entity.png
new file mode 100644 (file)
index 0000000..2b6baa7
Binary files /dev/null and b/org.tizen.guides/html/images/calendar_entity.png differ
diff --git a/org.tizen.guides/html/images/calendar_model.png b/org.tizen.guides/html/images/calendar_model.png
new file mode 100644 (file)
index 0000000..0af9398
Binary files /dev/null and b/org.tizen.guides/html/images/calendar_model.png differ
diff --git a/org.tizen.guides/html/images/calendar_property.png b/org.tizen.guides/html/images/calendar_property.png
new file mode 100644 (file)
index 0000000..cb1d355
Binary files /dev/null and b/org.tizen.guides/html/images/calendar_property.png differ
diff --git a/org.tizen.guides/html/images/calling_img_sep.png b/org.tizen.guides/html/images/calling_img_sep.png
new file mode 100644 (file)
index 0000000..c977274
Binary files /dev/null and b/org.tizen.guides/html/images/calling_img_sep.png differ
diff --git a/org.tizen.guides/html/images/camera_images.png b/org.tizen.guides/html/images/camera_images.png
new file mode 100644 (file)
index 0000000..de58bbf
Binary files /dev/null and b/org.tizen.guides/html/images/camera_images.png differ
diff --git a/org.tizen.guides/html/images/captured_screen1.png b/org.tizen.guides/html/images/captured_screen1.png
new file mode 100644 (file)
index 0000000..4b8695a
Binary files /dev/null and b/org.tizen.guides/html/images/captured_screen1.png differ
diff --git a/org.tizen.guides/html/images/captured_screen2.png b/org.tizen.guides/html/images/captured_screen2.png
new file mode 100644 (file)
index 0000000..4003a5e
Binary files /dev/null and b/org.tizen.guides/html/images/captured_screen2.png differ
diff --git a/org.tizen.guides/html/images/check.png b/org.tizen.guides/html/images/check.png
new file mode 100644 (file)
index 0000000..e5130bd
Binary files /dev/null and b/org.tizen.guides/html/images/check.png differ
diff --git a/org.tizen.guides/html/images/check_default.png b/org.tizen.guides/html/images/check_default.png
new file mode 100644 (file)
index 0000000..21d055d
Binary files /dev/null and b/org.tizen.guides/html/images/check_default.png differ
diff --git a/org.tizen.guides/html/images/check_favorite.png b/org.tizen.guides/html/images/check_favorite.png
new file mode 100644 (file)
index 0000000..85ba061
Binary files /dev/null and b/org.tizen.guides/html/images/check_favorite.png differ
diff --git a/org.tizen.guides/html/images/check_on_off.png b/org.tizen.guides/html/images/check_on_off.png
new file mode 100644 (file)
index 0000000..b97e16b
Binary files /dev/null and b/org.tizen.guides/html/images/check_on_off.png differ
diff --git a/org.tizen.guides/html/images/check_tree.png b/org.tizen.guides/html/images/check_tree.png
new file mode 100644 (file)
index 0000000..e697606
Binary files /dev/null and b/org.tizen.guides/html/images/check_tree.png differ
diff --git a/org.tizen.guides/html/images/codec_state.png b/org.tizen.guides/html/images/codec_state.png
new file mode 100644 (file)
index 0000000..8865416
Binary files /dev/null and b/org.tizen.guides/html/images/codec_state.png differ
diff --git a/org.tizen.guides/html/images/coin_flip_effect.png b/org.tizen.guides/html/images/coin_flip_effect.png
new file mode 100644 (file)
index 0000000..5841c6d
Binary files /dev/null and b/org.tizen.guides/html/images/coin_flip_effect.png differ
diff --git a/org.tizen.guides/html/images/color_colorplane.png b/org.tizen.guides/html/images/color_colorplane.png
new file mode 100644 (file)
index 0000000..d2e2854
Binary files /dev/null and b/org.tizen.guides/html/images/color_colorplane.png differ
diff --git a/org.tizen.guides/html/images/color_filter_app_multi_thread.png b/org.tizen.guides/html/images/color_filter_app_multi_thread.png
new file mode 100644 (file)
index 0000000..ee37af5
Binary files /dev/null and b/org.tizen.guides/html/images/color_filter_app_multi_thread.png differ
diff --git a/org.tizen.guides/html/images/color_filter_app_ui_thread.png b/org.tizen.guides/html/images/color_filter_app_ui_thread.png
new file mode 100644 (file)
index 0000000..b6c27e2
Binary files /dev/null and b/org.tizen.guides/html/images/color_filter_app_ui_thread.png differ
diff --git a/org.tizen.guides/html/images/colorsel.png b/org.tizen.guides/html/images/colorsel.png
new file mode 100644 (file)
index 0000000..e181b21
Binary files /dev/null and b/org.tizen.guides/html/images/colorsel.png differ
diff --git a/org.tizen.guides/html/images/colorselector_tree.png b/org.tizen.guides/html/images/colorselector_tree.png
new file mode 100644 (file)
index 0000000..9ab17f5
Binary files /dev/null and b/org.tizen.guides/html/images/colorselector_tree.png differ
diff --git a/org.tizen.guides/html/images/column_break.png b/org.tizen.guides/html/images/column_break.png
new file mode 100644 (file)
index 0000000..3a640af
Binary files /dev/null and b/org.tizen.guides/html/images/column_break.png differ
diff --git a/org.tizen.guides/html/images/column_gap.png b/org.tizen.guides/html/images/column_gap.png
new file mode 100644 (file)
index 0000000..6c7218d
Binary files /dev/null and b/org.tizen.guides/html/images/column_gap.png differ
diff --git a/org.tizen.guides/html/images/column_rule.png b/org.tizen.guides/html/images/column_rule.png
new file mode 100644 (file)
index 0000000..181dd5a
Binary files /dev/null and b/org.tizen.guides/html/images/column_rule.png differ
diff --git a/org.tizen.guides/html/images/column_span.png b/org.tizen.guides/html/images/column_span.png
new file mode 100644 (file)
index 0000000..0488bad
Binary files /dev/null and b/org.tizen.guides/html/images/column_span.png differ
diff --git a/org.tizen.guides/html/images/column_width.png b/org.tizen.guides/html/images/column_width.png
new file mode 100644 (file)
index 0000000..180b859
Binary files /dev/null and b/org.tizen.guides/html/images/column_width.png differ
diff --git a/org.tizen.guides/html/images/comp_test_result.png b/org.tizen.guides/html/images/comp_test_result.png
new file mode 100644 (file)
index 0000000..4dcc66a
Binary files /dev/null and b/org.tizen.guides/html/images/comp_test_result.png differ
diff --git a/org.tizen.guides/html/images/comp_test_support.png b/org.tizen.guides/html/images/comp_test_support.png
new file mode 100644 (file)
index 0000000..8f55503
Binary files /dev/null and b/org.tizen.guides/html/images/comp_test_support.png differ
diff --git a/org.tizen.guides/html/images/conformant.png b/org.tizen.guides/html/images/conformant.png
new file mode 100644 (file)
index 0000000..f4eb438
Binary files /dev/null and b/org.tizen.guides/html/images/conformant.png differ
diff --git a/org.tizen.guides/html/images/contact_property.png b/org.tizen.guides/html/images/contact_property.png
new file mode 100644 (file)
index 0000000..6e640cc
Binary files /dev/null and b/org.tizen.guides/html/images/contact_property.png differ
diff --git a/org.tizen.guides/html/images/contacts_children.png b/org.tizen.guides/html/images/contacts_children.png
new file mode 100644 (file)
index 0000000..3403baf
Binary files /dev/null and b/org.tizen.guides/html/images/contacts_children.png differ
diff --git a/org.tizen.guides/html/images/contacts_contact_entity.png b/org.tizen.guides/html/images/contacts_contact_entity.png
new file mode 100644 (file)
index 0000000..4aae856
Binary files /dev/null and b/org.tizen.guides/html/images/contacts_contact_entity.png differ
diff --git a/org.tizen.guides/html/images/contacts_contact_structure.png b/org.tizen.guides/html/images/contacts_contact_structure.png
new file mode 100644 (file)
index 0000000..f55dfa1
Binary files /dev/null and b/org.tizen.guides/html/images/contacts_contact_structure.png differ
diff --git a/org.tizen.guides/html/images/contacts_link_person.png b/org.tizen.guides/html/images/contacts_link_person.png
new file mode 100644 (file)
index 0000000..87d8ad3
Binary files /dev/null and b/org.tizen.guides/html/images/contacts_link_person.png differ
diff --git a/org.tizen.guides/html/images/contacts_person_record.png b/org.tizen.guides/html/images/contacts_person_record.png
new file mode 100644 (file)
index 0000000..f62bebb
Binary files /dev/null and b/org.tizen.guides/html/images/contacts_person_record.png differ
diff --git a/org.tizen.guides/html/images/contacts_unlink_contact.png b/org.tizen.guides/html/images/contacts_unlink_contact.png
new file mode 100644 (file)
index 0000000..0be959d
Binary files /dev/null and b/org.tizen.guides/html/images/contacts_unlink_contact.png differ
diff --git a/org.tizen.guides/html/images/content.png b/org.tizen.guides/html/images/content.png
new file mode 100644 (file)
index 0000000..a59197c
Binary files /dev/null and b/org.tizen.guides/html/images/content.png differ
diff --git a/org.tizen.guides/html/images/cors_preflight.png b/org.tizen.guides/html/images/cors_preflight.png
new file mode 100644 (file)
index 0000000..5d76870
Binary files /dev/null and b/org.tizen.guides/html/images/cors_preflight.png differ
diff --git a/org.tizen.guides/html/images/cors_simple.png b/org.tizen.guides/html/images/cors_simple.png
new file mode 100644 (file)
index 0000000..6a12526
Binary files /dev/null and b/org.tizen.guides/html/images/cors_simple.png differ
diff --git a/org.tizen.guides/html/images/css_bg1.png b/org.tizen.guides/html/images/css_bg1.png
new file mode 100644 (file)
index 0000000..f5feb37
Binary files /dev/null and b/org.tizen.guides/html/images/css_bg1.png differ
diff --git a/org.tizen.guides/html/images/css_result.png b/org.tizen.guides/html/images/css_result.png
new file mode 100644 (file)
index 0000000..4f7ec21
Binary files /dev/null and b/org.tizen.guides/html/images/css_result.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup1.png b/org.tizen.guides/html/images/ctxpopup1.png
new file mode 100644 (file)
index 0000000..dc5aa84
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup1.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup2.png b/org.tizen.guides/html/images/ctxpopup2.png
new file mode 100644 (file)
index 0000000..77a0bf3
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup2.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup3.png b/org.tizen.guides/html/images/ctxpopup3.png
new file mode 100644 (file)
index 0000000..e7675a3
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup3.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup_default.png b/org.tizen.guides/html/images/ctxpopup_default.png
new file mode 100644 (file)
index 0000000..92c3861
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup_default.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup_dropdown.png b/org.tizen.guides/html/images/ctxpopup_dropdown.png
new file mode 100644 (file)
index 0000000..5ea939a
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup_dropdown.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup_dropdown_label.png b/org.tizen.guides/html/images/ctxpopup_dropdown_label.png
new file mode 100644 (file)
index 0000000..5ea939a
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup_dropdown_label.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup_tree.png b/org.tizen.guides/html/images/ctxpopup_tree.png
new file mode 100644 (file)
index 0000000..c40f6ca
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup_tree.png differ
diff --git a/org.tizen.guides/html/images/datacontrol.png b/org.tizen.guides/html/images/datacontrol.png
new file mode 100644 (file)
index 0000000..dc9bd8d
Binary files /dev/null and b/org.tizen.guides/html/images/datacontrol.png differ
diff --git a/org.tizen.guides/html/images/date2.png b/org.tizen.guides/html/images/date2.png
new file mode 100644 (file)
index 0000000..1127ed0
Binary files /dev/null and b/org.tizen.guides/html/images/date2.png differ
diff --git a/org.tizen.guides/html/images/datetime_date_layout.png b/org.tizen.guides/html/images/datetime_date_layout.png
new file mode 100644 (file)
index 0000000..9c450e6
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_date_layout.png differ
diff --git a/org.tizen.guides/html/images/datetime_time_24h.png b/org.tizen.guides/html/images/datetime_time_24h.png
new file mode 100644 (file)
index 0000000..fa22f47
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_time_24h.png differ
diff --git a/org.tizen.guides/html/images/datetime_time_layout.png b/org.tizen.guides/html/images/datetime_time_layout.png
new file mode 100644 (file)
index 0000000..da3cd7f
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_time_layout.png differ
diff --git a/org.tizen.guides/html/images/datetime_tree.png b/org.tizen.guides/html/images/datetime_tree.png
new file mode 100644 (file)
index 0000000..84ad43a
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_tree.png differ
diff --git a/org.tizen.guides/html/images/debugging.png b/org.tizen.guides/html/images/debugging.png
new file mode 100644 (file)
index 0000000..4259997
Binary files /dev/null and b/org.tizen.guides/html/images/debugging.png differ
diff --git a/org.tizen.guides/html/images/device_axes.png b/org.tizen.guides/html/images/device_axes.png
new file mode 100644 (file)
index 0000000..65672c0
Binary files /dev/null and b/org.tizen.guides/html/images/device_axes.png differ
diff --git a/org.tizen.guides/html/images/dlog_architecture.png b/org.tizen.guides/html/images/dlog_architecture.png
new file mode 100644 (file)
index 0000000..b52de88
Binary files /dev/null and b/org.tizen.guides/html/images/dlog_architecture.png differ
diff --git a/org.tizen.guides/html/images/download_state.png b/org.tizen.guides/html/images/download_state.png
new file mode 100644 (file)
index 0000000..f4d2695
Binary files /dev/null and b/org.tizen.guides/html/images/download_state.png differ
diff --git a/org.tizen.guides/html/images/efl_layers.png b/org.tizen.guides/html/images/efl_layers.png
new file mode 100644 (file)
index 0000000..6c0f68b
Binary files /dev/null and b/org.tizen.guides/html/images/efl_layers.png differ
diff --git a/org.tizen.guides/html/images/efl_notilevels.png b/org.tizen.guides/html/images/efl_notilevels.png
new file mode 100644 (file)
index 0000000..0aa3425
Binary files /dev/null and b/org.tizen.guides/html/images/efl_notilevels.png differ
diff --git a/org.tizen.guides/html/images/efl_phone.png b/org.tizen.guides/html/images/efl_phone.png
new file mode 100644 (file)
index 0000000..dbc411d
Binary files /dev/null and b/org.tizen.guides/html/images/efl_phone.png differ
diff --git a/org.tizen.guides/html/images/efl_windowlayer.png b/org.tizen.guides/html/images/efl_windowlayer.png
new file mode 100644 (file)
index 0000000..6f09d4e
Binary files /dev/null and b/org.tizen.guides/html/images/efl_windowlayer.png differ
diff --git a/org.tizen.guides/html/images/efllibs.png b/org.tizen.guides/html/images/efllibs.png
new file mode 100644 (file)
index 0000000..696f6bb
Binary files /dev/null and b/org.tizen.guides/html/images/efllibs.png differ
diff --git a/org.tizen.guides/html/images/elementary.png b/org.tizen.guides/html/images/elementary.png
new file mode 100644 (file)
index 0000000..7975489
Binary files /dev/null and b/org.tizen.guides/html/images/elementary.png differ
diff --git a/org.tizen.guides/html/images/elementary_app.png b/org.tizen.guides/html/images/elementary_app.png
new file mode 100644 (file)
index 0000000..2e86785
Binary files /dev/null and b/org.tizen.guides/html/images/elementary_app.png differ
diff --git a/org.tizen.guides/html/images/email_architecture.png b/org.tizen.guides/html/images/email_architecture.png
new file mode 100644 (file)
index 0000000..049d10f
Binary files /dev/null and b/org.tizen.guides/html/images/email_architecture.png differ
diff --git a/org.tizen.guides/html/images/emulator-screenshot.png b/org.tizen.guides/html/images/emulator-screenshot.png
new file mode 100644 (file)
index 0000000..96c8720
Binary files /dev/null and b/org.tizen.guides/html/images/emulator-screenshot.png differ
diff --git a/org.tizen.guides/html/images/enlarge_low_res_image.png b/org.tizen.guides/html/images/enlarge_low_res_image.png
new file mode 100644 (file)
index 0000000..505b48d
Binary files /dev/null and b/org.tizen.guides/html/images/enlarge_low_res_image.png differ
diff --git a/org.tizen.guides/html/images/entry.png b/org.tizen.guides/html/images/entry.png
new file mode 100644 (file)
index 0000000..a309787
Binary files /dev/null and b/org.tizen.guides/html/images/entry.png differ
diff --git a/org.tizen.guides/html/images/entry2.png b/org.tizen.guides/html/images/entry2.png
new file mode 100644 (file)
index 0000000..2d72f26
Binary files /dev/null and b/org.tizen.guides/html/images/entry2.png differ
diff --git a/org.tizen.guides/html/images/entry_default.png b/org.tizen.guides/html/images/entry_default.png
new file mode 100644 (file)
index 0000000..90dea3a
Binary files /dev/null and b/org.tizen.guides/html/images/entry_default.png differ
diff --git a/org.tizen.guides/html/images/entry_tree.png b/org.tizen.guides/html/images/entry_tree.png
new file mode 100644 (file)
index 0000000..524dc4a
Binary files /dev/null and b/org.tizen.guides/html/images/entry_tree.png differ
diff --git a/org.tizen.guides/html/images/evas_architecture.png b/org.tizen.guides/html/images/evas_architecture.png
new file mode 100644 (file)
index 0000000..2aec5b1
Binary files /dev/null and b/org.tizen.guides/html/images/evas_architecture.png differ
diff --git a/org.tizen.guides/html/images/evas_blur1.png b/org.tizen.guides/html/images/evas_blur1.png
new file mode 100644 (file)
index 0000000..79de1bf
Binary files /dev/null and b/org.tizen.guides/html/images/evas_blur1.png differ
diff --git a/org.tizen.guides/html/images/evas_blur2.png b/org.tizen.guides/html/images/evas_blur2.png
new file mode 100644 (file)
index 0000000..794b614
Binary files /dev/null and b/org.tizen.guides/html/images/evas_blur2.png differ
diff --git a/org.tizen.guides/html/images/evas_image_loader.png b/org.tizen.guides/html/images/evas_image_loader.png
new file mode 100644 (file)
index 0000000..b242092
Binary files /dev/null and b/org.tizen.guides/html/images/evas_image_loader.png differ
diff --git a/org.tizen.guides/html/images/evas_image_scaling.png b/org.tizen.guides/html/images/evas_image_scaling.png
new file mode 100644 (file)
index 0000000..2b8c4d0
Binary files /dev/null and b/org.tizen.guides/html/images/evas_image_scaling.png differ
diff --git a/org.tizen.guides/html/images/evas_map.png b/org.tizen.guides/html/images/evas_map.png
new file mode 100644 (file)
index 0000000..5d3484d
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map.png differ
diff --git a/org.tizen.guides/html/images/evas_map_1.png b/org.tizen.guides/html/images/evas_map_1.png
new file mode 100644 (file)
index 0000000..38e8956
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_1.png differ
diff --git a/org.tizen.guides/html/images/evas_map_10.png b/org.tizen.guides/html/images/evas_map_10.png
new file mode 100644 (file)
index 0000000..9f9e5bd
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_10.png differ
diff --git a/org.tizen.guides/html/images/evas_map_11.png b/org.tizen.guides/html/images/evas_map_11.png
new file mode 100644 (file)
index 0000000..f5b51f9
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_11.png differ
diff --git a/org.tizen.guides/html/images/evas_map_2.png b/org.tizen.guides/html/images/evas_map_2.png
new file mode 100644 (file)
index 0000000..fbaa334
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_2.png differ
diff --git a/org.tizen.guides/html/images/evas_map_3.png b/org.tizen.guides/html/images/evas_map_3.png
new file mode 100644 (file)
index 0000000..6d8eb8d
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_3.png differ
diff --git a/org.tizen.guides/html/images/evas_map_4.png b/org.tizen.guides/html/images/evas_map_4.png
new file mode 100644 (file)
index 0000000..b96474c
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_4.png differ
diff --git a/org.tizen.guides/html/images/evas_map_5.png b/org.tizen.guides/html/images/evas_map_5.png
new file mode 100644 (file)
index 0000000..4a7a2c4
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_5.png differ
diff --git a/org.tizen.guides/html/images/evas_map_6.png b/org.tizen.guides/html/images/evas_map_6.png
new file mode 100644 (file)
index 0000000..b0bd63e
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_6.png differ
diff --git a/org.tizen.guides/html/images/evas_map_7.png b/org.tizen.guides/html/images/evas_map_7.png
new file mode 100644 (file)
index 0000000..d4d19fe
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_7.png differ
diff --git a/org.tizen.guides/html/images/evas_map_8.png b/org.tizen.guides/html/images/evas_map_8.png
new file mode 100644 (file)
index 0000000..5fb0463
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_8.png differ
diff --git a/org.tizen.guides/html/images/evas_map_9.png b/org.tizen.guides/html/images/evas_map_9.png
new file mode 100644 (file)
index 0000000..6f012a5
Binary files /dev/null and b/org.tizen.guides/html/images/evas_map_9.png differ
diff --git a/org.tizen.guides/html/images/evas_object_display.png b/org.tizen.guides/html/images/evas_object_display.png
new file mode 100644 (file)
index 0000000..18c2519
Binary files /dev/null and b/org.tizen.guides/html/images/evas_object_display.png differ
diff --git a/org.tizen.guides/html/images/evas_partial_update.png b/org.tizen.guides/html/images/evas_partial_update.png
new file mode 100644 (file)
index 0000000..a30ebff
Binary files /dev/null and b/org.tizen.guides/html/images/evas_partial_update.png differ
diff --git a/org.tizen.guides/html/images/evas_scaling1.png b/org.tizen.guides/html/images/evas_scaling1.png
new file mode 100644 (file)
index 0000000..c663e28
Binary files /dev/null and b/org.tizen.guides/html/images/evas_scaling1.png differ
diff --git a/org.tizen.guides/html/images/evas_scaling2.png b/org.tizen.guides/html/images/evas_scaling2.png
new file mode 100644 (file)
index 0000000..f811891
Binary files /dev/null and b/org.tizen.guides/html/images/evas_scaling2.png differ
diff --git a/org.tizen.guides/html/images/evas_scaling3.png b/org.tizen.guides/html/images/evas_scaling3.png
new file mode 100644 (file)
index 0000000..5cb64ae
Binary files /dev/null and b/org.tizen.guides/html/images/evas_scaling3.png differ
diff --git a/org.tizen.guides/html/images/evas_smooth_disabled.png b/org.tizen.guides/html/images/evas_smooth_disabled.png
new file mode 100644 (file)
index 0000000..d211c4f
Binary files /dev/null and b/org.tizen.guides/html/images/evas_smooth_disabled.png differ
diff --git a/org.tizen.guides/html/images/evas_smooth_enabled.png b/org.tizen.guides/html/images/evas_smooth_enabled.png
new file mode 100644 (file)
index 0000000..b579d59
Binary files /dev/null and b/org.tizen.guides/html/images/evas_smooth_enabled.png differ
diff --git a/org.tizen.guides/html/images/events.png b/org.tizen.guides/html/images/events.png
new file mode 100644 (file)
index 0000000..4018e7a
Binary files /dev/null and b/org.tizen.guides/html/images/events.png differ
diff --git a/org.tizen.guides/html/images/events2.png b/org.tizen.guides/html/images/events2.png
new file mode 100644 (file)
index 0000000..3710f2e
Binary files /dev/null and b/org.tizen.guides/html/images/events2.png differ
diff --git a/org.tizen.guides/html/images/events3.png b/org.tizen.guides/html/images/events3.png
new file mode 100644 (file)
index 0000000..6095932
Binary files /dev/null and b/org.tizen.guides/html/images/events3.png differ
diff --git a/org.tizen.guides/html/images/events_flow.png b/org.tizen.guides/html/images/events_flow.png
new file mode 100644 (file)
index 0000000..c78d46e
Binary files /dev/null and b/org.tizen.guides/html/images/events_flow.png differ
diff --git a/org.tizen.guides/html/images/events_scope.png b/org.tizen.guides/html/images/events_scope.png
new file mode 100644 (file)
index 0000000..1513396
Binary files /dev/null and b/org.tizen.guides/html/images/events_scope.png differ
diff --git a/org.tizen.guides/html/images/exporting_datacontrol.png b/org.tizen.guides/html/images/exporting_datacontrol.png
new file mode 100644 (file)
index 0000000..5507df4
Binary files /dev/null and b/org.tizen.guides/html/images/exporting_datacontrol.png differ
diff --git a/org.tizen.guides/html/images/face_down.png b/org.tizen.guides/html/images/face_down.png
new file mode 100644 (file)
index 0000000..f87a55d
Binary files /dev/null and b/org.tizen.guides/html/images/face_down.png differ
diff --git a/org.tizen.guides/html/images/flex_container.png b/org.tizen.guides/html/images/flex_container.png
new file mode 100644 (file)
index 0000000..1bcaef3
Binary files /dev/null and b/org.tizen.guides/html/images/flex_container.png differ
diff --git a/org.tizen.guides/html/images/flip_tree.png b/org.tizen.guides/html/images/flip_tree.png
new file mode 100644 (file)
index 0000000..3888117
Binary files /dev/null and b/org.tizen.guides/html/images/flip_tree.png differ
diff --git a/org.tizen.guides/html/images/flipsel_default.png b/org.tizen.guides/html/images/flipsel_default.png
new file mode 100644 (file)
index 0000000..e536f69
Binary files /dev/null and b/org.tizen.guides/html/images/flipsel_default.png differ
diff --git a/org.tizen.guides/html/images/fmradio-state.png b/org.tizen.guides/html/images/fmradio-state.png
new file mode 100644 (file)
index 0000000..71ad363
Binary files /dev/null and b/org.tizen.guides/html/images/fmradio-state.png differ
diff --git a/org.tizen.guides/html/images/form_0.png b/org.tizen.guides/html/images/form_0.png
new file mode 100644 (file)
index 0000000..03531dd
Binary files /dev/null and b/org.tizen.guides/html/images/form_0.png differ
diff --git a/org.tizen.guides/html/images/form_1.png b/org.tizen.guides/html/images/form_1.png
new file mode 100644 (file)
index 0000000..2e061eb
Binary files /dev/null and b/org.tizen.guides/html/images/form_1.png differ
diff --git a/org.tizen.guides/html/images/form_2.png b/org.tizen.guides/html/images/form_2.png
new file mode 100644 (file)
index 0000000..4ae9376
Binary files /dev/null and b/org.tizen.guides/html/images/form_2.png differ
diff --git a/org.tizen.guides/html/images/form_3.png b/org.tizen.guides/html/images/form_3.png
new file mode 100644 (file)
index 0000000..bcb2cf1
Binary files /dev/null and b/org.tizen.guides/html/images/form_3.png differ
diff --git a/org.tizen.guides/html/images/form_4.png b/org.tizen.guides/html/images/form_4.png
new file mode 100644 (file)
index 0000000..b564c0c
Binary files /dev/null and b/org.tizen.guides/html/images/form_4.png differ
diff --git a/org.tizen.guides/html/images/form_5.png b/org.tizen.guides/html/images/form_5.png
new file mode 100644 (file)
index 0000000..af160a5
Binary files /dev/null and b/org.tizen.guides/html/images/form_5.png differ
diff --git a/org.tizen.guides/html/images/form_6.png b/org.tizen.guides/html/images/form_6.png
new file mode 100644 (file)
index 0000000..8d57347
Binary files /dev/null and b/org.tizen.guides/html/images/form_6.png differ
diff --git a/org.tizen.guides/html/images/form_7.png b/org.tizen.guides/html/images/form_7.png
new file mode 100644 (file)
index 0000000..84d461e
Binary files /dev/null and b/org.tizen.guides/html/images/form_7.png differ
diff --git a/org.tizen.guides/html/images/gengrid.png b/org.tizen.guides/html/images/gengrid.png
new file mode 100644 (file)
index 0000000..3e81d45
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid.png differ
diff --git a/org.tizen.guides/html/images/gengrid_album_pre.png b/org.tizen.guides/html/images/gengrid_album_pre.png
new file mode 100644 (file)
index 0000000..33ddade
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_album_pre.png differ
diff --git a/org.tizen.guides/html/images/gengrid_block.png b/org.tizen.guides/html/images/gengrid_block.png
new file mode 100644 (file)
index 0000000..a221ca9
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_block.png differ
diff --git a/org.tizen.guides/html/images/gengrid_def.png b/org.tizen.guides/html/images/gengrid_def.png
new file mode 100644 (file)
index 0000000..7b6f529
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_def.png differ
diff --git a/org.tizen.guides/html/images/gengrid_def_gridtext.png b/org.tizen.guides/html/images/gengrid_def_gridtext.png
new file mode 100644 (file)
index 0000000..85da20e
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_def_gridtext.png differ
diff --git a/org.tizen.guides/html/images/gengrid_def_gridtext2.png b/org.tizen.guides/html/images/gengrid_def_gridtext2.png
new file mode 100644 (file)
index 0000000..b2e2f11
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_def_gridtext2.png differ
diff --git a/org.tizen.guides/html/images/gengrid_def_style.png b/org.tizen.guides/html/images/gengrid_def_style.png
new file mode 100644 (file)
index 0000000..2c01487
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_def_style.png differ
diff --git a/org.tizen.guides/html/images/gengrid_default.png b/org.tizen.guides/html/images/gengrid_default.png
new file mode 100644 (file)
index 0000000..ce6f85e
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_default.png differ
diff --git a/org.tizen.guides/html/images/gengrid_grp_index.png b/org.tizen.guides/html/images/gengrid_grp_index.png
new file mode 100644 (file)
index 0000000..5261d0c
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_grp_index.png differ
diff --git a/org.tizen.guides/html/images/gengrid_tree.png b/org.tizen.guides/html/images/gengrid_tree.png
new file mode 100644 (file)
index 0000000..fe01efb
Binary files /dev/null and b/org.tizen.guides/html/images/gengrid_tree.png differ
diff --git a/org.tizen.guides/html/images/genlist.png b/org.tizen.guides/html/images/genlist.png
new file mode 100644 (file)
index 0000000..760185a
Binary files /dev/null and b/org.tizen.guides/html/images/genlist.png differ
diff --git a/org.tizen.guides/html/images/genlist_htree.png b/org.tizen.guides/html/images/genlist_htree.png
new file mode 100644 (file)
index 0000000..8870413
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_htree.png differ
diff --git a/org.tizen.guides/html/images/genlist_multi.png b/org.tizen.guides/html/images/genlist_multi.png
new file mode 100644 (file)
index 0000000..613d1d5
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_multi.png differ
diff --git a/org.tizen.guides/html/images/genlist_tree.png b/org.tizen.guides/html/images/genlist_tree.png
new file mode 100644 (file)
index 0000000..7df661c
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_tree.png differ
diff --git a/org.tizen.guides/html/images/gl-default.png b/org.tizen.guides/html/images/gl-default.png
new file mode 100644 (file)
index 0000000..87ff183
Binary files /dev/null and b/org.tizen.guides/html/images/gl-default.png differ
diff --git a/org.tizen.guides/html/images/gl-double-label.png b/org.tizen.guides/html/images/gl-double-label.png
new file mode 100644 (file)
index 0000000..b86821d
Binary files /dev/null and b/org.tizen.guides/html/images/gl-double-label.png differ
diff --git a/org.tizen.guides/html/images/gl-end-icon.png b/org.tizen.guides/html/images/gl-end-icon.png
new file mode 100644 (file)
index 0000000..46d547c
Binary files /dev/null and b/org.tizen.guides/html/images/gl-end-icon.png differ
diff --git a/org.tizen.guides/html/images/glview.png b/org.tizen.guides/html/images/glview.png
new file mode 100644 (file)
index 0000000..f12519a
Binary files /dev/null and b/org.tizen.guides/html/images/glview.png differ
diff --git a/org.tizen.guides/html/images/glview_tree.png b/org.tizen.guides/html/images/glview_tree.png
new file mode 100644 (file)
index 0000000..e91309c
Binary files /dev/null and b/org.tizen.guides/html/images/glview_tree.png differ
diff --git a/org.tizen.guides/html/images/ico_arr_hidden.gif b/org.tizen.guides/html/images/ico_arr_hidden.gif
new file mode 100644 (file)
index 0000000..9a9d3ff
Binary files /dev/null and b/org.tizen.guides/html/images/ico_arr_hidden.gif differ
diff --git a/org.tizen.guides/html/images/ico_bullet_2_7.gif b/org.tizen.guides/html/images/ico_bullet_2_7.gif
new file mode 100644 (file)
index 0000000..8de872c
Binary files /dev/null and b/org.tizen.guides/html/images/ico_bullet_2_7.gif differ
diff --git a/org.tizen.guides/html/images/icon.png b/org.tizen.guides/html/images/icon.png
new file mode 100644 (file)
index 0000000..952d732
Binary files /dev/null and b/org.tizen.guides/html/images/icon.png differ
diff --git a/org.tizen.guides/html/images/icon_apps.png b/org.tizen.guides/html/images/icon_apps.png
new file mode 100644 (file)
index 0000000..669eddf
Binary files /dev/null and b/org.tizen.guides/html/images/icon_apps.png differ
diff --git a/org.tizen.guides/html/images/icon_arrowdown.png b/org.tizen.guides/html/images/icon_arrowdown.png
new file mode 100644 (file)
index 0000000..f422f5b
Binary files /dev/null and b/org.tizen.guides/html/images/icon_arrowdown.png differ
diff --git a/org.tizen.guides/html/images/icon_arrowleft.png b/org.tizen.guides/html/images/icon_arrowleft.png
new file mode 100644 (file)
index 0000000..62d321e
Binary files /dev/null and b/org.tizen.guides/html/images/icon_arrowleft.png differ
diff --git a/org.tizen.guides/html/images/icon_arrowright.png b/org.tizen.guides/html/images/icon_arrowright.png
new file mode 100644 (file)
index 0000000..9a847b0
Binary files /dev/null and b/org.tizen.guides/html/images/icon_arrowright.png differ
diff --git a/org.tizen.guides/html/images/icon_arrowup.png b/org.tizen.guides/html/images/icon_arrowup.png
new file mode 100644 (file)
index 0000000..4732639
Binary files /dev/null and b/org.tizen.guides/html/images/icon_arrowup.png differ
diff --git a/org.tizen.guides/html/images/icon_chat.png b/org.tizen.guides/html/images/icon_chat.png
new file mode 100644 (file)
index 0000000..c0015b6
Binary files /dev/null and b/org.tizen.guides/html/images/icon_chat.png differ
diff --git a/org.tizen.guides/html/images/icon_clock.png b/org.tizen.guides/html/images/icon_clock.png
new file mode 100644 (file)
index 0000000..126aefc
Binary files /dev/null and b/org.tizen.guides/html/images/icon_clock.png differ
diff --git a/org.tizen.guides/html/images/icon_close.png b/org.tizen.guides/html/images/icon_close.png
new file mode 100644 (file)
index 0000000..45ced2f
Binary files /dev/null and b/org.tizen.guides/html/images/icon_close.png differ
diff --git a/org.tizen.guides/html/images/icon_delete.png b/org.tizen.guides/html/images/icon_delete.png
new file mode 100644 (file)
index 0000000..892333a
Binary files /dev/null and b/org.tizen.guides/html/images/icon_delete.png differ
diff --git a/org.tizen.guides/html/images/icon_edit.png b/org.tizen.guides/html/images/icon_edit.png
new file mode 100644 (file)
index 0000000..e177678
Binary files /dev/null and b/org.tizen.guides/html/images/icon_edit.png differ
diff --git a/org.tizen.guides/html/images/icon_file.png b/org.tizen.guides/html/images/icon_file.png
new file mode 100644 (file)
index 0000000..a0980c9
Binary files /dev/null and b/org.tizen.guides/html/images/icon_file.png differ
diff --git a/org.tizen.guides/html/images/icon_forward.png b/org.tizen.guides/html/images/icon_forward.png
new file mode 100644 (file)
index 0000000..28c130d
Binary files /dev/null and b/org.tizen.guides/html/images/icon_forward.png differ
diff --git a/org.tizen.guides/html/images/icon_home.png b/org.tizen.guides/html/images/icon_home.png
new file mode 100644 (file)
index 0000000..b59ad06
Binary files /dev/null and b/org.tizen.guides/html/images/icon_home.png differ
diff --git a/org.tizen.guides/html/images/icon_info.png b/org.tizen.guides/html/images/icon_info.png
new file mode 100644 (file)
index 0000000..e9ff0ad
Binary files /dev/null and b/org.tizen.guides/html/images/icon_info.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_apps.png b/org.tizen.guides/html/images/icon_menu_apps.png
new file mode 100644 (file)
index 0000000..5f0e5f0
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_apps.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_arrdown.png b/org.tizen.guides/html/images/icon_menu_arrdown.png
new file mode 100644 (file)
index 0000000..96c3eb8
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_arrdown.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_arrleft.png b/org.tizen.guides/html/images/icon_menu_arrleft.png
new file mode 100644 (file)
index 0000000..40d4c13
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_arrleft.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_arrright.png b/org.tizen.guides/html/images/icon_menu_arrright.png
new file mode 100644 (file)
index 0000000..ac3838e
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_arrright.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_arrup.png b/org.tizen.guides/html/images/icon_menu_arrup.png
new file mode 100644 (file)
index 0000000..bf29588
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_arrup.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_chat.png b/org.tizen.guides/html/images/icon_menu_chat.png
new file mode 100644 (file)
index 0000000..2c22fa1
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_chat.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_clock.png b/org.tizen.guides/html/images/icon_menu_clock.png
new file mode 100644 (file)
index 0000000..0bec843
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_clock.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_close.png b/org.tizen.guides/html/images/icon_menu_close.png
new file mode 100644 (file)
index 0000000..31d2123
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_close.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_delete.png b/org.tizen.guides/html/images/icon_menu_delete.png
new file mode 100644 (file)
index 0000000..bb261cb
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_delete.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_edit.png b/org.tizen.guides/html/images/icon_menu_edit.png
new file mode 100644 (file)
index 0000000..eddc918
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_edit.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_file.png b/org.tizen.guides/html/images/icon_menu_file.png
new file mode 100644 (file)
index 0000000..62e6217
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_file.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_folder.png b/org.tizen.guides/html/images/icon_menu_folder.png
new file mode 100644 (file)
index 0000000..e9166f9
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_folder.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_home.png b/org.tizen.guides/html/images/icon_menu_home.png
new file mode 100644 (file)
index 0000000..66e7711
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_home.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_nophoto.png b/org.tizen.guides/html/images/icon_menu_nophoto.png
new file mode 100644 (file)
index 0000000..b0d6941
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_nophoto.png differ
diff --git a/org.tizen.guides/html/images/icon_menu_refresh.png b/org.tizen.guides/html/images/icon_menu_refresh.png
new file mode 100644 (file)
index 0000000..c9980f0
Binary files /dev/null and b/org.tizen.guides/html/images/icon_menu_refresh.png differ
diff --git a/org.tizen.guides/html/images/icon_next.png b/org.tizen.guides/html/images/icon_next.png
new file mode 100644 (file)
index 0000000..fa52ea0
Binary files /dev/null and b/org.tizen.guides/html/images/icon_next.png differ
diff --git a/org.tizen.guides/html/images/icon_pause.png b/org.tizen.guides/html/images/icon_pause.png
new file mode 100644 (file)
index 0000000..2dca16e
Binary files /dev/null and b/org.tizen.guides/html/images/icon_pause.png differ
diff --git a/org.tizen.guides/html/images/icon_photo_nophoto.png b/org.tizen.guides/html/images/icon_photo_nophoto.png
new file mode 100644 (file)
index 0000000..8c0ff58
Binary files /dev/null and b/org.tizen.guides/html/images/icon_photo_nophoto.png differ
diff --git a/org.tizen.guides/html/images/icon_play.png b/org.tizen.guides/html/images/icon_play.png
new file mode 100644 (file)
index 0000000..3af6d38
Binary files /dev/null and b/org.tizen.guides/html/images/icon_play.png differ
diff --git a/org.tizen.guides/html/images/icon_prev.png b/org.tizen.guides/html/images/icon_prev.png
new file mode 100644 (file)
index 0000000..f1cccd9
Binary files /dev/null and b/org.tizen.guides/html/images/icon_prev.png differ
diff --git a/org.tizen.guides/html/images/icon_refresh.png b/org.tizen.guides/html/images/icon_refresh.png
new file mode 100644 (file)
index 0000000..4a0a607
Binary files /dev/null and b/org.tizen.guides/html/images/icon_refresh.png differ
diff --git a/org.tizen.guides/html/images/icon_rewind.png b/org.tizen.guides/html/images/icon_rewind.png
new file mode 100644 (file)
index 0000000..9d20b6b
Binary files /dev/null and b/org.tizen.guides/html/images/icon_rewind.png differ
diff --git a/org.tizen.guides/html/images/icon_stop.png b/org.tizen.guides/html/images/icon_stop.png
new file mode 100644 (file)
index 0000000..a82de9e
Binary files /dev/null and b/org.tizen.guides/html/images/icon_stop.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_apps.png b/org.tizen.guides/html/images/icon_toolbar_apps.png
new file mode 100644 (file)
index 0000000..e353d52
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_apps.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_arrdown.png b/org.tizen.guides/html/images/icon_toolbar_arrdown.png
new file mode 100644 (file)
index 0000000..cb56753
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_arrdown.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_arrleft.png b/org.tizen.guides/html/images/icon_toolbar_arrleft.png
new file mode 100644 (file)
index 0000000..0e41ce5
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_arrleft.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_arrright.png b/org.tizen.guides/html/images/icon_toolbar_arrright.png
new file mode 100644 (file)
index 0000000..662d3f1
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_arrright.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_arrup.png b/org.tizen.guides/html/images/icon_toolbar_arrup.png
new file mode 100644 (file)
index 0000000..2b6fb22
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_arrup.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_chat.png b/org.tizen.guides/html/images/icon_toolbar_chat.png
new file mode 100644 (file)
index 0000000..35a7e75
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_chat.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_clock.png b/org.tizen.guides/html/images/icon_toolbar_clock.png
new file mode 100644 (file)
index 0000000..c08dfcc
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_clock.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_close.png b/org.tizen.guides/html/images/icon_toolbar_close.png
new file mode 100644 (file)
index 0000000..a06a1c1
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_close.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_delete.png b/org.tizen.guides/html/images/icon_toolbar_delete.png
new file mode 100644 (file)
index 0000000..073de75
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_delete.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_edit.png b/org.tizen.guides/html/images/icon_toolbar_edit.png
new file mode 100644 (file)
index 0000000..4d33899
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_edit.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_file.png b/org.tizen.guides/html/images/icon_toolbar_file.png
new file mode 100644 (file)
index 0000000..3f6c121
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_file.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_folder.png b/org.tizen.guides/html/images/icon_toolbar_folder.png
new file mode 100644 (file)
index 0000000..19a4dd4
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_folder.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_moremenu.png b/org.tizen.guides/html/images/icon_toolbar_moremenu.png
new file mode 100644 (file)
index 0000000..9fdfc0a
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_moremenu.png differ
diff --git a/org.tizen.guides/html/images/icon_toolbar_refresh.png b/org.tizen.guides/html/images/icon_toolbar_refresh.png
new file mode 100644 (file)
index 0000000..0894c11
Binary files /dev/null and b/org.tizen.guides/html/images/icon_toolbar_refresh.png differ
diff --git a/org.tizen.guides/html/images/icon_tree.png b/org.tizen.guides/html/images/icon_tree.png
new file mode 100644 (file)
index 0000000..7f43d66
Binary files /dev/null and b/org.tizen.guides/html/images/icon_tree.png differ
diff --git a/org.tizen.guides/html/images/idlers.png b/org.tizen.guides/html/images/idlers.png
new file mode 100644 (file)
index 0000000..9d497a4
Binary files /dev/null and b/org.tizen.guides/html/images/idlers.png differ
diff --git a/org.tizen.guides/html/images/image.png b/org.tizen.guides/html/images/image.png
new file mode 100644 (file)
index 0000000..bd2a9b1
Binary files /dev/null and b/org.tizen.guides/html/images/image.png differ
diff --git a/org.tizen.guides/html/images/image_tree.png b/org.tizen.guides/html/images/image_tree.png
new file mode 100644 (file)
index 0000000..577469d
Binary files /dev/null and b/org.tizen.guides/html/images/image_tree.png differ
diff --git a/org.tizen.guides/html/images/immediate_mode.png b/org.tizen.guides/html/images/immediate_mode.png
new file mode 100644 (file)
index 0000000..37e87cf
Binary files /dev/null and b/org.tizen.guides/html/images/immediate_mode.png differ
diff --git a/org.tizen.guides/html/images/import_css_area.png b/org.tizen.guides/html/images/import_css_area.png
new file mode 100644 (file)
index 0000000..f8a03de
Binary files /dev/null and b/org.tizen.guides/html/images/import_css_area.png differ
diff --git a/org.tizen.guides/html/images/import_linked_in_head.png b/org.tizen.guides/html/images/import_linked_in_head.png
new file mode 100644 (file)
index 0000000..8989094
Binary files /dev/null and b/org.tizen.guides/html/images/import_linked_in_head.png differ
diff --git a/org.tizen.guides/html/images/index.png b/org.tizen.guides/html/images/index.png
new file mode 100644 (file)
index 0000000..1673b9a
Binary files /dev/null and b/org.tizen.guides/html/images/index.png differ
diff --git a/org.tizen.guides/html/images/index_default.png b/org.tizen.guides/html/images/index_default.png
new file mode 100644 (file)
index 0000000..4f9e053
Binary files /dev/null and b/org.tizen.guides/html/images/index_default.png differ
diff --git a/org.tizen.guides/html/images/index_default02.png b/org.tizen.guides/html/images/index_default02.png
new file mode 100644 (file)
index 0000000..1153022
Binary files /dev/null and b/org.tizen.guides/html/images/index_default02.png differ
diff --git a/org.tizen.guides/html/images/index_pagecontrol.png b/org.tizen.guides/html/images/index_pagecontrol.png
new file mode 100644 (file)
index 0000000..1e01f7d
Binary files /dev/null and b/org.tizen.guides/html/images/index_pagecontrol.png differ
diff --git a/org.tizen.guides/html/images/index_tree.png b/org.tizen.guides/html/images/index_tree.png
new file mode 100644 (file)
index 0000000..aa7fb57
Binary files /dev/null and b/org.tizen.guides/html/images/index_tree.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_array.png b/org.tizen.guides/html/images/js_perform_result_array.png
new file mode 100644 (file)
index 0000000..d540d12
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_array.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_cache.png b/org.tizen.guides/html/images/js_perform_result_cache.png
new file mode 100644 (file)
index 0000000..7cb6aa7
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_cache.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_chaining.png b/org.tizen.guides/html/images/js_perform_result_chaining.png
new file mode 100644 (file)
index 0000000..600983a
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_chaining.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_debug.png b/org.tizen.guides/html/images/js_perform_result_debug.png
new file mode 100644 (file)
index 0000000..55d8c4d
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_debug.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_jquery_dom.png b/org.tizen.guides/html/images/js_perform_result_jquery_dom.png
new file mode 100644 (file)
index 0000000..dd425e4
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_jquery_dom.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_js_dom.png b/org.tizen.guides/html/images/js_perform_result_js_dom.png
new file mode 100644 (file)
index 0000000..e9cc27b
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_js_dom.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_literal.png b/org.tizen.guides/html/images/js_perform_result_literal.png
new file mode 100644 (file)
index 0000000..490c05d
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_literal.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_loop.png b/org.tizen.guides/html/images/js_perform_result_loop.png
new file mode 100644 (file)
index 0000000..213ddce
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_loop.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_selector1.png b/org.tizen.guides/html/images/js_perform_result_selector1.png
new file mode 100644 (file)
index 0000000..1512167
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_selector1.png differ
diff --git a/org.tizen.guides/html/images/js_perform_result_selector2.png b/org.tizen.guides/html/images/js_perform_result_selector2.png
new file mode 100644 (file)
index 0000000..f3a4634
Binary files /dev/null and b/org.tizen.guides/html/images/js_perform_result_selector2.png differ
diff --git a/org.tizen.guides/html/images/key_manager.png b/org.tizen.guides/html/images/key_manager.png
new file mode 100644 (file)
index 0000000..0a37663
Binary files /dev/null and b/org.tizen.guides/html/images/key_manager.png differ
diff --git a/org.tizen.guides/html/images/label.png b/org.tizen.guides/html/images/label.png
new file mode 100644 (file)
index 0000000..f17cd7d
Binary files /dev/null and b/org.tizen.guides/html/images/label.png differ
diff --git a/org.tizen.guides/html/images/label_tree.png b/org.tizen.guides/html/images/label_tree.png
new file mode 100644 (file)
index 0000000..b571aca
Binary files /dev/null and b/org.tizen.guides/html/images/label_tree.png differ
diff --git a/org.tizen.guides/html/images/layout_app.png b/org.tizen.guides/html/images/layout_app.png
new file mode 100644 (file)
index 0000000..56991bf
Binary files /dev/null and b/org.tizen.guides/html/images/layout_app.png differ
diff --git a/org.tizen.guides/html/images/layout_calculator.png b/org.tizen.guides/html/images/layout_calculator.png
new file mode 100644 (file)
index 0000000..897bed9
Binary files /dev/null and b/org.tizen.guides/html/images/layout_calculator.png differ
diff --git a/org.tizen.guides/html/images/layout_calculator_absolute.png b/org.tizen.guides/html/images/layout_calculator_absolute.png
new file mode 100644 (file)
index 0000000..c619ece
Binary files /dev/null and b/org.tizen.guides/html/images/layout_calculator_absolute.png differ
diff --git a/org.tizen.guides/html/images/layout_calculator_relative.png b/org.tizen.guides/html/images/layout_calculator_relative.png
new file mode 100644 (file)
index 0000000..e79a558
Binary files /dev/null and b/org.tizen.guides/html/images/layout_calculator_relative.png differ
diff --git a/org.tizen.guides/html/images/layout_fixed_media.png b/org.tizen.guides/html/images/layout_fixed_media.png
new file mode 100644 (file)
index 0000000..52bae74
Binary files /dev/null and b/org.tizen.guides/html/images/layout_fixed_media.png differ
diff --git a/org.tizen.guides/html/images/layout_flexible_media.png b/org.tizen.guides/html/images/layout_flexible_media.png
new file mode 100644 (file)
index 0000000..aa66736
Binary files /dev/null and b/org.tizen.guides/html/images/layout_flexible_media.png differ
diff --git a/org.tizen.guides/html/images/layout_image.png b/org.tizen.guides/html/images/layout_image.png
new file mode 100644 (file)
index 0000000..735e45f
Binary files /dev/null and b/org.tizen.guides/html/images/layout_image.png differ
diff --git a/org.tizen.guides/html/images/layout_image_scaled.png b/org.tizen.guides/html/images/layout_image_scaled.png
new file mode 100644 (file)
index 0000000..433b3cf
Binary files /dev/null and b/org.tizen.guides/html/images/layout_image_scaled.png differ
diff --git a/org.tizen.guides/html/images/layout_original.png b/org.tizen.guides/html/images/layout_original.png
new file mode 100644 (file)
index 0000000..cdb2202
Binary files /dev/null and b/org.tizen.guides/html/images/layout_original.png differ
diff --git a/org.tizen.guides/html/images/layout_original_scaled.png b/org.tizen.guides/html/images/layout_original_scaled.png
new file mode 100644 (file)
index 0000000..17b1163
Binary files /dev/null and b/org.tizen.guides/html/images/layout_original_scaled.png differ
diff --git a/org.tizen.guides/html/images/layout_sample.png b/org.tizen.guides/html/images/layout_sample.png
new file mode 100644 (file)
index 0000000..cfa719a
Binary files /dev/null and b/org.tizen.guides/html/images/layout_sample.png differ
diff --git a/org.tizen.guides/html/images/layout_sample_ok.png b/org.tizen.guides/html/images/layout_sample_ok.png
new file mode 100644 (file)
index 0000000..8da7ca9
Binary files /dev/null and b/org.tizen.guides/html/images/layout_sample_ok.png differ
diff --git a/org.tizen.guides/html/images/layout_sample_ugly.png b/org.tizen.guides/html/images/layout_sample_ugly.png
new file mode 100644 (file)
index 0000000..06dc8c2
Binary files /dev/null and b/org.tizen.guides/html/images/layout_sample_ugly.png differ
diff --git a/org.tizen.guides/html/images/life_cycle_model_new.png b/org.tizen.guides/html/images/life_cycle_model_new.png
new file mode 100644 (file)
index 0000000..840505c
Binary files /dev/null and b/org.tizen.guides/html/images/life_cycle_model_new.png differ
diff --git a/org.tizen.guides/html/images/life_cycle_model_old.png b/org.tizen.guides/html/images/life_cycle_model_old.png
new file mode 100644 (file)
index 0000000..58ad8d2
Binary files /dev/null and b/org.tizen.guides/html/images/life_cycle_model_old.png differ
diff --git a/org.tizen.guides/html/images/list.png b/org.tizen.guides/html/images/list.png
new file mode 100644 (file)
index 0000000..211f557
Binary files /dev/null and b/org.tizen.guides/html/images/list.png differ
diff --git a/org.tizen.guides/html/images/list_tree.png b/org.tizen.guides/html/images/list_tree.png
new file mode 100644 (file)
index 0000000..27a8248
Binary files /dev/null and b/org.tizen.guides/html/images/list_tree.png differ
diff --git a/org.tizen.guides/html/images/loc_priv_setting.png b/org.tizen.guides/html/images/loc_priv_setting.png
new file mode 100644 (file)
index 0000000..27395e5
Binary files /dev/null and b/org.tizen.guides/html/images/loc_priv_setting.png differ
diff --git a/org.tizen.guides/html/images/localize_widget.png b/org.tizen.guides/html/images/localize_widget.png
new file mode 100644 (file)
index 0000000..9d446df
Binary files /dev/null and b/org.tizen.guides/html/images/localize_widget.png differ
diff --git a/org.tizen.guides/html/images/location_setting_and_indicator.png b/org.tizen.guides/html/images/location_setting_and_indicator.png
new file mode 100644 (file)
index 0000000..878cafb
Binary files /dev/null and b/org.tizen.guides/html/images/location_setting_and_indicator.png differ
diff --git a/org.tizen.guides/html/images/map_tree.png b/org.tizen.guides/html/images/map_tree.png
new file mode 100644 (file)
index 0000000..c0d0a8d
Binary files /dev/null and b/org.tizen.guides/html/images/map_tree.png differ
diff --git a/org.tizen.guides/html/images/mapbuf_tree.png b/org.tizen.guides/html/images/mapbuf_tree.png
new file mode 100644 (file)
index 0000000..64a63f6
Binary files /dev/null and b/org.tizen.guides/html/images/mapbuf_tree.png differ
diff --git a/org.tizen.guides/html/images/mascot.gif b/org.tizen.guides/html/images/mascot.gif
new file mode 100644 (file)
index 0000000..e03295c
Binary files /dev/null and b/org.tizen.guides/html/images/mascot.gif differ
diff --git a/org.tizen.guides/html/images/memory.png b/org.tizen.guides/html/images/memory.png
new file mode 100644 (file)
index 0000000..d9b3cfe
Binary files /dev/null and b/org.tizen.guides/html/images/memory.png differ
diff --git a/org.tizen.guides/html/images/memory2.png b/org.tizen.guides/html/images/memory2.png
new file mode 100644 (file)
index 0000000..1ed0b05
Binary files /dev/null and b/org.tizen.guides/html/images/memory2.png differ
diff --git a/org.tizen.guides/html/images/memory3.png b/org.tizen.guides/html/images/memory3.png
new file mode 100644 (file)
index 0000000..d0905c7
Binary files /dev/null and b/org.tizen.guides/html/images/memory3.png differ
diff --git a/org.tizen.guides/html/images/message_port.png b/org.tizen.guides/html/images/message_port.png
new file mode 100644 (file)
index 0000000..ece751b
Binary files /dev/null and b/org.tizen.guides/html/images/message_port.png differ
diff --git a/org.tizen.guides/html/images/message_port_trusted.png b/org.tizen.guides/html/images/message_port_trusted.png
new file mode 100644 (file)
index 0000000..95874d1
Binary files /dev/null and b/org.tizen.guides/html/images/message_port_trusted.png differ
diff --git a/org.tizen.guides/html/images/metadata.png b/org.tizen.guides/html/images/metadata.png
new file mode 100644 (file)
index 0000000..bbdbc1d
Binary files /dev/null and b/org.tizen.guides/html/images/metadata.png differ
diff --git a/org.tizen.guides/html/images/mime_type.png b/org.tizen.guides/html/images/mime_type.png
new file mode 100644 (file)
index 0000000..3e277a7
Binary files /dev/null and b/org.tizen.guides/html/images/mime_type.png differ
diff --git a/org.tizen.guides/html/images/minimize_doc_flow.png b/org.tizen.guides/html/images/minimize_doc_flow.png
new file mode 100644 (file)
index 0000000..413abb7
Binary files /dev/null and b/org.tizen.guides/html/images/minimize_doc_flow.png differ
diff --git a/org.tizen.guides/html/images/mn_division.png b/org.tizen.guides/html/images/mn_division.png
new file mode 100644 (file)
index 0000000..1f7e337
Binary files /dev/null and b/org.tizen.guides/html/images/mn_division.png differ
diff --git a/org.tizen.guides/html/images/mn_fold.png b/org.tizen.guides/html/images/mn_fold.png
new file mode 100644 (file)
index 0000000..1f8d62b
Binary files /dev/null and b/org.tizen.guides/html/images/mn_fold.png differ
diff --git a/org.tizen.guides/html/images/mn_icon.png b/org.tizen.guides/html/images/mn_icon.png
new file mode 100644 (file)
index 0000000..19a0fd3
Binary files /dev/null and b/org.tizen.guides/html/images/mn_icon.png differ
diff --git a/org.tizen.guides/html/images/move_ear.png b/org.tizen.guides/html/images/move_ear.png
new file mode 100644 (file)
index 0000000..67543e3
Binary files /dev/null and b/org.tizen.guides/html/images/move_ear.png differ
diff --git a/org.tizen.guides/html/images/multi_button_default.png b/org.tizen.guides/html/images/multi_button_default.png
new file mode 100644 (file)
index 0000000..6e20931
Binary files /dev/null and b/org.tizen.guides/html/images/multi_button_default.png differ
diff --git a/org.tizen.guides/html/images/multiple_layout_example.png b/org.tizen.guides/html/images/multiple_layout_example.png
new file mode 100644 (file)
index 0000000..bb5213c
Binary files /dev/null and b/org.tizen.guides/html/images/multiple_layout_example.png differ
diff --git a/org.tizen.guides/html/images/multithreadapp_event_inspector.png b/org.tizen.guides/html/images/multithreadapp_event_inspector.png
new file mode 100644 (file)
index 0000000..b865690
Binary files /dev/null and b/org.tizen.guides/html/images/multithreadapp_event_inspector.png differ
diff --git a/org.tizen.guides/html/images/multithreadapp_memory_inspector.png b/org.tizen.guides/html/images/multithreadapp_memory_inspector.png
new file mode 100644 (file)
index 0000000..e8321a2
Binary files /dev/null and b/org.tizen.guides/html/images/multithreadapp_memory_inspector.png differ
diff --git a/org.tizen.guides/html/images/mw_division.png b/org.tizen.guides/html/images/mw_division.png
new file mode 100644 (file)
index 0000000..8fc3efa
Binary files /dev/null and b/org.tizen.guides/html/images/mw_division.png differ
diff --git a/org.tizen.guides/html/images/mw_fold.png b/org.tizen.guides/html/images/mw_fold.png
new file mode 100644 (file)
index 0000000..a96e013
Binary files /dev/null and b/org.tizen.guides/html/images/mw_fold.png differ
diff --git a/org.tizen.guides/html/images/mw_icon.png b/org.tizen.guides/html/images/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.guides/html/images/mw_icon.png differ
diff --git a/org.tizen.guides/html/images/mw_icon_optional.png b/org.tizen.guides/html/images/mw_icon_optional.png
new file mode 100644 (file)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.guides/html/images/mw_icon_optional.png differ
diff --git a/org.tizen.guides/html/images/n_division.png b/org.tizen.guides/html/images/n_division.png
new file mode 100644 (file)
index 0000000..df38a99
Binary files /dev/null and b/org.tizen.guides/html/images/n_division.png differ
diff --git a/org.tizen.guides/html/images/n_fold.png b/org.tizen.guides/html/images/n_fold.png
new file mode 100644 (file)
index 0000000..6336532
Binary files /dev/null and b/org.tizen.guides/html/images/n_fold.png differ
diff --git a/org.tizen.guides/html/images/network.png b/org.tizen.guides/html/images/network.png
new file mode 100644 (file)
index 0000000..4fd6c6a
Binary files /dev/null and b/org.tizen.guides/html/images/network.png differ
diff --git a/org.tizen.guides/html/images/network2.png b/org.tizen.guides/html/images/network2.png
new file mode 100644 (file)
index 0000000..77c7c9a
Binary files /dev/null and b/org.tizen.guides/html/images/network2.png differ
diff --git a/org.tizen.guides/html/images/network3.png b/org.tizen.guides/html/images/network3.png
new file mode 100644 (file)
index 0000000..47152bb
Binary files /dev/null and b/org.tizen.guides/html/images/network3.png differ
diff --git a/org.tizen.guides/html/images/network_speed_sprite.png b/org.tizen.guides/html/images/network_speed_sprite.png
new file mode 100644 (file)
index 0000000..a0813e8
Binary files /dev/null and b/org.tizen.guides/html/images/network_speed_sprite.png differ
diff --git a/org.tizen.guides/html/images/nfc_record.png b/org.tizen.guides/html/images/nfc_record.png
new file mode 100644 (file)
index 0000000..5588a27
Binary files /dev/null and b/org.tizen.guides/html/images/nfc_record.png differ
diff --git a/org.tizen.guides/html/images/notification.png b/org.tizen.guides/html/images/notification.png
new file mode 100644 (file)
index 0000000..c130de9
Binary files /dev/null and b/org.tizen.guides/html/images/notification.png differ
diff --git a/org.tizen.guides/html/images/notify_tree.png b/org.tizen.guides/html/images/notify_tree.png
new file mode 100644 (file)
index 0000000..8045806
Binary files /dev/null and b/org.tizen.guides/html/images/notify_tree.png differ
diff --git a/org.tizen.guides/html/images/opengl1.png b/org.tizen.guides/html/images/opengl1.png
new file mode 100644 (file)
index 0000000..d4956d1
Binary files /dev/null and b/org.tizen.guides/html/images/opengl1.png differ
diff --git a/org.tizen.guides/html/images/opengl2.png b/org.tizen.guides/html/images/opengl2.png
new file mode 100644 (file)
index 0000000..b8aaa85
Binary files /dev/null and b/org.tizen.guides/html/images/opengl2.png differ
diff --git a/org.tizen.guides/html/images/package_structure_new.png b/org.tizen.guides/html/images/package_structure_new.png
new file mode 100644 (file)
index 0000000..3298a2c
Binary files /dev/null and b/org.tizen.guides/html/images/package_structure_new.png differ
diff --git a/org.tizen.guides/html/images/package_structure_old.png b/org.tizen.guides/html/images/package_structure_old.png
new file mode 100644 (file)
index 0000000..7367e55
Binary files /dev/null and b/org.tizen.guides/html/images/package_structure_old.png differ
diff --git a/org.tizen.guides/html/images/padding-hints.png b/org.tizen.guides/html/images/padding-hints.png
new file mode 100644 (file)
index 0000000..3f29fae
Binary files /dev/null and b/org.tizen.guides/html/images/padding-hints.png differ
diff --git a/org.tizen.guides/html/images/panel_default.png b/org.tizen.guides/html/images/panel_default.png
new file mode 100644 (file)
index 0000000..ef73a1c
Binary files /dev/null and b/org.tizen.guides/html/images/panel_default.png differ
diff --git a/org.tizen.guides/html/images/panel_tree.png b/org.tizen.guides/html/images/panel_tree.png
new file mode 100644 (file)
index 0000000..bb60e2e
Binary files /dev/null and b/org.tizen.guides/html/images/panel_tree.png differ
diff --git a/org.tizen.guides/html/images/panes.png b/org.tizen.guides/html/images/panes.png
new file mode 100644 (file)
index 0000000..e6cc9da
Binary files /dev/null and b/org.tizen.guides/html/images/panes.png differ
diff --git a/org.tizen.guides/html/images/photo_tree.png b/org.tizen.guides/html/images/photo_tree.png
new file mode 100644 (file)
index 0000000..abbf3e2
Binary files /dev/null and b/org.tizen.guides/html/images/photo_tree.png differ
diff --git a/org.tizen.guides/html/images/photocam_tree.png b/org.tizen.guides/html/images/photocam_tree.png
new file mode 100644 (file)
index 0000000..9ceb125
Binary files /dev/null and b/org.tizen.guides/html/images/photocam_tree.png differ
diff --git a/org.tizen.guides/html/images/plug_tree.png b/org.tizen.guides/html/images/plug_tree.png
new file mode 100644 (file)
index 0000000..5c27552
Binary files /dev/null and b/org.tizen.guides/html/images/plug_tree.png differ
diff --git a/org.tizen.guides/html/images/popup.png b/org.tizen.guides/html/images/popup.png
new file mode 100644 (file)
index 0000000..d076148
Binary files /dev/null and b/org.tizen.guides/html/images/popup.png differ
diff --git a/org.tizen.guides/html/images/popup_default.png b/org.tizen.guides/html/images/popup_default.png
new file mode 100644 (file)
index 0000000..84a4e2d
Binary files /dev/null and b/org.tizen.guides/html/images/popup_default.png differ
diff --git a/org.tizen.guides/html/images/popup_toast.png b/org.tizen.guides/html/images/popup_toast.png
new file mode 100644 (file)
index 0000000..8e4de82
Binary files /dev/null and b/org.tizen.guides/html/images/popup_toast.png differ
diff --git a/org.tizen.guides/html/images/popup_tree.png b/org.tizen.guides/html/images/popup_tree.png
new file mode 100644 (file)
index 0000000..6c69a54
Binary files /dev/null and b/org.tizen.guides/html/images/popup_tree.png differ
diff --git a/org.tizen.guides/html/images/porting_installation_process.png b/org.tizen.guides/html/images/porting_installation_process.png
new file mode 100644 (file)
index 0000000..670e3b4
Binary files /dev/null and b/org.tizen.guides/html/images/porting_installation_process.png differ
diff --git a/org.tizen.guides/html/images/pos_map_all.png b/org.tizen.guides/html/images/pos_map_all.png
new file mode 100644 (file)
index 0000000..072def1
Binary files /dev/null and b/org.tizen.guides/html/images/pos_map_all.png differ
diff --git a/org.tizen.guides/html/images/progressbar.png b/org.tizen.guides/html/images/progressbar.png
new file mode 100644 (file)
index 0000000..24b90c6
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar.png differ
diff --git a/org.tizen.guides/html/images/progressbar_default.png b/org.tizen.guides/html/images/progressbar_default.png
new file mode 100644 (file)
index 0000000..66aa0ed
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_default.png differ
diff --git a/org.tizen.guides/html/images/progressbar_tree.png b/org.tizen.guides/html/images/progressbar_tree.png
new file mode 100644 (file)
index 0000000..c6593fe
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_tree.png differ
diff --git a/org.tizen.guides/html/images/progressbar_wheel.png b/org.tizen.guides/html/images/progressbar_wheel.png
new file mode 100644 (file)
index 0000000..3cb2890
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_wheel.png differ
diff --git a/org.tizen.guides/html/images/quality_high.png b/org.tizen.guides/html/images/quality_high.png
new file mode 100644 (file)
index 0000000..543417b
Binary files /dev/null and b/org.tizen.guides/html/images/quality_high.png differ
diff --git a/org.tizen.guides/html/images/quality_highest.png b/org.tizen.guides/html/images/quality_highest.png
new file mode 100644 (file)
index 0000000..60e9a24
Binary files /dev/null and b/org.tizen.guides/html/images/quality_highest.png differ
diff --git a/org.tizen.guides/html/images/quality_low.png b/org.tizen.guides/html/images/quality_low.png
new file mode 100644 (file)
index 0000000..6905a81
Binary files /dev/null and b/org.tizen.guides/html/images/quality_low.png differ
diff --git a/org.tizen.guides/html/images/quality_lowest.png b/org.tizen.guides/html/images/quality_lowest.png
new file mode 100644 (file)
index 0000000..d42a668
Binary files /dev/null and b/org.tizen.guides/html/images/quality_lowest.png differ
diff --git a/org.tizen.guides/html/images/quality_medium.png b/org.tizen.guides/html/images/quality_medium.png
new file mode 100644 (file)
index 0000000..13f2652
Binary files /dev/null and b/org.tizen.guides/html/images/quality_medium.png differ
diff --git a/org.tizen.guides/html/images/radio.png b/org.tizen.guides/html/images/radio.png
new file mode 100644 (file)
index 0000000..5660eae
Binary files /dev/null and b/org.tizen.guides/html/images/radio.png differ
diff --git a/org.tizen.guides/html/images/radio_default.png b/org.tizen.guides/html/images/radio_default.png
new file mode 100644 (file)
index 0000000..4a8f976
Binary files /dev/null and b/org.tizen.guides/html/images/radio_default.png differ
diff --git a/org.tizen.guides/html/images/radio_state_changes.png b/org.tizen.guides/html/images/radio_state_changes.png
new file mode 100644 (file)
index 0000000..39cbffb
Binary files /dev/null and b/org.tizen.guides/html/images/radio_state_changes.png differ
diff --git a/org.tizen.guides/html/images/radio_tree.png b/org.tizen.guides/html/images/radio_tree.png
new file mode 100644 (file)
index 0000000..877f74d
Binary files /dev/null and b/org.tizen.guides/html/images/radio_tree.png differ
diff --git a/org.tizen.guides/html/images/redrawing01.png b/org.tizen.guides/html/images/redrawing01.png
new file mode 100644 (file)
index 0000000..12ccd90
Binary files /dev/null and b/org.tizen.guides/html/images/redrawing01.png differ
diff --git a/org.tizen.guides/html/images/redrawing02.png b/org.tizen.guides/html/images/redrawing02.png
new file mode 100644 (file)
index 0000000..235a561
Binary files /dev/null and b/org.tizen.guides/html/images/redrawing02.png differ
diff --git a/org.tizen.guides/html/images/redrawing03.png b/org.tizen.guides/html/images/redrawing03.png
new file mode 100644 (file)
index 0000000..0d132c9
Binary files /dev/null and b/org.tizen.guides/html/images/redrawing03.png differ
diff --git a/org.tizen.guides/html/images/redrawing04.png b/org.tizen.guides/html/images/redrawing04.png
new file mode 100644 (file)
index 0000000..b81e926
Binary files /dev/null and b/org.tizen.guides/html/images/redrawing04.png differ
diff --git a/org.tizen.guides/html/images/redrawing05.png b/org.tizen.guides/html/images/redrawing05.png
new file mode 100644 (file)
index 0000000..30f64db
Binary files /dev/null and b/org.tizen.guides/html/images/redrawing05.png differ
diff --git a/org.tizen.guides/html/images/rel1_rel2_offsets.png b/org.tizen.guides/html/images/rel1_rel2_offsets.png
new file mode 100644 (file)
index 0000000..bacdaab
Binary files /dev/null and b/org.tizen.guides/html/images/rel1_rel2_offsets.png differ
diff --git a/org.tizen.guides/html/images/rel1_rel2_offsets_and_relative.png b/org.tizen.guides/html/images/rel1_rel2_offsets_and_relative.png
new file mode 100644 (file)
index 0000000..51a9ec7
Binary files /dev/null and b/org.tizen.guides/html/images/rel1_rel2_offsets_and_relative.png differ
diff --git a/org.tizen.guides/html/images/rendering1.png b/org.tizen.guides/html/images/rendering1.png
new file mode 100644 (file)
index 0000000..2f75adb
Binary files /dev/null and b/org.tizen.guides/html/images/rendering1.png differ
diff --git a/org.tizen.guides/html/images/retained_mode.png b/org.tizen.guides/html/images/retained_mode.png
new file mode 100644 (file)
index 0000000..766c660
Binary files /dev/null and b/org.tizen.guides/html/images/retained_mode.png differ
diff --git a/org.tizen.guides/html/images/scale.png b/org.tizen.guides/html/images/scale.png
new file mode 100644 (file)
index 0000000..21db74d
Binary files /dev/null and b/org.tizen.guides/html/images/scale.png differ
diff --git a/org.tizen.guides/html/images/scale_1.3_finger_50.png b/org.tizen.guides/html/images/scale_1.3_finger_50.png
new file mode 100644 (file)
index 0000000..1385565
Binary files /dev/null and b/org.tizen.guides/html/images/scale_1.3_finger_50.png differ
diff --git a/org.tizen.guides/html/images/scale_1_finger_50.png b/org.tizen.guides/html/images/scale_1_finger_50.png
new file mode 100644 (file)
index 0000000..ffb3624
Binary files /dev/null and b/org.tizen.guides/html/images/scale_1_finger_50.png differ
diff --git a/org.tizen.guides/html/images/scale_1_finger_90.png b/org.tizen.guides/html/images/scale_1_finger_90.png
new file mode 100644 (file)
index 0000000..15720eb
Binary files /dev/null and b/org.tizen.guides/html/images/scale_1_finger_90.png differ
diff --git a/org.tizen.guides/html/images/scaling.png b/org.tizen.guides/html/images/scaling.png
new file mode 100644 (file)
index 0000000..c099745
Binary files /dev/null and b/org.tizen.guides/html/images/scaling.png differ
diff --git a/org.tizen.guides/html/images/segm_control_default.png b/org.tizen.guides/html/images/segm_control_default.png
new file mode 100644 (file)
index 0000000..45be5b2
Binary files /dev/null and b/org.tizen.guides/html/images/segm_control_default.png differ
diff --git a/org.tizen.guides/html/images/segment.png b/org.tizen.guides/html/images/segment.png
new file mode 100644 (file)
index 0000000..eba0484
Binary files /dev/null and b/org.tizen.guides/html/images/segment.png differ
diff --git a/org.tizen.guides/html/images/segment_control_tree.png b/org.tizen.guides/html/images/segment_control_tree.png
new file mode 100644 (file)
index 0000000..be07254
Binary files /dev/null and b/org.tizen.guides/html/images/segment_control_tree.png differ
diff --git a/org.tizen.guides/html/images/segment_text.png b/org.tizen.guides/html/images/segment_text.png
new file mode 100644 (file)
index 0000000..a8dc8d9
Binary files /dev/null and b/org.tizen.guides/html/images/segment_text.png differ
diff --git a/org.tizen.guides/html/images/sensor_types_accelerometer_vector.png b/org.tizen.guides/html/images/sensor_types_accelerometer_vector.png
new file mode 100644 (file)
index 0000000..0714090
Binary files /dev/null and b/org.tizen.guides/html/images/sensor_types_accelerometer_vector.png differ
diff --git a/org.tizen.guides/html/images/sensor_types_deviceorientation_frame.png b/org.tizen.guides/html/images/sensor_types_deviceorientation_frame.png
new file mode 100644 (file)
index 0000000..6edb027
Binary files /dev/null and b/org.tizen.guides/html/images/sensor_types_deviceorientation_frame.png differ
diff --git a/org.tizen.guides/html/images/sensor_types_gravity_frame.png b/org.tizen.guides/html/images/sensor_types_gravity_frame.png
new file mode 100644 (file)
index 0000000..4490c09
Binary files /dev/null and b/org.tizen.guides/html/images/sensor_types_gravity_frame.png differ
diff --git a/org.tizen.guides/html/images/sensor_types_gyro_vector.png b/org.tizen.guides/html/images/sensor_types_gyro_vector.png
new file mode 100644 (file)
index 0000000..f74c1e6
Binary files /dev/null and b/org.tizen.guides/html/images/sensor_types_gyro_vector.png differ
diff --git a/org.tizen.guides/html/images/sensor_types_magnetic_vector.png b/org.tizen.guides/html/images/sensor_types_magnetic_vector.png
new file mode 100644 (file)
index 0000000..22dc85f
Binary files /dev/null and b/org.tizen.guides/html/images/sensor_types_magnetic_vector.png differ
diff --git a/org.tizen.guides/html/images/sensor_types_useracceleration_vector.png b/org.tizen.guides/html/images/sensor_types_useracceleration_vector.png
new file mode 100644 (file)
index 0000000..a4d09a9
Binary files /dev/null and b/org.tizen.guides/html/images/sensor_types_useracceleration_vector.png differ
diff --git a/org.tizen.guides/html/images/service_app.png b/org.tizen.guides/html/images/service_app.png
new file mode 100644 (file)
index 0000000..be33f6f
Binary files /dev/null and b/org.tizen.guides/html/images/service_app.png differ
diff --git a/org.tizen.guides/html/images/service_architecture.png b/org.tizen.guides/html/images/service_architecture.png
new file mode 100644 (file)
index 0000000..a1976a4
Binary files /dev/null and b/org.tizen.guides/html/images/service_architecture.png differ
diff --git a/org.tizen.guides/html/images/shake.png b/org.tizen.guides/html/images/shake.png
new file mode 100644 (file)
index 0000000..c8af487
Binary files /dev/null and b/org.tizen.guides/html/images/shake.png differ
diff --git a/org.tizen.guides/html/images/slider.png b/org.tizen.guides/html/images/slider.png
new file mode 100644 (file)
index 0000000..2d32e85
Binary files /dev/null and b/org.tizen.guides/html/images/slider.png differ
diff --git a/org.tizen.guides/html/images/slider_hor.png b/org.tizen.guides/html/images/slider_hor.png
new file mode 100644 (file)
index 0000000..90fb9fb
Binary files /dev/null and b/org.tizen.guides/html/images/slider_hor.png differ
diff --git a/org.tizen.guides/html/images/slider_hor_center.png b/org.tizen.guides/html/images/slider_hor_center.png
new file mode 100644 (file)
index 0000000..da627b5
Binary files /dev/null and b/org.tizen.guides/html/images/slider_hor_center.png differ
diff --git a/org.tizen.guides/html/images/slider_tree.png b/org.tizen.guides/html/images/slider_tree.png
new file mode 100644 (file)
index 0000000..5a08337
Binary files /dev/null and b/org.tizen.guides/html/images/slider_tree.png differ
diff --git a/org.tizen.guides/html/images/slider_ver.png b/org.tizen.guides/html/images/slider_ver.png
new file mode 100644 (file)
index 0000000..ce3c420
Binary files /dev/null and b/org.tizen.guides/html/images/slider_ver.png differ
diff --git a/org.tizen.guides/html/images/slider_ver_center.png b/org.tizen.guides/html/images/slider_ver_center.png
new file mode 100644 (file)
index 0000000..04e1079
Binary files /dev/null and b/org.tizen.guides/html/images/slider_ver_center.png differ
diff --git a/org.tizen.guides/html/images/snap.png b/org.tizen.guides/html/images/snap.png
new file mode 100644 (file)
index 0000000..a32eca1
Binary files /dev/null and b/org.tizen.guides/html/images/snap.png differ
diff --git a/org.tizen.guides/html/images/spin.png b/org.tizen.guides/html/images/spin.png
new file mode 100644 (file)
index 0000000..ebf330b
Binary files /dev/null and b/org.tizen.guides/html/images/spin.png differ
diff --git a/org.tizen.guides/html/images/spinner_hor.png b/org.tizen.guides/html/images/spinner_hor.png
new file mode 100644 (file)
index 0000000..96ce330
Binary files /dev/null and b/org.tizen.guides/html/images/spinner_hor.png differ
diff --git a/org.tizen.guides/html/images/spinner_tree.png b/org.tizen.guides/html/images/spinner_tree.png
new file mode 100644 (file)
index 0000000..3f8d8d2
Binary files /dev/null and b/org.tizen.guides/html/images/spinner_tree.png differ
diff --git a/org.tizen.guides/html/images/spinner_ver.png b/org.tizen.guides/html/images/spinner_ver.png
new file mode 100644 (file)
index 0000000..612446a
Binary files /dev/null and b/org.tizen.guides/html/images/spinner_ver.png differ
diff --git a/org.tizen.guides/html/images/state_model_new.png b/org.tizen.guides/html/images/state_model_new.png
new file mode 100644 (file)
index 0000000..42fbeca
Binary files /dev/null and b/org.tizen.guides/html/images/state_model_new.png differ
diff --git a/org.tizen.guides/html/images/state_model_old.png b/org.tizen.guides/html/images/state_model_old.png
new file mode 100644 (file)
index 0000000..bfd1bea
Binary files /dev/null and b/org.tizen.guides/html/images/state_model_old.png differ
diff --git a/org.tizen.guides/html/images/stt_lifecycle.png b/org.tizen.guides/html/images/stt_lifecycle.png
new file mode 100644 (file)
index 0000000..f213f18
Binary files /dev/null and b/org.tizen.guides/html/images/stt_lifecycle.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_def.png b/org.tizen.guides/html/images/styleguide_genlist_def.png
new file mode 100644 (file)
index 0000000..7298a5a
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_def.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_defstyle.png b/org.tizen.guides/html/images/styleguide_genlist_defstyle.png
new file mode 100644 (file)
index 0000000..87ff183
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_defstyle.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_doublelabel.png b/org.tizen.guides/html/images/styleguide_genlist_doublelabel.png
new file mode 100644 (file)
index 0000000..b86821d
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_doublelabel.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_end.png b/org.tizen.guides/html/images/styleguide_genlist_end.png
new file mode 100644 (file)
index 0000000..46d547c
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_end.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_full.png b/org.tizen.guides/html/images/styleguide_genlist_full.png
new file mode 100644 (file)
index 0000000..9b39f8b
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_full.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_group.png b/org.tizen.guides/html/images/styleguide_genlist_group.png
new file mode 100644 (file)
index 0000000..783d6e3
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_group.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_message.png b/org.tizen.guides/html/images/styleguide_genlist_message.png
new file mode 100644 (file)
index 0000000..82a88b9
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_message.png differ
diff --git a/org.tizen.guides/html/images/styleguide_genlist_oneicon.png b/org.tizen.guides/html/images/styleguide_genlist_oneicon.png
new file mode 100644 (file)
index 0000000..d39cee1
Binary files /dev/null and b/org.tizen.guides/html/images/styleguide_genlist_oneicon.png differ
diff --git a/org.tizen.guides/html/images/telephony.png b/org.tizen.guides/html/images/telephony.png
new file mode 100644 (file)
index 0000000..7072563
Binary files /dev/null and b/org.tizen.guides/html/images/telephony.png differ
diff --git a/org.tizen.guides/html/images/thread_pool_lifecycle_1.png b/org.tizen.guides/html/images/thread_pool_lifecycle_1.png
new file mode 100644 (file)
index 0000000..54af81a
Binary files /dev/null and b/org.tizen.guides/html/images/thread_pool_lifecycle_1.png differ
diff --git a/org.tizen.guides/html/images/thread_pool_lifecycle_2.png b/org.tizen.guides/html/images/thread_pool_lifecycle_2.png
new file mode 100644 (file)
index 0000000..2e78e15
Binary files /dev/null and b/org.tizen.guides/html/images/thread_pool_lifecycle_2.png differ
diff --git a/org.tizen.guides/html/images/thread_pool_lifecycle_3.png b/org.tizen.guides/html/images/thread_pool_lifecycle_3.png
new file mode 100644 (file)
index 0000000..52f80e4
Binary files /dev/null and b/org.tizen.guides/html/images/thread_pool_lifecycle_3.png differ
diff --git a/org.tizen.guides/html/images/tilt.png b/org.tizen.guides/html/images/tilt.png
new file mode 100644 (file)
index 0000000..0a10447
Binary files /dev/null and b/org.tizen.guides/html/images/tilt.png differ
diff --git a/org.tizen.guides/html/images/tone.png b/org.tizen.guides/html/images/tone.png
new file mode 100644 (file)
index 0000000..0c021cf
Binary files /dev/null and b/org.tizen.guides/html/images/tone.png differ
diff --git a/org.tizen.guides/html/images/toolbar.png b/org.tizen.guides/html/images/toolbar.png
new file mode 100644 (file)
index 0000000..fea949a
Binary files /dev/null and b/org.tizen.guides/html/images/toolbar.png differ
diff --git a/org.tizen.guides/html/images/toolbar_default.png b/org.tizen.guides/html/images/toolbar_default.png
new file mode 100644 (file)
index 0000000..4dd447b
Binary files /dev/null and b/org.tizen.guides/html/images/toolbar_default.png differ
diff --git a/org.tizen.guides/html/images/toolbar_navigation.png b/org.tizen.guides/html/images/toolbar_navigation.png
new file mode 100644 (file)
index 0000000..d5d0a09
Binary files /dev/null and b/org.tizen.guides/html/images/toolbar_navigation.png differ
diff --git a/org.tizen.guides/html/images/toolbar_tabbar.png b/org.tizen.guides/html/images/toolbar_tabbar.png
new file mode 100644 (file)
index 0000000..97e2504
Binary files /dev/null and b/org.tizen.guides/html/images/toolbar_tabbar.png differ
diff --git a/org.tizen.guides/html/images/toolbar_tree.png b/org.tizen.guides/html/images/toolbar_tree.png
new file mode 100644 (file)
index 0000000..8026f32
Binary files /dev/null and b/org.tizen.guides/html/images/toolbar_tree.png differ
diff --git a/org.tizen.guides/html/images/transcoder.png b/org.tizen.guides/html/images/transcoder.png
new file mode 100644 (file)
index 0000000..63d519f
Binary files /dev/null and b/org.tizen.guides/html/images/transcoder.png differ
diff --git a/org.tizen.guides/html/images/trusted_communication.png b/org.tizen.guides/html/images/trusted_communication.png
new file mode 100644 (file)
index 0000000..9d4b7b0
Binary files /dev/null and b/org.tizen.guides/html/images/trusted_communication.png differ
diff --git a/org.tizen.guides/html/images/tts_lifecycle.png b/org.tizen.guides/html/images/tts_lifecycle.png
new file mode 100644 (file)
index 0000000..4c9d2bf
Binary files /dev/null and b/org.tizen.guides/html/images/tts_lifecycle.png differ
diff --git a/org.tizen.guides/html/images/ui_push_message.png b/org.tizen.guides/html/images/ui_push_message.png
new file mode 100644 (file)
index 0000000..02eb372
Binary files /dev/null and b/org.tizen.guides/html/images/ui_push_message.png differ
diff --git a/org.tizen.guides/html/images/uithreadapp_event_inspector.png b/org.tizen.guides/html/images/uithreadapp_event_inspector.png
new file mode 100644 (file)
index 0000000..4bc3e70
Binary files /dev/null and b/org.tizen.guides/html/images/uithreadapp_event_inspector.png differ
diff --git a/org.tizen.guides/html/images/uithreadapp_memory_inspector.png b/org.tizen.guides/html/images/uithreadapp_memory_inspector.png
new file mode 100644 (file)
index 0000000..c75aed2
Binary files /dev/null and b/org.tizen.guides/html/images/uithreadapp_memory_inspector.png differ
diff --git a/org.tizen.guides/html/images/uix_acceleration_sensor_output_bottom_top.png b/org.tizen.guides/html/images/uix_acceleration_sensor_output_bottom_top.png
new file mode 100644 (file)
index 0000000..650271c
Binary files /dev/null and b/org.tizen.guides/html/images/uix_acceleration_sensor_output_bottom_top.png differ
diff --git a/org.tizen.guides/html/images/uix_acceleration_sensor_output_top_bottom.png b/org.tizen.guides/html/images/uix_acceleration_sensor_output_top_bottom.png
new file mode 100644 (file)
index 0000000..be49006
Binary files /dev/null and b/org.tizen.guides/html/images/uix_acceleration_sensor_output_top_bottom.png differ
diff --git a/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_down.png b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_down.png
new file mode 100644 (file)
index 0000000..225c734
Binary files /dev/null and b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_down.png differ
diff --git a/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_left.png b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_left.png
new file mode 100644 (file)
index 0000000..6e43176
Binary files /dev/null and b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_left.png differ
diff --git a/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_right.png b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_right.png
new file mode 100644 (file)
index 0000000..c04d1e1
Binary files /dev/null and b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_right.png differ
diff --git a/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_top.png b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_top.png
new file mode 100644 (file)
index 0000000..7501b74
Binary files /dev/null and b/org.tizen.guides/html/images/uix_acceleration_sensor_output_up_top.png differ
diff --git a/org.tizen.guides/html/images/unidirection.png b/org.tizen.guides/html/images/unidirection.png
new file mode 100644 (file)
index 0000000..54fdd06
Binary files /dev/null and b/org.tizen.guides/html/images/unidirection.png differ
diff --git a/org.tizen.guides/html/images/user_scenario.png b/org.tizen.guides/html/images/user_scenario.png
new file mode 100644 (file)
index 0000000..12d1c33
Binary files /dev/null and b/org.tizen.guides/html/images/user_scenario.png differ
diff --git a/org.tizen.guides/html/images/using_camera_states.png b/org.tizen.guides/html/images/using_camera_states.png
new file mode 100644 (file)
index 0000000..9e60dbd
Binary files /dev/null and b/org.tizen.guides/html/images/using_camera_states.png differ
diff --git a/org.tizen.guides/html/images/using_import_attribute.png b/org.tizen.guides/html/images/using_import_attribute.png
new file mode 100644 (file)
index 0000000..e8dc644
Binary files /dev/null and b/org.tizen.guides/html/images/using_import_attribute.png differ
diff --git a/org.tizen.guides/html/images/using_players_interrupted_state.png b/org.tizen.guides/html/images/using_players_interrupted_state.png
new file mode 100644 (file)
index 0000000..24fdc9c
Binary files /dev/null and b/org.tizen.guides/html/images/using_players_interrupted_state.png differ
diff --git a/org.tizen.guides/html/images/using_players_state_changes.png b/org.tizen.guides/html/images/using_players_state_changes.png
new file mode 100644 (file)
index 0000000..dcdb9c3
Binary files /dev/null and b/org.tizen.guides/html/images/using_players_state_changes.png differ
diff --git a/org.tizen.guides/html/images/using_recorder_states.png b/org.tizen.guides/html/images/using_recorder_states.png
new file mode 100644 (file)
index 0000000..d73c6cf
Binary files /dev/null and b/org.tizen.guides/html/images/using_recorder_states.png differ
diff --git a/org.tizen.guides/html/images/using_videoplayer_interrupted_state.png b/org.tizen.guides/html/images/using_videoplayer_interrupted_state.png
new file mode 100644 (file)
index 0000000..7fa3f5f
Binary files /dev/null and b/org.tizen.guides/html/images/using_videoplayer_interrupted_state.png differ
diff --git a/org.tizen.guides/html/images/w_division.png b/org.tizen.guides/html/images/w_division.png
new file mode 100644 (file)
index 0000000..88d9959
Binary files /dev/null and b/org.tizen.guides/html/images/w_division.png differ
diff --git a/org.tizen.guides/html/images/w_fold.png b/org.tizen.guides/html/images/w_fold.png
new file mode 100644 (file)
index 0000000..1967eb0
Binary files /dev/null and b/org.tizen.guides/html/images/w_fold.png differ
diff --git a/org.tizen.guides/html/images/wav_player_state_changes.png b/org.tizen.guides/html/images/wav_player_state_changes.png
new file mode 100644 (file)
index 0000000..4d987f1
Binary files /dev/null and b/org.tizen.guides/html/images/wav_player_state_changes.png differ
diff --git a/org.tizen.guides/html/images/web_ime_architecture.png b/org.tizen.guides/html/images/web_ime_architecture.png
new file mode 100644 (file)
index 0000000..e993d91
Binary files /dev/null and b/org.tizen.guides/html/images/web_ime_architecture.png differ
diff --git a/org.tizen.guides/html/images/web_ime_create_project.png b/org.tizen.guides/html/images/web_ime_create_project.png
new file mode 100644 (file)
index 0000000..89748db
Binary files /dev/null and b/org.tizen.guides/html/images/web_ime_create_project.png differ
diff --git a/org.tizen.guides/html/images/web_ime_setting_main.png b/org.tizen.guides/html/images/web_ime_setting_main.png
new file mode 100644 (file)
index 0000000..8d4faf6
Binary files /dev/null and b/org.tizen.guides/html/images/web_ime_setting_main.png differ
diff --git a/org.tizen.guides/html/images/web_ime_setting_text_input.png b/org.tizen.guides/html/images/web_ime_setting_text_input.png
new file mode 100644 (file)
index 0000000..fd8a9a9
Binary files /dev/null and b/org.tizen.guides/html/images/web_ime_setting_text_input.png differ
diff --git a/org.tizen.guides/html/images/win_tree.png b/org.tizen.guides/html/images/win_tree.png
new file mode 100644 (file)
index 0000000..e17993a
Binary files /dev/null and b/org.tizen.guides/html/images/win_tree.png differ
diff --git a/org.tizen.guides/html/images/wrist_up.png b/org.tizen.guides/html/images/wrist_up.png
new file mode 100644 (file)
index 0000000..c42710c
Binary files /dev/null and b/org.tizen.guides/html/images/wrist_up.png differ
diff --git a/org.tizen.guides/html/images/ww_division.png b/org.tizen.guides/html/images/ww_division.png
new file mode 100644 (file)
index 0000000..65e7ab7
Binary files /dev/null and b/org.tizen.guides/html/images/ww_division.png differ
diff --git a/org.tizen.guides/html/images/ww_fold.png b/org.tizen.guides/html/images/ww_fold.png
new file mode 100644 (file)
index 0000000..b3c1361
Binary files /dev/null and b/org.tizen.guides/html/images/ww_fold.png differ
diff --git a/org.tizen.guides/html/images/ww_icon.png b/org.tizen.guides/html/images/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.guides/html/images/ww_icon.png differ
diff --git a/org.tizen.guides/html/images/ww_icon_optional.png b/org.tizen.guides/html/images/ww_icon_optional.png
new file mode 100644 (file)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.guides/html/images/ww_icon_optional.png differ
diff --git a/org.tizen.guides/html/index.htm b/org.tizen.guides/html/index.htm
new file mode 100644 (file)
index 0000000..7aa94d4
--- /dev/null
+++ b/org.tizen.guides/html/index.htm
@@ -0,0 +1,397 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+    <script type="text/javascript" src="scripts/snippet.js"></script>
+    <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+
+    <title>Guides</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1><a href="cover_page.htm">Guides</a></h1>
+
+<h2><a href="web/guides_w.htm">Web Application</a></h2>
+       <ul>
+               <li><a href="web/tizen/guides_tizen_w.htm">Tizen Features</a>
+                       <ul>
+                               <li><a href="web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
+                               <li><a href="web/tizen/application/app_guide_w.htm">Application</a>
+                                       <ul>
+                                               <li><a href="web/tizen/application/alarm_w.htm">Alarm</a></li>
+                                               <li><a href="web/tizen/application/application_w.htm">Application</a></li>
+                                               <li><a href="web/tizen/application/package_w.htm">Package</a></li>
+                                               <li><a href="web/tizen/application/data_w.htm">Data Control</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/content/content_guide_w.htm">Content</a>
+                                       <ul>
+                                               <li><a href="web/tizen/content/content_w.htm">Content</a></li>
+                                               <li><a href="web/tizen/content/download_w.htm">Download</a></li>
+                                               <li><a href="web/tizen/content/exif_w.htm">Exif</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/input_output/io_guide_w.htm">Input/Output</a>
+                                       <ul>
+                                               <li><a href="web/tizen/input_output/filesystem_w.htm">Filesystem</a></li>
+                                               <li><a href="web/tizen/input_output/message_port_w.htm">Message Port</a></li>
+                                               <li><a href="web/tizen/input_output/archive_w.htm">Archive</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a>
+                                       <ul>
+                                               <li><a href="web/tizen/multimedia/media_key_w.htm">Media Key</a></li>
+                                               <li><a href="web/tizen/multimedia/sound_w.htm">Sound</a></li>
+                                       </ul>
+                               </li>   
+                               <li><a href="web/tizen/system/system_guide_w.htm">System</a>
+                                       <ul>
+                                               <li><a href="web/tizen/system/ham_w.htm">Human Activity Monitor</a></li>
+                                               <li><a href="web/tizen/system/power_w.htm">Power</a></li>
+                                               <li><a href="web/tizen/system/sensor_w.htm">Sensor</a></li>
+                                               <li><a href="web/tizen/system/system_info_w.htm">System Information</a></li>
+                                               <li><a href="web/tizen/system/system_setting_w.htm">System Setting</a></li>
+                                               <li><a href="web/tizen/system/time_w.htm">Time</a></li>
+                                               <li><a href="web/tizen/system/fm_radio_w.htm">FM Radio</a></li>                                         
+                                               <li><a href="web/tizen/system/web_setting_w.htm">Web Setting</a></li>                                           
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/ui/ui_guide_w.htm">User Interface</a>
+                                       <ul>
+                                               <li><a href="web/tizen/ui/badge_w.htm">Badge</a></li>
+                                               <li><a href="web/tizen/ui/noti_w.htm">Notification</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/communication/comm_guide_w.htm">Communication</a>
+                                       <ul>
+                                               <li><a href="web/tizen/communication/bluetooth_w.htm">Bluetooth</a></li>
+                                               <li><a href="web/tizen/communication/messaging_w.htm">Messaging</a></li>
+                                               <li><a href="web/tizen/communication/nfc_w.htm">NFC</a></li>
+                                               <li><a href="web/tizen/communication/push_w.htm">Push</a></li>
+                                               <li><a href="web/tizen/communication/secure_element_w.htm">Secure Element</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/social/social_guide_w.htm">Social</a>
+                                       <ul>
+                                               <li><a href="web/tizen/social/account_w.htm">Account</a></li>
+                                               <li><a href="web/tizen/social/bookmark_w.htm">Bookmark</a></li>
+                                               <li><a href="web/tizen/social/calendar_w.htm">Calendar</a></li>
+                                               <li><a href="web/tizen/social/call_history_w.htm">Call History</a></li>
+                                               <li><a href="web/tizen/social/contact_w.htm">Contact</a></li>
+                                               <li><a href="web/tizen/social/data_sync_w.htm">Data Synchronization</a></li>
+                                       </ul>
+                               </li>                           
+                               <li><a href="web/tizen/dynamic/dynamic_w.htm">Dynamic Box</a></li>
+                               <li><a href="web/tizen/localization/localization_w.htm">Localization</a></li>
+                               <li><a href="web/tizen/uifw/uifw_guide_w.htm">Web UIFW</a></li>         
+                               <li><a href="web/tizen/service/service_w.htm">Service Application</a></li>
+                               <li><a href="web/tizen/ime/ime_w.htm">IME Application</a></li>                          
+            </ul>              
+               </li>
+               <li><a href="web/w3c/guides_w3c_w.htm">W3C/HTML5/Supplementary Features</a>
+                       <ul>
+                               <li><a href="web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a>
+                                       <ul>
+                                               <li><a href="web/w3c/dom/animation_w.htm">CSS Animations Module Level 3</a></li>
+                                               <li><a href="web/w3c/dom/background_w.htm">CSS Backgrounds and Borders Module Level 3</a></li>
+                                               <li><a href="web/w3c/dom/basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></li>
+                                               <li><a href="web/w3c/dom/color_w.htm">CSS Color Module Level 3</a></li>
+                                               <li><a href="web/w3c/dom/flexible_w.htm">CSS Flexible Box Layout Module</a></li>
+                                               <li><a href="web/w3c/dom/transform_w.htm">CSS Transforms</a></li>
+                                               <li><a href="web/w3c/dom/transition_w.htm">CSS Transitions Module Level 3</a></li>
+                                               <li><a href="web/w3c/dom/font_w.htm">CSS Fonts Module Level 3</a></li>
+                                               <li><a href="web/w3c/dom/text_module_w.htm">CSS Text Module Level 3</a></li>
+                                               <li><a href="web/w3c/dom/woff_w.htm">WOFF File Format 1.0</a></li>
+                                               <li><a href="web/w3c/dom/html5forms_w.htm">HTML5 Forms</a></li>
+                                               <li><a href="web/w3c/dom/media_query_w.htm">Media Queries</a></li>
+                                               <li><a href="web/w3c/dom/selector_w.htm">Selectors API Level 1 and Level 2</a></li>
+                                               <li><a href="web/w3c/dom/session_history_w.htm">HTML5 session history of browsing contexts</a></li>
+                                               <li><a href="web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module</a></li>   
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/device/device_guide_w.htm">Device</a>
+                                       <ul>
+                                               <li><a href="web/w3c/device/battery_w.htm">Battery Status</a></li>
+                                               <li><a href="web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification</a></li>            
+                                               <li><a href="web/w3c/device/touch_w.htm">Touch Events version 1</a></li>
+                                               <li><a href="web/w3c/device/vibration_w.htm">Vibration</a></li> 
+                                               <li><a href="web/w3c/device/browser_state_w.htm">HTML5 Browser state</a></li>
+                                               <li><a href="web/w3c/device/screen_orientation_w.htm">Screen Orientation</a></li>                                       
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/graphics/graphics_guide_w.htm">Graphics</a>
+                                       <ul>
+                                               <li><a href="web/w3c/graphics/canvas_w.htm">HTML5 Canvas</a></li>
+                                               <li><a href="web/w3c/graphics/svg_w.htm">HTML5 SVG</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/media/media_guide_w.htm">Media</a>
+                                       <ul>
+                                               <li><a href="web/w3c/media/getusermedia_w.htm">getUserMedia</a></li>
+                                               <li><a href="web/w3c/media/video_audio_w.htm">HTML5 video and audio element</a></li>
+                                               <li><a href="web/w3c/media/media_capture_w.htm">HTML Media Capture</a></li>
+                                               <li><a href="web/w3c/media/webaudio_w.htm">Web Audio</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/communication/comm_guide_w.htm">Communication</a>
+                                       <ul>
+                                               <li><a href="web/w3c/communication/web_messaging_w.htm">HTML5 Web Messaging</a></li>
+                                               <li><a href="web/w3c/communication/websocket_w.htm">WebSocket</a></li>
+                                               <li><a href="web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest Level 1 and 2</a></li>
+                                               <li><a href="web/w3c/communication/server_sent_w.htm">Server-Sent Events</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/storage/storage_guide_w.htm">Storage</a>
+                                       <ul>
+                                               <li><a href="web/w3c/storage/file_w.htm">File</a></li>
+                                               <li><a href="web/w3c/storage/indexdb_w.htm">Indexed Database</a></li>                                           
+                                               <li><a href="web/w3c/storage/web_storage_w.htm">Web Storage</a></li>
+                                               <li><a href="web/w3c/storage/appcache_w.htm">HTML5 Application caches</a></li>
+                                               <li><a href="web/w3c/storage/websql_w.htm">Web SQL Database</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/security/security_guide_w.htm">Security</a>
+                                       <ul>
+                                               <li><a href="web/w3c/security/iframe_w.htm">HTML5 iframe element</a></li>
+                                               <li><a href="web/w3c/security/cors_w.htm">Cross-Origin Resource Sharing</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a>
+                                       <ul>
+                                               <li><a href="web/w3c/perf_opt/page_w.htm">Page Visibility</a></li>
+                                               <li><a href="web/w3c/perf_opt/timing_control_w.htm">Timing control for script-based animations</a></li>
+                                               <li><a href="web/w3c/perf_opt/web_workers_w.htm">Web Workers</a>
+                                                       <ul>
+                                                               <li><a href="web/w3c/perf_opt/js_performance_improvement_w.htm">JavaScript Performance Improvement</a></li>
+                                                               <li><a href="web/w3c/perf_opt/jquery_performance_improvement_w.htm">jQuery Performance Improvement</a></li>
+                                                               <li><a href="web/w3c/perf_opt/minify_js_css_w.htm">JavaScript and CSS Minification</a></li>
+                                                       </ul>
+                                               </li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/location/location_guide_w.htm">Location</a>
+                                       <ul>
+                                               <li><a href="web/w3c/location/geolocation_w.htm">Geolocation API Specification</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/ui/ui_guide_w.htm">UI</a>
+                                       <ul>
+                                               <li><a href="web/w3c/ui/clipboard_w.htm">Clipboard API and events</a></li>
+                                               <li><a href="web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop</a></li>
+                                       </ul>
+                               </li>                           
+                               <li><a href="web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
+                                       <ul>
+                                               <li><a href="web/w3c/useful/html_priority_w.htm">HTML Priorities</a></li>                                               
+                                               <li><a href="web/w3c/useful/multiple_screens_w.htm">Multiple Screen Support</a></li>
+                                               <li><a href="web/w3c/useful/frame_flattening_w.htm">Frame Flattening</a></li>           
+                                               <li><a href="web/w3c/useful/sound_policy_w.htm">Tizen WebKit Tap Sound Policy</a></li>
+                                               <li><a href="web/w3c/useful/performance_w.htm">Performance Improvement</a></li>
+                                               <li><a href="web/w3c/useful/ui_layout_w.htm">Multiple UI Layouts</a></li>
+                                       </ul>
+                               </li>                                   
+                               <li><a href="web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a>
+                                       <ul>
+                                               <li><a href="web/w3c/supplement/typedarray_w.htm">Typed Array - Khronos</a></li>
+                                               <li><a href="web/w3c/supplement/webgl_w.htm">WebGL - Khronos</a></li>
+                                               <li><a href="web/w3c/supplement/fullscreen_w.htm">FullScreen API - Mozilla</a></li>
+                                               <li><a href="web/w3c/supplement/camera_w.htm">Camera API (Tizen Extension)</a></li>
+                                       </ul>
+                               </li>                           
+            </ul>              
+               </li>           
+       </ul>
+
+<h2><a href="native/guides_n.htm">Native Application</a></h2>
+       <ul>
+               <li><a href="native/app/app_guide_n.htm">Application Framework</a>
+                       <ul>
+                               <li><a href="native/app/application_n.htm">Application</a></li>
+                               <li><a href="native/app/app_manager_n.htm">Application Manager</a></li>
+                               <li><a href="native/app/badge_n.htm">Badge</a></li>
+                               <li><a href="native/app/bundle_n.htm">Bundle</a></li>
+                               <li><a href="native/app/data_control_n.htm">Data Control</a></li>
+                               <li><a href="native/app/message_port_n.htm">Message Port</a></li>
+                               <li><a href="native/app/notification_n.htm">Notification</a></li>
+                               <li><a href="native/app/package_n.htm">Package Manager</a></li>
+                               <li><a href="native/app/service_app_n.htm">Service Application</a></li>
+                               <li><a href="native/app/shortcut_n.htm">Shortcut</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/base/base_guide_n.htm">Base</a>
+                       <ul>
+                               <li><a href="native/base/i18n_n.htm">i18n</a></li>
+            </ul>
+               </li>
+               <li><a href="native/content/content_guide_n.htm">Content</a>
+                       <ul>
+                               <li><a href="native/content/download_n.htm">Download</a></li>
+                               <li><a href="native/content/media_content_n.htm">Media Content</a></li>
+                               <li><a href="native/content/mime_type_n.htm">MIME Type</a></li>
+                               
+            </ul>
+               </li>
+               <li><a href="native/context/context_guide_n.htm">Context</a>
+                       <ul>
+                               <li><a href="native/context/activity_recognition_n.htm">Activity Recognition</a></li>
+                               <li><a href="native/context/gesture_recognition_n.htm">Gesture Recognition</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/graphics/graphics_guide_n.htm">Graphics</a>
+                       <ul>
+                               <li><a href="native/graphics/opengles_n.htm">OpenGL ES</a></li>
+                               <li><a href="native/graphics/tbm_n.htm">TBM Surface</a></li>
+                               <li><a href="native/graphics/cairo_n.htm">Cairo Integration</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/location/location_guide_n.htm">Location</a></li>
+               <li><a href="native/messaging/messaging_guide_n.htm">Messaging</a>
+                       <ul>
+                               <li><a href="native/messaging/messages_n.htm">Messages</a></li>
+                               <li><a href="native/messaging/email_n.htm">Email</a></li>
+                               <li><a href="native/messaging/push_n.htm">Push</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/multimedia/multimedia_guide_n.htm">Multimedia</a>
+                       <ul>
+                               <li><a href="native/multimedia/audio_io_n.htm">Audio I/O</a></li>
+                               <li><a href="native/multimedia/camera_n.htm">Camera</a></li>
+                               <li><a href="native/multimedia/image_util_n.htm">Image Util</a></li>
+                               <li><a href="native/multimedia/media_codecs_n.htm">Media Codec</a></li>
+                               <li><a href="native/multimedia/media_tools_n.htm">Media Tool</a></li>
+                               <li><a href="native/multimedia/metadata_extractor_n.htm">Metadata Extractor</a></li>
+                               <li><a href="native/multimedia/player_n.htm">Player</a></li>
+                               <li><a href="native/multimedia/radio_n.htm">Radio</a></li>
+                               <li><a href="native/multimedia/recorder_n.htm">Recorder</a></li>
+                               <li><a href="native/multimedia/tone_player_n.htm">Tone Player</a></li>
+                               <li><a href="native/multimedia/video_util_n.htm">Video Util</a></li>
+                               <li><a href="native/multimedia/wav_player_n.htm">WAV Player</a></li>
+                               <li><a href="native/multimedia/sound_manager_n.htm">Sound Manager</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/network/network_guide_n.htm">Network</a>
+                       <ul>
+                               <li><a href="native/network/connection_n.htm">Connection</a></li>
+                               <li><a href="native/network/bluetooth_n.htm">Bluetooth</a></li>
+                               <li><a href="native/network/nfc_n.htm">NFC</a></li>
+                               <li><a href="native/network/wifi_n.htm">Wi-Fi</a></li>
+                               <li><a href="native/network/wifi_direct_n.htm">Wi-Fi Direct</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/security/security_guide_n.htm">Security</a>
+                       <ul>
+                               <li><a href="native/security/key_manager_n.htm">Key Manager</a></li>
+                               <li><a href="native/security/privilege_n.htm">Privilege Info</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/social/social_guide_n.htm">Social</a>
+                       <ul>
+                               <li><a href="native/social/account_manager_n.htm">Account Manager</a></li>
+                               <li><a href="native/social/calendar_n.htm">Calendar</a></li>
+                               <li><a href="native/social/contact_n.htm">Contacts</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/system/system_guide_n.htm">System</a>
+                       <ul>
+                               <li><a href="native/system/device_n.htm">Device</a></li>
+                               <li><a href="native/system/dlog_n.htm">dlog</a></li>
+                               <li><a href="native/system/media_keys_n.htm">Media key</a></li>
+                               <li><a href="native/system/runtime_info_n.htm">Runtime information</a></li>
+                               <li><a href="native/system/sensors_n.htm">Sensor</a></li>
+                               <li><a href="native/system/sysinfo_n.htm">System Information</a></li>
+                               <li><a href="native/system/settings_n.htm">System Settings</a></li>
+                               <li><a href="native/system/storage_n.htm">Storage</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/telephony/telephony_guide_n.htm">Telephony</a></li>
+               <li><a href="native/ui/ui_guide_n.htm">UI</a>
+                       <ul>
+                               <li><a href="native/ui/efl_n.htm">EFL</a></li>
+                               <li><a href="native/ui/eina_n.htm">Eina</a>
+                                       <ul>
+                                               <li><a href="native/ui/data_types_n.htm">Data Types</a></li>
+                                               <li><a href="native/ui/eina_tools_n.htm">Eina Tools</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="native/ui/evas_n.htm">Evas</a></li>
+                               <li><a href="native/ui/edje_n.htm">Edje</a>
+                                       <ul>
+                                               <li><a href="native/ui/edc_part_block_n.htm">Edje Parts and Blocks</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="native/ui/ecore_n.htm">Ecore</a>
+                                       <ul>
+                                               <li><a href="native/ui/main_loop_n.htm">Main Loop</a></li>
+                                               <li><a href="native/ui/threads_n.htm">Thread Usage</a></li>                                             
+                                       </ul>
+                               </li>                           
+                               <li><a href="native/ui/events_effects_n.htm">Event and Effect</a>
+                                       <ul>
+                                               <li><a href="native/ui/event_types_n.htm">Event Types</a></li>
+                                               <li><a href="native/ui/animations_effects_n.htm">Animation and Effect Types</a></li>                                            
+                                       </ul>
+                               </li>           
+                               <li><a href="native/ui/ui_control_n.htm">UI Control</a>
+                                       <ul>                                            
+                                               <li><a href="native/ui/elementary_n.htm">Elementary Widgets</a></li>
+                                                       <ul>
+                                                               <li><a href="native/ui/containers_n.htm">Container Widgets</a></li>
+                                                               <li><a href="native/ui/ui_widgets_n.htm">UI Widgets</a></li>
+                                                       </ul>
+                                               <li><a href="native/ui/widget_preferences_n.htm">Widget Preferences</a></li>                                    
+                                       </ul>
+                               </li>                           
+                               <li><a href="native/ui/efl_extension_n.htm">Efl Extension</a></li>
+                               <li><a href="native/ui/font_setting_n.htm">Font Setting</a></li>
+                               <li><a href="native/ui/efl_util_n.htm">EFL UTIL</a></li>
+                               <li><a href="native/ui/multiple_screens_n.htm">Multiple Screen Support</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/uix/uix_guide_n.htm">UIX</a>
+                       <ul>
+                               <li><a href="native/uix/tts_n.htm">TTS</a></li>
+                               <li><a href="native/uix/stt_n.htm">STT</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/web/web_guide_n.htm">Web</a></li>   
+               <li><a href="native/porting/porting_n.htm">Porting</a>
+                       <ul>
+                               <li><a href="native/porting/api_comparison_n.htm">API Comparison</a></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>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.guides/html/native/app/app_guide_n.htm b/org.tizen.guides/html/native/app/app_guide_n.htm
new file mode 100644 (file)
index 0000000..91bdcf8
--- /dev/null
+++ b/org.tizen.guides/html/native/app/app_guide_n.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Framework</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework Tutorials</a></li>  
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Application Framework</h1> 
+ <p>Application framework features include managing various types of applications and packages, and handling events.</p>
+  <p>The main application framework features are:</p>
+  <ul> 
+       <li><a href="application_n.htm">Application</a> <p>Enables you to manage application state change or system events and control mechanisms that launch other applications.</p></li>
+       <li><a href="app_manager_n.htm">Application Manager</a>
+        <p>Allows you to retrieve information about an application.</p></li> 
+       <li><a href="badge_n.htm">Badge</a> <p>Allows you to create badges.</p> </li>
+       <li><a href="bundle_n.htm">Bundle</a> <p>Enables you to manage bundles and their content.</p></li>
+    <li><a href="data_control_n.htm">Data Control</a> <p>Allows your applications to exchange data.</p></li>    
+       <li><a href="message_port_n.htm">Message Port</a><p>Enables your applications to communicate with each other using message port communication.</p></li>
+       <li><a href="notification_n.htm">Notification</a> <p>Allows you to create and manage notifications.</p> </li>
+   <li><a href="package_n.htm">Package Manager</a> <p>Allows you to install, unistall, and update packages, and store their information.</p></li> 
+   <li><a href="service_app_n.htm">Service Application</a> <p>Allows you to create and manage native service applications.</p></li>
+   <li><a href="shortcut_n.htm">Shortcut</a> <p>Allows you to add a shortcut for the Home 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/app_manager_n.htm b/org.tizen.guides/html/native/app/app_manager_n.htm
new file mode 100644 (file)
index 0000000..1355598
--- /dev/null
+++ b/org.tizen.guides/html/native/app/app_manager_n.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm">Application Manager Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Application Manager</h1>
+<p>The Application Manager provides information about installed and running applications. It provides functions for obtaining the application package name and absolute path to specified resources, such as Image, Sound, Video, and UI layout (EDJ). It also provides functions to:</p>
+<ul>
+  <li>Get the current orientation of the device.</li>
+  <li>Get the internal and external root folders which are shared among all applications.</li>
+</ul>
+
+
+<p>Iterator functions step through a list of applications. The <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_context()</span> function is used in running applications and <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function is used in available (installed, but not necessarily running) applications. Each function calls a callback function (<span style="font-family: Courier New,Courier,monospace">app_manager_app_context_cb</span> or <span style="font-family: Courier New,Courier,monospace">app_manager_app_info_cb</span>), passing the package name of each application found. A query function responds whether the application represented by a particular package name is running.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/application_n.htm b/org.tizen.guides/html/native/app/application_n.htm
new file mode 100644 (file)
index 0000000..c609440
--- /dev/null
+++ b/org.tizen.guides/html/native/app/application_n.htm
@@ -0,0 +1,893 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li><a href="#loop">Managing the Event Loop</a></li>
+                       <li><a href="#callback">Registering Callbacks for Events</a></li>
+                       <li><a href="#app_controls">Launching Applications</a></li>
+                       <li><a href="#alarms">Handling Alarms</a></li>
+                       <li><a href="#state_trans">Managing Application States and Transitions</a></li>
+                       <li><a href="#app_strings">Localizing Application Strings</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Application Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API</a></li>   
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Application</h1> 
+<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile 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>The Application API provides interfaces for the following categories:</p>
+<ul>
+  <li><a href="#loop">Starting or exiting the main event loop</a> (mandatory for every Tizen native application)</li>
+  <li><a href="#callback">Registering callbacks for application state change events</a></li>
+  <li><a href="#callback">Registering callbacks for basic system events</a></li>
+  <li><a href="#app_controls">Launching applications</a></li>
+  <li><a href="#alarms">Handling alarms</a></li>
+  <li><a href="#state_trans">Managing application states and transitions</a></li>
+  <li><a href="#app_strings">Localizing application strings</a></li>
+</ul>
+  
+  <h2 id="loop" name="loop">Managing the Event Loop</h2>
+<p>In order for an application to operate successfully, it must receive events from the platform. For this, it must start the main event loop - this is mandatory for all Tizen native applications.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function is used to start the event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s structure</span> variable, which is passed to the function.</p>
+
+<p>For more information about launching applications, see <a href="#app_controls">Launching Applications</a>.</p>
+
+<h2 id="callback" name="callback">Registering Callbacks for Events</h2>
+<p>The following table lists the application state change events.</p>
+
+  <table> 
+   <caption>
+     Table: Application state change events
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Callback</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_create_cb()</span></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><span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span></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><span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span></td> 
+     <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the  <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback, re-allocate those resources here before the application resumes.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span></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">Managing Application States and Transitions</a>.</p>
+
+<p>The following table lists the system event events.</p>
+
+  <table> 
+   <caption>
+     Table: Callbacks for system events
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Callback</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_low_memory_cb()</span></td> 
+     <td><p>Used to take necessary actions in low memory situations.</p>
+       <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> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_low_battery_cb()</span></td> 
+     <td><p>Used to take necessary actions in low battery situations.</p>
+           <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the power goes off completely. Stop heavy CPU consumption or power consumption activities to save the remaining power.</p></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_device_orientation_cb()</span></td> 
+     <td>Used to take necessary actions for handling a device orientation change.
+<p>Change the display orientation to match the device orientation.</p></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_language_changed_cb()</span></td> 
+     <td>Used to take necessary actions for handling a language change event.
+<p>Refresh the display into the new language.</p></td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">app_region_format_changed_cb()</span></td> 
+     <td>Used to take necessary actions for handling a region change event.
+<p>A region change means a different time zone; updater the time in the application UI to reflect the time zone change.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>  
+  
+  <h2 id="app_controls" name="app_controls">Launching Applications</h2> 
+<p>An application can be launched by the user from the Launcher or by another application.</p>
+<p>The App Control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. The application can receive results from the launched application.</p>
+<p>Regardless of how an application is launched, the application framework starts the application by creating a new process and calling the entry point of the application. 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 <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function:</p>
+  
+<pre class="prettyprint">
+bool app_create(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions before the main event loop starts
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
+&nbsp;&nbsp;&nbsp;// If this function returns true, the application main loop starts
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application terminates
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+void app_control(app_control_h app_control, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Handle the launch request
+}
+
+void app_pause(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible
+}
+
+void app_resume(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes visible
+}
+
+void app_terminate(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Release all resources
+}
+
+int main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;struct appdata ad;
+ 
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
+     
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function initializes the application and starts the main loop. It takes 4 parameters and uses them to initialize the application. The <span style="font-family: Courier New,Courier,monospace">argc</span> and <span style="font-family: Courier New,Courier,monospace">argv</span> 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>
+<p>When the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> is first invoked, the application moves from the ready state to the created state. The application has to initialize itself. During this transition, the application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> 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>
+<p>If the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, the application moves to the terminated state. If it returns <span style="font-family: Courier New,Courier,monospace">true</span>, the application enters the main loop.</p>
+
+ <h3 id="options" name="options">Handling the Launch Options</h3>
+<p>The application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback just after the application enters the main loop. This callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> 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. In all of these cases, the application is responsible for checking the content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> and responding appropriately. The content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> can be empty, if the application is launched by the user from the Launcher.</p>
+
+<pre class="prettyprint">static void app_control(app_control_h app_control, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
+&nbsp;&nbsp;&nbsp;char *operation;
+&nbsp;&nbsp;&nbsp;char *uri;
+&nbsp;&nbsp;&nbsp;char *mime_type;
+ 
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, operation);
+ 
+&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
+ 
+&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;display_image_file(ad, uri); // Display a specific image file
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_activate(ad->win);
+}
+</pre>
+<h3 id="controls" name="controls">Application Controls</h3>
+<p>The App control API provides functions for launching other applications with a specific operation, URI, and MIME type. The requesting application can get a result back from the launched application.</p>
+<p>To launch an application with the App control API, create an <span style="font-family: Courier New,Courier,monospace">app_control</span> handle and add information to that handle. You can set the following information:</p>
+<ul>
+   <li>Operation: Action to be performed by the app control.</li>
+   <li>URI: Data itself to be performed.</li>
+   <li>MIME type: Specific type of the URI.</li>
+   <li>Application ID: ID of the application to be launched.</li>
+   <li>Extra data: Key-value pairs to provide additional information for the launch request and the result of the request.</li>
+</ul>
+<p>The operation is mandatory information for sending the launch request. The app control API provides several functions to get and set the above information to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle.</p>
+<p>To launch an application with the app control API, use one of the following methods:</p>
+<ul>   
+   <li><a href="#explicit">Explicit launch</a>: Launch the application with the application ID.</li>
+   <li><a href="#implicit">Implicit launch</a>: Launch the application with an operation, URI, or MIME type.</li>
+</ul>
+<p>The application launched by the app control can return the result to the caller application.</p>
+
+<p>You can take advantage of the Tizen <a href="#platform_appcontrol">base application functionalities</a> through the app control feature. You can also <a href="#export_appcontrol">export your application functionality</a> to allow other applications to launch your application.</p>
+
+<h4 id="explicit" name="explicit">Explicit Launch</h4>
+
+<p>When you request an explicit launch:</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 <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> result. Additional information (such as operation, URI, or MIME type) is not be used to select an application for an explicit launch.</li>
+   <li>If the operation setting in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle is set to <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span>, the application ID must be set. Otherwise the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_INVALID_PARAMETER</span> result is returned.</li>
+</ul>
+<p>The following code example launches a calculator application explicitly with the application ID:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+ 
+#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;);
+ 
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a calculator app.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a calculator app.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<h4 id="implicit" name="explicit">Implicit Launch</h4>
+
+<p>When you request an implicit launch:</p>
+
+<ul>
+<li>Only 3 data categories are used to determine which application can be launched: Operation, URI scheme, and MIME type.</li>
+<li>The application launcher framework iterates the desktop files of installed applications on the device to find applications where the 3 categories are exactly matched.</li>
+<li>If only one application is matched for the given categories, that application is launched. If multiple matching  applications are found, the application selector is shown and the user can select the proper application.</li>
+<li>Each app control requires a different combination of the 3 categories. For some, only one category is necessary (for example, URI), for others, all 3 can be needed. Check the app control list and required data in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> to determine the needed categories.</li>
+</ul>
+<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly. The application can have multiple combinations of the operation, URI, and MIME type:</p>
+
+  
+<pre class="prettyprint">
+X-SLP-SVC=[operation1]:[URI1]:[MIME1];[operation2]:[URI2]:[MIME2]
+</pre>
+
+<p>In the category description:</p>
+
+<ul>
+<li>Each app control description is separated by a semicolon (;).</li>
+<li>Blank is not allowed between fields.</li>
+<li>Operation is a mandatory field.</li>
+<li>URI and MIME field can be NULL.</li>
+</ul>
+
+<p>The following code example launches a camera application with the operation and MIME type:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+
+#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;);
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<p>The following code example launches a gallery application with the operation, URI, and MIME type:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+
+#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;);
+ 
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<h4 id="results" name="results">Getting the App Control Results</h4>
+<p>The app control result from the requested application is delivered to the caller application in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle with extra data. For some cases, the App control API provides pre-defined extra data keys.</p>
+<p>If you cannot find a proper key, you can define your own key. However, the customized key must be shared between the caller and callee applications.</p>
+
+<p>The following code example gets the result of an app control request by implementing an <span style="font-family: Courier New,Courier,monospace">app_control</span> result callback:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+ 
+#define TAG &quot;MY_TAG&quot;
+ 
+// Callback function to get result
+static void app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;char *value;
+ 
+&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value) == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;[app_control_result_cb] Succeeded: value(%s)&quot;, value);
+&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;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] Failed&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;}
+}
+</pre>
+
+<p>The following code example requests the launch of another application:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+
+#define TAG &quot;MY_TAG&quot;
+
+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;);
+ 
+if (app_control_send_launch_request(app_control, app_control_result, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded: the application is launched.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch an application.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<p>The following code example implements an <span style="font-family: Courier New,Courier,monospace">app_control</span> callback in the callee application:</p>
+
+<pre class="prettyprint">
+static void app_control(app_control_h app_control, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
+&nbsp;&nbsp;&nbsp;char *operation;
+&nbsp;&nbsp;&nbsp;char *mime;
+&nbsp;&nbsp;&nbsp;app_control_h reply;
+&nbsp;&nbsp;&nbsp;char *app_id;
+ 
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
+ 
+&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(mime, &quot;text/plain&quot;)) 
+&nbsp;&nbsp;&nbsp;&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;app_get_app_id(&amp;app_id);
+&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;app_control_reply_to_launch_request(reply, app_control, APP_CONTROL_RESULT_SUCCEEDED);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(reply);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="export_appcontrol" name="export_appcontrol">Exporting AppControl Functionality</h3>
+<p>You can export functionalities of your application to be used in another application. However, if the other application uses the application control functionality implicitly without the
+               application ID, it must declare the application control information in its manifest 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;/app-control&gt;
+&lt;app-control&gt;
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/call&quot;/&gt;
+&lt;/app-control&gt;
+</pre>
+       <p>
+               The resolution filter is used when resolving the application control. Each entry of the resolution filter has the <span style="font-family: Courier New, Courier, monospace">&lt;app-control&gt;</span>
+               element and forms an application resolution unit. The additional URI or MIME type information must contain the associated operation ID, and the retrieved application control must have the specified
+               application ID and operation ID when resolving the application control.
+       </p>
+       <p>
+               You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an
+               operation ID must be specified for the application control.
+       </p>  
+
+<h3 id="platform_appcontrol" name="platform_appcontrol">Using Platform Application Controls</h3>
+
+<p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> module, you can take advantage of the Tizen base application functionalities.</p> 
+
+<p>The Tizen platform provides the platform application controls for the following base applications:</p>
+<ul>
+<li>FileManager</li>
+<li>ImageViewer</li>
+<li>Internet</li>
+<li>MusicPlayer</li>
+<li>VideoPlayer</li>
+</ul>
+<p>The following table defines the details of each platform application control.</p>
+  <table> 
+   <caption>
+     Table: Tizen base application services 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Service</th> 
+     <th>Operation</th> 
+     <th>Scheme</th> 
+     <th>MIME</th> 
+    </tr> 
+    <tr> 
+     <td>Browsing a Web page</td> 
+     <td rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> 
+     <td>
+               <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
+               </ul>
+        </td>
+        <td>-</td> 
+    </tr> 
+    <tr> 
+     <td>Displaying an image</td> 
+     
+     <td>              
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">file</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
+       </ul>
+       </td> 
+     <td>       
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
+        </ul>
+        </td> 
+    </tr> 
+       <tr> 
+     <td>Playing a sound file</td> 
+        <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td> 
+     <td>
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
+        </ul>
+        </td> 
+    </tr> 
+    <tr> 
+     <td>Playing a video file</td> 
+     
+       <td>
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
+        </ul>
+        </td> 
+    </tr> 
+    <tr> 
+     <td>Selecting a file</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td> 
+     <td>
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
+        </ul>
+        </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Tizen provides support for the defined MIME types of the base application services depending on the platform implementation.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+
+  
+  
+  <h2 id="alarms" name="alarms">Handling Alarms</h2>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm</a> API provides functions to launch an application at a specific time. The mechanism involved in launching the application is the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a> API.</p>
+<p>The AppControl API allows launching an application 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 appcontrol.</p>
+<p>For more information, see the <a href="#app_controls">Launching Applications</a> guide.</p>
+  
+<h2 id="state_trans" name="state_trans">Managing Application States and Transitions</h2> 
+
+<p>The 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. As the application is starting, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback is invoked and your application goes into a pause state. The pause state means that the application is not terminated but is running in the background. The application can go into a pause state because:</p>
+<ul>
+  <li>A new application is launched from the request of your application.</li>
+  <li>The user requests to go to the Home screen.</li>
+  <li>A system event occurs and causes a resident application with a higher priority (such as an incoming phone call) to become active and hide your application temporarily.</li>
+  <li>An alarm is triggered for another application, which becomes the top-most window and hides your application.</li>
+</ul> 
+<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callback is invoked. This happens because:</p>
+<ul>
+  <li>Another application requests your application to run (perhaps the Task Navigator, which shows all running applications and lets the user select any application to run).</li>
+  <li>All applications on top of your application in the window stack finish.</li>
+  <li>An alarm is triggered for your application, so it becomes the top-most window and hides other applications.</li>
+</ul>
+
+<p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span> callback is invoked. Your application terminates because:</p>
+<ul>
+  <li>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace">app_exit()</span> function to terminate the event loop.</li>
+  <li>The Low Memory Killer is killing your application in a low memory situation.</li>
+</ul>
+<p>The application state changes are managed by the underlying framework. The following figure and table illustrate the application states.</p>
+
+    <p class="figure">Figure: Application states</p> 
+  <p style="text-align:center;"><img alt="Application state transitions" src="../../images/app_states.png" /></p>  
+  
+  <table> 
+   <caption>
+     Table: Application states
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>State</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">READY</span></td> 
+     <td>Application is launched.</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td> 
+     <td>Application starts the main loop.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td> 
+     <td>Application is running and visible to the user.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td> 
+     <td>Application is running but invisible to the user.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td> 
+     <td>Application is terminated.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+  
+  <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 react to each state change appropriately.</p>
+  
+     <p class="figure">Figure: Application state transitions</p> 
+  <p style="text-align:center;"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
+  
+  <h2 id="app_strings" name="app_strings">Localizing Application Strings</h2> 
+       <p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">Internationalization</a> API, which makes strings translatable and places them  in .po (portable object) files.</p> 
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+    <tr>
+      <td class="note"><p>The .po files must be placed in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory of the application. The files can be edited using the <a href="../../../../org.tizen.devtools/html/native_tools/po_file_editor_n.htm">PO File Editor</a> provided by the Tizen SDK.</p></td> 
+    </tr>
+  </tbody>
+</table>
+
+<p>Depending on the device&#39;s locale information, your application must load the proper resource set. If no matching resource set is found for the device&#39;s current locale, the default resource set is used.</p>                 
+
+<p>To get the localized value of a string, use the <span style="font-family: Courier New,Courier,monospace">MsgID</span> shown in the PO File Editor, prefaced with an underscore <span style="font-family: Courier New,Courier,monospace">_</span> (for example, <span style="font-family: Courier New,Courier,monospace">_(&lt;MsgID&gt;)</span>). The underlying implementation calls the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function to retrieve the localized value:</p>
+
+<pre class="prettyprint">
+char *hello_text = i18n_get_text(&quot;Hello&quot;);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">hello_text</span> variable is set to the localized text for &quot;Hello&quot; for the current locale of the device.</p>
+<p>When you change the language setting on the device, the text changes in the application according to the current language.</p>
+
+<h3 id="marking" name="marking">Marking Text Parts as Translatable</h3>
+<p>The most common way to use a translation involves the following APIs: </p>
+
+<pre class="prettyprint">
+elm_object_translatable_text_set(Evas_Object *obj, const char *text)
+elm_object_item_translatable_text_set(Elm_Object_Item *it, const char *text)
+</pre>
+
+<p>They set the untranslated string for the &quot;default&quot; part of the given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> or <span style="font-family: Courier New,Courier,monospace;">Elm_Object_Item</span> and mark the string as translatable.</p>
+
+<p>Similar functions are available if you wish to set the text for a part that is not &quot;default&quot;: </p>
+
+<pre class="prettyprint">
+elm_object_translatable_part_text_set(Evas_Object *obj, const char *part, const char *text)
+elm_object_item_translatable_part_text_set(Elm_Object_Item *it, const char *part, const char *text)
+</pre>
+
+<p>It is important to provide the untranslated string to these functions, because the EFLs trigger the translation themselves and re-translate the strings automatically, if the system language changes.</p>
+
+
+<h3 id="translating" name="translating">Translating Texts Directly</h3>
+
+<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary widgets.</p>
+
+<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> API from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>
+
+<pre class="prettyprint">
+char *i18n_get_text(const char *msgid);
+</pre>
+
+<p>This function takes as input a string (that is copied to an <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the .po files) and returns the translation (the corresponding <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field).</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Do not modify or free the return value of these functions. They are statically allocated.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>When giving the text for a genlist item, you can use it in a similar manner as in the example below.</p>
+
+<pre class="prettyprint">
+#include &quot;app_i18n.h&quot;
+static char *_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;return strdup(i18n_get_text(&quot;Some Text&quot;));
+}
+</pre>
+
+<h4>Plurals</h4>
+<p>Plurals are handled through the <span style="font-family: Courier New,Courier,monospace;">ngettext()</span> function. Its prototype is shown below.</p>
+
+<pre class="prettyprint">
+char *ngettext(const char *msgid, const char *msgid_plural, unsigned long int n);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">msgid</span> is the same as before, that is, the untranslated string</li>
+<li><span style="font-family: Courier New,Courier,monospace;">msgid_plural</span> is the plural form of <span style="font-family: Courier New,Courier,monospace;">msgid</span></li>
+<li>the quantity (in English, 1 is singular and anything else is plural)</li>
+</ul>
+
+<p>A matching fr.po file contains the following lines.</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;
+</pre>
+
+<h4>Several Plurals</h4>
+<p>It is possible to have several plural forms. For instance, the .po file for Polish could 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;
+</pre>
+
+<p>The index values after <span style="font-family: Courier New,Courier,monospace;">msgstr</span> are defined in system-wide settings. The ones for Polish are given below:</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;
+</pre>
+
+<p>There are three forms (including singular). The index is 0 (singular), if the given integer n is 1. Then, if <span style="font-family: Courier New,Courier,monospace;">(n % 10 &gt;= 2 &amp;&amp; % 10 &lt;= 4 &amp;&amp; (n % 100 &lt; 10 | | n % 100 &gt;= 20)</span>, the index is 1, otherwise it is 2.</p>
+
+<h4>Handling Language Changes at Runtime</h4>
+
+<p>The user can change the system language settings at any time. When that is done, appcore notifies the application, which changed the language used in the Elementary. The widgets receive a &quot;language,changed&quot; signal and reset their text.</p>
+
+<p>This is how to handle the appcore event:</p>
+
+<pre class="prettyprint">
+static void
+_app_language_changed(void *data)
+{
+&nbsp;&nbsp;&nbsp;char *language;
+&nbsp;&nbsp;&nbsp;// Retrieve the current system language
+&nbsp;&nbsp;&nbsp;system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);
+&nbsp;&nbsp;&nbsp;// Set the language in elementary
+&nbsp;&nbsp;&nbsp;elm_language_set(language);
+&nbsp;&nbsp;&nbsp;free(language);
+}
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);
+}
+</pre>
+
+<p>The call to <span style="font-family: Courier New,Courier,monospace;">elm_language_set()</span> above triggers the emission of the &quot;language,changed&quot; signal, which is handled the same way as the typical smart event signals.</p>
+
+<h3 id="extracting" name="extracting">Extracting Messages for Translation</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool extracts strings to translate to a .pot file (po template), while <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> maintains the existing .po files. The typical workflow is as follows:</p>
+<ul>
+<li>run <span style="font-family: Courier New,Courier,monospace;">xgettext</span> once; it generates a .pot file</li>
+<li>when adding a new translation, copy the .pot file to &lt;locale&gt;.po and translate that file</li>
+<li>new runs of <span style="font-family: Courier New,Courier,monospace;">xgettext</span> update the existing .pot file and <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> updates the .po files</li>
+</ul>
+
+<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">xgettext</span>.</p>
+
+<pre class="prettyprint">
+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>This extracts all strings that are used inside the <span style="font-family: Courier New,Courier,monospace;">_()</span> function (as an optional short-hand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>), use UTF-8 as the encoding and add the comments right before the strings to the output files).</p>
+
+<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">msgmerge</span>.</p>
+
+<pre class="prettyprint">
+msgmerge --width=120 --update res/po/fr.po res/po/ref.pot
+</pre>
+
+<h3 id="tips" name="tips">Internationalization Tips</h3>
+
+<h4 id="assumptions" name="assumptions">Do Not Make Assumptions about Languages</h4>
+
+<p>Languages vary greatly and even if you knew several of them, do not assume there is any common logic to them.</p>
+
+<p>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 that regular spaces.</p>
+
+<p>This prevents proper translation in the following construct:</p>
+
+<pre class="prettyprint">
+snprintf(buf, some_size, &quot;%s: %s&quot;, i18n_get_text(error), i18n_get_text(reason));
+</pre>
+
+<p>The correct way to translate it is to use a single string and let the translators manage the punctuation. This means translating the format string instead:</p>
+
+<pre class="prettyprint">
+snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error), i18n_get_text(reason));
+</pre>
+
+<p>It is not always possible, but aim for this unless a specific issue arises.</p>
+
+<h4 id="length" name="length">Translations Are of Different Lengths</h4>
+<p>Depending on the language, the translation has a different length on screen. In some cases, a language has a shorter construct than another, while the situation is reversed in another case; a language may have a word for a specific concept, while another does not and requires a circumlocution (designating something by using several words).</p>
+
+<h4 id="source" name="source">For Source Control, Do Not Commit .po If Only Line Indicators Have Changed</h4>
+
+<p>From the example above, a translation block looks like:</p>
+
+<pre class="prettyprint">
+#: some_file.c:43 another_file.c:41
+msgid &quot;Click Here&quot;
+msgstr &quot;Cliquez ici&quot;
+</pre>
+
+<p>In case you insert a new line at the top of &quot;some_file.c&quot;, the line indicator changes to look like this:</p>
+
+<pre class="prettyprint">
+#: some_file.c:44 another_file.c:41
+</pre>
+
+<p>Obviously, on non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to .po files. This hampers readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>
+
+<p>Only commit changes to .po files when there are actual translation changes, not because line comments have changed.</p>
+
+<h4 id="shorthand" name="shorthand">Using <span style="font-family: Courier New,Courier,monospace;">_()</span> as Shorthand to the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> Function</h4>
+
+<p>Since calling <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> may often happen, it is abbreviated to <span style="font-family: Courier New,Courier,monospace;">_()</span>. The Tizen SDK provides this abbreviation by default.</p>
+
+<h4 id="sorting" name="sorting">Proper Sorting: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span></h4>
+<p>There is a string comparison tailored for sorting data for display: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span>. It works the same way as <span style="font-family: Courier New,Courier,monospace;">strcmp()</span> but sorts the data according to the current locale settings.</p>
+
+<pre class="prettyprint">
+int strcmp(const char *s1, const char *s2);
+int strcoll(const char *s1, const char *s2);
+</pre>
+
+<p>The function prototype is a standard one and indicates how to order strings. A detailed explanation is out of scope for this guide, but use the <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function as the comparison function for sorting the data set you are using.</p>
+
+<h4 id="translators" name="translators">Working with Translators</h4>
+<p>The system described above is a common one and is likely to be known to translators, meaning that giving its name (<span style="font-family: Courier New,Courier,monospace;">gettext</span>) may be enough to explain how it works. In addition to this documentation, there is extensive additional documentation as well as questions and answers on the topic in the Internet.</p>
+
+<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the .po files for the translator to see them.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/badge_n.htm b/org.tizen.guides/html/native/app/badge_n.htm
new file mode 100644 (file)
index 0000000..6b58d7f
--- /dev/null
+++ b/org.tizen.guides/html/native/app/badge_n.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Badge</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm">Badge Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Badge</h1>
+<p>A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>
+
+   <p class="figure">Figure: Badge</p> 
+  <p style="text-align:center;"><img alt="Badge" src="../../images/badge.png" /></p> 
+
+
+<p>To create a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method with a writable application ID on your application. 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>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/bundle_n.htm b/org.tizen.guides/html/native/app/bundle_n.htm
new file mode 100644 (file)
index 0000000..148d5cd
--- /dev/null
+++ b/org.tizen.guides/html/native/app/bundle_n.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Bundle</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm">Bundle Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Bundle</h1> 
+  
+<p>A bundle is a string-based dictionary abstract data type (ADT).</p>
+<p>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>
+<ul><li>Creating a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_create() </span> function.</li>
+<li>Adding content to a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_add_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_add_str_array()</span>, or <span style="font-family: Courier New,Courier,monospace">bundle_add_byte() </span> function.</li>
+<li>Managing the bundle content using the following functions:
+<ul><li>Deleting: <span style="font-family: Courier New,Courier,monospace">bundle_del() </span> </li>
+<li>Retrieving content: <span style="font-family: Courier New,Courier,monospace">bundle_get_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_str_array()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_get_byte()</span></li>
+<li>Retrieving details: <span style="font-family: Courier New,Courier,monospace">bundle_get_type()</span> and <span style="font-family: Courier New,Courier,monospace">bundle_get_count() </span></li></ul></li>
+<li>Iterating a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function.</li>
+<li>Encoding and decoding a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> and <span style="font-family: Courier New,Courier,monospace">bundle_decode() </span> functions.</li>
+</ul>
+
+<p>When no longer needed, release the bundle by calling the <span style="font-family: Courier New,Courier,monospace">bundle_free()</span> 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/data_control_n.htm b/org.tizen.guides/html/native/app/data_control_n.htm
new file mode 100644 (file)
index 0000000..600dcca
--- /dev/null
+++ b/org.tizen.guides/html/native/app/data_control_n.htm
@@ -0,0 +1,215 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#use">Using Data Controls</a></li> 
+                       <li><a href="#develop">Developing with Data Controls</a></li>
+                       <li><a href="#export">Exporting DataControl Functionality</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm">Data Control Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1 id="data_controls" name="data_controls">Data Control</h1>
+<p>Data control is a standard mechanism for exchanging specific data between applications.</p>
+ 
+      <p class="figure">Figure: Data control mechanism</p> 
+  <p style="text-align:center;"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
+ 
+<p>All applications can request data shared by other applications using a data control. However, only service applications can provide their own data.</p>
+<p>There are 2 types of data controls:</p>
+<ul><li>DATA_CONTROL_SQL
+<p>Allows you to use an SQL-type data control to access specific data exported by other service applications. You can also define an SQL-type data control provider to export specific data from your service application.</p></li>
+<li>DATA_CONTROL_MAP
+<p>Allows you to use a key-value-type data control to access data exported by other service applications. You can also define a key-value-type data control provider to export specific data from your service application.</p></li></ul>
+<p>Data controls can supply operations to access shared data and get back results.</p>
+<p>The data control requires the following provider information:</p>
+<ul><li>Provider ID
+<p>Unique provider ID to identify the data control for a specific provider.</p>
+<p>Format:</p>
+<ul><li>Provider ID must consist of alpha-numeric letters separated with the period (&quot;.&quot;) character, and it must start with letters.</li>
+<li>Custom provider ID must start with a vendor name to avoid conflicts with other developers.</li>
+<li>IRI format: <span style="font-family: Courier New,Courier,monospace">http://{provider URI}/datacontrol/provider/{provider name}</span></li></ul></li>
+<li>Data ID
+<p>String ID for identifying specific data, usually a database table name or a registry section name.</p>
+<p>Format:</p>
+<ul><li>Data ID consists of one or more components, separated by a slash (&quot;/&quot;) character.</li></ul></li></ul>
+
+
+<h2 id="use" name="use">Using Data Controls</h2>
+<p>You can get a <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance from the <span style="font-family: Courier New,Courier,monospace">datacontrol_map_create()</span> or <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_create()</span> function.</p>
+<ul><li>Map type data control
+<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_map_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_set_data_id()</span> function, you can get the specific map-type data control uniquely. </p>
+<p>After resolving the data control, call the data control map APIs, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_set()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_get()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_map_remove()</span>.</p>
+<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_get_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_remove_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_map_response_cb struct</span>. The response callback is invoked when a service application finishes its operation.</p></li>
+<li>Sql type data control
+<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_data_id()</span> function, you can get the specific SQL-type data control uniquely. </p>
+<p>After resolving the data control, call the data control SQL APIs, such as  <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_select()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete()</span>.</p>
+<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_sql_response_cb struct</span>. The response callback is invoked when a service application finishes its operation.</p>
+<p>Once you get the <span style="font-family: Courier New,Courier,monospace">result_set_cursor</span> using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span> callback, you can use the following functions to get information:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_first()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_last()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_next()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_set_previous()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_count()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_name()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_size()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_type()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_blob_data()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int_data()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int64_data()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_double_data()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_text_data()</span></li></ul></li></ul>
+
+<h2 id="develop" name="develop">Developing with Data Controls</h2>
+<p>You can develop with data controls by adding the <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+<p>The following code example describes how to add the <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element:</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;@PACKAGE_NAME@&quot; version=&quot;@VERSION@&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;ui-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;&lt;datacontrol providerid = &quot;Your Provider ID&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access=&quot;ReadWrite&quot; type=&quot;Sql&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datacontrol providerid = &quot;Your Provider ID&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access=&quot;ReadWrite&quot; type=&quot;Map&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
+&lt;/manifest&gt;
+</pre>
+
+<p>The service application providing its own database file must register the provider callback using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_sql_register_cb()</span> function. Similarly, the service application providing its own registry file or key-value pairs data set must register the provider callback using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_map_register_cb()</span> function.</p>
+<p>The service application sends the SQL- or map-type data control result to the other application by using functions, such as <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_select_result()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_insert_result()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_update_result()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_delete_result()</span>.</p>
+ 
+
+<p>You can <a href="#export">export the data of your service application</a> to other applications.</p> 
+ 
+       
+       <h2 id="export" name="export">Exporting DataControl Functionality</h2> 
+
+<p>You can export functionalities of your Tizen native application in the <a href="../../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE. The provider ID, type, and accessibility must be specified for the data control.</p> 
+  <p class="figure">Figure: Exporting data control</p> 
+  <p style="text-align:center;"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p> 
+  <h3 id="data" name="data">Data Model</h3> 
+  <p>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 
+    <ul>
+<li>It is used for identifying a data control provider.</li> 
+     <li>It must be unique and use a fully qualified domain name.</li> 
+     <li>Platform-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/datacontrol/provider/&lt;application name&gt;</span>
+</li> 
+     <li>User-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://&lt;vendor.com&gt;/datacontrol/provider/&lt;application name&gt;</span>
+</li> 
+    </ul>
+</li> 
+   <li>Data ID 
+    <ul>
+<li>It is used for identifying data exported by the data control provider.</li> 
+     <li>It must be unique in the data control provider and it is given as a string with a slash as a delimiter.</li> 
+    </ul>
+</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> 
+    </ul>
+</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> 
+    </ul>
+</li> 
+   <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by allowing data control accessibility.</p> </li> 
+  </ul>
+<table border="1" style="width: 100%">
+<caption>
+     Table: Data model example of a data control provider 
+   </caption> 
+   <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> 
+    </tr>
+<tr>
+<td>SQL</td> 
+     <td>http://&lt;vendor.com&gt;/datacontrol/provider/sample</td> 
+     <td>data1</td> 
+     <td>
+<p>column1<br/> (type: <span style="font-family: Courier New,Courier,monospace">Integer</span>)</p> </td> 
+     <td>
+<p>column2<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> 
+     <td>Read-Only</td> 
+    </tr>
+<tr>
+<td>Map</td> 
+     <td>http://&lt;vendor.com&gt;/datacontrol/provider/sample2</td> 
+     <td>data2</td> 
+     <td>
+<p>key1<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> 
+     <td>
+<p>key2<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</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>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/message_port_n.htm b/org.tizen.guides/html/native/app/message_port_n.htm
new file mode 100644 (file)
index 0000000..417b3dd
--- /dev/null
+++ b/org.tizen.guides/html/native/app/message_port_n.htm
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm">Message Port Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API</a></li>                        
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1 id="message_port" name="message_port">Message Port</h1>
+<p>Tizen applications can communicate with each other using message ports. Applications can send and receive messages through message port communication. The message data type for communication is a map data which consists of a bundle (key and value pair).</p>
+<p>You can communicate between applications using 2 types of message port:</p>
+<ul><li>Local port is used to register your message port and prepare to receive messages from another application.
+<p>To receive messages from the another application, set the callback from the local message port.</p></li>
+<li>Remote port is used to send messages to other applications. The local message port information can be sent to the other application for bi-directional communication.</li></ul>
+<p>A message port supports 2 communication methods:</p>
+<ul><li>Uni-directional communication 
+<ul><li>Check whether the message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
+<li>A Tizen application can send messages to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function.</li> 
+<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</li></ul>
+    <p class="figure">Figure: Uni-directional communication</p> 
+  <p style="text-align:center;"><img alt="Uni-directional communication" src="../../images/unidirection.png" /></p> </li>
+<li>Bi-directional communication 
+<ul><li>Check whether the trusted message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
+<li>A Tizen application can send messages and local message port information to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function. This local message port information can be used to send the response messages from the other application which receives these messages.</li> 
+<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function. The remote message port information can be used to send response messages to the application which sends the messages.</li></ul>
+    <p class="figure">Figure: Bi-directional communication</p> 
+  <p style="text-align:center;"><img alt="Bi-directional communication" src="../../images/bidirection.png" /></p> </li></ul>
+
+<h2 id="trusted" name="trusted">Trusted Communication</h2>
+<p>You can send and receive trusted messages through message port APIs. The trusted message port instance can be retrieved using the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> 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 class="figure">Figure: Trusted message port communication</p> 
+  <p style="text-align:center;"><img alt="Trusted message port communication" src="../../images/trusted_communication.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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/notification_n.htm b/org.tizen.guides/html/native/app/notification_n.htm
new file mode 100644 (file)
index 0000000..4958ac0
--- /dev/null
+++ b/org.tizen.guides/html/native/app/notification_n.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Notification</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm">Notification Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Notification</h1>
+  <p>An application can create notifications for the user.</p>
+<p>The Tizen Notification API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</p>
+
+<p>To use the notification feature:</p>
+<ul class="ul"><li>To post a simple notification, use the <span style="font-family: Courier New,Courier,monospace">notification_post(</span>) function, which accepts a notification handle as a parameter.
+<p>The posted notification has a default notification icon and the application name as the title.</p></li>
+<li>To control the detailed behavior of the notification or to show the progress bar in the on-going activity area, use the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function to get a notification handle and set the details.</li></ul>
+
+<h2 id="type" name="type">Notification Types</h2>
+<p>Tizen provides notifications by using a combination of any of the following notification types:</p>
+
+<ul class="ul"><li>Ticker</li> 
+<li>Quick panel </li>
+<li>Badge number </li>
+<li>Sound </li></ul>
+
+<p>You can specify the message for the ticker or quick panel, and the badge number for the notification. The display area for quick panel notifications can be one of the following:</p>
+<ul class="ul"><li>Notification area 
+<p>The notification area is the reserved space for displaying all notifications, except the on-going notifications.</p></li>
+<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 class="figure">Figure: Notification and on-going areas</p> 
+  <p style="text-align:center;"><img alt="Notification and on-going areas" src="../../images/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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/package_n.htm b/org.tizen.guides/html/native/app/package_n.htm
new file mode 100644 (file)
index 0000000..89e1cf6
--- /dev/null
+++ b/org.tizen.guides/html/native/app/package_n.htm
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm">Package Manager Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Package Manager</h1>
+
+<p>The package manager is used to retrieve detailed information of the installed packages on the device. This information includes the package name, label, path to the icon image, version, type, and installed storage.</p>
+<p>To retrieve package information, get the <span style="font-family: Courier New,Courier,monospace">package_info_h</span> object using the <span style="font-family: Courier New,Courier,monospace">package_info_create()</span> or <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function to retrieve the package information of all installed packages. As a result, the <span style="font-family: Courier New,Courier,monospace">package_manager_package_info_cb()</span> callback is invoked and you can get package information.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/service_app_n.htm b/org.tizen.guides/html/native/app/service_app_n.htm
new file mode 100644 (file)
index 0000000..6cf290f
--- /dev/null
+++ b/org.tizen.guides/html/native/app/service_app_n.htm
@@ -0,0 +1,236 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li><a href="#register">Registering Callbacks for Service Application Events</a></li>
+                       <li><a href="#attribute">Application Attributes</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Service Application Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API</a></li>   
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Service Application</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>
+<p>Service applications can be explicitly launched by a UI application. They can also be launched conditionally.</p>
+
+<p>The user can check the running service applications in the task switcher; however, no events occur if the user selects a service application from the task switcher. The main menu does not contain icons for service applications. Multiple service applications can be running simultaneously with other service and UI applications.</p>
+
+<p>The following figure and table describe the service application states.</p>
+
+    <p class="figure">Figure: Running service applications</p>
+  <p style="text-align:center;"><img alt="Running service applications" src="../../images/app_run.png" /></p>
+
+    <table>
+   <caption>
+     Table: Service application states
+   </caption>
+   <tbody>
+    <tr>
+     <th>State</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
+     <td>Application is launched.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
+     <td>Application runs in the background.</td>
+    </tr>
+
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
+     <td>Application is terminated.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<h2 id="register" name="register">Registering Callbacks for Service Application Events</h2>
+<p>The following table lists the application state change events.</p>
+
+    <table>
+   <caption>
+     Table: Application states
+   </caption>
+   <tbody>
+    <tr>
+     <th>Callback</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_create_cb()</span></td>
+     <td>Used to take necessary actions before the main event loop starts. Place the initialization code (such as setting up the dbus connection) here.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_control_cb()</span></td>
+     <td>Used to take necessary actions when a service call arrives from another application.</td>
+    </tr>
+
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_terminate_cb()</span></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 any shared resources. </td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>The following table lists the system event events.</p>
+
+    <table>
+   <caption>
+     Table: Application states
+   </caption>
+   <tbody>
+    <tr>
+     <th>Callback</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_low_memory_cb()</span></td>
+     <td><p>Used to take necessary actions in low memory situations. </p>
+        <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>
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_low_battery_cb()</span></td>
+     <td><p>Used to take necessary actions in low battery situations.</p>
+               <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the power goes off completely. Stop heavy CPU consumption or power consumption activities to save the remaining power.</p></td>
+    </tr>
+   </tbody>
+  </table>
+
+<h2 id="attribute" name="attribute">Application Attributes</h2>
+<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; exec=&quot;/usr/apps/org.tizen.message/bin/message&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;&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;
+&nbsp;&nbsp;&nbsp;&lt;!-- Consumer --&gt;
+&nbsp;&nbsp;&nbsp;&lt;service-application component-type=&quot;svcapp&quot; auto-restart=&quot;true&quot; on-boot=&quot;true&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appid=&quot;org.tizen.message.consumer&quot;
+&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/msg-consumer-service&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;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
+&lt;/manifest&gt;
+</pre>
+
+<p>Pay specific attention to the following attributes:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">component-type</span>
+<p>Set your service application component type to <span style="font-family: Courier New,Courier,monospace">svcapp</span> to define the application as a service application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">auto-restart</span>
+<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">on-boot</span>
+<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p></li></ul>
+
+<p>The following table defines the behaviors resulting from the attribute combinations:</p>
+
+<table>
+   <caption>
+     Table: Attribute combinations
+   </caption>
+   <tbody>
+    <tr>
+     <th><span style="font-family: Courier New,Courier,monospace">auto-restart</span></th>
+     <th><span style="font-family: Courier New,Courier,monospace">on-boot</span></th>
+     <th>After normal termination</th>
+     <th>On forced close</th>
+     <th>On Reboot</th>
+     <th>After package installation</th>
+     <th>After package update</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
+     <td>Not launched automatically</td>
+        <td>Not launched automatically</td>
+        <td>Not launched after reboot</td>
+        <td>Not launched</td>
+        <td>Not launched automatically</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
+     <td>Not launched automatically</td>
+        <td>Not launched automatically</td>
+        <td>Launched automatically after reboot</td>
+        <td>Launched</td>
+        <td>Launched automatically</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
+     <td>Launched automatically</td>
+        <td>Launched automatically</td>
+        <td>Not launched after reboot</td>
+        <td>Not launched</td>
+        <td>Launched automatically</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
+     <td>Launched automatically</td>
+        <td>Launched automatically</td>
+        <td>Launched automatically after reboot</td>
+        <td>Launched</td>
+        <td>Launched automatically</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/shortcut_n.htm b/org.tizen.guides/html/native/app/shortcut_n.htm
new file mode 100644 (file)
index 0000000..ac0dbd8
--- /dev/null
+++ b/org.tizen.guides/html/native/app/shortcut_n.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Shortcut</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm">Shortcut Tutorial</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API</a></li>
+                       </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Shortcut</h1> 
+  
+<p>You can add your shortcut for the Home application. The Tizen Shortcut API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/shortcut</span> privilege.</p>
+
+
+<p>To use the shortcut feature:</p>
+<ul><li>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function, which requests the Home application to add a new shortcut.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/base/base_guide_n.htm b/org.tizen.guides/html/native/base/base_guide_n.htm
new file mode 100644 (file)
index 0000000..35542f6
--- /dev/null
+++ b/org.tizen.guides/html/native/base/base_guide_n.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Base</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Base</h1> 
+       <p>The base features include formatting locale-sensitive information, such as time, and managing Web content in your application.</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 base features are:</p>
+<ul>
+<li><p><a href="i18n_n.htm">i18n</a></p>
+<p>Enables you to localize your application to generate flexible number or date format patterns.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/base/i18n_n.htm b/org.tizen.guides/html/native/base/i18n_n.htm
new file mode 100644 (file)
index 0000000..6dcf5bb
--- /dev/null
+++ b/org.tizen.guides/html/native/base/i18n_n.htm
@@ -0,0 +1,230 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#ucalendar">Ucalendar</a></li>
+                       <li><a href="#uchar">Uchar</a></li>
+                       <li><a href="#ucoll">Ucollator</a></li>
+                       <li><a href="#udate">Udate</a></li>
+                       <li><a href="#udatepg">Udatepg</a></li>
+                       <li><a href="#ulocale">Ulocale</a></li>
+                       <li><a href="#unormal">Unormalization</a></li>
+                       <li><a href="#unumber">Unumber</a></li>
+                       <li><a href="#usearch">Usearch</a></li>
+                       <li><a href="#ustring">Ustring</a></li>                         
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm">i18n Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>i18n</h1>
+
+<p>You can generate flexible number or date format patterns and format and parse dates and numbers for any locale. The i18n API is implemented by using the ICU library.</p>
+
+<h2 id="ucalendar" name="ucalendar">Ucalendar</h2>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">Ucalendar</a> API is used for converting between a Udate object and a set of integer fields such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_HOUR</span>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>
+<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>
+<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 <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR = 1970</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ MONTH = JANUARY</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ DATE = 1</span>.</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>
+<table> 
+   <caption>
+     Table: Combinations of the calendar fields to determine the day 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Combinations of the calendar fields</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</span><br/><br/>
+<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span><br/><br/>
+<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span><br/><br/>
+<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_YEAR</span><br/><br/>
+<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</span></td>
+</tr> 
+   </tbody> 
+  </table>
+
+<p>For the time of day:</p>
+<table> 
+   <caption>
+     Table: Combinations of calendar fields to determine the time of the day 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Combinations of the calendar fields</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR_OF_DAY</span><br/><br/>
+<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</span></td>
+    </tr> 
+   </tbody> 
+  </table> 
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">For some non-Gregorian calendars, different fields are necessary for complete disambiguation. For example, a full specification of the historical
+    Arabic astronomical calendar requires the year, month, day-of-month and day-of-week in some cases.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<h2 id="uchar" name="uchar">Uchar</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">Uchar</a> API provides a low-level access to the Unicode Character Database.</p>
+<p>Unicode assigns each code point (not just the assigned character) values for several properties. Most of them are simple boolean flags, or constants from a small enumerated list. For some properties, values are strings or other relatively more complex types.</p>
+<p>For more information, see <a href="http://www.unicode.org/ucd/" target="_blank">About the Unicode Character Database</a> and <a href="http://icu-project.org/userguide/properties.html" target="_blank">ICU User Guide chapter on Properties</a>.
+</p>
+
+<h2 id="ucoll" name="ucoll">Ucollator</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">Ucollator</a> API performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>
+
+<h2 id="udate" name="udate">Udate</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">Udate</a> API consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span>), which can handle practically all normal date formatting and parsing actions.</p>
+<p>The Udate format helps you to format and parse dates for any locale. Your code can be completely independent of the locale conventions for months, days of the week, or even the lunar or solar calendar format.</p>
+<p>You can pass in different options for the arguments for date and time style to control the length of the result; you can select from <span style="font-family: Courier New,Courier,monospace">SHORT</span>, <span style="font-family: Courier New,Courier,monospace">MEDIUM</span>, <span style="font-family: Courier New,Courier,monospace">LONG</span>, and <span style="font-family: Courier New,Courier,monospace">FULL</span>. The exact result depends on the locale.</p>
+
+<ul>
+    <li>
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_SHORT</span> is completely numeric, such as 12/13/52 or 3:30pm
+    </li>
+    <li>
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_MEDIUM</span> is longer, such as Jan 12, 1952
+    </li>
+    <li>
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_LONG</span> is longer, such as January 12, 1952 or 3:30:32pm
+    </li>
+    <li>
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_FULL</span>
+        is completely specified, such as Tuesday, April 12, 1952 AD or 3:30:42pm PST.
+    </li>
+</ul>
+
+<h3 id="pattern" name="pattern">Date and Time Patterns</h3>
+<p>The date and time formats are specified by the <span style="font-family: Courier New,Courier,monospace">date and time pattern</span> strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span> handle supports the date and time formatting algorithm and pattern letters defined by the <a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table" target="_blank">UTS#35 Unicode Locale Data Markup Language (LDML)</a>. It is further documented in the <a href="https://sites.google.com/site/icuprojectuserguide/formatparse/datetime?pli=1#TOC-Date-Field-Symbol-Table" target="_blank">ICU User Guide</a>.</p>
+
+<h2 id="udatepg" name="udatepg">Udatepg</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">Udatepg</a> API enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
+</p>
+<p>The main method is the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function, since normally the Udatepg API is pre-built with data from a particular locale. However, generators can be built directly from other data as well.
+</p>
+
+<h2 id="ulocale" name="ulocale">Ulocale</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">Ulocale</a> API represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information 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>
+<p>You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:</p>
+
+<table> 
+   <caption>
+     Table: Options for creating a locale
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Options for creating a locale</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">newLanguage</span><br/><br/>
+        <span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry</span><br/><br/>
+        <span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry + newVariant</span></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 two-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>.
+</p>
+<p>The third option requires additional information on the variant. The variant codes are vendor and browser-specific. For example, use <span style="font-family: Courier New,Courier,monospace">WIN</span> for Windows, <span style="font-family: Courier New,Courier,monospace">MAC</span> for Macintosh, and <span style="font-family: Courier New,Courier,monospace">POSIX</span> for POSIX. Where there are two variants, separate them with an underscore, and put the most important one first. For example, a Traditional Spanish collation might be referenced, with <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">Traditional_WIN</span>.
+</p>
+<p>Because a locale is just an identifier for a region, no validity check is performed when you specify a locale. If you want to see whether particular resources are available for the locale you asked for, you must query those resources.
+</p>
+<p> Once you have specified a locale you can query it for information about itself. Use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> to get the ISO Language Code. You can use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> to get the name of the language suitable for display to the user.
+</p>
+
+<h2 id="unormal" name="unormal">Unormalization</h2>
+
+<p> The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">Unicode normalization</a> API is for the standard unicode normalization. All instances of <span style="font-family: Courier New,Courier,monospace">i18n_unormalizer_s</span> are unmodifiable and immutable. Instances returned by <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> are singletons that must not be deleted by the caller.</p>
+
+
+<h2 id="unumber" name="unumber">Unumber</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">Unumber</a> API helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>
+
+<h2 id="usearch" name="usearch">Usearch</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">Usearch</a> API provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.</p>
+
+<h2 id="ustring" name="ustring">Ustring</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">Ustring</a> API provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <span style="font-family: Courier New,Courier,monospace">&lt;string.h&gt;</span> functions, and other functions provide more Unicode-specific functionality.</p>
+<p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> 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 <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> 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>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>
+<p>For more information about character sets, codepages and encodings, see <a href="http://www.ibm.com/software/globalization/topics/charsets/" target="_blank">Coded Character Sets</a> on the IBM site.
+</p>
+
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/content/content_guide_n.htm b/org.tizen.guides/html/native/content/content_guide_n.htm
new file mode 100644 (file)
index 0000000..1d01944
--- /dev/null
+++ b/org.tizen.guides/html/native/content/content_guide_n.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Content</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content Tutorials</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Content</h1>
+  
+  <p>Content features include handling a variety of data types.</p>
+  
+
+
+<p>The main content features are:</p>
+  <ul>
+        <li><a href="download_n.htm">Download</a>  <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>
+        <li><a href="media_content_n.htm">Media Content</a> <p>Provides functions and interfaces that allow you to handle content management and content search.</p></li>
+        <li><a href="mime_type_n.htm">MIME type</a> <p>Enables you to get the MIME type of a file extension and get a list of associated extensions.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/content/download_n.htm b/org.tizen.guides/html/native/content/download_n.htm
new file mode 100644 (file)
index 0000000..1cf10d7
--- /dev/null
+++ b/org.tizen.guides/html/native/content/download_n.htm
@@ -0,0 +1,137 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Download</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">             
+                       <li><a href="#state">Download States</a></li>
+                       <li><a href="#stop">Stopping and Destroying a Download</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/download_tutorial_n.htm">Download Tutorial</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Download</h1>
+ <p>You can create and manage one or more download requests. Tizen allows you to create a new download process, configure the download URL or destination, and launch the process.</p>
+ 
+ <h2 id="state" name="state">Download States</h2>
+ 
+ <p>The following figure illustrates the download states (such as READY and DOWNLOADING), and API functions (such as <span style="font-family: Courier New,Courier,monospace">download_start()</span>) which cause transitions between those states. Functions can be called only from specific states. Every possible scenario must be handled in the code to avoid undefined behavior in the application.</p>
+ 
+
+  <p class="figure">Figure: Download states</p> 
+  <p style="text-align:center;"><img alt="Download states" src="../../images/download_state.png" /></p> 
+
+  <p>The following table defines the download state enumerator values.</p>
+<table> 
+   <caption>
+     Table: Download state enumerator values
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Enumerator value</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_NONE</span></td> 
+     <td>Default value.</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_READY</span></td> 
+     <td>Ready to download.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_QUEUED</span></td> 
+     <td>Queued to start downloading.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_DOWNLOADING</span></td> 
+     <td>Download is currently running.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_PAUSED</span></td> 
+     <td>Download is waiting to resume.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_COMPLETED</span></td> 
+     <td>Download is complete.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_FAILED</span></td> 
+     <td>Download failed.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_CANCELED</span></td> 
+     <td>Download was cancelled by the user.</td> 
+    </tr> 
+   
+   </tbody> 
+  </table> 
+
+<p>The following figure illustrates the user scenario for the download.</p>
+ 
+
+  <p class="figure">Figure: User scenario</p> 
+  <p style="text-align:center;"><img alt="User scenario" src="../../images/user_scenario.png" /></p> 
+
+   <h2 id="stop" name="stop">Stopping and Destroying a Download</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">download_cancel()</span> function can be used to stop downloading a file. The function changes the download state to DOWNLOAD_STATE_CANCELED. From this state, the <span style="font-family: Courier New,Courier,monospace">download_start()</span> function can be called to restart the download. </p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> function can be called to unload all data concerning a <span style="font-family: Courier New,Courier,monospace">download_id</span> handle from the memory. The <span style="font-family: Courier New,Courier,monospace">download_id</span> handle is stored for 48 hours (even if the device is powered off), unless the <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> is called.</p>
+  
+
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/content/media_content_n.htm b/org.tizen.guides/html/native/content/media_content_n.htm
new file mode 100644 (file)
index 0000000..3b68cf3
--- /dev/null
+++ b/org.tizen.guides/html/native/content/media_content_n.htm
@@ -0,0 +1,426 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm">Media Content Tutorials</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<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 class="figure">Figure: Media content of the device</p> 
+  <p style="text-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>
+
+<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <span style="font-family: Courier New,Courier,monospace">int storage_get_directory(int storage_id, storage_directory_e type, char **path);</span> function. For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API Reference</a>.</p>
+
+
+<p>The main features of the Content module include:</p>
+<ul>
+<li>Media content
+<p>To obtain information from the media database, make sure you are connected to it. When the connection is no longer needed, remember to disconnect from the media database.</p>
+<p>You can update database details due to file (or directory) creation or deletion. If a received file (or directory) does not exist in the file system, it is removed from the database.</p>
+<p>You can also set an alarm to get notifications of media database changes.</p></li>
+<li><a href="#media_info">Media information</a>
+<p>You can update the media database due to file creation, deletion, or update in the device.</p></li>
+<li>Media bookmarks
+<p>You can manage a bookmark of the video and audio files.</p></li>
+<li>Media playlists
+<p>You can add or delete a playlist of the video and audio files, and add media files to a created playlist.</p></li>
+<li>Media tags
+<p>You can get tag information of the media files.</p></li>
+<li>Media albums
+<p>You can manage an album of the audio file.</p></li>
+<li><a href="mime_type_n.htm">Mapping MIME types</a>
+<p>You can map a file&#39;s MIME types to file extensions and vice versa.</p></li>
+</ul>
+
+<p>You can also <a href="download_n.htm">manage downloads</a>, for example, create a new download process, configure the download URL or destination, and launch the process.</p>
+
+   <h2 id="media_info" name="media_info">Getting Media Information</h2>
+<p>You can get the media data from the media database using the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function.</p>
+<p>After that, you can get the general information of media and specific information of each media type.</p>
+
+<p>The following tables list the information available about the media files.</p>
+
+<table> 
+   <caption>
+     Table: General information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Metadata name</th>
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>
+     <td>ID of the media content</td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">File path</span></td>
+     <td>Path of the media content</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Display name</span></td>
+     <td>Display name of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Media type</span></td> 
+     <td>The media type of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Mime type</span></td> 
+     <td>Mime type of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Size</span></td> 
+     <td>File size of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Added time</span></td> 
+     <td>The time the media content was added in the database</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Modified time</span></td> 
+     <td>The last modification time of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Timeline</span></td> 
+     <td>The time the media content was created<br/>You can use this value to sort the content.</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Thumbnail path</span></td> 
+     <td>Path of the stored thumbnail image of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Description</span></td> 
+     <td>Description of the media content</td>
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Longitude</span></td> 
+     <td>Longitude of the media content</td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Latitude</span></td> 
+     <td>Latitude of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Altitude</span></td> 
+     <td>Altitude of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Weather</span></td> 
+     <td>Weather information of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Rating</span></td> 
+     <td>Rating of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Favorite</span></td> 
+     <td>Favorite of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Author</span></td> 
+     <td>The author of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Provider</span></td> 
+     <td>Provider of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Content name</span></td> 
+     <td>Content name of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Title</span></td> 
+     <td>Title of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Category</span></td> 
+     <td>Category of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Location tag</span></td> 
+     <td>Location tag of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Age rating</span></td> 
+     <td>Age rating of the media content</td>
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Keyword</span></td> 
+     <td>Keyword of the media content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Is DRM</span></td> 
+     <td>Check flag for DRM content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Storage type</span></td> 
+     <td>Storage type of the media content</td>
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>For metadata of an audio file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_audio()</span> function with the media handle.</p>
+ <table> 
+   <caption>
+     Table: Audio metadata (only for audio files)
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Metadata name</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> 
+     <td>Media ID of the audio content<br/> This value is same as the media ID in general information</td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Album</span></td> 
+     <td>Album information of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td> 
+     <td>Artist of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Album Artist</span></td> 
+     <td>Album artist of the audio content <br/> The artist and album artist can be the same.</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td> 
+     <td>Genre of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td> 
+     <td>Composer of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Year</span></td> 
+     <td>The year the audio content was created</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td> 
+     <td>The date the audio content was recorded</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td> 
+     <td>Copyright information of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td> 
+     <td>Track number of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td> 
+     <td>Bit rate of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Bit per sample</span></td> 
+     <td>Bit per sample of the audio content <br/> The bit per sample is the same as the sample format. <br/>The sample format is the number of digits in the digital representation of each sample.</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Sample rate</span></td> 
+     <td>Sample rate of the audio content</td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Channel</span></td> 
+     <td>Channel information of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td> 
+     <td>Duration of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Played count</span></td> 
+     <td>Play count of the audio content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Played time</span></td> 
+     <td>The last time the audio content was played</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Played position</span></td> 
+     <td>The last position the audio content was played to</td>
+    </tr> 
+   </tbody> 
+  </table>
+ 
+<p>For metadata of an image file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_image()</span> function with the media handle.</p>  
+
+ <table> 
+   <caption>
+     Table: Image metadata (only for image files)
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Metadata name</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> 
+     <td>Media ID of the image<br/>This value is the same as the media ID in the general information.</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Width</span></td> 
+     <td>Width of the image</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Height</span></td> 
+     <td>Height of the image</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Orientation</span></td> 
+     <td>Orientation information of the image</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Date taken</span></td> 
+     <td>The time the image was created<br/>You can get this information from the EXIF tag. <br/>If there is no EXIF tag for the image, set the created time in the file system.</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Is burstshot</span></td> 
+     <td>Check flag for a burst shot of the image<br/> The burst shot is a continuous shooting mode.</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Burstshot ID</span></td> 
+     <td>ID of a burst shot image <br/>Assign the same ID to the burst shooting mode.</td>
+    </tr> 
+   </tbody> 
+  </table>  
+<p>For metadata of a video file, call <span style="font-family: Courier New,Courier,monospace">withmedia_info_get_video()</span> function with the media handle.</p>  
+  
+  <table> 
+   <caption>
+     Table: Video metadata (only for video files)
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Metadata name</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> 
+     <td>The media ID of the video content<br/>This value is same with media ID of general information</td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Album</span></td> 
+     <td>Album of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td> 
+     <td>Artist of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Album artist</span></td> 
+     <td>Album artist of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td> 
+     <td>Genre of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td> 
+     <td>Media composer of the video content</td>
+    </tr> 
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Year</span></td> 
+     <td>The year the video content was created</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td> 
+     <td>The date the video content was recorded</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td> 
+     <td>Copyright of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td> 
+     <td>Track number of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td> 
+     <td>Bit rate of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td> 
+     <td>Duration of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Width</span></td> 
+     <td>Width of the video content</td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Height</span></td> 
+     <td>Height of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Played count</span></td> 
+     <td>Play count of the video content</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Played time</span></td> 
+     <td>The last time the video content was played</td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Played position</span></td> 
+     <td>The last position the video content was played to</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/content/mime_type_n.htm b/org.tizen.guides/html/native/content/mime_type_n.htm
new file mode 100644 (file)
index 0000000..a988c29
--- /dev/null
+++ b/org.tizen.guides/html/native/content/mime_type_n.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>MIME Type</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm">MIME Type Tutorial</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>MIME Type</h1> 
+  
+
+  <p>The MIME Type API obtains a file&#39;s MIME types or file extensions using <span style="font-family: Courier New,Courier,monospace">xdgmime</span>. <span style="font-family: Courier New,Courier,monospace">xdgmime</span> reads the MIME information from the <span style="font-family: Courier New,Courier,monospace">/usr/local/share/mime</span> directory, which is updated with the <span style="font-family: Courier New,Courier,monospace">update-mime-database()</span> function in the <span style="font-family: Courier New,Courier,monospace">shared-mime-info</span> package.</p>
+  
+    <p class="figure">Figure: MIME type management</p> 
+  <p style="text-align:center;"><img alt="MIME type management" src="../../images/mime_type.png" /></p>
+  
+<p>The main features of the MIME Type API include:</p>
+ 
+<ul><li>Getting the MIME type 
+<p>To get a MIME type for a file extension, use the <span style="font-family: Courier New,Courier,monospace">mime_type_get_mime_type()</span> function. The MIME type is &#39;application/octet-stream&#39;, if the given file extension is not associated with any specific file format.</p></li>
+
+<li>Getting associated extensions
+<p>To get a list of extensions associated, for example, with an image or a JPEG MIME type, use the <span style="font-family: Courier New,Courier,monospace">mime_type_get_file_extension()</span> function.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/activity_recognition_n.htm b/org.tizen.guides/html/native/context/activity_recognition_n.htm
new file mode 100644 (file)
index 0000000..092ff2c
--- /dev/null
+++ b/org.tizen.guides/html/native/context/activity_recognition_n.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Activity Recognition</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/context/activity_tutorial_n.htm">Activity Recognition Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Activity Recognition</h1>
+
+
+<p>The activity recognizer can detect walking and running activity. It also recognizes the stationary state and activities on a moving vehicle.</p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">You can test the activity recognition functionality only on a target device. The Emulator does not support this feature.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/context_guide_n.htm b/org.tizen.guides/html/native/context/context_guide_n.htm
new file mode 100644 (file)
index 0000000..bb04399
--- /dev/null
+++ b/org.tizen.guides/html/native/context/context_guide_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Context</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Context</h1>
+
+  <p>Context features include recognizing activities and gestures on the device.</p>
+
+  <p>The main context features are:</p>
+  <ul>
+   <li><a href="activity_recognition_n.htm">Activity Recognition</a>
+       <p>Enables you to monitor user activities, such as walking and running.</p></li>
+       <li><a href="gesture_recognition_n.htm">Gesture Recognition</a>
+       <p>Enables you to monitor user gestures, such as double-tap.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/gesture_recognition_n.htm b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
new file mode 100644 (file)
index 0000000..2747178
--- /dev/null
+++ b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
@@ -0,0 +1,122 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Gesture Recognition</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm">Gesture Recognition Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Gesture Recognition</h1>
+
+<p>With gesture recognition, you can receive notifications about different device movement patterns, identify device states, and trigger events when the sensor data meets predefined conditions. In some cases, you can also listen to different states (started, in-progress, and ended).</p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">You can test the gesture recognition functionality only on a target device. The Emulator does not support this feature.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<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 class="figure">Figure: Move-to-ear event</p> 
+  <p style="text-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>
+<li>Pick-up
+<p>The device is picked up.</p></li>
+<li>Shake
+<p>The device is quickly moved back and forth.</p>
+<p class="figure">Figure: Shake event</p> 
+  <p style="text-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 class="figure">Figure: Axes of the device</p> 
+  <p style="text-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 class="figure">Figure: Snap events +X, +Y, and +Z</p> 
+  <p style="text-align:center;"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+  </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 class="figure">Figure: Tilt event</p> 
+  <p style="text-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 class="figure">Figure: Face-down event</p> 
+  <p style="text-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 class="figure">Figure: Wrist-up event</p>
+  <p style="text-align:center;"><img alt="Wrist-up event" src="../../images/wrist_up.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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/cairo_n.htm b/org.tizen.guides/html/native/graphics/cairo_n.htm
new file mode 100644 (file)
index 0000000..13806e2
--- /dev/null
+++ b/org.tizen.guides/html/native/graphics/cairo_n.htm
@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Cairo Integration</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#create">Creating an Evas_Object Image</a></li>
+                       <li><a href="#link">Linking Evas_Object Image to Cairo</a></li>
+                       <li><a href="#paint">Painting with Cairo</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm">Cairo Integration Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ 
+  <h1>Cairo Integration</h1>
+  
+<p>Evas Cairo is the connection between the Cairo buffer and the Evas buffer.</p>
+<p>EFL and more especially Evas are optimized and designed with bitmaps in mind, and it is more complicated to display vector images with EFL. There is an svg loader for evas, which loads a vectorial file as an evas object image, in other words as pixels. But if you want to create graphs, for example to display the evolutions of stocks during time, you need an external library, and this programming guide explains how to link this external library to evas.</p>
+<p>This library is the <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a> API. It is one of the most famous open source libraries for 2D graphics. Evas and EFL already have most of Cairo features, but if you want to display Bezier curves on screen it is advisable to use Cairo.</p>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas</a> API and Cairo have completely different concepts. Evas knows the state of each object on screen and manipulates the state. So when you create, for example, a rectangle with <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add</span>, it is not rendered on screen. After the render is launched, the rectangle may be overlayed by an opaque image and never be rendered on canvas. This is how evas manages the surfaces. Cairo works as a person draws on a paper sheet. Once something is painted on the surface it is rendered on the screen.</p>
+
+<h2 id="create" name="create">Creating an Evas_Object Image</h2>
+
+<p>This is how to create an Evas_Object. We use an Image object as it is displayed as pixels on the screen.</p>
+<pre class="prettyprint">Evas_Object *image;
+
+image = evas_object_image_add(evas);
+</pre>
+
+<p>To have transparent values enabled, we use ARGB8888 colorspace for the pixels. To do that, use the following code:</p>
+<pre class="prettyprint">evas_object_image_alpha_set(image, EINA_TRUE);
+evas_object_image_colorspace_set(image, EVAS_COLORSPACE_ARGB8888);
+</pre>
+
+<p>The image is now ready to be linked to Cairo.</p>
+
+<h2 id="link" name="link">Linking Evas_Object Image to Cairo</h2>
+
+<p>Now we create the real pixels Cairo uses for painting and EFL for displaying. We allocate the pixels for both Cairo and evas. The size of the row stride is called by <span style="font-family: Courier New,Courier,monospace">cairo_format_stride_for_width</span>. To set the size of the pixels to be allocated, use the following code.</p>
+<pre class="prettyprint">cairo_format_t image_format;
+cairo_t *cairo;
+cairo_surface_t *surface;
+unsigned char *pixels;
+
+image_format = CAIRO_FORMAT_ARGB32;
+row_stride = cairo_format_stride_for_width(image_format, WIDTH);
+// Create the pixels here
+pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
+</pre>
+
+<p>This is how to create a Cairo structure which uses these pixels:</p>
+<pre class="prettyprint">surface = cairo_image_surface_create_for_data(pixels, image_format,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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);
+</pre>
+<p>To create the Cairo context used for all operations, use the following code.</p>
+<pre class="prettyprint">cairo = cairo_create(surface);
+</pre>
+
+<p>This is how to associate the pixels to the Evas_Object Image and set the size of the image to be the same as the one on the Cairo canvas.</p>
+<pre class="prettyprint">evas_object_image_size_set(image, WIDTH, HEIGHT);
+evas_object_image_fill_set(image, 0, 0, WIDTH, HEIGHT);
+evas_object_image_data_set(image, pixels);
+</pre>
+
+<p>Each time we finish painting with Cairo, evas renders the pixels on screen with the following code.</p>
+<pre class="prettyprint">evas_object_image_data_update_add(image, 0, 0, WIDTH, HEIGHT);
+</pre>
+
+<h2 id="paint" name="paint">Painting with Cairo</h2>
+
+<p>All painting operations use the Cairo object created previously. To place the pencil at a specific position, use <span style="font-family: Courier New,Courier,monospace">cairo_move_to</span>. To paint a line between the current position and a point on the surface, use <span style="font-family: Courier New,Courier,monospace">cairo_line_to</span>. Here we paint a line with the current style from the point (x, y) 10, 10 to the point 10, 110.</p>
+<pre class="prettyprint">cairo_move_to(cairo, 10, 10);
+cairo_line_to(cairo, 10, 110);
+</pre>
+
+<p>Create a rectangle by using the <span style="font-family: Courier New,Courier,monospace">cairo_rectangle</span> API. This call draws a rectangle from position 10,10 and with 100px width and height.</p>
+<pre class="prettyprint">cairo_rectangle(cairo, 10, 10, 110, 110);
+</pre>
+
+<p>Change the color of the pen by using the API <span style="font-family: Courier New,Courier,monospace">cairo_set_source_rgba</span> or <span style="font-family: Courier New,Courier,monospace">cairo_set_source_rgb</span>. This call changes the  color to red with half transparency.</p>
+<pre class="prettyprint">cairo_set_source_rgba(cairo, 1.0, 0.0, 0.0, 0.5);
+</pre>
+
+<p>Changing the size of the pen is done by calling <span style="font-family: Courier New,Courier,monospace">cairo_set_line_width</span>. For a two pixel width use the following code.</p>
+<pre class="prettyprint">cairo_set_line_width(cairo, 2);
+</pre>
+
+<p>For the complete official Cairo documentation, see <a href="http://cairographics.org/documentation/" target="_blank">http://cairographics.org/documentation/</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
new file mode 100644 (file)
index 0000000..cf12835
--- /dev/null
+++ b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Graphics</h1>
+    <p>Graphics features include using OpenGL ES in various ways, and handling vector graphics and graphic buffers.</p>
+  <p>The main graphics features are:</p>
+  <ul>
+   <li><a href="opengles_n.htm">OpenGL ES</a> <p>Enables you to create OpenGL ES applications in Tizen with the EGL layer.</p></li>
+   <li><a href="tbm_n.htm">TBM Surface</a> <p>Provides Tizen Buffer Manager (TBM) surface functions for the graphic buffer in Tizen.</p></li>
+   <li><a href="cairo_n.htm">Cairo Integration</a> <p>Allows you to integrate Evas images and Cairo surfaces to display vector graphics.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/opengles_n.htm b/org.tizen.guides/html/native/graphics/opengles_n.htm
new file mode 100644 (file)
index 0000000..a4d7b75
--- /dev/null
+++ b/org.tizen.guides/html/native/graphics/opengles_n.htm
@@ -0,0 +1,449 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>OpenGL ES</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#tizen">OpenGL ES in Tizen</a></li>
+            <li><a href="#glview">GLView Programming Guide</a></li>
+                       <li><a href="#evasgl">EvasGL Programming Guide</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm">OpenGL ES Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>OpenGL ES</h1>  
+ 
+<p>The OpenGL ES overview shows the interaction among Graphics subsystems, OpenGL ES, and EGL defined by the <a href="http://www.khronos.org" target="_blank">Khronos Group</a>.</p>
+
+<p>OpenGL ES is a standard specification defining a cross-language, cross-platform <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES</a> API for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
+
+<p>EGL is an adhesive layer between OpenGL ES and the underlying native platform window system. EGL communicates with the Window system to get information on the application window, creates the drawing surface, and manages rendering context and resources.</p>
+
+     <p class="figure">Figure: OpenGL ES structure</p> 
+  <p style="text-align:center;"><img alt="OpenGL&reg; ES structure" src="../../images/opengl1.png" /></p>   
+
+<h2 id="tizen" name="tizen">OpenGL ES in Tizen</h2>
+
+<p>Building an OpenGL ES application in Tizen requires knowledge about <a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">designing UI applications with EFL</a>.</p>
+
+<p>Tizen native applications do not depend on the Window system, because the Window system is an internal Tizen module, which can be enhanced or replaced. EFL provides a method that draws the OpenGL ES content and encapsulates the EGL and the native Window system.</p>
+
+      <p class="figure">Figure: OpenGL ES and EFL</p> 
+  <p style="text-align:center;"><img alt="OpenGL&reg; ES and EFL" src="../../images/opengl2.png" /></p>   
+
+<p>A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various widgets, such as toolbar or button.</p>
+
+<p>GLView internally uses EvasGL. It is an abstraction layer on top of EGL, which provides the necessary features for most applications in a platform-independent way. Since the goal of EvasGL is to abstract the underlying platform, only a subset of the features can be used by applications.</p>
+
+<p>Using GLView is recommended for usual OpenGL ES programs, such as 3D game applications. But if you need pbuffer surface or extension functions, you have to understand EvasGL.</p>
+
+<h3>EvasGL vs. GLView</h3>
+
+<p>While it is possible to create an OpenGL application by just using EvasGL, it could be difficult to comprehend due to the low-level nature of these APIs. However, it enables detailed operations.</p>
+
+<h2 id="glview" name="glview">GLView Programming Guide</h2>
+
+<h3>Setting up an OpenGL ES Surface</h3>
+
+<p>The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView widget.</p>
+
+<p>GLView is a simple Elementary widget that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.</p>
+
+<p>To create a basic application:</p>
+
+<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set</span> before creating a window. It makes an application to use GPU.</p>
+
+<p>First, you should declare the global variable using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>, then create a GLView object and use <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE(glview)</span>. Now, you can call GL functions.</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;Elementary_GL_Helpers.h&gt;
+
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE()
+
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;
+&nbsp;&nbsp;&nbsp;unsigned int program;
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int vbo;
+} appdata_s;
+
+static Evas_Object *glview_create(Evas_Object *win);
+static void glview_start(Evas_Object *glview);
+
+// GLView callback functions
+static void draw_gl(Evas_Object *obj);
+static void init_gl(Evas_Object *obj);
+static void resize_gl(Evas_Object *obj);
+static void del_gl(Evas_Object *obj);
+
+static bool app_create(void *data) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;gl&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;GLView example&quot;, &quot;GLView example&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = ad-&gt;glview_create(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
+&nbsp;&nbsp;&nbsp;glview_start(ad-&gt;glview);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+
+<p>Add the OpenGL ES view to the application:</p>
+
+<pre class="prettyprint">
+// This is the GL initialization function
+static Evas_Object *glview_create(Evas_Object *win)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;
+
+&nbsp;&nbsp;&nbsp;// This creates the widget itself
+&nbsp;&nbsp;&nbsp;glview = elm_glview_add(win);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, glview);
+
+&nbsp;&nbsp;&nbsp;// Request a surface with Depth and Stencil support (default buffer sizes)
+&nbsp;&nbsp;&nbsp;elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH | ELM_GLVIEW_STENCIL);
+
+&nbsp;&nbsp;&nbsp;// Set the basic policies to handle the view transparently
+&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
+
+&nbsp;&nbsp;&nbsp;// Set the 4 main callbacks
+&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(glview, init_gl);
+&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(glview, del_gl);
+&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(glview, draw_gl);
+&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(glview, resize_gl);
+
+&nbsp;&nbsp;&nbsp;// Finally show this view
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(glview, 250, 250);
+&nbsp;&nbsp;&nbsp;evas_object_show(glview);
+
+&nbsp;&nbsp;&nbsp;return glview;
+}</pre>
+
+<h3>Setting up the Callbacks</h3>
+
+<p>To set up callbacks:</p>
+
+<ol>
+       <li>Callback for initialization
+       <p>The initialization callback will be called when the GLView is created, after a valid openGL ES context and surface are created. Initialization, resizing, drawing, and deleting callback are called in the main loop.</p>
+
+       <pre class="prettyprint">
+// GL Init function
+static void init_gl(Evas_Object *glview)
+{
+&nbsp;&nbsp;&nbsp;glClearColor(0, 0, 0, 0);
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
+
+&nbsp;&nbsp;&nbsp;// Do any form of OpenGL ES initialization here
+&nbsp;&nbsp;&nbsp;// init_shaders();
+&nbsp;&nbsp;&nbsp;// init_vertices();
+}</pre>
+       </li>
+       <li>Callback for resizing
+       <p>The resize callback is called whenever the GLView widget is resized. A common action to take here is to reset the viewport.</p>
+
+       <pre class="prettyprint">
+// GLView resize function
+static void resize_gl(Evas_Object *glview)
+{
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(glview, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+}</pre>
+       </li>
+       <li>Callback for drawing
+       <p>The drawing callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy.</p>
+
+       <pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
+
+       <p>Another policy is ELM_GLVIEW_POLICY_ALWAYS, which requests render always even when it is not visible. So on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created.</p>
+
+       <pre class="prettyprint">
+// GL draw callback
+static void draw_gl(Evas_Object *glview)
+{
+&nbsp;&nbsp;&nbsp;// Paint it blue
+&nbsp;&nbsp;&nbsp;glClearColor(0.2, 0.2, 0.6, 1.0);
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
+
+&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here
+&nbsp;&nbsp;&nbsp;// draw_scene();
+}</pre>
+       </li>
+       <li>Callback for deleting
+       <p>The delete callback is triggered when the GLView is being destroyed, from the main loop, and no other callback can be called on the same object afterwards.</p>
+
+       <pre class="prettyprint">
+// Delete GLView callback
+static void del_gl(Evas_Object *glview)
+{
+&nbsp;&nbsp;&nbsp;// Destroy all the OpenGL ES resources here
+&nbsp;&nbsp;&nbsp;// destroy_shaders();
+&nbsp;&nbsp;&nbsp;// destroy_objects();
+}</pre>
+       </li>
+       <li>Add an animator.
+       <p>The application above is technically working but the scene does not get updated unless the frame is marked as dirty. Game applications might need to use an animator to obtain continuous update of the scenes. Here is an example for a default update refresh rate:</p>
+
+       <pre class="prettyprint">
+static Eina_Bool anim_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *glview = data;
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(glview);
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+static void glview_start(Evas_Object *glview)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_add(anim_cb, glview);
+}</pre>
+
+       <p>Any other event can be used to refresh the view, for example user input if the view need to be updated.</p>
+       </li>
+</ol>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Since the Evas rendering engine uses its own GL context internally, the application has to call the gl functions inside the 4 GLView callback functions (initialization, resizing, drawing, deleting) to be guaranteed rendering correctness.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+
+<p>While GLView is an abstraction above EvasGL, it is possible to use EvasGL directly for more low-level and advanced features, such as:</p>
+
+<ul>
+       <li>Creating new contexts</li>
+       <li>Creating new surfaces</li>
+       <li>Creating PBuffer surfaces</li>
+       <li>Calling extensions</li>
+</ul>
+
+<p>For all those reasons, a direct access to the EvasGL object is required. When you use GLView, you can use the following code:</p>
+
+<pre class="prettyprint">
+Evas_GL *evgl = elm_glview_evas_gl_get(glview);
+// Then it is possible to call any evas_gl function with it, for example:
+Evas_GL_Context *ctx = evas_gl_current_context_get(evgl);
+Evas_GL_Surface *pbuf = evas_gl_pbuffer_surface_create(evgl, cfg, w, h, NULL);</pre>
+
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Do not destroy the EvasGL object. Its life-cycle is defined by the GLView object.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2 id="evasgl" name="evasgl">EvasGL Programming Guide</h2>
+
+<p>This guide assumes that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>
+
+<h3>Declaration of EvasGL Objects</h3>
+
+<p>This is how to define the application data structure to hold all the objects for your EvasGL application:</p>
+
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *img</span>: OpenGL ES canvas.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL *evasgl</span>: EvasGL Object for rendering gl in Evas.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_API *glapi</span>: EvasGL API object that contains the GL APIs to be used in Evas GL.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Context *ctx</span>: EvasGL Context object, a GL rendering context in Evas GL.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface *sfc</span>: EvasGL Surface object, a GL rendering target in Evas GL.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Config *cfg</span>: EvasGL Surface configuration object for surface creation.</li>
+</ul>
+
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *img;
+
+&nbsp;&nbsp;&nbsp;Evas_GL *evasgl;
+&nbsp;&nbsp;&nbsp;Evas_GL_API *glapi;
+&nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx;
+&nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc;
+&nbsp;&nbsp;&nbsp;Evas_GL_Config *cfg;
+
+&nbsp;&nbsp;&nbsp;unsigned int program;
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int vbo;
+} appdata_s;</pre>
+
+<h3>Creating EvasGL</h3>
+
+<p>We can create our EvasGL handler using <span style="font-family: Courier New,Courier,monospace">evas_gl_new(Evas * e)</span>. This initializer takes the Evas canvas that OpenGL ES is to be used on as a parameter. When developing an application with Elementary, we can use the canvas of our window:</p>
+
+<pre class="prettyprint">
+ad-&gt;win = elm_win_util_standard_add(&quot;Evas_GL Example&quot;, &quot;Evas_GL Example&quot;);
+ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));</pre>
+
+<p>To free the memory allocated to this handler, use <span style="font-family: Courier New,Courier,monospace">evas_gl_free(Evas_GL *evas_gl)</span>.</p>
+
+<h3>Getting OpenGL ES APIs</h3>
+
+<p>You can get the API for rendering OpenGL ES with <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get(Evas_GL *evas_gl_)</span>. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
+
+<pre class="prettyprint">
+ad-&gt;glapi = evas_gl_api_get(ad-&gt;evasgl);</pre>
+
+<h3>Creating a Surface</h3>
+
+<p>We must allocate a new config object to fill it out using <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span>. As long as Evas creates a config object for the user, it takes care of the backward compatibility issue. Once we have our config object, we can specify the surface settings:</p>
+
+<pre class="prettyprint">
+appdata_s *ad;
+ad-&gt;cfg = evas_gl_config_new();
+ad-&gt;cfg-&gt;color_format = EVAS_GL_RGBA_8888; // Surface Color Format
+ad-&gt;cfg-&gt;depth_bits = EVAS_GL_DEPTH_BIT_24; // Surface Depth Format
+ad-&gt;cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE; // Surface Stencil Format
+ad-&gt;cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE; // Configuration options (here, no extra options)</pre>
+
+<p>Once we have configured the surface behavior, we must initialize the surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create(Evas_GL* evas_gl, Evas_GL_Config * cfg, int w, int h)</span>. This function takes the given Evas_GL object as the first parameter and the pixel format, and configuration of the rendering surface as the second parameter. The last two parameters are the width and height of the surface, which we recover directly from the window.</p>
+
+<pre class="prettyprint">
+Evas_Coord w, h;
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;w, &amp;h);
+ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);</pre>
+
+<p>To manually delete a GL surface, use <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy(Evas_GL *evas_gl, Evas_GL_Surface *surf)</span>.</p>
+
+<h3>Creating Context</h3>
+
+<p>Here, we create a context for Evas_GL using <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create(Evas_GL * evas_gl, Evas_GL_Context * share_ctx)</span>. You can merge the context with a higher context definition you must pass as a second parameter.</p>
+
+<pre class="prettyprint">
+ad-&gt;ctx = evas_gl_context_create(ad-&gt;evasgl, NULL);</pre>
+
+<p>To delete the context later, use <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy(Evas_GL *evas_gl, Evas_GL_Context *ctx)</span>. To delete the entire configuration object, use <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free(Evas_GL_Config *cfg)</span> instead.</p>
+
+<h3>Callbacks</h3>
+
+<p>Now that we have configured the EvasGL environment, we declare a widget in which all the OpenGL ES transformation takes place. In the example below, we selected the image widget because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>
+
+<pre class="prettyprint">
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));</pre>
+
+<p>We define the &quot;OpenGL ES main loop&quot; function that is called every time the program attempts to have pixels from the image. We 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);</pre>
+
+<p>To define a function that takes care of the drawing using EvasGL (called the OpenGL ES main loop), use:</p>
+
+<pre class="prettyprint">
+static void
+img_pixels_get_cb(void *data, Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_GL_API *gl = ad-&gt;glapi;
+
+&nbsp;&nbsp;&nbsp;// Rendering process
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
+&nbsp;&nbsp;&nbsp;// Paint it blue
+&nbsp;&nbsp;&nbsp;gl-&gt;glClearColor(0.2, 0.2, 0.6, 1.0);
+&nbsp;&nbsp;&nbsp;gl-&gt;glClear(GL_COLOR_BUFFER_BIT);
+&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here
+&nbsp;&nbsp;&nbsp;// draw_scene();
+}</pre>
+
+<p>At every tick, we must set the given context as a current context for the given surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_make_current(Evas_GL *evas_gl, Evas_GL_Surface *surf, Evas_GL_Context *ctx)</span>.</p>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to define the OpenGL ES main loop. To do so, 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>
+
+<pre class="prettyprint">
+static Eina_Bool
+animate_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *img = data;
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(img, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+ecore_animator_add(animate_cb, ad-&gt;img);</pre>
+
+<p>You can define several other callbacks that have an impact on the drawing depending on the mouse, resize, and deletion events.</p>
+
+<pre class="prettyprint">
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_DEL, img_del_cb, ad);
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);</pre>
+
+<h3>Setting a Surface into the Image Object</h3>
+
+<p>We can also 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, use the following code.</p>
+
+<pre class="prettyprint">
+Evas_Native_Surface ns;
+evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);</pre>
+
+         
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/tbm_n.htm b/org.tizen.guides/html/native/graphics/tbm_n.htm
new file mode 100644 (file)
index 0000000..181a802
--- /dev/null
+++ b/org.tizen.guides/html/native/graphics/tbm_n.htm
@@ -0,0 +1,135 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>TBM Surface</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm">TBM Surface Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+<h1>TBM Surface</h1>
+ 
+ <p>The Tizen Buffer Manager (TBM) surface provides functions for the graphic buffer in Tizen. It provides the abstraction interface for the graphic buffer and the 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>
+<ul>
+       <li>Creating a surface with defined width, height, and format</li>
+       <li>Getting a format list</li>
+       <li>Accessing the surface</li>
+       <li>Getting surface and plane information</li>
+</ul>
+
+<p>The TBM surface provides various format typedefs. However, check that the system supports the graphic format in question.</p>
+
+<p>Get surface and plane information using the <span style="font-family: Courier New,Courier,monospace">tbm_surface_map()</span> or the <span style="font-family: Courier New,Courier,monospace">tbm_surface_get_info()</span> function. The information of surface is assigned in the struct of <span style="font-family: Courier New,Courier,monospace">tbm_surface_info_s</span>.</p>
+
+<p>Get a plane pointer in the surface and store data in the low level graphic buffer using the pointer of each plane.</p>
+
+<table> 
+   <caption>
+     Table: Surface information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Information</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">width</span></td> 
+     <td>Surface width</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">height</span></td> 
+     <td>Surface height</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">bpp</span></td> 
+     <td>Surface BPP</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">size</span></td> 
+     <td>Surface size</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">num_planes</span></td> 
+     <td>Number of planes</td> 
+    </tr> 
+       </tbody> 
+  </table>
+
+<table> 
+   <caption>
+     Table: Plane information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Information</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">size</span></td> 
+     <td>Plane size</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">offset</span></td> 
+     <td>Plane offset</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">stride</span></td> 
+     <td>Plane stride</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">ptr</span></td> 
+     <td>Plane pointer</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/guides_n.htm b/org.tizen.guides/html/native/guides_n.htm
new file mode 100644 (file)
index 0000000..fd188bb
--- /dev/null
+++ b/org.tizen.guides/html/native/guides_n.htm
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.tutorials/html/native/tutorials_n.htm">Tizen Native Tutorials</a></li> 
+                       <li><a href="../../../org.tizen.native.mobile.apireference/index.html">Native API Reference</a></li>
+               </ul>
+       </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">Native Guides</font></h1>
+
+<p>Tizen native guides introduce the various native features that you can use in creating Tizen applications.</p>
+
+<p>Select the API domain you are interested in and see what Tizen offers for your application:</p>
+
+<ul>
+       <li><a href="app/app_guide_n.htm">Application Framework</a>
+       <p>Enables you to configure application properties, and manage application data, and runtime environment and behavior.</p></li>
+       <li><a href="base/base_guide_n.htm">Base</a>
+       <p>Enables you to localize your application.</p></li>
+       <li><a href="content/content_guide_n.htm">Content</a>
+       <p>Enables you to manage and store a variety of data types, input and output data, and device content.</p></li>
+       <li><a href="context/context_guide_n.htm">Context</a>
+       <p>Enables you to recognize actions and gestures.</p></li>
+       <li><a href="graphics/graphics_guide_n.htm">Graphics</a>
+       <p>Enables you to create and edit various kinds of images, shapes, text, and elements, and recognize specific elements from images and video.</p></li>
+       <li><a href="location/location_guide_n.htm">Location</a>
+       <p>Enables you manage location data.</p></li>
+       <li><a href="messaging/messaging_guide_n.htm">Messaging</a>
+       <p>Enables you to send and receive various types of messages.</p></li>
+       <li><a href="multimedia/multimedia_guide_n.htm">Multimedia</a>
+       <p>Enables you to capture and play various media, download Internet content, and access media streams.</p></li>
+       <li><a href="network/network_guide_n.htm">Network</a>
+       <p>Enables you to send data to networks and other applications, and receive data back from them.</p></li>
+       <li><a href="security/security_guide_n.htm">Security</a>
+       <p>Enables you to increase the security of your application through cryptography, encryption, and request control.</p></li>
+       <li><a href="social/social_guide_n.htm">Social</a>
+       <p>Enables you to manage the user&#39;s personal data, such as contacts, calendars, and accounts.</p></li>
+       <li><a href="system/system_guide_n.htm">System</a>
+       <p>Enables you to handle log messages, device and system information, and manage system settings, sensors, and system storage.</p></li>
+       <li><a href="telephony/telephony_guide_n.htm">Telephony</a>
+       <p>Enables you handle call, SIM, network, and modem information.</p></li>
+       <li><a href="ui/ui_guide_n.htm">UI</a>
+       <p>Enables you to create a visual outlook for your application to ensure the best possible user experience.</p></li>
+       <li><a href="uix/uix_guide_n.htm">UIX</a>
+       <p>Enables you to handle UI extensions, which include managing sound data, such as voice commands, speech-to-text (STT), and text-to-speech (TTS).</p></li>
+       <li><a href="web/web_guide_n.htm">Web</a>
+       <p>Enables you to access Web content.</p></li>
+</ul>
+
+<p>For information about features not implemented by a specific API:</p>
+<ul>   
+       <li><a href="porting/porting_n.htm">Porting</a>
+       <p>Enables you to port your current 2.2.1 native API-based applications to the new 2.3 native API.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/location/location_guide_n.htm b/org.tizen.guides/html/native/location/location_guide_n.htm
new file mode 100644 (file)
index 0000000..020b601
--- /dev/null
+++ b/org.tizen.guides/html/native/location/location_guide_n.htm
@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                               <li><a href="#manager">Location Manager</a></li>
+                               <li><a href="#criteria">Location Criteria</a></li>
+                               <li><a href="#privacy">Privacy Policy</a></li>
+                               <li><a href="#settings">Location Settings</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Location</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 speed and course of direction of the user. Location data features include managing location information on the device.</p>
+
+  <p> </p> 
+  <p>The main location features are:</p> 
+  <ul> 
+       <li><a href="#manager">Enabling the Location Manager</a></li> 
+   <li><a href="#criteria">Defining the location criteria</a></li> 
+   <li><a href="#privacy">Setting the privacy policy</a></li>
+   <li><a href="#settings">Defining the location settings</a></li>
+  </ul> 
+ 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <h2 id="manager" name="manager">Location Manager</h2> 
+  <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a> API is used to retrieve the best-effort current location and use the location-based services specified in the <a href="#criteria">location service quality criteria</a>.</p> 
+  <p>Using the <span style="font-family: Courier New,Courier,monospace">LocationProvider</span> class allows your application to: </p> 
+  <ul> 
+   <li>Get the current location</li> 
+   <li>Get the last known location</li> 
+   <li>Get location updates</li>  
+  </ul> 
+  <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 update states as follows:</p> 
+  <ul> 
+   <li><p>If the Location Manager is working correctly, the location update state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_ACCESS_STATE_ALLOWED(LOCATIONS_ERROR_NONE)</span>. 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 <span style="font-family: Courier New,Courier,monospace">LOCATIONS_ACCESS_STATE_NONE (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</span>. If this situation persists for a longer period, it is recommended to cancel the request 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 <span style="font-family: Courier New,Courier,monospace">LOCATIONS_ACCESS_STATE_DENIED</span>, 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="criteria" name="criteria">Location Criteria</h2> 
+  <p>The location criteria is used for specifying 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 <span style="font-family: Courier New,Courier,monospace">location_accuracy_level_e</span> structure allows your application to specify the following levels of location accuracy:</p> 
+  <ul> 
+   <li>Finest (detailed) accuracy level</li> 
+   <li>Accuracy up to street</li> 
+   <li>Accuracy up to postal</li> 
+   <li>Accuracy up to local</li> 
+   <li>Accuracy up to region</li> 
+   <li>Accuracy up to country</li> 
+  </ul> 
+  
+  <p>Using the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> structure allows your application to specify the following methods of location positioning system:</p>
+  
+    <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 criteria, the Location Manager provides best-effort location-based services, such as an asynchronous location update or region monitoring notification.</p> 
+  
+ 
+<h2 id="privacy" name="privacy">Privacy Policy</h2> 
+  <p>Tizen provides several privacy ensuring mechanisms for user location data:</p> 
+  <ul> 
+   <li>Manual settings in the <a href="#settings">device location settings</a> <p>The settings can only be manually modified by the user with application-level access control. </p></li> 
+   <li>Location indicator on the screen <p>When the application uses the current location of the user, a location indicator is shown at the top of the screen to explicitly notify the user that the current location data is being used.</p> </li> 
+  </ul> 
+  <p class="figure">Figure: Location setting and indicator</p> 
+  <p style="text-align:center;"><img alt="Location setting 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>  
+  
+<h2 id="settings" name="settings">Location Settings</h2> 
+  <p>Tizen provides the user a robust way of controlling the usage of their location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies and controlling application permissions.</p> 
+  <p class="figure">Figure: Location settings</p> 
+  <p style="text-align:center;"><img alt="Location settings" src="../../images/loc_priv_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p> The <strong>GPS</strong> setting controls the Global Positioning System usage. It takes GPS satellite signals and provides accurate positioning services generally outdoors. The <strong>Network position</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>To ensure privacy, all location settings are initially disabled. To enable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Either the <strong>GPS</strong> or the <strong>Network position</strong> setting must be enabled to retrieve the current location of the device user.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p> Once the <strong>GPS</strong> or <strong>Network position</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 use the following positioning and location-based services:</p> 
+  <ul> 
+   <li>Getting the current and last known location of the user</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/email_n.htm b/org.tizen.guides/html/native/messaging/email_n.htm
new file mode 100644 (file)
index 0000000..e758683
--- /dev/null
+++ b/org.tizen.guides/html/native/messaging/email_n.htm
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Email</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm">Email Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+       
+       <h1>Email</h1>
+<p>Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.</p>
+
+  
+<p>Email provides features for composing, saving, and sending email messages using an SMTP (SMTP used for sending emails through the Internet is described in the RFC5321/5322 standards). It provides services to applications that make use of the email service.</p>
+
+<p>The Email API can be utilized by any component in the application layer which facilitates the end user to perform email messaging. For example, the Email APIs can be invoked by a multimedia module when the user wants to send a media file through email, or by an email application when the user tries to send an email message.</p>
+  
+     <p class="figure">Figure: Email service architecture</p> 
+  <p style="text-align:center;"><img alt="Email service architecture" src="../../images/email_architecture.png" /></p>   
+  
+
+<p>The main features of the Email API include:</p>
+
+<ul><li>Preparing email messages: set the subject, body, and recipients of the message, and the file path for any attachments.</li>
+<li>Sending email messages.</li>
+<li>Registering a callback function to be notified of the message status.</li></ul>
+ 
+<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 a message sending is not a failure if a spooling mechanism exists. Use the callback function to receive the status when the message has been sent.</p>
+<p>Note that once the <span style="font-family: Courier New,Courier,monospace">email_send_message()</span> 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>
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/messages_n.htm b/org.tizen.guides/html/native/messaging/messages_n.htm
new file mode 100644 (file)
index 0000000..9d53b46
--- /dev/null
+++ b/org.tizen.guides/html/native/messaging/messages_n.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Messages</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">Messages Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Messages</h1>
+       
+       <p>Tizen provides you with access to the device messaging capabilities, including sending SMS and MMS messages.</p>
+
+<p>The main messaging features include:</p>
+<ul><li>Text messaging (SMS)
+<p>You can <a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">create a message, send it, and receive the sent status</a>. You can also receive incoming messages, and search for messages within a message list. </p></li>
+<li>Multimedia messaging (MMS)
+<p>You can <a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">create and send MMS messages</a>. An image, audio, video, vCard, vCalendar, or a combination of them is supported as an attachment type in MMS messages. An image or audio attachment cannot be combined with video attachments.</p></li>
+<li>Messaging notifications
+<p>You can register and unregister callback functions to be notified when an outgoing message is successfully sent or an incoming message has been received.</p></li></ul>
+
+<p>The sent status of SMS and MMS can be checked asynchronously. You receive a separate status report for each SMS recipient, and one status report regardless of the number of MMS recipients.</p> 
+       
+       
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
new file mode 100644 (file)
index 0000000..bec9e62
--- /dev/null
+++ b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Messaging</h1>
+  <p>Messaging features include access to the device messaging capabilities.</p>
+
+  <p>The main messaging features are:</p>
+  <ul>
+       <li><a href="messages_n.htm">Messages</a> <p>Provides you with access to the device text and multimedia messaging capabilities.</p></li>
+       <li><a href="email_n.htm">Email</a><p>Allows you to create and send emails.</p></li>
+       <li><a href="push_n.htm">Push</a><p>Allows you to push events from an application server to your application on a Tizen 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/push_n.htm b/org.tizen.guides/html/native/messaging/push_n.htm
new file mode 100644 (file)
index 0000000..ac0e4d4
--- /dev/null
+++ b/org.tizen.guides/html/native/messaging/push_n.htm
@@ -0,0 +1,143 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Push</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+               
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm">Push Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<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 class="figure">Figure: Push messaging service</p> 
+  <p style="text-align:center;"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p> 
+  <p>Once your application is successfully registered in the push server through the push 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 daemon 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 <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the daemon forcibly launches the application and hands over the message to the application as an <a href="../app/application_n.htm#app_controls">app control</a>.</p>
+
+<p>To use the push messaging service, the application needs the permission to access Tizen push server. Request the permission from the Tizen push service team by email (<a href="mailto:push.tizen@samsung.com">push.tizen@samsung.com</a>), including the information listed in the following table. When the team approves your request, you receive a push app ID corresponding to your package ID.</p>
+
+<table>
+<caption>Table: Request form details</caption>
+   <colgroup> 
+    <col width="25%" /> 
+    <col width="75%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th colspan="2">Developer information</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Email address</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Your email address to receive the approval response.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Last name</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Your last name.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>First name</p></td> 
+     <td rowspan="1" colspan="1"> <p>Your first name.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Country</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Your country of residence.</p> </td> 
+       </tr>
+    <tr> 
+     <th colspan="2">Application information</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Package ID </p> </td> 
+     <td rowspan="1" colspan="1"> <p> The ID of the application package that uses the push messaging service. The package ID can be obtained from the <span style="font-family: Courier New,Courier,monospace">.xml</span> file in the Tizen SDK.  </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Application name </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Name of the application that uses the push service. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Testing purpose </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes or no. If you request the service for testing purposes only, the duration of the push service is limited to 3 weeks. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Purpose of the push notification usage </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Description of how you plan to use the push service, including the situations in which you want to use it. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> App launch date </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Application launch date in the YYYY/MM/DD format.<br />For example: 2012/08/01. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Service area / country </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Service area (such as Asia, Africa, America, or Europe) or the country where the application is used. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Daily push requests </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Estimated total number of daily notifications. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Transactions per second </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Estimated peak number of transactions per second (the recommendation is below 100). </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+  <h2 id="service" name="service">Service Architecture</h2> 
+  <p>The following figure illustrates the service architecture of the Tizen push messaging service.</p> 
+  <p class="figure">Figure: Service architecture</p> 
+  <p style="text-align:center;"><img alt="Service architecture" src="../../images/service_architecture.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>The device establishes a push session with the Tizen Server. <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 succeeds, the application receives a registration ID, which is a unique key for identifying the device and routing the push message. <p>The application delivers the identifier to the application server.</p></li> 
+   <li>When the application server needs to send a push message to the application, it calls the Tizen server&#39;s open API. <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>The Tizen Server routes the push message to the target device with a given registration ID.</li> 
+   <li>The application receives the push message.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/audio_io_n.htm b/org.tizen.guides/html/native/multimedia/audio_io_n.htm
new file mode 100644 (file)
index 0000000..1fd6f6f
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/audio_io_n.htm
@@ -0,0 +1,154 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 I/O</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#record_pcm">Recording Uncompressed Audio</a></li>
+                       <li><a href="#play_pcm">Playing Uncompressed Audio</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm">Audio I/O Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Audio I/O API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Audio I/O</h1>
+
+ <p>Audio I/O enables your application to manage various media handles.</p> 
+  <p>The main features of the Audio I/O API include:</p> 
+  <ul> 
+       <li><a href="#record_pcm">Recording uncompressed audio</a>
+       <p>Enables you to capture uncompressed PCM data from audio device.</p></li>  
+   <li><a href="#play_pcm">Playing uncompressed audio</a>
+       <p>Enables you to create a multimedia application to play uncompressed PCM data.</p></li>  
+  </ul> 
+  
+<h2 id="record_pcm" name="record_pcm">Recording Uncompressed Audio</h2>
+<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">Audio Input</a> API enables your application to record such data from a microphone type input device.</p> 
+  <p>Audio data is captured periodically, so to receive the audio PCM data from the input device, you must implement the audio input interface to notify the application of audio data events, such as the end of filling audio data.</p> 
+  <p>Before recording audio, you must define the following PCM data settings:</p> 
+  <ul> 
+   <li>Input device type: 
+    <ul class="indent"> 
+     <li>Microphone</li> 
+    </ul> </li> 
+   <li>Audio channels: 
+    <ul class="indent"> 
+     <li>Mono (1 channel)</li> 
+     <li>Stereo (2 channels)</li> 
+    </ul> </li> 
+   <li>Audio sample type: 
+    <ul class="indent"> 
+     <li>Unsigned 8-bit PCM</li> 
+     <li>Signed 16-bit little endian PCM</li> 
+    </ul> </li> 
+   <li>Audio sample rate: 
+   <ul class="indent"> 
+    <li>8000 ~ 48000 Hz</li> 
+   </ul></li> 
+  </ul> 
+  <p>To minimize the overhead of the audio input API, use the optimal channel type, sample type and sampling rate, which can be retrieved using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span>, <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> and <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_rate()</span> functions, respectively.</p> 
+
+  <p>The following figures illustrate the general audio input states, and how the state changes when the audio input is interrupted by the system.</p> 
+  <p class="figure">Figure: Audio input states</p> 
+  <p style="text-align:center;"><img src="../../images/audio_input.png" alt="Audio input states" /></p> 
+  <p class="figure">Figure: Audio input states when interrupted by system</p> 
+  <p style="text-align:center;"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>
+  
+  <h2 id="play_pcm" name="play_pcm">Playing Uncompressed Audio</h2>
+<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">Audio Output</a> API enables your application to play such data using output devices.</p> 
+  <p>To play the audio PCM data, the application must call the <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> function to initialize the audio output handle.</p> 
+  <p>Before playing audio, your application must define the following PCM data settings:</p> 
+  <ul> 
+   <li>Audio channels: 
+    <ul class="indent"> 
+     <li>Mono (1 channel)</li> 
+     <li>Stereo (2 channels)</li> 
+    </ul> </li> 
+   <li>Audio sample type: 
+    <ul class="indent"> 
+     <li>Unsigned 8-bit PCM</li> 
+     <li>Signed 16-bit little endian PCM</li> 
+    </ul> </li> 
+   <li>Audio sample rate: 
+   <ul class="indent"> 
+    <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 class="figure">Figure: Audio output states</p> 
+  <p style="text-align:center;"><img src="../../images/audio_output.png" alt="Audio output states" /></p> 
+  <p class="figure">Figure: Audio output states when interrupted by system</p> 
+  <p style="text-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> 
+   <li>Do not use multiple instances of the <span style="font-family: Courier New,Courier,monospace">Audio_Out</span> excessively. 
+   <p>Using excessive multiple instances of the <span style="font-family: Courier New,Courier,monospace">Audio_Out</span> has a negative effect on the application, because the audio data processing for re-sampling and mixing imposes a heavy burden on the system. </p> </li>
+   <li>Use device-preferred PCM format.
+   <ul> 
+    <li><p>To reduce the processing overhead, use the target device-preferred PCM format (for example, use 16-bit little endian, 44.1 kHz, stereo for Wave and Wave M).</p></li> 
+    <li><p>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.</p></li> 
+   </ul> </li> 
+   <li>Do not call the <span style="font-family: Courier New,Courier,monospace">Audio_Out</span> functions too frequently. 
+   <ul> 
+    <li><p>The <span style="font-family: Courier New,Courier,monospace">Audio_Out</span> functions require more processing time in the order of write &gt; prepare &gt; reset &gt; unprepare &gt; start &gt; stop. Therefore, keep the frequency of calling these functions to a minimum.</p></li> 
+   </ul> </li>
+   <li>Reduce event delay and remove glitches.
+   <ul> 
+    <li><p>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.</p></li> 
+    <li><p>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.</p></li> 
+   </ul> </li> 
+   <li>Use double-buffering.
+   <ul> 
+    <li><p>Use the double buffering mechanism to reduce latency. The mechanism works by first writing data twice before starting. After starting, whenever the listener (event) is called, you can write additional data.</p></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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/camera_n.htm b/org.tizen.guides/html/native/multimedia/camera_n.htm
new file mode 100644 (file)
index 0000000..58d51d1
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/camera_n.htm
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Camera</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm">Camera Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<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 class="figure">Figure: Camera image examples</p> 
+  <p style="text-align:center;"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>
+ 
+  <p>The main features of the Camera API include:</p> 
+  <ul> 
+   <li>Preview images in real time 
+    <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>Rotate and flip the preview</li> 
+    </ul> </li> 
+   <li>Capture and save images</li> 
+   <li>Control the following camera settings: 
+    <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> </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 <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span>, <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_format()</span>, or other <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_xxx()</span> functions.</p>  
+  
+  <p>Since devices can have multiple camera sensors with different capabilities, create a <span style="font-family: Courier New,Courier,monospace">Camera</span> with a proper <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> 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> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <p>The following figure illustrates the camera state changes in the normal mode:</p> 
+  <p class="figure">Figure: Camera states in the normal mode</p> 
+  <p style="text-align:center;"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p> 
+  
+  <p>To display the camera preview, use the <span style="font-family: Courier New,Courier,monospace">StartPreview()</span> 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/image_util_n.htm b/org.tizen.guides/html/native/multimedia/image_util_n.htm
new file mode 100644 (file)
index 0000000..2dc49e3
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/image_util_n.htm
@@ -0,0 +1,227 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Util</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm">Image Util Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Image Util</h1>
+
+<p>Tizen offers the following image processing features:</p>
+ 
+ <ul>
+ <li>Conversion
+ <p>You can change the colorspace format. The following tables define the supported formats.</p>
+
+   <table> 
+   <caption>
+     Table: RGB pixel formats 
+   </caption> 
+   <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> 
+ 
+    <table> 
+   <caption>
+     Table: Packed YUV formats 
+   </caption> 
+   <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>
+   </tbody> 
+  </table>                     
+
+    <table> 
+   <caption>
+     Table: Planar YUV formats 
+   </caption> 
+   <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>
+     <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> 
+ </li>
+ <li>Resizing
+<p>You can change the image resolution.</p></li>
+<li>Rotation
+<p>You can change the image angle around the x or y axis.</p></li>
+<li>Crop
+<p>You can remove the outer parts of an image or change the aspect ratio.</p></li></ul>
+
+ 
+<p>You can decode and encode images 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: 
+<ul><li>Only JPEG is supported when using image util</li></ul></li>
+<li>Output image formats for encoding: 
+<ul><li>JPEG</li>
+<li>Quality vs. size
+
+    <table> 
+   <caption>
+     Table: Quality and size comparison
+   </caption> 
+   <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> 
+         <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> 
+         <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> 
+         <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> 
+         <td></td>
+    </tr>      
+   </tbody> 
+  </table>     
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
new file mode 100644 (file)
index 0000000..7851a04
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Codec</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm">Media Codec Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Codec</h1>
+
+<p>Media codec provides interfaces for encoding and decoding audio and video data.</p> 
+
+<p>To use codecs:</p>  
+  
+<ol><li><p>Create a handle for the codec instance with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_create()</span> function. After a successful handle creation, your system can use the codec. </p></li>
+
+<li><p>Set the codec configuration with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_codec()</span>, and <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_vdec_info()</span> or <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_venc_info()</span> functions. </p>
+<p>You can also prepare for the available ready state with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_prepare()</span> function.</p></li>
+
+<li><p>Decode and encode with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace;">mediacodec_get_output()</span> functions.</p></li></ol>
+
+<p>A single <span style="font-family: Courier New,Courier,monospace;">MediaCodec</span> 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>The following figures illustrate the general media state changes.</p> 
+  <p class="figure">Figure: Media state changes</p> 
+  <p style="text-align:center;"><img src="../../images/codec_state.png" alt="Media state changes" /></p> 
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/media_tools_n.htm b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
new file mode 100644 (file)
index 0000000..e5d0153
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
@@ -0,0 +1,164 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Tool</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm">Media Tool Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Tool</h1>
+
+ <p>Media tool enables your application to manage various media handles.</p> 
+  <p>The main features of the Media Tool API include:</p> 
+  <ul> 
+   <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_format</span> handle to specify video or audio information.</p>
+   <p>You can set and get video or audio information using the <span style="font-family: Courier New,Courier,monospace;">media_format</span> handle. </p></li>   
+   <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_packet</span> handle to include metadata (such as pts, dts, and duration) and allocate a buffer to the heap or TBM surface.</p>
+   <p>You can set and get the metadata using the <span style="font-family: Courier New,Courier,monospace;">media_packet</span> handle. </p>
+   </li>   
+  </ul> 
+  
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle is created by the caller, who can set and get the video or audio information. The <span style="font-family: Courier New,Courier,monospace;">media_format</span> handle creates the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle and allocates the buffer. The caller can set and get the metadata with the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle.</p>
+
+<p>The following table describes the reference count design of the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle.</p>
+
+<table border="1"> 
+   <caption>
+     Table: Media format handle reference count design
+   </caption> 
+   <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><span style="font-family: Courier New,Courier,monospace;">media_format_h fmt1, fmt2, tmp;</span><br/>
+<span style="font-family: Courier New,Courier,monospace;">media_packet_h pkt1, pkt2;</span><br/>
+<span style="font-family: Courier New,Courier,monospace;">media_format_create(&amp;fmt1);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
+        <td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.
+        <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle.</p></td>
+    </tr>
+<tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_create(&amp;pkt1, fmt1);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
+        <td>After the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function, you must use the <span style="font-family: Courier New,Courier,monospace;">media_format_unref()</span> function.</td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt1);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
+        <td>If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is currently owned by the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> only.</td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_copy(pkt1, &amp;pkt2);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
+        <td>Copy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> metadata to <span style="font-family: Courier New,Courier,monospace;">pkt2</span>, except the allocated buffer and buffer size. <span style="font-family: Courier New,Courier,monospace;">pkt2</span> refers to <span style="font-family: Courier New,Courier,monospace;">fmt1</span>, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased.</td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &amp;tmp);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
+        <td>If you try to call the <span style="font-family: Courier New,Courier,monospace;">set_video_info</span> function for <span style="font-family: Courier New,Courier,monospace;">fmt1</span> (<span style="font-family: Courier New,Courier,monospace;">tmp</span>), <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is bigger than 1, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> cannot be modified. To modify <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data, call the <span style="font-family: Courier New,Courier,monospace;">media_format_make_writable()</span> function.</td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_info(tmp, ...);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
+        <td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.
+        <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle.</p></td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_make_writable(tmp, &amp;fmt2);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
+        <td>If called, the <span style="font-family: Courier New,Courier,monospace;">tmp</span> (<span style="font-family: Courier New,Courier,monospace;">fmt1</span>) <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. Creates the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> handle and copies the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data to <span style="font-family: Courier New,Courier,monospace;">fmt2</span>.</td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_info(fmt2, ...);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
+        <td><span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, which means that you can modify the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> data.</td>
+    </tr>
+
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2
+        <br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>
+        <td>Set the modified <span style="font-family: Courier New,Courier,monospace;">fmt2</span> to the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle. You must call the <span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2)</span> function.</td>
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(tmp);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1
+        <br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>
+        <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &amp;tmp)</span> function call.</td>
+    </tr>      
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1<br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
+        <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_set_video(fmt2..)</span> function call.</td>
+    </tr>      
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt1);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1 &gt; finalize<br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
+        <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is freed.</td>
+    </tr>      
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt2);</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1  &gt; finalize<br/>
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 0 &gt; finalize</td>
+        <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt2</span> is freed.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
new file mode 100644 (file)
index 0000000..9ca82d2
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
@@ -0,0 +1,206 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Metadata Extractor</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm">Metadata Extractor Tutorials</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Metadata Extractor</h1>
+<p>Media files, such as mp3 and mp4 files, contain metadata. Metadata extractor enables you to extract metadata from the media files.</p>
+ 
+ <p class="figure">Figure: Getting metadata</p> 
+  <p style="text-align:center;"><img src="../../images/metadata.png" alt="Getting metadata" /></p>
+ 
+  <p>The metadata extractor can only be used with video and audio files only. It is not supported in the image files.</p>
+  <p>The following table lists the extractable metadata.</p>
+  
+  <table> 
+   <caption>
+     Table: Metadata extractor attributes 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DURATION</span></td> 
+     <td>Duration of the content</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_BITRATE</span></td> 
+     <td>Bitrate of the video content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_FPS</span></td> 
+     <td>FPS of the video content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_WIDTH</span></td> 
+     <td>Width of the video content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_HEIGHT</span></td> 
+     <td>Height of the video content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_VIDEO</span></td> 
+     <td>Whether the content has video stream</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITRATE</span></td> 
+     <td>Bitrate of the audio content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_CHANNELS</span></td> 
+     <td>Channel of the audio content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_SAMPLERATE</span></td> 
+     <td>Sample rate of the audio content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITPERSAMPLE</span></td> 
+     <td>Bit per sample of the audio content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_AUDIO</span></td> 
+     <td>Whether the content has audio stream</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ARTIST</span></td> 
+     <td>Artist of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_TITLE</span></td> 
+     <td>Title of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM</span></td> 
+     <td>Album of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM_ARTIST</span></td> 
+     <td>Album artist of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_GENRE</span></td> 
+     <td>Genre of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUTHOR</span></td> 
+     <td>Author of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_COPYRIGHT</span></td> 
+     <td>Copyright of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DATE</span></td> 
+     <td>Date of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DESCRIPTION</span></td> 
+     <td>Description of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_COMMENT</span></td> 
+     <td>Comment about the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_TRACK_NUM</span></td> 
+     <td>Track number of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_CLASSIFICATION</span></td> 
+     <td>Classification of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_RATING</span></td> 
+     <td>Rating of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_LONGITUDE</span></td> 
+     <td>Longitude of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_LATITUDE</span></td> 
+     <td>Latitude of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALTITUDE</span></td> 
+     <td>Altitude of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_CONDUCTOR</span></td> 
+     <td>Conductor of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_UNSYNCLYRICS</span></td> 
+     <td>Asynchronous lyrics of the content</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_SYNCLYRICS_NUM</span></td> 
+     <td>Synchronous lyrics of the content</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_RECDATE</span></td> 
+     <td>Recorded date of the content</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ROTATE</span></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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
new file mode 100644 (file)
index 0000000..57f389f
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Multimedia</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API</a></li>
+        </ul>
+    </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+<h1>Multimedia</h1>
+<p>Multimedia features capture and play or display still images, video, and sounds.</p> 
+  <p>The main multimedia features are:</p> 
+  <ul>
+       <li><a href="audio_io_n.htm">Audio I/O</a>
+       <p>Enables you to record and play uncompressed PCM audio data.</p></li>
+       <li><a href="camera_n.htm">Camera</a> 
+       <p>Enables you to launch the camera and control or adjust camera sensors of the device to preview or capture still images.</p></li>
+       <li><a href="image_util_n.htm">Image Util</a> 
+       <p>Enables you to view and process (decode, encode, convert, and compress) bitmap images in the <span style="font-family: Courier New,Courier,monospace">JPEG</span> format. </p></li>
+       <li><a href="media_codecs_n.htm">Media Codec</a> 
+       <p>Enables you to use codecs to encode and decode video and audio data.</p></li>        
+       <li><a href="media_tools_n.htm">Media Tool</a> 
+       <p>Enables you to use media tools to manage various media handles.</p></li>     
+       <li><a href="metadata_extractor_n.htm">Metadata Extractor</a> <p>Enables you to extract metadata from the media files.</p></li>
+       <li><a href="player_n.htm">Player</a>
+       <p>Enables you to play audio and manage the state of the media player.</p></li> 
+       <li><a href="radio_n.htm">Radio</a>
+       <p>Enables you to control the radio hardware on your system.</p></li>
+       <li><a href="recorder_n.htm">Recorder</a> 
+       <p>Enables you to record audio data to a file with compressed or uncompressed format and generate compressed video files with video data from camera and audio data from audio input device.</p></li>
+       <li><a href="tone_player_n.htm">Tone Player</a> 
+       <p>Enables you to play tones.</p></li>
+       <li><a href="video_util_n.htm">Video Util</a> 
+       <p>Enables you to use video transcoding features, such as multi-format codec and output format.</p></li>
+       <li><a href="wav_player_n.htm">WAV Player</a> 
+       <p>Enables you to play WAV files.</p></li>      
+       <li><a href="sound_manager_n.htm">Sound Manager</a> 
+       <p>Enables you to control the audio behavior of 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/player_n.htm b/org.tizen.guides/html/native/multimedia/player_n.htm
new file mode 100644 (file)
index 0000000..ed04a53
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/player_n.htm
@@ -0,0 +1,190 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Player</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li><a href="#audio">Handling Audio</a></li>
+                       <li><a href="#video">Handling Video</a></li>
+                       <li><a href="#features">Features</a></li>
+                       <li><a href="#stream">Streaming Playback</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API</a></li>
+        </ul>
+    </div></div>
+</div>
+<div id="container"><div id="contents"><div class="content">
+<h1>Player</h1>
+<p>You can play audio, video, and tones in your application.</p> 
+  <p>The main player features are:</p> 
+  <ul>
+    <li><a href="#audio">Handling audio</a> 
+       <p>Enables you to play audio and control the playback.</p></li>
+       <li><a href="#video">Handling video</a>
+       <p>Enables you to play video.</p></li>
+       <li><a href="#features">Using player features</a>
+       <p>Enables you control the player volume, sound mode, display, stream info, and audio effects.</p></li>
+       <li><a href="#stream">Streaming playback</a>
+       <p>Enables you to set specific URLs for streaming media playback.</p></li>      
+</ul>
+   
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a> API enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:</p>
+
+<ul><li>Operating general controls for the <a href="#audio">audio</a> or <a href="#video">video</a> content, such as play, pause, resume, and stop</li> 
+<li>Moving the audio or video content based on time</li>
+<li>Controlling the volume of the audio or video content based on each instance</li>
+<li>Looping the audio or video content</li>
+<li>Getting information of the audio or video content</li>
+<li>Playing multiple <a href="#stream">audio streams</a></li></ul>
+
+<p>The maximum count of a player instance is limited by the system and multimedia resources. The maximum count is a system-wide count and it can be applied depending on the CPU model, CPU speed, CPU core number, CPU load from other applications, and the available memory. Thus, the exact count can be smaller than the maximum count, in which case the prepare functions fail. A reasonable working player count is under 10.</p>
+<p>The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API.</p>
+<p>The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement this listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the <span style="font-family: Courier New,Courier,monospace;">player_completed_cb()</span> function is called. If an error occurs in the player engine, you are notified if you have registered the <span style="font-family: Courier New,Courier,monospace;">player_error_cb()</span> callback.</p>
+<p>If the player state is changed to <span style="font-family: Courier New,Courier,monospace;">ready</span>, the multimedia resource is available and you can get content information of the media. You can also get content information in a playing state in some cases of playback streaming.</p>
+
+ 
+  <h2 id="audio" name="audio">Handling Audio</h2> 
+  <p>Tizen enables your application to play audio and provides controlling functions for using audio resources. The resources can be media files stored on the device or they can be streamed from a streaming server (defined with a URI) through the network.</p> 
+  
+  <p>The audio formats your application can use include MP3, AAC, WMA, M4A, 3GA, WAV, and AMR. The available formats depend on the target device.</p>
+
+  
+  <p>The <span style="font-family: Courier New,Courier,monospace;">player_interrupted_cb()</span> function is called when an application is interrupted by another application. The player is paused or moved to an idle state according to the audio policy. You must check the state of the current instance and take appropriate action. If the player is changed to a paused state due to an interruption, the <span style="font-family: Courier New,Courier,monospace;">PLAYER_INTERRUPTED_COMPLETED</span> can be called at the end of the interruption. 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>Multiple instances of the player can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files at the same time.</p> 
+
+  <p>The following figure illustrates the general player state changes:</p> 
+  <p class="figure">Figure: Player state changes</p> 
+  <p><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 following figure illustrates what happens when the player gets interrupted by the system:</p> 
+  <p class="figure">Figure: Player states when interrupted by system</p> 
+  <p style="text-align: center;"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p> 
+  
+  <h2 id="video" name="video">Handling Video</h2> 
+  <p>Tizen enables your application to play video, 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 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 a handle to the player using the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function.</li> 
+    </ol>
+  <p>The video formats your application can use include: </p> 
+  <ul> 
+   <li>WMV, ASF, MP4, 3GP, AVI, MKV, OGG
+   <p>The available formats depend on the target device.</p></li> 
+  </ul> 
+
+  <p>In case of a video interruption, the state can be <span style="font-family: Courier New,Courier,monospace;">READY</span> 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 class="figure">Figure: Player states when interrupted by system</p> 
+<p style="text-align: center;"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>
+<h2 id="features" name="features">Features</h2>
+The main features of the Player API include:
+<ul>
+  <li>Player
+  <p>Use the Player API to control audio and video stream.</p>
+  <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, properties such as volume, sound type, latency mode, mute mode, and looping mode can be adjusted.</p>
+    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a>.</p>
+    </li>
+  <li>Display
+<p>Use the Display API to play video stream.</p>
+<p>After changing to the <span style="font-family: Courier New,Courier,monospace;">IDLE</span> state, create the display handle and set the display type.</p>
+<p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#set_parameters">Setting Display Parameters</a>.</p>
+</li>
+  <li>Stream Info
+  <p>Use the Stream Info API to play video stream.</p>
+    <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, you can retrieve stream information.</p>
+    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#get_stream">Getting Stream Information</a>.</p>
+    </li>
+
+  <li>Audio Effect
+    <p>Use the Audio Effect API to set and get the audio effect.</p>
+<p>After changing to the <span style="font-family: Courier New,Courier,monospace;">IDLE</span> state, you can adjust the audio effect.</p>
+    </li>
+  <li>Subtitle
+    <p>Use the Subtitle API to read the subtitle track.</p>
+    <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, the subtitle can be read.</p>
+    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#insert">Inserting Subtitles</a>.</p>
+    </li>
+  </ul>
+ 
+<h2 id="stream" name="stream">Streaming Playback</h2> 
+  <p>You can set specific URLs for streaming media playback by using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> 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 <span style="font-family: Courier New,Courier,monospace;">player_set_buffering_cb()</span> function.</p>
+ 
+ <h3 id="protocol" name="protocol">Streaming Protocol Features</h3>
+<p>The following table lists the streaming protocol features supported by the player.</p>
+
+  <table> 
+   <caption>
+     Table: Supported streaming protocol features 
+   </caption> 
+   <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> 
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/radio_n.htm b/org.tizen.guides/html/native/multimedia/radio_n.htm
new file mode 100644 (file)
index 0000000..bba5647
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/radio_n.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Radio</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm">Radio Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Radio</h1>
+
+<p>Tizen provides functions for controlling radio hardware on your system.</p>
+
+<p>The main features of the Radio API include:</p>  
+  
+<ul>
+  <li>Switching the radio on and off</li>
+  <li>Seeking radio frequency</li>
+  <li>Scanning radio signals</li>
+  <li>Setting the state of the radio</li>
+</ul>
+  
+<p>A handle for radio instance is created using the <span style="font-family: Courier New,Courier,monospace;">radio_create()</span> function. A successful creation of the handle requires a radio tuner. You can switch the radio on and off using the <span style="font-family: Courier New,Courier,monospace;">radio_start()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_stop()</span> functions. Select the radio frequency using the <span style="font-family: Courier New,Courier,monospace;">radio_set_frequency()</span> function or <span style="font-family: Courier New,Courier,monospace;">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_seek_down()</span> functions.</p>
+
+<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 class="figure">Figure: Radio state changes</p> 
+  <p style="text-align:center;"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p> 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/recorder_n.htm b/org.tizen.guides/html/native/multimedia/recorder_n.htm
new file mode 100644 (file)
index 0000000..f4f90dd
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/recorder_n.htm
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Recorder</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm">Recorder Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Recorder</h1>
+
+<p>Tizen offers basic recorder features, including an audio and video recorder.</p>
+ 
+  <p>The main features of the Recorder API include:</p> 
+  <ul> 
+    <li>Basic recording functionalities (record, stop, pause, cancel, and mute).
+       </li>   
+    <li>Setting the maximum recording time and size</li>
+       <li>Controlling the system volume level</li>    
+  </ul>
+  
+  <p>The following file formats are supported:</p>
+       <ul> 
+    <li>Video: <span style="font-family: Courier New,Courier,monospace">mp4</span> and <span style="font-family: Courier New,Courier,monospace">3gp</span></li>
+       <li>Audio: <span style="font-family: Courier New,Courier,monospace">m4a</span> and <span style="font-family: Courier New,Courier,monospace">amr</span></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 operations of the Recorder APIs can work in asynchronous mode, which means that callbacks are required to pass an event notification to the application. 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>The following figure illustrates the general recorder state changes.</p> 
+  <p class="figure">Figure: Recorder states</p> 
+  <p style="text-align:center;"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p> 
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">While running applications on the Emulator, audio-video synchronization errors can occur due to the computer performance.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
new file mode 100644 (file)
index 0000000..82a9392
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Sound Manager</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li><a href="#volume">Volume Control</a></li>
+                       <li><a href="#type">Sound Session Types</a></li>
+                       <li><a href="#query">Sound Device Query</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm">Sound Manager Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sound Manager</h1>
+
+<p>The sound manager allows you to control the audio behavior of your application.</p>
+
+<p>The main features of the Sound Manager API include:</p>
+
+<ul>
+<li><a href="#volume">Volume control</a>
+<p>Control the output volume by managing the sound type and its volume level.</p></li>
+
+<li><a href="#type">Sound session types</a>
+<p>Set the sound session type, which specifies the behavior of your application sound across the system.</p></li>
+
+<li><a href="#query">Sound device query</a>
+<p>Using the query functions, you can get various information, such as the state of the sound devices.</p></li>
+</ul>
+
+<h2 id="volume" name="volume">Volume Control</h2>
+
+<p>You can manage the volume level of a particular sound type. With the Sound Manager API, you can set and get a volume level and a maximum volume level of a particular sound type. </p>
+
+<p>Normally, if there is an active output stream, the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_sound_type()</span> 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 <span style="font-family: Courier New,Courier,monospace">sound_manager_set_current_sound_type()</span> 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>
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Setting the current sound type affects the entire system. When no longer needed, unset the current sound type using the <span style="font-family: Courier New,Courier,monospace">sound_manager_unset_current_sound_type()</span> function.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2 id="type" name="type">Sound Session Types</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 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>
+
+<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">sound_session_option_for_start_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">sound_session_option_for_during_play_e</a> enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>
+
+<p>You can also set options for resuming the media session when the interruption ends by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">sound_session_option_for_resumption_e</a> enumerator. The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>
+
+<h2 id="query" name="query">Sound Device Query</h2>
+<p>The audio behavior of your application must differ in accordance with the various sound devices that are connected.</p>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_device_list()</span> 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 <span style="font-family: Courier New,Courier,monospace">sound_manager_get_next_device()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_get_prev_device()</span> functions for a sequential search of the device list.</p>
+
+<p>With the device handle, you can query the sound device information with the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">sound_manger_get_device_type()</span>: To get the device type.</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_io_direction()</span>: To get the device IO direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_id()</span>: To get the device ID.</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_name()</span>: To get the device name.</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_state()</span>: To get the device state.</li></ul>
+
+<p>To get a notification when the sound device connection or information has changed, register the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> callbacks. The initial state of the connected sound device is deactivated.</p>
+
+<p>When getting a sound device list or setting callbacks, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">sound_device_mask_e</a> enumerator 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.</p>   
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/tone_player_n.htm b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
new file mode 100644 (file)
index 0000000..d0fec28
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Tone Player</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm">Tone Player Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tone Player</h1>
+
+<p>Tizen enables your application to play a tone or a list of tones.</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 <span style="font-family: Courier New,Courier,monospace;">tone_type_e</span>.</p></li> 
+  </ul> 
+
+  <p>The following figures illustrate the general tone player states, and how the state changes when your application calls the Tone player API.</p> 
+  <p class="figure">Figure: Tone player states</p> 
+  <p style="text-align:center;"><img src="../../images/tone.png" alt="Tone player states" /></p>    
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/video_util_n.htm b/org.tizen.guides/html/native/multimedia/video_util_n.htm
new file mode 100644 (file)
index 0000000..ae5a1e1
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/video_util_n.htm
@@ -0,0 +1,160 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Util</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm">Video Util Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Video Util</h1>
+
+<p>Tizen offers the following video transcoding features:</p>
+
+ <ul><li>Make container and codec type changes
+<p>Content compatibility is supported between same devices.</p></li>
+<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>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>
+
+ <p class="figure">Figure: Transcoder</p> 
+  <p style="text-align:center;"><img src="../../images/transcoder.png" alt="Transcoder" /></p>
+
+ 
+ <p>The following table lists the supported audio and video codecs (decoder).</p>
+ 
+ <table border="1">
+  <caption>Table: Decoders</caption>
+  <tbody>
+    <tr>
+      <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>
+         <td>AAC LC</td>
+         <td>MPEG-1</td>
+    </tr>
+    <tr>
+      <td>AAC+</td>
+         <td>MPEG-4 part 2</td>
+    </tr>
+       <tr>
+      <td>Enhanced AAC+</td>
+         <td>H.263</td>
+    </tr>
+       <tr>
+      <td>MP3</td>
+         <td>H.264</td>
+       </tr>
+       <tr>
+      <td>WMA7 / 8</td>
+         <td>VC-1 (WMV9)</td>
+    </tr>
+       <tr>
+      <td>WAV</td>
+         <td>On2 VP3</td>
+    </tr>
+       <tr>
+      <td>Vorbis</td>
+         <td>Theora</td>
+    </tr>
+       <tr>
+      <td>AMR-NB</td>
+         <td> </td>
+    </tr>
+       <tr>
+      <td>AMR-WB</td>
+         <td> </td> 
+    </tr>
+  </tbody>
+</table>
+
+ <p>The following table lists the supported audio and video codecs (encoder).</p>
+
+ <table border="1">
+  <caption>Table: Encoders</caption>
+  <tbody>
+    <tr>
+      <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>    
+         <td>AAC LC</td>
+      <td>MPEG-1</td>
+    </tr>
+    <tr>
+      <td>Vorbis</td>
+         <td>MPEG-4 part 2</td>
+    </tr>
+       <tr>
+      <td>AMR-NB</td>
+         <td>H.263</td>
+       </tr>
+       <tr>
+         <td> </td>
+         <td>H.264</td>
+       </tr>
+       <tr>
+         <td> </td>
+      <td>VC-1 (WMV9)</td>
+    </tr>
+       <tr>
+         <td> </td>
+      <td>On2 VP3</td>
+    </tr>
+       <tr>
+         <td> </td>
+      <td>Theora</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/wav_player_n.htm b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
new file mode 100644 (file)
index 0000000..31a4ecf
--- /dev/null
+++ b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>WAV Player</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm">WAV Player Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>WAV Player</h1>
+
+<p>Tizen enables your application to play audio in 1 of 2 ways: </p> 
+  <ul> 
+   <li>Audio player AppControl <p>When using the audio application control, the device standard media player application is launched to play audio. </p> </li> 
+   <li><span style="font-family: Courier New,Courier,monospace">wav player header</span> <p>When using the <span style="font-family: Courier New,Courier,monospace">wav player header</span>, your application uses its own user interface.</p> </li> 
+  </ul> 
+  <p>The WAV Player API provides controlling functions for using audio resources. The resources can be a media file stored in the device.</p> 
+  <p>Use the WAV Player API to enable your application to play audio and control playback. The audio features of this API include: </p> 
+  <ul> 
+   <li>Playing audio media from local files</li> 
+   <li>Controlling playback using play and stop</li> 
+  </ul> 
+
+  <p>The audio formats your application can use with the WAV Player API include:</p> 
+  <ul> 
+   <li>WAV, OGG</li> 
+  </ul> 
+  <p>Most operations of the WAV Player API work in 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 <span style="font-family: Courier New,Courier,monospace">wav player</span> 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 most common audio uses of the WAV Player API include: </p> 
+  <ul> 
+   <li>Playing an audio file and controlling the playback</li> 
+   <li>Handling player controls</li> 
+  </ul> 
+  
+  <p>The following figure illustrates the general WAV player state changes.</p> 
+  <p class="figure">Figure: WAV player state changes</p> 
+  <p style="text-align:center;"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p> 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/bluetooth_n.htm b/org.tizen.guides/html/native/network/bluetooth_n.htm
new file mode 100644 (file)
index 0000000..43a0858
--- /dev/null
+++ b/org.tizen.guides/html/native/network/bluetooth_n.htm
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Bluetooth</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li><a href="#adapter">Bluetooth Adapter</a></li>
+                       <li><a href="#device">Bluetooth Device</a></li>
+                       <li><a href="#bt_socket">Bluetooth Socket</a></li>              
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm">Bluetooth Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Bluetooth</h1>
+
+<p>Tizen enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>
+<p>The main features of the Bluetooth API include:</p>
+
+<ul>
+       <li>Managing the local <a href="#adapter">Bluetooth adapter</a> 
+       <p>To use the Bluetooth functionality of the device, you must switch the adapter on.</p>
+       </li>
+       <li>Discovering devices 
+       <p>You can discover other <a href="#device">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 
+       <p>You can create a bonding with another device. The bonding allows the 2 devices to establish a connection.</p>
+       </li>
+       <li>Connecting to and exchanging data with a Bluetooth device using a <a href="#bt_socket">Bluetooth socket</a>
+       <p>You can connect to and exchange data with a remote Bluetooth device. When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>
+       <p>If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service.</p>
+       </li>
+       <li>Connecting to audio devices with Bluetooth
+       <p>Connect to Bluetooth audio devices, such as headset, hand-free, and headphone.</p></li>
+       <li>Handling attributes with Bluetooth GATT 
+       <p>Discover, read, and modify attributes.</p></li>
+       <li>Connecting to health devices with Bluetooth HDP
+       <p>Manage connections to health devices and exchange data.</p></li>
+       <li>Connecting to devices with Bluetooth HID
+       <p>Connect to a Bluetooth HID, such as a keyboard or mouse.</p></li>
+       <li>Send and receive objects with Bluetooth OPP client and server
+       <p>Push and accept objects, such as pictures.</p></li>
+</ul>
+
+<p>Bluetooth use is based on profiles. Tizen Bluetooth features support the Audio, GATT, HDP, HID, and OPP client and server profiles.</p>
+
+<h2 id="adapter" name="adapter">Bluetooth Adapter</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">Bluetooth Adapter</a> API provides functions for setting up Bluetooth and discovering other devices. The API is used to control the Bluetooth adapter: you must enable the adapter before any other BLuetooth actions, and when you no longer need it, disable it to save device power.</p>
+<p>You can control the visibility of the device, meaning whether its name appears to others searching for Bluetooth devices. In addition, you  discover neighboring Bluetooth devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>
+
+<h2 id="device" name="device">Bluetooth Device</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">Bluetooth Device</a> API provides functions for managing bonds with other devices and searching for supported services. The API is used to handle the connection with other devices.</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>
+<p>The Bluetooth Device API is also used to search for services available on remote devices. </p>
+  
+<h2 id="bt_socket" name="bt_socket">Bluetooth Socket</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">Bluetooth Socket</a> API provides functions for managing connections to other devices and exchanging data. The API is used for exchanging data between 2 Bluetooth devices, where your device can have the role both of a server (service provider) and client (service user). The connection creation process differs based on the role. After the connection is established, the processes for exchanging data and disconnecting are the same for both roles.</p>     
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/connection_n.htm b/org.tizen.guides/html/native/network/connection_n.htm
new file mode 100644 (file)
index 0000000..e14c00c
--- /dev/null
+++ b/org.tizen.guides/html/native/network/connection_n.htm
@@ -0,0 +1,308 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Connection</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <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>                
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/connection_tutorial_n.htm">Connection Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Connection</h1>
+
+<p>The connection features enable you to create a network connection and perform various operations over the connection. The application can access connection details, such as the IP address, proxy information, gateway information, and connection statistics.</p>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">Within the Network Programming Guide, the term &quot;network&quot; refers to IP network connections. For information on telephony connections, see the <a href="../telephony/telephony_guide_n.htm">Telephony</a> guide.</td>
+      </tr>
+     </tbody>
+    </table>
+
+<h2 id="manager" name="manager">Connection Manager</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">Connection Manager</a> API provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>
+
+<p>The Connection Manager API is related with <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library.</p>
+
+<p>The Connection Manager provides the following typedefs and enumerators for managing data connections:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">connection_h</span>
+<p>Connection handle for all connection functions. To use the Connection Manager API, first create a connection handle using the <span style="font-family: Courier New,Courier,monospace">connection_create()</span> function. Afterwards, you can obtain network information.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">connection_profile_h</span>
+<p>Profile handle, which provides information according to the connection type.</p></li>
+<li>Connection state enumerators
+<p>One of the following states is returned by the <span style="font-family: Courier New,Courier,monospace">connection_get_[interface]_state()</span> function:</p> 
+<ul><li><span style="font-family: Courier New,Courier,monospace">connection_bt_state_e</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">connection_cellular_state_e</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">connection_wifi_state_e</span></li></ul>
+<p>The Connection Manager supports getting the connection state for Bluetooth, cellular and Wi-Fi.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">connection_address_family_e</span>
+<p>Enumeration for the address family. It provides IPv4 and IPv6. You can use it as a parameter when you get the IP address of the current connection or proxy.</p></li></ul>
+
+<h2 id="con_profile" name="con_profile">Connection Profile</h2>
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">Connection Profile</a> API provides functions for mapping a connection profile. It allows you to use a <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle for getting details about the connection.</p>
+
+<p>Each profile is defined by a set of configuration information defined in the <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).</p>
+
+<p>The following tables define the available profile information, which you can get using the <span style="font-family: Courier New,Courier,monospace">connection_profile_get_*()</span> function.</p>
+
+<table> 
+   <caption>
+     Table: Common information 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Information</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>Profile type</td> 
+     <td>Profile type indicating the network connection type</td> 
+    </tr> 
+    <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>
+    <tr> 
+     <td>Profile state</td> 
+     <td>Profile state, such as disconnected, association, configuration, or connected</td> 
+    </tr>
+    <tr> 
+     <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> 
+    </tr>
+    <tr> 
+     <td>Subnet mask</td> 
+     <td>Subnet mask</td> 
+    </tr>
+    <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>      
+    <tr> 
+     <td>Network interface name</td> 
+     <td>Name of the network interface, such as eth0 or pdp0</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>      
+   </tbody> 
+  </table> 
+
+<table> 
+   <caption>
+     Table: Profile-specific information for Wi-Fi 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Information</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>Essid</td> 
+     <td>Extended service set identifier</td> 
+    </tr>
+    <tr> 
+     <td>Bssid</td> 
+     <td>Basic 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>WPS supported</td>
+        <td>WPS (Wi-Fi Protected Setup) support</td>
+       </tr>
+    <tr> 
+     <td>Security type</td> 
+     <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td> 
+    </tr> 
+    <tr> 
+     <td>Rssi</td> 
+     <td>Received signal strength indication</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+
+<table> 
+   <caption>
+     Table: Profile-specific information for cellular
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Information</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>APN</td> 
+     <td>Access Point Name</td> 
+    </tr> 
+           <tr> 
+     <td>Cellular authentication info</td> 
+     <td>Authentication information, including user name and password</td> 
+    </tr>
+           <tr> 
+     <td>Cellular home URL</td> 
+     <td>Home URL</td> 
+    </tr>
+           <tr> 
+     <td>Service type</td> 
+     <td>Cellular service type</td> 
+    </tr>
+   </tbody> 
+  </table> 
+       
+
+<h2 id="statistics" name="statistics">Connection Statistics</h2>
+
+<p>Use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">Connection Statistics</a> API to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Only Wi-Fi and cellular connections are supported in the statistics.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <p>The following table lists the connection type constants.</p>
+  
+  <table> 
+   <caption>
+     Table: Connection type constants
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Constant</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_WIFI</span></td> 
+     <td>Wi-Fi type</td> 
+    </tr> 
+           <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_CELLULAR</span></td> 
+     <td>Cellular type</td> 
+    </tr>
+   </tbody> 
+  </table> 
+  
+<p>The following table lists the statistics constants.</p>
+  <table> 
+   <caption>
+     Table: Statistics constants
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Constant</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA</span></td> 
+     <td>Last received data</td> 
+    </tr> 
+           <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA</span></td> 
+     <td>Last sent data</td> 
+    </tr>
+           <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA</span></td> 
+     <td>Total received data</td> 
+    </tr>
+           <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA</span></td> 
+     <td>Total sent data</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">connection_reset_statistics()</span> function to re-initialize the statistics.</p> 
+       
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/network_guide_n.htm b/org.tizen.guides/html/native/network/network_guide_n.htm
new file mode 100644 (file)
index 0000000..f90f41c
--- /dev/null
+++ b/org.tizen.guides/html/native/network/network_guide_n.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Network</h1>
+  <p>Network features include information on how your application can send data to networks and other applications, and receive data back from them.</p>
+
+  <p>The main network features are:</p>
+  <ul>
+       <li><a href="connection_n.htm">Connection</a> <p>Enables you to get information about the connected network, set up and configure network connections, and track information, such as sent and received size.</p></li>
+       <li><a href="bluetooth_n.htm">Bluetooth</a><p>Enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices.</p></li>
+       <li><a href="nfc_n.htm">NFC</a><p>Enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card.</p></li>
+       <li><a href="wifi_n.htm">Wi-Fi</a><p>Enables you to connect to a Wireless Local Area Network (WLAN) and transfer data over the network.</p></li>
+       <li><a href="wifi_direct_n.htm">Wi-Fi Direct</a><p>Enables you to connect to Wi-Fi Direct&trade; devices and manage Wi-Fi Direct&trade; connections.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/nfc_n.htm b/org.tizen.guides/html/native/network/nfc_n.htm
new file mode 100644 (file)
index 0000000..053d234
--- /dev/null
+++ b/org.tizen.guides/html/native/network/nfc_n.htm
@@ -0,0 +1,131 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>NFC</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm">NFC Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>NFC</h1>
+
+<p>Tizen enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card. NFC is an international standard that specifies an interface and a protocol for simple wireless interconnection of closely coupled devices. For more information, see the <a href="http://nfc-forum.org/" target="blank">NFC Forum</a>.</p>
+
+<p>The main features of the NFC API include:</p>
+
+<ul>
+    <li>NFC management
+               <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">Manager</a> API provides functions, for example, for:</p>
+<ul>
+    <li>Initializing and deinitializing NFC</li>
+    <li>Enabling and disabling NFC</li>
+    <li>Setting callbacks for NFC events</li>
+       <li>Managing NFC connections</li>
+</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>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">NDEF</a> API provides functions for:</p>
+
+<ul>
+    <li>Creating NDEF records</li>
+    <li>Retrieving a specific field of an NDEF record</li>
+    <li>Creating NDEF messages</li>
+    <li>Inserting and removing NDEF records to and from an NDEF message</li>
+</ul>
+    </li>
+    <li>Reader/writer mode
+       <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">TAG</a> API provides functions, for example, for:</p>
+
+<ul>
+    <li>Retrieving the tag type</li>
+    <li>Reading an NDEF message from a tag</li>
+    <li>Writing an NDEF message to a tag</li>
+    <li>Formatting a tag for using NDEF</li>
+    <li>Handling type-specific tag operations (currently only MIFARE)</li>
+</ul>  
+    </li>
+    <li>Peer-to-peer mode
+       <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">Peer to Peer</a> API provides functions for:</p>
+
+<ul>
+    <li>Sending an NDEF message to a peer device</li>
+    <li>Receiving an NDEF message from a peer device</li>
+</ul>  
+    </li>
+    <li>Card emulation mode
+               <p>The card emulation mode allows an NFC device to function as a smart card. The mode provides access to secure elements (SEs).</p>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">Card Emulation</a> API provides functions for:</p>
+
+<ul>
+    <li>Enabling and disabling the card emulation mode</li>
+    <li>Retrieving the card emulation status</li>
+    <li>Opening and closing a secure element</li>
+    <li>Sending an application protocol data unit (APDU) to a secure element</li>
+    <li>Retrieving an Answer To Reset (ATR) from a secure element</li>
+</ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Pay attention to the following:
+                       <ul><li>Secure element access is not supported in Tizen 2.3. The Card Emulation API of Tizen 2.3 only supports enabling and disabling the NFC card emulation mode, and retrieving the card emulation status.</li>
+                       <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>
+                       </td>
+        </tr>
+    </tbody>
+</table>
+    </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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/wifi_direct_n.htm b/org.tizen.guides/html/native/network/wifi_direct_n.htm
new file mode 100644 (file)
index 0000000..e7c3f73
--- /dev/null
+++ b/org.tizen.guides/html/native/network/wifi_direct_n.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Wi-Fi Direct</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Wi-Fi Direct</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>
+
+<p>In a Wi-Fi Direct&trade; group, the group owner works as an access point in the Wi-Fi infrastructure mode and the other devices join the group as clients. A group can be created either by negotiation between 2 devices or in an autonomous mode by a single group owner device. In a negotiation-based group creation, 2 devices compete based on the group owner intent value and the higher intent device becomes a group owner, while the other device becomes a group client. In an autonomous group creation, a device becomes a group owner by itself without any group client.</p>
+
+<p>A Wi-Fi Direct&trade; device can join an existing group by associating itself with the group owner, as long as the allowed number of clients is not exceeded.</p>
+
+<p>The main features of the Wi-FI Direct&trade; include:</p>
+<ul>
+<li>Activating and deactivating a local Wi-Fi Direct&trade; device.</li>
+<li>Discovering Wi-Fi Direct&trade; peer devices and showing Wi-Fi Direct&trade; peer device information.</li>
+<li>Connecting to a specific Wi-Fi Direct&trade; device and disconnecting from a specific Wi-Fi Direct&trade; device.</li>
+<li>Creating a Wi-Fi Direct&trade; group, and manage group.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">You can test the Wi-Fi Direct&trade; functionality only on target devices. The <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> currently does not support this feature.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/wifi_n.htm b/org.tizen.guides/html/native/network/wifi_n.htm
new file mode 100644 (file)
index 0000000..98030ea
--- /dev/null
+++ b/org.tizen.guides/html/native/network/wifi_n.htm
@@ -0,0 +1,279 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Wi-Fi</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+                       <ul class="toc">
+                               <li><a href="#wifi_manager">Wi-Fi Manager</a></li>
+                               <li><a href="#ap">Access Point</a></li>
+                               <li><a href="#wifi_monitor">Wi-Fi Monitor</a></li>
+                       </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm">Wi-Fi Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Wi-Fi</h1>
+
+<p>Tizen allows your application to connect to a Wireless Local Area Network (WLAN) and transfer data over the network. The Wi-Fi Manager enables your application to activate and deactivate a local Wi-Fi device, and to connect to a WLAN network in the infrastructure mode.</p>
+<p>The main features of the Wi-Fi API include:</p>
+<ul><li>Wi-Fi device and connection management using the <a href="#wifi_manager">Wi-Fi Manager</a></li>
+<li><a href="#ap">Access point</a> management
+<p>You can manage the Wi-Fi account and security information.</p>
+<p>The infrastructure mode is used to connect to a wireless local area network (WLAN). The infrastructure mode requires a wireless access point. To connect to a WLAN, a client must be configured to use the same service set identifier (SSID) as the access point.</p></li>
+<li>Wi-Fi state monitoring using the <a href="#wifi_monitor">Wi-Fi Monitor</a></li>
+</ul>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">You can test the Wi-Fi functionality only on a target device. The Emulator does not support this feature.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  
+<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>  
+
+<p>The Tizen <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">Wi-Fi Manager</a> API provides functions for managing Wi-Fi connection. </p>
+<p>Using the Wi-Fi Manager, you can implement features that allow the users of your application to:</p>
+
+<ul><li>Activate and deactivate a Wi-Fi device
+<p>You can activate and deactivate a local Wi-Fi device using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> functions. Both functions have a callback function as the first parameter. The callback function is called after the activation or deactivation is completed. You can use  the <span style="font-family: Courier New,Courier,monospace">NULL</span> value, if you want no notifications.</p>
+</li>
+<li>Connect to an access point
+<p>You can connect to an access point asynchronously using the <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function.</p>
+</li>
+<li>Scan the access points
+<p>To scan access points, use the <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> functions.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> function starts the scan asynchronously. When the scan is finished, a callback function is called. The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> 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> 
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">Access Point</a> API provides functions for managing access points (AP). You need to create an AP handle (<span style="font-family: Courier New,Courier,monospace">wifi_ap_h</span>) for using the API functions. </p>
+
+<p>The Access Point API supports the following main features:</p>
+<ul><li>Creating and destroying an AP handle</li>
+<li>Getting the network information</li>
+<li>Getting the security information</li></ul>
+
+<p>The following table lists the network information details you can access with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">Network Information</a> API.</p>
+<table> 
+   <caption>
+     Table: Network information details
+   </caption> 
+   <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> 
+    </tr>
+           <tr> 
+     <td>DNS address</td> 
+     <td>DNS address</td> 
+    </tr>
+           <tr> 
+     <td>Essid</td> 
+     <td>Extended service set identifier</td> 
+    </tr>
+           <tr> 
+     <td>Frequency</td> 
+     <td>Frequency (in MHz)</td> 
+    </tr>
+           <tr> 
+     <td>IP address</td> 
+     <td>IP address</td> 
+    </tr>
+           <tr> 
+     <td>IP config type</td> 
+     <td>Net IP configuration type</td> 
+    </tr>
+           <tr> 
+     <td>Max speed</td> 
+     <td>Maximum speed (in Mbps)</td> 
+    </tr>
+           <tr> 
+     <td>Proxy address</td> 
+     <td>Proxy address</td> 
+    </tr>
+           <tr> 
+     <td>Proxy type</td> 
+     <td>Proxy method type</td> 
+    </tr>
+           <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 <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">Security Information</a> API.</p>
+<table> 
+   <caption>
+     Table: Security information details
+   </caption> 
+   <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>
+       <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>
+   </tbody> 
+  </table> 
+
+<p>You can also obtain the EAP information listed in the following table.</p>
+<table> 
+   <caption>
+     Table: EAP information details
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Information</th> 
+     <th>Description</th> 
+    </tr> 
+           <tr> 
+     <td>Authentication type</td> 
+     <td>Type of EAP phase2 authentication of Wi-Fi</td> 
+    </tr>
+                   <tr> 
+     <td>CA certificate</td> 
+     <td>EAP CA certificate (valid only if the EAP type is TLS)</td> 
+    </tr>
+                   <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>
+           <tr> 
+     <td>EAP type</td> 
+     <td>EAP type of Wi-Fi</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+
+<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2> 
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">Wi-Fi Monitor</a> API provides functions for monitoring the Wi-Fi connection state.</p>
+
+<p>The Wi-Fi Monitor allows you to get the state of the Wi-Fi connection. The state can be:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_FAILURE</span>
+<p>Connection failed.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_DISCONNECTED</span>
+<p>Disconnected.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_ASSOCIATION</span>
+<p>Association.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONFIGURATION</span>
+<p>Configuration.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONNECTED</span>
+<p>Connected.</p></li></ul>
+
+<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>
+
+<table> 
+   <caption>
+     Table: Property changes
+   </caption> 
+   <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>RSSI level</td> 
+     <td>The callback is called when the RSSI of the connected Wi-Fi changes.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/porting/api_comparison_n.htm b/org.tizen.guides/html/native/porting/api_comparison_n.htm
new file mode 100644 (file)
index 0000000..42e02de
--- /dev/null
+++ b/org.tizen.guides/html/native/porting/api_comparison_n.htm
@@ -0,0 +1,1495 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Comparison</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#content">Content</a></li>
+                       <li><a href="#locales">Locales</a></li>
+                       <li><a href="#locations">Locations</a></li>
+                       <li><a href="#media">Media</a></li>
+                       <li><a href="#messaging">Messaging</a></li>
+                       <li><a href="#net">Net</a></li>
+                       <li><a href="#security">Security</a></li>
+                       <li><a href="#shell">Shell</a></li>
+                       <li><a href="#social">Social</a></li>
+                       <li><a href="#system">System</a></li>
+                       <li><a href="#telephony">Telephony</a></li>
+                       <li><a href="#text">Text</a></li>
+                       <li><a href="#uix">UIX</a></li>
+                       <li><a href="#web">Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>API Comparison</h1> 
+
+<p>The following table shows where to find information related to the 2.2.1 and 2.3 version APIs.</p>
+<table>
+<caption>Table: API Comparison</caption>
+<tbody>
+<tr>
+ <th>API</th>
+ <th>Version 2.2.1</th>
+ <th>Version 2.3</th>
+</tr>
+<tr>
+ <td>Content: Managing Content</td>
+ <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+ <ul>
+ <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/content/content_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Content: Managing Content</strong></li>
+ <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/content_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Content Tutorial</strong></li></ul></td>
+ <td><a href="../../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content Tutorials</a></td>
+ </tr>
+ <tr>
+  <td>Locales: Internationalization and Localization</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/locales/locales_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Locales: Internationalization and Localization</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/locales_tutorial/locales_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Locales Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm">i18n Tutorial</a></td>
+ </tr>
+  <tr>
+  <td>Locations: Using Location Information and Services</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/locations/locations_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Locations: Using Location Information and Services</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/locations_tutorial/locations_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Locations Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Media: Handling Audio, Video, Camera, and Images</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/media/media_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Media: Handling Audio, Video, Camera, and Images</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/media_tutorial/media_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Media Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Messaging: SMS, MMS, Email, and Push</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/messaging/messaging.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Messaging: SMS, MMS, Email, and Push</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/messaging_tutorial/messaging_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Messaging Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Net: Managing Network Connections and Communication</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/net/net_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Net: Managing Network Connections and Communication</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/net_tutorial/net_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Net Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Security: Handling Certificates and Cryptographic Primitives</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/security/security_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Security: Handling Certificates and Cryptographic Primitives</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/security_tutorial/security_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Security Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Shell: Managing Tizen Shell</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/shell/shell_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Shell: Managing Tizen Shell</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/shell_tutorial/shell_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Shell Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Social: Managing Personal Data</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/social/social_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Social: Managing Personal Data</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/social_tutorial/social_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Social Tutorial</strong></li></ul></td>
+ <td><a href="../../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social Tutorials</a></td>
+ </tr> 
+ <tr>
+  <td>System: Getting System Information and Using Alarms</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/system/system_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; System: Getting System Information and Using Alarms</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/system_tutorial/system_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; System Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Telephony: Handling Phone Call, SIM card, and Network Information</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/telephony/telephony.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Telephony: Handling Phone Call, SIM card, and Network Information</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/telephony_tutorial/telephony_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Telephony Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Text: Encoding and Decoding Characters</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/text/text.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Text: Encoding and Decoding Characters</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/text_tutorial/text_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Text Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm">i18n Tutorial</a></td>
+ </tr>
+  <tr>
+  <td>UI: Creating the Application UI</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/ui/ui_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; UI: Creating the Application UI</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/ui_tutorial/ui_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; UI Tutorial</strong></li></ul></td>
+  <td><ul><li><a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics Tutorials</a></li>
+  <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li></ul></td>
+ </tr>
+  <tr>
+  <td>Uix: Interaction for Advanced UX</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/uix/uix_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Uix: Interaction for Advanced UX</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/uix_tutorial/uix_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Uix Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX Tutorials</a></td>
+ </tr>
+  <tr>
+  <td>Web: Managing Web Pages and Web Content</td>
+  <td><a href="https://developer.tizen.org/documentation/dev-guide/2.2.1" target="_blank">Documentation:</a>
+  <ul>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/web/web_browsers_and_web_content.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming &gt; Programming Guide &gt; Web: Managing Web Pages and Web Content</strong></li>
+  <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/web_tutorial/web_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming &gt; Tutorials &gt; Web Tutorial</strong></li></ul></td>
+  <td><a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web Tutorials</a></td>
+ </tr>
+ </tbody></table>
+
+<h2 id="content" name="content">Content</h2>
+<p>The Content API has the same functionality as earlier, providing features to manage the local device content. However, the API model has changed.</p>
+
+<h3 id="create" name="create">Creating Content</h3>
+<p>The process of content instance creation in the 2.2.1 version is presented in the 2.2.1 Content Tutorial. According to that tutorial, the content can be created in the following ways:</p>
+<ul>
+       <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/creating_device_content_filepath.htm" target="_blank">Using a File Path</a></li>
+       <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/creating_device_content_filepath_pointer.htm" target="_blank">Using a File Path with Content Information</a></li>
+       <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/creating_device_content_bytebuffer.htm" target="_blank">Using a ByteBuffer</a></li>
+       <li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/creating_device_content_bytebuffer_pointer.htm" target="_blank">Using a ByteBuffer with Content Information</a></li>
+</ul>
+<p>In version 2.3, to create a content instance, insert the media file into the media database. To do this, you can use 2 different functions:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> takes the path to the file as an input parameter and returns the <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> handle as the second output parameter.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> scans the database for the file. If the file is not found, it is added to the database.</li></ul>
+
+<p>Use the <a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm#insert">Inserting Media in the Database</a> instructions in the 2.3 Media Information Tutorial:</p>
+<pre class="prettyprint">
+media_info_h media_file = NULL;
+
+media_content_connect(); // Required to establish the connection with the Content Service
+
+media_info_insert_to_db(your_media_file_path, &amp;media_file);
+
+// OR
+
+media_content_scan_file(your_media_file_path);
+</pre>
+<p>Note that the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function does not return the <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> handle. To obtain it, perform a search on the database.</p>
+
+<h3 id="update" name="update">Updating Content</h3>
+
+<p>You can <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/updating_device_content.htm" target="_blank">update the content</a> in 2 different ways in the 2.3 API model:</p>
+<ul>
+       <li>The <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function updates the media file information if the file is already stored in the database. Otherwise, it inserts the information to the database or, when the file does not exist in the system anymore, it removes the information about it from the database.</li>
+       <li>To update content information, search through the database for the media information that you want to change. After retrieving the handle to the required media information, change the information by calling the <span style="font-family: Courier New,Courier,monospace;">media_info_set_*(&lt;name of the property to be changed&gt;)</span> function. When the updating is finished, call the <span style="font-family: Courier New,Courier,monospace;">media_info_update_to_db(</span>) function to apply the update to the database:
+<pre class="prettyprint">
+filter_h filter = NULL; // Handle for the filter used for searching
+
+media_filter_create(&amp;filter); // Creation of the filter
+
+media_filter_set_condition(filter, ..., ...); // Setting the condition to the filter
+
+media_info_foreach_media_from_db(filter, gallery_media_item_cb, NULL);
+</pre>
+       <p>The <span style="font-family: Courier New,Courier,monospace;">gallery_media_item_cb()</span> callback is called for each media info in the media database that match the given filter conditions. Inside the callback, edit the obtained media info and update the database with the following code:</p>
+<pre class="prettyprint">
+bool gallery_media_item_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_info_set_longitude(media, ...);
+&nbsp;&nbsp;&nbsp;media_info_set_latitude(media, ...);
+&nbsp;&nbsp;&nbsp;media_info_set_favorite(media, ...);
+
+&nbsp;&nbsp;&nbsp;media_info_update_to_db(media);
+}
+</pre>
+       </li>
+</ul>
+
+<h3 id="remove" name="remove">Removing Content</h3>
+<p>To remove content information in the 2.2.1 version, see the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/deleting_device_content.htm" target="_blank">Deleting Content</a> section of the Content Tutorial. Now, the <span style="font-family: Courier New,Courier,monospace">media_info_delete_from_db()</span> function performs this action. It takes the media ID property as its parameter. To obtain the media ID for the given media information, use the <span style="font-family: Courier New,Courier,monospace">media_info_get_media_id()</span> function:</p>
+<pre class="prettyprint">
+char *media_id;
+
+media_info_get_media_id(media, &amp;media_id);  // Getting the media ID of the given media record
+media_info_delete_from_db(media_id); // Removing the media from the Content database
+</pre>
+
+<h3 id="track" name="track">Tracking Content Changes</h3>
+<p>The <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/content_tutorial/retrieve_db_notification.htm" target="_blank">Retrieving Database Notifications</a> use case from the 2.2.1 version is fully covered by the <a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm#update">Receiving Update Notifications</a> use case in the 2.3 Media Content Tutorial. The main difference is that instead of setting a listener with the <span style="font-family: Courier New,Courier,monospace">AddContentUpdateEventListener</span> interface to listen for database updates, the <span style="font-family: Courier New,Courier,monospace">media_content_set_db_updated_cb()</span> function must be used to set the callback that is called when the data in the database changes:</p>
+<pre class="prettyprint">
+media_content_set_db_updated_cb(_database_updated_cb, NULL);
+
+_database_updated_cb(media_content_error_e error, int pid, media_content_db_update_item_type_e update_item, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_type_e update_type, media_content_type_e media_type, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *uuid, char *path, char *mime_type, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (MEDIA_CONTENT_ERROR_NONE == error) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Database was successfully updated
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(path) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;path : %s&quot;, path);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(uuid) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;uuid : %s&quot;, uuid);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(mime_type) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;mime_type : %s&quot;, mime_type);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="search" name="search">Searching Content</h3>
+
+<p>The Content Search section of the Content tutorial for the 2.2.1 version describes how to search for content. The Searching Content and Retrieving an Audio Genre List use cases from the 2.2.1 tutorial are covered by the <a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm">Media Content Tutorial</a> in the new 2.3 tutorial. This section describes how to search through the content database using different filters. With the old API, you called the <span style="font-family: Courier New,Courier,monospace">SearchN()</span> function with some filtering parameters. Now, you create and set the filtering conditions to the filter instance, and then use this filter as a parameter of the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function to search for matching content:</p>
+<pre class="prettyprint">
+#define BUFLEN 200
+
+filter_h filter = NULL;
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+media_filter_create(&amp;filter);
+
+snprintf(buf, BUFLEN, &quot;%s = &#39;Samsung&#39;&quot;, MEDIA_ARTIST);  // Search for albums with the artist name &quot;Samsung&quot;
+media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE); // Set the case insensitive condition
+// Set the order of results by the artist name, ascending, case sensitive
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST, MEDIA_CONTENT_COLLATE_DEFAULT); 
+
+media_info_foreach_media_from_db(filter, media_cb, NULL);
+</pre>
+<h3 id="download" name="download">Downloading Content</h3>
+
+<p>The Downloading the Content section is named the <a href="../../../../org.tizen.tutorials/html/native/content/download_tutorial_n.htm">Download Tutorial</a> for version 2.3. The difference between them is that there is no Download Manager anymore. All download operations are based on the download ID (in the 2.2.1 version the <span style="font-family: Courier New,Courier,monospace">requestId</span>). This ID is obtained by using the <span style="font-family: Courier New,Courier,monospace">download_create()</span> function. Instead of the <span style="font-family: Courier New,Courier,monospace">SetDownloadListener()</span> function, use the <span style="font-family: Courier New,Courier,monospace">download_set_state_changed_cb()</span> function to invoke the callback function when the download status changes. The <span style="font-family: Courier New,Courier,monospace">download_set_url()</span> function replaces the 2.2.1 <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> constructor. To start the download, call the <span style="font-family: Courier New,Courier,monospace">download_start()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">Start()</span> in the 2.2.1 API. For more information, see the content of these tutorials.</p>
+<pre class="prettyprint">
+int download_id;
+
+download_create(&amp;download_id);
+download_set_state_changed_cb(download_id, _state_changed_cb, NULL);
+download_set_url(download_id, &quot;http://tizen.org&quot;);
+download_start(download_id);
+
+_state_changed_cb(int download_id, download_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// The state of the downloading process can be checked here. 
+}
+</pre>
+
+<h3 id="playlists" name="playlists">Managing Playlists</h3>
+
+<p>The last section of the 2.2.1 Content Tutorial is about playlist management. A matching tutorial in the 2.3 version is the <a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm">Media Content Tutorial</a>. It describes managing playlists in detail. In the 2.2.1 API, the playlist was created with the <span style="font-family: Courier New,Courier,monospace">Construct()</span> function as a new independent instance of a playlist. In the 2.3 model, the playlist is created as an item of the media playlist database using the <span style="font-family: Courier New,Courier,monospace">media_playlist_insert_to_db()</span> function:</p>
+<pre class="prettyprint">
+media_playlist_h playlist = NULL;
+
+media_playlist_insert_to_db(&quot;Put your playlist name here&quot;, &amp;playlist);
+</pre>
+
+<p>To manage the playlists:</p>
+
+<ul><li><p>To add the media item to the playlist, the <span style="font-family: Courier New,Courier,monospace">media_id</span> is needed, so the media must already be placed in the media database. When the <span style="font-family: Courier New,Courier,monospace">media_id</span> is available, use the <span style="font-family: Courier New,Courier,monospace">media_playlist_add_media()</span> function to attach the media to the playlist:</p>
+<pre class="prettyprint">
+media_playlist_add_media(playlist, media_id);
+</pre></li>
+<li><p>To retrieve the playlist from the database, use one of the following ways:</p>
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">media_playlist_get_playlist_from_db()</span>, which is similar to the <span style="font-family: Courier New,Courier,monospace">GetPlayListN()</span> function. The difference is that the playlist ID is required as a parameter instead of the playlist name.
+<pre class="prettyprint">
+media_playlist_get_playlist_from_db(playlist_id);
+</pre></li>
+<li><p>Search for the playlist by using the <span style="font-family: Courier New,Courier,monospace">media_playlist_foreach_playlist_from_db()</span> function and a proper filter as a parameter. This function invokes the callback for every playlist in the database that matches the given filtering conditions.</p>
+<pre class="prettyprint">
+media_playlist_foreach_playlist_from_db(filter, _playlist_list_cb,  NULL);
+
+static bool _playlist_list_cb(media_playlist_h playlist, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;int playlist_id;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+
+&nbsp;&nbsp;&nbsp;// Manage the retrieved playlist here
+&nbsp;&nbsp;&nbsp;media_playlist_get_name(playlist, &amp;name);
+&nbsp;&nbsp;&nbsp;media_playlist_get_playlist_id(playlist, &amp;playlist_id);
+&nbsp;&nbsp;&nbsp;media_playlist_set_name(playlist, &quot;Put new playlist name here.&quot;);
+}
+</pre></li></ul></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">SetPlayListName()</span> function is covered by <span style="font-family: Courier New,Courier,monospace">media_playlist_set_name()</span>.</p></li>
+<li><p>To remove the playlist, use the following code instead of a single <span style="font-family: Courier New,Courier,monospace">RemovePlayList()</span> method on an existing object:</p>
+<pre class="prettyprint">
+int playlist_id;
+
+media_playlist_get_playlist_id(playlist, &amp;playlist_id);
+media_playlist_delete_from_db(playlist_id); // Remove the playlist from the database
+
+media_playlist_destroy(playlist); // Release the memory allocated for the playlist
+</pre></li></ul>
+
+<h2 id="locales" name="locales">Locales</h2>
+<p>The calendar creation and use (described in the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/locales_tutorial/creating_calendar.htm" target="_blank">Creating a Calendar and Changing the Date</a> use case for the 2.2.1 version) is described in the new tutorial under the <a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm#dates">Managing Dates and Calendar</a> use case.</p>
+<p>Note that in addition to functions described in this section, time-related functions are also provided by the following libraries:</p>
+<ul>
+    <li> Eglibc, a variant of glibc (<a href="http://www.eglibc.org/home" target="_blank">http://www.eglibc.org/home</a>)</li>
+    <li> GLib (<a href ="https://developer.gnome.org/glib/2.38/" target="_blank">https://developer.gnome.org/glib/2.38/</a>)</li>
+</ul>
+
+<p>Previously, you created the calendar instance with this method:</p>
+<pre class="prettyprint">
+Calendar* pCalendar = Calendar::CreateInstanceN(CALENDAR_GREGORIAN);
+</pre>
+<p>Now, to create the calendar instance, do the following:</p>
+<pre class="prettyprint">
+i18n_uchar timezone[16];
+i18n_ustring_copy_ua_n(timezone, &quot;America/New_York&quot;, 16);
+
+i18n_ucalendar_h ucalendar;
+i18n_ucalendar_create(timezone, -1, I18N_ULOCALE_US, I18N_UCALENDAR_DEFAULT, &amp;ucalendar);
+</pre>
+<p>In the 2.3 version, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_create()</span> function to create the calendar instance. The function takes 5 parameters instead of the 1 in the 2.2.1 API. The <span style="font-family: Courier New,Courier,monospace">CALENDAR_GREGORIAN</span> parameter passed in the 2.2.1 API is now the fourth parameter, and its type is <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_type_e</span>. To create the Gregorian calendar, use the <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_GREGORIAN</span> type. The other parameters are:</p>
+<ul>
+       <li>Desired time zone ID (for example, &quot;America/New_York&quot;).</li>
+       <li>Length of the time zone ID input string. The value -1 can be used when the zone ID is null-terminated.</li>
+       <li>Desired locale, such as <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_US</span>.</li>
+       <li>Last parameter is an out-type parameter. It is a pointer to an <span style="font-family: Courier New,Courier,monospace">i18n_calendar</span> instance which is created.</li>
+</ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">SetTime()</span> function for setting the current time of the calendar is replaced with the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_date_time()</span> function. Now it takes a detailed date as its parameters, and the hour, minute, and seconds can also be specified. You also have to pass the pointer to the calendar instance as a parameter.</p>
+<pre class="prettyprint">
+// The parameters are: calendar instance, year, month, day, hour, minute, and second
+i18n_ucalendar_set_date_time(ucalendar, 2014, I18N_UCALENDAR_JULY, 1, 9, 0, 0); 
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">AddTimeField()</span> function is now covered by the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_add()</span> function. It works almost as in the 2.2.1 version; for more information, see the documentation.</p>
+<pre class="prettyprint">
+i18n_ucalendar_add(ucalendar, I18N_UCALENDAR_HOUR, 3);
+</pre>
+
+<p>The Formatting Time and Date section is also now a part of the Managing Dates and Calendar use case in the 2.3 tutorial.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">GetCurrentTime()</span> function has been replaced with the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_now()</span> function. It gets an actual current date from the system, and it is represented as milliseconds from the epoch.</p>
+<pre class="prettyprint">
+i18n_udate now;
+i18n_ucalendar_get_now(&amp;now);
+</pre>
+
+<p>The date formatter functionality provided in the 2.3 API is similar to the 2.2.1 version. The <span style="font-family: Courier New,Courier,monospace">CreateDateFormatterN()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">i18n_udate_create()</span> function. The difference is that during the creation of the formatter you already pass the date pattern created with the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_create()</span> and <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> functions (in 2.2.1, the pattern was applied to the formatter after it was created, by using the <span style="font-family: Courier New,Courier,monospace">ApplyPattern()</span> function). The main functionality provided earlier by the <span style="font-family: Courier New,Courier,monospace">Format()</span> function is now covered by the <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_date()</span> function. To see the exact usage of the mentioned functions, see the tutorials.</p>
+<pre class="prettyprint">
+i18n_udatepg_h udatepg;
+i18n_udatepg_create(I18N_ULOCALE_UK, &amp;udatepg); // Create the pattern generator
+
+i18n_uchar format[64];
+// Create a draft format for the date (E - day of the week, M - month, y - year, d - day of the month, and D - day of the year)
+i18n_ustring_copy_ua_n(format, &quot;EEEdMMMyyyyHHmmssz&quot;, 64); 
+
+int pattern_len;
+i18n_uchar best_pattern[64];
+// Generate the best pattern using pattern generator
+i18n_udatepg_get_best_pattern(udatepg, format, 64, best_pattern, 64, &amp;pattern_len); 
+
+i18n_udate_format_h date_format;
+i18n_ustring_copy_ua_n(timezone, &quot;Asia/Seoul&quot;, 16);
+// Create a date format
+i18n_udate_create(I18N_UDATE_FULL, I18N_UDATE_FULL, I18N_ULOCALE_UK, timezone, -1, best_pattern, -1, &amp;date_format); 
+
+i18n_uchar date_result[64];
+int date_len;
+// Format the date
+i18n_udate_format_date(date_format, now, date_result, 64, NULL, &amp;date_len); 
+</pre>
+
+<p>The 2.2.1 API provides time zone-related functionality. Getting the time zone identifier was possible with the <span style="font-family: Courier New,Courier,monospace">TimeZone::GetId()</span> function. In the 2.3 API, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_timezone_displayname()</span> function with the display format type as the second parameter.</p>
+<pre class="prettyprint">
+i18n_ucalendar_get_timezone_displayname(ucalendar, I18N_UCALENDAR_STANDARD, ...);
+</pre>
+
+<p>Getting the time zone offset from UTC/GMT (in minutes) was possible using the <span style="font-family: Courier New,Courier,monospace">TimeZone::GetRawOffset()</span> function. In the 2.3 API, this functionality is covered by the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get()</span> function with the <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_ZONE_OFFSET</span> as its second parameter.</p>
+<pre class="prettyprint">
+int offset;
+
+i18n_ucalendar_get(ucalendar, I18N_UCALENDAR_ZONE_OFFSET, &amp;offset); // Value is given in milliseconds
+</pre>
+
+<p>In 2.2.1, it was possible to find the daylight savings time (in minutes) with the <span style="font-family: Courier New,Courier,monospace">TimeZone::GetDstSavings()</span> function. In 2.3, it can be done for a particular date using the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get()</span> function with the <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DST_OFFSET</span> as its second parameter.</p>
+<pre class="prettyprint">
+int offset;
+
+i18n_ucalendar_get(ucalendar, I18N_UCALENDAR_DST_OFFSET, &amp;offset); // Value is given in milliseconds
+</pre>
+
+<p>It is also possible to check whether a date is in daylight savings time with the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_is_in_daylight_time()</span> function:</p>
+<pre class="prettyprint">
+bool is_in_dst;
+
+i18n_ucalendar_is_in_daylight_time(ucalendar, &amp;is_in_dst);
+</pre>
+
+<p>In case of the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/locales_tutorial/getting_system_loc_and_time_zone.htm" target="_blank">Getting the System Locale</a> use case, you can find helpful 2.3 API information in the <a href="../../../../org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm">Runtime information Tutorial</a>. Getting the system locale is now done by using the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_default()</span> function (<span style="font-family: Courier New,Courier,monospace">GetSystemLocale()</span> in the 2.2.1 version). To get the full name of the specified locale, the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> function is used. To get the language for the given locale, call the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function.</p>
+<p>The Formatting Numbers use case is now the <a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm#numbers">Managing Numbers</a> use case. The functions in these use cases match like this:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">CreateNumberFormatter()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">i18n_unumber_create()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">Format()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">i18n_unumber_get_symbol()</span></li>
+</ul>
+<p>For more information, see the tutorials.</p>
+
+<h2 id="locations" name="locations">Locations</h2>
+<p>To work with the location functionality, the 2.3 API model requires creating and starting the Location Manager instance. It is an equivalent to the <span style="font-family: Courier New,Courier,monospace">LocationProvider</span> class from the 2.2.1 API.</p>
+<pre class="prettyprint">
+location_manager_h manager;
+
+// Use LOCATIONS_METHOD_HYBRID to support both GPS and WPS
+location_manager_create(LOCATIONS_METHOD_GPS, &amp;manager); 
+location_manager_start(manager); // Start the location manager
+
+location_manager_stop(manager); // Stop the location manager
+// Destroy the location manager to release the allocated memory
+location_manager_destroy(manager); 
+</pre>
+
+<p>The first part of the old tutorial is Getting the Last Known Location. The same section appears in the new tutorials. The difference in the new API is that the function used to get the last location (<span style="font-family: Courier New,Courier,monospace">location_manager_get_last_location()</span>) takes pointers to parameters of the location and fulfills them with data. It also returns the error code, instead of returning the <span style="font-family: Courier New,Courier,monospace">Location</span> structure like it did with the <span style="font-family: Courier New,Courier,monospace">GetLastKnownLocation()</span> function in the 2.2.1 API. As long as you have all the parameters fulfilled by the function and you have the pointers to the obtained values, you already have the timestamp and coordinates values, so there is no need to call the <span style="font-family: Courier New,Courier,monospace">GetTimestamp()</span> and <span style="font-family: Courier New,Courier,monospace">GetCoordinates()</span> functions, like in the 2.2.1 tutorial.</p>
+<pre class="prettyprint">
+double altitude, latitude, longitude, climb, direction, speed;
+double horizontal, vertical;
+location_accuracy_level_e level;
+time_t timestamp;
+
+int error_code = location_manager_get_last_location(manager, &amp;altitude, &amp;latitude, &amp;longitude, &amp;climb, &amp;direction, &amp;speed, &amp;level, &amp;horizontal, &amp;vertical, &amp;timestamp);
+</pre>
+
+<p>The next part about Getting Location Updates also has its equivalent in the new 2.3 tutorials. Now, it is much simpler to handle the location update events. The only thing you have to do to get the location updates is to register the proper callback by using the <span style="font-family: Courier New,Courier,monospace">location_manager_set_position_updated_cb()</span> function. As well as in the 2.2.1 API, it is possible to set the interval for callback calls:</p>
+<pre class="prettyprint">
+location_manager_set_position_updated_cb(manager, position_updated, 2, NULL); // Interval is set to 2 seconds
+</pre>
+<p>When the callback is called, it already has all the position information stored in its parameters, so there is no need to call any function, like <span style="font-family: Courier New,Courier,monospace">GetCoordinates()</span>, inside the callback:</p>
+<pre class="prettyprint">
+static void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// You can manipulate the obtained location information here. For example:
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The latitude value is: %d&quot;, latitude);
+}
+</pre>
+<p>For more information, see the Getting Location Updates use case in the 2.3 Location Manager Tutorial.</p>
+
+
+<p>The last section of the 2.2.1 Location Tutorial,  Monitoring Regions, is not covered by the new 2.3 tutorial, but the functionality described there can be found in the Location Manager documentation in 2.3 API. Now, it is easier to track the region changes. There is no need to create the class for a proper Listener or do other actions described in the 2.2.1 tutorial. You only have to set the proper callback that is called when the specified boundary area is entered or exited. To do this, use the <span style="font-family: Courier New,Courier,monospace">location_bounds_set_state_changed_cb()</span> function. For more information, see the Location Manager module documentation.</p>
+<pre class="prettyprint">
+int poly_size = 3;
+location_coords_s coord_list[poly_size];
+coord_list[0].latitude = 10;
+coord_list[0].longitude = 10;
+coord_list[1].latitude = 20;
+coord_list[1].longitude = 20;
+coord_list[2].latitude = 30;
+coord_list[2].longitude = 10;
+location_bounds_h bounds_poly;
+
+location_bounds_create_polygon(coord_list, poly_size, &amp;bounds_poly); // Create a triangle shaped polygon
+
+location_bounds_set_state_changed_cb(bounds_poly, bounds_state_changed_cb, NULL); // Set the callback
+
+static void bounds_state_changed_cb(location_boundary_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (LOCATIONS_BOUNDARY_IN == state)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The boundary was entered&quot;);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The boundary was exited&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h2 id="media" name="media">Media</h2>
+<h3 id="audio" name="audio">PLAYING AUDIO -&gt; PLAYING AN AUDIO FILE (PLAYER TUTORIAL)</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">OpenFile()</span> functionality from the 2.2.1 version is now handled by the <span style="font-family: Courier New,Courier,monospace">player_set_uri()</span> function. It specifies which file is played. To start the playback, use the <span style="font-family: Courier New,Courier,monospace">player_start()</span> function. It is like the <span style="font-family: Courier New,Courier,monospace">Play()</span> function from the 2.2.1 API. One important difference between 2.2.1 and 2.3 APIs is that, before the playback can be started, the <span style="font-family: Courier New,Courier,monospace">player_set_uri()</span> and <span style="font-family: Courier New,Courier,monospace">player_prepare()</span> functions have to be called. The <span style="font-family: Courier New,Courier,monospace">player_set_uri()</span> function sets the file path to the file that is played. It is important to call this function before calling the <span style="font-family: Courier New,Courier,monospace">player_prepare()</span> function, because otherwise an error occurs. The <span style="font-family: Courier New,Courier,monospace">player_prepare()</span> function prepares the media player for playback. In the 2.2.1 API, no such function had to be used before playing the file. The rest of the functionalities described in the 2.2.1 tutorial are covered in the 2.3 API by the following functions: <span style="font-family: Courier New,Courier,monospace">player_stop()</span> to stop the playback, <span style="font-family: Courier New,Courier,monospace">player_pause()</span> to pause the playback, and <span style="font-family: Courier New,Courier,monospace">player_get_play_position()</span> to get the current playback position in milliseconds. </p>
+<pre class="prettyprint">
+player_h player;
+
+char file_path[1024];
+strcpy(file_path, app_get_shared_data_path());
+strcat(file_path, &quot;audio.mp3&quot;);
+
+player_create(&amp;player);
+player_set_uri(player, file_path);
+player_prepare(player);
+player_start(player);
+</pre>
+
+<p>To read and set playing position, use:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Player::GetPosition()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">player_get_play_position()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">Player::SeekTo()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">player_set_play_position()</span>
+<p>The <span style="font-family: Courier New,Courier,monospace">player_set_play_position()</span> function is asynchronous (like its 2.2.1 counterpart) and signals seeking completion through a callback.</p></li></ul>
+
+<p>To check the rest of the player functionalities, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API Reference</a>.</p>
+
+<h3 id="video" name="video">PLAYING VIDEO -&gt; PLAYING A VIDEO FILE (PLAYER TUTORIAL)</h3>
+<p>Playing the video file is very similar to playing the audio file. The difference is that you have to set the display where the video is presented. There was no such functionality mentioned in the 2.2.1 tutorial, but it can be found in the 2.3 tutorial.</p>
+<pre class="prettyprint">
+player_set_display(player, PLAYER_DISPLAY_TYPE_EVAS, GET_DISPLAY(evas_obj));
+</pre>
+
+<h3 id="control" name="control">HANDLING PLAYER CONTROLLERS -&gt; PLAYER DOCUMENTATION</h3>
+<p>To handle the events of opening the player and reaching the end of a played file, you can use the <span style="font-family: Courier New,Courier,monospace">player_prepared_cb()</span> callback with the <span style="font-family: Courier New,Courier,monospace">player_prepare_async()</span> function and register the <span style="font-family: Courier New,Courier,monospace">player_completed_cb()</span> callback using the <span style="font-family: Courier New,Courier,monospace">player_set_completed_cb()</span> function. The first one is related to the situation when the player is prepared. The second one is invoked when the player reaches the end of the stream.</p>
+
+<pre class="prettyprint">
+player_prepare_async(player, _prepared_cb, NULL);
+</pre>
+<p>This function asynchronously prepares the player. After its work is finished, the <span style="font-family: Courier New,Courier,monospace">_prepared_cb()</span> is invoked.</p>
+<pre class="prettyprint">
+static void _prepared_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;// This callback is invoked when the player is prepared
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The player is ready to start the playback&quot;);
+}
+</pre>
+<p>This code presents the example usage of the <span style="font-family: Courier New,Courier,monospace">player_set_completed_cb()</span> function.</p>
+<pre class="prettyprint">
+player_set_completed_cb(player, _player_completed_cb, NULL);
+
+static void _player_completed_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The playback ended.&quot;);
+}
+</pre>
+<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API Reference</a>.</p>
+
+<h3 id="camera" name="camera">CAPTURING AND RECORDING MEDIA -&gt; CAMERA TUTORIAL</h3>
+<p>The overall models of capturing and recording functionalities are pretty much the same in both API versions. The corresponding functions are:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">Construct()</span> and <span style="font-family: Courier New,Courier,monospace">PowerOn()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">camera_create()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">StartPreview()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">camera_start_preview()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">StopPreview()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">camera_stop_preview()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">OnCameraPreviewed()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">camera_set_preview_cb()</span></li>
+</ul>
+<p>The main difference is connected with setting the display surface for the camera preview. To set the place for displaying the preview image, use the <span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function. An <span style="font-family: Courier New,Courier,monospace">Evas_object</span> can be used for showing the preview, instead dealing with, for example, an OverlayRegion or rectangles. </p>
+<pre class="prettyprint">
+camera_h camera;
+
+camera_create(CAMERA_DEVICE_CAMERA0, camera);
+camera_set_display(camera, CAMERA_DISPLAY_TYPE_EVAS, put_your_evas_object_here);
+camera_set_preview_resolution(camera, width_resolution, height_resolution);
+camera_start_preview(camera);
+camera_stop_preview(camera);
+</pre>
+
+<p>The next little difference is about getting the supported preview resolutions. In the 2.2.1 API, it was possible by using the <span style="font-family: Courier New,Courier,monospace">GetSupportedPreviewResolutionListN()</span> function. Now, in 2.3 API model, the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span> function must be used. It iterates through all the supported preview resolutions and calls the callback, passed as one of the parameters, for each of them. The <span style="font-family: Courier New,Courier,monospace">camera_set_preview_resolution()</span> function is a replacement for the <span style="font-family: Courier New,Courier,monospace">SetPreviewResolution()</span> from the 2.2.1 API. The same applies with setting the capture resolution. Use the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_capture_resolution()</span> and <span style="font-family: Courier New,Courier,monospace">camera_set_capture_resolution()</span> functions for this purpose.</p>
+<pre class="prettyprint">
+int resolution[2];
+
+// Find resolution that is supported by the device
+camera_foreach_supported_preview_resolution(camera, _preview_resolution_cb, resolution); 
+
+// Set supported resolution for camera preview
+camera_set_preview_resolution(camera, resolution[0], resolution[1]); 
+
+static bool _preview_resolution_cb(int width, int height, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int *resolution = (int*)user_data;
+&nbsp;&nbsp;&nbsp;resolution[0] = width;
+&nbsp;&nbsp;&nbsp;resolution[1] = height;
+
+&nbsp;&nbsp;&nbsp;return false; // Stop the iteration after finding first supported resolution
+}
+</pre>
+
+<p>Setting the capture and preview format follows the same scheme as setting the resolution. As you can see, the main difference in this matter is that instead of getting the list of supported resolutions and formats, you have functions to iterate through all of them and invoke callbacks for each one to handle it (<span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_capture_format()</span> and <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_format()</span>).</p>
+
+<h3 id="record" name="record">RECORDING AUDIO -&gt; AUDIO RECORDER TUTORIAL</h3>
+<p>The old <span style="font-family: Courier New,Courier,monospace">Construct()</span> function is now covered by the <span style="font-family: Courier New,Courier,monospace">recorder_create_audiorecorder()</span> function. It creates the handle to the audio recorder instance.</p>
+<pre class="prettyprint">
+recorder_h recorder;
+
+recorder_create_audiorecorder(&amp;recorder);
+</pre>
+
+<p>Before the recording can be started, the file for the recording has to be specified. The 2.2.1 API provided the <span style="font-family: Courier New,Courier,monospace">CreateAudioFile()</span> function. In 2.3, there are 2 functions responsible for this:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">recorder_set_file_format()</span> defines in what kind of file format the recording is stored.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">recorder_set_filename()</span> sets the name of the file in which the recording is stored.</li>
+</ul>
+<pre class="prettyprint">
+recorder_set_file_format(recorder, RECORDER_FILE_FORMAT_3GP);
+
+recorder_set_filename(recorder, your_audio_file_path);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">SetMaxRecordingSize()</span> and <span style="font-family: Courier New,Courier,monospace">SetMaxRecordingTime()</span> functions are now covered by the <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_size_limit()</span> and <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_time_limit()</span> functions.</p>
+<pre class="prettyprint">
+// Set max file size to 1024 [kB]
+recorder_attr_set_size_limit(recorder, 1024); 
+
+// Set max recording time to 2 minutes [120 seconds]
+recorder_attr_set_time_limit(recorder, 120); 
+</pre>
+
+<p>Getting the supported file formats and codecs is again implemented with the usage of a set of foreach functions. These functions work the same way as it was described in previous sections.</p>
+<p>In the 2.2.1 API, it was possible to set the quality of the recording, by simply using the <span style="font-family: Courier New,Courier,monospace">SetQuality()</span> function. Now, the quality can be controlled by the different functions from the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__ATTRIBUTES__MODULE.html">Recorder Attributes</a> submodule.</p>
+<p>Starting, pausing, and stopping the record process are managed by similar functions like in the 2.2.1 API. The <span style="font-family: Courier New,Courier,monospace">Record()</span>, <span style="font-family: Courier New,Courier,monospace">Pause()</span>, <span style="font-family: Courier New,Courier,monospace">Stop()</span>, and <span style="font-family: Courier New,Courier,monospace">Close()</span> functions are now covered by the <span style="font-family: Courier New,Courier,monospace">recorder_prepare()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_start()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_pause()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_cancel()</span>, and <span style="font-family: Courier New,Courier,monospace">recorder_commit()</span> functions.</p>
+<p>The scheme of recording a video file is similar to the process of recording an audio file. The difference is that the display for the camera has to be specified. The recorder has to be created with the <span style="font-family: Courier New,Courier,monospace">recorder_create_videorecorder()</span> function, instead of using the <span style="font-family: Courier New,Courier,monospace">recorder_create_audiorecorder()</span> function. For more information, see the tutorials.</p>
+
+<h3 id="decode" name="decode">DECODING IMAGES -&gt; DECODING FROM A FILE OR MEMORY (IMAGE UTIL TUTORIAL)</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">DecodeN()</span> function has been replaced with the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg()</span> and <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg_from_memory()</span> functions.</p>
+<p>Note that the <span style="font-family: Courier New,Courier,monospace">Tizen::Media::Image::DecodeN()</span> function supports the JPEG, GIF, PNG, BMP, TIFF, and WBMP formats, while the <span style="font-family: Courier New,Courier,monospace">image_util_*</span> functions support only the JPEG format.</p>
+
+<h3 id="image" name="image">ENCODING AN IMAGE TO A FILE -&gt; ENCODING TO A FILE OR MEMORY (IMAGE UTIL TUTORIAL)</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">EncodeToFile()</span> function has been replaced with the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg()</span> function.</p>
+<p>Note that the <span style="font-family: Courier New,Courier,monospace">Tizen::Media::Image::EncodeToFile()</span> function supports the JPEG, BMP, and PNG formats, while the <span style="font-family: Courier New,Courier,monospace">image_util_*</span> functions support only the JPEG format.</p>
+
+<h3 id="buffer" name="buffer">ENCODING AN IMAGE TO A BUFFER AND WRITING TO A FILE -&gt; IMAGE UTIL TUTORIAL</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">EncodeToBufferN()</span> function has been replaced with the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg_to_memory()</span> and <span style="font-family: Courier New,Courier,monospace">fwrite()</span> functions to save the buffer into the file.</p>
+<p>Note that the <span style="font-family: Courier New,Courier,monospace">Tizen::Media::Image::EncodeToBufferN()</span> function supports the JPEG, BMP, and PNG formats, while the <span style="font-family: Courier New,Courier,monospace">image_util_*</span> functions support only the JPEG format.</p>
+
+<h2 id="messaging" name="messaging">Messaging</h2>
+<p>Sending messages is still done asynchronously, and this is why the callback which notifies about the status of sending the message is needed. In the 2.2.1 API, there was the <span style="font-family: Courier New,Courier,monospace">OnSmsMessageSent()</span> listener. In the 2.3 API, the function responsible for sending messages takes as a parameter the callback function that is called after sending the message is finished and informs about the status of this operation. Creating a message and setting its attributes is similar to the 2.2.1 scenario. The difference is that when you want to create the MMS message, you do not need to create different listeners. The only thing you need to do is to use <span style="font-family: Courier New,Courier,monospace">MESSAGES_TYPE_MMS</span> as a parameter of the <span style="font-family: Courier New,Courier,monospace">messages_create_message()</span> function.</p>
+<pre class="prettyprint">
+messages_message_h message = NULL;
+messages_service_h message_service = NULL;
+
+// The connection with the message service must be established
+messages_open_service(&amp;message_service); 
+
+// To create the MMS, use MESSAGES_TYPE_MMS instead
+messages_create_message(MESSAGES_TYPE_SMS, &amp;message); 
+messages_add_address(message, &quot;Put the recipient number here&quot;, MESSAGES_RECIPIENT_TO);
+messages_set_text(message, &quot;Put the text of the message here&quot;);
+
+// Part for MMS messages only
+messages_mms_set_subject(message, &quot;Put the MMS subject here&quot;);
+messages_mms_add_attachment(message, MESSAGES_MEDIA_IMAGE, your_image_file_path);
+
+// The third parameter (&quot;true&quot;) defines whether to save the message to the sentbox
+messages_send_message(message_service, message, true, sent_msg_cb, NULL);
+
+// Close the connection with the message service, when no longer needed
+messages_close_service(message_service); 
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">sent_msg_cb()</span> function is called when the process of sending the message to all recipients is finished:</p>
+<pre class="prettyprint">
+static void sent_msg_cb(messages_sending_result_e result, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (MESSAGES_SENDING_SUCCEEDED == result)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Message sending succeeded&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Message sending failed&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>To listen for incoming messages in the 2.2.1 API, the <span style="font-family: Courier New,Courier,monospace">OnSmsMessageReceived()</span> listener had to be overridden and the <span style="font-family: Courier New,Courier,monospace">AddSmsMessageEventListener()</span> function used to add the listener to the SMS manager. In the 2.3 API, use the <span style="font-family: Courier New,Courier,monospace">messages_set_message_incoming_cb()</span> function. It registers a callback for the given messages service, invoked when an incoming message is received.</p>
+<pre class="prettyprint">
+messages_set_message_incoming_cb(message_service, _messages_incoming_cb, NULL);
+
+static void _messages_incoming_cb(messages_message_h incoming_message, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Manage the received message here.
+}
+</pre>
+
+<p>In the 2.3 API, there are 2 ways of searching messages. One way is to use the <span style="font-family: Courier New,Courier,monospace">messages_search_message()</span> function. It works similarly to the <span style="font-family: Courier New,Courier,monospace">SearchMessageBoxN()</span> function from the 2.2.1 API. It returns the list of messages that match the given searching conditions.</p>
+<pre class="prettyprint">
+messages_message_h *message_array;
+int array_length;
+int total_matching;
+
+messages_search_message(message_service, MESSAGES_MBOX_ALL,  MESSAGES_TYPE_UNKNOWN, &quot;keyword searched in the text and subject&quot;, &quot;recipient address&quot;, 0, 0, &amp;message_array, &amp;array_length, &amp;total_matching);
+</pre>
+<p>The second way is to use the <span style="font-family: Courier New,Courier,monospace">messages_foreach_message()</span> function. In this case, instead of obtaining the list of all the queried messages, the search function iterates through messages and launches a callback for those that match the query.</p>
+<pre class="prettyprint">
+messages_foreach_message(message_service, MESSAGES_MBOX_ALL,  MESSAGES_TYPE_UNKNOWN, &quot;keyword searched in the text and subject&quot;, &quot;recipient address&quot;, 0, 0, _search_messages_cb, NULL);
+
+static void _search_messages_cb(messages_message_h message, int index, int result_count, int total_count, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Manage the found matching message here
+&nbsp;&nbsp;&nbsp;return true; // To continue the iteration. To stop the iteration, return false
+}
+</pre>
+
+<p>Sending an email follows the same pattern as sending an MMS message in both 2.3 and 2.2.1 versions of the API. The difference is that the callback that notifies you about the operation status, after sending is finished, is not passed to the send function, but it is set by an independent <span style="font-family: Courier New,Courier,monospace">email_set_message_sent_cb()</span> function.</p>
+<pre class="prettyprint">
+email_h email;
+
+email_create_message(&amp;email);
+email_add_recipient(email, EMAIL_RECIPIENT_TYPE_TO, &quot;example@mail.com&quot;);
+email_add_attach(email, your_attachment_file_path);
+email_set_message_sent_cb(email, email_send_status, NULL);
+
+// The second parameter (&quot;false&quot;) defines whether to save the email in the sentbox
+email_send_message(email, false); 
+
+static void email_send_status(email_h email, email_sending_e result, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if(EMAIL_SENDING_SUCCEEDED == result) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Email was sent successfully&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="push" name="push">PUSH</h3>
+<p>In the 2.3 API, to work with the push messaging service, you have to fulfill the following requirements:</p>
+<ul>
+       <li>Your device must be connected to the internet and be able to contact to any IP addresses with the port 5223.</li>
+       <li>Remember that the Tizen push server identifies your applications using the package ID. It is the ID randomly generated or entered by yourself, when you create your project in the Tizen SDK.</li>
+       <li>Your application needs to have permission to the Tizen push servers. You can request it by sending an email to the Tizen push service team (push.tizen@samsung.com). You can find the list of required information that you have to put in that email in the 2.3 Push Tutorial. When the team approves your request, you receive a push app ID corresponding to your package ID. You have to keep this push app ID confidential, otherwise your push notifications can be hijacked by malicious applications.</li>
+</ul>
+
+<p>Before you can send messages and register a request for push messaging like in the 2.2.1 API using the <span style="font-family: Courier New,Courier,monospace">RegisterPushService()</span> function, you have to establish the connection with the push daemon using the <span style="font-family: Courier New,Courier,monospace">push_service_connect()</span> function. The first parameter of this function is the push app ID, received from the Tizen push server team. There are also 2 callbacks described below. The next one is dedicated for some user data that is passed to the callback function and the last one is the handle to the <span style="font-family: Courier New,Courier,monospace">push_connection_s</span> structure, which is fulfilled by the function.</p>
+<pre class="prettyprint">
+push_service_connection_h push_connection;
+
+push_service_connect(&quot;Push app ID received from the Tizen push server team&quot;, _state_cb, _noti_cb, NULL, &amp;push_connection);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">_state_cb</span> parameter is a callback function invoked when the state of the push service changes. It arrives with the current state of the service as its parameter. You can use it to handle the different states of the push service.</p>
+<pre class="prettyprint">
+static void _state_cb(push_service_state_e state, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;switch (state)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_UNREGISTERED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The push service is currently unregistered.&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_REGISTERED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The push service is registered.&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;An error occurred.&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unknown state.&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">_noti_cb</span> parameter is a callback function invoked when a notification arrives from the server through the push daemon.</p>
+<pre class="prettyprint">
+static void _noti_cb(push_service_notification_h notification, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char *data = NULL;
+&nbsp;&nbsp;&nbsp;char *message = NULL;
+&nbsp;&nbsp;&nbsp;long long int time_stamp;
+
+// Retrieve the application data stored in the notification
+&nbsp;&nbsp;&nbsp;push_service_get_notification_data(notification, &amp;data); 
+
+// Retrieve the message carried by the notification
+&nbsp;&nbsp;&nbsp;push_service_get_notification_message(notification, &amp;message); 
+
+// Retrieve the time of the notification creation
+&nbsp;&nbsp;&nbsp;push_service_get_notification_time(noti, &amp;time_stamp); 
+}
+</pre>
+<p>Remember that the <span style="font-family: Courier New,Courier,monospace">push_service_get_notification_data()</span> and <span style="font-family: Courier New,Courier,monospace">push_service_get_notification_message()</span> functions allocate the memory for the data they return, so this memory needs to be released with the <span style="font-family: Courier New,Courier,monospace">free()</span> function when it is no longer needed. However, do not free the notification structure. It is released automatically after the callback function execution.</p>
+
+<p>When the connection with the push daemon is established, you can proceed with the registration process of your application. The <span style="font-family: Courier New,Courier,monospace">push_service_register()</span> function is an equivalent for the <span style="font-family: Courier New,Courier,monospace">RegisterPushService()</span> function. However, it no longer takes the request ID. It takes the daemon connection handle and the result callback function instead. The callback is called at the end of the registration process. That callback carries the result of the registration as its first parameter. The application does not have to deliver the registration ID anymore. It is assigned by the push server and can be obtained with the <span style="font-family: Courier New,Courier,monospace">push_service_get_registration_id()</span> function.</p>
+<pre class="prettyprint">
+push_service_register(push_connection, _result_cb, NULL);
+
+static void _result_cb(push_service_result_e result, const char *msg, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (PUSH_SERVICE_RESULT_SUCCESS == result) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Your application has been successfully registered to the push server.&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">UnregisterPushService()</span> function from the 2.2.1 API also has its equivalent - the <span style="font-family: Courier New,Courier,monospace">push_service_deregister()</span> function. It takes the same parameters as the registration function.</p>
+<pre class="prettyprint">
+push_service_deregister(push_connection, _deregistration_result_cb, NULL);
+
+static void _deregistration_result_cb(push_service_result_e result, const char *msg, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (PUSH_SERVICE_RESULT_SUCCESS == result) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Your application has been successfully deregistered from the push server.&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The 2.3 API supports handling the push messages in 2 different ways as it was in the 2.2.1 model. If the application is running (connected to the push daemon) and the message is received, the notification callback set during establishing the connection with the push daemon is called. It is like the <span style="font-family: Courier New,Courier,monospace">IPushEventListener::OnPushMessageReceived()</span> event handler from the 2.2.1 API. In the second situation, when the application is not running, there are 2 possible solutions. One is like in 2.2.1 and involves saving the notification in a database and reading it later, when the application is launched. This functionality can be handled by using the <span style="font-family: Courier New,Courier,monospace">push_service_get_unread_notification()</span> function like the <span style="font-family: Courier New,Courier,monospace">GetUnreadMessagesN()</span> function from the 2.2.1 API.</p>
+<pre class="prettyprint">
+push_service_notification_h notification;
+
+push_service_get_unread_notification(push_connection, &amp;notification);
+</pre>
+<p>The second one differs from the one from 2.2.1. The push message can be send from your application server with an option <span style="font-family: Courier New,Courier,monospace">&#39;action=LAUNCH&#39;</span>, which forcibly launches the application and delivers the notification as a bundle. To handle this situation, the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> function from the App Control module is required. This function gets the operation that must be performed based on the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> handle passed to the <span style="font-family: Courier New,Courier,monospace">app_control()</span> callback that is invoked when your application is launched by another application or process.</p>
+<pre class="prettyprint">
+static void app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;char *operation = NULL;
+&nbsp;&nbsp;&nbsp;char *notification_data = NULL;
+
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
+
+// Retrieve notification data
+&nbsp;&nbsp;&nbsp;notification_data = push_service_app_control_to_noti_data(app_control, operation);  from the bundle.
+}
+</pre>
+<p>Remember to release the memory allocated for the operation and <span style="font-family: Courier New,Courier,monospace">notification_data</span> to avoid memory leaks.</p>
+
+<h2 id="net" name="net">Net</h2>
+<p>The initialization of the Bluetooth connection does not require the creation of the <span style="font-family: Courier New,Courier,monospace">Bluetooth</span> class. In the 2.3 API, the <span style="font-family: Courier New,Courier,monospace">bt_initialize()</span> function must be called without any parameters.</p>
+<pre class="prettyprint">
+bt_initialize();
+</pre>
+<p>The Bluetooth adapter can be launched by calling the <span style="font-family: Courier New,Courier,monospace">bt_adapter_enable()</span> function. Getting the name and address of the local device is done in the same way as in the 2.2.1 API. The difference is in getting the list of paired devices. The <span style="font-family: Courier New,Courier,monospace">bt_adapter_foreach_bonded_device()</span> function iterates through all the bonded devices instead of returning the list of paired devices like the <span style="font-family: Courier New,Courier,monospace">GetPairedDeviceListN()</span> function from the 2.2.1 API. The specified callback is called for every paired device. The callback carries the information about a particular bonded device as its first parameter, so it is possible to check the device name by looking at the passed <span style="font-family: Courier New,Courier,monospace">bt_device_info_s</span> structure.</p>
+<p>The documentation for the Bluetooth OPP (Object Push Profile) client provides functions to initialize the OPP client (<span style="font-family: Courier New,Courier,monospace">bt_opp_client_initialize()</span>), add files to be pushed (<span style="font-family: Courier New,Courier,monospace">bt_opp_client_add_file()</span>), and push them to the OPP server (<span style="font-family: Courier New,Courier,monospace">bt_opp_client_push_files()</span>).</p>
+<pre class="prettyprint">
+char remote_address[18] = &quot;The address of the remote device&quot;;
+
+bt_opp_client_initialize();
+
+bt_opp_client_add_file(your_file_path);
+ 
+bt_opp_client_push_files(remote_address, _bt_opp_client_push_responded_cb, _bt_opp_client_push_progress_cb, _bt_opp_client_push_finished_cb, NULL);
+
+void _bt_opp_client_push_responded_cb(int result, const char *remote_address, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Called when OPP server responds to the push request
+}
+
+void _bt_opp_client_push_progress_cb(const char *file, long long size, int percent, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Called when each file is being transferred
+}
+
+void _bt_opp_client_push_finished_cb(int result, const char *remote_address, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Called when the push request is finished
+}
+</pre>
+<p>For more details, see the <a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm#exc">Exchanging Data Using Object Push Profile (OPP)</a> use case of the Bluetooth Tutorial and the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__OPP__MODULE.html">Bluetooth OPP Client API Reference</a>.</p>
+
+<p>The OPP server in the 2.3 API works similarly to the 2.2.1 model. The <span style="font-family: Courier New,Courier,monospace">bt_opp_server_initialize_by_connection_request()</span> function replaces the <span style="font-family: Courier New,Courier,monospace">StartService()</span> function. It defines that the specified callback is called to handle the incoming OPP connection request. There are also functions for setting the destination, accepting the push request, and stopping the push service. For more information, see the <a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm#exc">Bluetooth OPP Server tutorial</a>.</p>
+<pre class="prettyprint">
+
+bt_opp_server_initialize_by_connection_request(your_destination_path, connection_requested_cb_for_opp_server, NULL);
+
+void connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Called when an OPP connection is requested
+&nbsp;&nbsp;&nbsp;// Call bt_opp_server_accept_connection() if you want to accept
+&nbsp;&nbsp;&nbsp;// Otherwise, call bt_opp_server_reject_connection()
+}
+</pre>
+
+<p>For the Bluetooth SPP module, see the <a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm#connect">Serial Port Profile (SPP)</a> use case of the Bluetooth Tutorial for 2.3 API.</p>
+<p>The 2.3 API supports the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__HDP__MODULE.html">Bluetooth Health Device Profile (HDP)</a> connections. Connecting to the source is similar, just the name of the function has changed a little. The connection is being established asynchronously, so still some kind of listener or callback is needed. This time (in the 2.3 API), the callbacks for connected and disconnected states are set by using the <span style="font-family: Courier New,Courier,monospace">bt_hdp_set_connection_state_changed_cb()</span> function. The rest of the functionality is pretty much the same, so check the new function names in the documentation.</p>
+<p>The Discovering Bluetooth Devices use case works similarly in both 2.2.1 and 2.3 APIs. For more information, see the <a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm#find">Finding Other Devices</a> use case in the Bluetooth Tutorial for the 2.3 API.</p>
+<p>Pairing 2 Bluetooth devices is called bonding devices in the 2.3 API. The <span style="font-family: Courier New,Courier,monospace">bt_device_create_bond()</span> function works like the <span style="font-family: Courier New,Courier,monospace">Pair()</span> function in the 2.2.1 API. The <span style="font-family: Courier New,Courier,monospace">IBluetoothDeviceEventListener::OnBluetoothPaired()</span> event handler is now covered by the functionality of the <span style="font-family: Courier New,Courier,monospace">bt_device_set_bond_created_cb()</span> function, which sets the callback invoked when the pairing process is finished.</p>
+<p>All the functionality connected with the HTTP protocol is now covered by the libcurl library. All the sockets are now provided with glibc library.</p>
+<p>The process of Activating and Deactivating a Wi-Fi Device is very similar in both 2.2.1 and 2.3 tutorials. The <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> functions work like <span style="font-family: Courier New,Courier,monospace">Activate()</span> and <span style="font-family: Courier New,Courier,monospace">Deactivate()</span> in 2.2.1. Instead of creating a Wi-Fi manager, the 2.3 API requires you to call the <span style="font-family: Courier New,Courier,monospace">wifi_initialize()</span> function before starting the work with Wi-Fi.</p>
+<pre class="prettyprint">
+wifi_initialize();
+
+wifi_deinitialize();
+</pre>
+
+<h2 id="security" name="security">Security</h2>
+<p>Most of the security features from the 2.2.1 API are provided now by the OpenSSL library. However, there is also a Key Manager module in the 2.3 API, which enables some of the 2.2.1 Security module functionalities.</p>
+<p>In 2.2.1, the <span style="font-family: Courier New,Courier,monospace">GenerateKeyPairN()</span> function was used to generate a pair of keys. Then the <span style="font-family: Courier New,Courier,monospace">EncryptN()</span> method of the RsaCipher class was used to apply the RSA cipher to the generated keys. In the 2.3 API, to generate key pairs (RSA or ECDSA), use the <span style="font-family: Courier New,Courier,monospace">ckmc_create_key_pair_rsa()</span> or <span style="font-family: Courier New,Courier,monospace">ckmc_create_key_pair_ecdsa()</span> function.</p>
+<pre class="prettyprint">
+size_t size = 2048; // Key Manager supports 1024, 2048, and 4096
+const char *private_key_alias = &quot;PRV_RSA1&quot;;
+const char *public_key_alias = &quot;PUB_RSA1&quot;;
+ckmc_policy_s policy_private_key;
+ckmc_policy_s policy_public_key;
+
+// This private key is encrypted with a password additionally
+policy_private_key.password = (char *)&quot;pri_password&quot;; 
+// This key cannot be extracted from the key manager
+policy_private_key.extractable = false; 
+
+policy_public_key.password = NULL;
+policy_public_key.extractable = true;
+
+ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+</pre>
+
+<p>The generation of the pseudo-random numbers is now provided by the OpenSSL rand generator.</p>
+<p>All the cryptographic algorithms presented in the 2.2.1 tutorials, such as AES, Hash, HMAC and RSA, are provided by the OpenSLL library as well, so if you need them in your application, study the OpenSLL documentation and examples.</p>
+
+<h2 id="shell" name="shell">Shell</h2>
+<p>The Creating Notifications use case can now be found in the Application Framework module instead of the 2.2.1 Shell module. The notification is created with the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function, which takes the notification type (Regular or Ongoing) as its parameter. This allowed the reduction of all the different <span style="font-family: Courier New,Courier,monospace">Notify()</span> functions from the 2.2.1 API to 1 <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function.</p>
+<pre class="prettyprint">
+notification_h notification;
+
+// The NOTIFICATION_TYPE_ONGOING can also be used here
+notification = notification_create(NOTIFICATION_TYPE_NOTI); 
+notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;I'm Title&quot;, &quot;IDS_APP_BODY_IM_TITLE&quot;, NOTIFICATION_VARIABLE_TYPE_NONE);
+notification_post(notification);
+</pre>
+
+<h2 id="social" name="social">Social</h2>
+<h3 id="account" name="account">ACCOUNT MANAGEMENT</h3>
+<p>In the 2.3 API, there is no account manager instance. The connection with the accounts database has to be established instead. The constructor for the account is replaced with the <span style="font-family: Courier New,Courier,monospace">account_create()</span> function. The <span style="font-family: Courier New,Courier,monospace">AddAccount()</span> function from the 2.2.1 API is covered by the <span style="font-family: Courier New,Courier,monospace">account_insert_to_db()</span> function. Differently from the old function, the new one takes an additional parameter, the pointer to the account ID. This parameter is filled with the ID associated with the account inside the database.</p>
+<pre class="prettyprint">
+account_h account = NULL;
+int account_id = 0;
+
+account_connect(); // Establish the connection with the account database
+
+account_create(&amp;account);
+
+account_insert_to_db(account, &amp;account_id);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">SetExtendedData()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">account_set_custom()</span> function and some other functions provided to set each of the account additional information (for example: <span style="font-family: Courier New,Courier,monospace">account_set_user_name()</span>).</p>
+<pre class="prettyprint">
+account_set_user_name(account, &quot;account user name&quot;);
+
+account_set_display_name(account, &quot;account display name&quot;);
+
+account_set_domain_name(account, &quot;account domain name&quot;);
+
+account_set_email_address(account, &quot;account email address&quot;);
+
+account_set_custom(account, &quot;key1&quot;, &quot;value1&quot;);
+</pre>
+
+<p>Instead of a single <span style="font-family: Courier New,Courier,monospace">UpdateAccount()</span> function, the 2.3 API has <span style="font-family: Courier New,Courier,monospace">account_update_to_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace">account_update_to_db_by_id_ex()</span>, and
+<span style="font-family: Courier New,Courier,monospace">account_update_to_db_by_user_name()</span> functions to update the account information.</p>
+<pre class="prettyprint">
+account_update_to_db_by_id(account, account_id);
+
+// OR
+
+// Updates the account without checking provider's permission
+account_update_to_db_by_id_ex(account, account_id); 
+
+// OR
+
+account_update_to_db_by_user_name(account, &quot;account user name&quot;, &quot;package name for the user name&quot;);
+</pre>
+
+<p>The removal of the account is now covered by the <span style="font-family: Courier New,Courier,monospace">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace">account_delete_from_db_by_package_name()</span>, and <span style="font-family: Courier New,Courier,monospace">account_delete_from_db_by_user_name()</span> functions, instead of the <span style="font-family: Courier New,Courier,monospace">RemoveAccount()</span> function.</p>
+<pre class="prettyprint">
+account_delete_from_db_by_id(account_id);
+
+// OR
+
+account_delete_from_db_by_package_name(&quot;package name for the user name&quot;)
+
+// OR
+
+account_delete_from_db_by_user_name(&quot;account user name&quot;, &quot;package name for the user name&quot;);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">GetAccountsByAccountProviderN()</span> functionality is now described in the <a href="../../../../org.tizen.tutorials/html/native/social/account_tutorial_n.htm#retrieve">Retrieving Accounts by Account Provider</a> use case in the 2.3 Account Tutorial. Mainly, the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function is responsible for that. Instead of returning the list of accounts, it invokes a callback, specified as its first parameter, for every account that matches given package name.</p>
+<pre class="prettyprint">
+account_query_account_by_package_name(account_callback, &quot;The package name of the account provider&quot;, NULL);
+
+static bool account_callback(account_h account, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Called once for each account in the database matching the given package name.
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">GetAccountProvidersByCapabilityN()</span> method is covered by the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. It does not return the list of account providers, but it invokes the callback specified as the first parameter for each account type that supports the mentioned capability. It takes the capability type as its second parameter. For example, the <span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/account/capability/contact&quot;</span> or <span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT</span> can be used.</p>
+<pre class="prettyprint">
+account_type_query_by_provider_feature(account_type_callback, &quot;http://tizen.org/account/capability/contact&quot;, NULL);
+
+static bool account_type_callback(account_type_h account_type, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Called once for each account type in the database matching given provider capability.
+}
+</pre>
+
+<h3 id="address" name="address">ADDRESS BOOK</h3>
+<p>The Contact module in the 2.3 API has a similar mechanism as the Account Manager module. Again, like it was with accounts, there is no addressbook manager instance. The connection with the contacts database has to be established instead. Use the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function for this purpose.</p>
+<pre class="prettyprint">
+contacts_connect();
+
+contacts_disconnect();
+</pre>
+<p>When the work with contacts is finished, the connection with the database must be closed with the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function.</p>
+
+
+<h4>RETRIEVING PERSON INFORMATION</h4>
+<p>The <span style="font-family: Courier New,Courier,monospace">GetAllPersonsN()</span> functionality is now covered by the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function. It can be used to retrieve all types of records stored in the contacts database. To obtain the list of all persons, the <span style="font-family: Courier New,Courier,monospace">_contacts_person._uri</span> value must be used as its first parameter.</p>
+<pre class="prettyprint">
+contacts_list_h list = NULL;
+
+contacts_db_get_all_records(_contacts_person._uri, 0, 0, &amp;list);
+</pre>
+<p> Note that the first &quot;0&quot; defines the offset - the starting index for getting results. The second one defines the limit for the number of obtained results. In case of the &quot;0&quot; value, all the records are obtained.</p>
+
+<p>To move through the retrieved list, use the Contacts&#39; <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__LIST__MODULE.html">List</a> submodule API. It is very similar to the matching functionality from the 2.2.1 API. In the 2.3 API, the <span style="font-family: Courier New,Courier,monospace">MoveNext()</span> function is covered by the <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> function. The <span style="font-family: Courier New,Courier,monospace">GetCurrent()</span> functionality is provided by the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> function. No enumerator is required. All the actions are called directly for the list, so the handle to that list is always passed as the first parameter for every function from the List submodule.</p>
+<pre class="prettyprint">
+int list_count, counter;
+contacts_record_h record;
+char *display_name;
+char *image_thumbnail_path;
+
+contacts_list_get_count(list, &amp;list_count);
+for (counter = 0; counter &lt; list_count; counter++)
+{
+&nbsp;&nbsp;&nbsp;contacts_list_get_current_record_p(list, &amp;record);
+&nbsp;&nbsp;&nbsp;contacts_record_get_str(record, _contacts_person.display_name, &amp;display_name);
+&nbsp;&nbsp;&nbsp;contacts_record_get_str(record, _contacts_person.image_thumbnail_path, &amp;image_thumbnail_path);
+
+&nbsp;&nbsp;&nbsp;// Manage the display name and thumbnail path for the currently obtained contact here
+
+&nbsp;&nbsp;&nbsp;contacts_list_next(list);
+}
+</pre>
+
+<p>There is no <span style="font-family: Courier New,Courier,monospace">GetFavoritePersonsN()</span> function anymore. To retrieve the list of all favorite contacts, a query filter must be used. The filter is created with the <span style="font-family: Courier New,Courier,monospace">contacts_filter_create()</span> function. To query for favorite contacts, the following condition must be added to the filter:</p>
+<pre class="prettyprint">
+contacts_filter_h filter = NULL;
+
+contacts_filter_create(_contacts_person._uri, &amp;filter);
+contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">filter</span> is the handle to the filter instance. The <span style="font-family: Courier New,Courier,monospace">_contacts_person.is_favorite</span> parameter defines which field the filter operates on. If you want to find only favorite contacts, you define the <span style="font-family: Courier New,Courier,monospace">is_favorite</span> field and set it to <span style="font-family: Courier New,Courier,monospace">true</span> (the third parameter). The whole process of searching the contacts is described below, under the SEARCHING PERSONS USING COMPLEX CONDITIONS use case.</p>
+
+<h4>MANAGING FAVORITES</h4>
+<p>The <span style="font-family: Courier New,Courier,monospace">SetPersonAsFavorite()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_bool()</span> function. This new function can be used to set the Boolean property by using the property ID and the desired Boolean value. It can be done during the creation of the contact record or applied to the contact that already is placed in the database. In the second case, the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function has to be called after changing the value, to update this value in the database record.</p>
+<pre class="prettyprint">
+contacts_record_h contact = NULL;
+
+contacts_record_create(_contacts_contact._uri, &amp;contact);
+contacts_record_set_bool(contact, _contacts_contact.is_favorite, true);
+</pre>
+<p>To remove a contact from the favorite contacts, the same function must be used, with <span style="font-family: Courier New,Courier,monospace">false</span> as its third parameter. After this operation, the contact record has to be updated in the database with the <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span> function.</p>
+<pre class="prettyprint">
+contacts_record_set_bool(contact, _contacts_contact.is_favorite, false);
+
+contacts_db_update_record(contact);
+</pre>
+
+<h4>MANAGING PRIMARY PHONE NUMBER</h4>
+<p>Retrieving the default phone number of some person or a single contact is now a little different. In the 2.2.1 API, the first step was to obtain the list of all the person&#39;s contacts with the <span style="font-family: Courier New,Courier,monospace">GetContactsByPersonN()</span> function. Then, the specified contact instance was retrieved from the list with the <span style="font-family: Courier New,Courier,monospace">GetAt()</span> function. The next step was to invoke the Contact method called <span style="font-family: Courier New,Courier,monospace">GetValuesN()</span> with the <span style="font-family: Courier New,Courier,monospace">CONTACT_MPROPERTY_ID_PHONE_NUMBERS</span> enumeration value as its parameter, to get the list of all phone numbers attached to that particular contact. The primary phone number of that contact was stored as the first one on the list, so it was obtained with the <span style="font-family: Courier New,Courier,monospace">GetAt(0)</span> method called on the phone number list. In the 2.3 API, to get the default phone number for the person&#39;s particular contact, use the querying functionality. First of all, query for the contacts linked to the given person. When the list with those contacts is obtained, use the ID of the chosen contact. For the query, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function. It returns the child record of the given parent record. If there are multiple child records entities, the index specifies which record is obtained.</p>
+<pre class="prettyprint">
+int person_id, contact_id;
+contacts_record_h contact, contact_default_number;
+contacts_query_h query, query2;
+contacts_filter_h filter, filter2;
+contacts_list_h associated_contacts, default_numbers;
+
+// Getting the ID of the managed person
+contacts_record_get_int(person, _contacts_person.id, &amp;person_id); 
+
+contacts_query_create(_contacts_contact._uri, &amp;query);
+contacts_filter_create(_contacts_contact._uri, &amp;filter);
+contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
+contacts_query_set_filter(query, filter);
+
+// Obtain the list of contacts associated with the managed person
+contacts_db_get_records_with_query(query, 0, 0, &amp;associated_contacts); 
+
+contacts_list_next(associated_contacts); // Move to the second contact of the person (like in 2.2.1)
+// Get the contact record to search for its default phone number
+contacts_list_get_current_record_p(associated_contacts, &amp;contact); 
+
+// Getting the ID of the managed person
+contacts_record_get_int(contact, _contacts_contact.id, &amp;contact_id); 
+
+contacts_query_create(_contacts_contact_number._uri, &amp;query2);
+contacts_filter_create(_contacts_contact_number._uri, &amp;filter2);
+contacts_filter_add_bool(filter2, _contacts_contact_number.is_primary_default, true);
+contacts_query_set_filter(query2, filter2);
+contacts_db_get_records_with_query(query2, 0, 0, &amp;default_numbers);
+
+contacts_list_get_current_record_p(default_numbers, &amp;contact_default_number);
+
+// Release unnecessary resources
+contacts_list_destroy(associated_contacts, true);
+contacts_list_destroy(default_numbers, true);
+contacts_filter_destroy(filter);
+contacts_filter_destroy(filter2);
+contacts_query_destroy(query);
+contacts_query_destroy(query2);
+</pre>
+
+
+<p>It is also possible to get person&#39;s default number by using the <span style="font-family: Courier New,Courier,monospace">contacts_person_get_default_property()</span> function with <span style="font-family: Courier New,Courier,monospace">CONTACTS_PERSON_PROPERTY_NUMBER</span> as a first parameter. It returns the ID of the number record that is currently set to be the default number for the given person.</p>
+<pre class="prettyprint">
+int person_default_number_id;
+contacts_record_h person_default_number = NULL;
+
+contacts_person_get_default_property(CONTACTS_PERSON_PROPERTY_NUMBER, person_id, &amp;person_default_number_id);
+
+contacts_db_get_record(_contacts_person_number._uri, person_default_number_id, &amp;person_default_number);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">SetAsPrimaryPhoneNumber()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">contacts_person_set_default_property()</span>. You have to pass the ID of the contact and the ID of the number record that must be set as default.</p>
+<pre class="prettyprint">
+contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER, person_id, person_default_number_id);
+</pre>
+
+<h4>SEARCHING PERSONS USING COMPLEX CONDITIONS</h4>
+<p>To search for the contacts matching some complex conditions, use filters as in the 2.2.1 API. It is still possible to add different conditions to the filter with the proper API functions and connect them by using operators between them. The <span style="font-family: Courier New,Courier,monospace">SearchN()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function. Familiarize yourself with the new filter syntax by reading the documentation and tutorials.</p>
+<pre class="prettyprint">
+contacts_list_h list = NULL;
+contacts_query_h query = NULL;
+contacts_filter_h filter = NULL;
+
+contacts_query_create(_contacts_person._uri, &amp;query);
+contacts_filter_create(_contacts_person._uri, &amp;filter);
+
+contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;John&quot;);
+contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);
+
+contacts_query_set_filter(query, filter);
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+</pre>
+<p>The iteration through each person on the list was described in the RETRIEVING PERSON INFORMATION use case above.</p>
+
+<h4>CREATING AND MANAGING CATEGORIES AND CONTACTS</h4>
+<p>In the 2.3 API, the categories are called groups. There is one function to create both contact and group - <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span>. The first parameter of this function defines whether it is a group or contact. After the record is created, different values can be set by using specified API functions. When the record is ready, insert it to the database with the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function. The <span style="font-family: Courier New,Courier,monospace">AddMemberToCategory()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span> function. As in the 2.2.1 API, this function also takes the group ID and contact ID as its parameters.</p>
+<pre class="prettyprint">
+contacts_record_h group = NULL;
+contacts_record_h contact = NULL;
+int added_group_id = -1;
+int contact_id = -1;
+
+// Create and add new group
+contacts_record_create(_contacts_group._uri, &amp;group);
+
+contacts_record_set_str(group, _contacts_group.image_path, your_group_image_path);
+contacts_record_set_str(group, _contacts_group.ringtone_path, your_ringtone_path);
+
+contacts_db_insert_record(group, &amp;added_group_id);
+
+// Create and add new contact
+contacts_record_create(_contacts_contact._uri, &amp;contact);
+contacts_record_set_str(contact, _contacts_contact.display_name, your_contact_display_name);
+contacts_record_set_str(contact, _contacts_contact.ringtone_path, your_ringtone_path);
+
+contacts_db_insert_record(contact, &amp;contact_id);
+
+// Add the contact to the group
+contacts_group_add_contact(group, contact_id);
+</pre>
+
+<h4>DISPLAYING ALL CATEGORIES AND THEIR MEMBERS</h4>
+<p>In the 2.3 API, the <span style="font-family: Courier New,Courier,monospace">GetAllCategoriesN()</span> function has been replaced with the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function. This function enables you to get all the records of a specified type. To retrieve the list of all groups, the <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> must be used as its parameter. To move through the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. The <span style="font-family: Courier New,Courier,monospace">GetCurrent()</span> function is called <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span> in the 2.3 API. After getting the record, it is possible to get its properties using 2.3 API functions, for example, <span style="font-family: Courier New,Courier,monospace">contacts_record_get_str_p(record, _contacts_group.name, &amp;name)</span> to obtain the name of the group. The function is similar to the <span style="font-family: Courier New,Courier,monospace">GetValue()</span> function in the 2.2.1 API.</p>
+<pre class="prettyprint">
+contacts_list_h groups_list = NULL;
+contacts_record_h single_group = NULL;
+int groups_count, groups_counter, group_id;
+contacts_query_h query = NULL;
+contacts_filter_h filter = NULL;
+contacts_list_h group_members = NULL;
+int group_members_count, group_members_counter, member_id;
+contacts_record_h member = NULL;
+char *member_display_name, group_name;
+
+contacts_db_get_all_records(_contacts_group._uri, 0, 0, &amp;groups_list);
+contacts_list_get_count(groups_list, &amp;groups_count);
+
+for (groups_counter = 0; groups_counter &lt; groups_count, groups_counter++)
+{
+&nbsp;&nbsp;&nbsp;contacts_list_get_current_record_p(groups_list, single_group);
+&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(single_group, _contacts_group.id, &amp;group_id);
+&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(single_group, _contacts_group.name, &amp;group_name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Group name: %s", group_name);
+
+&nbsp;&nbsp;&nbsp;contacts_query_create(_contacts_person_group_assigned._uri, &amp;query);
+&nbsp;&nbsp;&nbsp;contacts_filter_create(_contacts_person_group_assigned._uri, &amp;filter);
+&nbsp;&nbsp;&nbsp;contacts_filter_add_int(filter, _contacts_person_group_assigned.group_id, CONTACTS_MATCH_EQUAL, group_id);
+&nbsp;&nbsp;&nbsp;contacts_query_set_filter(query, filter);
+&nbsp;&nbsp;&nbsp;contacts_db_get_records_with_query(query, 0, 0, &amp;group_members);
+
+&nbsp;&nbsp;&nbsp;contacts_list_get_count(group_members, &amp;group_members_count);
+
+&nbsp;&nbsp;&nbsp;for (group_members_counter = 0; group_members_counter &lt; group_members_count; group_members_counter++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_get_current_record_p(group_members, member);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(member, _contacts_person_group_assigned.person_id, &amp;member_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Member id: %d&quot;, member_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(member, _contacts_person_group_assigned.display_name, &amp;member_display_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Member display name: %s&quot;, member_display_name);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_next(group_members);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;contacts_list_next(groups_list);
+}
+</pre>
+
+<h4>RETRIEVING CONTACTS AND CATEGORIES STORED ON THE DEVICE</h4>
+<p>The <span style="font-family: Courier New,Courier,monospace">CreateAddressbookN()</span> function is now covered by the <span style="font-family: Courier New,Courier,monospace">contacts_record_create()</span> function. To create the address book, the <span style="font-family: Courier New,Courier,monospace">_contacts_address_book._uri</span> must be used as a parameter for this function. Add this record to the database by using the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function. After creating the address book, you already have the handle to it. If you want to get this address book later, query for it. The <span style="font-family: Courier New,Courier,monospace">DeleteAddressbook()</span> function is replaced with the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span>. It removes the address book from the device by deleting it from the database.</p>  
+<p>To get all the address books stored on the device, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> again, instead of the <span style="font-family: Courier New,Courier,monospace">GetAllAddressbooksN()</span> function. The parameter is <span style="font-family: Courier New,Courier,monospace">_contacts_address_book._uri</span>. This returns the list of all the address book records stored on the device. The navigation through the list is done the same way as it was in case of group list and contact list. 
+</p>
+
+<h4>SEARCHING CONTACTS BY NAME</h4>
+<p>The <span style="font-family: Courier New,Courier,monospace">SearchContactsByName()</span> function is covered by the functionality of the filters and queries in the 2.3 API. It is described in the <a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm#get_contact">Getting Contacts</a> use case of the 2.3 Contacts Tutorial. The filter for the query has to be created and the condition for <span style="font-family: Courier New,Courier,monospace">_contacts_person.display_name</span> must be added to this filter. Then it is possible to query all the contacts stored on the device to look for the given display name. The list of matching contacts is returned. All the operations on the retrieved list have been described above.</p>
+
+<h4>GETTING ADDRESS BOOK CHANGE NOTIFICATIONS</h4>
+<p>The 2.2.1 API provided listeners to get notifications about contacts and groups changes. The 2.3 API delivers the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function. Using this function, it is possible to register callbacks for record changes. It can be done for each type of records, including contacts and groups. You can check the code example in the <a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm#monitor_contact">Monitoring Person Changes</a> use case of the Contacts Tutorial for the 2.3 API.</p>
+
+<h3 id="calendar" name="calendar"> CALENDAR BOOK </h3>
+<p>The 2.3 Calendar API model is similar to the 2.3 Contacts model.</p>
+
+<h4>ADDING CALENDARS</h4>
+<p>Instead of using the constructor and <span style="font-family: Courier New,Courier,monospace">AddCalendar()</span> function to create a new calendar on the device, the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_book._uri</span> must be used to create the calendar and the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to add it to the device database. There is no more <span style="font-family: Courier New,Courier,monospace">AddEvent()</span> function. In the 2.3 API, you can create an event as a separate calendar database record and then set its <span style="font-family: Courier New,Courier,monospace">calendar_book_id</span> field to point to the calendar that you want it to be correlated with. </p>
+<pre class="prettyprint">
+calendar_record_h calendar_book = NULL;
+int book_id = -1;
+
+calendar_connect();
+calendar_record_create(_calendar_book._uri, &amp;calendar_book);
+
+calendar_db_insert_record(calendar_book, &amp;book_id);
+</pre>
+
+<h4>ADDING CALENDAR EVENTS</h4>
+<p>The event is created with the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function. After this operation, all the properties of the events can be set similarly like in the 2.2.1 API. The summary (subject in 2.2.1) can be set with the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function, like other string type values. Other 2.2.1 and 2.3 function mappings in case of the calendar event are as follows:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">SetStartAndEndTime()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">SetFrequency()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int(..., _calendar_event.freq, ...)</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">SetUntil()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int(..., _calendar_event. until_time, ...)</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">SetInterval()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int(..., _calendar_event.interval, ...)</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">SetDayOfWeek()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str(..., _calendar_event.byday, ...)</span></li>
+</ul>
+
+<h4>ADDING CALENDAR TASKS</h4>
+<p>The creation of tasks is possible with the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function. The parameter is <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span>. Setting all the properties of a task does not require a different function for each parameter anymore. The 2.3 API provides a few functions to set properties depending on their types:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> to set all the string values</li>
+       <li><span style="font-family: Courier New,Courier,monospace">calendar_record_set_int()</span> to set all the integer values</li>
+       <li><span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span> to set all the <span style="font-family: Courier New,Courier,monospace">calendar_time_s</span> values</li>
+</ul>
+<p>The rest of such functions and the list of properties of a task can be found in the documentation for the 2.3 API.</p>
+
+<h4>REMOVING CALENDAR EVENTS</h4>
+<p>The <span style="font-family: Courier New,Courier,monospace">RemoveEvent()</span> function is now covered by the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function. It takes the ID of an event as its parameter and also requires the type of the record, in this case the <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> type.</p>
+
+<h4>UPDATING CALENDAR TASKS</h4>
+<p>The process of updating calendar tasks using the 2.3 API is the same as updating an event, which is described in the Updating an Event section of the Calendar Tutorial for the 2.3 API. The <span style="font-family: Courier New,Courier,monospace">UpdateTodo()</span> function is now covered by the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function. As can be seen, the function does not specify what kind of a record is actually being updated. The only parameter it takes is the record handle. The function recognizes what kind of a record ii is dealing with internally and updates it in the database. Before using the updating function, the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> parameter must be used to obtain the record that you want to update. Then some properties of the record can be changed with the set of functions mentioned above. Finally, when the record is updated, the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> is used to store the changes in the database.</p>
+
+<h4>SEARCHING EVENT INSTANCES</h4>
+<p>The process of filtering and querying for the calendar records is pretty much the same as this process for the contacts database. Basically, also the query and the filter have to be created. Filtering conditions are added by using the <span style="font-family: Courier New,Courier,monospace">calendar_filter_add_str()</span> functions and the <span style="font-family: Courier New,Courier,monospace">calendar_filter_add_operator()</span> function to connect different conditions. The <span style="font-family: Courier New,Courier,monospace">SearchN()</span> functionality is covered by the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_records_with_query()</span> function.</p>
+
+<h4>GETTING CALENDAR CHANGE NOTIFICATIONS</h4>
+<p>Similarly, like in the previous section about contacts, several callbacks can be set to monitor the calendar changes. The matching functionality of the <span style="font-family: Courier New,Courier,monospace">OnCalendarEventsChanged()</span> and <span style="font-family: Courier New,Courier,monospace">OnCalendarTodosChanged()</span> listeners from the 2.2.1 API is now provided by the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function. It enables you to set callbacks invoked when some changes in calendar events or tasks (todos) are made.</p>
+
+<h2 id="system" name="system">System</h2>
+<h3 id="alarm" name="alarm">CREATING A DAILY ALARM</h3>
+<p>The daily alarm creation functionality is now under Application Framework -&gt; Application -&gt; Alarm submodule. The tutorial for the 2.3 API Alarm module can be found <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">here</a>.</p>
+<p>Instead of creating a class with the implementation of the <span style="font-family: Courier New,Courier,monospace">Tizen::System::IAlarmEventListener</span> interface in it, the 2.3 API simply provides some functions to set the alarm. To set the alarm to be launched at the specified time, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_at_date()</span> function.</p>
+
+<h3 id="power" name="power">POWER MANAGER </h3>
+<p>The 2.3 tutorial for this feature can be found in the <a href="../../../../org.tizen.tutorials/html/native/system/device_tutorial_n.htm#power">Controlling the Power State</a> use case of the Attached Device Tutorial.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">KeepScreenOnState()</span> function matches 2 functions in the 2.3 API:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">device_power_wakeup()</span> function sets the current power state to normal or dim state, depending on the given parameter.</li>
+<li><span style="font-family: Courier New,Courier,monospace">device_power_request_lock()</span> function allows you to lock the current state for the specified time.</li></ul>
+<p>The Controlling the Display use case describes how to get and set the brightness like it was done using the <span style="font-family: Courier New,Courier,monospace">GetScreenBrightness()</span> and <span style="font-family: Courier New,Courier,monospace">SetScreenBrightness()</span> functions in the 2.2.1 API.  There are similar functions in the 2.3 API: <span style="font-family: Courier New,Courier,monospace">device_display_get_brightness()</span> and <span style="font-family: Courier New,Courier,monospace">device_display_set_brightness()</span>.</p>
+<p>The Getting the Battery Level process is described under Retrieving Battery Information in the Device Tutorial for the 2.3 API. The functions map as follows:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">GetCurrentLevelInPercentage()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">device_battery_get_percent()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">IsCharging()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">device_battery_is_charging()</span></li>
+</ul>
+
+<h3 id="setting" name="setting">GETTING SETTING INFORMATION</h3>
+<p>This process is almost the same in both 2.2.1 and 2.3 APIs. The 2.3 tutorial for this is named <a href="../../../../org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm">System Setting Tutorial</a>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">GetValue()</span> function has been replaced with multiple <span style="font-family: Courier New,Courier,monospace">system_settings_get_value_*</span> functions depending on the type of value to be obtained. For example, to obtain a string value, use the <span style="font-family: Courier New,Courier,monospace">system_settings_get_value_string()</span> function.</p>
+
+<h3 id="system_info" name="system_info">GETTING SYSTEM INFORMATION</h3>
+<p>The 2.3 tutorial for this section is under <a href="../../../../org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm">Device-specific System Information Tutorial</a>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">GetValue()</span> function for obtaining the system information has also been replaced with various functions like in the System Setting model. For example, to obtain the string value for some System Information, use the <span style="font-family: Courier New,Courier,monospace">system_info_get_platform_string()</span> function.</p>
+
+<h3 id="time" name="time">GETTING THE SYSTEM TIME</h3>
+Instead of <span style="font-family: Courier New,Courier,monospace">SystemTime::GetCurrentTime</span>, you can use:
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_now()</span> from the i18n module </li>
+    <li><span style="font-family: Courier New,Courier,monospace">g_date_time_new_now()</span> from <a href="https://developer.gnome.org/glib/2.38/glib-GDateTime.html#g-date-time-new-now" target="blank">GLib</a> </li>
+    <li>Functions from <a href="http://www.eglibc.org/home" target="blank">Eglibc</a> (a variant of glibc)</li>
+</ul>
+
+<h3 id="vibrate" name="vibrate">VIBRATING THE DEVICE</h3>
+<p>This section is covered by the <a href="../../../../org.tizen.tutorials/html/native/system/device_tutorial_n.htm#haptic">Controlling Haptic Devices</a> use case of the Device Tutorial for the 2.3 API.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">Start()</span> function is now called <span style="font-family: Courier New,Courier,monospace">device_haptic_vibrate()</span>. To stop the vibrations, use the <span style="font-family: Courier New,Courier,monospace">device_haptic_stop()</span> function.</p>
+
+<pre class="prettyprint">
+haptic_device_h device;
+device_haptic_open(0, &amp;device);
+
+int duration = 1000;
+int feedback = 20; // [0-100], vibration intensity
+haptic_effect_h effect;
+
+device_haptic_vibrate(device, duration, feedback, &amp;effect); // Also obtains the played effect handle
+
+// Use the effect handle to stop the effect
+device_haptic_stop(device, effect);
+</pre>
+
+<h2 id="telephony" name="telephony">Telephony</h2>
+<h3 id="call" name="call">GETTING CURRENT CALL INFORMATION</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">GetCurrentCallStatus()</span> function is now covered by the  <span style="font-family: Courier New,Courier,monospace">telephony_call_get_voice_call_state()</span> function.</p>
+
+<h3 id="network" name="network">GETTING NETWORK INFORMATION</h3>
+<p>The old and new functions match as follows:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">IsCallServiceAvailable()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">IsDataServiceAvailable()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">IsRoaming()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetMnc()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetMcc()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetCellId()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetLac()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetOperatorName()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetRssi()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span></li>
+</ul>
+
+<h3 id="status" name="status">GETTING NOTIFICATIONS OF CALL STATUS CHANGES</h3>
+<p>Listening for call status changes is similar in both 2.2.1 and 2.3 APIs. The 2.2.1 API provided the <span style="font-family: Courier New,Courier,monospace">OnTelephonyCallStatusChangedN()</span> event handler to listen for those changes. In the 2.3 API, a callback function can be registered with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, to be triggered when the state of the call changes. The second parameter has to be <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATE</span> to define that the callback is registered for call status changes.</p>
+
+<h3 id="net_status" name="net_status">GETTING NOTIFICATIONS OF NETWORK STATUS CHANGES</h3>
+<p>This case is almost the same as the previous one. The <span style="font-family: Courier New,Courier,monospace">OnTelephonyNetworkStatusChanged()</span> listener is replaced with a callback registered using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function with <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span> as its second parameter.</p>
+
+<h3 id="sim" name="sim">GETTING SIM CARD INFORMATION</h3>
+<p>The SIM card is determined by the <span style="font-family: Courier New,Courier,monospace">telephony_h</span> handle, which is obtained from the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function. Information stored on the SIM card can be retrieved by using the following functions:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">IsAvailable()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetMnc()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetMcc()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetSpn()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">GetIccId()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span></li>
+</ul>
+
+
+<h2 id="text" name="text">Text</h2>
+<p> In the 2.3 API, the conversion between Unicode and UTF-8 formats is covered by the EFL functionality. The Eina library provides:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">eina_unicode_utf8_to_unicode()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eina_unicode_unicode_to_utf8()</span></li>
+       <li>Other <span style="font-family: Courier New,Courier,monospace">eina_unicode_*</span> utility functions</li>
+</ul>
+
+<h2 id="uix" name="uix">UIX</h2>
+<h3 id="sensors" name="sensors">GETTING DATA FROM DEVICE SENSORS</h3>
+<p>The old and new functions match as follows:</p>
+<ul><li><p><span style="font-family: Courier New,Courier,monospace">IsAvailable()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">sensor_is_supported()</span></p></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">GetMinInterval()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">sensor_get_min_interval()</span></p></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">AddSensorListener()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">sensor_create_listener()</span>, <span style="font-family: Courier New,Courier,monospace">sensor_listener_set_event_cb()</span>, and <span style="font-family: Courier New,Courier,monospace">sensor_listener_start()</span> (receive events in the callback, check sensor type in the event handler, and use the <span style="font-family: Courier New,Courier,monospace">sensor_event_s data</span>)</p></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">RemoveSensorListener()</span> -&gt; <span style="font-family: Courier New,Courier,monospace">sensor_listener_unset_event_cb()</span>, <span style="font-family: Courier New,Courier,monospace">sensor_listener_stop()</span>, and <span style="font-family: Courier New,Courier,monospace">sensor_destroy_listener()</span></p></li></ul>
+
+<h3 id="double" name="double">DETECTING DOUBLE-TAPS</h3>
+<p>In the 2.2.1 API:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">Tizen::Uix::Sensor::Motion* pMotion</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">pMotion-&gt;SetEnabled(MOTION_TYPE_DOUBLETAP)</span></li>
+</ul>
+
+<p>In the 2.3 API:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">gesture_h gesture;</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">gesture_create()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">gesture_start_recognition(gesture, GESTURE_DOUBLE_TAP, ...)</span></li>
+</ul>
+<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API Reference</a>.</p>
+
+
+<h2 id="web" name="web">Web</h2>
+<h3 id="json" name="json">JSON</h3>
+<p>In the 2.2.1 API, the <span style="font-family: Courier New,Courier,monospace">Tizen::Web::Json</span> namespace was used.</p>
+<p>In the 2.3 API, the <a href="https://developer.gnome.org/json-glib/" target="blank">Json-glib library</a> is used.</p>
+
+<h3 id="web_controls" name="web_controls">WEB CONTROLS</h3>
+<p>In the 2.2.1 API, the <span style="font-family: Courier New,Courier,monospace">Tizen::Web::Controls::Web</span> namespace was used.</p>
+<p>In the 2.3 API, the WebView module provides those functionalities.</p>
+
+<h4>INITIALIZING THE WEB CONTROL INSTANCE</h4>
+<p> In 2.2.1 API, it was done this way: </p>
+<ol>
+       <li>Create the <span style="font-family: Courier New,Courier,monospace">Tizen::Web::Controls::Web *__pWeb</span> object.</li>
+       <li>Set the shape with the <span style="font-family: Courier New,Courier,monospace">__pWeb->Construct()</span> function.</li>
+       <li>Add the control to a window with the <span style="font-family: Courier New,Courier,monospace">form-&gt;AddControl(__pWeb)</span> function.</li>
+</ol> 
+<p>Initializing in 2.3 is vastly different. A very brief outline is below. For more information, see the tutorial.</p>
+<ol>
+       <li>Basic structure (example):
+       <pre class="prettyprint">
+typedef struct _Browser_Window
+{ 
+&nbsp;&nbsp;&nbsp;Evas_Object *elm_window; 
+&nbsp;&nbsp;&nbsp;Evas_Object *ewk_view; 
+}
+Browser_Window
+
+Browser_Window *window; 
+</pre></li>
+       
+       <li>Create the window with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> function.</li>
+       <li>Set window geometry callbacks (<span style="font-family: Courier New,Courier,monospace">window_geometry_get</span> and <span style="font-family: Courier New,Courier,monospace">window_geometry_set</span>) for the window&#39;s smart class.</li>
+       <li>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span>, <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span>, and  <span style="font-family: Courier New,Courier,monospace">evas_object_resize()</span> functions to react to events:
+       <pre class="prettyprint">
+static Ewk_View_Smart_Class *miniBrowserViewSmartClass() 
+{ 
+&nbsp;&nbsp;&nbsp;static Ewk_View_Smart_Class ewkViewClass = EWK_VIEW_SMART_CLASS_INIT_NAME_VERSION(&quot;MiniBrowser_View&quot;); 
+
+&nbsp;&nbsp;&nbsp;return &amp;ewkViewClass; 
+} 
+
+ewk_view_smart_class_set(miniBrowserViewSmartClass());
+
+// Callback headers
+// static Eina_Bool on_window_geometry_get(Ewk_View_Smart_Data *sd, Evas_Coord *x, Evas_Coord *y, Evas_Coord *width, Evas_Coord *height);
+// static Eina_Bool on_window_geometry_set(Ewk_View_Smart_Data *sd, Evas_Coord x, Evas_Coord y, Evas_Coord width, Evas_Coord height);
+
+Ewk_View_Smart_Class *ewkViewClass = miniBrowserViewSmartClass();
+ewkViewClass-&gt;window_geometry_get = on_window_geometry_get;
+ewkViewClass-&gt;window_geometry_set = on_window_geometry_set;
+</pre></li>
+</ol>
+
+<h4>LOADING A WEB PAGE</h4>
+<p>The 2.2.1 API used the <span style="font-family: Courier New,Courier,monospace">__pWeb-&gt;LoadUrl(url)</span> function, while the 2.3 API uses the <span style="font-family: Courier New,Courier,monospace">ewk_view_url_set()</span> 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/porting/porting_n.htm b/org.tizen.guides/html/native/porting/porting_n.htm
new file mode 100644 (file)
index 0000000..87fef0b
--- /dev/null
+++ b/org.tizen.guides/html/native/porting/porting_n.htm
@@ -0,0 +1,327 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Porting</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#model_comp">Application Model Comparison</a></li>
+                       <li><a href="#app_life_cycle">Application Life-cycle</a></li>
+                       <li><a href="#package_manag">Package Management</a></li>
+                       <li><a href="#launch">Application Launch and Termination</a></li>
+                       <li><a href="#ui">UI Applications</a></li>
+                       <li><a href="#service">Service Applications</a></li>
+                       <li><a href="#io">I/O Overview</a></li>
+                       <li><a href="#object">Object Ownership Policy</a></li>
+                       <li><a href="#low">Low Memory Level Events</a></li>
+                       <li><a href="#scene">Scene Transitions</a></li>
+                       <li><a href="#keys">Hardware Keys</a></li>
+                       <li><a href="#ex">Exceptions</a></li>
+                       <li><a href="#logs">Logs</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Porting</h1> 
+
+<p>The Tizen 2.3 release comes with a new version of the native API, created to give you a possibility to make fast and lightweight native applications. It replaces the native API used in the previous versions of Tizen (2.2.1). Combined with the Enlightenment Foundation libraries (EFL), the new native API provides powerful tools to create fantastic applications for Tizen.</p> 
+<p>The purpose of this guide is to allow all the current Tizen application developers to port their current 2.2.1 native API-based applications to the new 2.3 native API as simply and quickly as possible. This guide contains basic guides on how to port your 2.2.1 native API application to the 2.3 native API. To fully understand the new API, familiarize yourself with the specifications and tutorials. This guide helps you to understand the main differences and start porting your applications.</p>
+<p>For information about the differences between each module of the 2.2.1 and 2.3 version APIs, see <a href="api_comparison_n.htm">API Comparison</a>.</p>
+
+<h2 id="model_comp" name="model_comp">Application Model Comparison</h2>
+
+<p>The new API&#39;s application model is very similar to the one from the older version, so it is easy to adopt it.</p>
+<p>The new 2.3 native API as well as the 2.2.1 version both support UI and service applications. UI applications have a graphical user interface, while service applications do not. Also, packaging applications follows same rules in both APIs. Only 1 UI application is allowed in one package.  Applications in a package follow the same installation cycle but they have their own life-cycles. Each application in the package can be identified by its own ID. Applications can communicate with each other using the message port.</p>
+<p>Multitasking in Tizen 2.3 works in a similar way as in Tizen 2.2.1, so only 1 application can work in the foreground. The rest are in a PAUSED state, so they are not visible for the user. Since service applications do not have a UI, they all run in the background the whole time.</p>
+
+<p>Different scenarios for switching between UI application states include:</p>
+<ul>
+<li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/basics_tizen_programming/tizen_app_model/window_state_transition.htm" target="_blank"> Native application state transitions for 2.2.1</a></li>
+<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html#CAPI_APPLICATION_MODULE_STATES_TRANSITIONS">Native application state transitions for 2.3</a></li>
+
+</ul>
+<p>Basically, the scenarios are similar, and the same scenarios result in the same corresponding state transitions.</p>
+<p>The main difference in developing UI applications is that the Tizen::Ui namespace has been replaced with the EFL. This change require you to recreate the user interface layer in your application. The EFL is very fast and customizable. Study its documentation to effectively use its features.</p>
+  
+<h2 id="app_life_cycle" name="app_life_cycle">Application Life-cycle</h2>
+
+<p>The following figure shows the old 2.2.1 application life-cycle model.</p>
+  <p class="figure">Figure: 2.2.1 life-cycle model</p> 
+  <p><img src="../../images/life_cycle_model_old.png" alt="2.2.1 life-cycle model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+ 
+<p>The following figure shows the current application life-cycle model.</p>
+  <p class="figure">Figure: 2.3 life-cycle model</p> 
+  <p><img src="../../images/life_cycle_model_new.png" alt="2.3 life-cycle model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+ 
+<p>The following figures show the 2.2.1 and 2.3 state models.</p>
+  <p class="figure">Figure: 2.2.1 state model</p> 
+  <p><img src="../../images/state_model_old.png" alt="2.2.1 state model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>  
+
+  <p class="figure">Figure: 2.3 state model</p> 
+  <p><img src="../../images/state_model_new.png" alt="2.3 state model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>  
+  
+<p>The models have some differences, but basically they work very similarly. In both models, there are specific callbacks called during specific application states.</p>
+<p>The main difference is that the old model has 2 life-cycles, one for the backend of the application and another one for the UI. The current model is more unified, so the backend code and the UI of the application are executed in the same callback functions.</p>
+<p>First, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> function is called instead of <span style="font-family: Courier New,Courier,monospace">OnAppInitializing()</span>. Place the initialization code, such as loading and creating UI objects, there. After the initialization process (or the <span style="font-family: Courier New,Courier,monospace">OnAppInitialized()</span> callback in the 2.2.1 version), the application state becomes CREATED. Now the main event loop is being started and the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback is called. The application state becomes RUNNING. This state is similar to the application state of the 2.2.1 version after <span style="font-family: Courier New,Courier,monospace">OnAppInitialized()</span> is executed.</p>
+<p>When the application is running, the state can change to PAUSED or TERMINATED. Each state is preceded by a specific callback. Place your code in those callbacks to be executed before the application state changes. Those states are similar to the states from the 2.2.1 Native API, where the frame can be activated, deactivated, and minimized. If the state is PAUSED, it is possible to change it back to RUNNING. These situations are all described in the native <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API Reference</a>.</p>
+
+<h2 id="package_manag" name="package_manag">Package Management</h2>
+
+<p>The package management during the porting process requires you to pay attention to the installation process and the actual application package structure.</p>
+
+<h3 id="app_inst" name="app_inst">Application Installation Process</h3>
+
+<p>The installation process in the new Native API is very similar to the one in the old API. The following figure shows the scheme.</p>
+
+  <p class="figure">Figure: Installation process</p> 
+  <p><img src="../../images/porting_installation_process.png" alt="Installation process" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+ 
+<p>The installation process looks similar to the one from the 2.2.1 Native API. In the new API, the Package Manager is still responsible for managing packages. Use this API for installing, uninstalling, and updating the packages.</p>
+
+<h3 id="app_package" name="app_package">Application Package</h3>
+<p>In comparison with the 2.2.1 application package, the 2.3 native application package has fewer directories.</p>
+ 
+   <p class="figure">Figure: 2.2.1 package structure</p> 
+  <p><img src="../../images/package_structure_old.png" alt="2.2.1 package structure" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+
+   <p class="figure">Figure: 2.3 package structure</p> 
+  <p><img src="../../images/package_structure_new.png" alt="2.3 package structure" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  
+<p>In the current package structure, there are no separate <span style="font-family: Courier New,Courier,monospace">info</span>, <span style="font-family: Courier New,Courier,monospace">setting</span>, and <span style="font-family: Courier New,Courier,monospace">shared</span> directories. Despite this change, the rest of the directories are the same. The file extension remains <span style="font-family: Courier New,Courier,monospace">.tpk</span>.</p>
+<table>
+<caption>Table: 2.3 package directories</caption>
+<tbody>
+<tr>
+ <th>Directory</th>
+ <th>Description</th>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">&lt;package ID&gt;</span></td>
+ <td>Fully qualified name of an application, such as org.tizen.calculator.</td>
+</tr>
+
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">bin</span></td>
+ <td>Executable file of the application.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib</span></td>
+ <td>Application library files.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">res</span></td>
+ <td>Root directory in which all resource files are located.
+<p>The application cannot write and modify any resource files.</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">data</span></td>
+ <td>Root directory in which the application's private data is located.
+<p>The application can read and write its own data files in the application 
+data directory.</p></td></tr>
+</tbody>
+</table>
+
+<h2 id="launch" name="launch">Application Launch and Termination</h2>
+
+<p>The process of launching a 2.2.1 native API application can be found <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/basics_tizen_programming/tizen_app_model/launching_applications.htm" target="_blank">here</a>. A native application can also be launched from the Launcher or by another application.</p>
+<p>The process of terminating a 2.2.1 native API application is described <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/basics_tizen_programming/tizen_app_model/terminating_applications.htm" target="_blank">here.</a> The possible scenarios for terminating the 2.3 native API application are the same as in the 2.2.1 API:</p>
+<ul>
+<li>Application calls the <span style="font-family: Courier New,Courier,monospace">ui_app_exit()</span> function to terminate the main event loop.</li>
+<li>Low Memory Killer terminates the application to free memory.</li>
+</ul>
+
+<h2 id="ui" name="ui">UI Applications</h2>
+<p>The main difference in creating UI applications is that the whole Tizen::Ui namespace has been replaced with the EFL. To create powerful applications for Tizen, study the <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL documentation</a>.</p>
+
+<h2 id="service" name="service">Service Applications</h2>
+<p>The new native API has the same idea of service applications as the 2.2.1 version.</p>
+<p>The guide for creating service applications in the 2.2.1 version can be found <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/app/service_app_fundamentals.htm" target="_blank">here</a>, under <strong>Tizen Native App Programming &gt; Programming Guide &gt; App: Controlling Your Application &gt; Service Application Fundamentals</strong>. Also, the tutorial for the 2.2.1 version is <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/app_tutorial/task_multiprocserviceapp.htm" target="_blank">here</a>, under <strong>Tizen Native App Programming &gt; Tutorials &gt; App Tutorial &gt; Task: Multi Proc Service App</strong>.</p>
+
+<p>The tutorial for the new 2.3 version is <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">here</a>.</p>
+
+<h2 id="io" name="io">I/O Overview</h2>
+<p>In the old Tizen 2.2.1 applications, the operations related to accessing the file system and managing input and output were all defined in the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.mobile.apireference/namespaceTizen_1_1Io.html" target="_blank">Tizen::Io</a> namespace. Now, all the functionalities of this namespace have been discarded in favor of open source libraries and other modules of the native API. To provide the same functionality as the previous Tizen::Io namespace, the current version of Tizen uses sqlite3 and EGlibc open libraries. It also uses the Message Port and Storage (a System submodule) from the native API, so handle I/O operations using these libraries and API modules.</p>
+
+<h2 id="object" name="object">Object Ownership Policy</h2>
+<p>In the native API, the &#39;N&#39; postfix for functions that return a new instance of an object with its ownership is no more supported. In this API, use the <span style="font-family: Courier New,Courier,monospace">object_create()</span> function, and free the memory with a function, such as <span style="font-family: Courier New,Courier,monospace">object_destroy()</span>. The following example is taken from the App Control module:</p>
+<pre class="prettyprint">
+static app_control_h app_control;
+
+int error_code = app_control_create(&amp;app_control);
+
+error_code = app_control_destroy(app_control);
+</pre>
+
+<p>Check from the function documentation whether you have to free the resource you are using. There are many other functions, such as <span style="font-family: Courier New,Courier,monospace">get_something()</span>, which usually allocates memory to store an object or a value that is obtained. For example:</p>
+<pre class="prettyprint">
+char *uri;
+
+error_code = app_control_get_uri(app_control, &amp;uri);
+
+if(uri != NULL)
+{
+&nbsp;&nbsp;&nbsp;free(uri);
+&nbsp;&nbsp;&nbsp;uri = NULL;
+}
+</pre>
+
+<p>In those cases, free memory as well. To be sure whether you need to release the resources to avoid memory leaks, check the API documentation.</p>
+
+<h2 id="low" name="low">Low Memory Level Events</h2>
+<p>When the memory levels in the system are extremely low, the system terminates the application and removes it from the memory. However, it is possible to save the application state or context right before this happens. In the 2.2.1 version, it was done using the <span style="font-family: Courier New,Courier,monospace">Tizen::App::IAppCheckpointEventListener</span> interface. In the new native API, every time when the low level memory situation occurs on the device and the system wants to terminate some application, the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback in that application is called. When you create your application, remember to place the code that must be executed in case of a low memory level in this callback and set the callback using the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function.</p>
+
+<h2 id="scene" name="scene">Scene Transitions</h2>
+<p>In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the <span style="font-family: Courier New,Courier,monospace">Tizen::Ui::Controls::IFormBackEventListener</span> and its <span style="font-family: Courier New,Courier,monospace">OnFormBackRequested()</span> event handler to listen to the <strong>Back </strong>key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and <a href="../ui/efl_extension_n.htm">EFL Extension</a>. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the <strong>Back</strong> key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the widget.</p>
+
+<h2 id="keys" name="keys">Hardware Keys</h2>
+<p>With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.mobile.apireference/classTizen_1_1Ui_1_1Controls_1_1IFormMenuEventListener.html" target="_blank">Tizen::Ui::Controls::IFormMenuEventListener</a> interface. This interface delivered the <span style="font-family: Courier New,Courier,monospace">OnFormMenuRequested()</span> event handler to listen to the hardware <strong>Menu</strong> key events. Now, all this functionality is obtained using the EFL. In the <a href="../ui/efl_extension_n.htm">EFL Extension</a> documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.</p>
+  
+<h2 id="ex" name="ex">Exceptions</h2>
+<p>Normally in the 2.3 API version, the exceptions model functions return an integer which indicates an error value. Usually, the value is 0 if there are no errors and the name format for this value is MODULE_NAME_ERROR_NONE. As in 2.2.1, the current API provides functions to get and set the last error value in the thread. In the 2.3 version, this functionality and the error enumerations are in the Base module. The following example shows how the current native API returns errors.</p>
+<pre class="prettyprint">
+int error_code = app_control_create(&amp;app_control);
+if (error_code != APP_CONTROL_ERROR_NONE) // Error occurred
+</pre>
+
+<h2 id="logs" name="logs">Logs</h2>
+<p>The 2.3 native API provides a new method for managing logs. The dlog module is now responsible for these actions. It provides 2 functions to send data to the log output. It supports priority and tags, which can be used to easily filter log messages. The new logging system makes it easier to manage logs, since there are no multiple functions for dealing with different log levels. Set the priority (whether the log is an error or maybe a warning, info, or debug message) and filter the output logs according to the priority levels.</p>
+
+<table>
+<caption>Table: Priority levels</caption>
+<tbody>
+<tr>
+ <th>Priority</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">DLOG_DEBUG</span></td>
+ <td>Debug message.
+<p>Log message which the developer want to check.</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">DLOG_INFO</span></td>
+ <td>Information message.
+<p>Normal operational messages. Logs above this priority are always logged.</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">DLOG_WARN</span></td>
+ <td>Warning message.
+<p>Not an error, but an indication that an error occurs in the future if no action is taken.</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR</span></td>
+ <td>Error message.
+<p>Indicates an error.</p></td>
+</tr>
+</tbody>
+</table>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">dlogutil</span> command to view and follow the content of the log buffers:</p>
+<pre class="prettyprint">
+dlogutil [&lt;option&gt;] ... [&lt;filter-spec&gt;] ...  
+</pre>
+
+<p>Every log message has a tag and a priority associated with it. A filter expression follows the tag:priority format. The tag indicates the tag of interest and the priority indicates the minimum level of priority to report for that tag. Add any number of tag:priority specifications in a single filter expression. The tag of a log message indicates the system component from which the message originates. The priority is one of the following character values, ordered from lowest to highest priority:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">D</span> - Debug</li>
+<li><span style="font-family: Courier New,Courier,monospace">I</span> - Info</li>
+<li><span style="font-family: Courier New,Courier,monospace">W</span> - Warning</li>
+<li><span style="font-family: Courier New,Courier,monospace">E</span> - Error</li>
+</ul>
+
+<p>For example, to see the <span style="font-family: Courier New,Courier,monospace">MY_APP</span> tag with the debug priority:</p>
+<pre class="prettyprint"># dlogutil MY_APP:D</pre>
+
+<p>To see all log messages above the info priority:</p>
+<pre class="prettyprint"># dlogutil *:I</pre>   
+
+<table>
+<caption>Table: List of logutil command options</caption>
+<tbody>
+<tr>
+ <th>Option</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-b &lt;buffer&gt;</span></td>
+ <td>Alternate log buffer. The main buffer is used by the default buffer.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-c</span></td>
+ <td>Clears the entire log and exits.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-d</span></td>
+ <td>Dumps the log and exits.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-f &lt;filename&gt;</span></td>
+ <td>Writes a log to the filename. The default is stdout.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-g</span></td>
+ <td>Prints the size of the specified log buffer and exits.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-n &lt;count&gt;</span></td>
+ <td>Sets the maximum number of rotated logs to count. The default value is 4. Requires the -r option.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-r &lt;Kbytes&gt;</span></td>
+ <td>Rotates the log file every Kbytes of output. The default value is 16. Requires the -f option.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-s</span></td>
+ <td>Sets the default filter spec to silent.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">-v &lt;format&gt;</span></td>
+ <td>Sets the output format for log messages. The default is the brief format.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/security/key_manager_n.htm b/org.tizen.guides/html/native/security/key_manager_n.htm
new file mode 100644 (file)
index 0000000..2f886d8
--- /dev/null
+++ b/org.tizen.guides/html/native/security/key_manager_n.htm
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Key Manager</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm">Key Manager Tutorial</a></li>
+                       <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Key Manager</h1>
+
+<p>The key manager provides functions to securely store keys, certificates, and sensitive data related to users and their password-protected APPs. Additionally, it provides secure cryptographic operations for non-exportable keys without revealing the key values to clients.</p>
+
+   <p class="figure">Figure: Key manager process</p> 
+  <p style="text-align:center;"><img alt="Key manager process" src="../../images/key_manager.png" /></p> 
+
+<p> A key manager stores keys, certificates, and sensitive user data in a central secure repository. The central secure repository is protected by a password.</p>
+
+<p>The main features of the Key Manager API include:</p>
+
+<ul>
+<li>Data store policy
+<p>A client can specify simple access rules when storing data in the key manager:</p>
+<ul>
+<li>Extractable or non-extractable
+       <ul>
+       <li>Only for data tagged as extractable, the key manager returns the raw value of the data.</li>
+       <li>If data is tagged as non-extractable, the key manager does not return its raw value. In that case, the key manager provides secure cryptographic operations for non-exportable keys without revealing the key values to the clients.</li></ul></li>
+<li>Per key password
+       <ul>
+       <li>All data in the key manager is protected by a user password.</li>
+       <li>A client can encrypt its data using their own password additionally.</li>
+       <li>If a client provides a password when storing data, the data is encrypted with the password. This password must be provided when getting the data from the key manager.</li></ul></li>
+       </ul>
+</li>
+<li>User login
+
+<p>The user login control is implemented as follows:</p>
+
+<ul>
+<li>A user&#39;s database file is encrypted by the user&#39;s DKEK (domain key encryption key). A DKEK of a user is randomly generated and stored as encrypted with a user password when a user logs in for the first time.</li>
+<li>When a user logs in, the key manager decrypts the user DKEK with a user password. During the login session, any client can access the data which is protected by a user password. When a user logs out, the key manager removes the user DKEK from the memory.</li>
+<li>When a user logs in, logs out, or changes their password, the key manager must be notified. Only privileged APPs, such as LockScreen APP or Setting APP, can notify the key manager.</li>
+<li>When a user changes their password, the key manager re-encrypts the user DKEK with the new password.</li>
+</ul>
+</li>
+
+<li>Data access control
+
+<p>By default, only the owner of a data can access to the data. If the owner grants the access to other applications, those applications can read or delete the data from the key manager database.</p>
+<p>When an application is deleted, the data and access control information granted by the application are also removed.</p>
+</li>
+</ul>
+
+
+<p>The key manager provides 2 types of <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">APIs</a>:</p>
+<ul>
+<li>Secure repository APIs <p>All APPs can use the secure repository APIs to:</p>
+<ul>
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingkey">Save, get, or remove a key</a></li>
+
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingcert">Save, get, or remove a certificate</a></li>
+
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingdata">Save, get, or remove data</a></li>
+</ul></li>
+<li>Secure crypto APIs <p>The key manager provides the secure crypto APIs for the non-extractable keys and certificates to:</p>
+<ul>
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#creatingkey">Create key pairs</a></li>
+
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#creatingsignat">Create or verify signatures</a></li>
+
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#verifying">Verify or get a certificate chain</a></li>
+
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#pkcs">Load a certificate or a PKCS#12 file</a></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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/security/privilege_n.htm b/org.tizen.guides/html/native/security/privilege_n.htm
new file mode 100644 (file)
index 0000000..5a11783
--- /dev/null
+++ b/org.tizen.guides/html/native/security/privilege_n.htm
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Privilege Info</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm">Privilege Info Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Privilege Info</h1>
+
+<p>Tizen provides <a href="../../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#native">privilege</a> information for user notification.</p>
+
+<p>The following information can be retrieved:</p>
+<ul>
+<li>Privilege name: Privilege description in a simple present participle form.</li>
+<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 increase battery usage.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/security/security_guide_n.htm b/org.tizen.guides/html/native/security/security_guide_n.htm
new file mode 100644 (file)
index 0000000..9086bcf
--- /dev/null
+++ b/org.tizen.guides/html/native/security/security_guide_n.htm
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security Tutorials</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Security</h1> 
+  <p>Security features include basic cryptographic functions and information on privileges for user notification. You can also use various utility functions provided by the OpenSSL open source library.</p>
+
+  <p>The main security features are:</p>
+  <ul> 
+  <li><a href="key_manager_n.htm">Key Manager</a> <p>Enables you to provide a secure repository for keys, certificates, and sensitive data related to users and their password-protected applications.</p></li>
+  <li><a href="privilege_n.htm">Privilege Info</a> <p>Enables you to get information about permissions granted by a privilege.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/account_manager_n.htm b/org.tizen.guides/html/native/social/account_manager_n.htm
new file mode 100644 (file)
index 0000000..48228b9
--- /dev/null
+++ b/org.tizen.guides/html/native/social/account_manager_n.htm
@@ -0,0 +1,215 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Account Manager</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <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>          
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/social/account_tutorial_n.htm">Account Manager Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Account Manager</h1>
+       
+ <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> 
+   <li>Creating and managing accounts</li> 
+   <li>Retrieving account information</li>
+   <li>Receiving account change notifications</li> 
+  </ul> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The <span style="font-family: Courier New,Courier,monospace">account.h</span> header file handles account-related information. The following table lists the account properties that can be modified.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Account properties 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Account property</th> 
+     <th>Property type</th> 
+    </tr> 
+    <tr> 
+     <td>User name</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span> <p>This is a mandatory property.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Extended data</td> 
+     <td>Key-value string pairs <p>This is an optional property.</p></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+    
+<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> 
+  <table border="1"> 
+   <caption>
+     Table: Account provider properties 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Account property</th> 
+     <th>Data type</th> 
+     <th>Property type</th> 
+    </tr> 
+    <tr> 
+     <td>Multiple accounts support</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span> </td> 
+     <td><p>Indicates whether multiple accounts are supported.</p><p>This is a mandatory property.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Icon</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td><p>File path of the account provider icon.</p> <p>The icon size is:</p>
+        <ul>
+               <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><p>This is a mandatory property.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Small icon</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td><p>File path of the account provider icon.</p> <p>The icon size is:</p>
+        <ul>
+               <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><p>This is a mandatory property.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Display name</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span> </td> 
+     <td><p>Display name of the account provider.</p><p>This is a mandatory property.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Capabilities</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+     <td> <p>Capability of the account provider.</p><p>Several capabilities are defined for the account-manager in Tizen, regarding the related services:</p>
+      <ul> 
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> <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><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> <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> 
+      </ul> <p>This is an optional property.</p></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.</p> 
+  
+  <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operations.</p> 
+ 
+  <h3 id="ADD" name="ADD">ACCOUNT_OPERATION_SIGNIN Operation</h3>
+  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> 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>
+  <h4 id="input" name="input">Input Data</h4> 
+  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">app_event_callback_s::app_control</span>. </p>
+
+  <h4 id="output" name="output">Output Data</h4> 
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p> 
+  <p>The following table shows the output data for the ACCOUNT_OPERATION_SIGNIN (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span>) operation.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Output data for the ACCOUNT_OPERATION_SIGNIN operation 
+   </caption> 
+ 
+    <tbody>
+    <tr>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span></td>
+     <td>Account ID of the added account.</td>
+    </tr>
+   </tbody>
+
+  </table> 
+  <h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>
+  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> 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>
+  <h4 id="input_data" name="input_data">Input Data</h4> 
+
+  <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">app_event_callback_s::app_control</span>. </p>
+  <h4 id="output_data" name="output_data">Output Data</h4>
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
+  <p>The following table shows the output data for the ACCOUNT_OPERATION_VIEW (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span>) operation.</p>
+  
+  <table border="1"> 
+   <caption>
+     Table: Output data for the ACCOUNT_OPERATION_VIEW operation 
+   </caption> 
+    <tbody>
+    <tr>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_VIEW</span></td>
+     <td>Account ID for setting account information.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/calendar_n.htm b/org.tizen.guides/html/native/social/calendar_n.htm
new file mode 100644 (file)
index 0000000..da97656
--- /dev/null
+++ b/org.tizen.guides/html/native/social/calendar_n.htm
@@ -0,0 +1,721 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                               <li><a href="#book">Calendar Books</a></li>
+                               <li><a href="#change">Database Change Notifications</a></li>
+                               <li><a href="#event">Events and Instances</a></li>
+                               <li><a href="#filter2">Filters and Queries</a></li>
+                               <li><a href="#record2">Records</a></li> 
+                               <li><a href="#remind">Reminders</a></li>
+                               <li><a href="#time">Time Structure</a></li>
+                               <li><a href="#view2">Views and Properties</a></li> 
+                               <li><a href="#vcal">vCalendar</a></li>  
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm">Calendar Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <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 has a recurrence rule (meaning that it happens multiple times), separate instances are generated for each time the event occurs.</p>
+ 
+    <p class="figure">Figure: Calendar model</p> 
+  <p style="text-align:center;"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
+  
+  <p>The Calendar Service supports <a href="#vcal">vCalendars</a>.</p>
+
+<p>The main features of the Calendar API include:</p>
+       <ul>
+               <li><a href="#book">Calendar books</a>
+               <ul>
+                       <li>Determine where the events and todos belong.</li>
+                       <li>Create calendar books using the local device (with no account), service providers, such as Google or Yahoo (with an account), or applications, such as ChatON, Joyn, or Facebook.</li>
+                       <li>Search and organize events using <a href="#filter2">filters and queries</a>.</li>
+                       <li>Monitor <a href="#change">database changes</a>.</li>
+               </ul>
+               <p>Each account can have multiple calendar books. The calendar book name does not need to be unique on the device because it is handled with an ID. Since the local device address book has no account, its related account ID is zero.</p>
+               </li>
+               <li><a href="#event">Events and tasks</a>
+               <ul>
+                       <li>Set properties, such as summary, start time, and description.</li>
+                       <li>Set <a href="#remind">reminders</a>.</li>
+                       </ul>
+               </li>
+               <li><a href="#time">Time management</a>
+               <ul>
+                       <li>Define the calendar UTC time and date.</li>
+                       </ul>
+               </li>
+       </ul>
+
+<p>The following figure illustrates the different Calendar entities and their relationships.</p> 
+
+    <p class="figure">Figure: Calendar entities</p> 
+  <p style="text-align:center;"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>  
+
+<p>vCalendar supports ver1.0 (vcs) and 2.0 (ics). For more information about vCalendar, see <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">rfc2445</a>.</p>
+
+<p>The calendar service module works in a way similar to client-service architecture. In this architecture, the Tizen application is the client side and has to connect to service before using calendar service APIs. Use <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> for connecting and disconnecting.</p>
+<pre class="prettyprint">
+calendar_connect();
+
+// Jobs for records
+
+calendar_disconnect();
+</pre>
+
+<h2 id="book" name="book">Calendar Books</h2>
+
+<p>A calendar book is a placeholder for other records in the Calendar API. Every event and todo has to belong to a calendar book. There are 3 built-in calendar books, as shown in the following table.</p>
+
+<table> 
+   <caption>
+     Table: Calendar books
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Book</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_EVENT_CALENDAR_BOOK_ID</span></td> 
+     <td>Event book</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_TODO_CALENDAR_BOOK_ID</span></td> 
+     <td>Todo book</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</span></td> 
+     <td>Birthday book</td> 
+    </tr>  
+   </tbody> 
+  </table> 
+  
+The following code example sets a calendar book ID.
+<pre class="prettyprint">
+calendar_record_h event = NULL;
+
+calendar_record_create(_calendar_event._uri, &amp;event);
+
+// Set default calendar book id
+calendar_record_set_int(event, _calendar_event.calendar_id, DEFAULT_EVENT_CALENDAR_BOOK_ID);
+
+// Set other fields
+
+int event_id = 0;
+calendar_db_insert_record(event &amp;event_id);
+
+// Destroy
+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;
+calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &amp;calendar_book_list);</pre>
+
+<p>In the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_all_records()</span> function, you need as parameters the URI of the view to get records from, the index from which results are received, the maximum number of results, and the record list.</p>
+
+<h2 id="change" name="change">Database Change Notifications</h2>
+
+<p>To detect the calendar database changes, register a callback with the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function. To unregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_remove_changed_cb()</span> function.</p>
+<p>Clients wait calendar change notifications on the client side. If the calendar is changed by another module, the server publishes an inotify event. The Inotify module broadcasts to the subscribed modules, and an internal inotify handler is called at the client side. A user callback function is called with the user data.</p>
+<pre class="prettyprint">// Add callback function
+void __event_changed_ cb(const char *view_uri, void *user_data) {}
+// Add change notification callback
+calendar_db_add_changed_cb(_calendar_event._uri, __event_changed_cb, NULL);</pre>
+
+<h2 id="event" name="event">Events and Instances</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 one 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 database. Generated instances based on the rrule are also stored in the instance database.</p>
+ 
+    <p class="figure">Figure: Views and databases</p> 
+  <p style="text-align:center;"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>  
+
+<p>The following table illustrates and example of a recurring event and its instances.</p>
+
+<table> 
+   <caption>
+     Table: Event and instance example 
+   </caption> 
+   <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> 
+     <td>2012-10-09 Tuesday
+<p>2012-10-16 Tuesday</p>
+<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>
+
+<table> 
+   <caption>
+     Table: Recurrence rules 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Recurrence rule property</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>freq</td> 
+     <td>Yearly, monthly, weekly, or daily</td> 
+    </tr> 
+     <tr> 
+     <td>count</td> 
+     <td>Until count. If the count is 3, 3 instances are generated.</td> 
+    </tr> 
+     <tr> 
+     <td>interval</td> 
+     <td>Interval is a positive integer representing how often the recurrence rule repeats</td> 
+    </tr> 
+     <tr> 
+     <td>byday</td> 
+     <td>MO, TU, WE, TH, FR, SA, or SU</td> 
+    </tr> 
+     <tr> 
+     <td>bymonthday</td> 
+     <td>Days of the month</td> 
+    </tr> 
+     <tr> 
+     <td>byyearday</td> 
+     <td>Days of the year</td> 
+    </tr> 
+     <tr> 
+     <td>byweekno</td> 
+     <td>Ordinals specifying weeks of the year</td> 
+    </tr> 
+     <tr> 
+     <td>bymonth</td> 
+     <td>Months of the year</td> 
+    </tr>
+     <tr> 
+     <td>bysetpos</td> 
+     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td> 
+    </tr>      
+     <tr> 
+     <td>wkst</td> 
+     <td>Day on which the workweek starts</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+
+<h3 name="exception_rule" id="exception_rule">Exceptions</h3>
+<p>If one 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 2<sup>nd</sup> instance date is modified from 16<sup>th</sup> to 17<sup>th</sup>, 17<sup>th</sup> is the exception.</p>
+
+
+<table> 
+   <caption>
+     Table: Exception example
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Instances</th>
+        <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>2012-10-09 Tuesday
+<p>2012-10-16 Tuesday &gt; modified</p>
+<p>2012-10-22 Tuesday</p></td> 
+<td>2012-10-17 Tuesday</td>
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>To get the changes in an exception, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function. The instances and exceptions are deleted together when the original event is deleted.</p>
+
+<h2 id="filter2" name="filter2">Filters and Queries</h2>
+<p>Queries are used to retrieve data which satisfies a given criteria, like an integer property being greater than a given value, or a string property containing a given substring. The criteria are defined by creating filters and adding conditions to them, joining them with logical operators. Also, instead of a condition, another filter can be added to create more complex filters.</p>
+<p>When a filter is ready, it can be set as a property of a query. Other query properties allow configuring how the returned results are grouped and sorted.</p>
+<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>
+
+<table> 
+   <caption>
+     Table: Filter conditions
+   </caption> 
+   <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> 
+     <td><strong>Filter F1</strong>:<br/>
+ Condition C1<br/>
+ OR<br/>
+ Condition C2<br/>
+ <br/>
+<strong>Filter F2</strong>:<br/>
+ Condition C3<br/>
+ OR<br/>
+ Condition C4<br/>
+<br/>
+<strong>Filter F3</strong>:<br/>
+ Condition C5<br/>
+ AND<br/>
+ F1<br/>
+ AND<br/>
+ 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>
+<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
+calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL, 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
+calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;meeting&quot;);</pre>
+                
+<p>Insert the filter into the query and execute the query:</p>
+
+<pre class="prettyprint">calendar_query_h query = NULL;
+calendar_list_h list = NULL;
+ 
+// Create a query returning event type records
+calendar_query_create(_calendar_event._uri, &amp;query);
+ 
+// Add the filter
+calendar_query_set_filter(query, filter);
+ 
+// Execute the query, results are returned in a list
+calendar_db_get_records_with_query(query, 0, 0, &amp;list);
+ 
+calendar_filter_destroy(filter);
+calendar_query_destroy(query);
+ 
+// Use the list
+ 
+calendar_list_destroy(list, true);</pre>
+
+<h3 id="proj" name="proj">Projections</h3>
+<p>Projection is related to searching with filters and queries. 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 those records whose summary has &quot;test&quot; (string filter). It creates a query, adds the filter to it, and receives the results in a list.</p>
+
+<pre class="prettyprint">calendar_query_h query = NULL;
+calendar_filter_h filter = NULL;
+
+// Set query with filter
+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, CALENDAR_MATCH_CONTAINS, &quot;test&quot;);
+calendar_query_set_filter(query, filter);
+
+// Set projection
+unsigned int projection[3];
+projection[0] = _calendar_event_calendar_book_attendee.event_id;
+projection[1] = _calendar_event_calendar_book_attendee.summary;
+projection[2] = _calendar_event_calendar_book_attendee.start_time;
+
+// Get list
+calendar_query_set_projection(query, projection, 3);
+calendar_db_get_records_with_query(query, 0, 0, &amp;list);
+
+// Destroy handle
+calendar_filter_destroy(filter);
+calendar_query_destroy(query);
+calendar_list_destroy(list, true);</pre>
+
+<h2 id="record2" name="record2">Records</h2>
+
+<p>An important concept in the Calendar Service APIs is a record. Although a record represents an actual record in the internal database, you can consider it as a structure describing a single (but complex) entity, like 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 others.</p>
+<p>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>
+
+<h3 id="uri" name="uri">URI</h3>
+<p>A record type is identified by a structure called the view. For example, the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view describes the properties of the calendar event record. Every view has a special field - <span style="font-family: Courier New,Courier,monospace">_uri</span> - that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value to indicate what type of record you want to create or operate on.</p>
+<pre class="prettyprint">// Create an event with _calendar_event view
+calendar_record_h record = NULL;
+calendar_record_create(_calendar_event._uri, &amp;record);
+</pre>
+
+<h3 id="handle" name="handle">Record Handle</h3>
+<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 refer to the child records of a record.</p>
+<pre class="prettyprint">// Create an event and get a handle
+calendar_record_h event = NULL;
+calendar_record_create(_calendar_event._uri, &amp;event);
+
+// Get the record handle with ID
+calendar_record_h event2 = NULL;
+calendar_db_get_record(_calendar_event._uri, event_id, &amp;event2);</pre>
+
+<h3 id="types" name="types">Basic Types</h3>
+<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long integer, long long int), <span style="font-family: Courier New,Courier,monospace">double</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">bool</span>, and <span style="font-family: Courier New,Courier,monospace">time</span>. The <span style="font-family: Courier New,Courier,monospace">time</span> 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>
+<table> 
+   <caption>
+     Table: Setter and getter functions 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Property</th> 
+     <th>Setter</th> 
+        <th>Getter</th>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">integer</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_int</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_int</span></td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_lli</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_lli</span></td>
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">double</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_double</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_double</span></td>
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_str</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_str</span></td>
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_time_s</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_caltime</span></td>
+    </tr>      
+   </tbody> 
+  </table> 
+
+<h3 id="children" name="children">Children</h3> 
+<p>Certain type of records hold &quot;child list&quot; properties. If a record has a property of this type, it can be a parent of other records, called child records. For example, the attendee records can hold an event identifier in their <span style="font-family: Courier New,Courier,monospace">event_id</span> property. The event is the parent record of the child attendee records.</p>
+
+<p>The following code example creates an event and inserts it into the default event book.</p>
+
+<pre class="prettyprint">// Create an event
+calendar_record_h event = NULL;
+calendar_record_create(_calendar_event._uri, &amp;event);
+ 
+// Set event summary
+calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
+ 
+// Put the event into the default calendar book for events
+calendar_record_set_int(event, _calendar_event.calendar_book_id, book_id);
+ 
+// Insert calendar book into the database
+int event_id = 0;
+calendar_db_insert_record(event, &amp;event_id);
+
+// Destroy
+calendar_record_destroy(event, true);</pre>
+
+<h2 id="remind" name="remind">Reminders</h2>
+
+<p>When an alarm is triggered, the calendar service sends a notification to the package which is registered in the reminder database table by using the <span style="font-family: Courier New,Courier,monospace">calendar_reminder_add_receiver()</span> function.</p>
+
+<p>The following figure illustrates how the alarm process works.</p>
+ 
+    <p class="figure">Figure: Alarm process</p> 
+  <p style="text-align:center;"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
+
+<p>After you add a receiver, the registered alarm is triggered at the reserved time if you insert the alarm as a child to an event record:</p>
+<pre class="prettyprint">// Set alarm
+calendar_record_h alarm = NULL;
+calendar_record_create(_calendar_alarm._uri, &amp;alarm);
+calendar_record_set_int(alarm, _calendar_alarm.tick_unit, CALENDAR_ALARM_TIME_UNIT_SPECIFIC);
+calendar_record_set_lli(alarm, _calendar_alarm.time, (1404036000 - 60)); // Before 60 sec
+
+// Add alarm as child
+calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);</pre>
+
+
+
+
+<h2 id="time" name="time">Time Structure</h2>
+<p>The calendar time structure, <span style="font-family: Courier New,Courier,monospace">calendar_caltime_s</span>, is defined as follows:</p>
+<pre class="prettyprint">typedef struct
+{
+&nbsp;&nbsp;&nbsp;calendar_time_type_e type;
+&nbsp;&nbsp;&nbsp;union 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long int utime;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int year;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int month;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int mday;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} date;
+&nbsp;&nbsp;&nbsp;} time;
+} calendar_time_s;</pre>
+<p>Use this structure when setting the calendar time (<span style="font-family: Courier New,Courier,monospace">_CALENDAR_PROPERTY_CALTIME</span>) properties of the records.</p>
+<p>The time structure can hold 2 types of data: UTC time (long long int) and date, given as year, month, and day of the month (3 integers). These types are identified by the values of the <span style="font-family: Courier New,Courier,monospace">calendar_time_type_e</span> variable, and they determine the usage of the structure.</p>
+
+<table> 
+   <caption>
+     Table: Data types
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Identifier</th> 
+     <th>Type</th> 
+     <th>Name</th>
+     <th>Purpose</th>
+        </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span></td> 
+     <td>long long int</td> 
+        <td>utime</td> 
+        <td>UTC time, used to describe non-all-day events</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span></td> 
+     <td>struct</td> 
+        <td>date</td> 
+        <td>Date only (year, month, and day of the month), used to describe all day events.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="utc" name="utc">UTC Time Usage</h3>
+<p>Structures with UTC time are used for non-all-day events. In such cases, 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 <span style="font-family: Courier New,Courier,monospace">start_tzid</span> property.</p>
+<p>When converting local time to UTC time, use the function illustrated in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first argument). The function uses <a href="http://icu-project.org/apiref/icu4c/ucal_8h.html" target="blank">UCalendar</a>.</p>
+
+<pre class="prettyprint">#define ms2sec(ms) (long long int)(ms / 1000.0)
+ 
+long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int min, int s)
+{
+&nbsp;&nbsp;&nbsp;UErrorCode status = U_ZERO_ERROR;
+
+&nbsp;&nbsp;&nbsp;UChar uft16_timezone[16] = {0};
+&nbsp;&nbsp;&nbsp;U_uastrncpy(uft16_timezone, tzid, sizeof(uft16_timezone));
+
+&nbsp;&nbsp;&nbsp;UCalendar *ucal = NULL;
+&nbsp;&nbsp;&nbsp;ucal = ucal_open(uft16_timezone, -1, uloc_getDefault(), UCAL_GREGORIAN, &amp;status); 
+ 
+&nbsp;&nbsp;&nbsp;ucal_set(ucal, UCAL_YEAR, y); 
+&nbsp;&nbsp;&nbsp;ucal_set(ucal, UCAL_MONTH, mon -1);
+&nbsp;&nbsp;&nbsp;ucal_set(ucal, UCAL_DATE, d); 
+&nbsp;&nbsp;&nbsp;ucal_set(ucal, UCAL_HOUR, h); 
+&nbsp;&nbsp;&nbsp;ucal_set(ucal, UCAL_MINUTE, min);
+&nbsp;&nbsp;&nbsp;ucal_set(ucal, UCAL_SECOND, s);
+
+&nbsp;&nbsp;&nbsp;long long int lli = 0;
+&nbsp;&nbsp;&nbsp;lli = ms2sec(ucal_getMillis(ucal, &amp;status));
+&nbsp;&nbsp;&nbsp;ucal_close(ucal);
+
+&nbsp;&nbsp;&nbsp;return lli;
+}</pre>
+
+
+<pre class="prettyprint">// Fill calendar time structures (start and end time)
+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);
+ 
+et.type = CALENDAR_TIME_UTIME;
+et.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 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;);
+ 
+// 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;);
+ 
+// Set end time
+calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>
+
+<h3 id="date" name="date">Date Usage</h3>
+<p>Another usage of the time structure is an all day event. In case of such events, the structure type field must be set to <span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>. Only the date (no time) is stored. Such structures can be used to set the start and end time of an event.</p>
+<p>Both start and end time of the event must be set, and they do not have to be equal. If they are not, the event lasts more than 1 day. Note that in such cases there are no instances created, as this is still a non-recurring event.</p>
+
+<h2 id="view2" name="view2">Views and Properties</h2>
+
+<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>The <span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday</span> views are not offered, but combinations with another views are provided.</p>
+
+<table> 
+   <caption>
+     Table: Calendar views 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Editable view</th> 
+     <th>Read-only view</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">_calendar_book</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_event</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_todo</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_timezone</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_alarm</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_extended_property</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_todo_calendar_book</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday_calendar_book</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book_extended</span><br/>
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday_calendar_book_extended</span></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span> 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><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span></li></ul>
+
+<h3 id="property" name="property">Properties</h3>
+<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> 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 <span style="font-family: Courier New,Courier,monospace">event_id</span> or <span style="font-family: Courier New,Courier,monospace">todo_id</span> property (as children of the corresponding event or todo records).</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">record</span> type properties are other records. For example, an event record has <span style="font-family: Courier New,Courier,monospace">attendee</span> and <span style="font-family: Courier New,Courier,monospace">alarm</span> properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> header file.</p>
+ 
+    <p class="figure">Figure: Properties</p> 
+  <p style="text-align:center;"><img alt="Properties" src="../../images/calendar_property.png" /></p>  
+
+<pre class="prettyprint">// Create an event with _calendar_event view
+calendar_record_h event = NULL;
+calendar_record_create(_calendar_event._uri, &amp;event);
+ 
+// Set event summary to _calendar_event view
+calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
+</pre>
+
+<h3 id="version" name="version">Version</h3>
+<p>The calendar service uses a version system in the following APIs:</p>
+<pre class="prettyprint">int calendar_db_get_current_version(int *calendar_db_version);
+int calendar_db_get_changes_by_version(..., int *current_calendar_db_version);
+int calendar_db_get_last_change_version(int *last_change_version);
+int calendar_db_get_changes_exception_by_version(..., int calendar_db_version, ...);</pre>
+
+<p>Whenever modifications are made in the database, the version number is increased. If sync applications, such as Google or Facebook, sync at version 13 and try to sync again every 1 minute, they want to get the changes from version 14 to the current version.</p>
+<p>To get the current version, the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_current_version()</span> function is used. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_by_version()</span> function retrieves the modified record list. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function is used to get <a href="#exception_rule">modified instances in a recurring event</a>.</p>
+
+<h2 id="vcal" name="vcal">vCalendar</h2>
+<p>Use vCalendar to exchange personal calendar and schedule information. In order to avoid confusion with this referenced work, this is to be known as the vCalendar specification. vCalendar ver2.0 is known as iCalendar. The following snippet shows an example of the vCalendar.</p>
+<pre class="prettyprint">
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//hacksw/handcal//NONSGML v1.0//EN
+BEGIN:VEVENT
+DTSTART:19970714T170000Z
+DTEND:19970715T035959Z
+SUMMARY:Bastille Day Party
+END:VEVENT
+END:VCALENDAR
+</pre>
+
+<p>The calendar service provides APIs to compose a vCalendar stream. With the stream, it is possible to create files transmit data with JSON data.</p>
+<pre class="prettyprint">
+calendar_list_h list = NULL;
+// Create or get list to make vcalendar stream
+
+char *stream = NULL;
+calendar_vcalendar_make_from_records(list, &amp;stream);
+
+// Jobs for stream
+
+// Free
+free(stream);
+</pre>
+
+<p>vCalendar can be parsed with calendar service APIs as well.</p>
+<pre class="prettyprint">
+// Read stream from file
+
+calendar_list_h list = NULL;
+calendar_vcalendar_parse_to_calendar(stream, &amp;list);
+
+// Jobs for list
+calendar_list_destroy(list, true);
+</pre>
+  
+  <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/contact_n.htm b/org.tizen.guides/html/native/social/contact_n.htm
new file mode 100644 (file)
index 0000000..08a1cf3
--- /dev/null
+++ b/org.tizen.guides/html/native/social/contact_n.htm
@@ -0,0 +1,737 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Contacts</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#bulk">Batch Operations</a></li>
+                       <li><a href="#db">Database Change Notifications</a></li>
+                       <li><a href="#filter">Filters and Queries</a></li>
+                       <li><a href="#list">Lists</a></li>
+                       <li><a href="#person">Persons and Contacts</a></li>
+                       <li><a href="#record">Records</a></li>
+                       <li><a href="#view">Views and Properties</a></li>
+                       <li><a href="#vcard">vCards</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm">Contacts Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Contacts</h1>
+
+<p>Contact features provide functions for managing contact information, such as address books, groups, persons, and phone logs.</p>
+<p>A contact object is always associated with a specific address book. A person object is an aggregation of one or more contacts associated with the same person.</p>
+
+<p>The following figure illustrates the contact structure. There are 3 instances of the same contact in different address books. Person1 is an aggregation of those instances (Contact1, Contact2, and Contact3).</p>
+
+     <p class="figure">Figure: Contact structure</p>
+  <p style="text-align:center;"><img alt="Contact structure" src="../../images/contacts_contact_structure.png" /></p>
+
+<p>The Contact Service supports <a href="#vcard">vCards</a>.</p>
+
+<p>The main features of the Contacts API include:</p>
+<ul>
+<li>Contact management
+       <ul><li>Manage individual <a href="#record">contact records</a>, such as name, phone number, email, address, job, instant messenger, and company with the help of <a href="#view">contact data-views</a>.</li>
+       <li>Insert contacts to and remove them from the <a href="#db">contacts database</a>.</li>
+       <li>Use <a href="#filter">filters and queries</a> to search and organize contacts.</li></ul></li>
+<li>Accounts
+       <ul><li>Handle accounts using an account ID created with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API.</li>
+       <li>Have the related account ID of 0 because local device address book has no account.</li>
+       <li>Create only one address book each.</li></ul></li>
+<li>Address books
+       <ul><li>Determine where contacts and groups belong.</li>
+       <li>Create address books using the local device (with no account), service providers (such as Samsung account), or applications (such as ChatON or Joyn).</li>
+       </ul></li>
+<li>Groups
+       <ul><li>Combine contacts on the same address book.</li>
+       <li>Set up many-to-many relationships between groups and contacts.</li></ul></li>
+<li>Lists
+       <ul><li>Create <a href="#list">lists</a> of similar contacts to manage them in <a href="#bulk">batches</a>.</li></ul></li>
+<li>Persons
+       <ul>
+       <li>Set up a <a href="#person">virtual contact</a> to be shown and managed when more than 1 contact from different sources designate the same individual.</li>
+       </ul></li>
+<li>My profile
+       <ul><li>Manage My profile. My profile has similar properties as the contact information, but no properties, such as group relation, ringtone, and message alert.</li>
+       <li>Can have a single entry in each address book.</li></ul></li>
+<li>Activities
+       <ul><li>Store social activities.</li></ul></li>
+<li>Speed dials
+       <ul><li>Provide a shortcut dialing number key information.</li></ul></li>
+<li>Phone logs
+       <ul><li>Store call or message logs.</li></ul></li></ul>
+
+<p>The following figure illustrates the different entities in the Contact Service, and their relationships.</p>
+
+      <p class="figure">Figure: Contact entities</p>
+  <p style="text-align:center;"><img alt="Contact entities" src="../../images/contacts_contact_entity.png" /></p>
+
+  <h2 id="bulk" name="bulk">Batch Operations</h2>
+
+<p>Bulk APIs provide insert, update, and delete operations for multiple records simultaneously. There is no limit on the record count for a bulk API, but it causes a process to hang while the API is operated. Bulk APIs guarantee atomicity. That is, the API operations are performed either for all, or nothing.</p>
+
+<pre class="prettyprint">
+int contacts_db_insert_records(contacts_list_h record_list, int **ids, unsigned int *count);
+int contacts_db_update_records(contacts_list_h record_list);
+int contacts_db_delete_records(const char* view_uri, int record_id_array[], int count);
+int contacts_db_replace_records(contacts_list_h list, int record_id_array[], unsigned int count);
+</pre>
+
+<p>The following code example inserts 2 contact records using a bulk API:</p>
+<pre class="prettyprint">contacts_record_h contact1;
+contacts_record_create(_contacts_contact.uri, &amp;contact1);
+// Fill contact record
+
+contacts_record_h contact2;
+contacts_record_create(_contacts_contact._uri, &amp;contact2);
+// Fill contact record
+
+contacts_list_h list = NULL;
+contacts_list_create(&amp;list);
+
+contacts_list_add(list, contact1);
+contacts_list_add(list, contact2);
+
+int **ids = NULL;
+unsigned int count = 0;
+
+// Insert contact records using bulk APIs
+contacts_db_insert_records(list, &amp;ids, &amp;count);
+
+// Use IDs
+
+contacts_list_destroy(list, true);
+free(ids);</pre>
+
+
+  <h2 id="db" name="db">Database Change Notifications</h2>
+
+<p>To detect the contact database changes, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">Database</a> API functions. Register a callback with the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function. To unregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_remove_changed_cb()</span> function.</p>
+<p>Clients wait contacts 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 person changes notification callback:</p>
+
+<pre class="prettyprint">
+static void __person_changed_ cb(const char *view_uri, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Jobs for the callback function
+}
+// Add a change notification callback
+contacts_db_add_changed_cb(_contacts_person._uri, __person_changed_cb, NULL);</pre>
+
+<h2 id="filter" name="filter">Filters and Queries</h2>
+
+<p>Queries are used to retrieve data which satisfies a given criteria, like an integer property being greater than a given value, or a string property containing a given substring. Query needs a filter which can set the condition for search. The Contact Service provides query APIs for sorting set projections and removing duplicated results.</p>
+
+<h3 id="sort" name="sort">Filters</h3>
+
+<p>The Filter API provides the set of definitions and interfaces that enable application developers to make filters to set queries.</p>
+<p>When creating a filter, specify the filter type you want to create using the <span style="font-family: Courier New,Courier,monospace">_uri</span> property. A filter handle must be destroyed after use.</p>
+<pre class="prettyprint">
+int contacts_filter_create(const char* view_uri, contacts_filter_h* filter);
+int contacts_filter_destroy(contacts_filter_h filter);</pre>
+
+<p>The following example sets the filter condition to contain a given substring:</p>
+<pre class="prettyprint">contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;1234&quot;);</pre>
+
+<p>The following example sets the filter condition to property value is <span style="font-family: Courier New,Courier,monospace">true</span>:</p>
+<pre class="prettyprint">contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);</pre>
+
+<p>Conditions can be added to a filter. Join the conditions by using the logical operators <span style="font-family: Courier New,Courier,monospace">AND</span> and <span style="font-family: Courier New,Courier,monospace">OR</span>.</p>
+
+<p>The following example creates a composite filter with the <span style="font-family: Courier New,Courier,monospace">OR</span> operator.</p>
+<pre class="prettyprint">
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;1234&quot;);
+contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_OR);
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;5678&quot;);</pre>
+
+<p>Additionally, filters can join each other by using the logical operators <span style="font-family: Courier New,Courier,monospace">AND</span> and <span style="font-family: Courier New,Courier,monospace">OR</span>.</p>
+
+<p>The following example creates a joined filter with the <span style="font-family: Courier New,Courier,monospace">AND</span> operator.</p>
+<pre class="prettyprint">
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;1234&quot;);
+contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_OR);
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;5678&quot;);
+
+contacts_filter_add_bool(filter2, _contacts_person.is_favorite, true);
+
+contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_AND);
+contacts_filter_add_filter(filter1, filter2);
+</pre>
+
+<p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows the results, if the following sequences are added.</p>
+
+<table>
+   <caption>
+     Table: Filters
+   </caption>
+   <tbody>
+    <tr>
+     <th>Filters</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>
+       <td>
+<strong>Filter F1</strong>:<br/>
+ Condition C1<br/>
+ OR<br/>
+ Condition C2<br/>
+<br/>
+<strong>Filter F2</strong>:<br/>
+ Condition C3<br/>
+ OR<br/>
+ Condition C4<br/>
+ <br/>
+<strong>Filter F3</strong>:<br/>
+ Condition C5<br/>
+ AND<br/>
+ F1<br/>
+ AND<br/>
+ F2</td>
+       <td>(C5 AND F1) AND F2, which is<br/>
+       (C5 AND (C1 OR C2)) AND (C3 OR C4)</td>
+       </tr>
+   </tbody>
+  </table>
+
+<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). Create a query and add the filter to it, results are received in a list.</p>
+<pre class="prettyprint">
+contacts_filter_h filter = NULL;
+contacts_list_h list = NULL;
+contacts_query_h query = NULL;
+
+contacts_filter_create(_contacts_address._uri, &amp;filter);
+contacts_filter_add_int(filter, _contacts_address.contact_id, CONTACTS_MATCH_EQUAL, id);
+contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
+contacts_filter_add_str(filter, _contacts_address.country, CONTACTS_MATCH_EXACTLY, &quot;Korea&quot;);
+contacts_query_create(_contacts_address._uri, &amp;query);
+contacts_query_set_filter(query, filter);
+
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+
+contacts_filter_destroy(filter);
+contacts_query_destroy(query);
+// Use the list
+
+contacts_list_destroy(list, true);
+</pre>
+
+<h3 id="sort2" name="sort2">Sorting</h3>
+
+<p>Sort query results list by property ID:</p>
+<pre class="prettyprint">int contacts_query_set_sort(contacts_query_h query, unsigned int property_id, bool is_ascending);</pre>
+
+<p>Sort query results by person ID:</p>
+<pre class="prettyprint">
+contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;Joe&quot;);
+contacts_query_set_filter(query, filter);
+contacts_query_set_sort(query, _contacts_person.id, true);
+
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+
+contacts_query_destroy(query);
+contacts_filter_destroy(filter);
+contacts_list_destroy(person_list, true);
+</pre>
+
+<h3 id="projection" name="projection">Projection</h3>
+
+<p>Projection allows you to query data for specific properties of a record, at lower latency and cost than retrieving all properties:</p>
+<pre class="prettyprint">int contacts_query_set_projection(contacts_query_h query, unsigned int property_ids[], int count)</pre>
+
+<p>The following example creates a filter which gets only the person ID, display name, and image thumbnail path from the person record which &quot;test&quot; (string filter) as vibration path. Create a query and add the filter to it, results are received in a list.</p>
+<pre class="prettyprint">
+contacts_filter_add_str(filter, _contacts_person.vibration, CONTACTS_MATCH_CONTAINS, &quot;test&quot;);
+contacts_query_set_filter(query, filter);
+
+// Set projections
+unsigned int person_projection[] =
+{
+&nbsp;&nbsp;&nbsp;_contacts_person.id,
+&nbsp;&nbsp;&nbsp;_contacts_person.display_name,
+&nbsp;&nbsp;&nbsp;_contacts_person.image_thumbnail_path,
+};
+
+contacts_query_set_projection(query, person_projection, sizeof(person_projection)/sizeof(int));
+
+contacts_db_get_records_with_query(query, 0, 0, &amp;person_list);
+
+// Use the list
+
+contacts_query_destroy(query);
+contacts_filter_destroy(filter);
+contacts_list_destroy(person_list, true);
+</pre>
+
+<h3 id="distinct" name="distinct">Distinct</h3>
+
+<p>If you query a read-only view with a set projection, the result list can contain duplicates. Remove duplicates using <span style="font-family: Courier New,Courier,monospace">_contacts_query_set_distinct</span>.</p>
+<pre class="prettyprint">int contacts_query_set_distinct(contacts_query_h query, bool set)</pre>
+
+<p>The following example removes duplicates:</p>
+<pre class="prettyprint">
+unsigned int projection[] =
+{
+&nbsp;&nbsp;&nbsp;_contacts_person_number.person_id,
+&nbsp;&nbsp;&nbsp;_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);
+
+contacts_query_create(_contacts_person_number._uri, &amp;query);
+contacts_query_set_projection(query, projection, sizeof(projection)/sizeof(int));
+contacts_query_set_filter(query, filter);
+
+// Set distinct (remove duplicates)
+contacts_query_set_distinct(query, true);
+
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+
+// Use the list
+
+contacts_list_destroy(list, true);
+contacts_query_destroy(query);
+contacts_filter_destroy(filter);
+</pre>
+
+<h2 id="list" name="list">Lists</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>
+
+<p>To operate a list, you must obtain its handle. The handle is provided during the list creation. Destroy the list handle after use:</p>
+<pre class="prettyprint">
+int contacts_list_create(contacts_list_h* contacts_list);
+int contacts_list_destroy(contacts_list_h contacts_list, bool delete_child);
+</pre>
+
+<p>If the <span style="font-family: Courier New,Courier,monospace">delete_child</span> parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, child resources are destroyed automatically.</p>
+
+<p>The following example creates a list handle:</p>
+<pre class="prettyprint">
+// Get a list handle with a query
+contacts_list_h list = NULL;
+contacts_list_create(&amp;list);
+
+// Use the list
+
+contacts_list_destroy(list, true);
+</pre>
+
+<p>The following example gets the person list handle from the database:</p>
+
+<pre class="prettyprint">
+// Get a list handle with a query
+contacts_list_h list = NULL;
+contacts_db_get_all_records(_contacts_person._uri, 0, 0, &amp;list);
+
+// Use the list
+
+contacts_list_destroy(list, true);
+</pre>
+
+<h3 id="cursor" name="cursor">Cursor</h3>
+
+<p>The list can be traversed by using a cursor:</p>
+<pre class="prettyprint">
+int contacts_list_first(contacts_list_h contacts_list);
+int contacts_list_last(contacts_list_h contacts_list);
+int contacts_list_next(contacts_list_h contacts_list);
+int contacts_list_prev(contacts_list_h contacts_list);
+</pre>
+
+<p>Get a record of the current cursor:</p>
+
+<pre class="prettyprint">int contacts_list_get_current_record_p(contacts_list_h contacts_list, contacts_record_h* record);</pre>
+
+<p>The following example creates a loop list:</p>
+<pre class="prettyprint">
+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;contacts_list_get_current_record_p(list, &amp;record);
+&nbsp;&nbsp;&nbsp;if (NULL == record)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(record, _contacts_person.display_name, &amp;name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;name=%s&quot;, name);
+} while (CONTACTS_ERROR_NONE == contacts_list_next(list));
+contacts_list_destroy(list, true); // Destroy child records automatically
+</pre>
+
+<h3 id="add" name="add">Adding and Removing</h3>
+
+<p>The Contact Service provides functions for adding and removing child records on a list.</p>
+<pre class="prettyprint">
+int contacts_list_add(contacts_list_h contacts_list, contacts_record_h record);
+int contacts_list_remove(contacts_list_h contacts_list, contacts_record_h record);
+</pre>
+
+<p>The following example adds records to the list:</p>
+<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_h group2 = NULL;
+contacts_record_create(_contacts_group._uri, &amp;group2);
+contacts_record_set_str(group2, _contacts_group.name, &quot;group test2&quot;);
+
+contacts_list_h list = NULL;
+contacts_list_create(&amp;list);
+
+// Add records to the list
+contacts_list_add(list, group1);
+contacts_list_add(list, group2);
+
+contacts_db_insert_records(list, NULL, NULL);
+contacts_list_destroy(list, true);
+</pre>
+
+
+<h2 id="person" name="person">Persons and Contacts</h2>
+<p> Persons are virtual contacts that keep merged information of contacts linked together. A person is created automatically when a contact record is inserted in the Contacts database. A person record cannot be created directly. Every contact must be linked to at least 1 person.</p>
+
+<p>The following figure illustrates the process of creating a person record.</p>
+ <p class="figure">Figure: Creating a person</p>
+  <p style="text-align:center;"><img alt="Creating a person" src="../../images/contacts_person_record.png" /></p>
+
+<p>A person record can be linked to another person. Linking is possible even though the contacts have different address books.</p>
+
+  <p>The following figure illustrates the process of linking a person.</p>
+
+   <p class="figure">Figure: Linking a person</p>
+  <p style="text-align:center;"><img alt="Linking a person" src="../../images/contacts_link_person.png" /></p>
+
+<p>A contact record can also be separated from the person record. As a result of unlinking the contact record, a new person is created.</p>
+
+ <p>The following figure illustrates the process of unlinking a contact.</p>
+
+   <p class="figure">Figure: Unlinking a contact</p>
+  <p style="text-align:center;"><img alt="Unlinking a contact" src="../../images/contacts_unlink_contact.png" /></p>
+
+  <h2 id="record" name="record">Records</h2>
+
+<p>An important concept in the Contacts APIs is a record. Although a record represents an actual record in the internal database, you can consider it a piece of information, like an address, phone number, or group of contacts. A record can be a complex set of data, containing other data. For example, an address record contains country, region, and street information.</p>
+
+<p>The contained data can also be a reference to another record. For example, a contact record contains the <span style="font-family: Courier New,Courier,monospace">address</span> property, which is a reference to an address record. An address record belongs to a contact record - its <span style="font-family: Courier New,Courier,monospace">contact_id</span> property is set to the identifier of the corresponding contact. In this case, the address is the child record of the contact and the contact is the parent record.</p>
+<p>Effectively, a record can be a node in a tree or graph of relations between records.</p>
+
+<h3>URI</h3>
+
+<p>A record type is identified by a structure called the view, which contains identifiers of its properties. Every view has a special field - <span style="font-family: Courier New,Courier,monospace">_uri</span> - that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value to indicate what type of record you want to create or operate on.</p>
+
+<p>The following APIs need a <span style="font-family: Courier New,Courier,monospace">_uri</span> postfix:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_record_create(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_filter_create(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_query_create(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_get_record(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_delete_record(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_get_all_records(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_delete_records(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_add_changed_cb(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_remove_changed_cb(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_get_changes_by_version(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_search_records(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_search_records_with_range(const char* view_uri, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int contacts_db_get_count(const char* view_uri, ...)</span></li>
+</ul>
+
+<h3>Record Handle</h3>
+
+<p>To use a record, you must obtain its handle. There are many methods to obtain the handle. For example, you can create a new record or refer to the child records of a record.</p>
+
+<p>When creating a record, you must specify what type of record you want to create by using the URI property. The following code examples creates a contact record and obtains its handle:</p>
+
+<pre class="prettyprint">contacts_record_h contact = NULL;
+contacts_record_create(_contacts_contact._uri, &amp;contact);</pre>
+
+<p>The following example shows how to get a contact record with ID:</p>
+<pre class="prettyprint">contacts_record_h contact = NULL;
+contacts_db_get_record(_contacts_contact._uri, id, &amp;contact);</pre>
+
+
+<h4>Basic Types</h4>
+
+<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">boolean</span>, <span style="font-family: Courier New,Courier,monospace">long integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long long int), and <span style="font-family: Courier New,Courier,monospace">double</span>.</p>
+
+<p>The following table lists the setter and getter functions for each type.</p>
+
+<table>
+   <caption>
+     Table: Setter and getter functions
+   </caption>
+   <tbody>
+    <tr>
+     <th>Property</th>
+     <th>Setter</th>
+        <th>Getter</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_str</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_str</span></td>
+    </tr>
+     <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_int</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_int</span></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_bool</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_bool</span></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_lli</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_lli</span></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">contacts_record_set_double</span></td>
+        <td><span style="font-family: Courier New,Courier,monospace">contacts_record_get_double</span></td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>The above functions also require specifying which property to get and set. 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 a contact <span style="font-family: Courier New,Courier,monospace">display_name</span> property: <span style="font-family: Courier New,Courier,monospace">_contacts_contact.display_name</span>)</p>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">ringtone_path</span> property of a contact record.</p>
+<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);
+free(resource_path);
+contacts_record_set_str(contact, _contacts_contact.ringtone_path, ringtone_path);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The string getter functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> 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.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<p></p>
+
+<p>The following example shows that there are 2 ways of getting string property:</p>
+<pre class="prettyprint">
+contacts_record_get_str(record, _contacts_person.display_name, &amp;display_name);
+contacts_record_get_str_p(record, _contacts_person.display_name, &amp;display_name);</pre>
+
+<p>In the first case, the returned string should be freed by the application. In second one, the <span style="font-family: Courier New,Courier,monospace">display_name</span> value is freed automatically when destroying the record handle.</p>
+
+
+<h3>Children</h3>
+
+<p>A record can have properties of the <span style="font-family: Courier New,Courier,monospace">record</span> type - called child records. A record can contain several records of a given type. For example, a contact record (parent) can contain many address records (children).</p>
+
+<p class="figure">Figure: Children</p>
+<p style="text-align:center;"><img alt="Children" src="../../images/contacts_children.png" /></p>
+
+<p>The following code example inserts an address record into a contact record. Note that it is not necessary to insert or destroy all records - just the parent record needs to be inserted into the database to store all the information, and when the parent record is destroyed, the child records are also destroyed automatically.</p>
+
+<p>The following example adds a child record:</p>
+<pre class="prettyprint">
+contacts_record_h address = NULL;
+contacts_record_h image = NULL;
+
+int contact_id = 0;
+
+// Image and address record can be child records of contact record
+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);
+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_add_child_record(contact, _contacts_contact.address, address);
+
+// Insert contact to the database
+contacts_db_insert_record(contact, &amp;contact_id);
+contacts_record_destroy(contact, true);</pre>
+
+<h3>Record ID Property</h3>
+
+<p>An ID is a unique number for identifying records. Therefore, if you know the ID of a record, you can directly handle the record. The ID is read-only property, which is available after the record has been inserted into the database. The following example gets a contact record with an ID:</p>
+
+<pre class="prettyprint">
+contacts_record_h contact = NULL;
+contacts_record_create(_contacts_contact._uri, &amp;contact);
+
+contacts_record_h name = NULL;
+contacts_record_create(_contacts_name._uri, &amp;name);
+contacts_record_set_str(name, _contacts_name.first, &quot;first name&quot;);
+contacts_record_add_child_record(contact, _contacts_contact.name, name);
+
+int contact_id = 0;
+contacts_db_insert_record(contact, &amp;contact_id);
+contacts_record_destroy(contact, true); // Contact is no longer usable
+
+contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact); // Contact is now a handle to the same record as before
+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
+</pre>
+
+<p>Identifiers can be used to establish a relationship between 2 records. The following code example sets an address record&#39;s <span style="font-family: Courier New,Courier,monospace">contact_id</span> property to the ID of the contact. The <span style="font-family: Courier New,Courier,monospace">contact_id</span> relates between the address record and the contact which is identified by the <span style="font-family: Courier New,Courier,monospace">contact_id</span>. 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. The following example adds an address record to a <span style="font-family: Courier New,Courier,monospace">contact_id</span>:</p>
+
+<pre class="prettyprint">int contact_id = ... // Acquire the ID of the created contact
+int address_id = 0;
+contacts_record_create(_contacts_address._uri, &amp;address);
+contacts_record_set_int(address, _contacts_address.contact_id, contact_id);
+// Set other address properties
+
+contacts_db_insert_record(address, &amp;address_id);</pre>
+
+<p>With a record handle, you can access all records of a specific type related to the given record.</p>
+
+<p>The following code example changes a country of addresses which are child records of a contact. Each address can be traversed by using the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function. It is possible to apply the changes by updating the contact which is the parent record:</p>
+
+<pre class="prettyprint">
+int contact_id = ... // Acquire ID of the created contact
+unsigned int address_num = 0;
+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;contacts_record_h address = NULL;
+&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(contact, _contacts_contact.address, i, &amp;address);
+&nbsp;&nbsp;&nbsp;contacts_record_set_str(address, _contacts_address.country, &quot;Korea&quot;);
+}
+contacts_db_update_record(contact);
+contacts_record_destroy(contact, true);</pre>
+
+<h2 id="view" name="view">Views and Properties</h2>
+
+<p>Views are provided to access and handle entities. According to data-view declarations, generic access functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> and <span style="font-family: Courier New,Courier,monospace">contacts_record_get_int</span>, can be used  to access contact 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>A data-view is a structure, which has property elements. For example, the <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> 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.</p>
+<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> 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 <span style="font-family: Courier New,Courier,monospace">contact_id</span> property as children of the corresponding contact records.</p>
+
+<p>The property type <span style="font-family: Courier New,Courier,monospace">record</span> means that the parent record can have child records. For example, a contact record has <span style="font-family: Courier New,Courier,monospace">name</span>, <span style="font-family: Courier New,Courier,monospace">number</span>, and <span style="font-family: Courier New,Courier,monospace">email</span> properties, which means that records of those types can be children of the contact type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">contacts_view.h</span> header file.</p>
+
+    <p class="figure">Figure: Properties</p>
+  <p style="text-align:center;"><img alt="Properties" src="../../images/contact_property.png" /></p>
+
+<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> API.</p>
+
+<h2 id="vcard" name="vcard">vCards</h2>
+<p>The Contact Service provides functions for parsing and making vCards. The vCard APIs are based on the <a href="http://www.ietf.org/rfc/rfc2426.txt" target="blank">vCard v3.0 specification</a>.</p>
+
+<h3>Parsing vCards</h3>
+
+<p>There are 2 ways for parsing vCards. The following example shows parsing vCard from stream and inserting it to the database.
+</p>
+<pre class="prettyprint">// Make a contact record list from the vCard stream
+contacts_list_h list = NULL;
+contacts_vcard_parse_to_contacts(vcard_stream, &amp;list);
+// Use the contact record list
+
+contacts_list_destroy(list, true);</pre>
+
+<p>The following example shows parsing vCard from a file and inserting it to database:</p>
+
+<pre class="prettyprint">// Get a record handle of the _contacts_contact view
+static bool __vcard_parse_cb(contacts_record_h record, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int id = 0;
+&nbsp;&nbsp;&nbsp;contacts_db_insert_record(record, &amp;id);
+
+&nbsp;&nbsp;&nbsp;// Return false to break out of the loop
+&nbsp;&nbsp;&nbsp;// Return true to continue with the next iteration of the loop
+&nbsp;&nbsp;&nbsp;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);
+free(resource_path);
+contacts_vcard_parse_to_contact_foreach(vcard_path, __vcard_parse_cb, NULL);
+</pre>
+
+
+<h3>Making a vCard Stream</h3>
+<p>You can make a vCard stream from a contact, person, or my profile record. The following code example makes a vCard stream using a contact record:</p>
+<pre class="prettyprint">contacts_record_h contact;
+char *vcard_stream = NULL;
+
+contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);
+contacts_vcard_make_from_contact(contact, &amp;vcard_stream);
+// Use the vcard stream
+
+free(vcard_stream);
+contacts_record_destroy(contact, true);</pre>
+         
+
+   
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/social_guide_n.htm b/org.tizen.guides/html/native/social/social_guide_n.htm
new file mode 100644 (file)
index 0000000..34ceb09
--- /dev/null
+++ b/org.tizen.guides/html/native/social/social_guide_n.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Social</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Social</h1>
+
+  <p>Social features include managing personal data, such as contacts, schedules, and accounts on the device.</p>
+
+  <p>The main social features are:</p>
+  <ul>
+   <li><a href="account_manager_n.htm">Account Manager</a> 
+   <p>Allows you to work with accounts in your application by creating, managing and removing individual accounts.</p></li>
+   <li><a href="calendar_n.htm">Calendar</a> <p>Allows you to work with personal scheduling data by managing calendars, events, and todos, and setting reminders and recurrence properties. You can also search for calendar book entries and receive calendar book change notifications.</p></li>
+   <li><a href="contact_n.htm">Contacts</a> <p>Allows you to work with contact information in your application by retrieving and managing individual contact information, searching for contacts, and receiving address book change notifications. </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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/device_n.htm b/org.tizen.guides/html/native/system/device_n.htm
new file mode 100644 (file)
index 0000000..90d4a13
--- /dev/null
+++ b/org.tizen.guides/html/native/system/device_n.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/device_tutorial_n.htm">Device Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Device</h1>
+
+   <p>Device features provide functions to control attached devices. The following functionalities are supported:</p>
+   <ul><li>Battery
+   <p>Get the current percentage, the charging state, and the current level state using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">Battery</a> API.</p></li>
+   <li>Display
+   <p>Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">Display</a> API.</p></li>
+   <li>Haptic
+   <p>Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">Haptic</a> API.</p></li>
+   <li>LED
+   <p>Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">Led</a> API.</p></li>
+   <li>Power
+   <p>Request the power state to be locked or unlocked, and change the power state using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">Power</a> API.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/dlog_n.htm b/org.tizen.guides/html/native/system/dlog_n.htm
new file mode 100644 (file)
index 0000000..8ec583c
--- /dev/null
+++ b/org.tizen.guides/html/native/system/dlog_n.htm
@@ -0,0 +1,320 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>dlog</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                               <li><a href="#priority">Priority</a></li>
+                               <li><a href="#tag">Tag</a></li>
+                               <li><a href="#error">Error Type</a></li>
+                               <li><a href="#handling">Error Handling with dlog</a></li>
+                               <li><a href="#dlogutil">dlogutil</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm">dlog Tutorial</a></li>     
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>dlog</h1>
+
+<p>The dlog logging service consists of the dlogutil dlog library, and it supports sending log messages to a circular log device. The log device is a circular buffer used to collect log messages from various applications and the system.</p>
+
+<p class="figure">Figure: Architecture</p>
+
+<p style="text-align:center;"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p> 
+
+<p>The dlog service sends a log message to the circular buffer with APIs, including <strong>Priority</strong> and <strong>Tag</strong> information. With this information, it is easy to filter and check the messages with dlogutil.</p>
+
+<p>Before using dlog, you should know which priorities and tags to use and where to write (format, buffer).</p>
+
+<h2 id="priority" name="priority">Priority</h2>
+
+
+<p>The priority level indicates the urgency of the log message.</p>
+
+<table> 
+   <caption>
+     Table: Priority levels 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Priority</th> 
+     <th>Description</th>       
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_DEBUG</span></td> 
+     <td>Log message which the developer wants to check</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_INFO</span></td> 
+     <td>Normal operational message</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_WARN</span></td> 
+     <td>Not an error, but a warning that an error will occur if action is not taken   
+       </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR</span></td> 
+     <td>An error</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>For each log level (info, debug, and error), there is a separate macro:</p>
+
+<ul class="ul">
+  <li>Info
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_INFO priority when you need info messages to be displayed with a specified tag.</p>
+    <pre class="prettyprint">
+// Print the &quot;Initialization successful.&quot; info message with the tag to the console
+dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Initialization successful.&quot;);</pre></li>
+  <li>Debug
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_DEBUG priority when you need debug messages to be displayed with a specified tag.</p>
+    <pre class="prettyprint">
+// Print the debug message &quot;string: Test&quot; to the console
+dlog_print(DLOG_DEBUG, &quot;MyTag&quot;, &quot;string:&quot;,&quot;%s&quot;, &quot;Test&quot;);
+</pre></li>
+  <li>Error
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_ERROR priority when you need error messages to be displayed with a specified tag.</p>
+    <pre class="prettyprint">
+if (something_wrong)
+{
+&nbsp;&nbsp;&nbsp;// Print the error message with the tag to the console
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;MyTag&quot;, &quot;An unexpected error occurred&quot;);     
+}
+</pre></li>
+  <li>Warning
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_WARN priority when you need warning messages to be displayed with a specified tag.</p>
+    <pre class="prettyprint">
+// Print the warning message with the tag to the console
+dlog_print(DLOG_WARN, &quot;MyTag&quot;, &quot;warning!&quot;);     
+</pre></li>
+</ul>
+
+<p>Log macros belong to Info, Debug, Error, and Warn log levels. To filter logs based on their levels, select the applicable log type in the Log view. You can also search logs by keywords, such as Pid, Tid, Tag, and Message. The following figure shows the output of a log macro.</p>
+<p align="center"><b>Figure: Log macro output</b></p>
+<center><img width='50%'  src='../../images/debugging.png'/></center>
+<h2 id="tag" name="tag">Tag</h2>
+<p>A tag is used to identify the source of the log message.</p>
+
+<p>There are no naming limitations, but do not forget that the tag is an identification of a module.</p>
+
+<p>Each tag must be unique.</p>
+
+
+<h2 id="error" name="error">Error Type</h2>
+<table> 
+   <caption>
+     Table: dlog error types 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Numerator</th> 
+     <th>Description</th>       
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_NONE</span></td> 
+     <td>Successful</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_INVALID_PARAMETER</span></td> 
+     <td>Invalid parameter</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_NOT_PERMITTED</span></td> 
+     <td>Operation not permitted</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+
+
+<p>To send a log message:</p>
+
+<pre class="prettyprint">
+#include &lt;dlog.h&gt;
+int main(void)
+{
+&nbsp;&nbsp;&nbsp;int integer = 21;
+&nbsp;&nbsp;&nbsp;char string[] = &quot;test dlog&quot;;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;test dlog&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;%s, %d&quot;, string, integer);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+
+<pre class="prettyprint">
+#include &lt;dlog.h&gt;
+void my_debug_print(char *format, ...)
+{
+&nbsp;&nbsp;&nbsp;va_list ap;
+&nbsp;&nbsp;&nbsp;va_start(ap, format);
+&nbsp;&nbsp;&nbsp;dlog_vprint(DLOG_INFO, &quot;USR_TAG&quot;, format, ap);
+&nbsp;&nbsp;&nbsp;va_end(ap);
+}
+int main(void)
+{
+&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s&quot;, &quot;test dlog&quot;);
+&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s, %d&quot;, &quot;test dlog&quot;, 21);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+  <h2 id="handling" name="handling">Error Handling with dlog</h2>
+<p> Typical error handling example is as follows:</p>
+<pre class="prettyprint">
+location_manager_h location_handle;
+int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
+if (result != LOCATIONS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Creation of the location manager failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return false;
+}
+</pre>
+
+<p>While working with the SDK this information is available in the Log tab. While working with the target device, one can also use dlogutil utility.</p>
+
+<h2 id="dlogutil" name="dlogutil">dlogutil</h2>
+<p>You can collect and print out logs with logutil. Logutil supports filtering, and managing the log device.</p>
+
+<h3 id="commands" name="commands">Using Logutil Commands</h3>
+<p>You can use a logutil command to view and follow the content of the log buffers. The general usage is:</p>
+
+<pre class="prettyprint">
+dlogutil [&lt;option&gt;] ... [&lt;filter-spec&gt;] ...
+</pre>
+
+<h3 id="filter_output" name="filter_output">Filtering Log Output</h3>
+<p>Every log message has a tag and a priority associated with it.</p>
+
+<p>The filter expression follows the <span style="font-family: Courier New,Courier,monospace">tag:priority</span> format, where the tag indicates the tag of interest and the priority indicates the minimum level of priority to report for that tag. You can add any number of <span style="font-family: Courier New,Courier,monospace">tag:priority</span> specifications in a single filter expression.</p>
+
+<p>The tag of a log message is a short name indicating the system component from which the message originates.</p>
+<p>The priority is one of the following character values, ordered from the lowest to the highest priority:</p>
+<ul class="ul"><li>D - debug</li>
+<li>I - info</li>
+<li>W - warning</li>
+<li>E - Error</li></ul>
+
+<p>For example, if you want to see all log messages with the MyApp tag that are above the debug priority:</p>
+
+<pre class="prettyprint"># dlogutil MyApp:D</pre>
+
+<p>If you want to see all log messages above the info priority:</p>
+
+<pre class="prettyprint"># dlogutil *:I</pre>
+
+<h3 id="control_output" name="control_output">Controlling Log Output Format</h3>
+<p>The log messages contain a number of metadata fields in addition to tag and priority. You can modify the output format for messages so that they display a specific metadata field. To do so, use the <span style="font-family: Courier New,Courier,monospace">-v</span> option when starting dlogutil and specify one of the supported output formats:</p>
+
+<ul class="ul">
+       <li>brief: Displays the priority/tag and PID of the originating process (the default format)</li>
+       <li>process: Displays the PID only</li> 
+       <li>tag: Displays the priority/tag only</li>
+       <li>thread: Displays the process:thread and priority/tag only</li> 
+       <li>raw: Displays the raw log message, with no other metadata fields</li> 
+       <li>time: Displays the date, invocation time, priority/tag, and PID of the originating process</li> 
+       <li>long: Displays all metadata fields and separates messages with blank lines</li>
+</ul>
+
+<pre class="prettyprint"># dlogutil [-v &lt;format&gt;]</pre>
+
+<h3 id="list_output" name="list_output">List of Logutil Command Options</h3>
+<table> 
+   <caption>
+     Table: Logutil command options 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Option</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-b &lt;buffer&gt;</span></td> 
+     <td>Alternates the log buffer. The main buffer is used by the default buffer.</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-c</span></td> 
+     <td>Clears the entire log and exits</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-d</span></td> 
+     <td>Dumps the log and exits</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-f &lt;filename&gt;</span></td> 
+     <td>Writes the log to &lt;filename&gt;. The default filename is stdout.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-g</span></td> 
+     <td>Prints the size of the specified log buffer and exits</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-n &lt;count&gt;</span></td> 
+     <td>Sets the maximum number of rotated logs to &lt;count&gt;. The default value is 4. Requires the <span style="font-family: Courier New,Courier,monospace">-r</span> option.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-r &lt;Kbytes&gt;</span></td> 
+     <td>Rotates the log file every &lt;Kbytes&gt; of output. The default value is 16. Requires the <span style="font-family: Courier New,Courier,monospace">-f</span> option.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-s</span></td> 
+     <td>Sets the default filter spec to silent</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">-v &lt;format&gt;</span></td> 
+     <td>Sets the output format for log messages. The default format is brief.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/media_keys_n.htm b/org.tizen.guides/html/native/system/media_keys_n.htm
new file mode 100644 (file)
index 0000000..f5ea420
--- /dev/null
+++ b/org.tizen.guides/html/native/system/media_keys_n.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 key</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm">Media key Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media key</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 <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">media_key_e</a> enumerator 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 register a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_reserve()</span> function. The first parameter of the function defines the <span style="font-family: Courier New,Courier,monospace">media_key_event_cb</span> type callback, which you can implement to perform any actions you need. </p>
+   </li> 
+   <li>Unregistering a callback 
+   <p>You can unregister a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_release()</span> function.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/runtime_info_n.htm b/org.tizen.guides/html/native/system/runtime_info_n.htm
new file mode 100644 (file)
index 0000000..481f3af
--- /dev/null
+++ b/org.tizen.guides/html/native/system/runtime_info_n.htm
@@ -0,0 +1,159 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm">Runtime information Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API</a></li>                 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Runtime information</h1>
+
+  <p>The <span style="font-family: Courier New,Courier,monospace">capi-system-runtime-info</span> enables your application to get various runtime information.</p> 
+  <p>To obtain the information, query a runtime info key. The keys are listed in the following table.
+</p> 
+  <table id="runtime_information_keys" border="1"> 
+   <caption>
+     Table: Runtime information keys 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Key</th> 
+     <th>Type</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether Bluetooth is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether a Wi-Fi hotspot is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether Bluetooth tethering is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether USB tethering is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether the location service is allowed to use location data from GPS satellites.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether the location service is allowed to use location data from cellular and Wi-Fi.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether the packet data through 3G network is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether data roaming is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_VIBRATION_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether vibration is enabled.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether an audio jack is connected.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_GPS_STATUS</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
+     <td>Indicates the current status of GPS.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether the battery is currently charging.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_TV_OUT_CONNECTED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether TV out is connected.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
+     <td>Indicates the current status of the audio jack.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether USB is connected.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_CHARGER_CONNECTED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+     <td>Indicates whether a charger is connected.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/sensors_n.htm b/org.tizen.guides/html/native/system/sensors_n.htm
new file mode 100644 (file)
index 0000000..b6f0659
--- /dev/null
+++ b/org.tizen.guides/html/native/system/sensors_n.htm
@@ -0,0 +1,810 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Sensor</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#handle">Sensor Handle</a></li>
+                       <li><a href="#listener">Sensor Listener</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">                
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm">Sensor Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sensor</h1> 
+  <p>Tizen provides functions for receiving and managing sensor data.</p>
+<p>The main features of the Sensor API include:</p> 
+  <ul>
+<li><a href="#handle">Sensor Handle</a></li>
+<li><a href="#listener">Sensor Listener</a></li>
+  </ul>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Not all devices support all sensor types. For more information, see <a href="sysinfo_n.htm">System Information</a>.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+   <h2 name="handle" id="handle">Sensor Handle</h2> 
+  <p>A device can have various physical sensors. Tizen supports the following sensor types:</p> 
+  <ul> 
+   <li><a href="#accelerometer">Accelerometer Sensor</a></li> 
+   <li><a href="#gravity">Gravity Sensor</a></li> 
+   <li><a href="#lin_accelerometer">Linear Accelerometer Sensor</a></li>
+   <li><a href="#magnetic">Magnetic Sensor</a></li>    
+   <li><a href="#rotation">Rotation Vector Sensor</a></li>        
+   <li><a href="#orientation">Orientation Sensor</a></li> 
+   <li><a href="#gyro">Gyroscope Sensor</a></li> 
+   <li><a href="#light">Light Sensor</a></li> 
+   <li><a href="#proximity">Proximity Sensor</a></li>
+   <li><a href="#pressure">Pressure Sensor</a></li>
+   <li><a href="#ultraviolet">Ultraviolet Sensor</a></li>   
+   <li><a href="#temperature">Temperature Sensor</a></li> 
+   <li><a href="#humidity">Humidity Sensor</a></li> 
+  </ul> 
+  <p>The Sensor API enables your application to receive data from the device&#39;s internal sensors. The application can receive the sensor data only when the data is modified.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"><p>Not all sensors are available on all devices.</p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The Sensor API finds sensors, and monitors their availability. Key sensor features provided by the Sensor API include getting and setting the following:</p> 
+  <ul> 
+   <li>Sensor name</li> 
+   <li>Sensor vendor</li> 
+   <li>Sensor type</li> 
+   <li>Resolution</li> 
+   <li>Sensing interval</li> 
+   <li>Measurement range</li> 
+  </ul> 
+
+<h3 id="accelerometer" name="accelerometer">Accelerometer Sensor</h3> 
+  <p>The accelerometer sensor measures changes in velocity. It can also be used to determine orientation. The accelerometer sensor measures the device&#39;s accelerometer vector in 3 axes relative to its body frame.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"><p>An acceleration shift of 1g always exists due to gravity. You must compensate for the gravitational pull of the Earth to detect device movement by subtracting the gravity offset. If the device is at rest, or the device is falling and has reached terminal velocity, the sensor data reads 1g (the gravity offset) and tells you the direction of gravity.</p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The accelerometer sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p> 
+  <p class="figure">Figure: Accelerometer sensor vector and axes</p> 
+  <p style="text-align:center;"><img alt="Accelerometer sensor vector and axes" src="../../images/sensor_types_accelerometer_vector.png" /></p> 
+  <p>The accelerometer sensor 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 accelerated 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 sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the accelerometer sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: X</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6<p>Max. value = 19.6</p> </td>
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6<p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6<p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td>
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The following table provides information about the accelerometer sensor output for a device at rest.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Acceleration sensor output for a device at rest 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Position</th> 
+     <th>1</th> 
+     <th>2</th> 
+     <th>3</th> 
+     <th>4</th> 
+     <th>5</th> 
+     <th>6</th> 
+    </tr> 
+    <tr> 
+     <td>Diagram</td> 
+     <td><img alt="Acceleration sensor output" src="../../images/uix_acceleration_sensor_output_up_top.png" /></td> 
+     <td><img alt="Acceleration sensor output" src="../../images/uix_acceleration_sensor_output_up_left.png" /></td> 
+     <td><img alt="Acceleration sensor output" src="../../images/uix_acceleration_sensor_output_up_down.png" /></td> 
+     <td><img alt="Acceleration sensor output" src="../../images/uix_acceleration_sensor_output_up_right.png" /></td> 
+     <td><img alt="Acceleration sensor output" src="../../images/uix_acceleration_sensor_output_top_bottom.png" /></td> 
+     <td><img alt="Acceleration sensor output" src="../../images/uix_acceleration_sensor_output_bottom_top.png" /></td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: X</td> 
+     <td align="center">0g </td> 
+     <td align="center">1g</td> 
+     <td align="center">0g</td> 
+     <td align="center">-1g</td> 
+     <td align="center">0g</td> 
+     <td align="center">0g</td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td align="center">1g </td> 
+     <td align="center"> 0g</td> 
+     <td align="center">-1g</td> 
+     <td align="center"> 0g</td> 
+     <td align="center">0g</td> 
+     <td align="center">0g</td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td align="center">0g </td> 
+     <td align="center">0g</td> 
+     <td align="center">0g</td> 
+     <td align="center">0g</td> 
+     <td align="center">1g</td> 
+     <td align="center">-1g</td> 
+    </tr> 
+    <tr> 
+     <td>Axis up (down)</td> 
+     <td align="center">Y </td> 
+     <td align="center">X</td> 
+     <td align="center">-Y</td> 
+     <td align="center">-X</td> 
+     <td align="center">Z</td> 
+     <td align="center">-Z</td> 
+    </tr> 
+    <tr> 
+     <td>X-polarity</td> 
+     <td align="center">0 </td> 
+     <td align="center">+</td> 
+     <td align="center">0</td> 
+     <td align="center">-</td> 
+     <td align="center">0</td> 
+     <td align="center">0</td> 
+    </tr> 
+    <tr> 
+     <td>Y-polarity</td> 
+     <td align="center">+ </td> 
+     <td align="center">0</td> 
+     <td align="center">-</td> 
+     <td align="center">0</td> 
+     <td align="center">0</td> 
+     <td align="center">0</td> 
+    </tr> 
+    <tr> 
+     <td>Z-polarity</td> 
+     <td align="center">0</td> 
+     <td align="center">0</td> 
+     <td align="center">0</td> 
+     <td align="center">0</td> 
+     <td align="center">+</td> 
+     <td align="center">-</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  
+  <h3 id="gravity" name="gravity">Gravity Sensor</h3> 
+  <p>The gravity sensor is originated from the 3-axis acceleration sensor. It measures the vector components of gravity when the device is at rest or moving slowly. The gravity sensor can be used, for example, with game controls using tilting motion.</p> 
+  <p>The gravity sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p> 
+  <p class="figure">Figure: Gravity sensor vector and axes</p> 
+  <p style="text-align:center;"><img alt="Gravity sensor vector and axes" src="../../images/sensor_types_gravity_frame.png" /></p> 
+  <p>Gravity is a unit vector (scalar = 1). 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 accelerated in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-).</p> 
+  <p>Accelerometer changes generated by gravity are sensed in opposite directions.</p> 
+  <p>The following table lists the measurement data that the gravity sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the gravity sensor 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: X</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6<p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td>
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6<p>Max. value = 19.6</p> </td>
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6<p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  
+  <h3 id="lin_accelerometer" name="lin_accelerometer">Linear Accelerometer Sensor</h3> 
+  <p>The linear accelerometer sensor measures user-driven changes in velocity without considering the gravity value. It measures the device&#39;s accelerometer vector in 3 axes relative to its body frame. The linear accelerometer sensor is used to detect the dynamic movement of the device and analyze the user&#39;s motion profile.</p> 
+  <p>The linear accelerometer sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p> 
+  <p class="figure">Figure: User-acceleration sensor vector and axes</p> 
+  <p style="text-align:center;"><img alt="User-acceleration sensor vector and axes" src="../../images/sensor_types_useracceleration_vector.png" /></p> 
+  <p>The linear accelerometer sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The linear accelerometer 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 accelerometer output is shown in the same direction as the user-driven force.</p> 
+  <p>Accelerometer changes generated by user-driven force are sensed in opposite directions.</p> 
+  <p>The following table lists the measurement data that the linear accelerometer sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the linear accelerometer sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: X</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6 <p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6 <p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -19.6 <p>Max. value = 19.6</p> </td> 
+     <td>m/s<sup>2</sup></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  
+ <h3 id="magnetic" name="magnetic">Magnetic Sensor</h3> 
+  <p>The magnetic sensor is a 3-axis electronic compass (sometimes referred to as a &quot;magnetometer&quot;). It can also be used in determining orientation. The magnetic sensor measures magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components. Note that the following factors can have an impact on the readings:</p> 
+  <ul> 
+   <li>The weather or the season of the year</li> 
+   <li>Your location on the planet</li> 
+   <li>Nearby, strong magnetic fields, such as magnets or electric coils</li> 
+  </ul> 
+  <p>The following table lists the measurement data that the magnetic sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the magnetic sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: X</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>μT (micro Tesla)</td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>μT (micro Tesla)</td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>μT (micro Tesla)</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p></p> 
+  <p>The magnetic sensor uses the body of the device as a fixed frame of reference. It also uses the 3-axis Cartesian space coordinate system, as the following figure illustrates.</p> 
+  <p class="figure">Figure: Magnetic field vector and axes</p> 
+  <p style="text-align:center;"><img alt="Magnetic field vector and axes" src="../../images/sensor_types_magnetic_vector.png" /></p> 
+    
+   <h3 id="rotation" name="rotation">Rotation Vector Sensor</h3> 
+  <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).</p> 
+
+  <p>The following table lists the measurement data that the rotation vector sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the rotation vector 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+        <th>Range</th>
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+        <td>-</td>      
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>Accuracy</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">sensor_data_accuracy_e</span></td>
+        <td>-</td>      
+     <td>int</td> 
+    </tr>      
+    <tr> 
+     <td>values[0]: X</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -1 <p>Max. value = 1</p> </td>
+        <td>-</td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -1 <p>Max. value = 1</p> </td>
+        <td>-</td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -1 <p>Max. value = 1</p> </td>
+        <td>-</td> 
+    </tr> 
+    <tr> 
+     <td>values[3]: W</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -1 <p>Max. value = 1</p> </td>
+        <td>-</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+  
+  
+  <h3 id="orientation" name="orientation">Orientation Sensor</h3> 
+  <p>The orientation sensor combines the 3-axis accelerometer sensor and 3-axis magnetic sensor to determine the following angular positions:</p> 
+  <ul> 
+   <li>Azimuth</li> 
+   <li>Pitch</li> 
+   <li>Roll</li>
+  </ul> 
+
+  <p>The following table lists the measurement data that the orientation sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the orientation sensor 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: Azimuth</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = 0<p>Max. value = 360</p> </td> 
+     <td>Degrees (&deg;)</td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Pitch</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -180<p>Max. value = 180</p></td> 
+     <td>Degrees (&deg;)</td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Roll</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -90<p>Max. value = 90</p></td> 
+     <td>Degrees (&deg;)</td> 
+    </tr> 
+   </tbody> 
+  </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 class="figure">Figure: Angular positions and the fixed frame reference</p> 
+  <p style="text-align:center;"><img alt="Angular positions and the fixed frame reference" src="../../images/sensor_types_deviceorientation_frame.png" /></p> 
+  
+  
+   <h3 id="gyro" name="gyro">Gyroscope Sensor</h3> 
+  <p>The gyroscope sensor detects angular velocity, which is calculated using the measurement data retrieved from a 3-axis gyroscope.</p> 
+  <p class="figure">Figure: Gyroscope sensor vector and axes</p> 
+  <p style="text-align:center;"><img alt="Gyroscope sensor vector and axes" src="../../images/sensor_types_gyro_vector.png" /></p> 
+  <p>The following table lists the measurement data that the gyroscope sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the gyroscope sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: X</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -573.0 <p>Max. value = 573.0</p></td> 
+     <td>Degrees/s (&deg;/s)</td> 
+    </tr> 
+    <tr> 
+     <td>values[1]: Y</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -573.0 <p>Max. value = 573.0</p></td>
+     <td>Degrees/s (&deg;/s)</td> 
+    </tr> 
+    <tr> 
+     <td>values[2]: Z</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -573.0 <p>Max. value = 573.0</p></td> 
+     <td>Degrees/s (&deg;/s)</td>
+    </tr> 
+   </tbody> 
+  </table> 
+  
+   <h3 id="light" name="light">Light Sensor</h3> 
+  <p>The light sensor detects the brightness of ambient light. It can be used to measure the brightness level.</p> 
+  <p>Use the light sensor to control the brightness of the screen. For example, if you are in a dark environment, the light sensor detects the brightness of the environment and increases the device screen backlight brightness level. In a brighter environment, the backlight brightness level is lowered to save battery power.</p> 
+  <p>The following table lists the measurement data that the light sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the light sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: Level</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = 0 <p>Max. value = 45875</p></td> 
+     <td>Lux</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <h3 id="proximity" name="proximity">Proximity Sensor</h3> 
+  <p>The proximity sensor detects the presence of nearby objects. It can be used to measure the distance between nearby objects and the device.</p> 
+  <p>Use the proximity sensor to lock or unlock the device screen. For example, when the device user holds the device to their ear, the proximity sensor detects the user as an object, and automatically locks the device screen. When the user moves the device away from their ear to input data, the proximity sensor determines that there are no nearby objects, and unlocks the screen.</p> 
+  <p>The following table lists the measurement data that the proximity sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the proximity sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+    <tr> 
+     <td>values[0]: proximity</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>-</td> 
+     <td>-</td> 
+    </tr> 
+    
+   </tbody> 
+  </table> 
+ 
+    <h3 id="pressure" name="pressure">Pressure Sensor</h3> 
+  <p>The pressure sensor measures pressure, typically the pressure of gases or liquids. Pressure is an expression of the force required to stop a fluid from expanding, and it is usually stated in terms of force per unit area. A pressure sensor usually acts as a transducer, generating a signal as a function of the pressure imposed. For the purposes of Tizen, the signal is electrical.</p> 
+  <p>Measurement values are related to the sensor type.</p>
+  <p>The following table lists the measurement data that the pressure sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the pressure sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+     <tr> 
+     <td>values[0]: pressure</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = 260 <p>Max. value = 1260</p></td> 
+     <td>hPa</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+
+    <h3 id="ultraviolet" name="ultraviolet">Ultraviolet Sensor</h3> 
+  <p>The ultraviolet sensor measures the ultraviolet index.</p>
+  <p>The following table lists the measurement data that the ultraviolet sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the ultraviolet sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+     <tr> 
+     <td>values[0]: uv index</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = 0 <p>Max. value = 15</p></td>
+     <td>uv index</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+  
+    <h3 id="temperature" name="temperature">Temperature Sensor</h3> 
+  <p>The temperature sensor measures the temperature, just like a thermometer.</p>
+  <p>The following table lists the measurement data that the temperature sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the temperature sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+     <tr> 
+     <td>values[0]: temperature</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>Min. value = -30 <p>Max. value = 100</p></td>
+     <td>&#8451;</td>
+    </tr>      
+   </tbody> 
+  </table>  
+
+     <h3 id="humidity" name="humidity">Humidity Sensor</h3> 
+  <p>The humidity sensor measures humidity.</p>
+  <p>The following table lists the measurement data that the humidity sensor provides.</p> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Measurement data detected by the humidity sensor 
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Measurement</th> 
+     <th>Type</th> 
+     <th>Range</th> 
+     <th>Unit</th> 
+    </tr> 
+    <tr> 
+     <td>Timestamp</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td> 
+     <td>-</td> 
+     <td>Milliseconds</td> 
+    </tr> 
+     <tr> 
+     <td>values[0]: humidity</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">float</span></td> 
+     <td>100</td> 
+     <td>%</td> 
+    </tr>      
+   </tbody> 
+  </table>  
+ 
+ 
+  <h2 id="listener" name="listener">Sensor Listener</h2> 
+  <p>The Sensor API detects sensors and monitors their availability. The key sensor listening features provided by the Sensor API include:</p>
+<ul><li>Adding and removing sensor listeners</li> 
+<li>Checking available sensors</li> 
+<li>Getting sensor data</li></ul>
+
+<p>When running your application on the Emulator, you can use the Event Injector view to provide sensor data for the application.</p>
+
+<p>You can add or remove sensor listeners at any time.</p>
+
+<p>Listeners poll sensors for data and deliver the data to applications at predefined intervals. Applications can add multiple sensor listeners for the same sensor type, but the polling interval must be the same for each sensor listener and within the allowed interval range.</p>
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/system/settings_n.htm b/org.tizen.guides/html/native/system/settings_n.htm
new file mode 100644 (file)
index 0000000..4c63cb7
--- /dev/null
+++ b/org.tizen.guides/html/native/system/settings_n.htm
@@ -0,0 +1,290 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm">System Settings Tutorial</a></li>        
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System Settings</h1>
+
+<p>Tizen provides functions for getting the system configuration related to user preferences.</p>
+
+<p>The main features of the System Settings API include accessing system-wide configurations, such as ringtone, wallpaper, and font.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator defines all enumerations that work as arguments for the System Settings API.</p>
+<p>The System Settings API provides 2 function types listed in the following table. Certain functions support both types, whereas others only support the getter function.</p>
+
+<table>
+<caption>Table: System Settings API function types</caption>
+<tbody>
+<tr>
+ <th>Function type</th>
+ <th>Methods</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_bool</span>
+ <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_int</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_string</span></p></td>
+ <td>Get the user-defined values by data type (bool, int, or string).</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">system_settings_set_changed_cb</span><p><span style="font-family: Courier New,Courier,monospace">system_settings_unset_changed_cb</span></p></td>
+ <td>Register and unregister callback functions when the <span style="font-family: Courier New,Courier,monospace">SETTER</span> related to the key is called.</td>
+</tr></tbody>
+</table>
+
+<p>The following table lists the system settings details.</p>
+  <table id="input" border="1"> 
+   <caption>
+     Table: System settings keys
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Supporting API type </th> 
+        <th>Description</th> 
+    </tr> 
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>
+       <td>Current system default font type.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEVICE_NAME</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Device name.</td>
+       </tr>
+       
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether rotation control is automatic.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_EMAIL_ALERT_RINGTONE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>File path of the current email alert ringtone.</td>
+       </tr>
+       
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_SIZE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Current system font size.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_TYPE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Current system font type.</td>
+       </tr>   
+       
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>File path of the current ringtone.</td>
+       </tr>   
+       
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Current country setting in the &lt;LANGUAGE&gt;_&lt;REGION&gt; syntax. The country setting is in the ISO 639-2 format, and the region setting is in the ISO 3166-1 alpha-2 format.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Current language setting in the &lt;LANGUAGE&gt;_&lt;REGION&gt; syntax. The language setting is in the ISO 639-2 format and the region setting is in the ISO 3166-1 alpha-2 format.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether the 24-hour clock is used. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the 12-hour clock is used.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Current time zone.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether the motion service is activated.</td>
+       </tr>
+       
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</span></td>                        
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether the device is in the flight mode.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_WIFI_NOTIFICATION</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether Wi-Fi-related notifications are enabled on the device.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SCREEN_BACKLIGHT_TIME</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Backlight time (in seconds).</td>
+       </tr>
+       <tr>
+       
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_LOCK</span></td>                                 
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></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><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>File path of the current notification tone set by the user. </td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION_REPETITION_PERIOD</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Time period for notification repetitions.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</span></td>                  
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether the device is in the silent mode.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_TOUCH</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether the screen touch sound is enabled on the device.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_TIME_CHANGED</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>
+       <td>Event that occurs when the system changes time to notify you about the time change.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_USB_DEBUGGING_ENABLED</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>Indicates whether the USB debugging is enabled.</td>
+       </tr>
+       
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>File path of the current home screen wallpaper.</td>
+       </tr>
+
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
+       <td>File path of the current lock screen wallpaper.</td>
+       </tr>
+   </tbody> 
+  </table>
+
+<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 _img_cb (system_settings_key_e key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n&quot;);
+}
+
+// NOTIFIER 1 - Registering a callback function
+system_settings_set_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, _img_cb, NULL);
+char * path;
+
+// GETTER
+system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, &amp;path);
+printf (&quot;path of the current wallpaper is %s \n&quot;, path);
+
+// NOTIFIER 2 - Deregistering a callback function
+system_settings_unset_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN);
+</pre>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/storage_n.htm b/org.tizen.guides/html/native/system/storage_n.htm
new file mode 100644 (file)
index 0000000..ebec9d4
--- /dev/null
+++ b/org.tizen.guides/html/native/system/storage_n.htm
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Storage</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/storage_tutorial_n.htm">Storage Tutorial</a></li>       
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Storage</h1>
+
+  <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> 
+  <table border="1" style="width: 100%"> 
+   <caption>
+     Table: Filesystem virtual roots 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Virtual root</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">images</span></td> 
+     <td>Location for storing images.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">sounds</span></td> 
+     <td>Location for storing sound files.</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">videos</span></td> 
+     <td>Location for storing videos.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">camera</span></td> 
+     <td>Location for storing camera files.</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">downloads</span></td> 
+     <td>Location for storing downloaded items.</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">music</span></td> 
+     <td>Location for storing audio files.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">documents</span></td> 
+     <td>Location for storing documents.</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">others</span></td> 
+     <td>Location for storing other files.</td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">ringtones</span></td> 
+     <td>Location for ringtones (read-only location).</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+  <p>The main features of the Storage API include:</p> 
+  <ul> 
+   <li>Storage management <p>You can manage different storages on the device with the Storage APIs.</p> <p>You can retrieve additional information about the storages, including which storage is supported in the device using the <span style="font-family: Courier New,Courier,monospace">storage_foreach_device_supported()</span> function. The callback function returns the storage type, mount state, and virtual root path.</p>
+   </li> 
+   <li>Storage space management 
+   <p>You can get the available and total space size of the storage with the  <span style="font-family: Courier New,Courier,monospace">storage_get_total_space()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_available_space()</span> 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 <span style="font-family: Courier New,Courier,monospace">statvfs</span> function directly in Tizen. Instead, use <span style="font-family: Courier New,Courier,monospace">storage_get_internal_memory_size()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_external_memory_size()</span>. 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></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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/sysinfo_n.htm b/org.tizen.guides/html/native/system/sysinfo_n.htm
new file mode 100644 (file)
index 0000000..417577e
--- /dev/null
+++ b/org.tizen.guides/html/native/system/sysinfo_n.htm
@@ -0,0 +1,1111 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+  <li><a href="#feature">Feature Keys</a></li>
+  <li><a href="#system">System Keys</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm">System Information Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<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.</p> 
+
+     <table border="1"> 
+     <caption>
+       Table: Device-specific information categories 
+     </caption> 
+     <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>Device capabilities</td> 
+       <td>Sensors, networks, connections, and additional components.</td> 
+      </tr> 
+     </tbody> 
+    </table>  
+
+  <p>To obtain the information, query a system info key. The keys are listed in the following tables.</p>
+  <ul>
+  <li>Feature keys:
+  <ul>
+  <li><a href="#camera">Camera</a></li>
+  <li><a href="#fmradio">FM radio</a></li>
+  <li><a href="#graphics">Graphics</a></li>
+  <li><a href="#input">Input</a></li>
+  <li><a href="#led">LED</a></li>
+  <li><a href="#location">Location</a></li>
+  <li><a href="#microphone">Microphone</a></li>
+  <li><a href="#multimedia">Multimedia</a></li>
+  <li><a href="#multipoint">Multi-point touch</a></li>
+  <li><a href="#network">Network</a></li>
+  <li><a href="#opengl">OpenGL&reg; ES</a></li>
+  <li><a href="#platformfeat">Platform</a></li>
+  <li><a href="#profile_feat">Profile</a></li>
+  <li><a href="#screen">Screen</a></li>
+  <li><a href="#sensor">Sensor</a></li>
+  <li><a href="#shell">Shell</a></li>
+  <li><a href="#sip">Sip</a></li>
+  <li><a href="#speech">Speech</a></li>
+  <li><a href="#usb">USB</a></li>
+  <li><a href="#vision">Vision</a></li>
+  </ul>
+  </li>
+  <li>System keys:
+  <ul>
+  <li><a href="#build">Build</a></li>
+  <li><a href="#manufacturer">Manufacturer</a></li>
+  <li><a href="#modelname">Model name</a></li>
+  <li><a href="#platformsys">Platform</a></li>
+  <li><a href="#tizenid">TizenID</a></li>
+  </ul>
+  </li></ul>
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h2 id="feature">Feature Keys</h2>
+
+<p>The following table lists the camera feature keys.</p>
+<table id="camera" border="1"> 
+   <caption>
+     Table: Camera feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides any kind of a camera.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a back-facing camera.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span> key, if the device provides a back-facing camera with a flash.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a front-facing camera.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span> key, if the device provides a front-facing camera with a flash.</td>
+    </tr>
+   </tbody> 
+  </table>
+ <p>The following table lists the FM radio feature keys.</p>
+ <table id="fmradio" border="1"> 
+   <caption>
+     Table: FM radio feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports an FM radio.</td>
+    </tr>
+   </tbody> 
+  </table>
+  <p>The following table lists the graphics feature keys.</p>
+   <table id="graphics" border="1"> 
+   <caption>
+     Table: Graphics feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports graphics hardware acceleration.</td>
+    </tr>
+   </tbody> 
+  </table>
+  <p>The following table lists the input feature keys.</p>
+  <table id="input" border="1"> 
+   <caption>
+     Table: Input feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device  provides a built-in keyboard supporting any keyboard layout.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+        <td>The platform returns the keyboard layout (such as <span style="font-family: Courier New,Courier,monospace">qwerty</span>) supported by the built-in keyboard for this key and returns <span style="font-family: Courier New,Courier,monospace">true</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.
+       <p>If the device does not provide a built-in keyboard, the  platform returns an empty string for this key and returns <span style="font-family: Courier New,Courier,monospace">false</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.</p></td>
+    </tr>
+   </tbody> 
+  </table>
+  <p>The following table lists the LED feature keys.</p>
+   <table id="led" border="1">
+   <caption>
+     Table: LED feature keys
+   </caption>
+   <tbody>
+    <tr>
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED.</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>The following table lists the location feature keys.</p>
+<table id="location" border="1"> 
+   <caption>
+     Table: Location feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports location positioning.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the Global Positioning System (GPS).</td>
+    </tr>
+               <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports  the Wi-Fi-based Positioning System (WPS).</td>
+    </tr>
+   </tbody> 
+  </table>
+<p>The following table lists the microphone feature keys.</p>
+<table id="microphone" border="1"> 
+   <caption>
+     Table: Microphone feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a microphone.</td>
+    </tr>
+   </tbody> 
+  </table>
+<p>The following table lists the multimedia feature keys.</p>
+<table id="multimedia" border="1">
+   <caption>
+     Table: Multimedia feature keys
+   </caption>
+   <tbody>
+    <tr>
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the transcoder.</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>The following table lists the multi-point touch feature keys.</p>
+  <table id="multipoint" border="1"> 
+   <caption>
+     Table: Multi-point touch feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports pinch zoom gestures.</td>
+    </tr>
+           <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></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> 
+  </table>
+  <p>The following table lists the network feature keys.</p>
+  <table id="network" border="1"> 
+   <caption>
+     Table: Network feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Handsfree Profile (HFP).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Advanced Audio Distribute Profile (A2DP).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Health Device Profile (HDP).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Human Input Device (HID).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Low Energy (BLE).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Object Push Profile (OPP).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Near Field Communication (NFC).</td>
+    </tr>
+        <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device is recognized by the NFC card readers.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key  and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> key, if the device supports the NFC reserved push feature.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the IP push service provided by
+the Tizen reference implementation.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports secure elements.</td>
+    </tr><tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports eSE secure elements.</td>
+    </tr><tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports UICC secure elements.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports telephony.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports MMS.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any kind of tethering.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span> key, if the device supports tethering over Bluetooth.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span> key, if the device supports tethering over USB connection.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span> key, if the device supports tethering over Wi-Fi.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Wi-Fi.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct&trade;.</td>
+    </tr><tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct&trade; display feature.</td>
+    </tr><tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct&trade; service discovery.</td>
+    </tr>
+   </tbody> 
+  </table>
+<p>The following table lists the OpenGL&reg; ES feature keys.</p>
+<table id="opengl" border="1"> 
+   <caption>
+     Table: OpenGL&reg; ES feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any OpenGL&reg; ES version and any texture format.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the 3DC texture format for OpenGL&reg; ES.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ATC texture format for OpenGL&reg; ES.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ETC texture format for OpenGL&reg; ES.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PTC texture format for OpenGL&reg; ES.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PVRTC texture format for OpenGL&reg; ES.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the UTC texture format for OpenGL&reg; ES.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL&reg; ES version 1.1.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL&reg; ES version 2.0.</td>
+    </tr>
+   </tbody> 
+  </table>
+<p>The following table lists the platform feature keys.</p>
+  <table id="platformfeat" border="1"> 
+   <caption>
+     Table: Platform feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv6</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv6 CPU architecture. </td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv7 CPU architecture. </td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the x86 CPU architecture. </td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE2 FPU architecture.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE3 FPU architecture.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSSE3 FPU architecture.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv2</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV2 FPU architecture.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV3 FPU architecture.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+        <td>The platform returns the version of native api in the "[Major].[Minor]" format.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+        <td>The platform returns the version of platform in the "[Major].[Minor].[Patch Version]" format.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.web.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+        <td>The platform returns the version of web api in the "[Major].[Minor]" format.</td>
+    </tr>
+   </tbody> 
+  </table>
+<p>The following table lists the profile feature keys.</p>
+<table id="profile_feat" border="1"> 
+   <caption>
+     Table: Profile feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/profile</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+        <td>The platform returns a compliant device profile (such as <span style="font-family: Courier New,Courier,monospace">mobile-full</span>) for this key.</td>
+    </tr>
+   </tbody> 
+  </table>
+  <p>The following table lists the screen feature keys.</p>
+<table id="screen" border="1"> 
+   <caption>
+     Table: Screen feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports screen auto-rotation.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.bpp</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></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><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.dpi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
+        <td>The platform returns the number of dots per inch supported by the device for this key.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.height</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
+        <td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.large</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size for the coordinate system.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.normal</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the normal screen size for the coordinate system.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.hdmi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports HDMI output.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.rca</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports RCA output.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.large</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform always returns <span style="font-family: Courier New,Courier,monospace">false</span> for this key.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform always returns <span style="font-family: Courier New,Courier,monospace">true</span>, if the device supports any screen sizes and resolutions.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 240 x 400 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 320 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 480 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 360 x 480 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 480 x 800 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 540 x 960 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 600 x 1024 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+       <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 720 x 1280 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+       <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 1080 x 1290 resolution for the normal screen size. 
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p></td>
+    </tr>      
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.width</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
+        <td>The platform returns the width of the screen in pixels supported by the device for this key.</td>
+    </tr>
+   </tbody> 
+  </table>
+<p>The following table lists the sensor feature keys.</p>
+<table id="sensor" border="1"> 
+   <caption>
+     Table: Sensor feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the acceleration sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span> key, if the device supports the wake-up operation by the acceleration sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the activity recognition.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the barometer sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span> key, if the device supports the wake-up operation by the barometer sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gesture recognition.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gravity sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gyro sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span> key, if the device supports the wake-up operation by the gyro sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the heart rate monitor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the humidity sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the linear acceleration sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the magnetic sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span> key, if the device supports the wake-up operation by the magnetic sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the pedometer.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the photo (light) sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span> key, if the device supports the wake-up operation by the photo sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the proximity sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span> key, if the device supports the wake-up operation by the proximity sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotation vector sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the temperature sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the tilt sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span> key, if the device supports the wake-up operation by the tilt sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the ultraviolet sensor.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the wrist up action.</td>
+    </tr>
+
+   </tbody> 
+  </table>
+<p>The following table lists the shell feature keys.</p>
+<table id="shell" border="1"> 
+   <caption>
+     Table: Shell feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the AppWidget (Dynamic Box).</td>
+    </tr>
+   </tbody> 
+  </table>
+ <p>The following table lists the sip feature keys.</p> 
+  <table id="sip" border="1"> 
+   <caption>
+     Table: Sip feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Voice over Internet Protocol (VoIP).</td>
+    </tr>
+   </tbody> 
+  </table>
+ <p>The following table lists the speech feature keys.</p>
+   <table id="speech" border="1"> 
+   <caption>
+     Table: Speech feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech recognition (STT).</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech synthesis (TTS).</td>
+    </tr>
+   </tbody> 
+  </table> 
+ <p>The following table lists the USB feature keys.</p> 
+     <table id="usb" border="1"> 
+   <caption>
+     Table: USB feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB client or accessory mode.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB host mode.</td>
+    </tr>
+   </tbody> 
+  </table>
+  <p>The following table lists the vision feature keys.</p>
+       <table id="vision" border="1"> 
+   <caption>
+     Table: Vision feature keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports face recognition.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports image recognition.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code generation.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code recognition.</td>
+    </tr>
+   </tbody> 
+  </table>
+
+  <h2 id="system">System Keys</h2>
+
+  <p>The following table lists the build system keys.</p>
+       <table id="build" border="1">
+   <caption>
+     Table: Build system keys
+   </caption>
+   <tbody>
+    <tr>
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.date </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+        <td>The platform returns the build date. The build date is made when platform image is created. </td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.string </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+        <td>The platform returns the build information string. The build information string is made when platform image is created. </td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.time </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+        <td>The platform returns the build time. The build time is made when platform image is created. </td>
+    </tr>
+   </tbody>
+  </table>
+  
+  <p>The following table lists the Manufacturer keys.</p>
+       <table id="manufacturer" border="1">
+   <caption>
+     Table: Manufacturer keys
+   </caption>
+   <tbody>
+    <tr>
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/manufacturer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+        <td>The platform returns the manufacturer name. </td>
+    </tr>
+   </tbody>
+  </table> 
+
+  <p>The following table lists the model name system keys.</p>
+       <table id="modelname" border="1"> 
+   <caption>
+     Table: Model name system keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/model_name </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+        <td>The platform returns the device model name.</td>
+    </tr>
+   </tbody> 
+  </table>
+  <p>The following table lists the platform system keys.</p>
+           <table id="platformsys" border="1"> 
+   <caption>
+     Table: Platform system keys 
+   </caption>  
+   <tbody> 
+    <tr> 
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th> 
+    </tr> 
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.communication_processor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+        <td>The platform returns the device communication processor name.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.name </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+        <td>The platform returns the platform name.</td>
+    </tr>
+       <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.processor </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+        <td>The platform returns the device processor name.</td>
+    </tr>
+   </tbody> 
+  </table>
+  
+   <p>The following table lists the TizenID system keys.</p>
+       <table id="tizenid" border="1">
+   <caption>
+     Table: TizenID system keys
+   </caption>
+   <tbody>
+    <tr>
+     <th>Key</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/tizenid </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+        <td>The platform returns the TizenID. TizenID is a randomly generated value based on the model name. </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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/system/system_guide_n.htm b/org.tizen.guides/html/native/system/system_guide_n.htm
new file mode 100644 (file)
index 0000000..11cb15d
--- /dev/null
+++ b/org.tizen.guides/html/native/system/system_guide_n.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System Tutorials</a></li>       
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System</h1> 
+
+       <p>System features include log message handling and UI extensions.</p>
+       <p>Traditional mobile devices mostly depend on the auditory or visual sensors of a user in providing information. New technologies, such as recognition, enable devices to acquire information in unaccustomed ways. The Tizen UI extensions provide ways to use the device in unconventional ways and give you access to built-in <a href="sensors_n.htm">sensors</a>, such as acceleration and tilt sensors. The UI extensions improve the user experience while interacting with the mobile phone using these new technologies.</p>
+
+       <p>The main system features are:</p>
+       <ul>
+               <li><a href="device_n.htm">Device</a>
+               <p>Enables you to control attached devices.</p></li>
+               <li><a href="dlog_n.htm">dlog</a> <p>Allows you to collect log messages.</p> </li>
+               <li><a href="media_keys_n.htm">Media key</a>
+               <p>Enables you to manage callbacks for media key events.</p></li>
+               <li><a href="runtime_info_n.htm">Runtime information</a> 
+               <p>Enables you to retrieve memory or storage information in your application, such as allocated and available amounts.</p></li>
+               <li><a href="sensors_n.htm">Sensor</a> 
+               <p>Enables you to manage sensor data from various device sensor types.</p></li>
+               <li><a href="sysinfo_n.htm">System Information</a> 
+               <p>Enables you to retrieve information about fixed platform features or device capabilities.</p></li>   
+               <li><a href="settings_n.htm">System Settings</a>
+               <p>Enables you to set and get the system configuration related to user preferences.</p></li>
+               <li><a href="storage_n.htm">Storage</a> 
+               <p>Enables you to access parts of the device file 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
new file mode 100644 (file)
index 0000000..b1b1ed0
--- /dev/null
+++ b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
@@ -0,0 +1,241 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#call">Call Information</a></li>
+                               <li><a href="#sim">SIM Information</a></li>
+                               <li><a href="#net">Network Information</a></li>
+                               <li><a href="#modem">Modem Information</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Telephony</h1>
+  <p>Telephony features include call, SIM, network, and modem information using the Telephony Service.</p>
+
+ 
+<p>The main telephony features are:</p>
+
+<ul><li><a href="#call">Call information</a>
+<p>Get the voice and video call states. You can use this information in call-related actions.</p></li>
+
+<li><a href="#sim">SIM information</a>
+<p>Extract information stored on a SIM card without changing the information.</p></li>
+
+<li><a href="#net">Network information</a>
+<p>Access (without changing) information about the current cellular network and telephony service. </p></li>
+
+<li><a href="#modem">Modem information</a>
+<p>Access (without changing) IMEI information.</p></li></ul>
+
+<p>The following figure illustrates the Telephony Service and APIs.</p>
+
+  <p class="figure">Figure: Telephony API and Telephony Service</p> 
+  <p style="text-align:center;"><img alt="Telephony API and Telephony Service" src="../../images/telephony.png" /></p>
+
+<h2 id="call" name="call">Call Information</h2>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">Call</a> API provides the following functions:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_voice_call_state()</span>
+<p>Determines whether the voice call is connecting, connected, or idle. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_state_e</span> values.</p></li> 
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_video_call_state()</span>
+<p>Determines whether the video call is connecting, connected, or idle. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_state_e</span> values.</p></li></ul> 
+
+<p>To get call state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+
+<p>The following table defines the available notification IDs.</p>
+
+<table> 
+   <caption>
+     Table: Call information notification IDs 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Change in state</th> 
+     <th>Notification ID</th> 
+    </tr> 
+    <tr> 
+     <td>Voice call</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATE</span></td> 
+    </tr> 
+     <tr> 
+     <td>Video call</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATE</span></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+
+<h2 id="sim" name="sim">SIM Information</h2>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">SIM</a> API provides the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span>
+<p>Gets the Integrated Circuit Card IDentification (ICC-ID). You get the ICC-ID as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span>
+<p>Gets the SIM operator (MCC + MNC). You get the operator information as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_msin()</span>
+<p>Gets the Mobile Subscription Identification Number (MSIN) of the SIM provider. You get the MSIN as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span>
+<p>Gets the Service Provider Name (SPN) of the SIM card. You get the SPN as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_cphs_operator_name()</span>
+<p>Gets the Operator Name String (ONS) of the Common PCN Handset Specification (CPHS) in the SIM card. You get the CPHS as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_number()</span>
+<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><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span>
+<p>Gets the state of the SIM. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values.</p></li> 
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_is_changed()</span>
+<p>Checks whether the current SIM card differs from the previous SIM card.</p></li></ul>
+
+<p>To get SIM state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+
+<p>The following table defines the available notification IDs.</p>
+
+<table> 
+   <caption>
+     Table: SIM information notification IDs 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Change in state</th> 
+     <th>Notification ID</th> 
+    </tr> 
+    <tr> 
+     <td>SIM state</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_SIM_STATUS</span></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">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 <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+
+<h2 id="net" name="net">Network Information</h2>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">Network</a> API provides the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span>
+<p>Gets the LAC (Location Area Code) of the current network.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span>
+<p>Gets the cell identification number.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span>
+<p>Gets the RSSI (Received Signal Strength Indicator).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span>
+<p>Gets the roaming state (<span style="font-family: Courier New,Courier,monospace">true</span> = roaming and <span style="font-family: Courier New,Courier,monospace">false</span> = not roaming).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span>
+<p>Gets the MCC (Mobile Country Code) of the current registered network. You get the MCC as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span>
+<p>Gets the MNC (Mobile Network Code) of the current registered network. You get the MNC as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span>
+<p>Gets the name of the current registered network. You get the network name as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span>
+<p>Gets the network service type of the current registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_type_e</span> values. </p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span>
+<p>Gets the current network state of the telephony service. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> values.</p></li></ul>
+
+<p>To get network-related information change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+
+<p>The following table defines the available notification IDs.</p>
+
+<table> 
+   <caption>
+     Table: Network information notification IDs 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Change in state</th> 
+     <th>Notification ID</th> 
+    </tr> 
+    <tr> 
+     <td>Network service state</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td> 
+    </tr>
+       <tr>
+     <td>Cell ID</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td> 
+    </tr>
+       <tr>
+     <td>Roaming status</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td> 
+    </tr> 
+       <tr>
+     <td>Signal strength</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td> 
+    </tr>      
+   </tbody> 
+  </table>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Before retrieving information from the network, you must retrieve the network service state. You can get network-related information only if the network service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+  
+<h2 id="modem" name="modem">Modem Information</h2>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">Modem</a> API provides the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span>
+<p>Gets the IMEI (International Mobile Station Equipment Identity) of the mobile phone. You get the IMEI as a string, which needs to be freed by the 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/animations_effects_n.htm b/org.tizen.guides/html/native/ui/animations_effects_n.htm
new file mode 100644 (file)
index 0000000..31f3191
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/animations_effects_n.htm
@@ -0,0 +1,1999 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Effect Types</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#ecore_animation">Ecore Animator</a></li>
+                               <li><a href="#edje_animation">Edje Animation</a></li>
+                               <li><a href="#elm_transit">Elementary Animations</a></li>
+                               <li><a href="#evas_map_animation">Evas Map Effects</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>                 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Animation and Effect Types</h1> 
+
+               <h2 id="ecore_animation" name="ecore_animation">Ecore Animator</h2>
+
+<p>Ecore provides a facility for animations called <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span>. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop.</p>
+
+<p>To create an Ecore animation:</p>
+<ol>
+    <li>Determine the duration of the animation.</li>
+    <li>Define a callback function that performs the animation with that duration.</li>
+</ol>
+
+<p>To use Ecore animators in your application, you must include the <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore.h&gt;</span> file. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;">&lt;Elementary.h&gt;</span> file in your application. You then declare an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator*</span> variable and use the variable in the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_*</span> functions.</p>
+
+<p>The following example shows how to create a simple animation with a finite duration:</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_do_animation(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * pos, 100 * pos);
+&nbsp;&nbsp;&nbsp;// Do some more animating...
+}
+ecore_animator_timeline_add(2, _do_animation, my_evas_object);
+</pre>
+
+<p>In the above example, we create a linear transition to move <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> from position (0,0) to position (100,100) in 2 seconds.</p>
+
+<h3>Creating an Animation with a Finite Duration</h3>
+
+<p>Most of the time, you will want to create animations that last for a predefined time.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
+
+<pre class="prettyprint">ecore_animator_timeline_add(double runtime, Ecore_Timeline_Cb func, const void *data)</pre>
+
+<ul>
+<li>The first argument is the duration of the animation in seconds. The duration is not affected by frame rate.</li>
+<li>The second argument is the callback function that performs the animation.</li>
+<li>The third argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop the animator and have it be deleted automatically at any time. The callback function is also passed a timeline position parameter with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example performs a linear horizontal translation of 500 pixels in 8 seconds:</p>
+<pre class="prettyprint">
+static Eina_Bool
+_my_animation(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
+&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, 500 * pos, y); // Linear translation of the Evas object
+}
+ecore_animator_timeline_add(8, _my_animation, my_evas_object);
+</pre>
+
+<h3>Position Mappings</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Ecore_Pos_Map</span> position mappings are used to define the evolution of a given position in accordance with the desired effects. The value ranges from 0.0 to 1.0 on a given timeline. This position variation allows you to apply dynamic changes to any attribute of your Evas object, such as position, width, height, scale, angle, and color.</p>
+
+<p>Ecore supports the following position mappings (with the listed v1 and v2 parameters):</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear 0.0 - 1.0
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 4.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.1 is a much more pronounced sinusoidal (squared), 3.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient * v1, interpolated via power of v2 curve
+    <ul>
+        <li>v1: multiplication factor for gradient</li>
+        <li>v2: curve value</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then &quot;drop&quot; like a ball bouncing to the ground at 1.0, and bounce v2 times, with a decay factor of v1
+    <ul>
+        <li>v1: bounce decay factor</li>
+        <li>v2: number of bounces</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then &quot;wobble&quot; like a spring until rest position at 1.0, and wobble v2 times, with a decay factor of v1
+    <ul>
+        <li>v1: wobble decay factor</li>
+        <li>v2: number of wobbles</li>
+    </ul>
+</li>
+</ul>
+
+<p class="figure">Figure: Position mappings</p>
+<p style="text-align:center;"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
+
+<h3>Using Position Mappings</h3>
+<p>When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.</p>
+
+<p>If you want to create a non-linear animation, map the position value to one of several curves and mappings:</p>
+<pre class="prettyprint">ecore_animator_pos_map(double pos, Ecore_Pos_Map map, double v1, double v2)</pre>
+<ul>
+<li>The first argument is the current position value, which ranges from 0.0 to 1.0.</li>
+<li>The second argument is the position mapping you want to apply.</li>
+<li>The third argument is the first parameter (v1) to pass to the position mapping.</li>
+<li>The fourth argument is the second parameter (v2) to pass to the position mapping.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The v1 and v2 arguments are specific to the chosen position mapping. For example, if you are using <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>, v1 represents the bouncing level and v2 the number of bounces.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example performs a transition that bounces 7 times, diminishing by a factor of 1.8 over 5 seconds:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_my_animation_callback(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
+&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
+&nbsp;&nbsp;&nbsp;double frame = pos; // Actual position variation
+&nbsp;&nbsp;&nbsp;// Get frame relative position depending on desired effect
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame); // Move the Evas object according to desired effect
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);</pre>
+
+<h3>Creating an Infinite Animation</h3>
+
+<p>If you want the animation to run for an unspecified amount of time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function. This function works the same way as the <span style="font-family: Courier New,Courier,monospace;">ecore_animation_timeline_add()</span> function, except its interval is based on frame rate. Using frame rate as the basis benefits performance, especially if you define multiple animations, since you may want to have a different timer for each callback function.</p>
+
+<pre class="prettyprint">
+ecore_animator_add(Ecore_Task_Cb func, const void *data)
+</pre>
+
+<ul>
+<li>The first argument is the callback function that performs the animation.</li>
+<li>The second argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to adjust the animation.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example creates a rectangle sliding from left to right and back again. When the rectangle hits one edge of the screen, it changes direction.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_slide_back_and_forth(void *data)
+{
+&nbsp;&nbsp;&nbsp;typedef enum {LEFT, RIGHT} direction_t; // Direction datatype
+&nbsp;&nbsp;&nbsp;static int x = 0; // Initial position
+&nbsp;&nbsp;&nbsp;static direction_t direction = RIGHT; // Initial direction
+&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = LEFT; // Change direction
+&nbsp;&nbsp;&nbsp;else if (x &lt;= 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = RIGHT; // Change direction
+&nbsp;&nbsp;&nbsp;if (direction == RIGHT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, ++x, 350); // Slide to right
+&nbsp;&nbsp;&nbsp;else if (direction == LEFT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, --x, 350); // Slide to left
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;// Declarations
+
+&nbsp;&nbsp;&nbsp;// Ecore Evas init
+
+&nbsp;&nbsp;&nbsp;// Draw Evas objects
+
+&nbsp;&nbsp;&nbsp;// Animations go here
+&nbsp;&nbsp;&nbsp;anim = ecore_animator_add(_slide_back_and_forth, rectangle);
+&nbsp;&nbsp;&nbsp;// Ecore main loop
+
+&nbsp;&nbsp;&nbsp;// Free memory
+}</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To use this code, you have to merge it with the Ecore transition example above.</td>
+</tr>
+</tbody>
+</table>
+
+<h3>Chaining Animations</h3>
+
+<p>You may sometimes want to delay animating an object. This can be useful if, for example, you want to start an animation only after another one has finished.</p>
+
+<p>You can simply set a delay to the second animation equal to the duration of the first animation:</p>
+
+<pre class="prettyprint">
+static int runtime = 5;
+static int delay = runtime;
+static Eina_Bool
+_start_fold_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _fold_animation, data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+static Eina_Bool
+_start_unfold_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _unfold_animation, data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+_start_fold_animation(my_evas_object);
+ecore_timer_add(delay, _start_unfold_animation, my_evas_object);
+</pre>
+
+<h3>Pausing and Resuming Animations</h3>
+
+<p>You can pause and resume Ecore animations. To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_freeze(Ecore_Animator *animator)</pre>
+
+<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to pause.</p>
+
+<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function:</p>
+
+<pre class="prettyprint">ecore_animation_thaw(Ecore_Animator *animator)</pre>
+
+<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to resume.</p>
+
+<p>The following example pauses a transition after 5 seconds and resumes it after 5 more seconds:</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_freeze_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+static Eina_Bool
+_thaw_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+ecore_timer_add(5, _freeze_animation, animator);
+ecore_timer_add(10, _thaw_animation, animator);
+</pre>
+
+<h3>Freeing Up Memory</h3>
+
+<p>When you create an animation that does not have a timeout, you will have to manually free up the memory allocated to the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. By comparison, if the animation has a timeout, Ecore implements the mechanisms to automatically delete the animator from the list of pointers: When your animation callback returns 0 or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the animator manager takes care of freeing up the allocated memory.</p>
+
+<p>To manually free up the memory, delete the pointer by using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_del(Ecore_Animator *animator)</pre>
+
+<p>The argument is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> whose memory allocation to free up.</p>
+
+<p>Regardless of the type of animation, it is good practice to always ensure that the allocated memory is freed up before the program exits:</p>
+
+<pre class="prettyprint">if (animator != NULL)
+&nbsp;&nbsp;&nbsp;ecore_animator_del(animator);</pre>
+
+<h3>Frametime</h3>
+<p>In most cases, you will want to use the default timer <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. This timer 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 Nth second, with the default being 1/30th of a second.</p>
+
+<p>To tweak performance, you can change the frametime value:</p>
+
+<pre class="prettyprint">ecore_animator_frametime_set(double frametime)</pre>
+
+<p>The argument is the new frametime value.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Too small a value can cause performance issues, whereas too high a value can cause your animation to seem jerky.</td>
+</tr>
+</tbody>
+</table>
+
+<p>If you want to get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</p>
+
+<h3>Custom Timer</h3>
+
+<p>You may want to specify a custom timer to match your animation to third-party events. For example, the filling speed of a progress bar will mainly depend on the time it takes for a task to complete and the velocity at which the remaining time estimation evolves. This kind of animation requires you to use a custom timer.</p>
+
+<p>To use a custom timer, first set <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span> as the timer source, and then drive the timer based on an input tick source (such as another application via IPC or a vertical blanking interrupt):</p>
+
+<pre class="prettyprint">ecore_animator_custom_source_tick_begin_callback_set(Ecore_Cb func, const void *data)</pre>
+
+<p>The first argument is the callback function to call on the tick start. The second argument is the data to pass to the callback function.</p>
+
+<pre class="prettyprint">ecore_animator_custom_source_tick_end_callback_set(Ecore_Cb func, const void *data)</pre>
+
+<p>The first argument is the callback function to call on the tick end. The second argument is the data to pass to the callback function to set the functions that will be called to start and stop the ticking source.</p>
+
+<p>Next, trigger a tick over one frame:</p>
+
+<pre class="prettyprint">ecore_animator_custom_tick(void)</pre>
+
+<p>The following example supposes a progress bar that will be refreshed every time some progress occurs:</p>
+
+<pre class="prettyprint">ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
+void _on_progress_update()
+{
+&nbsp;&nbsp;&nbsp;// Called when some progress occurs
+&nbsp;&nbsp;&nbsp;ecore_animator_custom_tick(); // Tick (next frame in progress bar animation)
+}</pre>
+
+<p>Finally, to get the current animator source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
+  
+  
+  
+  <h2 id="edje_animation" name="edje_animation">Edje Animation</h2>
+
+<p>The Edje animations are based on a very simple principle: going from one state to another. If you want to animate something with Edje, you must define two states and move from the first state to the second.</p>
+
+<h3 id="Animating_Rectangle" name="Animating_Rectangle">Animating a Rectangle</h3>
+
+<p>This example shows how to animate a rectangle. It is positioned in the top left corner of the window and is moved to the bottom right corner in five seconds. To do that with Edje, define a <span style="font-family: Courier New,Courier,monospace;">part</span> called &quot;rectangle&quot; with the <span style="font-family: Courier New,Courier,monospace;">type RECT:</span> this part has two descriptions (or states). In the first state, the rectangle is in is the top left corner. In the second state, it is in is the bottom right corner. To create the transition, set this EDC code for Edje to switch the object from its current state to another.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;rectangle&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;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.3 0.1;}
+&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;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.5;
+&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.7 0.9;}
+&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;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;&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&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;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
+&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;transition: LINEAR 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The &quot;rectangle&quot; part has two descriptions that share the same name, but have a different &quot;version&quot;.</p>
+
+<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;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The program defines when and how to move from one state to another. A program is called upon reception of a signal from a source. Here the program is called when the signal load is received from any source.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+}
+</pre>
+
+<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
+
+<pre class="prettyprint">
+action: STATE_SET &quot;default&quot; 0.5;
+</pre>
+
+<p>The program has a target, here the &quot;rectangle&quot;.</p>
+
+<pre class="prettyprint">
+target: &quot;rectangle&quot;;
+</pre>
+
+<p>The program uses a transition to perform the action.</p>
+
+<pre class="prettyprint">
+transition: LINEAR 5;
+</pre>
+
+<p>This example produces a blue rectangle that moves from the upper left to the lower right corner with a linear transition in five seconds.</p>
+
+<h3 id="Actions" name="Actions">Actions</h3>
+
+<p>The Edje programs are not only for animations. There are different actions, for example <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> and <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>. You may also send signals with <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action changes the state of the &quot;target&quot;.</p>
+
+<p>In the following example, the state of the part named &quot;image&quot; changes to &quot;default&quot; &quot;0.0&quot;.</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;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by &quot;target&quot;.</p>
+
+<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;;
+}
+</pre>
+
+<p>The previous example stops the program defined as &quot;target&quot; named <span style="font-family: Courier New,Courier,monospace;">animate_loop</span>. This program runs on the <span style="font-family: Courier New,Courier,monospace;">animate_stop</span> signal.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span> emits a signal that is used to communicate with the application directly from the theme.</p>
+
+<p>The following example emits a signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when it receives the signal <span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span> from the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part. In other words, it sends the signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> 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;;
+}
+</pre>
+
+<h3 id="Transitions" name="Transitions">Transitions</h3>
+
+<p>The transitions available are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span>: makes a linear transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span>: makes a sinusoidal transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span>: makes an accelerated transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span>: makes a decelerated transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span>: makes an accelerated transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span>: makes a decelerated transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span>: makes a sinusoidal transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span>: takes 3 parameters:
+       <ul>
+               <li>the duration</li>
+        <li>the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, and so on)</li>
+        <li>an integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 for the third parameter is equivalent to linear interpolation. Note that DIVIS may exceed 1.0.</li>
+       </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>: makes a bounce transition and takes 3 parameters:
+       <ul>
+        <li>the duration</li>
+        <li>how much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay</li>
+        <li>the number of bounces (rounded down to the nearest integer value)</li>
+       </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span>: makes a spring transition and takes 3 parameters:
+       <ul>
+        <li>the duration</li>
+        <li>the decay, with the level exceeding 1.0 on the outer swings</li>
+        <li>the number of spring swings</li>
+       </ul>
+</li>
+</ul>
+
+<p>There are graphical representations of these effects in the <span style="font-family: Courier New,Courier,monospace;">Ecore_Evas</span> section above.</p>
+
+<h3 id="Chaining" name="Chaining">Chaining Edje Programs</h3>
+
+<p>To define a couple of Edje programs and chain them, we can, for example, create a program to make the rectangle return to its initial state with another transition (such as <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>).</p>
+
+<p>Use the statement <span style="font-family: Courier New,Courier,monospace;">after</span> in the first <span style="font-family: Courier New,Courier,monospace;">program</span>. <span style="font-family: Courier New,Courier,monospace;">after</span> takes the name of the transition to run when the program is done.</p>
+
+<pre class="prettyprint">
+after: &quot;animation,state0&quot;;
+</pre>
+
+<p>This is how to add the bounce animation. To return the blue rectangle to its initial position with a <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> transition: it bounces with a factor of 1.8, six times. This program is only to be used at the end of the first one, so it does not have any signal statement.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
+&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;
+}
+</pre>
+
+<h3 id="Playing_Signals" name="Playing_Signals">Playing on Signals</h3>
+
+<p>The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To show the signals, use <span style="font-family: Courier New,Courier,monospace;">edje_player -p myfile.edj</span>.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>For example, in another transition the rectangle is left clicked. The corresponding signal name is <span style="font-family: Courier New,Courier,monospace;">mouse,clicked,1</span>.</p>
+
+<p>For this transition, define a new state. This state changes the color and the position of the rectangle.</p>
+
+<pre class="prettyprint">
+// To be place in the &quot;part&quot; definition
+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;
+}
+</pre>
+
+<p>The program is as follows:</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;
+}
+</pre>
+
+<p>This starts when the rectangle is left clicked.</p>
+
+<p>If you want to send a signal from your application when you use signals to start transitions, create a program waiting for your own special signal. For example:</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;
+}
+</pre>
+
+<p>This program changes the state of the target named <span style="font-family: Courier New,Courier,monospace;">animation,menu_side,hide</span> to <span style="font-family: Courier New,Courier,monospace;">&quot;default&quot; 1.0</span>. It waits for the <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal emitted by a source called <span style="font-family: Courier New,Courier,monospace;">MenuButton</span>.</p>
+
+<pre class="prettyprint">
+edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+</pre>
+
+<p>This statement sends a signal named <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> with a source named <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> to the object called <span style="font-family: Courier New,Courier,monospace;">layout</span>.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> function emits a signal on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> part of the application.</p>
+
+<pre class="prettyprint">
+edje_object_signal_emit(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;const char *emission,
+&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 *source)
+</pre>
+
+<ul>
+<li>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>, which emits the signal (<span style="font-family: Courier New,Courier,monospace;">layout</span> in the example).</li>
+<li>The second parameter is the <span style="font-family: Courier New,Courier,monospace;">emission</span> string (the name of the signal <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> in the example).</li>
+<li>The third parameter is the <span style="font-family: Courier New,Courier,monospace;">source</span> of the signal (the name of the source, <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> in the example).</li>
+</ul>
+
+<p>If you use the Elementary in the application, you can use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span>. It functions exactly the same way as <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> and takes the same parameters.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in the <a href="../../../../org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm">Menu Tutorial</a>.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3 id="Rotate" name="Rotate">Rotate with Edje</h3>
+
+<p>The Edje library allows you to rotate objects, using the <span style="font-family: Courier New,Courier,monospace;">map</span> statement. For example, if you want to rotate the blue rectangle on a right click, you must define a new rotate state. To enable the <span style="font-family: Courier New,Courier,monospace;">map</span> on you object you must add a <span style="font-family: Courier New,Courier,monospace;">map</span> part to your default state.</p>
+
+<pre class="prettyprint">
+map 
+{
+&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;rotation.x: 0;
+&nbsp;&nbsp;&nbsp;rotation.y: 0;
+&nbsp;&nbsp;&nbsp;rotation.z: 0;
+}
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">on</span>: 1; enables the map on the object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on</span>: 1, enables the perspective when rotating, even without a perspective point object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">smooth</span>: 1; enables a smooth map rendering</li>
+<li>The rotation statements define the default rotation of the object on x, y, and z axes.</li>
+</ul>
+
+<p>To add a new rotate state with a rotation around any axis, do the following.</p>
+
+<pre class="prettyprint">
+description 
+{ 
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
+}
+</pre>
+
+<p>This rotate state inherits all the default state properties, but changes the value of <span style="font-family: Courier New,Courier,monospace;">map.rotation.z</span> from 0&deg; to 120&deg;.</p>
+
+<p>To set a program to run the rotate state, do the following.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: LIN 5;
+}
+</pre>
+
+<p>This program runs on a right click on the rectangle object.</p>
+
+<p>The complete code of this example is as follows.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;rectangle&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;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.3 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 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;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;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.5;
+&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.7 0.9;}
+&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;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;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;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&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;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
+&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;transition: LINEAR 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&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;signal: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: BOUNCE 2 1.8 26;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&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;transition: SIN 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&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;transition: LIN 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<h2 id="elm_transit" name="elm_transit">Elementary Animations</h2>
+
+<p>Elementary transitions (<span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>) allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
+
+<p>To use Elementary transitions, you must create an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define the desired transitions using the methods of this object. After the transitions are registered, they will be automatically managed: their callback functions will be called for the set duration, and they will be deleted upon completion.</p>
+
+<p>Use Elementary transitions only when Edje animations are not sufficient. Edje animations are better at handling transitions, have more flexibility, and can be manipulated inside themes. The only drawback is that Edje animations have their own definition language. If you want to code with the C language, use Elementary transitions.</p>
+
+<h3 id="Getting_Started" name="Getting_Started">Getting Started</h3>
+<p>The first thing you need to do when creating an transition with <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to build your transit object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();</pre>
+
+<p>You now have an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that will allow you to perform transitions on one or more objects. The transit object holds the information about the target objects and the transition effects that will be used. The transit object also contains information about animation duration, number of repetitions, auto-reverse, and so on. The transit object starts playing as soon as the application enters the main loop.</p>
+
+<h3 id="Adding_Objects" name="Adding_Objects">Adding Objects to an Animation</h3>
+
+<p>You can add your Evas objects to your transition using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_object_add(Elm_Transit *transit, Evas_Object *obj)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to animate.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a widget, such as a button, image, or calendar.</p>
+<p>If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
+</tr>
+</tbody>
+</table>
+
+<p>If you want to know which objects are currently in your transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_objects_get()</span> function. You will get a list of all the objects that are subject to the transition.</p>
+
+<p>At any time, you can remove objects from the transition:</p>
+
+<pre class="prettyprint">elm_transit_object_remove(Elm_Transit *transit, Evas_Object *obj)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to remove from the transition.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">After you have added at least one Evas object to your transition, if the list of objects gets emptied somehow, be it because the transition has been terminated or all objects have been deleted, the transition will be automatically deleted. Otherwise, you will have to delete the transition by yourself using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del()</span> function. If you delete the transit while the transition is running, the transition will stop.</td>
+</tr>
+</tbody>
+</table>
+
+<h4>Adding Images to an Animation</h4>
+
+<p>If you do not want to manage widgets for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
+</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is a list of the image paths.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This list and its contents will be deleted after the effect ends by the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_context_free()</span> function.</td>
+</tr>
+</tbody>
+</table>
+
+<p>You can now define your image transitions exactly the same way as with any Evas object.</p>
+
+<p>The following example shows how to use <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> with images:</p>
+
+<pre class="prettyprint">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);
+images = eina_list_append(images, eina_stringshare_add(buf));
+snprintf(buf, sizeof(buf), &quot;%s/images/btn_hover.png&quot;, PACKAGE_DATA_DIR);
+images = eina_list_append(images, eina_stringshare_add(buf));
+elm_transit_effect_image_animation_add(transit, images);</pre>
+
+<h3 id="Animation_Duration" name="Animation_Duration">Animation Duration</h3>
+
+<p>With <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, setting the transition duration is mandatory. To set the duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_duration_set(Elm_Transit *transit, double duration)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the duration in seconds.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The purpose of <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make a complete revolution of the target Evas object in 2 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<p>To get the duration of the transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_get()</span> function.</p>
+
+<h3 id="Acceleration_Mode" name="Acceleration_Mode">Animation Acceleration Mode ("Tween Mode")</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> supports a number of built-in interpolation methods. By default, all interpolations are linear. If you want to change the animation&#39;s dynamics, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_tween_mode_set(Elm_Transit *transit, Elm_Transit_Tween_Mode tween_mode)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the tween mode of the transition, which can be one of the following:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_LINEAR</span>: The default mode.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_SINUSOIDAL</span>: The transition starts with acceleration and ends with deceleration.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_DECELERATE</span>: The transition decelerates over time.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_ACCELERATE</span>: The transition accelerates over time.</li>
+</ul>
+
+<p>To get the current tween mode, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_get()</span> function.</p>
+
+<h3 id="Animation_Repeat" name="Animation_Repeat">Animation Repeat</h3>
+
+<p>To set a transition to repeat, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_repeat_times_set(Elm_Transit *transit, int repeat)</pre>
+
+<p>The function takes the following arguments:</p>
+<ul>
+<li>The transition you want to repeat.</li>
+<li>The number of times the transition repeats.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> argument is set to 0, the transition will not loop at all. If set to 1, the transition will run twice. If set to a negative value, the transition will repeat forever.</td>
+</tr>
+</tbody>
+</table>
+
+<p>To get the repeat value, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_get()</span> function. The default value is 0.</p>
+
+<p>The following example shows how to make an Evas object spin for 3 complete revolutions in 6 seconds:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_repeat_set(transit, 3.0);
+elm_transit_go(transit);</pre>
+
+<h3 id="Auto_Reverse" name="Auto_Reverse">Animation Auto-reverse</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for automatically reversing the transition once it finishes:</p>
+
+<pre class="prettyprint">elm_transit_auto_reverse_set(Elm_Transit *transit, Eina_Bool reverse)</pre>
+
+<p>The first argument is the transition you want to reverse. The second argument is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, this function will perform the same transition backwards as soon as the first transition is complete.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">
+    <p>Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition will run back and forth until the repeat count is finished.</p>
+    <p>You can calculate the duration as follows if both auto-reverse and repeat are set: 2 * duration * repeat.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make an object perform half a turn and then reverse the animation to its original position in 4 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_auto_reverse_set(transit, EINA_TRUE);
+elm_transit_go(transit);
+</pre>
+
+<p>To determine whether the auto-reverse mode is enabled, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_get()</span> function.</p>
+
+<h3 id="Transitions2" name="Transitions2">Transitions</h3>
+
+<p>We distinguish two main transition types:</p>
+<ul>
+<li>Transitions that are applied to the properties of objects, such as position, size, angle, and color.</li>
+<li>Transitions from one object to another, where the first object is hidden to let the second one appear.</li>
+</ul>
+<p>All transitions are based on the same principle: we set the starting and the ending values for the properties we want to animate, we then set the lifespan of the animation, and finally we inquire the preferred interpolation method (such as linear, acceleration, or bounce).</p>
+
+<p>You must declare the transitions after the parent window has been created, since the transition effects make use of the geometric properties of the parent window. If the parent window does not yet exist when calculating the interpolation, the interpolation may end up being based on wrong information.</p>
+
+<h3 id="Built-in_Transitions" name="Built-in_Transitions">Built-in Transitions</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides several built-in transition definitions that are useful for the most common cases, so you that will not have to code them from scratch.</p>
+
+<p>All these built-in effects are implemented as follows:</p>
+
+<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;elm_transit_effect_translation_op,
+&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_translation_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;elm_transit_effect_translation_context_free);</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object that contains the target Evas objects and all the information needed to setup the transition.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_op</span>: The callback function that performs the transition (resizing interpolation in this example).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_new()</span>: The callback function that returns the context used in the transition for calculations. In this example, the context is the coordinates of the before and after objects.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_free</span>: The callback function that frees up the memory once the transition is complete.</li>
+</ul>
+
+<p>All the definitions above can be rewritten as follows:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_translation_add(transit, from_x, from_y, to_x, to_y);
+</pre>
+
+<h4>Translation</h4>
+<p>To perform a translation on an Evas object, use the following method:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_translation_add(Elm_Transit *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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_dx,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 from_dy,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 to_dx,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 to_dy)
+</pre>
+
+<ul>
+<li>The first argument is the transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_dx</span>: The starting X coordinate (source).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_dy</span>: The starting Y coordinate (source).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_dx</span>: The ending X coordinate (destination).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_dy</span>: The ending Y coordinate (destination).</li>
+</ul>
+
+<p>The following example shows how to slide an Evas object (a rectangle) on a 45-degree diagonal, from bottom-left to top-right, at a constant speed, and in 1 second:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, rectangle);
+elm_transit_effect_translation_add(transit, 0, 0, 280, 280);
+elm_transit_duration_set(transit, 1);
+elm_transit_go(transit);
+</pre>
+
+<h4>Color Transition</h4>
+
+<p>Color transitions allow you to dynamically change the color of Evas objects. The first argument is the transit object, while the other arguments will be used to define the color transition using RGB colors. There is also an alpha channel that controls the opacity of the color (the background of the object, not the object itself).</p>
+
+<pre class="prettyprint">
+elm_transit_effect_color_add(Elm_Transit *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;&nbsp;unsigned int from_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;unsigned int from_g,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 from_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;&nbsp;&nbsp;unsigned int from_a,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 to_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;unsigned int to_g,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 to_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;&nbsp;&nbsp;unsigned int to_a)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_r</span>: The start value for &quot;Red&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_g</span>: The start value for &quot;Green&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_b</span>: The start value for &quot;Blue&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_a</span>: The start value for &quot;Alpha&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_r</span>: The end value for &quot;Red&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_g</span>: The end value for &quot;Green&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_b</span>: The end value for &quot;Blue&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_a</span>: The end value for &quot;Alpha&quot;.</li>
+</ul>
+
+<p>The following example shows how to transit a rectangle from red to blue in 3 seconds:</p>
+
+<pre class="prettyprint">
+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
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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
+elm_transit_duration_set(transit, 3);
+elm_transit_go(transit);
+</pre>
+
+<h4>Rotation</h4>
+
+<pre class="prettyprint">elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_degree</span>: The start degree of rotation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_degree</span>: The end degree of rotation.</li>
+</ul>
+
+<p>This function can be used to perform a rotation on any Evas object. It works the same way as the other transit effects and takes two arguments for the starting and ending angles. Note that if you apply a rotation on multiple objects, they will individually mill around and not act as a group. If you want several objects to revolve around a common point, you must encapsulate the objects into a single parent object and apply the rotation to the parent object. The following example shows how to achieve this:</p>
+
+<pre class="prettyprint">
+// Parent container
+Evas_Object *parent = elm_box_add(my_window);
+evas_object_show(parent);
+elm_box_horizontal_set(parent, EINA_TRUE);
+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_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_box_pack_end(parent, btn2);
+evas_object_show(btn2);
+
+// Make the parent container do a 360 degrees spin
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, parent);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h4>Wipe Effect</h4>
+
+<p>The wipe effect is designed to dynamically hide or show any element on the scene.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_wipe_add(Elm_Transit *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_Wipe_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;Elm_Transit_Effect_Wipe_Dir dir)
+</pre>
+
+<p>In addition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance passed as the first argument, the function takes the following arguments:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">type</span>: The wipe type <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Type</span> defines whether to show or hide the target elements. The value can be one of the following:
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_SHOW</span></li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">dir</span>: The wipe direction <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Dir</span> defines in which direction the target will progressively appear or disappear. The value can be one of the following:
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_LEFT</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_UP</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_DOWN</span></li>
+    </ul>
+</li>
+</ul>
+
+<p>The following example shows how to make an object disappear progressively from left to right:</p>
+
+<pre class="prettyprint">
+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_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h4>Zoom Effect</h4>
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a zoom function.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_zoom_add(Elm_Transit *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;float from_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;float to_rate)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_rate</span>: The starting level of the zoom.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_rate</span>: The ending level of the zoom.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">from_rate</span> argument defines the scale of the target objects at the beginning of the animation. A value of 1 represents the initial scale of the objects.</p>
+
+<p>Setting the value of the <span style="font-family: Courier New,Courier,monospace;">to_rate</span> argument to 2 will double the size of the target objects (double the width and double the height). When using this effect, the width and height of a target object will remain proportional to one another. If you want to customize the zoom effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizing_add()</span> function.</p>
+
+<p>The following example shows how to implement a zoom-out transition. At the end of the 2-secondstransition, the animated object will be half its original size.</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_zoom_add(transit, 1, 0.5);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h4>Resizing Effect</h4>
+
+<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_resizing_add(Elm_Transit *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;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_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;Evas_Coord from_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;Evas_Coord to_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;Evas_Coord to_h)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_w</span>: The starting width.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_h</span>: The starting height.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_w</span>: The ending width.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_h</span>: The ending height.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">from_w</span> and <span style="font-family: Courier New,Courier,monospace;">from_h</span> arguments define the size at the beginning of the animation. The <span style="font-family: Courier New,Courier,monospace;">to_w</span> and <span style="font-family: Courier New,Courier,monospace;">to_h</span> arguments define the size at the end.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">If you are planning to use this method to hide an Evas object by setting one of the length attributes to zero, consider using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_wipe_add()</span> function instead.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make a rectangle exchange its width and height properties in a 2-second transition:</p>
+
+<pre class="prettyprint">
+Evas_Coord w, h;
+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 sizing
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 sizing
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h4>Flip Effect</h4>
+<p>This transition combines the target Evas objects in pairs, so that one object will show up while the other one disappears. This association relates the even objects in the transit list of objects with the odd ones. The even objects are shown at the beginning of the animation, and the odd objects shown when the transition is complete. In other words, the effect applies to each pair of objects in the order in which they are listed in the transit list of objects.</p>
+
+<p>The flip effect itself is a pseudo-3D effect where the first object in the pair is the front object and the second one is the back object. When the transition launches, the front object rotates around a preferred axis in order to let the back object take its place.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_flip_add(Elm_Transit *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_Flip_Axis axis,
+&nbsp;&nbsp;&nbsp;&nbsp;&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 cw)
+</pre>
+
+<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
+</ul>
+
+<p>The third argument is the direction of the rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counterclockwise.</li>
+</ul>
+
+<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary widgets for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating widgets.</p>
+
+<pre class="prettyprint">
+// Coin Heads
+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;printf(&quot;error: could not load image&quot;);
+elm_win_resize_object_add(ad-&gt;win, coin_heads);
+
+// Coin Tails
+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;printf(&quot;error: could not load image&quot;);
+elm_win_resize_object_add(ad-&gt;win, coin_tails);
+
+// Transition definition
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_auto_reverse_set(transit, EINA_TRUE);
+elm_transit_repeat_times_set(transit, -1);
+elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+elm_transit_go(transit);
+</pre>
+
+<p class="figure">Figure: Coin flip</p>
+<p style="text-align:center;"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
+
+<h4>Resizable Flip Effect</h4>
+<p>In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_resizable_flip_add(Elm_Transit *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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Flip_Axis axis,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 cw)
+</pre>
+
+<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
+</ul>
+
+<p>The third argument is the direction of the rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counterclockwise.</li>
+</ul>
+
+<p>This function works the exact same way as the standard flip effect function.</p>
+
+<h4>Fade Effect</h4>
+
+<p>This effect is used to transition from one Evas object to another one using a fading effect: the first object will slowly disappear to let the second object take its place.</p>
+
+<pre class="prettyprint">elm_transit_effect_fade_add(Elm_Transit *transit)</pre>
+
+<p>This effect is applied to each pair of objects in the order in which they are listed in the transit list of objects. The first object in the pair will be the before object and the second one will be the after object.</p>
+
+<p>Building on the coin flip example, the following example shows how to fade out one face of the coin while fading in the other face:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_effect_fade_add(transit);
+elm_transit_go(transit);
+</pre>
+
+<p>If you simply want to hide an object with a fade transition, consider using a transparent after object.</p>
+
+<h4>Blend Effect</h4>
+
+<p>Another transition involving at least two Evas objects is the blend effect. This transition makes the before object blurry before the after object appears.</p>
+
+<pre class="prettyprint">elm_transit_effect_blend_add(Elm_Transit *transit)</pre>
+
+<p>The argument is the transition target of the blend effect.</p>
+
+<p>Building on the coin flip example, the following example shows how to blur out one face of the coin while blurring in the other face:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_effect_blend_add(transit);
+elm_transit_go(transit);
+</pre>
+
+<p>If you simply want to hide an object with a blur transition, consider using a transparent after object.</p>
+
+<h3 id="Combine_Transitions" name="Combine_Transitions">Combining Transitions</h3>
+
+<p>To use multiple transitions at the same time on the same objects, simply declare the transitions one after the other.</p>
+
+<p>Building on the coin flip example, the following example shows how to roll the coin on the ground using a rotation and a translation effect:</p>
+
+<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;printf(&quot;error: could not load image&quot;);
+evas_object_resize(coin_heads, 100, 100);
+evas_object_show(coin_heads);
+
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_duration_set(transit, 5.0);
+elm_transit_effect_translation_add(transit, 0, 0, 3.1415 * 2 * 100, 0);
+elm_transit_effect_rotation_add(transit, 0, 360);
+elm_transit_go(transit);
+</pre>
+
+<h3 id="Animation_Chain" name="Animation_Chain">Animation Chain</h3>
+
+<p>Now that we have listed all the effects that can be implemented using <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes as arguments two <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.</p>
+
+<p>The following example shows how to move a datetime widget on a square trajectory:</p>
+
+<pre class="prettyprint">
+Evas_Object *dt = elm_datetime_add(ad-&gt;win);
+evas_object_resize(dt, 350, 50);
+evas_object_show(dt);
+
+// The first transition
+Elm_Transit *t1 = elm_transit_add();
+elm_transit_object_add(t1, dt);
+elm_transit_duration_set(t1, 2);
+elm_transit_effect_translation_add(t1, 0, 0, 100, 0);
+
+// The second transition
+Elm_Transit *t2 = elm_transit_add();
+elm_transit_object_add(t2, dt);
+elm_transit_duration_set(t2, 2);
+elm_transit_effect_translation_add(t2, 100, 0, 100, 100);
+
+// The third transition
+Elm_Transit *t3 = elm_transit_add();
+elm_transit_object_add(t3, dt);
+elm_transit_duration_set(t3, 2);
+elm_transit_effect_translation_add(t3, 100, 100, 0, 100);
+
+// The fourth transition
+Elm_Transit *t4 = elm_transit_add();
+elm_transit_object_add(t4, dt);
+elm_transit_duration_set(t4, 2);
+elm_transit_effect_translation_add(t4, 0, 100, 0, 0);
+
+// Chaining the transitions
+elm_transit_chain_transit_add(t1, t2);
+elm_transit_chain_transit_add(t2, t3);
+elm_transit_chain_transit_add(t3, t4);
+
+// Starting the transitions
+elm_transit_go(t1);
+</pre>
+
+<p>Note that we cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, you cannot do something like this:</p>
+
+<pre class="prettyprint">elm_transit_chain_transit_add(t4, t1);</pre>
+
+<p>To create a looped animation chain, you have to use low-level components provided by the Ecore and Evas transition libraries, or you can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del_cb_set()</span> function to define a callback function for when a transition gets deleted. This way, you could recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
+
+<pre class="prettyprint">
+elm_transit_del_cb_set(Elm_Transit *transit, Elm_Transit_Del_Cb cb, void *data)
+</pre>
+
+<p>The first argument is the transition object. The second argument is the callback function to run on transition delete. The third argument is the data to pass to the callback function.</p>
+
+<p>You can severe the chain relationship between two transits by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_chain_transit_del(Elm_Transit *transit, Elm_Transit *chain_transit)</pre>
+
+<p>The first argument is the first transition in the chain. The second argument is the second transition in the chain.</p>
+
+<p>To get the current chain transit list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transits_get()</span> function.</p>
+
+<h3 id="Animation_Timeline" name="Animation_Timeline">Animation Timeline</h3>
+
+<p>After you have defined all the properties that define your transition, start the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_go(Elm_Transit *transit)</pre>
+
+<p>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</p>
+
+<pre class="prettyprint">elm_transit_paused_set(Elm_Transit *transit, Eina_Bool paused)</pre>
+
+<p>You can resume the transition by using the same method but setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>. If you want to know whether the transition is currently paused, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_get()</span> function.</p>
+
+<p>You can remain informed about the present transition flow and get the current frame by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function will return the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</p>
+
+<h3 id="Custom_Transition" name="Custom_Transition">Custom Transition</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a standard function for defining any effect of your choosing that will be applied to some context data:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_add(Elm_Transit *transit,
+&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_Transition_Cb transition_cb,
+&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 *effect,
+&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_End_Cb end_cb)
+</pre>
+
+<p>The first argument is the transition target of the new effect. The second argument is the transition callback function. The third argument is the new effect. The fourth argument is the callback function to call at the end of the effect.</p>
+
+<p>As described earlier in this programming guide, this function embraces three callbacks that will allow you to define every aspects of your transition from its creation to its deletion. The following is an example of how to build a custom resizing animation.</p>
+
+<p>First, we define a structure capable of holding the context information about resizing an Evas object:</p>
+
+<pre class="prettyprint">
+typedef struct
+{
+&nbsp;&nbsp;&nbsp;struct _size
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;from, to;
+}
+Custom_Effect;
+</pre>
+
+<p>We can now implement our custom resizing callback function. This function takes the following arguments:</p>
+
+<ul>
+<li>The context data that holds the custom properties of our transition, which are used as parameters to calculate the interpolation.</li>
+<li>The transit object that contains the list of our Evas objects to animate and all the information about duration, auto-reverse, looping, and so on.</li>
+<li>The progress (position along the animation timeline) that ranges from 0.0 to 1.0 and allows us to calculate the desired interpolation for each frame.</li>
+</ul>
+
+<pre class="prettyprint">
+static void
+_custom_op(void *data, Elm_Transit *transit, double progress)
+{
+&nbsp;&nbsp;&nbsp;if (!data) return;
+&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;Evas_Object *obj;
+&nbsp;&nbsp;&nbsp;const Eina_List *elist;
+&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect = data;
+&nbsp;&nbsp;&nbsp;const Eina_List *objs = elm_transit_objects_get(transit);
+&nbsp;&nbsp;&nbsp;if (progress &lt; 0.5)
+&nbsp;&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;w = custom_effect-&gt;from.w;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&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;w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(objs, elist, obj)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(obj, w, h);
+}
+</pre>
+
+<p>The callback function above resizes our Evas objects in two steps. During the first half of the transition, only the height changes, while the width remains the same. During the second half, it is the other way around until we get to the desired size.</p>
+
+<p>You must then define the context used by your animation:</p>
+
+<pre class="prettyprint">
+static void*
+_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w, Evas_Coord to_h)
+{
+&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect;
+
+&nbsp;&nbsp;&nbsp;custom_effect = calloc(1, sizeof(Custom_Effect));
+&nbsp;&nbsp;&nbsp;if (!custom_effect) return NULL;
+
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.w = from_w;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.h = from_h;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.w = to_w - from_w;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.h = to_h - from_h;
+
+&nbsp;&nbsp;&nbsp;return custom_effect;
+}
+</pre>
+
+<p>You must define the function that will take care of deleting all the context objects used by your custom transition and free up the allocated memory:</p>
+
+<pre class="prettyprint">
+static void
+_custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;free(data);
+}
+</pre>
+
+<p>Finally, apply your custom transition to your <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object:</p>
+
+<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);
+</pre>
+
+<p>If you want to delete an effect from your effects list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_del()</span> function.</p>
+  
+  
+  
+
+               <h2 id="evas_map_animation" name="evas_map_animation">Evas Map Effects</h2>
+
+<p>Evas Map animations allow you to apply transformations to all types of objects by way of UV mapping.</p>
+
+<p>In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p>
+
+<p>Evas provides both raw and easy-to-use functions for UV mapping. The raw functions allow you to create UV maps outside Evas and import them into your application, for example by loading them from an external file. The easy-to-use functions allow you to create UV maps directly in Evas by calculating the map points based on high-level parameters, such as rotation angle and ambient light.</p>
+
+<h3 id="Map_Points" name="Map_Points">Map Points</h3>
+
+<p>A map consists of a set of points. (Currently, only four points are supported.) Each point contains X and Y canvas coordinates that can be used to alter the geometry of the mapped object, and a Z coordinate that indicates the depth of the point. The Z coordinate does not normally affect the map, but several utility functions use it to calculate the right position of the point given the other parameters.</p>
+
+<p>First, create an <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function. This function creates the specified number of map points (currently only up to four points). Each point is empty and ready to be modified with <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> functions.</p>
+
+<pre class="prettyprint">Evas_Map *m = evas_map_new(4);</pre>
+
+<p>If you want to get the size (number of points) of an existing map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_count_get()</span> function.</p>
+
+<p>To set the coordinates for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_coord_set(Evas_Map *m, int idx, Evas_Coord x, Evas_Coord y, Evas_Coord z)</pre>
+
+<p>The following example shows a common way to define a map that matches the geometry of a rectangle (a square in this case):</p>
+
+<pre class="prettyprint">
+evas_map_point_coord_set(m, 0, 100, 100, 0);
+evas_map_point_coord_set(m, 1, 300, 100, 0);
+evas_map_point_coord_set(m, 2, 300, 300, 0);
+evas_map_point_coord_set(m, 3, 100, 300, 0);
+</pre>
+
+<p class="figure">Figure: Map</p>
+<p style="text-align:center;"><img alt="Map" src="../../images/evas_map_1.png" /></p>
+
+<p>The following examples all produce the same result as the above example, but with simpler code:</p>
+
+<ul>
+    <li>
+        <p>To create a rectangle map using the starting X and Y coordinates combined with width and height, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_geometry()</span> function:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(Evas_Map *m, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h, Evas_Coord z)</pre>
+        <p>The following example creates the same map as above:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(m, 100, 100, 200, 200, 0);</pre>
+    </li>
+    <li>
+        <p>To create a map based on the geometry of a given object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object()</span> or <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function. The former sets the Z coordinate of all points to 0, whereas the latter allows you to define the same custom Z coordinate for all points:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_object(Evas_Map *m, const Evas_Object *obj)</pre>
+        <pre class="prettyprint">evas_map_util_points_populate_from_object_full(Evas_Map *m, const Evas_Object *obj, Evas_Coord z)</pre>
+        <p>The following example creates the same map as above:</p>
+        <pre class="prettyprint">
+Evas_Object *o;
+evas_object_move(o, 100, 100);
+evas_object_resize(o, 200, 200);
+evas_map_util_points_populate_from_object(m, o);
+// OR
+evas_map_util_points_populate_from_object_full(m, o, 0);</pre>
+    </li>
+</ul>
+
+<p>You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:</p>
+
+<p class="figure">Figure: Simulated perspective</p>
+<p style="text-align:center;"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
+
+<pre class="prettyprint">
+evas_map_point_coord_set(m, 0, 100, 100, 0);
+evas_map_point_coord_set(m, 1, 250, 120, 0);
+evas_map_point_coord_set(m, 2, 250, 280, 0);
+evas_map_point_coord_set(m, 0, 100, 300, 0);
+</pre>
+
+<p>In the above example, the Z coordinate is unused: when setting points by hand, the Z coordinate is irrelevant.</p>
+
+<p>If you want to get the actual coordinates of a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_get()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_coord_get(const Evas_Map *m, int idx, Evas_Coord *x, Evas_Coord *y, Evas_Coord *z)</pre>
+
+<p>After you have defined the map points, apply them to your map for transformation:</p>
+
+<pre class="prettyprint">
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+</pre>
+
+<p>Finally, after you are done with the map, release the memory allocated to it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_free()</span> function:</p>
+
+<pre class="prettyprint">evas_map_free(m);</pre>
+
+<p>The utility functions described in the next section allow you to perform the above tasks with less coding work.</p>
+
+<h3 id="Utility_Functions" name="Utility_Functions">Utility Functions</h3>
+
+<p>Utility functions take an already configured map and allow you to easily modify it to produce specific effects. For example, to rotate an object around its center, you need the rotation angle and the coordinates of each corner of the object to perform the math required to get the new set of coordinates that needs to be set for the map. Evas provides a utility function that does the math for you:</p>
+
+<pre class="prettyprint">evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)</pre>
+
+<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counterclockwise.</p>
+
+<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.</p>
+
+<pre class="prettyprint">
+evas_object_geometry_get(o, &amp;x, &amp;y, &amp;w, &amp;h);
+m = evas_map_new(4);
+evas_map_util_points_populate_from_object(m, o);
+evas_map_util_rotate(m, 45, x + (w / 2), y + (h / 2));
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<p class="figure">Figure: Rotating around the center point</p>
+<p style="text-align:center;"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
+
+<p>You can rotate the object around any other point simply by setting the last two arguments of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:</p>
+
+<pre class="prettyprint">evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);</pre>
+
+<p class="figure">Figure: Rotating around other points</p>
+<p style="text-align:center;"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
+
+<p>You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:</p>
+
+<pre class="prettyprint">
+evas_output_size_get(evas, &amp;w, &amp;h);
+m = evas_map_new(4);
+evas_map_util_points_populate_from_object(m, o);
+evas_map_util_rotate(m, 45, w, h);
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<h3 id="Zoom" name="Zoom">Zoom</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_zoom()</span> function zooms the points of the map from a center point, defined by <span style="font-family: Courier New,Courier,monospace;">cx</span> and <span style="font-family: Courier New,Courier,monospace;">cy</span>. The <span style="font-family: Courier New,Courier,monospace;">zoomx</span> and <span style="font-family: Courier New,Courier,monospace;">zoomy</span> arguments specify how much to zoom in on the X and Y axes. A value of 1.0 means no zoom, 2.0 means double the size, 0.5 means half the size, and so on. All the coordinates are global canvas coordinates.</p>
+
+<pre class="prettyprint">
+evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_Coord cy)
+</pre>
+
+<h3 id="threeD_Maps" name="threeD_Maps">3D Maps</h3>
+
+<p>Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.</p>
+
+<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counterclockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
+
+<p class="figure">Figure: Rotating around the Y axis</p>
+<p style="text-align:center;"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
+
+<p>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. This is normally done after all the other operations are applied to the map.</p>
+
+<pre class="prettyprint">evas_map_util_clockwise_get(Evas_Map *m)</pre>
+
+<h3 id="threeD_Rotation" name="threeD_Rotation">3D Rotation and Perspective</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function transforms a map to apply a 3D rotation to the mapped object. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the three axes.</p>
+
+<pre class="prettyprint">evas_map_util_3d_rotate(Evas_Map *m, double dx, double dy, double dz, Evas_Coord cx, Evas_Coord cy, Evas_Coord cz)</pre>
+
+<p>Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:</p>
+
+<p class="figure">Figure: 3D rotation</p>
+<p style="text-align:center;"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
+
+<p>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. To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set:</p>
+
+<pre class="prettyprint">evas_map_util_3d_perspective(Evas_Map *m, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)</pre>
+
+<p>The result makes the vanishing point the center of each object:</p>
+
+<p class="figure">Figure: Adding perspective</p>
+<p style="text-align:center;"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
+
+<h3 id="Color_Light" name="Color_Light">Color and Lighting</h3>
+
+<p>Each point in a map can be set to a color, which will be multiplied with the object’s own color and linearly interpolated between adjacent points. To set the color separately for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
+
+<p>To set the same color for every point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
+
+<p>When using a 3D effect, colors can be used to improve its look by simulating a light source. The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light. Here, the orientation of each point is important.</p>
+
+<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
+
+<p>If the map points are defined counterclockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
+
+<p class="figure">Figure: Obscured object</p>
+<p style="text-align:center;"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
+
+<h3 id="Mapping" name="Mapping">Mapping</h3>
+
+<p>Images need special handling when mapped. While Evas can easily handle objects, it is completely oblivious to the contents of images. This means that each point in a map needs to be mapped to a specific pixel in the source image. Failing to do this can result in unexpected behavior.</p>
+
+<p>Let's get started with the following three images, each sized at 200 × 200 pixels:</p>
+
+<p class="figure">Figure: Starting point</p>
+<p style="text-align:center;"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
+
+<p>The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.</p>
+
+<p class="figure">Figure: Questionable result</p>
+<p style="text-align:center;"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
+
+<p>To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function, which allows you to map a given point in a map to a given pixel in a source image:</p>
+
+<pre class="prettyprint">
+evas_map_point_image_uv_set(Evas_Map *m, int idx, double u, double v)
+</pre>
+
+<p>To match our example images to the maps above, all we need is the size of each image, which we can get using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_size_get()</span> function.</p>
+
+<pre class="prettyprint">
+// Tux 1: Some cropping and stretch up
+evas_map_point_image_uv_set(m, 0, 0, 20);
+evas_map_point_image_uv_set(m, 1, 200, 20);
+evas_map_point_image_uv_set(m, 2, 200, 180);
+evas_map_point_image_uv_set(m, 3, 0, 180);
+evas_object_map_set(tux1, m);
+evas_object_map_enable_set(tux1, EINA_TRUE);
+
+// Inverted texture for shadow:
+evas_map_point_image_uv_set(m, 0, 0, 180);
+evas_map_point_image_uv_set(m, 1, 200, 180);
+evas_map_point_image_uv_set(m, 2, 200, 20);
+evas_map_point_image_uv_set(m, 3, 0, 20);
+evas_object_map_set(tux1_shadow, m);
+evas_object_map_enable_set(tux1_shadow, EINA_TRUE);
+
+// Tux 2: Make it fit to the map:
+evas_map_point_image_uv_set(m, 0, 0, 0);
+evas_map_point_image_uv_set(m, 1, 200, 0);
+evas_map_point_image_uv_set(m, 2, 200, 200);
+evas_map_point_image_uv_set(m, 3, 0, 200);
+evas_object_map_set(tux2, m);
+evas_object_map_enable_set(tux2, EINA_TRUE);
+
+// Tux 3: Zoom and fit relatively to image size
+evas_object_image_size_get(evas_object_image_source_get(tux3), &amp;w, &amp;h);
+evas_map_point_image_uv_set(m, 0, 0.1 * w, 0.1 * h);
+evas_map_point_image_uv_set(m, 1, 0.9 * w, 0.1 * h);
+evas_map_point_image_uv_set(m, 2, 0.9 * w, 0.9 * h);
+evas_map_point_image_uv_set(m, 3, 0.1 * w, 0.9 * h);
+evas_object_map_set(tux3, m);
+evas_object_map_enable_set(tux3, EINA_TRUE);
+</pre>
+
+<p class="figure">Figure: Correct result</p>
+<p style="text-align:center;"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
+
+<p>You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve more interesting results still.</p>
+
+<h3 id="Lighting" name="Lighting">Lighting</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> allows you to define an ambient light and a light source within the scene. Both of these light sources have their own colors.</p>
+
+<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
+
+<p>The above function is used to apply lighting calculations (from a single light source) to a given map. The red, green, and blue values of each vertex will be modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface should be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
+
+<p>To get the reflections (gradient) in the shadow of our previous example, you have to define a source of light close enough to the user and a very bright ambient light, for example:</p>
+
+<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
+</pre>
+
+<h3 id="Alpha_Channel" name="Alpha_Channel">Alpha Channel</h3>
+
+<p>You can also use an alpha channel on your map by enabling the alpha channel feature:</p>
+
+<pre class="prettyprint">evas_map_alpha_set(Evas_Map *m, Eina_Bool enabled)</pre>
+
+<p>Next, set the alpha value separately for each map point:</p>
+
+<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
+
+<p>Alternatively, you can set the same alpha value to all map points:</p>
+
+<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
+
+<p>The following code sets the shadow transparency for the first image in the above three-image example:</p>
+
+<pre class="prettyprint">
+// Set object transparency to 50%:
+evas_map_util_points_color_set(m, 255, 255, 255, 127);
+
+// Tux&#39;s head is almost invisible in the shadow:
+evas_map_point_color_set(m, 3, 255, 255, 255, 15);
+evas_map_point_color_set(m, 4, 255, 255, 255, 15);
+</pre>
+
+<h3 id="Smoothing" name="Smoothing">Smoothing</h3>
+
+<p>To enable smoothing when rendering a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_smooth_set(Evas_Map *m, Eina_Bool enabled)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object to apply smoothing to. The second argument sets whether to enable the smoothing:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>: Enable smoothing.</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>: Disable smoothing.</li>
+</ul>
+
+<p>If the object is of a type that has its own smoothing settings, the smoothing settings must be disabled for both the object and the map. Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_get()</span> 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/containers_n.htm b/org.tizen.guides/html/native/ui/containers_n.htm
new file mode 100644 (file)
index 0000000..edf7e6d
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/containers_n.htm
@@ -0,0 +1,666 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Container Widgets</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#box">Box Container</a></li>
+                       <li><a href="#conformant">Conformant Container</a></li>
+                       <li><a href="#grid">Grid Container</a></li>
+                       <li><a href="#layout">Layout Container</a></li>
+                       <li><a href="#mapbuf">Mapbuf Container</a></li>
+                       <li><a href="#naviframe">Naviframe Container</a></li>
+                       <li><a href="#panes">Panes Container</a></li>
+                       <li><a href="#scroller">Scroller Container</a></li>
+                       <li><a href="#table">Table Container</a></li>
+                       
+                       </ul>
+               <p class="toc-title">Related Info</p>
+                       <ul class="toc">
+                               <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
+                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+                               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Container Widgets</h1>
+<div class="cont"><div class="static-cont">            
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="box" name="box" class="items-tit-h2">Box Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+    <p class="figure">Figure: Box container</p>
+  <p style="text-align:center;"><img alt="Box container" src="../../images/box.png" /></p>
+
+
+<p>Most of the time, you want to display widgets on the screen in a specific order. In <a href="../../../../org.tizen.tutorials/html/native/ui/form_tutorial_n.htm">Form Tutorial</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging widgets horizontally or vertically.</p>
+<h3>Creating a Box</h3>
+<p>To create a new horizontal box:</p>
+<pre class="prettyprint">Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+</pre>
+<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *hbox;
+
+hbox = elm_box_add(parent);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<h3>Adding Objects to the Box</h3>
+<p>You can add any Evas object to the box. Here, we create 5 button widgets and add them to a box:</p>
+<pre class="prettyprint">int i;
+Evas_Object *bt;
+Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;char tmp[16];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
+&nbsp;&nbsp;&nbsp;bt = elm_button_add(vbox);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, tmp);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(vbox, bt);
+&nbsp;&nbsp;&nbsp;evas_object_show(bt);
+}
+evas_object_show(vbox);
+</pre>
+<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button widget to the end of the box.</p>
+
+<h3>Setting the Padding</h3>
+<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
+<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
+</pre>
+
+<h3>Handling Element Size</h3>
+<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
+<pre class="prettyprint">ic = elm_icon_add(vbox);
+elm_image_file_set(ic, &quot;./c1.png&quot;, NULL);
+evas_object_size_hint_min_set(ic, 128, 128);
+evas_object_show(ic);
+elm_box_pack_start(vbox, ic);
+</pre>
+<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
+<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
+<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
+</pre>
+<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
+<h3>Setting the Alignment</h3>
+<p>You can set the alignment of widgets inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a widget with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
+
+<p class="figure">Figure: Alignment</p>
+<p style="text-align:center;"><img alt="Alignment" src="../../images/align.png" /></p>
+
+<p>Here, we set an alignment of 0.8 vertically:</p>
+<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
+<h3>Using Size Hints</h3>
+<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 will honor these requests if it can. This is why they are called &quot;hints&quot;. The size hint functions are:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
+</ul>
+<p>You can also use the respective get functions to get the current hint values.</p>
+<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
+</pre>
+<p>You can also set a maximum size for the same icon:</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
+</pre>
+<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
+<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+</pre>
+<p>Here, the width will be twice the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
+</pre>
+<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
+<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
+<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+ 
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="conformant" name="conformant" class="items-tit-h2">Conformant Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Conformant container</p>
+<p style="text-align:center;"><img alt="Conformant container" src="../../images/conformant.png" /></p>
+
+<p>A conformant is a container widget that 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. When the virtual keyboard is displayed, the content area is not resized.</p>
+
+<h3>Creating a Conformant</h3>
+<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+</pre>
+
+<h3>Adding Content to the Conformant</h3>
+<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">elm_object_content_set(conformant, main_view);
+</pre>
+
+<h3>Signals</h3>
+<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
+<ul class="ul">
+<li>&quot;virtualkeypad,state,on&quot;: The virtual keyboard has been switched on.</li>
+<li>&quot;virtualkeypad,state,off&quot;: The virtual keyboard has been switched off.</li>
+<li>&quot;virtualkeypad,size,changed&quot;: The virtual keyboard size has changed.</li>
+<li>&quot;clipboard,state,on&quot;: The clipboard has been switched on.</li>
+<li>&quot;clipboard,state,off&quot;: The clipboard has been switched off. </li>
+</ul>
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="grid" name="grid" class="items-tit-h2">Grid Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
+
+<h3>Creating a Grid</h3>
+<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *grid;
+
+grid = elm_grid_add(parent);
+</pre><h3>Adding Items to the Grid</h3>
+<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
+<pre class="prettyprint">for (i = 0; i &lt; 12; i++)
+{
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(grid);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(ic, 128, 128);
+&nbsp;&nbsp;&nbsp;evas_object_show(ic);
+&nbsp;&nbsp;&nbsp;x = 40 * cos(2.0 * M_PI / 12 * i);
+&nbsp;&nbsp;&nbsp;y = 40 * sin(2.0 * M_PI / 12 * i);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
+}
+evas_object_show(grid);
+</pre>
+
+<h3>Changing Position and Size</h3>
+<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
+<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
+<h3>Clearing the Grid</h3>
+<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="layout" name="layout" class="items-tit-h2">Layout Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget. Layouts are the basis of a lot of graphics widgets used in Elementary.</p>
+
+<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
+
+<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+</pre>
+<p>In Tizen, the layout widget is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
+<ul class="ul">
+<li>application/default: This layout can be used to display content inside a window.</li>
+<li>drawer/panel: This layout can be used to create a 2-panel view.</li>
+<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
+</ul>
+<p>To use the application/default layout:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
+</pre>
+
+<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
+<p>To add an Evas object to the layout:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot; view);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
+<p>The drawer/panel layout can display 2 different views, the background and the main content:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+</pre>
+<p>To swallow an object inside the main content and background views:</p>
+<pre class="prettyprint">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);
+</pre>
+<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part. There are two different texts zones: <span style="font-family: Courier New,Courier,monospace">elm.text</span> and <span style="font-family: Courier New,Courier,monospace">elm.help.text</span>. To change the text:</p>
+<pre class="prettyprint">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;);
+</pre>
+<h3 id="container_layout_styles" name="container_layout_styles">Using Layout Themes</h3>
+<p>The layout widget supports the following predefined default themes:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content</span>: For applications with a toolbar and main content area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back</span>: For applications with a toolbar, main content area (with a back button), and title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back-next</span>: For applications with a toolbar, main content area (with back and next buttons), and title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">content-back</span>: For applications with main content (with a back button) and title areas.</li>
+<li><span style="font-family: Courier New,Courier,monospace">content-back-next</span>: For applications with main content (with back and next buttons) and title areas.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-vbox</span>: For applications with a toolbar and main content area as a vertical box.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-table</span>: For applications with a toolbar and main content area as a table.</li>
+</ul>
+<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
+
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="mapbuf" name="mapbuf" class="items-tit-h2">Mapbuf Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Mapbuf hierarchy</p>
+<p style="text-align:center;"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
+
+<p>A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets.</p>
+
+<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf widget will be faster than frequently moving the content object.</p>
+
+<p>The mapbuf widget inherits all the functions of the container class.</p>
+
+<h3>Creating a Mapbuf</h3>
+<p>To create a mapbuf widget, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
+
+/* Creating a mapbuf */
+mapbuf = elm_mapbuf_add(parent);
+</pre>
+<h3>Adding Content to the Mapbuf</h3>
+<p>To add content to the mapbuf widget, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the &quot;default&quot; part:</p>
+<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<p>To activate smooth map rendering and alpha rendering for the mapbuf widget:</p>
+<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
+elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
+</pre>
+
+<h3>Activating the Mapbuf</h3>
+<p>Finally, to use the mapbuf widget, you must activate it:</p>
+<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
+
+<h3>Signals</h3>
+<p>The mapbuf widget does not emit any signals and therefore does not provide any callbacks that you can register.</p>
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="naviframe" name="naviframe" class="items-tit-h2">Naviframe Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the widget.</p>
+
+<h3>Creating a Naviframe</h3>
+<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *nav;
+
+nav = elm_naviframe_add(parent);
+</pre>
+<h3>Adding and Deleting Views</h3>
+<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
+<p>To add a new view to the naviframe:</p>
+<pre class="prettyprint">Elm_Object_Item *nav_it;
+
+nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
+// In Tizen 2.3, the back button is not supported in the naviframe 
+</pre>
+<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
+<p>To pop and delete the top-most view:</p>
+<pre class="prettyprint">elm_naviframe_item_pop(nav);
+</pre>
+
+<h3>Adding Fixed Content</h3>
+<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
+<ul class="ul">
+<li>&quot;default&quot;: The main content area of the current view.</li>
+<li>&quot;icon&quot;: An icon in the title area of the current view.</li>
+<li>&quot;title_left_btn&quot;: A button on the left side of the naviframe.</li>
+<li>&quot;title_right_btn&quot;: A button on the right side of the naviframe.</li>
+</ul>
+<p>For example, to add a button to the naviframe:</p>
+<pre class="prettyprint">btn = elm_button_add(nav);
+elm_object_style_set(btn, &quot;naviframe/title_cancel&quot;);
+elm_object_item_part_content_set(nav_it, &quot;title_left_btn&quot;, btn);
+</pre>
+<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
+<ul class="ul">
+<li>&quot;default&quot;: Sets the title label in the title area of the current view.</li>
+<li>&quot;subtitle&quot;: Sets the subtitle label in the title area of the current view.</li>
+</ul>
+<h3>Signals</h3>
+<p>The naviframe emits the following signals:</p>
+<ul class="ul">
+<li>&quot;transition,finished&quot;: The transition has finished changing the view.</li>
+<li>&quot;title,transition,finished&quot;: The title area transition has finished  changing the state of the title.</li>
+<li>&quot;title,clicked&quot;: The user has clicked the title area.</li>
+</ul>
+
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="panes" name="panes" class="items-tit-h2">Panes Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Panes widget</p>
+<p style="text-align:center;"><img alt="Panes widget" src="../../images/panes.png" /></p>
+
+<p>A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
+
+<h3>Creating Panes</h3>
+<p>To create a panes widget, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *panes;
+
+panes = elm_panes_add(parent);
+</pre>
+
+<h3>Adding Content to the Panes</h3>
+<p>To add content to the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. The following code adds an object to the left pane:</p>
+<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, obj);
+</pre>
+
+<h3>Setting Panes Options</h3>
+<p>To set the orientation of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
+
+<p>To set the size of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions.</p>
+
+<h3>Signals</h3>
+<p>The panes widget emits the following signals:</p>
+<ul class="ul">
+<li>&quot;press&quot;: The panes widget has been pressed (but the press has not been released yet).</li>
+<li>&quot;unpress&quot;: The press has been released.</li>
+<li>&quot;clicked&quot;: The panes widget has been clicked.</li>
+<li>&quot;clicked,double&quot;: The panes widget has been double-clicked.</li>
+</ul>
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="scroller" name="scroller" class="items-tit-h2">Scroller Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
+<p>The scroller widget inherits all the functions of the <a href="#layout">Layout Container</a>.</p>
+<h3>Creating a Scroller</h3>
+<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+
+scroller = elm_scroller_add(parent);
+</pre>
+<h3>Adding Objects to the Scroller</h3>
+<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *image;
+
+image = elm_image_add(parent);
+elm_image_file_set(image, &quot;image.png&quot;, NULL);
+evas_object_show(image);
+evas_object_size_hint_min_set(image, 2560, 1600);
+elm_object_content_set(scroller, image);
+</pre>
+<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
+<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
+
+// Callback function for the &quot;animate,begin&quot; signal.
+// This callback is called when the user begins scrolling the image.
+void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
+}</pre>
+
+<h3>Managing the Properties of the Scroller</h3>
+<p>When scrolling content, the scroller may &quot;bounce&quot; when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
+
+<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+</pre>
+<p>The scroller can limit the 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 <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> 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>
+
+<h3>Signals</h3>
+
+<p>The scroller emits the following signals, which you can catch in your application:</p>
+
+<ul class="ul">
+<li>&quot;edge,left&quot;: The left edge of the content has been reached.</li>
+<li>&quot;edge,right&quot;: The right edge of the content has been reached.</li>
+<li>&quot;edge,top&quot;: The top edge of the content has been reached.</li>
+<li>&quot;edge,bottom&quot;: The bottom edge of the content has been reached.</li>
+<li>&quot;scroll&quot;: The content has been scrolled (moved).</li>
+<li>&quot;scroll,anim,start&quot;: The scrolling animation has started.</li>
+<li>&quot;scroll,anim,stop&quot;: The scrolling animation has stopped.</li>
+<li>&quot;scroll,drag,start&quot;: Dragging the contents has started.</li>
+<li>&quot;scroll,drag,stop&quot;: Dragging the contents has stopped.</li>
+<li>&quot;vbar,drag&quot;: The vertical scroll bar has been dragged.</li>
+<li>&quot;vbar,press&quot;: The vertical scroll bar has been pressed.</li>
+<li>&quot;vbar,unpress&quot;: The vertical scroll bar has been unpressed.</li>
+<li>&quot;hbar,drag&quot;: The horizontal scroll bar has been dragged.</li>
+<li>&quot;hbar,press&quot;: The horizontal scroll bar has been pressed.</li>
+<li>&quot;hbar,unpress&quot;: The horizontal scroll bar has been unpressed.</li>
+<li>&quot;scroll,page,changed&quot;: The visible page has changed.</li>
+</ul>
+
+<h3>Example</h3>
+<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
+<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
+</pre>
+<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
+<pre class="prettyprint">box = elm_box_add(scroller);
+elm_box_horizontal_set(box, EINA_TRUE);
+elm_object_content_set(scroller, box);
+evas_object_show(box);
+</pre>
+<p>We then 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);
+elm_image_file_set(img, buf, NULL);
+evas_object_show(img);
+pages = eina_list_append(pages, img);
+elm_box_pack_end(box, img);
+</pre>
+<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
+<p>Finally, we display the first page of the scroller:</p>
+<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
+</pre>
+<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
+<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
+<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then 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;evas_object_size_hint_min_set(page, w, h);
+}
+</pre>
+<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
+<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
+elm_scroller_page_show(obj, 0, 0);</pre>
+
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="table" name="table" class="items-tit-h2">Table Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
+
+<h3>Creating a Table</h3>
+
+<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *table;
+table = elm_table_add(parent);</pre>
+
+<h3>Adding Items to the Table</h3>
+
+<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
+<pre class="prettyprint">ic = elm_icon_add(table);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+evas_object_show(ic);
+elm_table_pack(table, ic, 0, 0, 3, 3);
+
+btn = elm_button_add(table);
+elm_object_text_set(btn, &quot;Click me i'm famous&quot;);
+evas_object_show(btn);
+elm_table_pack(table, btn, 3, 1, 1, 1);
+evas_object_show(table);
+</pre>
+
+<h3>Managing the Items</h3>
+
+<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
+
+<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
+<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
+
+<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
+<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
+</pre>
+
+<h3>Clearing the Table</h3>
+
+<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
+       </div>
+       </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/ui/data_types_n.htm b/org.tizen.guides/html/native/ui/data_types_n.htm
new file mode 100644 (file)
index 0000000..78ed779
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/data_types_n.htm
@@ -0,0 +1,1631 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Types</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">      
+                        <li><a href="#iterate">Iterator Functions</a></li>
+                        <li><a href="#data_structure">Data Structure</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API</a></li>
+               </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Data Types</h1>
+
+  <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>
+
+<ul>
+<li><a href="#inline">Inline Array</a>: standard array of inlined members</li>
+<li><a href="#array">Array</a>: standard array of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#hash">Hash Table</a>: standard hash of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#inlist">Inline List</a>: list with nodes inlined into the user type</li>
+<li>Compact List</li>
+<li><a href="#list">List</a>: standard list of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#iterate">Iterator Functions</a></li>
+<li>Sparse Matrix: sparse matrix of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li>Red-Black tree: red-black tree with nodes inlined into the user type</li>
+<li><a href="#buffer">String Buffer</a>: mutable string to prepend, insert, or append strings to a buffer</li>
+<li><a href="#share">Stringshare</a>: shares read-only string references</li>
+<li>Tiler split: merges and navigates into 2D tiled regions</li>
+<li>Trash: container of unused but allocated data</li>
+<li><a href="#generic">Generic Value Storage</a>: container for generic value storage and access</li>
+<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 iterators functions to manipulate data types like arrays.</p>
+<p>These functions allow to access elements of a container in a generic way, without knowing which container is used (a bit like 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>
+<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. This means you won&#39;t find any creation function for iterators in the Iterator chapter of the EFL documentation, those can be found in the documentation of the container type you&#39;re using. Although they are created with container specific functions, iterators are always deleted with the same function: eina_iterator_free().</p>
+<p>To get the data and iterate, use eina_iterator_next(). To call a function on every single element of a container, use eina_iterator_foreach().</p>
+<p>Each data type owns a set of macros, these macros provide the iterators like FOREACH or REVERSE_FOREACH</p>
+<p>More details about iterators are provided in section about data types.</p>
+<h2 id="data_structure" name="data_structure">Data Structure</h2>
+<h3 id="string" name="string">String Data Types</h3>
+<h4 id="share" name="share">Stringshare</h4>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string, and use in multiple places throughout your program. This way you can save a lot of strings with less memory.</p>
+<p>With this data type you reduce the number of duplicated strings kept in memory. It&#39;s pretty common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you could have multiple copies of a structure that allocates the string.</p>
+<p>So, rather than duplicating and freeing these strings, you request a read-only pointer to an existing string and only incur the overhead of a hash lookup.</p>
+<p>It sounds like micro-optimizing, but profiling has shown this can have a significant impact as the number of copies grows.</p>
+<p>It improves string creation/destruction speed, reduces memory use and decreases memory fragmentation, so an all-around win.</p>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is quite easy to use. In order create a stringshare, you just have to declare a <span style="font-family: Courier New,Courier,monospace">const char *</span> and call <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add(const char * str)</span></p>
+<pre class="prettyprint">
+const char *mystr;
+const char *prologue = &quot;Enlightenment is not just a window manager for Linux/X11 and others&quot;
+
+mystr = eina_stringshare_add(prologue);
+</pre>
+<p>When you are done with this string, you can delete it using <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del(Eina_Stringshare * string)</span>.</p>
+<pre class="prettyprint">eina_stringshare_del(mystr);</pre>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> also provides some useful functions to work with stringshares, such as:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf (const char *fmt, ...)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace(Eina_Stringshare **p_str, const char *news)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen (Eina_Stringshare *str)</span></li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf (const char *fmt, ...)</span> retrieves a string for use in a program from a format string. If you have a &quot;format&quot; string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span> you can store it as a stringshare too.</p>
+<pre class="prettyprint">
+const char *myfmtstr = &quot;%d desktop manager to rule them all&quot;;
+const char *str;
+
+str = eina_stringshare_printf(myfmtstr, 1);
+
+print(str)
+</pre>
+<p>This example produces &quot;1 desktop manager to rule them all&quot;.</p>
+<p>You can replace the value of an Eina_Stringshare using <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace(Eina_Stringshare **p_str, const char *news)</span>. Pass the pointer&#39;s address and the new value to this function like this:</p>
+<pre class="prettyprint">eina_stringshare_replace(&amp;str,&quot;One desktop manager to rule them all&quot;);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen (Eina_Stringshare *str)</span> gives you the length of the stringshare value.</p>
+<pre class="prettyprint">printf(&quot;length: %d\n&quot;, eina_stringshare_strlen(str));
+</pre>
+
+<h4 id="buffer" name="buffer">String Buffer</h4>
+<p>This data type is designed to be a mutable string, allowing to append, prepend or insert a string to a buffer. By this way, you can easily handle buffers in your applications.</p>
+<p>First you need to initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> and create the buffer.</p>
+<pre class="prettyprint">
+Eina_Strbuf *buf;
+mybuffer = eina_strbuf_new();
+</pre>
+
+<h5>Appending and Prepending Characters to the Buffer</h5>
+<p>To append or prepend characters to your buffer you have multiple ways.</p>
+<p>You can simply use <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append(Eina_Strbuf * buf, const char * str)</span></p>
+<pre class="prettyprint">eina_strbuf_append(mybuffer, &quot;This is my string. &quot;);
+</pre
+><p><span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char(Eina_Strbuf *buf, char c)</span> just appends one character to your buffer, you also can append a &quot;sized&quot; string to the buffer using <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length(Eina_Strbuf * buf, const char * str, size_t length)</span></p>
+<pre class="prettyprint">eina_strbuf_append_length(mybuffer, &quot;Buffe&quot;, 5);
+eina_strbuf_append_char(mybuffer, &#39;r&#39;);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> also handles &quot;printf&quot; format strings, <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf(Eina_Strbuf * buf, const char * fmtmt, ...)</span> adds formatted strings to the buffer.</p>
+<pre class="prettyprint">eina_strbuf_append_printf(buf, &quot;%s%c&quot;, &quot;buffe&quot;, &#39;r&#39;);
+</pre>
+
+<h5>Removing and Replacing Characters from the Buffer</h5>
+<p>To remove characters from a position to another, use <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove(Eina_Strbuf * buf, size_t started, size_t end)</span> The first parameter is the buffer, the second is the start position of characters you want to delete, and the last the end position.</p>
+<p>This example removes the first 19 characters of the buffer:</p>
+<pre class="prettyprint">eina_strbuf_remove(buf, 0, 18);
+</pre>
+
+<p>To replace characters, call <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace (Eina_Strbuf *buf, const char *str, const char *with, unsigned int n)</span> or <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all (Eina_Strbuf *buf, const char *str, const char *with)</span>. <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace</span> replaces the n-th occurrence of given <span style="font-family: Courier New,Courier,monospace">str</span> in the <span style="font-family: Courier New,Courier,monospace">buf</span> with <span style="font-family: Courier New,Courier,monospace">with</span> string. <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all</span> replaces all occurrences of given <span style="font-family: Courier New,Courier,monospace">str</span> in the <span style="font-family: Courier New,Courier,monospace">buf</span> with <span style="font-family: Courier New,Courier,monospace">with</span> string.</p>
+<pre class="prettyprint">
+eina_strbuf_append(mybuffer, &quot;buffer buffer buffer&quot;);
+
+// Replace one 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);
+
+// Replace 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;);
+
+// Replace 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;);
+</pre>
+
+<h5>Inserting Characters in the Buffer</h5>
+<p>To insert characters you can use the &quot;insert&quot; function, <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert(Eina_Strbuf * buf, const char * str, size_t pos)</span> will insert the given <span style="font-family: Courier New,Courier,monospace">str</span> at the position <span style="font-family: Courier New,Courier,monospace">pos</span>. <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf(Eina_Strbuf * buf, const char * fmt, size_t pos, ...)</span> does the same but with formatted strings.</p>
+<pre class="prettyprint">eina_strbuf_insert(mybuffer, &quot;More buffer&quot;, 10);
+
+// Using  eina_strbuf_length_get to get the buffer length.
+eina_strbuf_insert_printf(buf, &quot; %s: %d&quot;, 6, &quot;length&quot;, eina_strbuf_length_get(buf));
+</pre>
+
+<h5>Counting and Printing the Buffer</h5>
+<p>You may want to print or get the length of your buffer. In order to get the complete string, calling <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get(Eina_Strbuf *buf)</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get(Eina_Strbuf *buf)</span> will return the buffer length.</p>
+<pre class="prettyprint">printf(&quot;%s : %d\n&quot;, eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
+</pre>
+
+<h5>Freeing the Buffer</h5>
+<p>When you are done with the buffer don&#39;t forget to free the buffer using <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free(Eina_Strbuf * buf)</span>. You can also free the content of a <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free(Eina_Strbuf * buf)</span>.</p>
+<pre class="prettyprint">eina_strbuf_free(mybuffer);
+</pre>
+
+<h3 id="array" name="array">Arrays</h3>
+<p>An array is a data type which describes an ordered collection of values. The values are accessed by their index. </p>
+<pre class="prettyprint">INDEX | VALUE
+--------------
+0     | value0
+1     | value1
+2     | value2
+3     | value3
+4     | value4
+5     | value5
+6     | value6
+7     | value7
+</pre>
+<p>Eina provides two types of array: the classic Array and an inline array.</p>
+
+<h4>Array Data Type</h4>
+
+<h5>Creating and Destroying the Array</h5>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new(unsigned int step)</span> function creates a new array. You can store strings or &quot;objects&quot; in the created array.</p>
+<p>In this example, we create an array to store &quot;strings&quot;:</p>
+<pre class="prettyprint">
+// The strings we want to store in the array 
+const char* strings[] = 
+{
+&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
+&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
+&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
+&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
+};
+// Declaring the array (type Eina_Array)
+Eina_Array *array;
+unsigned int i;
+
+// Creating the array
+array = eina_array_new(20);
+
+// Inserting elements in the array
+for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+
+// We have to free the array elements
+while (eina_array_count(array))
+&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+
+// Free the array itself
+eina_array_free(array);
+</pre>
+<p>The first parameter called &#39;step&#39; defines the size of the allocation step, the array is allocated accordingly to the step. If you set 4 to this parameter, the function will return an array of 4 elements and next time you grow the array it will grow of 4 elements. Unless you have pushed 4 elements inside, it will not grow. But once you add the 5th element, it will grow again and become an array of 8 elements. This is very useful regarding performance issues and reduces also memory fragmentation by having a size that fit the array usage. If you set 0, the function will set a default safe value. This step can be changed using the function <span style="font-family: Courier New,Courier,monospace">eina_array_step_set</span>.</p>
+<p>This function return a valid array on success, or NULL if memory allocation fails.</p>
+<p>In the previous example we use <span style="font-family: Courier New,Courier,monospace">eina_array_free(Eina_Array *array)</span> to free the array. This function frees array. It first calls <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> and then free the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, we use a &#39;while&#39; statement with <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span>, this function is explained in the &quot;Array push and pop&quot; part of this document.</p>
+<p>Like we said before we can change the step of an array using <span style="font-family: Courier New,Courier,monospace">eina_array_step_set(Eina_Array *array, unsigned int sizeof_eina_array, unsigned int step)</span></p>
+<pre class="prettyprint">
+Eina_Array *array;
+array = eina_array_new(10);
+eina_array_step_set(array, sizeof(*array), 20);
+eina_array_free(array);
+</pre>
+<p>The first parameter is the array you want to change, the second one is the size of this very array. We use <span style="font-family: Courier New,Courier,monospace">sizeof(*array)</span> to get this size. The last parameter is the new step size. Here we pass from 10 to 20, next time the array grows, it grows of 20 elements.</p>
+
+<h5>Array Push and Pop Operations</h5>
+<p>In the creation example we add elements to the array using <span style="font-family: Courier New,Courier,monospace">eina_array_push(Eina_Array *array, const void *data)</span></p>
+<pre class="prettyprint">// Inserting elements in the array
+for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+</pre>
+<p>The first parameter is the array to store the element, the second one is the data you want to store. Be careful if you store strings you will have to allocate the memory first. Here we use <span style="font-family: Courier New,Courier,monospace">strdup</span> to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>, this function allocates the memory of the returned string, so we don&#39;t have to do it by ourselves.</p>
+<p><span style="font-family: Courier New,Courier,monospace">eina_array_push</span> puts the element at the end of the array and returns EINA_TRUE if everything runs well, EINA_FALSE if it doesn&#39;t.</p>
+<p>To remove the last element of an array, we use <span style="font-family: Courier New,Courier,monospace">eina_array_pop(Eina_Array *array)</span>, it takes the array as parameter and if the operation succeeds, it will return a pointer to the data of the removed element. That is the reason why we use this method to free the array&#39;s elements in this part of the example:</p>
+<pre class="prettyprint">// We have to free the array elements
+while (eina_array_count(array))
+  free(eina_array_pop(array));
+</pre>
+
+<h5>Getting and Setting Data in an Array</h5>
+<p>If you want to access the data in the array, you can use <span style="font-family: Courier New,Courier,monospace">eina_array_data_get(const Eina_Array *array, unsigned int idx)</span>, with the array and the index of the element you want to get.</p>
+<pre class="prettyprint">// Get the data of the first element 
+char *mydata;
+mydata = eina_array_data_get(array, 0);
+</pre>
+<p>The function returns a pointer to the data.</p>
+<p>You can also set the data of an element using <span style="font-family: Courier New,Courier,monospace">eina_array_data_set(const Eina_Array *array, unsigned int idx, const void *data)</span> The first parameter is the array, the second the index of the element you want to set, and the last one is the data. This effectively replaces the previously held data. You must therefore get the related pointer if you need to free it. Be careful, for performance reasons, there is no checks of array or idx. If it is NULL or invalid, the program may crash.</p>
+<pre class="prettyprint">// Get the data of the first element 
+free(eina_array_data_get(array, 0));
+eina_array_data_set(array, 0, strdup(strings[3]);
+</pre>
+
+<h5>Array Removal Operations</h5>
+<p><span style="font-family: Courier New,Courier,monospace">eina_array_remove(Eina_Array *array, Eina_Bool(*keep)(void *data, void *gdata), void *gdata)</span> rebuilds an array by specifying the data to be kept. The first parameter is the array to be changed, the second is the function which selects the data to keep in the rebuild array, the last one is the data to pass to the &#39;callback&#39; function defined as the second parameter.</p>
+<p>The keep function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, EINA_TRUE if the element stays and EINA_FALSE if it has to be removed.</p>
+<p>In this example we remove all the elements of the array which has a length greater than 5.</p>
+<pre class="prettyprint">// The keep function 
+Eina_Bool keep(void *data, void *gdata)
+{
+&nbsp;&nbsp;&nbsp;if (strlen((const char*)data) &lt;= 5)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int remove_array()
+{
+&nbsp;&nbsp;&nbsp;const char* strs[] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot;, &quot;six&quot;, &quot;seven&quot;, &quot;eight&quot;, &quot;nine&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ten&quot;, &quot;eleven&quot;, &quot;twelve&quot;, &quot;thirteen&quot;, &quot;fourteen&quot;, &quot;fifteen&quot;, &quot;sixteen&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;seventeen&quot;, &quot;eighteen&quot;, &quot;nineteen&quot;, &quot;twenty&quot;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;const char* strings[] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;Eina_Array_Iterator iterator;
+&nbsp;&nbsp;&nbsp;const char *item;
+&nbsp;&nbsp;&nbsp;unsigned int i;
+
+&nbsp;&nbsp;&nbsp;array = eina_array_new(10);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;  eina_array_push(array, strs[i]);
+
+&nbsp;&nbsp;&nbsp;eina_array_clean(array);
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;  eina_array_push(array, strings[i]);
+
+&nbsp;&nbsp;&nbsp;eina_array_data_set(array, 17, &quot;flattop&quot;);
+
+&nbsp;&nbsp;&nbsp;// Removing the undesired elements 
+&nbsp;&nbsp;&nbsp;eina_array_remove(array, keep, NULL);
+
+&nbsp;&nbsp;&nbsp;EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
+&nbsp;&nbsp;&nbsp;  printf(&quot;item #%d: %s\n&quot;, i, item);
+
+&nbsp;&nbsp;&nbsp;// Flushing the array.
+&nbsp;&nbsp;&nbsp;eina_array_flush(array);
+
+&nbsp;&nbsp;&nbsp;// Free the array 
+&nbsp;&nbsp;&nbsp;eina_array_free(array);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h5>Array Flush Operation</h5>
+<p>To completely wipe an array out, you can use <span style="font-family: Courier New,Courier,monospace">eina_array_flush (Eina_Array *array)</span>. This function sets the counting and total members of array to 0, frees and sets to NULL all its data members. For performance issues, there is no check of the array. If it is NULL or invalid, the program may crash. The only parameter of this function is a pointer to the array (Eina_Array *) you want to flush.</p>
+<pre class="prettyprint">eina_array_flush(array);
+</pre>
+
+<h5>Counting Operations</h5>
+<p>To get the number of elements in an array you must use <span style="font-family: Courier New,Courier,monospace">eina_array_count(const Eina_Array *arrays)</span></p>
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The function returns an unsigned int representing to the number of elements.</p>
+<pre class="prettyprint">unsigned int nb_elm;
+nb_elm = eina_array_count(array);
+</pre>
+
+<h5>Array Clean Operation</h5>
+<p>If you need to empty an array quickly, you can use <span style="font-family: Courier New,Courier,monospace">eina_array_clean(Eina_Array *array)</span> this function sets the counting of members in the array to 0. It doesn&#39;t free any space so you have to use it carefully. For performance reasons, there is no check of array. If it is NULL or invalid, the program may crash.</p>
+<pre class="prettyprint">eina_array_clean(array);
+</pre>
+
+<h5>Iterating in an Array</h5>
+<p>We may want to iterate through the array. Eina implements Iterators to give the ability to the programmer of iterating in the data type.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> has one iterator the <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>. You can use it by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT(array, i, item, iterator)</span>. It takes the array to iterate as first parameter, an counter for the current index during iteration, and variable of the same type of item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. So in order to use it, you have to declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and for example an <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains &#39;strings&#39;</p>
+<pre class="prettyprint">
+Eina_Array_Iterator iterator;
+const char *item;
+unsigned int i;
+
+EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
+&nbsp;&nbsp;&nbsp;printf(&quot;item #%d: %s\n&quot;, i, item);
+</pre>
+<p>Eina also provides a function to iterate over an array, <span style="font-family: Courier New,Courier,monospace">eina_array_foreach(Eina_Array *array, Eina_Each_Cb cb, void *fdata)</span>. This function takes as first parameter the array to iterate, the second parameter called &quot;cb&quot; is a callback function which determines if the iteration can continue or not, the last parameter called fdata is the data passed to the callback function.</p>
+<p>In this example we print the data of each element:</p>
+<pre class="prettyprint">// The callback function 
+static Eina_Bool
+elm_print(const void *container, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char *)data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int iterating_array()
+{
+&nbsp;&nbsp;&nbsp;const char* strings[] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;unsigned int i;
+
+&nbsp;&nbsp;&nbsp;array = eina_array_new(10);
+&nbsp;&nbsp;&nbsp;eina_array_step_set(array, sizeof(*array), 20);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;  eina_array_push(array, strdup(strings[i]));
+
+&nbsp;&nbsp;&nbsp;// Iterating over the array and calling elm_print on each element
+&nbsp;&nbsp;&nbsp;eina_array_foreach(array, elm_print, NULL);
+
+&nbsp;&nbsp;&nbsp;// Free the elements data
+&nbsp;&nbsp;&nbsp;while (eina_array_count(array))
+&nbsp;&nbsp;&nbsp;  free(eina_array_pop(array));
+
+&nbsp;&nbsp;&nbsp;// Free the array
+&nbsp;&nbsp;&nbsp;eina_array_free(array);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new(const Eina_Array *array)</span> function returns a newly allocated iterator associated to array. If array is NULL or the counting of array members is less or equal than 0, this function will return NULL. If the memory cannot be allocated, NULL is returned and EINA_ERROR_OUT_OF_MEMORY is thrown. Otherwise, a valid iterator is returned.*</p>
+<p>Pass to this function the array for which you want to create a new Iterator.</p>
+<p>The iterator is used to run a sequential walk through the array, just like <span style="font-family: Courier New,Courier,monospace">eina_array_foreach</span>.</p>
+<p>In this example we print the data for all elements.</p>
+<pre class="prettyprint">static Eina_Bool
+print_one(const void *container, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int new_iterator()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *arra;
+&nbsp;&nbsp;&nbsp;Eina_Iterator *it;
+&nbsp;&nbsp;&nbsp;unsigned short int i;
+&nbsp;&nbsp;&nbsp;void *uninteresting;
+&nbsp;&nbsp;&nbsp;Eina_Bool rt;
+
+&nbsp;&nbsp;&nbsp;array = eina_array_new(4);
+
+&nbsp;&nbsp;&nbsp;const char *strings[] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;uninteresting string&quot;, &quot;husker&quot;, &quot;starbuck&quot;, &quot;husker&quot;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 4; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_array_push(array, strings[i]);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;it = eina_array_iterator_new(array);
+
+&nbsp;&nbsp;&nbsp;it = eina_iterator_next(it, &amp;uninteresting);
+&nbsp;&nbsp;&nbsp;eina_iterator_foreach(it, print_one, NULL);
+&nbsp;&nbsp;&nbsp;eina_iterator_free(it);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new(const Eina_Array *array)</span> function returns a newly allocated accessor associated to the array. If the array is NULL or the counting of array members is less or equal than 0, this function will return NULL. If the memory cannot be allocated, NULL is returned and EINA_ERROR_OUT_OF_MEMORY is thrown. Otherwise, a valid accessor is returned. The accessors allows random access on the array.</p>
+<p>This example shows how to use accessors for a random access to the array elements.</p>
+<pre class="prettyprint">int random_access()
+{
+&nbsp;&nbsp;&nbsp;const char *strings[] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;even&quot;, &quot;odd&quot;, &quot;even&quot;, &quot;odd&quot;, &quot;even&quot;, &quot;odd&quot;, &quot;even&quot;, &quot;odd&quot;, &quot;even&quot;, &quot;odd&quot;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;const char *more_strings[] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;// Declaration of the array 
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;// Declaration of the accessor
+&nbsp;&nbsp;&nbsp;Eina_Accessor *acc;
+
+&nbsp;&nbsp;&nbsp;// A generic counter
+&nbsp;&nbsp;&nbsp;unsigned short int i;
+
+&nbsp;&nbsp;&nbsp;// Variable to put the data retrieved from an array element
+&nbsp;&nbsp;&nbsp;void *data;
+
+&nbsp;&nbsp;&nbsp;array = eina_array_new(10);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_array_push(array, strings[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Creating the array accessor
+&nbsp;&nbsp;&nbsp;acc = eina_array_accessor_new(array);
+
+&nbsp;&nbsp;&nbsp;// Random access to the data of the array elements
+&nbsp;&nbsp;&nbsp;for(i = 1; i &lt; 10; i += 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Put the data in the variable &#39;data&#39;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_data_get(acc, i, &amp;data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (const char *)data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Free the accessor
+&nbsp;&nbsp;&nbsp;eina_accessor_free(acc);
+
+&nbsp;&nbsp;&nbsp;// Free the array
+&nbsp;&nbsp;&nbsp;eina_array_free(array);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3 id="inline" name="inline">Inline Arrays</h3>
+<p>The inline array is a container that stores the data itself (not the pointers to the data), this means there is no memory fragmentation. Also, for small data types (such as char, short, int, etc.), it&#39;s more memory efficient: data will be stored in cache and faster accessible, but the bigger the data gets, the less likely it is and the less interesting it becomes).</p>
+<p>To create an inline array you have to use <span style="font-family: Courier New,Courier,monospace">eina_inarray_new(unsigned int member_size, unsigned int step)</span> like in this example:</p>
+<pre class="prettyprint">int inline_array() 
+{
+&nbsp;&nbsp;&nbsp;// Declaration of inline array variable of the type Eina_Inarray
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+
+&nbsp;&nbsp;&nbsp;// Creation of an Inline array of &quot;char&quot;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 0);
+
+&nbsp;&nbsp;&nbsp;// Free the memory
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>The first parameter called &#39;member_size&#39; is the size of the value. In this example we want to store only characters, so we pass <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> to the function. The second parameter called &#39;step&#39; defines the size of the allocation step, the inline array is allocated by step. If you set 4 to this parameter, the function will return an inline array of 4 elements, next time you grow the inline array it will grow of 4 elements, so next time you grow the inline array will be a inline array of 8 elements. I you set 0, the function will set a default safe value. This step can be changed using the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set</span>.</p>
+<p>The function will return a pointer to the new Eina_Inarray variable.</p>
+<p>This example only shows the creation of an array, now we will see the following manipulation operations:</p>
+<ul>
+<li>push and pop</li>
+<li>insert and insert sorted</li>
+<li>remove and flush</li>
+<li>replace</li>
+<li>search</li>
+<li>sort</li>
+<li>count</li>
+</ul>
+
+<h4>Push and Pop Operations</h4>
+<p>To add data as the last element of the inline array you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_push(Eina_Inarray *array, const void *data)</span> like in this example:</p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+// Adding a value to the Inline array
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called &#39;data&#39; is the data you want to push to the inline array</p>
+<p>If everything runs fine the function will return the index of the new element. If something goes wrong it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
+<p>To remove the last element of the inline array you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop(Eina_Inarray *array)</span> like in this example:</p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing the last element
+eina_inarray_pop(iarr);
+</pre>
+
+<p>The only parameter of <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop</span> is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span>·</p>
+<p>This function returns the data removed from the inline array.</p>
+<h4>Insertion Operations</h4>
+<p>To insert data on a given position of the inline array, you can use the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at(Eina_Inarray *array, unsigned int position, const void *data)</span>.</p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;d&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;e&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Adding data on position 3
+ch = &#39;c&#39;;
+eina_inarray_insert_at(iarr, 2, &amp;ch)
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called &#39;position&#39; is the index of the element you want to remove from the inline array.</p>
+<p>The content of pointer is copied at the given position in the inline array. All the members from position to the end of the array are shifted to the end.</p>
+<p>If position is equal to the end of the array, then the member is appended.</p>
+<p>Be careful, if position is bigger than the array length, it will fail.</p>
+<p>If you want to insert data with your own criteria of position you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert(Eina_Inarray *array, const void * data, Eina_Compare_Cb compare)</span>. In this example we insert before a greater value.</p>
+<pre class="prettyprint">
+// Defining the function with our own criteria of position.
+Eina_Compare_Cb cmp(const void *a, const void *b)
+{
+&nbsp;&nbsp;&nbsp;return *(int*)a &gt; *(int*)b;
+}
+
+int inline_insert()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;char ch, *ch3;
+&nbsp;&nbsp;&nbsp;int a, *b;
+
+&nbsp;&nbsp;&nbsp;// Creation of an inline array of ints with step of 4
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(int), 4);
+
+&nbsp;&nbsp;&nbsp;// Adding data to this inline array
+&nbsp;&nbsp;&nbsp;a = 97;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+&nbsp;&nbsp;&nbsp;a = 98;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+&nbsp;&nbsp;&nbsp;a = 100;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+
+&nbsp;&nbsp;&nbsp;/* Inserting data with our own criteria */
+&nbsp;&nbsp;&nbsp;a = 99;
+&nbsp;&nbsp;&nbsp;eina_inarray_insert_sorted(iarr, &amp;a, cmp);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+}
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called &#39;data&#39; is the data you want to push to the inline array</p>
+<p>The last parameter called &#39;compare&#39; is the callback comparison function. This &quot;callback&quot; function of type <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted</span> as second parameter. If data1 is &#39;less&#39; than data2, -1 must be returned, if it is &#39;greater&#39;, 1 must be returned, and if they are equal, 0 must be returned.</p>
+<h4>Remove and Flush Operations</h4>
+<p>If you want to remove some data from an inline array you can use the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove(Eina_Inarray *array, const void *data)</span>. It finds the data and removes matching members from the array. The data may be an existing member of inline array for an optimized usage. If it&#39;s not the case the contents will be matched using <span style="font-family: Courier New,Courier,monospace">memcmp()</span>.</p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;d&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;e&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing data from the array
+eina_inarray_remove(iarr, &amp;ch);
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called &#39;data&#39; is the data you want to remove from the inline array.</p>
+<p>The function returns the index of the removed member or -1 on errors.</p>
+<p>You can also remove data from a defined position in the array, you must use <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at(Eina_Inarray *array, unsigned int position)</span></p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;d&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;e&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing data from position 2
+eina_inarray_remove_at(iarr, 2);
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The second parameter called &#39;position&#39; is the index of the element you want to remove from the inline array.</p>
+<p>The function returns EINA_TRUE on success and EINA_FALSE if something goes wrong</p>
+<p>The member is removed from the inline array and any members after it are moved towards the array&#39;s head.</p>
+<p>You can also remove all the elements of the array using <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush(Eina_Inarray *array)</span>.</p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;d&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;e&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing all inline array members 
+eina_inarray_flush(iarr);
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The function removes every member from array.</p>
+<h4>Replace Operations</h4>
+<p>In most of the cases when we use arrays we want to replace some values, you can do it using the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at(Eina_Inarray *array, unsigned int position, const void *data)</span> This function will copy the data over the given position.</p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;e&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing all inline array members 
+ch = &#39;d&#39;;
+eina_inarray_replace_at(iarr, 3, &amp;ch);
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The second parameter called &#39;position&#39; is the index of the element you want to remove from the inline array.</p>
+<p>The last parameter called &#39;data&#39; is the data you want to be copied in place of the current data.</p>
+<p><span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at</span> returns EINA_TRUE on success, EINA_FALSE on failure.</p>
+<p>The given pointer contents is copied at the given position in the array.</p>
+<p>The pointer is not referenced, instead it&#39;s contents is copied to the members array using the previously defined member_size.</p>
+<p>If position does not exist, it will fail.</p>
+<h4>Searching in the Inline Array</h4>
+<p>The function <span style="font-family: Courier New,Courier,monospace">eina_inarray_search(const Eina_Inarray * array, const void * data, Eina_Compare_Cb compare)</span> allows you to search a member in an inline array. It runs a linear walk looking for the given data.</p>
+<pre class="prettyprint">Eina_Compare_Cb
+compare(const void *pa, const void *pb)
+{
+&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+&nbsp;&nbsp;&nbsp;if (*a == *b)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int search_inline_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;int elm_index;
+&nbsp;&nbsp;&nbsp;int to_search = 3;
+
+&nbsp;&nbsp;&nbsp;array = eina_inarray_new(sizeof(short), 1);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(array, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;elm_index = eina_inarray_search(array, &amp;to_search, compare);
+&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+}
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The second parameter called &#39;data&#39; is the data used by the callback function to run comparison.</p>
+<p>The last parameter called &#39;compare&#39; is the callback comparison function. This &quot;callback&quot; function of type <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted</span> as second parameter. If data matches function must return 0, if data1 is &#39;less&#39; than data2, -1 must be returned and if it is &#39;greater&#39;, 1 must be returned.</p>
+<p>The function returns the member index or -1 if not found.</p>
+<p>Be careful the data given to compare function is the pointer to member memory itself, do no change it.</p>
+<p>The function <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted</span> does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search</span> but uses binary search instead for given data as compared by the compare function.</p>
+
+
+<h4>Sorting and Counting the Inline Array Elements</h4>
+<p>To sort and inline array you must use <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort(Eina_Inarray *array, Eina_Compare_Cb compare)</span> this function applies a quick sort algorithm to the inline array.</p>
+<pre class="prettyprint">static int
+short_cmp(const void *pa, const void *pb)
+{
+&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+
+&nbsp;&nbsp;&nbsp;return *a - *b;
+}
+
+static const short rand_numbers[] = 
+{
+&nbsp;&nbsp;&nbsp;9, 0, 2, 3, 6, 5, 4, 7, 8, 1, 10
+};
+
+int sorting_inline_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;array = eina_inarray_new(sizeof(short), 1);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; sizeof(rand_numbers)/sizeof(rand_numbers[0]); i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = rand_numbers[i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(array, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;eina_inarray_sort(array, short_cmp);
+&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+}
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span>. The last parameter called &#39;compare&#39; is the callback comparison function. This &quot;callback&quot; function of type <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted</span> as second parameter. If the data matches, the function must return 0, if data1 is &#39;less&#39; than data2, -1 must be returned and if it is &#39;greater&#39;, 1 must be returned.</p>
+<p>Same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search</span>, the data given to compare function is the pointer to member memory itself, do no change it.</p>
+<p>To get the number of elements in an inline array you must use <span style="font-family: Courier New,Courier,monospace">eina_inarray_count(const Eina_Inarray *arrays)</span></p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;c&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;e&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Printing the number of array elements using eina_inarray_count
+printf(&quot;Inline array of integers with %d elements:\n&quot;, eina_inarray_count(iarr));
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The function returns an unsigned int, the number of elements.</p>
+<h4>Iterating over an Inline Array</h4>
+<p>When we use datatypes in any language we want to iterate through lists and arrays, Eina implements Iterators to give the ability for the programmer to iterate over the datatype.</p>
+<p>The inline array have two iterators macros: the <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and the <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
+<p>To run a linear walk over an array of elements, we use the macro <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH(array, itr)</span></p>
+<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+int a, *b;
+
+a = 97;
+eina_inarray_push(iarr, &amp;a);
+a = 98;
+eina_inarray_push(iarr, &amp;a);
+a = 100;
+eina_inarray_push(iarr, &amp;a);
+a = 99;
+EINA_INARRAY_FOREACH(iarr, b)
+  printf(&quot;int: %d(pointer: %p)\n&quot;, *b, b);
+</pre>
+
+<p>In this example we print each element and its pointer.</p>
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span>.</p>
+<p>The second parameter called &#39;itr&#39; is the variable used to put the current value during the walk.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH</span> macro does the same thing but starts from the last element.</p>
+<p>You might need to perform some processing on the array&#39;s data, to do this you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach(const Eina_Inarray *array, Eina_Each_Cb function, const void * user_data)</span>. It will invoke the given function on each element of the array with the given data.</p>
+<pre class="prettyprint">
+static Eina_Bool
+array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;short *member = p;
+&nbsp;&nbsp;&nbsp;int *i = user_data;
+&nbsp;&nbsp;&nbsp;(*p)++;
+&nbsp;&nbsp;&nbsp;(*i)++;
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int inline_array_foreach()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;i = 0;
+&nbsp;&nbsp;&nbsp;eina_inarray_foreach(iarr, array_foreach, &amp;i);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The second parameter called &#39;function&#39; is the function to run on each element.</p>
+<p>The last parameter called &#39;user_data&#39; is the data passed to the &#39;function&#39; called on each element.</p>
+<p>The function returns EINA_TRUE if it successfully iterates through all items of the array.</p>
+<p>Call function for every given data in array.</p>
+<p>Safe way to iterate over an array.</p>
+<p>The &#39;callback&#39; function should return EINA_TRUE as long as you want the function to continue iterating, by returning EINA_FALSE it will stop and return EINA_FALSE as result.</p>
+<p>The data given to the function is the pointer to the member itself.</p>
+<p>If you want to remove some elements based on your own criteria you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove(Eina_Inarray *array, Eina_Each_Cb match, const void *user_data)</span> to do that. This function walks through the array and if the value matches in the &#39;callback&#39; function, it removes the element.</p>
+<pre class="prettyprint">static Eina_Bool
+array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;short *member = p;
+&nbsp;&nbsp;&nbsp;int *i = user_data;
+&nbsp;&nbsp;&nbsp;if (*i == *p) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int inline_array_foreach_remove()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;i = 6;
+&nbsp;&nbsp;&nbsp;eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>The first parameter called &#39;array&#39; is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
+<p>The second parameter called &#39;match&#39; is the function to run on each element.</p>
+<p>The last parameter called &#39;user_data&#39; is the data passed to the &#39;function&#39; called on each element.</p>
+<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
+<p>The match function have to return EINA_TRUE if it matches or EINA_FALSE if it doesn&#39;t.</p>
+<h3 id="hash" name="hash">Hash Tables</h3>
+<p>Eina_Hash has the same goal as every other hash table implementations. It provides a way to store values in association with a key.</p>
+<p>For example, if you want to store some tuples into a table, you can do it using <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
+<p>The Eina_Hash is implemented using an array of N &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 key as at worst case you will still depend on an efficient binary tree implementation.</p>
+
+<p>First, like for the other data types of Eina, you have to create the &quot;hash
+table&quot;, you can do it using `eina_hash_new(Eina_Key_Length key_length_cb, Eina_Key_Cmp key_cmp_cb, Eina_Key_Hash key_hash_cb, Eina_Free_Cb data_free_cb, int buckets_power_size)`</p>
+<p>To understand Eina_Hash, we are going to detail the parameters you must pass to this function.</p>
+<ul>
+<li>key_length_cb is the function called when getting the size of the key.</li>
+<li>key_cmp_cb is function called when comparing the keys.</li>
+<li>key_hash_cb is the function called when getting the values.</li>
+<li>data_free_cb is the function called on each value when the hash table is freed, or when an item is deleted from it. NULL can be passed as callback.</li>
+<li>buckets_power_size is the size of the buckets.</li>
+</ul>
+<p>So when you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>, you will have to create 4 callback functions and this can be very long. That&#39;s why <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers you pre-defined functions to create a hash table like</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new(Eina_Free_Cb data_free_cb)</span> this function creates a new hash table using the djb2 algorithm for strings.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new (Eina_Free_Cb data_free_cb)</span> creates a new hash table for use with strings (better with long strings).</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new (Eina_Free_Cb data_free_cb)</span> which creates a new hash table for use with strings with small bucket size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new(Eina_Free_Cb data_free_cb)</span> for use with 32bit integers. and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new(Eina_Free_Cb data_free_cb)</span> for 64bit integers.</li>
+</ul>
+<p>With this predefined functions, you only have to manage the function to free the data you store in you hash. <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> also have pre-defined functions to use white pointers and shared strings, <span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new(Eina_Free_Cb data_free_cb)</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new(Eina_Free_Cb data_free_cb)</span>.</p>
+<p>In the following example we manage a &quot;small phone book&quot; using <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new</span></p>
+<p>First we create the structure of the &quot;phone book&quot; and some static data.</p>
+<pre class="prettyprint">struct _Phone_Entry 
+{
+&nbsp;&nbsp;&nbsp;const char *name; // Full name
+&nbsp;&nbsp;&nbsp;const char *number; // Phone number
+};
+
+typedef struct _Phone_Entry Phone_Entry;
+
+static Phone_Entry _start_entries[] = 
+{
+&nbsp;&nbsp;&nbsp;{ &quot;Wolfgang Amadeus Mozart&quot;, &quot;+01 23 456-78910&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Ludwig van Beethoven&quot;, &quot;+12 34 567-89101&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Richard Georg Strauss&quot;, &quot;+23 45 678-91012&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Heitor Villa-Lobos&quot;, &quot;+34 56 789-10123&quot; },
+&nbsp;&nbsp;&nbsp;{ NULL, NULL }
+};
+</pre>
+
+<p>Now we create the free callback:</p>
+<pre class="prettyprint">static void
+_phone_entry_free_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;free(data);
+}
+</pre>
+
+<p>And finally we create the Hash and destroy the hash.</p>
+<pre class="prettyprint">int free_data()
+{
+&nbsp;&nbsp;&nbsp;Eina_Hash *phone_book = NULL;
+&nbsp;&nbsp;&nbsp;phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
+&nbsp;&nbsp;&nbsp;// Empty the phone book, but don&#39;t destroy it
+&nbsp;&nbsp;&nbsp;eina_hash_free_buckets(phone_book);
+&nbsp;&nbsp;&nbsp;eina_hash_free(phone_book);
+}
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">eina_hash_free_bucket</span> Free all &#39;buckets&#39; of the hash table, that empties the hash but don&#39;t destroy it so you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free</span> is called the space allocated for the hash is freed.</p>
+<p>The free callback can be changed using <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set(Eina_Hash *hash, Eina_Free_Cb data_free_cb)</span>, you need to pass the hash and the new callback function.</p>
+<h4>Working with Eina_Hash</h4>
+<p>In the example we create a hash but we do nothing with it. We may want to add some data to this hash, to do that we can use the function <span style="font-family: Courier New,Courier,monospace">eina_hash_add(Eina_Hash *hash, const void *key, const void *data)</span>. This function takes the hash as first parameter and the key to access to the data as second parameter and finally the data.</p>
+<pre class="prettyprint">// Add initial entries to our hash
+for (i = 0; _start_entries[i].name != NULL; i++)
+{
+&nbsp;&nbsp;&nbsp;eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
+}
+</pre>
+<p>Here we add the &quot;initial&quot; data we declared before to the hash.</p>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers lots of methods to add elements to an hash like <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add(Eina_Hash *hash, const void *key, const void *data)</span> which adds the entry without duplicating the string key. We are storing the key in our struct so we can use this function with eina_stringshare to avoid key data duplication. We develop the usage of Eina_Stringshare in a following chapter. So we could initialize our hash like in this example:</p>
+<pre class="prettyprint">// Add initial entries to our hash, using direct_add
+for (i = 0; _start_entries[i].name != NULL; i++)
+{
+&nbsp;&nbsp;&nbsp;// Allocating memory for the &quot;phone entry&quot;
+&nbsp;&nbsp;&nbsp;Phone_Entry *e = malloc(sizeof(Phone_Entry));
+
+&nbsp;&nbsp;&nbsp;// Creating an eina_stringshare for the Name and the phone number
+&nbsp;&nbsp;&nbsp;e-&gt;name = eina_stringshare_add(_start_entries[i].name);
+&nbsp;&nbsp;&nbsp;e-&gt;number = eina_stringshare_add(_start_entries[i].number);
+
+&nbsp;&nbsp;&nbsp;// Adding entry to the hash 
+&nbsp;&nbsp;&nbsp;eina_hash_direct_add(phone_book, e-&gt;name, e);
+}
+</pre>
+
+<p>To delete entries of a table we can use <span style="font-family: Courier New,Courier,monospace">eina_hash_del(Eina_Hash *hash, const void *key, const void *data)</span> this function removes the entry identified by a key or a data from the given hash table</p>
+<pre class="prettyprint">
+Eina_Bool r;
+const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+r = eina_hash_del(phone_book, entry_name, NULL);
+</pre>
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key(Eina_Hash *hash, const void *key)</span> to remove an entry by key.</p>
+<pre class="prettyprint">r = eina_hash_del_by_key(phone_book, &quot;Richard Georg Strauss&quot;);
+</pre>
+<p>To remove en entry by data you can use <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data(Eina_Hash *hash, const void *data)</span> by passing hash and the data of entry to be removed.</p>
+<pre class="prettyprint">r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
+</pre>
+
+<h4>Finding, Modifying, Counting Eina Hash</h4>
+<p>The other interesting thing with Hash is the ability to find elements and get data by key name.</p>
+<p>To retrieve an entry by its key you can use <span style="font-family: Courier New,Courier,monospace">eina_hash_find(const Eina_Hash *hash, const void *key)</span> 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;;
+
+// Look for a specific entry and get its phone number
+phone = eina_hash_find(phone_book, entry_name);
+</pre>
+
+<p>You can also modify some entry using <span style="font-family: Courier New,Courier,monospace">eina_hash_modify(Eina_Hash *hash, const void *key, const void *data)</span> passing the hash, the key of data to change and the new data, the function will return the old data on success. <span style="font-family: Courier New,Courier,monospace">eina_hash_set(Eina_Hash *hash, const void *key, const void *data)</span> does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify</span> but if the entry doesn&#39;t exist the function will create a new one.</p>
+<pre class="prettyprint">
+char *old_phone = NULL;
+char *phone = NULL;
+// Replacing the phone number of Richard Strauss
+old_phone = eina_hash_modify(phone_book, &quot;Richard Georg Strauss&quot;, 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;));
+</pre>
+
+<p>The function <span style="font-family: Courier New,Courier,monospace">eina_hash_move(Eina_Hash *hash, const void *old_key, const void *new_key)</span> changes the key associated with a data without freeing and creating a new entry. You just have to pass the hash, the old key and the new one. If the operation succeeds the function will return EINA_TRUE, if it&#39;s not it returns EINA_TRUE.</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;);
+</pre>
+
+<p>If you need to know the number of entries in a hash you can use <span style="font-family: Courier New,Courier,monospace">eina_hash_population(const Eina_Hash *hash)</span> simply passing the Hash as only argument.</p>
+<pre class="prettyprint">
+unsigned int nb_elm;
+nb_elm = eina_hash_population(phone_book);
+</pre>
+
+<h4>Iterating over Eina Hash Tables</h4>
+<p>Like the other &quot;container&quot; data type of Eina library, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides Iterators. These iterators can be used for calling functions like <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach(const Eina_Hash *hash, Eina_Hash_Foreach func, const void *fdata)</span>.</p>
+<p>The first parameter is the hash, the second is the function called on each iteration and the last one is the data passed to the &#39;callback&#39; function passed as second argument.</p>
+<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, EINA_TRUE if the iteration has to continue and EINA_FALSE if the iteration has to stop.</p>
+<pre class="prettyprint">// This callback function prints the key and the data of an hash entry 
+// here the name and the phone number.
+static Eina_Bool
+pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;const char *name = key;
+&nbsp;&nbsp;&nbsp;const char *number = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+
+&nbsp;&nbsp;&nbsp;// Return EINA_FALSE to stop this callback from being called
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+printf(&quot;List of phones:\n&quot;);
+
+// Running the callback on the hash called phone_book 
+eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
+printf(&quot;\n&quot;);
+</pre>
+
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new(const Eina_Hash *hash)</span> just to iterate over the keys. To iterate over the hash data, we can use <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new (const Eina_Hash *hash)</span> the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new</span>.</p>
+<pre class="prettyprint">// Declaration of the Eina_Iterator
+Eina_Iterator *it;
+
+// Variable to handle current iteration &quot;data&quot;
+void *data;
+
+// Iterate over the keys (names)
+printf(&quot;List of names in the phone book:\n&quot;);
+
+it = eina_hash_iterator_key_new(phone_book);
+
+// Using the generic eina_iterator_next()
+while (eina_iterator_next(it, &amp;data))
+{
+&nbsp;&nbsp;&nbsp;const char *name = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, name);
+}
+
+// You need to free the Iterator
+eina_iterator_free(it);
+
+// Iterating over hash data 
+printf(&quot;List of numbers in the phone book:\n&quot;);
+
+it = eina_hash_iterator_data_new(phone_book);
+while (eina_iterator_next(it, &amp;data))
+{
+&nbsp;&nbsp;&nbsp;const char *number = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, number);
+}
+
+// You need to free the Iterator
+eina_iterator_free(it);
+</pre>
+<p>Using this method you can also iterate over a tuple composed of keys and data like <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach</span> using <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new(const Eina_Hash *hash)</span></p>
+<pre class="prettyprint">// Declaration of the Eina_Iterator
+Eina_Iterator *tit;
+
+// Variable to handle current iteration &quot;data&quot;
+void *tuple;
+
+printf(&quot;List of phones:\n&quot;);
+tit = eina_hash_iterator_tuple_new(phone_book);
+while (eina_iterator_next(tit, &amp;tuple))
+{
+&nbsp;&nbsp;&nbsp;Eina_Hash_Tuple *t = tuple;
+&nbsp;&nbsp;&nbsp;const char *name = t-&gt;key;
+&nbsp;&nbsp;&nbsp;const char *number = t-&gt;data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+}
+
+eina_iterator_free(tit); // Always free the iterator after its use
+</pre>
+
+<h3 id="list" name="list">Lists</h3>
+
+<p>The Eina list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) is a double linked list. It can store data of any type as void pointers.</p>
+<p>It provides a set of functions to create and manipulate a list to avoid the access to the struct&#39;s fields like in self made double link list.</p>
+<p>In addition of keeping references to the references to the previous and the next node and it&#39;s data, the Eina_List nodes keeps a reference to an accounting structure.</p>
+<p>This accounting structure is used to improve the performance of some functions. This structure is private and should not be modified.</p>
+<p>In Eina_List everything is a &quot;list&quot;, the list itself is a list where each &quot;node&quot; is a list as well.</p>
+<h4>Creating and Destroying an Eina_List</h4>
+<p>To use an Eina_List you just have to declare it with <span style="font-family: Courier New,Courier,monospace">NULL</span> as default value and * call <span style="font-family: Courier New,Courier,monospace">eina_list_append(Eina_List * list, const void * data)</span>. Pass the list and the data you want to append. This list must be a pointer to the first element of the list (or NULL). It returns a pointer to the list.</p>
+<pre class="prettyprint">int list()
+{
+&nbsp;&nbsp;&nbsp;// Declaration of the Eina_List with NULL as default value;
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+
+&nbsp;&nbsp;&nbsp;// Creating the first element of the list 
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;watch&quot;);
+
+&nbsp;&nbsp;&nbsp;// Adding more elements
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;phone&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;ivi&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;notebook&quot;);
+
+&nbsp;&nbsp;&nbsp;// Free the Eina_List
+&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h4>Adding Elements to a List</h4>
+<p><span style="font-family: Courier New,Courier,monospace">eina_list_append</span> as the name says, appends data to the list. You may want to put some data at the top of the list. To do this, you can use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend(Eina_List *list, const void *data)</span> it works in the same way as <span style="font-family: Courier New,Courier,monospace">eina_list_append</span> but puts the new element on top of the list</p>
+<pre class="prettyprint">list = eina_list_prepend(list, &quot;set-top box&quot;);</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">eina_list_append_relative(Eina_List *list, const void *data, const void *relative)</span> inserts the given data into the given linked list after the specified data. In order to append data after the &quot;phone&quot; element of the example, we pass this data as the last parameter of <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative</span> like this:</p>
+<pre class="prettyprint">list = eina_list_append_relative(list, &quot;single-board computer&quot;, &quot;phone&quot;);</pre>
+
+<p>In order to put a new entry after the &quot;ivi&quot; entry, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative(Eina_List *list, const void *data, const void *relative)</span> like you used <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative</span></p>
+<pre class="prettyprint">list = eina_list_append_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);</pre>
+
+<p>Eina_List * eina_list_append_relative_list (Eina_List *list, const void *data, Eina_List *relative) Appends a list node to a linked list after the specified member. More...</p>
+<p>Eina_List * eina_list_prepend_relative_list (Eina_List *list, const void *data, Eina_List *relative) Prepends a list node to a linked list before the specified member. More...</p>
+
+<h4>Removing Elements from a List</h4>
+<p>To remove a node of the list you can use <span style="font-family: Courier New,Courier,monospace">eina_list_remove(Eina_List *list, const void *data)</span>, this function removes the first instance of the specified data from the given list.</p>
+<pre class="prettyprint">list = eina_list_remove(list, &quot;ultrabook&quot;);</pre>
+
+<p>You can also remove a &quot;list&quot; (understand a node) from a list using <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list (Eina_List *list, Eina_List *remove_list)</span>. Pass the list you want to delete an element from and a &#39;list&#39; (understand a 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; we want to remove 
+to_remove = eina_list_data_find_list(list, eina_string_share_add(&quot;enlightenment&quot;));
+
+list = eina_list_remove_list(list, to_remove);
+</pre>
+
+<h4>Moving Elements in a List</h4>
+<p>Eina_List implements some functions to move elements in a list. For example you can promote an element to the top of the list with <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list (Eina_List *list, Eina_List *move_list)</span>. Remember that everything is a list so the &#39;move_list&#39; parameter represents the &quot;list&quot; (understand node) you want to move, use it just like <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list</span>.</p>
+<pre class="prettyprint">list = eina_list_promote_list(list, eina_list_data_find_list(list, &quot;ivi&quot;));
+</pre><p><span style="font-family: Courier New,Courier,monospace">eina_list_demote_list(Eina_List *list, Eina_List *move_list)</span> puts the &quot;element&quot; at the end of the list, use it like <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list</span>.</p>
+
+<h4>Finding Elements in a List</h4>
+<p>You will probably need to find some data on your list, <span style="font-family: Courier New,Courier,monospace">eina_list_data_find(const Eina_List *list, const void *data)</span> can help you. Pass the list containing your data as first argument and the data you are looking for as last one. It returns the found member data pointer if found, NULL otherwise.</p>
+<p><span style="font-family: Courier New,Courier,monospace">eina_list_data_find</span> searches in list from beginning to end for the first member for which data pointer is data. If it is found, data will be returned, otherwise NULL will be returned. The function just compares pointers, that&#39;s why using Eina_Stringshare is very useful with lists, because it always returns the same pointer for the same string.</p>
+<pre class="prettyprint">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;));
+
+// Finding the data we need
+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;printf(&quot;Data is present&quot;);
+else
+  printf(&quot;Data not present&quot;);
+</pre>
+
+<p>This example will return &quot;Data is present&quot;.</p>
+<p><span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list(const Eina_List *list, const void *data)</span> does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find</span> but returns a &quot;Eina_List&quot;. You can see an example of this in the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list</span> paragraph.</p>
+<p>You can access the data or a &quot;list&quot; (understand a node) of a Eina_List, using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth(const Eina_List *list, unsigned int n)</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list (const Eina_List *list, unsigned int n)</span>. The first one will return a pointer to the data of the &quot;n&quot; element and the second a pointer to the &quot;list&quot;. So if you want to access to the data of the 3rd element of a Eina_List proceed like this:</p>
+<pre class="prettyprint">const char *res;
+Eina_List *res_lst;
+
+res = eina_list_nth(app_list, 2);
+res_lst = eina_list_nth_list(app_list, 2);
+</pre>
+
+<p>The variable <span style="font-family: Courier New,Courier,monospace">res</span> will contain the pointer to the string &quot;calaos&quot;. <span style="font-family: Courier New,Courier,monospace">res_lst</span> the list containing &quot;calaos&quot;</p>
+<h4>Copying a List</h4>
+<p>You can clone a list with <span style="font-family: Courier New,Courier,monospace">eina_list_clone (const Eina_List *list)</span>, this function copies all the elements in the list in the exact same order.</p>
+<pre class="prettyprint">Eina_List *app_list_copy;
+
+app_list_copy = eina_list_clone(app_list);
+</pre>
+
+<h4>Reversing a List</h4>
+<p>To reverse all the elements of a <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use <span style="font-family: Courier New,Courier,monospace">eina_list_reverse(Eina_List *list)</span>. To obtain a reversed copy of the list keeping the initial list unchanged use <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone(const Eina_List *list)</span></p>
+<pre class="prettyprint">Eina_List *rev_copy;
+
+app_list = eina_list_reverse(app_list);
+rev_copy = eina_list_reverse_clone(app_list);
+</pre>
+
+<h4>Searching and Sorting Lists</h4>
+<p>You will probably need to search for data in a list, especially in large lists. <span style="font-family: Courier New,Courier,monospace">Eina_List</span> API provides functions to run powerful searches.</p>
+<p>If your list is unsorted and you need to get the data you can use <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted(const Eina_List *list, Eina_Compare_Cb func, const void *data)</span>. This function performs a lookup in unsorted lists, it takes the list as first parameter, a callback function for comparison as second parameter and the data you are looking for. <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list(const Eina_List *list, Eina_Compare_Cb func, const void *data)</span> does the same but returns a &quot;Eina_List&quot;.</p>
+<pre class="prettyprint">int search_list()
+{
+&nbsp;&nbsp;&nbsp;// Declaring the List
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL; 
+&nbsp;&nbsp;&nbsp;Eina_List *l;
+&nbsp;&nbsp;&nbsp;// Little trick to use strcmp as Eina_Compare_Cb 
+&nbsp;&nbsp;&nbsp;Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
+
+&nbsp;&nbsp;&nbsp;void *data;
+&nbsp;&nbsp;&nbsp;int cmp_result;
+
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;debian&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;centos&quot;);
+
+&nbsp;&nbsp;&nbsp;data = eina_list_search_unsorted(list, cmp_func, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;l = eina_list_search_unsorted_list(list, cmp_func, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;if (l-&gt;data != data)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>Here we perform two searches: one with <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted</span> and another with <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list</span> and we compare the result of the two searches.</p>
+<p>You can search in sorted lists with <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list (const Eina_List *list, Eina_Compare_Cb func, const void *data)</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted (const Eina_List *list, Eina_Compare_Cb func, const void *data)</span>, these functions work just like <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted</span> but sorted list.</p>
+<p>You can sort a list using <span style="font-family: Courier New,Courier,monospace">eina_list_sort(Eina_List * list, unsigned int limit, Eina_Compare_Cb func)</span>. This function takes a list which needs to be sorted, &quot;limit&quot; is the maximum number of elements to be sorted, you can set this limit to 0 to sort all the list elements. The last parameter is the callback function that compares data.</p>
+<pre class="prettyprint">int sort_cb(const void *d1, const void *d2)
+{
+&nbsp;&nbsp;&nbsp;const char *txt = d1;
+&nbsp;&nbsp;&nbsp;const char *txt2 = d2;
+&nbsp;&nbsp;&nbsp;if(!txt) return(1);
+&nbsp;&nbsp;&nbsp;if(!txt2) return(-1);
+
+&nbsp;&nbsp;&nbsp;return(strcmp(txt, txt2));
+}
+
+extern Eina_List *list;
+list = eina_list_sort(list, 0, sort_cb);
+</pre>
+
+<h4>Merging and Splitting Lists</h4>
+<p>Another interesting thing to do with lists is merging, <span style="font-family: Courier New,Courier,monospace">eina_list_merge(Eina_List *left, Eina_List *right)</span> simply merges two lists into a new one. <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge(Eina_List *left, Eina_List *right, Eina_Compare_Cb func)</span> merges two sorted lists according to the ordering func that you pass as last argument, will return.</p>
+<pre class="prettyprint">int sort_cb(void *d1, void *d2)
+{
+&nbsp;&nbsp;&nbsp;const char *txt = NULL;
+&nbsp;&nbsp;&nbsp;const char *txt2 = NULL;
+&nbsp;&nbsp;&nbsp;if(!d1) return(1);
+&nbsp;&nbsp;&nbsp;if(!d2) return(-1);
+
+&nbsp;&nbsp;&nbsp;return(strcmp((const char*)d1, (const char*)d2));
+}
+
+Eina_List *sorted1;
+Eina_List *sorted2;
+Eina_List *newlist;
+
+/* 
+ * put some values and sort your lists
+ */
+
+// Simply merge two lists without any process
+newlist = eina_list_merge(sorted1, sorted2);
+
+newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
+</pre>
+
+<p>As you can merge, you can also split lists. <span style="font-family: Courier New,Courier,monospace">eina_list_split_list(Eina_List *list, Eina_List *relative, Eina_List **right)</span> will split a list into two lists.</p>
+<p>The first argument is the list to split, the second is the &quot;list&quot; (element) that will be split after and the last is the head of the second list.</p>
+<pre class="prettyprint">// The origin list (left list)
+Eina_List *list = NULL;
+
+// The new list (right list)
+Eina_List *other_list = NULL;
+
+// An 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;);
+
+// 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;);
+
+// Splitting the list
+list = eina_list_split_list(list, l, &amp;other_list);
+</pre>
+
+<h4>Getting and Setting Data from a List Element</h4>
+<p><span style="font-family: Courier New,Courier,monospace">eina_list_data_get(const Eina_List *list)</span> will return the data contained in the given list.</p>
+<pre class="prettyprint">int list_data_set()
+{
+&nbsp;&nbsp;&nbsp;// Declaring the list
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+&nbsp;&nbsp;&nbsp;// An Eina_List to place the Elements or lists
+&nbsp;&nbsp;&nbsp;Eina_List *l;
+
+&nbsp;&nbsp;&nbsp;void *list_data;
+
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Bertrand&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Cedric&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Nicolas&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Vincent&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Raoul&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Fabien&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Philippe&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;billiob&quot;));
+
+&nbsp;&nbsp;&nbsp;for(l = list; l; l = eina_list_next(l))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Printing the data returned by eina_list_data_get
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(list, list_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_stringshare_del(list_data);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>In this example we also use <span style="font-family: Courier New,Courier,monospace">eina_list_next (const Eina_List *list)</span> to move through the list in a for statement. This function moves to the next element of the linked list.</p>
+<p>To set data in a list member you can use <span style="font-family: Courier New,Courier,monospace">eina_list_data_set(Eina_List *list, const void *data)</span> Pass the &quot;list&quot; (understand node) as first argument and the data to set as second.</p>
+<pre class="prettyprint">// Setting a new data for the last element.
+eina_list_data_set(eina_list_last(list), eina_stringshare_add(&quot;Boris&quot;));
+</pre><p>In this example you can also see the usage of <span style="font-family: Courier New,Courier,monospace">eina_list_last(const Eina_List *list)</span> which returns the last element of a <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
+
+<h4>Moving in a List</h4>
+<p>The usage of <span style="font-family: Courier New,Courier,monospace">eina_list_last (const Eina_List *list)</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_next (const Eina_List *list)</span> are explained before. The other interesting function that allows movement in the list is <span style="font-family: Courier New,Courier,monospace">eina_list_prev(const Eina_List *list)</span>: it gets the previous list node before the specified list node.</p>
+<pre class="prettyprint">for(l = eina_list_last(list); l; l = eina_list_prev(l))
+   printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+</pre>
+<p>In this example, we scroll backwards starting from the end of the list.</p>
+
+<h4>Counting List Elements</h4>
+<p><span style="font-family: Courier New,Courier,monospace">eina_list_count(const Eina_List *list)</span> returns the number of items in a list.</p>
+<pre class="prettyprint">printf(&quot;List size: %d\n&quot;, eina_list_count(list));
+</pre>
+
+<h4>Iterators</h4>
+<p>Like the others Eina data types, <span style="font-family: Courier New,Courier,monospace">Eina_List</span> has iterators:</p>
+<ul>
+<li>EINA_LIST_FOREACH(list, l, data)</li>
+<li>EINA_LIST_REVERSE_FOREACH(list, l, data)</li>
+<li>EINA_LIST_FOREACH_SAFE(list, l, l_next, data)</li>
+<li>EINA_LIST_FREEE(list, data)</li>
+</ul>
+<p>This iterators gives you the possibility of walking through the list from the begin or from the end.</p>
+<p>For example, in order to print the data of each &quot;List&quot; (understand node) of the list you can use <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span>. It takes the list to iterate, a <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current &quot;List&quot; (understand node) and a data parameter to receive the current data during the run.</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;);
+
+EINA_LIST_FOREACH(list, l, list_data)
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)list_data);
+
+eina_list_free(list);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro works like EINA_LIST_FOREACH, but iterates from the last element of a list to the first. The parameters are also the same.</p>
+<p><span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro iterates over list from the first element to the last. It is called safe because it stores the next &quot;List&quot; (understand node) so you can safely remove the current &quot;List&quot; (node) and continue the iteration.</p>
+<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;);
+
+// Using EINA_LIST_FOREACH_SAFE to free elements that match &quot;tizen&quot;.
+
+EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
+&nbsp;&nbsp;&nbsp;if (strcmp(data, &quot;tizen&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_remove_list(list, l);
+&nbsp;&nbsp;&nbsp;}
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro removes each list element while having access to node&#39;s data. Just pass the list and a pointer to hold the current data.</p>
+<pre class="prettyprint">Eina_List *list;
+char *data;
+
+// The list is filled
+
+EINA_LIST_FOREE(list, data)
+&nbsp;&nbsp;&nbsp;free(data);
+</pre>
+
+<h3 id="inlist" name="inlist">Inline Lists</h3>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> are a special datatype drawn to store nodes pointers in the same memory as data.</p>
+<p>This way the memory is less fragmented but operations like &#39;sort&#39; or &#39;count&#39; are slower.</p>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with <span style="font-family: Courier New,Courier,monospace">eina_list_append</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend</span>.</p>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> have their own purposes, but if you don&#39;t understand what those purposes are, just use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
+<h4>Creating and Adding Items to an Inline List</h4>
+<p>Like we said before <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes pointers are part of the node&#39;s &quot;data&quot;. So before creating a list, we need to define the structure of our data.</p>
+<pre class="prettyprint">struct my_struct 
+{
+&nbsp;&nbsp;&nbsp;EINA_INLIST;
+&nbsp;&nbsp;&nbsp;int a, b;
+};
+</pre>
+
+<p>Our structure is composed by the EINA_INLIST &quot;type&quot; which is composed by 3 pointers defining the Inline list structure:</p>
+<ul>
+<li>Eina_Inlist * next // The next node</li>
+<li>Eina_Inlist * prev // The previous node</li>
+<li>Eina_Inlist * last // The last node</li>
+</ul>
+<p>and two integers, the real &quot;data&quot;.</p>
+<p>To create the Inlist nodes, you need to allocate the memory and use <span style="font-family: Courier New,Courier,monospace">eina_inlist_append</span>.</p>
+<pre class="prettyprint">struct my_struct *d, *cur;
+Eina_Inlist *list, *itr, *tmp;
+
+d = malloc(sizeof(*d));
+d-&gt;a = 1;
+d-&gt;b = 10;
+
+list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
+</pre>
+
+<p>The first parameter is the existing list head or NULL to create a new list. in the example we pass <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list. The second parameter is the new list node, must not be NULL. You have to use <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET</span> macro to get the inlist object of the &quot;data&quot; struct.</p>
+<p>You have to repeat this operation for every single new node.</p>
+<pre class="prettyprint">d = malloc(sizeof(*d));
+d-&gt;a = 2;
+d-&gt;b = 20;
+list = eina_inlist_append(list, EINA_INLIST_GET(d));
+</pre>
+
+<p>You also can put data at the end of the inline list using <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend</span>.</p>
+<pre class="prettyprint">d = malloc(sizeof(*d));
+d-&gt;a = 3;
+d-&gt;b = 30;
+list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
+</pre>
+
+<p>You also can add a node before or after a given node using <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative</span>.</p>
+<pre class="prettyprint">d = malloc(sizeof(*d));
+d-&gt;a = 4;
+d-&gt;b = 40;
+list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
+</pre>
+
+<p>The first parameter is the target list, the second is the element you want to add, and the last is the &quot;reference&quot; element to place data after (in this case). Such as in regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a List, so this last parameter is a <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
+
+<h4>Destroying an Inline List</h4>
+<p>To destroy a list you need to loop over the list, to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data if your data use allocated memory and use <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove</span> on each node.</p>
+<pre class="prettyprint">while (list)
+{
+&nbsp;&nbsp;&nbsp;struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
+
+&nbsp;&nbsp;&nbsp;// Remove the current list element 
+&nbsp;&nbsp;&nbsp;list = eina_inlist_remove(list, list);
+&nbsp;&nbsp;&nbsp;free(aux);
+}
+</pre>
+<p>The EINA_INLIST_CONTAINER_GET macro returns the container object of an inlist. In our case it returns the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> of <span style="font-family: Courier New,Courier,monospace">my_struc</span>. Then we will remove the list element and free the allocated memory of our container &quot;object&quot;.</p>
+<p>You&#39;ve probably realized that this is not really easy to use so if you don&#39;t really need this, just use regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
+<p>For sorting, iterating, finding, moving and other operations you can refer to the EFL technical documentation.</p>
+
+<h3 id="generic" name="generic">Generic Value</h3>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> provides is a generic data storage and access. It comes with pre-defined types for numbers, array, list, hash, blob and structs.</p>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> is able to convert between data types, including string. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types.</p>
+<p>In brief you can store what you want in one single type <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>.</p>
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
+<ul>
+<li>EINA_VALUE_TYPE_UCHAR manages unsigned char type,</li>
+<li>EINA_VALUE_TYPE_USHORT manages unsigned short type,</li>
+<li>EINA_VALUE_TYPE_UINT manages unsigned int type,</li>
+<li>EINA_VALUE_TYPE_ULONG manages unsigned long type,</li>
+<li>EINA_VALUE_TYPE_TIMESTAMP manages unsigned long type used for timestamps,</li>
+<li>EINA_VALUE_TYPE_UINT64 manages unsigned integer of 64 bits type,</li>
+<li>EINA_VALUE_TYPE_CHAR manages char type,</li>
+<li>EINA_VALUE_TYPE_SHORT manages short type,</li>
+<li>EINA_VALUE_TYPE_INT manages int type,</li>
+<li>EINA_VALUE_TYPE_LONG manages long type,</li>
+<li>EINA_VALUE_TYPE_INT64 manages integer of 64 bits type,</li>
+<li>EINA_VALUE_TYPE_FLOAT manages float type,</li>
+<li>EINA_VALUE_TYPE_DOUBLE manages double type,</li>
+<li>EINA_VALUE_TYPE_STRINGSHARE manages stringshared string type,</li>
+<li>EINA_VALUE_TYPE_STRING manages string type,</li>
+<li>EINA_VALUE_TYPE_ARRAY manages array type,</li>
+<li>EINA_VALUE_TYPE_LIST manages list type,</li>
+<li>EINA_VALUE_TYPE_HASH manages hash type,</li>
+<li>EINA_VALUE_TYPE_TIMEVAL manages &#39;struct timeval&#39; type,</li>
+<li>EINA_VALUE_TYPE_BLOB manages blob of bytes type,</li>
+<li>EINA_VALUE_TYPE_STRUCT manages struct type.</li>
+</ul>
+
+<p>To use <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> you need to do some variable declarations.</p>
+<pre class="prettyprint">// The Eina_Value itself
+Eina_Value v;
+// An integer 
+int i;
+// And a char *
+char *newstr;
+</pre>
+
+<p>Now we can start using <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and setup a <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer (if you prefer &quot;create&quot; the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>). Use <span style="font-family: Courier New,Courier,monospace">eina_value_setup(Eina_Value * value, const Eina_Value_Type *value type)</span>. First argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and second is the type.</p>
+<pre class="prettyprint">eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> is created and can receive a &quot;value&quot;, here we set it up for an Integer, so we set an integer using <span style="font-family: Courier New,Courier,monospace">eina_value_set(eina_value_set(Eina_Value *value, ...)</span></p>
+<pre class="prettyprint">eina_value_set(&amp;v, 123);
+</pre>
+
+<p>We can get the value using <span style="font-family: Courier New,Courier,monospace">eina_value_get(const Eina_Value *v, ...)</span>: we pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as first argument, and a pointer to a variable to &quot;store&quot; the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).</p>
+<pre class="prettyprint">eina_value_get(&amp;v, &amp;i);
+printf(&quot;v=%d\n&quot;, i);
+</pre>
+
+<p>This will print &quot;v=123&quot;.</p>
+<p>Here comes the interesting part with <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>, in the above snippet of code we printed an int value. We can however print the value as string. We can use <span style="font-family: Courier New,Courier,monospace">eina_value_to_string(const Eina_Value *v()</span> to convert an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to string.</p>
+<pre class="prettyprint">newstr = eina_value_to_string(&amp;v);
+printf(&quot;v as string: %s\n&quot;, newstr);
+
+free(newstr);
+</pre>
+
+<p>Don&#39;t forget to free the memory allocated by eina_value_to_string</p>
+<p>When you are done with the Generic Value, don&#39;t forget to destroy it using <span style="font-family: Courier New,Courier,monospace">eina_value_flush(cont Eina_Value *v)</span></p>
+<pre class="prettyprint">eina_value_flush(&amp;v);
+</pre>
+
+<p>Of course we can setup a string, store it, and use it with <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>.</p>
+<p>We now reuse v to store a string, get its value and print it:</p>
+<pre class="prettyprint">const char *s;
+
+eina_value_setup(&amp;v, EINA_VALUE_TYPE_STRING);
+eina_value_set(&amp;v, &quot;My string&quot;);
+eina_value_get(&amp;v, &amp;s);
+
+printf(&quot;v=%s (pointer: %p)\n&quot;, s, s);
+</pre>
+
+<p>we also can use <span style="font-family: Courier New,Courier,monospace">eina_value_to_string</span> with an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> setup for strings.</p>
+<pre class="prettyprint">char *newstr; 
+
+newstr = eina_value_to_string(&amp;v);
+printf(&quot;v as string: %s (pointer: %p)\n&quot;, newstr, newstr);
+
+// Free the memory allocated by eina_value_to_string.
+free(newstr);
+
+eina_value_flush(&amp;v); 
+</pre>
+
+<p>Another way to convert from one <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to another is <span style="font-family: Courier New,Courier,monospace">eina_value_convert(Eina_Value *ori, Eina_Value *target)</span>. This function put the converted value into another Eina_Value. This function excepts pointers so you have to pass a Eina_Value pointer.</p>
+<pre class="prettyprint">Eina_Value v;
+Eina_Value otherv;
+
+// Set up 2 Eina_Values: 1 int and 1 string
+eina_value_setup(&amp;otherv, EINA_VALUE_TYPE_STRING);
+eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
+
+// Convert from int to string
+eina_value_set(&amp;v, 123);
+eina_value_convert(&amp;v, &amp;otherv);
+eina_value_get(&amp;otherv, &amp;s);
+printf(&quot;otherv=%s\n&quot;, s);
+
+// Another way to do the same 
+eina_value_set(&amp;otherv, &quot;33&quot;);
+eina_value_convert(&amp;otherv, &amp;v);
+eina_value_get(&amp;v, &amp;i);
+printf(&quot;v=%d\n&quot;, i);
+
+// Clean your values
+eina_value_flush(&amp;otherv);
+eina_value_flush(&amp;v);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can be used to store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, which corresponds to the type <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>.</p>
+<p>To Create a <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, you can use <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup(Eina_Value * value, const Eina_Value_Type_Type * subtype)</span> This function initializes a generic value storage of type list. The first parameter is value &quot;object&quot;, the second is type (how to manage the stored list members).</p>
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ecore_n.htm b/org.tizen.guides/html/native/ui/ecore_n.htm
new file mode 100644 (file)
index 0000000..f680fb0
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/ecore_n.htm
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Ecore</h1>
+ <p>The Ecore library provides convenience functions, which allow you to manage the application main loop and threading.</p>
+  
+<p>The main features of Ecore are:</p>
+<ul>
+<li><a href="main_loop_n.htm">Main Loop</a> <p>Enables you to manage the main loop and get data.</p></li>
+<li><a href="threads_n.htm">Thread Usage</a> <p>Enables you to use threads with the Ecore main loop.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/edc_part_block_n.htm b/org.tizen.guides/html/native/ui/edc_part_block_n.htm
new file mode 100644 (file)
index 0000000..e5087f9
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/edc_part_block_n.htm
@@ -0,0 +1,2067 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Parts and Blocks</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#edje_block">Edje Blocks</a></li>
+                               <li><a href="#group_block">Group Block</a></li>
+                               <li><a href="#part_block">Part Block</a></li>
+                               <li><a href="#program1">Program</a></li>
+                               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>           
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje Parts and Blocks</h1> 
+  
+
+  
+  <h2 id="edje_block" name="edje_block">Edje Blocks</h2>
+
+<p>A typical Edje file starts with the following definitions:</p>
+
+<pre class="prettyprint">
+<a href="#Images">images</a> {}
+<a href="#Fonts">fonts</a> {}
+<a href="#Color_classes">color_classes</a> {}
+<a href="#Styles">styles</a> {}
+<a href="#Collections">collections</a> 
+{
+&nbsp;&nbsp;&nbsp;<a href="#Sounds">sounds</a> 
+&nbsp;&nbsp;&nbsp;{
+&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; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sample">sample</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Name">name</a>: &quot;sound1&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;<a href="#group_block">group</a> {}
+&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
+}
+</pre>
+
+<p>To get more details above each sub-block, click on the links inside the collections block above.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This guide is based on original work from Andres Blanc (dresb) <a href="mailto:andresblanc@gmail.com">andresblanc@gmail.com</a>, it has been heavily expanded and edited since then.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3 id="Images" name="Images">Images Block</h3>
+
+<pre class="prettyprint">
+images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;filename1.ext&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;filename2.ext&quot; LOSSY 99;
+&nbsp;&nbsp;&nbsp;set {}
+&nbsp;&nbsp;&nbsp;set {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">images</span> block is used to list each image file which are used in the theme. If any compression method is used, it is also defined here. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">images</span> blocks can be included inside other blocks, usually <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
+<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s &quot;<span style="font-family: Courier New,Courier,monospace;">-id</span>&quot; option. Available compression methods are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
+<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
+</ul>
+</li>
+</ul>
+
+<h4>Images.set Block</h4>
+
+<pre class="prettyprint">
+set 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;image_name_used&quot;;
+&nbsp;&nbsp;&nbsp;image {}
+&nbsp;&nbsp;&nbsp;image {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on their size. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span> and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
+<p>Defines the name that refer to this image description.</p>
+</li>
+</ul>
+
+<h4>Images.set.image Block</h4>
+
+<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;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block inside a <span style="font-family: Courier New,Courier,monospace;">set</span> block defines the characteristic of an image. Every block describes one image and the size rule to use it.</p>
+
+<p>For full documentation, see <a href="#description_image">Image</a>.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
+<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-id</span> option. Available compression methods are:</p>
+       <ul>
+               <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+               <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+               <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
+               <li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
+       </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">size [minw] [minh] [maxw] [maxh]</span>
+<p>Defines the minimum and maximum size that selects the specified image.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
+<p>If set, the area (in pixels) of each side of the image is displayed as a fixed size border, from the side to inwards, preventing the corners from being changed on a resize.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
+<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always the exact 3 columns of output, or at scale 2.0 they will be 6 columns, or 0.33 they will merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make much higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Valid values are: 0.0 or bigger (0.0 or 1.0 to turn it off).</p>
+</li>
+</ul>
+
+<h3 id="Fonts" name="Fonts">Fonts Block</h3>
+
+<pre class="prettyprint">
+fonts 
+{
+&nbsp;&nbsp;&nbsp;font: &quot;filename1.ext&quot; &quot;fontname&quot;;
+&nbsp;&nbsp;&nbsp;font: &quot;filename2.ext&quot; &quot;otherfontname&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">fonts</span> block is used to list each font file with an alias used later in the theme. As with the <span style="font-family: Courier New,Courier,monospace;">images</span> block, additional <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks can be included inside other blocks.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">font [font filename] [font alias]</span>
+<p>Defines each <span style="font-family: Courier New,Courier,monospace;">font file</span> and <span style="font-family: Courier New,Courier,monospace;">alias</span>, the full path to the directory containing the font files can be defined with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-fd</span> option.
+</p></li>
+</ul>
+
+<h3 id="Data" name="Data">Data Block</h3>
+
+<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;;
+}
+</pre>
+
+<p>This block behaves in the same way as the data block inside the parts, only the use-cases are different: this is useful for data that is for the whole theme, for instance license information, version, authors, and so on.</p>
+
+<h3 id="Color_classes" name="Color_classes">Color_classes Block</h3>
+
+<pre class="prettyprint">
+color_classes 
+{
+&nbsp;&nbsp;&nbsp;color_class 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;colorclassname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">color_classes</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">color_class</span> blocks. Each <span style="font-family: Courier New,Courier,monospace;">color_class</span> allows the designer to name an arbitrary group of colors to be used in the theme, the application can use that name to alter the color values at runtime.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [color class name]</span>
+<p>Sets the name for the color class, used as reference by both the theme and the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
+<p>The main color.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
+<p>Used as outline in text and textblock parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
+<p>Used as shadow in text and textblock parts.</p>
+</li>
+</ul>
+
+<h3 id="Styles" name="Styles">Styles Block</h3>
+
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;stylename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;..default style properties..&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag: &quot;tagname&quot; &quot;..style properties..&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">style</span> blocks. A <span style="font-family: Courier New,Courier,monospace;">style</span> block is used to create style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;</span> for advanced TEXTBLOCK formatting.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [style name]</span>
+<p>The name of the style to be used as reference later in the theme.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">base [style properties string]</span>
+<p>The default style properties that is applied to the complete text. The available tags that can be used in the style property are the following:</p>
+   <ul>
+         <li>font</li>
+         <li>font_size
+        <table class="note">
+              <tbody>
+              <tr>
+                      <th class="note">Note</th>
+              </tr>
+              <tr>
+                      <td class="note">The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it on the Emulator menu.</td>
+              </tr>
+               </tbody>
+      </table>
+
+         </li>
+         <li>color</li>
+         <li>color_class</li>
+         <li>text_class</li>
+         <li>ellipsis</li>
+      <li>wrap</li>
+      <li>style</li>
+      <li>valign</li>
+      <li>align</li>
+         
+   </ul>
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">tag [tag name] [style properties string]</span>
+<p>Style to be applied only to text between style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;..&lt;/tags&gt;</span>. When creating paired tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span><span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>, a &#39;+&#39; sign must be added at the start of the style properties of the first part (<span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span>). If the second part (<span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>) is also defined, a &#39;-&#39; sign must be added to its style properties. This applies only to paired tags; single tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;tab&gt;</span>, must not have a starting &#39;+&#39;.</p>
+   <ul>
+         <li>br</li>
+         <li>tab</li>
+         <li>b</li>
+         <li>match</li>
+   </ul>
+
+</li>
+</ul>
+
+<p>The following code is the sample of a text style for the text style:</p>
+
+<pre class="prettyprint">
+style 
+{ 
+&nbsp;&nbsp;&nbsp;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;;
+}
+</pre>
+
+
+
+<h3 id="Collections" name="Collections">Collections Block</h3>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.8;
+&nbsp;&nbsp;&nbsp;sounds 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-1&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-2&quot; 440;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sample 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;sound_file1&quot; RAW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;sound_file1.wav&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&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;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">collections</span> block is used to list the groups that compose the theme. Additional <span style="font-family: Courier New,Courier,monospace;">collections</span> blocks do not prevent overriding group names.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">sounds</span> block contains a list of one or more sound sample and tone items.</p>
+
+<h4>Base Scale</h4>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">base_scale: [scale factor]</span>
+<p>Information about the scale factor in the edc file.</p>
+</li>
+</ul>
+
+<p>Object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;.</p>
+
+<p>The size of a scalable object is multiplied with the device scale value. If the scalable object with the size 10 is created in a device with the scale 1.0, the size of the object is 20 in a device with the scale 2.0, and 40 in a device with the scale 4.0.</p>
+
+<p>For more information about supporting multiple screens in one edc, see the <a href="multiple_screens_n.htm">Multiple Screen Support</a> guide.</p>
+
+
+<h3 id="Sounds" name="Sounds">Sounds Block</h3>
+
+<p id="Tone"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">tone [tone name] [frequency]</span>
+<p>A sound of the given frequency.</p>
+</li>
+</ul>
+
+
+<h4 id="Sample" name="Sample">Sounds.sample Block</h4>
+
+<p>The sample block defines the sound sample.</p>
+
+<p id="Name"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [sample name] [compression type] (quality)</span>
+<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-sd</span> option. Valid types are:</p>
+       <ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [-0.1 - 1.0]</span>: Lossy compression with quality from 0.0 to 1.0</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">AS_IS</span>: No compression or encoding, write the file information as it is</li>
+       </ul>
+</li>
+</ul>
+
+<p id="Sound_Source"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">source [file name]</span>
+<p>The sound source file name (source can be mono/stereo WAV file. Only files with 44.1 KHz sample rate are supported for now).</p>
+</li>
+</ul>
+
+
+  <h2 id="group_block" name="group_block">Group Block</h2>
+
+<pre class="prettyprint">
+<a href="#Group">group </a>
+{
+&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;&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;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Limits">limits</a> 
+&nbsp;&nbsp;&nbsp;{
+&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;&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> {}
+}
+</pre>
+
+<h3 id="Group" name="Group">Group</h3>
+
+<p>A <span style="font-family: Courier New,Courier,monospace;">group</span> block contains the list of parts and programs that compose a given Edje Object.</p>
+
+<ul>
+<li id="Group_Name"><span style="font-family: Courier New,Courier,monospace;">name [group name]</span>
+<p>The name that is used by the application to load the resulting Edje object and to identify the group to swallow in a GROUP part. If a group with the same name exists already it will be completely overridden by the new group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit_only [1 or 0]</span>
+<p>This flags the group as being used only for inheriting, which will inhibit <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> resolving of programs and parts that may not exist in this group, but are located in the group which is inheriting this group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [parent group name]</span>
+<p>Parent group name for inheritance. Group <span style="font-family: Courier New,Courier,monospace;">inherit</span> is used to inherit any predefined group and change some property which belongs to <span style="font-family: Courier New,Courier,monospace;">part</span>, <span style="font-family: Courier New,Courier,monospace;">description</span>, <span style="font-family: Courier New,Courier,monospace;">items</span> or <span style="font-family: Courier New,Courier,monospace;">program</span>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error. </p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">script_recursion [1/0]</span>
+<p>This flag (1 or 0) determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <span style="font-family: Courier New,Courier,monospace;">script{}</span> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
+
+<li id="Alias"><span style="font-family: Courier New,Courier,monospace;">alias [additional group name]</span>
+<p>Additional name to be used as an identifier. Defining multiple aliases is supported.</p>
+</li>
+
+<li id="Min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
+<p>The minimum size for the container defined by the composition of the parts. It is not enforced.</p>
+</li>
+
+<li id="Max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
+<p>The maximum size for the container defined by the totality of the parts. It is not enforced.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">broadcast_signal [on/off]</span>
+<p>Signal gets automatically broadcasted to all sub group parts. Default is &quot;true&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">orientation [AUTO/LTR/RTL]</span>
+<p>This defines GROUP orientation. It is useful if you want match interface orientation with language.</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">AUTO</span>: Follow system defaults</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">LTR</span>: Used in Left To Right Languages (Latin)</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">RTL</span>: Used in Right To Left Languages (Hebrew, Arabic interface)</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
+<p>Changes the default value of <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> for every part in this group. Default is &quot;1&quot;, to maintain compatibility.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">program_source [source name]</span>
+<p>Change the default value of source for every program in the current group which is declared after this value is set. Defaults to an unset value to maintain compatibility. The name of source can be set on every program, but if the name can be defined in the group level, it reduces the effort to indicate it in every program.</p>
+</li>
+</ul>
+
+<h4 id="Parts" name="Parts">Group.parts</h4>
+
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part {}
+&nbsp;&nbsp;&nbsp;part {}
+&nbsp;&nbsp;&nbsp;part {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">part</span>. Each part describes a visual element and has a type: <span style="font-family: Courier New,Courier,monospace;">text</span>, <span style="font-family: Courier New,Courier,monospace;">image</span>, <span style="font-family: Courier New,Courier,monospace;">table</span>, etc.</p>
+
+<p>For complete documentation, see the <a href="#part_block">Part Block</a> guide.</p>
+
+<h4 id="Script" name="Script">Group.script</h4>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This block is used to inject embryo scripts to a given Edje theme and it functions in two modalities. When it is included inside a <span style="font-family: Courier New,Courier,monospace;">program</span> block, the script is executed every time the program is run, on the other hand, when included directly into a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">part</span>, or <span style="font-family: Courier New,Courier,monospace;">description</span> block, it is executed once at the load time, in the load order.</p>
+
+<p>For more information, see the <a href="#program1">Program</a> guide.</p>
+
+<h4 id="Limits" name="Limits">Group.limits</h4>
+
+<pre class="prettyprint">
+limits 
+{
+&nbsp;&nbsp;&nbsp;vertical: &quot;limit_name&quot; height_barrier;
+&nbsp;&nbsp;&nbsp;horizontal: &quot;limit_name&quot; width_barrier;
+}
+</pre>
+
+<p>This block is used to trigger signals when the Edje object is resized.</p>
+<p id="Vertical"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">vertical [name] [height barrier]</span>
+<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the y axis and is given in pixels.</p>
+</li>
+</ul>
+
+<p id="Horizontal"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">horizontal [name] [width barrier]</span>
+<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the x axis and is given in pixels.</p>
+</li>
+</ul>
+
+<h4 id="Group_Data" name="Group_Data">Group.data</h4>
+
+<pre class="prettyprint">
+data 
+{
+&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;file: &quot;key2&quot; &quot;somefile&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block is used to pass arbitrary parameters from the theme to the application. Unlike the <span style="font-family: Courier New,Courier,monospace;">images</span> and <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks, additional <span style="font-family: Courier New,Courier,monospace;">data</span> blocks can only be included inside the <span style="font-family: Courier New,Courier,monospace;">group</span> block.</p>
+
+<ul>
+<li id="Items"><span style="font-family: Courier New,Courier,monospace;">items: &quot;key&quot; &quot;value&quot;;</span>
+<p>Defines a new parameter, the value is the string specified next to it.</p>
+</li>
+<li id="File"><span style="font-family: Courier New,Courier,monospace;">file: &quot;key&quot; &quot;file&quot;;</span>
+<p>Defines a new parameter, the value is the contents of the specified file formatted as a single string of text. This property only works with plain text files.</p>
+</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.</td>
+</tr>
+</tbody>
+</table> 
+
+<h4 id="Programs" name="Programs">Group.programs</h4>
+
+<pre class="prettyprint">
+programs 
+{
+&nbsp;&nbsp;&nbsp;program {}
+&nbsp;&nbsp;&nbsp;program {}
+&nbsp;&nbsp;&nbsp;program {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">programs</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">program</span>.</p>
+
+<p>For more information about the program structure, see the <a href="#program1">Program</a> guide. </p>
+
+  
+  <h2 id="part_block" name="part_block">Part Block</h2> 
+  
+  <pre class="prettyprint">
+<a href="#part">part</a> 
+{
+&nbsp;&nbsp;&nbsp;// inherit all the fields of another part
+&nbsp;&nbsp;&nbsp;<a href="#inherit">inherit</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// name the part
+&nbsp;&nbsp;&nbsp;<a href="#part_name">name</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 mouse events to 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_flag</a>s: NONE;
+&nbsp;&nbsp;&nbsp;// whether the part sizes scale with the edje scaling factor
+&nbsp;&nbsp;&nbsp;<a href="#scale">scale</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// whether fully-transparent pixels are taken into account for 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 parts: 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 source but goes on top of text
+&nbsp;&nbsp;&nbsp;<a href="#source2">source2</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below the mouse cursor when it hovers over the part
+&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 parts: 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 parts: 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 parts: change how the tex selection is triggered
+&nbsp;&nbsp;&nbsp;<a href="#select_mode">select_mode</a>: EXPLICIT;
+&nbsp;&nbsp;&nbsp;// for editable textblock parts: where to draw the (blinking) cursor
+&nbsp;&nbsp;&nbsp;<a href="#cursor_mode">cursor_mode</a>: UNDER;
+&nbsp;&nbsp;&nbsp;// for editable textblock parts: allow multiple lines
+&nbsp;&nbsp;&nbsp;<a href="#multiline">multiline</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// for textblock parts: accessibility features will be 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;&nbsp;&nbsp;&nbsp;&lt;part definition&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#dragable">draggable </a>
+&nbsp;&nbsp;&nbsp;{
+&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 would have moved enough to be outside of 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 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 horizontal drag of the part with steps each step_size 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 parts
+&nbsp;&nbsp;&nbsp;<a href="#box_table">box/table</a> 
+&nbsp;&nbsp;&nbsp;{
+&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;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item">item</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define 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;// name the item
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_name">name</a>: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the source for this item, i.e. its contents
+&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;// 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;// 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;// number of columns and rows the item will take
+&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;&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;// use another part as content of the current &quot;PROXY&quot; part (This description only works in the PROXY part and the current part mirrors the rendering content of the source part)
+&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;// 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 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;// 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&#39;s 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&#39;s 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;&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;// position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end)
+&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 type image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image">image</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 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;// image to use while transitioning to the normal image; use several times to create animations
+&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;// set the number of pixels that make up each border of the image, i.e. are not resized when the image is
+&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;// hide, strip from its alpha or show (default) the non-border part of the image
+&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;// whether to scale the border or not
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 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;// 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 part of the image that is 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;&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;&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 type text and textblock
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text">text</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the part&#39;s 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&#39;s 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&#39;s 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&#39;s 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;// use 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;// for textblocks in password mode, replace characters to hide with this string
+&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;// set the min and max font sizes allowed when resizing (default is 0 0, i.e. unrestricted)
+&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;// increase font size as much as possible while still remaining in the container for both axis
+&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;// make the min size of the container equal to the min size of the current text (0 0 by default)
+&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;// make the max size of the container equal to the max size of the current text (0 0 by default)
+&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;// re-use 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;// when text is too long to fit, relative position at which to cut the text and put an ellipsis (&quot;...&quot;)
+&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 type box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box">box</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how children while be 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 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;// make the box&#39; min size be the min size of its elements (i.e. make it shrinkable as much as its items)
+&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;&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 box
+&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 box
+&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;// make the table&#39;s min size be the min size of its elements (i.e. make it shrinkable as much as its items)
+&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;&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;&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;&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;&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;}
+}
+</pre>
+
+<h3 id="part" name="part">Part</h3>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;mouse_events:  1;
+&nbsp;&nbsp;&nbsp;repeat_events: 0;
+&nbsp;&nbsp;&nbsp;ignore_flags: NONE;
+&nbsp;&nbsp;&nbsp;clip_to: &quot;anotherpart&quot;;
+&nbsp;&nbsp;&nbsp;source:  &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;pointer_mode: AUTOGRAB;
+&nbsp;&nbsp;&nbsp;use_alternate_font_metrics: 0;
+
+&nbsp;&nbsp;&nbsp;dragable {}
+&nbsp;&nbsp;&nbsp;items {}
+&nbsp;&nbsp;&nbsp;description {}
+}
+</pre>
+
+<p>Parts are used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [part name]</span><a class="anchor" id="inherit"></a>
+<p>Copies all attributes except part name from referenced part into current part. All existing attributes, except part name, are overwritten.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">program_remove [program name] (program name) (program name) ...</span><a class="anchor" id="program_remove"></a>
+<p>Removes the listed programs from an inherited group. Removing non-existing programs is not allowed.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This breaks program sequences if a program in the middle of the sequence is removed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">part_remove [part name] (part name) (part name) ...</span><a class="anchor" id="part_remove"></a>
+<p>Removes the listed parts from an inherited group. Removing non-existing parts is not allowed.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">name [part name]</span><a class="anchor" id="part_name"></a>
+<p>The part&#39;s name is used as reference in the theme&#39;s relative positioning system, by programs and in some cases by the application. It must be unique within the group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">type [TYPE]</span><a class="anchor" id="type"></a>
+<p>Sets the type. This is set to IMAGE by default. Valid types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">RECT</span>: Rectangle object in the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TEXT</span>: Simple text</li>
+<li><span style="font-family: Courier New,Courier,monospace;">IMAGE</span>: Image area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>: Area where you can add the object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span>: Complex text with multiple lines, mark-up elements, and such.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span>: Part which can include other groups in the same group.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>: Container object as a container. It has a row or column.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Container object as a container. It has a row and column.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PROXY</span>: Clone of another part in the same group. It shares the memory of the source part.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">SPACER</span>: Rectangle object, but invisible. Recommended to padding because it does not allocate any memory.</li>
+
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">part [part declaration]</span><a class="anchor" id="part_part"></a>
+<p>Nested parts adds hierarchy to Edje. Nested part inherits its location relatively to the parent part. To declare a nested part create a new part within current part declaration. Define 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 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;nested_rect&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">insert_before [another part&#39;s name]</span><a class="anchor" id="insert_before"></a>
+<p>The part&#39;s name which this part is inserted before. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_before</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">insert_after [another part&#39;s name]</span><a class="anchor" id="insert_after"></a>
+<p>The part&#39;s name which this part is inserted after. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_after</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span><a class="anchor" id="mouse_events"></a>
+<p>Specifies whether the part emits signals, although it is named <span style="font-family: Courier New,Courier,monospace;">mouse_events</span>. Disabling it (0) prevents the part from emitting signal. It is set to 1 by default, or to the value set to <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> at the group level, if any.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">repeat_events [1 or 0]</span><a class="anchor" id="repeat_events"></a>
+<p>Specifies whether a part echoes a mouse event to other parts below the pointer (1), or not (0). It is set to 0 by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">ignore_flags [FLAG] ...</span><a class="anchor" id="ignore_flags"></a>
+<p>Specifies whether events with the given flags are ignored, i.e., do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Event is handled properly (default value)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ON_HOLD</span>: Event is not handled or passed in this part</li>
+
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">scale [1 or 0]</span><a class="anchor" id="scale"></a>
+<p>Specifies whether the part scales its size with an Edje scaling factor. By default scale is off (0) and the default scale factor is 1.0 which means no scaling. This is used to scale properties such as font size, min/max size of the part, and it can also be used to scale based on DPI of the target device. The reason to be selective is that some parts are scaled well, others are not, so choose what works best.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">pointer_mode [MODE]</span><a class="anchor" id="pointer_mode"></a>
+<p>Sets the mouse pointer behavior for a given part. The default value is AUTOGRAB. Available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>, 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><span style="font-family: Courier New,Courier,monospace;">NOGRAB</span>, the effect is limited to the part&#39;s container.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">precise_is_inside [1 or 0]</span><a class="anchor" id="precise_is_inside"></a>
+<p>Enables precise point collision detection for the part, which is more resource-intensive. It is disabled by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">use_alternate_font_metrics [1 or 0]</span><a class="anchor" id="use_alternate_font_metrics"></a>
+<p>Only affects text and textblock parts, when enabled Edje uses different size measurement functions. It is disabled by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">clip_to [another part&#39;s name]</span><a class="anchor" id="clip_to"></a>
+<p>Only renders the area of 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>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="source"></a>
+<p>Only available to GROUP or TEXTBLOCK parts. Swallows the specified group into the part&#39;s container if it is a GROUP. If TEXTBLOCK it is used for the group to be loaded and used for selection display UNDER the selected text. <span style="font-family: Courier New,Courier,monospace;">source2</span> is used for on top of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source2</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source2 [another group&#39;s name]</span><a class="anchor" id="source2"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for selection display OVER the selected text. <span style="font-family: Courier New,Courier,monospace;">source</span> is used for under of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source3 [another group&#39;s name]</span><a class="anchor" id="source3"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display UNDER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source4</span> is used for over the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source4 [another group&#39;s name]</span><a class="anchor" id="source4"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display OVER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source3</span> is used for under the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source5 [another group&#39;s name]</span><a class="anchor" id="source5"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchors display UNDER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source6</span> is used for over the anchors text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source6 [another group&#39;s name]</span><a class="anchor" id="source6"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchor display OVER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source5</span> is used for under the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">effect [effect] </span> (shadow direction)<a class="anchor" id="effect"></a>
+<p>Apply the selected outline, shadow, or glow effect to &quot;textblock&quot; (take care that this effect only works for the textblock). The available effects are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOFT_OUTLINE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FAR_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FAR_SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">GLOW</span></li>
+</ul>
+
+<p>The available shadow directions definitions are (default is <span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span>):</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP_LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP_RIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">RIGHT</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">entry_mode [mode]</span><a class="anchor" id="entry_mode"></a>
+<p>Sets the edit mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>:
+<p>The textblock is non-editable.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span>:
+<p>The textblock is non-editable, but selectable.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EDITABLE</span>:
+<p>The textblock is editable.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">PASSWORD</span>:
+<p>The textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In the event of password mode, not selectable and all text chars replaced with *&#39;s but editable and pastable.</p></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">select_mode [mode]</span><a class="anchor" id="select_mode"></a>
+<p>Sets the selection mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">DEFAULT</span>, selection mode is what you would expect on any desktop. Press mouse, drag and release to end.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EXPLICIT</span>, this mode requires the application controlling the Edje object has to explicitly begin and end selection modes, and the selection itself is draggable at both ends.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">cursor_mode [mode]</span><a class="anchor" id="cursor_mode"></a>
+<p>Sets the cursor mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">UNDER</span>, the cursor draws below the character pointed at. That is the default.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BEFORE</span>, the cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">multiline [1 or 0]</span><a class="anchor" id="multiline"></a>
+<p>It causes a textblock that is editable to allow multiple lines for editing.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">access [1 or 0]</span><a class="anchor" id="access"></a>
+<p>Specifies whether the part uses accessibility feature (1), or not (0). It is set to 0 by default.</p>
+</li>
+</ul>
+
+<h3 id="dragable" name="dragable">Draggable</h3>
+
+<pre class="prettyprint">
+dragable 
+{
+&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;
+}
+</pre>
+
+<p>When this block is used the part can be dragged around the interface, do not confuse with external drag and drop. By default Edje (and most applications) attempts to use the minimal size possible for a draggable part. If the min property is not set in the description the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">x [enable/disable] [step] [count]</span><a class="anchor" id="dragable_x"></a>
+<p>Used to set up dragging events for the X 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 movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as width of confine part divided by count.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">y [enable/disable] [step] [count]</span><a class="anchor" id="dragable_y"></a>
+<p>Used to set 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 movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as height of confine part divided by count.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">confine [another part&#39;s name]</span><a class="anchor" id="dragable_confine"></a>
+<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 will not show up.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">threshold [another part&#39;s name]</span><a class="anchor" id="dragable_threshold"></a>
+<p>When set, the movement of the dragged part can only start when it get moved enough to be outside of the threshold part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">events [another draggable part&#39;s name]</span><a class="anchor" id="dragable_events"></a>
+<p>Causes the part to forward the drag events to another part, thus ignoring them for itself.</p>
+</li>
+
+</ul>
+
+<h3 id="box_table" name="box_table">Box/table</h3>
+
+<h4 id="box_table_items" name="box_table_items">Items</h4>
+
+<pre class="prettyprint">
+box/table 
+{
+&nbsp;&nbsp;&nbsp;items 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&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;&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;name: &quot;some name&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*</span> API.</p>
+
+<h5 id="box_table_items_item" name="box_table_items_item">Item</h5>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">type [item type]</span><a class="anchor" id="box_table_items_item_type"></a>
+<p>Sets the type of the object this item holds. The supported type is: </p>
+       <ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">GROUP</span> (default)</li>
+       </ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">name [name for the object]</span><a class="anchor" id="box_table_items_item_name"></a>
+<p>Sets the name of the object via <span style="font-family: Courier New,Courier,monospace;">evas_object_name_set()</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="box_table_items_item_source"></a>
+<p>Sets the group this object is made of.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span><a class="anchor" id="box_table_items_item_min"></a>
+<p>Sets the minimum size hints for this object. </p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Must be -1 to get expand behavior.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">spread [width] [height]</span><a class="anchor" id="box_table_items_item_spread"></a>
+<p>Replicates the item in a rectangle of size width x height box starting from the defined position of this item. The default value is 1 1;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">prefer [width] [height]</span><a class="anchor" id="box_table_items_item_prefer"></a>
+<p>Sets the preferred size hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span><a class="anchor" id="box_table_items_item_max"></a>
+<p>Sets the maximum size hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">padding [left] [right] [top] [bottom]</span><a class="anchor" id="box_table_items_item_padding"></a>
+<p>Sets the padding hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [x] [y]</span><a class="anchor" id="box_table_items_item_align"></a>
+<p>Sets the alignment hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">weight [x] [y]</span><a class="anchor" id="box_table_items_item_weight"></a>
+<p>Sets the weight hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect [w] [h]</span><a class="anchor" id="box_table_items_item_aspect"></a>
+<p>Sets the aspect width and height hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect_mode [mode]</span><a class="anchor" id="box_table_items_item_aspect_mode"></a>
+<p>Sets the aspect control hints for this object. The available hints are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">NEITHER</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">options [extra options]</span><a class="anchor" id="box_table_items_item_options"></a>
+<p>Sets extra options for the object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">position [col] [row]</span><a class="anchor" id="box_table_items_item_position"></a>
+<p>Sets the position this item has in the table. This is required for parts of type TABLE.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">span [col] [row]</span><a class="anchor" id="box_table_items_item_span"></a>
+<p>Sets how many columns and rows this item uses. The default value is 1 1.</p>
+</li>
+
+</ul>
+
+<h3 id="description" name="description">Description</h3>
+
+<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;}
+
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Every part can have one or more description blocks. Each description is used to define style and layout properties of a part in a given &quot;state&quot;.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [another description&#39;s name] [another description&#39;s index]</span><a class="anchor" id="description_inherit"></a>
+<p>Thee description inherits all the properties from the named description. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note: inheritance in Edje is single level only.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another part&#39;s name]</span><a class="anchor" id="description_source"></a>
+<p>Causes the part to use another part&#39;s content as the content of this part. This works only with PROXY part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">state [name for the description] [index]</span><a class="anchor" id="description_state"></a>
+<p>Sets a name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like &quot;clicked&quot; or &quot;invisible&quot;. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named &quot;default 0.0&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">visible [0 or 1]</span><a class="anchor" id="description_visible"></a>
+<p>Takes a Boolean value specifying whether part is visible (1) or not (0). Non-visible parts do not emit signals. The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">limit [mode]</span><a class="anchor" id="description_limit"></a>
+<p>Emits a signal when the part size changes from zero or to a zero (<span style="font-family: Courier New,Courier,monospace;">limit,width,over</span>, <span style="font-family: Courier New,Courier,monospace;">limit,width,zero</span>). By default no signal are emitted. Valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">WIDTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HEIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [X axis] [Y axis]</span><a class="anchor" id="description_align"></a>
+<p>When the displayed object&#39;s size is smaller or bigger than its container, this property moves it relatively along both axis inside its container. &quot;0.0&quot; means left/top edges of the object touching container&#39;s respective ones, and &quot;1.0&quot; stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is &quot;0.5 0.5&quot;. For a more detailed explanation, see the <a href="edje_n.htm#align_size_hint">Align Size Hint</a>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">fixed [width, 0 or 1] [height, 0 or 1]</span><a class="anchor" id="description_fixed"></a>
+<p>Sets the minimum size calculation. See <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_calc()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_restricted_calc()</span>. This tells the min size calculation routine that this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height] or SOURCE</span><a class="anchor" id="description_min"></a>
+<p>Sets the minimum size of the state. When min is defined to SOURCE, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an IMAGE or a GROUP part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">minmul [width multiplier] [height multiplier]</span><a class="anchor" id="description_minmul"></a>
+<p>A multiplier forcibly applied to whatever minimum size is only during minimum size calculation.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height] or SOURCE</span><a class="anchor" id="description_max"></a>
+<p>The maximum size of the state. A size of -1.0 means that it is ignored in one direction. When max is set to SOURCE, Edje enforces the part to be not more than the original image size. The part must be an IMAGE part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">step [width] [height]</span><a class="anchor" id="description_step"></a>
+<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is &quot;0 0&quot; which disables stepping.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect [min] [max]</span><a class="anchor" id="description_aspect"></a>
+<p>Normally width and height can be resized to any values independently. The aspect property forces the width to height ratio to be kept between the minimum and maximum set. For example, &quot;1.0 1.0&quot; increases the width a pixel for every pixel added to height. The default value is &quot;0.0 0.0&quot; which disables aspect. For a more detailed explanation, see the <a href="edje_n.htm#min_size_hint">Min Size Hint</a> .</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect_preference [DIMENSION]</span><a class="anchor" id="description_aspect_preference"></a>
+<p>Set the dimensions to which the &quot;aspect&quot; property applies. Available options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOURCE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+</ul>
+<p>For a more detailed explanation, see <a href="edje_n.htm#min_size_hint">Min Size Hint</a>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color_class [color class name]</span><a class="anchor" id="description_color_class"></a>
+<p>The part uses the color values of the named <span style="font-family: Courier New,Courier,monospace;">color_class</span>, these values can be overridden by the &quot;color&quot;, &quot;color2&quot; and &quot;color3&quot; properties.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color"></a>
+<p>Sets the main color to the specified values (between 0 and 255).</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The textblock part is not affected by the color description. Set the color in the text style.</td>
+</tr>
+</tbody>
+</table> 
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color2"></a>
+<p>Sets the text shadow color to the specified values (0 to 255).</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color3"></a>
+<p>Sets the text outline color to the specified values (0 to 255).</p>
+</li>
+
+</ul>
+
+<h4 id="description_rel1_2" name="description_rel1_2">Rel1/rel2</h4>
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&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;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:    -1  -1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The rel1 and rel2 blocks are used to define the position of each corner of the part&#39;s container. With rel1 being the left-up corner and rel2 being the right-down corner.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_relative"></a>
+<p>Moves the corner to a relative position inside the container of the relative &quot;to&quot; part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) of each axis.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_offset"></a>
+<p>Affects the corner position a fixed number of pixels along each axis.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">to [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to"></a>
+<p>Positions the corner relatively to another part&#39;s container. Setting to &quot;&quot; resets this value for inherited parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">to_x [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_x"></a>
+<p>Positions the corner relatively to the X axis of another part&#39;s container. This affects the first parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">to_y [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_y"></a>
+<p>Positions the corner relatively to the Y axis of another part&#39;s container. This affects the second parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
+</li>
+
+</ul>
+
+<h4 id="description_image" name="description_image">Image</h4>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;{
+&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;}
+}
+</pre>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">normal [image&#39;s filename]</span><a class="anchor" id="description_image_normal"></a>
+<p>Name of image to be used as previously declared in the images block. In an animation, this is the first and last image displayed. It is required in any image part</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">tween [image&#39;s filename]</span><a class="anchor" id="description_image_tween"></a>
+<p>Name of an image to be used in an animation loop, an image 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 &quot;normal&quot; image is the final state.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span><a class="anchor" id="description_image_border"></a>
+<p>Sets the area (in pixels) of each side of the image is displayed as a fixed size border, from the side -&gt; inwards, preventing the corners from being changed on a resize.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">middle [mode]</span><a class="anchor" id="description_image_middle"></a>
+<p>If border is set, this value tells Edje if the rest of the image (not covered by the defined border) displayed or not or be assumed to be solid (without alpha). The default value is <span style="font-family: Courier New,Courier,monospace;">1/DEFAULT</span>. The available values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">1</span> or <span style="font-family: Courier New,Courier,monospace;">DEFAULT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOLID</span> (strip alpha from the image over the middle zone)</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span><a class="anchor" id="description_image_border_scale_by"></a>
+<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always exactly 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Value can be: 0.0 or bigger (0.0 or 1.0 to turn it off)</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale [0/1]</span><a class="anchor" id="description_image_border_scale"></a>
+<p>Tells Edje if the border is scaled by the object/global Edje scale factors.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">scale_hint [mode]</span><a class="anchor" id="description_image_scale_hint"></a>
+<p>Sets the evas image scale hint letting the engine more effectively save cached copies of the scaled image if it makes sense. Valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DYNAMIC</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STATIC</span></li>
+</ul>
+</li>
+
+</ul>
+
+<h5 id="description_image_fill" name="description_image_fill">Image.fill</h5>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&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;}
+}
+</pre>
+
+<p>The fill method is an optional block that defines the way an IMAGE part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. See <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> documentation for more details.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">smooth [0 or 1]</span><a class="anchor" id="description_image_fill_smooth"></a>
+<p>The smooth property takes a boolean value to decide if the image will be smoothed on scaling (1) or not (0). The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">spread</span><a class="anchor" id="description_image_fill_spread"></a>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">type [fill type]</span><a class="anchor" id="description_image_fill_type"></a>
+<p>Sets the image fill type. The part parameter &quot;min&quot; must be set, it is size of tiled image. If parameter &quot;max&quot; set tiled area has the size accordingly &quot;max&quot; values. SCALE is default type. Valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SCALE</span>, image is scaled accordingly the value of the parameters &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TILE</span>, image is tiled accordingly parameters value &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
+</ul>
+</li>
+
+</ul>
+
+<h6 id="description_image_fill_origin" name="description_image_fill_origin">Image.fill.origin</h6>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&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;}
+}
+</pre>
+
+<p>The origin 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-up corner.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_relative"></a>
+<p>Sets the starting point relatively to displayed element&#39;s content.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_offset"></a>
+<p>Affects the starting point a fixed number of pixels along each axis.</p>
+</li>
+
+</ul>
+
+<h6 id="description_image_fill_size" name="description_image_fill_size">Image.fill.size</h6>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size 
+&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;offset: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The size block defines the tile size of the content that are displayed.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">relative [width] [height]</span><a class="anchor" id="description_image_fill_size_relative"></a>
+<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, &quot;0.5 0.5&quot; represents half the size, while &quot;2.0 2.0&quot; represents the double. The default value is &quot;1.0 1.0&quot;.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_size_offset"></a>
+<p>Affects the size of the tile a fixed number of pixels along each axis.</p>
+</li>
+
+</ul>
+
+<h4 id="description_text" name="description_text">Text</h4>
+
+<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;;
+}
+</pre>
+
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">text [a string of text, or nothing]</span><a class="anchor" id="description_text_text"></a>
+<p>Sets the default content of a text part, normally the application is the one changing its value.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">text_class [text class name]</span><a class="anchor" id="description_text_text_class"></a>
+<p>Similar to <span style="font-family: Courier New,Courier,monospace;">color_class</span>, this is the name used by the application to alter the font family and size at runtime.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">font [font alias]</span><a class="anchor" id="description_text_font"></a>
+<p>This sets the font family to one of the aliases set up in the &quot;fonts&quot; block. Can be overridden by the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">style [the style name]</span><a class="anchor" id="description_text_style"></a>
+<p>Causes the part to use the default style and tags defined in the &quot;style&quot; block with the specified name.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">repch [the replacement character string]</span><a class="anchor" id="description_text_repch"></a>
+<p>If this is a textblock and is in PASSWORD mode this string is used to replace every character to hide the details of the entry. Normally * is used, but you can use anything you like.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">size [font size in points (pt)]</span><a class="anchor" id="description_text_size"></a>
+<p>Sets the default font size for the text part. Can be overridden by the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">size_range [font min size in points (pt)] [font max size in points (pt)]</span><a class="anchor" id="description_text_size_range"></a>
+<p>Sets the allowed font size for the text part. Setting min and max to 0 means that sizing is not restricted. This is also the default value.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">fit [horizontal] [vertical]</span><a class="anchor" id="description_text_fit"></a>
+<p>When any of the parameters is set to 1 Edje resizes the text for it to fit in its container. Both are disabled by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_text_min"></a>
+<p>When any of the parameters is enabled (1) it forces the minimum size of the container to be equal to the minimum size of the text. The default value is &quot;0 0&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">max [horizontal] [vertical]</span><a class="anchor" id="description_text_max"></a>
+<p>When any of the parameters is enabled (1) it forces the maximum size of the container to be equal to the maximum size of the text. The default value is &quot;0 0&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_text_align"></a>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_source"></a>
+<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><span style="font-family: Courier New,Courier,monospace;">text_source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_text_source"></a>
+<p>Causes the part to display the text content of another part and update them as they change.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">ellipsis [point of balance]</span><a class="anchor" id="description_text_ellipsis"></a>
+<p>Balances the text in a relative point from 0.0 to 1.0, this point is the last section of the string to be cut out in case of a resize that is smaller than the text itself. The default value is 0.0.</p>
+</li>
+
+</ul>
+
+
+<h4 id="description_box" name="description_box">Box</h4>
+
+<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;
+}
+</pre>
+
+<p>A box block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">layout [primary layout] (fallback layout)</span><a class="anchor" id="description_box_layout"></a>
+<p>Sets the layout for the box:</p>
+<ul>
+<li>horizontal (default)</li>
+<li>vertical</li>
+<li>horizontal_homogeneous</li>
+<li>vertical_homogeneous</li>
+<li>horizontal_max (homogeneous to the max sized child)</li>
+<li>vertical_max</li>
+<li>horizontal_flow</li>
+<li>vertical_flow</li>
+<li>stack</li>
+<li><span style="font-family: Courier New,Courier,monospace;">some_other_custom_layout_set_by_the_application</span>
+<p>Set a custom layout as a fallback. For more information, see <span style="font-family: Courier New,Courier,monospace;">edje_box_layout_register()</span>. If an unregistered layout is used, it defaults to horizontal.</p></li>
+
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_box_align"></a>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_box_padding"></a>
+<p>Sets the space between cells in pixels.  The default value is 0 0.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_box_min"></a>
+<p>When any of the parameters is enabled (1) it forces the minimum size of the box to be equal to the minimum size of the items. The default value is 0 0.</p>
+</li>
+
+</ul>
+
+<h4 id="description_table" name="description_table">Table</h4>
+
+<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;
+}
+</pre>
+
+<p>A table block can contain other objects packed in multiple columns and rows, and each item can span across more than one column and/or row.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">homogeneous [homogeneous mode]</span><a class="anchor" id="description_table_homogeneous"></a>
+<p>Sets the homogeneous mode for the table:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: default</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: available space is evenly divided between children (which overflows onto other children if too little space is available)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ITEM</span>: size of each item is the largest minimal size of all the items</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_table_align"></a>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_table_padding"></a>
+<p>Sets the space between cells in pixels. The default value is 0 0.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_table_min"></a>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is 0 0.</p>
+</li>
+
+</ul>
+
+<h4 id="description_map" name="description_map">Map</h4>
+
+<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;...
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">perspective [another part&#39;s name]</span><a class="anchor" id="description_map_perspective"></a>
+<p>This 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 center point, zplane and focal are used. This also implicitly enables perspective transforms.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">light [another part&#39;s name]</span><a class="anchor" id="description_map_light"></a>
+<p>This 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 color is used as the light color (alpha not used for light color). The color2 color is used for the ambient lighting when calculating brightness (alpha also not used).</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">on [1 or 0]</span><a class="anchor" id="description_map_on"></a>
+<p>This enables mapping for the part. Default is 0.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">smooth [1 or 0]</span><a class="anchor" id="description_map_smooth"></a>
+<p>This enables smooth map rendering. This may be linear interpolation, anisotropic filtering or anything the engine decides is smooth. This is a best-effort hint and may not produce precisely the same results in all engines and situations. The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">alpha [1 or 0]</span><a class="anchor" id="description_map_alpha"></a>
+<p>This enables alpha channel when map rendering. The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">backface_cull [1 or 0]</span><a class="anchor" id="description_map_backface_cull"></a>
+<p>This enables backface culling (when the rotated part that normally faces the camera is facing away after being rotated etc.). This means that the object are hidden when backface is culled.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on [1 or 0]</span><a class="anchor" id="description_map_perspective_on"></a>
+<p>This enables perspective when rotating even without a perspective point object. This uses perspective set for the object itself or for the canvas as a whole as the global perspective with <span style="font-family: Courier New,Courier,monospace;">edje_perspective_set()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_perspective_global_set()</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [point] [red] [green] [blue] [alpha]</span><a class="anchor" id="description_map_color"></a>
+<p>This sets the color of a vertex in the map. Colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255) which means it has no affect on modifying the part pixels. Currently only four points are supported: 0 - Left-Top point of a part. 1 - Right-Top point of a part. 2 - Left-Bottom point of a part. 3 - Right-Bottom point of a part.</p>
+</li>
+
+</ul>
+
+<h5 id="description_map_rotation" name="description_map_rotation">Map.rotation</h5>
+
+<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;
+}
+</pre>
+
+<p>Rotates the part, optionally with the center on another part.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">center [another part&#39;s name]</span><a class="anchor" id="description_map_rotation_center"></a>
+<p>This 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 parts original center itself is used for the rotation center.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">x [X degrees]</span><a class="anchor" id="description_map_rotation_x"></a>
+<p>This sets the rotation around the x axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">y [Y degrees]</span><a class="anchor" id="description_map_rotation_y"></a>
+<p>This sets the rotation around the y axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">z [Z degrees]</span><a class="anchor" id="description_map_rotation_z"></a>
+<p>This sets the rotation around the z axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+</ul>
+
+<h5 id="description_map_perspective2" name="description_map_perspective2">Perspective</h5>
+
+<pre class="prettyprint">
+perspective 
+{
+&nbsp;&nbsp;&nbsp;zplane: 0;
+&nbsp;&nbsp;&nbsp;focal: 1000;
+}
+</pre>
+
+<p>Adds focal and plane perspective to the part. Active if <span style="font-family: Courier New,Courier,monospace;">perspective_on</span> is true. Must be provided if the part is being used by other part as it is perspective target.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">zplane [unscaled Z value]</span><a class="anchor" id="description_map_perspective_zplane"></a>
+<p>This sets the z value that is not scaled. Normally this is 0 as that is the z distance.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">focal [distance]</span><a class="anchor" id="description_map_perspective_focal"></a>
+<p>This sets the distance from the focal z plane (zplane) and the camera - i.e. equating to focal length of the camera</p>
+</li>
+
+</ul>
+
+<h5 id="description_map_link" name="description_map_link">Link</h5>
+
+<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;;
+}
+</pre>
+
+<p>The link block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with </p>
+
+
+<pre class="prettyprint">
+action: STATE_SET &quot;default&quot;";
+signal: &quot;edje,signal&quot;;
+source: &quot;edje&quot;;
+</pre> 
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">base [signal] [source]</span><a class="anchor" id="description_map_link_base"></a>
+<p>Defines the signal and source which triggers the transition to this state. The source parameter is optional here and is filled with the current group&#39;s default value if it is not provided. </p>
+</li>
+</ul>
+  
+<h2 id="program1" name="program1">Program</h2>
+
+<pre class="prettyprint">
+<a href="#program">program</a>
+{
+&nbsp;&nbsp;&nbsp;// name of the program
+&nbsp;&nbsp;&nbsp;<a href="#program_name">name</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;// 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;// action to perform
+&nbsp;&nbsp;&nbsp;<a href="#action">action</a>: STATE_SET &quot;statename&quot; state_value;
+&nbsp;&nbsp;&nbsp;// if action is STATE_SET, define a transition from the current to the target state
+&nbsp;&nbsp;&nbsp;<a href="#transition">transition</a>: LINEAR 0.5;
+&nbsp;&nbsp;&nbsp;// if action is SIGNAL_EMIT, the name of the part which will receive 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;;
+}
+</pre>
+
+<h3 id="program" name="program">Program</h3>
+
+<p>Programs define how your interface reacts to events. Programs can change the state of parts or trigger other events.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">name [program name]</span><a class="anchor" id="program_name"></a>
+<p>Symbolic name of program as a unique identifier.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">signal [signal name]</span><a class="anchor" id="signal"></a>
+<p>Specifies signals that cause the program to run. The signal received must match the specified source to run. There may be several signals, but only one signal keyword per program can be used. Also, there are some predefined signals for touch event handling. The predefined signals are:</p>
+<ul>
+<li>&quot;hold,on&quot;: Holding on the mouse event matching the source that starts the program.</li>
+<li>&quot;hold,off&quot;: Holding off the mouse event matching the source that starts the program.</li>
+<li>&quot;focus,part,in&quot;: Focusing in the matching source that starts the program.</li>
+<li>&quot;focus,part,out&quot;: Focusing out of the matching source that starts the program.</li>
+<li>&quot;mouse,in&quot;: Moving the mouse into the matching source that starts the program.</li>
+<li>&quot;mouse,out&quot;: Moving the mouse out of the matching source that starts the program.</li>
+<li>&quot;mouse,move&quot;: Moving the mouse in the matching source that starts the program.</li>
+<li>&quot;mouse,down,*&quot;: Pressing the mouse button in the matching source that starts the program.</li>
+<li>&quot;mouse,up,*&quot;: Releasing the mouse button in the matching source that starts the program.</li>
+<li>&quot;mouse,clicked,*&quot;: Clicking any mouse button in the matching source that starts the program.</li>
+<li>&quot;mouse,wheel,0,*&quot;: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
+<li>&quot;drag,start&quot;: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
+<li>&quot;drag,stop&quot;: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
+<li>&quot;drag&quot;: Dragging the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [source name]</span><a class="anchor" id="program_source"></a>
+<p>Source of accepted signal. There may be several signals, but only one source keyword per program can be used. For example, source: &quot;button-*&quot;; (signals from any part or program named &quot;button-*&quot; are accepted).</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">filter [part] [state]</span><a class="anchor" id="filter"></a>
+<p>Filter signals to be only accepted if the part is in state named <span style="font-family: Courier New,Courier,monospace;">[state]</span>. Only one filter per program can be used. If <span style="font-family: Courier New,Courier,monospace;">[state]</span> is not given, the source of the event is used instead.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">in [from] [range]</span><a class="anchor" id="in"></a>
+<p>Wait <span style="font-family: Courier New,Courier,monospace;">[from]</span> seconds before executing the program and add a random number of seconds (from 0 to <span style="font-family: Courier New,Courier,monospace;">[range]</span>) to the total waiting time.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">action [type] (param1) (param2) (param3) (param4)</span><a class="anchor" id="action"></a>
+<p> Action to be performed by the program. Valid actions (only one can be specified) are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">STATE_SET</span>: Set &quot;target part&quot; state as &quot;target state&quot;</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>: Stop the ongoing transition.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_SET</span>: Set a value for the dragable part (x, y values).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_STEP</span>: Set a step for the dragable part (x, y values).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_PAGE</span>: Set a page for the dragable part (x, y values).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">FOCUS_SET</span>: Set the focus to the target group.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE &quot;sample name&quot; speed (channel)</span>: Play a music sample clip.
+
+<p><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE</span>&#39;s (optional) channel can be one of:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EFFECT/FX</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BACKGROUND/BG</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">MUSIC/MUS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FOREGROUND/FG</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">INTERFACE/UI</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">INPUT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ALERT</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_TONE &quot;tone name&quot; duration_in_seconds (Range 0.1 to 10.0)</span>: Play a predefined tone of a specific duration. </li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_VIBRATION &quot;sample name&quot; repeat (repeat count)</span></li>
+</ul></li>
+
+
+<li><span style="font-family: Courier New,Courier,monospace;">transition [type] [length] (interp val 1) (interp val 2) (option)</span><a class="anchor" id="transition"></a>
+<p>Defines how transitions occur using <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action. <span style="font-family: Courier New,Courier,monospace;">[type]</span> is the style of the transition and <span style="font-family: Courier New,Courier,monospace;">[length]</span> is a double specifying the number of seconds in which to preform the transition. Valid types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">SPRING</span></li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span>, <span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> and <span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> need the extra optional &quot;interp val 1&quot; to determine the &quot;factor&quot; of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span>, <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> and <span style="font-family: Courier New,Courier,monospace;">SPRING</span> also require &quot;interp val 2&quot; in addition to &quot;interp val 1&quot;.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> as the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, etc.). <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is equivalent to linear interpolation. Note that <span style="font-family: Courier New,Courier,monospace;">DIVIS</span> can exceed 1.0.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> as the number of bounces (so it is rounded down to the nearest integer value), with <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> determining how much the bounce decays; 0.0 gives linear decay per bounce and higher values give much more decay.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">SPRING</span> is similar to bounce; <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> specifies the number of spring swings and <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> specifies the decay, but it can exceed 1.0 on the outer swings.</p>
+
+<p>Valid options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">CURRENT</span> causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">target [target]</span><a class="anchor" id="target"></a>
+<p>Program or part on which the specified action acts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">after [after]</span><a class="anchor" id="after"></a>
+<p>Specifies a program that is run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace;">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace;">after</span> statements can be specified per program.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/edje_n.htm b/org.tizen.guides/html/native/ui/edje_n.htm
new file mode 100644 (file)
index 0000000..24b4d26
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/edje_n.htm
@@ -0,0 +1,769 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#Concepts">Basic Concepts</a></li>
+                       <li><a href="#Scalability">Scaling Objects</a></li>
+                       <li><a href="#Swallow">Edje Swallow</a></li>
+                       <li><a href="#Layout">ELM Layout</a></li>
+                       <li><a href="#Reference">EDC Reference</a></li>
+                       <li><a href="#Howtos">Quick How-tos</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>                  
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje</h1> 
+
+   
+   
+<p>This programming guide shows you how to write an EDC file that can be used to theme a Tizen application. It describes concepts about parts positioning and resizing. It also explains part animations that can be done through programs.</p>
+
+<h2 id="Concepts" name="Concepts">Basic Concepts</h2>
+
+<h3>What is an EDC File?</h3>
+
+<p>An EDC file stands for Edje data collection. It is a text file that contains special code format describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds.</p>
+
+<p>The syntax for the Edje data collection files follows a simple structure of &quot;blocks { .. }&quot; that can contain &quot;properties: ..&quot;, more blocks, or both.</p>
+
+<p>An EDC file has the &quot;.edc&quot; extension.</p>
+
+<h3>Compiling EDC File</h3>
+<p>EDC file needs to be compiled into a &quot;.edj&quot; file using Edje library tools. After compiling the &quot;.edj&quot; file can be used by a native Tizen application.</p>
+
+<p>Here is an example about compiling <span style="font-family: Courier New,Courier,monospace;">helloworld.edc</span> to &quot;.edj&quot; file using <span style="font-family: Courier New,Courier,monospace;">edje_cc tool</span>: </p>
+
+<pre class="prettyprint">
+$ edje_cc helloworld.edc
+</pre>
+
+<p>This command creates a <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file.</p>
+
+<p>An EDC file can use external files such as sounds, images, or fonts. The path to these resources are passed to the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool so that they are included in the final &quot;.edj&quot; file. </p>
+
+<pre class="prettyprint">
+$ edje_cc -sd $SOUNDS_DIR -fd $FONTS_DIR -id $IMAGES_DIR
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace;">SOUNDS_DIR</span>, <span style="font-family: Courier New,Courier,monospace;">FONTS_DIR</span>, and <span style="font-family: Courier New,Courier,monospace;">IMAGES_DIR</span> are the paths for sounds, fonts, and images resources respectively.</p>
+
+<p>Tizen SDK calls <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> during the project building if it finds an EDC source file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> directory.</p>
+
+<pre class="prettyprint">
+Building file: ../res/edje/helloworld.edc
+Invoking: EDC Resource Compiler
+edje_cc -sd ../res/sounds -fd ../res/fonts -id ../res/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj
+</pre>
+
+
+<p>The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./res/images</span> directory. fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./res/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./res/sounds</span> directory respectively. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
+
+<h3 id="simple_edc_file" name="simple_edc_file">Writing Simple EDC File </h3>
+<p>The code example below shows you the structure of an EDC file. It is a collection of groups that contain parts and programs.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&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;}
+}
+</pre>
+
+<p>Groups are identified with a name, parts correspond to the graphical elements. Each one of them can have several states that describe a specific position, size, and visual aspect. Programs contain the program code, such as interaction with the main application through signals. Also animations are defined here (changing a part state using an animated transition).</p>
+
+<p>The description field is where the state of a part is written.</p>
+
+<pre class="prettyprint">
+part
+{
+&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;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state1&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>As an example, here is a simple EDC file that contains only one part and one program. The part is a rectangle with blue state and red state, the program changes the state from blue to red when user clicks on the rectangle.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&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;&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;&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;&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;&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;&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;&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 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;}
+}
+</pre>
+
+<p>A program is triggered when receiving a signal from a specific source (here all the sources are taken into account). When launched, it does the action (changing the state of a part) on the target (the rectangle).</p>
+
+<h3>Animating Theme Using Programs</h3>
+
+<p>The previous example showed how to change the state of a part. It is also possible to use the transition parameter to create an animation between the 2 states. You can specify a transition type (ACCELERATE, DECELERATE, SINUSOIDAL, LINEAR, ...) and length (in seconds) of the transition.</p>
+
+<p>The following code example animates the previous state change using a linear transition of 2 seconds.</p>
+
+<pre class="prettyprint">
+programs 
+{
+&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 2.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Edje calculates all frames needed for the animation. The result is a smooth animation between the two states and it takes 2 seconds.</p>
+
+<h3>Positioning Basic Parts</h3>
+
+<p>Size of a part (in pixels) is set using the min and max parameters. The following code example sets the minimum and maximum size of the rectangle part to 200x200 px.</p>
+
+<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;}
+}
+</pre>
+
+<p>Position of the parts is defined in the <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks. <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks are used to define respectively the upper-left corner and the lower-right corner of the part. Position can be defined relatively to other parts (with the relative parameter) as an offset (offset parameter). When using relative positioning, the <span style="font-family: Courier New,Courier,monospace;">to</span>, <span style="font-family: Courier New,Courier,monospace;">to_x</span> and <span style="font-family: Courier New,Courier,monospace;">to_y</span> parameters are used to define to which part the relative positioning is done. If nothing else is specified, the positioning is relative to the parent&#39;s part.</p>
+
+<p>To demonstrate the relative positioning, here is a code example that creates another part and positions it under the first part (the upper-left corner of the new part will start 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 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;// 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;}
+}
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The <span style="font-family: Courier New,Courier,monospace;">align</span> parameter defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3>Adding Offset to Relative Positioning</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> structures also support offset which is a complement to the relative positioning: the corners are first placed according to their relative parameters and then adjusted using the offsets.</p>
+
+<p>The picture below shows the pixel positions for a 4x4 rectangle. The indices start in the top-left corner at (0, 0) increase to the right and to the bottom. Since the indices have started at 0, the 4th pixel has an index of 3.</p>
+
+<p>Therefore, in order to create a 2x2 blue rectangle centered inside that green square, the top-left corner has to be (1, 1) and the bottom-right one has to be (2, 2).</p>
+
+<p class="figure">Figure: Offset indices</p> 
+<p style="text-align:center;"><img alt="Offset indices" src="../../images/rel1_rel2_offsets.png" /></p> 
+
+<p>Edje needs the following things defined:</p>
+<ul>
+<li>the part coordinates depending on the size and position of the green rectangle</li>
+<li>the relative component of positions is the same: the top-left corner of the green rectangle</li>
+<li>the top-left pixel is (1, 1) and the bottom-right one is (2, 2)</li>
+</ul>
+
+<p>The following code example defines these things: </p>
+
+<pre class="prettyprint">
+name: &quot;blue rectangle&quot;;
+
+rel1.to: &quot;green rectangle&quot;;
+rel1.relative: 0 0;
+rel1.offset: 1 1;
+
+rel2.to: &quot;green rectangle&quot;;
+rel2.relative: 0 0;
+rel2.offset: 2 2;
+</pre>
+
+<p>For most tasks, relative positioning is simpler than using offsets. Offsets are usually left for fine-tuning and creating borders. </p>
+
+<p>The example below is similar to the previous one but uses relative positioning instead of offsets to achieve an equivalent at 4x4 but could scale to larger sizes. </p>
+
+<p>The blue square starts at 25% of the green square (both vertically and horizontally) and ends at 75% of it (again, both vertically and horizontally). </p>
+
+<p>Just 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;;
+rel1.to: &quot;green rectangle&quot;;
+rel2.to: &quot;green rectangle&quot;;
+</pre>
+
+<p>The image below shows how to refer pixels using relative positioning when the offsets are (0, 0).</p>
+
+<p class="figure">Figure: Relative positioning</p> 
+<p style="text-align:center;"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p> 
+
+<p>Note the addressing of pixels: (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2)!.</p>
+
+<p>This comes from a design choice in Evas and Edje which favor simplicity. In the examples shown in this guide, there are 4 pixels and therefore when the <span style="font-family: Courier New,Courier,monospace;">[0; 1)</span> range is divided in 4, the result is <span style="font-family: Courier New,Courier,monospace;">[0; 0.25), [0.25; 0.50), [0.50; 0.75), [0.75; 0.100)</span>. With Edje, the value used to refer to each segment is the left bound and therefore, 0.75 refers to <span style="font-family: Courier New,Courier,monospace;">[0.75; 0.100)</span>, i.e. the bottom-right pixel of the green rectangle and not the 3/4th one.</p>
+
+<p>The way to refer to the pixel right before is to set the <span style="font-family: Courier New,Courier,monospace;">rel2</span> bound to <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75;</span>, as would be expressed naturally, and <span style="font-family: Courier New,Courier,monospace;">offset: -1 -1;</span>. This can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (as shown in the <span style="font-family: Courier New,Courier,monospace;">[0.50; 0.75)</span>).</p>
+
+<p>Since <span style="font-family: Courier New,Courier,monospace;">-1 -1</span> is the most common offset wanted for <span style="font-family: Courier New,Courier,monospace;">rel2</span>, it is the default value; i.e. the default behavior is practical.</p>
+
+<h3>Calculating Edje Object Total Size</h3>
+
+<p>When the EDC file is composed of a lot of parts, Edje calculates the size of the global Edje object, by taking all the parts and their parameters into account. Some parameters have an role in this calculation and affect the global size:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span>: these define the minimum and the maximum size of a part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span>: these specify the relative position of a part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">align</span>: this relates to the alignment of the part in the parent&#39;s object.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">fixed</span>: this defines if the part has a fixed size.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><span style="font-family: Courier New,Courier,monospace;">fixed</span> parameter can only be used on <span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span> type parts. Setting this parameter to <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1</span> will not take into account the part for the calculation of the global size.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3>Using Edje Size Hints</h3>
+
+<p>Any <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> can have hints, so that the object knows how to properly position and resize. Edje uses these hints when swallowing an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> to position and resize it in the <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part of the EDC file.</p>
+
+<p>Size hints are not a size enforcement, they just tell the parent object the desired size for this object. Then, the parent tries to get as close as possible to the hint.</p>
+
+<p>Hints are set in an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> using the <span style="font-family: Courier New,Courier,monospace;">evas_object_size_hint_*()</span> functions.</p>
+
+<h4 id="min_size_hint" name="min_size_hint">Min Size Hint</h4>
+
+<p>This sets the hints for the object&#39;s minimum size, given in pixels.</p>
+
+<p>Here the horizontal and vertical min size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 0 pixels.</p>
+
+<pre class="prettyprint">
+Evas_Object *object;
+evas_object_size_hint_min_set(object, 0, 0);
+</pre>
+
+<h4>Max Size Hint</h4>
+
+<p>This sets the hints for the object&#39;s maximum size, given in pixels.</p>
+
+<p>Here the horizontal and vertical max size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 200 pixels.</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(object, 200, 200);</pre>
+
+<h4>Request Size Hint</h4>
+
+<p>This sets the hints for the object&#39;s optimum size.</p>
+
+<p>The following code example defines that the optimum size of a part is 200x200 pixels.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_request_set(object, 200, 200);
+</pre>
+
+<h4>Aspect Size Hint</h4>
+
+<p>This sets the hints for the object&#39;s aspect ratio. Available aspect size hints are:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span></li>
+</ul>
+
+<p>The other parameters are aspect width and height ratio. These integers are used to calculate the proportions of the object. If aspect ratio terms are null, the object&#39;s container ignores the aspect and scale of the object and occupies the whole available area.</p>
+
+<p class="figure">Figure: Aspect control</p> 
+<p style="text-align:center;"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p> 
+ 
+<p style="text-align:center;"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p> 
+
+<p style="text-align:center;"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p> 
+
+<p>The following code example sets the aspect size hint to <span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span> with a width of 100 and a height of 200. So aspect ratio should be 1/2.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_aspect_set(object, EVAS_ASPECT_CONTROL_BOTH, 100, 200);
+</pre>
+
+<h4 id="align_size_hint" name="align_size_hint">Align Size Hint</h4>
+<p>This sets the hints for the object&#39;s alignment. This hint is used when the object size is smaller than its parent&#39;s. The special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter uses maximum size hints with higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.</p>
+
+<p class="figure">Figure: Alignment</p> 
+<p style="text-align:center;"><img alt="Alignment" src="../../images/align_hints.png" /></p> 
+
+<p>In the code below, the special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter is used.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_align_set(object, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+
+<h4>Weight Size Hint</h4>
+
+<p>This sets the hints for the object&#39;s weight. The weight tells to a container object how the given child is resized. Using <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_EXPAND</span> parameter asks to expand the child object&#39;s dimensions to fit the container&#39;s own.</p> 
+
+<p>When several child objects have different weights in a container object, the container distributes the space it has to layout them by those factors. Most weighted children get larger in this process than the least ones.</p> 
+
+<p>Here the container is asked to expand the object in both directions.</p> 
+
+<pre class="prettyprint">
+evas_object_size_hint_weight_set(object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+
+<h4>Padding Size Hint</h4>
+
+<p>This sets the hints for the object&#39;s padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined, for the left, right, top, and bottom padding.</p>
+
+<p class="figure">Figure: Padding</p> 
+<p style="text-align:center;"><img alt="Padding" src="../../images/padding-hints.png" /></p> 
+
+<p>Here the padding hints are set to 5 pixels on each side of the object.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_padding_set(object, 5, 5, 5, 5);
+</pre>
+
+<h2 id="Scalability" name="Scalability">Scaling Objects</h2>
+
+<h3>Part Scaling</h3>
+
+<p>When scaling an Edje object, only the parts that are declared scalable in the EDC file follow the scale request. This is done using the &quot;scale&quot; parameter.</p>
+
+<p>As an example, the previous &quot;rectangle2&quot; part is set as scalable, so that it is scaled when the Edje object is scaled.</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3>Using Image Set</h3>
+
+<p>When using images in the Edje EDC file, image file names must be listed in a images block, so that Edje can use them in the theme. In this block, the compression level and compression method of the image can also be defined.</p>
+
+<p>Here is an example of an images block that lists two image files.</p>
+
+<pre class="prettyprint">
+images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;image1.jpg&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;image2.png&quot; LOSSY 99;
+}
+</pre>
+
+<p>As the devicescan have different screen sizes and resolutions, it is possible to define that the used image set depends on the resolution.</p>
+
+<p>In the example below the image named &quot;image3&quot; selects different files depending on image size.</p>
+
+<pre class="prettyprint">
+images 
+{
+&nbsp;&nbsp;&nbsp;set 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&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;image3_1.png&quot; LOSSY 90;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 50 50;
+&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;image3_2.png&quot; LOSSY 90;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
+&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;image3_3.png&quot; LOSSY 90;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 201 500 500;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This is done with the &quot;size&quot; attribute that specifies the minimal width and height and maximal width and height. If the width and height of the object are below 50px, <span style="font-family: Courier New,Courier,monospace;">image3_1.png</span> picture file is used. If they are bigger than 201px, <span style="font-family: Courier New,Courier,monospace;">image3_3.png</span> file is used.</p>
+
+<h3>Resizing Borders</h3>
+
+<p>Sometimes it is needed to keep the borders of an image intact when resizing or scaling it. The <span style="font-family: Courier New,Courier,monospace;">border</span> attribute is here to do that.</p>
+
+<pre class="prettyprint">
+border [left] [right] [top] [bottom]
+</pre>
+
+<p>If set, the area (in pixels) of each side of the image is displayed as a fixed size border, from the side -&gt; inwards. This prevents the corners from being changed on a resize.</p>
+
+<p>Here is a code example how to set a border of 10px on each side of the image. This 10px border will not be resized when scaling the image.</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;image_border&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&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;normal: &quot;image1.jpg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 10 10 10 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h2 id="Swallow" name="Swallow">Edje Swallow </h2>
+
+<p>The parent of all layout widgets is Edje. Edje as explained in the <a href="edc_part_block_n.htm#edje_block">Edje Blocks</a> is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create &quot;Swallows&quot; objects. When this kind of object is added in an Evas, it contains any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. To create a swallow part, create first the EDC file: </p>
+
+<pre class="prettyprint">
+collections
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;container&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;part.swallow&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;&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.offset: 31 31;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This EDC describes a group named &quot;container&quot;, with one part inside of type SWALLOW and with the name <span style="font-family: Courier New,Courier,monospace;">part.swallow</span>. This part is centered inside the parent (it is the default behavior) but there are 32 pixels free all around this part. Use <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> to compile the EDC file into a binary EDJ file: </p>
+
+<pre class="prettyprint">
+edje_cc -o container.edj container.edc
+</pre>
+
+<p>Create an Edje object and load this file: </p>
+
+<pre class="prettyprint">
+edje = edje_object_add(evas_object_evas_get(parent));
+edje_object_file_set(edje, &quot;container.edj&quot;, &quot;container&quot;);
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><span style="font-family: Courier New,Courier,monospace;">edje_object_add</span> as opposed as all elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get</span> API.</td>
+</tr>
+</tbody>
+</table> 
+
+<p><span style="font-family: Courier New,Courier,monospace;">edje_object_file_set</span> is used to set the Edje file from which the object is loaded. The object itself is the name of the group as defined in the EDC file, in this case it is &quot;container&quot;.</p>
+
+<p>Use the API <span style="font-family: Courier New,Courier,monospace;">edje_object_swallow</span> to swallow any kind of <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> inside. </p>
+
+<pre class="prettyprint">
+ic = elm_icon_add(parent);
+elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
+edje_object_part_swallow(edje, &quot;part.swallow&quot;, ic);
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_image_file_set()</span> function parameters are linked to Edje. The second argument in this example is a PNG file; however, it can also be an Edje file. In that case, the third argument must be the Edje group to load, exactly as previously shown with the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout widget.</p>
+
+<h2 id="Layout" name="Layout">ELM Layout</h2>
+
+<p>Layout is a container widget. The basic use of <span style="font-family: Courier New,Courier,monospace;">elm_layout</span>, with default style is already documented in the <a href="ui_control_n.htm#containers">Container Widgets</a> guide. Elm layout takes a standard Edje design file and wraps it in a widget. Layouts are the basis of graphical widgets which are used in Elementary.</p>
+
+<h3>Adding Layout</h3>
+
+<p>Create a new elementary layout using <span style="font-family: Courier New,Courier,monospace;">elm_layout_add</span>: </p>
+
+<pre class="prettyprint">
+Evas_Object *layout;
+layout = elm_layout_add(parent);
+</pre>
+
+<p>As for Edje swallows, load an Edje file. Create first an Edje file, that contains a black rectangle and an icon in the center. </p>
+
+<pre class="prettyprint">
+images
+{
+&nbsp;&nbsp;&nbsp;image: &quot;c1.png&quot; COMP;
+}
+
+collections
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_layout&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;background&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT; 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; color: 0 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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE; 
+&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.offset: 31 31; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default.image: &quot;c1.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;} 
+}
+</pre>
+<p>Compile it with <span style="font-family: Courier New,Courier,monospace;">edje_cc -o edje_example.edj edje_example.edc</span>.</p>
+<p>This file can be loaded with <span style="font-family: Courier New,Courier,monospace;">elm_layout_file_set</span>: </p>
+
+<pre class="prettyprint">
+elm_layout_file_set(layout, &quot;edje_example.edj&quot;, &quot;my_layout&quot;);
+</pre>
+
+<p>The layout widget may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> (content holder)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOX</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span></li>
+</ul>
+
+<p>Only one object can be added to a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_layout_content_set()/get/unset</span> functions are used to manage objects in a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part. After being set to this part, the object&#39;s size, position, visibility, clipping and other description properties are controlled by the description of the given part (inside the Edje theme file).</p>
+
+<p>The BOX layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> set of functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> widget but the BOX layout&#39;s behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> set of functions.</p>
+
+<h3>Signals</h3>
+<p>Elm can send Edje signals to the EDC part by using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit</span>. You can also use <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add</span> to receive signals.</p>
+
+<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);
+
+static void _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Info received from layout : %s %s\n&quot;, emission, source);
+}
+</pre>
+
+<p>For more details on this, see the <a href="event_types_n.htm#events_guide_edje_with_layout">section on edje signals and layouts</a>.</p>
+
+<h2 id="Reference" name="Reference">EDC Reference</h2>
+
+<p>The documentation includes <a href="edc_part_block_n.htm#edje_block">an extensive language reference</a>. You can also access the page on the <a href="edc_part_block_n.htm#part_block">part block</a> directly.</p>
+
+<h2 id="Howtos" name="Howtos">Quick How-tos</h2>
+
+<h3>Adding Element on Screen</h3>
+<p>Add a new <a href="edc_part_block_n.htm#part_block">part</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a>.</p>
+
+<h3>Using Image </h3>
+<p>List the image in the <a href="edc_part_block_n.htm#Images">images block</a>, make sure the <a href="edc_part_block_n.htm#part_block">part</a> has <a href="edc_part_block_n.htm#type">type</a> &quot;IMAGE&quot; and set the <a href="edc_part_block_n.htm#description_image_normal">normal</a> property inside <a href="edc_part_block_n.htm#description_image">description.image</a> of part.</p>
+
+<h3>Using Same Color Definitions Across Multiple Elements</h3>
+<p>Define a <a href="edc_part_block_n.htm#Color_classes">color class</a> and set the <a href="edc_part_block_n.htm#description_color_class">description.color_class</a> property.</p>
+
+<h3>Positioning or Resizing a Part (Relative and Absolute Positioning)</h3>
+<p>Fill in the <a href="edc_part_block_n.htm#description_rel1_2">rel1 and rel2</a> structures inside the <a href="edc_part_block_n.htm#description">description block</a>.</p>
+
+<h3>Hiding Part</h3>
+<p>Set the <a href="edc_part_block_n.htm#description_visible">visible property</a> to 0.</p>
+
+<h3>Animating Part</h3>
+<p>Create several <a href="edc_part_block_n.htm#description">description blocks</a> inside your <a href="edc_part_block_n.htm#part_block">part</a> and give each of them a different value for <a href="edc_part_block_n.htm#description_state">state</a>. Set one description for the initial state and one for the end state.</p>
+
+<p>Create a <a href="edc_part_block_n.htm#program">program</a> with an <a href="edc_part_block_n.htm#action">action</a> that is <span style="font-family: Courier New,Courier,monospace;">STATE_SET &quot;end_state&quot; 0.0;</span> and with a <a href="edc_part_block_n.htm#target">target</a> that is the <a href="edc_part_block_n.htm#part_name">name</a> of the part. You can also set a non-default <a href="edc_part_block_n.htm#transition">transition</a>.</p>
+
+<p>When defining the second <a href="edc_part_block_n.htm#description">description</a>, <a href="edc_part_block_n.htm#description_inherit">inherit</a> from the first part in order to re-use the values which are already defined.</p>
+
+<p>The <a href="edc_part_block_n.htm#after">after</a> property of the <a href="edc_part_block_n.htm#program">program block</a> is used to trigger another program after the animation is done. It can be used to trigger another animation or to emit a signal to the C part of the program.</p>
+
+<h3>Making Genlist Item Theme</h3>
+<p>Create a <a href="edc_part_block_n.htm#group_block">group</a> with one <a href="edc_part_block_n.htm#part">part element</a> for each part that can be filed from the C code and set the <a href="edc_part_block_n.htm#Items">items properties</a> inside the <a href="edc_part_block_n.htm#group_block">group element</a>: </p>
+
+<pre class="prettyprint">
+items: &quot;texts&quot; &quot;text_part_1 text_part_2&quot;;
+items: &quot;icons&quot; &quot;image_part_1 image_part_2&quot;;
+</pre>
+<p>On the C side, the <span style="font-family: Courier New,Courier,monospace;">text_get</span> and <span style="font-family: Courier New,Courier,monospace;">content_get</span> callback are called respectively with <span style="font-family: Courier New,Courier,monospace;">text_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">text_part_2</span>, and <span style="font-family: Courier New,Courier,monospace;">image_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">image_part_2</span>. </p>
+  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_extension_n.htm b/org.tizen.guides/html/native/ui/efl_extension_n.htm
new file mode 100644 (file)
index 0000000..c553119
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/efl_extension_n.htm
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Extension</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm">
+                       Efl Extension Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension API</a></li>                     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Efl Extension</h1>
+
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension</a> API is an extension package for EFL. It provides functions to work with the hardware keys on devices.</p>
+
+<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 class="figure">Figure: Menu and Back keys</p> 
+<p style="text-align:center;"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p> 
+
+<p>The EFL Extension maintains its own object stack for determining which object to deliver events to. Only visible objects are added to this stack. The stack is based on the Evas layer. It means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event.</p>
+
+<p>The following figure shows an example of objects and their 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 class="figure">Figure: Objects with layers</p> 
+<p style="text-align:center;"><img alt="Objects with layers" src="../../images/efl_layers.png" /></p> 
+
+<p>If objects stay on the same layer, the object, which is registered to the callback first, gets the event.</p>
+
+<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the following function:</p>
+<pre class="prettyprint">
+void eext_object_event_callback_add(Evas_Object *obj, Eext_Callback_Type type, Eext_Event_Cb func, void *data);
+</pre>
+
+<p>There are 2 types of Eext callbacks:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_BACK</span>: Hardware <strong>Back</strong> key event</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_MORE</span>: Hardware <strong>Menu</strong> key event</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Eext_Event_Cb</span> callback has the following signature:</p>
+<pre class="prettyprint">void (*Eext_Event_Cb)(void *data, Evas_Object *obj, void *event_info);</pre>
+
+<p>To delete a registered event in the EFL Extension, use the following function:</p>
+<pre class="prettyprint">
+void *eext_object_event_callback_del(Evas_Object *obj, Eext_Callback_Type type, Eext_Event_Cb);</pre>
+
+<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for popup, ctxpopup, naviframe, and entry <a href="ui_control_n.htm#widgets">widgets</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_n.htm b/org.tizen.guides/html/native/ui/efl_n.htm
new file mode 100644 (file)
index 0000000..4bd7423
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/efl_n.htm
@@ -0,0 +1,160 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL Tutorial</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>                  
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>EFL</h1> 
+       
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI</a> API provides the functionality to create and manage your application user interface. The heart of the Tizen application UI is the native UI framework, which consists of the Enlightenment Foundation Libraries (EFL).</p>
+  
+  
+<p class="figure">Figure: EFL</p> 
+<p style="text-align:center;"><img alt="EFL" src="../../images/evas_architecture.png" /></p> 
+
+<p>UI design with EFL consists of the following main parts:</p>
+
+     <ul>
+        <li>EFL  
+       <p><a href="#efl_basics">EFL basics</a> contain a set of layered libraries, and EFL functions as the window manager for your application:</p>
+       
+               <ul><li>EFL Extension
+               <p>The EFL Extension is an extension package for EFL. It provides functions to work with the <a href="efl_extension_n.htm">Menu and Back hardware keys</a> on devices.</p></li>
+
+       </ul></li>
+        <li>Edje
+        <p>The Edje library is part of EFL, and provides APIs for <a href="edje_n.htm">theming a Tizen application</a>, by writing EDC file. EDC programming supports part positioning, resizing, and animations.</p></li>
+         
+       <li>Elementary
+       <p>The Elementary library is part of EFL, and provides the basic toolkit for window and layout management, along with the <a href="ui_control_n.htm#widgets">UI and container widgets</a> for the user interface. You can manage the widgets and their focus on the screen, as well as create customizations.</p></li>
+
+       </ul>
+
+<p>Some general UI design features include:</p>        
+<ul>
+       <li>Animations and effects
+       <p>Tizen supports various methods to <a href="events_effects_n.htm#animation_effect">create animations and effects</a> in your application.</p></li>
+       
+       <li>Event handling and main loop
+        <p>The user interface relies on callbacks, designed to react to EFL events generated by the system or the user. You can <a href="events_effects_n.htm#event_handling">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
+        <p>The Ecore library provides main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">manage the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
+
+       <li>Font settings
+       <p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
+        
+       <li>Scalability
+       <p>Elementary provides a way to <a href="ui_control_n.htm#scalability">scale widgets</a>  in order to be comfortably used with a finger make text more readable.</p></li></ul>
+       
+       
+       <h2 id="efl_basics" name="efl_basics">Making EFL Applications</h2> 
+       
+
+<p>The Enlightenment Foundation Libraries (EFL) provide all the libraries you need to create powerful applications. This section presents an overview of the libraries and when to use them in developing applications.</p>
+
+<p>Enlightenment is a window manager, which in the X Window System means that it handles the borders, iconification, expansion, and movement of windows on the screen. Enlightenment can also provide multiple virtual desktops. The initial version was developed in the 1990s by Rasterman (Carsten Haitzler). Enlightenment has since become much more than a simple window manager. To create this window manager, the Enlightenment team needed powerful libraries to base their work on, which is where the EFL come in. The EFL are the libraries on which the window manager was initially based on, but which have since then become more powerful, more memory efficient, and especially more useful for the embedded world and for touchscreen interfaces.</p>
+
+<p>The EFL are a set of layered libraries, as shown in the following diagram:</p>
+
+<p class="figure">Figure: EFL layers</p>
+<p style="text-align:center;"><img alt="EFL layers" src="../../images/efllibs.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 widgets. The full list of widgets that can be used in Tizen can be found in <a href="ui_control_n.htm#widgets">Using Widgets</a>.</li>
+    <li>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. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="edje_n.htm">Edje</a> and <a href="widget_preferences_n.htm#customize">Customizing Widgets</a>.</li>
+    <li>Ecore is the library which 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 the <a href="main_loop_n.htm">Main Loop</a> guide.</li>
+    <li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. 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_n.htm#render">Rendering Concept and Method in Evas</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer 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, calculate minimum drawing calls needed to get the job done, and so on.</li>
+    <li>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_n.htm">Using Data Types</a>.</li>
+</ul>
+
+<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
+
+<p>When designing EFL applications, you can use the <a href="efl_extension_n.htm">EFL Extension</a> package to work with device hardware keys and the <a href="efl_util_n.htm">EFL UTIL</a> package to provide additional notifications.</p>
+
+<h3 id="elementary">Concept of Elementary</h3>
+
+<p>Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer&#39;s point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.</p>
+
+<p>Elementary provides a variety of pre-built UI components, such as layout objects and widgets, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
+
+<p>There are three main groups of objects provided by Elementary:</p>
+
+<ul>
+    <li>Widgets: These are the widgets with which you build your application UI.</li>
+    <li>Containers: These are the containers that hold the widgets.</li>
+    <li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
+</ul>
+
+<p><a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a> shows you how to develop your first application with Elementary and the EFL.</p>
+
+<h3 id="basic_structure">Basic Structure of an EFL Application in Tizen</h3>
+
+<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in <a href="../../../../org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm">Naviframe Tutorial</a>.</p>
+
+<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container widget that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
+
+<p class="figure">Figure: Basic EFL application structure</p>
+<p style="text-align:center;"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
+
+<h3 id="appcore">Basic Use of Appcore</h3>
+
+<p>In Tizen, the life cycle of an application is handled by appcore. Appcore is a dedicated library developed for Tizen that provides a set of functions for handling the application life cycle. For example, appcore is responsible for sending the correct signals when the application is created, when the battery is low, when the application is sent to the background, and when the screen is rotated.</p>
+
+<p>You can see appcore in action in <a href="../../../../org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm">Application Framework Tutorial</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_util_n.htm b/org.tizen.guides/html/native/ui/efl_util_n.htm
new file mode 100644 (file)
index 0000000..05825c9
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/efl_util_n.htm
@@ -0,0 +1,154 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 UTIL</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm">EFL UTIL Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API</a></li>                        
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>EFL UTIL</h1> 
+ 
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a> is a utility package that supports additional notification level functionality of EFL. It provides the following functions for setting and getting the notification level of the notification window (which is of the EFL window type):</p>
+
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span></li></ul>
+
+<p>To understand notification levels, you must first learn about the Tizen window layer hierarchy. Window layers are logical containers used to control the window stack order. Each window belongs to 1 layer and can change the stack order in the layer. Windows in same layer are always placed on or under a window in another layer. In addition to the default &quot;normal layer&quot;, there exists a &quot;notification layer&quot;, which is always placed above the normal layer.</p>
+
+
+<p class="figure">Figure: Window layers</p> 
+<p style="text-align:center;"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p> 
+
+
+
+<p>Each window is set to  a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.</p> 
+
+<p>A window that belongs to the notification layer is called a &quot;notification window&quot;. To make a notification window:</p>
+
+<ol><li>Set the window type to <span style="font-family: Courier New,Courier,monospace;">NOTIFICATION</span>, by calling the <span style="font-family: Courier New,Courier,monospace;">elm_win_add()</span> function with the third parameter set to <span style="font-family: Courier New,Courier,monospace;">ELM_WIN_NOTIFICATION</span>.</li>
+<li>Set the notification level by calling the <span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span> function.
+<p>The notification level defines the priority of the window, and the notification layer contains 3 levels (<span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span>, and <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span>).</p>
+<p>The default notification window level is <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>. Most of notification windows can be set to this level. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is a higher level than <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, which means that the window set to <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is always on the <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span> level window. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span> is the highest level in notification windows. Very few applications can use this level.</p>
+
+<p>If there are notification windows that have the same level, the most recently created notification window is placed on top of the other window. </p>
+
+</li></ol>
+
+<p class="figure">Figure: Notification levels</p> 
+<p style="text-align:center;"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p> 
+
+
+<p>The following code snippets shown how to make a notification window with a higher level.</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+static Evas_Object *create_win(const char *name)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;// Create the NOTIFICATION window object
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+
+&nbsp;&nbsp;&nbsp;if (!eo) return NULL;
+
+&nbsp;&nbsp;&nbsp;// Set the NOTIFICATION level
+&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
+
+&nbsp;&nbsp;&nbsp;elm_win_title_set(eo, name);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(eo, EINA_TRUE); 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(eo, &quot;delete,request&quot;, _quit_cb, NULL); 
+       
+&nbsp;&nbsp;&nbsp;return eo;
+}</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span> function to get the currently set notification level of a window. If the window is not of the notification type, the function returns the <span style="font-family: Courier New,Courier,monospace;">-EFL_UTIL_ERROR_NOT_SUPPORTED_WINDOW_TYPE</span> error.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+void get_notification_level (Evas_Object *eo)
+{
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;efl_util_notification_level_e  notification_level;
+
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+
+&nbsp;&nbsp;&nbsp;// Get the window notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level (eo, &amp;notification_level);
+
+&nbsp;&nbsp;&nbsp;// Check the return value
+&nbsp;&nbsp;&nbsp;if (error== EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 1
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 2
+&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;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+  
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/eina_n.htm b/org.tizen.guides/html/native/ui/eina_n.htm
new file mode 100644 (file)
index 0000000..db8e81b
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/eina_n.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Eina</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Eina</h1>
+ <p>Eina provides data types and useful tools.</p>
+  
+<p>The Eina library implements an API for data types in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool.</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>
+<li><a href="eina_tools_n.htm">Eina Tools</a> <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/eina_tools_n.htm b/org.tizen.guides/html/native/ui/eina_tools_n.htm
new file mode 100644 (file)
index 0000000..7bc0ac0
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/eina_tools_n.htm
@@ -0,0 +1,233 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Eina Tools</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <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>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Eina Tools</h1>
+ <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications:</p>
+
+<ul>
+<li>Convert fast: conversion from, for example, strings to integers and double</li>
+<li>Counter: measures the number of calls and their time</li>
+<li>Error: error identifiers</li>
+<li>File: file list and path split</li>
+<li>Lazy allocator: lazy allocator</li>
+<li>Log: full-featured logging system</li>
+<li>Magic: provides runtime type checking</li>
+<li><a href="#memory">Memory Pool</a>: abstraction for various memory allocators</li>
+<li>Module lists: loads and shares modules using the <span style="font-family: Courier New,Courier,monospace;">Eina_Module</span> standard</li>
+<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>    
+  
+<h2 id="string" name="string">String</h2>
+
+<p>When creating applications, you always need to manipulate strings. Eina provides a very useful API for manipulating C strings:</p>
+
+<ul><li>
+
+<p>The most common string manipulation is the &quot;split&quot;. If you have a string, such as &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;, and you want to print it in an easily readable format, you can use the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function to split the string using a delimiter. The first parameter is the string to split, the second determines where to split the string, and the final parameter is the maximum number of strings to split the string into. If you set a number less than 1, it splits the string as many times as possible.</p>
+<p>The function returns a newly-allocated NULL-terminated array of strings, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>, if it fails to allocate the array. Always remember to free the memory allocated by the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.</p>
+
+<pre class="prettyprint">
+char *nicks = &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;;
+char **result_arr;
+int i;
+
+// Splitting the string with &#39;:&#39; delimiter
+result_arr = eina_str_split(names, &quot;:&quot;, 0);
+// Printing the result
+for (i = 0; result_arr[i]; i++)
+&nbsp;&nbsp;&nbsp;printf(&quot;Nick : %s\n&quot;, result_arr[i]);
+// Remember to free memory
+free(arr[0]);
+free(arr);
+</pre></li>
+
+
+<li><p>To change the string to lowercase or uppercase, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_tolower()</span> and <span style="font-family: Courier New,Courier,monospace;">eina_str_toupper()</span> functions. They change the case for all characters of the given string. These functions modify the original strings.</p>
+
+<pre class="prettyprint">
+char *str;
+// Initialize the string
+str = malloc(sizeof(char) * 4);
+strcpy(str, &quot;bsd&quot;);
+// Change the string to uppercase
+eina_str_toupper((char **)&amp;str);
+printf(&quot;%s\n&quot;, str);
+// Change the string to lowercase
+eina_str_tolower(&amp;str);
+printf(&quot;%s\n&quot;, str);
+// Free the allocated memory
+free(str);
+</pre></li>
+<li><p>If you need to &quot;join&quot; 2 strings of known length, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_join()</span> function. The fist 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.</p>
+
+<pre class="prettyprint">
+char *part1 = &quot;Tizen powered by&quot;;
+char *part2 = &quot;Enlightenment Foundation Libraries&quot;;
+char *res;
+size_t size;
+// Calculate the string size + 1 for the delimiter
+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);
+// Free the allocated memory
+free(res):
+</pre></li>
+<li><p>To check whether a string starts or ends with another string, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_prefix()</span> or <span style="font-family: Courier New,Courier,monospace;">eina_str_has_suffix()</span> function. You can also check whether a string has a particular extension with the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_extension()</span> function.</p>
+
+<p>These functions return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the given string contains the specified prefix, suffix, or extension, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> 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;printf(&quot;String starts with &#39;Carsten&#39;&quot;)
+if (eina_str_has_suffix(names, &quot;Philippe&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;String ends with &#39;Philippe&#39;&quot;)
+if (eina_str_has_extension(names, &quot;philippe&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;String has extension &#39;philippe&#39;&quot;)
+else
+&nbsp;&nbsp;&nbsp;printf(&quot;String does not have extension &quot;philippe)
+</pre></li></ul>
+
+<h2 id="memory" name="memory">Memory Pool</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Eina_Mempool</span> tool provides memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>
+
+<p>The following mempools are available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">buddy</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">chained_pool</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ememoa_fixed and ememoa_unknown</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">fixed_bitmap</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">pass_through</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">one_big</span></li>
+</ul>
+
+<h2 id="safety" name="safety">Safety Checks</h2>
+
+<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <span style="font-family: Courier New,Courier,monospace;">assert()</span> function, but safety checks log the parameter or value and return instead of aborting your program.</p>
+
+<p>The following safety checks are available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN(exp)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO(exp, label)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN(exp)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_GOTO(exp, label)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN(exp)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_GOTO(exp, label)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_ARG_NONNULL(...)</span></li>
+</ul>
+
+<p>To return if a variable is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro calls return if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<pre class="prettyprint">
+Eina_Bool myfunction(char *param) 
+{
+&nbsp;&nbsp;&nbsp;// If my param is NULL, EINA_SAFETY_ON_NULL_RETURN calls &quot;return&quot;
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN(param);
+
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+} 
+</pre>
+
+<p>To return a specific value, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL()</span> function instead of the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro returns the given value.</p>
+
+<pre class="prettyprint">
+Eina_Bool void myfunction(char *param)
+{
+&nbsp;&nbsp;&nbsp;// If the parameter is NULL, return EINA_FALSE;
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>To call another function if a parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function. This macro works similarly to the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function except that it calls goto with the given function instead of return.</p>
+
+<pre class="prettyprint">
+static void isnullcb()
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;The parameter is NULL\n&quot;);
+}
+Eina_Bool void myfunction(char *param)
+{
+&nbsp;&nbsp;&nbsp;// If the parameter is NULL we return EINA_FALSE;
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>Eina also provides macros that check whether a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span> or <span style="font-family: Courier New,Courier,monospace;">FALSE</span>. For example, to call return if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN()</span> function. To call &quot;goto&quot; in a given function if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/elementary_n.htm b/org.tizen.guides/html/native/ui/elementary_n.htm
new file mode 100644 (file)
index 0000000..fd90395
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/elementary_n.htm
@@ -0,0 +1,367 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Widgets</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#basics">Elementary Basics</a></li>
+                               <li><a href="#config">Elementary Configuration</a></li>
+               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Elementary Widgets</h1> 
+  
+  <h2 id="basics" name="basics">Elementary Basics</h2>
+
+<p>Elementary widgets are built in a hierarchical fashion. The idea is to factorize as much code as possible between widgets that behave in a similar manner, so as to facilitate the creation of new widgets. The Elementary widgets that we will use inherit a lot of their code from the container widgets and the layout widget (a container widget that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
+
+<p>This programming guide does not describe the container widgets. More information about containers can be found in <a href="ui_control_n.htm#containers">Container Widgets</a>.</p>
+
+<p>Generally, an Elementary widget can be added with the <span style="font-family: Courier New,Courier,monospace">elm_[widget_name]_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is then be passed to the functions that are used to configure the widget.</p>
+
+<p>At the end of your application, the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate widgets.</p>
+
+<h3 id="first_use" name="first_use">First Use of the Elementary Library</h3>
+
+<p>A minimal Elementary application looks like this:</p>
+
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+&nbsp;&nbsp;&nbsp;elm_run();
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+
+<p>First of all, before using the Elementary library, it has to be initialized with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. The Elementary main loop can then be started with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function, which will not return, and will constantly loop and run the event and processing tasks. A call to the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function will tell the main loop to stop and return to the main function. At the end of the application, the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function will clean up all resources that were allocated with Elementary in the main loop, and finally shut down Elementary.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">An Elementary application should use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which already calls the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. <a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a> shows a basic Elementary application that uses this macro.</td>
+        </tr>
+    </tbody>
+</table>
+
+<h3 id="objects" name="objects">Elementary Objects</h3>
+
+<p>Objects created using Elementary are always of type <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>. This means that Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
+
+<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid widget, and save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary widget can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> is bigger than expected, but it is still a good idea to use it.</p>
+
+<h3 id="callbacks" name="callbacks">Elementary Callbacks</h3>
+
+<p>Several callbacks can be registered on an Elementary object. The following is an overview of the different callback types and how they differ. For more information about events, see <a href="events_effects_n.htm#event_handling">Handling Events</a>. For more information about Evas objects and smart objects, see <a href="evas_n.htm#render">Rendering Concept and Method in Evas</a>.</p>
+
+<h4>Evas Event Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function, this callback can be registered on an Elementary object. It adds a callback for input events (key up, key down, mouse wheel) on an Evas object. In the case of an Elementary object, the callback will be registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
+
+<h4>Evas Smart Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function, this callback can be registered on a "smart event" emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the "smart event" we want to register must be implemented by the corresponding smart object. Otherwise, the callback will do nothing. The callback has nothing to do with input events (keyboard or mouse)</p>
+
+<h4>Edje Signal Callbacks</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function, this callback can be registered on a signal coming from an Edje object (a theme object).</p>
+
+<h4>Elementary Signal Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function, this callback can be registered on a signal coming from an Elementary widget's theme. The callback has nothing to do with input events (keyboard or mouse).</p>
+
+<h4>Elementary Event Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function, this callback can be registered on an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can then process the event.</p>
+  
+  <h2 id="config" name="config">Elementary Configuration</h2> 
+  <p>An Elementary configuration is composed of a set of options linked to a given Elementary profile. Once loaded, the Elementary profile will configure all these options and affect the look and feel of your entire Elementary application.</p>
+
+<p>An Elementary configuration can be used to store the desired set of options that fits your application. Below, we list the different options that can be saved in an Elementary profile.</p>
+
+<h3 id="general_functions" name="general_functions">General Functions</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function provides a way to save the current Elementary configuration so that it can be reused in another session:</p>
+
+<pre class="prettyprint">elm_config_save();</pre>
+
+<p>When a profile is selected, we can ask Elementary to reload its configuration with the saved profile:</p>
+
+<pre class="prettyprint">elm_config_reload();</pre>
+
+<h3 id="managing_profiles" name="managing_profiles">Managing Profiles</h3>
+
+<p>A profile is a set of preconfigured options that affects the entire look and feel of an application.</p>
+
+<p>We can list the existing profiles:</p>
+
+<pre class="prettyprint">Eina_List *list = elm_config_profile_list_get();</pre>
+
+<p>We can set a particular profile:</p>
+
+<pre class="prettyprint">elm_config_profile_set(&quot;myprofile&quot;);</pre>
+
+<p>We can get the current profile:</p>
+
+<pre class="prettyprint">char *profile = elm_config_profile_get();</pre>
+
+<h3 id="scaling_widgets" name="scaling_widgets">Scaling Widgets</h3>
+
+<p>An Elementary configuration allows you to configure widget scaling both in terms of interactive areas and readable areas. For more information about widget scaling, see <a href="ui_control_n.htm#scalability">Scaling Widgets</a>.</p>
+
+<p>Setting the global scaling factor to 2.0 will double the size of all scalable widgets:</p>
+
+<pre class="prettyprint">elm_config_scale_set(2.0);</pre>
+
+<p>We can also set the finger size:</p>
+
+<pre class="prettyprint">elm_config_finger_size_set(1.5);</pre>
+
+<h3 id="config_cache" name="config_cache">Configuring the Cache</h3>
+
+<p>We can enable the globally configured cache flush, and we can then set the flush interval to 60 seconds:</p>
+
+<pre class="prettyprint">elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);</pre>
+
+<p>We can configure the font cache size to 500 bytes and the image cache size to 5 000 000 bytes:</p>
+
+<pre class="prettyprint">elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);</pre>
+
+<p>Finally, we can set the Edje collection cache size and the Edje file cache size:</p>
+
+<pre class="prettyprint">elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);</pre>
+
+<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
+
+<p>Elementary uses Edje to theme its widgets. Edje provides a default theme for each widget. This theme can be changed per application using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable, or it can be modified globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
+
+<p>When you need custom styles, use extensions. Extensions allow you to write styles for specific widgets. Once set, the extension will completely replace the default theme of the widget.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the widget is themed. If something is missing from the extension, it can break the widget's behavior.</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function is used to add the new extension to the list of Elementary themes. The style can then be applied to the widget with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+
+<p>Overlay is another solution to modify Elementary themes. It can replace the look of all widgets by overriding the default styles. As with extensions, it is up to you to write the correct overlay theme for a widget. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. With overlays, it is therefore possible to replace the default view so that every widget is affected. This is very similar to setting the theme for the whole application, and will probably clash with end user options. It also runs the risk of none-matching styles across the application. Unless you have a very good reason to use them, avoid overlays. An overlay can be added with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> function. It can be removed with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> function.</p>
+
+<p>For more information about widget theme customization, see <a href="widget_preferences_n.htm#customize">Customizing Widgets</a>.</p>
+
+<h3 id="config_focus" name="config_focus">Configuring Focus</h3>
+
+<p>When an Elementary object has the focus, input events are directly passed to that object in the window of the application. The focused object can also change its decoration to show the user where the focus is. The focus can be set to an Elementary object at any time with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. This will take the focus away from the previous focused object and give the focus to the new object. In an Elementary application, only one object can have the focus at a time. It is also possible to make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function, so that the object will never take the focus.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Only visible objects can be focused.</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>Elementary also supports focus chains, which allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the widgets were added to the code. It is also possible to define custom focus chains when needed.</p>
+
+<p>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. After you have inserted all the objects to the <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set this list as the custom focus chain of the parent object (here <span style="font-family: Courier New,Courier,monospace">container_object</span>).</p>
+
+<pre class="prettyprint">Eina_List *obj_list = NULL;
+
+list = eina_list_append(list, obj1); 
+list = eina_list_append(list, obj4);
+list = eina_list_append(list, obj2); 
+list = eina_list_append(list, obj3);
+
+elm_object_focus_custom_chain_set(container_object, list);</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function to remove the custom focus chain and use the default focus chain instead.</p>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function to programmatically cycle through the focus chain.</p>
+
+<p>For detailed information about focus, see <a href="widget_preferences_n.htm#focus">Managing Widget Focus</a>.</p>
+
+<p>We can show a highlight on the focused object:</p>
+
+<pre class="prettyprint">elm_config_focus_highlight_enabled_set(EINA_TRUE);</pre>
+
+<p>We can also activate an animation when the focus shifts from one object to another:</p>
+
+<pre class="prettyprint">elm_config_focus_highlight_animate_set(EINA_TRUE);</pre>
+
+<h3 id="config_gesture_layer" name="config_gesture_layer">Configuring the Gesture Layer</h3>
+
+<p>We can configure the duration of the long tap and double tap events on gesture layer objects. Here, we set the duration to 500 ms:</p>
+
+<pre class="prettyprint">elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);</pre>
+
+<h3 id="config_scrolling" name="config_scrolling">Configuring Scrolling</h3>
+
+<p>An Elementary configuration provides several functions for configuring scrolling in widgets.</p>
+
+<p>You can enable bouncing, which makes the scroller bounce when it reaches its viewport's edge during scrolling:</p>
+
+<pre class="prettyprint">elm_config_scroll_bounce_enabled_set(EINA_TRUE);</pre>
+
+<p>You can control the inertia of the bounce animation. Here, the inertia is set to 0.5:</p>
+
+<pre class="prettyprint">elm_config_scroll_bounce_friction_set(0.5);</pre>
+
+<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function to set the scroller to be draggable. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.</p>
+
+<p>Here, we set the scroller to be draggable, and we set the number of pixels one should travel while dragging the scroller's view to actually trigger scrolling to 20 pixels:</p>
+
+<pre class="prettyprint">// Set the scroller to be draggable
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+
+// Set the thumbscroll threshold to 20 pixels
+elm_config_scroll_thumbscroll_threshold_set(20);</pre>
+
+<h3 id="config_long_press" name="config_long_press">Configuring Long Press</h3>
+
+<p>Long press events can be configured using the <span style="font-family: Courier New,Courier,monospace">elm_config</span> API. Here, we get the current timeout before a long press event happens and increase it by 1 second:</p>
+
+<pre class="prettyprint">// Get the long press timeout
+double lp_timeout = elm_config_longpress_timeout_get();
+
+// Increase it by 1 second
+elm_config_longpress_timeout_set(lp_timeout + 1.0);</pre>
+
+<h3 id="config_tooltips" name="config_tooltips">Configuring Tooltips</h3>
+
+<p>The duration after which a tooltip is shown can be configured through the <span style="font-family: Courier New,Courier,monospace">elm_config</span> API. Here, we set the delay to 2 seconds:</p>
+
+<pre class="prettyprint">elm_config_tooltip_delay_set(2.0);</pre>
+
+<h3 id="config_password" name="config_password">Configuring the Password Show Last Feature</h3>
+
+<p>The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry widget and to change the duration over which the input has to be visible.</p>
+
+<p>First, we enable the password show last feature:</p>
+
+<pre class="prettyprint">elm_config_password_show_last_set(EINA_TRUE);</pre>
+
+<p>Then, we set the visibility timeout to 5 seconds:</p>
+
+<pre class="prettyprint">elm_config_password_show_last_timeout_set(5.0);</pre>
+
+<h3 id="config_elm_engine" name="config_elm_engine">Configuring the Elementary Engine</h3>
+
+<p>We can use <span style="font-family: Courier New,Courier,monospace">elm_config</span> to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:</p>
+
+<ul>
+    <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>
+
+<p>Here, we set the engine to "opengl_x11":</p>
+
+<pre class="prettyprint">elm_config_engine_set(&quot;opengl_x11&quot;);</pre>
+
+<h3 id="config_access_mode" name="config_access_mode">Configuring the Access Mode</h3>
+
+<p>When the access mode is active, information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event. Here, we activate the access mode:</p>
+
+<pre class="prettyprint">elm_config_access_set(EINA_TRUE);</pre>
+
+<h3 id="config_selection" name="config_selection">Configuring Selection</h3>
+
+<p>Selection behavior can be set to be cleared when the entry widget is unfocused:</p>
+
+<pre class="prettyprint">elm_config_selection_unfocused_clear_set(EINA_TRUE);</pre>
+
+<h3 id="config_mirroring" name="config_mirroring">Configuring Mirroring</h3>
+
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If activated with the <span style="font-family: Courier New,Courier,monospace">elm_object_mirrored_set()</span> function, an Elementary widget will display as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the widget are mirrored. Text is not mirrored.</p>
+
+<p>The default mirror mode of widgets can be set with <span style="font-family: Courier New,Courier,monospace">elm_config</span>. Here, we activate the mirror mode by default:</p>
+
+<pre class="prettyprint">elm_config_mirrored_set(EINA_TRUE);</pre>
+
+<h3 id="config_frame_rate" name="config_frame_rate">Configuring Frame Rate</h3>
+
+<p>We can also set the frames per second (FPS) value for <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. Here, we set the FPS to 60:</p>
+
+<pre class="prettyprint">elm_config_fps_set(60.0);</pre>
+  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/evas_n.htm b/org.tizen.guides/html/native/ui/evas_n.htm
new file mode 100644 (file)
index 0000000..fa9260c
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/evas_n.htm
@@ -0,0 +1,974 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Evas</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#render">Rendering Concept and Method in Evas</a></li>
+            <li><a href="#evas">Evas Object</a></li>
+                       <li><a href="#engine">Evas Engines Concept</a></li>
+                       <li><a href="#ui_rendering">UI Rendering Mode</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm">Evas Tutorial</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API</a></li>                       
+               </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Evas</h1>
+  
+<p>Evas is a clean display canvas API for several target display systems that can draw anti-aliased text, smooth super and sub-sampled scaled images, alpha-blend objects and much more.</p>
+<p>It 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>
+<p>Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.</p>
+<p>It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.</p>
+
+<p>Evas is not a widget set or a widget toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>
+<p>It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.</p>
+
+<h2 id="render" name="render">Rendering Concept and Method in Evas </h2>
+<p>Evas is a canvas display library. It is markedly different from most display and windowing systems as the canvas is structural and is also a state engine, whereas most display and windowing systems are immediate mode display targets. Evas handles the logic between a structural display via its state engine, and controls the target windowing system in order to produce rendered results of the current canvas&#39; state on the display.</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">
+draw line from position (0, 0) to position (100, 200);
+
+draw rectangle from position (10, 30) to position (50, 500);
+
+bitmap_handle = create_bitmap();
+scale bitmap_handle to size 100 x 100;
+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 software or sent to the graphics hardware on the device to be performed.</p>
+<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of widget sets, custom display widgets and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>
+<p>For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the &quot;expose event&quot;). Then the programmer calculates manually the updates and repaints it again.</p>
+<pre class="prettyprint">
+Redraw from position (0, 0) to position (50, 50):
+
+// What was in area (0, 0, 50, 50)?
+
+// 1. intersection part of line (0, 0) to (100, 200)?
+&nbsp;&nbsp;&nbsp;draw line from position (0, 0) to position (25, 50);
+
+// 2. intersection part of rectangle (10, 30) to (50, 500)?
+&nbsp;&nbsp;&nbsp;draw rectangle from position (10, 30) to position (50, 50)
+
+// 3. intersection part of image at (10, 30), size 100 x 100?
+&nbsp;&nbsp;&nbsp;bitmap_subimage = subregion from position (0, 0) to position (40, 20)
+&nbsp;&nbsp;&nbsp;draw image bitmap_subimage at position (10, 30);
+</pre>
+
+<p>If all elements in the above scene are opaque, the system is doing useless paints: part of the line is behind the rectangle, and part of the rectangle is behind the image. These useless paints tend to be very costly.</p>
+<p>Evas is a structural system in which the programmer creates and manages display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>
+<p>For example, see the following pseudo code.</p>
+<pre class="prettyprint">
+line_handle = create_line();
+set line_handle from position (0, 0) to position (100, 200);
+show line_handle;
+
+rectangle_handle = create_rectangle();
+move rectangle_handle to position (10, 30);
+resize rectangle_handle to size 40 x 470;
+show rectangle_handle;
+
+bitmap_handle = create_bitmap();
+scale bitmap_handle to size 100 x 100;
+move bitmap_handle to position (10, 30);
+show bitmap_handle;
+
+render scene;
+</pre>
+
+<p>This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.</p>
+<p>This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.</p>
+<p>Evas is a display system somewhere between a widget set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>
+
+<p>For more information on the UI rendering modes (immediate and retained), see <a href="#ui_rendering">UI Rendering Mode</a>.</p>
+
+<h2 id="evas" name="evas">Evas Object </h2>
+<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of widgets, is an Evas object.</p>
+
+<h3 id="renderable" name="renderable">Primitive Renderable Objects</h3>
+<p>Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, <a href="#image">images</a>, <a href="#block">textblocks</a>, and texts.</p>
+<h4>Rectangle</h4>
+<p>There is only one function to deal with rectangle objects. However, the rectangle is manipulated using the generic evas object functions.</p>
+<p>The evas rectangle serves a number of key functions when working on Evas programs.</p>
+<ul>
+<li>background</li>
+<li>debugging</li>
+<li>clipper</li>
+</ul>
+
+<h5>Background</h5>
+<p>A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.</p>
+<pre class="prettyprint">Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
+
+//Here we set the rectangles red, green, blue and opacity levels
+evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background
+evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas
+evas_object_show(bg);
+</pre>
+
+<h5>Debugging</h5>
+<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 for 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 for the original object, and in all likelihood any remaining issues are specific to that object&#39;s type.</p>
+
+<h5>Clipping</h5>
+<p><a href="#clip">Clipping</a> serves two main functions:</p>
+<ul>
+<li>limiting visibility</li>
+<li>applying a layer of color to an object</li>
+</ul>
+
+
+<h4>Text</h4>
+<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_color_set(text, 127, 0, 0, 127);
+evas_object_show(text);
+</pre>
+
+<p>To set the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set(text, some_text)</span>. You can set the current text with <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get(text)</span>.</p>
+<p>To set the font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">text</span>: The text object</li>
+<li><span style="font-family: Courier New,Courier,monospace">font</span>: The font name you want to use</li>
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use. To query the current font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>.</li>
+</ul>
+<p>To set the text style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set(text, style)</span>. The following styles are supported:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_PLAIN</span>: Plain, standard text</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW</span>: Text with shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE</span>: Text with an outline</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_OUTLINE</span>: Text with a soft outline</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_GLOW</span>: Text with a glow effect</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SHADOW</span>: Text with both outline and shadow effects</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SHADOW</span>: Text with (far) shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SOFT_SHADOW</span>: Text with outline and soft shadow effects combined</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_SHADOW</span>: Text with (soft) shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SOFT_SHADOW</span>: Text with (far soft) shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_RIGHT</span>: Shadow growing to bottom right</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM</span>: Shadow growing to the bottom</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_LEFT</span>: Shadow growing to bottom left</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_LEFT</span>: Shadow growing to the left</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_LEFT</span>: Shadow growing to top left</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP</span>: Shadow growing to the top</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_RIGHT</span>: Shadow growing to top right</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_RIGHT</span>: Shadow growing to the right. To query the current style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get(text)</span>.</li>
+</ul>
+<p>If the text does not fit, make an ellipsis on it by using <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set(text, ellipsis)</span>. The (float) value specifies, which part of the text is shown.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">0.0</span>: The beginning is shown and the end trimmed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">1.0</span>: The beginning is trimmed and the end shown.</li>
+<li>Any value in between means that both ends of the text have ellipsis and the set part is shown.</li>
+<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled. To query the current ellipsis value, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get(text)</span>.</li>
+</ul>
+<p>When the text style is set to glow, set the glow color using <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set(text, r, g, b, a)</span>. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get(text, r, g, b, a)</span>, respectively <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get(text, r, g, b, a)</span>.</p>
+<p>If your text style is set to display a shadow, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get(text, r, g, b, a)</span></p>
+<p>If your text style is set to display an outline, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get(text, r, g, b, a)</span></p>
+
+
+<h3 id="smart" name="smart">Primitive Smart Objects</h3>
+<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 could be, for example, a group of objects that move together, or implementations of whole complex UI widgets, providing some intelligence and extension to simple Evas objects.</p>
+
+<h3 id="container_objects" name="container_objects">Primitive Container Objects</h3>
+<p>A container is a Smart object that holds children Evas objects in a specific fashion.</p>
+<h4>Table</h4>
+<p>A table is a smart object that packs children using a tabular layout.</p>
+<pre class="prettyprint">table = evas_object_table_add(evas);
+evas_object_table_homogeneous_set(table, EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE);
+evas_object_table_padding_set(table, 0, 0);
+evas_object_resize(table, WIDTH, HEIGHT);
+evas_object_show(table);
+
+rect = evas_object_rectangle_add(evas);
+evas_object_color_set(rect, 255, 0, 0, 255);
+evas_object_size_hint_min_set(rect, 100, 50);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 1, 1, 2, 1);
+
+rect = evas_object_rectangle_add(d.evas);
+evas_object_color_set(rect, 0, 255, 0, 255);
+evas_object_size_hint_min_set(rect, 50, 100);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 1, 2, 1, 2);
+
+rect = evas_object_rectangle_add(d.evas);
+evas_object_color_set(rect, 0, 0, 255, 255);
+evas_object_size_hint_min_set(rect, 50, 50);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 2, 2, 1, 1);
+
+rect = evas_object_rectangle_add(d.evas);
+evas_object_color_set(rect, 255, 255, 0, 255);
+evas_object_size_hint_min_set(rect, 50, 50);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 2, 3, 1, 1);
+</pre>
+
+<p>In this example, we add a non-homogeneous table to the canvas with its padding set to 0.</p>
+<p>We then add four different colored rectangles with different properties.</p>
+<ul>
+<li>the first one, at the first column and first line, spans two columns and one line</li>
+<li>the second one, at the first column and second line, spans one columns and two lines</li>
+<li>the third one, at the second column and second line, fits in one cell</li>
+<li>the fourth one, at the second column and third line, also fits in one cell</li>
+</ul>
+<p>To create a table, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_add(evas)</span>.</p>
+<p>To set the table layout (the cells), use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set(table, homogeneous)</span>. The following values can be homogeneous:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</span>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</span>: 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), then the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</span>: 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 <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span>. If the table area is too small to hold this minimum bounding box, then the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To set the current mode, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get(table)</span>.</li>
+</ul>
+<p>The table&#39;s content alignment is set using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set(table, horizontal, vertical)</span>, where <span style="font-family: Courier New,Courier,monospace">horizontal</span> and <span style="font-family: Courier New,Courier,monospace">vertical</span> are floating values. To see them, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get(table, horizontal, vertical)</span>.</p>
+<p>To set the padding, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set(table, horizontal, vertical)</span>. To see the current value, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get(table, horizontal, vertical)</span>.</p>
+<p>_To see the current column and row count, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get(table, columns, rows)</span>.</p>
+
+<h4>Grid</h4>
+<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 <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add(evas)</span>.</p>
+<p>To change a grid&#39;s virtual resolution, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set(grid, width, height)</span>, to see it, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get(grid, width, height)</span>.</p>
+<p>To add an object, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack(grid, child, x, y, w, h)</span>, where</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">x</span> is the virtual X coordinate of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">y</span> is the virtual y coordinate of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">w</span> is the virtual width of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">h</span> is the virtual height of the child</li>
+</ul>
+<h4>Box</h4>
+<p>A box is a simple container that sets its children objects linearly.</p>
+<p>To add a box to your canvas, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_add(evas)</span>.</p>
+<p>To add a child to the box, use</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append(box, child)</span>: The child is appended.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after(box, child, reference)</span>: The child is added after <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before(box, child, reference)</span>: The child is added before <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at(box, child, pos)</span>: The child is added at the specified position.</li>
+</ul>
+<p>To set the alignment, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set(box, horizontal, vertical)</span>.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">horizontal</span>: 0.0 means aligned to the left, 1.0 means to the right;</li>
+<li><span style="font-family: Courier New,Courier,monospace">vertical</span>: 0.0 means aligned to the top, 1.0 means to the bottom.</li>
+</ul>
+<p>Evas has predefined box layouts available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_stack()</span>.</li>
+</ul>
+
+<h3 id="image" name="image">Image Objects</h3> 
+
+
+<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 <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>
+
+       <p class="figure">Figure: Evas image loader</p> 
+       <p style="text-align:center;"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>  
+
+<h4>Evas Object Image Functions</h4>
+
+<p>Evas has over 70 image object functions. The following functions are discussed in this document:</p>
+<pre class="prettyprint">
+Evas_Object *evas_object_image_add(Evas *e);
+void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);
+void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);
+void evas_object_image_filled_set(Evas *e, Eina_Bool setting);
+Evas_Object *evas_object_image_filled_add(Evas *e);
+void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);
+void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);
+void evas_object_image_data_set(Evas_Object *obj, void *data);
+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, const char *key, const char *flags);
+</pre>
+
+<h4>Creating an Image Object and Setting the Image Data Source</h4>
+<p>A common use case of an image object is to set a file as the image data source. The process has 3 steps and each one involves the following API calls:</p>
+       <ul>
+        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function creates an image object and returns the pointer.
+        <pre class="prettyprint">Evas_Object *evas_object_image_add(Evas *e);</pre>
+        </li>
+        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function sets a source file on the image object. The object fetches the image pixel data from the source file.
+        <pre class="prettyprint">void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);</pre>
+        </li>
+        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> sets how to fill the image object's area with the given pixel data.
+        <pre class="prettyprint">void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);</pre>
+        </li>
+       </ul>
+
+<p>In the following code example, the <span style="font-family: Courier New,Courier,monospace">main()</span> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+
+&nbsp;&nbsp;&nbsp;// Create a window object
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 400);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+
+&nbsp;&nbsp;&nbsp;// Create an image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
+
+&nbsp;&nbsp;&nbsp;// Set a source file to fetch pixel data
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+
+&nbsp;&nbsp;&nbsp;// Set the size and position of the image on the image object area
+&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, 300, 300);
+
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+
+&nbsp;&nbsp;&nbsp;elm_run();
+
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+       <p class="figure">Figure: Image object display</p> 
+       <p style="text-align:center;"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>  
+  
+<h4>Image Scaling</h4>
+<p>Users 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 <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> 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 class="figure">Figure: Image scaling</p> 
+       <p style="text-align:center;"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>  
+
+       <table>
+       <tbody>
+       <tr>
+        <td><p style="text-align:center;"><img alt="" src="../../images/evas_scaling1.png" /></p></td>
+        <td><p style="text-align:center;"><img alt="" src="../../images/evas_scaling2.png" /></p></td>
+        <td><p style="text-align:center;"><img alt="" src="../../images/evas_scaling3.png" /></p></td>
+       </tr>
+       <tr>
+     <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>
+        <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 200, 200)</span></td>
+        <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 100, 127)</span></td>
+       </tr>
+       </tbody>
+       </table>  
+       
+<p>the <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
+<pre class="prettyprint">
+void evas_object_image_filled_set(Evas *e, Eina_Bool setting);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_add()</span> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> functions.</p>
+
+<pre class="prettyprint">Evas_Object *evas_object_image_filled_add(Evas *e);</pre>
+
+<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 so users can disable the function.</p>
+
+<pre class="prettyprint">
+void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);</pre>
+
+<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>
+
+<p>There is a trade-off between image smoothness and rendering performance. The load gets bigger as the image gets bigger. Users can avoid such scaling overload by using the same size of the image object and the source image.</p>
+
+<p>In the following code, 2 image objects are created to show the effects of smooth scaling. The one with smooth scaling applied appears softer on the screen.</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+
+&nbsp;&nbsp;&nbsp;// Create a window object
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+
+&nbsp;&nbsp;&nbsp;// Create an image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 0, 0);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+
+&nbsp;&nbsp;&nbsp;// Create another image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img2 = evas_object_image_filled_add(e);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img2, &quot;./logo.png&quot;, NULL);
+
+&nbsp;&nbsp;&nbsp;// Disable smooth scaling
+&nbsp;&nbsp;&nbsp;evas_object_image_smooth_scale_set(img2, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_move(img2, 200, 0);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img2, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(img2);
+
+&nbsp;&nbsp;&nbsp;elm_run();
+
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+  <table>
+  <caption>Figure: Smooth scaling effects</caption>
+  <tbody>
+  <tr>
+   <td><p style="text-align:center;"><img alt="" src="../../images/evas_smooth_enabled.png" /></p></td>
+   <td><p style="text-align:center;"><img alt="" src="../../images/evas_smooth_disabled.png" /></p></td>
+  </tr>
+  <tr>
+   <td style="text-align:center;">Smooth scaling enabled</td>
+   <td style="text-align:center;">Smooth scaling disabled</td>
+  </tr>
+  </tbody></table>
+
+
+<p>Evas caches scaled image data and reuses them. Users can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <span style="font-family: Courier New,Courier,monospace">jpeg</span> format at the moment.</p>
+<pre class="prettyprint">
+void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);</pre>
+
+<p>An example code is as follows.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+ 
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+ 
+&nbsp;&nbsp;&nbsp;// Create a window object
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+ 
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+ 
+&nbsp;&nbsp;&nbsp;// Create an image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e); 
+ 
+&nbsp;&nbsp;&nbsp;// Load the image scaled into the object size 
+&nbsp;&nbsp;&nbsp;// before evas_object_image_file_set() is called
+&nbsp;&nbsp;&nbsp;evas_object_image_load_size_set(img, 300, 300);
+ 
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL); 
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
+&nbsp;&nbsp;&nbsp;evas_object_show(img); 
+ 
+&nbsp;&nbsp;&nbsp;elm_run();
+ 
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h4>Setting Raw Data to Image Object</h4>
+<p>Users can set raw data to the image object manually using  the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function instead of setting an image file as the data source. The image data should be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>
+
+<pre class="prettyprint">void evas_object_image_data_set(Evas_Object *obj, void *data);</pre>
+
+<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, users must set the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_size_set()</span> function.</p>
+
+<pre class="prettyprint">void evas_object_image_size_set(Evas_Object *obj, int w, int h);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If users pass <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for <span style="font-family: Courier New,Courier,monospace">for_writing</span>, Evas updates the image pixels in the next rendering cycle.</p>
+
+<pre class="prettyprint">void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> helps to mark the updated area for rendering efficiency.</p>
+
+<pre class="prettyprint">void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);</pre>
+
+<p>The following example code and figure show how to specify the area to update.</p>
+<pre class="prettyprint">
+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 class="figure">Figure: Partial image update</p> 
+  <p style="text-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 <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>
+
+<pre class="prettyprint">Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);</pre>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+
+void image_blur(Evas_Object *img)
+{
+&nbsp;&nbsp;&nbsp;unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;evas_object_image_size_get(img, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;int blur_size = 4;
+&nbsp;&nbsp;&nbsp;int x, y, xx, yy;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; h; y++)
+&nbsp;&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;&nbsp;&nbsp;&nbsp;int avg_color[3] = {0, 0, 0};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int blur_pixel_cnt = 0;
+
+&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;&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;&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;avg_color[0] += img_src[idx + 0];
+&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;avg_color[2] += img_src[idx + 2];
+&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;avg_color[0] /= blur_pixel_cnt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] /= blur_pixel_cnt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] /= blur_pixel_cnt;
+
+&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;&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;&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;img_src[idx + 0] = avg_color[0];
+&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;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;evas_object_image_data_update_add(img, 0, 0, w, h);
+}
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+
+&nbsp;&nbsp;&nbsp;image_blur(img);
+
+&nbsp;&nbsp;&nbsp;evas_object_image_save(img, &quot;logo2.png&quot;, NULL, &quot;quality=100 compress=8&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_run();
+
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+  <table>
+  <caption>Figure: Blur effect</caption>
+  <tbody>
+  <tr>
+   <td><p style="text-align:center;"><img alt="" src="../../images/evas_blur1.png" /></p></td>
+   <td><p style="text-align:center;"><img alt="" src="../../images/evas_blur2.png" /></p></td>
+  </tr>
+  <tr>
+   <td style="text-align:center;">Before</td>
+   <td style="text-align:center;">After</td>
+  </tr>
+  </tbody></table>  
+
+
+ <h3 id="block" name="block">Textblock Objects</h3>
+
+<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 three important parts: the text paragraphs, the format nodes and the cursors.</p>
+<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50&gt;Big!&lt;/font_size&gt;</span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</span>. Please note that we used <span style="font-family: Courier New,Courier,monospace">&lt;/font_size&gt;</span> 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 <span style="font-family: Courier New,Courier,monospace">&lt;font_size=30&gt;Big&lt;/&gt;</span>, 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><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example &quot;Sans:style=Italic:lang=hi&quot;. or &quot;Serif:style=Bold&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in &quot;font&quot;. For example, &quot;font_weight=Bold&quot; is the same as &quot;font=:style=Bold&quot;. The supported weights are &quot;normal&quot;, &quot;thin&quot;, &quot;ultralight&quot;, &quot;light&quot;, &quot;book&quot;, &quot;medium&quot;, &quot;semibold&quot;, &quot;bold&quot;, &quot;ultrabold&quot;, &quot;black&quot;, and &quot;extrablack&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in &quot;font&quot;. For example, &quot;font_style=Italic&quot; is the same as &quot;font=:style=Italic&quot;. The supported styles are &quot;normal&quot;, &quot;oblique&quot;, and &quot;italic&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in &quot;font&quot;. For example, &quot;font_width=Condensed&quot; is the same as &quot;font=:style=Condensed&quot;. The supported widths are &quot;normal&quot;, &quot;ultracondensed&quot;, &quot;extracondensed&quot;, &quot;condensed&quot;, &quot;semicondensed&quot;, &quot;semiexpanded&quot;, &quot;expanded&quot;, &quot;extraexpanded&quot;, and &quot;ultraexpanded&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in &quot;font&quot;. For example, &quot;lang=he&quot; is the same as &quot;font=:lang=he&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_fallbacks</span>: A comma delimited list of fonts to try if finding the main font fails.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_size</span>: The font size in points.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_source</span>: The source of the font, for example an eet file.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: &quot;auto&quot; (according to text direction), &quot;left&quot;, &quot;right&quot;, &quot;center&quot; or &quot;middle&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
+<li><span style="font-family: Courier New,Courier,monospace">valign</span>: The vertical text alignment in one of the following formats: &quot;top&quot;, &quot;bottom&quot;, &quot;middle&quot;, &quot;center&quot;, &quot;baseline&quot; or &quot;base&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The text wrap in one of the following formats: &quot;word&quot;, &quot;char&quot;, &quot;mixed&quot;, or &quot;none&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
+<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline</span>: The style of underlining in one of the following formats: &quot;on&quot;, &quot;off&quot;, &quot;single&quot;, or &quot;double&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either &quot;on&quot; or &quot;off&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: &quot;on&quot; or &quot;off&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: &quot;off&quot;, &quot;none&quot;, &quot;plain&quot;, &quot;shadow&quot;, &quot;outline&quot;, &quot;soft_outline&quot;, &quot;outline_shadow&quot;, &quot;outline_soft_shadow&quot;, &quot;glow&quot;, &quot;far_shadow&quot;, &quot;soft_shadow&quot; or &quot;far_soft_shadow&quot;. The direction is selected by adding &quot;bottom_right&quot;, &quot;bottom&quot;, &quot;bottom_left&quot;, &quot;left&quot;, &quot;top_left&quot;, &quot;top&quot;, &quot;top_right&quot; or &quot;right&quot;. For example, &quot;style=shadow,bottom_right&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">tabstops</span>: The pixel value for tab width.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linesize</span>: To force a line size in pixels.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linerelsize</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linegap</span>: To force a line gap in pixels.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linerelgap</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use &quot;size&quot;, &quot;abssize&quot;, or &quot;relsize&quot; to define the item&quot;s size, and an optional vsize = full/ascent to define the item&#39;s position in the line.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linefill</span>: Either a float value or percentage indicating how much to fill the line.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ellipsis</span>: 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><span style="font-family: Courier New,Courier,monospace">password</span>: Either &quot;on&quot; or &quot;off&quot;, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
+</ul>
+
+
+<h3 id="clip" name="clip">Clipping Objects</h3>
+
+<h4>Limiting Visibility </h4>
+<p>An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.</p>
+
+<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. The way to do this is to create a solid white rectangle (by default, so you need not use <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span>) and give it a position and size of what is wanted visible. The following code exemplifies showing the center half of my_evas_object: </p>
+<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);
+evas_object_move(clipper, my_evas_object_x / 4, my_evas_object_y / 4);
+evas_object_resize(clipper, my_evas_object_width / 2, my_evas_object_height / 2);
+evas_object_clip_set(my_evas_object, clipper);
+evas_object_show(clipper);
+</pre>
+
+<h4>Layer of Color </h4>
+<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>
+<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas);
+evas_object_move(clipper, my_evas_object_x, my_evas_object_y);
+evas_object_resize(clipper, my_evas_object_width, my_evas_object_height);
+evas_object_color_set(clipper, 0, 255, 255, 255);
+evas_object_clip_set(obj, clipper);
+evas_object_show(clipper);
+</pre> 
+
+
+<h3 id="map" name="map">Mapping Objects</h3>
+
+<p>Evas allows different transformations to be applied to all kinds of objects. These are applied by means of UV mapping. With UV mapping, one map points in the source object to a 3D space positioning at target. This allows rotation, perspective, scale, and many other effects depending on the map that is used.</p>
+
+<h4>Creating a Map </h4>
+<p>A map consists of a set of points, but currently only four are supported. Each of these points contains a set of canvas coordinates x and y that are used to alter the geometry of the mapped object, and a z coordinate that indicates the depth of that point. This last coordinate does not normally affect the map, but is used by several of the utility functions to calculate the right position of the point given other parameters.</p>
+<p>The coordinates for each point are set with <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set(map, index, x, y, z)</span>. In the example below, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_point_coord_set(map, 0, 100, 100, 0);
+evas_map_point_coord_set(map, 1, 300, 100, 0);
+evas_map_point_coord_set(map, 2, 300, 300, 0);
+evas_map_point_coord_set(map, 3, 100, 300, 0);
+</pre>
+<p>There are functions to ease the process.</p>
+<p>Use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry(map, x, y, w, h, z)</span>, where the map coordinates are set to the given rectangle, and <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points.</p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_util_points_populate_from_geometry(map, 100, 100, 200, 200, 0);
+</pre>
+
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object(map, object)</span>. </p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_util_points_populate_from_object(map, object);
+</pre>
+
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full(map, object, z)</span>, where <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points. </p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_util_points_populate_from_object_full(map, object, 0);
+</pre>
+
+<h4>Manual Point Setting</h4>
+<p>Several effects are applied to an object by setting each point of the map to the right coordinates. For example, a simulated perspective is achieved as follows.</p>
+<pre class="prettyprint">evas_map_point_coord_set(map, 0, 300, 100, 0);
+evas_map_point_coord_set(map, 1, 450, 120, 0);
+evas_map_point_coord_set(map, 2, 450, 260, 0);
+evas_map_point_coord_set(map, 3, 300, 300, 0);
+</pre>
+
+<p>The Z coordinate is not used when setting points by hand; thus its value is not important.</p>
+
+<h4>Applying a Map </h4>
+<p>Regardless of the specific way you create a map, to apply it to a specific object, use</p>
+<pre class="prettyprint">evas_object_map_set(object, map);
+evas_object_map_enable_set(object, EINA_TRUE);
+</pre>
+
+<h4>Basic Utility Functions </h4>
+<p>Evas provides utility functions for common transformations:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate(map, angle, cx, cy)</span>: This performs a rotation of the <span style="font-family: Courier New,Courier,monospace">angle</span> degrees around the center point with the coordinates (cx, cy).</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom(map, zoomx, zoomy, cx, cy)</span>: This performs a <span style="font-family: Courier New,Courier,monospace">zoomx</span> and <span style="font-family: Courier New,Courier,monospace">zoomy</span> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>
+</ul>
+
+<p>For example, the following code rotates an object around its center.</p>
+<pre class="prettyprint">int x, y, w, h;
+evas_object_geometry_get(object, &amp;x, &amp;y, &amp;w, &amp;h);
+Evas_Map *map = evas_map_new(4);
+evas_map_util_points_populate_from_object(map, object);
+evas_map_util_rotate(map, 45, x + (w / 2), y + (h / 2));
+evas_object_map_set(object, map);
+evas_object_map_enable_set(object, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<p>The following code rotates an object around the center of the window.</p>
+<pre class="prettyprint">int w, h;
+evas_output_size_get(evas, &amp;w, &amp;h);
+Evas_Map *map = evas_map_new(4);
+evas_map_util_points_populate_from_object(map, object);
+evas_map_util_rotate(map, 45, w / 2, h / 2);
+evas_object_map_set(object, map);
+evas_object_map_enable_set(object, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<h4>3D Utility Functions </h4>
+<p>Evas provides utility functions for 3D transformations.</p>
+<p>To make a 3D rotation, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate(map, anglex, angley, anglez, cx, cy, cz)</span>. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>
+<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 <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_perspective(map, px, py, z0, focal)</span> on the map after its position has been set.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> specify the &quot;infinite distance&quot; point in the 3D conversion, where all lines converge to.</li>
+<li><span style="font-family: Courier New,Courier,monospace">z0</span> 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><span style="font-family: Courier New,Courier,monospace">focal</span> 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 <span style="font-family: Courier New,Courier,monospace">z0</span> value; this function allows for some &quot;depth&quot; control.</li>
+</ul>
+<h4>Color and Lighting </h4>
+<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 <span style="font-family: Courier New,Courier,monospace">evas_map_point_color_set(map, index, r, g, b, a)</span> for each point of the map, or <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_color_set(map, r, g, b, a)</span> to set every point into the same color.</p>
+<p>To add lighting for the objects, which is useful with 3D transforms, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting(map, lightx, lighty, lightz, lightr, lightg, lightb, ambientr, ambientg, ambientb)</span>:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">lightx</span>, <span style="font-family: Courier New,Courier,monospace">lighty</span> and <span style="font-family: Courier New,Courier,monospace">lightz</span> are the local light source coordinates;</li>
+<li><span style="font-family: Courier New,Courier,monospace">lightr</span>, <span style="font-family: Courier New,Courier,monospace">lightg</span> and <span style="font-family: Courier New,Courier,monospace">lightb</span> are the local light source colors;</li>
+<li><span style="font-family: Courier New,Courier,monospace">ambientr</span>, <span style="font-family: Courier New,Courier,monospace">ambientg</span> and <span style="font-family: Courier New,Courier,monospace">ambientb</span> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from the user and becomes obscured, since no light does not reflect from it.</li>
+</ul>
+
+<h2 id="engine" name="engine">Evas Engines Concept </h2>
+<p>Evas delegates most of the actual rendering work to its engines. Engines are the backends that Evas uses to render (primitive) objects on a canvas. The canvas can be the screen, or a buffer in the memory.</p>
+<p>Evas can work with and provides multiple engines, such as (this list is non-exhaustive):</p>
+<ul>
+<li>buffer: all the rendering takes place in a buffer</li>
+<li>fb: the rendering takes place in the system&#39;s framebuffer</li>
+<li>software_x11: this is the most used, using X11</li>
+<li>gl_x11: this also renders to an X11 window, except that it uses OpenGL</li>
+</ul>
+<p>These implement the rendering of all the basic objects by themselves, because they often can be accelerated by the hardware or backend software libraries to provide fast rendering.</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> 
+
+<h2 id="ui_rendering" name="ui_rendering">UI Rendering Mode</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, whereas the immediate mode is an alternative rendering method.</p>
+
+<h3 id="immediate" name="immediate">Immediate Mode</h3>
+
+<p>The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.</p>
+
+<p class="figure">Figure: Immediate mode</p> 
+<p style="text-align:center;"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p> 
+
+<p>The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.</p> 
+<p>The following example explains the common usage of the immediate mode:</p> 
+
+<pre class="prettyprint">
+void update()
+{
+&nbsp;&nbsp;&nbsp;Image *img = load_image(NEW_IMG);
+
+&nbsp;&nbsp;&nbsp;// Switch button image to new one
+&nbsp;&nbsp;&nbsp;update_button_image(img);
+
+&nbsp;&nbsp;&nbsp;// Issue the invalidate area (button area) to be redrawn on the screen
+&nbsp;&nbsp;&nbsp;invalidate_area(button_x, button_y, button_w, button_h);
+
+&nbsp;&nbsp;&nbsp;// Move rectangle from (200, 200) to (300, 300)
+&nbsp;&nbsp;&nbsp;int rect_prev_x = rect_x;
+&nbsp;&nbsp;&nbsp;int rect_prev_y = rect_y;
+&nbsp;&nbsp;&nbsp;rectangle_x = 300;
+&nbsp;&nbsp;&nbsp;rectangle_y = 300;
+&nbsp;&nbsp;&nbsp;set_rect_position(rect_x, rect_y);
+   
+&nbsp;&nbsp;&nbsp;// Issue the invalidate area (changed area) to be redrawn on the screen
+&nbsp;&nbsp;&nbsp;int diff_x = rect_x – rect_prev_x;
+&nbsp;&nbsp;&nbsp;int diff_y = rect_y – rect_prev_y;
+&nbsp;&nbsp;&nbsp;invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));
+
+
+&nbsp;&nbsp;&nbsp;// After setting the invalidate area, request rendering to update the screen
+&nbsp;&nbsp;&nbsp;render();
+
+&nbsp;&nbsp;&nbsp;// Now you can see how the button image and rectangle position are changed
+}
+</pre>
+
+<h3 id="retained" name="retained">Retained Mode</h3>
+
+<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 class="figure">Figure: Retained mode</p> 
+<p style="text-align:center;"><img alt="Retained mode" src="../../images/retained_mode.png" /></p> 
+
+<p>Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:</p>
+
+<pre class="prettyprint">
+void create_image()
+{
+&nbsp;&nbsp;&nbsp;// Initialize an image object to be displayed on the screen
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
+
+&nbsp;&nbsp;&nbsp;// Set image resource
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, IMG, NULL);
+
+&nbsp;&nbsp;&nbsp;// Set image position 
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Set image size
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+
+&nbsp;&nbsp;&nbsp;// Set image visibility (show or hide)
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+}
+
+void create_rectangle()
+{
+&nbsp;&nbsp;&nbsp;// Initialize an rectangle object to be displayed on the screen
+&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_rectangle_add(e);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle color
+&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, 255, 0, 0, 255);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle position
+&nbsp;&nbsp;&nbsp;evas_object_move(rect, 200, 200);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle size
+&nbsp;&nbsp;&nbsp;evas_object_resize(rect, 200, 200);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle visibility (show or hide)
+&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+}
+</pre>
+
+<p>A few main loops later you can replace the image with another one and move the rectangle. You only need to set a new image file to the image object and move the rectangle object. Evas computes the invalidate area and redraws the image and rectangle behind the application when it&#39;s on rendering time.</p>
+
+<pre class="prettyprint">
+void update()
+{
+&nbsp;&nbsp;&nbsp;// Set new image resource
+&nbsp;&nbsp;&nbsp;elm_image_file_set(img, NEW_IMG, NULL);
+
+&nbsp;&nbsp;&nbsp;// Set new rectangle position
+&nbsp;&nbsp;&nbsp;evas_object_move(rect, 300, 300);
+}
+</pre>
+
+<h3 id="evas_rendering" name="evas_rendering">Evas Rendering</h3>
+
+<p>Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.</p>
+
+<p class="figure">Figure: Evas rendering in the main loop</p> 
+<p style="text-align:center;"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p> 
+
+<p>To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
+
+<p>The following figures illustrate how Evas redraws the changed area:</p>
+
+<ul><li><p>In the first example, there is a blue-color 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 is printed on the green rectangle.</p>
+
+<p class="figure">Figure: Evas redrawing example 1</p> 
+<p style="text-align:center;"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>
+
+<li><p>In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).</p>
+
+<p class="figure">Figure: Evas redrawing example 2</p> 
+<p style="text-align:center;"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>
+
+<li><p>As a result, the third example illustrates some regions that require updates.</p>
+
+<p class="figure">Figure: Evas redrawing example 3</p> 
+<p style="text-align:center;"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>
+
+<li><p>Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.</p>
+<p>Evas redraws the content only in the redrawn portions.</p> 
+<p class="figure">Figure: Evas redrawing example 4</p> 
+<p style="text-align:center;"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li> 
+
+<li><p>Finally, the fifth example shows how the screen is updated and the result is visible.</p> 
+
+<p class="figure">Figure: Evas redrawing example 5</p> 
+<p style="text-align:center;"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>
+
+<p>If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/event_types_n.htm b/org.tizen.guides/html/native/ui/event_types_n.htm
new file mode 100644 (file)
index 0000000..cd03d01
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/event_types_n.htm
@@ -0,0 +1,622 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <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>
+                               <li><a href="#evas_object">Evas Object Events</a></li>
+                               <li><a href="#evas_smart_object">Evas Smart Object Events</a></li>
+               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>                 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Event Types</h1> 
+  
+  
+  
+  <h2 id="ecore" name="ecore">Ecore Events</h2>
+
+<h3>Table of Contents</h3>
+
+<ul><li><a href="#ecore_events_useful_for_shortcuts">Ecore Events Useful for Shortcuts</a></li>
+<li><a href="#ecore_event_handler_add">Add an Event Handler: ecore_event_handler_add()</a></li>
+<li><a href="#ecore_event_handler_del">Remove an Event Handler: ecore_event_handler_del()</a></li>
+<li><a href="#ecore_event_add">Send Events to the Main Loop Yourself: ecore_event_add()</a></li>
+<li><a href="#ecore_event_type_new">Create Your Own Type of Events: ecore_event_type_new()</a></li>
+</ul>
+
+<p>Ecore events are used for low-level handling of events such as key presses, network connections, and communication with sub-processes.</p>
+<p>The low-level handling of key presses is particularly useful for shortcuts: instead of adding a signal handler to a specific graphical element, you can add one globally. This guarantees that no matter which widget is currently receiving events, the shortcut is caught.</p>
+<p>Note that ecore events are also used to implement new graphical back-ends, but they are low-level and not useful for most applications.</p>
+<h3 id="ecore_events_useful_for_shortcuts">Ecore Events Useful for Shortcuts</h3>
+
+<p>There are eight ecore events for shortcuts:</p>
+<pre class="prettyprint">int ECORE_EVENT_KEY_DOWN;
+int ECORE_EVENT_KEY_UP;
+int ECORE_EVENT_MOUSE_BUTTON_DOWN;
+int ECORE_EVENT_MOUSE_BUTTON_UP;
+int ECORE_EVENT_MOUSE_MOVE;
+int ECORE_EVENT_MOUSE_WHEEL;
+int ECORE_EVENT_MOUSE_IN;
+int ECORE_EVENT_MOUSE_OUT;
+</pre>
+<p>The callbacks receive additional data through a <span style="font-family: Courier New,Courier,monospace">void *</span> object, whose type depends on the event that has been received.</p>
+<ul>
+<li>for ECORE_EVENT_KEY_DOWN and ECORE_EVENT_KEY_UP: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Key Ecore_Event_Key;
+
+struct _Ecore_Event_Key 
+{
+&nbsp;&nbsp;&nbsp;const char *keyname;
+&nbsp;&nbsp;&nbsp;const char *key;
+&nbsp;&nbsp;&nbsp;const char *string;
+&nbsp;&nbsp;&nbsp;const char *compose;
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+};
+</pre>
+
+</li>
+
+<li>for ECORE_EVENT_MOUSE_BUTTON_DOWN and ECORE_EVENT_MOUSE_BUTTON_UP: 
+<pre class="prettyprint">typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
+struct _Ecore_Event_Mouse_Button 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+&nbsp;&nbsp;&nbsp;unsigned int buttons;
+&nbsp;&nbsp;&nbsp;unsigned int double_click;
+&nbsp;&nbsp;&nbsp;unsigned int triple_click;
+&nbsp;&nbsp;&nbsp;int same_screen;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (eg multi-touch - other fingers)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and y if its an ellipse (radius is the average of the 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
+&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;double x, y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
+&nbsp;&nbsp;&nbsp;} multi;
+};
+</pre>
+ 
+</li>
+<li>for ECORE_EVENT_MOUSE_MOVE and ECORE_EVENT_MOUSE_WHEEL: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
+struct _Ecore_Event_Mouse_Wheel 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+&nbsp;&nbsp;&nbsp;int direction;
+&nbsp;&nbsp;&nbsp;int z;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+};
+</pre>
+</li>
+<li>for ECORE_EVENT_MOUSE_IN and int ECORE_EVENT_MOUSE_OUT: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
+struct _Ecore_Event_Mouse_Move 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; // 0 if normal mouse, 1+ for other mouse-devices (eg multi-touch - other fingers)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; // radius of press point - radius_x and y if it is an ellipse (radius is the average of the two)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; // pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; // angle relative to perpendicular (0.0 == perpendicular), in degrees
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; // same as x, y root.x, root.y, but with sub-pixel precision, if available
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
+&nbsp;&nbsp;&nbsp;} multi;
+};
+</pre>
+
+</li>
+</ul>
+<h3 id="ecore_event_handler_add" name="ecore_event_handler_add">Add an Event Handler: ecore_event_handler_add()</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function enables registering a callback for the given event. Its prototype is:</p>
+<pre class="prettyprint">
+Ecore_Event_Handler* 
+ecore_event_handler_add(int 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;Ecore_Event_Handler_Cb 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;const void* data)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">type</span> is an identifier for the event; for example, if you wish to receive notifications when keys are pressed, give <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">func</span> is the callback that is called when the event takes place.</li>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as the argument to the callback; it is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
+<li>return value is a pointer to the event handler, which can be used later to uninstall the handler.</li>
+</ul>
+
+<p>The type of the callback function is defined as follows.</p>
+<pre class="prettyprint">
+Eina_Bool (* Ecore_Event_Handler_Cb) (void *data, int type, void *event)</pre>
+<p>The callback function declaration is similar to:</p>
+<pre class="prettyprint">Eina_Bool some_ecore_event_cb(void *data, int type, void *event);</pre>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which was given as a parameter to ecore_event_handler_add().</li>
+<li><span style="font-family: Courier New,Courier,monospace">type</span> is the same as the <span style="font-family: Courier New,Courier,monospace">type</span> which was given as a parameter to ecore_event_handler_add().</li>
+<li><span style="font-family: Courier New,Courier,monospace">event</span> is an object whose actual type depends on the value of the <span style="font-family: Courier New,Courier,monospace">type</span> parameter and is one of <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Key</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Button</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Wheel</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Move</span>.</li>
+<li>The return value is either <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_PASS_ON</span>, to allow other callbacks for that event be called, or <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_DONE</span> to not call them.</li>
+</ul>
+<p>The code below is a short example of how to set a global variable to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> when the Control key is pressed.</p>
+<pre class="prettyprint">
+Eina_Bool ctrl_pressed = EINA_FALSE;
+
+static Eina_Bool
+_key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
+{
+&nbsp;&nbsp;&nbsp;// The callback is used with the ECORE_EVENT_KEY_DOWN signal: the
+&nbsp;&nbsp;&nbsp;// parameter &quot;void *ev&quot; is therefore of the actual type Ecore_Event_Key
+&nbsp;&nbsp;&nbsp;// The following renders its fields accessible
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
+
+&nbsp;&nbsp;&nbsp;// Test whether the key that is pressed is Ctrl.
+&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If it is, store that piece of information
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Let the event continue to other callbacks which have not been called yet
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+}
+
+ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
+</pre>
+
+<h3 id="ecore_event_handler_del" name="ecore_event_handler_del">Remove an Event Handler: ecore_event_handler_del()</h3>
+<p>To remove an event handler, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_del()</span> function. The prototype is:</p>
+<pre class="prettyprint">
+void* ecore_event_handler_del(Ecore_Event_Handler *event_handler)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">event_handler</span> is the value returned by <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span>.</li>
+<li>The return value is the <span style="font-family: Courier New,Courier,monospace">data</span> pointer that was used in the corresponding call to <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span>.</li>
+</ul>
+<h3 id="ecore_event_add" name="ecore_event_add">Send Events to the Main Loop Yourself: ecore_event_add()</h3>
+<p>You can send events to the main-loop, which helps to handle actions of various origins through the same codepath. Note that this is a thread-safe operation.</p>
+<p>To send an event, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_add()</span> function. The prototype is </p>
+<pre class="prettyprint">Ecore_Event* 
+ecore_event_add(int type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* ev,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_End_Cb func_free,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* func_free_data)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">type</span> is the event type. For example, <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ev</span> is the event data. It is given as a parameter to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace">func_free</span> is a function to free <span style="font-family: Courier New,Courier,monospace">ev</span> after the callback is called. It is optional: <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">func_free_data</span> is a pointer to additional data that is given as an argument to the <span style="font-family: Courier New,Courier,monospace">func_free</span> callback. It is optional: <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
+</ul>
+
+<p>The type of the <span style="font-family: Courier New,Courier,monospace">func_free</span> function is defined as follows.</p>
+<pre class="prettyprint">void (* Ecore_End_Cb)(void *user_data, void *func_free_data)</pre>
+<p>The callback function declaration is thus similar to</p>
+<pre class="prettyprint">void some_func_free(void *user_data, void *func_free_data);</pre>
+
+<h3 id="ecore_event_type_new" name="ecore_event_type_new">Create Your Own Type of Events: ecore_event_type_new()</h3>
+
+<p>You can create your own events. It also helps to use a single codepath.</p>
+<p>The function for creating your own events is <span style="font-family: Courier New,Courier,monospace">ecore_event_type_new()</span>. The prototype is: </p>
+<pre class="prettyprint">int ecore_event_type_new(void);</pre>
+<p>It generates a new unique identifier, which you can use as <span style="font-family: Courier New,Courier,monospace">type</span> in the functions described above.</p>
+  
+  <h2 id="edje" name="edje">Edje Events</h2>
+
+<h3>Table of Contents</h3>
+<ul>
+<li><a href="#events_guide_edje_without_layout">Basic Usage, for a Single Part</a></li>
+<li><a href="#events_guide_edje_with_layout">Usual Usage for Parts Aggregated in Groups: with Layouts</a></li>
+</ul>
+
+<p>Edje themes have <span style="font-family: Courier New,Courier,monospace">program</span> sections. These are small sections 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>
+<p>For more information on themes and programs, see the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Basic Usage for a Single Part</h3>
+<p>An example <span style="font-family: Courier New,Courier,monospace">program</span> is shown below: </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;;
+}
+</pre>
+<p>This is a program named &quot;change_color&quot;, which triggers on mouse clicks on the current part and emits a signal &quot;got.a.click&quot;. The source is set to &quot;color_changer&quot;.</p>
+
+<p>To catch this signal from the C side, you need to use either <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span>. The only difference between the two is that the previous one operates on an edje object and the latter one on an elementary object. Unless you do not use Elementary at all, use the Elementary variant.</p>
+<p>The prototypes of these two functions are shown below.</p>
+<pre class="prettyprint">void
+edje_object_signal_callback_add(Edje_Object *obj, const char *emission, const char *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;Edje_Signal_Cb func, void *data)
+</pre>
+<pre class="prettyprint">void
+elm_object_signal_callback_add(Evas_Object *obj, const char *emission, const char *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;Edje_Signal_Cb func, void *data)
+</pre>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> the object which emits the signal that you react on.</li>
+<li><span style="font-family: Courier New,Courier,monospace">emission</span> is the signal name (&quot;*&quot; acts as a wildcard).</li>
+<li><span style="font-family: Courier New,Courier,monospace">source</span> is the signal source (the second parameter to <span style="font-family: Courier New,Courier,monospace">SIGNAL_EMIT</span> above). (&quot;*&quot; acts as a wildcard.)</li>
+<li><span style="font-family: Courier New,Courier,monospace">func</span> is the callback when <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">source</span> match.</li>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data to pass that is given as the argument to the callback. It is optional and NULL is an acceptable value.</li>
+</ul>
+
+<p>The type of the callback function is defined as follows. </p>
+<pre class="prettyprint">void (*Edje_Signal_Cb) (void *data, Evas_Object *obj, const char *emission, const char *source);</pre>
+
+<p>The callback function definition is similar to</p>
+<pre class="prettyprint">void func(void *data, Evas_Object *obj, const char *emission, const char *source);</pre>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the data which was given as parameter to either <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object which emits the signal.</li>
+<li><span style="font-family: Courier New,Courier,monospace">emission</span> is the signal name.</li>
+<li><span style="font-family: Courier New,Courier,monospace">source</span> is the signal source.</li>
+</ul>
+
+<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Usual Usage for Parts Aggregated in Groups: with Layouts</h3>
+<p>Most of the time, edje and elementary are used together. In particular, you can define a group in Edje and use it as a layout in Elementary. This enables doing the theming and object placement in Edje while benefiting from the higher-level functions of Elementary. This is achieved through <span style="font-family: Courier New,Courier,monospace">layouts</span>, which contain several parts and are explained in the <a href="containers_n.htm#layout">Layout Container</a> guide.</p>
+<p>Since there are several parts in a layout, it is not possible to use <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span>, as they require a single emitter object. The solution is to use the dedicated function <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>. Its prototype is shown below.</p>
+<pre class="prettyprint">void
+elm_layout_signal_callback_add(Evas_Object *obj, const char *emission, const char *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;Edje_Signal_Cb func, void *data)
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> works very similarly to the functions described in the previous section. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> it is a pointer to an Evas_Object, which is obtained through <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> as described in the <a href="containers_n.htm#layout">Layout Container</a> guide. </p>
+
+  
+
+
+  
+  
+  <h2 id="evas" name="evas">Evas Events</h2>
+
+<h3>Table of Contents</h3>
+<ul>
+<li><a href="#evas_event_callback_add_del">Adding Callbacks to Canvases: evas_event_callback_add/del</a></li>
+<li><a href="#evas_events_types">Types of Evas Events</a></li>
+</ul>
+
+<p>Evas events happen on a canvas as a whole. This kind of events are too low-level for writing applications and are most often used when writing the graphical toolkit itself.</p>
+
+<h3 id="evas_event_callback_add_del" name="evas_event_callback_add_del">Adding Callbacks to Canvases: evas_event_callback_add/del</h3>
+<p>The callbacks are added with <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span>. Its prototype is</p>
+<pre class="prettyprint">void
+evas_event_callback_add(Evas* e, Evas_Callback_Type type, Evas_Event_Cb func, const void* data)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">e</span> is the evas canvas on which the events happen. If needed, it can be obtained from an Evas_Object through the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> function.</li>
+<li><span style="font-family: Courier New,Courier,monospace">type</span> is the type of event that triggers the callback (the list is in the next section).</li>
+<li><span style="font-family: Courier New,Courier,monospace">func</span> is the function that is called.</li>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as an argument to the callback. It is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
+</ul>
+
+<p>The type of the callback function is defined as follows.</p>
+<pre class="prettyprint">void (* Evas_Event_Cb) (void *data, Evas *e, void *event_info)</pre>
+
+<p>The callback function definition is similar to</p>
+<pre class="prettyprint">void some_evas_object_event_cb(void *data, Evas *e, void *event_info);</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which was given as the parameter to <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">e</span> is the canvas on which the event occurred.</li>
+<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is data which depends on the object type and the event at play. The documentation must be read for each such event.</li>
+</ul>
+
+<h3 id="evas_events_types" name="evas_events_types">Types of Evas Events</h3>
+<p>The values are defined from the <span style="font-family: Courier New,Courier,monospace">Evas_Callback_Type</span> enum. Some of them are not used for <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> but are used in the previous section.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_PRE</span>: The rendering on the canvas is about to be updated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_POST</span>: The rendering on the canvas is updated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_IN</span>: The canvas receives focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_OUT</span>: The canvas loses focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</span>: Any object on the canvas receives focus. It is advisable to use <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span> instead.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</span>: Any object on the canvas loses focus. It is advisable to use <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span> instead.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_PRE</span>: Rendering on the canvas starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_POST</span>: Rendering on the canvas finishes. </li>
+</ul>
+
+  <h2 id="evas_object" name="evas_object">Evas Object Events</h2>
+
+
+
+<h3>Table of Contents</h3>
+<ul>
+<li><a href="#evas_object_event_callback_add_del">Adding and Removing Callbacks: evas_object_event_callback_add/del</a></li>
+<li><a href="#evas_object_events_types">Types of Evas Object Events</a></li>
+</ul>
+
+<p>Each of the evas objects on a given evas canvas can be manipulated independently. They send events, to which callbacks can be attached through <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and removed with <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_del()</span>. These events all relate to single objects, not the whole canvas.</p>
+
+<h3 id="evas_object_event_callback_add_del" name="evas_object_event_callback_add_del">Adding and Removing Callbacks: evas_object_event_callback_add/del</h3>
+<p>Callbacks are added with <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span>. Its prototype is</p>
+<pre class="prettyprint">void
+evas_object_event_callback_add(Evas_Object* obj, Evas_Callback_Type type, Evas_Object_Event_Cb func, const void* data)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object to attach the callback to.</li>
+<li><span style="font-family: Courier New,Courier,monospace">type</span> is the type of event that triggers the callback (the list is in the next section).</li>
+<li><span style="font-family: Courier New,Courier,monospace">func</span> is the function that is called.</li>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as the argument to the callback. It is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
+</ul>
+
+<p>The type of the callback function is defined as follows.</p>
+<pre class="prettyprint">
+void (* Evas_Object_Event_Cb) (void *data, Evas *e, Evas_Object *obj, void *event_info)
+</pre>
+
+<p>The callback function definition is similar to</p>
+<pre class="prettyprint">
+void some_evas_object_event_cb(void *data, Evas *e, Evas_Object *obj, void *event_info);
+</pre>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which was given as the parameter to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">e</span> is the canvas on which the event occurred.</li>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object to which the event happened.</li>
+<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is data which depends on the object type and event at play. The documentation must be read for each event.</li>
+</ul>
+<h3 id="evas_object_events_types" name="evas_object_events_types">Types of Evas Object Events</h3>
+<p>The values are defined from the <span style="font-family: Courier New,Courier,monospace">Evas_Callback_Type</span> enum. Some of them are not used for <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span>, but are used in the next section.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>: the pointer got over an object (with no other object between the two). This takes place no matter how the pointer becomes directly above the object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_OUT</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>, but when the pointer goes outside an object&#39;s area. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Out</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: a mouse button is pressed while the object is receiving events (either because the pointer is on top of the object or because the object had focus). <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_WHEEL</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Wheel</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Move</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_UP</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span>: the object gained focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span>: the object lost focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_SHOW</span>: the object is shown by a call to <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HIDE</span>: the object is hidden by a call to <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOVE</span>: the object&#39;s origin was moved (origin is the top-left corner at the creation time of the object). <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span>: the object is resized. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESTACK</span>: the object is re-stacked by <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span>, <span style="font-family: Courier New,Courier,monospace">evas_object_stack_above()</span> or other events. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_DEL</span>: the object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FREE</span>: for internal use only. Do not use (the object resources are about to be freed). <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HOLD</span>: for internal use only. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Hold</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CHANGED_SIZE_HINTS</span>: the size hints of the object changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_PRELOADED</span>: an image which was preloaded through <span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span> is loaded. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_UNLOADED</span>: the image data is unloaded. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
+</ul>
+
+<h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
+
+<h3>Table of Contents</h3>
+<ul>
+<li><a href="#evas_object_smart_callback_add">Adding a Callback on an Event: evas_object_smart_callback_add()</a></li>
+<li><a href="#evas_object_smart_callback_del">Removing a Callback on an Event: evas_object_smart_callback_del()</a></li>
+<li><a href="#evas_smart_objects_examples">Examples</a>
+       <ul><li><a href="#evas_object_smart_callback_add_example">Basic Usage: Button with a Callback on the &quot;clicked&quot; Signal</a></li>
+       <li><a href="#evas_object_smart_callback_del_example">Usage with evas_object_smart_callback_del(): Clicking on the Button Removes the Callback</a></li>
+       </ul>
+</li>
+</ul>
+
+<p>Evas smart objects events are the most widely-used type of events in graphical applications, since they are used for signals such as &quot;clicked&quot;, &quot;clicked,double&quot; (double-click), &quot;pressed&quot;, etc. 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_add" name="evas_object_smart_callback_add">Adding a Callback on an Event: evas_object_smart_callback_add()</h3>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for an event to an object. Its prototype is</p>
+<pre class="prettyprint">
+void
+evas_object_smart_callback_add(Evas_Object* obj, const char* event, Evas_Smart_Cb func, const void* data)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object to add the callback to.</li>
+<li><span style="font-family: Courier New,Courier,monospace">event</span> is the name of the event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">func</span> is the function that is called.</li>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as the argument to the callback. It is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
+</ul>
+<p>The type of the callback function is defined as follows.</p>
+<pre class="prettyprint">
+void (* Evas_Smart_Cb) (void *data, Evas_Object *obj, void *event_info)</pre>
+<p>The callback function definition is similar to</p>
+<pre class="prettyprint">void some_evas_smart_cb(void *data, Evas_Object *obj, void *event_info);</pre>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which is given as the parameter to evas_object_smart_callback_add().</li>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object for which the event happened.</li>
+<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is data, which depends on the object type and event at play. The actual type is given in the documentation for the callback that is triggered.</li>
+</ul>
+<p>The following defines the <span style="font-family: Courier New,Courier,monospace">_button_clicked()</span> function and sets it as the callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> event of an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> (a button here).</p>
+<pre class="prettyprint">
+static void
+_button_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Insert function body here
+}
+
+static void
+some_function(void) 
+{
+&nbsp;&nbsp;&nbsp;// Code to build the window object
+&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+}
+</pre>
+
+<p>If some of the arguments are not used by the callback function, the compiler may raise the &quot;unused parameter&quot; warning. To avoid it, you can annotate the argument with the <span style="font-family: Courier New,Courier,monospace">__UNUSED__</span> macro, which is a compiler-independent way to let the compiler know that the parameter is willingly unused rather than by a mistake.</p>
+<pre class="prettyprint">void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);</pre>
+
+<p>For a given object and event, callbacks are called in the order they have been added. The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function does not execute any special processing if it is called several times with the same callback function and/or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
+
+<h3  id="evas_object_smart_callback_del" name="evas_object_smart_callback_del">Removing a Callback on an Event: evas_object_smart_callback_del()</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_del()</span> function enables deleting a callback for a signal on an object. Its prototype is</p>
+
+<pre class="prettyprint">void*
+evas_object_smart_callback_del(Evas_Object* obj, const char* event, Evas_Smart_Cb func)
+</pre>
+
+<p>It removes the first match for the given event and callback and returns the <span style="font-family: Courier New,Courier,monospace">data</span> pointer that was used in the corresponding call to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>.</p>
+
+<h3 id="evas_smart_objects_examples" name="evas_smart_objects_examples">Examples</h3>
+<h4 id="evas_object_smart_callback_add_example" name="evas_object_smart_callback_add_example">Basic Usage: Button with a Callback on the &quot;clicked&quot; Signal</h4>
+<pre class="prettyprint">static void
+_button_clicked(void *data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
+&nbsp;&nbsp;&nbsp;fflush(stdout);
+&nbsp;&nbsp;&nbsp;elm_exit();
+}
+
+static void
+_add_button(Evas_Object *window) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me To Exit!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+}
+</pre>
+
+<h4 id="evas_object_smart_callback_del_example" name="evas_object_smart_callback_del_example">Usage with evas_object_smart_callback_del(): Clicking on the Button Removes the Callback</h4>
+<pre class="prettyprint">static void
+_button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
+&nbsp;&nbsp;&nbsp;fflush(stdout);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
+}
+
+static void
+_add_button(Evas_Object *window) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+}
+</pre>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/events_effects_n.htm b/org.tizen.guides/html/native/ui/events_effects_n.htm
new file mode 100644 (file)
index 0000000..a7e0b05
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/events_effects_n.htm
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Effect</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#event_handling">Handling Events</a></li>
+                       <li><a href="#animation_effect">Creating Animations and Effects</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Event and Effect</h1> 
+  <p>Tizen allows you to manage different kinds of events and create various types of effects and animations in your application.</p>
+<p>The main features of events and effects are:</p> 
+  <ul>
+       <li><a href="#event_handling">Handling events</a> <p>Enables you to handle various types of events.</p></li> 
+       <li><a href="#animation_effect">Creating animations and effects</a> <p>Enables you to create animations and effects in your application.</p></li>
+       </ul>
+  
+<h2 id="event_handling" name="event_handling">Handling Events</h2>
+  
+<p>The EFLs rely on events and callbacks. In case of an event, (for example, a key press, mouse click or a battery running low), the mainloop calls the callback functions that are associated to that specific event. After the callbacks have finished, the mainloop 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 mainloop relatively quickly. If there is heavy work to do, it is best to use an asynchronous mechanism like Ecore_con for network I/O or threads for CPU-intensive tasks. Failure to return quickly to the mainloop blocks the application&#39;s UI and it appears frozen.</p>
+
+<h3 id="events_types" name="events_types">EFL Event Types</h3>
+<p>There are several event types in the EFLs, and their use depends on the level of the event. The event types from lower- to higher-level are:</p>
+<ul>
+<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 (which are most typically handled). They are called &quot;smart&quot; because they have internal logic and can define their own events while other event types are fixed.</li>
+<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_object">Evas object events</a> concern the objects that are on the canvas.</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>
+</ul>
+
+         <p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p> 
+  <p style="text-align:center;"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
+  
+       
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program sections in themes; they can be used from high-level Elementary APIs or a low-level Edje API.</td> 
+        </tr>
+   </tbody> 
+  </table> 
+
+<h3 id="basic_events_flow" name="basic_events_flow">Basic Event Flow</h3>
+<p>A realistic scenario involving various types of events is an application showing a button, which triggers the download of a file to be processed. There are progress bars for the operations.</p>
+<p>Create the window, create a box, set it vertical and add a button and two progress bars. At first, only the button is fully visible.</p>
+<p>When the user clicks on the button, an evas smart object event named &quot;clicked&quot; is emitted. The callback then starts the download in Ecore_con, 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>
+<p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through Ecore_thread. The processing function regularly updates the progress bar (wrapped in ecore_main_loop_thread_safe_call_async() because GUI operations are not thread-safe).</p>
+<p>Events enable operations taking more than a few milliseconds&#39; time to be executed outside of the mainloop, therefore not blocking UI redraws.</p>
+<p>Below is an illustration for the event flow that follows a click on the screen.</p>
+
+         <p class="figure">Figure: Event flow for a user click</p> 
+  <p style="text-align:center;"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
+  
+   
+  <h2 id="animation_effect" name="animation_effect">Creating Animations and Effects</h2>
+
+<p>This programming guide introduces the animation functionalities provided by the EFL: Ecore animators, Elementary transitions, Edje animations, and Evas Map animations.</p>
+
+<p>The first option for creating animations with EFL is to use <a href="animations_effects_n.htm#ecore_animation">Ecore animators</a>. To create an Ecore animation, you must first determine the duration of the animation, and then define a callback function that performs the animation with that duration.</p>
+
+<p>You can also create animations using <a href="animations_effects_n.htm#elm_transit">Elementary transitions</a>. Elementary transitions allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
+
+<p>A third option for animating objects is to use <a href="animations_effects_n.htm#edje_animation">Edje animations</a>, which are based on a simple principle: transitioning from one state to another. To animate an object with Edje, you have to first define the start and end states of the animation, and then transition the object from the start state to the end state.</p>
+
+<p>Finally, <a href="animations_effects_n.htm#evas_map_animation">Evas Map animations</a> allow you to apply transformations to all types of objects by way of UV mapping. In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p> 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/font_setting_n.htm b/org.tizen.guides/html/native/ui/font_setting_n.htm
new file mode 100644 (file)
index 0000000..5b555d5
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/font_setting_n.htm
@@ -0,0 +1,196 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Font Setting</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm">Font Setting Tutorial</a></li>        
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text class API</a></li>       
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts API</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Font Setting</h1> 
+       
+
+<p>Tizen provides various methods for setting fonts of the application text. Basically, all widgets have a default font, which can be changed according to the system settings.</p>
+
+<p>The font handling methods include:</p>
+
+<ul> 
+   <li>Setting the font for a widget using the <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts</a> API</li> 
+   <li>Setting the font using EDC</li>
+   <li>Changing the font and text size using the <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text class</a> API 
+   
+   <p>Certain words for <span style="font-family: Courier New,Courier,monospace;">text_class</span> are reserved for the system default and used for applying the system setting about font and font size. To change the font on your textblock and text parts in the EDC according to the system setting, you can use the reserved words for the text class:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">entry</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">title_bar</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">list_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">grid_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">toolbar_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">menu_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">tizen</span> class is not affected by the system font settings.</p>
+
+<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 show set 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_apply();
+</pre>
+</li>
+</ul>
+
+
+<h2 id="supported" name="supported">Supported Font Styles</h2>
+<p>The font styles supported by the EFL are listed in the following table.</p>
+
+<table>
+<caption>Table: Supported font styles</caption>
+<tbody>
+ <tr>
+  <th>Font feature</th>
+  <th>Style attribute</th>
+ </tr>
+<tr>
+ <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">font_style</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">oblique</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">italic</span></td>
+</tr>
+<tr>
+ <td rowspan="9"><span style="font-family: Courier New,Courier,monospace;">font_width</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultracondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extracondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">condensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semicondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semiexpanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">expanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extraexpanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultraexpanded</span></td>
+</tr>
+<tr>
+ <td rowspan="11"><span style="font-family: Courier New,Courier,monospace;">font_weight</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">thin</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultralight</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">light</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">book</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">medium</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semibold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">bold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultrabold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">black</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extrablack</span></td>
+</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 <span style="font-family: Courier New,Courier,monospace;">style=</span>, it is processed to the right attribute.</p>
+<pre class="prettyprint">
+font=TizenSans:style=Bold // Textblock
+&quot;TizenSans:style=Bold&quot;; // Text font
+&lt;font=TizenSans:style=Bold&gt; // Markup tag
+</pre>
+
+<p>You can also use each attribute separately:</p>
+
+<pre class="prettyprint">
+font=TizenSans font_style=Regular font_weight=Bold // Textblock
+&lt;font=TizenSans font_style=Regular font_weight=Bold&gt; // Markup tag
+</pre>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/main_loop_n.htm b/org.tizen.guides/html/native/ui/main_loop_n.htm
new file mode 100644 (file)
index 0000000..b8b96aa
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/main_loop_n.htm
@@ -0,0 +1,358 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Main Loop</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Timers">Timers</a></li>
+                       <li><a href="#Animators">Animators</a></li>
+                       <li><a href="#Descriptors_Handling">Handling File Descriptors</a></li>
+                       <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.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Main Loop</h1> 
+  
+<p>The EFL are event-driven: The application is be polling for data, but listening for events to interact with it.</p>
+
+<p>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 descriptor handling.</p>
+
+<p>When there is no ongoing event, it automatically enters an &quot;idle&quot; mode, leading to less power being consumed. It wakes up when needed.</p>
+  
+<h2 id="Timers" name="Timers">Timers</h2>
+<p>Ecore provides timers for applications. Timers schedule events that are executed later at a specific time, be it once or even several times with an interval.</p>
+
+<p>A timer callback prototype looks like <span style="font-family: Courier New,Courier,monospace;">Eina_Bool my_timed_cb(void *data)</span>. This function receives data from the application, and returns a Boolean value to specify whether it is called again or if it is done. The following macros are also provided:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: function is called again after the timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: function is not called again, Ecore destroys automatically everything associated with the timer.</li>
+</ul>
+
+<p>Adding a timer is done with <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add(interval, function, data)</span>. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.</p>
+
+<p>To create a simple timer: </p>
+
+<pre class="prettyprint">
+Eina_Bool my_timed_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;count++;
+
+&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_timer_add(2.0, my_timed_cb, my_data);
+</pre>
+
+<p>In this example, the function <span style="font-family: Courier New,Courier,monospace;">my_timed_cb</span> is run with after two seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable&#39;s value is under 5, and stops after that.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del(timer)</span> to delete the timer. To delete the timer, it must still be running, that is, it has not returned a false value meaning that it cannot be called any more.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set(timer, interval)</span> to change the timer&#39;s interval, the interval being specified in seconds. If set during a timer call, this affects the next interval. Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get(timer)</span> to get a timer&#39;s current interval.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get(timer)</span> to get a timer&#39;s pending time.</p>
+
+<p>Delay the timer&#39;s next occurrence using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay(timer, time)</span>, which 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 <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset(timer)</span>.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze(timer)</span> to pause the currently running timer. The remaining time is saved and used again when the timer is resumed with <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw(timer)</span>.</p>
+
+<p>The timer infrastructure has a defined precision. Query its current value by using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span>. A higher delay means that more timers can be run together. It diminishes the need to use system wake ups and thus lowers the power consumption.</p>
+
+<p>Set the precision using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set(precision)</span>. This sets it for all timers. For example, there are two timers, one that expires in a 2.0s and another that expires in 2.1s. The precision is set to 0.1s, then Ecore requests for the next expiration to happen in 2.1s and run both callbacks at once, instead of one at 2.0s and another one 0.1s later. However, if there were not one in 2.1s, the timeout would have been at the minimum interval, 2s.</p>
+
+<h2 id="Animators" name="Animators">Animators</h2>
+
+<p>Animators are a specific type of timers, specially designed for on-screen animation purposes:</p>
+
+<ul>
+<li>The time interval is usually known when they are created.</li>
+<li>They are called at each screen refresh, however that interval can vary: it may be dependant upon the system load, the target power consumption, and other factors; the exact interval is not really relevant.</li>
+</ul>
+
+<p>Due to that, Ecore provides the Ecore animator subsystem.</p>
+
+<h3>Forever-running Animator</h3>
+
+<p>To create an animation which runs for an indefinite time, the prototype is exactly the same as when using Ecore timers: </p>
+
+<pre class="prettyprint">
+Eina_Bool my_anim_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;count++;
+&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_animator_add(my_anim_cb, my_data);
+</pre>
+
+<p>This example looks the same as the one using an Ecore timer, save for the use of <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add</span> instead of <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add</span>. <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add</span> takes the function to call back and data to pass it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. However, this time, the function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
+
+<h3>Specific-duration Animator</h3>
+
+<p>An animator callback has a different prototype <span style="font-family: Courier New,Courier,monospace;">Eina_Bool my_anim_cb(void *data, double position)</span>.</p>
+
+<p>This function receives data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
+
+<p>The animator itself is created using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add(runtime, function, data)</span>. <span style="font-family: Courier New,Courier,monospace;">runtime</span> specifies the animator duration, <span style="font-family: Courier New,Courier,monospace;">function</span> is the one to call, and <span style="font-family: Courier New,Courier,monospace;">data</span> is the data to pass to the function and is optional. </p>
+
+<pre class="prettyprint">
+Eina_Bool my_anim_cb(void *data, double position)
+{
+&nbsp;&nbsp;&nbsp;if (position &lt; .5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_animator_timeline_add(5., my_anim_cb, my_data);
+</pre>
+
+<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passed half of the duration, so 2.5s.</p>
+
+<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at end</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 3.0 is cubed, etc</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, etc</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), 3.0 is cubed, etc</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated via power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span></li>
+</ul>
+
+<p class="figure">Figure: Position maps</p> 
+<p style="text-align:center;"><img alt="Position maps" src="../../images/pos_map_all.png" /></p> 
+
+<p>Delete an animator using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del(animator)</span>. To delete the animator, it must still be running, that is, it has not returned a false value meaning that it cannot be called any more.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze(animator)</span> to pause a currently running animator. Note that time continues ticking even if an animator is frozen, and that resuming the animation using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw(animator)</span> not actually resumes if the full runtime meanwhile has been passed.</p>
+
+<p>Query Ecore for the interval between two animator calls by using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span>. Use <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> to change it. Note that too small a value causes performance and power consumption issues, and too high value makes the animation jerky.</p>
+
+<h2 id="Descriptors_Handling" name="Descriptors_Handling">Handling File Descriptors</h2>
+
+<p>Ecore provides infrastructure to handle file descriptors monitoring, so that files do not have to be blocked or polled to read or write on them. Instead monitor sockets, pipes or other streams are used to get a file descriptor.</p>
+
+<p>Set callback using the following prototype: <span style="font-family: Courier New,Courier,monospace;">Eina_Bool _my_cb_func(void *data, Ecore_Fd_Handler *handler)</span>. Its first parameter is data passed to it (optional), the second one is the Ecore file descriptor handler. Its return value is, as most Ecore callbacks, <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>. It tells Ecore whether it wants to be called again or is its treatment finished.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add(fd, flags, function, data, buffer_function, buffer_data)</span> to listen the events. Its parameters are defined as follows:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">fd</span>: this is the file descriptor to monitor.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">flags</span>: this indicates what Ecore file descriptor monitors: <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> is for reading, <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_WRITE</span> is for writing, <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span> is for errors: define multiple values like <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ | ECORE_FD_ERROR</span> to monitor for both reading and errors.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">function</span>: the function to be called back.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">dat</span>a: some data passed to the function.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">buffer_function</span>: the function to call to check whether any data has been buffered and already read from the <span style="font-family: Courier New,Courier,monospace;">fd</span>: this is for internal use only and must not be used (give NULL): its description is beyond the current guide&#39;s scope.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">buffer_data</span>: data to pass to <span style="font-family: Courier New,Courier,monospace;">buffer_function</span>.</li>
+</ul>
+
+<p>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:</p>
+
+<pre class="prettyprint">
+Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
+{
+&nbsp;&nbsp;&nbsp;int fd;
+&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
+&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
+</pre>
+
+<p>To delete a file descriptor handler, use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del(handler)</span>. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get(handler)</span> to get a handler&#39;s file descriptor.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get(handler, flag)</span> to select whether a flag is active on a handler. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:</p>
+
+<pre class="prettyprint">
+Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
+{
+&nbsp;&nbsp;&nbsp;int fd;
+&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
+&nbsp;&nbsp;&nbsp;if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// We have an error!
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
+</pre>
+
+<p>To change the flags the handler is monitoring, use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set(handler, flags)</span>.</p>
+
+<h2 id="Threads" name="Threads">Threads</h2>
+
+<p>EFL is not entirely thread-safe. This means that if some task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. This can only be done from the main thread, the one running the main loop.</p>
+
+<p>Ecore provides a facility to have tasks be done on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. It makes it a lot easier to dispatch a worker function to perform some heavy tasks and then get the result once it completes, without blocking the application&#39;s UI. In addition, cancelling and rescheduling are easy to use and the several threads can be launched, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
+
+<p>Two kinds of Ecore threads exist: short jobs and feedback jobs. Short jobs are not giving any kind of information on their status to the parent, whereas feedback jobs are. The short jobs are best used for short computing-intensive snippets of code, whereas a typical example for the feedback jobs is an ongoing file download.</p>
+
+<p>Ecore basically creates a pool of worker threads: the exact count is computed from the number of CPUs, cores, or may be specified by the application itself.</p>
+
+<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left.</p>
+
+<pre class="prettyprint">
+struct feedback_msg
+{
+&nbsp;&nbsp;&nbsp;int pos;
+};
+
+void my_short_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;usleep(200000);
+}
+
+void my_feedback_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(50000); // You can have some real computation done
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;&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;ecore_thread_feedback(thread, message);
+&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;return;
+&nbsp;&nbsp;&nbsp;}
+}
+
+void my_feedback_job_notify(void *data, Ecore_Thread *thread, void *msg)
+{
+&nbsp;&nbsp;&nbsp;struct feedback_msg *message = msg;
+&nbsp;&nbsp;&nbsp;free(message);
+}
+
+void my_job_end(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has normally ended.\n&quot;);
+}
+
+void my_job_cancel(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has been cancelled.\n&quot;);
+}
+
+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, my_job_cancel, my_data, EINA_FALSE);
+</pre>
+
+<p>In this example, there are two threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job</span>. Both threads take two parameters: some data passed to them, and the actual thread running. Call a callback when the jobs are ended, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel</span>), or ended normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end</span>).</p>
+
+<p>Cancelling a thread is done by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel(thread)</span>. However, note that this is done cooperatively: the thread continues to run until it exists. Call <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check(thread)</span> regularly to check whether the thread as been marked for cancellation and exit if true.</p>
+
+<p>Run threads that are not accounted for in the worker threads pool. For that, the last parameter of <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run</span> must be set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+
+<p>The feedback message a thread sends as notification can basically be any kind of data. Here it is a simple integer, but it can be as complex as needed.</p>
+
+<p>A thread can ask to be executed later by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule(thread)</span>: it is added to the end of the pending tasks.</p>
+
+<p>Get the maximum number of concurrent threads by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span>. If needed, set it by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set(count)</span>, or reset the default value using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span>.</p>
+
+<p>Query the number of active threads by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>, and the number of available worker threads by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span>, which is basically the same as <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</p>
+
+<h2 id="Idlers" name="Idlers">Idlers</h2>
+
+<p>When the rendering is done and all work finished, the main loop enters its idle state until the next loop. You can get 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 <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
+
+<p class="figure">Figure: Idle loop</p> 
+<p style="text-align:center;"><img alt="Idle loop" src="../../images/idlers.png" /></p> 
+
+<p>Idle enterers, exiters, and idlers have the same prototype: <span style="font-family: Courier New,Courier,monospace;">Eina_Bool my_idler(void *data)</span>, receiving data, and returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or if its treatment is finished.</p>
+
+<p>Adding an idler is done by using <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add(callback, data)</span>, and deleting one is done by using <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del(idler)</span>.</p>
+
+<p>For idle exiters, use <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add(callback, data)</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del(exiter)</span>.</p>
+
+<p>For idle exiters, use <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add(callback, data)</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del(enterer)</span>. However, also <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add(callback, data)</span> is available if you want your function to be added at the top of the list so that it is called before the others.</p>
+
+<pre class="prettyprint">
+Eina_Bool my_idle_enterer_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+Eina_Bool my_idle_exiter_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+
+Eina_Bool my_idler(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+ecore_idle_enterer_add(my_idle_enterer_cb, my_data);
+ecore_idle_exiter_add(my_idle_exiter_cb, my_data);
+ecore_idler_add(my_idler_cb, my_data);
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/multiple_screens_n.htm b/org.tizen.guides/html/native/ui/multiple_screens_n.htm
new file mode 100644 (file)
index 0000000..278cc9a
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/multiple_screens_n.htm
@@ -0,0 +1,161 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#key_concepts">Key Concepts</a></li>
+                       <li><a href="#apply">Applying the Base Scale</a></li>                                           
+               </ul>
+       </div></div>
+</div> 
+
+<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 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> 
+  <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 Tizen Native UI Framework</h3> 
+  <p>Tizen native UI framework supports multiple scaling. If the application is implemented considering scalability, it is enough to change the <span style="font-family: Courier New,Courier,monospace;">elm_scale</span> value in different device environments without modifying the application code.</p> 
+  
+  <p>Scale 1.0 in 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 Tizen native UI framework, gets the size of an object by multiplying the size specified by an application using the 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 with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.</p>
+  
+  <p class="figure">Figure: Scaling from desktop to mobile</p> 
+  <p style="text-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 scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;. </p> 
+ 
+  <p>The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.</p>
+  
+  <p class="figure">Figure: Base scale</p> 
+  <p style="text-align: center;"> <img alt="Base scale" src="../../images/base_scale.png" /> </p> 
+  
+  <p>The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:</p>
+  
+  <table>
+<tbody>
+<tr>
+ <td>Scale = Device scale (information in the target) / Base scale (information in the application)
+<p>For example: 2.0 = 4.0 / 2.0</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+  <p>You must declare the following values as base scale:</p>
+  <ul>
+       <li>WVGA: 1.8</li>
+       <li>HD: 2.4</li>
+</ul>
+  
+  
+  
+  <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</a></li> 
+   <li><a href="#set_c">C code</a></li> 
+  </ul> 
+  <h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3> 
+  <p>The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example:</p> 
+  
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">The base scale for WVGA is 1.8, and for HD application, 2.4.</td> 
+      </tr>
+</tbody></table>
+<pre class="prettyprint">collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.8; // This value is for WVGA application
+&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;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+  <h3 id="set_c" name="set_c">Setting the Base Scale in C</h3> 
+  <p>The size of the object must be specified in EDC. However, sometimes it is better for an application to the object size in a C file. If the size is defined with no scaling in the C file, the application is displayed in the same size even if the scale changes. To avoid this, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro, as in the following example:</p> 
+
+<pre class="prettyprint">#define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()</pre>
+
+  <p>in the definition, the size (<span style="font-family: Courier New,Courier,monospace;">x</span>) is changed to a size based on 1.0 (<span style="font-family: Courier New,Courier,monospace;">x/elm_app_base_scale_get()</span>) and it is multiplied with the scale of the current target (<span style="font-family: Courier New,Courier,monospace;">elm_config_scale_get()</span>).</p>
+  
+  <p>Set the base scale using the <span style="font-family: Courier New,Courier,monospace;">elm_app_base_scale_set()</span> function:</p>
+  
+<pre class="prettyprint">int app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;elm_app_base_scale_set(1.8); // This value is for WVGA application
+}
+</pre> 
+  <p>After setting the base scale, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro to set the size of an object in the application:</p> 
+
+<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 <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in any API related with setting objects sizes in Tizen native 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/threads_n.htm b/org.tizen.guides/html/native/ui/threads_n.htm
new file mode 100644 (file)
index 0000000..57bc60b
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/threads_n.htm
@@ -0,0 +1,617 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Thread Usage</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#When_to_use">When to Use Threads</a></li>
+                       <li><a href="#Thread_safety">Thread Safety</a></li>
+                       <li><a href="#Costs">Costs of Threads and Use of Thread Pools</a></li> 
+                       <li><a href="#Functions">Ecore Functions</a></li>
+                       <li><a href="#max_threads">Maximum Number of Threads in the Pool</a></li>
+                       <li><a href="#low_level">Low-level Functions</a></li>
+                       <li><a href="#Examples">Examples</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>  
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Thread Usage</h1> 
+       <p>Threads are light processes: concurrent execution environments that are lighter than full-blown processes because they share some operating system resources.</p>
+
+<p>They 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>
+
+<p>Moving a blocking operation to a separate thread makes it possible to not block the event loop and keep the user interface reactive. Remember that blocking the event loop and using long-running callbacks means the application is be able to update its graphical user interface.</p>
+
+<h2 id="When_to_use" name="When_to_use">When to Use Threads</h2>
+
+<p>While threads are useful, the first rule to using them is to avoid them as much as possible: there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> which integrates with the event loop to provide an API based on callbacks.</p>
+
+<p>Being able to use such an API however means that specific support work has been done in libraries. However, in some cases, it is completely impossible: in those situations, threads are required.</p>
+
+<p>The most common use-cases are therefore CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</p>
+
+<p>Threads also enable you to take advantage of the numerous CPU cores available if the workload is split into several units of work and spread across cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on a thread. For such tasks, the thread pool which is presented below helps a lot with the creation and scheduling of threads (all of the grunt work is handled by the thread pool).</p>
+
+<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
+
+<p>If several strings have to work on the same resources, conflicts may happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are the old ones while others are the new ones. Similar issues can happen if both are modifying data concurrently.</p>
+
+<p>Such conflicts are called race-conditions: depending on which thread is faster, the output changes and may be incorrect.</p>
+
+<p>Avoiding such issues when threads are involved is called thread-safety. Critical sections are blocks of code that operate on shared resources that must not be accessed concurrently by another thread. The usual solution is mutual-exclusion: only one thread can operate on the data at any given time.</p>
+
+<p>Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, threads wait until they can lock something called a mutex (stands for mutual exclusion), operate on the resource and unlock the mutex. Operating systems guarantee that only one thread can lock a mutex at a given time: this ensures that only one thread operates on the shared resource at once.</p>
+
+<p>Thread-safety is a large topic and you should read the <a href="#low_level">low-level functions</a> section if you do not know it or need a refresher. It has links to several online and offline resources on the topic.</p>
+
+<h2 id="Costs" name="Costs">Costs of Threads and Use of Thread Pools</h2>
+
+<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progress slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
+
+<p>A common solution is to use thread pools: threads, up to a maximum number, are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost to create and destroy them.</p>
+
+<p>In the EFLs, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter: the maximum number of threads running at the same time. Another aspect is the <span style="font-family: Courier New,Courier,monospace;">func_end</span> callback which runs from the mainloop thread after a task has completed and is typically used to extract the data from the just-finished task and make it available to the mainloop.</p>
+
+<p>The illustration below shows the occupancy of a hypothetical thread pool: there are several tasks, of which 4 are running (because the <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4) and the others are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end</span> currently called.</p>
+
+<p class="figure">Figure: Thread pool, step 1</p> 
+<p style="text-align:center;"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p> 
+
+<p>When a task (the sepia filter on image1 for instance) finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end</span> function is invoked from the mainloop.</p>
+
+<p class="figure">Figure: Thread pool, step 2</p> 
+<p style="text-align:center;"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p> 
+
+<p>With the task done, one of the thread from the pool is available again and another can run in it (adding the reverberation effect on audio3 in the example below).</p>
+
+<p class="figure">Figure: Thread pool, step 3</p> 
+<p style="text-align:center;"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p> 
+
+<p>The thread pool continues the same way forever, running tasks in its threads whenever there is one available.</p>
+
+<h2 id="Functions" name="Functions">Ecore Functions</h2>
+
+<p>Ecore offers a simplified API for common tasks involving threads in EFL applications. This applies to the typical scenario where the main thread creates another thread which then sends data back to the main one or calls GUI-related functions (which are not thread-safe).</p>
+
+<h3>Creating Threads with Ecore</h3>
+
+<p>Threads created through Ecore are integrated with the thread-pool by default and offer simple callback-based ways to interact with the main-loop. New threads are created as needed to run these functions until the maximum capacity of the thread pool is reached.</p>
+
+<h4>Only Returning a Final Value to the Main Thread</h4>
+
+<p>The basic API to create and run a thread is <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run</span>; it runs a function inside a thread from the thread pool and takes care of all the low-level work. Its prototype is as follows: </p>
+
+<pre class="prettyprint">
+Ecore_Thread* ecore_thread_run(Ecore_Thread_Cb func_blocking,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread_Cb func_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread_Cb func_cancel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 void * data)
+</pre>
+
+<p>The parameters are:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_blocking</span>: the function that runs in the other thread</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_end</span>: the function that calls from the main-loop when <span style="font-family: Courier New,Courier,monospace;">func_blocking</span> finishes (optional, may be <span style="font-family: Courier New,Courier,monospace;">NULL</span>)</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_cancel</span>: the function that calls from the main loop when the thread is cancelled or fails to start (optional, may be <span style="font-family: Courier New,Courier,monospace;">NULL</span>)</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">data</span>: the pointer for additional data that is given as argument to the <span style="font-family: Courier New,Courier,monospace;">func_blocking</span>, <span style="font-family: Courier New,Courier,monospace;">func_end</span>, and <span style="font-family: Courier New,Courier,monospace;">func_cancel</span>: the callbacks (optional, may be <span style="font-family: Courier New,Courier,monospace;">NULL</span>)</li>
+</ul>
+
+<p>It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
+
+<p>The type for the <span style="font-family: Courier New,Courier,monospace;">func_blocking</span>, <span style="font-family: Courier New,Courier,monospace;">func_end</span> and <span style="font-family: Courier New,Courier,monospace;">func_cancel</span> callbacks is <span style="font-family: Courier New,Courier,monospace;">Ecore_Thread_Cb</span>: </p>
+
+<pre class="prettyprint">
+void (* Ecore_Thread_Cb)(void *data, Ecore_Thread *thread)
+</pre>
+
+<p>Therefore, the declaration of a matching function is: </p>
+
+<pre class="prettyprint">
+void f(void *data, Ecore_Thread *thread)
+</pre>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">data</span>: same as the data which was given as parameter to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">thread</span>: a handle to the thread in which the function is running</li>
+</ul>
+<p>The most common way to return data from one thread to the main one is to put a pointer to it in data. When the thread is aborted or finishes, one of <span style="font-family: Courier New,Courier,monospace;">func_cancel</span> or <span style="font-family: Courier New,Courier,monospace;">func_end</span> are called from the main-loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
+
+<p>This approach to returning data to the main thread is limited to the case where the data is shared between the main-loop thread and only another one. This does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end</span> callback to merge the results into a single data structure. For example, it is perfectly reasonable to add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span> since all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p>
+
+<h4>Returning Values to the Main Thread</h4>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run</span> function has more parameters in order to send intermediate feedback from the thread to the main-loop. Its prototype is shown below: </p>
+
+<pre class="prettyprint">
+Ecore_Thread* ecore_thread_feedback_run(Ecore_Thread_Cb func_blocking,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread_Notify_Cb func_notify,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread_Cb func_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread_Cb func_cancel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool try_no_queue)
+</pre>
+
+<p>The parameters are:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_blocking</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_end</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_cancel</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">data</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">func_notify</span>: a callback to run from the main-loop whenever <span style="font-family: Courier New,Courier,monospace;">func_blocking</span> calls in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> is called</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">try_no_queue</span>: a Boolean: if true, Ecore attempts to spawn a new thread regardless of the thread pool status, and only attempts to use the thread pool if this fails</li>
+</ul>
+
+<p>The type for the <span style="font-family: Courier New,Courier,monospace;">func_notify</span> callback is given below: </p>
+
+<pre class="prettyprint">
+void (* Ecore_Thread_Notify_Cb) (void *data, Ecore_Thread *thread, void *msg_data)
+</pre>
+
+<p>Therefore, the declaration of a matching function is: </p>
+
+<pre class="prettyprint">
+void notify_callback (void *data, Ecore_Thread *thread, void *msg_data)
+</pre>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">data</span>: same as the data which was given as parameter to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">thread</span>: a handle to the thread in which the function is running</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">msg_data</span>: the pointer given to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span></li>
+</ul>
+
+<p>The prototype of the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function is shown below: </p>
+
+<pre class="prettyprint">
+Eina_Bool ecore_thread_feedback(Ecore_Thread *thread,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 void *msg_data)
+</pre>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">thread</span>: the thread handle for the current thread; it is given to the various callbacks mentioned above</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">msg_data</span>: a pointer to the data to send to the <span style="font-family: Courier New,Courier,monospace;">func_notify</span> callback that runs from the main-loop</li>
+</ul>
+
+<h3>Running Callbacks from the Mainloop</h3>
+
+<p>If you are doing operations in an another thread and want to update a progress bar, the operation must be done from the main thread. The simplest way to do so is to use <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span>. It takes a function and some data as parameter and instructs the main-loop to execute the given function with the given data. </p>
+
+<pre class="prettyprint">
+void ecore_main_loop_thread_safe_call_async(Ecore_Cb callback, void *data)
+</pre>
+
+<p>This function takes two arguments and returns nothing. The arguments are:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">callback</span>: function to execute from the main-loop</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">data</span>: data to pass to the callback when calling it</li>
+</ul>
+
+<p>The declaration of <span style="font-family: Courier New,Courier,monospace;">Ecore_Cb</span> is given below:</p>
+
+<pre class="prettyprint">
+typedef void(* Ecore_Cb)(void *data)
+</pre>
+
+<p>Therefore the prototype for such a function is: </p>
+
+<pre class="prettyprint">
+void _some_function(void *data);
+</pre>
+
+<p>If it is called from a thread that is not the main one, it sends a message to the main-loop and returns quickly. The message is processed similarly to others, i.e. in order.</p>
+
+<p>If it is called from the main thread, the function is called immediately as if it were a direct call.</p>
+
+<p>If you wish to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function which is similar but synchronous: </p>
+
+<pre class="prettyprint">
+void * ecore_main_loop_thread_safe_call_sync(Ecore_Data_Cb callback, void *data)
+</pre>
+
+<p>Also, since it is synchronous, it is able to return the value returned by the callback. This can be seen in the type of the callback which returns a void *: </p>
+
+<pre class="prettyprint">
+typedef void * (* Ecore_Cb)(void *data)
+</pre>
+
+<h2 id="max_threads" name="max_threads">Maximum Number of Threads in the Pool</h2>
+
+<p>The maximum number of threads in Ecore&#39;s pool is governed by the <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter.</p>
+
+<p>Retrieve the current value with <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span>:</p>
+
+<pre class="prettyprint">
+int ecore_thread_max_get(void)
+</pre>
+
+<p>Set the value with <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> (up to a maximum of 16 × CPU count):</p>
+
+<pre class="prettyprint">
+void ecore_thread_max_set(int maximum)
+</pre>
+
+<p>If needed, reset the maximum number of threads: </p>
+
+<pre class="prettyprint">
+int ecore_thread_max_reset(void)
+</pre>
+
+<p>A function related to these is <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span>: it returns the number of running threads less the current maximum number of threads and may be negative if the maximum number of threads has been lowered. </p>
+
+<pre class="prettyprint">
+int ecore_thread_available_get(void)
+</pre>
+
+<h2 id="low_level" name="low_level">Low-level Functions</h2>
+
+<p>Eina offers low-level APIs that are portable across operating system: locks, conditions, semaphores, barriers, spinlocks, etc. The API follows closely pthreads.</p>
+
+<p>While these are useful, they are building blocks and are not usually useful to EFL applications considering the higher-level functions that are available in Ecore.</p>
+
+<p>A detailed presentation of threads is too large for this guide. The links below are good introductions to threads and pthreads in particular.</p>
+
+<ul>
+<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="blank">Basic use of pthreads</a> (IBM developerWorks)</li>
+<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
+<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="blank">POSIX 2003 specification</a> (opengroup)</li>
+</ul>
+
+<p>If you are already familiar with threads, refer to a standard pthreads documentation and the Eina reference documentation or to the API list below; remember that it is a very close mapping of the pthreads API.</p>
+
+<table>
+<caption>Locks (mutual exclusions)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads API </th> 
+<th>Eina equivalent </th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_lock_new (Eina_Lock *mutex)</span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_lock_free (Eina_Lock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_lock_take (Eina_Lock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_lock_take_try (Eina_Lock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_lock_release (Eina_Lock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p>none (prints debug information on the lock) </p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_lock_debug (const Eina_Lock *mutex) </span></p></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Conditions (notifications when condition objects change)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads API </th> 
+<th>Eina equivalent </th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_new (Eina_Condition *cond, Eina_Lock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_condition_free (Eina_Condition *cond) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_wait (Eina_Condition *cond) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_timedwait (Eina_Condition *cond, double t) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()      </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_broadcast (Eina_Condition *cond) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_signal (Eina_Condition *cond) </span></p></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>RWLocks (Read-Write Locks, for multiple-readers/single-writer scenarios)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads API </th> 
+<th>Eina equivalent </th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_rwlock_new (Eina_RWLock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_rwlock_free (Eina_RWLock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_rwlock_take_read (Eina_RWLock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_rwlock_take_write (Eina_RWLock *mutex) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_rwlock_release (Eina_RWLock *mutex) </span></p></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>TLS (Thread-Local Storage)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads API </th> 
+<th>Eina equivalent </th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_key_create() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_tls_new (Eina_TLS *key) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_tls_free (Eina_TLS key) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void * eina_tls_get (Eina_TLS key) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_tls_set (Eina_TLS key, const void *data) </span></p></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Semaphores (access restrictions for set of resources)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads API </th> 
+<th>Eina equivalent </th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_init() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_new (Eina_Semaphore *sem, int count_init) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_destroy() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_free (Eina_Semaphore *sem) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_wait() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_lock (Eina_Semaphore *sem) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_post() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_release (Eina_Semaphore *sem, int count_release) </span></p></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>TLS (Thread-Local Storage)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads API </th> 
+<th>Eina equivalent </th> 
+</tr> 
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_barrier_new (Eina_Barrier *barrier, int needed) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_barrier_free (Eina_Barrier *barrier) </span></p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait() </span></p></td> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_barrier_wait (Eina_Barrier *barrier) </span></p></td> 
+</tr>
+</tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<p>The two examples below display a window with only a label. An auxiliary thread semi-regularly changes the text of the label. Note that if you want to do a regular animation, use Ecore animators which are described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
+
+<h3>Using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span></h3>
+
+<p>The first example uses <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> to call the GUI functions from the main thread. The function that is used to handle the feedback simply sets the text of a label:</p>
+
+<pre class="prettyprint">
+static void
+_set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
+{
+&nbsp;&nbsp;&nbsp;char buf[64];
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Tick %d&quot;, (int)(uintptr_t)msgdata);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+}
+</pre>
+
+<p>The feedback is sent from the function shown below; it does nothing besides sleeping and sending feedback.</p>
+
+<pre class="prettyprint">
+static void
+_long_function(void *data __UNUSED__, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;int iteration;
+&nbsp;&nbsp;&nbsp;// Change the text roughly every 1 second. This is only an example; if you
+&nbsp;&nbsp;&nbsp;// want to do that, use ecore animators!
+&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Since we are running from another thread, we need to take special
+&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;// feedback function given when creating the thread.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sleep for roughly one second.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Create a function that is called when the thread exits. In the example, this is called only right before the application exits but if the blocking function was more complex, it can trigger it.</p>
+
+<pre class="prettyprint">
+static void
+_end_func(void *data, Ecore_Thread *thread __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Ticks over&quot;);
+}
+</pre>
+
+<p>The final bit is a call to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> which starts the thread.</p>
+
+<pre class="prettyprint">
+ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
+</pre>
+
+<h3>Using <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span></h3>
+
+<p>The second example is very similar to the first one except that it uses <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> to do its GUI operations.</p>
+
+<p>The callback receives data as a structure and alternatively displays &quot;Tick d&quot; or &quot;Tock d&quot;.</p>
+
+<pre class="prettyprint">
+struct thd 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad;
+&nbsp;&nbsp;&nbsp;Eina_Bool tick_not_tock;
+&nbsp;&nbsp;&nbsp;int iteration;
+};
+static void *
+_set_label_text_tick_tock(void *data)
+{
+&nbsp;&nbsp;&nbsp;char buf[64];
+&nbsp;&nbsp;&nbsp;struct thd *thd = data;
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf),
+&nbsp;&nbsp;&nbsp;&quot;%s %d&quot;,
+&nbsp;&nbsp;&nbsp;(thd-&gt;tick_not_tock ? &quot;Tick&quot; : &quot;Tock&quot;),
+&nbsp;&nbsp;&nbsp;thd-&gt;iteration);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(thd-&gt;ad-&gt;label, buf);
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre>
+
+<p>The function in the thread is also slightly larger since it needs to differentiate between ticks and tocks:</p>
+
+<pre class="prettyprint">
+static void
+_long_function_tick_tock(void *data, Ecore_Thread *thread __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct thd *thd = malloc(sizeof(struct thd));
+&nbsp;&nbsp;&nbsp;thd-&gt;ad = data;
+&nbsp;&nbsp;&nbsp;for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_TRUE;
+&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;sleep(1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_FALSE;
+&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;sleep(1);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;free(thd);
+}
+</pre>
+
+<p>Finally, starting the thread is done through <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> and is therefore very similar to the previous example.</p>
+
+<pre class="prettyprint">
+ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
+</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_control_n.htm b/org.tizen.guides/html/native/ui/ui_control_n.htm
new file mode 100644 (file)
index 0000000..b57e503
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/ui_control_n.htm
@@ -0,0 +1,550 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Control</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#scalability">Scaling Widgets</a></li>                     
+                               <li><a href="#widgets">Using Widgets</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Control</h1> 
+  <p>The UI control management features allow you to the widgets and their focus on the screen, as well as create customizations. The Elementary library provides several widgets than can be used to compose the user interface of your application.</p> 
+  <p>The main features of UI control management are:</p>
+               <ul>
+                       <li><a href="#scalability">Scaling widgets</a> <p>Enables you to scale widgets in order to be comfortably used with a finger and make text more readable.</p></li>                      
+                       <li><a href="#widgets">Using widgets</a> <p>Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.</p></li>   
+               </ul>
+  
+  <h2 id="scalability" name="scalability">Scaling Widgets</h2> 
+  
+<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale widgets with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the widgets need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a widget (text or icons for example), so that it is more visible in the user interface.</p>
+
+<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales widgets based on the user&#39;s finger size. This is useful when using a touchscreen 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. This parameter scales the input and interactive areas.</p>
+
+<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of widgets so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
+
+<p>To increase the current global finger size by 20px:</p>
+
+<pre class="prettyprint">
+Evas_Coord finger_size;
+
+/* Get the current finger size */
+finger_size = elm_config_finger_size_get();
+
+/* Add 20px to finger size parameter and set it to the global Elementary
+* configuration */
+elm_config_finger_size_set(finger_size + 20);
+</pre>
+
+<h3 id="Scale" name="Scale">Scale</h3>
+
+<p>This parameter only scales the readable areas of the widget (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the widgets. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary widget and all its children.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
+
+<pre class="prettyprint">
+Evas_Object *button;
+
+/* The button object is created and configured */
+
+/* Set the global scale factor to 2.0 */
+elm_config_scale_set(2.0);
+
+/* Set the scaling factor of the button widget to 2.0, this widget
+* appears 4 times bigger than its initial size */
+elm_object_scale_set(button, 2.0);
+</pre>
+
+<h3 id="Example" name="Example">Example</h3>
+
+<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
+
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p> 
+<p style="text-align:center;"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p> 
+
+<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
+
+<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
+
+<p class="figure">Figure: Scale increased (1.30)</p> 
+<p style="text-align:center;"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p> 
+
+<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
+
+<p class="figure">Figure: Finger size increased (90px)</p> 
+<p style="text-align:center;"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p> 
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. Refer to the <a href="edje_n.htm">Edje</a> guide for more information on how to do that.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
+
+<h4>Scale Parameter </h4>
+
+<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
+
+<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;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;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;}
+}
+</pre>
+
+<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable as explained in the <a href="edje_n.htm#Scalability">scalability chapter of the Edje guide</a>. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
+
+<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;scale: 1;
+&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;scale: 1;
+&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;}
+}
+</pre>
+
+<h4>Image Set</h4>
+
+<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image as explained in the Using Image Set chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&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;name: &quot;bg.png&quot;;
+&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;image: &quot;bg_low.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&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;&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;image: &quot;bg_high.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
+
+<p class="figure">Figure: Image set example</p> 
+<p style="text-align:center;"><img alt="Image set example" src="../../images/scale.png" /></p> 
+
+<p>The first button&#39;s size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
+
+<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
+
+<h4>Image Borders</h4>
+
+<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is. This is explained in the Border resizing chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
+
+<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;image.border: 40 40 20 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
+
+<p class="figure">Figure: Border example</p> 
+<p style="text-align:center;"><img alt="Border example" src="../../images/border.png" /></p> 
+
+  <h2 id="widgets" name="widgets">Using Widgets</h2>
+  
+  <p class="figure">Figure: Elementary</p>
+<p style="text-align:center;"><img alt="Elementary" src="../../images/elementary.png" /></p>
+
+<p>The Elementary library is a simple toolkit. It provides several widgets than can be used to compose the user interface of your application. Widgets allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. Widgets will often generate signals that can be caught in the application when the user interacts with the widgets. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common widgets.</p>
+
+<h3 id="elm_basics" name="elm_basics">Elementary Basics</h3>
+
+<p>In this chapter, we explain how widgets are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for widgets.</p>
+
+<p><a href="elementary_n.htm#basics">Elementary Basics</a></p>
+
+<h3 id="elm_config" name="elm_config">Elementary Configuration</h3>
+
+<p>Elementary can be configured using profiles. This chapter details some configuration items that can be modified to tweak the use of Elementary.</p>
+
+<p><a href="elementary_n.htm#config">Elementary Configuration</a></p>
+
+<h3 id="ui" name="ui">UI Widgets</h3>
+  
+  <table border="1"> 
+   <caption>
+     Table: Available UI widgets
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Widget name</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>      
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#background">Background</a></td> 
+     <td>The background widget 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 tiled, centered, scaled, or stretched.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#button">Button</a></td> 
+     <td>The button widget 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 class="opensection" href="ui_widgets_n.htm#check">Check</a></td> 
+     <td>The check widget toggles the value of a Boolean between true and false.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#colorselector">Colorselector</a></td> 
+     <td>The colorselector widget provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#ctxpopup">Ctxpopup</a></td> 
+     <td>The ctxpopup widget is a contextual popup that can show a list of items.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#datetime">Datetime</a></td> 
+     <td>The datetime widget can display and input date and time values.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#entry">Entry</a></td> 
+     <td>The entry widget is a box to which the user can enter text.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#flip">Flip</a></td> 
+     <td>The flip widget can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#gengrid">Gengrid</a></td> 
+     <td>The gengrid widget displays objects on a grid layout and renders only the visible objects.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#genlist">Genlist</a></td> 
+     <td>The genlist widget displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+    </tr>
+               <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#glview">GLView</a></td> 
+     <td>The GLView widget can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#icon">Icon</a></td> 
+     <td>The icon widget inherits from the image widget. It is used to display images in an icon context.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#image">Image</a></td> 
+     <td>The image widget can load and display an image from a file or from memory.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#index">Index</a></td> 
+     <td>The index widget provides an index for fast access to another group of UI items.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#label">Label</a></td> 
+     <td>The label widget displays text with simple HTML-like markup.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#list">List</a></td> 
+     <td>The list widget is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist widget instead.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#map">Map</a></td> 
+     <td>The map widget can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
+    </tr>
+               <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#notify">Notify</a></td> 
+     <td>The notify widget 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 class="opensection" href="ui_widgets_n.htm#panel">Panel</a></td> 
+     <td>The panel widget is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#photo">Photo</a></td> 
+     <td>The photo widget can be used to display a photo, such as a contact image. If no photo is set, the widget displays a person icon to show that it is a photo placeholder.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#photocam">Photocam</a></td> 
+     <td>The photocam widget 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> 
+     <td><a class="opensection" href="ui_widgets_n.htm#plug">Plug</a></td> 
+     <td>The plug widget allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary widget.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#popup">Popup</a></td> 
+     <td>The popup widget shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#progressbar">Progressbar</a></td> 
+     <td>The progressbar widget can be used to display the progress status of a given job.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#radio">Radio</a></td> 
+     <td>The radio widget can display 1 or more options, but the user can only select one of them. The widget 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 widgets, it can also be used alone.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#segmentcontrol">Segmentcontrol</a></td> 
+     <td>The slider widget is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#slider">Slider</a></td> 
+     <td>The slider widget is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#spinner">Spinner</a></td> 
+     <td>The spinner widget enables the user to increase or decrease a numeric value by using arrow buttons.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#toolbar">Toolbar</a></td> 
+     <td>The toolbar widget 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 class="opensection" href="ui_widgets_n.htm#tooltip">Tooltip</a></td> 
+     <td>The tooltip widget 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>Transit</td> 
+     <td>The transit widget can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit widget is documented in the <a href="events_effects_n.htm#animation_effect">Creating Animations and Effects</a> guide.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="ui_widgets_n.htm#win">Win</a></td> 
+     <td>The win widget is the root window widget that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+    </tr>
+   </tbody> 
+  </table> 
+  
+  <h3 id="focus" name="focus">Widget Focus</h3>
+
+<p>You can programmatically change the focus of widgets in an EFL application.</p>
+
+<p><a href="widget_preferences_n.htm#focus">Managing Widget Focus</a></p>
+
+<h3 id="styleguide" name="styleguide">Widget Styles</h3>
+
+<p>You can apply styles to various widgets to change their appearance.</p>
+
+<p><a href="widget_preferences_n.htm#style">Using Widget Styles</a></p>
+
+<h3 id="customization" name="customization">Widget Customization</h3>
+
+<p>You can use themes and styles to customize the look and feel of widgets.</p>
+
+<p><a href="widget_preferences_n.htm#customize">Customizing Widgets</a></p>
+  
+  <h3 id="containers" name="containers">Container Widgets</h3> 
+  
+ <p>All applications use containers to create the layout of their UI. The EFL and Elementary support several ways to create this layout. You can use a predefined layout or an animated layout, or you can create your own layout.</p>
+
+<p>In this guide, we look at how to use the different containers provided by Elementary.</p>
+ 
+   <table border="1"> 
+   <caption>
+     Table: Available container widgets
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Widget name</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>      
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#box">Box</a></td> 
+     <td>One of the most simple containers in the EFL is a box.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#conformant">Conformant</a></td> 
+     <td>A conformant is a container widget that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#grid">Grid</a></td> 
+     <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#layout">Layout</a></td> 
+     <td>A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#mapbuf">Mapbuf</a></td> 
+     <td>A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#naviframe">Naviframe</a></td> 
+     <td>A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#panes">Panes</a></td> 
+     <td>A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#scroller">Scroller</a></td> 
+     <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
+    </tr>
+       <tr> 
+     <td><a class="opensection" href="containers_n.htm#table">Table</a></td> 
+     <td>A table is like a box but with 2 dimensions.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_guide_n.htm b/org.tizen.guides/html/native/ui/ui_guide_n.htm
new file mode 100644 (file)
index 0000000..444c0c9
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/ui_guide_n.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>  
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI</h1> 
+  <p>UI features include all aspects of creating a visual outlook for your application to ensure the best possible user experience.</p>
+  <p>The main UI features are:</p>
+     <ul>       
+        <li><a href="efl_n.htm">EFL</a> <p>Enables you to construct graphical user interfaces.</p></li>
+        <li><a href="eina_n.htm">Eina</a> <p>Enables you to create and manipulate the most common data types and tools of Eina.</p></li>
+        <li><a href="evas_n.htm">Evas</a> <p>Enables you to manipulate objects on a clean display canvas formed for the target display systems.</p></li>
+        <li><a href="edje_n.htm">Edje</a> <p>Enables you to theme an application.</p></li>
+        <li><a href="ecore_n.htm">Ecore</a><p></p>Enables you to manage the application main loop.</li>
+        <li><a href="events_effects_n.htm">Event and Effect</a> <p>Enables you to handle different kinds of events.</p></li>
+        <li><a href="ui_control_n.htm">UI Control</a><p></p>Enables you to manage shortcuts, widgets, and scalability.</li>     
+        <li><a href="efl_extension_n.htm">Efl Extension</a> <p>Enables you to work with the Menu and Back hardware keys on devices.</p></li>
+        <li><a href="font_setting_n.htm">Font Setting</a> <p>Enables you to change the font of your application to another system default font or your own font.</p></li>
+        <li><a href="efl_util_n.htm">EFL UTIL</a> <p>Enables you to manage notification window levels.</p> </li>
+        <li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kids of screens.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_widgets_n.htm b/org.tizen.guides/html/native/ui/ui_widgets_n.htm
new file mode 100644 (file)
index 0000000..882be7c
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/ui_widgets_n.htm
@@ -0,0 +1,3542 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Widgets</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#background">Background Widget</a></li>
+                       <li><a href="#button">Button Widget</a></li>
+                       <li><a href="#check">Check Widget</a></li>
+                       <li><a href="#colorselector">Colorselector Widget</a></li>
+                       <li><a href="#ctxpopup">Ctxpopup Widget</a></li>
+                       <li><a href="#datetime">Datetime Widget</a></li>
+                       <li><a href="#entry">Entry Widget</a></li>
+                       <li><a href="#flip">Flip Widget</a></li>
+                       <li><a href="#gengrid">Gengrid Widget</a></li>
+                       <li><a href="#genlist">Genlist Widget</a></li>
+                       <li><a href="#glview">GLView Widget</a></li>
+                       <li><a href="#icon">Icon Widget</a></li>
+                       <li><a href="#image">Image Widget</a></li>
+                       <li><a href="#index">Index Widget</a></li>
+                       <li><a href="#label">Label Widget</a></li>
+                       <li><a href="#list">List Widget</a></li>
+                       <li><a href="#map">Map Widget</a></li>
+                       <li><a href="#notify">Notify Widget</a></li>
+                       <li><a href="#panel">Panel Widget</a></li>
+                       <li><a href="#photo">Photo Widget</a></li>
+                       <li><a href="#photocam">Photocam Widget </a></li>
+                       <li><a href="#plug">Plug Widget</a></li>
+                       <li><a href="#popup">Popup Widget</a></li>
+                       <li><a href="#progressbar">Progressbar Widget</a></li>
+                       <li><a href="#radio">Radio Widget</a></li>
+                       <li><a href="#segmentcontrol">Segmentcontrol Widget</a></li>
+                       <li><a href="#slider">Slider Widget</a></li>
+                       <li><a href="#spinner">Spinner Widget</a></li>
+                       <li><a href="#toolbar">Toolbar Widget</a></li>
+                       <li><a href="#tooltip">Tooltip Widget</a></li>
+                       <li><a href="#win">Win Widget</a></li>
+               </ul>
+                       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI Widgets</h1>
+<div class="cont"><div class="static-cont">    
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="background" name="background" class="items-tit-h2">Background Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p class="figure">Figure: Red color background</p>
+<p style="text-align:center;"><img alt="Red color background" src="../../images/bg.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p style="text-align:center;"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<p>The background widget can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to tiled, centered, scaled or stretched mode. There are no specific signals relative to background object.</p>
+
+<h3>Adding a Background</h3>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Creating a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h3>Change Color of the Background</h3>
+
+<p>You can set the color of the bg with <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span>. Here we set the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h3>Change Image of the Background</h3>
+
+<p>It is also possible to set an image or an Edje group with <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span>. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul class="ul">
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the widget&#39;s area</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile background image at its original size</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as background image
+elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+// Set an edje group as background image
+elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h3>Using Overlay</h3>
+
+<p>An overlay can be set using the &quot;overlay&quot; part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, &quot;overlay&quot;, over);
+</pre>
+
+<p>Here, over is an Edje object that will be displayed on top of the current bg object.</p>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="button" name="button" class="items-tit-h2">Button Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Button widget</p>
+<p style="text-align:center;"><img alt="##" src="../../images/button.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p style="text-align:center;"><img alt="##" src="../../images/button_tree.png" /></p>
+
+<p>The Elementary button widget is a simple push button. It is composed of a label icon and an icon object and has autorepeat feature.</p>
+
+<h3>Adding a Button</h3>
+
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Creating a button
+button = elm_button_add(parent);</pre>
+
+<h3>Adding an Icon Inside a Button</h3>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the &quot;icon&quot; part name.</p>
+
+<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);</pre>
+
+<h3>Adding Text Inside a Button</h3>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">elm_object_text_set(button, &quot;Click me!&quot;);</pre>
+
+<h3>Using Button Style</h3>
+
+<p>Other styles may be used on the button. Tizen supports the following styles:</p>
+
+<ul class="ul">
+    <li>&quot;icon_reorder&quot;</li>
+    <li>&quot;icon_expand_add&quot;</li>
+    <li>&quot;icon_expand_delete&quot;</li>
+    <li>&quot;default&quot;</li>
+    <li>&quot;circle&quot;</li>
+    <li>&quot;bottom&quot;</li>
+    <li>&quot;contacts&quot;</li>
+    <li>&quot;option&quot;</li>
+</ul>
+
+<p>You can see these themes in action on the following screenshot (in the above order).</p>
+
+<p class="figure">Figure: Button widget</p>
+<p style="text-align:center;"><img alt="##" src="../../images/button.png" /></p>
+
+<p>To change the style of the button, we call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on our button object.</p>
+
+<pre class="prettyprint">elm_object_style_set(button,&quot;icon_expand_add&quot;);</pre>
+
+<h3>Using Button Callbacks</h3>
+
+<p>Button emits the following signals:</p>
+
+<ul class="ul">
+    <li>&quot;clicked&quot;: the user clicked the button (press/release)</li>
+    <li>&quot;repeated&quot;: the user pressed the button without releasing it</li>
+    <li>&quot;pressed&quot;: the user pressed the button</li>
+    <li>&quot;unpressed&quot;: the user released the button after pressing it</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is NULL.</p>
+
+<p>This is an example to register and define callback function called by the clicked signal.</p>
+
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+}
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+}</pre>
+
+<h3>Using Autorepeat Feature</h3>
+
+<p>The autorepeat feature (enabled by default) consists of calling the &quot;repeated&quot; signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with</p>
+
+<ul class="ul">
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature:</p>
+
+<pre class="prettyprint">elm_button_autorepeat_set(button, EINA_FALSE);</pre>
+
+<p>Enable the autorepeat feature (enabled by default):</p>
+
+<pre class="prettyprint">elm_button_autorepeat_set(button, EINA_TRUE);</pre>
+
+<p>Set the initial timeout to five seconds:</p>
+
+<pre class="prettyprint">elm_button_autorepeat_initial_timeout_set(button, 5.0);</pre>
+
+<p>Set the gap between two signals to 0.5 seconds:</p>
+
+<pre class="prettyprint">elm_button_autorepeat_gap_timeout_set(button, 0.5);</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="check" name="check" class="items-tit-h2">Check Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Check widget</p> 
+<p style="text-align:center;"><img alt="Check widget" src="../../images/check.png" /></p> 
+
+<p class="figure">Figure: Check hierarchy</p> 
+<p style="text-align:center;"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
+
+<p>The check widget is similar to the radio widget, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This widget inherits from the layout widget. All layout functions can be used on the check widget.</p>
+
+<h3 id="Adding" name="Adding">Adding Check Widget</h3>
+
+<p>This is how to create a check widget.</p>
+
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h3 id="Modifying" name="Modifying">Modifying Check Styles</h3>
+
+<p>Check widget style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
+<ul class="ul">
+    <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">favorite</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">on</span> and <span style="font-family: Courier New,Courier,monospace;">off</span></li>
+</ul>
+
+<p>As an example we will set the favorite style on our check object.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(check, &quot;favorite&quot;);
+</pre>
+
+<p>We can get the current style with <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h3 id="Using_Check_Widget" name="Using_Check_Widget">Using Check Widget</h3>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>We can also retrieve the current value of the check object.</p>
+
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with the radio object, an icon and a label can be set.</p>
+
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the check object 
+elm_object_part_content_set(check, &quot;icon&quot;, icon);
+
+// Set the check label 
+elm_object_text_set(check, &quot;Check label&quot;);
+</pre>
+
+<p>We can also modify the &quot;on&quot; and &quot;off&quot; labels.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(check, &quot;on&quot;, &quot;True&quot;);
+elm_object_part_text_set(check, &quot;off&quot;, &quot;False&quot;);
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+
+<pre class="prettyprint">
+// Get the current set text of the check label 
+char *text = elm_object_text_get(check);
+
+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
+</pre>
+
+<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using Check Callbacks</h3>
+
+<p>When the value is changed by the user, the changed signal is emitted. <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>This example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="colorselector" name="colorselector" class="items-tit-h2">Colorselector Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+    <p class="figure">Figure: Colorselector widget</p> 
+  <p style="text-align:center;"><img alt="Colorselector widget" src="../../images/colorsel.png" /></p> 
+  
+      <p class="figure">Figure: Colorselector hierarchy</p> 
+  <p style="text-align:center;"><img alt="Colorselector hierarchy" src="../../images/colorselector_tree.png" /></p>
+
+
+<p> The colorselector widget provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector widget.</p>
+
+<p>As for now, only the <strong>PALETTE</strong> mode is available in Tizen.</p>
+
+<ul class="ul">
+<li>ELM_COLORSELECTOR_PALETTE</li>
+</ul>
+
+<p>The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, it is associated with a unique identifier. This enable the developer to create new series of colors (new palette) and save it under another identifier. By default, the color palette is using the &quot;default&quot; identifier.</p>
+
+<p>This widget inherits from the layout widget, so all function concerning the layout widget can also be used on the colorselector widget.</p>
+
+<h3>Adding a Colorselector Widget</h3>
+
+<p>This is how to create a colorselector object.</p>
+
+<pre class="prettyprint">
+Evas_Object *colorsel, *parent;
+
+colorsel = elm_colorselector_add(parent);
+</pre>
+
+<h3>Setting Colorselector Modes</h3>
+
+<p>This is how to set the mode of the colorselector to the palette mode.</p>
+
+<pre class="prettyprint">
+elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
+</pre>
+
+<p>We want to create a new palette called &quot;mypalette&quot;. This new palette will be saved by elementary config and we will be able to load it again later. We then add three colors in &quot;mypalette&quot;: red, green, and blue.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, &quot;mypalette&quot;);
+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);
+</pre>
+
+<p>The &quot;default&quot; palette already contains 14 colors.</p>
+
+<pre class="prettyprint">elm_colorselector_palette_name_set(colorsel, &quot;default&quot;);
+</pre>
+
+<p>When the user clicks on the color elements, it changes the color that is set to the colorselector widget. We can use the function below to retrieve the current selected color.</p>
+
+<pre class="prettyprint">int r, g, b, a;
+
+elm_colorselector_color_get(colorsel, &amp;r, &amp;g, &amp;b, &amp;a);
+</pre>
+
+<h3>Using Colorselector Callbacks</h3>
+
+<p>We can register callbacks on the following signals:</p>
+
+<ul class="ul">
+<li>&quot;changed&quot; - The color value changes on the selector. event_info is NULL.</li>
+<li>&quot;color,item,selected&quot; - The user clicks on a color item. The event_info parameter of the callback is the selected color item.</li>
+<li>&quot;color,item,longpressed&quot; - The user long presses on a color item. The event_info parameter of the callback contains the selected color item.</li>
+</ul>
+
+<p>This is how to register a callback on &quot;changed&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(colorselector, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the colorselector value changes
+
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The color has changed\n&quot;);
+}
+</pre> 
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="ctxpopup" name="ctxpopup" class="items-tit-h2">Ctxpopup Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+    <p class="figure">Figure: Context popup widget</p> 
+  <p style="text-align:center;"><img alt="Context popup widget" src="../../images/ctxpopup1.png" /></p> 
+  
+      <p class="figure">Figure: Context popup hierarchy</p> 
+  <p style="text-align:center;"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+
+<p> Ctxpopup is a contextual popup, which can show a list of items.</p>
+
+<h3>Adding a Ctxpopup</h3>
+
+<p>A ctxpopup can be created with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> and when shown, it automatically chooses an area inside its parent object&#39;s view (set via <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Creating a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h3>Modifying Ctxpopup Style</h3>
+
+<p>The following styles are available:</p>
+
+<ul class="ul">
+<li>&quot;dropdown/list&quot;</li>
+<li>&quot;dropdown/label&quot;</li>
+<li>&quot;more/default&quot;</li>
+</ul>
+
+    <p class="figure">Figure: Context popup more/default style</p> 
+  <p style="text-align:center;"><img alt="Context popup more/default style" src="../../images/ctxpopup1.png" /></p> 
+  
+      <p class="figure">Figure: Context popup dropdown/list</p> 
+  <p style="text-align:center;"><img alt="Context popup dropdown/list" src="../../images/ctxpopup2.png" /></p>
+
+      <p class="figure">Figure: Context popup dropdown/label</p> 
+  <p style="text-align:center;"><img alt="Context popup dropdown/label" src="../../images/ctxpopup3.png" /></p>
+
+<p> In the following example, we set the &quot;more/default&quot; style.</p>
+
+<pre class="prettyprint">elm_object_style_set(ctxpopup, &quot;more/default&quot;);</pre>
+
+<h3>Configuring Ctxpopup</h3>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here we set it to horizontal.</p>
+
+<pre class="prettyprint">elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>We can also disable auto hiding if we want the ctxpopup never to be hidden. (Auto hide is enabled by default.)</p>
+
+<pre class="prettyprint">elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h3>Managing Ctxpopup Items</h3>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. Here we append an item with the &quot;Test&quot; label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+</pre>
+
+<p>The _ctxpopup_item_cb() callback will be called when the item is clicked. This is how to write the definition of this callback.</p>
+
+<pre class="prettyprint">static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+}
+</pre>
+
+<p>Then the item label is set to &quot;New label&quot;.</p>
+
+<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+</pre>
+
+<p>And its icon is modified to the standard &quot;home&quot; icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, &quot;home&quot;);
+
+elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+</pre>
+
+<h3>Using Ctxpopup Callbacks</h3>
+
+<p>The context popup emits the &quot;dismissed&quot; signal when it is dismissed. We can register a callback to this signal. The event_info parameter is NULL.</p>
+
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
+}
+
+// Callback function for the &quot;dismissed&quot; signal
+// This callback is called when the ctxpopup is dismissed. 
+
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
+}
+</pre> 
+
+                       </div>
+               </li>
+       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="datetime" name="datetime" class="items-tit-h2">Datetime Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Datetime selection</p> 
+<p style="text-align: center;"> <img alt="Datetime selection" src="../../images/date2.png" /> </p> 
+ 
+<p class="figure">Figure: Datetime hierarchy</p> 
+<p style="text-align: center;"> <img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
+ 
+<p>The datetime widget displays and adds date and time values.</p>
+
+<h3>Adding a Datetime Widget</h3>
+
+<p>The widget is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>. It is then possible to select the visible fields with <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span>. The following fields can be controlled:</p>
+  <ul class="ul">
+   <li>ELM_DATETIME_YEAR: The Year field</li>
+   <li>ELM_DATETIME_MONTH: The Month field</li>
+   <li>ELM_DATETIME_DATE: The Date field</li>
+   <li>ELM_DATETIME_HOUR: The Hour field</li>
+   <li>ELM_DATETIME_MINUTE: The Minute field</li>
+   <li>ELM_DATETIME_AMPM: The AM/PM field</li>
+  </ul>
+
+<p>As an example, this is how to create a datetime widget and set the HOUR and MINUTE fields visible.</p>
+
+<pre class="prettyprint">
+Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
+</pre>
+
+<h3>Using Datetime Styles</h3>
+
+<p>The following styles are available:</p>
+  <ul class="ul">
+   <li>&quot;date_layout&quot;</li>
+   <li>&quot;time_layout&quot;</li>
+   <li>&quot;time_layout_24h&quot;</li>
+  </ul>
+
+<p>This is how to create the &quot;date_layout&quot; style.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;date_layout&quot;);
+</pre>
+
+<h3>Setting Datetime Format</h3>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. Here, as an example, we set the format to: &quot;HH : MM&quot;.</p>
+
+<pre class="prettyprint">
+elm_datetime_format_set(datetime, &quot;%H : %M&quot;);
+</pre>
+
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h3>Using Datetime Callbacks</h3>
+
+<p>A callback can be registered on the &quot;changed&quot; signal to detect when the Datetime field values are changed. The event_info parameter is NULL.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
+}</pre>
+
+<p>The &quot;language,changed&quot; signal is emitted when the system locale changes.</p>
+ 
+
+<h3>UX Issue in Tizen 2.3</h3>
+
+<ul class="ul">
+  <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, Month, Day</li>
+  <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, Minute, AM/PM button</li>
+  <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, Minute</li>
+</ul>
+ 
+<p>Basically, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> widget needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the style, it does not work.</p>
+ 
+                       </div>
+               </li>
+               
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="entry" name="entry" class="items-tit-h2">Entry Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Entry widget</p> 
+<p style="text-align: center;"> <img alt="Entry widget" src="../../images/entry.png" /> </p> 
+ 
+<p class="figure">Figure: Entry widget</p> 
+<p style="text-align: center;"> <img alt="Entry widget" src="../../images/entry2.png" /> </p> 
+ 
+<p class="figure">Figure: Entry hierarchy</p> 
+<p style="text-align: center;"> <img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p> 
+ 
+<p>The entry widget is a box where the user can enter text. It supports the following features:</p>
+  <ul class="ul">
+   <li>text wrapping</li>
+   <li>multiline</li>
+   <li>scrolling</li>
+   <li>formatted markup text</li>
+   <li>password mode</li>
+   <li>filtering text</li>
+   <li>read/write from a file</li>
+   <li>theme style overrides</li>
+  </ul>
+   
+<h3>Adding Entry Widget</h3>
+
+<p>The entry widget is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, &quot;A short text.&quot;);
+</pre>
+
+<h3>Using Text Edition</h3>
+
+<p>We can also append text to the end of existing content,</p>
+
+<pre class="prettyprint">
+elm_entry_entry_append(entry, &quot;END&quot;);
+</pre>
+
+<p>or insert text at the current cursor position.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable Empty will return EINA_FALSE.</p>
+
+<p>By default, the user can enter text in the entry widget when it is in the focus. We can prevent the user from editing text if needed.</p>
+
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+ 
+<h3>Setting Password Mode</h3>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h3>Entry Line Modes And Wrapping</h3>
+
+<p>The entry widget has two line modes:</p>
+  <ul class="ul">
+   <li>single line mode</li>
+   <li>multiline mode</li>
+  </ul>
+
+<p>First, we set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the &quot;Enter&quot; key in this mode generates an &quot;activate&quot; event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing &quot;Enter&quot; creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the widget. The following wrap modes are available:</p>
+  <ul class="ul">
+   <li>ELM_WRAP_NONE: No wrap</li>
+   <li>ELM_WRAP_CHAR: Wrap between characters</li>
+   <li>ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+   <li>ELM_WRAP_MIXED: Word wrap, and if that fails, char wrap</li>
+  </ul>
+
+<h3>Selecting Text</h3>
+
+<p>Text selections can be made with different functions. This selects all the content of the entry widget.</p>
+
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+
+<p>We can drop the current selection with</p>
+
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+
+<p>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The code below selects the first twenty characters of the entry content.</p>
+
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+
+<p>Current selected text within the entry can be retrieved like this.</p>
+
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> will return NULL.</p>
+
+<p>We can copy or cut the selection to the clipboard. (There is an example of a cut below.)</p>
+
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>This selection can be pasted in the same or a different entry.</p>
+
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h3>Controlling Cursor</h3>
+
+<p>The cursor represents the current position in the entry, where the next action is done (for example, text insertion or deletion). Usually, the cursor is represented as a blinking character, but that depends on the theme configuration. Cursor position can be modified by using several functions.</p>
+
+<p>It can be moved to the beginning of the entry,</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+
+<p>or to the end.</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+
+<p>It can be moved one line down or up.</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+
+<p>It can also be moved one character to the left or right,</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+
+<p>or set at a specific position (15th character, for example).</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+
+<p>We can start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for(i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h3>Formatting Text</h3>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The available markups in the default theme are</p>
+  <ul class="ul">
+   <li>&lt;br&gt;: Inserts a line break.</li>
+   <li>&lt;ps&gt;: Inserts a paragraph separator. This is preferred over line breaks.</li>
+   <li>&lt;tab&gt;: Inserts a tab.</li>
+   <li>&lt;em&gt;...&lt;/em&gt;: Emphasis. Sets the oblique style for the enclosed text.</li>
+   <li>&lt;b&gt;...&lt;/b&gt;: Sets the bold style for the enclosed text.</li>
+   <li>&lt;link&gt;...&lt;/link&gt;: Underlines the enclosed text.</li>
+   <li>&lt;hilight&gt;...&lt;/hilight&gt;: Highlights the enclosed text.</li>
+  </ul>
+
+<h3>Using Special Markups</h3>
+
+<p>Special markups can be added within the text of the entry.</p>
+  <ul class="ul">
+   <li>&lt;a href = ..&gt;...&lt;/a&gt;: Anchors</li>
+   <li>&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;: Items</li>
+  </ul>
+
+<p>Anchors generate an &quot;anchor,clicked&quot; signal when the user clicks on them. The href attribute is used to identify the anchor. It also reacts to the &quot;anchor,in&quot; (mouse in), &quot;anchor,out&quot; (mouse out), &quot;anchor,down&quot; (mouse down), and &quot;anchor,up&quot; (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any Evas_Object in the text. The Evas_Object name has to be specified in the href attribute.</p>
+
+<h3>Overriding Style</h3>
+
+<p>To tweak the style of the text within the entry widget, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h3>Filtering Text</h3>
+
+<p>Text within an entry can be filtered in size. Here we set the maximum number of characters allowed in the entry to eight.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+&nbsp;&nbsp;&nbsp;.max_char_count = 8,
+&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+};
+
+// Append a new callback to the list, this function will be called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;limit_size);
+</pre>
+
+<p>Content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. In the example below we reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+&nbsp;&nbsp;&nbsp;.accepted = NULL,
+&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;accept_set);
+</pre>
+
+<h3>File Load/Save</h3>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text will be saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and we can manually save the content when needed.</p>
+
+<pre class="prettyprint">
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
+</pre>
+
+<h3>Using Entry Theme Content</h3>
+
+<p>Two content parts of the default theme are available: &quot;icon&quot; and &quot;end&quot;. Here we set an icon in the &quot;end&quot; content part.</p>
+
+<pre class="prettyprint">
+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);
+</pre>
+
+<h3>Using Entry Theme Texts</h3>
+
+<p>The default theme allows the use of the following text parts:</p>
+  <ul class="ul">
+   <li>&quot;default&quot; - text of the entry</li>
+   <li>&quot;guide&quot; - placeholder of the entry</li>
+  </ul>
+
+<p>This is how to set the placeholder text of the entry to &quot;Hello World&quot;.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(entry, &quot;Hello World&quot;);
+</pre>
+
+<h3>Using Entry Callbacks</h3>
+
+<p>Entry widget emits the following signals:</p>
+  <ul class="ul">
+   <li>&quot;aborted&quot;: The escape key is pressed on a single line entry.</li>
+   <li>&quot;activated&quot;: The enter key is pressed on a single line entry.</li>
+   <li>&quot;anchor,clicked&quot;: An anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
+   <li>&quot;anchor,down&quot;: Mouse button is pressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
+   <li>&quot;anchor,hover,opened&quot;: The anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
+   <li>&quot;anchor,in&quot;: Mouse cursor is moved into an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
+   <li>&quot;anchor,out&quot;: Mouse cursor is moved out of an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
+   <li>&quot;anchor,up&quot;: Mouse button is unpressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
+   <li>&quot;changed&quot;: The text within the entry is changed.</li>
+   <li>&quot;changed,user&quot;: The text within the entry is changed because of user interaction. event_info points to an object of the type Edje_Entry_Change_Info.</li>
+   <li>&quot;clicked&quot;: The entry is clicked (mouse press and release).</li>
+   <li>&quot;clicked,double&quot;: The entry is double clicked.</li>
+   <li>&quot;clicked,triple&quot;: The entry is triple clicked.</li>
+   <li>&quot;cursor,changed&quot;: The cursor position is changed.</li>
+   <li>&quot;cursor,changed,manual&quot;: The cursor position is changed manually.</li>
+   <li>&quot;focused&quot;: The entry receives focus. event_info points to an object of the type Elm_Focus_Info.</li>
+   <li>&quot;unfocused&quot;: The entry loses focus.</li>
+   <li>&quot;language,changed&quot;: Program language is changed.</li>
+   <li>&quot;longpressed&quot;: A mouse button is pressed and held for a couple of seconds.</li>
+   <li>&quot;maxlength,reached&quot;: A maximum length is reached.</li>
+   <li>&quot;preedit,changed&quot;: The preedit string is changed.</li>
+   <li>&quot;press&quot;: A mouse button is pressed on the entry.</li>
+   <li>&quot;redo,request&quot;: The request is redone.</li>
+   <li>&quot;selection,changed&quot;: The current selection is changed.</li>
+   <li>&quot;selection,cleared&quot;: The current selection is cleared.</li>
+   <li>&quot;selection,copy&quot;: A copy of the selected text into the clipboard is requested.</li>
+   <li>&quot;selection,cut&quot;: A cut of the selected text into the clipboard is requested.</li>
+   <li>&quot;selection,paste&quot;: A paste of the clipboard contents is requested.</li>
+   <li>&quot;selection,start&quot;: A selection is begun and no previous selection exists.</li>
+   <li>&quot;text,set,done&quot;: The whole text is set to the entry.</li>
+   <li>&quot;theme,changed&quot;: The theme is changed.</li>
+   <li>&quot;undo,request&quot;: The request is undone.</li>
+  </ul>
+
+<p>For signals, where event_info has not been explicitly described, it is set to NULL.</p>
+
+<p>As an example, we register a callback to the &quot;focused&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the entry receive the focus
+ 
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
+} 
+</pre>
+  
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="flip" name="flip" class="items-tit-h2">Flip Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Flip hierarchy</p> 
+<p style="text-align: center;"> <img alt="Flip hierarchy" src="../../images/flip_tree.png" /> </p> 
+ 
+<p>The flip widget can hold two Evas_Objects and allows the user flip between them using several pre-defined animations.</p>
+
+<h3>Adding Flip Widget</h3>
+
+<p>This is how to create a flip widget.</p>
+
+<pre class="prettyprint">
+Evas_Object *flip, *parent, *content1, *content2;
+flip = elm_flip_add(parent);
+</pre>
+
+<p>We can add content to the flip widget. content1 is set to the &quot;front&quot; content and content2 is set to the &quot;back&quot; mode.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(flip, &quot;front&quot;, content1);
+elm_object_part_content_set(flip, &quot;back&quot;, content2);
+</pre>
+
+<h3>Configuring Flip Animation</h3>
+
+<p>Now we can run an flip animation.</p>
+
+<pre class="prettyprint">
+elm_flip_go(flip, ELM_FLIP_CUBE_UP);
+</pre>
+
+<p>This animation flips up the &quot;front&quot; content object as if it was on a side of a cube, letting the down facing side of the cube appear with the &quot;back&quot; content object. Several animations are available:</p>
+  <ul class="ul">
+   <li>ELM_FLIP_ROTATE_X_CENTER_AXIS - Rotate the content around a horizontal axis.</li>
+   <li>ELM_FLIP_ROTATE_Y_CENTER_AXIS - Rotate the content around a vertical axis.</li>
+   <li>ELM_FLIP_ROTATE_XZ_CENTER_AXIS - Rotate the content around a diagonal axis.</li>
+   <li>ELM_FLIP_ROTATE_YZ_CENTER_AXIS - Rotate the content around a diagonal axis.</li>
+   <li>ELM_FLIP_CUBE_LEFT - Rotate the content left as if it was on a side of a cube.</li>
+   <li>ELM_FLIP_CUBE_RIGHT - Rotate the content right as if it was on a side of a cube.</li>
+   <li>ELM_FLIP_CUBE_UP - Rotate the content up as if it was on a side of a cube.</li>
+   <li>ELM_FLIP_CUBE_DOWN - Rotate the content down as if it was on a side of a cube.</li>
+   <li>ELM_FLIP_PAGE_LEFT - Move the content to the left as if the flip was a book.</li>
+   <li>ELM_FLIP_PAGE_RIGHT - Move the content to the right as if the flip was a book.</li>
+   <li>ELM_FLIP_PAGE_UP - Move the content up as if the flip was a book.</li>
+   <li>ELM_FLIP_PAGE_DOWN - Move the content down as if the flip was a book.</li>
+  </ul>
+
+<h3>Interacting With the User</h3>
+
+<p>By default, the user cannot interact with the flip. We can set the interaction to be possible, but we have to choose which animation appears on the interaction (rotation has been selected in the following example).</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
+</pre>
+
+<p>The available modes of interaction are</p>
+  <ul class="ul">
+   <li>ELM_FLIP_INTERACTION_NONE - No interaction is allowed</li>
+   <li>ELM_FLIP_INTERACTION_ROTATE - Interaction causes a rotating animation</li>
+   <li>ELM_FLIP_INTERACTION_CUBE - Interaction causes a cube animation</li>
+   <li>ELM_FLIP_INTERACTION_PAGE - Interaction causes a page animation</li>
+  </ul>
+
+<p>We must also choose, which interaction directions are enabled (only right and left in the following example).</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
+</pre>
+
+<p>We can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
+</pre>
+
+<h3>Using Flip Callbacks</h3>
+
+<p>Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, event_info parameter is NULL.</p>
+
+<pre class="prettyprint">
+&quot;animate,begin&quot; - A flip animation is started
+&quot;animate,done&quot; - A flip animation is finished
+</pre>
+
+<p>We can register a callback on the &quot;animation,begin&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;animate,begin&quot;, anim_start_cb, data);
+}
+
+// Callback function for the &quot;animate,begin&quot; signal
+// This callback is called when the flip animation starts
+ 
+void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Animation starts\n&quot;);
+}</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="gengrid" name="gengrid" class="items-tit-h2">Gengrid Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Gengrid widget</p> 
+<p style="text-align: center;"> <img alt="Gengrid widget" src="../../images/gengrid.png" /> </p> 
+ 
+<p class="figure">Figure: Gengrid hierarchy</p> 
+<p style="text-align: center;"> <img alt="Gengrid hierarchy" src="../../images/gengrid_tree.png" /> </p> 
+ 
+<p>Gengrid widget is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.</p>
+
+<p>This widget inherits from the layout widget and implements the scroller interface. Thus scroller and layout functions can be used with this widget.</p>
+
+<p>A gengrid may display its items using horizontal or vertical layout. In the first layout, items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.</p>
+
+<h3>Adding a Gengrid</h3>
+
+<p>We can add a gengrid widget with the following code.</p>
+
+<pre class="prettyprint">
+Evas_Object *gengrid, *parent;
+gengrid = elm_gengrid_add(parent);
+</pre>
+
+<h3>Gengrid Items</h3>
+
+<p>A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the &quot;elm.swallow.icon elm.swallow.end&quot; part names.</p>
+
+<h3>Creating and Deleting Items</h3>
+
+<p>As with genlists, items are allocated and deleted on the go, while the user is scrolling the gengrid. Here we declare a <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure to inform the gengrid how to manage items.</p>
+
+<pre class="prettyprint">
+static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
+gic->item_style = &quot;default&quot;;
+gic->func.text_get = _grid_label_get;
+gic->func.content_get = _grid_content_get;
+gic->func.state_get = _grid_state_get;
+gic->func.del = _grid_del;
+</pre>
+
+<p>The parameters of this structure will not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist widget page for more detailed information.</p>
+
+<h3>Managing Items</h3>
+
+<p>As with genlists, items can be added with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span> and <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> functions. With the gengrid, there is no need to pass the &quot;type&quot; parameters. They can be cleared with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</p>
+
+<p>We can set the multiselection mode on.</p>
+
+<pre class="prettyprint">
+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+</pre>
+
+<p>When this mode is on, selected items are retrieved with <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span>. It returns a list of all the selected items.</p>
+
+<p>When the content of an item changes, we can call <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> to ask the gengrid to update this item&#39;s content.</p>
+
+<p>We can also manually select or disable some items with <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>.</p>
+
+<h3>Using Gengrid Callbacks</h3>
+
+<p>The gengrid widget emits the following signals:</p>
+  <ul class="ul">
+   <li>&quot;activated&quot; - The user has double-clicked or pressed (enter | return | spacebar) on an item. The event_info parameter is the gengrid item that is activated.</li>
+   <li>&quot;clicked,double&quot; - The user has double-clicked an item. The event_info parameter is the gengrid item that is double-clicked.</li>
+   <li>&quot;longpressed&quot; - The item is pressed for a certain amount of time. By default it is one second.</li>
+   <li>&quot;selected&quot; - The user has selected an item. The event_info parameter is the gengrid item that is selected.</li>
+   <li>&quot;unselected&quot; - The user has unselected an item. The event_info parameter is the gengrid item that is unselected.</li>
+   <li>&quot;realized&quot; - The item in the gengrid has its implementing Evas object instantiated, de facto. event_info is the gengrid item that is created. The object may be deleted at any time, so it is strongly advisable not to use the object pointer returned from <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_object_get()</span>, because it may point to freed objects.</li>
+   <li>&quot;unrealized&quot; - The implementing Evas object for this item is deleted. event_info is the gengrid item that is deleted.</li>
+   <li>&quot;changed&quot; - An item is added, removed, resized or moved and the gengrid is resized or has &quot;horizontal&quot; property changes.</li>
+   <li>&quot;scroll,anim,start&quot; - Scrolling animation starts.</li>
+   <li>&quot;scroll,anim,stop&quot; - Scrolling animation stops.</li>
+   <li>&quot;drag,start,up&quot; - The item in the gengrid is dragged (not scrolled) up.</li>
+   <li>&quot;drag,start,down&quot; - The item in the gengrid has dragged (not scrolled) down.</li>
+   <li>&quot;drag,start,left&quot; - The item in the gengrid is dragged (not scrolled) left.</li>
+   <li>&quot;drag,start,right&quot; - The item in the gengrid is dragged (not scrolled) right.</li>
+   <li>&quot;drag,stop&quot; - The item in the gengrid stops being dragged.</li>
+   <li>&quot;drag&quot; - The item in the gengrid is dragged.</li>
+   <li>&quot;scroll&quot; - The content is scrolled (moved).</li>
+   <li>&quot;scroll,drag,start&quot; - Dragging the content starts.</li>
+   <li>&quot;scroll,drag,stop&quot; - Dragging the content stops.</li>
+   <li>&quot;edge,top&quot; - The gengrid is scrolled to the top edge.</li>
+   <li>&quot;edge,bottom&quot; - The gengrid is scrolled to the bottom edge.</li>
+   <li>&quot;edge,left&quot; - The gengrid is scrolled to the left edge.</li>
+   <li>&quot;edge,right&quot; - The gengrid is scrolled to the right edge.</li>
+  </ul>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="genlist" name="genlist" class="items-tit-h2">Genlist Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Genlist widget</p> 
+<p style="text-align: center;"> <img alt="Genlist widget" src="../../images/genlist.png" /> </p> 
+
+<p class="figure">Figure: Genlist hierarchy</p> 
+<p style="text-align: center;"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
+
+<p>Genlist is a widget that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint (only the visible items are allocated in the memory).</p>
+
+<p>For more information, see the <a href="../../../../org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm">Genlist Tutorial</a>.</p>
+
+<h3>Genlist Item Style</h3>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively &quot;labels&quot;, &quot;contents&quot;, and &quot;states&quot; in the Edje file. The &quot;default&quot; item style provides one text part (&quot;elm.text&quot;), two content parts (&quot;elm.swalllow.icon&quot; and &quot;elm.swallow.end&quot;) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+  <ul class="ul">
+       <li>&quot;default&quot;</li>
+       <li>&quot;full&quot;</li>
+       <li>&quot;one_icon&quot;</li>
+       <li>&quot;end_icon&quot;</li>
+       <li>&quot;group_index&quot;</li>
+       <li>&quot;double_label&quot;</li>
+  </ul>
+
+<p>Here are several examples of item styles.</p>
+
+<p class="figure">Figure: Default item style</p> 
+<p style="text-align: center;"> <img alt="Default item style" src="../../images/gl-default.png" /> </p> 
+
+<p class="figure">Figure: end_icon item style</p> 
+<p style="text-align: center;"> <img alt="end_icon item style" src="../../images/gl-end-icon.png" /> </p> 
+
+<p class="figure">Figure: double_label item style</p> 
+<p style="text-align: center;"> <img alt="double_label item style" src="../../images/gl-double-label.png" /> </p> 
+
+<p>Refer to the <a href="widget_preferences_n.htm#customize">Customizing Widgets</a> for creating a new genlist item style.</p>
+
+<h3>Adding a Genlist</h3>
+
+<p>Genlist widget is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h3>Creating And Deleting Items</h3>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist widget which callbacks to call when an item is created or deleted.</p>
+
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;decorate_item_style = NULL;
+itc-&gt;decorate_all_item_style = NULL;
+itc-&gt;func.text_get = _item_label_get;
+itc-&gt;func.content_get = _item_content_get;
+itc-&gt;func.state_get = _item_state_get;
+itc-&gt;func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an obj parameter that points to the genlist object itself.</p>
+  <ul class="ul">
+   <li>text_get
+   <p>This function receives a PART parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.</p></li>
+
+   <li>content_get
+   <p>The PART parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired it must return NULL, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is &quot;unrealized&quot;.</p></li>
+
+   <li>state_get
+   <p>The PART parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. Genlists emit a signal to the PART parameter&#39;s theming Edje object with &quot;elm,state,xxx,active&quot; as &quot;emission&quot; and &quot;elm&quot; as &quot;source&quot; argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+   <li>del
+   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h3>Managing Items</h3>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a &quot;type&quot; parameter that can be one of the following.</p>
+  <ul class="ul">
+   <li>ELM_GENLIST_ITEM_NONE</li>
+   <li>ELM_GENLIST_ITEM_TREE</li>
+   <li>ELM_GENLIST_ITEM_GROUP</li>
+  </ul>
+
+<p>If ELM_GENLIST_ITEM_TREE is set, this item is displayed as being able to expand and have child items. If ELM_GENLIST_ITEM_GROUP is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p> 
+<p style="text-align: center;"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> 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>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist will re-realize the item and call the functions in the _Elm_Genlist_Item_Class for it.</p>
+
+<h3>Selection</h3>
+
+<p>Items are manually selected or unselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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 &quot;expanded&quot; or &quot;contracted&quot; signals.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the picture below, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist widget</p> 
+<p style="text-align: center;"> <img alt="Genlist widget" src="../../images/genlist_multi.png"/> </p> 
+
+<h3>Using Genlist Callbacks</h3>
+
+<p>The genlist widget emits the following signals:</p>
+  <ul class="ul"> 
+   <li>&quot;activated&quot;: The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;clicked,double&quot;: The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;selected&quot;: The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;unselected&quot;: The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;expanded&quot;: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;contracted&quot;: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;expand,request&quot;: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;contract,request&quot;: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;realized&quot;: The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.</li> 
+   <li>&quot;unrealized&quot;: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;drag,start,up&quot;: The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;drag,start,down&quot;: The item in the list is dragged (not scrolled) down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;drag,start,left&quot;: The item in the list is dragged (not scrolled) left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;drag,start,right&quot;: The item in the list is dragged (not scrolled) right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;drag,stop&quot;: The item in the list has stopped being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;drag&quot;: The item in the list is being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;longpressed&quot;: The item is pressed for a certain amount of time. The default specified time is one second. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;scroll,anim,start&quot;: The scrolling animation is started. event_info is NULL.</li> 
+   <li>&quot;scroll,anim,stop&quot;: The scrolling animation is stopped. event_info is NULL.</li> 
+   <li>&quot;scroll,drag,start&quot;: Dragging the content is started. event_info is NULL.</li> 
+   <li>&quot;scroll,drag,stop&quot;: Dragging the content is stopped. event_info is NULL.</li> 
+   <li>&quot;edge,top&quot;: The genlist is scrolled to the top edge. event_info is NULL.</li> 
+   <li>&quot;edge,bottom&quot;: The genlist is scrolled to the bottom edge. event_info is NULL.</li> 
+   <li>&quot;edge,left&quot;: The genlist is scrolled to the left edge. event_info is NULL.</li> 
+   <li>&quot;edge,right&quot;: The genlist is scrolled to the right edge. event_info is NULL.</li> 
+   <li>&quot;multi,swipe,left&quot;: The genlist is multi-touch swiped left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;multi,swipe,right&quot;: The genlist is multi-touch swiped right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;multi,swipe,up&quot;: The genlist is multi-touch swiped up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li> 
+   <li>&quot;multi,swipe,down&quot;: The genlist is multi-touch swiped down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;multi,pinch,out&quot;: The genlist is multi-touch pinched out. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;multi,pinch,in&quot;: The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;swipe&quot;: The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;moved&quot;: A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;moved,after&quot;: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the &quot;moved&quot; signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;moved,before&quot;: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the &quot;moved&quot; signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
+   <li>&quot;language,changed&quot;: The program&#39;s language is changed. event_info is NULL.</li>
+   <li>&quot;tree,effect,finished&quot;: A genlist tree effect is finished. event_info is NULL.</li>
+  </ul>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="glview" name="glview" class="items-tit-h2">GLView Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+      <p class="figure">Figure: GLView gears example</p> 
+  <p style="text-align:center;"><img alt="GLView gears example" src="../../images/glview.png" /></p> 
+  
+      <p class="figure">Figure: GLView hierarchy</p> 
+  <p style="text-align:center;"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+
+<p> This widget renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+<h3>Adding a GLView Widget</h3>
+
+<p>Create a GLView widget with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+
+<pre class="prettyprint">Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+
+<pre class="prettyprint">elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h3>Using GLView API</h3>
+
+<p>We can configure the GLView rendering mode by activating the following rendering modes:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In this example, we enable alpha channel and depth buffer rendering mode.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>We decide what to do with the GL surface when the GLView widget is resized.</p>
+
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>This is how to set the GLView rendering policy.</p>
+
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The glview object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where glview widget is redrawn only when it is visible.</p>
+
+<p>We can register callbacks:</p>
+
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</p>
+
+<h3>Using GLView Callbacks</h3>
+
+<p>GLView widget emits the following signals:</p>
+
+<ul class="ul">
+<li>&quot;focused&quot; The Glview widget is focused. The event_info parameter points at an object of the type Elm_Focus_Info.</li>
+<li>&quot;unfocused&quot; The GLView object is unfocused.</li>
+</ul>
+
+<p>This is how to register a callback.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="icon" name="icon" class="items-tit-h2">Icon Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Icon widget</p> 
+<p style="text-align: center;"> <img alt="Icon widget" src="../../images/icon.png" /> </p> 
+ 
+<p class="figure">Figure: Icon hierarchy</p> 
+<p style="text-align: center;"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
+  
+<p>The icon widget inherits from the image widget. It is used to display images in an icon context.</p>
+
+<h3>Adding an Icon</h3>
+
+<p>We can create an icon and set it as a freedesktop.org &quot;Home&quot; standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;Home&quot;);
+</pre>
+
+<h3>Changing Image File</h3>
+
+<p>We can change the image by using an image in the filesystem (for example, /tmp/Home.png),</p>
+
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>or a group in an Edje file (for example, /tmp/Home.edj).</p>
+
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. (For this, you need the Ethumb library support.)</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h3>Using Icon Callbacks</h3>
+
+<p>The icon widget emits the following signals:</p>
+  <ul class="ul">
+   <li>&quot;thumb,done&quot; - <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+   <li>&quot;thumb,error&quot; - <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+  </ul>
+
+<p>In both cases, event_info is NULL;</p>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="image" name="image" class="items-tit-h2">Image Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Image widget</p> 
+<p style="text-align: center;"> <img alt="Image widget" src="../../images/image.png" /> </p>   
+
+<p class="figure">Figure: Image hierarchy</p> 
+<p style="text-align: center;"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
+
+<p>The image widget can load and display an image from a disk file or a memory region.</p>
+
+<h3>Adding an Image Widget</h3>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h3>Configuring Image Widget</h3>
+
+<p>Various properties of the image can be tuned. First, we disable elementary scaling so that the image does not scale but resizes on both directions.</p>
+
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here we rotate our image 180 degrees.</p>
+
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+  <ul class="ul">
+   <li>ELM_IMAGE_ORIENT_0: No orientation change</li>
+   <li>ELM_IMAGE_ROTATE_90: Rotate the image 90 degrees clockwise</li>
+   <li>ELM_IMAGE_ROTATE_180: Rotate the image 180 degrees clockwise</li>   
+   <li>ELM_IMAGE_ROTATE_270: Rotate the image 90 degrees counter-clockwise</li>
+   <li>ELM_IMAGE_FLIP_HORIZONTAL: Flip the image horizontally</li>
+   <li>ELM_IMAGE_FLIP_VERTICAL: Flip the image vertically</li>
+   <li>ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line</li>
+   <li>ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line</li>
+  </ul>
+  
+<p>If we want to keep the original aspect ration when resizing the image, we must define how the image fits into the object&#39;s area.</p>
+
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fit the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image may go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to EINA_FALSE, the image stays inside the limits of the parent object.</p>
+
+<h3>Using Image Callbacks</h3>
+
+<p>The image widget emits the signals below:</p>
+  <ul class="ul">
+   <li>&quot;drop&quot;: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+   <li>&quot;clicked&quot;: The user clicks the image. event_info is NULL.</li>
+  </ul>
+
+<p>Here is how to register a callback when a user clicks on the image:</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the image is clicked
+ 
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+}
+</pre>  
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="index" name="index" class="items-tit-h2">Index Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con"> 
+  
+<p class="figure">Figure: Index widget</p> 
+<p style="text-align: center;"> <img alt="Index widget" src="../../images/index.png" /> </p> 
+ 
+<p class="figure">Figure: Index hierarchy</p> 
+<p style="text-align: center;"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
+ 
+<p>An index widget gives you an index for fast access to whichever group of other UI items you have. By default hidden, the index appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index widget&#39;s container. Generally, an index is used together with lists, generic lists or generic grids.</p>
+
+<h3>Adding an Index Widget</h3>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> to create a new index widget.</p>
+
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>Here we add the listitem object at the letter &quot;A&quot;, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
+</pre>
+
+<p>This is how to define the smart callback.</p>
+
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+<h3>Sorting Index Items</h3>
+
+<p>We can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.</p>
+
+<p>We must write a compare function that returns a positive int, 0 or a negative int when the data2 item parameter is respectively greater than, equal to or lower than the data1 parameter.</p>
+
+<pre class="prettyprint">
+static int
+_index_icmp(const void *data1,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const void *data2)
+{
+&nbsp;&nbsp;&nbsp;int result;
+
+&nbsp;&nbsp;&nbsp;// Code that does the item comparison will be written here
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+<p>We add a new item at the &quot;B&quot; index using the compare function to sort the indexes.</p>
+
+<pre class="prettyprint">
+elm_index_item_sorted_insert(index, &quot;B&quot;, NULL, list_item2, _index_icmp, NULL);
+</pre>
+
+<h3>Using Index Callbacks</h3>
+
+<p>The index widget emits the following signals:</p>
+  <ul class="ul">
+   <li>&quot;changed&quot; - The selected index item changes. event_info is the selected item&#39;s data pointer.</li>
+   <li>&quot;delay,changed&quot; - The selected index item changes, but after a small idling period. event_info is the selected item&#39;s data pointer.</li>
+   <li>&quot;selected&quot; - The user releases a mouse button and selects an item. event_info is the selected item&#39;s data pointer.</li>
+   <li>&quot;level,up&quot; - The user moves a finger from the first level to the second level.</li>
+   <li>&quot;level,down&quot; - The user moves a finger from the second level to the first level.</li>
+  </ul>
+
+<p>When the user selects an item in the index, the &quot;selected&quot; signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
+
+&nbsp;&nbsp;&nbsp;// Code that does the desired action
+}
+</pre>
+
+<p>Then we register this callback to the &quot;selected&quot; signal.</p>
+
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="label" name="label" class="items-tit-h2">Label Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Label widget</p> 
+<p style="text-align: center;"> <img alt="Label widget" src="../../images/label.png" /> </p> 
+ 
+<p class="figure">Figure: Label hierarchy</p> 
+<p style="text-align: center;"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
+
+<p>The label widget displays text with simple html-like markup.</p>
+
+<h3>Adding a Label</h3>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<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
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long&quot;);
+</pre>
+
+<h3>Using Label Styles</h3>
+
+<p>Label displays the text with several predefined styles.</p>
+  <ul class="ul"> 
+   <li>default: No animation</li> 
+   <li>marker: The text is centered and bolded.</li> 
+   <li>slide_long: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
+   <li>slide_short: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
+   <li>slide_bounce: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
+  </ul>
+
+<p>Here we set the style to &quot;slide_long&quot;.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_long&quot;);
+</pre>
+
+<h3>Configuring the Label</h3>
+
+<p>The duration of the animation and the slide mode can be set.</p>
+
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>The style can be modified.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+</pre>
+
+<h3>Using Label Callbacks</h3>
+
+<p>This widget emits the following signals:</p>
+  <ul class="ul">
+   <li>&quot;language,changed&quot;: The program&#39;s language changes.</li>
+   <li>&quot;slide,end&quot;: The slide reaches the end.</li>
+   <li>&quot;anchor,clicked&quot;: The anchor is clicked. event_info points to an object of the type Elm_Label_Anchor_Info.</li>
+   <li>&quot;anchor,mouse,down&quot; event_info points to an object of the type Elm_Label_Anchor_Info.</li>
+   <li>&quot;anchor,mouse,up&quot; event_info points to an object of the type Elm_Label_Anchor_Info.</li>
+  </ul>
+  
+<p>Here we register a callback on the &quot;slide,end&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+
+}
+
+// Callback function for the &quot;slide,end&quot; signal
+// This callback is called when the label slide reaches the end
+
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="list" name="list" class="items-tit-h2">List Widget</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p class="figure">Figure: List widget</p> 
+<p style="text-align: center;"> <img alt="List widget" src="../../images/list.png" /> </p> 
+  
+  <p class="figure">Figure: List hierarchy</p> 
+<p style="text-align: center;"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
+ 
+  
+ <p>This widget is a very simple type of a list widget. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (&quot;start&quot;, and &quot;end&quot;). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+<h3>Adding a List Widget</h3>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+</pre>
+
+<h3>Using the List</h3>
+
+ <p>This widget implements the scrollable interface, so the scroller widget functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to &quot;selected&quot;.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_TRUE);
+</pre>
+
+<h3>Adding Item to the List</h3>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+}
+
+for (i = 0; i &lt; 10; i++)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *ic;
+&nbsp;&nbsp;&nbsp;char tmp[8];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
+&nbsp;&nbsp;&nbsp;// Create an icon 
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
+&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+&nbsp;&nbsp;&nbsp;// Add item to the list 
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+ 
+<h3>Changing Text Or Icon of an Item</h3>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to Elm_Object_Item. Each item of the list contains two evas_object. Give those as the third and the fourth arguments when you append or prepend the item in the list. Those evas objects are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the &quot;start&quot; object in the theme, whereas the second one is referenced as the &quot;end&quot; object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+&nbsp;&nbsp;&nbsp;return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+// Change the label 
+elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+</pre>
+  
+<h3>Retrieving Selected Items</h3>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h3>List Item Operations</h3>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h3>Using List Callbacks</h3>
+
+ <p>The list emits the following signals: </p> 
+  <ul class="ul"> 
+   <li>&quot;activated&quot;: The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.</li> 
+   <li>&quot;clicked,double&quot;: The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.</li> 
+   <li>&quot;selected&quot;: The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.</li> 
+   <li>&quot;unselected&quot;: The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.</li> 
+   <li>&quot;longpressed&quot;: The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.</li> 
+   <li>&quot;edge,top&quot;: The list is scrolled to the top edge.</li> 
+   <li>&quot;edge,bottom&quot;: The list is scrolled to the bottom edge.</li> 
+   <li>&quot;edge,left&quot;: The list is scrolled to the left edge.</li> 
+   <li>&quot;edge,right&quot;: The list is scrolled to the right edge.</li> 
+   <li>&quot;highlighted&quot;: The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.</li> 
+   <li>&quot;unhighlighted&quot;: The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.</li>  
+  </ul>
+
+<p>You can register to the &quot;clicked,double&quot; signal with the following code. Note that the currently double-clicked item can be retrieved via the event_info pointer. This code registers to the &quot;double,clicked&quot; signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
+&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="map" name="map" class="items-tit-h2">Map Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Map hierarchy</p> 
+<p style="text-align: center;"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>   
+
+<p>The map widget displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
+
+<p>This widget supports</p>
+  <ul class="ul"> 
+   <li>zooming</li> 
+   <li>scrolling</li> 
+   <li>markers with content to be displayed when user clicks over them</li> 
+   <li>group of markers</li>   
+   <li>routes</li> 
+  </ul>
+
+<p>The map widget implements the scroller interface so that all the functions that work with the scroller widget also work with maps.</p>
+
+<h3>Adding a Map</h3>
+
+<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
+
+<pre class="prettyprint">
+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+</pre>
+
+<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
+
+<h3>Playing with the Map</h3>
+
+<p>If we have coordinates of a specific area (2 2 N, 48 8 E), we can show it on the map.</p>
+
+<pre class="prettyprint">
+elm_map_region_show(map, 2.2, 48.8);
+</pre>
+
+<p>This shows the desired coordinates. We can also show the location with a bring-in animation.</p>
+
+<pre class="prettyprint">
+elm_map_region_bring_in(map, 2.2, 48.8);
+</pre>
+
+<p>The map is rotated 90 degrees around the current position.</p>
+
+<pre class="prettyprint">
+elm_map_rotate_set(map, 90, 2.2, 48.8);
+</pre>
+
+<h3>Drawing Overlays</h3>
+
+<p>Overlays are markers that can be placed anywhere on the map. They can represent any object we want to put on the map.</p>
+
+<h4>Creating an Overlay Class</h4>
+
+<p>Overlay classes can be created if several objects are of the same type. For example, we create a forest overlay class to represent the forests visible on the map. We set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
+
+<p>We set an icon (&quot;Home&quot; icon here) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class 
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;home&quot;);
+elm_map_overlay_icon_set(forest_class, icon);
+</pre>
+
+<h4>Adding Overlays to a Class</h4>
+
+<p>After creating a forest class, we can add overlay objects to it. Here we create an overlay for the Meudon forest. Data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. We set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+<pre class="prettyprint">
+Elm_Map_Overlay *ovl;
+const char* data_meudon = &quot;Meudon forest&quot;;
+const char* data_fausses = &quot;Fausse forest&quot;;
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_meudon);
+
+// Add the new ovl object to the forest class 
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one 
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+</pre>  
+
+<p>If we add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. We can define on which zoom level items are grouped.</p>
+
+<pre class="prettyprint">
+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+</pre>
+
+<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
+
+<h4>Creating Bubbles Following Overlays</h4>
+
+<p>This is how to set a content in a bubble following an overlay.</p>
+
+<pre class="prettyprint">
+// Add an overlay bubble object 
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here) 
+elm_map_overlay_bubble_follow(bubble, ovl);
+</pre>
+
+<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay&#39;s behavior.</p>
+
+<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
+
+<h3>Adding Other Overlays</h3>
+
+<p>We can draw a circle on the map with coordinates and a radius size.</p>
+
+<pre class="prettyprint">
+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+</pre>
+
+<p>We can also add a scale at the 200x0 coordinate (in pixels).</p>
+
+<pre class="prettyprint">
+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+</pre>
+
+<p>Or we can draw a line, a polygon, or a route. See the full API for a full description of these functions.</p>
+
+<h3>Calculating Routes</h3>
+
+<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+
+<p>In this example, we want a route calculation between the first and the second overlay. We configure it to use the bicycle, and we want to find the fastest route in time.</p>
+
+<pre class="prettyprint">
+Elm_Map_Route *route = elm_map_route_add(map,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_TYPE_BICYCLE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_METHOD_FASTEST,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.20718, 48.79759,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1699, 48.8189,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded 
+evas_object_smart_callback_add(map, &quot;route,loaded&quot;, _route_loaded_cb, route);
+</pre>
+
+<p>Once the route is calculated, we can create a route overlay object and change its color. In this example, we use the &quot;route,loaded&quot; callback.</p>
+
+<pre class="prettyprint">
+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;Elm_Map_Route *route = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+&nbsp;&nbsp;&nbsp;elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+</pre>     
+
+<h3>Using Map Callbacks</h3>
+
+<p>The map widget emits the following callbacks:</p>
+<ul class="ul"> 
+   <li>&quot;clicked&quot; - The user has clicked the map without dragging around.</li> 
+   <li>&quot;clicked,double&quot; - The user has double-clicked the map.</li> 
+   <li>&quot;press&quot; - The user has pressed down on the map.</li> 
+   <li>&quot;longpressed&quot; - The user has pressed down on the map for a long time without dragging around.</li>
+   <li>&quot;scroll&quot; - The content is scrolled (moved).</li> 
+   <li>&quot;scroll,drag,start&quot; - Dragging the contents around starts.</li>  
+   <li>&quot;scroll,drag,stop&quot; - Dragging the contents around stops.</li> 
+   <li>&quot;scroll,anim,start&quot; - Scrolling animation starts.</li> 
+   <li>&quot;scroll,anim,stop&quot; - Scrolling animation stops.</li> 
+   <li>&quot;zoom,start&quot; - Zoom animation starts.</li> 
+   <li>&quot;zoom,stop&quot; - Zoom animation stops.</li> 
+   <li>&quot;zoom,change&quot; - The zoom is changed when using an auto zoom mode.</li> 
+   <li>&quot;tile,load&quot; - A map tile image load begins.</li>
+   <li>&quot;tile,loaded&quot; - A map tile image load ends.</li> 
+   <li>&quot;tile,loaded,fail&quot; - A map tile image load fails.</li>
+   <li>&quot;route,load&quot; - Route request begins.</li> 
+   <li>&quot;route,loaded&quot; - Route request ends.</li> 
+   <li>&quot;route,loaded,fail&quot; - Route request fails.</li>
+   <li>&quot;name,load&quot; - Name request begins.</li>   
+   <li>&quot;name,loaded&quot; - Name request ends.</li>   
+   <li>&quot;name,loaded,fail&quot; - Name request fails.</li>   
+   <li>&quot;overlay,clicked&quot; - An overlay is clicked.</li>
+   <li>&quot;loaded&quot; - The map is loaded.</li>
+</ul>
+
+                       </div>
+               </li>
+                               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="notify" name="notify" class="items-tit-h2">Notify Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+  <p class="figure">Figure: Notify hierarchy</p> 
+<p style="text-align: center;"> <img alt="File analysis" src="../../images/notify_tree.png" /> </p> 
+
+  <p>This widget displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+<h3>Adding a Notify Widget</h3> 
+  
+<p>This is how to create a notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h3>Configuring Notify Widget</h3> 
+
+<p>We create a label and add it to the notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, &quot;A label text&quot;);
+evas_object_show(content);
+
+// Add the label object to the notify widget
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In this example, we show the notify object on the bottom left corner of the parent object.</p>
+
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>We can set a timeout interval, after which the notify widget is hidden. In this example, the timeout interval is five seconds.</p>
+
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h3>Using Notify Callbacks</h3> 
+
+<p>The notify widget emits the following signals:</p>
+ <ul class="ul"> 
+   <li>&quot;timeout&quot; - The timeout count ends and the notify is hidden</li> 
+   <li>&quot;block,clicked&quot; - The user clicks outside of the notify</li> 
+  </ul>
+
+<p>For both these signals event_info is NULL.</p>
+
+<p>Here we register a callback on the &quot;timeout&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
+}
+
+// Callback function for the &quot;timeout&quot; signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="panel" name="panel" class="items-tit-h2">Panel Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  <p class="figure">Figure: Panel hierarchy</p> 
+<p style="text-align: center;"> <img alt="Panel hierarchy" src="../../images/panel_tree.png" /> </p> 
+   <p>The panel widget is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.</p>
+
+   <p>Panel inherits from layout widget, so the layout API can be used on this widget.</p>
+
+<h3 id="example">Adding Panel Widget</h3>
+
+<p>This is how to add a panel and set its orientation to left.</p>
+
+<pre class="prettyprint">
+Evas_Object *panel, *parent;
+
+panel = elm_panel_add(parent);
+elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
+</pre>
+
+<h3 id="example">Using the Panel</h3>
+
+<p>The panel is manually hidden.</p>
+
+<pre class="prettyprint">
+elm_panel_hidden_set(pan, EINA_TRUE);
+</pre>
+
+<p>It can be toggled if we do not know the hidden state of the widget.</p>
+
+<pre class="prettyprint">
+elm_panel_toggle(pan);
+</pre>
+
+<p>It can be set scrollable.</p>
+
+<pre class="prettyprint">
+elm_panel_scrollable_set(pan, EINA_TRUE);
+</pre>
+
+<h3 id="example">Creating a Drawer</h3>
+
+<p>Tizen SDK has implemented a layout theme to add a drawer in the application. In this example, we add a new Elementary layout object and set the theme of this layout to the drawer.</p>
+
+<pre class="prettyprint">
+Evas_Object *layout;
+
+// Create a new layout object 
+layout = elm_layout_add(parent);
+
+// Set the &quot;drawer&quot; group theme and &quot;panel&quot; style to it 
+elm_layout_theme_set(layout,&quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+
+// Show the new layout
+evas_object_show(layout);
+</pre>
+
+<p>Once the panel object is created, we can swallow it in the new layout.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(layout, &quot;elm.swallow.left&quot;, pan);
+</pre>
+
+<p>We can set content to the &quot;elm.swallow.bg&quot; and &quot;elm.swallow.content&quot; parts of the layout.</p>
+
+<pre class="prettyprint">
+// Panel Background (Dimmed Area) 
+Evas_Object *bg = create_bg(layout);
+elm_object_part_content_set(layout, &quot;elm.swallow.bg&quot;, bg);
+
+// Add content to the drawer 
+Evas_Object *content;
+elm_object_part_content_set(layout, &quot;elm.swallow.content&quot;, content);
+</pre>
+
+<h3 id="example">Using Panel Callbacks</h3>
+
+<p>We can register a callback on the &quot;scroll&quot; signal, when the user scrolls the panel. The event_info parameter is of the type Elm_Panel_Scroll_Info.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pan, &quot;scroll&quot;, scroll_cb, data);
+}
+// Callback function for the &quot;scroll&quot; signal
+// This callback is called when the user scrolls the panel
+ 
+void scroll_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Panel_Scroll_Info *scrollinfo = event_info;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The panel was scrolled.\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="photo" name="photo" class="items-tit-h2">Photo Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+  <p class="figure">Figure: Photo hierarchy</p> 
+<p style="text-align: center;"> <img alt="Photo hierarchy" src="../../images/photo_tree.png" /> </p> 
+  
+ <p>The photo widget is used to display a photo (such as a contact image). If no photo is set on it, it displays a person icon to show that it is a photo placeholder.</p> 
+  
+<h3 id="example">Adding a Photo Widget</h3>  
+
+ <p>This is how to create a photo object.</p> 
+
+ <pre class="prettyprint">
+Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
+photo = elm_photo_add(parent);
+</pre>
+
+<h3 id="example">Using Photo Widget</h3>  
+
+ <p>A file can be set to the photo widget. Here, <span style="font-family: Courier New,Courier,monospace">PHOTO_FILENAME</span> is a string corresponding to the photo file name on the system.</p> 
+
+<pre class="prettyprint">
+elm_photo_file_set(photo, PHOTO_FILENAME);</pre>
+
+ <p>We can set the photo as editable, so it can be copied, cut or dragged in another region of the screen.</p> 
+
+<pre class="prettyprint">
+elm_photo_editable_set(photo, EINA_TRUE);</pre>
+
+ <p>It can also be completely visible on the screen.</p>
+
+<pre class="prettyprint">
+elm_photo_fill_inside_set(photo, EINA_TRUE);</pre>
+
+<h3 id="example">Using Photo Callbacks</h3> 
+
+ <p>The following callbacks are registered on the photo widget.</p>
+  <ul class="ul"> 
+   <li>&quot;clicked&quot; - The user has clicked the photo.</li> 
+   <li>&quot;drag,start&quot; - The user starts dragging the inner image out of the photo&#39;s frame.</li> 
+   <li>&quot;drag,end&quot; - The user drops the dragged image.</li>    
+  </ul>
+
+<p>event_info is always NULL.</p>
+
+                       </div>
+               </li>
+                               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="photocam" name="photocam" class="items-tit-h2">Photocam Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+  <p class="figure">Figure: Photocam hierarchy</p> 
+<p style="text-align: center;"> <img alt="Photocam hierarchy" src="../../images/photocam_tree.png" /> </p> 
+  
+  <p>The photocam widget displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast and fit it nicely. It is optimized for .jpeg images format and has a low memory footprint.</p>
+
+  <p>This widget implements the scroller interface, so all the functions concerning the scroller can be used with the photocam widget.</p>
+
+<h3 id="example">Adding a Photocam Widget</h3>
+
+<p>This is how to create a photocam widget and set an image file on it.</p>
+
+<pre class="prettyprint">
+Evas_Object *photocam;
+photocam = elm_photocam_add(win);
+elm_photocam_file_set(photocam, &quot;/tmp/photo.jpeg&quot;);
+</pre>
+
+<h3 id="example">Using Photocam Zoom</h3>
+
+<p>We can choose between two automatic zoom modes and a manual zoom mode. Here we set the zoom mode to manual and ask for a double zoom.</p>
+
+<pre class="prettyprint">
+elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
+elm_photocam_zoom_set(photocam, 2.0);
+</pre>
+
+<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam widget.</p>
+
+<p>Multi-touch zooming is activated by enabling gestures.</p>
+
+<pre class="prettyprint">
+elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
+</pre>
+
+<p>We can zoom in a specific region. In this example, we want to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.</p>
+
+<pre class="prettyprint">
+elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
+</pre>
+
+<h3 id="example">Using Photocam Callbacks</h3>
+
+<p>The photocam widget emits the following signals:</p>
+<ul class="ul"> 
+   <li>&quot;clicked&quot; - The user has clicked the photo without dragging around.</li> 
+   <li>&quot;press&quot; - The user has pressed down on the photo.</li> 
+   <li>&quot;longpressed&quot; - The user has pressed down on the photo for a long time without dragging around.</li> 
+   <li>&quot;clicked,double&quot; - The user has double-clicked the photo.</li> 
+   <li>&quot;load&quot; - The photo load begins.</li> 
+   <li>&quot;loaded&quot; - The image file load is complete for the first view (a low resolution blurry version).</li> 
+   <li>&quot;load,detail&quot; - A photo detailed data load begins.</li> 
+   <li>&quot;loaded,detail&quot; - The image file load is complete for the detailed image data (full resolution is needed).</li> 
+   <li>&quot;zoom,start&quot; - Zoom animation starts.</li> 
+   <li>&quot;zoom,stop&quot; - Zoom animation stops.</li> 
+   <li>&quot;zoom,change&quot; - The zoom is changed when using an auto zoom mode.</li> 
+   <li>&quot;scroll&quot; - The content is scrolled.</li> 
+   <li>&quot;scroll,anim,start&quot; - Scrolling animation starts.</li> 
+   <li>&quot;scroll,anim,stop&quot; - Scrolling animation stops.</li> 
+   <li>&quot;scroll,drag,start&quot; - Dragging the content around starts.</li> 
+   <li>&quot;scroll,drag,stop&quot; - Dragging the content around stops.</li> 
+  </ul>
+
+<p>For all these signals, event_info is NULL.</p>
+
+<p>This is how to register a callback on the &quot;loaded&quot; signal.</p>
+
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(photocam, &quot;loaded&quot;, loaded_cb, data);
+}
+
+// Callback function for the &quot;loaded&quot; signal
+// The photocam has loaded the photo file in a low resolution
+ 
+void loaded_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The photo has been loaded\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="plug" name="plug" class="items-tit-h2">Plug Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+  <p class="figure">Figure: Plug hierarchy</p> 
+<p style="text-align: center;"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
+
+<p>The plug widget shows an Evas_Object created by an other process. It can be used anywhere the same way as any other elementary widget.</p>
+
+<h3 id="example">Adding Plug Widget</h3>  
+
+<p>This is how to create a plug.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h3 id="example">Using the Plug</h3>
+
+<p>The socket image provides the service where we can connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process we use the service name and number set by the socket we want to connect to.</p>
+
+<p>As an example, we connect to a service named &quot;plug_test&quot; on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<p>The Evas_Object corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The socket we try to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called remote_win here).</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL,
+&nbsp;&nbsp;&nbsp;&quot;Window Socket&quot;,
+&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);
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="popup" name="popup" class="items-tit-h2">Popup Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Popup widget</p> 
+<p style="text-align:center;"><img alt="Popup widget" src="../../images/popup.png" /></p>
+      
+<p class="figure">Figure: Popup hierarchy</p> 
+<p style="text-align:center;"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+  
+
+<p> The popup widget shows a popup area that may contain</p>
+<ul class="ul">
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area may contain an icon and text, the action area may contain up to three buttons.</p>
+
+<h3>Adding a Popup</h3>
+
+<p>This is how to create a popup widget.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Creating a popup 
+popup = elm_popup_add(parent);
+</pre>
+
+<h3>Using Popup Styles</h3>
+
+<p>A popup has two different styles.</p>
+<ul class="ul">
+<li>&quot;popup&quot;</li>
+<li>&quot;toast&quot;</li>
+</ul>
+
+<p>Here we set the style of the popup to &quot;toast&quot;.</p>
+
+<pre class="prettyprint">elm_object_style_set(popup, &quot;toast&quot;);</pre>
+
+<h3>Setting the Popup Areas</h3>
+
+<p>We configure the title area. We set the icon object using the part name &quot;title,icon&quot;. We set the title text to &quot;Test popup&quot; using the partname &quot;title,text&quot;.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+// Adding an icon to the title area 
+elm_object_part_content_set(popup, &quot;title,icon&quot;, icon);
+
+// Setting the title text 
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>We set the content of the popup. It can be a simple text</p>
+
+<pre class="prettyprint">elm_object_part_text_set(popup, &quot;default&quot;, &quot;Test popup&quot;);</pre>
+
+<p>or an Evas object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+
+<p>We set the buttons of the action area by creating an &quot;OK&quot; button, a &quot;Cancel&quot; button and a &quot;Help&quot; button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *button3;
+
+// Create the three buttons 
+
+button1 = elm_button_add(popup);
+elm_object_text_set(button1, &quot;OK&quot;);
+
+button2 = elm_button_add(popup);
+elm_object_text_set(button2, &quot;Cancel&quot;);
+
+button3 = elm_button_add(popup);
+elm_object_text_set(button3, &quot;Help&quot;);
+
+// 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, &quot;button3&quot;, button3);
+</pre>
+
+<h3>Using Popup Callbacks</h3>
+<p>The popup emits the following signals:</p>
+<ul class="ul">
+<li>&quot;timeout&quot; - The popup is closed as a result of timeout.</li>
+<li>&quot;block,clicked&quot; - The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In this example, we set the timeout to five seconds.</p>
+
+<pre class="prettyprint">elm_popup_timeout_set(popup, 5.0);</pre>
+
+<p>When the timeout expires, the &quot;timeout&quot; signal is sent to the user.</p>
+
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal &quot;block,clicked&quot; is sent to the application.</p>
+
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="progressbar" name="progressbar" class="items-tit-h2">Progressbar Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+         <p class="figure">Figure: Progressbar widget</p> 
+  <p style="text-align:center;"><img alt="Progressbar widget" src="../../images/progressbar.png" /></p>
+      
+         <p class="figure">Figure: Progressbar hierarchy</p> 
+  <p style="text-align:center;"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+  
+
+ <h3>Adding the Progressbar Widget</h3>
+ 
+<p>This widget is used to display the progress status of a given job. It inherits from the layout widget, so all function concerning the layout widget is used on the progressbar widget.</p> 
+<p>This is how to create a progressbar widget.</p>
+
+<pre class="prettyprint">Evas_Object *pb = elm_progressbar_add(win);</pre>
+<h3>Using Progressbar Styles</h3>
+
+<p>The progressbar has several styles:</p>
+<ul class="ul">
+<li>&quot;default&quot;</li>
+<li>&quot;pending_list&quot;</li>
+<li>&quot;process_large&quot;</li>
+<li>&quot;process_medium&quot;</li>
+<li>&quot;process_small&quot;</li>
+</ul>
+
+<p>We set the style of the progressbar to &quot;pending_list&quot;.</p>
+
+<pre class="prettyprint">elm_object_style_set(pb, &quot;pending_list&quot;);</pre>
+
+<h3>Using the Progressbar</h3>
+
+<p>By default, the progressbar does not show a label or an icon, and the unit label is set to &quot;%.0f %%&quot;.</p>
+
+<p>This is how to set a label (in this example, it is named &quot;Test label&quot;).</p>
+
+<pre class="prettyprint">elm_object_text_set(pb, &quot;Test label&quot;);</pre>
+
+<p>An icon is set with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> using the partname &quot;icon&quot;.</p>
+<pre class="prettyprint">elm_object_part_content_set(pb, &quot;icon&quot;, icon_object);</pre>
+
+<p>The unit label format string can be modified using a &quot;printf&quot; style format. We set it to be a float number with two decimals.</p>
+<pre class="prettyprint">elm_progressbar_unit_format_set(pb, &quot;%1.2f%%&quot;);</pre>
+
+<h3>Configuring the Progressbar</h3>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+
+<pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>It can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+
+<pre class="prettyprint">elm_progressbar_inverted_set(pb, EINA_TRUE);</pre>
+
+<p>The progressbar emits the &quot;changed&quot; signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the pb progress value is set to 20%.</p>
+<pre class="prettyprint">elm_progressbar_value_set(pb, 0.2);</pre>
+
+<p>The current value can be read.</p>
+<pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
+
+<p>We can set the orientation of the progressbar to vertical instead of the default horizontal orientation.</p>
+<pre class="prettyprint">elm_progressbar_horizontal_set(pb, EINA_FALSE);</pre>
+
+<h3>Using Progressbar Callbacks</h3>
+
+<p>The &quot;changed&quot; signal is the only signal specifically emitted by the progressbar widget.</p>
+<p>This is how to register a callback on this signal.</p>
+
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the progressbar value changes
+
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="radio" name="radio" class="items-tit-h2">Radio Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p class="figure">Figure: Radio widget</p> 
+<p style="text-align:center;"><img alt="Radio widget" src="../../images/radio.png" /></p>
+      
+<p class="figure">Figure: Radio hierarchy</p> 
+<p style="text-align:center;"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+  
+<p> This widget displays one or more options, but the user can only select one of them. It is composed of an indicator (selected/unselected), an optional icon and an optional label. Usually grouped with two or more other radio objects, it can also be used alone.</p>
+<p>The radio widget inherits from the layout widget. All the layout functions can be used with radio objects.</p>
+
+<h3>Adding a Radio Widget</h3>
+
+<p>We create a radio widget and set a label to it.</p>
+<pre class="prettyprint">Evas_Object *radio, *parent;
+
+// Creating a radio
+radio = elm_radio_add(parent);
+
+// Set a label to it
+elm_object_text_set(radio, &quot;Radio widget&quot;);
+</pre>
+
+<p>We set an icon to the radio object.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the radio widget 
+elm_object_part_content_set(radio, &quot;icon&quot;, icon);
+</pre>
+
+<h3>Changing Radio Value</h3>
+
+<p>The user can select one of a set of values with the radio widget. Each radio object from a group of radio objects represents an integer value. Here we set the value one to the new radio object.</p>
+<pre class="prettyprint">elm_radio_state_value_set(radio, 1);</pre>
+
+<h3>Managing Radio Groups</h3>
+
+<p>We create a group of radio objects with at least two radio widgets.</p>
+
+<pre class="prettyprint">
+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that we have a group composed of two radio objects, we can choose which one is selected. Here we select radio2.</p>
+
+<pre class="prettyprint">elm_radio_value_set(group, 2);</pre>
+
+<p>We can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h3>Using Radio Callbacks</h3>
+
+<p>When the state of a radio is modified in a group of radio objects, the &quot;changed&quot; signal is emitted.</p>
+<p>This is how to register a callback on this signal.</p>
+
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="segmentcontrol" name="segmentcontrol" class="items-tit-h2">Segmentcontrol Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+ 
+<p class="figure">Figure: Segmentcontrol with text</p> 
+<p style="text-align:center;"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /></p>
+      
+<p class="figure">Figure: Segmentcontrol with icons</p> 
+<p style="text-align:center;"><img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
+  
+<p class="figure">Figure: Segmentcontrol hierarchy</p> 
+<p style="text-align:center;"><img alt="Segmentcontrol hierarchy" src="../../images/segment_control_tree.png" /></p>
+ 
+<p> This widget consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
+<p>This widget inherits from the layout widget, so all the layout widgets API can be used on segmentcontrol objects.</p>
+
+<h3>Adding Segmentcontrol Widget</h3>
+
+<p>This is how to add a segmentcontrol widget.</p>
+
+<pre class="prettyprint">Evas_Object *segcontrol, *parent;
+
+segcontrol = elm_segment_control_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>We can add items to it. Here we add four items containing only text labels (no icons).</p>
+<pre class="prettyprint">Elm_Object_Item *it;
+
+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;);
+</pre>
+
+<p>We can insert an item at a specific position starting at 0</p>
+<pre class="prettyprint">elm_segment_control_item_insert_at(segcontrol, NULL, &quot;item7&quot;, 2);</pre>
+
+<p>or delete an item.</p>
+<pre class="prettyprint">elm_segment_control_item_del_at(segcontrol, 2);</pre>
+<p>We can also set the selected state of an item manually</p>
+<pre class="prettyprint">elm_segment_control_item_selected_set(it, EINA_TRUE);</pre>
+<p>or disable the whole segment control.</p>
+<pre class="prettyprint">elm_object_disabled_set(segcontrol, EINA_TRUE);</pre>
+
+<h3>Using the Segmentcontrol Callbacks</h3>
+
+<p>This is how to register a callback on the &quot;changed&quot; signal. It is called when the user clicks on a segment item which is not previously selected. The event_info parameter is the segment item pointer.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(segcontrol, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the segcontrol selected item changes
+
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Segment_Item *it = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The selected segment item has changed\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="slider" name="slider" class="items-tit-h2">Slider Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p class="figure">Figure: Slider widget</p> 
+<p style="text-align:center;"><img alt="Slider widget" src="../../images/slider.png" /></p>
+      
+<p class="figure">Figure: Slider hierarchy</p> 
+<p style="text-align:center;"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<p> The slider widget is a draggable bar that is used to select a value within a certain range.</p>
+
+<h3>Adding a Slider Widget</h3>
+
+<p>This is how to create a slider object.</p>
+<pre class="prettyprint">Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h3>Using the Slider Styles</h3>
+
+<p>A slider has the following styles:</p>
+<ul class="ul">
+<li>&quot;default&quot;</li>
+<li>&quot;center_point&quot;</li>
+</ul>
+
+<p>Here we set the style to &quot;center_point&quot;.</p>
+<pre class="prettyprint">elm_object_style_set(slider, &quot;center_point&quot;);</pre>
+
+<p>With this style, the slider &quot;0&quot; point is in the middle of the widget.</p>
+
+<h3>Configuring the Slider</h3>
+<p>Orientation is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and it is inverted the same way as the progressbar widget. Here we set it vertical and inverted.</p>
+<pre class="prettyprint">elm_slider_horizontal_set(slider, EINA_FALSE);
+elm_slider_inverted_set(slider, EINA_TRUE);
+</pre>
+
+<p>It can contain icons (&quot;icon&quot; and &quot;end&quot; partnames), a label, a unit label and an indicator label.</p>
+<pre class="prettyprint">Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, &quot;icon&quot;, icon1);
+elm_object_part_content_set(slider, &quot;end&quot;, icon2);
+
+// Set the label 
+elm_object_part_text_set(slider, &quot;default&quot;, &quot;slider label&quot;);
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). Here we set the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length (horizontally or vertically). It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>We can retrieve the current value of the slider anytime.</p>
+
+<pre class="prettyprint">double value = elm_slider_value_get(slider);</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if we want the slider indicator to keep its default size. Here we set the state of the indicator enlargement and then invert the behavior.</p>
+
+<pre class="prettyprint">
+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+ elm_slider_indicator_show_set(slider, !enlarge);
+ </pre>
+ 
+<h3>Using Slider Callbacks</h3>
+
+<p>This widget emits the following signals:</p>
+<ul class="ul">
+<li>&quot;changed&quot;: The user changes the slider value.</li>
+<li>&quot;slider,drag,start&quot;: Dragging the slider indicator around starts.</li>
+<li>&quot;slider,drag,stop&quot;: Dragging the slider indicator around stops.</li>
+<li>&quot;delay,changed&quot;: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, event_info is NULL.</p>
+<p>This is how to register a callback on the &quot;changed&quot; signal.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the slider value changes
+
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
+}
+</pre>
+ 
+                       </div>
+               </li>
+                       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="spinner" name="spinner" class="items-tit-h2">Spinner Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con"> 
+<p class="figure">Figure: Spinner widget</p> 
+<p style="text-align:center;"><img alt="Spinner widget" src="../../images/spin.png" /></p>
+      
+<p class="figure">Figure: Spinner hierarchy</p> 
+<p style="text-align:center;"><img alt="Spinner hierarchy" src="../../images/spinner_tree.png" /></p>
+
+<p> The spinner widget increases or decreases a numeric value with the arrow buttons.</p>
+
+<p>This widget inherits from the layout widget, so all functions concerning the layout widget are used on the spinner widget.</p>
+
+<h3>Adding a Spinner Widget</h3>
+<p>This is how to create a spinner object.</p>
+
+<pre class="prettyprint">
+Evas_Object *spin, *parent;
+
+spin = elm_spinner_add(parent);
+</pre>
+
+<h3>Configuring the Spinner</h3>
+
+<p>The label format is set to a different value:</p>
+<pre class="prettyprint">elm_spinner_label_format_set(spin, &quot;%1.2f meters&quot;);</pre>
+
+<p>You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:</p>
+<pre class="prettyprint">elm_spinner_step_set(spin, 2.0);</pre>
+<p>The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
+<pre class="prettyprint">elm_spinner_wrap_set(spin, EINA_TRUE);</pre>
+
+<p>We set the minimum and maximum values of the spinner.</p>
+<pre class="prettyprint">elm_spinner_min_max_set(spin, -25.0, 100.0);</pre>
+
+<p>The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.</p>
+<pre class="prettyprint">elm_object_style_set(spin, &quot;vertical&quot;);
+elm_spinner_interval_set(spin, 0.1);
+</pre>
+
+<p>If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.</p>
+<pre class="prettyprint">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;);
+</pre>
+
+<h3>Using Spinner Callbacks</h3>
+
+<p>This widget emits the following signals:</p>
+<ul class="ul">
+<li>&quot;changed&quot; - The spinner value changes.</li>
+<li>&quot;delay,changed&quot; - A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>This is how to register a callback on the &quot;delay,changed&quot; signal.</p>
+
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spin, &quot;delay,changed&quot;, delay_changed_cb, data);
+}
+
+// Callback function for the &quot;delay,changed&quot; signal
+// This callback is called a short time after the spinner value changes
+
+void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The spinner value has changed\n&quot;);
+}
+</pre>
+       </div>
+               </li>                   
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="toolbar" name="toolbar" class="items-tit-h2">Toolbar Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+    <p class="figure">Figure: Toolbar widget</p> 
+  <p style="text-align:center;"><img alt="toolbar widget" src="../../images/toolbar.png" /></p> 
+  
+      <p class="figure">Figure: Toolbar hierarchy</p> 
+  <p style="text-align:center;"><img alt="Toolbar hierarchy" src="../../images/toolbar_tree.png" /></p> 
+
+  
+<p> This widget is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.</p>
+
+<h3>Adding and Configuring the Toolbar</h3>
+<p>Use the following function to create a toolbar.</p>
+<pre class="prettyprint">
+Evas_Object *toolbar, *parent;
+
+toolbar = elm_toolbar_add(parent);
+</pre>
+
+<h3>Using Toolbar Styles</h3>
+<p>The toolbar has the following styles:</p>
+<ul class="ul">
+<li>&quot;default&quot;</li>
+<li>&quot;tabbar&quot;</li>
+<li>&quot;tabbar_with_title&quot;</li>
+<li>&quot;navigationbar&quot;</li>
+</ul>
+<p>Here, we set the style to &quot;navigationbar&quot;.</p>
+<pre class="prettyprint">
+elm_object_style_set(toolbar, &quot;navigationbar&quot;);
+</pre>
+
+<h3>Configuring the Toolbar</h3>
+<p>The toolbar displays its items in one of the following options.</p>
+<ul class="ul">
+<li>ELM_TOOLBAR_SHRINK_NONE: Toolbar sets a minimum size to its items so that all of them fit without scrolling.</li>
+<li>ELM_TOOLBAR_SHRINK_HIDE: Toolbar does not scroll or show the items that do not fit in.</li>
+<li>ELM_TOOLBAR_SHRINK_SCROLL: Toolbar scrolls to show the items that do not fit in.</li>
+<li>ELM_TOOLBAR_SHRINK_MENU: Toolbar creates a button to popup hidden items.</li>
+</ul>
+<p>Here we set the Toolbar to ELM_TOOLBAR_SHRINK_NONE.</p>
+<pre class="prettyprint">elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);</pre>
+<p>By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, we can disable the homogeneous mode.</p>
+<pre class="prettyprint">elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);</pre>
+
+<h3>Adding Items to the Toolbar</h3>
+<p>In the following code, we add two items and choose the associated icon, label, and function to call when the item is clicked.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *home_it, *help_it;
+
+&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;_home_item_pressed_cb, NULL);
+&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
+}
+
+static void
+_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Home item clicked \n&quot;);
+}
+
+static void
+_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Help item clicked \n&quot;);
+}
+</pre>
+
+<p>An item may be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.</p>
+<pre class="prettyprint">elm_object_item_disabled_set(help_it, EINA_TRUE);</pre>
+
+<h3>Adding Items with States</h3>
+<p>Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. As an example, we create two states to the help item with the same icon but two different labels.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 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;_help_item_pressed_cb, NULL);
+elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 2&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;_help_item_pressed_cb, NULL);
+</pre>
+<p>We can cycle through the states of the help item by using the following code.</p>
+<pre class="prettyprint">elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
+</pre>
+
+<h3>Using Toolbar Callbacks</h3>
+<p>This widget emits the following signals:</p>
+<ul class="ul">
+<li>&quot;clicked&quot;: The user clicks on a toolbar item, which is selected. event_info is an object of the type Elm_Toolbar_Item.</li>
+<li>&quot;clicked,double&quot;: The user double-clicks on a toolbar item. event_info is an object of the type Elm_Toolbar_Item.</li>
+<li>&quot;longpressed&quot;: The toolbar is pressed for a certain amount of time. event_info is an object of the type Elm_Toolbar_Item.</li>
+<li>&quot;language,changed&quot; - The program language changes.</li>
+<li>&quot;item,focused&quot; - The item is highlighted. event_info is an object of the type Elm_Toolbar_Item.</li>
+<li>&quot;item,unfocused&quot; - The highlight is removed from the item. event_info is an object of the type Elm_Toolbar_Item.</li>
+<li>&quot;scroll&quot; - The toolbar scrolls. event_info is NULL.</li>
+<li>&quot;scroll,anim,start&quot; - The toolbar scrolling animation starts. event_info is NULL.</li>
+<li>&quot;scroll,anim,stop&quot; - The toolbar scrolling animation stops. event_info is NULL.</li>
+<li>&quot;scroll,drag,start&quot; - The user starts dragging the toolbar. event_info is NULL.</li>
+<li>&quot;scroll,drag,stop&quot; - The user stops dragging the toolbar. event_info is NULL.</li>
+</ul>
+<p>This is how to register a callback on the &quot;clicked&quot; signal.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(toolbar, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when a toolbar item is clicked
+
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Toolbar_Item * item = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="tooltip" name="tooltip" class="items-tit-h2">Tooltip Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>The tooltip widget is a smart object that shows a content in a frame when mouse hovers a parent object. The widget provides tips or information about the parent object.</p>
+
+<h3>Adding a Tooltip</h3>
+<p>The tooltip widget cannot be created with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This widget is already contained in a widget when it is created. We can only activate or disable it.</p>
+
+<h3>Activating the Tooltip</h3>
+<p>To activate the tooltip on a parent object, we can set a tooltip text to the parent object,</p>
+<pre class="prettyprint">Evas_Object *parent;
+
+elm_object_tooltip_text_set(parent, &quot;The tooltip text&quot;;</pre>
+<p>or set a content to the parent object.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;elm_object_tooltip_content_cb_set(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;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;&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;tooltip_content_del_cb);
+}
+
+Evas_Object*
+tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
+{
+&nbsp;&nbsp;&nbsp;// Create the tooltip content 
+}
+
+void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Destroy the tooltip content 
+}
+</pre>
+
+<p>When passing content to the tooltip, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_cb</span> function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an Evas_Object.</p>
+<p>When the tooltip disappears, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_del_cb</span> function is called. This function is in charge of deleting the previously allocated Evas_Object.</p>
+<p>Once set, the tooltip can be manually hidden or shown.</p>
+
+<pre class="prettyprint">elm_object_tooltip_hide(parent);
+elm_object_tooltip_show(parent);
+</pre>
+
+<p>The tooltip can be removed from the parent object when it is not needed.</p>
+<pre class="prettyprint">elm_object_tooltip_unset(parent);</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When content is set into the tooltip object, unsetting it calls the callback provided as del_cb to notify that the tooltip cannot be used any longer.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>A tooltip object is not a widget, so it does not emit signals. There are no registered callbacks for it.</p>
+
+
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="win" name="win" class="items-tit-h2">Win Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+    <p class="figure">Figure: Win hierarchy</p> 
+  <p style="text-align:center;"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>   
+ 
+
+<p> The window widget is the root widget that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window widget is created with <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span>. Content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+<h3>Adding a Window Widget</h3>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Creating a window 
+window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+
+// Change window title 
+elm_win_title_set(window, &quot;Example Window&quot;);
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is NULL meaning there is no parent. &quot;main&quot; is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add</span>. The window created is of the type ELM_WIN_BASIC.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Creating a standard window 
+
+window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
+</pre>
+
+<h3>Closing a Window</h3>
+<p>When the user closes the window outside of the program control, a &quot;delete,request&quot; signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">elm_win_autodel_set(window, EINA_TRUE);</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del</span> API. The window is destroyed and the signal &quot;delete,request&quot; is sent.</p>
+
+<h3>Using the Window Callbacks</h3>
+<p>The window widget emits the following signals:</p>
+<ul class="ul">
+<li>&quot;focus,in&quot;: The window received focus.</li>
+<li>&quot;focus,out&quot;: The window lost focus.</li>
+<li>&quot;moved&quot;: The window that holds the canvas is moved.</li>
+<li>&quot;withdrawn&quot;: The window is managed normally but is removed from the view.</li>
+<li>&quot;iconified&quot;: The window is minimized (for example, into an icon or a taskbar).</li>
+<li>&quot;normal&quot;: The window is in the normal state (not withdrawn or iconified).</li>
+<li>&quot;stick&quot;: The window shows on all desktops.</li>
+<li>&quot;unstick&quot;: The window shows only on one desktop.</li>
+<li>&quot;fullscreen&quot;: The window is fullscreen.</li>
+<li>&quot;unfullscreen&quot;: The window stops being fullscreen.</li>
+<li>&quot;maximized&quot;: The window is maximized.</li>
+<li>&quot;unmaximized&quot;: The window is diminished.</li>
+<li>&quot;wm,rotation,changed&quot;: The rotation of the window is changed by the Windows Manager.</li>
+<li>&quot;ioerr&quot;: A low-level I/O error occurred in the display system.</li>
+</ul>
+<p>With all these signals, event_info is NULL.</p>
+<p>This is an example to register a callback function called on the &quot;fullscreen&quot; signal.</p>
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
+}
+
+// Callback function for the &quot;fullscreen&quot; signal
+// This callback is called when the window becomes fullscreen
+
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
+}
+</pre>
+
+                       </div>
+               </li>
+       
+               
+
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/ui/widget_preferences_n.htm b/org.tizen.guides/html/native/ui/widget_preferences_n.htm
new file mode 100644 (file)
index 0000000..72e8b52
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/widget_preferences_n.htm
@@ -0,0 +1,1532 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Preferences</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#customize">Customizing Widgets</a></li>
+                               <li><a href="#focus">Managing Widget Focus</a></li>
+                               <li><a href="#style">Using Widget Styles</a></li>       
+                               </ul>   
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Widget Preferences</h1> 
+  
+  <h2 id="customize" name="customize">Customizing Widgets</h2> 
+
+
+<p>Elementary widgets use the Edje library EDC themes to manage their look.</p>
+
+<h3 id="elm_theme" name="elm_theme">Elementary Theme</h3>
+
+<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, refer to the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<h4 id="use_theme_styles" name="use_theme_styles">Use Theme Styles</h4>
+
+<p>Elementary widgets provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one widget. For example, you can create a new style for a button widget to change its appearance without modifying the default theme.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When creating a new style, knowledge of how each widget is themed is required, because setting another style always replaces the entire group used by the widget. Important signals and parts must be there for the object to behave properly.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>When several styles are loaded in the current theme, you can set a different style to a specific widget using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
+
+<p>The default theme specifies several styles for the button widget. The code below shows how to set the &quot;anchor&quot; style of a newly created button widget.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to &quot;anchor"&quot;
+elm_object_style_set(button, &quot;anchor&quot;);
+</pre>
+
+<h4 id="load_theme_styles" name="load_theme_styles">Load Theme Styles</h4>
+
+<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
+  <ul>
+   <li>overlays</li>
+   <li>extensions</li>
+  </ul>
+
+<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the widget, it looks at the extensions list.</p>
+
+<h5 id="overlay_chapter" name="overlay_chapter">Overlay</h5>
+
+<p>An overlay can replace the look of all widgets by overriding the default style. If we create a new style called &quot;default&quot; for the button widget and add it as an overlay, the Elementary uses the overlay for all button widgets overriding the default theme.</p>
+
+<p>Here is how to add an overlay to your application&#39;s theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_add(NULL, &quot;./theme_button.edj&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here we assume that the &quot;theme_button.edj&quot; file only contains a new theme for the button widget.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button widgets defined in the application. You must make sure that the &quot;theme_button.edj&quot; file reimplements everything that was previously defined in the default theme concerning the button widget.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>This is how to remove the previously added overlay to return to the default theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
+</pre>
+
+<h5 id="extension" name="extension">Extension</h5>
+
+<p>With extensions, we can write styles that we can apply to some widgets (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+
+<p>The application adds a theme to the list of extensions with the following call.</p>
+
+<pre class="prettyprint">
+elm_theme_extension_add(NULL, &quot;./theme_button_style_custom.edj&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here we assume that the &quot;theme_button_style_custom.edj&quot; file contains a new button style called &quot;custom&quot;.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>This is how to use the new &quot;custom&quot; style on a button widget.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to &quot;custom&quot; 
+elm_object_style_set(button, &quot;custom&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all widgets that use the default theme is reloaded.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h4 id="create_new_theme" name="create_new_theme">Create a New Theme</h4>
+
+<p>This is how to create a new theme object.</p>
+
+<pre class="prettyprint">
+Elm_Theme *new_theme = elm_theme_new();
+</pre>
+
+<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
+
+<p>This is how to apply this theme to a widget and its children (a button, for example).</p>
+
+<pre class="prettyprint">
+// Create a button widget 
+Evas_Object *button = elm_button_add();
+
+// Set the new theme to the button widget 
+elm_object_theme_set(button, new_theme);
+</pre>
+
+<h3 id="customizing_widget_style" name="customizing_widget_style">Customizing a Widget Style</h3>
+
+<p>Widget themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<p>A new Edje style can be added for a widget. The best way is to copy the existing &quot;default&quot; style, rename it, and update it to your needs.</p>
+
+<h4 id="check_widget_custom_style" name="check_widget_custom_style">Create a Customized Style for the Check Widget</h4>
+
+<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> widget. The aim is to update the background and the main pictures of this widget with custom pictures.</p>
+
+<p>The EDC source file concerning the check widget (check.edc file) is composed of several groups.</p>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/default&quot;;
+}
+
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/toggle&quot;;
+}
+</pre>
+
+<p>Those two groups define two different styles for the check widget (the &quot;default&quot; style and the &quot;toggle&quot; style).</p>
+
+<p>We copy the group corresponding to the &quot;default&quot; style in a new file to create a new style called &quot;custom&quot;. This new style is saved in the &quot;check_custom.edc&quot; file.</p>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/custom&quot;;
+&nbsp;&nbsp;&nbsp;// Here is the copy of the content of &quot;default&quot; style 
+}
+</pre>
+
+<p>In the new group (&quot;elm/check/base/custom&quot;), we have to find the parts we want to modify. Here, the appropriate parts are &quot;bg&quot; and &quot;check&quot; parts.</p>
+
+<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;}
+}
+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;}
+}
+</pre>
+
+<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="edje_n.htm">Edje</a> and knows Edje basics.</p>
+
+<p>Our custom pictures filenames are:</p>
+  <ul>
+   <li>check_base_custom.png for the bg part</li>
+   <li>check_custom.png for the check part</li></ul>
+
+<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
+
+<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;normal: &quot;check_base_custom.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;}
+}
+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;image.normal: &quot;check_custom.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+        
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here, we assume that the custom images are the same size as the &quot;default&quot; images.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h4 id="add_theme_to_project" name="add_theme_to_project">Add the Theme File to Your Project</h4>
+
+<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
+
+<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
+
+<h4 id="use_new_style" name="use_new_style">Use the New Style</h4>
+
+<p>This is how to add the new theme file as an extension in the application.</p>
+
+<pre class="prettyprint">
+char edj_path[PATH_MAX] = {0, };
+
+// Get the full path of the edj file 
+app_get_resource(&quot;/edje/check_custom.edj&quot;, edj_path, (int)PATH_MAX);
+
+// Load check custom style as an extension 
+elm_theme_extension_add(NULL, edj_path);
+</pre>
+
+<p>Use the &quot;custom&quot; style on a new check widget.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check;
+
+// Create a check object 
+check = elm_check_add(parent);
+
+// Set its style to &quot;custom&quot; 
+elm_object_style_set(check, &quot;custom&quot;);
+</pre>
+
+<h4 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h4>
+
+<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
+
+<h5 id="swallow_parts" name="swallow_parts">Swallow Parts</h5>
+
+<p>In the previous example (the check widget &quot;default&quot; style), there is a part called &quot;elm.swallow.content&quot; that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&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;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to_x: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&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;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
+&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;color: 255 255 255 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: 255 255 255 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check1, *content;
+
+// Create a check object 
+check1 = elm_check_add(parent);
+
+// Set the content of the check object 
+elm_object_part_content_set(check1, &quot;elm.swallow.content&quot;, content);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a widget&#39;s style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the widget&#39;s behavior.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h5 id="text_parts" name="text_parts">Text Parts</h5>
+
+<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check &quot;default&quot; style contains a part named &quot;elm.text&quot;.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm.text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&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;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -2 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans,Edje-Vera&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: -1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&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: "default" 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 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;color: 0 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
+&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: 0 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This is how to modify the content of the &quot;elm.text&quot; part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check2;
+
+// Create a check object 
+check2 = elm_check_add(parent);
+
+// Set the text of the check object 
+elm_object_part_text_set(check2, &quot;elm.text&quot;, &quot;Test text&quot;);
+</pre>
+  
+   <h2 id="focus" name="focus">Managing Widget Focus</h2>
+  
+<h3 id="Presentation" name="Presentation">Focus Presentation</h3>
+
+<h4>Concept of Focus</h4>
+<p>Focus is a graphical user interface concept. A component, for example, a widget, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press.</p>
+
+<h4>Giving Focus</h4>
+
+<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press).</p>
+
+<p>There are mainly two ways to set focus on a graphical elements:</p>
+
+<ul>
+<li>Direct selection: this is done by clicking on the element.</li>
+<li>Relative selection: this is done by moving the selection from a widget to another, such as going to the previous or next one; this is done with a keyboard.</li>
+</ul>
+
+<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the widget to interact with.</p>
+
+<p>Relative selection&#39; default order is the one the widgets have been added to the canvas. That may not be appropriate, if they are added programmatically in different order than they appear on-screen.</p>
+  
+<h3 id="Movement" name="Movement">Moving Focus</h3>
+
+<h4>Concept of Focus Chain</h4>
+<p>The order the focus goes from a widget to another is called the focus chain. As said before, the default focus chain is set to the order the widgets have been added to the canvas.</p>
+
+<h4>Focusable Objects</h4>
+<p>An object can be focused if the following conditions apply:</p>
+
+<ul>
+<li>object is visible</li>
+<li>object is enabled</li>
+<li>object accepts focus</li>
+<li>object&#39;s subtree (if any) is focusable</li>
+<li>all of object&#39;s parents have their subtrees focusable</li>
+</ul>
+
+<p>If any of these conditions do not apply, the object is unfocusable.</p>
+
+<h4>Handling Key Input</h4>
+
+<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
+
+<h4>Hiding, Deleting or Disabling a Focused Object</h4>
+
+<p>When a widget is hidden, deleted, or disabled, it becomes unfocusable.</p>
+
+<p>When a focused object is unfocusable, the focus is moved to another object.</p>
+
+<h4>Selecting Next Object</h4>
+
+<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
+
+<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
+
+<h3 id="Customization" name="Customization">Customizing Focus</h3>
+
+<p>There are several reasons why to customize the focus chain of an application, for example:</p>
+
+<ul>
+<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
+<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the widgets are added.</li>
+</ul>
+
+<h4>Customizing Object&#39;s Focus Exit Chain </h4>
+
+<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next widget in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous widget in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: widget to focus when going up</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: widget to focus when going down</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: widget to focus when going right</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: widget to focus when going left</li>
+</ul>
+
+<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
+
+<h4>Customizing Whole Application&#39;s Focus Chain</h4>
+
+<p>To customize the application&#39;s custom chain:</p>
+
+<pre class="prettyprint">
+Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
+
+Eina_List *focus_chain = NULL;
+focus_chain = eina_list_append(focus_chain, obj3);
+focus_chain = eina_list_append(focus_chain, obj2);
+// The chain is obj3, then obj2. We set it.
+elm_object_focus_custom_chain_set(main, focus_chain);
+// Here we prepend obj5 at the beginning of the chain.
+elm_object_focus_chain_prepend(main, NULL, obj5);
+// We append obj1 after obj3.
+elm_object_focus_chain_append(main, obj3, obj1);
+// We prepend obj4 before obj1.
+elm_object_focus_chain_prepend(main, obj1, obj4);
+</pre>
+
+<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
+
+<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
+
+<h4>Customizing Collision of Both</h4>
+
+<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
+
+<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
+
+<h3 id="On_Widget" name="On_Widget">Focus on Widget </h3>
+
+<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each widget if applicable.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event &quot;focused&quot; or &quot;unfocused&quot;</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
+
+<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
+  
+  
+  <h2 id="style" name="style">Using Widget Styles</h2>
+
+<p>For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set</span> function.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the widget.</p>
+
+<table>
+<caption>Table: Button styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/button/base/default</td>
+ <td><img src="../../images/button_default.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/anchor</td>
+ <td><img src="../../images/button_anchor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/bottom</td>
+ <td><img src="../../images/bottom.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>This style is used widely at the bottom of the screen.</td>
+ </tr>
+  <tr>
+ <td>elm/button/base/circle</td>
+ <td><img src="../../images/button_circle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/dropdown</td>
+ <td><img src="../../images/button_dropdown.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_horizontal/default</td>
+ <td><img src="../../images/button_hoversel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_horizontal_entry/default</td>
+ <td><img src="../../images/button_hoversel_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_vertical/default</td>
+ <td><img src="../../images/button_hover_v.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_vertical_entry/default</td>
+ <td><img src="../../images/button_hover_v_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/icon_reorder</td>
+ <td><img src="../../images/button_recorder.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/drawers</td>
+ <td><img src="../../images/button_drawers.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/title_cancel</td>
+ <td><img src="../../images/button_title_cancel.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/title_done</td>
+ <td><img src="../../images/button_title_done.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/option</td>
+ <td><img src="../../images/button_option.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>elm/check/base/default</td>
+ <td><img src="../../images/check_default.png" /></td>
+ </tr>
+ <tr>
+ <td>elm/check/base/favorite</td>
+ <td><img src="../../images/check_favorite.png" /></td>
+ </tr>
+  <tr>
+ <td>elm/check/base/on&amp;off</td>
+ <td><img src="../../images/check_on_off.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Colorselector styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/colorselector/item/color/colorplane</td>
+ <td><img src="../../images/color_colorplane.png" /></td>
+ <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default.png" /></td>
+ </tr>
+ <tr>
+ <td>wheel</td>
+ <td><img src="../../images/progressbar_wheel.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: List styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Multi Button Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/multibuttonentry/base/default</td>
+ <td><img src="../../images/multi_button_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
+ <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Toolbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/toolbar/base/default</td>
+ <td><img src="../../images/toolbar_default.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/base/navigationbar</td>
+ <td><img src="../../images/toolbar_navigation.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/base/tabbar_with_title</td>
+ <td><img src="../../images/toolbar_tabbar.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/item/default</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span> API to set the text and the icon.</td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/item/navigationbar</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span> API to set the text and the icon.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Flipselector styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/flipsel_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the genlist&#39;s item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item&#39;s style.</p>
+<table>
+<caption>Table: Genlist styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>double_label</td>
+ <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>end_icon</td>
+ <td><img src="../../images/styleguide_genlist_end.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>full</td>
+ <td><img src="../../images/styleguide_genlist_full.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The swallow part is the full size of the item. There is no padding in the item.</td>
+ </tr>
+  <tr>
+ <td>group_index</td>
+ <td><img src="../../images/styleguide_genlist_group.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>one_icon</td>
+ <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>message</td>
+ <td><img src="../../images/styleguide_genlist_message.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the gengrid&#39;s item is not set by external APIs. For more information on using the item class to set the item&#39;s style, see the guide of gengrid.</p>
+<table>
+<caption>Table: Gengrid styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/gengrid_default.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>album-preview</td>
+ <td><img src="../../images/gengrid_album_pre.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>block</td>
+ <td><img src="../../images/gengrid_block.png" /></td>
+ <td></td>
+ <td></td>
+ <td>This style is used to show an empty area.</td>
+</tr>
+ <tr>
+ <td>group_index</td>
+ <td><img src="../../images/gengrid_grp_index.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>default_grid</td>
+ <td><img src="../../images/gengrid_def.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>default_gridtext2</td>
+ <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_gridtext</td>
+ <td><img src="../../images/gengrid_def_gridtext.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/gengrid_def_style.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Segmentation Control styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/segm_control_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Index styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default.png" /></td>
+ <td>This style is for supporting the vertical style.</td>
+ </tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default02.png" /></td>
+ <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
+ </tr>
+  <tr>
+ <td>pagecontrol</td>
+ <td><img src="../../images/index_pagecontrol.png" /></td>
+ <td>This style is used for the &quot;page control&quot; layout. For more information, refer to the Core Control sample application.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/ctxpopup_default.png" /></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>dropdown/list</td>
+ <td><img src="../../images/ctxpopup_dropdown.png" /></td>
+ <td>The size of the item and the ctxpopup follow the size of the screen.</td>
+ </tr>
+  <tr>
+ <td>dropdown/label</td>
+ <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
+ <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Icon styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>apps</td>
+ <td><img src="../../images/icon_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_down</td>
+ <td><img src="../../images/icon_arrowdown.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_left</td>
+ <td><img src="../../images/icon_arrowleft.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_right</td>
+ <td><img src="../../images/icon_arrowright.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_up</td>
+ <td><img src="../../images/icon_arrowup.png" /></td>
+ </tr>
+  <tr>
+ <td>chat</td>
+ <td><img src="../../images/icon_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>clock</td>
+ <td><img src="../../images/icon_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>close</td>
+ <td><img src="../../images/icon_close.png" /></td>
+ </tr>
+ <tr>
+ <td>delete</td>
+ <td><img src="../../images/icon_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>edit</td>
+ <td><img src="../../images/icon_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>file</td>
+ <td><img src="../../images/icon_file.png" /></td>
+ </tr>
+ <tr>
+ <td>home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/forward</td>
+ <td><img src="../../images/icon_forward.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/info</td>
+ <td><img src="../../images/icon_info.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/next</td>
+ <td><img src="../../images/icon_next.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/pause</td>
+ <td><img src="../../images/icon_pause.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/play</td>
+ <td><img src="../../images/icon_play.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/prev</td>
+ <td><img src="../../images/icon_prev.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/rewind</td>
+ <td><img src="../../images/icon_rewind.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/stop</td>
+ <td><img src="../../images/icon_stop.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/apps</td>
+ <td><img src="../../images/icon_menu_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_down</td>
+ <td><img src="../../images/icon_menu_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_left</td>
+ <td><img src="../../images/icon_menu_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_right</td>
+ <td><img src="../../images/icon_menu_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_up</td>
+ <td><img src="../../images/icon_menu_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/chat</td>
+ <td><img src="../../images/icon_menu_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/clock</td>
+ <td><img src="../../images/icon_menu_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/close</td>
+ <td><img src="../../images/icon_menu_close.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/delete</td>
+ <td><img src="../../images/icon_menu_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/edit</td>
+ <td><img src="../../images/icon_menu_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/file</td>
+ <td><img src="../../images/icon_menu_file.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/folder</td>
+ <td><img src="../../images/icon_menu_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/home</td>
+ <td><img src="../../images/icon_menu_home.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/refresh</td>
+ <td><img src="../../images/icon_menu_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>no_photo</td>
+ <td><img src="../../images/icon_menu_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>photo/no_photo</td>
+ <td><img src="../../images/icon_photo_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>refresh</td>
+ <td><img src="../../images/icon_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/apps</td>
+ <td><img src="../../images/icon_toolbar_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_down</td>
+ <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_left</td>
+ <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_right</td>
+ <td><img src="../../images/icon_toolbar_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_up</td>
+ <td><img src="../../images/icon_toolbar_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/chat</td>
+ <td><img src="../../images/icon_toolbar_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/clock</td>
+ <td><img src="../../images/icon_toolbar_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/close</td>
+ <td><img src="../../images/icon_toolbar_close.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/delete</td>
+ <td><img src="../../images/icon_toolbar_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/edit</td>
+ <td><img src="../../images/icon_toolbar_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/file</td>
+ <td><img src="../../images/icon_toolbar_file.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/folder</td>
+ <td><img src="../../images/icon_toolbar_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/more_menu</td>
+ <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/refresh</td>
+ <td><img src="../../images/icon_toolbar_refresh.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>date_layout</td>
+ <td><img src="../../images/datetime_date_layout.png" /></td>
+ </tr>
+ <tr>
+ <td>time_layout</td>
+ <td><img src="../../images/datetime_time_layout.png" /></td>
+ </tr>
+  <tr>
+ <td>time_layout_24hr</td>
+ <td><img src="../../images/datetime_time_24h.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Panel (drawer) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/panel_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ <tr>
+ <td>horizontal/center_point</td>
+ <td><img src="../../images/slider_hor_center.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+  <tr>
+ <td>vertical/center_point</td>
+ <td><img src="../../images/slider_ver_center.png" /></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>vertical/default</td>
+ <td><img src="../../images/slider_ver.png" /></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast.png" /></td>
+ </tr>
+ </tbody>
+</table>
+ 
+ <table>
+<caption>Table: Spinner styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>base/horizontal</td>
+ <td><img src="../../images/spinner_hor.png" /></td>
+ </tr>
+  <tr>
+ <td>base/vertical</td>
+ <td><img src="../../images/spinner_ver.png" /></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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer"> 
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/uix/stt_n.htm b/org.tizen.guides/html/native/uix/stt_n.htm
new file mode 100644 (file)
index 0000000..1538d73
--- /dev/null
+++ b/org.tizen.guides/html/native/uix/stt_n.htm
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>STT</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+                               <ul class="toc">
+                                       <li><a href="#basic_stt">Basic STT Processes</a></li>
+                                       <li><a href="#info_stt">Getting STT Information</a></li>
+                               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm">STT Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>STT</h1> 
+
+<p>The STT (speech-to-text) features enable recognizing sound data recorded by the user and sending the result as text. 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>
+
+<h2 id="basic_stt" name="basic_stt">Basic STT Processes</h2>
+
+<p>Using STT, you can:</p>
+<ul>
+<li>Create a handle and register callback functions.
+ <ul>
+ <li>Create a STT handle, which is used for distinguishing your application from other applications also using the STT.</li>
+ <li>Get notified on state changes, language changes, recognition results, and errors by registered callback functions.</li>
+ </ul>
+</li>
+<li>Start, stop, and cancel recognition.
+ <ul>
+ <li>Start recording the user voice by microphone and analyze the recorded data as text.</li>
+ <li>If you stop the recording manually by the API, the STT stops the recording and recognizes the sound data. The recognized text is then sent by the registered callback function.</li>
+ <li>You also can set sounds which are played before the STT recording starts or after the recording stops.</li>
+ </ul>
+</li>
+<li>Get the recognition result.
+ <ul>
+ <li>The recognition result is sent by the registered callback function.</li>
+ <li>With a specific STT engine, you can obtain the time stamp information for the recognition result.</li>
+ <li>Some STT engines send the recognition result partially during the user recording. You can get the result information using the parameter of the recognition result callback function.</li>
+ </ul>
+</li>
+</ul>
+
+<p>The STT life-cycle is described in the following figure.</p>
+ 
+   <p class="figure">Figure: STT life-cycle</p> 
+  <p style="text-align:center;"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>
+  
+<h2 id="info_stt" name="info_stt">Getting STT Information</h2>
+<p>You can get the following information about the STT:</p>
+<ul>
+<li>Get the current state of the STT. The state is also applied as a precondition for each function.</li>
+<li>Get the default language.
+<ul><li>You can start recognition with the language that you want as a parameter of the start API. However, if you do not set a specific language, the STT starts recording and uses the default language for recognition.</li>
+<li>The default language can be changed by the STT setting an application or by the display language changing. If the display language is changed to a non-supported one, the STT language is changed to UK English.</li></ul></li>
+<li>Get a list of the supported languages to check whether the language you want is supported.</li>
+<li>Get a list of the supported engines and the selection of current engines. Additional features, such as silence detection and partial result, are provided by specific engines.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/uix/tts_n.htm b/org.tizen.guides/html/native/uix/tts_n.htm
new file mode 100644 (file)
index 0000000..38a3b85
--- /dev/null
+++ b/org.tizen.guides/html/native/uix/tts_n.htm
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>TTS</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+                               <ul class="toc">
+                                       <li><a href="#basic_tts">Basic TTS Processes</a></li>
+                                       <li><a href="#info_tts">Getting TTS Information</a></li>
+                               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm">TTS Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TTS</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. 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>
+
+<h2 id="basic_tts" name="basic_tts">Basic TTS Processes</h2>
+
+<p>Using TTS, you can:</p>
+<ul>
+<li>Create a handle and register callback functions.
+       <ul>
+       <li>Create a TTS handle which is used for distinguishing your application from other applications also using the TTS.</li>
+       <li>To get notifications about state changes, language changes, starting or finishing utterances, and errors, register callback functions.</li>
+       </ul>
+</li>
+<li>Add text.
+       <ul>
+       <li>Add the text that you want to read out by the TTS module. The requested text is handled as an utterance. You can add several texts, and they are managed using a queue.</li>
+       <li>There is a limit on the maximum text length for one utterance, and the time spent for synthesizing is dependent on the text length.</li>
+       </ul>
+</li>
+<li>Play, pause, and stop playback.
+       <ul>
+       <li>Synthesize the text in the queue and play the sound data after synthesizing.</li>
+       <li>You can also pause and stop playing. If you call the function to stop, all requested data (both the sound data and text in the queue) is deleted.</li>
+       </ul>
+</li>
+</ul>
+
+<p>The TTS life-cycle is described in the following figure.</p>
+ 
+   <p class="figure">Figure: TTS life-cycle</p> 
+  <p style="text-align:center;"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>
+
+<h2 id="info_tts" name="info_tts">Getting TTS Information</h2>
+<p>You can get the following information about the TTS:</p>
+<ul>
+<li>Get the current state of the TTS. The state is also applied as a precondition for each function.</li>
+<li>Get the default voice.
+       <ul>
+       <li>In the TTS, the voice is defined as a combination of the language and the type, such as male or female.</li>
+       <li>You can request the synthesis of the text with your own voice option by the parameter of the add text function. However, if you do not set a specific option, the TTS synthesizes the text with the default voice.</li>
+       <li>The default voice can be changed by the TTS setting an application or by the display language changing. If the display language is changed to a non-supported language, the language of the TTS is changed to UK English.</li>
+       </ul>
+</li>
+<li>Get a list of supported voices to check whether the language and voice type you want are supported.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/uix/uix_guide_n.htm b/org.tizen.guides/html/native/uix/uix_guide_n.htm
new file mode 100644 (file)
index 0000000..4ed2781
--- /dev/null
+++ b/org.tizen.guides/html/native/uix/uix_guide_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>UIX</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX Tutorials</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UIX</h1> 
+
+       <p>UIX features include managing sound data, such as voice commands, speech-to-text (STT), and text-to-speech (TTS).</p>
+
+
+       <p>The main UIX features are:</p>
+       <ul>
+               <li><a href="tts_n.htm">TTS</a> <p>Synthesize text into sound data and play it.</p></li>
+               <li><a href="stt_n.htm">STT</a> <p>Recognize sound data recorded by the user and send the result as text.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/native/web/web_guide_n.htm b/org.tizen.guides/html/native/web/web_guide_n.htm
new file mode 100644 (file)
index 0000000..ef213fa
--- /dev/null
+++ b/org.tizen.guides/html/native/web/web_guide_n.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web Tutorial</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web</h1> 
+<p>Web features include accessing Web content in your application.</p>
+
+<p>The main Web features are:</p>
+<ul>
+<li>WebView 
+<p>Enables you to access the Web pages and Web content.</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. <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL</a> APIs, such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/scripts/common.js b/org.tizen.guides/html/scripts/common.js
new file mode 100644 (file)
index 0000000..60250b6
--- /dev/null
+++ b/org.tizen.guides/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){
+       $('#contents table').each(function(){
+               if (!$(this).parent().hasClass('table')) {
+                       $(this).wrap('<div class="table"></div>');
+               }
+       });
+
+       // Lnb Menu Initialize
+       if($('div#contents').find('.lnb').length){
+               if($("ul li.events_news").size() > 0) {
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+               }
+               initLnb();
+               initScript(staticURL + "/js/fixednavbar.js", function(){});
+       }
+
+       //family site
+       if($('div#footer').find('dl#familySlider').length){
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+       }
+
+       // Svn Commit Test
+       
+       // Language Selection
+       if($('div#header').find('.util').length){
+               var $lang = $('div#header').find('.util');
+               $lang.find('a.lang').toggle(function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+                       },function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+                       });
+
+               $lang.bind('mouseleave',function(){
+                       $(this).find('ul.language').hide();
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+               });
+
+               $lang.find('ul.language').children().last().on("keydown", function(e) {
+                       if(e.which == 9 && e.shiftKey) {
+                               return true;
+                       }
+                       
+                       if(e.which == 9) {
+                               e.preventDefault();
+                               $lang.find('ul.language').hide();
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+                               setTimeout(function() {
+                                       $("#searchTop").focus();
+                               }, 1);
+                       }
+               });
+       }
+
+       // Open the Sitemap
+       var $open = $('div#header').find('.bt-open');
+       $open.bind('click',function(){
+               var $self = $(this);
+               var $sitemap = $('div#wrapper').find('div#sitemap');
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+               if($sitemap.is(':visible')){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+                       $self.attr('title','open sitemap');
+               }else{
+                       var source = $self.css('background-image').replace('.gif','_.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+                       $self.attr('title','close sitemap');
+               }
+               
+               $self.css('background-image',source);
+               $sitemap.slideToggle('fast');
+               
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       $self.css('background-image',source);
+                       $sitemap.slideToggle('fast');
+               });
+
+       });
+
+       // Search Auto Complete
+       var $search = $('div#header').find('fieldset.search');
+       var $searchList = $search.find('#topAutocomplete>ul');
+
+       if($search.length){
+               $search.find('> input').each(function(){
+                       $(this).bind({
+                               keydown : function(e){
+                       
+                                       if(e.type=='keydown'&& $(this).val().length!=0){
+                                               $search.find('#topAutocomplete').show();
+                                               var hei = $searchList.outerHeight();
+                                               if(hei>400){
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
+                                               }
+                                       }
+                                       if(e.keyCode==9){
+                                               $search.unbind('focusout.search');
+                                       }
+                                       if(e.keyCode==40){
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+                                               //window.scrollTo(0,0);
+                                       }
+                               },
+                               focusin : function(e){
+                                       if($(this).val()==='Search'){
+                                               $(this).val('');
+                                       }
+                               },
+                               focusout : function(e){
+                                       if($(this).val().length==0) $(this).val('Search');
+                               }
+                       });
+               });
+
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+               //      if(e.keyCode==40){
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
+               //      }
+               //});
+
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){
+                       if($search.find('> input').val().length==0){
+                               $search.find('> input').val('Search');
+                       }
+                       $search.find('#topAutocomplete').hide();
+               });
+
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
+                       $search.find('> input').val('Search');
+                       $search.find('#topAutocomplete').hide();
+                       
+                       //$search.bind('focusout.search', function(){
+                       //      $(this).find('> input').val('Search');
+                       //      $(this).find('#topAutocomplete').hide();
+                       //});
+               });
+       }
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+       var script = document.createElement("script");
+       script.type = "text/javascript";
+
+       if(script.readyState){ // 인터넷 익스플로러
+               script.onreadystatechange = function(){
+                       if(script.readyState=="loaded" || script.readyState=="complete"){
+                               script.onreadystatechange = null;
+                               callback();
+                       }
+               };
+       }else{  // 다른  브라우저
+               script.onload = function(){
+                       callback();
+               };
+       }
+
+       script.src = url;
+       document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+       var sMenu = $('.lnb');
+       var sItem = sMenu.find('>li');
+
+       sItem.each(function(){
+               if($(this).find('a').hasClass('more')){
+                       if($(this).find('ul').is(":visible")) {
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
+                       } else {
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+                       }
+               }
+       });
+       
+       var setIcoArrText = function(obj) {
+               if(obj.next().is(":visible")) {
+                       obj.text("close submenu");
+               } else {
+                       obj.text("open submenu");
+               }
+       }
+       
+       sItem.find('.ico-arr').on("click", function() {
+               var $that = $(this);
+               var liBox = $that.parent();   
+               var ulBox = $that.next();
+               
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+               
+               if(liBox.hasClass("on")) {
+                       if(ulBox.is(":visible")) {
+                               ulBox.hide();
+                               $that.addClass("ico-on");
+                       } else {
+                               ulBox.show();
+                               $that.removeClass("ico-on");
+                       }
+                       setIcoArrText($that);
+                       return true;
+               }
+               
+               if(liBox.hasClass("active")) {
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+                       ulBox.hide();
+               } else {
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");
+                       ulBox.show();
+               }
+               setIcoArrText($that);
+       });
+
+       sItem.hover(function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+               $(this).find("a").eq(0).addClass("bov");
+       },function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+                $(this).find("a").eq(0).removeClass("bov");
+
+       });
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+       // 롤링할 객체를 변수에 담아둔다.
+       var el = $('#'+container).find('#'+objectId);
+       var lastChild;
+       var speed = 3000;
+       var timer = 0;
+       var autoplay = false;
+
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
+       el.data('animating',false);
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
+
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
+
+       if(arguments.length==4){
+               el.data('autoStart', auto);
+       }
+
+       if(el.data('autoStart')){
+               if(timer==0){
+                       timer = setInterval(moveNextSlide, speed);
+                       autoplay = true;
+               }
+       }
+
+       el.bind({
+               mouseenter:function(){
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+       el.data('prev').bind({
+               click:function(e){
+                       e.preventDefault();
+                       movePrevSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+       el.data('next').bind({
+               click:function(e){
+                       e.preventDefault();
+                       moveNextSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       function movePrevSlide(){
+               if(!el.data('animating')){
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
+               
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+    function moveNextSlide(){
+               if(!el.data('animating')){
+                       el.data('animating',true);
+
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
+
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+}
+
+function fn_slide(options){
+
+       var opts = jQuery.extend({},options);
+
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
+       var auto = false;
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+       var time;
+
+
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
+       effect = opts.effect;
+       auto = opts.auto;
+
+       if(auto){
+               time = setTimeout('slideShow()',3000);
+       }
+
+       slideShow = function(){
+
+               if(current < len-1){
+                       current++;
+               }else{
+                       current=0;
+               }
+
+               controllStatus();
+
+               moveControl('next');
+
+               time = setTimeout('slideShow()',3000);
+       }
+
+       controllStatus = function(){
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+               if(current>0||current<len-1){                           
+                       $prev.show();
+                       $next.show();
+               }
+               if(current==0){
+                       $prev.hide();
+                       $next.show();
+               }
+               if(current>=len-1){
+                       $prev.show();
+                       $next.hide();
+               }
+       }
+
+       moveControl = function(msg){
+               if(opts.bt!=null){
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
+               }
+
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                       $obj.children().hide();
+                       $obj.children().eq(current).show();
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                       $obj.animate({'left':'-'+size*current},'slow');
+               }
+       }
+
+       $obj.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               }
+       });
+
+       //롤링 버튼 클릭시
+       $bt.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
+
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+                       controllStatus();
+
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                               $obj.children().hide();
+                               $obj.children().eq(current).show();
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                               $obj.animate({'left':'-'+size*current},'slow');
+                       }
+
+                       // 모든 롤링 버튼을 비활성화
+                       $bt.each(function(){
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');
+                                $(this).find('img').attr('src',source);
+                       });
+
+                       // 선택한 롤링버튼을 활성화
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+
+                       return false;
+               }
+       });
+
+       //이전 버튼 클릭시
+       $prev.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
+                       current--;                                                      //이미지 인덱스값 1씩 감소
+
+                       moveControl('prev');
+
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+                       return false;
+               }
+       });
+
+       //다음 버튼 클릭시
+       $next.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       current++;                                                      //이미지 인덱스값 1씩 증가
+                       
+                       moveControl('next');
+
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+                       return false;
+               }
+       });
+
+}
+
+// main rolling banner
+function slideMotion1(){
+       var $banner = $('#rolling .motionview'),
+               //$nav = $('#rolling ul.nav'),
+               banner = {prev:null, next:null},
+               size = $banner.children().length;
+               index = 1,
+               speed = 3000,
+               timer = null,
+               auto = true,
+               width = parseInt(100/size),
+               rest = parseInt(100%size);
+
+       var $nav = $('<ul class="nav">').insertAfter($banner);
+
+       $banner.children().each(function(index){
+               index++;
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+               if(index==size){
+                       $nav.children().eq(-1).find('a').css('background-image','none');
+               }
+       });
+
+       if(rest>0){
+               width+=rest;
+               $nav.children().eq(-1).css('width',width+'%');
+       }
+
+       $nav.delegate("li",'click',function(){
+               var idx = $nav.children().index(this);
+               index = idx;
+               banner.prev = $banner.find('a.active');
+               banner.next = $banner.find('a').eq(index);
+
+               clearInterval(timer);
+               auto = false;
+               
+               $nav.trigger('change.banner',banner)
+                       .trigger('change.tab',index);
+
+               return false;
+       });
+
+       $nav.bind('change.banner',function(event, banner){
+               aniMotion();
+       });
+
+       $nav.bind('change.tab',function(event, index){
+               $nav.children().find('a').removeClass('sel');
+               $nav.children().eq(index).find('a').addClass('sel');
+       });
+
+       timer = setInterval(autoMotion, speed);
+
+       function autoMotion(){
+               if(index > size-1) index = 0;
+
+               aniMotion();
+       }
+
+       function aniMotion(){
+               if(auto){
+                       banner.prev = $banner.find('a.active');
+                       banner.next = $banner.find('a').eq(index);
+
+                       $nav.children().find('a').removeClass('sel');
+                       $nav.children().eq(index).find('a').addClass('sel');
+               }
+               banner.prev.addClass('last-active');
+               banner.next.css({'opacity':0.0})
+                       .addClass('active')
+                       .animate({'opacity':1.0}, 1000, function(){
+                               banner.prev.removeClass('active last-active');
+
+                               if(auto){
+                                       index++;
+                               }else{
+                                       index++;
+                                       timer = setInterval(autoMotion, speed*1.5);
+                                       auto = true;
+                               }
+                       });
+       }
+}
+
+// forum list show or hide function
+function toggleFunc(){
+       
+       var defaulNum = [2];
+
+       $('.forum-tit').each(function(){
+               var self = $(this);
+
+               var idx = $('.forum-tit').index(this);
+
+               for(i=0;i<=defaulNum.length;i++){
+                       if(idx==defaulNum[i]){
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+                               self.find('a.toggle').css('background-image',source);
+
+                               self.find('a.toggle').text('Show');
+                               self.addClass('mb35').next().hide();
+                       }
+               }
+
+               self.find('a.toggle').click(function(){
+                       
+                       if(self.next().is(':visible')){
+                               var source = $(this).css('background-image').replace('.gif','_.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Show');
+                               self.addClass('mb35').next().hide();
+                       }else{
+                               var source = $(this).css('background-image').replace('_.gif','.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Hide');
+                               self.removeClass('mb35').next().show();
+                       }
+
+                       return false;
+
+               });
+
+       });
+}
+
+// 파일 업로드
+function fileUpload( width ){
+       //var $img = $('.attach input[type=image]');
+       //var width = $img.attr('width');
+
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+       var $file = $('.attach input.upload').css({
+               "position": "absolute",
+               "top": "0px",
+               "right": "0px",
+               "width": w,
+               "cursor": "pointer",
+               "opacity": "0.0",
+               "height": "23px"
+       });
+       $file.off('change');
+       $file.on('change',function(e){
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+                       return;
+               }
+               var idx = $file.index(this);
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+               var fileErrMsg = {
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+                           ,ext_ko : "지원하지 않는 확장자 입니다."
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"
+                           ,ext_en : "File extention not allowed for upload."
+               };
+               var initFileInput = function(obj) {
+                       $(obj).parent().find('input.file').val("");
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
+                       else $(obj).val("");
+               };
+               
+               var filename = $(this).val();
+               
+               //CHK File ext
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+                                     , "jpg", "png", "zip"];
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+               var findFlag = false;
+               for(var i = 0; i < imgExts.length; i++) {
+                       if(imgExts[i] == fileExt) {
+                               findFlag = true;
+                               break;
+                       }
+               }
+       
+               if(findFlag == false) {
+                       alert( fileErrMsg["ext_" + localeCode] );
+                       initFileInput(this);
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+                       return;
+               }
+               
+               //CHK File Size
+               if(
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
+                               || $.browser.mozilla //FF
+                               || $.browser.safari //Chrome
+               )
+               {
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+                       if( filesize > 200 ) {
+                               alert( fileErrMsg["limit_" + localeCode] );
+                               initFileInput(this);
+                               return;
+                       }
+               }
+               
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+       });
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+       if(!arguments.length) return false;
+       
+       var bt = $('#'+args.bt);
+       var obj = $('#'+args.obj);
+
+       var source = bt.css('background-image');
+       
+       if(obj.is(':visible')){
+               obj.hide();
+       }
+
+       bt.toggle(function(){
+               var src = source.replace('.gif','_.gif');
+               bt.css('background-image', src);
+               obj.show();
+               
+               return false;
+       },function(){
+               var src = source.replace('_.gif','.gif');
+               bt.css('background-image', src);
+               obj.hide();
+
+               return false;
+       });
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+  var $self = $(this);
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+  
+  $self.find('a').bind('click',function(){
+   $("#selArea ul").hide();
+   /*
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+   $answer.hide().find('.conts').hide();
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+   */
+
+   /* 20120822 hjh modify*/
+   /* if ( this open )?  close : all close, e.target open */
+   var cutTtl  = $(this).parent().children("div").html();
+   var ttl     = $(this).parent().parent().children("td.real_question").html();
+   
+   if($(this).parents('tr').next().find('.answer').is(':visible')){
+    $(this).html(cutTtl);
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+     $answer.hide();
+    });
+   }else{
+    titleInit();
+    $(this).html(ttl);
+    $answer.hide().find('.conts').hide();
+    //$answer.slideUp('normal').find('.conts').hide();
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
+   }   
+
+   return false;
+  });
+ });
+
+ $answer.each(function(){
+  var $self = $(this);
+
+  $(this).find('a.bt-close-faq').bind('click',function(){
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");
+   var cutTtl      = question_td.children("div").html();
+   question_td.children("a").html(cutTtl);
+   
+   $self.find('.conts').slideUp('fast',function(){
+    $self.hide();
+   });
+
+   return false;
+  });
+ });
+ 
+ var titleInit = function() {
+  $question.each(function(i) {
+   $(this).find("a").html($(this).find("div").html());
+  });
+ }
+}
+
+
+
+/**
+ *  쓰기페이지 Tab 영역 컨트롤
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+       var tabs = $('.tab-list').find("li");
+       var elements = $( selector );
+
+       $( elements ).each( function( i ) {
+               if( i != 0 )
+               {
+                       $(this).hide();
+               }
+       })
+
+       // Control Tabs
+       $( tabs ).each( function( i ) {
+               $( this ).click( function(){
+                       resetClass();
+
+                       $( this ).find( 'a' ).addClass( "sel" );
+                       $( elements[i] ).show();
+
+                       return false;
+               });
+       });
+
+       // Class 리셋
+       function resetClass()
+       {
+               $( tabs ).each( function( i ) {
+                       $( this ).find( 'a' ).removeClass( 'sel' );
+               });
+
+               $( elements ).each( function( i ) {
+                       $( this ).hide();
+               });
+       }
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn            = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    $("a.remove-btn").eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ obj.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ 
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile    = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj       = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+  var firstCompFile = compFile.eq(0);
+  firstCompFile.prev().prev().val("");
+  if ($.browser.msie) {
+               $(obj).parent().find('input.file').val("");
+               firstCompFile.replaceWith( firstCompFile.clone(true) );
+       } else {
+               firstCompFile.val("");
+               firstCompFile.prev().prev().val("");
+  }
+ } else {
+  obj.parent().remove();
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+  
+  //add-btn event..
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+ 
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+ 
+ setTimeout(function() {
+  $("#" + id).focus();
+ }, 100);
+ 
+ $("#" + id).on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   var that = $(this);
+   setTimeout(function() {
+    that.prev().focus();
+   }, 1);
+  }
+ });
+ 
+ $("#" + id).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/** 
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );
+ 
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+ 
+ inputFile.on("keydown", function(e) {
+  var that = $(this);
+  
+  if(e.which == 9 && e.shiftKey) {
+   return true;
+  }
+  
+  if(e.which === 9) {
+   e.preventDefault();
+   setTimeout(function() {
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ inputFile.on("focusin", function(e) {
+  $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+  $(this).parent().css("outline", "");
+ });
+ 
+ firstAddAction(btnFileAttach, limit, w, btnName);
+ 
+ /*
+ btnFileAttach.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    inputFile.focus();
+   }, 1);
+  }
+ });
+ 
+ btnFileAttach.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ */
+ /**
+  *  2012-08-08 전종호 추가
+  *  파일 Input Text 영역 너비를 잡아주는 메서드
+  */
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+ 
+ $("#" + removeBtnId).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/** 
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+       var isCompareView=false;
+       $("#devicespecs-list > li").each( 
+               function(i){ 
+                       $(".info", this).bind("click", devicespecsListInfoToggle);
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);
+                       
+                       //detail info layer toggle function
+                       function devicespecsListInfoToggle (){
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+                               return false;
+                       }
+       });
+
+
+       /* DEVICE COMPARE 열리는 부분
+       - defualt : close. 
+       - 최초 한번만 열림 
+       - 현재는 compare 버튼에 공통으로 함수 바인딩
+       */
+       function devicespecsCompareOnOff (){
+               if ( isCompareView ) return;
+               var ww = ( isCompareView ) ? "30px":"207px";
+               $("#devicespecs-compare").animate({
+                   height: ww }, 300, "linear", function(){ });
+
+               isCompareView = ( isCompareView ) ? false:true;
+               return false;
+       }
+
+       //compare 버튼 공통으로 클릭 이벤트 걸림 
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/** 
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+       var isImgView = false;
+       var isView = 0;
+       
+       //thumbnail overevent bind
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+       focusDeviceDetail (1);
+       
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.type === "keydown" && e.which == 9) {
+                       setTimeout(function() {
+                               $("#img-viewer-handle a").eq(0).focus();        
+                       }, 1);
+               }
+       });
+       
+       //thumbnail viewarea controll handler bind
+       $("#img-viewer-handle").click(function () {
+               var ww;
+               var src = $("#img-viewer-handle img").attr("src");
+               if ( isImgView ){
+                       ww = "300px";
+                       src = src.replace(".gif", "_.gif");
+                       $("#img-viewer-thumbnail").hide();
+                       $("#device-info").show();
+               }else{
+                       ww = "730px";
+                       src = src.replace("_.gif", ".gif");
+                       $("#img-viewer-thumbnail").show();
+                       $("#device-info").hide();
+                       focusDeviceDetail(1);
+               }
+               
+               $("#img-viewer-handle img").attr("src", src);
+       $("#img-viewer").animate({
+                   width: ww
+                       }, 300, "linear", function(){
+                       if($.browser.msie)
+                               $("#img-inner").css("width", ww);
+               });
+               
+       isImgView = ( isImgView ) ? false:true;
+    });
+
+       //thumbnail overevent function (update date 2012.09.05 kangki)
+       function focusDeviceDetail ( id ) {
+               if ( isView == id ) return;
+
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+               $( "#img-viewer-bic > img").attr("src", imgSrc);
+               isView = (id);          
+       }
+
+       /*toggle devicespecs List*/
+       if($('div#contents').find('.devicespec-tit').length){
+               
+               $('.devicespec-tit').each(function(){
+                       var self = $(this);
+                       $('a', self).bind ("click", fnToggle);
+
+                       function fnToggle(){
+
+                               if ( $(this).parent().parent().next().is(':visible') ){
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+                                       self.find('em').text('Show');
+                                       self.next().hide();
+
+                                       return false;
+                               }else{
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+                                       self.find('em').text('Hide');
+                                       self.next().show();
+
+                                       return false;
+                               }
+                       }
+                                                       
+               });
+       }
+
+       /*all Show Hide devicespecs List*/
+       if($('div#contents').find('.devicespecs-util').length){
+               var self = $('div#contents').find('.devicespecs-util');
+
+               $('.showA', self).bind ("click", function (){
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( !me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+                                       me.find('em').text('Hide');
+                                       me.next().show();
+                               }
+                       });
+                       return false;
+               })
+               $('.hideA', self).bind ("click", function (){
+                       
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+                                       me.find('em').text('Show');
+                                       me.next().hide();
+                               }
+                                                               
+                       });
+                       return false;
+               })
+       }       
+}
+
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+       var focusTarget = "input";
+
+       $("#searchInput").bind("keydown", checkSearchText);
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+
+       $(".autocomplete").mouseleave(function(){
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".autocomplete").css("visibility", "visible");
+
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+
+                       var hei = $(".autocomplete").find('>ul').outerHeight();
+                       if(hei>400){
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+                       }
+               }
+               else{
+                       $(".autocomplete").css("visibility", "hidden");
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+ */
+
+function setTopScroll(selector) {
+       if ( !selector ) return false;
+       var btn = $( selector );
+       var w = $( window );
+       btn.css( "position", "absolute" );
+
+
+       btn.click( function(){ w.scrollTop( 0 ) } );
+
+       var wheight = w.innerHeight();
+       
+       $(window).resize( function() {
+               wheight = w.innerHeight();
+               redraw();
+       });
+
+       $(window).scroll( function() {
+               redraw();
+       })
+
+       /**
+        *      Top 버튼의 재정렬 메서드
+        */
+       function redraw()
+       {
+               var t = w.scrollTop() + wheight - 289;
+
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {
+                       t = wheight / 2;
+               }
+               
+               btn.clearQueue();
+
+               btn.animate({
+           top: t
+               }, 500, function() {
+           // Animation complete.
+               });
+               //btn.css( "top", t );
+               //console.log( "target : " + t );
+       }
+
+       redraw();
+       /*
+       obj.initTop = position;
+       obj.topLimit = topLimit;
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+       obj.style.position = "absolute";
+       obj.top = obj.initTop;
+       // obj.left = obj.initLeft;
+
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
+               obj.getTop = function() {
+                       return window.pageYOffset;
+               }
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+               obj.getTop = function() {
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+               }
+       } else {
+               obj.getTop = function() {
+                       return 0;
+               }
+       }
+
+       if ( self.innerHeight ) {       //WebKit
+               obj.getHeight = function() {
+                       return self.innerHeight;
+               }
+       } else if( document.documentElement.clientHeight ) {
+               obj.getHeight = function() {
+                       return document.documentElement.clientHeight;
+               }
+       } else {
+               obj.getHeight = function() {
+                       return 500;
+               }
+       }
+
+       obj.move = setInterval( function() {
+               if ( obj.initTop > 0 ) {
+                       pos = obj.getTop() + obj.initTop;
+               } else {
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
+               }
+
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+               if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+               interval = obj.top - pos;
+               obj.top = obj.top - interval / 3;
+               obj.style.top = obj.top + "px";
+       }, 30 )
+       */
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){ 
+       var x,y; 
+       if (window.innerHeight) { // IE 외 모든 브라우저 
+               x = (screen.availWidth - self.innerWidth) / 2; 
+               y = (screen.availHeight - self.innerHeight) / 2; 
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
+               x = (screen.availWidth - document.body.clientWidth) / 2; 
+               y = (screen.availHeight - document.body.clientHeight) / 2; 
+       } 
+       window.moveTo(x,y); 
+}
+
+// Layer Popup Open
+function layer_open(el){
+       var temp = $('#' + el);
+
+       if(!temp.hasClass('sty2')){
+               $('.layer').fadeIn();
+       }
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       if(temp.hasClass('sty2')){
+               temp.fadeIn();
+
+               temp.find('a.cbtn').click(function(e){
+                       temp.fadeOut();
+               });
+               temp.find('a.gbtn').click(function(e){
+                       temp.fadeOut();
+               });
+
+               return false;
+       }
+       // 닫는 버튼 gbtn-c 추가 20130627
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+               $('.layer').fadeOut();
+               return false;
+       });
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+       var temp = $('#' + el);
+       $('input').attr('disabled', 'disabled');
+       $('.layerPop').fadeIn();
+       
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+               $('.layerPop').fadeOut();
+               $('input').removeAttr('disabled');
+               return false;
+       });
+}
+
+
+function pop_account(url){
+       window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+       window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/** 
+ *  [PAGE] Tags
+ *  date : 20120820
+ *  author : 전종호
+ */
+function initTags()
+{
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+       // 마지막 아이템은 제외
+       var eleArr = $(".tag-list").find("li");
+
+       $( eleArr ).each( function( i ) {
+               if( i < eleArr.length - 1 )
+               {
+                       var target = $(this).find("a")[0];
+                       var content = $( target ).html();
+
+                       $( target ).html( content + "," );
+               }
+       })
+}
+
+$(document).ready(function(){
+       $(".tip_info").css("cursor","pointer");
+       $(".tip_info > img").mouseover(function(){
+               $(".tip_cont").css("display","block");
+       });
+       $(".tip_info > img").mouseout(function(){
+               $(".tip_cont").css("display","none");
+       });
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+       var $L = $("#" + id) ;
+       var $D  = $("#" + id + "down") ;
+
+       $T = $("#" + id) ;
+
+       $L.show();
+       isPopup = true ;
+
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+       $("#" + id + "agree").focus() ;
+
+       jQuery(":focusable").focusin(function(e){
+               if (isPopup) {
+                       e.stopPropagation() ;
+                       if ($L.find(jQuery(this)).length > 0) {
+                       } else {
+                               jQuery(this).blur() ;
+                               jQuery("#" + id + " :focusable:first").focus() ;
+                       }
+               }
+       }) ;
+
+       $L.find('.close').click(function(){
+               resetPopup(id) ;
+       });
+
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+       $("#" + T + "down").hide();
+       $("#" + T + "agree").attr("checked", false) ;
+       isPopup = false ;
+       $("#" + T).hide() ;
+       $("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+       if ($("#" + T + "agree").is(':checked')) {
+               commonDownloadLog(F, I) ;
+               resetPopup(T) ;
+       }
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+       if ( "area" === nodeName ) {
+               map = element.parentNode;
+               mapName = map.name;
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+               img = $( "img[usemap=#" + mapName + "]" )[0];
+               return !!img && visible( img );
+       }
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+                       visible( element ) ;
+}
+
+function visible( element ) {
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+               return $.css( this, "visibility" ) === "hidden";
+       }).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device1').hide();
+       
+       $('#thumb_view_btn').hover(function() {
+               $('.view_device1').show();
+       },function() {
+               $('.view_device1').hide();
+       });
+               
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device2').hide();
+       
+       $('#thumb_view_btn2').hover(function() {
+               $('.view_device2').show();
+       },function() {
+               $('.view_device2').hide();
+       });
+               
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+       var $L = $("#" + popId) ;
+       $L.show(100);
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+       $L.find('.close').click(function(){
+               $L.hide();
+       });
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
diff --git a/org.tizen.guides/html/scripts/core.js b/org.tizen.guides/html/scripts/core.js
new file mode 100644 (file)
index 0000000..68dea4c
--- /dev/null
+++ b/org.tizen.guides/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10. 
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+       if (!seperator) seperator = '-';
+
+       date = $.SD.replaceAll(date, seperator, '');
+       date = $.SD.replaceAll(date, '/', '');
+
+       if (date.length !== 8) return null;
+       
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+       if (date.valueOf().toString() === 'NaN') return null;
+
+       return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+       if (!seperator) seperator = '/';
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+       var str, dateString = date.getFullYear();
+
+       str             = "0" + (date.getMonth()+1);
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+       str             = "0" + date.getDate();
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+
+       return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+       var tnum    = num + "";
+       var tarr    = new Array();
+       var dot     = "";
+       var idxDot  = tnum.indexOf(".");
+       var sign    = "";
+       var tinx    = 0;
+       var fnum    = tnum;
+        
+       
+       if(idxDot > -1) {
+               fnum = tnum.substring(0, idxDot);
+               dot  = tnum.substring(idxDot);
+               tnum = fnum;
+       } 
+       
+       if(tnum.indexOf("-") > -1) {
+               fnum = tnum.substring(1);
+               sign = tnum.substring(0, 1);
+       }
+       
+       for(var inx = fnum.length; inx > 0; ) {
+               tarr[tinx++] = fnum.substring(inx, inx - 3);
+               inx = inx - 3;
+       }
+       
+       return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+       doAjax : function (json) {
+               var param = {
+                       async : json.async,
+                       type : json.type,
+                       dataType : json.dataType,
+                       cache: json.cache,
+                       timeout : json.timeout,
+                       success : json.success,
+                       error : json.error
+               };
+
+               if (param.dataType === 'jsonp') {
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+               } else {
+                       param.url = json.url;
+                       param.data = json.data;
+               }
+               $.ajax(param);
+       },
+       
+       get : function (json) {
+               $.SD.ajax.doAjax({ 
+                       url:json.url,
+                       cache:json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'get', 
+                       dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       },
+       
+       post : function (json) {
+               $.SD.ajax.doAjax({ url:json.url,
+                       cache: json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'post', dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       }
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+       
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/[0-9]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+               return false;
+       }
+       
+       return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+       var scrollbars  = "no";
+       var resizeable  = "no";
+       
+       if(popObj.scrollbars) {
+               scrollbars = popObj.scrollbars; 
+       }
+       
+       if(popObj.resizeable) {
+               resizeable = popObj.resizeable;
+       }
+       
+       var width  = screen.width;
+       var height = screen.height;
+
+       var x = ( width / 2 ) - ( popObj.width / 2 );
+       var y = ( height / 2 ) - ( popObj.height / 2 );
+
+       var opt = "left=" + x +
+                 ",top=" + y +
+                 ",width=" + popObj.width +
+                 ",height=" + popObj.height +
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+                 ",scrollbars=" + scrollbars +
+                 ",resizable=" + resizeable;
+       var pop = window.open(popObj.url, popObj.target, opt);
+       if(pop) {
+               pop.focus();
+       }
+}
+
+$.SD.isValidDate = function(val) {
+       if(val.length != 8) {
+               return false;
+       }
+       
+       var yyyy = Number(val.substring(0, 4)); 
+       var mm   = Number(val.substring(4, 6));
+       var dd   = Number(val.substring(6));
+       
+       if( mm < 1 || mm > 12 ) {
+               return false;
+       }
+       
+       var endDay  = 0;
+       
+       if( mm == 2 ) {
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+                       endDay = 29;
+               } else {
+                       endDay = 28;
+               }
+               
+       } else {
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+               endDay = endDays[mm - 1];
+       }
+       
+       if( dd <= 0 || dd > endDay ) {
+               return false;
+       } 
+       
+       return true;
+       
+}
+
+$.SD.boardDownload = function(option, func) {
+       var jsonData = {
+               url: "/board/ajaxDwnldProc.do",
+               async: false,
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+                               //location.href = $(obj).attr("href");
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDwnldProc.do",
+               async: false,
+               data: {fileName: fileName, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               location.href = fileFullPath;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(target == 'new'){
+                                       window.open(fileFullPath, '');
+                               }else{
+                                       location.href = fileFullPath;
+                               }
+                               
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonAllShareClickCountProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+       var jsonData = {
+               url: "/common/ajaxCommonClickCountProc.do",
+               data: {categoryName: categoryName, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+       var resultSize = 0;
+       if(str == null){
+               return 0;
+       }
+       for(var i=0; i<str.length; i++){
+         var c = escape(str.charAt(i));
+         if(c.length == 1){
+                 resultSize ++;
+         }     else if(c.indexOf("%u") != -1) {
+                 resultSize += 2;
+         }     else if(c.indexOf("%") != -1) {
+                 resultSize += c.length/3;
+         }
+       }
+       return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+       var tempStr = new String(str);
+       var len = 0;
+       for ( var i = 0; i < str.length; i++) {
+               var c = escape(str.charAt(i));
+               if (c.length == 1)
+                       len++;
+               else if (c.indexOf("%u") != -1)
+                       len += 2;
+               else if (c.indexOf("%") != -1)
+                       len += c.length / 3;
+               if (len > limit) {
+                       tempStr = tempStr.substring(0, i);
+                       break;
+               }
+       }
+       return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/** 
+ * Method pagination 
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+       var info = {
+                        prev : 1
+                       ,first : 1
+                       ,begin : pageInfo.begin - 0
+                       ,current : pageInfo.current - 0
+                       ,end : pageInfo.end - 0
+                       ,last : pageInfo.last - 0
+                       ,next : 1
+               },
+               target  = this, 
+               page    = $('<span class="page"></span>'),
+               prev    = "", 
+               next    = "", 
+               i               = 0, 
+               n               = 0;
+
+       info.begin       = info.begin < 1 ? 1 : info.begin;
+       info.current = info.current < 1 ? 1 : info.current;
+       info.end         = info.end < 1 ? 1 : info.end;
+       info.last        = info.last < 1 ? 1 : info.last;
+
+       info.prev = info.current - 1;
+       info.next = info.current + 1;
+
+       target.addClass("pageNumber");
+       target.addClass("mt20");
+       target.children().remove();
+
+       if (info.first < info.begin) {
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.first);
+               }));
+       }
+
+       if (info.prev >= info.first) {
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.prev);
+               }));
+       }
+
+       i = info.begin;
+       n = info.end;
+       for(; i <= n; i++) {
+               if (i === info.current) {
+                       page.append('<strong>'+i+'</strong>');
+               } else {
+                       (function(index){
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+                                       e.preventDefault();
+                                       func(index);
+                               }));
+                       })(i);
+               }
+       }
+
+       target.append(page);
+
+       if (info.next <= info.last) {
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.next);
+               }));
+       }
+       
+       if (info.last > info.end) {
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.last);
+               }));
+       }       
+};
+
+/**
+ *  Method : popup Show Hide 
+ */
+$.fn.popupShow = function(options) {
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);
+       
+       if($("body div#" + opts.maskId).size() == 0) {
+               $("body").append("<div id='" + opts.maskId + "'></div>");
+               $("#" + opts.maskId).css({
+                       "position" : "absolute",
+                       "left"     : "0",
+                       "top"      : "0",
+                       "z-index"  : "9000",
+                       "background-color" : "#000",
+                       "display"  : "none"
+               });
+       }
+       
+       var mask_layer  = $("#" + opts.maskId);
+       var popup_layer = $(this);
+       
+       popup_layer.css("z-index", "9999");
+       
+       var maskHeight = $(document).height();
+       var maskWidth = $(window).width();
+       
+       mask_layer.css({'width':maskWidth,'height':maskHeight});
+       
+       mask_layer.fadeIn(opts.fadeSec);
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);
+       
+       var winH = $(window).height();
+       var winW = $(window).width();
+       
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+       
+       popup_layer.fadeIn(opts.fadeSec);
+       
+       var init_num = 0;
+       
+       if(init_num == 0) {
+               mask_layer.click(function() {
+                       $(this).hide();
+                       popup_layer.hide();
+               });
+               
+               
+               $("#" + opts.closeId).click( function(e) {
+                       e.preventDefault();
+                       popup_layer.popupHidden(opts.maskId);
+               });
+               
+               
+               $(window).resize( function() {
+                       var maskHeight = $(document).height();
+                       var maskWidth  = $(window).width();
+                       var winH       = $(window).height();
+                       var winW       = $(window).width();
+                       
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});
+                       
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+               });
+               
+               init_num++;
+       }
+};
+
+$.fn.popupHidden = function(maskId) {
+       var id = "#";
+       
+       if(maskId) {
+               id = id + maskId;
+       } else {
+               id = id + $.fn.popupShow.defaults.maskId; 
+       }
+       
+       $(id).hide();
+       $(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+       speed : "slow",
+       fadeLow : 0.8,
+       fadeSec : 100,
+       maskId  : "mask",
+       popupId : "layer-pop",
+       closeId : "layer-pop-close"
+};
+
+/**
+ *  Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+       var that = this;
+       var target = null;
+
+       that.each(function (i, item) {
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+               if (filePath != "") {
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+                       if (!imgExts[fileExt]) {
+                               target = item;
+                               return false;
+                       }
+               }
+       });
+
+       return target;
+}      
+
+/**
+ *  Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+       return this.optional(element) 
+              || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+    var label = $(this).data('label');
+    
+    /*
+    if (event && event.type === 'focusin') {
+      label.hide();
+    } else if (event && event.type === 'focusout') {
+      label.css('opacity', options.placeholderOpacity);
+    }
+    */
+    
+    if (event && event.type !== 'keydown') {
+      toggleLabel(this, label);
+    } else {
+      // Use timeout to catch val() just after the key is pressed
+      // Using keyup is too slow.   
+      (function(input) {
+        setTimeout(function() {
+          toggleLabel(input, label);
+        }, 0);
+      })(this);
+    }
+    
+    if (event && event.type === 'focusin') {
+       label.hide();
+    }
+  };
+  
+  var toggleLabel = function(input, label) {
+    if ($(input).val()) {
+      label.hide();
+    } else {
+      label.show();
+    }
+  };
+
+  $.fn.stickyPlaceholders = function(options) {
+    var defaults = {
+      wrapperClass: 'sticky-placeholder-wrapper',
+      wrapperDisplay: 'block',
+      labelClass: 'sticky-placeholder-label',
+      placeholderAttr: 'placeholder',
+      dataAttr: 'data-sticky-placeholder',
+      placeholderColor: '#000',
+      placeholderOpacity: 0.5,
+      placeholderFocusOpacity: 0.25
+    };
+    options = $.extend(defaults, options);
+
+    return this.each(function() {
+      var input       = $(this),
+          placeholder = input.attr(options.placeholderAttr),
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+          labelStyle;
+
+      // store a reference to each input's label
+      input.data('label', label);
+
+      // remove the placeholder attribute to avoid conflcits
+      input.removeAttr('placeholder');
+      
+      // If the dataAttr is set and it's not equal to the placeholderAttr
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+        input.attr('data-sticky-placeholder', placeholder);
+      }
+
+      labelStyle = {
+        'color': options.placeholderColor,
+        'cursor': 'text',
+        'font-family': input.css('font-family'),
+        'font-weight': input.css('font-weight'),
+        'font-size': input.css('font-size'),
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+        'opacity': options.placeholderOpacity,
+        'padding-left': input.css('padding-left'),
+        'padding-top': input.css('padding-top'),
+        'position': 'absolute',
+        'text-transform': input.css('text-transform'),
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+      };
+      label.css(labelStyle);
+      
+      // hide the placeholder if the input already has a value
+      if (input.val()) {
+        label.hide();
+      }
+
+      $(this).bind('keydown input focusin focusout', function(event) {
+        $.SD.alterParent.call(this, options, event);
+      });
+        
+      // prevent click/dblclick from selecting the label text
+      label.bind('mousedown', function(e) {
+        e.preventDefault();
+      });
+      
+      // call alterParent initially without an event to set up the wrapper elements
+      $.SD.alterParent.call(this, options);
+    });
+  };
+ 
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+       $("#" + file_id).on("keydown", function(e) {
+               var that = $(this);
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.which === 9) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + after_id).focus();
+                       }, 1);
+               }
+       });
+       
+       $("#" + after_id).on("keydown", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + file_id).focus();
+                       }, 1);
+               }
+       });
+}  
+
+$.SD.closeWP = function() {
+       var Browser = navigator.appName;
+       var indexB = Browser.indexOf('Explorer');
+       if (indexB > 0) {
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);
+           window.opener.focus();
+           if (Version >= 7) {
+               window.open('', '_self', '');
+               window.close();
+           }
+           else if (Version == 6) {
+               window.opener = null;
+               window.close();
+           }
+           else {
+               window.opener = '';
+               window.close();
+           }
+       }
+       else {
+           window.close();
+       }
+}
+
+$.SD.profileFacebook = function() {
+       location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+        switch($(this).attr('id')) {
+        case 'changeEn': onClickChangeEn(e);  break;
+        case 'changeZh': onClickChangeZh(e); break;
+        case 'changeKo': onClickChangeKo(e); break;
+        case 'signOut': onClickSignOut(e); break;
+        case 'signUp': onClickSignUp(e); break;
+        case 'signIn': onClickSignIn(e); break;
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+        case 'signOff': onClickSignOff(e); break;
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+        case 'deleteAccount' : onClickDeleteAccount(e); break;
+        }
+});
+ 
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+       e.preventDefault();
+       var $this = $(this);
+       
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+               var sns = $this.attr("id").substring(4).toLowerCase();
+               switch(sns) {
+               case "facebook" :
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+                       $("div.content img").each(function() {
+                               var that = $(this);
+                               if(that.width() > 200 && that.height() > 200) {
+                                       imgUrl = that.attr("src");
+                                       return false;
+                               }
+                       });
+                       
+                       var data = {
+                               app_id : $("#sd_appId").text(),
+                               link : copyUrl,
+                               picture : imgUrl,
+                               name : $("title").text(),
+                               caption : "developer.samsung.com",
+                               description : $("div.content p").eq(0).text(),
+                               redirectUri : "http://" + location.host + "/board/sns.do"
+                       };
+                       var url = "https://www.facebook.com/dialog/feed?" ;
+                       url += "app_id=" + data.app_id + "&" ;
+                       url += "link=" + data.link + "&" ;
+                       url += "picture=" + data.picture + "&" ;
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;
+                       url += "redirect_uri=" + data.redirectUri ;
+                       sendSNS(sns, url, 850, 600);
+                       break;
+               case "twitter" :
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+                       break;
+               }
+       }
+       
+       function sendSNS(sns, url, iWidth, iHeight) {
+               var popObj = { url : url
+                                    , width : iWidth
+                                    , height: iHeight
+                                    , target: sns
+                                    , scrollbars: "yes"
+                                    , resizeable: "yes"};
+       
+               $SD.popupCenter(popObj);
+       }
+})
+ 
+//document rady End #########################################
+ });
+
+;(function(){
+       window.deviceImageError = function(el) {
+               var noImage = noImage || '/images/common/device_details_noimage.gif';
+               if (el.src === noImage) 
+                       return;
+               el.src = noImage;
+       };
+})();
+
+function commonDownload(fileName, categoryId){
+       if (fileName == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!!!")
+               return;
+       }else{
+               $SD.commonDownload(fileName, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+               });
+       }
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+/*
+function layer_view(id){
+
+       var $layer = $('#'+id);
+       var $down  = $('.license-layer').find('a#down');
+
+       $layer.show();
+       $layer.find('.close, #down').click(function(){
+               $layer.hide();
+       });
+
+       function countChecked() {
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
+       }
+
+       $(":checkbox").click(countChecked);
+}
+*/
diff --git a/org.tizen.guides/html/scripts/jquery.util.js b/org.tizen.guides/html/scripts/jquery.util.js
new file mode 100644 (file)
index 0000000..3fc3ad0
--- /dev/null
+++ b/org.tizen.guides/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
+ *          
+ *   class: Inside the class attribute, wrapped in curly braces: { }
+ *   
+ *   elem:  Inside a child element (e.g. a script tag). The
+ *          name parameter indicates *which* element.
+ *          
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ * 
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ * 
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ * 
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ * 
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+       metadata : {
+               defaults : {
+                       type: 'class',
+                       name: 'metadata',
+                       cre: /({.*})/,
+                       single: 'metadata'
+               },
+               setType: function( type, name ){
+                       this.defaults.type = type;
+                       this.defaults.name = name;
+               },
+               get: function( elem, opts ){
+                       var settings = $.extend({},this.defaults,opts);
+                       // check for empty string in single property
+                       if ( !settings.single.length ) settings.single = 'metadata';
+                       
+                       var data = $.data(elem, settings.single);
+                       // returned cached data if it already exists
+                       if ( data ) return data;
+                       
+                       data = "{}";
+                       
+                       if ( settings.type == "class" ) {
+                               var m = settings.cre.exec( elem.className );
+                               if ( m )
+                                       data = m[1];
+                       } else if ( settings.type == "elem" ) {
+                               if( !elem.getElementsByTagName )
+                                       return undefined;
+                               var e = elem.getElementsByTagName(settings.name);
+                               if ( e.length )
+                                       data = $.trim(e[0].innerHTML);
+                       } else if ( elem.getAttribute != undefined ) {
+                               var attr = elem.getAttribute( settings.name );
+                               if ( attr )
+                                       data = attr;
+                       }
+                       
+                       if ( data.indexOf( '{' ) <0 )
+                       data = "{" + data + "}";
+                       
+                       data = eval("(" + data + ")");
+                       
+                       $.data( elem, settings.single, data );
+                       return data;
+               }
+       }
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+       return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+       // http://docs.jquery.com/Plugins/Validation/validate
+       validate: function( options ) {
+
+               // if nothing is selected, return nothing; can't chain anyway
+               if (!this.length) {
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+                       return;
+               }
+
+               // check if a validator for this form was already created
+               var validator = $.data(this[0], 'validator');
+               if ( validator ) {
+                       return validator;
+               }
+
+               // Add novalidate tag if HTML5.
+               this.attr('novalidate', 'novalidate');
+
+               validator = new $.validator( options, this[0] );
+               $.data(this[0], 'validator', validator);
+
+               if ( validator.settings.onsubmit ) {
+
+                       var inputsAndButtons = this.find("input, button");
+
+                       // allow suppresing validation by adding a cancel class to the submit button
+                       inputsAndButtons.filter(".cancel").click(function () {
+                               validator.cancelSubmit = true;
+                       });
+
+                       // when a submitHandler is used, capture the submitting button
+                       if (validator.settings.submitHandler) {
+                               inputsAndButtons.filter(":submit").click(function () {
+                                       validator.submitButton = this;
+                               });
+                       }
+
+                       // validate the form on submit
+                       this.submit( function( event ) {
+                               if ( validator.settings.debug )
+                                       // prevent form submit to be able to see console output
+                                       event.preventDefault();
+
+                               function handle() {
+                                       if ( validator.settings.submitHandler ) {
+                                               if (validator.submitButton) {
+                                                       // insert a hidden input as a replacement for the missing submit button
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+                                               }
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );
+                                               if (validator.submitButton) {
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+                                                       hidden.remove();
+                                               }
+                                               return false;
+                                       }
+                                       return true;
+                               }
+
+                               // prevent submit for invalid forms or custom submit handlers
+                               if ( validator.cancelSubmit ) {
+                                       validator.cancelSubmit = false;
+                                       return handle();
+                               }
+                               if ( validator.form() ) {
+                                       if ( validator.pendingRequest ) {
+                                               validator.formSubmitted = true;
+                                               return false;
+                                       }
+                                       return handle();
+                               } else {
+                                       validator.focusInvalid();
+                                       return false;
+                               }
+                       });
+               }
+
+               return validator;
+       },
+       // http://docs.jquery.com/Plugins/Validation/valid
+       valid: function() {
+        if ( $(this[0]).is('form')) {
+            return this.validate().form();
+        } else {
+            var valid = true;
+            var validator = $(this[0].form).validate();
+            this.each(function() {
+                               valid &= validator.element(this);
+            });
+            return valid;
+        }
+    },
+       // attributes: space seperated list of attributes to retrieve and remove
+       removeAttrs: function(attributes) {
+               var result = {},
+                       $element = this;
+               $.each(attributes.split(/\s/), function(index, value) {
+                       result[value] = $element.attr(value);
+                       $element.removeAttr(value);
+               });
+               return result;
+       },
+       // http://docs.jquery.com/Plugins/Validation/rules
+       rules: function(command, argument) {
+               var element = this[0];
+
+               if (command) {
+                       var settings = $.data(element.form, 'validator').settings;
+                       var staticRules = settings.rules;
+                       var existingRules = $.validator.staticRules(element);
+                       switch(command) {
+                       case "add":
+                               $.extend(existingRules, $.validator.normalizeRule(argument));
+                               staticRules[element.name] = existingRules;
+                               if (argument.messages)
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+                               break;
+                       case "remove":
+                               if (!argument) {
+                                       delete staticRules[element.name];
+                                       return existingRules;
+                               }
+                               var filtered = {};
+                               $.each(argument.split(/\s/), function(index, method) {
+                                       filtered[method] = existingRules[method];
+                                       delete existingRules[method];
+                               });
+                               return filtered;
+                       }
+               }
+
+               var data = $.validator.normalizeRules(
+               $.extend(
+                       {},
+                       $.validator.metadataRules(element),
+                       $.validator.classRules(element),
+                       $.validator.attributeRules(element),
+                       $.validator.staticRules(element)
+               ), element);
+
+               // make sure required is at front
+               if (data.required) {
+                       var param = data.required;
+                       delete data.required;
+                       data = $.extend({required: param}, data);
+               }
+
+               return data;
+       }
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+       // http://docs.jquery.com/Plugins/Validation/blank
+       blank: function(a) {return !$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/filled
+       filled: function(a) {return !!$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/unchecked
+       unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+       this.settings = $.extend( true, {}, $.validator.defaults, options );
+       this.currentForm = form;
+       this.init();
+};
+
+$.validator.format = function(source, params) {
+       if ( arguments.length == 1 )
+               return function() {
+                       var args = $.makeArray(arguments);
+                       args.unshift(source);
+                       return $.validator.format.apply( this, args );
+               };
+       if ( arguments.length > 2 && params.constructor != Array  ) {
+               params = $.makeArray(arguments).slice(1);
+       }
+       if ( params.constructor != Array ) {
+               params = [ params ];
+       }
+       $.each(params, function(i, n) {
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+       });
+       return source;
+};
+
+$.extend($.validator, {
+
+       defaults: {
+               messages: {},
+               groups: {},
+               rules: {},
+               errorClass: "error",
+               validClass: "valid",
+               errorElement: "label",
+               focusInvalid: true,
+               errorContainer: $( [] ),
+               errorLabelContainer: $( [] ),
+               onsubmit: true,
+               ignore: ":hidden",
+               ignoreTitle: false,
+               onfocusin: function(element, event) {
+                       this.lastActive = element;
+
+                       // hide error label and remove error class on focus if enabled
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+                               this.addWrapper(this.errorsFor(element)).hide();
+                       }
+               },
+               onfocusout: function(element, event) {
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+                               this.element(element);
+                       }
+               },
+               onkeyup: function(element, event) {
+                       if ( element.name in this.submitted || element == this.lastElement ) {
+                               this.element(element);
+                       }
+               },
+               onclick: function(element, event) {
+                       // click on selects, radiobuttons and checkboxes
+                       if ( element.name in this.submitted )
+                               this.element(element);
+                       // or option elements, check parent select in that case
+                       else if (element.parentNode.name in this.submitted)
+                               this.element(element.parentNode);
+               },
+               highlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+                       } else {
+                               $(element).addClass(errorClass).removeClass(validClass);
+                       }
+               },
+               unhighlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+                       } else {
+                               $(element).removeClass(errorClass).addClass(validClass);
+                       }
+               }
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+       setDefaults: function(settings) {
+               $.extend( $.validator.defaults, settings );
+       },
+
+       messages: {
+               required: "This field is required.",
+               remote: "Please fix this field.",
+               email: "Please enter a valid email address.",
+               url: "Please enter a valid URL.",
+               date: "Please enter a valid date.",
+               dateISO: "Please enter a valid date (ISO).",
+               number: "Please enter a valid number.",
+               digits: "Please enter only digits.",
+               creditcard: "Please enter a valid credit card number.",
+               equalTo: "Please enter the same value again.",
+               accept: "Please enter a value with a valid extension.",
+               maxlength: $.validator.format("Please enter no more than {0} characters."),
+               minlength: $.validator.format("Please enter at least {0} characters."),
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+               range: $.validator.format("Please enter a value between {0} and {1}."),
+               max: $.validator.format("Please enter a value less than or equal to {0}."),
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")
+       },
+
+       autoCreateRanges: false,
+
+       prototype: {
+
+               init: function() {
+                       this.labelContainer = $(this.settings.errorLabelContainer);
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+                       this.submitted = {};
+                       this.valueCache = {};
+                       this.pendingRequest = 0;
+                       this.pending = {};
+                       this.invalid = {};
+                       this.reset();
+
+                       var groups = (this.groups = {});
+                       $.each(this.settings.groups, function(key, value) {
+                               $.each(value.split(/\s/), function(index, name) {
+                                       groups[name] = key;
+                               });
+                       });
+                       var rules = this.settings.rules;
+                       $.each(rules, function(key, value) {
+                               rules[key] = $.validator.normalizeRule(value);
+                       });
+
+                       function delegate(event) {
+                               var validator = $.data(this[0].form, "validator"),
+                                       eventType = "on" + event.type.replace(/^validate/, "");
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+                       }
+                       $(this.currentForm)
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +
+                                               "[type='range'], [type='color'] ",
+                                               "focusin focusout keyup", delegate)
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+                       if (this.settings.invalidHandler)
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/form
+               form: function() {
+                       this.checkForm();
+                       $.extend(this.submitted, this.errorMap);
+                       this.invalid = $.extend({}, this.errorMap);
+                       if (!this.valid())
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                       this.showErrors();
+                       return this.valid();
+               },
+
+               // 원본소스
+               /*
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               this.check( elements[i] );
+                       }
+                       return this.valid();
+               },
+               */
+
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+                                               this.check( this.findByName( elements[i].name )[cnt] );
+                                       }
+                               } else {
+                                       this.check( elements[i] );
+                               }
+                       }
+                       return this.valid();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/element
+               element: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+                       this.lastElement = element;
+                       this.prepareElement( element );
+                       this.currentElements = $(element);
+                       var result = this.check( element );
+                       if ( result ) {
+                               delete this.invalid[element.name];
+                       } else {
+                               this.invalid[element.name] = true;
+                       }
+                       if ( !this.numberOfInvalids() ) {
+                               // Hide error containers on last error
+                               this.toHide = this.toHide.add( this.containers );
+                       }
+                       this.showErrors();
+                       return result;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+               showErrors: function(errors) {
+                       if(errors) {
+                               // add items to error list and map
+                               $.extend( this.errorMap, errors );
+                               this.errorList = [];
+                               for ( var name in errors ) {
+                                       this.errorList.push({
+                                               message: errors[name],
+                                               element: this.findByName(name)[0]
+                                       });
+                               }
+                               // remove items from success list
+                               this.successList = $.grep( this.successList, function(element) {
+                                       return !(element.name in errors);
+                               });
+                       }
+                       this.settings.showErrors
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+                               : this.defaultShowErrors();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+               resetForm: function() {
+                       if ( $.fn.resetForm )
+                               $( this.currentForm ).resetForm();
+                       this.submitted = {};
+                       this.lastElement = null;
+                       this.prepareForm();
+                       this.hideErrors();
+                       this.elements().removeClass( this.settings.errorClass );
+               },
+
+               numberOfInvalids: function() {
+                       return this.objectLength(this.invalid);
+               },
+
+               objectLength: function( obj ) {
+                       var count = 0;
+                       for ( var i in obj )
+                               count++;
+                       return count;
+               },
+
+               hideErrors: function() {
+                       this.addWrapper( this.toHide ).hide();
+               },
+
+               valid: function() {
+                       return this.size() == 0;
+               },
+
+               size: function() {
+                       return this.errorList.length;
+               },
+
+               focusInvalid: function() {
+                       if( this.settings.focusInvalid ) {
+                               try {
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+                                       .filter(":visible")
+                                       .focus()
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+                                       .trigger("focusin");
+                               } catch(e) {
+                                       // ignore IE throwing errors when focusing hidden elements
+                               }
+                       }
+               },
+
+               findLastActive: function() {
+                       var lastActive = this.lastActive;
+                       return lastActive && $.grep(this.errorList, function(n) {
+                               return n.element.name == lastActive.name;
+                       }).length == 1 && lastActive;
+               },
+
+               elements: function() {
+                       var validator = this,
+                               rulesCache = {};
+
+                       // select all valid inputs inside the form (no submit or reset buttons)
+                       return $(this.currentForm)
+                       .find("input, select, textarea")
+                       .not(":submit, :reset, :image, [disabled]")
+                       .not( this.settings.ignore )
+                       .filter(function() {
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+                               // select only the first element for each name, and only those with rules specified
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+                                       return false;
+
+                               rulesCache[this.name] = true;
+                               return true;
+                       });
+               },
+
+               clean: function( selector ) {
+                       return $( selector )[0];
+               },
+
+               errors: function() {
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+               },
+
+               reset: function() {
+                       this.successList = [];
+                       this.errorList = [];
+                       this.errorMap = {};
+                       this.toShow = $([]);
+                       this.toHide = $([]);
+                       this.currentElements = $([]);
+               },
+
+               prepareForm: function() {
+                       this.reset();
+                       this.toHide = this.errors().add( this.containers );
+               },
+
+               prepareElement: function( element ) {
+                       this.reset();
+                       this.toHide = this.errorsFor(element);
+               },
+
+               check: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+
+                       var rules = $(element).rules();
+                       var dependencyMismatch = false;
+                       for (var method in rules ) {
+                               var rule = { method: method, parameters: rules[method] };
+                               try {
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+                                       // if a method indicates that the field is optional and therefore valid,
+                                       // don't mark it as valid when there are no other rules
+                                       if ( result == "dependency-mismatch" ) {
+                                               dependencyMismatch = true;
+                                               continue;
+                                       }
+                                       dependencyMismatch = false;
+
+                                       if ( result == "pending" ) {
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );
+                                               return;
+                                       }
+
+                                       if( !result ) {
+                                               this.formatAndAdd( element, rule );
+                                               return false;
+                                       }
+                               } catch(e) {
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+                                                + ", check the '" + rule.method + "' method", e);
+                                       throw e;
+                               }
+                       }
+                       if (dependencyMismatch)
+                               return;
+                       if ( this.objectLength(rules) )
+                               this.successList.push(element);
+                       return true;
+               },
+
+               // return the custom message for the given element and validation method
+               // specified in the element's "messages" metadata
+               customMetaMessage: function(element, method) {
+                       if (!$.metadata)
+                               return;
+
+                       var meta = this.settings.meta
+                               ? $(element).metadata()[this.settings.meta]
+                               : $(element).metadata();
+
+                       return meta && meta.messages && meta.messages[method];
+               },
+
+               // return the custom message for the given element name and validation method
+               customMessage: function( name, method ) {
+                       var m = this.settings.messages[name];
+                       return m && (m.constructor == String
+                               ? m
+                               : m[method]);
+               },
+
+               // return the first defined argument, allowing empty strings
+               findDefined: function() {
+                       for(var i = 0; i < arguments.length; i++) {
+                               if (arguments[i] !== undefined)
+                                       return arguments[i];
+                       }
+                       return undefined;
+               },
+
+               defaultMessage: function( element, method) {
+                       return this.findDefined(
+                               this.customMessage( element.name, method ),
+                               this.customMetaMessage( element, method ),
+                               // title is never undefined, so handle empty string as undefined
+                               !this.settings.ignoreTitle && element.title || undefined,
+                               $.validator.messages[method],
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"
+                       );
+               },
+
+               formatAndAdd: function( element, rule ) {
+                       var message = this.defaultMessage( element, rule.method ),
+                               theregex = /\$?\{(\d+)\}/g;
+                       if ( typeof message == "function" ) {
+                               message = message.call(this, rule.parameters, element);
+                       } else if (theregex.test(message)) {
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+                       }
+                       this.errorList.push({
+                               message: message,
+                               element: element
+                       });
+
+                       this.errorMap[element.name] = message;
+                       this.submitted[element.name] = message;
+               },
+
+               addWrapper: function(toToggle) {
+                       if ( this.settings.wrapper )
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+                       return toToggle;
+               },
+
+               defaultShowErrors: function() {
+                       for ( var i = 0; this.errorList[i]; i++ ) {
+                               var error = this.errorList[i];
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+                               this.showLabel( error.element, error.message );
+                       }
+                       if( this.errorList.length ) {
+                               this.toShow = this.toShow.add( this.containers );
+                       }
+                       if (this.settings.success) {
+                               for ( var i = 0; this.successList[i]; i++ ) {
+                                       this.showLabel( this.successList[i] );
+                               }
+                       }
+                       if (this.settings.unhighlight) {
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+                               }
+                       }
+                       this.toHide = this.toHide.not( this.toShow );
+                       this.hideErrors();
+                       this.addWrapper( this.toShow ).show();
+               },
+
+               validElements: function() {
+                       return this.currentElements.not(this.invalidElements());
+               },
+
+               invalidElements: function() {
+                       return $(this.errorList).map(function() {
+                               return this.element;
+                       });
+               },
+
+               showLabel: function(element, message) {
+                       var label = this.errorsFor( element );
+                       if ( label.length ) {
+                               // refresh error/success class
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+                               // check if we have a generated label, replace the message then
+                               label.attr("generated") && label.html(message);
+                       } else {
+                               // create label
+                               label = $("<" + this.settings.errorElement + "/>")
+                                       .attr({"for":  this.idOrName(element), generated: true})
+                                       .addClass(this.settings.errorClass)
+                                       .html(message || "");
+                               if ( this.settings.wrapper ) {
+                                       // make sure the element is visible, even in IE
+                                       // actually showing the wrapped element is handled elsewhere
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+                               }
+                               if ( !this.labelContainer.append(label).length )
+                                       this.settings.errorPlacement
+                                               ? this.settings.errorPlacement(label, $(element) )
+                                               : label.insertAfter(element);
+                       }
+                       if ( !message && this.settings.success ) {
+                               label.text("");
+                               typeof this.settings.success == "string"
+                                       ? label.addClass( this.settings.success )
+                                       : this.settings.success( label );
+                       }
+                       this.toShow = this.toShow.add(label);
+               },
+
+               errorsFor: function(element) {
+                       var name = this.idOrName(element);
+               return this.errors().filter(function() {
+                               return $(this).attr('for') == name;
+                       });
+               },
+
+               idOrName: function(element) {
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+               },
+
+               validationTargetFor: function(element) {
+                       // if radio/checkbox, validate first element in group instead
+                       if (this.checkable(element)) {
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
+                       }
+                       return element;
+               },
+
+               checkable: function( element ) {
+                       return /radio|checkbox/i.test(element.type);
+               },
+
+               findByName: function( name ) {
+                       // select by name and filter by form for performance over form.find("[name=...]")
+                       var form = this.currentForm;
+                       return $(document.getElementsByName(name)).map(function(index, element) {
+                               return element.form == form && element.name == name && element  || null;
+                       });
+               },
+
+               getLength: function(value, element) {
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               return $("option:selected", element).length;
+                       case 'input':
+                               if( this.checkable( element) )
+                                       return this.findByName(element.name).filter(':checked').length;
+                       }
+                       return value.length;
+               },
+
+               depend: function(param, element) {
+                       return this.dependTypes[typeof param]
+                               ? this.dependTypes[typeof param](param, element)
+                               : true;
+               },
+
+               dependTypes: {
+                       "boolean": function(param, element) {
+                               return param;
+                       },
+                       "string": function(param, element) {
+                               return !!$(param, element.form).length;
+                       },
+                       "function": function(param, element) {
+                               return param(element);
+                       }
+               },
+
+               optional: function(element) {
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+               },
+
+               startRequest: function(element) {
+                       if (!this.pending[element.name]) {
+                               this.pendingRequest++;
+                               this.pending[element.name] = true;
+                       }
+               },
+
+               stopRequest: function(element, valid) {
+                       this.pendingRequest--;
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0
+                       if (this.pendingRequest < 0)
+                               this.pendingRequest = 0;
+                       delete this.pending[element.name];
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+                               $(this.currentForm).submit();
+                               this.formSubmitted = false;
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                               this.formSubmitted = false;
+                       }
+               },
+
+               previousValue: function(element) {
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
+                               old: null,
+                               valid: true,
+                               message: this.defaultMessage( element, "remote" )
+                       });
+               }
+
+       },
+
+       classRuleSettings: {
+               required: {required: true},
+               email: {email: true},
+               url: {url: true},
+               date: {date: true},
+               dateISO: {dateISO: true},
+               dateDE: {dateDE: true},
+               number: {number: true},
+               numberDE: {numberDE: true},
+               digits: {digits: true},
+               creditcard: {creditcard: true}
+       },
+
+       addClassRules: function(className, rules) {
+               className.constructor == String ?
+                       this.classRuleSettings[className] = rules :
+                       $.extend(this.classRuleSettings, className);
+       },
+
+       classRules: function(element) {
+               var rules = {};
+               var classes = $(element).attr('class');
+               classes && $.each(classes.split(' '), function() {
+                       if (this in $.validator.classRuleSettings) {
+                               $.extend(rules, $.validator.classRuleSettings[this]);
+                       }
+               });
+               return rules;
+       },
+
+       attributeRules: function(element) {
+               var rules = {};
+               var $element = $(element);
+
+               for (var method in $.validator.methods) {
+                       var value;
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
+                       if (method === 'required' && typeof $.fn.prop === 'function') {
+                               value = $element.prop(method);
+                       } else {
+                               value = $element.attr(method);
+                       }
+                       if (value) {
+                               rules[method] = value;
+                       } else if ($element[0].getAttribute("type") === method) {
+                               rules[method] = true;
+                       }
+               }
+
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+                       delete rules.maxlength;
+               }
+
+               return rules;
+       },
+
+       metadataRules: function(element) {
+               if (!$.metadata) return {};
+
+               var meta = $.data(element.form, 'validator').settings.meta;
+               return meta ?
+                       $(element).metadata()[meta] :
+                       $(element).metadata();
+       },
+
+       staticRules: function(element) {
+               var rules = {};
+               var validator = $.data(element.form, 'validator');
+               if (validator.settings.rules) {
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+               }
+               return rules;
+       },
+
+       normalizeRules: function(rules, element) {
+               // handle dependency check
+               $.each(rules, function(prop, val) {
+                       // ignore rule when param is explicitly false, eg. required:false
+                       if (val === false) {
+                               delete rules[prop];
+                               return;
+                       }
+                       if (val.param || val.depends) {
+                               var keepRule = true;
+                               switch (typeof val.depends) {
+                                       case "string":
+                                               keepRule = !!$(val.depends, element.form).length;
+                                               break;
+                                       case "function":
+                                               keepRule = val.depends.call(element, element);
+                                               break;
+                               }
+                               if (keepRule) {
+                                       rules[prop] = val.param !== undefined ? val.param : true;
+                               } else {
+                                       delete rules[prop];
+                               }
+                       }
+               });
+
+               // evaluate parameters
+               $.each(rules, function(rule, parameter) {
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+               });
+
+               // clean number parameters
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
+                       if (rules[this]) {
+                               rules[this] = Number(rules[this]);
+                       }
+               });
+               $.each(['rangelength', 'range'], function() {
+                       if (rules[this]) {
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+                       }
+               });
+
+               if ($.validator.autoCreateRanges) {
+                       // auto-create ranges
+                       if (rules.min && rules.max) {
+                               rules.range = [rules.min, rules.max];
+                               delete rules.min;
+                               delete rules.max;
+                       }
+                       if (rules.minlength && rules.maxlength) {
+                               rules.rangelength = [rules.minlength, rules.maxlength];
+                               delete rules.minlength;
+                               delete rules.maxlength;
+                       }
+               }
+
+               // To support custom messages in metadata ignore rule methods titled "messages"
+               if (rules.messages) {
+                       delete rules.messages;
+               }
+
+               return rules;
+       },
+
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+       normalizeRule: function(data) {
+               if( typeof data == "string" ) {
+                       var transformed = {};
+                       $.each(data.split(/\s/), function() {
+                               transformed[this] = true;
+                       });
+                       data = transformed;
+               }
+               return data;
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+       addMethod: function(name, method, message) {
+               $.validator.methods[name] = method;
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+               if (method.length < 3) {
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
+               }
+       },
+
+       methods: {
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/required
+               required: function(value, element, param) {
+                       // check if dependency is met
+                       if ( !this.depend(param, element) )
+                               return "dependency-mismatch";
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               // could be an array for select-multiple or a string, both are fine this way
+                               var val = $(element).val();
+                               return val && val.length > 0;
+                       case 'input':
+                               if ( this.checkable(element) )
+                                       return this.getLength(value, element) > 0;
+                       default:
+                               return $.trim(value).length > 0;
+                       }
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote
+               remote: function(value, element, param) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+
+                       var previous = this.previousValue(element);
+                       if (!this.settings.messages[element.name] )
+                               this.settings.messages[element.name] = {};
+                       previous.originalMessage = this.settings.messages[element.name].remote;
+                       this.settings.messages[element.name].remote = previous.message;
+
+                       param = typeof param == "string" && {url:param} || param;
+
+                       if ( this.pending[element.name] ) {
+                               return "pending";
+                       }
+                       if ( previous.old === value ) {
+                               return previous.valid;
+                       }
+
+                       previous.old = value;
+                       var validator = this;
+                       this.startRequest(element);
+                       var data = {};
+                       data[element.name] = value;
+                       $.ajax($.extend(true, {
+                               url: param,
+                               mode: "abort",
+                               port: "validate" + element.name,
+                               dataType: "json",
+                               data: data,
+                               success: function(response) {
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;
+                                       var valid = response === true;
+                                       if ( valid ) {
+                                               var submitted = validator.formSubmitted;
+                                               validator.prepareElement(element);
+                                               validator.formSubmitted = submitted;
+                                               validator.successList.push(element);
+                                               validator.showErrors();
+                                       } else {
+                                               var errors = {};
+                                               var message = response || validator.defaultMessage( element, "remote" );
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+                                               validator.showErrors(errors);
+                                       }
+                                       previous.valid = valid;
+                                       validator.stopRequest(element, valid);
+                               }
+                       }, param));
+                       return "pending";
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
+               minlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+               maxlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+               rangelength: function(value, element, param) {
+                       var length = this.getLength($.trim(value), element);
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/min
+               min: function( value, element, param ) {
+                       return this.optional(element) || value >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/max
+               max: function( value, element, param ) {
+                       return this.optional(element) || value <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/range
+               range: function( value, element, param ) {
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/email
+               email: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/url
+               url: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/date
+               date: function(value, element) {
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+               dateISO: function(value, element) {
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/number
+               number: function(value, element) {
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits
+               digits: function(value, element) {
+                       return this.optional(element) || /^\d+$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+               // based on http://en.wikipedia.org/wiki/Luhn
+               creditcard: function(value, element) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+                       // accept only spaces, digits and dashes
+                       if (/[^0-9 -]+/.test(value))
+                               return false;
+                       var nCheck = 0,
+                               nDigit = 0,
+                               bEven = false;
+
+                       value = value.replace(/\D/g, "");
+
+                       for (var n = value.length - 1; n >= 0; n--) {
+                               var cDigit = value.charAt(n);
+                               var nDigit = parseInt(cDigit, 10);
+                               if (bEven) {
+                                       if ((nDigit *= 2) > 9)
+                                               nDigit -= 9;
+                               }
+                               nCheck += nDigit;
+                               bEven = !bEven;
+                       }
+
+                       return (nCheck % 10) == 0;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept
+               accept: function(value, element, param) {
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+               equalTo: function(value, element, param) {
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+                               $(element).valid();
+                       });
+                       return value == target.val();
+               }
+
+       }
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+       var pendingRequests = {};
+       // Use a prefilter if available (1.5+)
+       if ( $.ajaxPrefilter ) {
+               $.ajaxPrefilter(function(settings, _, xhr) {
+                       var port = settings.port;
+                       if (settings.mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               pendingRequests[port] = xhr;
+                       }
+               });
+       } else {
+               // Proxy ajax
+               var ajax = $.ajax;
+               $.ajax = function(settings) {
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+                       if (mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               return (pendingRequests[port] = ajax.apply(this, arguments));
+                       }
+                       return ajax.apply(this, arguments);
+               };
+       }
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+       // only implement if not provided by jQuery core (since 1.4)
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+               $.each({
+                       focus: 'focusin',
+                       blur: 'focusout'
+               }, function( original, fix ){
+                       $.event.special[fix] = {
+                               setup:function() {
+                                       this.addEventListener( original, handler, true );
+                               },
+                               teardown:function() {
+                                       this.removeEventListener( original, handler, true );
+                               },
+                               handler: function(e) {
+                                       arguments[0] = $.event.fix(e);
+                                       arguments[0].type = fix;
+                                       return $.event.handle.apply(this, arguments);
+                               }
+                       };
+                       function handler(e) {
+                               e = $.event.fix(e);
+                               e.type = fix;
+                               return $.event.handle.call(this, e);
+                       }
+               });
+       };
+       $.extend($.fn, {
+               validateDelegate: function(delegate, type, handler) {
+                       return this.bind(type, function(event) {
+                               var target = $(event.target);
+                               if (target.is(delegate)) {
+                                       return handler.apply(target, arguments);
+                               }
+                       });
+               }
+       });
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.guides/html/scripts/jquery.zclip.min.js b/org.tizen.guides/html/scripts/jquery.zclip.min.js
new file mode 100644 (file)
index 0000000..51471a1
--- /dev/null
+++ b/org.tizen.guides/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.guides/html/scripts/navi.js b/org.tizen.guides/html/scripts/navi.js
new file mode 100644 (file)
index 0000000..badc738
--- /dev/null
+++ b/org.tizen.guides/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[
+    var staticURL = "http://img-developer.samsung.com";
+       var sslCall = "";
+
+       if('' !== 'N') {
+               var locationStr = location.href;
+               if(locationStr.indexOf("https://") > -1) {
+                       location.href = "http://" + locationStr.substring(8);
+               }     
+    }
+
+//     if( typeof($) === function ) {
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+               //? ??? ?? ?? ??? ?? ?? ???.
+//     }
+    $SD.pagination.alt = {
+               first:"go first",
+               prev:"go prev",
+               next:"go next",
+               last:"go last"
+    };
+    $(document).ready(function(){
+       var myVar;
+           topSearchInit();//top search ??
+           $('#searchTop').attr("autocomplete","off");
+           var searchingBoolean = false;
+           
+           var topSearchChange = function(){
+               
+               if (searchingBoolean) return;
+               
+                       var searchInput = $('#searchTop').val();
+                       
+                       if($('#searchTop').val() != ""){
+                               $("#topAutocomplete").hide();
+                               searchingBoolean = true;
+                               
+                               var jsonData = {
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+                                               async : true,
+                                               data : { searchInput : searchInput},
+                                               success : function(data){
+                                                       if (searchInput == $('#searchTop').val()){
+                                                               var autoComplete = data.kwdNm;
+                                                               var tmpHtml = "";
+                                                               
+                                                               if (autoComplete.length > 0){
+                                                                       $('#topAutocomplete').children().remove();
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+                                                                       $.each(autoComplete, function(i, item){
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+                                                                               a.data('keyword', item.kwdNm);
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
+                                                                       });
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+                                                                               if(e.which == 9 && e.shiftKey) {
+                                                                                       return true;
+                                                                               }
+                                                                               
+                                                                               if(e.which == 9) {
+                                                                                       e.preventDefault();
+                                                                                       $('#topAutocomplete').hide();   
+                                                                                       setTimeout(function() {
+                                                                                               $("#searchTopBtn").focus();
+                                                                                       }, 1);
+                                                                               }
+                                                                               
+                                                                       });
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});
+                                                                   $("#searchTopBtn").on("focusout", function(e) {
+                                                                               $('#topAutocomplete').hide();
+                                                                       });
+                                                               }else{
+                                                                       $('#topAutocomplete').children().remove();
+                                                               }
+                                                               if($('#searchTop').val() == ""){
+                                                                       $("#topAutocomplete").hide();
+                                                                       searchingBoolean = false;
+                                                                       return;
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               searchingBoolean = false;
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                               if (autoComplete.length == 0){
+                                                                       $("#topAutocomplete").hide();
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               $("#topAutocomplete").show();
+                                                                               var $searchList = $("#topAutocomplete").find('ul');
+                                                                               var hei = $searchList.outerHeight();
+                                                                               if(hei>180){
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
+                                                                               }
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                       }else{
+                                                               searchingBoolean = false;
+                                                               topSearchChange();
+                                                       }
+                                               },
+                                               error : function() {searchingBoolean = false;}
+                                               
+                               };
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
+                               $SD.ajax.get(jsonData);
+                               searchingBoolean = false;
+                       }
+                       
+                       //console.log("/search/autoComplete.do end");
+                       //console.groupEnd();
+               };
+               
+               $('#searchTop').keyup(function(e){
+                       if($('#searchTop').val() == ""){
+                               $('#topAutocomplete').children().remove();
+                               $("#topAutocomplete").hide();
+                       }else{
+                               if(e.which == 13){
+                                       search();
+                               }else{
+                                       topSearchChange();
+                               }
+                       }
+               });
+               
+               var search = function(){
+                       if($.trim($('#searchTop').val()) == ""){
+                               alert('Search keyword is required.');
+                       }else{
+                               $('#topSearchForm').submit();
+                       }
+               };
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){
+                       e.preventDefault();
+                       var keyword = $(this).data('keyword');
+                       $("#searchTop").val(keyword);
+                       $('#topSearchForm').submit();
+               });
+               
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+                       if(e.which == 13) {
+                               e.preventDefault();
+                               var keyword = $(this).data('keyword');
+                               $("#searchTop").val(keyword);
+                               $('#topSearchForm').submit();                   
+                       }
+               });
+               
+               $('#searchTopBtn').click(function(e){
+                       search();       
+               });  
+    });
+    
+    function topSearchEnter(){
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+               alert('Search keyword is required.');
+               return false;
+       }else{
+               return true;
+       }
+    }
+
+/* Tracking Code TOTAL */
+               var _gaq = _gaq || [];
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+               _gaq.push(['_setAccount', 'UA-6892706-3']);
+               _gaq.push(['_setDomainName', 'samsung.com']);
+               _gaq.push(['_setAllowLinker', true]);
+               _gaq.push(['_trackPageview']);
+               (function() {
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                 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);
+               })();
+       
+               <!--// Tracking Code 1 -->
+                       var _gaq = _gaq || [];
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);
+                       _gaq.push(['_trackPageview']);
+                       (function() {
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                         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);
+                       })();
diff --git a/org.tizen.guides/html/scripts/search.js b/org.tizen.guides/html/scripts/search.js
new file mode 100644 (file)
index 0000000..d1ae5ad
--- /dev/null
+++ b/org.tizen.guides/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+       var focusTarget = "input";
+
+       //$("#autocomplete").hide();
+
+       //$("#searchInput").bind("keydown", checkSearchText);
+       
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $("#autocomplete").bind("mouseleave",function(){
+               $(this).hide();
+               $("#btnDropdown").removeClass("dropdownoff");
+               $("#btnDropdown").addClass("dropdown");         
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       //$(".autocomplete").css("visibility", "visible");
+                       $("#autocomplete").show();
+                       
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+               }
+               else{
+                       //$(".autocomplete").css("visibility", "hidden");
+                       $("#autocomplete").hide();
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+
+
+
+function topSearchInit()
+{
+       var focusTarget = "input";
+
+       //$("#searchTop").bind("keydown", checkSearchText);
+       
+       $("#searchTop").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {       
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchTop" ).focusin( function()   {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchTop").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".topAutocomplete").css("visibility", "visible");
+               }else{
+                       $(".topAutocomplete").css("visibility", "hidden");
+                       $("#topAutocomplete").hide();
+               }
+       }
+}
diff --git a/org.tizen.guides/html/scripts/showhide.js b/org.tizen.guides/html/scripts/showhide.js
new file mode 100644 (file)
index 0000000..cf3dc21
--- /dev/null
+++ b/org.tizen.guides/html/scripts/showhide.js
@@ -0,0 +1,200 @@
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+       me.find('em').text('Hide');
+       me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+       var me = $(this);
+       var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+       if ( me.next().is(':visible') ){
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+               me.find('em').text('Show');
+               me.next().hide();
+       }
+                                       
+});
+return false;
+})
+}      
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+       var idx = $('.devicespec-tit a').index(this);
+
+       if ( $(this).parent().parent().next().is(':visible') ){
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+               self.find('em').text('Show');
+               self.next().hide();
+
+               return false;
+       }else{
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+               self.find('em').text('Hide');
+
+               self.next().show();
+
+               return false;
+       }
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow =  $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+       var openheading = function(target) {
+               var origin = $(target);
+               target = origin.closest('.devicespec-con');
+               if (!(target.length > 0)) {
+                       target = origin.closest('.devicespec-tit');
+               }
+               if (target.length > 0) {
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
+                       }
+               }
+
+               $(window.location.hash)[0].scrollIntoView();
+       };
+
+       $(".opensection").click(function(){
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');
+               openheading(target);
+       });
+
+       if (window.location.hash) {
+               var target = $(window.location.hash);
+               openheading(target);
+               //$(target).focus(); //uncomment if fail to work
+       }
+
+       var isScrolledIntoView = function(elem)
+       {
+               var docViewTop = $('#contents').scrollTop();
+               var docViewBottom = docViewTop + $('#contents').height();
+
+               var elemTop = $(elem).offset().top;
+               var elemBottom = elemTop + $(elem).height();
+
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
+       }
+
+       $('#contents').scroll();
+       
+
+       var updateH = function(){
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+                       $('.help_breadcrumbs').hide();
+               } else {
+                       $('a.top.sms').hide();
+                       $('.help_breadcrumbs').show();
+               }
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
+
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+
+               if ($('a.top').is(':visible'))
+               {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+               } else {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+               }
+               $('#toc').css('height', $('#toc').css('height') - 5);
+
+               $('#toc_border').height($('#toc').outerHeight() + 5);
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+               $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+               //$('#toc').css('width', $('#toc_border').width() - 40);
+               $('#toc').css('width', $('#toc_border').width() - 49);
+       };
+
+       var updateH_no_toc = function() {
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+               } else {
+                       $('a.top.sms').hide();
+               }
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+       }
+
+       if ($('body').hasClass('no-toc')) {
+               updateH = updateH_no_toc;
+       }
+       $(window).resize(updateH);
+       $('#contents').scroll(updateH);
+       $(window).resize();
+       
+       $('a.top').click(function(){$('#contents').scrollTop(0)});
+
+       var hashchanged = function() {
+               if (window.location.hash.length) {
+                       openheading(window.location.hash);
+                       //$(window.location.hash).scrollTo();
+                       $(window.location.hash)[0].scrollIntoView();
+
+               } else 
+               {
+                       $('#contents').scrollTop(0);
+               }
+       };
+
+       if (("onhashchange" in window) && !($.browser.msie)) { 
+               $(window).bind( 'hashchange',hashchanged);
+       }
+       else { 
+               var prevHash = window.location.hash;
+               window.setInterval(function () {
+                       if (window.location.hash != prevHash) {
+                               hashchanged();
+                               prevHash = window.location.hash;
+                       }
+               }, 100);
+       }
+});
diff --git a/org.tizen.guides/html/scripts/snippet.js b/org.tizen.guides/html/scripts/snippet.js
new file mode 100644 (file)
index 0000000..777e9ae
--- /dev/null
+++ b/org.tizen.guides/html/scripts/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.guides/html/web/guides_w.htm b/org.tizen.guides/html/web/guides_w.htm
new file mode 100644 (file)
index 0000000..1cb0923
--- /dev/null
+++ b/org.tizen.guides/html/web/guides_w.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.tutorials/html/web/tutorials_w.htm">Tizen Web Tutorials</a></li> 
+                       <li><a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Web API References</a></li>
+               </ul>
+       </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">Web Guides</font></h1>
+
+<p>Tizen Web guides introduce the various features that you can use in creating Tizen Web applications.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The API support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>,  <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>, and <a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Web UI Framework Reference</a>.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>Select the feature you are interested in and see what Tizen offers for your application:</p>
+
+<ul>
+       <li><a href="tizen/guides_tizen_w.htm">Guide to Tizen Features</a>
+       <p>Enables you to use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
+               <li><a href="w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a>
+       <p>Enables you to use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/web/tizen/application/alarm_w.htm b/org.tizen.guides/html/web/tizen/application/alarm_w.htm
new file mode 100644 (file)
index 0000000..d9fed5a
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/application/alarm_w.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Alarm</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm">Alarm Tutorial</a></li>   
+                       <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>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Alarm</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>
+  
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Alarm API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Alarm API include:</p>
+  <ul>
+   <li>Alarm management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm#manage">manage alarms</a> by creating and deleting them. 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.</p> <p>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>With the <span style="font-family: Courier New,Courier,monospace">getAll()</span> method, you can obtain a list of all existing alarms on the device.</p></li>
+   <li>Application launches with alarms <p>You can set an alarm to <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm#launch">launch an application when triggered</a>.</p></li>
+   <li>Alarm events <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm#check">retrieve information about the next alarm event</a> using the <span style="font-family: Courier New,Courier,monospace">AlarmAbsolute</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">AlarmRelative</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</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> </li>
+  </ul>
+  <p>To define a time period for the relative alarm or for the recurrence of an absolute alarm, you can use the following predefined constants from the Alarm API:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">tizen.alarm.PERIOD_MINUTE</span> represents the number of seconds in a minute (60).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tizen.alarm.PERIOD_HOUR</span> represents the number of seconds in an hour (3600).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tizen.alarm.PERIOD_DAY</span> represents the number of seconds in a day (86400).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tizen.alarm.PERIOD_WEEK</span> represents the number of seconds in a week (604800).</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
new file mode 100644 (file)
index 0000000..aa77aa1
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application Tutorials</a></li>  
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application API for Wearable Web</a></li>                       
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Application</h1> 
+  <p>Application features include managing various types of applications and packages, and handling events.</p>
+  <p>The main application features are:</p> 
+  <ul> 
+    <li><a href="alarm_w.htm">Alarm</a> <p>Allows you to schedule an application to be run at a specific time</p></li> 
+    <li><a href="application_w.htm">Application</a> <p>Allows you to retrieve information about the applications installed or running on the device.</p></li> 
+       <li><a href="package_w.htm">Package</a> <p>Allows you to retrieve information about packages and manage package installation.</p></li>
+  </ul> 
+  
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<ul>
+    <li><a href="data_w.htm">Data Control</a> <p>Enables you to use data stored and provided by another 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/application/application_w.htm b/org.tizen.guides/html/web/tizen/application/application_w.htm
new file mode 100644 (file)
index 0000000..c07dacf
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/application/application_w.htm
@@ -0,0 +1,445 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#controls">Application Controls</a></li>
+                       <li><a href="#launch">Launching an Application with Application Controls</a></li>
+                       <li><a href="#exporting">Exporting Application Control Functionality</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm">Application Tutorial</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API for Wearable Web</a></li>                       
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Application</h1> 
+ 
+  <p>Application management and launch features include retrieving information about the applications installed or currently running on the device, such as application name, icon path, version details, and application ID. You can also receive notifications if applications are updated or removed, or new applications are installed. You can also perform application management tasks, such as launching, closing, or exiting a running application.</p>
+
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The Tizen Application API provides means to interact with other applications using the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> (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) and <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a> applications) interfaces. The application uses the <a href="#controls">application control</a> to request a specific operation to be performed. The operation can be, for example, making a phone call, browsing local files so the user can pick an image of their choosing, or starting a video player with a specific movie. The Web application can also register itself as able to perform such operations. It can then be launched by another application and respond by using the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface.</p>
+  <p>The main application management and launch features are:</p> 
+  <ul> 
+   <li>Application management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm#manage">manage and retrieve information about the current application</a> with the <span style="font-family: Courier New,Courier,monospace">Application</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a> applications), which is retrieved using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications). You can exit or hide the current application using the <span style="font-family: Courier New,Courier,monospace">Application</span> interface.</p> </li> 
+   <li>Application information retrieval <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm#retrieve">retrieve information about applications</a> in various ways:</p> 
+    <ul> 
+     <li>Retrieve information about installed applications with the <span style="font-family: Courier New,Courier,monospace">getAppInfo()</span> and <span style="font-family: Courier New,Courier,monospace">getAppsInfo()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</li> 
+     <li>Use the <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a> applications) to retrieve information about installed applications, such as name, icon path, and version.</li> 
+     <li>Use the <span style="font-family: Courier New,Courier,monospace">ApplicationContext</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationContext">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationContext">wearable</a> applications) to retrieve the application ID and context ID of the running application. 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.</li> 
+    </ul></li> 
+   <li>Application change notifications <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm#receive">receive notifications</a> when there is a change in the list of installed applications.</p> <p>The <span style="font-family: Courier New,Courier,monospace">addAppInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface registers an event listener, which starts asynchronously once the <span style="font-family: Courier New,Courier,monospace">addAppInfoEventListener()</span> method returns the subscription identifier for the listener. To unsubscribe the listener, use the <span style="font-family: Courier New,Courier,monospace">removeAppInfoEventListener()</span> method with the subscription identifier. You can use the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationEventCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformationEventCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformationEventCallback">wearable</a> applications) to define listener event handlers for receiving the notifications.</p></li> 
+   <li>Application control <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm#launch">launch other applications</a> based on their functionality using the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</p></li> 
+       <li>Handling incoming AppControl requests
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm#handle">handle an incoming application control request</a> using the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface. The <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a> applications) is used to respond to the requested application control.</p></li>    
+
+  </ul> 
+
+ 
+  <h2 id="controls" name="controls">Application Controls</h2> 
+  <p>The application control is a standard mechanism for using specific operations exported by other applications, such as calling, Web browsing, and playing media items. It allows you to <a href="#platform_appcontrol">launch other applications</a> whose functionalities you need in your application. Basically, launching an application control means that if you need an application that provides certain functionality, you can request that the system launches it according to your requirements. The application control allows you to launch applications without knowing their identifiers or specifications, based on your immediate needs.</p> 
+
+<p>The application control consists of an operation, URI, MIME type, and some data, and it describes the request to be performed by the newly launched application. This information is used to resolve the application control. When the system gets an application control request, it finds the proper control provider application by resolving the application control, and then launches the provider application. Once the provider application has performed the requested task, it must pass control back to the requesting application with the result of the operation it has provided.</p>
+
+
+  <p>The provider application calls the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface to get the reference of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> object containing the application control passed by the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method from the calling application. Then, the provider application calls either the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> method (in case of success) or the <span style="font-family: Courier New,Courier,monospace">replyFailure()</span> method (in case of failure) of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface to return the control back to the requesting application. The result of the provided operation (if any), is delivered as an array of <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications). The result is received in the original calling application through the <span style="font-family: Courier New,Courier,monospace">ApplicationControlDataArrayReplyCallback</span> event handler (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). </p> 
+  <p>The application control uses the following primary information:</p>
+<ul><li>Application ID 
+<p>Used to identify the provider application of the requested application control. Besides the application ID, a <a href="#platform_appcontrol">platform-defined application control</a> has a special alias name for the application ID with the prefix <span style="font-family: Courier New,Courier,monospace">tizen</span>. For example, the platform phone application has the alias application ID of <span style="font-family: Courier New,Courier,monospace">tizen.phone</span>.</p></li>
+
+<li>Operation 
+<p>Describes an action to be performed by the provider application. The operation ID of the platform-provided operation is in the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/&lt;verb&gt;</span> format. For example, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span>. 
+</p></li> 
+  </ul> 
+
+<p>For more information on how to export application control functionality from your application to allow other applications to use it, see <a href="#exporting">Exporting Application Control Functionality</a>.</p> 
+
+<h3 name="platform_appcontrol" id="platform_appcontrol">Platform Application Controls</h3>  
+
+ <p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> 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), you can easily use the functionality of the Tizen base applications. The following table lists the services provided by the Tizen base applications.</p> 
+  <table> 
+   <caption>
+     Table: Tizen base application services 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Service</th> 
+     <th>Operation</th> 
+     <th>Scheme</th> 
+     <th>MIME</th> 
+    </tr> 
+    <tr> 
+     <td><a href="#browse">Browsing a Web page</a></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> 
+     <td>
+               <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
+               </ul>
+        </td>
+        <td>-</td> 
+    </tr> 
+    <tr> 
+     <td>Displaying an image</td> 
+     <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> 
+     <td>              
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">file</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
+       </ul>
+       </td> 
+     <td>       
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
+        </ul>
+        </td> 
+    </tr> 
+       <tr> 
+     <td>Playing a sound file</td> 
+        <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td> 
+     <td>
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
+        </ul>
+        </td> 
+    </tr> 
+    <tr> 
+     <td>Playing a video file</td> 
+     
+       <td>
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
+        </ul>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><a href="#file">Selecting a file</a></td> 
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td> 
+     <td>
+        <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
+        </ul>
+        </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+   
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Tizen provides support for the defined MIME types of the base application services depending on the platform implementation.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+               <h4 id="browse" name="browse">Browsing a Web Page </h4> 
+  <p>The browsing a Web page application control service allows you to display Web pages in your own application using the device&#39;s Web browser.</p> 
+  <h5 id="appid_browse" name="appid_browse">Application ID</h5> 
+  <p>This application control can be accessed using aliased application ID of &quot;<span style="font-family: Courier New,Courier,monospace">tizen.internet</span>&quot;.</p> 
+  <h5 id="operation_browse" name="operation_browse">VIEW Operation</h5> 
+  <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation only.</p> 
+  <p>This operation launches a Web browser and displays a specific Web page. The device user can access other Web pages, manage bookmarks, search for text on the Web page, and modify brightness and Internet settings. If the Internet connection is not available or if the specified Web page does not exist, an error message is displayed.</p> 
+  <p>The following example shows how to display a Web page:</p> 
+  <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;http://www.tizen.org&quot;, null, null);
+
+tizen.application.launchAppControl(appControl, &quot;tizen.internet&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 application control succeed&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) {/* Error handling*/}, null);
+}</pre> 
+  <h4 id="file" name="file">Selecting a File </h4> 
+  <p>The selecting a file application control service allows you to handle media files (image, audio, or video) in your own application.</p> 
+  <h5 id="appid_file" name="appid_file">Application ID</h5> 
+  <p>This application control can be accessed using aliased application ID of &quot;<span style="font-family: Courier New,Courier,monospace">tizen.filemanager</span>&quot;.</p> 
+  <h5 id="operation_file" name="operation_file">PICK Operation</h5> 
+  <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation only.</p> 
+  <p>This operation displays a list of specific type of media files found in the <span style="font-family: Courier New,Courier,monospace">Media</span> folder on the device or memory card, and returns the selected files back to your own application. The device user can browse all the subfolders and select items from one of the subfolders. The operation only displays files that are of the specified type. You can also display all types of media files by defining <span style="font-family: Courier New,Courier,monospace">all</span> as the type in the operation input data.</p>
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">ApplicationControlDataArrayReplyCallback</span> event handler (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). The results include the path to the retrieved media file.</p>
+
+  <p>The following example shows how to retrieve media files:</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;video/*&quot;, null);
+
+var appControlReplyCallback = 
+{
+&nbsp;&nbsp;&nbsp;/* Provider application sent a reply */
+&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;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;console.log(&#39;Selected image is &#39; + 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;/* Provider application returned a failure */
+&nbsp;&nbsp;&nbsp;onfailure: function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+&nbsp;&nbsp;&nbsp;}
+}
+
+tizen.application.launchAppControl(appControl, &quot;tizen.filemanager&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 application control succeed&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) {/* Error handling */}, appControlReplyCallback);
+</pre> 
+  
+<h2 id="launch" name="launch">Launching an Application with Application Controls</h2> 
+
+  <p>There are different types of application control requests for <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm#launch">launching other applications</a>. The system determines which application is suitable for handling the application control request:</p> 
+  <ul> 
+   <li><a href="#explicit">Explicit launch</a> <p>You determine which application must be launched. If you specify the exact application ID, the application ID determines which application is launched and the application performs the operation as specified in the application control request.</p></li> 
+   <li><a href="#implicit">Implicit launch</a> <p>You provide information to describe the request to be performed by the newly launched application without the application ID. The system uses the information to resolve the application control, by trying to find the proper application to perform the requested application control and then launching the selected application.</p></li> 
+  </ul> 
+
+<p>For more information on launching platform applications through application controls, see <a href="#platform">Launching Platform Applications</a>.</p>  
+  
+<h3 name="explicit" id="explicit">Explicit Launch</h3>
+<p>If you specify the exact application ID of the application for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface, you can request the application control from a specific application. The application ID determines which application is launched and the application performs the operation as specified in the control request.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">An explicit launch request cannot be completed if the user does not have the specified application on their device. Hence implicit launches can be more effective, since the system can find an available application to complete the request. The implicit launch also enhances the user experience by allowing the user to select their preferred application to complete the task.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<h3 name="implicit" id="implicit">Implicit Launch</h3> 
+<p>If you do not provide an exact application ID with the control request in the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method, you must provide enough information for the system to determine which of the available applications can best handle the control request (for example, the nature of the service or the file types that the application can handle).</p>
+
+<p>The application control consists of the operation ID, URI, MIME type, and some additional data. The system compares the attributes of the control request against the installed applications to determine which of the available applications is most suitable for the control request. The control request is resolved only if all specified information matches the service descriptions retrieved from the installed applications. The application control <span style="font-family: Courier New,Courier,monospace">data</span> attribute is not used in resolving the control request.</p>
+  
+    
+  <p>The following attributes are used to resolve which application is launched:</p> 
+  <ul> 
+   <li>Operation <p>Mandatory string that defines the action to be performed by the application control. You can define your own operation to describe a specific action of your application.</p> <p>The following table lists the standard operations and data keys for delivering specific data to launch or return.</p> 
+    <table> 
+     <caption>
+       Table: Standard operations 
+     </caption> 
+     <colgroup> 
+      <col width="20%" /> 
+      <col width="20%" /> 
+      <col width="60%" /> 
+     </colgroup> 
+     <tbody> 
+      <tr> 
+       <th>Operation</th> 
+       <th>Key</th> 
+       <th>Description</th> 
+      </tr> 
+      <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> 
+       <td>-</td> 
+       <td><p>Display the requested data (show an image or text, or play music or a video). The URI scheme must contain the path to the requested data.</p> </td> 
+      </tr>
+         <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span></td> 
+       <td>-</td> 
+       <td><p>Make a call to a specific phone number. The URI scheme must be <span style="font-family: Courier New,Courier,monospace">tel:</span> or set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p> 
+          <p>The public level privilege <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/call</span> is required for this operation. Launching this operation without the privilege triggers a security error.</p></td>
+      </tr> 
+      <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td> 
+       <td> <p>Provide a selection window for requested items and return the selection. The return value (the path to the selected item) must be stored with the data key.</p> </td> 
+      </tr> 
+      <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span></td> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/selected</span></td> 
+       <td>Create content (such as a photo or video). The return value (the path to the created content) must be stored with the data key. </td> 
+      </tr> 
+      <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span></td> 
+       <td>-</td> 
+       <td> <p>Show the dialer UI and dial a number using the requested phone number. The URI scheme must be <span style="font-family: Courier New,Courier,monospace">tel:</span> or set to <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the URI scheme is <span style="font-family: Courier New,Courier,monospace">NULL</span>, the dialer UI is shown without a phone number.</p> </td> 
+      </tr> 
+      <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></td> 
+       <td>-</td> 
+       <td> <p>Share content (for example, share a picture with friends using SNS services). The URI scheme must contain the path of the data.</p> </td> 
+      </tr>       
+         <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></td> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/data/path</span></td> 
+       <td> <p>Share multiple files. Each data path must be saved as an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> object with the data key.</p></td> 
+      </tr> 
+     </tbody> 
+    </table> </li> 
+   <li>URI scheme <p>Data on which the action is performed. For example, if you want to use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation to pick an image, the URI must be the URI of the image (which can be obtained using the <span style="font-family: Courier New,Courier,monospace">toURI()</span> method after resolving the file path). The same operation can be used to launch a Web page in a browser, except that the URI in that case is the URL of the Website, such as <span style="font-family: Courier New,Courier,monospace">https://www.tizen.org/</span>.</p></li> 
+   <li>MIME type <p>Specific type of the URI. For example, if you want to pick images, the possible MIME types are <span style="font-family: Courier New,Courier,monospace">image/bmp</span>, <span style="font-family: Courier New,Courier,monospace">image/gif</span>, <span style="font-family: Courier New,Courier,monospace">image/jpeg</span>, <span style="font-family: Courier New,Courier,monospace">image/png</span>, or <span style="font-family: Courier New,Courier,monospace">image/*</span>. The MIME type is important because it helps to find an application that is capable of dealing with the specified MIME type.</p></li> 
+   <li>Application control data <p>Key-value pairs providing additional information for the control request. They can also be used for the result of the request. The previous table shows some examples of keys. The data depends on the other parameters of the application control interface. For example, the ImageViewer application control can take different types of input and output data than the Camera application control.</p></li> 
+  </ul> 
+  <p>The following code example shows an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> instance (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) that launches an application to pick images. If there are multiple applications that can fulfill the request, the system shows a pop-up allowing the user to select the application they want:</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);
+
+tizen.application.launchAppControl(appControl, null, successCb, errCb, null);
+</pre> 
+
+<h3 name="platform" id="platform">Launching Platform Applications</h3>
+<p>The Tizen platform provides <a href="#platform_appcontrol">predefined application controls</a>, such as phone, file manager, image viewer, and Internet. You can run Tizen base applications explicitly with the aliased application IDs.</p> 
+<p>The following code example demonstrates an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> interface instance for explicitly launching the image viewer for cropping an image:</p>
+<pre class="prettyprint">
+/* Assuming that the filesystem virtual root &quot;images&quot; has been resolved and saved in variable images */
+var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/image/crop&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);
+tizen.application.launchAppControl(appControl, &quot;tizen.imageviewer&quot;, successCb, errCb, null);</pre>
+
+<p>The aliased application ID (<span style="font-family: Courier New,Courier,monospace">tizen.imageviewer</span>) is used, and a crop operation on the <span style="font-family: Courier New,Courier,monospace">image12.jpg</span> file is launched.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If you are unsure about whether a user&#39;s device has a specific application, use one of the standard Tizen platform applications, such as the phone, image viewer, or file manager, because some version of these applications is available on all Tizen devices. The platform applications use predefined platform application controls and aliased application IDs, which also simplifies the task of launching them.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       
+<p>If you want to select and launch an application that provides a specific operation, you can use the <span style="font-family: Courier New,Courier,monospace">findAppControl()</span> method of <span style="font-family: Courier New,Courier,monospace">Application</span> interface to search for applications providing the functionalities you need. The following code example demonstrates an implicit launch of an application to provide the image crop operation that is found using the <span style="font-family: Courier New,Courier,monospace">findAppControl()</span> method:</p>
+<pre class="prettyprint">
+/* Assuming that the filesystem virtual root &quot;images&quot; has been resolved and saved in variable images */
+var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/image/crop&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);
+tizen.application.findAppControl(appControl, function(appInfos, appCtrl) 
+{
+&nbsp;&nbsp;&nbsp;if (appInfos.length &gt;= 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
+&nbsp;&nbsp;&nbsp;}
+}, function(e) {/* Error handling */});</pre>  
+
+       <h2 id="exporting" name="exporting">Exporting Application Control Functionality</h2> 
+  
+  <p>The system compares the attributes of the application control request against the installed applications to determine which of the available applications is most suitable for the control request. The installed applications have a service description, which contains the information details on what the application can handle. The control request is resolved only if all specified information matches with the service description retrieved from the installed application. The application control <span style="font-family: Courier New,Courier,monospace">data</span> attribute is not used in resolving the control request.</p>
+<p>To allow other applications to use the functionalities of your application implicitly without the application ID (basically, to allow the system to launch your application based on a request from another application), you can define 1 or more application control service descriptions in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. Each description specifies the operation, URI scheme, and MIME type of the application control service your application can offer.</p>
+
+<p>The following code example demonstrates a service description for an application control for image edition:</p>
+<pre class="prettyprint">&lt;tizen:app-control&gt;
+&nbsp;&nbsp;&nbsp;&lt;src name=&quot;edit.html&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/edit&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;file&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/jpeg&quot;/&gt;
+&lt;/tizen:app-control&gt;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">src</span> field describes the application page (usually an HTML file) that handles the request. The <span style="font-family: Courier New,Courier,monospace">operation</span> field is mandatory, while the <span style="font-family: Courier New,Courier,monospace">scheme</span> and <span style="font-family: Courier New,Courier,monospace">mime</span> fields are optional. If the value of <span style="font-family: Courier New,Courier,monospace">scheme</span> field is <span style="font-family: Courier New,Courier,monospace">file</span>, the value can be left out.</p>
+ 
+<p>The <span style="font-family: Courier New,Courier,monospace">uri</span> field in the service description is used to inform the platform about how to interpret and process the rest of the URI. For example, the <span style="font-family: Courier New,Courier,monospace">http</span> URI scheme informs the platform to interpret and process the URI as a Web resource using HTTP. However, if the <span style="font-family: Courier New,Courier,monospace">uri</span> field value is set to <span style="font-family: Courier New,Courier,monospace">file</span>, leave the attribute out of the service description. </p>
+
+<p>For example, consider the following example of an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> instance:</p>
+
+<pre class="prettyprint">
+/* Assuming that the filesystem virtual root &quot;images&quot; 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);</pre>
+
+<p>The application with the following service description does not launch based on the above application control request:</p>
+<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;uri name=&quot;file&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/*&quot;/&gt;
+&lt;/tizen:app-control&gt;</pre>
+
+<p>However, the application with the following service description definitely launches:</p>
+<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;/tizen:app-control&gt;</pre>
+
+<p>Note that if multiple service descriptions in your application have common parameters (such as the same operation), they must be written out once for each service description and enclosed in a <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> element. For example, if your application can handle both image and audio file MIME types with the view operation, 2 <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> elements with different MIME types  and the same <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation are required. The service description does not work if the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> is only written in 1 of the elements. The following example shows how to define the service descriptions for 2 MIME types for the same operation in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<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;/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;/tizen:app-control&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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/application/data_w.htm b/org.tizen.guides/html/web/tizen/application/data_w.htm
new file mode 100644 (file)
index 0000000..f3942b6
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/application/data_w.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm">Data Control Tutorial</a></li>   
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">Data Control API for Mobile Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Data Control</h1> 
+ 
+  <p>Data control allows you to read and modify data stored and provided by another application. The application storing and controlling the data is called a DataControl provider application. The application using the data is called a DataControl consumer application. A single DataControl provider can serve multiple DataControl consumers.</p>
+  
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <p>The main data control features are:</p>
+  <ul>
+
+   <li>Data storage as key-value pairs
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm#map">get, add, update, and remove values assigned to a key</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">MappedDataControlConsumer</a> interface.</p></li>
+   <li>Complex data storage using a SQL-type database and queries
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm#sql">select, insert, update, and remove data</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">SQLDataControlConsumer</a> interface.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/application/package_w.htm b/org.tizen.guides/html/web/tizen/application/package_w.htm
new file mode 100644 (file)
index 0000000..a3e31b7
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/application/package_w.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm">Package Tutorial</a></li>   
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">Package API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">Package API for Wearable Web</a></li>                       
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Package</h1> 
+    <p>Package management and installation 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>
+       
+           <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main package features are:</p> 
+  <ul> 
+   <li>Package management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm#manage">manage the package installation</a> using the <span style="font-family: Courier New,Courier,monospace">install()</span> and <span style="font-family: Courier New,Courier,monospace">uninstall()</span> methods of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a> applications). Additionally, you can receive notifications of the installation and uninstallation progress using the <span style="font-family: Courier New,Courier,monospace">PackageProgressCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageProgressCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageProgressCallback">wearable</a> applications).</p></li> 
+   <li>Package information retrieval <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm#retrieve">retrieve information about packages</a> in various ways:</p> 
+    <ul> 
+     <li>Retrieve information about installed packages using the <span style="font-family: Courier New,Courier,monospace">getPackageInfo()</span> and <span style="font-family: Courier New,Courier,monospace">getPackagesInfo()</span> methods of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface.</li> 
+     <li>Use the <span style="font-family: Courier New,Courier,monospace">PackageInformation</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a> applications) to retrieve information about installed packages, such as name, icon path, and version.</li> 
+    </ul></li> 
+   <li>Package change notifications <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm#receive">receive notifications</a> of changes in the list of installed packages. The <span style="font-family: Courier New,Courier,monospace">setPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface registers an event listener for changes in the installed packages list. To unsubscribe the listener, use the <span style="font-family: Courier New,Courier,monospace">unsetPackageInfoEventListener()</span> method. You can use the <span style="font-family: Courier New,Courier,monospace">PackageInformationEventCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformationEventCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformationEventCallback">wearable</a> applications) to define listeners for receiving notifications.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
new file mode 100644 (file)
index 0000000..1a872ea
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Bluetooth</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Bluetooth</h1>
+ 
+  <p>You can use Bluetooth functionalities in your application, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>
+  
+          <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of Bluetooth API include:</p>
+  <ul>
+   <li>Managing the local Bluetooth adapter <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_BT_Adapter">manage the local Bluetooth adapter</a> using the system-provided service through the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface.</p> <p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on.</p></li>
+   <li>Discovering devices <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Discovering_BT_Devices">discover other Bluetooth devices</a>.</p> <p>The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClass">BluetoothClass</a> interface is used to define characteristics and capabilities of a Bluetooth device. The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMajor">BluetoothClassDeviceMajor</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMinor">BluetoothClassDeviceMinor</a> interfaces specify the identifiers for major and minor Class of Device (CoD).</p> <p>In addition, you can retrieve the known devices which were bonded or found in a prior discovery process.</p></li>
+   <li>Creating a bonding with a Bluetooth device <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#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 <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connecting_BT_device">connect to and exchange data with a remote Bluetooth device</a>. When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">BluetoothSocket</a> instance with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p> <p>If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service.</p> </li>
+   <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="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Communicating_Health">communicate with a health source device</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
new file mode 100644 (file)
index 0000000..2fb8e52
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Communication</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm">Communication Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Communication</h1>
+  <p>Communication features include information on how your application can send data to networks and other applications, and receive data back from them.</p>
+  
+      <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Communication API domain is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main communication features are:</p>
+  <ul>
+  <li><a href="bluetooth_w.htm">Bluetooth</a> <p>Allows you to use Bluetooth functionalities, such as managing the Bluetooth service, pairing, and exchanging messages between Bluetooth-enabled devices.</p></li>
+  <li><a href="messaging_w.htm">Messaging</a> <p>Allows you to create applications with messaging functionalities using SMS, MMS, and email.</p></li>
+  <li><a href="nfc_w.htm">NFC</a> <p>Allows you to share contacts, photos, and videos, use the device as a smartcard, and communicate with other NFC-enabled devices.</p></li>  
+   <li><a href="push_w.htm">Push</a> <p>Allows you to receive push notifications from a push server.</p></li>
+  <li><a href="secure_element_w.htm">Secure Element</a> <p>Allows you to access secure elements, such as SIM card and secure SD card, in a 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/communication/messaging_w.htm b/org.tizen.guides/html/web/tizen/communication/messaging_w.htm
new file mode 100644 (file)
index 0000000..b7f3230
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/communication/messaging_w.htm
@@ -0,0 +1,101 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm">Messaging Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Messaging</h1>
+ 
+  <p>Tizen enables you to create applications with messaging functionalities for SMS, MMS, and email.</p>
+
+            <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <p>The messaging process used in HTML5 involves Uniform Resource Identifiers (URIs), which form values of attributes, such as <span style="font-family: Courier New,Courier,monospace">tel</span>, <span style="font-family: Courier New,Courier,monospace">mailto</span>, and <span style="font-family: Courier New,Courier,monospace">sms</span>. These attributes invoke external services which then perform the messaging tasks. The Messaging API minimizes your coding efforts by providing one-step capabilities to perform all high-level messaging-related operations.</p>
+  
+ 
+  <p>The main features of the Messaging API include:</p>
+  <ul>
+   <li>Message writing <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Sending_Messages">create a message</a> by using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> object constructor, and you can set the message attributes and parameters using a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageInit">MessageInit</a> object (for example, you can set the message service type - SMS, MMS or email - by using the <span style="font-family: Courier New,Courier,monospace">type</span> parameter).</p> <p>You can add attachments to your MMS and email messages by creating a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageAttachment">MessageAttachment</a> object with the file path and the MIME type (<span style="font-family: Courier New,Courier,monospace">image/png</span>, <span style="font-family: Courier New,Courier,monospace">text/pdf</span>, or <span style="font-family: Courier New,Courier,monospace">text/html</span>) for each object and assigning an array of those objects to the <span style="font-family: Courier New,Courier,monospace">attachments</span> attribute of the <span style="font-family: Courier New,Courier,monospace">Message</span> object.</p> <p>To save message drafts for later, use the <span style="font-family: Courier New,Courier,monospace">addDraftMessage()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">The system assigns a unique read-only message ID to each message the first time it is processed, such as when sending it or creating a draft message for it. </td>
+      </tr>
+     </tbody>
+    </table> </li>
+   <li>Message sending <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Sending_Messages">send messages</a> by using the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface.</p> <p>The 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 folder or Drafts folder, and additionally stored in the message storage database.</p> </li>
+   <li>Message management
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Managing_Messages">find, update, and delete stored messages</a> with methods provided by the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> interface: <span style="font-family: Courier New,Courier,monospace">findMessages()</span>, <span style="font-family: Courier New,Courier,monospace">updateMessages()</span>, and <span style="font-family: Courier New,Courier,monospace">removeMessages()</span>. The interface allows you to manage message storages.</p>
+   <p>When searching for messages, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#messaging">specific filter attributes</a>. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p></li>
+   <li>Message storage change notifications
+   <p>You can register event listeners to <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Receiving_Notifications">monitor changes</a> in the message storage, a particular conversation, or a particular message folder.</p>
+   <p>The <span style="font-family: Courier New,Courier,monospace">addMessagesChangeListener()</span>, <span style="font-family: Courier New,Courier,monospace">addConversationsChangeListener()</span>, and <span style="font-family: Courier New,Courier,monospace">addFoldersChangeListener()</span> methods of the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> 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> </li>
+   <li>Finding folders <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Find_Folders">find message folders</a> by using the <span style="font-family: Courier New,Courier,monospace">findFolders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p></li>
+   <li>Full message content retrieval from the email server <p>It is possible that an email message is accessible through the <span style="font-family: Courier New,Courier,monospace">Message</span> object, but its full body or attachment has not been downloaded yet. You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Synchronizing_with_the_Server">load email messages and attachments</a> from the email service with the <span style="font-family: Courier New,Courier,monospace">loadMessageBody()</span> and <span style="font-family: Courier New,Courier,monospace">loadMessageAttachment()</span> methods of the <span style="font-family: Courier New,Courier,monospace">MessageService</span> interface. </p><p>To keep your email service accounts up-to-date, synchronize them with their respective external servers, such as Gmail and Microsoft Exchange, with the <span style="font-family: Courier New,Courier,monospace">sync()</span> method. You can also synchronize just one folder, such as the Inbox, with the <span style="font-family: Courier New,Courier,monospace">syncFolder()</span> method.</p> <p>You can specify the maximum number of messages that can be retrieved in each folder.</p> </li>
+   <li>SMS and dual SIM
+    <p>If there are multiple SIM cards in the device, by default the system determines which one is used to send a message. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm#Selecting_the_SIM_Card">specify the SIM card when sending an SMS</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/communication/nfc_w.htm b/org.tizen.guides/html/web/tizen/communication/nfc_w.htm
new file mode 100644 (file)
index 0000000..6401b28
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/communication/nfc_w.htm
@@ -0,0 +1,190 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>NFC</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+   
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm">NFC Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>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 communicate with NFC tags for a variety of activities, such as paying the grocery bill or downloading a coupon.</p>
+  
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>NFC provides the following advantages over short-range communication technologies, such as Bluetooth:</p>
+  <ul>
+   <li>Faster set-up</li>
+   <li>Lower power consumption</li>
+   <li>No device pairing requirements</li>
+   <li>Reduction in unwanted interruptions</li>
+  </ul>
+  <p>An NFC tag is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">NFCTag</a> interface are used to access an NFC tag for reading or writing information. NFC tag types are identified using the <span style="font-family: Courier New,Courier,monospace">type</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagType">NFCTagType</a> type definition.</p>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Tizen provides the following NFC tag types: <span style="font-family: Courier New,Courier,monospace">GENERIC_TARGET</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_A</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_4A</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_3A</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_MINI</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_1K</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_4K</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_ULTRA</span>, <span style="font-family: Courier New,Courier,monospace">MIFARE_DESFIRE</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_B</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_4B</span>, <span style="font-family: Courier New,Courier,monospace">ISO14443_BPRIME</span>, <span style="font-family: Courier New,Courier,monospace">FELICA</span>, <span style="font-family: Courier New,Courier,monospace">JEWEL</span>, <span style="font-family: Courier New,Courier,monospace">ISO15693</span>, and <span style="font-family: Courier New,Courier,monospace">UNKNOWN_TARGET.</span></td>
+    </tr>
+   </tbody>
+  </table>
+  <p>The NFC forum defines the NFC data exchange format (NDEF) for encapsulating the data exchanged between 2 NFC-enabled devices or an NFC-enabled device and an NFC tag. An <a href="#ndef">NDEF message</a> can store data in various formats, such as text, Multipurpose Internet Mail Extension (MIME) type object, or ultra-short RagTime Document (RTD). The NFC tags use NDEF for exchanging messages. </p>
+  <p></p>
+  <p>The main features of the NFC API include:</p>
+  <ul>
+   <li>NFC device management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Managing_NFC_Conn">manage NFC connectivity</a> by enabling or disabling the NFC service.</p> <p>To use NFC, retrieve the default NFC adapter using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface. You can enable and disable NFC using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method.</p></li>
+   <li>NFC tag and peer detection <p>To <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Detecting_NFC_Tags">receive notifications when an NFC tag or peer device has been detected</a>, the <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> and <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> methods of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface register event listeners, which trigger notifications when an NFC tag or peer device is detected, respectively. You can use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">NFCTagDetectCallback</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">NFCPeerDetectCallback</a> interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.</p></li>
+   <li>NDEF message manipulation <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Handling_NDEF_Messages">handle NDEF messages</a> by first creating NDEF records, using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">NDEFRecord</a> interface, and then adding the records to an NDEF message using the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> interface.</p></li>
+   <li>NDEF data exchange <p>You can exchange NDEF data between <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Exchanging_NDEF_Tags">tags</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Exchanging_NDEF_Peers">peers</a>. To exchange data between tags, read from tags and write to tags using the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> and <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> methods.</p> <p>To exchange data between peers, the <span style="font-family: Courier New,Courier,monospace">setReceiveNDEFListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">NFCPeer</a> interface registers an event listener, which triggers an event when an NDEF message is received from a peer.</p> <p>You can use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">NDEFMessageReadCallback</a> interface to define event handlers for reading NDEF messages from tags and peer devices.</p>
+   </li>
+   <li>NFC card emulation <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Using_NFC_Card_Emulation">enable NFC card emulation and monitor the secure element transaction</a>  taking place using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">NFCManager</a> interface. The secure element transaction is carried out by the device. A Tizen application can detect the transaction and whether it was successful, but does not take part in it.</p></li>
+  </ul>
+   <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">If an application is on the background and uses the <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span>, <span style="font-family: Courier New,Courier,monospace">transceive()</span>, or <span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> method, an error callback is launched. These methods can only be used in the foreground.</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>You can launch NFC applications based on the NDEF message content using the <a href="../application/application_w.htm#controls">application control</a> functionalities. For example, if the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/wellknown</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and an NFC-enabled device reads an NFC tag or receives an NDEF message whose first NDEF record has a record type (<span style="font-family: Courier New,Courier,monospace">tnf</span> value) set as <span style="font-family: Courier New,Courier,monospace">NFC_RECORD_TNF_WELL_KNOWN</span>, the NFC application is launched.</p>
+<p>NFC applications can also be launched by the transaction of the card emulation functionality. NFC devices can communicate with point of sales (POS) terminals using the card emulation functionality to, for example, make a payment. If the application control with the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span> operation is defined in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and a transaction caused by the card emulation functionality occurs, the NFC application is launched.</p>
+<p>The following table lists the NFC operations, scheme and mime.</p>
+  <table border="1">
+   <caption>
+     Table: NFC operations
+   </caption>
+   <tbody>
+    <tr>
+     <th>Operation</th>
+     <th>Scheme</th>
+     <th>MIME</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/empty</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+    </tr>
+    <tr>
+     <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/wellknown</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;scheme&gt;:&lt;host&gt;/&lt;path&gt;</span> <p>URL, for example:</p>
+      <ul>
+       <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/about/devices</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/about/*</span></li>
+      </ul> <p>URN, for example:</p>
+      <ul>
+       <li><span style="font-family: Courier New,Courier,monospace">tel</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">mailto</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">mailto:tommy@tizen.org</span></li>
+      </ul> </td>
+     <td><span style="font-family: Courier New,Courier,monospace">U/&lt;protocol_code&gt;</span><p></p> <p>For example: <span style="font-family: Courier New,Courier,monospace">U/0x03, U/0x05, U/*</span></p> </td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;type_string&gt;/*</span><p></p> <p>For example: <span style="font-family: Courier New,Courier,monospace">T/*, sp/*, */*</span></p> </td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/mime</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;type_string&gt;/&lt;subtype_string&gt;</span> (case-insensitive) <p>For example: <span style="font-family: Courier New,Courier,monospace">text/x-vard, text/*, */*</span></p> </td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/uri</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;uri&gt;</span> <p>For example: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/about/devices</span></p> </td>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/external</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">&lt;scheme&gt;:&lt;string&gt;</span> (case-insensitive) <p>For example: <span style="font-family: Courier New,Courier,monospace">nfc:ext.tizen.org.ABC</span></p> </td>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">nfc://secure/&lt;SE name&gt;/aid/&lt;aid&gt;</span><p>For example:</p>
+     <ul>
+     <li><span style="font-family: Courier New,Courier,monospace">nfc://secure/SIM1/aid/123456789</span></li>
+     <li><span style="font-family: Courier New,Courier,monospace">nfc://secure/SIM1/aid/1234*</span></li>
+     <li><span style="font-family: Courier New,Courier,monospace">nfc://secure/SIM1/aid/*</span></li>
+</ul>     </td>
+     <td><span style="font-family: Courier New,Courier,monospace">NULL</span></td>
+    </tr>
+   </tbody>
+  </table>
+  <p>* The <span style="font-family: Courier New,Courier,monospace">&lt;protocol_code&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;scheme&gt;</span> must be in sync. See <a href="http://members.nfc-forum.org/apps/group_public/document.php?document_id=5078" target="_blank">NFCForum-TS-RTD_URI_1.0</a> and NFC RTD (Record Type Definition) documentation on the NFC forum.</p>
+  <h2 id="ndef" name="ndef">NDEF Messages</h2>
+  <p>Tizen provides the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> interface to define an NDEF message. An NDEF message is composed of multiple records.</p>
+  <p>An NDEF record is created using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">NDEFRecord</a> interface and is identified by record type, ID, and payload.</p>
+  <p>The following figure shows the conceptual structure of an NDEF message.</p>
+  <p class="figure">Figure: Structure of an NDEF message</p>
+  <p style="text-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> <p>The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">NDEFRecordText</a> interface is used to create the text format payload using the <span style="font-family: Courier New,Courier,monospace">text</span>, <span style="font-family: Courier New,Courier,monospace">languageCode</span>, and <span style="font-family: Courier New,Courier,monospace">encoding</span> attributes.</p></li>
+   <li>URI <p>The NDEF record content is created using a URI.</p> <p>The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">NDEFRecordURI</a> interface is used to create the URI type payload using the <span style="font-family: Courier New,Courier,monospace">uri</span> attribute.</p></li>
+   <li>Media <p>The NDEF record content is created using a media format.</p> <p>The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> interface is used to create the media format payload using the <span style="font-family: Courier New,Courier,monospace">mimeType</span> attribute.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/communication/push_w.htm b/org.tizen.guides/html/web/tizen/communication/push_w.htm
new file mode 100644 (file)
index 0000000..c18b787
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/communication/push_w.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Push</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm">Push Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Push</h1>
+ 
+  <p>Tizen enables you to receive push notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server to process the registration and deregistration requests, and deliver push notifications to the application. If the application is connected, the push service passes the notification data over the connection. Otherwise, the push service sends UI notifications with the data. The notifications are delivered when the user launches the application and selects the posting mode. The architecture of the Tizen Push service is described in the mobile native <a href="../../../../../org.tizen.guides/html/native/messaging/push_n.htm">Push</a> guide.</p>
+  
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>To receive push notifications for your application:</p>
+  <ol>
+   <li>Register the application to get the <a href="../../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm#start">required permissions for using the push service</a>.</li>
+   <li>After receiving a confirmation email for the request, register the application on the device using the Push API.</li>
+   <li>Connect to the push service for receiving push notifications using the Push API. </li>
+   <li>Receive notifications from the push service.</li>
+  </ol>
+  <p>The push service provides the RESTful open API for sending a push message. For more information on the Tizen Push Server API, see <a href="../../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm#send">Sending Push Notifications</a>.</p>
+  <p>The main features of the Push API include:</p>
+  <ul>
+   <li>Registering to the push service <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Registering">register or unregister the application for the push service</a>. If the registration process is successful, it returns the registration identifier through the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a> listener.</p> </li>
+   <li>Receiving push notifications <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Receiving">connect to the push service and start receiving push notifications</a> with the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method. You must pass the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushNotificationCallback">PushNotificationCallback</a> listener instance as a parameter in the method to receive push notifications.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm b/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm
new file mode 100644 (file)
index 0000000..2d56db8
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Secure Element</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm">Secure Element Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">Secure Element API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Secure Element</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>
+  
+        <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <p>The main features of the Secure Element API include:</p>
+  <ul>
+   <li>Managing secure elements<p>You <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Managing_Secure_Element">manage secure elements</a> by retrieving all the available secure element readers and receiving notifications of reader changes using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">SEService</a> interface. You can also shut down secure elements.</p> </li>
+   <li>Opening and closing sessions and channels<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Opening_Sessions">open a session</a> to connect to a secure element reader. Within a session, you can open basic or logical channels. When the channel or session is no longer needed, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Closing_Sessions">close them</a>.</p> </li>
+    <li>Transmitting APDUs to the applet<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Transmitting_APDU">transmit application protocol data units (APDU)</a> to a secure element using a channel.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/content/content_guide_w.htm b/org.tizen.guides/html/web/tizen/content/content_guide_w.htm
new file mode 100644 (file)
index 0000000..06b0bfc
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/content/content_guide_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Content</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content Tutorials</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content API for Mobile Web</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content API for Wearable Web</a></li>                      
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Content</h1>
+<p>Content features include getting and handling a variety of data.</p>
+  <p>The main content features are:</p>
+  <ul>
+   <li><a href="content_w.htm">Content</a> <p>Allows you to search and manage multimedia content locally.</p></li>
+   <li><a href="download_w.htm">Download</a> <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>   
+</ul>
+
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+   <li><a href="exif_w.htm">Exif</a> <p>Enables you to access and modify EXIF information in a JPEG file.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/content/content_w.htm b/org.tizen.guides/html/web/tizen/content/content_w.htm
new file mode 100644 (file)
index 0000000..94d0408
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/content/content_w.htm
@@ -0,0 +1,111 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Content</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm">Content Tutorial</a></li>
+        <li><a href="../tizen/tizen_guide_w.htm#sorting">Sorting and Filtering Data</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content API for Mobile Web</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">Content API for Wearable Web</a></li>                       
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Content</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>
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of Content API include:</p>
+  <ul>
+   <li>Content retrieval <p>The Content API uses the same <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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. The instance provides higher efficiency by performing batch operations on content items.</p> <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#browse">browse and search for content directories and content</a> using the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> and <span style="font-family: Courier New,Courier,monospace">find()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. When searching for content items, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#content">specific filter attributes</a> of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p>
+   <table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">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.</td>
+     </tr>
+    </tbody>
+   </table> </li>
+   <li>Content management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#manage">view and edit content item details</a>. The details are common file information and metadata attributes of the media file.</p> <p>To view content item details, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method. To update some attributes of a content item, for example its rating, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method.</p> <p>For more information on the content attributes, see the Content Full WebIDL Reference (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#full-webidl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#full-webidl">wearable</a> applications).</p> <p>If a content item is copied or moved, you cannot find it because a scan is not performed automatically. To retrieve the copied or moved item, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method after calling the <span style="font-family: Courier New,Courier,monospace">scanFile()</span> method.</p>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">You can only view (and not update) the read-only attributes.</td>
+      </tr>
+     </tbody>
+    </table> </li>
+   <li>Content change notifications <p>You can keep the content in your application synchronized with an external content manager by <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#receive">receiving notifications</a> in your application when the content changes. The <span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface registers a change listener. You can use the <span style="font-family: Courier New,Courier,monospace">ContentChangeCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentChangeCallback">wearable</a> applications) to define listener event handlers for receiving the notifications.</p></li>
+   <li>Playlist management
+   <p>Using the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#Playlist">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#Playlist">wearable</a> applications), you can:</p>
+               <ul>
+                       <li>Create playlists
+                       <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#create">create a new playlist</a> and add items to it. You can also create a new playlist by copying the content of an existing playlist.</p></li>
+                       <li>Manage playlists
+                       <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#manage_p">retrieve playlists and delete them</a>.</p></li>
+                       <li>Manage playlist items
+                       <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#items">manage playlist items</a> by adding and retrieving items, and changing the position of a single item or the order of all items.</p></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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/content/download_w.htm b/org.tizen.guides/html/web/tizen/content/download_w.htm
new file mode 100644 (file)
index 0000000..5958f8a
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/content/download_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Download</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm">Download Tutorial</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">Download API for Mobile Web</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download API for Wearable Web</a></li>             
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Download</h1>
+
+  <p>Tizen enables you to download files from the Internet. You can also monitor the download progress and status.</p>
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. 
+               <p>The Download API is supported on all Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Download API include:</p>
+  <ul>
+   <li>Managing downloads <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm#manage">start, pause, resume, and cancel a download</a> of content using the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a> applications).</p> </li>
+   <li>Checking the download state and information<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm#check">access the current download state and retrieve the download information</a> using the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> interface. The states are defined in the <span style="font-family: Courier New,Courier,monospace">DownloadState</span> enumerator (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/content/exif_w.htm b/org.tizen.guides/html/web/tizen/content/exif_w.htm
new file mode 100644 (file)
index 0000000..69cc789
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/content/exif_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Exif</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm">Exif Tutorial</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API for Mobile Web</a></li>         
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Exif</h1>
+
+<p>Tizen enables you to access and modify EXIF information in a JPEG file (with the common <span style="font-family: Courier New,Courier,monospace">.jpg</span> extension).</p>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<p>The main features of the Exif API include:</p>
+<ul>
+ <li>Loading EXIF information<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm#load">retrieve EXIF information from a JPEG file</a>. You can also retrieve the thumbnail image of the file.</p>   </li>
+ <li>Adding EXIF information<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm#add">save EXIF information to  a JPEG file</a> which currently has no EXIF information.</p> </li>
+ <li>Updating EXIF information<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm#update">modify EXIF information in a JPEG file</a> and save the file.</p> </li>
+ <li>Copying EXIF information<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm#copy">copy EXIF information from one JPEG file to another</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/dynamic/dynamic_w.htm b/org.tizen.guides/html/web/tizen/dynamic/dynamic_w.htm
new file mode 100644 (file)
index 0000000..eb28713
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/dynamic/dynamic_w.htm
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Box</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm">Dynamic Box Tutorial</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Dynamic Box</h1>
+ <p>You can add a Dynamic Box to your Web application. The Dynamic Box uses Web technology, such as HTML5, JavaScript, and CSS. Tizen manages the Dynamic Box&#39;s life-cycle: installation, creation, updating, termination, and uninstallation.</p>
+ 
+     <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Dynamic Box feature is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+ <p>To provide a Dynamic Box, <a href="../../../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#set_widget">define the Dynamic Box basic information</a> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of its Web application using the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget&gt;</span> tag. If the Web application has the <span style="font-family: Courier New,Courier,monospace">&lt;access&gt;</span> configuration in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, its settings are also applied to the Dynamic Box.</p>
+
+  <p>The Dynamic Box information management includes:</p> 
+    
+  <ul> 
+   <li>Resource management 
+        <p>Dynamic Box resources are included in its Web application package. Tizen installs the Dynamic Box when its Web application is installed, and uninstalls the Dynamic Box when its Web application is uninstalled. The Dynamic Box resources are all removed with its Web application.</p>
+     </li> 
+   <li>Life-cycle management
+<p>You can create Dynamic Box instances through the Dynamic Box Viewer application (for example, launcher or home application).</p>
+<p>If the creation request is accepted, Tizen starts to render the Dynamic Box content. The <span style="font-family: Courier New,Courier,monospace">onload</span> event is fired, and the box content is alive for 10 seconds. After this all content operations, including painting, are stopped.</p>
+<p>The Dynamic Box can be reloaded and updated at specific situations. The user can request Dynamic Box instances to be terminated through the Dynamic Box Viewer application.</p></li></ul>
+
+  
+  <p>The following main features must be considered during Dynamic Box development:</p>
+  
+  <ul> 
+   <li>The user can resize the Dynamic Box instance, which results in the Dynamic Box being reloaded. 
+         You can define the box content of your Dynamic Box to be fitted to the window size 
+         through the <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#define">viewport setting</a>.
+     </li> 
+   <li>The Dynamic Box instance can be <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#load">reloaded at specific situations</a>. 
+         You can define the box content of your Dynamic Box to be proper to such situations by <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#parse">parsing the box URL query string</a>.
+     </li>    
+   <li>A Web application can request to <a href="../../../../../org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm#reload">reload its Dynamic Box directly or periodically</a>.
+        </li>  
+   <li>By default, the box backgrounds are transparent. 
+         Therefore, if a body element background color is not set, you can see a part of the Dynamic Box Viewer application behind your Dynamic Box.
+        </li>
+<li>Some CSS features, such as CSS 2D/3D transforms, CSS transition, CSS animation, CSS opacity, CSS mask, the <span style="font-family: Courier New,Courier,monospace">position: fixed</span> and <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling: touch</span> attributes, WebGL, and the <span style="font-family: Courier New,Courier,monospace">video</span> element are not supported on the Dynamic Box.</li>
+  
+   <li>Tizen Web device APIs are not supported on the Dynamic Box.</li>
+   <li>By default, the Dynamic Box cannot receive touch events from a user. To receive down and up touch events, the <span style="font-family: Courier New,Courier,monospace">mouse-event</span> attribute in the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:box-content&gt;</span> element must be <span style="font-family: Courier New,Courier,monospace">true</span>. 
+       <p>Even if the <span style="font-family: Courier New,Courier,monospace">mouse-event</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the mouse move event, including vertical and horizontal swipe, is not supported on the Dynamic Box to guarantee the home screen behavior.</p></li> 
+  </ul> 
+
+  <p>The following feature must be specified in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file if you want your Web application to be visible only on devices that support the Web Dynamic Box:</p>
+<pre>
+http://tizen.org/feature/shell.appwidget
+</pre>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
new file mode 100644 (file)
index 0000000..c32ed9f
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Guide to Tizen Features</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm">Tizen Tutorials</a></li> 
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Guide to Tizen Features</h1>
+
+<p>Tizen Web guides introduce the various features that you can use in creating Tizen Web applications.</p>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"> 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 <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">System Information</span> 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></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>Select the feature you are interested in and see what Tizen offers for your application.</p>
+<p>The following guides describe features provided by the Tizen Web Device API: </p>
+<ul>
+       <li><a href="tizen/tizen_guide_w.htm">Tizen</a>
+       <p>Enables you to handle generic events and sort and filter data.</p></li>
+       <li><a href="application/app_guide_w.htm">Application</a>
+       <p>Enables you to configure application properties, and manage application data, packages, and alarms.</p></li>
+       <li><a href="content/content_guide_w.htm">Content</a>
+       <p>Enables you to manage files, playlists, and downloads, and view file details.</p></li>
+       <li><a href="input_output/io_guide_w.htm">Input/Output</a>
+       <p>Enables you to manage input and output data in your applications.</p></li>
+       <li><a href="multimedia/multimedia_guide_w.htm">Multimedia</a>
+       <p>Enables you to manage the device sound levels and media keys.</p></li>
+       <li><a href="system/system_guide_w.htm">System</a>
+       <p>Enables you to access and manage and retrieve information from the device and its sensors.</p></li>
+       <li><a href="ui/ui_guide_w.htm">User Interface</a>
+       <p>Enables you to manage badges and notifications on the screen.</p></li>
+       <li><a href="communication/comm_guide_w.htm">Communication</a> <span style="color: red">in mobile applications only</span>
+       <p>Enables you to send data to networks and other applications, and receive data back from them.</p></li>       
+       <li><a href="social/social_guide_w.htm">Social</a> <span style="color: red">in mobile applications only</span>
+       <p>Enables you to manage the user&#39;s personal data, such as contacts, calendars, and call and browsing history, on the device.</p></li>      
+</ul>
+
+<p>In addition to the Tizen Web Device API guides above, you can study the following features:</p>
+<ul>
+       <li><a href="dynamic/dynamic_w.htm">Dynamic Box</a> 
+       <p>Enables you to add a Dynamic Box to your Web application.</p></li> 
+       
+       <li><a href="localization/localization_w.htm">Localization</a> <p>Enables you to internationalize your application.</p></li>                    
+       <li><a href="uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a>
+       <p>Enables you to create and manage various kinds of UI components.</p></li>
+
+       <li><a href="service/service_w.htm">Service Application</a> <span style="color: red">in wearable applications only</span> <p>Allows you to create wearable Web service applications.</p></li>  
+
+       <li><a href="ime/ime_w.htm">IME Application</a> <span style="color: red">in wearable applications only</span> <p>Enables you to implement IME (Input Method Editor) applications to provide IME support for client 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/web/tizen/ime/ime_w.htm b/org.tizen.guides/html/web/tizen/ime/ime_w.htm
new file mode 100644 (file)
index 0000000..4844a12
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/ime/ime_w.htm
@@ -0,0 +1,512 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#architecture">Architecture</a></li>
+                       <li><a href="#types">Supported Application Types</a></li>
+                       <li><a href="#apis">Supported APIs</a></li>
+                       <li><a href="#config">Web IME Configuration</a></li>
+                       <li><a href="#hw">Hardware Key Events</a></li>
+                       <li><a href="#key">Key Events, Commit Strings, and Pre-edit Strings</a></li>
+                       <li><a href="#lifecycle">Web IME Life-cycle</a></li>
+                       <li><a href="#sample">Sample IME Application</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>IME Application</h1>
+
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+ <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> 
+ 
+
+<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 class="figure">Figure: Tizen Web IME support architecture</p>  
+       <p style="text-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, <span style="font-family: Courier New,Courier,monospace">ise-web-helper-agent</span>, 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 <span style="font-family: Courier New,Courier,monospace">ise-web-helper-agent</span> module is accomplished by 2 utility modules, <span style="font-family: Courier New,Courier,monospace">web-helper-agent</span> on the Web helper agent side and <span style="font-family: Courier New,Courier,monospace">web-helper-client</span> on the Web IME side. Therefore, a Web IME application must contain the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span>, which is created automatically when you create a Web IME project using the Tizen SDK.</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 <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span> 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> 
+
+  <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 <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> object, which is accessible when you include the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span> 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;</pre>
+  <p>The following table lists the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> methods that you can invoke in your Web IME.</p>
+  
+  <table> 
+   <caption>
+     Table: WebHelperClient methods 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Method</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">initialize(handler)</span></td> 
+     <td>Initializes the WebHelperClient object by registering a handler object. Before using the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> 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><span style="font-family: Courier New,Courier,monospace">handler</span> parameter: Handler object implementing the <span style="font-family: Courier New,Courier,monospace">on*</span> event handlers.</p>
+        <p>The following example shows how to initialize the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> 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;}
+};
+WebHelperClient.initialize(WebHelperClientHandler);</pre>
+
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">log(str)</span></td> 
+     <td>Leaves a dlog message.
+        <p><span style="font-family: Courier New,Courier,monospace">str</span> parameter: Log message to display.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">commitString(str)</span></td> 
+     <td>Commits a UTF-8 string to the client application directly.
+        <p><span style="font-family: Courier New,Courier,monospace">str</span> parameter: Byte array of the UTF-8 string to be committed.</p>
+        </td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">updatePreeditString(str)</span></td> 
+     <td>Updates a new UTF-8 string for pre-edit.
+       <p><span style="font-family: Courier New,Courier,monospace">str</span> parameter: Byte array of the UTF-8 string to be updated.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">sendKeyEvent(code)</span></td> 
+     <td>Sends a key event to a client application.
+        <p><span style="font-family: Courier New,Courier,monospace">code</span> parameter: Key event to be sent.</p>
+        </td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">setKeyboardSizes(portraitWidth, portraitHeight, landscapeWidth, landscapeHeight)</span></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><span style="font-family: Courier New,Courier,monospace">portraitWidth</span> parameter: Width of the keyboard, when in portrait mode.<br/>
+          <span style="font-family: Courier New,Courier,monospace">portraitHeight</span> parameter: Height of the keyboard, when in portrait mode.<br/>
+          <span style="font-family: Courier New,Courier,monospace">landscapeWidth</span> parameter: Width of the keyboard, when in landscape mode.<br/>
+          <span style="font-family: Courier New,Courier,monospace">landscapeHeight</span> parameter: Height of the keyboard, when in landscape mode.
+          </p>
+        </td> 
+    </tr>
+   </tbody>
+  </table>
+  
+  <p>The following table lists the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> enumerations that you can use when invoking the <span style="font-family: Courier New,Courier,monospace">sendKeyEvent()</span> and <span style="font-family: Courier New,Courier,monospace">forwardKeyEvent()</span> methods of the <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> object.</p>
+  
+  <table> 
+   <caption>
+     Table: WebHelperClient enumerations 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Enumeration</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">Keycode</span></td> 
+     <td>Enumeration values used when invoking the <span style="font-family: Courier New,Courier,monospace">sendKeyEvent()</span> and <span style="font-family: Courier New,Courier,monospace">forwardKeyEvent()</span> methods. 
+         <p>Keycode example:</p>
+            <pre class="prettyprint">
+Keycode: 
+{
+&nbsp;&nbsp;&nbsp;BACKSPACE:0xff08,
+&nbsp;&nbsp;&nbsp;TAB:0xff09,
+&nbsp;&nbsp;&nbsp;RETURN:0xff0d,
+
+&nbsp;&nbsp;&nbsp;ASCIITILDE:0x07e
+},</pre>
+
+        </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 <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span> object <span style="font-family: Courier New,Courier,monospace">initialize()</span> method.</p>
+ 
+ <p>The following table lists the events that you can implement in your handler object.</p>
+ 
+  <table> 
+   <caption>
+     Table:Handler events 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Description</th> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onInit()</span></td> 
+     <td>Handler for the initialization signal, used when the Web IME framework initialization is finished.
+
+        </td> 
+    </tr> 
+    <tr>
+        <td><span style="font-family: Courier New,Courier,monospace">onExit()</span></td> 
+     <td>Handler for the exit signal, used when this Web IME is about to be terminated.
+        </td> 
+    </tr> 
+    <tr>
+        <td><span style="font-family: Courier New,Courier,monospace">onFocusIn(inputContext)</span></td> 
+     <td>Handler for the focus in signal, used to do something when the input context is focused in.
+        <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+        </td> 
+    </tr> 
+    <tr>
+        <td><span style="font-family: Courier New,Courier,monospace">onFocusOut(inputContext)</span></td> 
+     <td>Handler for the focus out signal, used to do something when the input context is focused out.
+         <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onShow(inputContext)</span></td> 
+     <td>Handler for the show signal, used to show the keyboard.
+          <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onHide(inputContext)</span></td> 
+     <td>Handler for the hide signal, used to hide the keyboard.
+          <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onSetRotation(degree)</span></td> 
+     <td>Handler for the rotation signal, used to notify that the keyboard is being rotated.
+          <p><span style="font-family: Courier New,Courier,monospace">degree</span> parameter: Angle that this keyboard is being rotated to.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onUpdateCursorPosition(inputContext, position)</span></td> 
+     <td>Handler for the update cursor position signal, used to let the keyboard get the cursor position information.
+          <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onSetLanguage(language)</span></td> 
+     <td>Handler for the set language signal, used to set the input language.
+          <p><span style="font-family: Courier New,Courier,monospace">language</span> parameter: Language to be set.</p>
+        </td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onSetImdata(imdata)</span></td> 
+     <td>Handler for the set IM data signal, used to send IM data to the keyboard.
+          <p><span style="font-family: Courier New,Courier,monospace">imdata</span> parameter: IM data to be set.</p>
+        </td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onGetImdata()</span></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><span style="font-family: Courier New,Courier,monospace">onSetReturnKeyType(type)</span></td> 
+     <td>Handler for the set return key type signal, used to set the return key type to the keyboard.
+          <p><span style="font-family: Courier New,Courier,monospace">type</span> 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;</pre>
+        </td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onGetReturnKeyType()</span></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 <span style="font-family: Courier New,Courier,monospace">onSetReturnKeyType()</span> event.</p>
+        </td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onSetReturnKeyDisable(disabled)</span></td> 
+     <td>Handler for the set return key disable signal, used to set the return key disabled state to the keyboard.
+          <p><span style="font-family: Courier New,Courier,monospace">disabled</span> parameter: Value that indicates whether the return key must be disabled.</p>
+        </td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onGetReturnKeyDisable()</span></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> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onSetLayout(layout)</span></td> 
+     <td>Handler for the set virtual keyboard layout signal, used to set the virtual keyboard layout.
+          <p><span style="font-family: Courier New,Courier,monospace">layout</span> 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;</pre>
+
+        </td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onGetLayout()</span></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 <span style="font-family: Courier New,Courier,monospace">onSetLayout()</span> event.</p>
+        </td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onResetInputContext(inputContext)</span></td> 
+     <td>Handler for the reset input context signal, used to reset the keyboard input context.
+          <p><span style="font-family: Courier New,Courier,monospace">inputContext</span> parameter: Handle of the client input context that sent this event.</p>
+        </td> 
+    </tr> 
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent(code, mask, layout)</span></td> 
+     <td>Handler for the process key event signal.
+        
+          <p>
+          <span style="font-family: Courier New,Courier,monospace">code</span> parameter: Key code of the current key event.<br/>
+          <span style="font-family: Courier New,Courier,monospace">mask</span> parameter: Modifier mask of the current key event.<br/>
+          <span style="font-family: Courier New,Courier,monospace">layout</span> parameter: Hardware keyboard layout identifier.
+          </p>
+          <p>This method returns <span style="font-family: Courier New,Courier,monospace">true</span> if the event is processed; otherwise it is forwarded to the client application.</p>
+        </td> 
+    </tr>
+   </tbody>
+  </table>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Device APIs are currently not supported in Web IME applications. Device API support is expected to be included in the next version.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  
+<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.devtools/html/web_tools/config_editor_w.htm#elements">Configuration Elements</a> and <a href="../../../../../org.tizen.devtools/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>
+    <span style="font-family: Courier New,Courier,monospace">tizen:category</span>
+       <p>To identify with other IMEs, the Web IME application must contain the UUID information.</p>  
+       <pre class="prettyprint">&lt;tizen:category name="http://tizen.org/category/ime"/&gt;</pre>
+   </li>
+   <li>
+    <span style="font-family: Courier New,Courier,monospace">tizen:uuid</span>
+       <p>Added to identify the Web IME application type. If this element is defined, the application type is IME.</p>
+       <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The Device APIs are currently not supported in Web IME applications. Device API support is expected to be included in the next version.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       <pre class="prettyprint">&lt;tizen:uuid&gt;6153122a-a429-40d2-ef21-a75f468c202c&lt;/tizen:uuid&gt;</pre>
+   </li>
+   <li>
+    <span style="font-family: Courier New,Courier,monospace">tizen:languages </span>
+       
+       <p>The locale string in the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:language&gt;</span> element can be used to display the input language the specific Input Method Editor supports. The <span style="font-family: Courier New,Courier,monospace">&lt;tizen:languages&gt;</span> parent element can have more than 1 <span style="font-family: Courier New,Courier,monospace">&lt;tizen:language&gt;</span> 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:languages&gt;
+</pre>
+   </li>
+  </ul> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Two-letter primary codes are reserved for [ISO639] language abbreviations. Two-letter codes include <span style="font-family: Courier New,Courier,monospace">fr</span> (French), <span style="font-family: Courier New,Courier,monospace">de</span> (German), <span style="font-family: Courier New,Courier,monospace">it</span> (Italian), <span style="font-family: Courier New,Courier,monospace">nl</span> (Dutch), <span style="font-family: Courier New,Courier,monospace">el</span> (Greek), <span style="font-family: Courier New,Courier,monospace">es</span> (Spanish), <span style="font-family: Courier New,Courier,monospace">pt</span> (Portuguese), <span style="font-family: Courier New,Courier,monospace">ar</span> (Arabic), <span style="font-family: Courier New,Courier,monospace">he</span> (Hebrew), <span style="font-family: Courier New,Courier,monospace">ru</span> (Russian), <span style="font-family: Courier New,Courier,monospace">zh</span> (Chinese), <span style="font-family: Courier New,Courier,monospace">ja</span> (Japanese), <span style="font-family: Courier New,Courier,monospace">hi</span> (Hindi), <span style="font-family: Courier New,Courier,monospace">ur</span> (Urdu), and <span style="font-family: Courier New,Courier,monospace">sa</span> (Sanskrit).
+<p>Any two-letter subcode is understood to be a [ISO3166] country code. For more information, see <a href="http://www.w3.org/TR/html401/struct/dirlang.html" target="_blank">http://www.w3.org/TR/html401/struct/dirlang.html</a>.</p>
+</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+<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>When creating the handler object for <span style="font-family: Courier New,Courier,monospace">WebHelperClient</span>, implement the <span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent()</span> 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 <span style="font-family: Courier New,Courier,monospace">a</span> key event. </p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To provide a full support for Korean character composition, a more complex process is needed. This example is only a demonstration.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  <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;}
+};
+WebHelperClient.initialize(WebHelperClientHandler);</pre>  
+
+  <p>When the processing of a hardware key event is completed, the <span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent</span> event handler must return <span style="font-family: Courier New,Courier,monospace">true</span>. 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 <span style="font-family: Courier New,Courier,monospace">a</span> to the committed &quot;ㅁ&quot; 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 <span style="font-family: Courier New,Courier,monospace">sendKeyEvent()</span> method calls the Web IME <span style="font-family: Courier New,Courier,monospace">onProcessKeyEvent()</span> 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 <span style="font-family: Courier New,Courier,monospace">forwardKeyEvent()</span> method that invokes the client application&#39;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&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 <span style="font-family: Courier New,Courier,monospace">commitString()</span> 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 */
+WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.a);
+/* Append the string &quot;www.&quot; to the client application&#39;s editable widget,
+without generating key events */
+WebHelperClient.commitString(&quot;www.&quot;);</pre>
+  <p>To display a pre-edit string (a string that has not been finalized and can be substituted with another string), use the <span style="font-family: Courier New,Courier,monospace">updatePreeditString()</span> 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 style="background-color:#c3c3c3;">abc</span>&quot; */
+WebHelperClient.updatePreeditString(&quot;abc&quot;);
+/* 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 style="background-color:#c3c3c3;">def</span>&quot; string on the editable widget */
+WebHelperClient.updatePreeditString(&quot;def&quot;);</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> 
+   <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> 
+   <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> 
+   <li>To create the Web IME project, launch the Tizen IDE and go to <strong>File &gt; New &gt; Tizen Wearable Web Project &gt; Template &gt; IME Application &gt; Web IME application</strong>.</li> 
+   <li>Enter the project name and click <strong>Finish</strong>.<p style="text-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 <span style="font-family: Courier New,Courier,monospace">index.html</span> and <span style="font-family: Courier New,Courier,monospace">style.css</span> files, as needed.</li>
+   <li>Install the Web IME package  on the Emulator. To run the application, go to <strong>Run As &gt; Tizen Wearable 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 style="text-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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/input_output/archive_w.htm b/org.tizen.guides/html/web/tizen/input_output/archive_w.htm
new file mode 100644 (file)
index 0000000..537e903
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/input_output/archive_w.htm
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Archive</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm">Archive Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>           
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Archive</h1>
+  
+  <p>Tizen enables you to operate on the zip archive files.</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+   <p>To use the Archive API, your application must have the following privileges:</p>
+    <ul><li><a href="http://tizen.org/privilege/filesystem.read" target="blank">http://tizen.org/privilege/filesystem.read</a></li>
+    <li><a href="http://tizen.org/privilege/filesystem.write" target="blank">http://tizen.org/privilege/filesystem.write</a></li></ul>
+
+  <p>The main features of the Archive API include:</p>
+  <ul>
+   <li>Accessing archive content <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#read">read the content of an archive file</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">ArchiveFile</a> interface.</p> </li>
+    <li>Creating new archives<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#create">create archive files and add files into them</a> using the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p> </li>
+    <li>Extracting archived files<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#extract">extract a single file or all files from an archive file</a> using the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p> </li>
+    <li>Aborting operations<p>You can abort an on-going archive operation using the operation ID and the <span style="font-family: Courier New,Courier,monospace">abort()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager </span> interface.</p>
+    <p>You can abort the operations for the <span style="font-family: Courier New,Courier,monospace">open()</span>, <span style="font-family: Courier New,Courier,monospace">add()</span>, <span style="font-family: Courier New,Courier,monospace">extractAll()</span>, <span style="font-family: Courier New,Courier,monospace">getEntries()</span>, <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span>, and <span style="font-family: Courier New,Courier,monospace">extract()</span> methods.</p></li>
+  </ul>
+
+
+    <p>To start any kind of zip operation (packing or unpacking), you must first call the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface. The first parameter of is a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#FileReference">FileReference</a> object, which can be a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">File</a> object or the virtual path. The second parameter is a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileMode">FileMode</a> enumerator, whose values are described in the following table.</p>
+
+
+  <table border="1" style="width: 100%">
+   <caption>
+     Table: File modes
+   </caption>
+   <tbody>
+    <tr>
+     <th>Mode</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">r</span></td>
+     <td>Use this mode to extract or get information about the archive file content.
+     <p>The file must exist, or the <span style="font-family: Courier New,Courier,monospace">NotFoundError</span> exception occurs.</p>
+     <p>When the archive file is opened in this mode, the <span style="font-family: Courier New,Courier,monospace">add()</span> method is not available.</p></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">w</span></td>
+     <td>Use this mode to create an archive file and add files to it.
+     <p>If the file does not exist, it is created. If it exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">true</span>, the existing file is overwritten with an empty archive. If the file exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">false</span>, the error callback is invoked.</p>
+     <p>When the archive file is opened in this mode, the <span style="font-family: Courier New,Courier,monospace">getEntries()</span>, <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span>, and <span style="font-family: Courier New,Courier,monospace">extractAll()</span> methods are not available.</p></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">rw</span></td>
+     <td>Use this mode to zip or unzip an archive file.
+     <p>If the file does not exist, it is created. If it exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">true</span>, the existing file is overwritten with an empty archive. If the file exists and the <span style="font-family: Courier New,Courier,monospace">overwrite</span> option is <span style="font-family: Courier New,Courier,monospace">false</span>, the existing content is preserved, and both adding and extracting are available.</p></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">a</span></td>
+     <td>Use this mode to add new files to an archive file.
+     <p>If the file does not exist, it is created. If it exists, the previous content of the archive file is preserved and new files can be added.</p>
+     <p>When the archive file is opened in this mode, the <span style="font-family: Courier New,Courier,monospace">getEntries()</span>, <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span>, and <span style="font-family: Courier New,Courier,monospace">extractAll()</span> methods are not available.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm b/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm
new file mode 100644 (file)
index 0000000..07d6c93
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm
@@ -0,0 +1,167 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Filesystem</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm">Filesystem Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem API for Wearable Web</a></li>                 
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Filesystem</h1>
+ 
+  <p>Tizen enables you to manage the files and directories in the device file system.</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <p>The Filesystem 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>
+  <table border="1" style="width: 100%">
+   <caption>
+     Table: Filesystem virtual roots
+   </caption>
+   <tbody>
+    <tr>
+     <th>Virtual root</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">documents</span></td>
+     <td>Location for storing documents.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">downloads</span></td>
+     <td>Location for storing downloaded items.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">images</span></td>
+     <td>Location for storing images.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">music</span></td>
+     <td>Location for storing audio files.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">removable</span></td>
+     <td>Location for the removable storage.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">ringtones</span></td>
+     <td>Location for ringtones (read-only location).</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">videos</span></td>
+     <td>Location for storing videos.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">wgt-package</span></td>
+     <td>Location for storing widget packages (read-only location).</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">wgt-private</span></td>
+     <td>Location for the widget private storage.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">wgt-private-tmp</span></td>
+     <td>Location for the widget private temporary storage.</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>The main features of the Filesystem API include:</p>
+  <ul>
+   <li>File storage management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm#manage">manage different storages</a> on the device with the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> 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).</p> <p>You can retrieve additional information about the storages, including listing available storages and receiving storage change notifications with the <span style="font-family: Courier New,Courier,monospace">listStorages()</span> and <span style="font-family: Courier New,Courier,monospace">addStorageStateChangeListener()</span> methods provided by the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface.</p><p> </p></li>
+   <li>Access to files and directories <p>You can access the virtual file system using the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface.</p> <p>To access a file or directory within the virtual file system, you must use the fully qualified path, <span style="font-family: Courier New,Courier,monospace">&lt;root name&gt;/&lt;path&gt;</span>, where <span style="font-family: Courier New,Courier,monospace">&lt;rootname&gt;</span> is the name of the virtual root and <span style="font-family: Courier New,Courier,monospace">&lt;path&gt;</span> is the relative path to the file or directory within the root.</p>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">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.</td>
+      </tr>
+     </tbody>
+    </table> <p>To access a file or directory, you must also retrieve a file handle using the <span style="font-family: Courier New,Courier,monospace">resolve()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> interface. A file handle is a reference object that points to and represents a file or directory.</p> <p>The <span style="font-family: Courier New,Courier,monospace">isFile</span> and <span style="font-family: Courier New,Courier,monospace">isDirectory</span> attributes of the <span style="font-family: Courier New,Courier,monospace">File</span> 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) identify the type of the object: for example, for a file, the <span style="font-family: Courier New,Courier,monospace">isFile</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">true</span> and the <span style="font-family: Courier New,Courier,monospace">isDirectory</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span>.</p> </li>
+   <li>Files and directory management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm#file_dir">perform basic file and directory management tasks</a> using the <span style="font-family: Courier New,Courier,monospace">File</span> interface: </p>
+    <ul>
+     <li><p><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm#create">Create files and directories</a> using the <span style="font-family: Courier New,Courier,monospace">createFile()</span> and <span style="font-family: Courier New,Courier,monospace">createDirectory()</span> methods.</p> <p>The file or directory is created relative to the current directory that the operation is performed on.</p>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">Do not use &quot;.&quot; or &quot;..&quot; characters in the directory or file path components.</td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm#retrieve">Retrieve a list of files or file URIs</a> using the <span style="font-family: Courier New,Courier,monospace">listFiles()</span> and <span style="font-family: Courier New,Courier,monospace">toURI()</span> methods. The URI can be used to identify the file, for example, by using it as the <span style="font-family: Courier New,Courier,monospace">src</span> attribute on an HTML <span style="font-family: Courier New,Courier,monospace">img</span> element.<p></p> <p>You can retrieve file content as a <span style="font-family: Courier New,Courier,monospace">DOMString</span> with the <span style="font-family: Courier New,Courier,monospace">readAsText()</span> method. The encoding input parameter of the method defines the format in which the file content is returned.</p> </li>
+     <li>Read or write to a file by first using the <span style="font-family: Courier New,Courier,monospace">openStream()</span> method to open the file. You can specify the file mode and encoding.<p></p> <p>The <span style="font-family: Courier New,Courier,monospace">openStream()</span> method returns a <span style="font-family: Courier New,Courier,monospace">FileStream</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileStream">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileStream">wearable</a> applications), which is a handle to the opened file. All actual operations, such as read, write, or close, on the file are performed through the <span style="font-family: Courier New,Courier,monospace">FileStream</span> object based on a position attribute, which represents the current position in the file.</p> </li>
+     <li>Copy and move files and directories within the virtual file system with the <span style="font-family: Courier New,Courier,monospace">copyTo()</span> and <span style="font-family: Courier New,Courier,monospace">moveTo()</span> methods.<p></p> <p>If a file or directory of the same name already exists in the target location, the overwrite input parameter of the method defines whether the existing file is overwritten. </p>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">The file or directory to be copied or moved must be located under the current directory.</td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li><p>Delete files and directories from the virtual file system using the <span style="font-family: Courier New,Courier,monospace">deleteFile()</span> and <span style="font-family: Courier New,Courier,monospace">deleteDirectory()</span> methods.</p></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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm b/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm
new file mode 100644 (file)
index 0000000..4d955b7
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Input/Output</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#I/O">Input/Output API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#I/O">Input/Output API for Wearable Web</a></li>                      
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Input/Output</h1>
+  <p>Input/output features include information on how your application can process input and output data.</p>
+  <p>The main input/output features are:</p>
+  <ul>
+   <li><a href="filesystem_w.htm">Filesystem</a> <p>Enables you to access specific parts of the device file system.</p></li>
+   <li><a href="message_port_w.htm">Message Port</a> <p>Allows you to send and receive messages through message ports.</p></li>
+   </ul>
+    
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
+<ul>
+   <li><a href="archive_w.htm">Archive</a> <p>Enables you to operate on the zip archive files.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm b/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm
new file mode 100644 (file)
index 0000000..9cc7bcf
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm">Message Port Tutorial</a></li>
+                       <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>                      
+            </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 pair.</p>
+  
+    
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>You can send and receive messages through 2 types of message ports:</p>
+<ul><li>The <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a> applications) is used to register your message port and prepare to receive messages from other applications.
+<p>To receive messages from other applications, you must register a callback function to the local message port.</p></li>
+<li>The <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#RemoteMessagePort">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#RemoteMessagePort">wearable</a> applications) is used to send messages to other applications.
+<p>The local message port information can be sent to another application for bi-directional communication.</p></li></ul>
+
+<p>You can retrieve the instances of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> and <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interfaces with the <span style="font-family: Courier New,Courier,monospace">requestLocalMessagePort()</span> and <span style="font-family: Courier New,Courier,monospace">requestRemoteMessagePort()</span> methods of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object.</p>
+
+<p>A message port supports sending and receiving methods:</p>
+
+<ul><li>A Tizen Web application can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm#Manage_Message_Port">send messages to another application</a> using the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface.
+<p>To receive response messages from the other application, your application can specify a local message port when it sends the message. You can receive response messages using the callback method which is registered through the <span style="font-family: Courier New,Courier,monospace">addMessagePortListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface.</p></li>
+<li>The application that wants to receive messages from your application can mostly be implemented as a Tizen Web or native application. To implement it as a native application, see the mobile native <a href="../../../native/app/message_port_n.htm">Message Port Communication</a> guide.</li></ul>
+
+  <p class="figure">Figure: Message port communication</p>
+  <p style="text-align:center;"><img alt="Message port communication" src="../../../images/message_port.png" /></p>
+
+<p>You can communicate only with a trusted application that is signed with the same certificate as your application, using the instances of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> and <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interfaces that are retrieved by the <span style="font-family: Courier New,Courier,monospace">requestTrustedLocalMessagePort()</span> and <span style="font-family: Courier New,Courier,monospace">requestTrustedRemoteMessagePort()</span> methods of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object.</p>
+    <p class="figure">Figure: Trusted message ports</p>
+  <p style="text-align:center;"><img alt="Trusted message ports" src="../../../images/message_port_trusted.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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/localization/localization_w.htm b/org.tizen.guides/html/web/tizen/localization/localization_w.htm
new file mode 100644 (file)
index 0000000..a7419e7
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/localization/localization_w.htm
@@ -0,0 +1,181 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Localization</title> 
+ </head>
+ 
+ <body class="no-toc"  onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+<h1>Localization</h1>
+
+ <p>To internationalize a Tizen Web application:</p>
+<ol>
+<li>Create a directory for each locale.
+<p>Create a directory for each locale that has localized content under the <span style="font-family: Courier New,Courier,monospace">locales</span> directory in package root. The locale names are defined in the W3C IANA <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">language subtag registry</a>.</p>
+
+<p>The Web Runtime loads the proper resource for the current locale according to the W3C widget using the following mark-up:</p>
+<pre>
+┬index.html
+└locales
+&nbsp;&nbsp;└en
+&nbsp;&nbsp;&nbsp;&nbsp;└language.js
+&nbsp;&nbsp;└ko
+&nbsp;&nbsp;&nbsp;&nbsp;└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 <span style="font-family: Courier New,Courier,monospace">LANG_JSON_DATA</span>. This object defines the key-value pairs for localized strings.</p>
+  <ul>
+<li><span style="font-family: Courier New,Courier,monospace">en/language.js</span>:
+        <pre class="prettyprint lang-javascript">
+LANG_JSON_DATA=
+{
+&nbsp;&nbsp;&nbsp;&quot;hello&quot;: &quot;hello&quot;
+}</pre></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">ko/language.js</span>:
+        <pre class="prettyprint lang-javascript">
+LANG_JSON_DATA=
+{
+&nbsp;&nbsp;&nbsp;&quot;hello&quot;: &quot;안녕&quot;
+}</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>
+</li>
+<li>Load language resources.
+ <p>To load language resources, add the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element containing the language resource file in your <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+        <pre class="prettyPrint lang-html">&lt;script src="language.js"&gt;&lt;/script&gt;</pre>
+        <p>
+            The Web Runtime loads the <span style="font-family: Courier New,Courier,monospace">language.js</span> 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;]);</pre>
+        <p>
+        The following table lists the acceptable locale folder names.</p>
+        <table>
+            <caption>Table: Locale folder names</caption>
+            <tr><th align="left">Language</th><th align="left">Folder name</th></tr>
+            <tr><td>Albanian</td><td><span style="font-family: Courier New,Courier,monospace">sq-al</span></td></tr>
+            <tr><td>Arabic</td><td><span style="font-family: Courier New,Courier,monospace">ar-ae</span></td></tr>
+            <tr><td>Armenian</td><td><span style="font-family: Courier New,Courier,monospace">hy-am</span></td></tr>
+            <tr><td>Assamese</td><td><span style="font-family: Courier New,Courier,monospace">as-in</span></td></tr>
+            <tr><td>Azerbaijani</td><td><span style="font-family: Courier New,Courier,monospace">az-az</span></td></tr>
+            <tr><td>Basque</td><td><span style="font-family: Courier New,Courier,monospace">eu-es</span></td></tr>
+            <tr><td>Bengali</td><td><span style="font-family: Courier New,Courier,monospace">bn-in</span></td></tr>
+            <tr><td>Bulgarian</td><td><span style="font-family: Courier New,Courier,monospace">bg-bg</span></td></tr>
+            <tr><td>Catalan</td><td><span style="font-family: Courier New,Courier,monospace">ca-es</span></td></tr>
+            <tr><td>Chinese Simplified (中文 简体)</td><td><span style="font-family: Courier New,Courier,monospace">zh-cn</span></td></tr>
+            <tr><td>Chinese Traditional (Hong Kong)</td><td><span style="font-family: Courier New,Courier,monospace">zh-hk</span></td></tr>
+            <tr><td>Chinese Traditional (Taiwan)</td><td><span style="font-family: Courier New,Courier,monospace">zh-tw</span></td></tr>
+            <tr><td>Croatian</td><td><span style="font-family: Courier New,Courier,monospace">hr-hr</span></td></tr>
+            <tr><td>Czech</td><td><span style="font-family: Courier New,Courier,monospace">cs-cz</span></td></tr>
+            <tr><td>Danish</td><td><span style="font-family: Courier New,Courier,monospace">da-dk</span></td></tr>
+            <tr><td>Dutch</td><td><span style="font-family: Courier New,Courier,monospace">nl-nl</span></td></tr>
+            <tr><td>Dutch (Belgium)</td><td><span style="font-family: Courier New,Courier,monospace">nl-be</span></td></tr>
+            <tr><td>English (UK)</td><td><span style="font-family: Courier New,Courier,monospace">en-gb</span></td></tr>
+            <tr><td>English (US)</td><td><span style="font-family: Courier New,Courier,monospace">en-us</span></td></tr>
+            <tr><td>English (Australia)</td><td><span style="font-family: Courier New,Courier,monospace">en-au</span></td></tr>
+            <tr><td>English (Canada)</td><td><span style="font-family: Courier New,Courier,monospace">en-ca</span></td></tr>
+            <tr><td>English (Ireland)</td><td><span style="font-family: Courier New,Courier,monospace">en-ie</span></td></tr>
+            <tr><td>English (New Zealand)</td><td><span style="font-family: Courier New,Courier,monospace">en-nz</span></td></tr>
+            <tr><td>English (Philippines)</td><td><span style="font-family: Courier New,Courier,monospace">en-ph</span></td></tr>
+            <tr><td>English (South Africa)</td><td><span style="font-family: Courier New,Courier,monospace">en-za</span></td></tr>
+            <tr><td>Estonian</td><td><span style="font-family: Courier New,Courier,monospace">et-ee</span></td></tr>
+            <tr><td>Farsi</td><td><span style="font-family: Courier New,Courier,monospace">fa-ir</span></td></tr>
+            <tr><td>Filipino</td><td><span style="font-family: Courier New,Courier,monospace">tl-ph</span></td></tr>
+            <tr><td>Finnish</td><td><span style="font-family: Courier New,Courier,monospace">fi-fi</span></td></tr>
+            <tr><td>French (Canada)</td><td><span style="font-family: Courier New,Courier,monospace">fr-ca</span></td></tr>
+            <tr><td>French (France)</td><td><span style="font-family: Courier New,Courier,monospace">fr-fr</span></td></tr>
+            <tr><td>French (Belgium)</td><td><span style="font-family: Courier New,Courier,monospace">fr-be</span></td></tr>
+            <tr><td>French (Switzerland)</td><td><span style="font-family: Courier New,Courier,monospace">fr-ch</span></td></tr>
+            <tr><td>Galician</td><td><span style="font-family: Courier New,Courier,monospace">gl-es</span></td></tr>
+            <tr><td>Georgian</td><td><span style="font-family: Courier New,Courier,monospace">ka-ge</span></td></tr>
+            <tr><td>German</td><td><span style="font-family: Courier New,Courier,monospace">de-de</span></td></tr>
+            <tr><td>German (Switzerland)</td><td><span style="font-family: Courier New,Courier,monospace">de-ch</span></td></tr>
+            <tr><td>German (Austria)</td><td><span style="font-family: Courier New,Courier,monospace">de-at</span></td></tr>
+            <tr><td>Greek</td><td><span style="font-family: Courier New,Courier,monospace">el-gr</span></td></tr>
+            <tr><td>Gujarati</td><td><span style="font-family: Courier New,Courier,monospace">gu-in</span></td></tr>
+            <tr><td>Hebrew</td><td><span style="font-family: Courier New,Courier,monospace">he-il</span></td></tr>
+            <tr><td>Hindi</td><td><span style="font-family: Courier New,Courier,monospace">hi-in</span></td></tr>
+            <tr><td>Hungarian</td><td><span style="font-family: Courier New,Courier,monospace">hu-hu</span></td></tr>
+            <tr><td>Icelandic</td><td><span style="font-family: Courier New,Courier,monospace">is-is</span></td></tr>
+            <tr><td>Indonesian</td><td><span style="font-family: Courier New,Courier,monospace">id-id</span></td></tr>
+            <tr><td>Irish</td><td><span style="font-family: Courier New,Courier,monospace">ga-ie</span></td></tr>
+            <tr><td>Italian</td><td><span style="font-family: Courier New,Courier,monospace">it-it</span></td></tr>
+            <tr><td>Japanese</td><td><span style="font-family: Courier New,Courier,monospace">ja-jp</span></td></tr>
+            <tr><td>Kannada</td><td><span style="font-family: Courier New,Courier,monospace">kn-ca</span></td></tr>
+            <tr><td>Kazakh</td><td><span style="font-family: Courier New,Courier,monospace">kk-kz</span></td></tr>
+            <tr><td>Khmer</td><td><span style="font-family: Courier New,Courier,monospace">km-kh</span></td></tr>
+            <tr><td>Korean</td><td><span style="font-family: Courier New,Courier,monospace">ko-kr</span></td></tr>
+            <tr><td>Lao</td><td><span style="font-family: Courier New,Courier,monospace">lo-la</span></td></tr>
+            <tr><td>Latvian</td><td><span style="font-family: Courier New,Courier,monospace">lv-lv</span></td></tr>
+            <tr><td>Lithuanian</td><td><span style="font-family: Courier New,Courier,monospace">lt-lt</span></td></tr>
+            <tr><td>Macedonian</td><td><span style="font-family: Courier New,Courier,monospace">mk-mk</span></td></tr>
+            <tr><td>Malay</td><td><span style="font-family: Courier New,Courier,monospace">ms-mw</span></td></tr>
+            <tr><td>Malayalam</td><td><span style="font-family: Courier New,Courier,monospace">ml-my</span></td></tr>
+            <tr><td>Marathi</td><td><span style="font-family: Courier New,Courier,monospace">mr-in</span></td></tr>
+            <tr><td>Myanmar</td><td><span style="font-family: Courier New,Courier,monospace">my-mm</span></td></tr>
+            <tr><td>Nepali</td><td><span style="font-family: Courier New,Courier,monospace">ne-np</span></td></tr>
+            <tr><td>Norwegian</td><td><span style="font-family: Courier New,Courier,monospace">nb-no</span></td></tr>
+            <tr><td>Odia</td><td><span style="font-family: Courier New,Courier,monospace">or-in</span></td></tr>
+            <tr><td>Polish</td><td><span style="font-family: Courier New,Courier,monospace">pl-pl</span></td></tr>
+            <tr><td>Portuguese (Brazil)</td><td><span style="font-family: Courier New,Courier,monospace">pt-br</span></td></tr>
+            <tr><td>Portuguese (Portugal)</td><td><span style="font-family: Courier New,Courier,monospace">pt-pt</span></td></tr>
+            <tr><td>Punjabi</td><td><span style="font-family: Courier New,Courier,monospace">pa-pk</span></td></tr>
+            <tr><td>Romanian</td><td><span style="font-family: Courier New,Courier,monospace">ro-ro</span></td></tr>
+            <tr><td>Russian</td><td><span style="font-family: Courier New,Courier,monospace">ru-ru</span></td></tr>
+            <tr><td>Serbian</td><td><span style="font-family: Courier New,Courier,monospace">sr-rs</span></td></tr>
+            <tr><td>Sinhala</td><td><span style="font-family: Courier New,Courier,monospace">si-lk</span></td></tr>
+            <tr><td>Slovakian</td><td><span style="font-family: Courier New,Courier,monospace">sk-sk</span></td></tr>
+            <tr><td>Slovenian</td><td><span style="font-family: Courier New,Courier,monospace">sl-si</span></td></tr>
+            <tr><td>Spanish (Spain)</td><td><span style="font-family: Courier New,Courier,monospace">es-es</span></td></tr>
+            <tr><td>Spanish (Latin)</td><td><span style="font-family: Courier New,Courier,monospace">es-us</span></td></tr>
+            <tr><td>Swedish</td><td><span style="font-family: Courier New,Courier,monospace">sv-se</span></td></tr>
+            <tr><td>Tamil</td><td><span style="font-family: Courier New,Courier,monospace">ta-in</span></td></tr>
+            <tr><td>Telugu</td><td><span style="font-family: Courier New,Courier,monospace">te-in</span></td></tr>
+            <tr><td>Thai</td><td><span style="font-family: Courier New,Courier,monospace">th-th</span></td></tr>
+            <tr><td>Turkish</td><td><span style="font-family: Courier New,Courier,monospace">tr-tr</span></td></tr>
+            <tr><td>Ukrainian</td><td><span style="font-family: Courier New,Courier,monospace">uk-ua</span></td></tr>
+            <tr><td>Urdu</td><td><span style="font-family: Courier New,Courier,monospace">ur-pk</span></td></tr>
+            <tr><td>Uzbekistan</td><td><span style="font-family: Courier New,Courier,monospace">uz-uz</span></td></tr>
+            <tr><td>Vietnamese</td><td><span style="font-family: Courier New,Courier,monospace">vi-vn</span></td></tr>
+                </table></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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
new file mode 100644 (file)
index 0000000..0e5e1c9
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Key</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm">Media Key Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html">Media Key API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key API for Wearable Web</a></li>                    
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Media Key</h1>
+ 
+  <p>Tizen enables you to handle media keys in your application.</p>
+
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
+               <p>The Media Key API is not supported on any Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+    <p>The media keys are used to <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>
+  
+  <p>The main features of the Media Key API include:</p>
+  <ul>
+   <li>Registering a listener<p>You can register and unregister a listener for the media key state changes.</p>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">You can register only 1 media key state change listener for your application. If you attempt to register a second listener, the first listener is unset and replaced with the new one.</td>
+    </tr>
+   </tbody>
+  </table>
+   </li>
+   <li>Handling state changes<p>With the registered listener, you can monitor the media keys and react to their state changes, when the user presses or releases a key.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
new file mode 100644 (file)
index 0000000..8af7226
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Multimedia</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia API for Wearable Web</a></li>                 
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Multimedia</h1>
+  <p>Multimedia features include managing the device sound volume and media keys.</p>
+  <p>The main multimedia features are:</p>
+  <ul>
+  <li><a href="sound_w.htm">Sound</a> <p>Enables you to control the volume level of several sound types.</p></li>
+  <li><a href="media_key_w.htm">Media Key</a> <p>Enables you to handle media keys 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
new file mode 100644 (file)
index 0000000..df0137b
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Sound</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm">Sound Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">Sound API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">Sound API for Wearable Web</a></li>                   
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Sound</h1>
+ 
+   <p>Tizen enables you to control the volume level of several sound types. The available sound types include, for example, system, notifications, alarms, and media.</p>
+   
+     <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+   <p>The main features of the Sound API include:</p>
+   <ul>
+    <li>Setting the volume level<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage">set the volume level of a specific sound type</a> with the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method.</p>   </li>
+    <li>Getting the sound mode<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage">retrieve the current sound mode</a> with the <span style="font-family: Courier New,Courier,monospace">getSoundMode()</span> method.</p> </li>
+    <li>Monitoring changes<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#monitor">monitor changes in the volume level and sound mode</a> by registering appropriate listeners.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/service/service_w.htm b/org.tizen.guides/html/web/tizen/service/service_w.htm
new file mode 100644 (file)
index 0000000..89e80b0
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/service/service_w.htm
@@ -0,0 +1,182 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#fund">Fundamentals</a></li>
+                               <li><a href="#life">Life-cycle</a></li>
+                               <li><a href="#package_mgmt">Package Management</a></li>
+                               <li><a href="#conf">Configuration Extensions</a></li>
+                               <li><a href="#feature">Required Feature</a></li>                
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm">Service Application Tutorial</a></li>   
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Service Application</h1> 
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <p>A service application is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the application follows the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMA-262 specification</a>). The service application is used to perform tasks which need to run periodically or continuously but do not require user interaction. For example, a service application can be used for getting data or listening to platform events in the background. As service applications do not have UI components, they run on top of a more light-weight runtime than UI applications. Therefore, you can expect them to perform better and consume less memory.</p>
+
+<p>Service applications are packaged with a UI application. They can be <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#launch">launched</a> by another application through the <span style="font-family: Courier New,Courier,monospace">launch()</span> and <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> functions of the <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API by using an explicit application ID. You can also register them to be launched automatically at boot time.</p>
+
+<p>The device main menu does not contain any icons for service applications, because the applications run in the background. The task switcher does not show them either. Service applications can run simultaneously with other service and UI applications.</p>
+    <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The wearable service application requires <a href="../../../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">partner-level certification</a> in Tizen 2.3.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<h2 id="fund" name="fund">Fundamentals</h2>
+
+<p>You can use a selection of the following Tizen wearable Web Device APIs to interact with the platform or other service applications. More Device APIs for service applications are supported in the next release.</p>
+
+<table>
+<caption>Table: Fundamental APIs</caption>
+<tbody>
+<tr>
+ <th>API</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen</a></td>
+ <td>The base object for accessing the Tizen wearable Web Device APIs.</td>
+</tr>
+<tr>
+ <td><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">Alarm</a></td>
+ <td>This API provides functions for setting and unsetting alarms.</td>
+</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.       
+<p>Note that the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> function is only valid inside the <span style="font-family: Courier New,Courier,monospace">onRequest()</span> callback.</p></td>
+</tr>
+<tr>
+ <td><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">Package</a></td>
+ <td>This API provides functions to install and uninstall Tizen packages and to get information about installed packages.</td>
+</tr>
+<tr>
+ <td><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem</a></td>
+ <td>This API provides functions to access the file system of a device and to read, write, copy, move, and delete files.</td>
+</tr>
+<tr>
+ <td><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html">Message Port</a></td>
+ <td>This API provides functions for an application to communicate with other applications.</td>
+</tr>
+<tr>
+ <td><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">Power</a></td>
+ <td>This API provides interfaces and methods for controlling power resources.
+ <p>Note that the <span style="font-family: Courier New,Courier,monospace">isScreenOn()</span>, <span style="font-family: Courier New,Courier,monospace">restoreScreenBrightness()</span>, <span style="font-family: Courier New,Courier,monospace">turnScreenOn()</span>, <span style="font-family: Courier New,Courier,monospace">turnScreenOff()</span>, <span style="font-family: Courier New,Courier,monospace">setScreenBrightness()</span>, and <span style="font-family: Courier New,Courier,monospace">getScreenBrightness()</span> functions are not supported for wearable Web service applications.</p></td>
+</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>
+</tr>
+</tbody>       
+</table>
+
+<h2 id="life" name="life">Life-cycle</h2>
+<p>To make sure that you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#create">run a service application</a>, export a number of functions using the <a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank">CommonJS Modules</a> API. The functions need to be added to the <span style="font-family: Courier New,Courier,monospace">module.exports</span> object which is provided by the environment. These functions are called when there are life-cycle changes or application control events which are triggered by the application management framework.</p>
+ 
+ <p class="figure">Figure: State transitions</p> 
+ <p style="text-align:center;"><img alt="State transitions" src="../../../images/service_app.png" /></p>
+
+ 
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">onStart()</span>: The entry point of the service. It is called after the service runtime finishes the set-up.</li>
+<li><span style="font-family: Courier New,Courier,monospace">onRequest()</span>: 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 <span style="font-family: Courier New,Courier,monospace">tizen.application.getCurrentApplication().getRequestedAppControl()</span> function. 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><span style="font-family: Courier New,Courier,monospace">onExit()</span>: This is called when the <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#terminate">service ends</a>. You can release resources or save the context by using this callback.</li></ul>
+
+<h2 id="package_mgmt" name="package_mgmt">Package Management</h2>
+<p>Service applications are <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#package">packaged</a> with at least one UI application in a widget file. The widget file is installed, updated, and uninstalled as a single <a href="../../../../../org.tizen.gettingstarted/html/app_model/application_model_w.htm#package">package</a>, making the life-cycles of the service applications and the UI application synchronous.</p>
+
+<p>When privileges are defined, their scope covers the entire package. Hence privileges do not have to be specified for service applications because they are packaged with at least 1 UI application in a widget file.</p>
+
+<h2 id="conf" name="conf">Configuration Extensions</h2>
+<p>To ensure that a service application is acknowledged by the platform, the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application must be extended.</p>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:service&gt;</span> element and check the configuration in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+<p>The following is an example of a service application extension element:</p>
+<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;/widget&gt;
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:service&gt;</span> is a child element of the <span style="font-family: Courier New,Courier,monospace">&lt;widget&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. With <span style="font-family: Courier New,Courier,monospace">&lt;tizen:service&gt;</span>, you can set the traits of a service application, such as application ID, auto restart, and boot launching capability. Under <span style="font-family: Courier New,Courier,monospace">&lt;tizen:service&gt;</span>, you can also set the starting script, the name, and the icon for the service application.</p>
+<p>The definition of all service elements is listed and explained in the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#ww_extend">Extending Configuration Elements</a>.</p>
+
+<h2 id="feature" name="feature">Required Feature</h2>
+<p>The following feature must be specified in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file if you want your Web application to be visible only on devices that support the Web Service Application:</p>
+<pre class="prettyprint">
+&lt;widget&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:feature name=&quot;http://tizen.org/feature/web.service&quot;/&gt;
+&lt;/widget&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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/account_w.htm b/org.tizen.guides/html/web/tizen/social/account_w.htm
new file mode 100644 (file)
index 0000000..d6f0306
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/account_w.htm
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Account</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm">Account Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Account</h1>
+
+   <p>You can use existing configured on-line accounts and providers, and create new accounts of known types.</p>
+   
+     <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+    <p>The basic account management concepts are:</p>
+<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>
+</li></ul>
+
+<p>Some of the account management features can be invoked only in account provider applications. Such applications have a specially prepared <span style="font-family: Courier New,Courier,monospace">config.xml</span> file with an account provider section: </p>
+
+<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;http://tizen.org/account/capability/contact&lt;/tizen:capability&gt;
+&lt;/tizen:account&gt;</pre>
+
+<p>If the application is registered as a provider, it is launched to authenticate the account. You must implement the appcontrol for the account provider. The following methods are available only in an account provider application: <span style="font-family: Courier New,Courier,monospace">add()</span>, <span style="font-family: Courier New,Courier,monospace">remove()</span>, and <span style="font-family: Courier New,Courier,monospace">update()</span>.</p>
+
+<p>The main features of the Account API include:</p>
+
+<ul>
+
+<li>Accessing accounts
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm#get_account">get a specific account or all available accounts</a>.</p></li>
+
+<li>Accessing account providers
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm#get_providers">get a specific provider or all available providers</a>.</p></li>
+
+<li>Managing accounts
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm#manage">add, update, and remove accounts</a>.</p></li>
+
+<li>Monitoring account changes
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm#listener">register a listener</a> and track changes in the account database.</p></li>
+
+<li>Managing extended data
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm#extend">set and get extended data</a> for an account. The extended data is defined as key-value pairs.</p></li>
+
+</ul>
+
+<p>The account provider application declares the account capabilities. The capability name is decided by the author of the account provider application, and must have an IRI form. For example:    </p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> is used when the account is related to contacts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> is used when the account is related to the calendar.
+</li></ul>
+
+<p>To check whether this API is supported, use the <span style="font-family: Courier New,Courier,monospace">tizen.systeminfo.getCapability()</span> method and enable or disable code that needs this API, as needed. To guarantee that the account application runs on a device with the account feature, declare the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/account</span> feature requirement in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+
+
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/bookmark_w.htm b/org.tizen.guides/html/web/tizen/social/bookmark_w.htm
new file mode 100644 (file)
index 0000000..7403342
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/bookmark_w.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Bookmark</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm">Bookmark Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Bookmark</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>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Bookmark API include:</p>
+  <ul>
+   <li>Creating bookmarks <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm#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>Managing bookmarks <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm#Retrieving_Bookmark">retrieve a list of current bookmarks</a> of the Tizen Web browser using the <span style="font-family: Courier New,Courier,monospace">BookmarkManager</span> interface. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm#Deleting_Bookmark">delete bookmark folders and items</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/calendar_w.htm b/org.tizen.guides/html/web/tizen/social/calendar_w.htm
new file mode 100644 (file)
index 0000000..1e7cb64
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/calendar_w.htm
@@ -0,0 +1,140 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm">Calendar Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Calendar</h1>
+
+ 
+  <p>Tizen enables you to manage your schedule and tasks.</p>
+  <p>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>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Due to time zone and daylight saving time, an event for &quot;today&quot; can actually occur in the past or in the future.</td> 
+    </tr>
+   </tbody>
+  </table>
+  <p>The events and tasks are identified using the <span style="font-family: Courier New,Courier,monospace">CalendarItemId</span> typedef, which is either a <span style="font-family: Courier New,Courier,monospace">CalendarTaskId</span> (for tasks) or <span style="font-family: Courier New,Courier,monospace">CalendarEventId</span> (for events). In recurring events, the <span style="font-family: Courier New,Courier,monospace">CalendarEventId</span> contains a recurrence ID (<span style="font-family: Courier New,Courier,monospace">rid</span>) in addition to the actual event ID, to separately identify each occurrence of the recurring event.</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 <span style="font-family: Courier New,Courier,monospace">Date</span> object to handle difficult issues related to the time zone, because the <span style="font-family: Courier New,Courier,monospace">TZDate</span> object handles exact time and provides various utility methods.</p>
+  <p>The main features of the Calendar API include:</p>
+  <ul>
+  
+   <li>Calendar management 
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Creating_Calendar">create a new calendar</a> using the <span style="font-family: Courier New,Courier,monospace">addCalendar()</span> 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>
+   <p>To access an existing calendar item, you must first retrieve the calendar object of the applicable type from the applicable calendar. To access the device calendars, you can use:</p><ul>
+   
+     <li><span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <span style="font-family: Courier New,Courier,monospace">CalendarManager</span> interface to retrieve the default calendar.</li>
+     <li><span style="font-family: Courier New,Courier,monospace">getCalendars()</span> method to retrieve all the available calendars as an array.</li>
+     <li><span style="font-family: Courier New,Courier,monospace">getUnifiedCalendar()</span> method of the <span style="font-family: Courier New,Courier,monospace">CalendarManager</span> interface to retrieve the special calendar which combines events (or tasks) from all calendars of the same type.</li>
+   </ul></li>
+
+    <li>Calendar item management <p>You can manage calendar items (add a new <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Adding_Events">event</a> or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Adding_Tasks">task</a> to a calendar, or manage a single calendar <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Managing_Event">event</a> or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#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.</p> <p>If you need to delete or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Updating_Event">update a single instance of a recurring event</a>, get the list of event instances first with the <span style="font-family: Courier New,Courier,monospace">expandRecurrence()</span> 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method with the <span style="font-family: Courier New,Courier,monospace">updateAllInstances</span> parameter set to <span style="font-family: Courier New,Courier,monospace">false</span>.</p> <p>You can create multiple <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Adding_Events_Batch">events</a> or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Adding_Tasks_Batch">tasks</a>, and manage multiple calendar <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Managing_Event_Batch">events</a> or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Managing_Task_Batch">tasks</a> simultaneously by using the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">addBatch()</span>, <span style="font-family: Courier New,Courier,monospace">updateBatch()</span>, and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>. The batch mode provides faster, optimized processing of multiple calendar items.</p>
+  
+   
+   
+      <p>When searching for calendar items, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#calendar">specific filter attributes</a>. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p>
+      <table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">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.</td>
+     </tr>
+    </tbody>
+   </table></li>
+  
+    <li>Calendar item alarms <p>You can set an alarm for an important <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Adding_Events">event</a> or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Adding_Tasks">task</a>, such as a monthly meeting or a specific task (for example, paying a utility bill), 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></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="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Receiving_Calendar">receiving notifications</a> in your application when calendar items change.</p> <p>The <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Calendar</span> interface registers an event listener, which starts asynchronously once the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> 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>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 calendar event is treated as one event.</p> </li>
+<li>iCalendar 2.0 format conversions <p>You can convert a calendar <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Converting_Event">event</a> or <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm#Converting_Task">task</a> to the iCalendar format or back using the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> or <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface, respectively.</p> <p>The conversion allows you to exchange calendar data between applications by sharing files with the <span style="font-family: Courier New,Courier,monospace">.ics</span> 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.</p> <p>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 and task in the iCalendar format:</p> 
+<pre class="prettyprint">
+/* Event */
+BEGIN:VCALENDAR
+BEGIN:VEVENT
+DTSTART:20110714T150000Z
+DTEND:20110715T173000Z
+SUMMARY:Prepare team meeting
+END:VEVENT
+END:VCALENDAR
+
+/* Task */
+BEGIN:VCALENDAR
+BEGIN:VTODO
+DTSTAMP:TZID=CET:20110902T110000Z
+DTSTART:TZID=CET:20110906T140000Z
+DUE:TZID=CET:20110906T150000Z
+SUMMARY:Prepare team meeting
+END:VTODO
+END:VCALENDAR</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/call_history_w.htm b/org.tizen.guides/html/web/tizen/social/call_history_w.htm
new file mode 100644 (file)
index 0000000..d122f22
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/call_history_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Call History</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm">Call History Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <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>
+  
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Call History API include:</p>
+  <ul>
+   <li>Call history tracking <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm#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. You can also manage the call history by <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm#Removing_Call_History">removing unnecessary call history items</a>.</p>
+      <p>When searching for call history items, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#call">specific filter attributes</a>. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p></li>
+   <li>Change tracking <p>You can register event listeners to <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm#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>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/contact_w.htm b/org.tizen.guides/html/web/tizen/social/contact_w.htm
new file mode 100644 (file)
index 0000000..1b003ed
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/contact_w.htm
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm">Contact Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Contact</h1>
+
+
+  <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 <span style="font-family: Courier New,Courier,monospace">Person</span> object is an aggregation of one or more contacts associated with the same person.</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Contact API include:</p>
+  <ul>
+   <li>Address book management 
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Adding_Addressbook">create a new address book</a> using the <span style="font-family: Courier New,Courier,monospace">addAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface (you also need the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API).</p>
+   <p>To access an existing contact, you must first retrieve the <span style="font-family: Courier New,Courier,monospace">Contact</span> object from the applicable address book. To <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Getting_Address_Books">access the device address books</a>, you can use the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContactManager</span> interface to retrieve the default address book, or the <span style="font-family: Courier New,Courier,monospace">getAddressBooks()</span> method to retrieve all the available address books as an array. To get a specific address book, use the <span style="font-family: Courier New,Courier,monospace">getAddressBook()</span> method.</p>   
+   </li>
+   <li>Contact management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Adding_Contact">add</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Managing_Contact">manage</a>  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 <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Adding_Multiple_Contact">create</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Managing_Multiple_Contact">manage</a> multiple contacts simultaneously by using the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">addBatch()</span>, <span style="font-family: Courier New,Courier,monospace">updateBatch()</span>, and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>. The batch mode provides faster, optimized processing of multiple contacts.</p>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">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. Additionally, breaking down a batch operation helps you avoid blocking other database operations, such as add or remove.</td>
+      </tr>
+     </tbody>
+    </table>
+      <p>When searching for contacts, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#contact">specific filter attributes</a>. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p></li>
+       <li>Group management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Managing_Groups">manage contact groups</a>, including getting, updating, and deleting them, using the applicable methods of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface.</p></li>
+    <li>Contact change notifications <p>You can keep the address book in your application synchronized with external contact manager by <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Receiving_Contact">receiving notifications</a> in your application when contact information changes.</p> <p>The <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Addressbook</span> interface registers an event listener, which starts asynchronously once the addChangeListener() 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>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">The listener object that is the first argument of the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method must have at least 1 event handler defined. If no handlers are defined, a <span style="font-family: Courier New,Courier,monospace">TypeMismatchError</span> error occurs. </td>
+      </tr>
+     </tbody>
+    </table> <p>Every change made to the address book triggers an event for which you can define a notification. For batch mode operations, each requested batch operation generates only a single event.</p> </li>
+   <li>Person management <p>You can manage persons, including searching, updating, and deleting, by using the applicable methods of the <span style="font-family: Courier New,Courier,monospace">ContactManager</span> interface. When managing a single person at a time, the operations are handled in a synchronous mode.</p> <p>You can handle multiple persons simultaneously using the applicable batch methods: <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span>.</p> <p>Persons are automatically added or modified when contacts are added to or unlinked from existing persons. You cannot add persons directly.</p><p>When searching for persons, you can filter and sort the search results based on <a href="../tizen/tizen_guide_w.htm#sorting">specific filter attributes</a>.</p></li>
+   <li>vCard format conversions <p>You can convert the contacts to <a target="_blank" href="http://www.imc.org/pdi/">vCard format</a> or back to <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Importing_Contact">import</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm#Exporting_Contact">export</a> contacts.</p> <p>The vCard (RFC 2426) file format (<span style="font-family: Courier New,Courier,monospace">.vcf</span> or <span style="font-family: Courier New,Courier,monospace">.vcard</span>) 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>
+ 
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/data_sync_w.htm b/org.tizen.guides/html/web/tizen/social/data_sync_w.htm
new file mode 100644 (file)
index 0000000..26e1e13
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/data_sync_w.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Synchronization</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm">Data Synchronization Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <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>
+  
+      <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">As a prerequisite to synchronizing your device data with the server, you must create an OMA DS server account.</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>The main features of the Data Synchronization API include:</p>
+  <ul>
+   <li>Checking for free profile slot <p>Tizen sets a limitation on the number of supported OMA DS profiles on the device, so you must first check whether there is a profile slot available.</p> <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Creating_Sync_Profile">check whether sync profile slots are available</a> using the <span style="font-family: Courier New,Courier,monospace">getProfilesNum()</span> and <span style="font-family: Courier New,Courier,monospace">getMaxProfilesNum()</span> methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface.</p> </li>
+   <li>Creating a sync profile <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Creating_Sync_Profile">create a profile</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interface. You can define the profile name and provide various information defined using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a> interfaces.</p> </li>
+   <li>Retrieving synchronization process information <p>After starting the synchronization process using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method of the <span style="font-family: Courier New,Courier,monospace">DataSynchronizationManager</span> interface, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Starting_Sync">monitor the progress</a> 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 <span style="font-family: Courier New,Courier,monospace">getLastSyncStatistics()</span> method.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/social_guide_w.htm b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
new file mode 100644 (file)
index 0000000..6995341
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Social</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm">Social Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Social</h1>
+
+  <p>Social features include managing call and browsing history, bookmarks, and calendars, and synchronizing device data.</p>
+  
+      <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Social API domain is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+  <p>The main social features are:</p>
+  <ul>
+   <li><a href="account_w.htm">Account</a> <p>Allows you to use existing configured on-line accounts and providers, and create new accounts of known types.</p></li>
+   <li><a href="bookmark_w.htm">Bookmark</a> <p>Allows you to manage the Tizen Web browser bookmark list on a device.</p></li>
+   <li><a href="calendar_w.htm">Calendar</a> <p>Allows you to manage calendars, events, and tasks on a device.</p></li> 
+   <li><a href="call_history_w.htm">Call History</a> <p>Allows you to search, manage, and monitor the call history of a device.</p></li>
+   <li><a href="contact_w.htm">Contact</a> <p>Allows you to manage address books and contacts on a device.</p></li>
+   <li><a href="data_sync_w.htm">Data Synchronization</a> <p>Allows you to synchronize device data, such as contacts and calendar events, with 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
new file mode 100644 (file)
index 0000000..bdb6c10
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>FM Radio</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm">FM Radio Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html">FM Radio API for Mobile Web</a></li>          
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>FM Radio</h1>
+
+<p>Tizen enables you to access and control the FM radio on the device.</p>
+
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<p>The main features of the FM Radio API include:</p>
+<ul>
+<li>Managing the radio
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#manage">control the radio playback and change frequency</a>.</p></li>
+<li>Scanning available radio channels
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#scan">scan the available frequencies to find a channel</a>.</p></li>
+<li>Getting information about interruptions
+<p>The Tizen system has a feature to prevent interference between radio sound and other source of sound. The sound of the radio is interrupted in reaction to various events, such as an incoming call or notification sound. You can use the <span style="font-family: Courier New,Courier,monospace">oninterrupted</span> event handler to <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#get_info">detect the reason for the interruption</a>.</p></li>
+</ul>
+<p>The available operations depend on the current radio state. Radio states and transitions between them are illustrated in the following figure.</p>
+<p class="figure">Figure: FM radio states and transitions</p>
+<p style="text-align:center;"> <img alt="Badge" src="../../../images/fmradio-state.png" /></p>
+<p>To get information about current radio state, read the <span style="font-family: Courier New,Courier,monospace">state</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface. The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies possible values of the attribute:    </p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">READY</span>: Initial state, the radio is not playing and can be started or switched to scan.</li>
+<li><span style="font-family: Courier New,Courier,monospace">PLAYING</span>: The playback is ongoing.</li>
+<li><span style="font-family: Courier New,Courier,monospace">SCANNING</span>: The frequency scan is in progress, the radio is not playing.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/ham_w.htm b/org.tizen.guides/html/web/tizen/system/ham_w.htm
new file mode 100644 (file)
index 0000000..5fea378
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/ham_w.htm
@@ -0,0 +1,113 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Human Activity Monitor</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm">Human Activity Monitor Tutorial</a></li>
+                       <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>                   
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Human Activity Monitor</h1>
+
+<p>Tizen enables you to access the human activity data from various sensors on the device.</p>
+
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Human Activity Monitor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
+               <p>The Human Activity Monitor API is partly supported on the Tizen Emulators (only heart-rate monitoring).</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<p>The main features of the Human Activity Monitor API include:</p>
+<ul>
+<li>Retrieving data
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm#retrieve">collect monitor data</a>.</p></li>
+<li>Receiving notifications
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm#receive">detect changes in the monitor data</a>.</p></li>
+</ul>
+<p>The supported monitor types and their capabilities are listed in the following table.</p>
+
+       <table id="ham_capabilities"> 
+   <caption>
+     Table: Human activity monitors and capabilities
+   </caption>
+   <tbody>
+    <tr>
+     <th>Monitor</th>
+     <th>Capability</th>
+    </tr>
+    <tr>
+    <td>Pedometer and accumulative pedometer</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.pedometer</span> </p> </td>
+    </tr>
+    <tr>
+        <td>Wrist up</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.wrist_up</span> </p> </td>
+    </tr>
+    <tr>
+        <td>Heart rate monitor</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.heart_rate_monitor</span> </p> </td>
+    </tr>
+    <tr>
+        <td>GPS</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/location.batch</span> </p> </td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>When the pedometer, HRM, and GPS sensors are started, a change callback is invoked when data changes. Use the <span style="font-family: Courier New,Courier,monospace;">getHumanActivityData()</span> method to get current data.</p>
+<p>The GPS sensor provides both the current value and a short history of last recorded GPS positions.</p>
+<p>The accumulative pedometer sensor does not have to be started by your application as long as step counting is enabled by any other application or the system. Listener registered with the <tt class=" "> setAccumulativePedometerListener</tt><tt class=" ">()</tt> method is called when accumulative counters are changed.</p>
+<p>The wrist up sensor is notified when the relevant gesture is performed. The sensor must be enabled using the <span style="font-family: Courier New,Courier,monospace;">start()</span> method. An event listener invoked when the gesture is detected. This sensor does not provide any data.</p>
+
+ <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/power_w.htm b/org.tizen.guides/html/web/tizen/system/power_w.htm
new file mode 100644 (file)
index 0000000..178ef69
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/power_w.htm
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Power</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm">Power Tutorial</a></li>
+                       <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>                   
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Power</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>
+  
+      
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Power API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The Power API allows you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm#manage">request and release a minimum power state</a> for the screen and CPU. The request locks the screen to a minimum state and keeps the device bright and awake. For example, if you set the minimum power state to <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span>, the device display always remains in the <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span> level and never goes down to the <span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span> level.</p>
+  <p>The levels you can request are described in the following table.</p>
+  <table border="1" style="width: 100%">
+   <caption>
+     Table: Power state levels
+   </caption>
+   <tbody>
+    <tr>
+     <th>Level</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SCREEN_OFF</span></td>
+     <td>In this state, the screen is off. You cannot request this state, but it can be used in event handlers.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span></td>
+     <td>In this state, the screen is dimmed. When this state is requested, the device does not go to the <span style="font-family: Courier New,Courier,monospace">SCREEN_OFF</span> state automatically.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span></td>
+     <td>In this state, the screen uses the default brightness the user has configured for the device. When this state is requested, the device does not go to the <span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span> state automatically.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">CPU_AWAKE</span></td>
+     <td>In this state, the CPU is awake. When this state is requested, the device does not go to <span style="font-family: Courier New,Courier,monospace">SLEEP</span> state automatically.</td>
+    </tr>
+   </tbody>
+  </table>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">If you request a new power state without releasing the previous state, the Tizen platform follows the highest minimum state requested.</td>
+    </tr>
+   </tbody>
+  </table>
+     <p>The Power API allows you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm#brightness">get and set the screen brightness</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm#screen">switch the screen on and off</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/sensor_w.htm b/org.tizen.guides/html/web/tizen/system/sensor_w.htm
new file mode 100644 (file)
index 0000000..5edadda
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/sensor_w.htm
@@ -0,0 +1,113 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Sensor</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm">Sensor Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor API for Wearable Web</a></li>                 
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sensor</h1>
+
+
+<p>Tizen provides interfaces and methods to manage sensor data from various sensors on the device. The main purpose of a sensor is to provide a value for the relevant environment parameter.</p>
+
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Sensor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
+               <p>The Sensor API is supported on all Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<p>The main features of the Sensor API include:</p>
+<ul>
+<li>Managing sensors
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm#manage">enable the sensor, read sensor data, and disable the sensor</a>.</p></li>
+<li>Receiving notifications
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm#receive">receive notifications on sensor data changes</a>.</p></li>
+</ul>
+<p>The supported sensor types and their capabilities are listed in the following table.</p>
+
+  <table id="capability">
+   <caption>
+     Table: Sensors and capabilities
+   </caption>
+   <tbody>
+    <tr>
+     <th>Sensor</th>
+     <th>Capability</th>
+    </tr>
+    <tr>
+    <td>Light sensor</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.photometer</span> </p> </td>
+    </tr>
+    <tr>
+        <td>Magnetic sensor</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.magnetometer</span> </p> </td>
+    </tr>
+    <tr>
+        <td>Pressure sensor</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.barometer</span> </p> </td>
+    </tr>
+    <tr>
+        <td>Proximity sensor</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.proximity</span> </p> </td>
+    </tr>
+    <tr>
+        <td>Ultraviolet sensor</td>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.ultraviolet</span> </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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
new file mode 100644 (file)
index 0000000..e3cd5a9
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#System">System API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#System">System API for Wearable Web</a></li>                 
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System</h1>
+
+       <p>System features include managing devices and getting information about the system.</p>
+  <p>The main system features are:</p>
+  <ul>
+       <li><a href="ham_w.htm">Human Activity Monitor</a> <p>Enables you to access the human activity data from various sensors on the device.</p></li>
+    <li><a href="power_w.htm">Power</a> <p>Enables you to access the state of the device power resource.</p></li>
+       <li><a href="sensor_w.htm">Sensor</a> <p>Enables you to manage sensor data from various sensors on the device.</p></li>
+       <li><a href="system_info_w.htm">System Information</a> <p>Enables you to access and monitor various device details, such as battery level, available device storage, version number, model name, and the cellular network being used.</p></li>  
+       <li><a href="system_setting_w.htm">System Setting</a> <p>Enables you to access the device wallpaper settings, such as the home screen and lock screen wallpaper image, incoming call ringtone, and email notification tone.</p></li>
+    <li><a href="time_w.htm">Time</a><p>Enables you to use locale-specific calendar features by retrieving date and time information, and manage time features, such as the time zone.</p></li>        
+  </ul>
+
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<ul>
+        <li><a href="fm_radio_w.htm">FM Radio</a> <p>Enables you to access and control the device FM radio.</p></li>  
+       <li><a href="web_setting_w.htm">Web Setting</a> <p>Enables you to set Web view properties, such as setting Web view user agents and deleting Web view cookies.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/system_info_w.htm b/org.tizen.guides/html/web/tizen/system/system_info_w.htm
new file mode 100644 (file)
index 0000000..8e9177a
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/system_info_w.htm
@@ -0,0 +1,238 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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;
+ height: 162px;
+}
+.tab {
+ width: 170px;
+ height: 132px;
+}
+.rotate90 {
+ transform:rotate(90deg);
+ -moz-transform:rotate(90deg);
+ -webkit-transform:rotate(90deg);
+ -o-transform:rotate(90deg);
+ -ms-transform:rotate(90deg);
+}
+.rotate180 {
+ transform:rotate(180deg);
+ -moz-transform:rotate(180deg);
+ -webkit-transform:rotate(180deg);
+ -o-transform:rotate(180deg);
+ -ms-transform:rotate(180deg);
+}
+.rotate270 {
+ transform:rotate(270deg);
+ -moz-transform:rotate(270deg);
+ -webkit-transform:rotate(270deg);
+ -o-transform:rotate(270deg);
+ -ms-transform:rotate(270deg);
+}
+.arrow {
+ font-size:4em;
+ width: 1em;
+ vertical-align: middle;
+}
+tr.images td {
+ padding: 30px;
+}
+  </style>
+  
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm">System Information Tutorial</a></li>
+                       <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>                 
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System Information</h1>
+
+  <p>Tizen enables you to access the device&#39;s system properties (both hardware and capability). You can obtain various device and system details, such as the current battery level, amount of available storage, and state of the cellular network connection.</p>
+  
+      
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the System Information API include:</p>
+  <ul>
+   <li>Total memory check<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#memory">get the total amount of system memory</a> using the <span style="font-family: Courier New,Courier,monospace">getTotalMemory()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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).</p> </li>
+   <li>Available memory check<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#memory">get the available amount of system memory</a> using the <span style="font-family: Courier New,Courier,monospace">getAvailableMemory()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface.</p> </li>
+   <li>Property count check<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#state">get the number of system property information</a> using the <span style="font-family: Courier New,Courier,monospace">getCount()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface.</p> </li>
+   <li>Device capability retrieval <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#retrieve">get a device capability</a> using the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface.</p> </li>
+   <li>Property state checks <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#state">retrieve the current state of a specific device property</a> by using the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method.</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>For example, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#orientation">check the device orientation</a>. 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 widget has the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_setting">screen-orientation option</a> set to &quot;landscape&quot; or &quot;portrait&quot;, the screen is not rotated and the <span style="font-family: Courier New,Courier,monospace">window.screen.orientation</span> property does not change; however, the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> device orientation changes.</p>
+  <p>When a device is in its natural position, it is considered to be in the <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span> orientation (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDeviceOrientationStatus">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDeviceOrientationStatus">wearable</a> applications) (if the screen height is greater than its width) or the <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span> orientation (otherwise). When the device is rotated 90 degrees clockwise (rotated right), the orientation changes from <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span> to <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span>, from <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span> to <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_SECONDARY</span>, from <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_SECONDARY</span> to <span style="font-family: Courier New,Courier,monospace">PORTRAIT_SECONDARY</span>, and from <span style="font-family: Courier New,Courier,monospace">PORTRAIT_SECONDARY</span> back to <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span>.</p>
+  <table style="text-align: center">
+  <caption>
+     Table: Device orientations 
+   </caption>
+    <tbody><tr>
+      <th>LANDSCAPE_PRIMARY</th>
+      <th>PORTRAIT_PRIMARY</th>
+      <th>LANDSCAPE_SECONDARY</th>
+      <th>PORTRAIT_SECONDARY</th>
+    </tr>
+    <tr class="images">
+      <td><div class="rotate270"><img class="phone" src="../../../images/emulator-screenshot.png"/></div></td>
+      <td style="background-color: #CFC"><div><img class="phone" src="../../../images/emulator-screenshot.png"/></div></td>
+      <td><div class="rotate90"><img class="phone" src="../../../images/emulator-screenshot.png"/></div></td>
+      <td><div class="rotate180"><img class="phone" src="../../../images/emulator-screenshot.png"/></div></td>
+    </tr>
+    <tr class="images">
+      <td style="background-color: #CFC"><div><img class="tab" src="../../../images/emulator-screenshot.png"/></div></td>
+      <td><div class="rotate90"><img class="tab" src="../../../images/emulator-screenshot.png"/></div></td>
+      <td><div class="rotate180"><img class="tab" src="../../../images/emulator-screenshot.png"/></div></td>
+      <td><div class="rotate270"><img class="tab" src="../../../images/emulator-screenshot.png"/></div></td>
+    </tr>
+  </tbody></table>
+   </li>
+
+   <li>Property state updates <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#receive">receive state updates</a> when a change occurs in a specific property.</p> <p>The <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method registers an event listener for a specific property, and returns the subscription identifier for the listener. You can use the <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertySuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">wearable</a> applications) to define the event handler for receiving the change notification.</p> </li>
+  </ul>
+  <p>The system properties are defines as subtypes of the <span style="font-family: Courier New,Courier,monospace">SystemInfoProperty</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoProperty">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoProperty">wearable</a> applications). The following table lists the available subtypes, and the related <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertyId</span> type (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertyId">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertyId">wearable</a> applications) values.</p>
+  <table border="1" style="width: 100%" id="property">
+   <caption>
+     Table: Available properties
+   </caption>
+   <tbody>
+    <tr>
+     <th>Property</th>
+     <th>PropertyID</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoBattery</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoBattery">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoBattery">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">BATTERY</span></td>
+     <td>Provides information about the battery level and charging status. With this property, you can, for example, determine whether the application can be launched or whether the user needs to be warned about the level of power available for the device.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoCpu</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoCpu">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoCpu">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">CPU</span></td>
+     <td>Provides information about the CPU load, allowing you to determine the efficiency of an application.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoStorage</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoStorage">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoStorage">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">STORAGE</span></td>
+     <td>Provides information about the currently connected data storage devices and their details, such as available capacity. With this property, you can, for example, allow the user to select which available storage they want to use, and determine whether the storage in question has enough free space for the actions the user wants to perform.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoDisplay</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDisplay">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDisplay">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">DISPLAY</span></td>
+     <td>Provides information about the device display, allowing you, for example, to determine the resolution of the device to layout your application optimally on runtime.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoNetwork</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoNetwork">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoNetwork">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">NETWORK</span></td>
+     <td>Provides information about the data network. With this property, you can, for example, determine whether the network type provides adequate connection speeds for the actions the user wants to perform.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoWifiNetwork</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoWifiNetwork">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoWifiNetwork">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">WIFI_NETWORK</span></td>
+     <td>Provides information about the Wi-Fi network. With this property, you can, for example, determine whether a Wi-Fi network is available and what its signal strength or SSID is.
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">The SSID of a Wi-Fi network represents the public name of the network that is specified by the manufacturer. The SSID identifies a network by using a 32-character long alphanumeric key. The key ensures that only devices using the SSID can communicate with each other.</td>
+        </tr>
+       </tbody>
+      </table> </td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoCellularNetwork</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoCellularNetwork">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoCellularNetwork">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">CELLULAR_NETWORK</span></td>
+     <td>Provides information about the cellular network. With this property, you can, for example, retrieve the network details that allow your application to access the network.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoSIM</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoSIM">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoSIM">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">SIM</span></td>
+     <td>Provides information about the device SIM card, such as the operator name and the mobile country code (MCC).</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoDeviceOrientation</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDeviceOrientation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDeviceOrientation">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">DEVICE_ORIENTATION</span></td>
+     <td>Provides information about the current device display orientation allowing you, for example, to determine when the orientation changes to layout your application optimally on runtime.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoBuild</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoBuild">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoBuild">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">BUILD</span></td>
+     <td>Provides information about the build, such as the model name and manufacturer.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoLocale</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoLocale">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoLocale">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">LOCALE</span></td>
+     <td>Provides information about the locale, such as the currently set language. </td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoPeripheral</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPeripheral">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPeripheral">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">PERIPHERAL</span></td>
+     <td>Provides information about the video output status.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoMemory</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoMemory">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoMemory">wearable</a> applications)</td>
+     <td><span style="font-family: Courier New,Courier,monospace">MEMORY</span></td>
+     <td>Provides information about the memory state of the device.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/system_setting_w.htm b/org.tizen.guides/html/web/tizen/system/system_setting_w.htm
new file mode 100644 (file)
index 0000000..fa6213b
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/system_setting_w.htm
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Setting</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm">System Setting Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">System Setting API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">System Setting API for Wearable Web</a></li>                  
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System Setting</h1>
+
+
+  <p>Tizen enables you to access the device&#39;s settings for the home and lock screen wallpaper, the incoming call ringtone, and email notification tone.</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The System Setting API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+               <p>The System Setting API is supported on the Tizen mobile Emulator and partly supported on the Tizen wearable Emulator (only the home screen and incoming call features).</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The following table lists the supported system setting properties.</p>
+  <table border="1" style="width: 100%" id="property2">
+   <caption>
+     Table: Available properties
+   </caption>
+   <tbody>
+    <tr>
+     <th>Property</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">HOME_SCREEN</span></td>
+     <td>Provides information about the home screen image of the device.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">LOCK_SCREEN</span></td>
+     <td>Provides information about the lock screen image of the device.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">INCOMING_CALL</span></td>
+     <td>Provides information about the incoming call ringtone sound of the device.</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EMAIL</span></td>
+     <td>Provides information about the notification email tone sound of the device.</td>
+    </tr>
+   </tbody>
+  </table>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm#wall">change the home and lock screen images</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm#tone">modify the incoming call ringtone and notification email tone sound</a> by using the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemSettingManager</span> 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 get the information about them by using the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/time_w.htm b/org.tizen.guides/html/web/tizen/system/time_w.htm
new file mode 100644 (file)
index 0000000..94c4487
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/time_w.htm
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+               <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm">Time Tutorial</a></li> 
+               <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>             
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ 
+ <h1>Time</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 <span style="font-family: Courier New,Courier,monospace">Date</span> object.</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>
+  
+      
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Time API include:</p> 
+  <ul> 
+   <li>Managing the current date, time, and time zone <p>With the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a> applications), you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm#Retrieving_Date">retrieve the current date and time</a>. You can also get the current time zone and the number of available time zones and determine if 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> 
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"> 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></td> 
+      </tr> 
+     </tbody> 
+    </table> </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="../../../../../org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm#Retrieving_Local_Date">retrieve the currently used formats</a>. </p> <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> </li> 
+   <li>Performing date- and time-related calculations <p>With the <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeDuration">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeDuration">wearable</a> applications), you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm#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>With the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm#Monitoring_Changes">retrieve notifications on time changes</a> performed by the user.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/web_setting_w.htm b/org.tizen.guides/html/web/tizen/system/web_setting_w.htm
new file mode 100644 (file)
index 0000000..6f6601d
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/system/web_setting_w.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Setting</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm">Web Setting Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html">Web Setting API for Mobile Web</a></li>            
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web Setting</h1>
+
+
+  <p>Tizen enables you to set Web view properties.</p>
+  
+     <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <p>The main features of the Web Setting API include:</p>
+  <ul>
+   <li>Setting user agents<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm#set">set a custom user agent string</a> for the running Web application.</p></li>
+    <li>Deleting cookies<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm#delete">delete all cookies</a> set for the running 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
new file mode 100644 (file)
index 0000000..cfea32d
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
@@ -0,0 +1,1023 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#exception">Handling Exceptions</a></li>
+                       <li><a href="#generic">Handling Generic Events</a></li>
+                       <li><a href="#coordinates">Managing Location Coordinates</a></li>
+                       <li><a href="#sorting">Sorting and Filtering Data</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen Tutorial</a></li>  
+                       <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>                   
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Tizen</h1> 
+  <p>Tizen features include handling events and organizing data.</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main Tizen features are:</p> 
+  <ul> 
+       <li><a href="#exception">Handling exceptions</a> <p>Enables you to handle error situations in your application.</p></li>
+       <li><a href="#generic">Handling generic events</a> <p>Enables you to handle the results of asynchronous operations.</p></li>
+       <li><a href="#generic">Managing location coordinates</a> <p>Enables you to incorporate location information into your application.</p></li>
+       <li><a href="#sorting">Sorting and filtering data</a> <p>Provides a set of basic definitions and interfaces that are used in the Tizen Web Device API.</p></li>   
+  </ul> 
+
+  <h2 id="exception" name="exception">Handling Exceptions</h2>  
+  <p>You can enable the Tizen APIs to throw errors synchronously with the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a> applications) of the <span style="font-family: Courier New,Courier,monospace">Tizen</span> API (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), or return errors in the error event handlers of asynchronous methods with the <span style="font-family: Courier New,Courier,monospace">WebAPIError</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a> applications).</p>
+  <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace">code</span> attribute of the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface to distinguish errors, because the code of the exception object is set to <span style="font-family: Courier New,Courier,monospace">0</span> in case of new error types that are not defined in <a href="http://www.w3.org/TR/dom/#domexception" target="_blank">DOMException</a>.</td>
+      </tr>
+     </tbody>
+  </table>
+  
+  <h2 id="generic" name="generic">Handling Generic Events</h2> 
+  <p>Generic event handling features allow you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_handlers">handle the results of asynchronous operations</a>. The operations can implemented using the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a> applications) event handlers of the <span style="font-family: Courier New,Courier,monospace">Tizen</span> API.</p>
+    
+  <h2 id="coordinates" name="coordinates">Managing Location Coordinates</h2>
+
+  <p>You can use the <span style="font-family: Courier New,Courier,monospace">SimpleCoordinates</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SimpleCoordinates">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SimpleCoordinates">wearable</a> applications) to incorporate location information into your application. For example, you can simply use it to define coordinates:</p> <pre class="prettyprint">var coordinates = new tizen.SimpleCoordinates(37.5665, 126.9779);</pre> <p>You can also define a latitude and longitude for a <a href="../social/calendar_w.htm">calendar event</a>:</p> <pre class="prettyprint">var event = new tizen.CalendarEvent(
+{
+&nbsp;&nbsp;&nbsp;description:&quot;hospital&quot;, 
+&nbsp;&nbsp;&nbsp;geolocation: new tizen.SimpleCoordinates(37.4889, 127.0876),
+&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 11, 1, 14, 0), 
+&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(2, &quot;HOURS&quot;)
+});</pre>
+  
+  <h2 id="sorting" name="sorting">Sorting and Filtering Data</h2> 
+  <p>The <span style="font-family: Courier New,Courier,monospace">Tizen</span> API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains 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> 
+  <p>The main features of the Tizen API include:</p> 
+  <ul> 
+   <li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <span style="font-family: Courier New,Courier,monospace">abstract filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a> applications):</p>
+    <ul> 
+     <li><span style="font-family: Courier New,Courier,monospace">Attribute filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a> applications)<p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> type definition (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a> applications).</p> </li> 
+     <li><span style="font-family: Courier New,Courier,monospace">Attribute range</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a> applications)<p>Matches objects containing an attribute whose values are within a particular range.</p> </li> 
+     <li><span style="font-family: Courier New,Courier,monospace">Composite filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a> applications)<p>Combines several filters into a set.</p></li> 
+    </ul>
+<p>You can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> to search for specific data and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, <a href="#calendar">Calendar</a>, <a href="#call">Call History</a>, <a href="#contact">Contact</a>, <a href="#content">Content</a>, and <a href="#messaging">Messaging</a> query methods each have their own sets of supported filter attributes.</p> </li> 
+   <li>Sorting <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the results of queried data</a> using the <span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a> applications). The following sorting modes are supported:</p> 
+    <ul> 
+     <li> <p><span style="font-family: Courier New,Courier,monospace">&quot;ASC&quot;</span>: Ascending sorting order</p> </li> 
+     <li> <p><span style="font-family: Courier New,Courier,monospace">&quot;DESC&quot;</span>: Descending sorting order</p> </li> 
+    </ul>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>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> <p>For example, if the <span style="font-family: Courier New,Courier,monospace">ContentType</span> enum (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a> applications) is the type attribute and the sorting order is <span style="font-family: Courier New,Courier,monospace">&quot;DESC&quot;</span>, 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></td> 
+      </tr> 
+     </tbody> 
+    </table></li> </ul>
+  <h3 id="calendar" name="calendar">Calendar Filter Attributes</h3> 
+  <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> 
+  <table> 
+   <caption>
+     Table: Calendar filter attributes 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id.uid</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">description</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">summary</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isAllDay </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isDetached</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">startDate</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">location</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizer</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">visibility</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">status</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">priority</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">categories</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">dueDate </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">completedDate </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">progress </span></p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">endDate</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">availability </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastModificationDate</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">alarms</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No*</p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">attendees</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No* </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">recurrenceRule</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No* </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>* The attribute filter is only supported with the <span style="font-family: Courier New,Courier,monospace">EXISTS</span> flag. </p> 
+    <h3 id="call" name="call">Call History Filter Attributes</h3> 
+  <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> 
+  <table> 
+   <caption>
+     Table: Call History filter attributes 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">uid</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">features</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">remoteParties.remoteParty</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">remoteParties.personId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">startTime</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">duration</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">direction</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+    <h3 id="contact" name="contact">Contact Filter Attributes</h3> 
+  <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> 
+  <table> 
+   <caption>
+     Table: Contact filter attributes 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">personId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastUpdated</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isFavorite</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">birthday</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">photoURI</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.prefix</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.suffix</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.firstName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.middleName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.lastName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.nicknames</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.phoneticFirstName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.phoneticLastName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.displayName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.country</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.region</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.city</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.streetAddress</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.additionalInformation</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.postalCode</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.isDefault</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.types</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.number</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.isDefault</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.types</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.email</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.isDefault</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.types</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">anniversaries.date</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">anniversaries.label</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.name</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.department</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.title</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.role</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.logoUri</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">urls.url</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">urls.type</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">groupIds</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </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> 
+  <table> 
+   <caption>
+     Table: Person filter attributes 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">displayName</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contactCount</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasPhoneNumber</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasEmail</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isFavorite</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">photoURI</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">displayContactId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+    <h3 id="content" name="content">Content Filter Attributes</h3> 
+  <p>The following table lists the filter types you can use with specific content attributes in the methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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).</p> 
+  <table> 
+   <caption>
+     Table: Content filter attributes 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">mimeType</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">title </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contentURI</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">thumbnailURIs</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">releaseDate</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">modifedDate</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">size</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">description</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">rating</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">album</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">genres</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">artists</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">composers</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lyrics</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">copyright</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bitrate</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">trackNumber</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">duration</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">orientation</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+    <h3 id="messaging" name="messaging">Messaging Filter Attributes</h3> 
+  <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 <span style="font-family: Courier New,Courier,monospace;">findMessage()</span> method.</p> 
+  <table> 
+   <caption>
+     Table: Filter attributes for finding messages 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">serviceId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">conversationId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">folderId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">timestamp</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">from</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">to</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">cc</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bcc</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">body.plainBody</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isRead</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasAttachment</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isHighPriority</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">subject</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isResponseTo </span></p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">messageStatus</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">attachments</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findConversations()</span> method.</p> 
+  <table> 
+   <caption>
+     Table: Filter attributes for finding conversations 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">timestamp</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">messageCount</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">unreadMessages </span></p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">preview </span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">subject</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isRead</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">from</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">to</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">cc</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bcc</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastMessageId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findFolders()</span> method.</p> 
+  <table> 
+   <caption>
+     Table: Filter attributes for finding message folders 
+   </caption> 
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="25%" /> 
+    <col width="25%" /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th>Attribute</th> 
+     <th>Attribute filter supported</th> 
+     <th>Attribute range filter supported</th> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">parentId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">serviceId</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contentType</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">path </span></p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+    <tr> 
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">synchronizable</span> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+     <td rowspan="1" colspan="1"> <p> No </p> </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">FULLSTRING</span> value of the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> enumerator (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a> applications) is not supported and returns an error callback.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/ui/badge_w.htm b/org.tizen.guides/html/web/tizen/ui/badge_w.htm
new file mode 100644 (file)
index 0000000..60c296a
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/ui/badge_w.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Badge</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm">Badge Tutorial</a></li>                 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html">Badge API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">Badge API for Wearable Web</a></li>                   
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Badge</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>
+  
+      
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p class="figure">Figure: Badge</p>
+  <p style="text-align:center;"> <img alt="Badge" src="../../../images/badge.png" /></p>
+  <p>The main features of the Badge API include:</p>
+  <ul>
+  <li>Managing badges
+  <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm#manage">set and get the badge number</a>.</p></li>
+  <li>Listening to badge changes
+  <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm#receive">receive notifications on badge changes</a> to display and react to badges.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/ui/noti_w.htm b/org.tizen.guides/html/web/tizen/ui/noti_w.htm
new file mode 100644 (file)
index 0000000..1d7b6c2
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/ui/noti_w.htm
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Notification</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm">Notification Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>                 
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Notification</h1> 
+
+  <p>Tizen enables you to provide notifications about application events.</p>
+  
+       <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The main features of the Notification API include:</p>
+  <ul>
+   <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm#create">Creating simple notifications</a></li>
+  <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm#progress">Creating progress notifications</a></li>
+   <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm#manage">Managing notifications</a></li>
+  </ul>
+  <p>To display a notification, you need to create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#Notification">Notification</a> object, or its subtype. </p>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Currently, only the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">StatusNotification</a> subtype is supported. This subtype displays notifications in the status bar.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm b/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm
new file mode 100644 (file)
index 0000000..60fb793
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#User Interface">User Interface API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#User Interface">User Interface API for Wearable Web</a></li>                 
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>User Interface</h1> 
+  <p>User interface (UI) features include managing badges and notifications on the device screen.</p>
+  <p>The main UI features are:</p>
+     <ul>
+        <li><a href="badge_w.htm">Badge</a> <p>Allows you to create and update badges on the Home screen.</p></li>
+     </ul>
+
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<ul>
+     <li><a href="noti_w.htm">Notification</a> <p>Allows you to create and display different types of notifications.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm b/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm
new file mode 100644 (file)
index 0000000..a125330
--- /dev/null
+++ b/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm
@@ -0,0 +1,219 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 UI Framework (UIFW)</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#template">UI Service Template</a></li>
+            <li><a href="#features">UI Framework Features</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+               <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Tizen Web UI Framework (UIFW) Tutorial</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Tizen Web UI Framework API for Mobile Web</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Web UI Framework API for Wearable Web</a></li>          
+               </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web UI Framework (UIFW)</h1>
+
+       <p>Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI control, such as a button or slider, which you can interact with and manipulate.</p>
+
+       <p>The Tizen UI components creation and features include:</p>
+  <ul>
+   <li><a href="#template">UI Service Template</a> <p>UI components are created using the Web UI service template, which works on a Web browser running on the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine.</p> </li>
+   <li><a href="#features">UI Framework Features</a> <p>General features of Web UI service components.</p> </li>
+  </ul>
+
+  <p>For more information on the component details and the Tizen Advanced UI (TAU), see UI Component Reference (for <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm">wearable</a> applications). 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 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>With TAU, you can take advantage of the following benefits in your code:</p>
+<ul>
+       <li>TAU is a standalone library, so no additional libraries are needed.</li>
+       <li>TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.</li>
+       <li>TAU has been written with speed in mind, and all the code is tweaked for maximum performance.</li>
+       <li>Applications can be built to dramatically improve startup performance.</li>
+       <li>TAU is ECMAScript5- and HTML5-compliant.</li>
+       <li>As a large and open API, TAU methods and core functions (event utility functions) are available and not hidden.</li>
+       <li>TAU is customizable and easy to extend (to create new UI components).</li>
+       <li>TAU is optimized for wearable, mobile, and TV devices.</li>
+       <li>TAU supports various profiles (mobile, wearable, and TV).</li>
+</ul>
+
+  <h2 id="template" name="template">UI Service Template</h2>
+  <p>You can use the Web UI service by importing the Tizen Advanced UI (TAU) library by <a href="#tags">declaring the applicable script in the HTML header</a>.</p>
+  <p>The following example shows a UI service template:</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, initial-scale=1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Page Title&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;../lib/tau/mobile/js/tau.js&quot;false&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;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;my.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;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>To use the Web UI service template:</p>
+  <ol>
+   <li><a href="#tags">Implement the HTML content.</a></li>
+   <li><a href="#scaling">Scale the UI.</a></li>
+   <li><a href="#js">Run the JavaScript API.</a></li>
+  </ol>
+
+    <h3 id="tags" name="tags">Implementing HTML Content</h3>
+  <p>The Web UI service template structure begins with the HTML header:</p>
+  <pre class="prettyprint lang-html">
+&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
+&lt;title&gt;Page Title&lt;/title&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;../lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;../lib/tau/mobile/theme/default/tau.css&quot;&gt;
+&lt;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;my.css&quot;/&gt;
+</pre>
+  <p>In the header, use the following default elements:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;title&gt;</span> <p>The <span style="font-family: Courier New,Courier,monospace">&lt;title&gt;</span> element is used to set the application title.</p></li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;script&gt; and &lt;style&gt;</span> <p>The <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> 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>
+    <ul>
+     <li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the Web UI service.</p></li>
+     <li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
+    </ul>
+   </li>
+  </ul>
+  <p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
+  <p>The body section of the HTML file contains 1 or more pages, where each page has a header, content, and a footer.</p>
+
+  <h3 id="scaling" name="scaling">Scaling the UI</h3>
+  <p>The Tizen Advanced UI (TAU) -based template provides 2 scaling methods: device-width and fixed-width.</p>
+  <ul>
+   <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 <span style="font-family: Courier New,Courier,monospace">device-width</span>, 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 apps, 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;</pre>
+   </li>
+   <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 <span style="font-family: Courier New,Courier,monospace">device-width</span> as follows:</p>
+   <pre class="prettyprint lang-html">&lt;meta name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
+   <p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace">&lt;meta name=&quot;viewport&quot;&gt;</span> element:</p>
+   <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+   </li>
+  </ul>
+
+   <h3 id="js" name="js">Running JavaScript API</h3>
+  <p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> 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;
+</pre>
+
+  <h2 id="features" name="features"> UI Framework Features</h2>
+  <p>The Tizen Advanced UI (TAU) provides the following features:</p>
+  <ul>
+  <li><a href="#accessibility">Accessibility</a> <p>Accessibility enables you to use the text-to-speech functionality with the Tizen screen reader.</p> </li>
+  <li><a href="#localization">Localization</a> <p>Localization enables you to create locale-specific applications.</p> </li>
+  </ul>
+
+  <h3 id="accessibility" name="accessibility">Accessibility</h3>
+  <p>The <a href="http://www.w3.org/TR/wai-aria/" target="_blank">WAI-ARIA</a> (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to Web content in Web applications. The WAI-ARIA is composed of a role, states, and property, and its current version is 1.0. The Tizen screen reader sends the screen information to the user with the text-to-speech technology and WAI-ARIA data.</p>
+  <p>You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.</p>
+
+  <p>The Tizen screen reader reads HTML elements in the following order:</p>
+<ol>
+<li>Content
+<p>The actual element content is read first.</p></li>
+<li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
+</li>
+</ol>
+
+<p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
+<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;</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;</pre></li>
+</ul>
+
+<p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
+<ul>
+<li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, 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>
+<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&gt;</pre></li>
+<li>If the <span style="font-family: Courier New,Courier,monospace">role</span> 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>
+<pre class="prettyprint">&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;</pre></li>
+<li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
+<pre class="prettyprint">&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&gt;</pre>
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">alt</span> attribute need not be defined for the virtual grid component.
+     <p>The accessibility feature is supported since Tizen 2.1.</p></td>
+    </tr>
+   </tbody>
+  </table>
+
+  <h3 id="localization" name="localization">Localization</h3>
+  <p>The Tizen Advanced UI (TAU) components support localization. For example, the <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm">date-time picker</a> component (in mobile applications only) shows the time depending on the current locale. When you define a language in the <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element by adding a <span style="font-family: Courier New,Courier,monospace;">lang</span> attribute, the defined language and locale are selected. For example, the date time picker component shows the time depending on the current locale:</p>
+  <pre class="prettyprint">&lt;html lang=&quot;fr-FR&quot;&gt;
+</pre>
+  <p>If the <span style="font-family: Courier New,Courier,monospace;">lang</span> attribute is not given in the <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element, the browser&#39;s current locale, which is detected by reading the <span style="font-family: Courier New,Courier,monospace;">window.navigator.language</span> value, is used by default. The localization feature is powered by the Globalize library, so you can use any APIs in Globalize.</p>  
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..7fe0ce1
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Communication</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm">Communication Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">Communication API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">Communication API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Communication</h1>
+  <p>Communication features include information on how your application can send data to networks and other applications, and receive data back from them.</p>
+  <p>The main communication features are:</p>
+  <ul>
+       <li><a href="web_messaging_w.htm">HTML5 Web Messaging</a> <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> <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> <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>
+  </ul>
+
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+       <li><a href="server_sent_w.htm">Server-Sent Events</a> <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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..91c651c
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Server-Sent Events</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm">Server-Sent Events Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Server-Sent Events</h1>
+ 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+<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>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.</p>
+<p>The repeat period of the server request is determined by the <span style="font-family: Courier New,Courier,monospace">retry</span> 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>
+
+<p>The main features of the Server-Sent Events API include:</p>
+<ul>
+<li>Creating an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> instance
+<p>The <span style="font-family: Courier New,Courier,monospace">EventSource</span> interface is the core object of server-sent event implementation. <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm#Triggering">Creating a new EventSource instance</a> triggers repeated server request automatically, and allows you to use the receiving data event. When creating the <span style="font-family: Courier New,Courier,monospace">EventSource</span> instance, you must use the URL of the server page sending the event stream as a parameter.</p></li>
+<li>Receiving server push data
+<p>After triggering the server requests, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm#Receiving">receive push data from the server</a> by implementing the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onmessage" target="_blank">message</a> event.</p>
+<p>The received event stream data is parsed as a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">MessageEvent</a> object, to make the target data easily accessible. </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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..a7fb886
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Web Messaging</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#cross">Cross-document Messaging</a></li>
+                       <li><a href="#channel">Channel Messaging</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm">HTML5 Web Messaging Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">HTML5 Web Messaging API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">HTML5 Web Messaging API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Web Messaging</h1>
+
+<p>Web messaging is used to deliver messages between documents. Web messaging allows <a href="../security/cors_w.htm">cross-origin resource sharing (CORS)</a>.</p>
+
+<p>With the Web Messaging API, messages are sent and received:</p>
+
+<ul>
+<li>Using the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">MessageEvent</a> object</li>
+<li>Asynchronously</li>
+<li>Within 1 domain or between different domains</li>
+</ul>
+
+<h2 name="cross" id="cross">Cross-document Messaging</h2>
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm#Cross-document_Messaging">send and receive data between more than 2 Web pages</a>. Because the <a href="http://www.w3.org/2001/tag/dj9/scriptorigin.html" target="_blank">Same Origin Policy</a> is not applied for cross-document messaging, communication between other domains is also possible.</p>
+<p>Send the message from the sending page using the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#posting-messages" target="_blank">receiving page window object</a>. To receive the page, the receiving page window object must be registered to receive messages.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method supports the following parameters:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">message</span>: Message to be sent.</li>
+<li><span style="font-family: Courier New,Courier,monospace">targetOrigin</span>: Domain receiving the message. If a certain domain cannot be defined, use the wildcard (&#39;*&#39;).</li>
+<li><span style="font-family: Courier New,Courier,monospace">transfer</span> (optional): List of transferable objects.</li>
+</ul>
+
+<h2 name="channel" id="channel">Channel Messaging</h2>
+<p>With channel messaging, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm#Channel_Messaging">send and receive messages through the port</a> of the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">MessageChannel</span> instance broadcasts message sending and receiving, and has 2 properties: <span style="font-family: Courier New,Courier,monospace">port1</span> and <span style="font-family: Courier New,Courier,monospace">port2</span>. Each port is used to send and receive messages, and a message that is sent from one port with the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method is received by the other through the <span style="font-family: Courier New,Courier,monospace">message</span> event.</p>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
new file mode 100644 (file)
index 0000000..294af9c
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>WebSocket</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm">WebSocket Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<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>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>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>
+
+<p>The main features of the WebSocket API include:</p>
+<ul>
+<li>Connecting to a server
+<p>To <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm#Connecting_Socket_Server">connect to a server</a>, you must create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface with the socket server URL as a mandatory parameter. The <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#parsing-websocket-urls" target="_blank">
+URL format has some restrictions</a>, for example, it must use the <span style="font-family: Courier New,Courier,monospace">ws</span> or <span style="font-family: Courier New,Courier,monospace">wss</span> protocol. If the URL is not valid or uses a wrong protocol, a syntax error occurs.</p>
+<p>If the connection with the socket server succeeds, the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value is set to <span style="font-family: Courier New,Courier,monospace">1</span>. If the connection fails the attribute value is set to <span style="font-family: Courier New,Courier,monospace">3</span>, and the HTTP 503 error is returned.</p>
+<p>When the connection is no longer needed, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm#Closing_Socket_Connection">close the connection</a> with the  <span style="font-family: Courier New,Courier,monospace">close()</span> method.</p>
+</li>
+<li>Sending data
+<p>By using the <span style="font-family: Courier New,Courier,monospace">send()</span> method of the<span style="font-family: Courier New,Courier,monospace">WebSocket</span> interface, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm#Sending_Data">send data to the server</a>. The data is transmitted using the established connection. If the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value is <span style="font-family: Courier New,Courier,monospace">CONNECTING</span>, the method throws an <span style="font-family: Courier New,Courier,monospace">InvalidStateError</span> exception.</p>
+</li>
+<li>Receiving data
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm#Receiving_Data">receive data from the server</a> through the <span style="font-family: Courier New,Courier,monospace">message</span> event.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
new file mode 100644 (file)
index 0000000..ec80f22
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
@@ -0,0 +1,130 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>XMLHttpRequest Level 1 and 2</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#mobile">XMLHttpRequest Level 2</a></li>
+                       <li><a href="#wearable">XMLHttpRequest Level 1</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>XMLHttpRequest Level 1 and 2</h1>
+
+<p>You can send requests to and receive them from a Web server using JavaScript.</p>
+
+<h2 name="mobile" id="mobile">XMLHttpRequest Level 2 in Mobile Applications</h2>
+
+<p>You can send HTTP (or HTTPS) <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#request" target="_blank">requests</a> to and receive <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#response" target="_blank">responses</a> from a Web server using JavaScript. The API is based on the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/" target="_blank">HTML5</a> specification and the Ajax mechanism widely used in the Web environment, and it has been enhanced from the older <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/" target="_blank">XMLHttpRequest</a> API.</p>
+
+<p>The main features of the XMLHttpRequest Level 2 API include:</p>
+<ul>
+<li>Supporting cross-origin request sharing (CORS)
+<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the XMLHttpRequest Level 2 API supports <a href="../security/cors_w.htm">CORS</a>.</p>
+<p>To <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <span style="font-family: Courier New,Courier,monospace">open()</span> method. Set the request URL method parameter as the cross-origin URL.</p>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">For the cross-origin request to work, <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.</td>
+      </tr>
+     </tbody>
+    </table>
+</li>
+<li>Supporting various response types
+<p>The older XMLHttpRequest API only supported the <span style="font-family: Courier New,Courier,monospace">text&#47;html </span>format for sending requests. The XMLHttpRequest Level 2 API supports various response types, such as <span style="font-family: Courier New,Courier,monospace">arraybuffer</span>, <span style="font-family: Courier New,Courier,monospace">blob</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">json</span>, and <span style="font-family: Courier New,Courier,monospace">text</span>.
+</p>
+</li>
+<li>Supporting form data
+<p>The newly supported <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#interface-formdata" target="_blank">FormData</a> interface makes it possible to upload data from an entire form. For more information, see <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Uploading_Files">Uploading Files with Ajax</a>.</p>
+</li>
+<li>Receiving a more fragmented response state on the request progress status
+<p>The XMLHttpRequst Level 2 API provides more <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#event-handlers" target="_blank">event handlers</a> for <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Handling_Requests">tracking the request status and response</a>. In addition, the <span style="font-family: Courier New,Courier,monospace">onprogress</span> event handler allows you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Tracking_Download">check the send status of a large capacity file download</a>.</p>
+</li>
+</ul>
+
+<h2 name="wearable" id="wearable">XMLHttpRequest Level 1 in Wearable Applications</h2>
+<p>You can send HTTP (or HTTPS) <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#request" target="_blank">requests</a> to and receive <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#response" target="_blank">responses</a> from a Web server using JavaScript. The API is based on the <a href="http://www.w3.org/TR/2014/CR-html5-20140429/" target="_blank">HTML5</a> specification and the Ajax mechanism widely used in the Web environment, and it has been enhanced from the older <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/" target="_blank">XMLHttpRequest</a> API.</p>
+
+<p>The main features of the XMLHttpRequest Level 1 API include:</p>
+<ul>
+<li>Supporting cross-origin request sharing (CORS)
+<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the XMLHttpRequest Level 1 API supports <a href="../security/cors_w.htm">CORS</a>.</p>
+<p>To <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <span style="font-family: Courier New,Courier,monospace">open()</span> method. Set the request URL method parameter as the cross-origin URL.</p>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">For the cross-origin request to work, <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.</td>
+     </tr>
+     </tbody>
+    </table>
+</li>
+<li>Supporting various response types
+<p>The older XMLHttpRequest API only supported the <span style="font-family: Courier New,Courier,monospace">text&#47;html </span>format for sending requests. The XMLHttpRequest Level 1 API supports various response types, such as <span style="font-family: Courier New,Courier,monospace">arraybuffer</span>, <span style="font-family: Courier New,Courier,monospace">blob</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">json</span>, and <span style="font-family: Courier New,Courier,monospace">text</span>.
+</p>
+</li>
+<li>Supporting form data
+<p>The newly supported <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#interface-formdata" target="_blank">FormData</a> interface makes it possible to upload data from an entire form. For more information, see <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Uploading_Files">Uploading Files with Ajax</a>.</p>
+</li>
+<li>Receiving a more fragmented response state on the request progress status
+<p>The XMLHttpRequst Level 1 API provides more <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handlers</a> for <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Handling_Requests">tracking the request status and response</a>. In addition, the <span style="font-family: Courier New,Courier,monospace">onprogress</span> event handler allows you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm#Tracking_Download">check the send status of a large capacity file download</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/device/battery_w.htm b/org.tizen.guides/html/web/w3c/device/battery_w.htm
new file mode 100644 (file)
index 0000000..e69d6d5
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/battery_w.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm">Battery Status Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#battery">Battery Status API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#battery">Battery Status API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Battery Status</h1>
+
+  <p>You can programmatically determine the battery status of the device on which your application is running.</p>
+<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 very 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>
+  <p>The main features of the Battery Status API include:</p>
+  <ul>
+   <li>Retrieving the battery status
+   <p>You can use the <span style="font-family: Courier New,Courier,monospace">charging</span>, <span style="font-family: Courier New,Courier,monospace">chargingTime</span>, <span style="font-family: Courier New,Courier,monospace">dischargingTime</span>, and <span style="font-family: Courier New,Courier,monospace">level</span> attributes of the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm#retrieve">check the battery status information</a>, such as battery charging status, remaining charging time (until fully charged), remaining battery life (until battery is empty), and battery level.</p></li>
+
+   <li>Detecting battery status changes
+<p>You can set event listeners with the <span style="font-family: Courier New,Courier,monospace">BatteryManager</span> interface attributes to <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm#detect">detect changes in the battery status</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..2ac54af
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Browser state</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm">HTML5 Browser state Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#browserstate">HTML5 Browser state API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Browser state</h1>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm#Retrieving_Browser_State">access information about the network connection state of the browser</a>. </p>
+<p>The <span style="font-family: Courier New,Courier,monospace">navigator.onLine</span> attribute returns <span style="font-family: Courier New,Courier,monospace">false</span>, 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: <span style="font-family: Courier New,Courier,monospace">online</span> and <span style="font-family: Courier New,Courier,monospace">offline</span>. The events can be executed in the <span style="font-family: Courier New,Courier,monospace">Window</span> or <span style="font-family: Courier New,Courier,monospace">WorkerGlobalScope</span> object.</p>
+
+<table>
+<caption>Table: Browser state attributes and events</caption>
+   <colgroup>
+    <col width="25%" />
+    <col width="25%" />
+    <col width="50%" />
+   </colgroup>
+<tbody>
+    <tr>
+     <th>Attribute or event</th>
+     <th>Type</th>
+     <th>Description</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">onLine</span></p> </td>
+     <td rowspan="1" colspan="1"> <p>readonly Boolean </p> </td>
+     <td rowspan="1" colspan="1"> <p>If the browser is connected to the network, this attribute returns <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise <span style="font-family: Courier New,Courier,monospace">false</span>. </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">online</span></p> </td>
+     <td rowspan="1" colspan="1"> <p>Event</p> </td>
+     <td rowspan="1" colspan="1"> <p>When the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute changes from <span style="font-family: Courier New,Courier,monospace">false</span> to <span style="font-family: Courier New,Courier,monospace">true</span>, a connection is established and this event is triggered.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">offline</span></p> </td>
+     <td rowspan="1" colspan="1"> <p>Event</p> </td>
+     <td rowspan="1" colspan="1"> <p>When the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute changes from <span style="font-family: Courier New,Courier,monospace">true</span> to <span style="font-family: Courier New,Courier,monospace">false</span>, a connection is lost and this event is triggered.</p> </td>
+    </tr>
+</tbody>
+</table>
+
+<table class="note">
+            <tbody>
+                <tr>
+                    <th class="note">Note</th>
+                </tr>
+                <tr>
+                    <td class="note">The device can be connected to the network without access to the Internet.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..a628aec
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm">Device Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Device</h1>
+  <p>Device features include device-specific features, such as managing vibration and monitoring the browser state.</p>
+  <p>The main device features are:</p>
+  <ul>
+   <li><a href="battery_w.htm">Battery Status</a> <p>Enables you to retrieve the battery status and detect changes in it.</p></li>
+   <li><a href="device_orientation_w.htm">DeviceOrientation Event Specification</a> <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> <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> <p>Enables you to implement different vibration patterns on a Tizen device.</p></li>   
+  </ul>
+
+  <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+   <li><a href="browser_state_w.htm">HTML5 Browser state</a> <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> <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>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..6a24adb
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm">DeviceOrientation Event Specification Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DeviceOrientation Event Specification</h1>
+
+<p>Tizen can detect motion data in the device by providing interaction between the user and device through a new UI or UX.</p>
+
+<p>The main orientation event features include:</p>
+<ul>
+<li>Detecting rotation
+<p>You can use the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#deviceorientation" target="_blank">deviceorientation</a> event to <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm#rotate">detect rotation data</a> in order to rotate game characters or elements.</p></li>
+<li>Detecting acceleration
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm#accelerate">use rotation speed (acceleration in the device) information</a>, including gravity, with the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#devicemotion" target="_blank">devicemotion</a> event. You can move game characters or elements, and capture acceleration values to add certain events.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..c1efa1f
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Screen Orientation</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm">Screen Orientation Tutorial</a></li>     
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation API for Mobile Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Screen Orientation</h1>
+
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm#manage">manage the screen orientation state</a> through the <span style="font-family: Courier New,Courier,monospace">Screen</span> interface.</p>
+
+<p>The main features of the Screen Orientation API include:</p>
+
+<ul><li>Accessing the current screen orientation
+<p>You can use the current screen orientation information, for example, to define the visibility or dimensions of the HTML elements according to the orientation state. You can retrieve the state with the <span style="font-family: Courier New,Courier,monospace">screen.orientation</span> attribute.
+</p><p>The following code snippet demonstrates how to access the current screen orientation information.</p>
+<pre class="prettyprint">
+var currentScreenOrientation = screen.orientation;
+</pre>
+
+<p>The orientation can be portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary.</p></li>
+
+<li>Reacting to screen orientation changes
+<p>To receive notifications of the screen orientation changes, add an event listener to the <span style="font-family: Courier New,Courier,monospace">Screen</span> object, or assign a function reference to the <span style="font-family: Courier New,Courier,monospace">screen.onorientationchange</span> attribute.</p>
+<p>The following code snippet demonstrates how to receive notifications of screen orientation changes.</p>
+<pre class="prettyprint">
+/* Add listener */
+screen.addEventListener(&quot;orientationchange&quot;, handleScreenOrientationFun, false);
+
+/* Or assign reference */
+screen.onorientationchange = handleScreenOrientationFun;
+</pre>
+
+<p>In the above example, the <span style="font-family: Courier New,Courier,monospace">handleScreenOrientationFun</span> is the event handler called when the screen orientation changes.</p></li>
+
+<li>Locking the screen to a specified orientation
+<p>Locking means that the rendering of the current browsing context is forced to be shown in the specified orientation. The screen remains in the selected orientation state until the lock is removed.</p>
+<p>Lock the screen with the <span style="font-family: Courier New,Courier,monospace">lockOrientation()</span> method. 
+</p><p>The following code snippet demonstrates how to lock the screen to a specified orientation.</p>
+<pre class="prettyprint">screen.lockOrientation(&quot;portrait-secondary&quot;);
+</pre>
+<p>The method accepts the following parameter values: <span style="font-family: Courier New,Courier,monospace">portrait-primary</span>, <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-primary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-secondary</span>, <span style="font-family: Courier New,Courier,monospace">portrait</span>, and <span style="font-family: Courier New,Courier,monospace">landscape</span>.</p>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">When using the screen orientation lock:
+          <ul><li>When the <span style="font-family: Courier New,Courier,monospace">portrait</span> value is used to lock the orientation, the orientation can change between <span style="font-family: Courier New,Courier,monospace">portrait-primary</span> and <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>. The <span style="font-family: Courier New,Courier,monospace">landscape</span> value behaves similarly.</li>
+          <li>Depending on the browser, unlocking the screen orientation may have no visual effect.</li></ul></td> 
+      </tr> 
+     </tbody> 
+    </table>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/device/touch_w.htm b/org.tizen.guides/html/web/w3c/device/touch_w.htm
new file mode 100644 (file)
index 0000000..36aa1a4
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/touch_w.htm
@@ -0,0 +1,91 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm">Touch Events version 1 Tutorial</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>                                  
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <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>
+
+<p>The main touch event features include:</p>
+<ul>
+<li>Touch event types
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm#handle"> define event handlers</a> for 4 different types of touch events:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> handles an event which occurs when a finger comes in contact with the device screen.</li>
+<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a> handles an event which occurs when a finger moves while it is in contact with the screen.</li>
+<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> handles an event which occurs when a finger is removed from the screen.</li>
+<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> handles an event which occurs when a touch is cancelled.</li>
+</ul>
+<p>These events are similar to the <span style="font-family: Courier New,Courier,monospace">mousedown</span>, <span style="font-family: Courier New,Courier,monospace">mousemove</span>, and <span style="font-family: Courier New,Courier,monospace">mouseup</span> mouse events.</p>
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">In Tizen, the <span style="font-family: Courier New,Courier,monospace">touchcancel</span> event occurs when a context menu is activated by a long press of a DOM element, such as text or image.</td>
+      </tr>
+     </tbody>
+    </table>
+</li>
+<li>Touch point coordinate
+<p>When a touch event occurs, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm#retrieve">retrieve the coordinate of the event point occurrence</a>. Because the finger, and consequently the contact area of the screen, is quite large, the retrieved coordinate is the average value of the contact area.</p>
+<p>Since a mobile device has no sub-devices to provide event inputs, you can use gesture events, such as the page turning effect or image drawing, based on the finger movement coordinates of the <span style="font-family: Courier New,Courier,monospace">touchmove</span> event.</p></li>
+<li>Multi-point touch control
+<p>Unlike with mouse events, multiple concurrent touch events (represented by the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface) can occur. To <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm#control">control multi-point touch events</a>, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-TouchList" target="_blank">TouchList</a> interface is used to save the respective event status (based on the <span style="font-family: Courier New,Courier,monospace">touches</span>, <span style="font-family: Courier New,Courier,monospace">targetTouches</span>, and <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attributes). The status stored in the <span style="font-family: Courier New,Courier,monospace">TouchList</span> instance is renewed every time a new touch event occurs.</p></li>
+</ul>
+
+ <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="../../../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm#enhance">enhance the touch event responsiveness</a> by making the page unscalable, or modifying touch responses.</p>
+  
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/device/vibration_w.htm b/org.tizen.guides/html/web/w3c/device/vibration_w.htm
new file mode 100644 (file)
index 0000000..616400a
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/device/vibration_w.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm">Vibration Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#vibration">Vibration API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#vibration">Vibration API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Vibration</h1>
+
+<p><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm#manage">Making a Tizen device vibrate</a> is a good way to provide tactile feedback to the user or to interact with the user even when the device volume is low. The vibration provides better user experience and therefore improves the perception of your application. </p>
+<p>The vibration interface is implemented by all <span style="font-family: Courier New,Courier,monospace">Navigator</span> instances. With the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method parameters, you can define different vibration types:</p>
+<ul>
+<li>Continuous vibration for a given length of time</li>
+<li>Vibration in a given pattern </li>
+</ul>
+
+<p>The following table describes the available parameters.</p>
+<table>
+<caption>Table: Vibration parameters</caption>
+<tbody>
+    <tr>
+     <th>Parameter</th>
+     <th>Description</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">time</span></p> </td>
+     <td rowspan="1" colspan="1"> <p>Vibration time in milliseconds. </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">pattern</span></p> </td>
+     <td rowspan="1" colspan="1"> <p>Vibration pattern represented by a list of time entries. Odd entries represent vibration time in milliseconds, and even entries still periods in milliseconds between the vibrations. </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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/animation_w.htm b/org.tizen.guides/html/web/w3c/dom/animation_w.htm
new file mode 100644 (file)
index 0000000..7ade751
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/animation_w.htm
@@ -0,0 +1,192 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Animations Module Level 3</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#keyframe">Keyframes</a></li>
+                       <li><a href="#prop_ani">Animation Properties</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm">CSS Animations Module Level 3 Tutorial</a></li>      
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Animations Module Level 3</h1>
+
+<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="../../../../../org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm#create">use animation keyframes to define explicit values for the properties</a> being animated.</p>
+
+<p>When using the CSS animation properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
+
+<h2 name="keyframe" id="keyframe">Keyframes</h2>
+<p>The CSS animations work based on <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>
+<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <span style="font-family: Courier New,Courier,monospace">from {} to {}</span> rule, where <span style="font-family: Courier New,Courier,monospace">from</span> is the beginning of the animation at 0% and <span style="font-family: Courier New,Courier,monospace">to</span> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <span style="font-family: Courier New,Courier,monospace">&lt;number&gt;% {}</span> rules that together cover the entire animation iteration from 0% to 100%.</p>
+<p>The following code snippet demonstrates how to use keyframes. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_keyframes.html</a></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&gt;
+</pre>
+
+<h2 name="prop_ani" id="prop_ani">Animation Properties</h2>
+
+<p>You can define various properties for an animation to control how it is played:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">animation-name</span>
+<p>This property uses the name defined in the <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules to play the animation.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-duration</span>
+<p>This property defines how long one iteration of the animation takes.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span>
+<p>This property defines how many times the animation is repeated. If the value is set as <span style="font-family: Courier New,Courier,monospace">infinite</span>, the repetitions are unlimited.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-timing-function</span>
+<p>This property defines the pace of the animation.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-direction</span>
+<p>This property defines the replay direction. The <span style="font-family: Courier New,Courier,monospace">reverse</span> value plays the animation from 100% keyframe to 0% keyframe, while the <span style="font-family: Courier New,Courier,monospace">alternate</span> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-play-state</span>
+<p>This property defines the replay status of the animation. The <span style="font-family: Courier New,Courier,monospace">paused</span> value temporarily stops the animation.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">animation-delay</span>
+<p>This property defines the delay time before the start of the animation.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>
+<p>This property defines the state of the animation before or after the animation is played. The <span style="font-family: Courier New,Courier,monospace">forwards</span> value maintains the last value of the keyframe rule when the animation is over, while the <span style="font-family: Courier New,Courier,monospace">backwards</span> value fills up the first value of the keyframe rule when the animation with the <span style="font-family: Courier New,Courier,monospace">animation-delay</span> property is in a standby state. The <span style="font-family: Courier New,Courier,monospace">both</span> value covers both the start and the end of the animation.</p></li></ul>
+
+<p>The following code snippet demonstrates how to use animation properties. For a complete source code, see:</p>
+<ul>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_delay.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_direction.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_fill_mode.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_iteration_count.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_name.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_play_state.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_timing_function.html</a></li>
+</ul>
+
+<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;/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;/body&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       
+<p>The <span style="font-family: Courier New,Courier,monospace">animation</span> property allows you to define all the animation properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">animation-name</span> | <span style="font-family: Courier New,Courier,monospace">animation-duration</span> | <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">animation-delay</span> | <span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span> | <span style="font-family: Courier New,Courier,monospace">animation-direction</span> | <span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>. 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&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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/background_w.htm b/org.tizen.guides/html/web/w3c/dom/background_w.htm
new file mode 100644 (file)
index 0000000..1cf5f9b
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/background_w.htm
@@ -0,0 +1,130 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Backgrounds and Borders Module Level 3</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Backgrounds and Borders Module Level 3</h1>
+
+<p>You can manage the CSS properties for <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm#create">specifying the border style or background of any HTML element</a>.</p>
+
+<p>When creating a background for an element, you can use the following properties:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">background-color</span>
+<p>Defines the color of the background.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-image</span>
+<p>Defines the image to be used. You can add images as separate layers to an element. To add multiple images, separate them by commas to add each image as a separate layer. The images are added in the order they are defined.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-position</span>
+<p>Defines the exact position of the image.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-repeat</span>
+<p>Defines whether the image is repeated to fill the entire background (in case the image is too small to do it otherwise).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-origin</span>
+<p>Defines the position of the initial background for the item.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-size</span>
+<p>Defines the size of the image in the background.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-clip</span>
+<p>Defines the area of the cropped background element.</p></li>
+</ul>
+
+<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-style</span>, and <span style="font-family: Courier New,Courier,monospace">border-color</span>), or by listing the values for all 3 properties together in 1 <span style="font-family: Courier New,Courier,monospace">border</span> property. To define rounded corners for the border, you can additionally use the <span style="font-family: Courier New,Courier,monospace">border-radius</span> property.</p>
+
+<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <span style="font-family: Courier New,Courier,monospace">box-shadow</span> property. To switch the shadow from outside to inside the element, add the <span style="font-family: Courier New,Courier,monospace">inset</span> keyword to the property too.</p>
+
+<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 <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>
+
+  <p class="figure">Figure: Background examples</p> 
+  <p style="text-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>
+
+<pre class="prettyprint">
+&lt;!-- Background color --&gt;
+#one 
+{
+&nbsp;&nbsp;&nbsp;width: 180px;
+&nbsp;&nbsp;&nbsp;height: 40px;
+&nbsp;&nbsp;&nbsp;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);
+}
+
+&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;
+}
+
+&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;
+}
+</pre>
+ 
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm b/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
new file mode 100644 (file)
index 0000000..272d847
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Basic User Interface Module Level 3 (CSS3 UI)</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI) Tutorial</a></li>   
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Basic User Interface Module Level 3 (CSS3 UI)</h1>
+
+<p>You can apply styles to HTML documents.</p>
+<p>The CSS3 version has caused changes in the Selector, Color, Web Form, and Fonts CSS modules. In addition, the CSS3 UI API also handles changes related to the following user interface items:</p>
+<ul>
+<li>User interface selectors
+<p>The CSS Selector is an essential module for applying a CSS to HTML in order to enable the DOM element selection. The <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors" target="_blank">pseudo-element selectors</a> can be used to assign the user interface state. With the selectors, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm#selector">change the Web form style</a> according to the user input without using JavaScript.</p></li>
+
+<li>Box model properties
+<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;i&gt;</span>. The box model area is set as defined in the following figure.</p>
+<ul>
+<li><b>Content</b>: Content area</li>
+<li><b>Padding</b>: Gap between the content and boundary</li>
+<li><b>Border</b>: Boundary</li>
+<li><b>Margin</b>: Overall size of the box model</li>
+</ul>
+<p class="figure">Figure: Box model structure</p>
+<p align="center"><img alt="Figure: Box model structure" src="../../../images/box_model_properties_struct.png"/></p>
+
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm#boxmodel">use the box model properties</a> to assign styles to the selected DOM elements:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property assigns the box size range.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">outline</span> properties make the box outstanding.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property handles the text extending outside the box.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/color_w.htm b/org.tizen.guides/html/web/w3c/dom/color_w.htm
new file mode 100644 (file)
index 0000000..f7fb95d
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/color_w.htm
@@ -0,0 +1,149 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Color Module Level 3</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm">CSS Color Module Level 3 Tutorial</a></li>       
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Color Module Level 3</h1>
+
+<p>You can manage the CSS properties for <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm#create">specifying the color and opacity of an HTML element</a>, and the CSS color value type.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI &#39;appearance&#39; property.</p></td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+<p>You can specify the color of an element with the following formats:</p>
+<ul>
+<li>Keyword values
+<p>You can use basic keywords, such as <span style="font-family: Courier New,Courier,monospace">red</span>, <span style="font-family: Courier New,Courier,monospace">green</span>, <span style="font-family: Courier New,Courier,monospace">blue</span>, or <span style="font-family: Courier New,Courier,monospace">deepskyblue</span>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is the computed value of the <span style="font-family: Courier New,Courier,monospace">color</span> property. If the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is set on the <span style="font-family: Courier New,Courier,monospace">color</span> property itself, it is treated as <span style="font-family: Courier New,Courier,monospace">color: inherit</span>.
+</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">transparent</span> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>
+</li>
+<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, <span style="font-family: Courier New,Courier,monospace">#fc0</span> expands to <span style="font-family: Courier New,Courier,monospace">#ffcc00</span>.</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: <span style="font-family: Courier New,Courier,monospace">rgb(255, 255, 255)</span> = <span style="font-family: Courier New,Courier,monospace">rgb(100%, 100%, 100%)</span> = <span style="font-family: Courier New,Courier,monospace">#FFF</span>. 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: <span style="font-family: Courier New,Courier,monospace">rgba(255, 0, 0, 0.7)</span>.</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: <span style="font-family: Courier New,Courier,monospace">hsl(0, 100%, 50%)</span>. 
+</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: <span style="font-family: Courier New,Courier,monospace">hsla(120, 100%, 50%, 0.8)</span>.</p></li>
+</ul>
+ <p>The following code snippet demonstrates how to specify a color for an element. For a complete source code, see:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">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">current_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">hsl_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">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> 
+ </ul>
+<pre class="prettyprint">
+&lt;!-- Keywords --&gt;
+#one
+{
+&nbsp;&nbsp;&nbsp;color: blue;
+&nbsp;&nbsp;&nbsp;background: white;
+&nbsp;&nbsp;&nbsp;border: 1px solid springgreen;
+}
+#one span 
+{
+&nbsp;&nbsp;&nbsp;background: currentColor;
+}
+#one span.hide
+{
+&nbsp;&nbsp;&nbsp;color: transparent;
+}
+
+&lt;!-- RGB --&gt;
+#two
+{
+&nbsp;&nbsp;&nbsp; color: #ff0000;
+}
+
+&lt;!-- RGBA --&gt;
+#three
+{
+&nbsp;&nbsp;&nbsp;color: rgba(100%, 0, 0, 0.5);
+}
+
+&lt;!-- HSL --&gt;
+#four
+{
+&nbsp;&nbsp;&nbsp;color: hsl(0, 100%, 50%);
+}
+
+&lt;!-- HSLA --&gt;
+#five
+{
+&nbsp;&nbsp;&nbsp;color: hsla(0, 100%, 50%, 0.5);
+}
+</pre>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm b/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
new file mode 100644 (file)
index 0000000..3f171d9
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>DOM, Forms and Styles</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles Tutorials</a></li>  
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>DOM, Forms and Styles</h1> 
+  <p>DOM, forms and styles features include all aspects of using various CSS styles and HTML5 forms.</p>
+  <p>The main DOM, forms and styles features are:</p>
+     <ul>
+       <li><a href="animation_w.htm">CSS Animations Module Level 3</a> <p>Enables you to create animations using the CSS3 <span style="font-family: Courier New,Courier,monospace">animation</span> property.</p></li>
+       <li><a href="background_w.htm">CSS Backgrounds and Borders Module Level 3</a> <p>Enables you to specify the border and background styles of HTML elements using CSS properties.</p></li>
+       <li><a href="basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a> <p>Enables you to apply styles to HTML documents.</p></li>
+       <li><a href="color_w.htm">CSS Color Module Level 3</a> <p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
+       <li><a href="flexible_w.htm">CSS Flexible Box Layout Module</a> <p>Enables you to create flexible layouts for Web applications.</p></li>
+       <li><a href="transform_w.htm">CSS Transforms</a> <p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <span style="font-family: Courier New,Courier,monospace">transform</span> property.</p></li>
+       <li><a href="transition_w.htm">CSS Transitions Module Level 3</a> <p>Enables you to add effects when changing the style of an element using the CSS3 <span style="font-family: Courier New,Courier,monospace">transition</span> property.</p></li>
+       <li><a href="font_w.htm">CSS Fonts Module Level 3</a> <p>Enables you to change the text fonts.</p></li> 
+       <li><a href="text_module_w.htm">CSS Text Module Level 3</a> <p>Enables you to apply various text effects.</p></li>      
+       <li><a href="woff_w.htm">WOFF File Format 1.0</a> <p>Enables you to encode and decode font data easily.</p></li>        
+       <li><a href="html5forms_w.htm">HTML5 Forms</a> <p>Enables you to easily implement Web forms for user input using HTML5 elements.</p></li>
+       <li><a href="media_query_w.htm">Media Queries</a> <p>Enables you to define media features for specific output devices using the CSS media queries.</p></li>      
+       <li><a href="selector_w.htm">Selectors API Level 1 and Level 2</a> <p>Enables you to select element nodes in the DOM tree by matching them against a group of selectors.</p></li>       
+       <li><a href="session_history_w.htm">HTML5 session history of browsing contexts</a> <p>Enables you to manage the browsing history of a device.</p></li>
+     </ul>
+        
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
+<ul>
+       <li><a href="multi_w.htm">CSS Multi-column Layout Module</a> <p>Enables you to create multi-column layouts for Web 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/flexible_w.htm b/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
new file mode 100644 (file)
index 0000000..6663a31
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm">CSS Flexible Box Layout Module Tutorial</a></li>      
+                       <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 id="container"><div id="contents"><div class="content">
+ <h1>CSS Flexible Box Layout Module</h1>
+
+<p>CSS attributes, such as <span style="font-family: Courier New,Courier,monospace">float</span>, <span style="font-family: Courier New,Courier,monospace">display</span>, and <span style="font-family: Courier New,Courier,monospace">position</span>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>
+
+<p>Tizen supports the CSS Flexible Box Layout Module API that enables you to create an easily manageable flexible layout, which fluidly adjusts the layout according to viewport size changes. When you <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm#create">create and use a flexible box layout</a>, the alignment method or object (flex item) size within a specific area (flex container) can be adjusted.</p>
+<p>The main components of the flexible box layout include:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-containers" target="_blank">Flex container</a>, which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>
+<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.
+<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>
+</ul>
+<p class="figure">Figure: Flexible box layout</p>
+<p align ="center"><img alt="Flexible box layout" src="../../../images/flex_container.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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/font_w.htm b/org.tizen.guides/html/web/w3c/dom/font_w.htm
new file mode 100644 (file)
index 0000000..cd6f657
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/font_w.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Fonts Module Level 3</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm">CSS Fonts Module Level 3 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Fonts Module Level 3</h1>
+
+<p>You can change the text fonts easily.</p>
+
+<p>The new text features in CSS Fonts Module Level 3 API include:</p>
+<ul>
+<li>Font properties 
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm#font">use CSS font properties</a>, such as <span style="font-family: Courier New,Courier,monospace">font-style</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, <span style="font-family: Courier New,Courier,monospace">font-variant</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, and <span style="font-family: Courier New,Courier,monospace">font-family</span>, to modify the appearance of text.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm b/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
new file mode 100644 (file)
index 0000000..0f0d2a9
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
@@ -0,0 +1,302 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <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>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm">HTML5 Forms Tutorial</a></li>       
+                       <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 id="container"><div id="contents"><div class="content">
+
+  <h1>HTML5 Forms</h1> 
+
+<p>The HTML5 forms provide a convenient way to create consistent screens in your application for accepting user input. In the past, the Web form allowed you to accept user input before transmitting it to a server. With HTML5, you can now improve the user experience without having to use JavaScript by <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm#basic">adding simple features</a>, for example, email validity checks and date pickers, and <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm#advanced">using more advanced functionality</a>, such as security checks and input value pattern definitions.</p>
+
+<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>
+
+<table>
+<caption>Table: New HTML5 elements</caption>
+
+<tbody>
+    <tr>
+     <th>Element</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-datalist-element" target="_blank">datalist</a></td>
+     <td rowspan="1" colspan="1"> <p>Defines a set of option elements that represent predefined options for other controls. The element is used together with the <span style="font-family: Courier New,Courier,monospace">input</span> element to predefine its value.</p>
+<p>In Tizen, the value selected in the <span style="font-family: Courier New,Courier,monospace">datalist</span> element can be edited.</p></td>
+<td rowspan="1" colspan="1">
+<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;/datalist&gt;
+</pre>
+     </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-keygen-element" target="_blank">keygen</a></td>
+     <td rowspan="1" colspan="1"> <p>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 <span style="font-family: Courier New,Courier,monospace">name</span> attribute, saves it in the user&#39;s computer and Web server, and activates the next procedure when the 2 values match.</p></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;
+</pre>
+     </td>
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-meter-element" target="_blank">meter</a></td>
+     <td rowspan="1" colspan="1"> <p>Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.</p></td>
+<td rowspan="1" colspan="1">
+<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&gt;
+</pre>
+     </td>
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-output-element" target="_blank">output</a></td>
+     <td rowspan="1" colspan="1"> <p>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 <span style="font-family: Courier New,Courier,monospace">form</span> element.</p></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&gt;
+</pre>
+     </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-progress-element" target="_blank">progress</a></td>
+     <td rowspan="1" colspan="1"> <p>Represents the progress of a task.</p>
+     </td>
+     <td rowspan="1" colspan="1"><pre class="prettyprint">
+&lt;progress value=&quot;75&quot; max=&quot;100&quot;&gt;
+&nbsp;&nbsp;&nbsp;75/100
+&lt;/progress&gt;
+</pre></td>
+    </tr>
+</tbody>
+</table>
+
+<h2 id="input" name="input">New Input Element Types</h2>
+<p>The following table lists the new input element types available for your forms in HTML5. Many of the new elements activate a specific keyboard suitable for the type of value the user is expected to enter (for example, an email or URL). For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">types.html</a>.</p>
+
+<table>
+<caption>Table: New input element types</caption>
+
+<tbody>
+    <tr>
+     <th>Type</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#color-state" target="_blank">color</a></td>
+     <td rowspan="1" colspan="1"> <p>Select an HSL color from the color picker. The value format is HEX (#0099ff).</p>
+    </td>
+        <td rowspan="13" colspan="1">
+    <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;
+</pre>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-state" target="_blank">date</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a date with no time zone (yyyy-mm-dd).</p>
+    </td>
+
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-and-time-state" target="_blank">datetime</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ).</p>
+
+</td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#local-date-and-time-state" target="_blank">datetime-local</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a date and time with no time zone (yyyy-mm-ddTtt:mm).</p>
+    </td>
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><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 rowspan="1" colspan="1"> <p>Enter an email address with the email keyboard.</p>
+     <p>If the <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<span style="font-family: Courier New,Courier,monospace">1*(atext / &quot;.&quot;) &quot;@&quot; ldh-str 1*(&quot;.&quot; ldh-str)</span>).</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#month-state" target="_blank">month</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a year and month with no time zone (yyyy-mm).</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#number-state" target="_blank">number</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter numbers with the number keyboard.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#range-state" target="_blank">range</a> </td>
+     <td rowspan="1" colspan="1"> <p>Select a value from the slider.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#text-state-and-search-state" target="_blank">search</a></td>
+     <td rowspan="1" colspan="1"> <p>No specific functionality is defined for this element in the HTML5 specifications.</p>
+    </td>
+    </tr>
+         <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#telephone-state" target="_blank">tel</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a phone number with the number keyboard.</p>
+    </td>
+    </tr>
+    <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#time-state" target="_blank">time</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a time with no time zone (tt:mm:ss).</p>
+    </td>
+    </tr>
+         <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#url-state" target="_blank">url</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a URL with the URL keyboard.</p>
+    </td>
+    </tr>
+    <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#week-state" target="_blank">week</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a year and week with no time zone (yyyy-week).</p>
+    </td>
+    </tr>
+</tbody>
+</table>
+
+<h2 id="attribute" name="attribute">New Input Element Attributes</h2>
+
+<p>The following table lists the new input element attributes 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">attributes.html</a>.</p>
+
+<table>
+<caption>Table: New input element attributes</caption>
+
+<tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><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 rowspan="1" colspan="1"> <p>Prefilling feature, which helps the users by, for example, prefilling the user&#39;s address based on earlier user input.</p>
+     <p>The text used by the user before (such as an <span style="font-family: Courier New,Courier,monospace">input</span> element) is listed in a <span style="font-family: Courier New,Courier,monospace">datalist</span> 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>
+    <td rowspan="6" colspan="1">
+    <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;
+</pre>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-min" target="_blank">min and max</a></td>
+     <td rowspan="1" colspan="1"> <p>Allowed range of values for the element.</p>
+     </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><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 rowspan="1" colspan="1"> <p>Regular expression against which the control&#39;s value is checked.</p>
+     <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>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-placeholder" target="_blank">placeholder</a></td>
+     <td rowspan="1" colspan="1"> <p>Short hint intended to aid the user with the data entry.</p>
+     <p>The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement.</p>
+    </td>
+    </tr>
+ <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-required" target="_blank">required</a></td>
+     <td rowspan="1" colspan="1"> <p>Boolean attribute which, when specified, defines that the element is mandatory.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-step" target="_blank">step</a></td>
+     <td rowspan="1" colspan="1"> <p>Granularity expected of the value, limiting the allowed values.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/media_query_w.htm b/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
new file mode 100644 (file)
index 0000000..eb2cbb5
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
@@ -0,0 +1,245 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#rule">Media Query Conditions</a></li>
+                       <li><a href="#priorities">Media Query Priorities</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm">Media Queries Tutorial</a></li>    
+                       <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>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Media Queries</h1>
+ 
+<p>Media queries allow you to apply the CSS differently according to 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="../../../../../org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm#create">liquid layout</a> that mainly reacts according to the device resolution. </p>
+
+<p>You can use media queries in 3 ways:</p>
+
+<ul>
+<li>In CSS
+<p>You can define attribute values depending on given conditions:</p>
+<pre class="prettyprint">@media only screen and (max-width: 480px) {styles}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+<li>In an <span style="font-family: Courier New,Courier,monospace">@import</span> rule in CSS
+<p>You can import from CSS a file that matches the condition:</p>
+<pre class="prettyprint">@import url(example.css) not screen and (min-width: 480px)
+</pre>
+</li>
+<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;</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+</ul>
+
+<p>For more information on the CSS priorities when different media queries are used, see <a href="#priorities">Media Query Priorities</a>.</p>
+
+<h2 id="rule" name="rule">Media Query Conditions</h2>
+
+<p>You can define the following conditions for the media queries:</p>
+
+<ul>
+<li>Combination and relevancy
+<p>You can combine multiple conditions into 1 Boolean query with the <span style="font-family: Courier New,Courier,monospace">and</span> operator. To define a negative condition (something not being relevant), use the <span style="font-family: Courier New,Courier,monospace">not</span> operator.</p>
+<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;}
+}
+</pre>
+</li>
+<li>Viewport width
+<p>You can define the query to match to a specific viewport width range using the <span style="font-family: Courier New,Courier,monospace">min-width</span> and <span style="font-family: Courier New,Courier,monospace">max-width</span> attributes.</p>
+<pre class="prettyprint">@media all and (min-width: 320px) and (max-width: 480px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
+}
+</pre>
+</li>
+<li>Device and viewport height
+<p>The <span style="font-family: Courier New,Courier,monospace">height</span> attribute refers to restoring the viewport&#39;s height, and the <span style="font-family: Courier New,Courier,monospace">device-height</span> attribute refers to restoring the resolution set in the device.</p>
+<p>The same difference applies to the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">aspect-ratio</span> attributes, which can assign &#39;device-&#39;.</p>
+<pre class="prettyprint">@media screen and (min-device-height: 700px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-device-height&quot;}
+}
+@media screen and (min-height: 550px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-height&quot;}
+}
+</pre>
+<p>In the above example, a device with the width-height resolution of 480/720 has the <span style="font-family: Courier New,Courier,monospace">{content: &quot;min-height&quot;}</span> rule applied as a priority in a portrait screen, but the <span style="font-family: Courier New,Courier,monospace">{content &quot;min-device-height&quot;}</span> rule applied in a landscape screen.</p> 
+
+</li>
+<li>Device aspect ratio
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">device-aspect-ratio</span> 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) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;aspect-ratio, portrait&quot;}
+}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+</ul>
+
+ <h2 id="priorities" name="priorities">Media Query Priorities</h2>
+
+<p>When multiple media queries and conditions are defined, CSS is applied with the following priorities:</p>
+<ul>
+<li>In case of the CSS reiteration declaration, the CSS that has been declared last is applied.</li>
+<li>In case of specificity, the CSS with the highest specificity is applied.
+<p>The specificity is calculated as follows:</p><ul><li>id attribute = 100</li>
+<li>class attribute = 10</li>
+<li>element = 1</li></ul>
+<p>Selectors, such as <span style="font-family: Courier New,Courier,monospace">section#content &gt; .title p</span>, carry the specificity of 112.</p></li>
+<li>In case of user override, the user CSS is applied instead of the creator CSS.</li>
+<li><p>CSS is applied first based on the conditions in the <span style="font-family: Courier New,Courier,monospace">@import</span> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>
+<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>
+</ul>
+
+<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;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;}
+&lt;/style&gt;
+
+&lt;!--a.css--&gt;
+body {background-color: #ccc}
+
+@media screen and (max-width: 480px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content:&quot;a.css : width: ~ 480px&quot;}
+}
+@media screen and (min-width: 480px) and (max-width: 768px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;a.css : width: 480px ~ 768px&quot;}
+}
+
+&lt;!--b.css--&gt;
+@import url(&quot;c.css&quot;);
+
+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;}
+}
+
+&lt;!--c.css--&gt;
+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;}
+}
+@media screen and (min-width: 1024px) and (max-width: 1280px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 1024px ~ 1280px&quot;}
+}
+</pre>
+
+<p>The CSS is applied based on the viewport:</p>
+<ul>
+<li>If the viewport is 320 px:
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: ~ 480px&quot;</span>).</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li>
+<li>CSS is applied instead of the HTML <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> (the <span style="font-family: Courier New,Courier,monospace">a.css</span> file has higher priority than <span style="font-family: Courier New,Courier,monospace">content: &quot;In HTML head&quot;</span>).</li>
+</ul></li>
+<li>If the viewport is 700 px:
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: 480px ~ 768px&quot;</span>).</p> </li>
+<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li></ul></li>
+<li>If the viewport is 900 px:
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is imported.</li>
+<li>c.css is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;c.css : width: 768px ~ 1024px&quot;</span>). </li>
+<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is not imported.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;b.css : width: 768px ~ 1024px&quot;</span>).</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/multi_w.htm b/org.tizen.guides/html/web/w3c/dom/multi_w.htm
new file mode 100644 (file)
index 0000000..1ff4d38
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/multi_w.htm
@@ -0,0 +1,218 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#size">Setting the Column Number and Width</a></li>
+                       <li><a href="#gap">Setting the Column Gap</a></li>
+                       <li><a href="#rule">Setting the Column Rule</a></li>
+                       <li><a href="#span">Setting the Column Span</a></li>
+                       <li><a href="#break">Setting the Column Break</a></li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm">CSS Multi-column Layout Module Tutorial</a></li> 
+                       <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 id="container"><div id="contents"><div class="content">
+ <h1>CSS Multi-column Layout Module</h1>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+ <p>You can arrange the screen content into columns. Using the CSS <span style="font-family: Courier New,Courier,monospace">column-</span> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm#basic">create a basic layout</a>, or add JavaScript code to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm#dynamic">make the layout dynamic</a>.</p>
+ 
+ <p>You can manage the following column-related features:</p>
+<ul>
+<li><a href="#size">Setting the column number and width</a></li>
+<li><a href="#gap">Setting the column gap</a></li>
+<li><a href="#rule">Setting the column rule</a></li>
+<li><a href="#span">Setting the column span</a></li>
+<li><a href="#break">Setting the column break</a></li>
+</ul>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Up to Tizen SDK version 2.2, most CSS properties and values used in Tizen required the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<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 <span style="font-family: Courier New,Courier,monospace">column-count</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-count)</span> property, the column width is set to fill the available horizontal space.</p>
+<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-count</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article
+{
+&nbsp;&nbsp;&nbsp;column-count: 4;
+&nbsp;&nbsp;&nbsp;-webkit-column-count: 4;
+&nbsp;&nbsp;&nbsp;margin: 10px;
+}
+</pre>
+
+<p class="figure">Figure: 4 columns on different resolution displays</p> 
+<p style="text-align:center;"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> 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>
+<p>The code snippet shows how the multi-column layout is implemented when the vertical space is limited. If there is more content than fits the available space, the next column is set outside the available space. Using the <span style="font-family: Courier New,Courier,monospace">overflow: scroll</span> property, the column can be scrolled horizontally.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-width</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_width" target="_blank">multi_column_column_width/renamed_index.html</a>.</p>
+<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;
+}
+</pre>
+
+<p class="figure">Figure: Column width 153 px on different resolution displays</p> 
+<p style="text-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 <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) 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>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_gap" target="_blank">multi_column_column_gap/renamed_index.html</a>.</p>
+<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;
+}
+</pre>
+
+<p class="figure">Figure: Column gap</p> 
+<p style="text-align:center;"><img alt="Column gap" src="../../../images/column_gap.png" /></p>
+
+<h2 id="rule" name="rule">Setting the Column Rule</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>
+<p>The rule has analogical parameters, such as width, line style, and color, but its size is not included in the available space, and it is a drawing similar to the background.</p>
+
+<p>Rules are only displayed in the content area. If the <span style="font-family: Courier New,Courier,monospace">padding</span> property is set in the same element, the rule appears shorter than the background. In the following code snippet and figure, the rule width is set to 5 px.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_rule" target="_blank">multi_column_column_rule/renamed_index.html</a>.</p>
+<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;
+}
+</pre>
+
+<p class="figure">Figure: Column rule</p> 
+<p style="text-align:center;"><img alt="Column rule" src="../../../images/column_rule.png" /></p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In Tizen SDK version 2.2, to avoid displaying the rules incorrectly, do not use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property with horizontal scrolling of the columns.</td> 
+      </tr> 
+     </tbody>
+</table>
+
+<h2 id="span" name="span">Setting the Column Span</h2>
+<p>By default, all elements within the columns are no wider than the column width. The <span style="font-family: Courier New,Courier,monospace">column-span</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-span</span>) property can be used to display content across all columns.</p>
+<p>When using this property with column elements which have the <span style="font-family: Courier New,Courier,monospace">column-count</span> or <span style="font-family: Courier New,Courier,monospace">column-width</span> property set, the following restrictions apply:</p>
+<ul>
+<li>Column element height is not used and elements in columns take more vertical space than is set in height.</li>
+<li>If the column element has the <span style="font-family: Courier New,Courier,monospace">overflow</span> property set to <span style="font-family: Courier New,Courier,monospace">hidden</span>, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is ignored.</li>
+<li>An element using the <span style="font-family: Courier New,Courier,monospace">column-span</span> property does not have to be a direct child of the column element.</li>
+</ul>
+<p>In the figure below, the blue arrow shows the order of the column elements. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is set to  <span style="font-family: Courier New,Courier,monospace">all</span>, as in the following code snippet.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-span</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_span" target="_blank">multi_column_column_span/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article.left header 
+{
+&nbsp;&nbsp;&nbsp;column-span: all;
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+}
+</pre>
+
+<p class="figure">Figure: Column span</p> 
+<p style="text-align:center;"><img alt="Column span" src="../../../images/column_span.png" /></p>
+
+<h2 id="break" name="break">Setting the Column Break</h2>
+<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>
+
+<p>The following code snippet and figure illustrate the use of the <span style="font-family: Courier New,Courier,monospace">break-</span> property. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">break-</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">break-before</span> property is set to  <span style="font-family: Courier New,Courier,monospace">always</span>.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-break</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_break" target="_blank">multi_column_column_break/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article.lower section
+{
+&nbsp;&nbsp;&nbsp;break-before: always;
+&nbsp;&nbsp;&nbsp;-webkit-column-break-before: always;
+}
+</pre>
+
+<p class="figure">Figure: Column break</p> 
+<p style="text-align:center;"><img alt="Column break" src="../../../images/column_break.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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/selector_w.htm b/org.tizen.guides/html/web/w3c/dom/selector_w.htm
new file mode 100644 (file)
index 0000000..1a845ca
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/selector_w.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Selectors API Level 1 and Level 2</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+       <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm">Selectors API Level 1 and Level 2 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors1">Selectors API Level 1 for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors2">Selectors API Level 2 for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors1">Selectors API Level 1 for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors2">Selectors API Level 2 for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Selectors API Level 1 and Level 2</h1>
+
+<p>The selectors allow you to select element nodes in the DOM tree by matching them against a group of selectors, and testing whether the element matches a particular selector. Using selectors makes searching and selecting complex elements faster.</p>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to retrieve the element nodes. Both methods accept a single parameter, a string selector. The string selector is a selector or a group of selectors that can be surrounded by whitespace. If you use a selector group as the string selector with the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method, the method returns the first element (if any) that matches any of the selectors in the group.</p>
+
+<p>The main features of the Selectors API Level 1 and Level 2 include:</p>
+<ul>
+<li>Selecting a single element
+<p>Use <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS Selectors</a> to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm#single">select a single element</a>.</p></li>
+<li>Selecting multiple elements simultaneously
+<p><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm#multi">Select multiple elements</a> using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
+</ul>
+<p>You can also <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm#create">create an accordion menu</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/session_history_w.htm b/org.tizen.guides/html/web/w3c/dom/session_history_w.htm
new file mode 100644 (file)
index 0000000..bf27a0b
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/session_history_w.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 session history of browsing contexts</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm">HTML5 session history of browsing contexts Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#history">HTML5 session history of browsing contexts API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#history">HTML5 session history of browsing contexts API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>HTML5 session history of browsing contexts</h1>
+ 
+ <p>You can manage the session history of browsing contexts.</p> 
+ <p>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>The main features of the HTML5 session history of browsing contexts API include:</p>
+<ul>
+<li>Adding entries to the session history
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <span style="font-family: Courier New,Courier,monospace">history</span> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm#Managing_Session_History">add an entry to the session history</a>. With the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method, you can update the session history details.
+</p></li>
+<li>Detecting session history status changes
+<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event is fired when the user navigates to a page stored in the session history. The <span style="font-family: Courier New,Courier,monospace">popstate</span> event
+references the information stored with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> or <span style="font-family: Courier New,Courier,monospace">replaceState()</span> methods, and enables you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm#Detecting_Session_History">change the status of the page based on the stored session history</a> (such as moving focus to a certain DOM element).</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/text_module_w.htm b/org.tizen.guides/html/web/w3c/dom/text_module_w.htm
new file mode 100644 (file)
index 0000000..713b8b5
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/text_module_w.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Text Module Level 3</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm">CSS Text Module Level 3 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Text Module Level 3</h1>
+
+<p>You can apply various text effects easily.</p>
+
+<p>The new text features in CSS Text Module Level 3 include:</p>
+<ul>
+
+<li>Text properties
+<p>You can use CSS text properties, such as <span style="font-family: Courier New,Courier,monospace">text-transform</span>, <span style="font-family: Courier New,Courier,monospace">text-align</span>, <span style="font-family: Courier New,Courier,monospace">text-indent</span>, <span style="font-family: Courier New,Courier,monospace">letter-spacing</span>, and <span style="font-family: Courier New,Courier,monospace">word-spacing</span>, to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm#text">manipulate and transform text</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/transform_w.htm b/org.tizen.guides/html/web/w3c/dom/transform_w.htm
new file mode 100644 (file)
index 0000000..476b5fb
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/transform_w.htm
@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Transforms</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#prop_trans">Transform Properties</a></li>
+                       <li><a href="#twod">2D and 3D Transform Functions</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm">CSS Transforms Tutorial</a></li>     
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transforms">CSS Transforms API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Transforms</h1>
+
+<p>Transforms allow you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm#animation">modify the coordinate space</a> 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>To enhance the rendering performance and user experience, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm#hw">use hardware acceleration</a> and <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm#effect">create fade effects</a>.</p>
+
+<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <span style="font-family: Courier New,Courier,monospace">-moz-</span> prefix, the Chrome and Safari browsers require the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix, and the Opera browser requires the <span style="font-family: Courier New,Courier,monospace">-o-</span> prefix.</p>
+
+<h2 name="prop_trans" id="prop_trans">Transform Properties</h2>
+
+<p>You can define various properties to control the elements within the coordinate space:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">transform-origin</span>
+<p>This property changes the location of the transformed element. It can only be used with elements for whom the <span style="font-family: Courier New,Courier,monospace">transform</span> property has been declared.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transform-style</span>
+<p>This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">perspective</span>
+<p>This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">perspective-origin</span>
+<p>This property defines the location facing the element.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">backface-visibility</span>
+<p>This property defines whether the backface of the transformed element is expressed.</p></li>
+</ul>
+
+<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;/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;/body&gt;
+</pre>
+
+<p>In addition to transform properties, you can also use various <a href="#twod">2D and 3D transform functions</a>.</p>
+
+ <h2 id="twod" name="twod">2D and 3D Transform Functions</h2>
+
+<p>The CSS Transforms API supports various transform functions in 2D and 3D.</p>
+
+<p>In 2D transforms, all transform functions are expressed based on a matrix. The X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">scale()</span>, and <span style="font-family: Courier New,Courier,monospace">skew()</span> functions can be expressed in individual functions. For example, the X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span> function can be expressed with the <span style="font-family: Courier New,Courier,monospace">translateX(number)</span> and <span style="font-family: Courier New,Courier,monospace">translateY(number)</span> functions.</p>
+
+<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;/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;/body&gt;
+</pre>
+
+<p>In 3D transforms, the Z axis has been added (for example, <span style="font-family: Courier New,Courier,monospace">translateZ(number)</span> and <span style="font-family: Courier New,Courier,monospace">scale3dZ(number)</span>). When handling 3D transforms, pay attention to the following:</p>
+<ul>
+<li>If a transform function is used together with the <span style="font-family: Courier New,Courier,monospace">perspective</span> property, the z axis is emphasized.</li>
+<li>The X, Y, and Z values of the <span style="font-family: Courier New,Courier,monospace">translate3d()</span>, <span style="font-family: Courier New,Courier,monospace">scale3d()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate3d()</span> functions can be expressed in individual functions.</li>
+<li>In the <span style="font-family: Courier New,Courier,monospace">rotate3d(number, number, number, angle)</span> function, 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 function: for example, the <span style="font-family: Courier New,Courier,monospace">rotateX(&lt;angle&gt;)</span> and <span style="font-family: Courier New,Courier,monospace">rotate3d(1, 0, 0, &lt;angle&gt;)</span> functions perform the same task.</li>
+</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, 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, 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, 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, 0, 0.4, 0, 0, 0, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&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; transform: translate3d(-5px, -5px, -60px) rotateY(70deg);&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt; transform: translate3d(15px, 15px, 60px) rotateY(70deg);&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;/body&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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/transition_w.htm b/org.tizen.guides/html/web/w3c/dom/transition_w.htm
new file mode 100644 (file)
index 0000000..78b050a
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/transition_w.htm
@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Transitions Module Level 3</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm">CSS Transitions Module Level 3 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Transitions Module Level 3</h1>
+
+<p>Transitions allow you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm#modify">enable implicit transitions</a>, which describe how the CSS properties can be made to change smoothly from one value to another over a given duration. To enhance the rendering performance, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm#hw">use hardware acceleration</a>.</p>
+
+<p>When using the CSS transition properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
+
+<h2 name="prop" id="prop">Transition Properties</h2> 
+ 
+<p>You can define various properties to control the element transitions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">transition-property</span>
+<p>This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transition-duration</span>
+<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <span style="font-family: Courier New,Courier,monospace">transition-property</span> property.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transition-timing-function</span>
+<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <span style="font-family: Courier New,Courier,monospace">ease</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0.25, 0.1, 0.25, 1)</span>, and the <span style="font-family: Courier New,Courier,monospace">linear</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0, 0, 1, 1)</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transition-delay</span>
+<p>This property defines the delay time before the start of the transition.</p></li>
+
+</ul>
+
+<p>The following code snippet demonstrates how to use transition properties. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_property.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;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;/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;/body&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property allows you to define all the transition properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">transition-property</span> | <span style="font-family: Courier New,Courier,monospace">transition-duration</span> | <span style="font-family: Courier New,Courier,monospace">transition-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">transition-delay</span>. 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&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property connects movement more naturally than the more generally used the pseudo classes, such as <span style="font-family: Courier New,Courier,monospace">:hover</span> or <span style="font-family: Courier New,Courier,monospace">:active</span>. The smooth effect can be achieved more conveniently and easily with the <span style="font-family: Courier New,Courier,monospace">transition</span> property than with JavaScript or Flash, and the <span style="font-family: Courier New,Courier,monospace">transition</span> property also supports the browser side to provide excellent performance.</p>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/woff_w.htm b/org.tizen.guides/html/web/w3c/dom/woff_w.htm
new file mode 100644 (file)
index 0000000..79a0423
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/dom/woff_w.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>WOFF File Format 1.0</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm">WOFF File Format 1.0 Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>WOFF File Format 1.0</h1>
+
+<p>You can decode and restore font data easily.</p>
+
+<p>The new text features in WOFF File Format 1.0 include:</p>
+<ul>
+
+<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"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rule</a> to display it identically with the input font. The <span style="font-family: Courier New,Courier,monospace">@font-face</span> 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="../../../../../org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm#woff">use WOFF</a> within a Web page. </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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
new file mode 100644 (file)
index 0000000..dbab3ad
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
@@ -0,0 +1,128 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm">HTML5 Canvas Tutorial</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas">HTML5 canvas element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">HTML5 canvas element API for Wearable Web</a></li>
+                       </ul>
+       </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. To use the canvas, you must <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm#canvas">insert a &lt;canvas&gt; element</a> in the HTML page.</p> 
+ 
+<p>In the 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>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The canvas currently supports 2D graphics only, since the 3D graphics specification is still in progress. The <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> API is currently called 3D Canvas, and is used to express 3D graphics. For more information on the performance differences between Canvas 2D and WebGL in mobile applications, see <a href="#comparison">Performance Comparison of Canvas 2D and WebGL</a>.</td> 
+      </tr> 
+     </tbody> 
+</table>
+
+<p>The main features of the Canvas Element API include:</p>
+<ul>
+<li>Using images
+<p>To <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm#image">use images in the canvas</a>, use the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> 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>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">To edit the created image, you must comply with the same-origin policy.</td> 
+      </tr> 
+     </tbody> 
+</table>
+</li>
+<li>Drawing shapes
+<p>With the HTML Canvas 2D Context API, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm#shape">draw various shapes</a>, such as rectangles (<span style="font-family: Courier New,Courier,monospace">rect()</span>), circles (<span style="font-family: Courier New,Courier,monospace">arc()</span> and <span style="font-family: Courier New,Courier,monospace">arcTo()</span>), and lines (<span style="font-family: Courier New,Courier,monospace">lineTo()</span> and <span style="font-family: Courier New,Courier,monospace">bezierCurveTo()</span>) to a canvas. You can define the position and size of the shapes, and also merge shapes with other shape objects.</p>
+<p>You can also <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm#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="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm#text">create text or lines</a> other than images and shapes. For all canvas objects (images, shapes, text, and lines), you can define colors (the <span style="font-family: Courier New,Courier,monospace">fillStyle</span> and <span style="font-family: Courier New,Courier,monospace">strokeStyle</span> attributes), shadows (the <span style="font-family: Courier New,Courier,monospace">shadowColor</span> and <span style="font-family: Courier New,Courier,monospace">shadowBlur</span> attributes), and gradation (the <span style="font-family: Courier New,Courier,monospace">createLinearGradient()</span> method). You can also use the transformation methods, such as <span style="font-family: Courier New,Courier,monospace">scale()</span>, <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">transform()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate()</span>, to implement, for example, transparency or shape gradient transformations.</p>
+</li>
+</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>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><li>Load an image.</li> 
+<li>Render the loaded image in the random location of the canvas.</li>  
+<li>Use the    <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> 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 class="figure">Figure: Test result</p> 
+  <p style="text-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 class="figure">Figure: WebGL support in computer and mobile browsers</p> 
+  <p style="text-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>  
+
+ 
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..87ffd67
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm">Graphics Tutorials</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+   <h1>Graphics</h1>
+   <p>Graphics features include creating and editing various kinds of images, shapes, text, and elements.</p>
+  <p>The main graphics features are:</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> 
+   </ul>
+ 
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
new file mode 100644 (file)
index 0000000..daf9d2b
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm">HTML5 SVG Tutorial</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">HTML5 SVG API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">HTML5 SVG API for Wearable Web</a></li>
+                       </ul>
+       </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 <span style="font-family: Courier New,Courier,monospace">svg</span> tag is used in the XML format, and can be added as an inline element in HTML.</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">svg</span> tag in HTML <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element to <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm#make">create various SVG elements</a>:</p>
+
+<ul>
+<li>Images
+       
+<p>For the images, 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&gt;</pre>
+</li>
+<li>Text
+
+<p>For the text, 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&gt;
+</pre>
+</li>
+<li>Shapes
+<p>The following code snippet demonstrates how to retrieve shapes. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_shape.html</a>.</p>
+
+<p>For the shapes, define the shape, size, location on the screen, line width, and the line and fill colors:</p>
+<pre class="prettyprint">
+&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;circle cx=&quot;150&quot; cy=&quot;100&quot; r=&quot;60&quot; fill=&quot;blue&quot; stroke=&quot;red&quot; stroke-width=&quot;3&quot; /&gt;
+&lt;/svg&gt;</pre>
+</li>
+</ul>
+
+<p>You can manage multiple SVG element easily by <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm#group">grouping them together</a>. You can also <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm">animate SVG elements</a> and <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm#control">control them through scripting</a>. For more information on using SVG, see <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/" target="_blank">Scalable Vector Graphics (SVG) Tiny 1.2 Specification</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
new file mode 100644 (file)
index 0000000..d27424c
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
@@ -0,0 +1,89 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Guide to W3C/HTML5 and Some Supplementary Features</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm">W3C/HTML5 and Some Supplementaries Tutorials</a></li> 
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Guide to W3C/HTML5 and Some Supplementary Features</h1>
+
+<p>W3C/HTML and supplementary Web guides introduce the various features that you can use in creating Tizen Web applications.</p>
+
+<p>Select the feature you are interested in and see what Tizen offers for your application:</p>
+
+<ul>
+       <li><a href="dom/dom_guide_w.htm">DOM, Forms and Styles</a>
+       <p>Enables you to use various CSS style and HTML5 form features.</p></li>
+       <li><a href="device/device_guide_w.htm">Device</a>
+       <p>Enables you to manage information about device-specific features, such as vibration and browser state.</p></li>
+       <li><a href="graphics/graphics_guide_w.htm">Graphics</a>
+       <p>Enables you to use graphics features, such as HTML5 canvas and SVG support.</p></li>
+       <li><a href="media/media_guide_w.htm">Media</a>
+       <p>Enables you to use media features, such as audio and video elements and media capture.</p></li>
+       <li><a href="communication/comm_guide_w.htm">Communication</a>
+       <p>Enables you to use various communication features, such as bi-directional network connectivity, XML HTTP requests, and Web Messaging.</p></li>
+       <li><a href="storage/storage_guide_w.htm">Storage</a>
+       <p>Enables you to store data in, for example, files, application caches, and SQL databases.</p></li>
+       <li><a href="security/security_guide_w.htm">Security</a>
+       <p>Enables you to use security features, such as sharing resources across different domains.</p></li>
+       <li><a href="perf_opt/performance_guide_w.htm">Performance and Optimization</a>
+       <p>Enables you to use Web workers used to run scripts in the background.</p></li>
+       <li><a href="location/location_guide_w.htm">Location</a>
+       <p>Enables you to use geolocation features.</p></li>
+       <li><a href="ui/ui_guide_w.htm">UI</a> <span style="color: red">in mobile applications only</span>
+       <p>Enables you to handle the application UI through the clipboard and drag and drop events.</p></li>    
+       <li><a href="useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
+       <p>Enables you to use common W3C features related to various APIs.</p></li>
+       <li><a href="supplement/supplement_guide_w.htm">Supplementary Features</a>
+       <p>Enables you to take advantage of supplementary features, such as full screen views, typed arrays, and the WebGL graphics library.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/web/w3c/location/geolocation_w.htm b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
new file mode 100644 (file)
index 0000000..7fbc37e
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Geolocation API Specification</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm">Geolocation API Specification Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation API Specification for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation API Specification for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Geolocation API Specification</h1>
+
+<p>Geolocation defines a location information interface. Common sources of location information are GPS, location inferred from the network (such as IP address), RFID, Wi-Fi, Bluetooth MAC address, and GSM/CDMA cell IDs. The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface is implemented by the <span style="font-family: Courier New,Courier,monospace">Navigator</span> object instances. The location information is represented by the latitude and longitude coordinates.</p>
+
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In almost all cases, the location information reveals the location of the device user. To provide privacy for the user, a confirmation mechanism is provided for the geolocation features.</td> 
+      </tr> 
+     </tbody>
+</table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Geolocation</span> interface allows you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm#Retrieving_Location_Info">retrieve position information</a> with &quot;one-shot&quot; position requests (with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method) or repeated position updates (with the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> 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>
+<li>Options object, which holds additional properties (optional):
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">enableHighAccuracy</span> enables high accuracy of the location information.</li>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span> defines the maximum length of time that is allowed to pass from the call until the corresponding success event handler is invoked.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximumAge</span> indicates that the application can accept cached location information whose age is no greater than the specified time.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..791250b
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm">Location Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Location</h1>
+
+  <p>Location features include managing the user location data.</p>
+
+  <p>The main location features are:</p>
+  <ul>
+       <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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
new file mode 100644 (file)
index 0000000..4cfa1b2
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>getUserMedia</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm">getUserMedia Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>getUserMedia</h1>
+<p>You can access multimedia streams, such as camera, on a local device. The feature can be used, for example, for real-time communication, recording, and surveillance.</p>
+
+<p>The main features of the getUserMedia API include:</p>
+<ul>
+<li>Retrieving multimedia streams
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">navigator.webkitGetUserMedia()</span> method to request user access to retrieve the multimedia streams of local devices, such as camera. The method returns the media as a JSON object.</p> </li>
+<li>Capturing media
+<p>You can capture <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm#capture">media content</a> and transform it to various formats.</p>
+
+</li>
+</ul>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">Tizen supports a WebKit-based <span style="font-family: Courier New,Courier,monospace">GetUserMedia()</span> method, so always use it in the <span style="font-family: Courier New,Courier,monospace">webkitGetUserMedia()</span> format.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..0aeb8ca
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Media Capture</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm">HTML Media Capture Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>HTML Media Capture</h1>
+ 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+ 
+<p>Media capture uses the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute of the <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/#dfn-htmlinputelement" target="_blank">HTMLInputElement</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm#activate">activate features</a>, such as camera or microphone, to enable direct media capture when the user is uploading a file.</p>
+
+<p>The following media formats can be used with the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">filesystem</span> <p>Activates the device file picker.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">camera</span> <p>Activates the device camera.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">camcorder</span> <p>Activates the device video camera.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">microphone</span><p>Activates the device sound recorder.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
new file mode 100644 (file)
index 0000000..f3fda85
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Media</h1>
+  <p>Media features include playing various media, and accessing media streams and capture capabilities.</p>
+  <p>The main media features are:</p>
+  <ul> 
+  <li><a href="getusermedia_w.htm">getUserMedia</a> <p>Enables you to access a local device to generate a multimedia stream.</p></li>
+  <li><a href="video_audio_w.htm">HTML5 video and audio element</a> <p>Enables you to control multimedia playback, retrieve information about playback duration and media content downloading progress, and check supported media formats using the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;audio&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;video&gt;</span> elements.</p></li>
+  </ul>
+  
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
+<ul>
+  <li><a href="media_capture_w.htm">HTML Media Capture</a> <p>Enables you to easily access the media capture capabilities, such as a camera or microphone, based on their type using the HTML <span style="font-family: Courier New,Courier,monospace">capture</span> attribute.</p></li>
+  <li><a href="webaudio_w.htm">Web Audio</a> <p>Enables you to play audio content using the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;audio&gt;</span> element.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..f4bed6c
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
@@ -0,0 +1,187 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 video and audio element</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm">HTML5 video and audio element Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#audio">HTML5 audio element API for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#video">HTML5 video element API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>HTML5 video and audio element</h1>
+ 
+<p>You can use the HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements to play multimedia files streaming, without a separate plug-in.</p>
+<p>Using JavaScript, the playback can be controlled with <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media events</a>. The audio and video elements used as media elements inherit all the properties and methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.</p>
+
+<p>The main features of the audio and video elements with JavaScript include:</p>
+<ul>
+<li>Creating a player
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#create">create a simple audio and video player</a>.</p></li>
+<li>Controlling the playback
+<p>You can use the  <span style="font-family: Courier New,Courier,monospace">Play()</span> and  <span style="font-family: Courier New,Courier,monospace">Pause()</span> 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="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
+</li>
+<li>Retrieving duration and play time
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#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>
+</li>
+<li>Playing from a random position
+<p>You can indicate the playback time by <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#move">playing the media file from a random position</a>. To do this, you must change the <span style="font-family: Courier New,Courier,monospace">currentTime</span> value of the <span style="font-family: Courier New,Courier,monospace">Media</span> 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>
+</li>
+<li>Retrieving progress state
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#display">retrieve and display the download progress state</a> using the <span style="font-family: Courier New,Courier,monospace">Progress</span> media event, which is triggered when information related to the progress of a media object loading media contents is updated.</p></li>
+<li>Checking supported media formats
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#check">check whether the media data can be played</a> using the <span style="font-family: Courier New,Courier,monospace">canPlayType()</span> method. Basically, the MIME type must be set in the Web server in a format that is supported in Tizen. If a non-supported MIME type is used, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#handle">handle exceptions</a> in advance.</p>
+<p>Tizen supports the following media formats: </p>
+<ul>
+<li>Video: 3GP, AVI, ASF, OGV, MP4, MKV, WMV</li>
+<li>Audio: AAC, AMR, MP3, OGG, WAV, WMA</li>
+</ul>
+<p>The following table lists the codecs supported in Tizen.</p>
+<table>
+<caption>Table: Supported codecs</caption>
+   <colgroup>
+    <col width="20%" />
+    <col width="40%" />
+    <col width="20%" />
+    <col width="20%" />
+   </colgroup>
+<tbody>
+    <tr>
+     <th>Type</th>
+     <th>Codec</th>
+     <th>Encoder</th>
+     <th>Decoder</th>
+    </tr>
+     <tr>
+     <td rowspan="10" colspan="1"> <p> Video</p> </td>
+     <td rowspan="1" colspan="1"> <p> MPEG-1 </p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v1</p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v2</p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v3</p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> H.264, H.263-1996, H.263+, H263-1998, H263 v2</p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> H.264, MPEG-4 AVC, MPEG-4 part10</p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> WMV3</p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> VC1</p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p>THEORA</p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="6" colspan="1"> <p> Audio</p> </td>
+     <td rowspan="1" colspan="1"> <p> AAC </p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> MP3 </p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> WMA (Available up to WMA8. WMA9 is not available.)</p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> AMR-NB</p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> AMR-WB</p> </td>
+     <td rowspan="1" colspan="1"> <p> No </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> VORBIS</p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
+    </tr>
+</tbody>
+</table>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
new file mode 100644 (file)
index 0000000..44ca80e
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Audio</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm">Web Audio Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webaudio">Web Audio API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Web Audio</h1>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+<p>Tizen provides a high quality sound by setting space and direction through audio data, and synthesizing them. It is used in the audio engines of the sophisticated games to mix, process, and filter effects.</p>
+
+<p>The main features of the Web Audio API include:</p>
+
+<ul>
+<li>Loading source data
+<p>You must <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#load">load source data</a> before using the Web Audio API. You can do this using <a href="../communication/xmlhttprequest_w.htm">XMLHttprequest</a>.</p>
+
+<p>The <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface is used to manage and play the sound. It creates a high quality sound and connects to the destination of the sound.</p>
+</li>
+<li>Modular routing
+<p><a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#ModularRouting-section" target="_blank">Modular routing</a> means <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#use">routing audio data</a> either in a direct manner, such as speaker output, or through a connection to <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a>, which handle, for example, volume adjustment and filters.</p></li>
+<li>Playing sound
+<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOn(time)</span> or <span style="font-family: Courier New,Courier,monospace">start(time)</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#play">play sound</a> with the time parameter for specifying the time interval in seconds after which the audio is played. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies playing the audio immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio is played after 0.75 seconds.</p></li>
+<li>Stopping sound
+<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOff(time)</span> or <span style="font-family: Courier New,Courier,monospace">stop(time)</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#play">stop sound</a> with the time parameter for specifying the time interval in seconds after which the audio playback is stopped. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies stopping the audio playback immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio playback is stopped after 0.75 seconds.</p>
+<p>After stopping sound, recreate the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..1752cf0
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
@@ -0,0 +1,264 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>jQuery Performance Improvement</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#selector">Using Selectors</a></li>
+                       <li><a href="#cache">Using Caches</a></li>
+                       <li><a href="#chaining">Using Chaining</a></li>
+                       <li><a href="#dom">Managing DOM Control</a></li>
+               </ul>
+
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>jQuery Performance Improvement</h1>
+<p>The following techniques of writing JavaScript code can be used to improve application performance when using jQuery:</p>
+<ul>
+       <li><a href="#selector">Using selectors</a></li>
+       <li><a href="#cache">Using caches</a></li>
+       <li><a href="#chaining">Using chaining</a></li>
+       <li><a href="#dom">Managing DOM control</a></li></ul>
+<p>The following example HTML code has been used as a basis when describing the techniques:</p>
+<pre class="prettyprint">&lt;div id=&quot;contents&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt; 
+&lt;/div&gt;
+&lt;div id=&quot;contents1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom1&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
+&lt;/div&gt;
+&lt;div id=&quot;contents2&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list2&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom2&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
+&lt;/div&gt;
+&lt;div id=&quot;contents3&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list3&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom3&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
+&lt;/div&gt;
+&lt;div id=&quot;contents4&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list4&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom4&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
+&lt;/div&gt;
+&lt;div id=&quot;contents5&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list5&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom5&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
+&lt;/div&gt;</pre>
+ <h2 id="selector" name="selector">Using Selectors</h2>
+<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>
+<pre class="prettyprint">/* Code#1 */
+var search_button = $(&#39;button&#39;);</pre>
+<pre class="prettyprint">/* Code#2 */
+var search_button = $(&#39;#contents button&#39;);</pre>
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector1.png" /></p> 
+<table border="1">
+       <caption>Table: jQuery performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.118</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+<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>
+<pre class="prettyprint">/* Code#1 */
+var search_button = $(&#39;.blue&#39;);</pre>
+<pre class="prettyprint">/* Code#2 */
+var search_button = $(&#39;button.blue&#39;);</pre>
+<pre class="prettyprint">/*Code#3*/
+var search_button = $(&#39;#contents button.blue&#39;);</pre>
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector2.png" /></p>
+  <table>
+       <caption>Table: jQuery performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+<th> Execution time for Code#3</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.105</td>
+<td>0.100</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="cache" name="cache">Using Caches</h2>
+<p> When referring to a DOM object, you can first create a cache for it.</p>
+<p>Without doing this, every time a DOM object is called, DOM is searched to return a new jQuery object, which degrades performance.</p>
+<p>The following example shows how using a cache improves performance.</p>
+<pre class="prettyprint">/* Code#1 */
+$(&quot;#search_dom&quot;).on(&#39;click&#39;, function() {});
+$(&quot;#search_dom&quot;).removeClass(&#39;blue&#39;);
+$(&quot;#search_dom&quot;).addClass(&#39;red&#39;);</pre>
+<pre class="prettyprint">/* Code#2 */
+var $search_button = $(&quot;#search_dom&quot;);
+$search_button.on(&#39;click&#39;, function() {});
+$search_button.removeClass(&#39;blue&#39;);
+$search_button.addClass(&#39;red&#39;);</pre>
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_cache.png" /></p> 
+<table border="1">
+       <caption>Table: jQuery performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+                       <th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.104</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="chaining" name="chaining">Using Chaining</h2>
+<p> Chaining makes the code lighter and reduces repeated operations, such as reflow and repaint.</p>
+<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>
+<pre class="prettyprint">/* Code#1 */
+$(&quot;#contents&quot;).addClass(&#39;active&#39;);
+$(&quot;#contents&quot;).css(&#39;border&#39;, &#39;1px solid&#39;);
+$(&quot;#contents&quot;).(&#39;background-color&#39;, &#39;red&#39;);</pre>
+<pre class="prettyprint">/* Code#2 */
+$(&quot;#contents&quot;).addClass(&#39;active&#39;).css(&#39;border&#39;, &#39;1px solid&#39;).(&#39;background-color&#39;, &#39;red&#39;);</pre>
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p> 
+<table border="1">
+       <caption>Table: jQuery performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+                       <th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.108</td>
+                       <td>0.101</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="dom" name="dom">Managing DOM Control</h2>
+<p>Minimizing direct DOM manipulation improves jQuery performance. Every time an element is created and inserted, time and capacity is needed. Using a cached selector with the <span style="font-family: Courier New,Courier,monospace">append()</span> method reduces the need for capacity.</p>
+<p>The following example shows how applying DOM control improves performance.</p>
+<pre class="prettyprint">/* Code#1 */
+var $contents_list = $(&#39;#contents_list&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...];
+
+for (var i = 0, len = array_list.length; i &lt; len; i++)
+{
+&nbsp;&nbsp;&nbsp;$contents_list.append(&#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;);
+}</pre>
+<pre class="prettyprint">/* Code#2 */
+var $contents_list = $(&#39;#contents_list&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...],
+&nbsp;&nbsp;&nbsp;&nbsp;list = &#39;&#39;;
+
+for (var i = 0, len = array_list.length; i &lt; len; i++)
+{
+&nbsp;&nbsp;&nbsp;list += &#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;;
+}
+$contents_list.append(list);</pre>
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_jquery_dom.png" /></p> 
+<table border="1">
+       <caption>Table: jQuery performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+                       <th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.120</td>
+                       <td>0.101</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..5b5ceb8
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>JavaScript Performance Improvement</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#debugging">Removing the Debugging Statement</a></li>
+                       <li><a href="#loops">Removing Slow Loop Statements</a></li>
+                       <li><a href="#arraylength">Using Cached Array Length</a></li>
+                       <li><a href="#literal">Using Literal Expressions</a></li>
+                       <li><a href="#dom">Managing DOM Control</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>JavaScript Performance Improvement</h1>
+<p>The following techniques of writing JavaScript code can be used to improve application performance:</p>
+<ul>
+       <li><a href="#debugging">Removing the debugging statement</a></li>
+       <li><a href="#loops">Removing slow loop statements</a></li>
+       <li><a href="#arraylength">Using cached array length</a></li>
+       <li><a href="#literal">Using literal expressions</a></li>
+       <li><a href="#dom">Managing DOM control</a></li>
+</ul>
+ <h2 id="debugging" name="debugging">Removing the Debugging Statement</h2>
+<p> The <span style="font-family: Courier New,Courier,monospace">console.log</span> statement, which is frequently used in JavaScript debugging, can cause poor performance. The following example shows how deleting the statement improves performance.</p>
+<pre class="prettyprint">/* Code#1 */
+var array_list = [0,1,2,3,4,5,6,7,8,9],
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
+
+for (var i = 0, len = array_list.length; i &lt; len; i++)
+{
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
+&nbsp;&nbsp;&nbsp;console.log(array_list[i]);
+}</pre>
+<pre class="prettyprint">/* Code#2 */
+var array_list = [0,1,2,3,4,5,6,7,8,9],
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
+
+for (var i = 0, len = array_list.length; i &lt; len; i++)
+{
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i])
+}</pre>
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_debug.png" /></p> 
+<table border="1">
+       <caption>Table: JavaScript performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.823</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="loops" name="loops">Removing Slow Loop Statements</h2>
+<p> The <span style="font-family: Courier New,Courier,monospace">for - in</span> loop is relatively slower than the other loops, such as <span style="font-family: Courier New,Courier,monospace">for</span> , <span style="font-family: Courier New,Courier,monospace">while</span>,  and <span style="font-family: Courier New,Courier,monospace">do - while</span>, as it assigns object properties to the variable (<span style="font-family: Courier New,Courier,monospace">idx</span>  in the example below), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>
+<pre class="prettyprint">/* Code#1 */
+var array_list = [0,1,2,3,4,5,6,7,8,9],
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
+for (var idx in array_list)
+{
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[idx]);
+}</pre>
+
+<pre class="prettyprint">/* Code#2 */
+var array_list = [0,1,2,3,4,5,6,7,8,9],
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
+for (var i = 0, len = array_list.length; i &lt; len; i++)
+{
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
+}</pre>
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_loop.png" /></p> 
+  <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">By caching the <span style="font-family: Courier New,Courier,monospace">array_list.length</span> before using it, as shown in the second example above, better performance is achieved. For more information, see <a href="#arraylength">Using cached array length</a>.</td> 
+      </tr> 
+     </tbody>
+</table>
+<table border="1">
+       <caption>Table: JavaScript performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.150</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="arraylength" name="arraylength">Using Cached Array Length</h2>
+<p>In a loop statement, you can cache the length of an array before using it instead of using it directly in the loop. Minimizing the steps taken to search for the scope chain activation object speeds up the response performance. The following example shows how caching the array list improves performance.</p>
+<pre class="prettyprint">/* Code#1 */
+var array_list = [],
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],
+&nbsp;&nbsp;&nbsp;&nbsp;i = 0;
+for (i = 0; i &lt; 100; i++)
+{
+&nbsp;&nbsp;&nbsp;array_list.push(i);
+}
+for (i = 0; i &lt; array_list.length; i++)
+{
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
+}</pre>
+<pre class="prettyprint">/* Code#2 */
+var array_list = [],
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],
+&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;arrayLen = 0;
+for (i = 0; i &lt; 100; i++)
+{
+&nbsp;&nbsp;&nbsp;array_list.push(i);
+}
+for (i = 0, arrayLen = array_list.length; i &lt; arrayLen; i++)
+{
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
+}</pre>
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_array.png" /></p> 
+<table border="1">
+       <caption>Table: JavaScript performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.104</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="literal" name="literal">Using Literal Expressions</h2>
+<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>
+<pre class="prettyprint">/* Code#1 */
+var str = &quot;&quot;;    
+for (var i = 0; i &lt; 100; i++)
+{
+&nbsp;&nbsp;&nbsp;str = new String(&quot;abcd&quot;);
+}</pre>
+<pre class="prettyprint">/* Code#2 */
+var str = &quot;&quot;;    
+for (var i = 0; i &lt; 100; i++)
+{
+&nbsp;&nbsp;&nbsp;str = &quot;abcd&quot;;
+}</pre>
+
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_literal.png" /></p> 
+<table border="1">
+       <caption>Table: JavaScript performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.197</td>
+                       <td>0.100</td>
+               </tr>
+       </tbody>
+</table>
+ <h2 id="dom" name="dom">Managing DOM Control</h2>
+<p> Rendering performance can be improved by minimizing direct DOM manipulation and creating a new instance of a cached DOM object.</p>
+<p>When referring to variables, JavaScript revolves around a scope chain (variable object set that can be accessed in the current scope). The deeper the scope chain, the more execution time is needed.</p>
+<p>The following example shows how applying DOM control improves performance.</p>
+<pre class="prettyprint">/* Code#1 */
+var id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);
+var name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);
+var style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);
+for (var i = 0; i &lt; 100; i++)
+{
+&nbsp;&nbsp;&nbsp;id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);
+&nbsp;&nbsp;&nbsp;name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);
+&nbsp;&nbsp;&nbsp;style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);
+}</pre>
+<pre class="prettyprint">/* Code#2 */
+var contents_list = document.getElementById(&#39;contents_list&#39;);
+var id = contents_list.getAttribute(&#39;id&#39;);
+var name = contents_list.getAttribute(&#39;name&#39;);
+var style = contents_list.getAttribute(&#39;style&#39;);
+for (var i = 0; i &lt; 100; i++)
+{
+&nbsp;&nbsp;&nbsp;id = contents_list.getAttribute(&#39;id&#39;);
+&nbsp;&nbsp;&nbsp;name = contents_list.getAttribute(&#39;name&#39;);
+&nbsp;&nbsp;&nbsp;style = contents_list.getAttribute(&#39;style&#39;);
+}</pre>
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_js_dom.png" /></p> 
+<table border="1">
+       <caption>Table: JavaScript performance improvement result</caption>
+       <tbody>
+               <tr>
+                       <th>Browser</th>
+                       <th>Execution time for Code#1</th>
+<th> Execution time for Code#2</th>
+               </tr>
+               <tr>
+                       <td>Tizen</td>
+                       <td>0.119</td>
+                       <td>0.100</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
new file mode 100644 (file)
index 0000000..93e83ee
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
@@ -0,0 +1,277 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>JavaScript and CSS Minification</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#grunt">Installing and Using Grunt</a></li>
+                       <li><a href="#improvement">Improvement through Grunt</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>JavaScript and CSS Minification</h1>
+<p>File minification improves application performance as unnecessary data is being removed. For example, page loading time can be decreased by reducing the number of JavaScript and CSS files.</p>
+<p>Minifying tools, such as <a href="https://developers.google.com/closure/compiler/" target="_blank">Closure Compiler</a> and <a href="http://gruntjs.com/" target="_blank">Grunt</a>, include features that can combine and reduce JavaScript file. The following table shows Closure Compiler and Grunt features in comparison.</p>
+<table>
+       <caption>Table: Comparison of minifying tools</caption>
+       <tbody>
+               <tr>
+                       <th>Item</th>
+                       <th>Closure Compiler</th>
+                       <th>Grunt</th>
+               </tr>
+               <tr>
+                       <td>Summary</td>
+                       <td>
+                                       <p>JavaScript-optimized compiler created by Google</p></td>
+                       <td>
+                                       <p>Task-based automatic JavaScript build tool</p>
+</td>
+
+               </tr>
+<tr>
+       <td>Features</td>
+                       <td><ul>
+                                       <li>File compilation, minimizing size</li>
+                                       <li>Can be integrated with Ant Builder for automatic features</li>
+</ul></td>
+                       <td><ul>
+                                       <li>File compilation plug-in</li>
+                                       <li>Minimizing JavaScript and CSS</li>
+                                       <li>Various plug-ins (JavaScript, CSS compilation, and compression)</li>
+                                       <li>Application performance improvement based on the decrease of request count, transferred data, and transfer time</li>
+</ul></td>
+               </tr>
+<tr>
+                       <td>Usage</td>
+                       <td><ul>
+                               <li>Java applications<p>Provided as a <span style="font-family: Courier New,Courier,monospace">.jar</span> file, used as a command line.</p></li>
+                               <li><a href="http://closure-compiler.appspot.com/home" target="_blank">Web application</a></li>
+                               <li>RESTful API</li>
+</ul></td>
+                       <td><ul>
+                               <li><span style="font-family: Courier New,Courier,monospace">Node.js</span> installation</li>
+                               <li><span style="font-family: Courier New,Courier,monospace">grunt-cli</span> installation</li>
+                               <li><span style="font-family: Courier New,Courier,monospace">package.json</span> must be inserted to the project root</li>
+                               <li>Task definition in the <span style="font-family: Courier New,Courier,monospace">gruntfile.js</span> file</li>
+</ul></td>
+               </tr>
+       </tbody>
+</table>
+<p>Grunt has advantages in terms of expandability by providing various plug-ins. For more information about Grunt, see:</p>
+<ul>
+       <li><a href="#grunt">Installing and using Grunt</a></li>
+       <li><a href="#improvement">Improvement through Grunt</a></li>
+</ul>
+ <h2 id="grunt" name="grunt">Installing and Using Grunt</h2>
+ <p>The Grunt tool provides application performance improvement based on the decrease of request count, transferred data, and transfer time.</p>
+ 
+  <h3 id="prerequisites" name="prerequisites">Prerequisites</h3>
+ <p>The commands used for installing and using Grunt work in the same manner, without any changes, across most of the major operating systems. To run the commands, you may need to use sudo (for Linux and BSD), or run your command shell as Administrator (for Windows&reg;).</p>
+ <h3 id="install" name="install">Installing Grunt</h3>
+ <ol>
+       <li>Install the <a href="http://www.nodejs.org/" target="_blank">Node.js</a> platform. The platform includes the Node.js package manager, npm, which is used to install Grunt CLI (command line interface).</li>
+       <li>Install Grunt CLI: 
+       <pre class="prettyprint">npm install -g grunt-cli /* -g: global type */</pre></li>
+ </ol>
+ <h3 id="use" name="use">Using Grunt</h3>
+ <ol>
+       <li>Change to the root directory of the project:
+       <pre class="prettyprint">cd &lt;Project root&gt;</pre></li>
+       <li>Install Grunt and create the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file:
+       <pre class="prettyprint">npm install grunt --save-dev</pre></li>
+       <li>Create the <span style="font-family: Courier New,Courier,monospace">package.json</span> file: <p>When executing the following command, interactive prompt that receives information on the project is executed. Through the information entered, the <span style="font-family: Courier New,Courier,monospace">package.json</span> file is created.</p>
+       <pre class="prettyprint">npm init</pre></li>
+       <li>Install Grunt plug-in:
+       <pre class="prettyprint">/* Install grunt concat */
+npm install grunt-contrib-concat --save-dev
+
+/* Install grunt contrib uglify */
+npm install grunt-contrib-uglify --save-dev
+
+/* Install grunt contrib cssmin */
+npm install grunt-contrib-cssmin --save-dev
+</pre></li>
+       <li>Run the Grunt plug-in:
+       <pre class="prettyprint">grunt</pre>
+       <p>Using the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file, tasks, such as <span style="font-family: Courier New,Courier,monospace">concat</span>, <span style="font-family: Courier New,Courier,monospace">uglify</span>, and <span style="font-family: Courier New,Courier,monospace">cssmin</span>, are registered.</p></li>
+ </ol>
+  <h2 id="improvement" name="improvement">Improvement through Grunt</h2>
+ <p>After running the Grunt plug-in, the below comparison result is shown through Chrome inspector. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>
+ <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For the sake of comparing improvement, in the following examples, 2 Web applications have been arbitrarily chosen and named App#1 and App#2.</td> 
+      </tr> 
+     </tbody>
+</table>
+<table border="1">
+       <caption>Table: Result for App #01</caption>
+       <tbody>
+               <tr>
+                       <th colspan="2" rowspan="2">Item</th>
+                       <th colspan="2">Request (count)</th>
+                       <th colspan="2">Transferred data (mb)</th>
+                       <th colspan="2">Onload time (s)</th>
+               </tr>
+               <tr>
+                       <th>Result</th>
+                       <th>Improvement</th>
+                       <th>Result</th>
+                       <th>Improvement</th>
+                       <th>Result</th>
+                       <th>Improvement</th>
+               </tr>
+               <tr>
+                       <td colspan="2" align="center">Original</td>
+                       <td>254</td>
+                       <td>-</td>
+                       <td>6.66</td>
+                       <td>-</td>
+                       <td>3.28</td>
+                       <td>-</td>
+               </tr>
+               <tr>
+                       <td rowspan="3" align="center">Minification applied (accumulated result)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>
+                       <td><strong>68</strong></td>
+                       <td><strong>-186</strong></td>
+                       <td>6.62</td>
+                       <td>-0.04</td>
+                       <td><strong>2.43</strong></td>
+                       <td><strong>-0.85</strong></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>
+                       <td>68</td>
+                       <td>-</td>
+                       <td><strong>1.90</strong></td>
+                       <td><strong>-4.72</strong></td>
+                       <td><strong>1.59</strong></td>
+                       <td><strong>-0.85</strong></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>
+                       <td>68</td>
+                       <td>-</td>
+                       <td><strong>1.87</strong></td>
+                       <td><strong>-0.03</strong></td>
+                       <td><strong>1.61</strong></td>
+                       <td><strong>0.02</strong></td>
+               </tr>
+               <tr>
+                       <td colspan="2" align="center">Total improvement</td>
+                       <td colspan="2" align="center">73.23% improvement</td>
+                       <td colspan="2" align="center">71.92% improvement</td>
+                       <td colspan="2" align="center">51.07% improvement</td>
+               </tr>
+       </tbody>
+</table>
+<table border="1">
+       <caption>Table: Result for App #02</caption>
+       <tbody>
+               <tr>
+                       <th colspan="2" rowspan="2">Item</th>
+                       <th colspan="2">Request (count)</th>
+                       <th colspan="2">Transferred data (mb)</th>
+                       <th colspan="2">Onload time (s)</th>
+               </tr>
+               <tr>
+                       <th>Result</th>
+                       <th>Improvement</th>
+                       <th>Result</th>
+                       <th>Improvement</th>
+                       <th>Result</th>
+                       <th>Improvement</th>
+               </tr>
+               <tr>
+                       <td colspan="2" align="center">Original</td>
+                       <td>235</td>
+                       <td>-</td>
+                       <td>7.89</td>
+                       <td>-</td>
+                       <td>5.80</td>
+                       <td>-</td>
+               </tr>
+               <tr>
+                       <td rowspan="3" align="center">Minification applied (accumulated result)</td>
+                       <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>
+                       <td><strong>106</strong></td>
+                       <td><strong>-129</strong></td>
+                       <td>7.87</td>
+                       <td>-0.02</td>
+                       <td><strong>5.15</strong></td>
+                       <td><strong>-0.65</strong></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>
+                       <td>106</td>
+                       <td>-</td>
+                       <td><strong>5.85 </strong></td>
+                       <td><strong>-2.02</strong></td>
+                       <td><strong>4.95</strong></td>
+                       <td><strong>-0.19</strong></td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>
+                       <td>106</td>
+                       <td>-</td>
+                       <td><strong>5.84</strong></td>
+                       <td><strong>-0.01</strong></td>
+                       <td><strong>4.89</strong></td>
+                       <td><strong>-0.06</strong></td>
+               </tr>
+               <tr>
+                       <td colspan="2" align="center">Total improvement</td>
+                       <td colspan="2" align="center">54.89% improvement</td>
+                       <td colspan="2" align="center">25.98% improvement</td>
+                       <td colspan="2" align="center">15.63% improvement</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..dabe140
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Page Visibility</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm">Page Visibility Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#visibility">Page Visibility API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#visibility">Page Visibility API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Page Visibility</h1> 
+  
+<p>Page visibility can detect whether the Web document is being shown on the screen. With it, you can design your application to only operate when its page is visible, both enhancing the user experience and reducing the resource usage on the device.</p>
+
+  <p>The main features of the Page Visibility API include:</p> 
+  <ul> 
+   <li>Retrieving the page visibility status
+   <p>You can use 2 properties to <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm#Retrieving_Page_Visibility">detect the visibility status of the page</a>:</p>
+   <ul>
+       <li><p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns a boolean value indicating whether the page is visible.</p></li>
+       <li><p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns a DOMString type indicating whether the page is visible.</p></li>
+       </ul></li> 
+        <li>Tracking changes in page visibility
+   <p>You can use the <span style="font-family: Courier New,Courier,monospace">visibilitychange</span> event to be able to <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm#Retrieving_Notifications_Visibility">respond to changes in the page visibility status</a>.</p>
+    <p>For example, in a video player application, you can change the play status of the application based on the event: pause the playback when the page becomes hidden, and continue playing when the page becomes visible again.</p>
+  </li> 
+  </ul>
+  <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Tizen supports the WebKit-based Page Visibility API. When using the Page Visibility API, you must include the webkit prefix.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
new file mode 100644 (file)
index 0000000..7bb3d2c
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Optimization</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization API for Wearable Web</a></li>
+                       
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Performance and Optimization</h1> 
+  
+  <p>Performance and optimization features include animation rate and page visibility control, and Web worker management.</p> 
+  
+  <p>The main performance and optimization features are:</p>
+  <ul>
+  <li><a href="page_w.htm">Page Visibility</a> <p>Enables you to retrieve the visibility status of a Web document and detect changes in it.</p></li>
+  <li><a href="timing_control_w.htm">Timing control for script-based animations</a> <p>Enables you to control animation speed by scheduling frame update requests.</p></li>
+  <li><a href="web_workers_w.htm">Web Workers</a> <p>Enables you to create and manage HTML5 Web Workers to run an independent JavaScript thread on the background without affecting the device 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..8240cc7
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Timing control for script-based animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm">Timing control for script-based animations Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">Timing control for script-based animations API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Timing control for script-based animations</h1> 
+  
+<p>Timing control is used mainly in animations for cyclic script execution synchronized with screen changes.</p>
+<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> (or <span style="font-family: Courier New,Courier,monospace">webkitRequestAnimationFrame()</span>) method of the <a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/?cp=25_6_3_8_2#the-WindowAnimationTiming-interface" target="_blank">WindowAnimationTiming</a> interface enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen SDK version 2.2, it is about 60 fps.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In mobile applications, when using the Emulator, you must include the  <span style="font-family: Courier New,Courier,monospace">webkit</span> prefix in method names, such as <span style="font-family: Courier New,Courier,monospace">window.performance.webkitNow()</span>. 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:
+          <pre class="prettyprint">
+window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;
+window.performance.windowNow();
+</pre>
+
+<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>
+<pre class="prettyprint">
+window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;
+window.performance.windowNow();
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..1c36822
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
@@ -0,0 +1,347 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Workers</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#js_performance">JavaScript Performance</a></li>
+                       <li><a href="#multi">Multi-threading</a></li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm">Web Workers Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#web_workers">Web Workers API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#web_workers">Web Workers API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Web Workers</h1> 
+
+<p>Web workers run JavaScript in an independent thread instead of the main UI thread, improving the <a href="#js_performance">JavaScript performance</a> without affecting the UI.</p>
+<p>Web workers are not DOM-dependent. They handle pure data, which makes them especially suitable for JavaScript code that takes a long time to execute.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Workers use a same-origin policy and therefore using some of the browser resources, such as <span style="font-family: Courier New,Courier,monospace">DOM</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">window</span>, and <span style="font-family: Courier New,Courier,monospace">parent</span>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <span style="font-family: Courier New,Courier,monospace">postMessage()</span>, <span style="font-family: Courier New,Courier,monospace">location</span>, <span style="font-family: Courier New,Courier,monospace">navigator</span>, and <span style="font-family: Courier New,Courier,monospace">importScripts()</span> can be used. The <span style="font-family: Courier New,Courier,monospace">self</span> and <span style="font-family: Courier New,Courier,monospace">location</span> attributes are also supported.</td> 
+      </tr> 
+     </tbody>
+</table>
+<p>The main features of the Web Workers API include:</p>
+<ul>
+<li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Creating_Web_Worker">Creating workers</a>
+<p>
+The worker creates a new thread, and only runs when it is executed. It does not communicate with the UI thread or other same-level workers, and therefore, you cannot assign a work priority order. However, you can create subworkers using the <span style="font-family: Courier New,Courier,monospace">importScripts()</span> method to divide tasks.</p>
+</li>
+
+<li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Sending_Messages">Messaging between workers</a>
+<p>A subworker can communicate with the host worker using the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the HTML5 Web Messaging API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">wearable</a> applications). This process is normally used to give work orders to workers or subworkers, or deliver an operation result.</p>
+<p>
+If a worker triggers a message event, the <span style="font-family: Courier New,Courier,monospace">onmessage()</span> event handler can be used to check the sent message.</p>
+</li>
+
+<li><a href="#multi">Multi-threading</a>
+<p>Multi-thread web workers provide significant advantages over UI threads with higher response speed and lower memory usage in applications.</p>
+</li>
+</ul>
+
+ <h2 id="js_performance" name="js_performance">JavaScript Performance</h2>
+<p> JavaScript was originally used for simple inspections and request handling. Therefore, the execution time was not an issue. However, with more advanced UI usage, the use of JavaScript code has been increased and become more complicated, significantly influencing the application performance.</p>
+
+<p>Improving performance through effective JavaScript code consists of the following:</p>
+<ul>
+       <li><a href="js_performance_improvement_w.htm">JavaScript performance improvement</a></li>
+<li><a href="jquery_performance_improvement_w.htm">jQuery performance improvement</a></li>
+       <li><a href="minify_js_css_w.htm">JavaScript and CSS minification</a></li>
+</ul>
+<h2 id="multi" name="multi">Multi-threading</h2>
+<p>Generally, Web applications are built and run using a single UI thread. Since only 1 task can be handled at a time, the Web application may not respond due to the execution time of a script block, resulting in lower application performance. To solve these performance-related issues, multi-thread <a href="http://www.w3.org/TR/2012/CR-workers-20120501/" target="_blank">Web workers</a> can be used to provide distributed processing in applications. Use Web workers in applications that require complex calculations or parallel processing for better application performance.</p> 
+
+<p>Since the task of changing the image color using a canvas involves allocating a color value for each pixel of the image displayed on the screen, the program requires a complicated calculation to execute loops by the number of the pixels. The following examples of applying a color filter effects to an image to change the color show:</p> 
+<ul>
+<li><a href="#uithread">Problems with using UI threads</a></li>
+<li><a href="#multithread">Advantages of using multi-thread Web workers</a> </li></ul>
+
+<h3 id="uithread" name="uithread">Using UI Threads</h3>
+<p>The following example uses a UI thread to apply a color filter effect on an image and to display the time taken to apply the filter. Since all the calculations are performed in a single UI thread using the <span style="font-family: Courier New,Courier,monospace">colorFilter()</span> method, the execution time is high (16218 milliseconds).</p>
+
+<p class="figure">Figure: Color filter application using UI thread (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Color filter application using UI thread (in mobile applications only)" src="../../../images/color_filter_app_ui_thread.png" /></p>
+
+<pre class="prettyprint">function colorFilterStart()
+{
+&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);
+&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);
+&nbsp;&nbsp;&nbsp;canvas.width = document.width;
+&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;
+&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 = tempContext.getImageData(0, 0, canvas.width, canvas.height);
+&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;
+&nbsp;&nbsp;&nbsp;var timeStart = new Date();
+
+&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);
+&nbsp;&nbsp;&nbsp;tempContext.putImageData(canvasData, 0, 0);
+&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;
+&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;
+};
+
+function colorChange(scale, gab, position)
+{
+&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);
+};
+
+function colorFilter(binaryData, pixels)
+{
+&nbsp;&nbsp;&nbsp;var data = binaryData;
+&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] = colorChange(Math.random() * 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;(data[i] * colorValue)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 1] * 0.769)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 2] * 0.189), data[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] = colorChange(Math.random() * 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;(data[i] * 0.349)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 1] * 0.686)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 2] * 0.168), data[i + 1]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] = colorChange(Math.random() * 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;(data[i] * 0.272)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 1] * 0.534)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 2] * 0.131), data[i + 2]);
+&nbsp;&nbsp;&nbsp;}
+};
+</pre>
+
+<p>You can test the application performance using the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a>. In the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm#time">Timeline panel</a>, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.</p>
+
+<p class="figure">Figure: UI thread application event performance</p> 
+<p style="text-align:center;"><img alt="UI thread application event performance" src="../../../images/uithreadapp_event_inspector.png" /></p>
+
+<p class="figure">Figure: UI thread application memory performance</p> 
+<p style="text-align:center;"><img alt="UI thread application memory performance" src="../../../images/uithreadapp_memory_inspector.png" /></p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Since launching the Remote Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Remote Inspector is not used, the delay is approximately 6000 milliseconds.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="multithread" name="multithread">Using Multi-thread Web Workers</h3>
+<p>The following example uses 4 Web workers to apply a color filter effect on an image by dividing the image into 4 horizontal areas and working on each area simultaneously. The time taken by the application to apply the filter is also displayed on the screen. Since all the calculations are performed by 4 Web workers simultaneously, the execution time is significantly lower (2254 milliseconds).</p>
+
+<p class="figure">Figure: Color filter application using multi-thread Web workers (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Color filter application using multi-thread Web workers (in mobile applications only)" src="../../../images/color_filter_app_multi_thread.png" /></p>
+
+<pre class="prettyprint">function colorFilterStart()
+{
+&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);
+&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);
+&nbsp;&nbsp;&nbsp;canvas.width = document.width;
+&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;
+&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);
+&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;
+&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
+&nbsp;&nbsp;&nbsp;var workerNember = 4;
+&nbsp;&nbsp;&nbsp;var count = 0;
+&nbsp;&nbsp;&nbsp;var pixelLength = pixels / workerNember;
+&nbsp;&nbsp;&nbsp;var pixelSize = canvas.height / workerNember;
+&nbsp;&nbsp;&nbsp;var timeStart = new Date();
+
+&nbsp;&nbsp;&nbsp;/* Loop to use multi-thread Web workers */
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; workerNember; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var worker = new Worker(&quot;js/worker.js&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvasData = tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle data received from the host worker */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage = function(e)
+&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;tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count == workerNember)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Send data to the host worker */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data&quot;: canvasData, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;length&quot;: pixelLength, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: i 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">worker.js</span> file contains code to perform calculations for all 4 Web workers simultaneously.</p>
+<pre class="prettyprint">onmessage = function(e)
+{
+&nbsp;&nbsp;&nbsp;var canvasData = e.data.data;
+&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;
+&nbsp;&nbsp;&nbsp;var pixels = e.data.length;
+&nbsp;&nbsp;&nbsp;var count = e.data.count;
+
+&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);
+&nbsp;&nbsp;&nbsp;postMessage(
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;canvasData&quot;: canvasData,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: count
+&nbsp;&nbsp;&nbsp;});
+};
+
+function colorChange(scale, gab, position)
+{
+&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);
+};
+
+function colorFilter(binaryData, pixels)
+{
+&nbsp;&nbsp;&nbsp;var data = binaryData;
+&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] = colorChange(Math.random() * 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;(data[i] * colorValue)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 1] * 0.769)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 2] * 0.189), data[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] = colorChange(Math.random() * 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;(data[i] * 0.349)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 1] * 0.686)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 2] * 0.168), data[i + 1]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] = colorChange(Math.random() * 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;(data[i] * 0.272)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 1] * 0.534)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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[i + 2] * 0.131), data[i + 2]);
+&nbsp;&nbsp;&nbsp;}
+};
+</pre>
+
+<p>By using 4 Web workers in the application, the application performance improves 7 times compared to using a UI thread in the same application.</p>
+
+<p class="figure">Figure: Multi-thread application event performance</p> 
+<p style="text-align:center;"><img alt="Multi-thread application event performance" src="../../../images/multithreadapp_event_inspector.png" /></p>
+
+<p class="figure">Figure: Multi-thread application memory performance</p> 
+<p style="text-align:center;"><img alt="Multi-thread application memory performance" src="../../../images/multithreadapp_memory_inspector.png" /></p>
+
+<p>The following table shows the response speed and memory performance based on the number of Web worker threads used to run the application in a Tizen quad-core processor device.</p>
+  <table> 
+   <caption>
+     Table: Speed and memory performance
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Number of threads</th> 
+     <th>Response speed</th> 
+     <th>Memory</th> 
+    </tr> 
+    <tr> 
+     <td>1</td> 
+     <td>6760 milliseconds</td> 
+     <td>24.11 KB</td> 
+    </tr> 
+    <tr> 
+     <td>2</td> 
+     <td>3820 milliseconds</td> 
+     <td>23.73 KB</td> 
+    </tr> 
+    <tr> 
+     <td>3</td> 
+     <td>2730 milliseconds</td> 
+     <td>23.73 KB</td> 
+    </tr> 
+    <tr> 
+     <td>4</td> 
+     <td>2340 milliseconds</td> 
+     <td>23.73 KB</td> 
+    </tr> 
+    <tr> 
+     <td>5</td> 
+     <td>2120 milliseconds</td> 
+     <td>24.72 KB</td> 
+    </tr> 
+    <tr> 
+     <td>6</td> 
+     <td>2820 milliseconds</td> 
+     <td>24.48 KB</td> 
+    </tr> 
+    <tr> 
+     <td>7</td> 
+     <td>2340 milliseconds</td> 
+     <td>23.73 KB</td> 
+    </tr> 
+    <tr> 
+     <td>8</td> 
+     <td>2400 milliseconds</td> 
+     <td>23.73 KB</td> 
+    </tr> 
+       </tbody>
+       </table>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Web worker support depends on the type and version of the operating system. If the system does not support multiple processors, using multiple Web workers does not greatly improve the application performance. However, since Web workers are based on HTML5 Web optimization and can use multiple cores, they provide much better performance in Tizen as in other operating systems.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/security/cors_w.htm b/org.tizen.guides/html/web/w3c/security/cors_w.htm
new file mode 100644 (file)
index 0000000..17557ab
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/security/cors_w.htm
@@ -0,0 +1,130 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Cross-Origin Resource Sharing</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#simple">Simple Request</a></li>
+                       <li><a href="#preflight">Preflight Request</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm">Cross-Origin Resource Sharing Tutorial</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Cross-Origin Resource Sharing</h1> 
+ 
+ <p>Tizen supports the mechanism of cross-origin resource sharing (CORS), which can activate a client-side <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#cross-origin-request-0" target="_blank">cross-origin request</a> (COR).</p>
+<p>In CORS, new headers related to HTTP communication have been added to allow you to accept or reject CORs:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#origin-request-header" target="blank">Origin</a> request header
+<p>Includes the domain information which has incurred the COR, and is used for the purpose of checking the source of the domain side that has received the relevant request. In addition, this header is protected in the browser side and cannot be changed from the application side.</p></li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> response header
+<p>Allows a relevant response only when the information in the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header matches. If the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header is a wildcard (*), it unconditionally allows the response regardless of the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header information.</p>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If an extremely allowable CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+</ul>
+
+<p>CORS supports 2 request types: simple and preflight.</p>
+
+<h2 name="simple" id="simple">Simple Request</h2>
+<p>The request is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-requests" target="_blank">simple request</a>, if all the conditions following conditions are met:</p>
+<ul>
+<li>HTTP methods can only use <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, and <span style="font-family: Courier New,Courier,monospace">HEAD</span>.</li>
+<li>No custom header is allowed.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">Content-Type</span> is one of the following:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">application/x-www-form-urlencoded</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">multipart/form-data</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>
+</ul>
+</li>
+</ul>
+
+<p>When <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Simple_Requests">using simple requests</a>, the response is set in the server side with the following response headers:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>
+
+</ul>
+
+<p class="figure">Figure: Simple request workflow</p>
+<p style="text-align:center;"><img alt="Simple request workflow" src="../../../images/cors_simple.png" /></p> 
+
+
+<h2 name="preflight" id="preflight">Preflight Request</h2>
+
+<p>If a request is not a simple request, it is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-preflight-requests" target="_blank">preflight (non-simple) request</a>, which is <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#terminology" target="_blank">case-insensitive</a>.</p>
+<p>If the access authority is allowed through the preflight request, the actual request for sending the actual data is made. The preflight request can allow access based on various standards other than <span style="font-family: Courier New,Courier,monospace">Origin</span>, such as HTTP certification, HTTP method (for example, <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, or <span style="font-family: Courier New,Courier,monospace">PUT…</span>), or the existence of a certain header.</p>
+<p>When <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Preflight_Requests">using preflight requests</a>, the response is set in the server side with the following response headers:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-methods-response-header" target="_blank">Access-Control-Allow-Methods</a> (mandatory)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-headers-response-header" target="_blank">Access-Control-Allow-Headers</a> (mandatory, if a custom header is used)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-max-age-response-header" target="_blank">Access-Control-Max-Age</a> (optional)</li>
+
+</ul>
+
+
+<p class="figure">Figure: Preflight request workflow</p>
+<p style="text-align:center;"><img alt="Preflight request workflow" src="../../../images/cors_preflight.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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/security/iframe_w.htm b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
new file mode 100644 (file)
index 0000000..881ee0f
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 iframe element</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm">HTML5 iframe element Tutorial</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#iframe">HTML5 iframe element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#iframe">HTML5 iframe element API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>HTML5 iframe element</h1> 
+
+<p>The HTML5 <span style="font-family: Courier New,Courier,monospace">iframe</span> element can be used to solve security and design issues in embedded Web content.</p>
+
+<p>The main features of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element include:</p>
+
+<ul>
+<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> attribute
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute of the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to control the execution of tasks that can result in unreliable content, thereby enhancing application security.</p>
+<p>If an empty value is assigned to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute, the following restrictions are applied:</p>
+<ul>
+<li>Content is treated as belonging to a unique origin. Access to cookies, local storage, and other pages within the same domain are not allowed.</li>
+<li>Form submission is disabled.</li>
+<li>Script execution is disabled.</li>
+<li>Link navigation is disabled.</li>
+<li>Plug-ins are disabled.</li>
+<li>Pop-ups are disabled.</li>
+</ul>
+<p>To work around these restrictions, you can use the following additional security restriction conditions:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>
+<p>Enables the content <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Cookies">to be treated as belonging to the same origin</a>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span>
+<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Page"> navigation to the top-level browsing context</a>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">allow-forms</span>
+<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Form">form submission</a>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">allow-scripts</span><p> Enables script execution, but blocks pop-ups.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">allow-popups</span>
+<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Popups"> opening a pop-up window from the sandboxed element</a>.</p></li>
+</ul></li>
+
+<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute provided in the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Parent_Document"> render a page as a part of the parent document and include it in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element</a>.</p></li>
+</ul>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">scrolling</span>, <span style="font-family: Courier New,Courier,monospace">align</span>, <span style="font-family: Courier New,Courier,monospace">frameborder</span>, <span style="font-family: Courier New,Courier,monospace">marginheight</span>, <span style="font-family: Courier New,Courier,monospace">marginwidth</span>, and <span style="font-family: Courier New,Courier,monospace">longdesc</span> HTML5 attributes are no longer supported in the latest HTML5 version.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
new file mode 100644 (file)
index 0000000..1ba8afe
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security Tutorials</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Security</h1> 
+  <p>Security features include HTML element and client-side cross-origin request control.</p>
+
+  <p>The main security features are:</p>
+  <ul> 
+  <li><a href="iframe_w.htm">HTML5 iframe element</a> <p>Enables you to allow or block specific HTML elements on a Web page.</p></li>
+  <li><a href="cors_w.htm">Cross-Origin Resource Sharing</a> <p>Enables you to make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
new file mode 100644 (file)
index 0000000..b24e7c0
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Application caches</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm">HTML5 Application caches Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches API for Mobile Web</a></li>
+               </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>HTML5 Application caches</h1>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+  
+ <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.</p>
+ <p>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>HTML5 application caches provide you with the following benefits:</p>
+ <ul>
+ <li>Offline support
+ <p>If a cache file is downloaded after connecting to a site, the application can be used in an offline state.</p></li>
+ <li>Speed
+ <p>The cached files are saved in local storage, making cached resources load faster. </p></li>
+ <li>Reduced server load
+ <p>The browser only downloads content from the server when the cached files need to be updated, reducing server load.</p></li>
+</ul>
+
+<p>The main application cache features include:</p>
+<ul>
+<li>Cache activation
+
+<p>The cache manifest file is used to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm#set">activate the application cache</a> and display cache information in the browser as simple text.</p>
+<p>To enable application caches, include the <span style="font-family: Courier New,Courier,monospace">manifest</span> attribute in the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> tag on every page of your Web application that you want cached. The following code snippet demonstrates how to do this. 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&gt;
+</pre>
+
+<p>The recommended file extension for the manifest file is <span style="font-family: Courier New,Courier,monospace">.appcache</span>. The file must be served using the <span style="font-family: Courier New,Courier,monospace">text/cache-manifest</span> MIME type.</p>
+</li>
+<li>Cache updating
+
+<p>
+To update a cached item in the client, you need to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm#update">change the manifest file</a>.</p>
+<p>
+The browser checks only the edited items in the manifest, and checks whether cache update is needed. If the relevant page is updated from the server, manifest is applied as the basis even after edited items have been applied. If the update content is an addition or deletion of the defined file within the manifest, the manifest file can be edited. </p>
+<p>
+However, if the content in the defined file is changed, the cache is not updated. In that case, if the description or version is changed in the manifest, the browser can update the cache.
+</p>
+</li>
+<li>Cache management
+<p>Application cache can control JavaScript based on <a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#appcacheevents" target="_blank">events</a>. It can <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm#manage">check or update the current cache status</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/storage/file_w.htm b/org.tizen.guides/html/web/w3c/storage/file_w.htm
new file mode 100644 (file)
index 0000000..eafc169
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/storage/file_w.htm
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm">File Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#file">File API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#file">File API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<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>The main features of the File API include:</p>
+<ul>
+<li>Local file management
+<ul>
+<li>Reading local file information
+<p>You can select a local file to upload using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> interface, which creates and returns a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> object.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">File</span> object is used to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#read_info">read basic file information</a>.
+</p>
+</li>
+<li>Reading local file content
+<p>You can use the reading methods of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#read_content">read file content</a> in text, binary,  or <span style="font-family: Courier New,Courier,monospace">dataURL</span> format. If the data is loaded, the <span style="font-family: Courier New,Courier,monospace">onload</span> event occurs. This event uses the data reading methods according to file format.</p></li>
+<li>Slicing local files
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">slice()</span> method with a local file or the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#slice">slice data objects</a>. You can use the created blob to read data as a binary string using the <span style="font-family: Courier New,Courier,monospace">FileReader</span> interface.  </p>
+</li>
+</ul>
+</li>
+<li>Sandboxed file system management in mobile applications
+<ul>
+<li>Accessing sandboxed file systems
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#access">request access to a sandboxed file system</a> using the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#using-localfilesystem" target="_blank">LocalFileSystem</a> interface.
+</p></li>
+<li>Displaying files in a sandboxed file system
+<p>You can use <span style="font-family: Courier New,Courier,monospace">readEntries()</span> 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 <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#display">display directories or files</a>.
+</p></li>
+<li>Creating a directory or file within a sandboxed file system
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">getDirectory()</span> and <span style="font-family: Courier New,Courier,monospace">getFile()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryentry-interface" target="_blank">DirectoryEntry</a> interface) to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#create_dir">create a directory or file</a>. </p></li>
+<li>Deleting a directory or file within a sandboxed file system
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">removeRecursively()</span> method of the <span style="font-family: Courier New,Courier,monospace">DirectoryEntry</span> interface and the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-entry-interface" target="_blank">Entry</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm#remove">delete a directory or file</a>.
+</p></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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
new file mode 100644 (file)
index 0000000..49617aa
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Indexed Database</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm">Indexed Database Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#database">Indexed Database API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<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>
+
+<p>The main features of the Indexed Database API include:</p>
+<ul>
+<li>Creating a database
+<p>
+Use the <span style="font-family: Courier New,Courier,monospace">IndexedDB.open()</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm#db">create a database</a>. In a <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#database-concept" target="_blank">database</a>, at least 1 <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> must be present.</p>
+
+</li>
+<li>Creating an object store
+<p>Object store is the basic storage mechanism of indexed database storage data.</p>
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm#store">
+ create an object store</a> using the <span style="font-family: Courier New,Courier,monospace">createObjectStore()</span> method. The object store contains a list of records for storing data, and a key-value list sorted according to the key in an ascending order.</p>
+<p>An object store can derive keys from the following sources:
+</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#dfn-key-generator" target="_blank">Key generator</a><p>Generates an increasing number every time a key is needed.</p>
+</li>
+<li>
+<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#key-path-construct" target="_blank">Keypath</a> <p>Key is derived through a key path. </p>
+</li>
+<li><a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#value-construct" target="_blank">Value</a> <p>Key is specified when a value is stored in the object store.</p></li>
+</ul>
+</li>
+<li>Managing data
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm#manage">save and access data</a> in the object store.</p>
+<p>The stored data creates a key, assigned to a <span style="font-family: Courier New,Courier,monospace">keypath</span>, which in turn creates a value as a JSON object.
+</p>
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">Tizen supports the <span style="font-family: Courier New,Courier,monospace">READ_ONLY</span>, <span style="font-family: Courier New,Courier,monospace">READ_WRITE</span>, and <span style="font-family: Courier New,Courier,monospace">VERSION_CHANGE</span> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction" target="_blank">transactions</a> with the <span style="font-family: Courier New,Courier,monospace">unsigned short</span> type.</td>
+      </tr>
+     </tbody>
+    </table>
+</li>
+<li>Creating an index
+<p>In the object store, you can use the <span style="font-family: Courier New,Courier,monospace">createIndex()</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm#index">generate an
+index</a>. You can search and retrieve records stored in the
+<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#index-concept" target="_blank">index</a> using other properties than the key, as the key is not always unique. You can also retrieve records containing arrays as keys.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..33669a2
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Storage</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm">Storage Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Storage</h1>
+  <p>Storage features include information on how you can store data in various formats.</p>
+  <p>The main storage features are:</p>
+  <ul>
+   <li><a href="file_w.htm">File</a> <p>Enables you to retrieve file content and information, slice data objects, and manage sandboxed file systems.</p></li> 
+   <li><a href="indexdb_w.htm">Indexed Database</a> <p>Enables you to create an object store, save data in it, and open.</p></li>
+   <li><a href="web_storage_w.htm">Web Storage</a> <p>Enables you to use session storage and local storage.</p></li>
+  </ul>
+  
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<ul>
+   <li><a href="appcache_w.htm">HTML5 Application caches</a> <p>Enables you to activate project resource caching, and manage the cached resources.</p></li> 
+   <li><a href="websql_w.htm">Web SQL Database</a> <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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..a3f8a3b
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Storage</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm">Web Storage Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webstorage">Web Storage API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webstorage">Web Storage API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web Storage</h1>
+
+<p>A Web storage stores data in the key-value format. The process is similar to existing cookies, but by using the Web Storage API, structured objects can be stored, and the storage capacity increased to 5 MB per domain. In addition, no server request is needed, so the server traffic is significantly reduced.</p>
+
+<p>With the <span style="font-family: Courier New,Courier,monospace">setItem()</span> method of the <span style="font-family: Courier New,Courier,monospace">Storage</span> interface, you can store searches on certain conditions used in the browser by the user. When the user reconnects, the <span style="font-family: Courier New,Courier,monospace">getItem()</span> method is called to retrieve the stored data.</p>
+
+<p>The Web Storage API provides <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm#save">2 storage types</a>:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2011/CR-webstorage-20111208/#the-localstorage-attribute" target="_blank">Local storage</a>
+<p><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm#use">Stores data</a> to be used in multiple windows, beyond the current session, with no expiration date. The stored data is not deleted when the browser window is closed, and can be shared between browser windows.</p>
+</li>
+<li><a href="http://www.w3.org/TR/2011/CR-webstorage-20111208/#the-sessionstorage-attribute" target="_blank">Session storage</a>
+<p>Valid for only a single session.
+</p><p>
+The data stored in a temporary storage can be shared in all browser windows within the same domain, but once the browser window is closed, data is deleted.
+</p><p>
+If a new window is opened using a link, the session storage data
+is copied to the new window. However, if the data in the new window is edited, it is stored as a separate data item.
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/storage/websql_w.htm b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
new file mode 100644 (file)
index 0000000..b096451
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
@@ -0,0 +1,159 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 SQL Database</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm">Web SQL Database Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web SQL Database</h1>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+ <p>The Web SQL database provides a way to store databases that can be queried using various SQL statements.
+ </p>
+ <p>
+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>
+When working with the SQL database, you can use the following approaches:</p>
+<ul>
+<li>Asynchronous database API
+<p>A script is not blocked during calls of statements described in the API. Succession of operations is provided by event handlers. This approach does not block user interface during long operations and can be used anywhere in your application.</p></li>
+<li>Synchronous database API
+<p>To start an operation, you must wait for the previous one to be completed. This approach can be used only with <a href="../perf_opt/web_workers_w.htm">Web Workers</a>.
+</p></li>
+</ul>
+
+<p>The main Web SQL database features include:</p>
+<ul>
+<li>SQL database creation
+<p>You can create and open a SQL database <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#create_a">asynchronously</a> or <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#create">synchronously</a>.</p></li>
+<li>SQL statement execution
+<p>You can execute SQL statements <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#execute_a">asynchronously</a> or <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#execute">synchronously</a>.</p></li>
+<li>SQL statement result access
+<p>You can access the result object <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#access_a">asynchronously</a> or <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#access">synchronously</a>.</p></li>
+<li>Error management
+<p>You can handle errors <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#handle_a">asynchronously</a> or <a href="../../../../../org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm#handle">synchronously</a>.</p>
+<p>The following table describes the properties that can be delivered with the <span style="font-family: Courier New,Courier,monospace">sqlError</span> object.</p>
+<table>
+<caption>Table: Web SQL errors</caption>
+   <colgroup>
+    <col width="30%" />
+    <col width="70%" />
+   </colgroup>
+<tbody>
+    <tr>
+     <th>Name</th>
+     <th>Description</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">message</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Read-only. Message describing the error that has occurred (must respect user language). </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">code</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Read-only. Code of the error that has occurred (equals to one of below constants).</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">UNKNOWN_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. The transaction failed for reasons unrelated to the database itself and not covered by any other error code.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">DATABASE_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. The statement failed for database reasons not covered by any other error code.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">VERSION_ERR</span></p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. The operation failed because of an invalid database version.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">TOO_LARGE_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. The statement failed because the data returned from the database was too large. The SQL <span style="font-family: Courier New,Courier,monospace">LIMIT</span> modifier can be used to reduce the size of the result set.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">QUOTA_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. The statement failed because there was not enough remaining storage space, or the storage quota was reached and the user declined to give more space to the database. </p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">SYNTAX_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. The statement failed because of a syntax error, or the number of arguments did not match the number of placeholders in the statement, or the statement tried to use a statement that is not allowed, such as <span style="font-family: Courier New,Courier,monospace">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace">COMMIT</span>, or <span style="font-family: Courier New,Courier,monospace">ROLLBACK</span>, or the statement tried to use a verb that can modify the database but the transaction was read-only.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">CONSTRAINT_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. An <span style="font-family: Courier New,Courier,monospace">INSERT</span>, <span style="font-family: Courier New,Courier,monospace">UPDATE</span>, or <span style="font-family: Courier New,Courier,monospace">REPLACE</span> statement failed due to a constraint, for example, because a row was being inserted and the value given for the primary key column duplicated the value of an existing row.</p> </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace">TIMEOUT_ERR</span> </p> </td>
+     <td rowspan="1" colspan="1"> <p> Constant. A lock for the transaction was not obtained in a reasonable time.</p> </td>
+    </tr>
+</tbody>
+</table>
+</li>
+</ul>
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">The Web SQL Database API is still in group note state, but Tizen supports it as it is already widely used in the industry.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
new file mode 100644 (file)
index 0000000..ca9b6b5
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Camera API (Tizen Extension)</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm">Camera API (Tizen Extension) Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Camera API (Tizen Extension)</h1>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+  
+<p>You can use the camera features in the Tizen wearable Web applications.</p>
+<p>The main features of the Camera API (Tizen Extension) API include:</p>
+
+<ul>
+    <li>Accessing the camera device
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#access">access the camera device</a> retrieving the media stream from the camera.</p>
+    </li>
+    <li>Managing the camera
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#manage">manage the camera features</a> in many ways:</p>
+    <ul><li>You can record videos and capture images.</li>
+    <li>You can access and set the camera settings, such as the file name for the recorded video or captured image.</li></ul></li>
+    <li>Deallocating the camera preview stream
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#deallocate">deallocate the camera preview stream resources</a> when the application is invisible so that the preview stream can be assigned to another 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
new file mode 100644 (file)
index 0000000..8103129
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>FullScreen API - Mozilla</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm">FullScreen API - Mozilla Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla API for Mobile Web</a></li>             
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>FullScreen API - Mozilla</h1>
+ 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+  
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm#use">display an element in the fullscreen mode</a>:</p>
+<ul><li>With the <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> method, you can convert a specific element to fullscreen.</li>
+<li>With the <span style="font-family: Courier New,Courier,monospace">webkitCancelFullScreen()</span> method, you can cancel the fullscreen mode.</li></ul>
+<p>If the element uses the  <a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI#full-screen_pseudo-class" target="_blank">:full-screen</a> CSS pseudo-class to switch to the fullscreen mode, a style can be assigned for the fullscreen mode.</p>
+   <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Tizen supports the WebKit-based Fullscreen API. When using the Fullscreen API, you must include the webkit prefix.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..c2777da
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features Tutorials</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+   <h1>Supplementary Features</h1>
+   <p>Supplementary features include extension features that can be used in creating Tizen Web applications.</p>
+  <p>The main supplementary features are:</p>
+  <ul>
+       <li><a href="typedarray_w.htm">Typed Array - Khronos</a> <p>Enables you to access binary data in JavaScript.</p></li>
+       <li><a href="webgl_w.htm">WebGL - Khronos</a> <p>Enables you to use the WebGL graphics library to create 3D visual elements.</p></li>
+   </ul>
+   
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+       <li><a href="fullscreen_w.htm">FullScreen API - Mozilla</a> <p>Enables you to display an element on fullscreen.</p></li>
+</ul>
+
+<p>The following guides apply in <span style="color: red">wearable applications only</span>:</p>  
+<ul>
+    <li><a href="camera_w.htm">Camera API (Tizen Extension)</a> <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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
new file mode 100644 (file)
index 0000000..7c77049
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
@@ -0,0 +1,183 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Typed Array - Khronos</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+        <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm">Typed Array - Khronos Tutorial</a></li>
+        <li><a href="../../tizen/tizen/tizen_guide_w.htm#sorting">Sorting and Filtering Data</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#typed_array">Typed Array - Khronos API for Mobile Web</a></li>
+               <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#typed_array">Typed Array - Khronos API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Typed Array - Khronos</h1>
+
+<p>Typed Array - Khronos is an HTML5 feature that allows you to access binary data in JavaScript. It is designed to effectively handle complex binary data of WebGL. It provides better performance than 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), while manipulating binary data and handling the data of other HTML APIs.</p>
+
+<p>A typed array is capable of handling binary data in different sources:</p>
+<ul>
+<li>Network protocol</li>
+<li>Binary file formats</li>
+<li>Raw graphic buffers</li>
+</ul>
+
+<p>Additionally, a typed array can be used to manage in-memory binary data of byte layouts, and assist in efficiently manipulating raw data for complex and powerful Web applications, such as audio and video operation, Web sockets, and the <a href="../../tizen/input_output/filesystem_w.htm">File</a> API operations.</p>
+
+<p>The main features of the Typed Array - Khronos API include:</p>
+<ul>
+<li>Creating an array buffer
+<p>An <a href="http://www.khronos.org/registry/typedarray/specs/latest/#5" target="_blank">ArrayBuffer</a> is a fixed-length binary data buffer, and a reference to the used raw binary data in the data format. It does not interact with the data directly, but <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm#array">creates a new instance of the ArrayBufferView object</a>. The instance presents the buffer in a certain format, and can read and write the buffer content.</p>
+</li>
+
+<li>Using typed array views
+<p>A <a href="http://www.khronos.org/registry/typedarray/specs/latest/#6" target="_blank">TypedArrayView</a> can be used to establish a detailed data structure. To <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm#view">create a typed array view</a>, you must create an array buffer and the view that points to the array buffer.</p>
+
+<p>The array buffer view shares information between views of all types, and has the following properties:</p>
+<ul>
+<li>Typed array view types
+<p>In the typed array view types, an array buffer view is used while manipulating and indexing binary data and returning the value of a general number. The specification of the respective array buffer length is fixed, and forms the basis for typed array view types.</p>
+<p>The following table describes the typed array view types.</p>
+<table border="1">
+   <caption>
+     Table: Typed array view types
+   </caption>
+   <colgroup>
+    <col width="5%" />
+    <col width="2%" />
+    <col width="63%" />
+    <col width="30%" />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Type</th>
+     <th>Size<sup>1</sup></th>
+     <th>Description</th>
+     <th>Equivalent C type</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Int8Array</span></td>
+     <td>1</td>
+     <td>8-bit 2&#39;s complement signed integer</td>
+     <td>signed char</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Uint8Array</span></td>
+     <td>1</td>
+     <td>8-bit unsigned integer</td>
+     <td>unsigned char</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span><sup>2</sup></td>
+     <td>1</td>
+     <td>8-bit unsigned integer (clamped)</td>
+     <td>unsigned char</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Int16Array</span></td>
+     <td>2</td>
+     <td>16-bit 2&#39;s complement signed integer</td>
+     <td>short</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Uint16Array</span></td>
+     <td>2</td>
+     <td>16-bit unsigned integer</td>
+     <td>unsigned short</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Int32Array</span></td>
+     <td>4</td>
+     <td>32-bit 2&#39;s complement signed integer</td>
+     <td>int</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Uint32Array</span></td>
+     <td>4</td>
+     <td>32-bit unsigned integer</td>
+     <td>unsigned int</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Float32Array</span></td>
+     <td>4</td>
+     <td>32-bit IEEE floating point</td>
+     <td>float</td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">Float64Array</span></td>
+     <td>8</td>
+     <td>64-bit IEEE floating point</td>
+     <td>double</td>
+    </tr>
+   </tbody>
+  </table>
+ <p><sup>1</sup> The size unit is bytes, and it corresponds to the <span style="font-family: Courier New,Courier,monospace">BYTES_PER_ELEMENT</span> constant for the given type. </p>
+ <p><sup>2</sup> The <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> is a special view, and it replaces the <span style="font-family: Courier New,Courier,monospace">CanvasPixelArray</span>.</p>
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">There are no restrictions related to sorting the typed array view types.</td></tr>
+   </tbody>
+  </table>
+</li>
+
+<li>DataView view types
+<p>The DataView view types are used to handle heterogeneous data with a defined byte order, displaying chunks of data read from a disk or the network. Since the view types import the API with the same array, the DataView objects set the API to randomly read and write data from the byte offset.</p></li>
+</ul></li>
+
+<li>Using typed arrays
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm#use">deliver binary data</a> effectively in other HTML5 APIs that employ a typed array, such as:</p>
+<ul>
+<li><a href="webgl_w.htm">WebGL</a></li>
+<li><a href="../graphics/canvas_w.htm">Canvas</a></li>
+<li><a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest Level 2</a></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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
new file mode 100644 (file)
index 0000000..1ccc63c
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm">WebGL - Khronos Tutorial</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">WebGL - Khronos API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">WebGL - Khronos API for Wearable Web</a></li>
+                       </ul>
+       </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>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> 
+   <li>Importing the WebGL context
+   <p>You can use the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">Canvas</span> object to <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#import">import the WebGL context</a>.</p>
+   </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="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#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>Using buffers
+   <p>A buffer is a memory block for storing temporary data. In WebGL, you must <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#buffer">create a vertex buffer object (VBO) to store vertex attributes</a>, such as location, color, and texture coordinates.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">deleteBuffer()</span> method can be used to delete the buffer.</td> 
+      </tr> 
+     </tbody>
+</table>
+
+   </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="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#draw">display the content on the screen</a>.</p>
+   </li>
+   <li>Applying realistic 3D effects
+   <p>To apply a more realistic 3D effect to objects in WebGL, you can use the following features:</p>
+   <ul><li><p>Texture</p>
+  <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#color">set the color value</a> and <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#texture">map an image</a> on the object surface.</p>
+  <p>Each vertex can have a unique color. When converting a vertex shader to a fragment shader, all the middle pixels are filled, and through linear interpolation of the vertex attributes, the color differences between vertices are automatically given gradation effects.</p>
+  </li>
+  <li><p>Animation</p>
+  <p>You can apply object and timer coordinate changes to <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#animation">create a moving animation</a>.</p>
+  </li>
+  <li><p>3D perspective</p>
+  <p>You can use Z-index and matrix to <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#threed">create a 3D perspective</a>.</p>
+  </li></ul>
+  <p>You can also <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#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>
+<p>You can use the three.js framework to, for example, <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm#framework">apply light and camera effects</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm b/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
new file mode 100644 (file)
index 0000000..4f445fb
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Clipboard API and events</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm">Clipboard API and events Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Clipboard API and events</h1>
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+  
+<p>The clipboard and events feature is used for cutting, copying, and pasting content to easily transfer it between Web applications.</p>
+
+  <p>The main features of Clipboard API and events include:</p>
+  <ul>
+    <li><p>Copying</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">copy</span> event to <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#copy">place the selected data on the clipboard</a>.</p></li>
+    <li><p>Cutting</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">cut</span> event to place the selected data on the clipboard, and <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#cut">remove the selected content in the document</a>.</p></li>
+    <li><p>Pasting</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">paste</span> event to <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#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>
+<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="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#target">copy content and then paste it into the editable element</a>.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm b/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
new file mode 100644 (file)
index 0000000..e8b227a
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Drag and drop</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm">HTML5 Drag and drop Tutorial</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dnd">HTML5 Drag and drop API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Drag and drop</h1>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+<p>HTML5 drag and drop activates through event-based JavaScript and added attributes.
+</p>
+<p>
+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 <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to it. Only elements thus defined as draggable can <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm#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><span style="font-family: Courier New,Courier,monospace">dragstart</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">drag</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragleave</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragenter</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragover</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">drop</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragend</span></li></ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">dragstart</span> and <span style="font-family: Courier New,Courier,monospace">drop</span> events send data through the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface.</p>
+</li>
+<li>Transferring data
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm#transfer">transfer data from the drag source to the drop target</a>. The <span style="font-family: Courier New,Courier,monospace">DataTransfer</span> interface instance receives the <span style="font-family: Courier New,Courier,monospace">dragstart</span> event and fills itself with the data to be transferred. It then receives a <span style="font-family: Courier New,Courier,monospace">drop</span> event, and puts the data into the drop target. </p></li>
+</ul>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To use drag and drop in a Tizen device, long-press the draggable element. When the context menu appears, select the <strong>Drag</strong> menu.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..647ef90
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm">UI Tutorials</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI API for Mobile Web</a></li>
+                       
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI</h1>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The UI API domain is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+   <p>UI features allow you to manage the clipboard and drag and drop events in your application.</p>
+  <p>The main UI features are:</p>
+  <ul>
+   <li><a href="clipboard_w.htm">Clipboard API and events</a> <p>Enables you to copy content and paste it in an editable area.</p></li>
+   <li><a href="drag_drop_w.htm">HTML5 Drag and drop</a> <p>Enables you to create and manage draggable elements and implement drag events.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm b/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
new file mode 100644 (file)
index 0000000..20d57c1
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+       
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+<h1>Frame Flattening</h1>
+
+  <p>In the Tizen WebKit, content placed within the <span style="font-family: Courier New,Courier,monospace;">&lt;frame&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;iframe&gt;</span> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</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 <span style="font-family: Courier New,Courier,monospace;">overflow: scroll</span> or <span style="font-family: Courier New,Courier,monospace;">webkit-overflow-scrolling: touch</span> property instead of <span style="font-family: Courier New,Courier,monospace;">iframe</span>.</p>   
+       
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm b/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
new file mode 100644 (file)
index 0000000..ed1a339
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
@@ -0,0 +1,382 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <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>          
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm">HTML Priorities Tutorial</a></li>                     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <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>
+
+<p>The structure of the HTML document can be classified into DOCTYPE and HTML DOM (Document Object Model). When an HTML document is loaded, the browser renders the contents in its screen as follows:</p>
+<ol>
+<li>HTML is parsed referring to the rules defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element.</li>
+<li>HTML DOM tree is established.</li>
+<li>DOM elements, including <a href="#js">references to JavaScript</a>, are arranged based on the information defined in the head element. This is called rendering.</li>
+<li>The elements are painted on the screen based on <a href="#css">CSS rules</a>.</li>
+</ol>
+
+<h2 id="doctype"><span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> Element</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
+
+<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element must be declared at the beginning of an HTML document.</p>
+
+<pre class="prettyprint">/* HTML5 */
+&lt;!DOCTYPE html&gt;
+
+/* Prior to HTML5 */
+&lt;!DOCTYPE html PUBLIC &quot;{HTML Version Information}&quot; &quot;{DTD (Document Type Definition) file link defined by Rule in HTML DOM}&quot;&gt;
+</pre>
+
+<h2 id="dom">HTML DOM Tree</h2>
+
+<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 <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> 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;/html&gt;</pre>
+
+<h3>&lt;head&gt; element</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</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 charset="utf-8" /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; Tizen (in mobile applications) or Tizen Wearable (in wearable applications) &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;/html&gt;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> contains the following subelements:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;title&gt;</span>: Defines the title of the document.</li>
+<li><span style="font-family: Courier New,Courier,monospace;"><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank">&lt;meta&gt;</a></span>: Defines information, such as encoding, creator, and keywords of the document.
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span>: Sets the styles of the document.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;noscript&gt;</span>: Adds functions to the document. </li>
+</ul>
+
+<h3>&lt;body&gt; element</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</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;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;Tizen Web App (in mobile applications) or Tizen Wearable Wep App (in wearable applications)&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;/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 class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p> 
+<p style="text-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>
+
+<p>When creating a CSS document, the following rules apply:</p>
+
+<ul>
+<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
+
+<pre class="prettyprint">p {color: red}
+p {color: blue}
+/* Blue color is applied */
+</pre></li>
+<li>The style applied in the parent node at the DOM tree is inherited. For more information, see <a href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" target="_blank">W3C inheritance documentation</a>.
+</li>
+<li>The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
+<ul>
+<li>ID attribute = 100</li>
+<li>Class attribute = 10</li>
+<li>Element = 1</li>
+</ul>
+
+<pre class="prettyprint">&lt;body&gt;
+&lt;p id=&quot;target&quot; class=&quot;target&quot;&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 */
+&nbsp;&nbsp;&nbsp;/* Red color is applied */
+&lt;/style&gt;</pre>
+</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
+<pre class="prettyprint">&lt;body&gt;
+&lt;p id=&quot;target&quot; class=&quot;target&quot;&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}
+&nbsp;&nbsp;&nbsp;/* Black color is applied */
+&lt;/style&gt;</pre>
+</li>
+</ul>
+
+<p>Keeping these rules in mind, you can use any of the following ways to achieve the expected result illustrated in the figure above:</p>
+<pre class="prettyprint">.contents {color: #999 !important;}
+
+section.contents {color: #999;}
+
+body .contents {color: #999;}
+
+#container &gt; .contents {color: #999;}
+</pre>
+
+<h3>Using CSS with HTML</h3>
+
+<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element.</p>
+
+<p>In the following example, the applied order of the CSS elements is as follows:</p>
+<ol>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+</ol>
+
+<pre class="prettyprint lang-js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Link in head */
+&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;/* Style tag in head */
+&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;/* @import in CSS area */
+&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;/* Style attribute in HTML element */
+&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;/html&gt;
+</pre>
+<p>However, the priority order of the elements is as follows:</p>
+<ol>
+<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+</ol>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">style</span> attribute in the HTML element has the highest priority after the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute.</p>
+
+<p>Using the order above, if all other color styles are applied to <span style="font-family: Courier New,Courier,monospace;">&lt;p&gt;</span> elements, the <span style="font-family: Courier New,Courier,monospace;">style</span> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
+
+<p>Generally, when the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the figure below. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
+<p style="text-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>
+<ul>
+<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;/head&gt;
+</pre></li>
+<li>In the <span style="font-family: Courier New,Courier,monospace;">style.css</span> file:
+<pre class="prettyprint">@import url(&quot;priorities1.css&quot;);
+
+p: after {content: &quot; : linked in head&quot;}
+</pre>
+<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
+<p style="text-align:center;"><img alt="Result of linking the @import attribute" src="../../../images/import_linked_in_head.png" /></p></li>
+<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
+<pre class="prettyprint">p: after {content: &quot; : Using @import in CSS area&quot;}
+</pre>
+<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p> 
+<p style="text-align:center;"><img alt="Result of using the @import attribute in the CSS area" src="../../../images/import_css_area.png" /></p></li>
+</ul>
+
+ <h2 id="js" name="js">JavaScript Behavior</h2>
+<p>With the advent of HTML5, numerous powerful HTML5 APIs have been introduced. Since the usage of JavaScript has increased, it has become important to use it accurately in accordance with <a href="../perf_opt/js_performance_improvement_w.htm">optimized JavaScript performance</a>.</p>
+
+<p><a href="../../../../../org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM.  </p>
+
+<h3>Using JavaScript with HTML</h3>
+<p>Used with HTML, JavaScript works as follows:</p>
+<ol>
+<li>During HTML parsing, the content of the <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag is parsed to JavaScript Interpreter.</li>
+<li>The Interpreter parses the received script code. </li>
+<li>Requests that need not be handled immediately are suspended.  </li>
+<li>The handled result is passed over to the browser, which continues to parse HTML.</li>
+</ol>
+
+<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;
+
+/* Direct use in HTML */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated&quot;);
+    
+&nbsp;&nbsp;&nbsp;function animate() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Execute */
+&nbsp;&nbsp;&nbsp;};
+    
+&nbsp;&nbsp;&nbsp;/* Call the animation function when the event is fired */
+&nbsp;&nbsp;&nbsp;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>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">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.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       
+<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>
+
+<p>The following example shows the use of a simple event:</p>
+
+<pre class="prettyprint lang-js">/* HTML */
+&lt;body onload=&quot;touchEventHandler()&quot;&gt;
+
+/* JavaScript */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Directly assigning */  
+&nbsp;&nbsp;&nbsp;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);
+&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>
+
+<h3>JavaScript Priorities</h3>
+
+<p>The rendering order of JavaScript code is based on the following rules:</p>
+<ul>
+<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is temporarily saved, but not handled.  </li>
+<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is immediately handled when it is parsed.  </li>
+<li>When the temporarily saved JavaScript content is executed, the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element content is rendered first, and the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element content after it.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm b/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
new file mode 100644 (file)
index 0000000..7d44c95
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
@@ -0,0 +1,380 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#key" class="opensection">Key Concepts</a></li>
+            <li><a href="#ui" class="opensection">UI Scalability</a></li>
+            <li><a href="#create" class="opensection">Creating Applications Supporting Multiple Screens</a></li>
+            <li><a href="#resolution" class="opensection">Image Resolution Optimization</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Multiple Screen Support</h1>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <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>Before <a href="#create">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key">key concepts of multiple screen support</a>.</p>
+  <p>Tizen provides the <a href="#ui">UI scalability</a> resolution feature, which allows you to create scalable applications.</p>
+  <p>To optimize images used in Web applications, images based on a single resource can be used in <a href="#resolution">various resolutions</a>.</p>
+  <h2 id="key" name="key">Key Concepts</h2>
+  <p>Before building a Web application for multiple resolutions, make sure you are familiar with the following <a href="http://www.w3.org/" target="_blank">W3C</a> Web content scaling standards, which must be taken into account when developing Web applications:</p>
+  <ul>
+   <li>Viewport meta tag</li>
+   <li>CSS media query</li>
+  </ul>
+  <h3 id="viewport" name="viewport">Viewport Meta Tag</h3>
+  <p>A viewport defines the application area that displays the Web page content.</p>
+  <p>In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature.</p>
+  <p>The <a href="http://www.w3.org/TR/mwabp/#bp-viewport" target="_blank">viewport meta tag</a> enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.</p>
+  <p>To use the viewport meta tag while developing Web applications, you must note the following:</p>
+  <ul>
+   <li>The <span style="font-family: Courier New,Courier,monospace">device-height</span> and <span style="font-family: Courier New,Courier,monospace">device-width</span> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
+   <li>Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).</li>
+  </ul>
+  <h3 id="css" name="css">CSS Media Query</h3>
+  <p>The <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">CSS media query</a> enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:</p>
+  <ul>
+   <li>Define the image resource to be used based on the screen dots per inch (DPI) ratio.</li>
+   <li>Determine the CSS layout to be used based on the screen width.</li>
+  </ul>
+  <p></p>
+  <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 <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI widgets.</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 <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display widgets 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;</pre>
+  <p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, 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 (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+  <table>
+   <caption>
+     Table: Layout size and scale factor
+   </caption>
+   <tbody>
+    <tr>
+     <th>Device screen resolution</th>
+     <th>Real screen DPI</th>
+     <th>Device DPI</th>
+     <th>Web browser page</th>
+     <th>Viewport width</th>
+     <th>Scale factor</th>
+    </tr>
+    <tr>
+     <td style="text-align:center;">720 x 1280</td>
+     <td style="text-align:center;">306</td>
+     <td style="text-align:center;">320</td>
+     <td style="text-align:center;"><img alt="captured screen1" src="../../../images/captured_screen1.png" /></td>
+     <td style="text-align:center;">360 px</td>
+     <td style="text-align:center;">2.0</td>
+    </tr>
+    <tr>
+     <td style="text-align:center;">480 x 800</td>
+     <td style="text-align:center;">218</td>
+     <td style="text-align:center;">240</td>
+     <td style="text-align:center;"><img alt="captured screen2" src="../../../images/captured_screen2.png" /></td>
+     <td style="text-align:center;">320 px</td>
+     <td style="text-align:center;">1.5</td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="web" name="web">Working with Tizen Web Winsets</h3>
+  <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
+  <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <span style="font-family: Courier New,Courier,monospace">rem</span> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element to adjust the Tizen Web winset sizes accurately.</p>
+  <h2 id="create" name="create">Creating Applications Supporting Multiple Screens</h2>
+  <p>To create an application that supports multiple screen sizes, you must consider the following while coding your application:</p>
+  <ul>
+   <li>Configuring the viewport</li>
+   <li>Optimizing resources</li>
+   <li>Creating screen resolution-independent UI</li>
+  </ul>
+  <h3 id="configure" name="configure">Configuring the Viewport</h3>
+  <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../../org.tizen.gettingstarted/html/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> 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;</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;</pre>
+  <p>In the CSS file:</p>
+  <pre class="prettyprint">@media screen and (max-resolution: 159dpi)
+{
+&nbsp;&nbsp;&nbsp;/* Set styles */
+}
+
+@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
+{
+&nbsp;&nbsp;&nbsp;/* Set styles */
+}
+
+@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
+{
+&nbsp;&nbsp;&nbsp;/* Set styles */
+}
+
+@media screen and (min-resolution: 320dpi)
+{
+&nbsp;&nbsp;&nbsp;/* Set styles */
+}
+</pre>
+  <p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
+  <pre class="prettyprint">@media screen and (orientation: portrait)
+{
+&nbsp;&nbsp;&nbsp;/* Set styles */
+}
+
+@media screen and (orientation: landscape)
+{
+&nbsp;&nbsp;&nbsp;/* Set styles */
+}
+</pre>
+  <h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
+  <p>The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size.</p>
+  <h2 id="resolution" name="resolution">Image Resolution Optimization</h2>
+
+  <p>In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.</p>
+  <p><a href="../dom/media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the <a href="https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk" target="blank">deployable package</a> easily.</p>
+
+  <p>Images can be used in Web applications in the following ways:</p>
+  <ul><li><span style="font-family: Courier New,Courier,monospace">IMG</span> tag linking images directly to HTML</li>
+  <li>CSS <span style="font-family: Courier New,Courier,monospace">background</span> property expressing images as a background in HTML</li>
+  <li><a href="../graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
+  </ul>
+  <p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
+  <p>You can use the following types of image resources:</p>
+  <ul><li><a href="#photos">Photos</a></li>
+<li><a href="#icons">Icons</a></li>
+
+    <li><a href="#animated">Animated images</a></li>
+
+    </ul>
+    <h3 id="photos" name="photos">Photos</h3>
+    <p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
+  <pre class="prettyprint">/* HTML */
+&lt;img src=&quot;images/sample.jpg&quot; alt=&quot;sample image&quot; /&gt;
+
+/* CSS */
+.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;
+}
+</pre>
+<p>In terms of performance, there is no difference between the options.</p>
+
+<p>The image color is expressed based on pixels. Therefore, the higher resolution an image has, the better it looks on a large screen. For full HD display, a resolution bigger than the image size displayed on the screen is needed. However, since a high resolution image tends to have a large size, limit the image size as to fit the maximum screen size:</p>
+<ul><li>1024 x 768 px: 90 KB</li><li>300 x 200 px: 39 KB</li><li>300 x 200 px: 15 KB</li></ul>
+<p>Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.</p>
+<pre class="prettyprint">img
+{
+&nbsp;&nbsp;&nbsp;max-width: 100%;
+}
+</pre>
+
+<p class="figure">Figure: Enlarging a low-resolution image</p>
+<p style="text-align:center;"><img alt="Enlarging a low-resolution image" src="../../../images/enlarge_low_res_image.png" /></p>
+  <h3 id="icons" name="icons">Icons</h3>
+    <p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <span style="font-family: Courier New,Courier,monospace">background-size</span> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
+    <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;
+}
+
+.prev_icon.icon1
+{
+&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow_left_01.png);
+}
+</pre>
+
+<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
+
+<p class="figure">Figure: Network speed when calling each image separately</p>
+<p style="text-align:center;"><img alt="Calling each of image separately" src="../../../images/calling_img_sep.png"/></p>
+
+<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
+</p>
+<pre class="prettyprint">.prev_icon, .next_icon
+{
+&nbsp;&nbsp;&nbsp;background-size: 20px auto; /* Full HD Display */
+&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow.png);
+}
+
+.prev_icon.icon1
+{
+&nbsp;&nbsp;&nbsp;background-position: 0 0;
+}
+
+.prev_icon.icon2
+{
+&nbsp;&nbsp;&nbsp;background-position: 0 -50px;
+}
+</pre>
+<p class="figure">Figure: Network speed when using sprite images</p>
+<p style="text-align:center;"><img alt="Network speed when using sprite image" src="../../../images/network_speed_sprite.png" /></p>
+     <h3 id="animated" name="animated">Animated Images</h3>
+    <p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
+
+    <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
+    <p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
+    <p style="text-align:center;"><img alt="JAVA mascot character  in GIF" src="../../../images/mascot.gif"/></p><br/>
+
+    <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a>:</p>
+    <ul>
+    <li><a href="#gif">GIF animation</a></li>
+    <li><a href="#js">JavaScript animation</a></li>
+    <li><a href="#css3">CSS3 animation</a></li>
+    </ul>
+
+    <h4 id="gif" name="gif">GIF Animation</h4>
+
+    <p>Using GIF animation, the resource usage is as follows:</p>
+    <ul><li>Events: Fires only the painting event</li>
+    <li>Memory: 3 ~ 4 MB</li>
+    <li>Network: 10 ~ 25 ms</li>
+</ul>
+
+    <p class="figure">Figure: Events for a GIF image</p>
+    <p style="text-align:center;"><img alt="Events" src="../../../images/events.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a GIF image</p>
+    <p style="text-align:center;"><img alt="Memory" src="../../../images/memory.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a GIF image</p>
+    <p style="text-align:center;"><img alt="Network" src="../../../images/network.png"/></p><br/>
+
+    <p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
+
+    <h4 id="js" name="js">JavaScript Animation</h4>
+
+<p>JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:</p>
+<ul><li>
+Events: Event is fired every 100 ms, the interval of <span style="font-family: Courier New,Courier,monospace">setInterval()</span>.</li><li>
+Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
+Network: Used until the animation is stopped.</li></ul>
+    <p class="figure">Figure: Events for a JavaScript animation</p>
+    <p style="text-align:center;"><img alt="Events" src="../../../images/events2.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a JavaScript animation</p>
+    <p style="text-align:center;"><img alt="Memory" src="../../../images/memory2.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
+    <p style="text-align:center;"><img alt="Network" src="../../../images/network2.png"/></p><br/>
+<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);
+&lt;/script&gt;
+</pre>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
+
+<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);
+&lt;/script&gt;
+</pre>
+
+    <h4 id="css3" name="css3">CSS3 Animation</h4>
+
+        <p>CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option:</p>
+<ul><li>
+Events: Fires only rendering and painting events</li><li>
+Memory: 50 ~ 90 KB</li><li>
+Network: 9 ~ 21 ms</li></ul>
+
+    <p class="figure">Figure: Events for a CSS3 animation</p>
+    <p style="text-align:center;"><img alt="Events" src="../../../images/events3.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a CSS3 animation</p>
+    <p style="text-align:center;"><img alt="Memory" src="../../../images/memory3.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
+    <p style="text-align:center;"><img alt="Network" src="../../../images/network3.png"/></p><br/>
+
+    <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;}
+&lt;/style&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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/performance_w.htm b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
new file mode 100644 (file)
index 0000000..c24932e
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
@@ -0,0 +1,317 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#reduce">Reducing the Access Time for Variables</a></li>
+                       <li><a href="#event">Improving the Event Handler Response Time</a></li>
+                       <li><a href="#clean">Cleaning up Unused Properties and DOM Elements</a></li>
+                       <li><a href="#minimise">Minimizing the Document Flow</a></li>
+                       <li><a href="#launch">Improving the Application Launch Time</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+   
+  <h1>Performance Improvement</h1>
+       
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+       
+<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>
+<li><a href="#event">Improving the event handler response time</a></li>
+<li><a href="#clean">Cleaning up unused properties and DOM elements</a></li>
+<li><a href="#minimise">Minimizing the document flow</a></li>
+<li><a href="#launch">Improving the application launch time</a></li>
+</ul>
+
+<p>For more detailed and comprehensive information, study the following documentation:</p>
+       <ul>
+               <li><a href="https://developers.google.com/speed/" target="_blank">Make the Web Faster by Google Developers</a> </li>
+               <li><a href="http://www.slideshare.net/nzakas/speed-up-your-javascript" target="_blank">Speed Up Your JavaScript by Nicholas C. Zakas</a> </li>
+               <li><a href="http://www.slideshare.net/stoyan/high-performance-kick-ass-web-apps-javascript-edition" target="_blank">High-Performance Kick-Ass Web Apps by Stoyan Stefanov</a> </li>
+               <li><a href="http://developer.yahoo.com/performance/rules.html" target="_blank">Best Practices for Speeding Up Your Web Site, by Yahoo Developer Network</a>  </li>
+               <li><a href="http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/" target="_blank">Rendering: repaint, reflow/relayout, restyle by Stoyan Stefanov</a> </li>
+       </ul>
+  <h2 id="reduce" name="reduce">Reducing the Access Time for Variables</h2>
+
+<p>Out-of-scope variables, properties, and arrays, which are accessed more than twice, can be inefficient. It takes time to search whenever you reference an out-of-scope variable.</p>
+<p>A better approach is to cache the values into local variables.  Caching the value into a local variable is equivalent to one search, so it yields performance benefits from the second access onwards. This even applies to DOM properties: Each property access requires DOM traverse overhead, and since JavaScript does not know ahead of time if a given access is going to change values, caching a common part can save a lot of search time.</p>
+
+<p>The following example illustrates the issue.</p>
+<table border="1">
+       <caption>Table: Example of using local variables</caption>
+               <tbody>
+                       <tr>
+                               <th>Before</th>
+                               <td><pre class="prettyprint">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 = window.innerWidth / 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(window.innerHeight + window.innerWidth);  (X)
+}
+</pre></td>
+                               
+                       </tr>
+                       <tr>
+                               <th>After</th>
+                               <td><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); 
+}
+</pre></td>
+                       </tr>
+               </tbody>
+</table>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Tip</th> 
+      </tr> 
+      <tr> 
+       <td class="note">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></td> 
+      </tr> 
+     </tbody> 
+    </table>
+         <h2 id="event" name="event">Improving the Event Handler Response Time</h2>
+<p>When the number of event handlers grows in the DOM tree, Webkit consumes more memory to trace the events and the response time for each event increases. To prevent the response time slow-down, you can use a technique called event delegation.</p>
+<p>Event delegation means that you attach just one handler in the parent element and let it handle all the events from the child elements. Event delegation is based on events propagating up to the parent node, called bubbling, so the parent can handle all the events from the child nodes.</p>
+
+<p>The following example illustrates the issue.</p>
+<table border="1">
+       <caption>Table: Example of improving response time</caption>
+               <tbody>
+                       <tr>
+                               <th>Before</th>
+       <td><pre class="prettyprint">document.getElementById(&#39;a&#39;).onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;alert(&#39;&lt;a&gt; clicked!!&#39;);
+}
+
+document.getElementById(&#39;div&#39;).onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;alert(&#39;&lt;div&gt; clicked!!&#39;);
+}
+
+</pre></td>
+                       </tr>
+                       <tr>
+
+                               <th>After</th>
+                               <td><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;}
+}
+</pre></td>
+                       </tr>
+               </tbody>
+</table>
+  <h2 id="clean" name="clean">Cleaning up Unused Properties and DOM Elements</h2>
+<p>When DOM elements or object properties are accessed, JavaScript searches the variables with its variable resolution mechanism. Try to reduce the number of potential targets, since the average variable search slows when the target coverage grows. To minimize this problem, good coding practice demands that you explicitly remove unused DOM elements and properties when you know they are no longer needed.</p>
+
+<p>The following examples illustrate the issue.</p>
+<table border="1">
+       <caption>Table: Example of removing unused elements and properties</caption>
+       <tbody>
+               <tr>
+                       <th>Removing an unused property</th>
+                       <td><pre class="prettyprint">var myApp = {prop: &quot;myprop&quot;};
+delete myApp.prop; 
+</pre></td>
+                       </tr>
+                       <tr>
+                       <th>Removing an unused DOM element</th>
+                       <td><pre class="prettyprint">var el= $(&#39;#myelem&#39;);
+el.parentNode.removeChild(el);</pre></td>
+                       </tr>
+       </tbody>
+</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 class="figure">Figure: Webkit rendering flow</p> 
+  <p style="text-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>The document reflow happens:</p>
+       <ul>
+               <li>At the initial page load</li>
+               <li>On user actions, such as browser window resizing and font size change</li>
+               <li>When DOM node operations, such as add, remove, or update, are required</li>
+               <li>When the DOM node is animated or moved</li>
+               <li>When a layout style is applied</li>
+               <li>When layout information is retrieved</li>
+       </ul>
+
+<p>To reduce document reflow, apply the following tips:</p>
+<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> 
+<table border="1">
+       <caption>Table: Example of manipulating tables</caption>
+               <tbody>
+                       <tr>
+                               <th>Directly manipulating table nodes</th>
+                               <td><pre class="prettyprint">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 parent = table.parent();
+table.remove();
+table.addLotsAndLotsOfRows();
+parent.append(table);
+</pre></td>
+                       </tr>
+               </tbody>
+</table></li>
+<li>Be careful with specific properties.
+<p>The following properties are known to cause document reflow. Use a cached value with them, or minimize their usage altogether.</p>
+       <ul>
+               <li><span style="font-family: Courier New,Courier,monospace">offsetTop</span>, <span style="font-family: Courier New,Courier,monospace">offsetLeft</span>, <span style="font-family: Courier New,Courier,monospace">offsetWidth</span>, <span style="font-family: Courier New,Courier,monospace">offsetHeight</span> </li>
+               <li><span style="font-family: Courier New,Courier,monospace">scrollTop</span>, <span style="font-family: Courier New,Courier,monospace">scrollLeft</span>, <span style="font-family: Courier New,Courier,monospace">scrollWidth</span>, <span style="font-family: Courier New,Courier,monospace">scrollHeight</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">clientTop</span>, <span style="font-family: Courier New,Courier,monospace">clientLeft</span>, <span style="font-family: Courier New,Courier,monospace">clientWidth</span>, <span style="font-family: Courier New,Courier,monospace">clientHeight</span></li>
+               <li><span style="font-family: Courier New,Courier,monospace">getComputedStyle()</span></li>
+
+       </ul>
+</li>
+<li>Consider the expression order.
+<p>When you use inline CSS, consider the expression order in your code. The following example shows the difference between 2 code snippets that have the same result but different expression order. In the first example, the read and write order is mixed and Webkit executes the rendering flow twice, while the second example triggers the reflow only once.</p>
+
+<table border="1">
+       <caption>Table: Examples of expression order effects</caption>
+               <tbody>
+                       <tr>
+                               <th>2 document reflows </th>
+                               <td><pre class="prettyprint">var newWidth = aDiv.offsetWidth + 10; /* Read */
+aDiv.style.width = newWidth + &#39;px&#39;; /* Write */
+var newHeight = aDiv.offsetHeight + 10; /* Read */
+aDiv.style.height = newHeight + &#39;px&#39;; /* Write */
+</pre></td>
+                       </tr>
+                       <tr>
+                               <th>1 document reflow</th>
+                               <td><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 */
+</pre></td>
+                       </tr>
+               </tbody>
+</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>
+
+       <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>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>
+
+<table border="1">
+       <caption>Table: Example of reducing the number of files</caption>
+               <tbody>
+                       <tr>
+                               <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;
+</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;!--foo.js contains foo1.js, foo2.js, and foo3.js--&gt;
+</pre></td>
+                       </tr>
+               </tbody>
+</table></li>
+               <li>Minify JavaScript and CSS files.
+               <p>You can utilize several minifying tools to reduce the size of the JavaScript file. Minified JavaScript is very helpful in achieving faster launch time, because it minimizes the data size to load.</p>
+               <p>The following are examples of well-known minifier tools, most of which are free and open source software:</p>
+       <ul>
+               <li>Google closure compiler</li>
+               <li>YUICompressor</li>
+               <li>JSMin</li>
+               <li>UglifyJS</li>
+       </ul>
+</li>
+               <li>Keep only the first page elements in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
+               <p>Take advantage of a useful technique called deferring loading. The UI widget creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (<span style="font-family: Courier New,Courier,monospace">index.html</span>) 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
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
new file mode 100644 (file)
index 0000000..1d8b6a1
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+
+<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>Sound is not played in case of a tap event for:</p>
+       <ul>
+               <li>HTML elements whose disabled property is set to <span style="font-family: Courier New,Courier,monospace">disabled</span></li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> elements whose type attribute is set to one of the following editable types:
+               <ul>
+                       <li><span style="font-family: Courier New,Courier,monospace">date</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">datetime</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">datetime-local</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">email</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">month</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">number</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">password</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">range</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">search</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">tel</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">text</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">time</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">url</span></li>
+                       <li><span style="font-family: Courier New,Courier,monospace">week</span></li>
+               </ul></li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;textarea&gt;</span> elements</li>
+       </ul>
+       
+       <p>Sound is played in case of a tap event for:</p>
+       <ul>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> elements with the <span style="font-family: Courier New,Courier,monospace">href</span> attribute</li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;area&gt;</span> elements with the <span style="font-family: Courier New,Courier,monospace">href</span> attribute</li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;button&gt;</span> elements</li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> elements</li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;keygen&gt;</span> elements</li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;select&gt;</span> elements</li>
+               <li>HTML <span style="font-family: Courier New,Courier,monospace">&lt;summary&gt;</span> elements with a visible heading for the HTML <span style="font-family: Courier New,Courier,monospace">&lt;details&gt;</span> element</li>
+               <li>HTML elements on which the click event listener is registered</li>
+               <li>HTML elements on which the mousedown event listener is registered</li>
+               <li>HTML elements on which the mouseup event listener is registered</li>
+               <li>HTML elements on which the mouseover event listener is registered</li>
+               <li>MediaController objects of the HTML media elements</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm b/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
new file mode 100644 (file)
index 0000000..97e28e2
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
@@ -0,0 +1,433 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#single">Single Layout for Multiple Devices</a></li>
+                       <li><a href="#multiple">Multiple Layouts for Multiple Devices</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Multiple UI Layouts</h1>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+  <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>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>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>
+
+<p>Using some CSS techniques and Tizen Web engine mechanisms, you can design your application UI layout so that it displays properly on multiple devices:</p>
+<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> 
+  <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> 
+
+  <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>   
+   
+<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <span style="font-family: Courier New,Courier,monospace">viewport</span> 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 <span style="font-family: Courier New,Courier,monospace">viewport</span> 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> 
+
+<p>As shown in the following code snippet, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> 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 <span style="font-family: Courier New,Courier,monospace">viewport</span> 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> 
+
+<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;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag has other properties, such as <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">initial-scale</span>, <span style="font-family: Courier New,Courier,monospace">minimum-scale</span>, <span style="font-family: Courier New,Courier,monospace">maximum-scale</span>, and <span style="font-family: Courier New,Courier,monospace">user-scalable</span>. 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>
+
+<h3 id="relative" name="relative">Relative Layout</h3>
+
+<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 <span style="font-family: Courier New,Courier,monospace;">number_pad</span> element is set to 100% and 70%, not 320 px and 224 px. </p>
+
+<p class="figure">Figure: 320x320 calculator</p> 
+<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>
+<p style="text-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 class="figure">Figure: 360x480 calculator with a relative layout</p>  
+       <p style="text-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 class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>
+<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p> 
+ 
+  
+       <p style="text-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 class="figure">Figure: Typical wearable Web application layout</p>  
+       <p style="text-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 class="figure">Figure: 320x320 sample Web application</p>  
+       <p style="text-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 class="figure">Figure: Layout on 360x480</p>  
+       <p style="text-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> 
+
+<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 class="figure">Figure: Usable layout on 360x480</p>  
+       <p style="text-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 class="figure">Figure: Flexible media on 320x320 and 360x480</p> 
+<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>
+<p style="text-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 class="figure">Figure: Fixed size media element</p> 
+<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;} </span></p>
+<p style="text-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 <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, and disable the <span style="font-family: Courier New,Courier,monospace">user-scalable</span> 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;/html&gt;
+</pre>
+
+<p>In the above HTML code, the content area consists of 4 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> box elements, and their UI layout is described in the <span style="font-family: Courier New,Courier,monospace">style.css</span> 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">
+/* Default, used for all */
+* {box-sizing: border-box;}
+body, div, h1 {margin: 0px; padding: 0px;}
+html, body {width: 100%; height: 100%; overflow-x: hidden;}
+
+#box1 {background-color: rgb(255, 255, 141);}
+#box2 {background-color: rgb(165, 241, 238);}
+#box3 {background-color: rgb(248, 179, 179);}
+#box4 {background-color: rgb(192, 161, 246);}
+.tile 
+{
+&nbsp;&nbsp;&nbsp;width: 50%;
+&nbsp;&nbsp;&nbsp;height: 50%;
+&nbsp;&nbsp;&nbsp;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%;
+}
+</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 class="figure">Figure: Original layout on a target device</p>  
+       <p style="text-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 class="figure">Figure: Scaled layout on a 16:9 mobile device</p>  
+       <p style="text-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>
+
+<pre class="prettyprint">
+/* Default, used for all */
+* {box-sizing: border-box;}
+body, div, h1 {margin: 0px; padding: 0px;}
+html, body {width: 100%; height: 100%; overflow-x: hidden;}
+
+#box1 {background-color: rgb(255, 255, 141);}
+#box2 {background-color: rgb(165, 241, 238);}
+#box3 {background-color: rgb(248, 179, 179);}
+#box4 {background-color: rgb(192, 161, 246);}
+.tile 
+{
+&nbsp;&nbsp;&nbsp;width: 50%;
+&nbsp;&nbsp;&nbsp;height: 50%;
+&nbsp;&nbsp;&nbsp;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%;
+}
+
+#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 class="figure">Figure: Image-based layout on a target device</p>  
+       <p style="text-align:center;"><img alt="Image-based layout on a target device" src="../../../images/layout_image.png"/></p>
+
+<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>  
+       <p style="text-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> 
+  
+  <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 (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock 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 class="figure">Figure: Application for a watch and tablet</p>  
+       <p style="text-align:center;"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>  
+
+<p>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> 
+  <li><a href="#viewport2">Viewport setting</a></li>
+   <li><a href="#category">Category classification</a></li> 
+   <li><a href="#display">Classification for display modes (landscape and portrait)</a></li> 
+ </ul>
+   
+
+  <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 <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span>. 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 <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span> 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;
+</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>Media Queries</h4>
+<p>Media queries consist of a media type and expressions of media features. </p>
+
+<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">aural</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">braille</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">handheld</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">print</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">projection</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">screen</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tty</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tv</span></li>
+</ul>
+
+<p>You can declare that sections apply to certain media types inside a CSS style sheet.  As in the following example, you can declare <span style="font-family: Courier New,Courier,monospace;">screen</span> as a media type and describe its layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span>. That code applies the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> when the Web application is run on the screen type executable context.</p>
+
+<pre class="prettyprint">
+@media screen {...}
+</pre>
+
+<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <span style="font-family: Courier New,Courier,monospace;">screen</span> media type and a 500 pixel minimum width. Its final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user. </p>
+
+<pre class="prettyprint">
+@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> 
+
+<table> 
+<caption>Table: Media features</caption>
+   <tbody> 
+    <tr> 
+     <th>Feature</th> 
+        <th>Value</th>
+        <th>Min/Max</th>
+        <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> 
+  <tr>
+    <td>color-index</td>
+        <td>Number of entries in the color lookup table</td>
+  </tr>
+    <tr> 
+     <td>device-aspect-ratio</td> 
+     <td>integer/integer</td>
+        <td>Aspect ratio</td>   
+    </tr>  
+    <tr> 
+     <td>device-height</td> 
+     <td rowspan="2">length</td>
+        <td>Output device height</td>   
+    </tr>
+    <tr> 
+     <td>device-width</td> 
+        <td>Output device width</td>    
+    </tr>
+    <tr> 
+     <td>grid</td> 
+     <td>integer</td>
+        <td>no</td>
+        <td>Set to true for a grid-based device</td>    
+    </tr>
+    <tr> 
+     <td>height</td> 
+     <td>length</td>
+        <td rowspan="3">yes</td>
+        <td>Rendering surface height</td>       
+    </tr>
+    <tr> 
+     <td>monochrome</td> 
+     <td>integer</td>
+        <td>Number of bits per pixel in a monochrome frame buffer</td>  
+    </tr>
+    <tr> 
+     <td>resolution</td> 
+     <td>resolution (<span style="font-family: Courier New,Courier,monospace;">dpi</span> or <span style="font-family: Courier New,Courier,monospace;">dpcm</span>)</td>
+        <td>Resolution</td>     
+    </tr>
+    <tr> 
+     <td>scan</td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">progressive</span> or <span style="font-family: Courier New,Courier,monospace;">interlaced</span></td>
+        <td>no</td>
+        <td>Scanning process of the <span style="font-family: Courier New,Courier,monospace;">tv</span> media types</td>        
+    </tr>
+    <tr> 
+     <td>width</td> 
+     <td>length</td>
+        <td>yes</td>
+        <td>Rendering surface width</td>        
+    </tr>      
+   </tbody> 
+  </table>
+       
+<h3 id="display" name="display">Classification for Display Modes</h3>
+
+<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> in Media Queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p> 
+<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation:portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p> 
+<pre class="prettyprint">
+@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) 
+{
+&nbsp;&nbsp;&nbsp;// For portrait mode
+}
+@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) 
+{
+&nbsp;&nbsp;&nbsp;// For landscape mode
+}
+</pre> 
+       
+
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
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
new file mode 100644 (file)
index 0000000..e256caa
--- /dev/null
+++ b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a class="opensection" href="../../../../../org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features Tutorials</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       
+  <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>
+
+<p>The main useful features are:</p>
+
+       <ul>
+               <li><a href="html_priority_w.htm">HTML Priorities</a> <p>Enables you to use CSS and JavaScript code effectively with HTML elements.</p></li>
+       </ul>
+
+  <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+   <ul> 
+       <li><a href="multiple_screens_w.htm">Multiple Screen Support</a> <p>Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.</p></li>     
+       <li><a href="frame_flattening_w.htm">Frame Flattening</a> <p>Allows you to improve the scrollability of small screens.</p></li>
+       <li><a href="sound_policy_w.htm">Tizen WebKit Tap Sound Policy</a> <p>Allows you to play sounds to provide responsiveness on user interaction.</p></li>         
+  </ul>  
+  
+  <p>The following guides apply in <span style="color: red">wearable applications only</span>:</p>
+   <ul> 
+       <li><a href="performance_w.htm">Performance Improvement</a> <p>Allows you to improve the performance of Tizen Web applications.</p></li>
+       <li><a href="ui_layout_w.htm">Multiple UI Layouts</a> <p>Allows you to design your application layout so that your application can run on multiple Tizen 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/index.xml b/org.tizen.guides/index.xml
new file mode 100644 (file)
index 0000000..44ace72
--- /dev/null
+++ b/org.tizen.guides/index.xml
@@ -0,0 +1,267 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="Guides" topic="html/cover_page.htm">
+
+<topic href="html/web/guides_w.htm" label="Web Application">
+       <topic href="html/web/tizen/guides_tizen_w.htm" label="Tizen Features">                 
+               <topic href="html/web/tizen/tizen/tizen_guide_w.htm" label="Tizen"></topic>
+               <topic href="html/web/tizen/application/app_guide_w.htm" label="Application">                           
+                       <topic href="html/web/tizen/application/alarm_w.htm" label="Alarm"></topic>
+                       <topic href="html/web/tizen/application/application_w.htm" label="Application"></topic>
+                       <topic href="html/web/tizen/application/package_w.htm" label="Package"></topic>
+                       <topic href="html/web/tizen/application/data_w.htm" label="Data Control"></topic>
+               </topic>
+               <topic href="html/web/tizen/content/content_guide_w.htm" label="Content">
+                       <topic href="html/web/tizen/content/content_w.htm" label="Content"></topic>
+                       <topic href="html/web/tizen/content/download_w.htm" label="Download"></topic>
+                       <topic href="html/web/tizen/content/exif_w.htm" label="Exif"></topic>
+               </topic>
+               <topic href="html/web/tizen/input_output/io_guide_w.htm" label="Input/Output">
+                       <topic href="html/web/tizen/input_output/filesystem_w.htm" label="Filesystem"></topic>
+                       <topic href="html/web/tizen/input_output/message_port_w.htm" label="Message Port"></topic>                                      
+                       <topic href="html/web/tizen/input_output/archive_w.htm" label="Archive"></topic>
+               </topic>
+               <topic href="html/web/tizen/multimedia/multimedia_guide_w.htm" label="Multimedia">                              
+                       <topic href="html/web/tizen/multimedia/media_key_w.htm" label="Media Key"></topic>
+                       <topic href="html/web/tizen/multimedia/sound_w.htm" label="Sound"></topic>                                      
+               </topic>        
+               <topic href="html/web/tizen/system/system_guide_w.htm" label="System">                                  
+                       <topic href="html/web/tizen/system/ham_w.htm" label="Human Activity Monitor"></topic>
+                       <topic href="html/web/tizen/system/power_w.htm" label="Power"></topic>
+                       <topic href="html/web/tizen/system/sensor_w.htm" label="Sensor"></topic>
+                       <topic href="html/web/tizen/system/system_info_w.htm" label="System Information"></topic>
+                       <topic href="html/web/tizen/system/system_setting_w.htm" label="System Setting"></topic>
+                       <topic href="html/web/tizen/system/time_w.htm" label="Time"></topic>                                                            
+                       <topic href="html/web/tizen/system/fm_radio_w.htm" label="FM Radio"></topic>
+                       <topic href="html/web/tizen/system/web_setting_w.htm" label="Web Setting"></topic>                              
+               </topic>
+               <topic href="html/web/tizen/ui/ui_guide_w.htm" label="User Interface">                                  
+                       <topic href="html/web/tizen/ui/badge_w.htm" label="Badge"></topic>
+                       <topic href="html/web/tizen/ui/noti_w.htm" label="Notification"></topic>                                        
+               </topic>
+               <topic href="html/web/tizen/communication/comm_guide_w.htm" label="Communication">
+                       <topic href="html/web/tizen/communication/bluetooth_w.htm" label="Bluetooth"></topic>
+                       <topic href="html/web/tizen/communication/messaging_w.htm" label="Messaging"></topic>
+                       <topic href="html/web/tizen/communication/nfc_w.htm" label="NFC"></topic>
+                       <topic href="html/web/tizen/communication/push_w.htm" label="Push"></topic>
+                       <topic href="html/web/tizen/communication/secure_element_w.htm" label="Secure Element"></topic>
+               </topic>        
+               <topic href="html/web/tizen/social/social_guide_w.htm" label="Social">                                  
+                       <topic href="html/web/tizen/social/account_w.htm" label="Account"></topic>
+                       <topic href="html/web/tizen/social/bookmark_w.htm" label="Bookmark"></topic>
+                       <topic href="html/web/tizen/social/calendar_w.htm" label="Calendar"></topic>
+                       <topic href="html/web/tizen/social/call_history_w.htm" label="Call History"></topic>
+                       <topic href="html/web/tizen/social/contact_w.htm" label="Contact"></topic>
+                       <topic href="html/web/tizen/social/data_sync_w.htm" label="Data Synchronization"></topic>                                       
+               </topic>                
+               <topic href="html/web/tizen/dynamic/dynamic_w.htm" label="Dynamic Box"></topic>
+               <topic href="html/web/tizen/localization/localization_w.htm" label="Localization"></topic>
+               <topic href="html/web/tizen/uifw/uifw_guide_w.htm" label="Web UIFW"></topic>
+               <topic href="html/web/tizen/service/service_w.htm" label= "Service Application"></topic>
+               <topic href="html/web/tizen/ime/ime_w.htm" label= "IME Application"></topic>            
+       </topic>
+       <topic href="html/web/w3c/guides_w3c_w.htm" label="W3C/HTML5/Supplementary Features">                   
+               <topic href="html/web/w3c/dom/dom_guide_w.htm" label="DOM, Forms and Styles">                                   
+                       <topic href="html/web/w3c/dom/animation_w.htm" label="CSS Animations Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/background_w.htm" label="CSS Backgrounds and Borders Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/basic_ui_w.htm" label="CSS Basic User Interface Module Level 3 (CSS3 UI)"></topic>
+                       <topic href="html/web/w3c/dom/color_w.htm" label="CSS Color Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/flexible_w.htm" label="CSS Flexible Box Layout Module"></topic>
+                       <topic href="html/web/w3c/dom/transform_w.htm" label="CSS Transforms"></topic>
+                       <topic href="html/web/w3c/dom/transition_w.htm" label="CSS Transitions Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/font_w.htm" label="CSS Fonts Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/text_module_w.htm" label="CSS Text Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/woff_w.htm" label="WOFF File Format 1.0"></topic>
+                       <topic href="html/web/w3c/dom/html5forms_w.htm" label="HTML5 Forms"></topic>
+                       <topic href="html/web/w3c/dom/media_query_w.htm" label="Media Queries"></topic>
+                       <topic href="html/web/w3c/dom/selector_w.htm" label="Selectors API Level 1 and Level 2"></topic>
+                       <topic href="html/web/w3c/dom/session_history_w.htm" label="HTML5 session history of browsing contexts"></topic>        
+                       <topic href="html/web/w3c/dom/multi_w.htm" label="CSS Multi-column Layout Module"></topic>                      
+               </topic>
+               <topic href="html/web/w3c/device/device_guide_w.htm" label="Device">                                    
+                       <topic href="html/web/w3c/device/battery_w.htm" label="Battery Status"></topic>
+                       <topic href="html/web/w3c/device/device_orientation_w.htm" label="DeviceOrientation Event Specification"></topic>                       
+                       <topic href="html/web/w3c/device/touch_w.htm" label="Touch Events version 1"></topic>
+                       <topic href="html/web/w3c/device/vibration_w.htm" label="Vibration"></topic>
+                       <topic href="html/web/w3c/device/browser_state_w.htm" label="HTML5 Browser state"></topic>
+                       <topic href="html/web/w3c/device/screen_orientation_w.htm" label="Screen Orientation"></topic>                  
+               </topic>
+               <topic href="html/web/w3c/graphics/graphics_guide_w.htm" label="Graphics">                                      
+                       <topic href="html/web/w3c/graphics/canvas_w.htm" label="HTML5 Canvas"></topic>
+                       <topic href="html/web/w3c/graphics/svg_w.htm" label="HTML5 SVG"></topic>                                        
+               </topic>
+               <topic href="html/web/w3c/media/media_guide_w.htm" label="Media">                                       
+                       <topic href="html/web/w3c/media/getusermedia_w.htm" label="getUserMedia"></topic>
+                       <topic href="html/web/w3c/media/video_audio_w.htm" label="HTML5 video and audio element"></topic>
+                       <topic href="html/web/w3c/media/media_capture_w.htm" label="HTML Media Capture"></topic>
+                       <topic href="html/web/w3c/media/webaudio_w.htm" label="Web Audio"></topic>                                      
+               </topic>
+               <topic href="html/web/w3c/communication/comm_guide_w.htm" label="Communication">                                        
+                       <topic href="html/web/w3c/communication/web_messaging_w.htm" label="HTML5 Web Messaging"></topic>
+                       <topic href="html/web/w3c/communication/websocket_w.htm" label="WebSocket"></topic>
+                       <topic href="html/web/w3c/communication/xmlhttprequest_w.htm" label="XMLHttpRequest Level 1 and 2"></topic>
+                       <topic href="html/web/w3c/communication/server_sent_w.htm" label="Server-Sent Events"></topic>                                  
+               </topic>
+               <topic href="html/web/w3c/storage/storage_guide_w.htm" label="Storage">                                 
+                       <topic href="html/web/w3c/storage/file_w.htm" label="File"></topic>             
+                       <topic href="html/web/w3c/storage/indexdb_w.htm" label="Indexed Database"></topic>                      
+                       <topic href="html/web/w3c/storage/web_storage_w.htm" label="Web Storage"></topic>
+                       <topic href="html/web/w3c/storage/appcache_w.htm" label="HTML5 Application caches"></topic>
+                       <topic href="html/web/w3c/storage/websql_w.htm" label="Web SQL Database"></topic>                                       
+               </topic>
+               <topic href="html/web/w3c/security/security_guide_w.htm" label="Security">                                      
+                       <topic href="html/web/w3c/security/iframe_w.htm" label="HTML5 iframe element"></topic>
+                       <topic href="html/web/w3c/security/cors_w.htm" label="Cross-Origin Resource Sharing"></topic>                                   
+               </topic>
+               <topic href="html/web/w3c/perf_opt/performance_guide_w.htm" label="Performance and Optimization">                                       
+                       <topic href="html/web/w3c/perf_opt/page_w.htm" label="Page Visibility"></topic>
+                       <topic href="html/web/w3c/perf_opt/timing_control_w.htm" label="Timing control for script-based animations"></topic>
+                       <topic href="html/web/w3c/perf_opt/web_workers_w.htm" label="Web Workers">                                                      
+                               <topic href="html/web/w3c/perf_opt/js_performance_improvement_w.htm" label="JavaScript Performance Improvement"></topic>
+                               <topic href="html/web/w3c/perf_opt/jquery_performance_improvement_w.htm" label="jQuery Performance Improvement"></topic>
+                               <topic href="html/web/w3c/perf_opt/minify_js_css_w.htm" label="JavaScript and CSS Minification"></topic>        
+                       </topic>                                        
+               </topic>
+               <topic href="html/web/w3c/location/location_guide_w.htm" label="Location">                                      
+                       <topic href="html/web/w3c/location/geolocation_w.htm" label="Geolocation API Specification"></topic>                    
+               </topic>
+               <topic href="html/web/w3c/ui/ui_guide_w.htm" label="UI">                                        
+                       <topic href="html/web/w3c/ui/clipboard_w.htm" label="Clipboard API and events"></topic>
+                       <topic href="html/web/w3c/ui/drag_drop_w.htm" label="HTML5 Drag and drop"></topic>                                      
+               </topic>                
+               <topic href="html/web/w3c/useful/useful_guide_w.htm" label="Useful Guides for W3C/HTML5 Features">      
+                       <topic href="html/web/w3c/useful/html_priority_w.htm" label="HTML Priorities"></topic>
+                       <topic href="html/web/w3c/useful/multiple_screens_w.htm" label="Multiple Screen Support"></topic>
+                       <topic href="html/web/w3c/useful/frame_flattening_w.htm" label="Frame Flattening"></topic>
+                       <topic href="html/web/w3c/useful/sound_policy_w.htm" label="Tizen WebKit Tap Sound Policy"></topic>
+                       <topic href="html/web/w3c/useful/performance_w.htm" label="Performance Improvement"></topic>
+                       <topic href="html/web/w3c/useful/ui_layout_w.htm" label="Multiple UI Layouts"></topic>
+               </topic>                
+               <topic href="html/web/w3c/supplement/supplement_guide_w.htm" label="Supplementary Features">
+                       <topic href="html/web/w3c/supplement/typedarray_w.htm" label="Typed Array - Khronos"></topic>
+                       <topic href="html/web/w3c/supplement/webgl_w.htm" label="WebGL - Khronos"></topic>      
+                       <topic href="html/web/w3c/supplement/fullscreen_w.htm" label="FullScreen API - Mozilla"></topic>
+                       <topic href="html/web/w3c/supplement/camera_w.htm" label="Camera API (Tizen Extension)"></topic>                                
+               </topic>                                                        
+       </topic>                                
+</topic>
+<topic href="html/native/guides_n.htm" label="Native Application">             
+       <topic href="html/native/app/app_guide_n.htm" label="Application Framework">                    
+               <topic href="html/native/app/application_n.htm" label="Application"></topic>
+               <topic href="html/native/app/app_manager_n.htm" label="Application Manager"></topic>
+               <topic href="html/native/app/badge_n.htm" label="Badge"></topic>
+               <topic href="html/native/app/bundle_n.htm" label="Bundle"></topic>
+               <topic href="html/native/app/data_control_n.htm" label="Data Control"></topic>
+               <topic href="html/native/app/message_port_n.htm" label="Message Port"></topic>
+               <topic href="html/native/app/notification_n.htm" label="Notification"></topic>
+               <topic href="html/native/app/package_n.htm" label="Package Manager"></topic>
+               <topic href="html/native/app/service_app_n.htm" label="Service Application"></topic>
+               <topic href="html/native/app/shortcut_n.htm" label="Shortcut"></topic>          
+       </topic>
+       <topic href="html/native/base/base_guide_n.htm" label="Base">                   
+               <topic href="html/native/base/i18n_n.htm" label="i18n"></topic>      
+       </topic>
+       <topic href="html/native/content/content_guide_n.htm" label="Content">                  
+               <topic href="html/native/content/download_n.htm" label="Download"></topic>
+               <topic href="html/native/content/media_content_n.htm" label="Media Content"></topic>
+               <topic href="html/native/content/mime_type_n.htm" label="MIME Type"></topic>            
+       </topic>
+       <topic href="html/native/context/context_guide_n.htm" label="Context">                  
+               <topic href="html/native/context/activity_recognition_n.htm" label="Activity Recognition"></topic>
+               <topic href="html/native/context/gesture_recognition_n.htm" label="Gesture Recognition"></topic>                        
+       </topic>
+       <topic href="html/native/graphics/graphics_guide_n.htm" label="Graphics">
+               <topic href="html/native/graphics/opengles_n.htm" label="OpenGL ES"></topic>
+               <topic href="html/native/graphics/tbm_n.htm" label="TBM Surface"></topic>
+               <topic href="html/native/graphics/cairo_n.htm" label="Cairo Integration"></topic>
+       </topic>
+       <topic href="html/native/location/location_guide_n.htm" label="Location"></topic>
+       <topic href="html/native/messaging/messaging_guide_n.htm" label="Messaging">                    
+               <topic href="html/native/messaging/messages_n.htm" label="Messages"></topic>
+               <topic href="html/native/messaging/email_n.htm" label="Email"></topic>
+               <topic href="html/native/messaging/push_n.htm" label="Push"></topic>                    
+       </topic>
+       <topic href="html/native/multimedia/multimedia_guide_n.htm" label="Multimedia">                 
+               <topic href="html/native/multimedia/audio_io_n.htm" label="Audio I/O"></topic>
+               <topic href="html/native/multimedia/camera_n.htm" label="Camera"></topic>
+               <topic href="html/native/multimedia/image_util_n.htm" label="Image Util"></topic>
+               <topic href="html/native/multimedia/media_codecs_n.htm" label="Media Codec"></topic>
+               <topic href="html/native/multimedia/media_tools_n.htm" label="Media Tool"></topic>
+               <topic href="html/native/multimedia/metadata_extractor_n.htm" label="Metadata Extractor"></topic>
+               <topic href="html/native/multimedia/player_n.htm" label="Player"></topic>
+               <topic href="html/native/multimedia/radio_n.htm" label="Radio"></topic>
+               <topic href="html/native/multimedia/recorder_n.htm" label="Recorder"></topic>
+               <topic href="html/native/multimedia/tone_player_n.htm" label="Tone Player"></topic>
+               <topic href="html/native/multimedia/video_util_n.htm" label="Video Util"></topic>
+               <topic href="html/native/multimedia/wav_player_n.htm" label="WAV Player"></topic>               
+               <topic href="html/native/multimedia/sound_manager_n.htm" label="Sound Manager"></topic>
+       </topic>
+       <topic href="html/native/network/network_guide_n.htm" label="Network">                  
+               <topic href="html/native/network/connection_n.htm" label="Connection"></topic>
+               <topic href="html/native/network/bluetooth_n.htm" label="Bluetooth"></topic>
+               <topic href="html/native/network/nfc_n.htm" label="NFC"></topic>
+               <topic href="html/native/network/wifi_n.htm" label="Wi-Fi"></topic>
+               <topic href="html/native/network/wifi_direct_n.htm" label="Wi-Fi Direct"></topic>               
+       </topic>
+       <topic href="html/native/security/security_guide_n.htm" label="Security">                       
+               <topic href="html/native/security/key_manager_n.htm" label="Key Manager"></topic>
+               <topic href="html/native/security/privilege_n.htm" label="Privilege Info"></topic>                      
+       </topic>
+       <topic href="html/native/social/social_guide_n.htm" label="Social">                     
+               <topic href="html/native/social/account_manager_n.htm" label="Account Manager"></topic>
+               <topic href="html/native/social/calendar_n.htm" label="Calendar"></topic>
+               <topic href="html/native/social/contact_n.htm" label="Contacts"></topic>                        
+       </topic>
+       <topic href="html/native/system/system_guide_n.htm" label="System">                     
+               <topic href="html/native/system/device_n.htm" label="Device"></topic>
+               <topic href="html/native/system/dlog_n.htm" label="dlog"></topic>
+               <topic href="html/native/system/media_keys_n.htm" label="Media key"></topic>
+               <topic href="html/native/system/runtime_info_n.htm" label="Runtime information"></topic>
+               <topic href="html/native/system/sensors_n.htm" label="Sensor"></topic>
+               <topic href="html/native/system/sysinfo_n.htm" label="System Information"></topic>
+               <topic href="html/native/system/settings_n.htm" label="System Settings"></topic>
+               <topic href="html/native/system/storage_n.htm" label="Storage"></topic>                 
+       </topic>
+       <topic href="html/native/telephony/telephony_guide_n.htm" label="Telephony"></topic>
+       <topic href="html/native/ui/ui_guide_n.htm" label="UI"> 
+               <topic href="html/native/ui/efl_n.htm" label="EFL"></topic>     
+               <topic href="html/native/ui/eina_n.htm" label="Eina">
+                       <topic href="html/native/ui/data_types_n.htm" label="Data Types"></topic>
+                       <topic href="html/native/ui/eina_tools_n.htm" label="Eina Tools"></topic>
+               </topic>
+               <topic href="html/native/ui/evas_n.htm" label="Evas"></topic>   
+               <topic href="html/native/ui/edje_n.htm" label="Edje">   
+                       <topic href="html/native/ui/edc_part_block_n.htm" label="Edje Parts and Blocks"></topic>                
+               </topic>
+               <topic href="html/native/ui/ecore_n.htm" label="Ecore">
+                       <topic href="html/native/ui/main_loop_n.htm" label="Main Loop"></topic>
+                       <topic href="html/native/ui/threads_n.htm" label="Thread Usage"></topic>        
+               </topic>
+               <topic href="html/native/ui/events_effects_n.htm" label="Event and Effect">
+                       <topic href="html/native/ui/event_types_n.htm" label="Event Types"></topic>                             
+                       <topic href="html/native/ui/animations_effects_n.htm" label="Animation and Effect Types"></topic>                       
+               </topic>                
+               <topic href="html/native/ui/ui_control_n.htm" label="UI Control">
+                       <topic href="html/native/ui/elementary_n.htm" label="Elementary Widgets">
+                               <topic href="html/native/ui/containers_n.htm" label="Container Widgets"></topic>
+                               <topic href="html/native/ui/ui_widgets_n.htm" label="UI Widgets"></topic>
+                       </topic>
+                       <topic href="html/native/ui/widget_preferences_n.htm" label="Widget Preferences"></topic>                                               
+               </topic>                
+               <topic href="html/native/ui/efl_extension_n.htm" label="Efl Extension"></topic>
+               <topic href="html/native/ui/font_setting_n.htm" label="Font Setting"></topic>
+               <topic href="html/native/ui/efl_util_n.htm" label="EFL UTIL"></topic>
+               <topic href="html/native/ui/multiple_screens_n.htm" label="Multiple Screen Support"></topic>            
+       </topic>
+       <topic href="html/native/uix/uix_guide_n.htm" label="UIX">                      
+               <topic href="html/native/uix/tts_n.htm" label="TTS"></topic>
+               <topic href="html/native/uix/stt_n.htm" label="STT"></topic>                    
+       </topic>
+       <topic href="html/native/web/web_guide_n.htm" label="Web"></topic>      
+       <topic href="html/native/porting/porting_n.htm" label="Porting">                        
+               <topic href="html/native/porting/api_comparison_n.htm" label="API Comparison"></topic>
+       </topic>        
+</topic>       
+</toc>
diff --git a/org.tizen.guides/plugin.xml b/org.tizen.guides/plugin.xml
new file mode 100644 (file)
index 0000000..90140e5
--- /dev/null
+++ b/org.tizen.guides/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+       <extension point="org.eclipse.help.toc">
+               <toc file="index.xml" primary="true" />
+       </extension>
+</plugin>
diff --git a/org.tizen.tutorials/.project b/org.tizen.tutorials/.project
new file mode 100644 (file)
index 0000000..5e738b2
--- /dev/null
+++ b/org.tizen.tutorials/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+       <name>org.tizen.tutorials_2.3.0</name>
+       <comment></comment>
+       <projects>
+       </projects>
+       <buildSpec>
+               <buildCommand>
+                       <name>org.eclipse.pde.ManifestBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+               <buildCommand>
+                       <name>org.eclipse.pde.SchemaBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+       </buildSpec>
+       <natures>
+               <nature>org.eclipse.pde.PluginNature</nature>
+       </natures>
+</projectDescription>
diff --git a/org.tizen.tutorials/META-INF/MANIFEST.MF b/org.tizen.tutorials/META-INF/MANIFEST.MF
new file mode 100644 (file)
index 0000000..4923a78
--- /dev/null
+++ b/org.tizen.tutorials/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Tizen Tutorials
+Bundle-SymbolicName: org.tizen.tutorials;singleton=true
+Bundle-Version: 2.3.1
+Bundle-Vendor: The Linux Foundation
+
diff --git a/org.tizen.tutorials/about.html b/org.tizen.tutorials/about.html
new file mode 100644 (file)
index 0000000..df0aa96
--- /dev/null
+++ b/org.tizen.tutorials/about.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head> 
+  <script type="text/javascript" src="html/scripts/snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="html/css/styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>About This Content</title> 
+ </head> 
+ <body onload="prettyPrint()"> 
+ 
+  <h1><a name="Creating2" id="Creating2">About This Content</a></h1> 
+  <p>Tizen 2.3.0</p> 
+
+  <h1>License</h1> 
+   <p>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>
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/build.properties b/org.tizen.tutorials/build.properties
new file mode 100644 (file)
index 0000000..b84ff38
--- /dev/null
+++ b/org.tizen.tutorials/build.properties
@@ -0,0 +1,8 @@
+bin.includes = plugin.xml,\
+               META-INF/,\
+               html/,\
+               build.properties,\
+               .project,\
+                          about.html,\
+               index.xml
+
diff --git a/org.tizen.tutorials/html/cover_page.htm b/org.tizen.tutorials/html/cover_page.htm
new file mode 100644 (file)
index 0000000..9f781cf
--- /dev/null
+++ b/org.tizen.tutorials/html/cover_page.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 Tutorials</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Tutorials</font></h1>
+
+<p>Click the application type you want:</p>
+<p><a href="web/tutorials_w.htm"><img alt="Web Application" src="images/w_division.png"/></a> <a href="native/tutorials_n.htm"><img alt="Native Application" src="images/n_division.png"/></a></p> 
+
+
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/css/snippet.css b/org.tizen.tutorials/html/css/snippet.css
new file mode 100644 (file)
index 0000000..f880409
--- /dev/null
+++ b/org.tizen.tutorials/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #793AFF }  /* string content */
+  .kwd { color: #7F0055 }  /* a keyword */
+  .com { color: green}  /* a comment */
+  .typ { color: #1C1C1C }  /* a type name */
+  .lit { color: black }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #1C1C1C}
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/org.tizen.tutorials/html/css/styles.css b/org.tizen.tutorials/html/css/styles.css
new file mode 100644 (file)
index 0000000..c4eb32b
--- /dev/null
+++ b/org.tizen.tutorials/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";
+
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+       
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+       
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+       background: white;
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}      
+       
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }       
+       
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+       
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/* Classes for creating collapsible content */
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
+#main {width: 75%; height: 90%;}
+#container {width:100%;}
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
+body.no-toc #container #contents {right: 0;padding-right:30px;}
+body.no-toc #navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+       .devicespecs-util ul.dutil li a:hover { color:#222; }
+       .devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr     {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr em  {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+       ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+       
+.top {text-align: right;}
+.toc, ul.toc{
+       margin: 10px 0px 0px 0px;
+       padding-left: 13px;
+       list-style: disc;
+       font-size: 9pt;
+       line-height: 115%; 
+       }
+       
+.toc-title {
+       font-size: 12pt;
+       color: #0E437D; 
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+       
+a.top {
+       display:block; 
+       float: right; 
+       position:fixed;
+       width: 28px; 
+       height:89px; 
+       bottom:50px;
+       z-index: 101;
+       right: 19%;
+       }
+
+a img {border: 0;}
+       
+/*     Footer includes space and a gray line above             */
+#footer {
+       position: fixed;
+       /* width: 100%; */
+    bottom: 0px;
+       text-align: center;
+       border-top: 1px solid #CCCCCC;
+       background-color: #FFFFFF;      
+       left: 21px;  right: 21px;
+}
+
+.footer {font-size: 8pt;}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;} 
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+    position: relative;
+}
+#profile p {
+       text-align: right;
+}
+
+div#toc_border {
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
+}
+
+#contents li {
+       padding-top: 3px;
+       margin-top: 5px;
+       /* overflow: auto; */
+}
+
+p {
+       /* overflow: auto; */
+}
+
+div.table {
+       /* overflow: auto; */
+}
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/images/3d.png b/org.tizen.tutorials/html/images/3d.png
new file mode 100644 (file)
index 0000000..b5955c7
Binary files /dev/null and b/org.tizen.tutorials/html/images/3d.png differ
diff --git a/org.tizen.tutorials/html/images/3d_final.png b/org.tizen.tutorials/html/images/3d_final.png
new file mode 100644 (file)
index 0000000..0d931b1
Binary files /dev/null and b/org.tizen.tutorials/html/images/3d_final.png differ
diff --git a/org.tizen.tutorials/html/images/9patch.png b/org.tizen.tutorials/html/images/9patch.png
new file mode 100644 (file)
index 0000000..8be21f3
Binary files /dev/null and b/org.tizen.tutorials/html/images/9patch.png differ
diff --git a/org.tizen.tutorials/html/images/accordion_menu.png b/org.tizen.tutorials/html/images/accordion_menu.png
new file mode 100644 (file)
index 0000000..9647530
Binary files /dev/null and b/org.tizen.tutorials/html/images/accordion_menu.png differ
diff --git a/org.tizen.tutorials/html/images/account_signin.png b/org.tizen.tutorials/html/images/account_signin.png
new file mode 100644 (file)
index 0000000..96d1b1c
Binary files /dev/null and b/org.tizen.tutorials/html/images/account_signin.png differ
diff --git a/org.tizen.tutorials/html/images/animation1.png b/org.tizen.tutorials/html/images/animation1.png
new file mode 100644 (file)
index 0000000..295b59e
Binary files /dev/null and b/org.tizen.tutorials/html/images/animation1.png differ
diff --git a/org.tizen.tutorials/html/images/animation_up_down.png b/org.tizen.tutorials/html/images/animation_up_down.png
new file mode 100644 (file)
index 0000000..2c0c609
Binary files /dev/null and b/org.tizen.tutorials/html/images/animation_up_down.png differ
diff --git a/org.tizen.tutorials/html/images/application_page_layout.png b/org.tizen.tutorials/html/images/application_page_layout.png
new file mode 100644 (file)
index 0000000..beead7a
Binary files /dev/null and b/org.tizen.tutorials/html/images/application_page_layout.png differ
diff --git a/org.tizen.tutorials/html/images/application_store_sd.png b/org.tizen.tutorials/html/images/application_store_sd.png
new file mode 100644 (file)
index 0000000..0e2e0fa
Binary files /dev/null and b/org.tizen.tutorials/html/images/application_store_sd.png differ
diff --git a/org.tizen.tutorials/html/images/arraybuffer.png b/org.tizen.tutorials/html/images/arraybuffer.png
new file mode 100644 (file)
index 0000000..ef5f6b6
Binary files /dev/null and b/org.tizen.tutorials/html/images/arraybuffer.png differ
diff --git a/org.tizen.tutorials/html/images/base_layout.png b/org.tizen.tutorials/html/images/base_layout.png
new file mode 100644 (file)
index 0000000..7976836
Binary files /dev/null and b/org.tizen.tutorials/html/images/base_layout.png differ
diff --git a/org.tizen.tutorials/html/images/basic_layout_480x800.png b/org.tizen.tutorials/html/images/basic_layout_480x800.png
new file mode 100644 (file)
index 0000000..5e0e66b
Binary files /dev/null and b/org.tizen.tutorials/html/images/basic_layout_480x800.png differ
diff --git a/org.tizen.tutorials/html/images/basic_layout_720x1280.png b/org.tizen.tutorials/html/images/basic_layout_720x1280.png
new file mode 100644 (file)
index 0000000..506dc56
Binary files /dev/null and b/org.tizen.tutorials/html/images/basic_layout_720x1280.png differ
diff --git a/org.tizen.tutorials/html/images/bg_util_bar.gif b/org.tizen.tutorials/html/images/bg_util_bar.gif
new file mode 100644 (file)
index 0000000..977f94d
Binary files /dev/null and b/org.tizen.tutorials/html/images/bg_util_bar.gif differ
diff --git a/org.tizen.tutorials/html/images/blue_box.png b/org.tizen.tutorials/html/images/blue_box.png
new file mode 100644 (file)
index 0000000..ccefab3
Binary files /dev/null and b/org.tizen.tutorials/html/images/blue_box.png differ
diff --git a/org.tizen.tutorials/html/images/bluetooth_onoff.png b/org.tizen.tutorials/html/images/bluetooth_onoff.png
new file mode 100644 (file)
index 0000000..cb3689d
Binary files /dev/null and b/org.tizen.tutorials/html/images/bluetooth_onoff.png differ
diff --git a/org.tizen.tutorials/html/images/bluetooth_visibility.png b/org.tizen.tutorials/html/images/bluetooth_visibility.png
new file mode 100644 (file)
index 0000000..87a74d2
Binary files /dev/null and b/org.tizen.tutorials/html/images/bluetooth_visibility.png differ
diff --git a/org.tizen.tutorials/html/images/bluetoothchat.png b/org.tizen.tutorials/html/images/bluetoothchat.png
new file mode 100644 (file)
index 0000000..3607fd1
Binary files /dev/null and b/org.tizen.tutorials/html/images/bluetoothchat.png differ
diff --git a/org.tizen.tutorials/html/images/box_model_properties.png b/org.tizen.tutorials/html/images/box_model_properties.png
new file mode 100644 (file)
index 0000000..e0cedcb
Binary files /dev/null and b/org.tizen.tutorials/html/images/box_model_properties.png differ
diff --git a/org.tizen.tutorials/html/images/btn_top.gif b/org.tizen.tutorials/html/images/btn_top.gif
new file mode 100644 (file)
index 0000000..d35e824
Binary files /dev/null and b/org.tizen.tutorials/html/images/btn_top.gif differ
diff --git a/org.tizen.tutorials/html/images/cairo-ex1.png b/org.tizen.tutorials/html/images/cairo-ex1.png
new file mode 100644 (file)
index 0000000..dd0ce7a
Binary files /dev/null and b/org.tizen.tutorials/html/images/cairo-ex1.png differ
diff --git a/org.tizen.tutorials/html/images/calculator_sd.png b/org.tizen.tutorials/html/images/calculator_sd.png
new file mode 100644 (file)
index 0000000..9434f41
Binary files /dev/null and b/org.tizen.tutorials/html/images/calculator_sd.png differ
diff --git a/org.tizen.tutorials/html/images/calllog.png b/org.tizen.tutorials/html/images/calllog.png
new file mode 100644 (file)
index 0000000..2629285
Binary files /dev/null and b/org.tizen.tutorials/html/images/calllog.png differ
diff --git a/org.tizen.tutorials/html/images/canvas_drawing_masks.png b/org.tizen.tutorials/html/images/canvas_drawing_masks.png
new file mode 100644 (file)
index 0000000..31c66de
Binary files /dev/null and b/org.tizen.tutorials/html/images/canvas_drawing_masks.png differ
diff --git a/org.tizen.tutorials/html/images/canvas_drawing_shapes1.png b/org.tizen.tutorials/html/images/canvas_drawing_shapes1.png
new file mode 100644 (file)
index 0000000..dc8057e
Binary files /dev/null and b/org.tizen.tutorials/html/images/canvas_drawing_shapes1.png differ
diff --git a/org.tizen.tutorials/html/images/canvas_drawing_shapes2.png b/org.tizen.tutorials/html/images/canvas_drawing_shapes2.png
new file mode 100644 (file)
index 0000000..9935fb2
Binary files /dev/null and b/org.tizen.tutorials/html/images/canvas_drawing_shapes2.png differ
diff --git a/org.tizen.tutorials/html/images/canvas_drawing_shapes3.png b/org.tizen.tutorials/html/images/canvas_drawing_shapes3.png
new file mode 100644 (file)
index 0000000..76f81d0
Binary files /dev/null and b/org.tizen.tutorials/html/images/canvas_drawing_shapes3.png differ
diff --git a/org.tizen.tutorials/html/images/canvas_using_images.png b/org.tizen.tutorials/html/images/canvas_using_images.png
new file mode 100644 (file)
index 0000000..2ff184f
Binary files /dev/null and b/org.tizen.tutorials/html/images/canvas_using_images.png differ
diff --git a/org.tizen.tutorials/html/images/changing_batterystatus.png b/org.tizen.tutorials/html/images/changing_batterystatus.png
new file mode 100644 (file)
index 0000000..9b1f645
Binary files /dev/null and b/org.tizen.tutorials/html/images/changing_batterystatus.png differ
diff --git a/org.tizen.tutorials/html/images/charging_battery.png b/org.tizen.tutorials/html/images/charging_battery.png
new file mode 100644 (file)
index 0000000..98a4555
Binary files /dev/null and b/org.tizen.tutorials/html/images/charging_battery.png differ
diff --git a/org.tizen.tutorials/html/images/chatter.png b/org.tizen.tutorials/html/images/chatter.png
new file mode 100644 (file)
index 0000000..73b7a00
Binary files /dev/null and b/org.tizen.tutorials/html/images/chatter.png differ
diff --git a/org.tizen.tutorials/html/images/clamped_array.png b/org.tizen.tutorials/html/images/clamped_array.png
new file mode 100644 (file)
index 0000000..4c2ba37
Binary files /dev/null and b/org.tizen.tutorials/html/images/clamped_array.png differ
diff --git a/org.tizen.tutorials/html/images/clockwidget_sd.png b/org.tizen.tutorials/html/images/clockwidget_sd.png
new file mode 100644 (file)
index 0000000..23c98d8
Binary files /dev/null and b/org.tizen.tutorials/html/images/clockwidget_sd.png differ
diff --git a/org.tizen.tutorials/html/images/color_final.png b/org.tizen.tutorials/html/images/color_final.png
new file mode 100644 (file)
index 0000000..cb9528c
Binary files /dev/null and b/org.tizen.tutorials/html/images/color_final.png differ
diff --git a/org.tizen.tutorials/html/images/color_vertex.png b/org.tizen.tutorials/html/images/color_vertex.png
new file mode 100644 (file)
index 0000000..d111906
Binary files /dev/null and b/org.tizen.tutorials/html/images/color_vertex.png differ
diff --git a/org.tizen.tutorials/html/images/column_settings.png b/org.tizen.tutorials/html/images/column_settings.png
new file mode 100644 (file)
index 0000000..41362f6
Binary files /dev/null and b/org.tizen.tutorials/html/images/column_settings.png differ
diff --git a/org.tizen.tutorials/html/images/compass.png b/org.tizen.tutorials/html/images/compass.png
new file mode 100644 (file)
index 0000000..916c6c3
Binary files /dev/null and b/org.tizen.tutorials/html/images/compass.png differ
diff --git a/org.tizen.tutorials/html/images/contactsexchanger.png b/org.tizen.tutorials/html/images/contactsexchanger.png
new file mode 100644 (file)
index 0000000..4cfe078
Binary files /dev/null and b/org.tizen.tutorials/html/images/contactsexchanger.png differ
diff --git a/org.tizen.tutorials/html/images/content_sd.png b/org.tizen.tutorials/html/images/content_sd.png
new file mode 100644 (file)
index 0000000..20f9cca
Binary files /dev/null and b/org.tizen.tutorials/html/images/content_sd.png differ
diff --git a/org.tizen.tutorials/html/images/copy_pasting.png b/org.tizen.tutorials/html/images/copy_pasting.png
new file mode 100644 (file)
index 0000000..8001cad
Binary files /dev/null and b/org.tizen.tutorials/html/images/copy_pasting.png differ
diff --git a/org.tizen.tutorials/html/images/css_bg_tutorial1.png b/org.tizen.tutorials/html/images/css_bg_tutorial1.png
new file mode 100644 (file)
index 0000000..4f338ce
Binary files /dev/null and b/org.tizen.tutorials/html/images/css_bg_tutorial1.png differ
diff --git a/org.tizen.tutorials/html/images/css_bg_tutorial2.png b/org.tizen.tutorials/html/images/css_bg_tutorial2.png
new file mode 100644 (file)
index 0000000..f7616c3
Binary files /dev/null and b/org.tizen.tutorials/html/images/css_bg_tutorial2.png differ
diff --git a/org.tizen.tutorials/html/images/css_color_tutorial1.png b/org.tizen.tutorials/html/images/css_color_tutorial1.png
new file mode 100644 (file)
index 0000000..e0199bf
Binary files /dev/null and b/org.tizen.tutorials/html/images/css_color_tutorial1.png differ
diff --git a/org.tizen.tutorials/html/images/css_transforms1.png b/org.tizen.tutorials/html/images/css_transforms1.png
new file mode 100644 (file)
index 0000000..1a010cc
Binary files /dev/null and b/org.tizen.tutorials/html/images/css_transforms1.png differ
diff --git a/org.tizen.tutorials/html/images/css_transforms2.png b/org.tizen.tutorials/html/images/css_transforms2.png
new file mode 100644 (file)
index 0000000..cd46dea
Binary files /dev/null and b/org.tizen.tutorials/html/images/css_transforms2.png differ
diff --git a/org.tizen.tutorials/html/images/css_transforms5.png b/org.tizen.tutorials/html/images/css_transforms5.png
new file mode 100644 (file)
index 0000000..efab7e1
Binary files /dev/null and b/org.tizen.tutorials/html/images/css_transforms5.png differ
diff --git a/org.tizen.tutorials/html/images/cube.png b/org.tizen.tutorials/html/images/cube.png
new file mode 100644 (file)
index 0000000..dc53478
Binary files /dev/null and b/org.tizen.tutorials/html/images/cube.png differ
diff --git a/org.tizen.tutorials/html/images/cube_matrix.png b/org.tizen.tutorials/html/images/cube_matrix.png
new file mode 100644 (file)
index 0000000..70710dd
Binary files /dev/null and b/org.tizen.tutorials/html/images/cube_matrix.png differ
diff --git a/org.tizen.tutorials/html/images/data_view.png b/org.tizen.tutorials/html/images/data_view.png
new file mode 100644 (file)
index 0000000..69c6944
Binary files /dev/null and b/org.tizen.tutorials/html/images/data_view.png differ
diff --git a/org.tizen.tutorials/html/images/demo_gradation2.png b/org.tizen.tutorials/html/images/demo_gradation2.png
new file mode 100644 (file)
index 0000000..96bfd57
Binary files /dev/null and b/org.tizen.tutorials/html/images/demo_gradation2.png differ
diff --git a/org.tizen.tutorials/html/images/demo_rectangle2.png b/org.tizen.tutorials/html/images/demo_rectangle2.png
new file mode 100644 (file)
index 0000000..296f6e4
Binary files /dev/null and b/org.tizen.tutorials/html/images/demo_rectangle2.png differ
diff --git a/org.tizen.tutorials/html/images/demo_resizing2.png b/org.tizen.tutorials/html/images/demo_resizing2.png
new file mode 100644 (file)
index 0000000..a503ffe
Binary files /dev/null and b/org.tizen.tutorials/html/images/demo_resizing2.png differ
diff --git a/org.tizen.tutorials/html/images/dice.png b/org.tizen.tutorials/html/images/dice.png
new file mode 100644 (file)
index 0000000..e4c27cf
Binary files /dev/null and b/org.tizen.tutorials/html/images/dice.png differ
diff --git a/org.tizen.tutorials/html/images/dice_3d.png b/org.tizen.tutorials/html/images/dice_3d.png
new file mode 100644 (file)
index 0000000..71231e2
Binary files /dev/null and b/org.tizen.tutorials/html/images/dice_3d.png differ
diff --git a/org.tizen.tutorials/html/images/downloadmanager.png b/org.tizen.tutorials/html/images/downloadmanager.png
new file mode 100644 (file)
index 0000000..0be3e23
Binary files /dev/null and b/org.tizen.tutorials/html/images/downloadmanager.png differ
diff --git a/org.tizen.tutorials/html/images/dragdrop.png b/org.tizen.tutorials/html/images/dragdrop.png
new file mode 100644 (file)
index 0000000..3fb9ded
Binary files /dev/null and b/org.tizen.tutorials/html/images/dragdrop.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_line_loop.png b/org.tizen.tutorials/html/images/drawing_line_loop.png
new file mode 100644 (file)
index 0000000..648df24
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_line_loop.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_line_sequence.png b/org.tizen.tutorials/html/images/drawing_line_sequence.png
new file mode 100644 (file)
index 0000000..1273e84
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_line_sequence.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_line_strip.png b/org.tizen.tutorials/html/images/drawing_line_strip.png
new file mode 100644 (file)
index 0000000..062b6b3
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_line_strip.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_lines.png b/org.tizen.tutorials/html/images/drawing_lines.png
new file mode 100644 (file)
index 0000000..37fda29
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_lines.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_points.png b/org.tizen.tutorials/html/images/drawing_points.png
new file mode 100644 (file)
index 0000000..0689ab8
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_points.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_triangle_fan.png b/org.tizen.tutorials/html/images/drawing_triangle_fan.png
new file mode 100644 (file)
index 0000000..76baef7
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_triangle_fan.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_triangle_strip.png b/org.tizen.tutorials/html/images/drawing_triangle_strip.png
new file mode 100644 (file)
index 0000000..bcb2980
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_triangle_strip.png differ
diff --git a/org.tizen.tutorials/html/images/drawing_triangles.png b/org.tizen.tutorials/html/images/drawing_triangles.png
new file mode 100644 (file)
index 0000000..292c76f
Binary files /dev/null and b/org.tizen.tutorials/html/images/drawing_triangles.png differ
diff --git a/org.tizen.tutorials/html/images/dynamic_layout_480x800.png b/org.tizen.tutorials/html/images/dynamic_layout_480x800.png
new file mode 100644 (file)
index 0000000..66c5682
Binary files /dev/null and b/org.tizen.tutorials/html/images/dynamic_layout_480x800.png differ
diff --git a/org.tizen.tutorials/html/images/dynamic_layout_720x1280.png b/org.tizen.tutorials/html/images/dynamic_layout_720x1280.png
new file mode 100644 (file)
index 0000000..e4d7fd4
Binary files /dev/null and b/org.tizen.tutorials/html/images/dynamic_layout_720x1280.png differ
diff --git a/org.tizen.tutorials/html/images/efl_complex_clock.png b/org.tizen.tutorials/html/images/efl_complex_clock.png
new file mode 100644 (file)
index 0000000..28d02e8
Binary files /dev/null and b/org.tizen.tutorials/html/images/efl_complex_clock.png differ
diff --git a/org.tizen.tutorials/html/images/efl_complex_clock_tree.png b/org.tizen.tutorials/html/images/efl_complex_clock_tree.png
new file mode 100644 (file)
index 0000000..2703c4a
Binary files /dev/null and b/org.tizen.tutorials/html/images/efl_complex_clock_tree.png differ
diff --git a/org.tizen.tutorials/html/images/efl_libraries.png b/org.tizen.tutorials/html/images/efl_libraries.png
new file mode 100644 (file)
index 0000000..1e00122
Binary files /dev/null and b/org.tizen.tutorials/html/images/efl_libraries.png differ
diff --git a/org.tizen.tutorials/html/images/efl_simple_clock.png b/org.tizen.tutorials/html/images/efl_simple_clock.png
new file mode 100644 (file)
index 0000000..62092e6
Binary files /dev/null and b/org.tizen.tutorials/html/images/efl_simple_clock.png differ
diff --git a/org.tizen.tutorials/html/images/efl_simple_clock_tree.png b/org.tizen.tutorials/html/images/efl_simple_clock_tree.png
new file mode 100644 (file)
index 0000000..9b4a6ed
Binary files /dev/null and b/org.tizen.tutorials/html/images/efl_simple_clock_tree.png differ
diff --git a/org.tizen.tutorials/html/images/email_sample.png b/org.tizen.tutorials/html/images/email_sample.png
new file mode 100644 (file)
index 0000000..66204fb
Binary files /dev/null and b/org.tizen.tutorials/html/images/email_sample.png differ
diff --git a/org.tizen.tutorials/html/images/eventmanager.png b/org.tizen.tutorials/html/images/eventmanager.png
new file mode 100644 (file)
index 0000000..69bf90c
Binary files /dev/null and b/org.tizen.tutorials/html/images/eventmanager.png differ
diff --git a/org.tizen.tutorials/html/images/events_using_css3.png b/org.tizen.tutorials/html/images/events_using_css3.png
new file mode 100644 (file)
index 0000000..9e0a791
Binary files /dev/null and b/org.tizen.tutorials/html/images/events_using_css3.png differ
diff --git a/org.tizen.tutorials/html/images/events_using_javascript.png b/org.tizen.tutorials/html/images/events_using_javascript.png
new file mode 100644 (file)
index 0000000..65dde9d
Binary files /dev/null and b/org.tizen.tutorials/html/images/events_using_javascript.png differ
diff --git a/org.tizen.tutorials/html/images/execution_screen.png b/org.tizen.tutorials/html/images/execution_screen.png
new file mode 100644 (file)
index 0000000..283d510
Binary files /dev/null and b/org.tizen.tutorials/html/images/execution_screen.png differ
diff --git a/org.tizen.tutorials/html/images/fade_affect_animation.png b/org.tizen.tutorials/html/images/fade_affect_animation.png
new file mode 100644 (file)
index 0000000..4dfec7c
Binary files /dev/null and b/org.tizen.tutorials/html/images/fade_affect_animation.png differ
diff --git a/org.tizen.tutorials/html/images/file1.png b/org.tizen.tutorials/html/images/file1.png
new file mode 100644 (file)
index 0000000..fb23a5e
Binary files /dev/null and b/org.tizen.tutorials/html/images/file1.png differ
diff --git a/org.tizen.tutorials/html/images/file2.png b/org.tizen.tutorials/html/images/file2.png
new file mode 100644 (file)
index 0000000..bfe104b
Binary files /dev/null and b/org.tizen.tutorials/html/images/file2.png differ
diff --git a/org.tizen.tutorials/html/images/file3.png b/org.tizen.tutorials/html/images/file3.png
new file mode 100644 (file)
index 0000000..a5169b6
Binary files /dev/null and b/org.tizen.tutorials/html/images/file3.png differ
diff --git a/org.tizen.tutorials/html/images/file4.png b/org.tizen.tutorials/html/images/file4.png
new file mode 100644 (file)
index 0000000..5fe40ff
Binary files /dev/null and b/org.tizen.tutorials/html/images/file4.png differ
diff --git a/org.tizen.tutorials/html/images/file5.png b/org.tizen.tutorials/html/images/file5.png
new file mode 100644 (file)
index 0000000..4a3752c
Binary files /dev/null and b/org.tizen.tutorials/html/images/file5.png differ
diff --git a/org.tizen.tutorials/html/images/file6.png b/org.tizen.tutorials/html/images/file6.png
new file mode 100644 (file)
index 0000000..57dbecc
Binary files /dev/null and b/org.tizen.tutorials/html/images/file6.png differ
diff --git a/org.tizen.tutorials/html/images/filemanager.png b/org.tizen.tutorials/html/images/filemanager.png
new file mode 100644 (file)
index 0000000..a3a4b0b
Binary files /dev/null and b/org.tizen.tutorials/html/images/filemanager.png differ
diff --git a/org.tizen.tutorials/html/images/flexcontainer_properties.png b/org.tizen.tutorials/html/images/flexcontainer_properties.png
new file mode 100644 (file)
index 0000000..9a4595d
Binary files /dev/null and b/org.tizen.tutorials/html/images/flexcontainer_properties.png differ
diff --git a/org.tizen.tutorials/html/images/flexible_box_allignment.png b/org.tizen.tutorials/html/images/flexible_box_allignment.png
new file mode 100644 (file)
index 0000000..886472d
Binary files /dev/null and b/org.tizen.tutorials/html/images/flexible_box_allignment.png differ
diff --git a/org.tizen.tutorials/html/images/flexible_default_structure.png b/org.tizen.tutorials/html/images/flexible_default_structure.png
new file mode 100644 (file)
index 0000000..baaf604
Binary files /dev/null and b/org.tizen.tutorials/html/images/flexible_default_structure.png differ
diff --git a/org.tizen.tutorials/html/images/flexible_screen_size.png b/org.tizen.tutorials/html/images/flexible_screen_size.png
new file mode 100644 (file)
index 0000000..09769e3
Binary files /dev/null and b/org.tizen.tutorials/html/images/flexible_screen_size.png differ
diff --git a/org.tizen.tutorials/html/images/flexitem_properties.png b/org.tizen.tutorials/html/images/flexitem_properties.png
new file mode 100644 (file)
index 0000000..1606b63
Binary files /dev/null and b/org.tizen.tutorials/html/images/flexitem_properties.png differ
diff --git a/org.tizen.tutorials/html/images/font_face.png b/org.tizen.tutorials/html/images/font_face.png
new file mode 100644 (file)
index 0000000..391ac46
Binary files /dev/null and b/org.tizen.tutorials/html/images/font_face.png differ
diff --git a/org.tizen.tutorials/html/images/font_properties.png b/org.tizen.tutorials/html/images/font_properties.png
new file mode 100644 (file)
index 0000000..bea7f40
Binary files /dev/null and b/org.tizen.tutorials/html/images/font_properties.png differ
diff --git a/org.tizen.tutorials/html/images/form_contact_layout.png b/org.tizen.tutorials/html/images/form_contact_layout.png
new file mode 100644 (file)
index 0000000..6d3555c
Binary files /dev/null and b/org.tizen.tutorials/html/images/form_contact_layout.png differ
diff --git a/org.tizen.tutorials/html/images/fullscreen.png b/org.tizen.tutorials/html/images/fullscreen.png
new file mode 100644 (file)
index 0000000..7d9c08f
Binary files /dev/null and b/org.tizen.tutorials/html/images/fullscreen.png differ
diff --git a/org.tizen.tutorials/html/images/genlist_1line.png b/org.tizen.tutorials/html/images/genlist_1line.png
new file mode 100644 (file)
index 0000000..25cb49e
Binary files /dev/null and b/org.tizen.tutorials/html/images/genlist_1line.png differ
diff --git a/org.tizen.tutorials/html/images/genlist_item.png b/org.tizen.tutorials/html/images/genlist_item.png
new file mode 100644 (file)
index 0000000..9da176f
Binary files /dev/null and b/org.tizen.tutorials/html/images/genlist_item.png differ
diff --git a/org.tizen.tutorials/html/images/geolocation.png b/org.tizen.tutorials/html/images/geolocation.png
new file mode 100644 (file)
index 0000000..bfb371f
Binary files /dev/null and b/org.tizen.tutorials/html/images/geolocation.png differ
diff --git a/org.tizen.tutorials/html/images/gesture_view2.png b/org.tizen.tutorials/html/images/gesture_view2.png
new file mode 100644 (file)
index 0000000..715878e
Binary files /dev/null and b/org.tizen.tutorials/html/images/gesture_view2.png differ
diff --git a/org.tizen.tutorials/html/images/graph_app.png b/org.tizen.tutorials/html/images/graph_app.png
new file mode 100644 (file)
index 0000000..5143788
Binary files /dev/null and b/org.tizen.tutorials/html/images/graph_app.png differ
diff --git a/org.tizen.tutorials/html/images/grid_layout.png b/org.tizen.tutorials/html/images/grid_layout.png
new file mode 100644 (file)
index 0000000..04dfd42
Binary files /dev/null and b/org.tizen.tutorials/html/images/grid_layout.png differ
diff --git a/org.tizen.tutorials/html/images/ico_arr_hidden.gif b/org.tizen.tutorials/html/images/ico_arr_hidden.gif
new file mode 100644 (file)
index 0000000..9a9d3ff
Binary files /dev/null and b/org.tizen.tutorials/html/images/ico_arr_hidden.gif differ
diff --git a/org.tizen.tutorials/html/images/ico_bullet_2_7.gif b/org.tizen.tutorials/html/images/ico_bullet_2_7.gif
new file mode 100644 (file)
index 0000000..8de872c
Binary files /dev/null and b/org.tizen.tutorials/html/images/ico_bullet_2_7.gif differ
diff --git a/org.tizen.tutorials/html/images/image_after.png b/org.tizen.tutorials/html/images/image_after.png
new file mode 100644 (file)
index 0000000..7c7e7cd
Binary files /dev/null and b/org.tizen.tutorials/html/images/image_after.png differ
diff --git a/org.tizen.tutorials/html/images/image_before.png b/org.tizen.tutorials/html/images/image_before.png
new file mode 100644 (file)
index 0000000..1e1f8eb
Binary files /dev/null and b/org.tizen.tutorials/html/images/image_before.png differ
diff --git a/org.tizen.tutorials/html/images/initializing_buffers.png b/org.tizen.tutorials/html/images/initializing_buffers.png
new file mode 100644 (file)
index 0000000..b12f1fb
Binary files /dev/null and b/org.tizen.tutorials/html/images/initializing_buffers.png differ
diff --git a/org.tizen.tutorials/html/images/initializing_buffers_coordsystem.png b/org.tizen.tutorials/html/images/initializing_buffers_coordsystem.png
new file mode 100644 (file)
index 0000000..b430667
Binary files /dev/null and b/org.tizen.tutorials/html/images/initializing_buffers_coordsystem.png differ
diff --git a/org.tizen.tutorials/html/images/media_capture_activating_features.png b/org.tizen.tutorials/html/images/media_capture_activating_features.png
new file mode 100644 (file)
index 0000000..2673200
Binary files /dev/null and b/org.tizen.tutorials/html/images/media_capture_activating_features.png differ
diff --git a/org.tizen.tutorials/html/images/media_capture_file_types.png b/org.tizen.tutorials/html/images/media_capture_file_types.png
new file mode 100644 (file)
index 0000000..6f21589
Binary files /dev/null and b/org.tizen.tutorials/html/images/media_capture_file_types.png differ
diff --git a/org.tizen.tutorials/html/images/media_queries1.png b/org.tizen.tutorials/html/images/media_queries1.png
new file mode 100644 (file)
index 0000000..a9fdf9a
Binary files /dev/null and b/org.tizen.tutorials/html/images/media_queries1.png differ
diff --git a/org.tizen.tutorials/html/images/media_queries3.png b/org.tizen.tutorials/html/images/media_queries3.png
new file mode 100644 (file)
index 0000000..62be867
Binary files /dev/null and b/org.tizen.tutorials/html/images/media_queries3.png differ
diff --git a/org.tizen.tutorials/html/images/memory_using_css3.png b/org.tizen.tutorials/html/images/memory_using_css3.png
new file mode 100644 (file)
index 0000000..b00d71a
Binary files /dev/null and b/org.tizen.tutorials/html/images/memory_using_css3.png differ
diff --git a/org.tizen.tutorials/html/images/memory_using_javascript.png b/org.tizen.tutorials/html/images/memory_using_javascript.png
new file mode 100644 (file)
index 0000000..386a1b0
Binary files /dev/null and b/org.tizen.tutorials/html/images/memory_using_javascript.png differ
diff --git a/org.tizen.tutorials/html/images/menu_skeleton.png b/org.tizen.tutorials/html/images/menu_skeleton.png
new file mode 100644 (file)
index 0000000..2022af0
Binary files /dev/null and b/org.tizen.tutorials/html/images/menu_skeleton.png differ
diff --git a/org.tizen.tutorials/html/images/message_port_bi-directional_communication.png b/org.tizen.tutorials/html/images/message_port_bi-directional_communication.png
new file mode 100644 (file)
index 0000000..f98dff3
Binary files /dev/null and b/org.tizen.tutorials/html/images/message_port_bi-directional_communication.png differ
diff --git a/org.tizen.tutorials/html/images/message_port_trusted_uni-directional_comm.png b/org.tizen.tutorials/html/images/message_port_trusted_uni-directional_comm.png
new file mode 100644 (file)
index 0000000..1d7e4e2
Binary files /dev/null and b/org.tizen.tutorials/html/images/message_port_trusted_uni-directional_comm.png differ
diff --git a/org.tizen.tutorials/html/images/message_port_uni-directional_communication.png b/org.tizen.tutorials/html/images/message_port_uni-directional_communication.png
new file mode 100644 (file)
index 0000000..4ed3745
Binary files /dev/null and b/org.tizen.tutorials/html/images/message_port_uni-directional_communication.png differ
diff --git a/org.tizen.tutorials/html/images/mn_division.png b/org.tizen.tutorials/html/images/mn_division.png
new file mode 100644 (file)
index 0000000..1f7e337
Binary files /dev/null and b/org.tizen.tutorials/html/images/mn_division.png differ
diff --git a/org.tizen.tutorials/html/images/mn_fold.png b/org.tizen.tutorials/html/images/mn_fold.png
new file mode 100644 (file)
index 0000000..1f8d62b
Binary files /dev/null and b/org.tizen.tutorials/html/images/mn_fold.png differ
diff --git a/org.tizen.tutorials/html/images/mn_icon.png b/org.tizen.tutorials/html/images/mn_icon.png
new file mode 100644 (file)
index 0000000..19a0fd3
Binary files /dev/null and b/org.tizen.tutorials/html/images/mn_icon.png differ
diff --git a/org.tizen.tutorials/html/images/multi_node_selection.png b/org.tizen.tutorials/html/images/multi_node_selection.png
new file mode 100644 (file)
index 0000000..33654de
Binary files /dev/null and b/org.tizen.tutorials/html/images/multi_node_selection.png differ
diff --git a/org.tizen.tutorials/html/images/multipoint_touch.png b/org.tizen.tutorials/html/images/multipoint_touch.png
new file mode 100644 (file)
index 0000000..360773d
Binary files /dev/null and b/org.tizen.tutorials/html/images/multipoint_touch.png differ
diff --git a/org.tizen.tutorials/html/images/mw_division.png b/org.tizen.tutorials/html/images/mw_division.png
new file mode 100644 (file)
index 0000000..8fc3efa
Binary files /dev/null and b/org.tizen.tutorials/html/images/mw_division.png differ
diff --git a/org.tizen.tutorials/html/images/mw_fold.png b/org.tizen.tutorials/html/images/mw_fold.png
new file mode 100644 (file)
index 0000000..a96e013
Binary files /dev/null and b/org.tizen.tutorials/html/images/mw_fold.png differ
diff --git a/org.tizen.tutorials/html/images/mw_icon.png b/org.tizen.tutorials/html/images/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.tutorials/html/images/mw_icon.png differ
diff --git a/org.tizen.tutorials/html/images/mw_icon_optional.png b/org.tizen.tutorials/html/images/mw_icon_optional.png
new file mode 100644 (file)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.tutorials/html/images/mw_icon_optional.png differ
diff --git a/org.tizen.tutorials/html/images/n_division.png b/org.tizen.tutorials/html/images/n_division.png
new file mode 100644 (file)
index 0000000..df38a99
Binary files /dev/null and b/org.tizen.tutorials/html/images/n_division.png differ
diff --git a/org.tizen.tutorials/html/images/n_fold.png b/org.tizen.tutorials/html/images/n_fold.png
new file mode 100644 (file)
index 0000000..6336532
Binary files /dev/null and b/org.tizen.tutorials/html/images/n_fold.png differ
diff --git a/org.tizen.tutorials/html/images/nfc_onoff.png b/org.tizen.tutorials/html/images/nfc_onoff.png
new file mode 100644 (file)
index 0000000..40a2fe1
Binary files /dev/null and b/org.tizen.tutorials/html/images/nfc_onoff.png differ
diff --git a/org.tizen.tutorials/html/images/notification_bar_sd.png b/org.tizen.tutorials/html/images/notification_bar_sd.png
new file mode 100644 (file)
index 0000000..57aff11
Binary files /dev/null and b/org.tizen.tutorials/html/images/notification_bar_sd.png differ
diff --git a/org.tizen.tutorials/html/images/notification_status_sd.png b/org.tizen.tutorials/html/images/notification_status_sd.png
new file mode 100644 (file)
index 0000000..22db54b
Binary files /dev/null and b/org.tizen.tutorials/html/images/notification_status_sd.png differ
diff --git a/org.tizen.tutorials/html/images/opengl1.png b/org.tizen.tutorials/html/images/opengl1.png
new file mode 100644 (file)
index 0000000..d4956d1
Binary files /dev/null and b/org.tizen.tutorials/html/images/opengl1.png differ
diff --git a/org.tizen.tutorials/html/images/opengl2.png b/org.tizen.tutorials/html/images/opengl2.png
new file mode 100644 (file)
index 0000000..b8aaa85
Binary files /dev/null and b/org.tizen.tutorials/html/images/opengl2.png differ
diff --git a/org.tizen.tutorials/html/images/page_visibility_change.png b/org.tizen.tutorials/html/images/page_visibility_change.png
new file mode 100644 (file)
index 0000000..e06961c
Binary files /dev/null and b/org.tizen.tutorials/html/images/page_visibility_change.png differ
diff --git a/org.tizen.tutorials/html/images/page_visibility_get.png b/org.tizen.tutorials/html/images/page_visibility_get.png
new file mode 100644 (file)
index 0000000..7d18687
Binary files /dev/null and b/org.tizen.tutorials/html/images/page_visibility_get.png differ
diff --git a/org.tizen.tutorials/html/images/pane_tuto.png b/org.tizen.tutorials/html/images/pane_tuto.png
new file mode 100644 (file)
index 0000000..6278878
Binary files /dev/null and b/org.tizen.tutorials/html/images/pane_tuto.png differ
diff --git a/org.tizen.tutorials/html/images/piano.png b/org.tizen.tutorials/html/images/piano.png
new file mode 100644 (file)
index 0000000..5ef31f9
Binary files /dev/null and b/org.tizen.tutorials/html/images/piano.png differ
diff --git a/org.tizen.tutorials/html/images/pseudo_elements_selector_range.png b/org.tizen.tutorials/html/images/pseudo_elements_selector_range.png
new file mode 100644 (file)
index 0000000..2fffae3
Binary files /dev/null and b/org.tizen.tutorials/html/images/pseudo_elements_selector_range.png differ
diff --git a/org.tizen.tutorials/html/images/pseudo_elements_selector_required.png b/org.tizen.tutorials/html/images/pseudo_elements_selector_required.png
new file mode 100644 (file)
index 0000000..a9a16b8
Binary files /dev/null and b/org.tizen.tutorials/html/images/pseudo_elements_selector_required.png differ
diff --git a/org.tizen.tutorials/html/images/push_overview.png b/org.tizen.tutorials/html/images/push_overview.png
new file mode 100644 (file)
index 0000000..1d14cea
Binary files /dev/null and b/org.tizen.tutorials/html/images/push_overview.png differ
diff --git a/org.tizen.tutorials/html/images/push_state_transitions.png b/org.tizen.tutorials/html/images/push_state_transitions.png
new file mode 100644 (file)
index 0000000..eb5a681
Binary files /dev/null and b/org.tizen.tutorials/html/images/push_state_transitions.png differ
diff --git a/org.tizen.tutorials/html/images/sandbox_cookie_access.png b/org.tizen.tutorials/html/images/sandbox_cookie_access.png
new file mode 100644 (file)
index 0000000..a6d7216
Binary files /dev/null and b/org.tizen.tutorials/html/images/sandbox_cookie_access.png differ
diff --git a/org.tizen.tutorials/html/images/sandbox_form_submission.png b/org.tizen.tutorials/html/images/sandbox_form_submission.png
new file mode 100644 (file)
index 0000000..0369edd
Binary files /dev/null and b/org.tizen.tutorials/html/images/sandbox_form_submission.png differ
diff --git a/org.tizen.tutorials/html/images/sandbox_page_redirection.png b/org.tizen.tutorials/html/images/sandbox_page_redirection.png
new file mode 100644 (file)
index 0000000..dda28d7
Binary files /dev/null and b/org.tizen.tutorials/html/images/sandbox_page_redirection.png differ
diff --git a/org.tizen.tutorials/html/images/sandbox_popup.png b/org.tizen.tutorials/html/images/sandbox_popup.png
new file mode 100644 (file)
index 0000000..a1e622a
Binary files /dev/null and b/org.tizen.tutorials/html/images/sandbox_popup.png differ
diff --git a/org.tizen.tutorials/html/images/screen_orientation.png b/org.tizen.tutorials/html/images/screen_orientation.png
new file mode 100644 (file)
index 0000000..8d5d3f7
Binary files /dev/null and b/org.tizen.tutorials/html/images/screen_orientation.png differ
diff --git a/org.tizen.tutorials/html/images/screenshot_1.png b/org.tizen.tutorials/html/images/screenshot_1.png
new file mode 100644 (file)
index 0000000..02b5a8c
Binary files /dev/null and b/org.tizen.tutorials/html/images/screenshot_1.png differ
diff --git a/org.tizen.tutorials/html/images/screenshot_2.png b/org.tizen.tutorials/html/images/screenshot_2.png
new file mode 100644 (file)
index 0000000..5bf9807
Binary files /dev/null and b/org.tizen.tutorials/html/images/screenshot_2.png differ
diff --git a/org.tizen.tutorials/html/images/selfcamera.png b/org.tizen.tutorials/html/images/selfcamera.png
new file mode 100644 (file)
index 0000000..cbe00b9
Binary files /dev/null and b/org.tizen.tutorials/html/images/selfcamera.png differ
diff --git a/org.tizen.tutorials/html/images/sensorball.png b/org.tizen.tutorials/html/images/sensorball.png
new file mode 100644 (file)
index 0000000..205cce1
Binary files /dev/null and b/org.tizen.tutorials/html/images/sensorball.png differ
diff --git a/org.tizen.tutorials/html/images/server-sent_message.png b/org.tizen.tutorials/html/images/server-sent_message.png
new file mode 100644 (file)
index 0000000..39dc0d3
Binary files /dev/null and b/org.tizen.tutorials/html/images/server-sent_message.png differ
diff --git a/org.tizen.tutorials/html/images/server-sent_request.png b/org.tizen.tutorials/html/images/server-sent_request.png
new file mode 100644 (file)
index 0000000..355a359
Binary files /dev/null and b/org.tizen.tutorials/html/images/server-sent_request.png differ
diff --git a/org.tizen.tutorials/html/images/setting_sd.png b/org.tizen.tutorials/html/images/setting_sd.png
new file mode 100644 (file)
index 0000000..fd39a6e
Binary files /dev/null and b/org.tizen.tutorials/html/images/setting_sd.png differ
diff --git a/org.tizen.tutorials/html/images/single_node_selection.png b/org.tizen.tutorials/html/images/single_node_selection.png
new file mode 100644 (file)
index 0000000..3dc9a26
Binary files /dev/null and b/org.tizen.tutorials/html/images/single_node_selection.png differ
diff --git a/org.tizen.tutorials/html/images/static_cube.png b/org.tizen.tutorials/html/images/static_cube.png
new file mode 100644 (file)
index 0000000..a34949a
Binary files /dev/null and b/org.tizen.tutorials/html/images/static_cube.png differ
diff --git a/org.tizen.tutorials/html/images/systeminfo_sd.png b/org.tizen.tutorials/html/images/systeminfo_sd.png
new file mode 100644 (file)
index 0000000..701e910
Binary files /dev/null and b/org.tizen.tutorials/html/images/systeminfo_sd.png differ
diff --git a/org.tizen.tutorials/html/images/text_properties.png b/org.tizen.tutorials/html/images/text_properties.png
new file mode 100644 (file)
index 0000000..f6a2426
Binary files /dev/null and b/org.tizen.tutorials/html/images/text_properties.png differ
diff --git a/org.tizen.tutorials/html/images/texture.png b/org.tizen.tutorials/html/images/texture.png
new file mode 100644 (file)
index 0000000..addbe39
Binary files /dev/null and b/org.tizen.tutorials/html/images/texture.png differ
diff --git a/org.tizen.tutorials/html/images/threejs.png b/org.tizen.tutorials/html/images/threejs.png
new file mode 100644 (file)
index 0000000..772f0c4
Binary files /dev/null and b/org.tizen.tutorials/html/images/threejs.png differ
diff --git a/org.tizen.tutorials/html/images/timing.png b/org.tizen.tutorials/html/images/timing.png
new file mode 100644 (file)
index 0000000..1ef3e1e
Binary files /dev/null and b/org.tizen.tutorials/html/images/timing.png differ
diff --git a/org.tizen.tutorials/html/images/touch1.png b/org.tizen.tutorials/html/images/touch1.png
new file mode 100644 (file)
index 0000000..6b4579a
Binary files /dev/null and b/org.tizen.tutorials/html/images/touch1.png differ
diff --git a/org.tizen.tutorials/html/images/touch2.png b/org.tizen.tutorials/html/images/touch2.png
new file mode 100644 (file)
index 0000000..af7741a
Binary files /dev/null and b/org.tizen.tutorials/html/images/touch2.png differ
diff --git a/org.tizen.tutorials/html/images/touch3.png b/org.tizen.tutorials/html/images/touch3.png
new file mode 100644 (file)
index 0000000..80d76c3
Binary files /dev/null and b/org.tizen.tutorials/html/images/touch3.png differ
diff --git a/org.tizen.tutorials/html/images/touchpaint_sd.png b/org.tizen.tutorials/html/images/touchpaint_sd.png
new file mode 100644 (file)
index 0000000..5ef7775
Binary files /dev/null and b/org.tizen.tutorials/html/images/touchpaint_sd.png differ
diff --git a/org.tizen.tutorials/html/images/touchpaint_sd_ww.png b/org.tizen.tutorials/html/images/touchpaint_sd_ww.png
new file mode 100644 (file)
index 0000000..62bac37
Binary files /dev/null and b/org.tizen.tutorials/html/images/touchpaint_sd_ww.png differ
diff --git a/org.tizen.tutorials/html/images/transit_rotation_zoom.png b/org.tizen.tutorials/html/images/transit_rotation_zoom.png
new file mode 100644 (file)
index 0000000..86995c7
Binary files /dev/null and b/org.tizen.tutorials/html/images/transit_rotation_zoom.png differ
diff --git a/org.tizen.tutorials/html/images/transitions1.png b/org.tizen.tutorials/html/images/transitions1.png
new file mode 100644 (file)
index 0000000..c571df7
Binary files /dev/null and b/org.tizen.tutorials/html/images/transitions1.png differ
diff --git a/org.tizen.tutorials/html/images/transitions2.png b/org.tizen.tutorials/html/images/transitions2.png
new file mode 100644 (file)
index 0000000..9d394e5
Binary files /dev/null and b/org.tizen.tutorials/html/images/transitions2.png differ
diff --git a/org.tizen.tutorials/html/images/transitions3.png b/org.tizen.tutorials/html/images/transitions3.png
new file mode 100644 (file)
index 0000000..53526fc
Binary files /dev/null and b/org.tizen.tutorials/html/images/transitions3.png differ
diff --git a/org.tizen.tutorials/html/images/transitions5.png b/org.tizen.tutorials/html/images/transitions5.png
new file mode 100644 (file)
index 0000000..652f9b7
Binary files /dev/null and b/org.tizen.tutorials/html/images/transitions5.png differ
diff --git a/org.tizen.tutorials/html/images/typed_array_implementation.png b/org.tizen.tutorials/html/images/typed_array_implementation.png
new file mode 100644 (file)
index 0000000..ab40fce
Binary files /dev/null and b/org.tizen.tutorials/html/images/typed_array_implementation.png differ
diff --git a/org.tizen.tutorials/html/images/uilayout_view2.png b/org.tizen.tutorials/html/images/uilayout_view2.png
new file mode 100644 (file)
index 0000000..2d8a668
Binary files /dev/null and b/org.tizen.tutorials/html/images/uilayout_view2.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio1.png b/org.tizen.tutorials/html/images/video_audio1.png
new file mode 100644 (file)
index 0000000..ac8558c
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio1.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio2.png b/org.tizen.tutorials/html/images/video_audio2.png
new file mode 100644 (file)
index 0000000..6563ae7
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio2.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio3.png b/org.tizen.tutorials/html/images/video_audio3.png
new file mode 100644 (file)
index 0000000..06ee44a
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio3.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio4.png b/org.tizen.tutorials/html/images/video_audio4.png
new file mode 100644 (file)
index 0000000..72f9311
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio4.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio5.png b/org.tizen.tutorials/html/images/video_audio5.png
new file mode 100644 (file)
index 0000000..abd8103
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio5.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio6.png b/org.tizen.tutorials/html/images/video_audio6.png
new file mode 100644 (file)
index 0000000..9ee6fc9
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio6.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio7.png b/org.tizen.tutorials/html/images/video_audio7.png
new file mode 100644 (file)
index 0000000..6127e19
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio7.png differ
diff --git a/org.tizen.tutorials/html/images/video_audio8.png b/org.tizen.tutorials/html/images/video_audio8.png
new file mode 100644 (file)
index 0000000..56e157c
Binary files /dev/null and b/org.tizen.tutorials/html/images/video_audio8.png differ
diff --git a/org.tizen.tutorials/html/images/view_main.png b/org.tizen.tutorials/html/images/view_main.png
new file mode 100644 (file)
index 0000000..8c4217e
Binary files /dev/null and b/org.tizen.tutorials/html/images/view_main.png differ
diff --git a/org.tizen.tutorials/html/images/w_division.png b/org.tizen.tutorials/html/images/w_division.png
new file mode 100644 (file)
index 0000000..88d9959
Binary files /dev/null and b/org.tizen.tutorials/html/images/w_division.png differ
diff --git a/org.tizen.tutorials/html/images/w_fold.png b/org.tizen.tutorials/html/images/w_fold.png
new file mode 100644 (file)
index 0000000..1967eb0
Binary files /dev/null and b/org.tizen.tutorials/html/images/w_fold.png differ
diff --git a/org.tizen.tutorials/html/images/web_audio1.png b/org.tizen.tutorials/html/images/web_audio1.png
new file mode 100644 (file)
index 0000000..0ec2db5
Binary files /dev/null and b/org.tizen.tutorials/html/images/web_audio1.png differ
diff --git a/org.tizen.tutorials/html/images/web_audio2.png b/org.tizen.tutorials/html/images/web_audio2.png
new file mode 100644 (file)
index 0000000..f80c24b
Binary files /dev/null and b/org.tizen.tutorials/html/images/web_audio2.png differ
diff --git a/org.tizen.tutorials/html/images/web_storage1.png b/org.tizen.tutorials/html/images/web_storage1.png
new file mode 100644 (file)
index 0000000..7ff6786
Binary files /dev/null and b/org.tizen.tutorials/html/images/web_storage1.png differ
diff --git a/org.tizen.tutorials/html/images/web_storage2.png b/org.tizen.tutorials/html/images/web_storage2.png
new file mode 100644 (file)
index 0000000..9e9d5ce
Binary files /dev/null and b/org.tizen.tutorials/html/images/web_storage2.png differ
diff --git a/org.tizen.tutorials/html/images/window_layout.png b/org.tizen.tutorials/html/images/window_layout.png
new file mode 100644 (file)
index 0000000..744d65c
Binary files /dev/null and b/org.tizen.tutorials/html/images/window_layout.png differ
diff --git a/org.tizen.tutorials/html/images/ww_division.png b/org.tizen.tutorials/html/images/ww_division.png
new file mode 100644 (file)
index 0000000..65e7ab7
Binary files /dev/null and b/org.tizen.tutorials/html/images/ww_division.png differ
diff --git a/org.tizen.tutorials/html/images/ww_fold.png b/org.tizen.tutorials/html/images/ww_fold.png
new file mode 100644 (file)
index 0000000..b3c1361
Binary files /dev/null and b/org.tizen.tutorials/html/images/ww_fold.png differ
diff --git a/org.tizen.tutorials/html/images/ww_icon.png b/org.tizen.tutorials/html/images/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.tutorials/html/images/ww_icon.png differ
diff --git a/org.tizen.tutorials/html/images/ww_icon_optional.png b/org.tizen.tutorials/html/images/ww_icon_optional.png
new file mode 100644 (file)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.tutorials/html/images/ww_icon_optional.png differ
diff --git a/org.tizen.tutorials/html/index.htm b/org.tizen.tutorials/html/index.htm
new file mode 100644 (file)
index 0000000..3cdf0dd
--- /dev/null
+++ b/org.tizen.tutorials/html/index.htm
@@ -0,0 +1,443 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+    <script type="text/javascript" src="scripts/snippet.js"></script>
+    <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+
+    <title>Tutorials</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1><a href="cover_page.htm">Tutorials</a></h1>
+
+<h2><a href="web/tutorials_w.htm">Web Application</a></h2>
+<ul>
+       <li><a href="web/tizen/tutorials_tizen_w.htm">Tizen Features</a>
+       <ul>
+               <li><a href="web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>
+               <li><a href="web/tizen/application/app_tutorials_w.htm">Application</a>
+                       <ul>
+                               <li><a href="web/tizen/application/alarm_tutorial_w.htm">Alarm</a></li>
+                               <li><a href="web/tizen/application/application_tutorial_w.htm">Application</a></li>
+                               <li><a href="web/tizen/application/package_tutorial_w.htm">Package</a></li>
+                               <li><a href="web/tizen/application/data_tutorial_w.htm">Data Control</a></li>
+                       </ul>
+               </li>
+               <li><a href="web/tizen/content/content_tutorials_w.htm">Content</a>
+                       <ul>
+                               <li><a href="web/tizen/content/content_tutorial_w.htm">Content</a>
+                                       <ul>
+                                               <li><a href="web/tizen/content/task_mediacontent_w.htm">Task: Media Content</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/content/download_tutorial_w.htm">Download</a>
+                                       <ul>
+                                               <li><a href="web/tizen/content/task_downloadmanager_w.htm">Task: Download Manager</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/content/exif_tutorial_w.htm">Exif</a></li>
+                       </ul>
+               </li>
+               <li><a href="web/tizen/input_output/io_tutorials_w.htm">Input/Output</a>
+                       <ul>
+                               <li><a href="web/tizen/input_output/filesystem_tutorial_w.htm">Filesystem</a>
+                                       <ul>
+                                               <li><a href="web/tizen/input_output/task_filemanager_w.htm">Task: File Manager</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/input_output/message_port_tutorial_w.htm">Message Port</a></li>                          
+                               <li><a href="web/tizen/input_output/archive_tutorial_w.htm">Archive</a></li>
+                       </ul>
+               </li>           
+               <li><a href="web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</a>
+                       <ul>
+                               <li><a href="web/tizen/multimedia/media_key_tutorial_w.htm">Media Key</a></li>
+                               <li><a href="web/tizen/multimedia/sound_tutorial_w.htm">Sound</a></li>
+                       </ul>
+               </li>
+               <li><a href="web/tizen/system/system_tutorials_w.htm">System</a>
+                       <ul>
+                               <li><a href="web/tizen/system/ham_tutorial_w.htm">Human Activity Monitor</a></li>                               
+                               <li><a href="web/tizen/system/power_tutorial_w.htm">Power</a></li>
+                               <li><a href="web/tizen/system/sensor_tutorial_w.htm">Sensor</a></li>                            
+                               <li><a href="web/tizen/system/system_info_tutorial_w.htm">System Information</a>
+                                       <ul>
+                                               <li><a href="web/tizen/system/task_systeminfo_w.htm">Task: System Information</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/system/system_setting_tutorial_w.htm">System Setting</a></li>
+                               <li><a href="web/tizen/system/time_tutorial_w.htm">Time</a></li>
+                               <li><a href="web/tizen/system/fm_radio_tutorial_w.htm">FM Radio</a></li>                                
+                               <li><a href="web/tizen/system/web_setting_tutorial_w.htm">Web Setting</a></li>
+                       </ul>
+               </li>
+               <li><a href="web/tizen/ui/ui_tutorials_w.htm">User Interface</a>
+                       <ul>
+                               <li><a href="web/tizen/ui/badge_tutorial_w.htm">Badge</a></li>
+                               <li><a href="web/tizen/ui/noti_tutorial_w.htm">Notification</a></li>            
+                       </ul>
+               </li>
+               <li><a href="web/tizen/communication/comm_tutorials_w.htm">Communication</a>
+                       <ul>
+                               <li><a href="web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth</a>
+                                       <ul>
+                                               <li><a href="web/tizen/communication/task_bluetoothchat_w.htm">Task: Bluetooth Chat</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/communication/messaging_tutorial_w.htm">Messaging</a>
+                                       <ul>
+                                               <li><a href="web/tizen/communication/task_chatter_w.htm">Task: Chatter</a></li>
+                                       </ul>
+                               </li>   
+                               <li><a href="web/tizen/communication/nfc_tutorial_w.htm">NFC</a>
+                                       <ul>
+                                               <li><a href="web/tizen/communication/task_contactsexchanger_w.htm">Task: Contacts Exchanger</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/communication/push_tutorial_w.htm">Push</a></li>
+                               <li><a href="web/tizen/communication/secure_element_tutorial_w.htm">Secure Element</a></li>             
+                       </ul>           
+               </li>   
+               <li><a href="web/tizen/social/social_tutorials_w.htm">Social</a>
+                       <ul>
+                               <li><a href="web/tizen/social/account_tutorial_w.htm">Account</a></li>
+                               <li><a href="web/tizen/social/bookmark_tutorial_w.htm">Bookmark</a></li>
+                               <li><a href="web/tizen/social/calendar_tutorial_w.htm">Calendar</a>
+                                       <ul>
+                                               <li><a href="web/tizen/social/task_eventmanager_w.htm">Task: Event Manager</a></li>
+                                       </ul>
+                               </li>                           
+                               <li><a href="web/tizen/social/call_history_tutorial_w.htm">Call History</a>
+                                       <ul>
+                                               <li><a href="web/tizen/social/task_calllog_w.htm">Task: Call Log</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tizen/social/contact_tutorial_w.htm">Contact</a></li>
+                               <li><a href="web/tizen/social/data_sync_tutorial_w.htm">Data Synchronization</a></li>
+                       </ul>
+               </li>           
+               <li><a href="web/tizen/dynamic/dynamic_tutorial_w.htm">Dynamic Box</a></li>     
+               <li><a href="web/tizen/uifw/uifw_tutorial_w.htm">Web UIFW</a></li>      
+               <li><a href="web/tizen/service/service_tutorial_w.htm">Service Application</a></li>             
+       </ul>
+       </li>
+       <li><a href="web/w3c/tutorials_w3c_w.htm">W3C/HTML5/Supplementary Features</a>
+       <ul>
+               <li><a href="web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a>
+                       <ul>
+                               <li><a href="web/w3c/dom/animation_tutorial_w.htm">CSS Animations Module Level 3</a></li>
+                               <li><a href="web/w3c/dom/background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3</a></li>
+                               <li><a href="web/w3c/dom/basic_ui_tutorial_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></li>    
+                               <li><a href="web/w3c/dom/color_tutorial_w.htm">CSS Color Module Level 3</a></li>
+                               <li><a href="web/w3c/dom/flexible_tutorial_w.htm">CSS Flexible Box Layout Module</a></li>
+                               <li><a href="web/w3c/dom/transform_tutorial_w.htm">CSS Transforms</a></li>
+                               <li><a href="web/w3c/dom/transition_tutorial_w.htm">CSS Transitions Module Level 3</a></li>
+                               <li><a href="web/w3c/dom/font_tutorial_w.htm">CSS Fonts Module Level 3</a></li> 
+                               <li><a href="web/w3c/dom/text_module_tutorial_w.htm">CSS Text Module Level 3</a></li> 
+                               <li><a href="web/w3c/dom/woff_tutorial_w.htm">WOFF File Format 1.0</a></li>                             
+                               <li><a href="web/w3c/dom/html5forms_tutorial_w.htm">HTML5 Forms</a></li>                                
+                               <li><a href="web/w3c/dom/media_query_tutorial_w.htm">Media Queries</a></li>
+                               <li><a href="web/w3c/dom/selector_tutorial_w.htm">Selectors API Level 1 and Level 2</a></li>
+                               <li><a href="web/w3c/dom/session_history_tutorial_w.htm">HTML5 session history of browsing contexts</a></li>
+                               <li><a href="web/w3c/dom/multi_tutorial_w.htm">CSS Multi-column Layout Module</a></li>                          
+                       </ul>
+               </li>
+               <li><a href="web/w3c/device/device_tutorials_w.htm">Device</a>
+                       <ul>
+                               <li><a href="web/w3c/device/battery_tutorial_w.htm">Battery Status</a></li>
+                               <li><a href="web/w3c/device/device_orientation_tutorial_w.htm">DeviceOrientation Event Specification</a>
+                                       <ul>
+                                               <li><a href="web/w3c/device/task_compass_w.htm">Task: Compass</a></li>
+                                               <li><a href="web/w3c/device/task_sensorball_w.htm">Task: Sensor Ball</a></li>
+                                       </ul>
+                               </li>                                                                                   
+                               <li><a href="web/w3c/device/touch_tutorial_w.htm">Touch Events version 1</a>
+                                       <ul>
+                                               <li><a href="web/w3c/device/task_touch_paint_mw.htm">Task: Touch Paint in Mobile Applications</a></li>
+                                               <li><a href="web/w3c/device/task_touch_paint_ww.htm">Task: Touch Paint in Wearable Applications</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/device/vibration_tutorial_w.htm">Vibration</a></li>
+                               <li><a href="web/w3c/device/browser_state_tutorial_w.htm">HTML5 Browser state</a></li>  
+                               <li><a href="web/w3c/device/screen_orientation_tutorial_w.htm">Screen Orientation</a></li>      
+                       </ul>
+               </li>
+               <li><a href="web/w3c/graphics/graphics_tutorials_w.htm">Graphics</a>
+                       <ul>
+                               <li><a href="web/w3c/graphics/canvas_tutorial_w.htm">HTML5 Canvas</a>
+                                       <ul>
+                                               <li><a href="web/w3c/graphics/task_clockwidget_w.htm">Task: Clock Widget</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/graphics/svg_tutorial_w.htm">HTML5 SVG</a></li>
+
+                       </ul>
+               </li>
+               <li><a href="web/w3c/media/media_tutorials_w.htm">Media</a>
+                       <ul>
+                               <li><a href="web/w3c/media/getusermedia_tutorial_w.htm">getUserMedia</a>
+                                       <ul>
+                                               <li><a href="web/w3c/media/task_selfcamera_w.htm">Task: Self Camera</a></li>
+                                       </ul>
+                               </li>                                                           
+                               <li><a href="web/w3c/media/video_audio_tutorial_w.htm">HTML5 video and audio element</a>
+                                       <ul>
+                                               <li><a href="web/w3c/media/task_piano_w.htm">Task: Piano</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/w3c/media/media_capture_tutorial_w.htm">HTML Media Capture</a></li>
+                               <li><a href="web/w3c/media/webaudio_tutorial_w.htm">Web Audio</a></li>                          
+                       </ul>
+               </li>           
+               <li><a href="web/w3c/communication/comm_tutorials_w.htm">Communication</a>
+                       <ul>
+                               <li><a href="web/w3c/communication/web_messaging_tutorial_w.htm">HTML5 Web Messaging</a></li>                                           
+                               <li><a href="web/w3c/communication/websocket_tutorial_w.htm">WebSocket</a></li>
+                               <li><a href="web/w3c/communication/xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2</a></li> 
+                               <li><a href="web/w3c/communication/server_sent_tutorial_w.htm">Server-Sent Events</a></li>              
+                       </ul>           
+               </li>
+               <li><a href="web/w3c/storage/storage_tutorials_w.htm">Storage</a>
+                       <ul>
+                               <li><a href="web/w3c/storage/file_tutorial_w.htm">File</a></li>
+                               <li><a href="web/w3c/storage/indexdb_tutorial_w.htm">Indexed Database</a></li>                          
+                               <li><a href="web/w3c/storage/webstorage_tutorial_w.htm">Web Storage</a></li>
+                               <li><a href="web/w3c/storage/appcache_tutorial_w.htm">HTML5 Application caches</a></li>
+                               <li><a href="web/w3c/storage/websql_tutorial_w.htm">Web SQL Database</a></li>                           
+                       </ul>
+               </li>
+               <li><a href="web/w3c/security/security_tutorials_w.htm">Security</a>
+                       <ul>
+                               <li><a href="web/w3c/security/cors_tutorial_w.htm">Cross-Origin Resource Sharing</a></li>
+                               <li><a href="web/w3c/security/iframe_tutorial_w.htm">HTML5 iframe element</a></li>
+                       </ul>
+               </li>           
+               <li><a href="web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization</a>
+                       <ul>
+                               <li><a href="web/w3c/perf_opt/page_tutorial_w.htm">Page Visibility</a></li>
+                               <li><a href="web/w3c/perf_opt/timing_control_tutorial_w.htm">Timing control for script-based animations</a></li>
+                               <li><a href="web/w3c/perf_opt/web_workers_tutorial_w.htm">Web Workers</a></li>
+                       </ul>
+               </li>   
+               <li><a href="web/w3c/location/location_tutorials_w.htm">Location</a>
+                       <ul>
+                               <li><a href="web/w3c/location/geolocation_tutorial_w.htm">Geolocation API Specification</a></li>
+                       </ul>   
+               </li>
+               <li><a href="web/w3c/ui/ui_tutorials_w.htm">UI</a>
+                       <ul>
+                               <li><a href="web/w3c/ui/clipboard_tutorial_w.htm">Clipboard API and events</a></li>
+
+                               <li><a href="web/w3c/ui/drag_drop_tutorial_w.htm">HTML5 Drag and drop</a></li>
+                       </ul>
+               </li>                   
+               <li><a href="web/w3c/useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features</a>
+                       <ul>
+                               <li><a href="web/w3c/useful/html_priority_tutorial_w.htm">HTML Priorities</a></li>
+                       </ul>   
+               </li>
+               <li><a href="web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features</a>
+                       <ul>
+                               <li><a href="web/w3c/supplement/typedarray_tutorial_w.htm">Typed Array - Khronos</a></li>
+                               <li><a href="web/w3c/supplement/webgl_tutorial_w.htm">WebGL - Khronos</a></li>
+                               <li><a href="web/w3c/supplement/fullscreen_tutorial_w.htm">FullScreen API - Mozilla</a></li>
+                               <li><a href="web/w3c/supplement/camera_tutorial_w.htm">Camera API (Tizen Extension)</a>
+                                       <ul>
+                                               <li><a href="web/w3c/supplement/task_camera_w.htm">Task: Camera</a></li>
+                                       </ul>
+                               </li>   
+                       </ul>
+               </li>
+       </ul>
+       </li>
+</ul>  
+       
+<h2><a href="native/tutorials_n.htm">Native Application</a></h2>
+       <ul>
+               <li><a href="native/app_framework/app_framework_tutorials_n.htm">Application Framework</a>
+                       <ul>
+                               <li><a href="native/app_framework/application_tutorial_n.htm">Application</a></li>
+                               <li><a href="native/app_framework/app_manager_tutorial_n.htm">Application Manager</a></li>
+                               <li><a href="native/app_framework/badge_tutorial_n.htm">Badge</a></li>
+                               <li><a href="native/app_framework/bundle_tutorial_n.htm">Bundle</a></li>
+                               <li><a href="native/app_framework/data_control_tutorial_n.htm">Data Control</a></li>
+                               <li><a href="native/app_framework/message_port_tutorial_n.htm">Message Port</a></li>
+                               <li><a href="native/app_framework/notification_tutorial_n.htm">Notification</a></li>
+                               <li><a href="native/app_framework/package_tutorial_n.htm">Package Manager</a></li>
+                               <li><a href="native/app_framework/service_app_tutorial_n.htm">Service Application</a></li>
+                               <li><a href="native/app_framework/shortcut_tutorial_n.htm">Shortcut</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/base/base_tutorials_n.htm">Base</a>
+                       <ul>
+                               <li><a href="native/base/sqlite_tutorial_n.htm">Sqlite</a></li>
+                               <li><a href="native/base/i18n_tutorial_n.htm">i18n</a></li>
+                       </ul>
+               </li>
+               
+               <li><a href="native/content/content_tutorials_n.htm">Content</a>
+                       <ul>
+                               <li><a href="native/content/download_tutorial_n.htm">Download</a></li>
+                               <li><a href="native/content/media_content_tutorial_n.htm">Media Content</a></li>
+                               <li><a href="native/content/mime_type_tutorial_n.htm">MIME Type</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/context/context_tutorials_n.htm">Context</a>
+                       <ul>
+                               <li><a href="native/context/activity_tutorial_n.htm">Activity Recognition</a></li>
+                               <li><a href="native/context/gesture_tutorial_n.htm">Gesture Recognition</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/graphics/graphics_tutorials_n.htm">Graphics</a>
+                       <ul>
+                               <li><a href="native/graphics/opengl_tutorial_n.htm">OpenGL ES</a></li>
+                               <li><a href="native/graphics/tbm_tutorial_n.htm">TBM Surface</a></li>
+                               <li><a href="native/graphics/cairo_tutorial_n.htm">Cairo Integration</a></li>
+                               <li><a href="native/graphics/widget_tutorial_n.htm">Graphic Widget</a></li>
+                               
+                       </ul>
+               </li>
+               <li><a href="native/location/location_tutorials_n.htm">Location</a></li>
+               <li><a href="native/messaging/messaging_tutorials_n.htm">Messaging</a>
+                       <ul>
+                               <li><a href="native/messaging/sms_mms_tutorial_n.htm">Messages</a></li>
+                               <li><a href="native/messaging/email_tutorial_n.htm">Email</a></li>
+                               <li><a href="native/messaging/push_tutorial_n.htm">Push</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/multimedia/multimedia_tutorials_n.htm">Multimedia</a>
+                       <ul>
+                               <li><a href="native/multimedia/audio_io_tutorial_n.htm">Audio I/O</a></li>
+                               <li><a href="native/multimedia/camera_tutorial_n.htm">Camera</a></li>
+                               <li><a href="native/multimedia/image_util_tutorial_n.htm">Image Util</a></li>
+                               <li><a href="native/multimedia/media_codec_tutorial_n.htm">Media Codec</a></li>
+                               <li><a href="native/multimedia/media_tools_tutorial_n.htm">Media Tool</a></li>
+                               <li><a href="native/multimedia/metadata_extractor_tutorial_n.htm">Metadata Extractor</a></li>
+                               <li><a href="native/multimedia/player_tutorial_n.htm">Player</a></li>
+                               <li><a href="native/multimedia/radio_tutorial_n.htm">Radio</a></li>
+                               <li><a href="native/multimedia/recorder_tutorial_n.htm">Recorder</a></li>
+                               <li><a href="native/multimedia/tone_player_tutorial_n.htm">Tone Player</a></li>
+                               <li><a href="native/multimedia/video_util_tutorial_n.htm">Video Util</a></li>
+                               <li><a href="native/multimedia/wav_player_tutorial_n.htm">WAV Player</a></li>
+                               <li><a href="native/multimedia/sound_manager_tutorial_n.htm">Sound Manager</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/network/network_tutorials_n.htm">Network</a>
+                       <ul>
+                               <li><a href="native/network/connection_tutorial_n.htm">Connection</a></li>
+                               <li><a href="native/network/bluetooth_tutorial_n.htm">Bluetooth</a></li>
+                               <li><a href="native/network/nfc_tutorial_n.htm">NFC</a></li>    
+                               <li><a href="native/network/wifi_tutorial_n.htm">Wi-Fi</a></li>
+                               <li><a href="native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct</a></li>   
+                       </ul>
+               </li>
+               
+               <li><a href="native/security/security_tutorials_n.htm">Security</a>
+                       <ul>
+                               <li><a href="native/security/key_tutorial_n.htm">Key Manager</a></li>
+                               <li><a href="native/security/privilege_tutorial_n.htm">Privilege Info</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/social/social_tutorials_n.htm">Social</a>
+                       <ul>
+                               <li><a href="native/social/account_tutorial_n.htm">Account Manager</a></li>
+                               <li><a href="native/social/calendar_tutorial_n.htm">Calendar</a></li>
+                               <li><a href="native/social/contact_tutorial_n.htm">Contacts</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/system/system_tutorials_n.htm">System</a>
+                       <ul>
+                               <li><a href="native/system/device_tutorial_n.htm">Device</a></li>
+                               <li><a href="native/system/dlog_tutorial_n.htm">dlog</a></li>
+                               <li><a href="native/system/media_key_tutorial_n.htm">Media key</a></li>
+                               <li><a href="native/system/runtime_tutorial_n.htm">Runtime information</a></li>
+                               <li><a href="native/system/sensor_tutorial_n.htm">Sensor</a></li>
+                               <li><a href="native/system/sysinfo_tutorial_n.htm">System Information</a></li>
+                               <li><a href="native/system/system_setting_tutorial_n.htm">System Settings</a></li>
+                               <li><a href="native/system/storage_tutorial_n.htm">Storage</a></li>
+                               
+                       </ul>
+               </li>
+               <li><a href="native/telephony/telephony_tutorials_n.htm">Telephony</a></li>
+               <li><a href="native/ui/ui_tutorials_n.htm">UI</a>
+                       <ul>
+                               <li><a href="native/ui/efl_tutorial_n.htm">EFL</a></li>
+                               <li><a href="native/ui/evas_tutorial_n.htm">Evas</a></li>       
+                               <li><a href="native/ui/events_effects_tutorials_n.htm">Event and Effect</a>
+                                       <ul>
+                                               <li><a href="native/ui/animation_event_types_tutorials_n.htm">Animation and Effect Types</a>
+                                                       <ul>
+                                                               <li><a href="native/ui/ecore_effects_tutorial_n.htm">Ecore Animator</a></li>
+                                                               <li><a href="native/ui/edje_effects_tutorial_n.htm">Edje Animation</a></li>
+                                                               <li><a href="native/ui/elm_transit_tutorial_n.htm">Elementary Animations</a>
+                                                                       <ul>
+                                                                               <li><a href="native/ui/transit_effect_tutorial_n.htm">Transit</a></li>
+                                                                       </ul>
+                                                               </li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="native/ui/gesture_detector_tutorial_n.htm">Gesture Detector</a></li>
+                                               <li><a href="native/ui/multipoint_touch_tutorial_n.htm">Multi-point Touch</a></li>                                      
+                                       </ul>
+                               </li>
+                               <li><a href="native/ui/ui_control_tutorials_n.htm">UI Control</a>
+                                       <ul>
+                                               <li><a href="native/ui/basic_tutorial_n.htm">Basic</a></li>
+                                               <li><a href="native/ui/form_tutorial_n.htm">Form</a></li>
+                                               <li><a href="native/ui/naviframe_tutorial_n.htm">Naviframe</a></li>
+                                               <li><a href="native/ui/genlist_tutorial_n.htm">Genlist</a></li>
+                                               <li><a href="native/ui/menu_tutorial_n.htm">Menu</a></li>
+                                               <li><a href="native/ui/panes_tutorial_n.htm">Panes</a></li>
+                                               <li><a href="native/ui/ui_layout_tutorial_n.htm">UI Layout</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="native/ui/efl_extension_tutorial_n.htm">Efl Extension</a></li>
+                               <li><a href="native/ui/font_settings_tutorial_n.htm">Font Setting</a></li>
+                               
+                               <li><a href="native/ui/efl_util_tutorial_n.htm">EFL UTIL</a></li>
+                               <li><a href="native/ui/efl_optimization_tutorial_n.htm">EFL Optimization</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/uix/uix_tutorials_n.htm">UIX</a>
+                       <ul>
+                               <li><a href="native/uix/tts_tutorial_n.htm">TTS</a></li>
+                               <li><a href="native/uix/stt_tutorial_n.htm">STT</a></li>
+                       </ul>
+               </li>
+               <li><a href="native/web/web_tutorials_n.htm">Web</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>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
new file mode 100644 (file)
index 0000000..d8bf488
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Framework: Controlling Your Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Application Framework: Controlling Your Application</h1>
+       
+<p>The application framework tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p> 
+  <ul> 
+   <li><a href="application_tutorial_n.htm">Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</a> <p>Demonstrates how you can manage application fundamentals, such as application settings and localized strings.</p></li> 
+    <li><a href="app_manager_tutorial_n.htm">Application Manager: Getting Information about Applications</a> <p>Demonstrates how you can get information about applications.</p></li> 
+   <li><a href="badge_tutorial_n.htm">Badge: Displaying the Notification (Badge) Count on the Home Screen</a> <p>Demonstrates how you can create and modify badges.</p></li>
+   <li><a href="bundle_tutorial_n.htm">Bundle: Using the String-based Dictionary ADT</a> <p>Demonstrates how you can create and manage a key-value dictionary.</p></li>
+   <li><a href="data_control_tutorial_n.htm">Data Control: Exchanging Specific Data Between Applications</a><p>Demonstrates how you can manage map data and SQL data.</p></li>
+   <li><a href="message_port_tutorial_n.htm">Message Port: Passing Messages Between Applications</a> <p>Demonstrates how you can send and receive messages through message ports.</p></li>        
+   <li><a href="notification_tutorial_n.htm">Notification: Notifying the User of Application Events</a> <p>Demonstrates how you can display notifications on the application screen.</p></li>
+   <li><a href="package_tutorial_n.htm">Package Manager: Installing and Uninstalling Applications</a> <p>Demonstrates how you can manage and retrieve package information.</p></li>
+   <li><a href="service_app_tutorial_n.htm">Service Application: Creating Background Applications</a> <p>Demonstrates how you can create and manage native service applications.</p></li>   
+   <li><a href="shortcut_tutorial_n.htm">Shortcut: Adding a Shortcut to Home</a> <p>Demonstrates how you can create and modify shortcuts and Dynamic Boxes on the Home screen.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
new file mode 100644 (file)
index 0000000..ea65ae8
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
@@ -0,0 +1,181 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Getting Information about Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#manage_context">Managing the Application Context</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/app_manager_n.htm">Application Manager Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Application Manager: Getting Information about Applications</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can get information about applications.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Application Manager API basics by learning about:</p>
+<ul>
+       <li><a class="opensection" href="#manage_context">Managing the Application Context</a> <p>Retrieve the application context and operate on it.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+
+       <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage_context" name="manage_context" class="items-tit-h2">Managing the Application Context</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the running application context and its details, and to operate on the context:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;app_manager.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;app_manager.h&gt;
+</pre></li>
+
+<li>Get the context of the currently running application.
+
+<p>When an application is not running, it is impossible to get its context.</p>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">app_manager_get_app_context()</span> function with the ID of the application from which the context is being obtained, and the handle (<span style="font-family: Courier New,Courier,monospace">app_context_h*</span>) to the application context which is filled with the received context:</p>
+
+
+<pre class="prettyprint">
+app_context_h app_context = NULL;
+
+int ret = app_manager_get_app_context(Your App ID, &amp;app_context);
+</pre> 
+
+<p>This example gets for the context of the Clock application. If the function returns <span style="font-family: Courier New,Courier,monospace">APP_MANAGER_ERROR_NONE</span>, it has executed correctly and the <span style="font-family: Courier New,Courier,monospace">app_context</span> variable now contains the handle to the clock context. To prevent memory leaks, release <span style="font-family: Courier New,Courier,monospace">app_context</span> with the <span style="font-family: Courier New,Courier,monospace">app_context_destroy()</span> function after the work is finished.</p></li>
+
+<li>Operate on the context:
+<ul class="ul">
+<li>Get the application ID and application process ID from the context:
+
+<pre class="prettyprint">
+char *app_id;
+int pid = 0;
+
+ret = app_context_get_app_id(app_context, &amp;app_id);
+ret = app_context_get_pid(app_context, &amp;pid);
+</pre>
+
+<p>When <span style="font-family: Courier New,Courier,monospace">app_id</span> is no longer needed, release it using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p></li>
+
+<li><p>Check whether the application with the given application context is terminated:</p>
+ <pre class="prettyprint">
+bool terminated = false;
+
+ret = app_context_is_terminated(app_context, &amp;terminated);
+
+if (false == terminated)
+{
+&nbsp;&nbsp;&nbsp;// Application is running
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;// Application is terminated
+}
+</pre>
+</li>
+<li><p>Clone the given context handle:</p>
+ <pre class="prettyprint">
+app_context_h app_context_cloned = NULL;
+
+ret = app_context_clone(&amp;app_context_cloned, app_context);
+</pre></li>
+<li><p>Check whether 2 contexts are equal:</p>
+ <pre class="prettyprint">
+bool equal = false;
+
+ret = app_context_is_equal(app_context, app_context_cloned, &amp;equal);
+
+if (equal)
+{
+&nbsp;&nbsp;&nbsp;// Contexts are equal
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;// Contexts are not equal
+}
+</pre></li>
+</ul></li>
+<li><p>When working with the application context is finished, call the <span style="font-family: Courier New,Courier,monospace">app_context_destroy()</span> function to remove the handle and release all resources:</p>
+
+<pre class="prettyprint">
+if (app_context) 
+{
+&nbsp;&nbsp;&nbsp;ret = app_context_destroy(app_context);
+&nbsp;&nbsp;&nbsp;if (APP_MANAGER_ERROR_NONE != ret) // Error occurred 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_context = NULL;
+}
+</pre> </li>
+</ol>
+
+                       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
new file mode 100644 (file)
index 0000000..25028fe
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
@@ -0,0 +1,835 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Using Alarms, Preferences, AppControl, and Other Fundamentals</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Application fundamentals
+                               <ul class="toc">
+                               <li><a class="opensection" href="#fundamentals">Handling the Application Fundamentals</a></li>
+                               </ul>
+                       </li>   
+                       <li>App control
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#use">Running Applications Using Extra Data</a></li>
+                               </ul>
+                       </li>                                   
+                       <li>Alarm
+                               <ul class="toc">
+                                       <li><a href="#init" class="opensection">Initializing Alarms</a></li>
+                                       <li><a href="#scenario_1" class="opensection">Setting an Alarm after Specific Time</a></li>
+                                       <li><a href="#scenario_2" class="opensection">Setting an Alarm on a Specific Date</a></li>
+                                       <li><a href="#scenario_3" class="opensection">Setting a Recurring Alarm at a Specific Time of the Day</a></li>
+                                       <li><a href="#scenario_4" class="opensection">Listing All Scheduled Alarms and Canceling an Alarm</a></li>
+                               </ul>
+                       </li>
+                       <li>Application preferences
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#manage_pref">Managing Application Preferences</a></li>
+                               </ul>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/application_n.htm">Application Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage application fundamentals, such as application settings and service applications.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Application API basics by learning about:</p>
+
+<ul>
+       <li>Application fundamentals
+               <ul> 
+                       <li><a class="opensection" href="#fundamentals">Handling the Application Fundamentals</a> <p>Define the application entry point and life-cycle callbacks.</p></li>
+               </ul>
+       </li>
+    <li>App control
+               <ul>
+                       <li><a class="opensection" href="#use">Running Applications Using Extra Data</a> <p>Run a specific application control with preconfigured parameters.</p></li>
+               </ul>  
+    </li>
+       <li>Alarm
+               <ul>
+                       <li><a class="opensection" href="#init">Initializing Alarms</a>
+                       <p>Initialize the alarm for use.</p></li>
+                       <li><a class="opensection" href="#scenario_1">Setting an Alarm after Specific Time</a>
+                       <p>Set single alarms at specific times.</p></li>
+                       <li><a class="opensection" href="#scenario_2">Setting an Alarm on a Specific Date</a>
+                       <p>Set an alarm on a specific date.</p></li>
+                       <li><a class="opensection" href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a>
+                       <p>Set a recurring alarm for a period of time at a specific time.</p></li>
+                       <li><a class="opensection" href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a>
+                       <p>List all alarms and cancel them.</p></li>
+               </ul>
+    </li>
+       <li>Application preferences
+               <ul>
+                       <li><a class="opensection" href="#manage_pref">Managing Application Preferences</a><p>Manage application preferences.</p></li>
+               </ul>
+       </li>
+       
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       <li>
+                       <div class="devicespec-tit">
+ <h2 id="fundamentals" name="fundamentals" class="items-tit-h2">Handling the Application Fundamentals</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Appcore is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.</p>
+<p>An application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the appcore and starts it.</p>
+<p>The code below is the minimal application using appcore. It only builds and runs.</p>
+<pre class="prettyprint">
+// Add this include to be able to use the functions from appcore.
+#include &lt;app.h&gt;
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;// Create and ui_app_lifecycle_callback_s object and initialize its contents to 0
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;// Run the application
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, NULL);
+}
+</pre>
+
+<p>Appcore is based on callbacks. There are two classes of callbacks: those about the application&#39;s life-cycle and those about the system.</p>
+<p>The application&#39;s life-cycle callbacks are:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">create</span>: first initialization, comes after <span style="font-family: Courier New,Courier,monospace;">app_main()</span> has been called and initializes UI.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">control</span>: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: saves work, releases resources, and exits.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: sets the application&#39;s window not visible and switches to a mode which uses less resources.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: sets the application&#39;s window to be visible again.</li>
+</ul>
+
+<p>Then, system-related callbacks:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">low_memory</span>: the system is running low on memory, saves work, and releases resources; if this is not enough are freed, some applications will be killed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">low_battery</span>: the system is running low on battery (less than 5%), saves work and avoids battery-draining workloads.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">device_orientation</span>: the screen orientation changed between vertical and horizontal, orientation information is given to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">language_changed</span>: language of the system is changed and messages are translated.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">region_format_changed</span>: time zone has changed.</li>
+</ul>
+
+<p>A basic implementation is shown below:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+
+// Structure to store the data for application&#39;s logic; it is given
+// to each callback invoked through appcore
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;char *several;
+&nbsp;&nbsp;&nbsp;char *fields;
+} appdata_s;
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Hook to take necessary actions before main event loop starts; this
+&nbsp;&nbsp;&nbsp;// usually means initializing UI and application&#39;s data (the &quot;data&quot;
+&nbsp;&nbsp;&nbsp;// parameter to this function)
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+
+&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static void
+app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;// Handles the launch request, show the user the task requested through the
+&nbsp;&nbsp;&nbsp;// &quot;app_control&quot; parameter (detailed in the next section)
+}
+
+static void
+app_pause(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Takes necessary actions when application becomes invisible
+}
+
+static void
+app_resume(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Takes necessary actions when application becomes visible
+}
+
+static void
+app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Releases all resources
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (!ad) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// If specific steps are needed:
+&nbsp;&nbsp;&nbsp;// destroy_gui(ad);
+}
+
+static void
+app_device_orientation(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Takes necessary actions when device orientation changes
+}
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;// Sets the callbacks for the application&#39;s logic; explanation on the
+&nbsp;&nbsp;&nbsp;// implementation below
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;// Note the &amp;ad below; this is how the struct is given to callbacks
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+
+<p> The last section of this tutorial describes app control. It is a mechanism through which an application receives additional information about why it was started and with which parameters.</p>
+<p>An application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control callback</span>. A definition for that callback is: </p>
+<pre class="prettyprint">app_control_cb(app_control_h app_control, void *user_data);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through functions from the SDK.</p>
+<p>The most interesting ones are:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: retrieves a string describing which operation the application was started for.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: retrieves the MIME type of the data (e.g. image/jpg).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: gets the string value associated with the given key.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: gets the string array associated with the given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with a key is an array).</li>
+</ul>
+<p>If other functions are needed, check the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header.</p>
+       </div>
+               </li>
+       
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="use" name="use" class="items-tit-h2">Running Applications Using Extra Data</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To run a specified <span style="font-family: Courier New,Courier,monospace">app_control</span> with some preconfigured parameters:</p>
+
+
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/email</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/email.admin</span> privileges are required for the Email API.</p>
+<p>Add the privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li>
+<li>
+<p>Prepare <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
+<p>In this example, an email message is being prepared and then the email service is opened to allow the user to customize or send the ready message.</p>
+
+<p>When <span style="font-family: Courier New,Courier,monospace">app_control</span> is created, set the operation. It is mandatory information for the launch request. If the operation is not specified, <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span> is used for the launch request.</p>
+<p>Add extra data to the app_control using the <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data()</span>    or <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data_array()</span> function.</p>
+<p>Set the package name for <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_set_package()</span> function. Use the application package name to launch the application explicitly.</p>
+
+<pre class="prettyprint">error_code = app_control_create(&amp;app_control);
+char *mail_address = &quot;test@target.com&quot;;
+char *subject = &quot;Tutorial message&quot;;
+char *message = &quot;Tutorial message content.&quot;;
+
+ret = app_control_create(&amp;app);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_create() is failed. err = %d&quot;, ret);
+
+ret = app_control_set_operation(app, APP_CONTROL_OPERATION_SEND);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_operation() is failed. err = %d&quot;, ret);
+
+ret = app_control_add_extra_data(app, APP_CONTROL_DATA_TEXT, message);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_add_extra_data() is failed. err = %d&quot;, ret);
+
+ret = app_control_add_extra_data(app, APP_CONTROL_DATA_TO, mail_address);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_add_extra_data() is failed. err = %d&quot;, ret);
+
+ret = app_control_add_extra_data(app, APP_CONTROL_DATA_SUBJECT, subject);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_add_extra_data() is failed. err = %d&quot;, ret);
+
+ret = app_control_set_app_id (app, &lt;Your app ID&gt;);                               
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_app_id() is failed. err = %d&quot;, ret); 
+</pre>
+
+<p>The following table lists the available extra data parameters.</p>
+
+<table> 
+   <caption>
+     Table: Extra data parameters
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Extra data</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td> 
+     <td>Subject line of the email</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TO</span></td> 
+     <td>Email address(es) of the primary recipient(s)</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CC</span></td> 
+     <td>Email address(es) of the recipient(s) to be carbon-copied</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_BCC</span></td> 
+     <td>Email address(es) of the private recipient(s)</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td> 
+     <td>Message body of the email</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TITLE</span></td> 
+     <td>The title of the data</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td> 
+     <td>The path of the selected item</td> 
+    </tr>      
+   </tbody> 
+</table> 
+</li>
+
+<li>
+  <p>Launch <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>   
+  
+  <p>After preparing <span style="font-family: Courier New,Courier,monospace">app_control</span>, launch it using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function, as described above.</p>
+  <pre class="prettyprint">
+ret = app_control_send_launch_request(app, NULL, NULL);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_send_launch_request() is failed. err = %d&quot;, ret);
+</pre>
+ 
+</li>
+
+<li>
+  <p>Get extra data.</p>       
+  <p>Read the extra data set to <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_foreach_extra_data()</span> function. The same function used on <span style="font-family: Courier New,Courier,monospace">app_control_h</span> returned by the <span style="font-family: Courier New,Courier,monospace">app_control</span> reply allows you to read the reply message.</p>
+
+  <pre class="prettyprint">
+bool _app_control_extra_data_cb(app_control_h app_control, const char *key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char *value;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app, key, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_get_extra_data() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[value] %s&quot;, value);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_foreach_extra_data() is failed. err = %d&quot;, ret);
+</pre>
+</li>
+
+<li>
+  <p>Clean up.</p>     
+  <p>When your work with <span style="font-family: Courier New,Courier,monospace">app_control</span> is finished, clean up. 
+       To do this, pass the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle to the 
+       <span style="font-family: Courier New,Courier,monospace">app_control_destroy()</span> function.</p>
+<pre class="prettyprint">
+ret = app_control_destroy(app);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_destroy() is failed. err = %d&quot;, ret);
+</pre>
+</li>
+</ol>
+
+       </div>
+               </li>                           
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="init" name="init" class="items-tit-h2">Initializing Alarms</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To initialize the alarm:</p>
+<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.get</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privileges are required for the Alarm API.
+</li></ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="scenario_1" name="scenario_1" class="items-tit-h2">Setting an Alarm after Specific Time</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To set an alarm after a specific time:</p>
+
+<ol>
+
+<li>
+<p><b>Implement the AlarmRegister application</b></p>
+<p>AlarmRegister requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privilege.</p>
+<ol><li>
+<p>To identify which application to alarm, the Alarm API needs <span style="font-family: Courier New,Courier,monospace">app_control_h</span>.</p>
+<p>Obtain <span style="font-family: Courier New,Courier,monospace">app_control_h</span> of a specific app by calling <span style="font-family: Courier New,Courier,monospace">app_control_set_app_id(app_control_h app_control, const char *app_id);</span>. You can get AlarmTarget <span style="font-family: Courier New,Courier,monospace">app_id</span> from the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. </p>
+
+<pre class="prettyprint">
+bool init_alarm()
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;int DELAY = 2;
+&nbsp;&nbsp;&nbsp;int REMIND = 1;
+&nbsp;&nbsp;&nbsp;int alarm_id;
+
+&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
+&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;app_control);
+&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
+&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id (app_control, &quot;org.tizen.alarmslave&quot;);
+</pre>
+</li>
+
+<li>
+
+       <p>To schedule an alarm after a delay, the function requires 4 parameters:</p>
+  <ul class="ul">
+       <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered</li> 
+       <li>[in] <span style="font-family: Courier New,Courier,monospace">delay</span>: The amount of time before the first execution (in seconds) </li>
+       <li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution.</li>
+       <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span> The alarm ID that uniquely identifies an alarm</li>
+  </ul>
+
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = alarm_schedule_after_delay(app_control, DELAY, REMIND, &amp;alarm_id);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre> 
+</li></ol></li>
+
+<li>
+<p><b>Implement the AlarmTarget application</b></p>
+<p>A scheduled alarm calls AlarmTarget&#39; <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback when the alarm expires.</p>
+
+<pre class="prettyprint">
+void service_app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;app_control called by Alarm API.&quot;);
+}
+</pre>
+</li>
+</ol>                  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="scenario_2" name="scenario_2" class="items-tit-h2">Setting an Alarm on a Specific Date</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To schedule an alarm on a specific date, the function requires 4 parameters:</p>
+
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered </li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The first active alarm time </li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution. </li>
+  <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that uniquely identifies an alarm </li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">tm</span> struct is included in the <span style="font-family: Courier New,Courier,monospace">&lt;time.h&gt;</span> header file. The following table lists the selected <span style="font-family: Courier New,Courier,monospace">tm</span> fields.</p>
+
+<table> 
+   <caption>
+     Table: tm fields 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Member</th> 
+     <th>Type</th> 
+        <th>Meaning</th>
+        <th>Range</th>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_sec</span></td> 
+     <td>int</td> 
+        <td>Seconds after the minute</td> 
+        <td>0-61*</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_min</span></td> 
+     <td>int</td> 
+        <td>Minutes after the hour</td> 
+        <td>0-59</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_hour</span></td> 
+     <td>int</td> 
+        <td>Hours since midnight</td> 
+        <td>0-23</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_mday</span></td> 
+     <td>int</td> 
+        <td>Day of the month</td> 
+        <td>1-31</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_mon</span></td> 
+     <td>int</td> 
+        <td>Months since January</td> 
+        <td>0-11</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_year</span></td> 
+     <td>int</td> 
+        <td>Years since 1900</td> 
+        <td></td> 
+    </tr>      
+   </tbody> 
+  </table> 
+  
+<pre class="prettyprint">
+int alarm_schedule_at_date(app_control_h app_control, struct tm* date, int period, int* alarm_id)
+</pre>
+                       
+<p>The following code schedules <span style="font-family: Courier New,Courier,monospace">app_control</span> to invoke after 4 seconds. Modifying, for example, <span style="font-family: Courier New,Courier,monospace">date.tm_mday</span>, sets the alarm to another day of the month.</p>
+<pre class="prettyprint">struct tm date;
+ret = alarm_get_current_time(&amp;date);
+
+date.tm_sec+=4;
+ret = alarm_schedule_at_date(app, &amp;date, 0, &amp;alarm_id);        
+</pre>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="scenario_3" name="scenario_3" class="items-tit-h2">Setting a Recurring Alarm at a Specific Time of the Day</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To schedule an alarm on a specific time of the day with a recurrence, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_with_recurrence_week_flag()</span> function, which requires 4 parameters:</p>
+<ul class="ul">
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> that performs the specific work when the alarm is triggered.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The date on which the alarm is triggered for the first time.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">week_flag</span>: The day of the week on which the alarm recurs. The value is defined with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">enum alarm_week_flag_e</a> enumerator, and can be a combination of days, for example <span style="font-family: Courier New,Courier,monospace">ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</span>. The value can also be a binary, such as <span style="font-family: Courier New,Courier,monospace">1&lt;&lt;3 | 1&lt;&lt;6</span>.</li>
+ <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The unique ID that identifies the alarm.</li>
+</ul>
+
+<p>The following code schedules <span style="font-family: Courier New,Courier,monospace">app_control</span> 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));
+ret = alarm_schedule_with_recurrence_week_flag(app_control, &amp;date, ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY, &amp;alarm_id);
+</pre>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="scenario_4" name="scenario_4" class="items-tit-h2">Listing All Scheduled Alarms and Canceling an Alarm</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To list all scheduled alarms, use the following function:</p>
+<pre class="prettyprint">
+int alarm_foreach_registered_alarm(alarm_registered_alarm_cb callback, void* user_data)
+</pre>
+<p>To list a scheduled alarm, the function requires 2 parameters:</p>
+<ul class="ul">
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: The callback function to invoke.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: The user data to be passed to the callback.</li>
+</ul>
+
+<p>To cancel specific scheduled alarms, use the following function:</p>
+<pre class="prettyprint">
+int alarm_cancel(int alarm_id)
+</pre>
+<p>To cancel a scheduled alarm, the function requires 1 parameter:</p>
+<ul class="ul">
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that is cancelled.</li>
+</ul>
+
+<p>The following code implements the <span style="font-family: Courier New,Courier,monospace">alarm_registered_alarm_cb()</span> function. This callback lists all registered alarms and alarm recurrence days. At the end of the function, the <span style="font-family: Courier New,Courier,monospace">alarm_cancel()</span> function is called to cancel every scheduled alarm.</p>
+<pre class="prettyprint">
+static bool on_foreach_registered_alarm(int alarm_id, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int flag;
+&nbsp;&nbsp;&nbsp;int ret=0;
+&nbsp;&nbsp;&nbsp;struct tm date;
+&nbsp;&nbsp;&nbsp;time_t time_current;
+
+&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_date(alarm_id, &amp;date);
+&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Get time Error : %d &quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Logging scheduled alarm&#39;s info
+&nbsp;&nbsp;&nbsp;time_current = mktime(&amp;date);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, 
+&nbsp;&nbsp;&nbsp;&quot; Registered alarm:%d on date:%s &quot;, alarm_id, ctime(&amp;time_current));
+
+&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &amp;flag);
+&nbsp;&nbsp;&nbsp;if (ret==0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SUNDAY)
+&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;if (flag &amp; ALARM_WEEK_FLAG_MONDAY)
+&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; &quot; Alarm Recurrence on MONDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_TUESDAY)
+&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;if (flag &amp; ALARM_WEEK_FLAG_WEDNESDAY)
+&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;if (flag &amp; ALARM_WEEK_FLAG_THURSDAY)
+&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;if (flag &amp; ALARM_WEEK_FLAG_FRIDAY)
+&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;if (flag &amp; ALARM_WEEK_FLAG_SATURDAY)
+&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;// Cancel scheduled alarms
+&nbsp;&nbsp;&nbsp;ret = alarm_cancel (alarm_id);
+&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Cancel Error : %d &quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<pre class="prettyprint">
+ret = alarm_foreach_registered_alarm(
+&nbsp;&nbsp;&nbsp;on_foreach_registered_alarm, NULL);
+if (ret != ALARM_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Listing Error : %d &quot;, ret);
+}
+</pre>
+
+                       </div>
+               </li>
+               
+               
+               
+
+                       
+                       <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage_pref" name="manage_pref" class="items-tit-h2">Managing Application Preferences</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To manage preferences:</p>
+
+<ol><li>                       
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+</pre></li>
+
+<li>Store and retrieve simple type variables.
+<p>To store a variable, you must create a key-value pair. Use the following functions to create a key-value pair for a specific simple type:</p>
+
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">preference_set_int (const char *key, int value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_set_double (const char *key, double value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_set_boolean (const char *key, bool value)</span></li></ul>
+
+<p>Before storing or retrieving a variable, check whether it exists using:</p>
+
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">preference_is_existing (const char *key, bool *existing)</span></li></ul>
+
+<p>Use the following functions to retrieve a stored variable of a given simple type:</p>
+
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">preference_get_int (const char *key, int *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_get_double (const char *key, double *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_get_boolean (const char *key, bool *value)</span></li></ul>
+
+
+<pre class="prettyprint">const char *integer_key = &quot;integer_key&quot;;
+int integer_value = 1;
+int integer_output;
+
+preference_set_int(integer_key, integer_value);
+
+preference_is_existing(integer_key, &amp;existing);
+
+preference_get_int(integer_key, &amp;integer_output);</pre></li>
+
+
+<li>Store and retrieve string variables.
+<p>Use the following functions to store and retrieve string variables:</p>
+
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">preference_set_string (const char *key, const char *value)</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">preference_get_string (const char *key, char **value)</span></li>
+</ul>
+
+<p>Release the value returned by the get function using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p>
+<pre class="prettyprint">const char *string_key = &quot;string_key&quot;;
+const char *string_value = &quot;Sample content&quot;;
+char *string_output;
+bool existing;
+
+preference_set_string(string_key, string_value);
+
+preference_is_existing(string_key, &amp;existing);
+
+preference_get_string(string_key, &amp;string_output);
+
+free(string_output);</pre></li>
+
+<li>Track variables.
+<p>You can set a different callback function to each variable. The callback function is invoked each time the variable is changed.</p>
+
+<pre class="prettyprint">
+int previous_value;
+
+preference_set_changed_cb(integer_key, preference_changed_cb_impl, &amp;previous_value);</pre>
+
+<p>Pass custom parameters to the callback function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.</p>
+
+<pre class="prettyprint">void preference_changed_cb_impl(const char *key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;int integer_output = 0;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_changed_cb_impl]\n&quot;);
+&nbsp;&nbsp;&nbsp;preference_get_int(key, &amp;integer_output);
+     
+&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;key, integer_output);
+}</pre>
+
+
+<p>Unset a callback function based on a variable key.</p>
+<pre class="prettyprint">preference_unset_changed_cb(const char *key);</pre></li>
+
+
+<li>List all records.
+<p>Access all the records with 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 <span style="font-family: Courier New,Courier,monospace">user_data</span> field.</p>
+
+<pre class="prettyprint">preference_foreach_item(preference_foreach_item_cb, NULL);</pre>
+
+<p>If the callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, 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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_foreach_item_cb]\n&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key found: %s\n&quot;, key);
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li>
+
+<li>Delete records.
+<p>Delete records one by one using a unique key. You can also delete all records for an application using the <span style="font-family: Courier New,Courier,monospace">remove_all()</span> function.</p>
+
+<pre class="prettyprint">preference_remove(const char *key)
+
+preference_remove_all(void)</pre></li></ol>
+       </div>
+               </li>                           
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm
new file mode 100644 (file)
index 0000000..71ac468
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm
@@ -0,0 +1,241 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Badge: Displaying the Notification (Badge) Count on the Home Screen</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initialize the Badge Functionality</a></li>
+                       <li><a class="opensection" href="#create">Creating a Badge</a></li>
+                       <li><a class="opensection" href="#manage">Managing the Badge</a></li>
+                       <li><a class="opensection" href="#remove">Removing the Badge</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/badge_n.htm">Badge Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Badge: Displaying the Notification (Badge) Count on the Home Screen</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can create, manage, and remove a badge for an application. A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Badge API basics by learning about:</p>
+<ul>
+ <li><a href="#init">Initializing the Badge Functionality</a>
+ <p>Initialize the badge functionality for use.</p></li>
+ <li><a href="#create">Creating a Badge</a>
+  <p>Create a badge for an application.</p>
+ </li>
+ <li><a href="#manage">Managing the Badge</a>
+  <p>Get and set the count and display attributes for the badge.</p>
+ </li>
+ <li><a href="#remove">Removing the Badge</a>
+  <p>Remove the badge from the application.</p>
+ </li>
+</ul>  
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Badge Functionality</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize badges:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;badge.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;stdio.h&gt;
+#include &lt;stdlib.h&gt;
+#include &lt;string.h&gt;
+#include &lt;unistd.h&gt;
+#include &lt;badge.h&gt;
+</pre></li>
+<li>The badge functionality requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</li>
+
+<li>Declare the variables for the return value and application (package name):
+
+<pre class="prettyprint">
+static int ret = 0;
+
+#define TEST_PKG &quot;org.tizen.badgeapp&quot;</pre>
+
+<p>To determine if a Badge API function has been correctly executed, check its return value. If the value is different from <span style="font-family: Courier New,Courier,monospace">BADGE_ERROR_NONE</span>, an error has occurred.</p></li></ol>
+       </div>
+               </li>           
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating a Badge</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a badge for an application, call the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function:</p>
+<pre class="prettyprint">badge_new(const char *writable_app_id)</pre>
+
+<p>The application calling the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function has the ownership of the badge. And the <span style="font-family: Courier New,Courier,monospace">writable_app_id</span> parameter means the application which is to be authorized to change the badge.</p>
+
+<pre class="prettyprint">ret = badge_new(TEST_PKG);
+if (ret != BADGE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing the Badge</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+
+
+<p>To manage the badge:</p>
+
+<ol>
+<li>Get the count attribute:
+<p>The count attribute is displayed in the right corner of the badge and its value must be an integer.</p>
+<p>To get the count attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_get_count()</span> function:</p>
+<pre class="prettyprint">badge_get_count(const char *app_id, unsigned int *count)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the count of the badge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[out] count</span>: The value of the count attribute.</li>
+</ul>
+<pre class="prettyprint">unsigned int count = 0;
+ret = badge_get_count(TEST_PKG, &amp;count);
+if (ret != BADGE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+</li>
+<li>Set the count attribute:
+<p>To set the count attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_set_count()</span> function:</p>
+<pre class="prettyprint">badge_set_count(const char *app_id, unsigned int count)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that sets the count of the badge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] count</span>: The new value for the count attribute.</li>
+</ul>
+<pre class="prettyprint">ret = badge_set_count(TEST_PKG, count+1);
+if (ret != BADGE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+</li>
+<li>Getting the display attribute:
+<p>You can check whether the badge is visible by getting its display attribute.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">app_id</span> parameter refers to the application which is the owner of the badge.</p>
+<p>To get the display attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_get_display()</span> function:</p>
+<pre class="prettyprint">badge_get_display(const char *app_id, unsigned int *is_display)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the display flag of the badge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[out] is_display</span>: The value of the display attribute (1 = badge is visible, 0 = badge is hidden).</li>
+</ul>
+
+<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;// Error handling
+}</pre>
+</li>
+<li>Setting the display attribute:
+<p>You can display or hide the badge by setting its display attribute accordingly.</p>
+<p>To set the display attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_set_display()</span> function:</p>
+<pre class="prettyprint">badge_set_display(const char *app_id, unsigned int is_display)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the display flag of the badge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] is_display</span>: The new value for the display attribute (1 = badge is visible, 0 = badge is hidden).</li>
+</ul>
+<pre class="prettyprint">ret = badge_set_display(TEST_PKG, 1);
+if (ret != BADGE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="remove" name="remove" class="items-tit-h2">Removing the Badge</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To remove the badge from the application, call the <span style="font-family: Courier New,Courier,monospace">badge_remove()</span> function:</p>
+<pre class="prettyprint">badge_remove(const char *app_id)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The ID of the application whose badge to remove.</li>
+</ul>
+<pre class="prettyprint">ret = badge_remove(TEST_PKG);
+if (ret != BADGE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+       </div>
+               </li>                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm
new file mode 100644 (file)
index 0000000..315ae22
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm
@@ -0,0 +1,326 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Bundle: Using the String-based Dictionary ADT</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                        <li><a class="opensection" href="#init">Initializing a Bundle</a></li>
+                        <li>Content management
+                        <ul class="toc">
+                        <li><a class="opensection" href="#add">Adding Content to a Bundle</a></li>
+                        <li><a class="opensection" href="#manage">Managing and Using the Bundle Content</a></li>
+                        <li><a class="opensection" href="#iterate">Iterating a Bundle</a></li>
+                        </ul></li>
+                        <li><a class="opensection" href="#encode">Encoding and Decoding a Bundle</a></li>
+                        <li><a class="opensection" href="#cleanup">Cleaning up a Bundle</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/bundle_n.htm">Bundle Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Bundle: Using the String-based Dictionary ADT</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can access and use bundles, which are key-value dictionaries.</p>
+<h2>Warm-up</h2>
+<p>Become familiar with the Bundle API basics by learning about:</p>
+       <ul>
+                <li><a class="opensection" href="#init">Initializing a Bundle</a>
+                <p>Initialize bundle for use.</p></li>
+                <li>Content management
+                <ul>
+                <li><a class="opensection" href="#add">Adding Content to a Bundle</a>
+                <p>Add content to a valid bundle.</p></li>
+                <li><a class="opensection" href="#manage">Managing and Using the Bundle Content</a>
+                <p>Add, delete, and get values of the bundle content.</p></li>
+                <li><a class="opensection" href="#iterate">Iterating a Bundle</a>
+                <p>Iterate a bundle.</p></li>
+                </ul></li>
+                <li><a class="opensection" href="#encode">Encoding and Decoding a Bundle</a>
+                <p>Encode and decode a bundle.</p></li>
+                <li><a class="opensection" href="#cleanup">Cleaning up a Bundle</a>
+                <p>Release the bundle after use.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing a Bundle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;bundle.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;bundle.h&gt;
+</pre>
+<p>Before you can perform any operations on a bundle, create the bundle instance. Each bundle is independent from other bundles and stores its own set of records.</p>
+<pre class="prettyprint">bundle* bund = NULL;
+
+bund = bundle_create();</pre>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="add" name="add" class="items-tit-h2">Adding Content to a Bundle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Fill a valid bundle instance with content. The content is in the form of key-value pairs. The key is always a string. The value can be of the following types:</p>
+
+<table> 
+   <caption>
+     Table: Bundle value types 
+   </caption> 
+   <tbody>
+    <tr> 
+     <th>Value constant</th> 
+     <th>Value type</th> 
+    </tr> 
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">BUNDLE_TYPE_STR</span></td> 
+     <td>String (default)</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BUNDLE_TYPE_STR_ARRAY</span></td> 
+     <td>String array</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BUNDLE_TYPE_BYTE</span></td> 
+     <td>Byte</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+       
+<p>Each value type is associated with a function that can operate on it:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">bundle_add_str_array(bundle *b, const char *key, const char **str_array, const int len)</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">bundle_add_str(bundle *b, const char *key, const char *str)</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">bundle_add_byte(bundle *b, const char *key, const void *byte, const size_t size)</span></li>
+</ul>
+
+<p>When operating on bytes, control the length of the given chain:</p>
+
+<pre class="prettyprint">const char* array [3] = {&quot;Var1&quot;, &quot;Var2&quot;, &quot;Var3&quot;};
+int array_len = 3;
+
+bundle_add_str(bund, &quot;Str&quot;, &quot;String content&quot;); 
+
+bundle_add_str_array(bund, &quot;Array&quot;, array, array_len); 
+
+bundle_add_byte(bund, &quot;Byte&quot;, &quot;Byte content&quot;, 12);</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing and Using the Bundle Content</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>You can perform the following operations on a bundle:</p>
+<ul class="ul">
+ <li>Adding content: <span style="font-family: Courier New,Courier,monospace">bundle_add_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_add_str_array()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_add_byte()</span> </li>
+ <li>Deleting content: <span style="font-family: Courier New,Courier,monospace">bundle_del()</span></li>
+ <li>Getting values: <span style="font-family: Courier New,Courier,monospace">bundle_get_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_str_array()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_byte()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_count()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_get_type()</span></li>
+
+</ul>
+<pre class="prettyprint">
+void test_bundle_add_del_get(void)
+{
+&nbsp;&nbsp;&nbsp;bundle *b = NULL;
+&nbsp;&nbsp;&nbsp;int count = 0;
+&nbsp;&nbsp;&nbsp;char *value;
+
+&nbsp;&nbsp;&nbsp;b = bundle_create();
+
+&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;key1&quot;, &quot;val1&quot;);
+&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;key2&quot;, &quot;val2&quot;);
+&nbsp;&nbsp;&nbsp;bundle_get_str(b, &quot;key2&quot;, &amp;value);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;the value of key2 : %s&quot;, value);
+
+&nbsp;&nbsp;&nbsp;count = bundle_get_count(b);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;the number of bundle items : %d&quot;, count);
+
+&nbsp;&nbsp;&nbsp;bundle_del(b, &quot;key2&quot;);
+
+&nbsp;&nbsp;&nbsp;count = bundle_get_count(b);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;the number of bundle items : %d&quot;, count);
+
+&nbsp;&nbsp;&nbsp;bundle_free(b);
+}
+</pre>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="iterate" name="iterate" class="items-tit-h2">Iterating a Bundle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function requires a callback function to operate. The callback function must first determine the key-value pairs and then perform the specified operations.</p>
+
+<p>After the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function, the <span style="font-family: Courier New,Courier,monospace">_bundle_iterator_t()</span> function is invoked for each record in the bundle:</p>
+
+<pre class="prettyprint">
+void iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;key : %s, type : %d &quot;, key, type);
+    
+&nbsp;&nbsp;&nbsp;void *ptr = NULL;
+&nbsp;&nbsp;&nbsp;char *buff = NULL;
+&nbsp;&nbsp;&nbsp;unsigned int size = 0;
+&nbsp;&nbsp;&nbsp;if (type == BUNDLE_TYPE_STR) 
+&nbsp;&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;buff = malloc(sizeof(char)* size + 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buff, size + 1, &quot;%s&quot;, ((char*) ptr));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PRINT_MSG(&quot;Found STR -KEY: %s, VAL: %s, SIZE: %d&quot;, key, buff, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Found STR -KEY: %s, VAL: %s, SIZE: %d&quot;, key, buff, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(buff);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (type == BUNDLE_TYPE_BYTE) 
+&nbsp;&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;buff = malloc(sizeof(char)* size + 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buff, size + 1, &quot;%s&quot;, ((char*) ptr));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PRINT_MSG(&quot;Found BYTE -KEY: %s, VAL: %s, SIZE: %d&quot;, key, buff, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Found STR -KEY: %s, VAL: %s, SIZE: %d&quot;, key, buff, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(buff);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (type == BUNDLE_TYPE_STR_ARRAY) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void ** array;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int len = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size_t *element_size = NULL;
+&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;PRINT_MSG(&quot;Found STR_ARRAY -KEY: %s&quot;, key);
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-Array len: %d&quot;, len);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PRINT_MSG(&quot;-Array len: %d&quot;, len);
+&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;&nbsp;&nbsp;&nbsp;PRINT_MSG(&quot;-%s&quot;, (char*)array[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}    
+}
+
+void test_bundle_foreach(void)
+{
+&nbsp;&nbsp;&nbsp;const char *s_arr[] = {&quot;abc&quot;, &quot;bcd&quot;, &quot;cde&quot;};
+&nbsp;&nbsp;&nbsp;bundle *b;
+&nbsp;&nbsp;&nbsp;b = bundle_create();
+
+&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;k1&quot;, &quot;v1&quot;);
+&nbsp;&nbsp;&nbsp;bundle_add_byte(b, &quot;k2&quot;, &quot;v2&quot;, 3);  
+&nbsp;&nbsp;&nbsp;bundle_add_str_array(b, &quot;k3&quot;, s_arr, 3);
+  
+&nbsp;&nbsp;&nbsp;bundle_foreach(b, iterate_bundle_foreach, NULL);
+&nbsp;&nbsp;&nbsp;bundle_free(b);
+}</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="encode" name="encode" class="items-tit-h2">Encoding and Decoding a Bundle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To store or send a bundle over a serial connection, encode the bundle to <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> (a typedef of <span style="font-family: Courier New,Courier,monospace">unsigned char</span>). To encode the bundle, call the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> function.</p>
+
+<p>To store the bundle, write <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> to a file, for example, and then open it with the <span style="font-family: Courier New,Courier,monospace">bundle_decode()</span> function. The encoded data and created bundle must be released when no longer needed.</p>
+
+<pre class="prettyprint">
+void test_bundle_encode_decode(void)
+{
+&nbsp;&nbsp;&nbsp;bundle *b1, *b2;
+&nbsp;&nbsp;&nbsp;bundle_raw *r;
+&nbsp;&nbsp;&nbsp;int size_r;
+&nbsp;&nbsp;&nbsp;char *value;
+
+&nbsp;&nbsp;&nbsp;b1 = bundle_create();
+&nbsp;&nbsp;&nbsp;bundle_add_str(b1, &quot;k1&quot;, &quot;v1&quot;);
+&nbsp;&nbsp;&nbsp;bundle_add_str(b1, &quot;k2&quot;, &quot;v2&quot;);
+
+&nbsp;&nbsp;&nbsp;bundle_encode(b1, &amp;r, &amp;size_r);
+
+&nbsp;&nbsp;&nbsp;b2 = bundle_decode(r, size_r);
+
+&nbsp;&nbsp;&nbsp;bundle_get_str(b1, &quot;k1&quot;, &amp;value);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;value of k1 after decode : %s&quot;, value);
+
+&nbsp;&nbsp;&nbsp;bundle_free(b1);
+&nbsp;&nbsp;&nbsp;bundle_free(b2);
+}
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="cleanup" name="cleanup" class="items-tit-h2">Cleaning up a Bundle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>When no longer needed, release the bundle by calling the <span style="font-family: Courier New,Courier,monospace">bundle_free()</span> function.</p>
+<pre class="prettyprint">bundle_free(bund);</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
new file mode 100644 (file)
index 0000000..5c83c79
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
@@ -0,0 +1,802 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Exchanging Specific Data Between Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Data Controls</a></li>
+                       <li><a class="opensection" href="#map1">Working with Map-type Data Controls</a></li>
+                       <li><a class="opensection" href="#map2">Working with SQL-type Data Controls</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/data_control_n.htm">Data Control Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Data Control: Exchanging Specific Data Between Applications</h1>
+         <div class="cont"><div class="static-cont">
+         
+  <p>This tutorial demonstrates how you can get, set, add, and remove map data, and insert, select, update, and delete SQL data.</p>
+ 
+ 
+  <h2 id="warmup" name="warmup">Warm-up</h2> 
+  <p>Become familiar with the Data Control API basics by learning about:</p> 
+  <ul>
+   <li><a class="opensection" href="#init">Initializing Data Controls</a>
+   <p>Initialize data controls for use.</p></li>
+   <li><a class="opensection" href="#map1">Working with Map-type Data Controls</a>
+    <p>Work with Map-type data controls.</p>
+   </li>
+   <li><a class="opensection" href="#map2">Working with SQL-type Data Controls</a>
+    <p>Work with SQL-type data controls.</p></li>
+  </ul> 
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Data Controls</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;data_control.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;data_control.h&gt;
+
+#include &lt;sqlite3.h&gt;
+#include &lt;stdlib.h&gt;
+#include &lt;glib.h&gt;
+#include &lt;string.h&gt;
+</pre>
+<p>To execute this application, the <span style="font-family: Courier New,Courier,monospace">&lt;sqlite3.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;stdlib.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;glib.h&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;string.h&gt;</span> header files have to be included too.</p>
+
+  <p>This data control use cases run 2 applications. Each application plays a different role: one for the consumer, the other for the provider. For the consumer application, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/datasharing</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span> privileges must be added. For the provider application, in the IDE, go to <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control &gt; Add (Read, Write SQL and Read, Write Map) access rights</strong>.</p>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="map1" name="map1" class="items-tit-h2">Working with Map-type Data Controls</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get, add, remove, and set map-type data using the Data Control API:</p>
+
+<ol>
+<li id="provider">Implement the provider application.
+<p>The provider application stores and provides data to the consumer application.</p>
+<p>The provider application has 4 operations: get, add, remove, and set. To use the map-type Data Control API, these 4 operation callbacks must be implemented.</p>
+
+<pre class="prettyprint">
+typedef struct map_data
+{
+&nbsp;&nbsp;&nbsp;char **str_arr;
+&nbsp;&nbsp;&nbsp;int arr_size;
+} map_data_s;
+
+static GHashTable *map_repository_test;
+void get_value_request_cb(int request_id, data_control_h provider, const char *key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;map_data_s* map_data =
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
+
+&nbsp;&nbsp;&nbsp;int ret_value_count = 0;
+&nbsp;&nbsp;&nbsp;char **val_arr = NULL;
+&nbsp;&nbsp;&nbsp;if (map_data != NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;val_arr = map_data-&gt;str_arr;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret_value_count = map_data-&gt;arr_size;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_get_value_result(request_id, val_arr, ret_value_count);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;send_map_get_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Get value success request_id : %d&quot;, request_id);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void set_value_request_cb(int request_id, data_control_h provider, const char *key, const char *old_value, const char *new_value, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;map_data_s* map_data = 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
+&nbsp;&nbsp;&nbsp;if (map_data != NULL)
+&nbsp;&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;&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;&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;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_result(request_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&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;&quot;send_map_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&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;&quot;Set value success request_id : %d&quot;, request_id);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void add_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;map_data_s* map_data = 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
+
+&nbsp;&nbsp;&nbsp;if (map_data == NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data = (map_data_s*)(g_malloc(sizeof(*map_data)));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;arr_size = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr = (char**) calloc(1, sizeof(char*));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr[0] = g_strdup(value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_hash_table_insert(map_repository_test, g_strdup(key), map_data);
+
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char **new_arr = 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(char**) calloc(map_data-&gt;arr_size+2, sizeof(char*));
+&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;&nbsp;&nbsp;&nbsp;new_arr[i] = g_strdup(map_data-&gt;str_arr[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(map_data-&gt;str_arr);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_arr[map_data-&gt;arr_size] = g_strdup(value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr = g_strdupv(new_arr);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(new_arr);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;map_data-&gt;arr_size+=1;
+
+&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_result(request_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;send_map_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Add value success request_id : %d %d %s&quot;, request_id, map_data-&gt;arr_size, map_data-&gt;str_arr[0]);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void remove_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;map_data_s* map_data = 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
+
+&nbsp;&nbsp;&nbsp;if (map_data != NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int size = map_data-&gt;arr_size;
+&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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(map_data-&gt;str_arr[i]);
+&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;if (map_data-&gt;arr_size == 0)
+&nbsp;&nbsp;&nbsp;&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;&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;&quot;remove value fail -%s&quot;, key);
+
+&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;int ret = data_control_provider_send_map_result(request_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&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;&quot;send_map_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Remove value Success&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Register the callback within the <span style="font-family: Courier New,Courier,monospace">app_create(void *data)</span> function using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_map_register_cb()</span> function:</p>
+<pre class="prettyprint">
+void __free_key(gpointer data)
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Remove key&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+}
+
+void __free_data(gpointer data)
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Remove value&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+}
+
+data_control_provider_map_cb map_callback;
+void initialize_datacontrol_provider()
+{
+&nbsp;&nbsp;&nbsp;map_repository_test = 
+&nbsp;&nbsp;&nbsp;g_hash_table_new_full(g_str_hash, g_str_equal, __free_key, __free_data);
+
+&nbsp;&nbsp;&nbsp;map_callback.get_cb = get_value_request_cb;
+&nbsp;&nbsp;&nbsp;map_callback.add_cb = add_value_request_cb;
+&nbsp;&nbsp;&nbsp;map_callback.remove_cb = remove_value_request_cb;
+&nbsp;&nbsp;&nbsp;map_callback.set_cb = set_value_request_cb;
+
+&nbsp;&nbsp;&nbsp;int result = data_control_provider_map_register_cb(&amp;map_callback);
+&nbsp;&nbsp;&nbsp;if(result != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&quot;data_control_provider_map_register_cb failed with error: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Provider map register success&quot;);
+&nbsp;&nbsp;&nbsp;}
+}      
+</pre>
+</li>
+
+<li id="consumer">Implement the consumer application.
+
+<p>The consumer application requests get, set, add, and remove functions to the provider application and receives the results from the provider application.</p>
+
+<p>Implement the response callback. The response callback receives the request result and data from the provider.</p>
+<pre class="prettyprint">
+// Callback functions 
+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;&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;&nbsp;&nbsp;const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_ret)
+&nbsp;&nbsp;&nbsp;{
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The get operation is successful. value count : %d &quot;, ret_value_count);
+&nbsp;&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, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;(%d) Return value : %s &quot;, i , ret_value_list[i]);
+
+&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;The get operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void map_set_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_ret)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The set operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void map_add_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_ret)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The add operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void map_remove_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_ret)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The remove operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>To identify the provider and data, initialize a data control handler. The initializing process has to be performed within the <span style="font-family: Courier New,Courier,monospace">app_create(void *data)</span> function generated by the IDE.</p>
+<p>To grant access to the provider ID, go to the provider application <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control</strong>.</p>
+
+<pre class="prettyprint">
+data_control_map_response_cb map_callback;
+void initialize_datacontrol_consumer(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;const char *provider_id = Your Provider ID;
+&nbsp;&nbsp;&nbsp;const char *data_id = &quot;table&quot;;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;// Create data control handler
+&nbsp;&nbsp;&nbsp;ret = data_control_map_create(&amp;(ad-&gt;provider_h));
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;creating data control provider is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = data_control_map_set_provider_id(ad-&gt;provider_h, provider_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting provider id is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = data_control_map_set_data_id(ad-&gt;provider_h, data_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting data id is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Set response callback
+&nbsp;&nbsp;&nbsp;map_callback.get_cb = map_get_response_cb;
+&nbsp;&nbsp;&nbsp;map_callback.set_cb = map_set_response_cb;
+&nbsp;&nbsp;&nbsp;map_callback.add_cb = map_add_response_cb;
+&nbsp;&nbsp;&nbsp;map_callback.remove_cb = map_remove_response_cb;
+
+&nbsp;&nbsp;&nbsp;// Register response callback
+&nbsp;&nbsp;&nbsp;ret = data_control_map_register_response_cb(ad-&gt;provider_h, &amp;map_callback, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&quot;Registering the callback function is failed with error: %d&quot;, ret);
+
+&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;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;I/O error&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Out of memory&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;int req_id = 0;
+
+&nbsp;&nbsp;&nbsp;// Add value
+&nbsp;&nbsp;&nbsp;const char *key = &quot;key&quot;;
+&nbsp;&nbsp;&nbsp;const char *value = &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;data_control_map_add(provider_map, key, value, &amp;req_id);
+ 
+&nbsp;&nbsp;&nbsp;// Get value
+&nbsp;&nbsp;&nbsp;data_control_map_get(provider_map, key, &amp;req_id);
+
+&nbsp;&nbsp;&nbsp;// Set value
+&nbsp;&nbsp;&nbsp;const char *old_value = &quot;old value&quot;;
+&nbsp;&nbsp;&nbsp;const char *new_value = &quot;new value&quot;;
+&nbsp;&nbsp;&nbsp;data_control_map_set(provider_map, key, old_value, new_value, &amp;req_id);
+   
+&nbsp;&nbsp;&nbsp;// Remove value
+&nbsp;&nbsp;&nbsp;data_control_map_remove(provider_map, key, value, &amp;req_id);
+}
+</pre>
+</li>
+</ol>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="map2" name="map2" class="items-tit-h2">Working with SQL-type Data Controls</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert, select, update, and delete SQL-type data using the Data Control API:</p>
+
+<ol>
+<li id="provider2">Implement the provider application.
+<p>The provider application stores and provides data to the consumer application.</p> 
+<p>The provider application has 4 operations: insert, select, update, and delete. To use the SQL-type Data Control API, these operation callbacks have to be implemented.</p>
+
+<pre class="prettyprint">
+data_control_provider_sql_cb *sql_callback;
+static sqlite3* db;
+void insert_request_cb(int request_id, data_control_h provider, bundle *insert_data, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_insert_statement(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;provider, insert_data);
+&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+
+&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[insert_request_cb] insert success&quot;);
+
+&nbsp;&nbsp;&nbsp;long long inserted_row_id = sqlite3_last_insert_rowid(db);
+&nbsp;&nbsp;&nbsp;ret = 
+&nbsp;&nbsp;&nbsp;data_control_provider_send_insert_result(request_id, inserted_row_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;insert_send_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[insert_request_cb] send result success&quot;);
+
+&nbsp;&nbsp;&nbsp;free(command);
+}
+
+void delete_request_cb(int request_id, data_control_h provider, const char *where, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[delete_request_cb] request_id(%d)&quot;, request_id);
+&nbsp;&nbsp;&nbsp;char* command = 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_create_delete_statement(provider, where);
+&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}    
+
+&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_delete_result(request_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;delete_send_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[delete_request_cb] delete success&quot;);
+
+&nbsp;&nbsp;&nbsp;free(command);
+}
+
+void select_request_cb(int request_id, data_control_h provider, const char **column_list, int column_count, const char *where, const char *order, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;sqlite3_stmt* sql_stmt = NULL;
+
+&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_select_statement(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;provider, column_list, column_count, where, order);
+&nbsp;&nbsp;&nbsp;int ret = sqlite3_prepare_v2(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;db, command, strlen(command), &amp;sql_stmt, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}    
+
+&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_select_result(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request_id, (void *)sql_stmt);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;select_send_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[select_request_cb] send result success&quot;);
+
+&nbsp;&nbsp;&nbsp;sqlite3_finalize(sql_stmt);
+&nbsp;&nbsp;&nbsp;free(command);
+}
+
+void update_request_cb(int request_id, data_control_h provider, bundle *update_data, const char *where, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_update_statement(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;provider, update_data, where);
+&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+       
+
+&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_update_result(request_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;update_send_result failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[update_request_cb] send result success&quot;);
+
+&nbsp;&nbsp;&nbsp;free(command);
+}
+</pre>
+
+<p>Register the callback and create the database:</p>
+
+<pre class="prettyprint">
+int create_database()
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,  &quot;%s%s&quot;, app_get_data_path(), &quot;test.db&quot;);
+
+&nbsp;&nbsp;&nbsp;int open_flags = (SQLITE_OPEN_READWRITE | SQLITE_OPEN_CREATE);
+
+&nbsp;&nbsp;&nbsp;int ret = sqlite3_open_v2(Your DB Path , &amp;db, open_flags, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;database creation failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;char* sql_command = &quot;CREATE TABLE IF NOT EXISTS Dictionary (WORD VARCHAR(30) , WORD_DESC TEXT, WORD_NUM INT, Point INT)&quot;;
+&nbsp;&nbsp;&nbsp;ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,&quot;database table creation failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,&quot;DB init Success.&quot;);
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+void initialize_datacontrol_provider()
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;initialize_datacontrol_provider &quot;);
+
+&nbsp;&nbsp;&nbsp;int result = create_database();
+&nbsp;&nbsp;&nbsp;if (result != SQLITE_OK)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;sql_callback = 
+(data_control_provider_sql_cb *) malloc(sizeof(data_control_provider_sql_cb));
+&nbsp;&nbsp;&nbsp;sql_callback-&gt;select_cb = select_request_cb;
+&nbsp;&nbsp;&nbsp;sql_callback-&gt;insert_cb = insert_request_cb;
+&nbsp;&nbsp;&nbsp;sql_callback-&gt;delete_cb = delete_request_cb;
+&nbsp;&nbsp;&nbsp;sql_callback-&gt;update_cb = update_request_cb;
+&nbsp;&nbsp;&nbsp;result = data_control_provider_sql_register_cb(sql_callback, NULL);
+&nbsp;&nbsp;&nbsp;if (result != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data_control_sql_response_c failed with error: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Provider SQL register success&quot;);
+&nbsp;&nbsp;&nbsp;}
+}              
+</pre>
+</li>
+
+<li id="consumer2">Implement the consumer application.
+
+<p>The consumer application requests the insert, select, update, and delete functions to the provider application and receives the result from the provider application.</p>
+
+<p>Implement the response callback. The response callback receives the request result and data from the provider.</p>
+               
+<pre class="prettyprint">
+void sql_delete_response_cb(int request_id, data_control_h provider, bool provider_result, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_result)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The delete operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void sql_insert_response_cb(int request_id, data_control_h provider, long long inserted_row_id, bool provider_result, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_result)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The insert operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void sql_select_response_cb(int request_id, data_control_h provider, result_set_cursor cursor, bool provider_result, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_result)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The select operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&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;&nbsp;char word[32] = {0,};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char word_desc[32] = {0,};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long word_number = -1;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_get_text_data(cursor, 0, word);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_get_text_data(cursor, 1, word_desc);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_get_int64_data(cursor, 2, &amp;word_number);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Word : %s, Word DESC : %s, Word NUM : %ld &quot;, word, word_desc, word_number);
+
+&nbsp;&nbsp;&nbsp;}
+}
+
+void sql_update_response_cb(int request_id, data_control_h provider, bool provider_result, const char *error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (provider_result)
+&nbsp;&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;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;The update operation for the request %d is failed. error message: %s&quot;, request_id, error);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>To identify the provider and data, initialize a data control handler. The initializing process has to be performed within the <span style="font-family: Courier New,Courier,monospace">app_create(void *data)</span> function generated by the IDE.</p>
+<p>To grant access to the provider ID, go to the provider application <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control</strong>.</p>
+
+<pre class="prettyprint">
+data_control_sql_response_cb sql_callback;
+void initialize_datacontrol_consumer(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;const char *provider_id = Your Provider ID;
+&nbsp;&nbsp;&nbsp;const char *data_id = &quot;Dictionary&quot;;
+
+&nbsp;&nbsp;&nbsp;ret = data_control_sql_create(&amp;(ad-&gt;provider_h));
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;creating data control provider is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = data_control_sql_set_provider_id(ad-&gt;provider_h, provider_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;setting provider id is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = data_control_sql_set_data_id(ad-&gt;provider_h, data_id);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;setting data id is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;sql_callback.delete_cb = sql_delete_response_cb;
+&nbsp;&nbsp;&nbsp;sql_callback.insert_cb = sql_insert_response_cb;
+&nbsp;&nbsp;&nbsp;sql_callback.select_cb = sql_select_response_cb;
+&nbsp;&nbsp;&nbsp;sql_callback.update_cb = sql_update_response_cb;
+
+&nbsp;&nbsp;&nbsp;ret = data_control_sql_register_response_cb(ad-&gt;provider_h, &amp;sql_callback, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Registering the callback function is failed with error: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Init data control success&quot;);
+
+&nbsp;&nbsp;&nbsp;int req_id = 0; 
+   
+&nbsp;&nbsp;&nbsp;// Insert row
+&nbsp;&nbsp;&nbsp;bundle *b = bundle_create();
+&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD&quot;, &quot;&#39;test&#39;&quot;);
+&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD_DESC&quot;, &quot;&#39;test desc&#39;&quot;);
+
+&nbsp;&nbsp;&nbsp;data_control_sql_insert(provider_sql, b, &amp;req_id);
+
+&nbsp;&nbsp;&nbsp;// Select row
+&nbsp;&nbsp;&nbsp;char *column_list[2];
+&nbsp;&nbsp;&nbsp;column_list[0] = &quot;WORD&quot;;
+&nbsp;&nbsp;&nbsp;column_list[1] = &quot;WORD_DESC&quot;;
+   
+&nbsp;&nbsp;&nbsp;const char *where = &quot;WORD = &#39;test&#39;&quot;;
+&nbsp;&nbsp;&nbsp;const char *order = &quot;WORD ASC&quot;;
+
+&nbsp;&nbsp;&nbsp;data_control_sql_select(provider_sql, column_list, 2, where, order, &amp;req_id);
+
+&nbsp;&nbsp;&nbsp;// Select row
+&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD&quot;, &quot;&#39;test_new&#39;&quot;);
+&nbsp;&nbsp;&nbsp;data_control_sql_update(provider_sql, b, where, &amp;req_id);
+
+&nbsp;&nbsp;&nbsp;// Delete row
+&nbsp;&nbsp;&nbsp;const char *where_delete = &quot;WORD = &#39;test&#39;&quot;;
+&nbsp;&nbsp;&nbsp;result = data_control_sql_delete(provider_sql, where_delete, &amp;req_id);
+
+&nbsp;&nbsp;&nbsp;// Free memory
+&nbsp;&nbsp;&nbsp;bundle_free(b);
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions before main event loop starts
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
+&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated 
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+&nbsp;&nbsp;&nbsp;initialize_datacontrol_consumer(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm
new file mode 100644 (file)
index 0000000..1a42695
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm
@@ -0,0 +1,394 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Passing Messages Between Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Message Port Communication</a></li>
+                   <li><a class="opensection" href="#uni">Using Uni-directional Message Port Communication</a></li>
+                   <li><a class="opensection" href="#bi">Using Bi-directional Message Port Communication</a></li>
+                   <li><a class="opensection" href="#trusted">Using Trusted Message Port Communication</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/message_port_n.htm">Message Port Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API</a></li>        
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Message Port: Passing Messages Between Applications</h1>
+         <div class="cont"><div class="static-cont">
+         
+<p>This tutorial demonstrates how you can register, unregister, and check the message port, and send messages through the message port.</p>
+
+       
+        <h2>Warm-up</h2>
+        <p>Become familiar with the Message Port API basics by learning about:</p>
+        <ul>
+           <li><a class="opensection" href="#init">Initializing Message Port Communication</a>
+                  <p>Initialize the message port communication for use.</p></li>
+                  <li><a class="opensection" href="#uni">Using Uni-directional Message Port Communication</a>
+                       <p>Send and receive messages using uni-directional message port communication between Tizen native applications.</p>
+                  </li>
+                  <li><a class="opensection" href="#bi">Using Bi-directional Message Port Communication</a>
+                       <p>Send and receive messages using bi-directional message port communication between Tizen native applications.</p>
+                  </li>
+                  <li><a class="opensection" href="#trusted">Using Trusted Message Port Communication</a>
+                       <p>Send and receive messages using trusted message port communication between Tizen native applications.</p>
+                  </li>
+        </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+       
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Message Port Communication</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To initialize message port communication:</p>
+<ol>
+<li>                   
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;message_port.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;message_port.h&gt;
+</pre></li>                            
+
+<li><p>You need 2 applications to communicate with each other through the message port.</p>
+  
+  <p>To use trusted message port communication, create an author certificate, register the certificate to the IDE, and grant permissions by the application certificate in the manifest editor.</p></li></ol>
+ 
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="uni" name="uni" class="items-tit-h2">Using Uni-directional Message Port Communication</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To send a message from Application 1 to Application 2 using the Message Port API:</p>
+   
+  <p class="figure">Figure: Uni-directional message port communication</p> 
+  <p style="text-align:center;"><img alt="Uni-directional message port communication" src="../../images/message_port_uni-directional_communication.png" /></p> 
+     
+
+<ol>
+
+<li>
+       <p>Register a local port in Application 2.</p>
+       
+<p>To register the local port, call the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function. 
+</p>
+
+<pre class="prettyprint">
+int message_port_register_local_port(const char* local_port, message_port_message_cb callback, void* user_data)
+</pre>
+
+<p>The function requires 2 parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">local_port</span>: The name of the local message port</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: The callback function to be called when a message is received</li>
+  <li>Return: A local message port ID on success, otherwise a negative error value</li>
+</ul>
+
+<p>Implement the following codes in Application 2. Implement the <span style="font-family: Courier New,Courier,monospace">message_port_cb()</span> callback function for the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</p>
+
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+{
+&nbsp;&nbsp;&nbsp;char *command = NULL;
+&nbsp;&nbsp;&nbsp;char *data = NULL;
+&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;command&quot;, &amp;command);
+&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;data&quot;, &amp;data);
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG,
+&nbsp;&nbsp;&nbsp;&quot;Message from %s, command: %s data: %s&quot;, remote_app_id, command, data);
+}
+</pre>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</p>
+
+<pre class="prettyprint">
+int port_id = message_port_register_local_port(local_port, message_port_cb, NULL);
+if (port_id &lt; 0) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Port register error : %d&quot;, port_id);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;port_id : %d&quot;, port_id);
+} 
+</pre>
+</li>
+
+<li>
+<p>Check the remote port in Application 1:</p>
+
+<p>To check the remote port, call the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</p>
+
+<pre class="prettyprint">
+int message_port_check_remote_port(const char* remote_app_id, const char* remote_port, bool* exist)
+</pre>
+
+<p>The function requires 3 parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">remote_app_id</span>: The name of the local message port</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">remote_port</span>: The name of the remote message port</li>
+  <li>[out] <span style="font-family: Courier New,Courier,monospace">exist</span>: <span style="font-family: Courier New,Courier,monospace">true</span> if the message port of the remote application exists, otherwise <span style="font-family: Courier New,Courier,monospace">false</span></li>
+  <li>Return: 0 on success, otherwise a negative error value</li>
+</ul>
+
+<p>Implement the following codes in Application 1:</p>
+<pre class="prettyprint">
+bool test_check_remote_port() 
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;bool found;
+
+&nbsp;&nbsp;&nbsp;ret = message_port_check_remote_port (remote_app_id, remote_port, &amp;found);
+&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE) 
+&nbsp;&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;&nbsp;&nbsp;return found;
+}
+</pre>
+</li>
+
+
+<li>
+<p>Send a message in Application 1.</p>
+
+<p>To send a message, call the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function:</p>
+
+<pre class="prettyprint">int message_port_send_message(const char* remote_app_id, const char* remote_port, bundle* message) </pre>
+
+<p>The function requires 3 parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">remote_app_id</span>: The name of the local message port</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">remote_port</span>: The name of the remote message port</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">message</span>: The message to be passed to the remote application, the recommended message size is under 4KB</li>
+  <li>Return: 0 on success, otherwise a negative error value</li>
+</ul>
+
+<pre class="prettyprint">
+void send_message(void)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;bundle *b = bundle_create ();
+&nbsp;&nbsp;&nbsp;bundle_add_str (b, &quot;command&quot;, &quot;begin&quot;);
+&nbsp;&nbsp;&nbsp;bundle_add_str (b, &quot;data&quot;, &quot;dummy&quot;);
+&nbsp;&nbsp;&nbsp;ret = message_port_send_message (remote_app_id, remote_port, b);
+&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE) 
+&nbsp;&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;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Send message done&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;bundle_free (b);
+} 
+</pre>
+</li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="bi" name="bi" class="items-tit-h2">Using Bi-directional Message Port Communication</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To send a message from Application 1 to Application 2, and from Application 2 to Application 1:</p>
+  <p class="figure">Figure: Bi-directional message port communication</p> 
+  <p style="text-align:center;"><img alt="Bi-directional message port communication" src="../../images/message_port_bi-directional_communication.png" /></p>
+
+  <ol>
+<li>
+       <p>Implement the response logic.</p>
+  
+  
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, bool trusted_remote_port, bundle *message)
+{
+
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char *command = NULL;
+&nbsp;&nbsp;&nbsp;char *data = NULL;
+&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;command&quot;, &amp;command);
+&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;data&quot;, &amp;data);
+
+&nbsp;&nbsp;&nbsp;// Callback
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, 
+&nbsp;&nbsp;&nbsp;&quot;Message from %s, command: %s data: %s&quot;, remote_app_id, command, data);
+
+
+&nbsp;&nbsp;&nbsp;bundle *reply = bundle_create ();
+&nbsp;&nbsp;&nbsp;bundle_add_str (reply, &quot;result&quot;, &quot;GOT_IT&quot;);
+&nbsp;&nbsp;&nbsp;ret = message_port_send_message (remote_app_id, remote_port, reply);
+&nbsp;&nbsp;&nbsp;bundle_free (reply);
+&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Port send message error : %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>  
+</li>
+
+<li>
+       <p>Register the local port in Application 1.</p>
+       
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, bool trusted_remote_port, bundle *message) 
+{
+&nbsp;&nbsp;&nbsp;char *result = NULL;
+&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;result&quot;, &amp;result);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Message from %s, result: %s &quot;, remote_app_id, result);
+}      
+</pre> 
+
+  <p>Call the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</p> 
+<pre class="prettyprint">
+int local_port_id = message_port_register_local_port(local_port, message_port_cb);
+if (local_port_id &lt; 0) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Port register error : %d&quot;, local_port_id);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;port_id : %d&quot;, port_id);
+}
+</pre>
+</li>
+
+<li>
+  <p>Send a message with local port information.</p>
+  <p>To get a response from the receiver, local port information has to be sent to the receiver when the message was delivered. To do this, call the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function.</p>
+
+<p>The function requires 4 parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">remote_app_id</span>: The name of the local message port</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">remote_port</span>: The name of the remote message port</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">message</span>: The message to be passed to the remote application, the recommended message size is under 4KB</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">local_port_id</span>: The message port ID returned by the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> or <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function</li>
+  <li>Return: 0 on success, otherwise a negative error value</li>
+</ul>
+
+  <p>Implement the following codes in Application 1:</p>
+<pre class="prettyprint">
+void send_message_with_local_port(int local_port_id) 
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;bundle *b = bundle_create ();
+&nbsp;&nbsp;&nbsp;bundle_add_str (b, &quot;command&quot;, &quot;begin&quot;);
+&nbsp;&nbsp;&nbsp;bundle_add_str (b, &quot;data&quot;, &quot;dummy&quot;);
+
+&nbsp;&nbsp;&nbsp;ret = message_port_send_message_with_local_port(remote_app_id, remote_port, b, local_port_id);
+&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;message_port_send_message_with_local_port error : %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Send message done&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;bundle_free (b);
+}
+</pre>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">send_message_with_local_port()</span> function:</p>
+<pre class="prettyprint">
+if (test_check_remote_port()) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Remote port check success.&quot;);
+&nbsp;&nbsp;&nbsp;send_message_with_local_port(local_port_id);
+}
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="trusted" name="trusted" class="items-tit-h2">Using Trusted Message Port Communication</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>To use the trusted message port communication:</p>
+  <p class="figure">Figure: Trusted uni-directional message port communication</p> 
+  <p style="text-align:center;"><img alt="Trusted uni-directional message port communication" src="../../images/message_port_trusted_uni-directional_comm.png" /></p>
+  
+  <p>Create the author certificate, register the created certificate to the IDE, and give permissions by the application certificate in the manifest editor.</p>
+  
+  <p>During trusted message port communication, only applications signed with the same certificate can communicate with each other.</p>
+  
+  <p>The usage is similar to the normal Message Port API implementation. However, you must use trusted functions instead of normal functions.</p>
+  
+<ul class="ul">
+ <li>Use the <span style="font-family: Courier New,Courier,monospace">message_port_check_trusted_remote_port()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
+ <li>Use the <span style="font-family: Courier New,Courier,monospace">message_port_send_trusted_message()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function.</li>
+ <li>Use the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</li>
+</ul>
+
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm
new file mode 100644 (file)
index 0000000..acae79e
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm
@@ -0,0 +1,558 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Notification: Notifying the User of Application Events</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Set-up
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init">Initializing Notifications</a></li>
+                                       <li><a class="opensection" href="#create">Creating a Notification</a></li>
+                                       <li><a class="opensection" href="#set">Setting Notification Attributes</a></li>
+                               </ul>
+                       </li>
+                       <li>Management
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#post">Posting a Notification</a></li>
+                                       <li><a class="opensection" href="#update">Updating Notification Content</a></li>
+                                       <li><a class="opensection" href="#delete">Deleting a Notification</a></li>
+                               </ul>
+                       </li>
+                       <li><a class="opensection" href="#status">Displaying the Notification Status</a></li>
+                       <li><a class="opensection" href="#bar">Displaying the Progress Bar</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/notification_n.htm">Notification Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Notification: Notifying the User of Application Events</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can display notifications in your application.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Notification API basics by learning about:</p>
+<ul>
+ <li>Set-up
+   <ul>
+        <li><a href="#init">Initializing Notifications</a>
+        <p>Initialize the notification functionalities for use.</p></li>
+        <li><a href="#create">Creating a Notification</a>
+        <p>Create a notification.</p></li>
+        <li><a href="#set">Setting Notification Attributes</a>
+        <p>Set attributes for a notification.</p></li>
+   </ul>
+ </li>
+ <li>Management
+   <ul>
+        <li><a href="#post">Posting a Notification</a>
+         <p>Post a notification.</p></li>
+        <li><a href="#update">Updating Notification Content</a>
+         <p>Update the content of a notification.</p></li>
+        <li><a href="#delete">Deleting a Notification</a>
+         <p>Delete a notification.</p></li>
+       </ul>
+ </li>
+</ul>
+<h2>Follow-up</h2> 
+<p>Once we have learned the basics of the Notification API, we can now move on to more advanced tasks, including:</p>
+<ul>
+ <li><a href="#status">Displaying the Notification Status</a>
+ <p>Display and track the notification status.</p></li>
+ <li><a href="#bar">Displaying the Progress Bar</a>
+  <p>Create, display, and update a progress bar.</p>
+ </li>
+ </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Notifications</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To initialize notifications:</p>
+<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;notification.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;notification.h&gt;</pre></li>
+
+<li>To follow this tutorial, place a JPEG image file named <span style="font-family: Courier New,Courier,monospace">notification_image.jpg</span> in your device's <span style="font-family: Courier New,Courier,monospace">/tmp</span> directory. The following variables are used in the tutorial code:
+<pre class="prettyprint">static const char *image_path = &quot;tmp/notification_image.jpg&quot;;
+static notification_h notification = NULL;</pre></li></ol>
+
+
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating a Notification</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a notification:</p>
+<p>Initialize a notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function:</p>
+<pre class="prettyprint">notification_h notification_create(notification_type_e type)</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">type</span>: Notification type.</li>
+</ul>
+
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_NOTI</span>: Create a regular notification.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span>: Create an ongoing notification.</li>
+</ul>
+
+<p>The following example code creates an ongoing notification and checks whether the initialization was successful:</p>
+<pre class="prettyprint">notification = notification_create(NOTIFICATION_TYPE_ONGOING);
+if (notification != NULL)
+{
+&nbsp;&nbsp;&nbsp;// Notification was initialized successfully
+}</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set" name="set" class="items-tit-h2">Setting Notification Attributes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>You can set the following attributes for a notification:</p>
+<ul class="ul">
+ <li><a href="#text">Notification text</a></li>
+ <li><a href="#timestamp">Timestamp</a></li>
+ <li><a href="#image">Image</a></li>
+ <li><a href="#display">Display options</a></li>
+ <li><a href="#led">LED options</a></li>
+ <li><a href="#prop">Properties</a></li>
+</ul>
+
+<h3 id="text" name="text">Setting the Notification Text</h3>
+
+<p>To set the text to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function:</p>
+
+<pre class="prettyprint">notification_set_text (notification_h noti, notification_text_type_e type, const char *text, const char *key, int args_type, ...)</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification text type.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] text</span>: Text to display in the notification view.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] key</span>: Text key for localization.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] args_type</span>: Variable parameter for a type-value pair.</li>
+</ul>
+
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_TITLE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_CONTENT</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_EVENT_COUNT</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_1</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_SUB_1</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_2</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_SUB_2</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_3</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_SUB_3</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_GROUP_TITLE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_GROUP_CONTENT</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_GROUP_CONTENT_FOR_DISPLAY_OPTION_IS_OFF</span></li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function sets the title and content string. If the text is formatted data (only d, f, and s are supported), set the type-value pair:</p>
+<ul class="ul">
+ <li>If d, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_INT</span> and the value is an integer.</li>
+ <li>If f, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_DOUBLE</span> and the value is a double.</li>
+ <li>If s, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_STRING</span> and the value is a string.</li>
+</ul>
+<p>If the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_COUNT</span>, the notification count is displayed with the text. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_LEFT</span>, the count is displayed to the left of the text. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_IN</span>, the count is displayed in the text when the text is of the d format. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_RIGHT</span>, the count is displayed to the right of the text. Variable parameters should be terminated by <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_NONE</span>.</p>
+
+<p>Check whether the operation was successful by retrieving and comparing the return value of any function to <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_ERROR_NONE</span>:</p>
+
+<pre class="prettyprint">int ret =0;
+ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+
+<h3 id="timestamp" name="timestamp">Setting the Notification Timestamp</h3>
+
+<p>To set the timestamp to display in the notification text, use the <span style="font-family: Courier New,Courier,monospace">notification_set_time_to_text()</span> function:</p>
+
+<pre class="prettyprint">notification_set_time_to_text (notification_h noti, notification_text_type_e type, time_t time)</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification text type. For information about the possible values, see <a href="#text">Setting the Notification Text</a>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] time_t</span>: Timestamp to display in the notification text.</li>
+</ul>
+
+<pre class="prettyprint">ret = notification_set_time_to_text(notification, NOTIFICATION_TEXT_TYPE_CONTENT, time(NULL));
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+
+<h3 id="image" name="image">Setting the Notification Image</h3>
+
+<p>To set the image to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_image()</span> function:</p>
+
+<pre class="prettyprint">notification_set_image (notification_h noti, notification_image_type_e type, const char *image_path)</pre> 
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification image type.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] image_path</span>: Absolute path and file name of the image file.</li>
+</ul>
+
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_THUMBNAIL</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_THUMBNAIL_FOR_LOCK</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_SUB</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_BACKGROUND</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_1</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_2</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_3</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_4</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_5</span></li>
+</ul>
+
+<pre class="prettyprint">ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+
+<h3 id="display" name="display">Setting the Notification Display Options</h3>
+
+<p>To set how applications display the notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_display_applist()</span> function:</p>
+
+<pre class="prettyprint">notification_set_display_applist (notification_h noti, int applist)</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] applist</span>: Notification display option. You can set multiple options with the &quot;|&quot; pipe operation.</li>
+</ul>
+
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">applist</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_TICKER</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_LOCK</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_INDICATOR</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_ALL</span></li>
+</ul>
+
+<p>You can combine the flags in the function by using the pipe &quot;|&quot; operation:</p>
+<pre class="prettyprint">ret = notification_set_display_applist(notification, NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY | NOTIFICATION_DISPLAY_APP_TICKER);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+
+<h3 id="led" name="led">Setting the LED Options</h3>
+
+<p>To set the LED options for a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> functions:</p>
+<pre class="prettyprint">notification_set_led (notification_h noti, notification_led_op_e operation, int led_argb)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] operation</span>: LED notification operation.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] led_argb</span>: Notification LED color.</li>
+</ul>
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">operation</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LED_OP_ON</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LED_OP_ON_CUSTOM_COLOR</span></li>
+</ul>
+
+<pre class="prettyprint">notification_set_led_time_period (notification_h noti, int on_ms, int off_ms)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] on_ms</span>: Time for turning on the LED.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] off_ms</span>: Time for turning off the LED.</li>
+</ul>
+
+<pre class="prettyprint">ret = notification_set_led(notification, NOTIFICATION_LED_OP_ON, 100);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+ret = notification_set_led_time_period(notification, 100, 100);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+
+<h3 id="prop" name="prop">Setting Notification Properties</h3>
+
+<p>To set a notification property, use the <span style="font-family: Courier New,Courier,monospace">notification_set_property()</span> function:</p>
+<pre class="prettyprint">notification_set_property (notification_h noti, int flags)</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">[in] flags</span>: Notification property. You can set multiple properties with the &quot;|&quot; pipe operation.</li>
+</ul>
+
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">flags</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISPLAY_ONLY_SIMMODE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_APP_LAUNCH</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_AUTO_DELETE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_LAUNCH_UG</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_TICKERNOTI</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_UPDATE_ON_INSERT</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_UPDATE_ON_DELETE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_VOLATILE_DISPLAY</span></li>
+</ul>
+
+<pre class="prettyprint">ret = notification_set_property(notification, NOTIFICATION_PROP_DISABLE_APP_LAUNCH);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="post" name="post" class="items-tit-h2">Posting a Notification</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To post a notification to the database, use the <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function:</p>
+<pre class="prettyprint">notification_post (notification_h noti)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+</ul>
+
+<pre class="prettyprint">ret = notification_post(notification);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update" name="update" class="items-tit-h2">Updating Notification Content</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To update the content of a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function:</p>
+<pre class="prettyprint">notification_update (notification_h noti)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function works only for ongoing notifications.</p>
+<pre class="prettyprint">ret = notification_update (notification);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="delete" name="delete" class="items-tit-h2">Deleting a Notification</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete a notification:</p>                       
+<ol><li>To delete a notification from the database, use the <span style="font-family: Courier New,Courier,monospace">notification_delete()</span> function:
+<pre class="prettyprint">notification_delete(notification_h noti)</pre>
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+</ul>
+
+<pre class="prettyprint">ret = notification_delete(notification);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre></li>
+<li><p>After deleting the notification, free the internal structure data of the notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_free()</span> function:</p>
+<pre class="prettyprint">notification_free (notification_h noti)</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+</ul>
+
+<pre class="prettyprint">ret = notification_free(notification);
+if (ret != NOTIFICATION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre></li></ol>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="status" name="status" class="items-tit-h2">Displaying the Notification Status</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To display the notification status:</p>
+
+<ol>
+<li><p>Define the message and register the callback for tracking the message status:</p>
+
+<pre class="prettyprint">
+notification_status_monitor_message_cb_set(_notification_status_message_cb, NULL);
+
+notification_status_message_post(&quot;Example 2 Msg.&quot;);
+
+notification_status_monitor_message_cb_unset();
+</pre></li>
+
+<li><p>When the message is posted on screen, the callback function is invoked:</p>
+
+<pre class="prettyprint">
+static void _notification_status_message_cb(const char *message, void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;NOTIFICATION&quot;, &quot;Callback: %s\n&quot;, message);
+}
+</pre></li></ol>
+
+    <p class="figure">Figure: Notification status</p> 
+  <p style="text-align:center;"><img alt="Notification status" src="../../images/notification_status_sd.png" /></p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="bar" name="bar" class="items-tit-h2">Displaying the Progress Bar</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To display the progress bar:</p>
+
+<ol><li><p>The Notification API provides allows you to create a progress bar, which is initialized by the <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_ONGOING_PROGRESS</span> argument in the <span style="font-family: Courier New,Courier,monospace">GetNewNotification()</span> function.</p>
+<p>To set the initial progress:</p>
+
+<pre class="prettyprint">
+static GMainLoop* gmainloop = NULL;
+mainloop = g_main_loop_new(NULL, FALSE);
+
+GetNewNotification(&amp;notification, &quot;Notification&quot;, NOTIFICATION_LY_ONGOING_PROGRESS);
+
+notification_set_progress(notification, 0);
+
+notification_set_tag(notification, &quot;noti_tag&quot;);
+
+notification_post(notification);
+
+g_timeout_add(1000, timeout_func, gmainloop);
+g_main_loop_run(gmainloop);
+g_main_loop_unref(gmainloop);
+
+notification_delete(notification);
+</pre></li>
+
+<li>To update the progress bar, use the <span style="font-family: Courier New,Courier,monospace">notification_load_by_tag()</span> function for getting the notification handle:
+
+<pre class="prettyprint">
+static gboolean timeout_func(gpointer data)
+{
+&nbsp;&nbsp;&nbsp;static int i = 0;
+&nbsp;&nbsp;&nbsp;double percent = 0;
+&nbsp;&nbsp;&nbsp;i++;
+&nbsp;&nbsp;&nbsp;notification_h notification = notification_load_by_tag(&quot;noti_tag&quot;);
+&nbsp;&nbsp;&nbsp;notification_set_progress(notification, ((double) i / 10.0));
+&nbsp;&nbsp;&nbsp;notification_get_progress(notification, &amp;percent);
+&nbsp;&nbsp;&nbsp;notification_update(notification);
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;NOTIFICATION&quot;, &quot;Progress: %f\n&quot;, percent);
+
+&nbsp;&nbsp;&nbsp;if (timeout == i) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_main_loop_quit((GMainLoop*) data);
+&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;return FALSE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return TRUE;
+}
+</pre></li></ol>
+
+    <p class="figure">Figure: Progress bar</p> 
+  <p style="text-align:center;"><img alt="Progress bar" src="../../images/notification_bar_sd.png" /></p>
+       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
new file mode 100644 (file)
index 0000000..292aeaf
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
@@ -0,0 +1,304 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Installing and Uninstalling Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#retrieve">Retrieving All Package Information of Installed Packages</a></li>
+                       <li><a class="opensection" href="#info">Getting Specific Package Information</a></li>
+                       <li><a class="opensection" href="#listen">Listening to Package Events</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/package_n.htm">Package Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Package Manager: Installing and Uninstalling Applications</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can retrieve package information and manage packages.</p> 
+
+  <h2 id="warmup" name="warmup">Warm-up</h2> 
+  <p>Become familiar with the Package Manager API basics by learning about:</p> 
+  <ul> 
+   <li><a class="opensection" href="#retrieve">Retrieving All Package Information of Installed Packages</a>
+    <p>Retrieve all package information of installed packages.</p></li>
+   <li><a class="opensection" href="#info">Getting Specific Package Information</a>
+    <p>Get specific package information.</p></li>
+   <li><a class="opensection" href="#listen">Listening to Package Events</a>
+    <p>Listen package events, such as installing, uninstalling, and updating.</p></li>
+  </ul>                
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving All Package Information of Installed Packages</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To retrieve all package information of installed packages:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a> API:</p>
+<ol><li>Include the <span style="font-family: Courier New,Courier,monospace">&lt;package_manager.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;package_manager.h&gt;
+</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.install</span>,  and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.setting</span> privileges are required for the Package Manager API.</p>
+<p>Add the privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li></ol></li>
+<li>Use the 
+   <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function:
+
+<pre class="prettyprint">
+package_manager_foreach_package_info(package_info_cb, NULL)
+</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: Callback function to be invoked</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: User data to be passed to the callback function </li>
+  <li>[out] 0 on success, otherwise a negative error value</li>
+</ul></li>
+
+<li><p> Use the <span style="font-family: Courier New,Courier,monospace">package_manager_package_info_cb</span> callback to retrieve all installed packages and print package information. Finally, destroy the package info handler. </p>
+
+<pre class="prettyprint">
+void package_info_cb(package_info_h package_info, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;char *pkg = NULL;
+&nbsp;&nbsp;&nbsp;char *label = NULL;
+&nbsp;&nbsp;&nbsp;char *icon = NULL;
+&nbsp;&nbsp;&nbsp;char *version = NULL;
+&nbsp;&nbsp;&nbsp;char *type = NULL;
+&nbsp;&nbsp;&nbsp;package_info_installed_storage_type_e storage;
+&nbsp;&nbsp;&nbsp;bool system;
+&nbsp;&nbsp;&nbsp;bool removable;
+&nbsp;&nbsp;&nbsp;bool preload;
+
+&nbsp;&nbsp;&nbsp;package_info_get_package(package_info, &amp;pkg);
+&nbsp;&nbsp;&nbsp;package_info_get_label(package_info, &amp;label);
+&nbsp;&nbsp;&nbsp;package_info_get_icon(package_info, &amp;icon);
+&nbsp;&nbsp;&nbsp;package_info_get_version(package_info, &amp;version);
+&nbsp;&nbsp;&nbsp;package_info_get_type(package_info, &amp;type);
+&nbsp;&nbsp;&nbsp;package_info_get_installed_storage(package_info, &amp;storage);
+&nbsp;&nbsp;&nbsp;package_info_is_system_package(package_info, &amp;system);
+&nbsp;&nbsp;&nbsp;package_info_is_removable_package(package_info, &amp;removable);
+&nbsp;&nbsp;&nbsp;package_info_is_preload_package(package_info, &amp;preload);
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;pkg \t= [%s]\n&quot;, pkg);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;label \t= [%s]\n&quot;, label);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;icon \t= [%s]\n&quot;, icon);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;version \t= [%s]\n&quot;, version);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;type \t= [%s]\n&quot;, type);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;storage \t= [%d]\n&quot;, storage);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;system \t= [%d]\n&quot;, system);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;removable \t= [%d]\n&quot;, removable);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;preload \t= [%d]\n&quot;, preload);
+
+&nbsp;&nbsp;&nbsp;free(pkg);
+&nbsp;&nbsp;&nbsp;free(label);
+&nbsp;&nbsp;&nbsp;free(icon);
+&nbsp;&nbsp;&nbsp;free(version);
+&nbsp;&nbsp;&nbsp;free(type);
+}
+</pre>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = package_manager_foreach_package_info(package_info_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != PACKAGE_MANAGER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;foreach_package_info error : %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="info" name="info" class="items-tit-h2">Getting Specific Package Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get specific package information:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a> API:</p>
+<ol><li>Include the <span style="font-family: Courier New,Courier,monospace">&lt;package_manager.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;package_manager.h&gt;
+</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.install</span>,  and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.setting</span> privileges are required for the Package Manager API.</p>
+<p>Add the privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li></ol></li>
+<li>Use the 
+        <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function:
+
+<pre class="prettyprint">
+package_info_h package_info = NULL;
+package_manager_get_package_info(&quot;PACKAGE-ID&quot;, &amp;package_info);
+
+// Use package information
+package_info_destroy(package_info);
+</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">package_id</span>: ID of the package</li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">package_info</span>: Package information for the given package ID</li>
+  <li>[out] 0 on success, otherwise a negative error value</li>
+</ul></li></ol>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="listen" name="listen" class="items-tit-h2">Listening to Package Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To detect package events, such as installation, uninstallation, and updates:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a> API:</p>
+<ol><li>Include the <span style="font-family: Courier New,Courier,monospace">&lt;package_manager.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;package_manager.h&gt;
+</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.install</span>,  and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.setting</span> privileges are required for the Package Manager API.</p>
+<p>Add the privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li></ol></li>
+<li>
+<p>Create the package manager (<span style="font-family: Courier New,Courier,monospace">package_manager_h</span>) using the <span style="font-family: Courier New,Courier,monospace">package_manager_create()</span> function:</p>
+
+<pre class="prettyprint">package_manager_h manager;
+package_manager_create(&amp;manager);</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle that is newly created on success </li>
+  <li>[out] 0 on success, otherwise a negative error value</li>  
+</ul>
+</li>
+
+<li>
+       
+<p>Set the status when the package is installed, uninstalled, or updated:</p>
+
+<pre class="prettyprint">package_manager_set_event_status(manager, PACKAGE_MANAGER_STATUS_TYPE_ALL);</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">status_type</span>: Status of the package</li>
+ <li>[out] 0 on success, otherwise a negative error value</li>
+</ul>
+</li>
+
+<li>
+       <p>Register a callback function to be invoked when the package is installed, uninstalled, or updated:</p>
+<pre class="prettyprint">
+package_manager_set_event_cb(manager, event_cb, NULL);
+</pre>
+
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: Callback function to be registered</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: User data to be passed to the callback function</li>
+ <li>[out] 0 on success, otherwise a negative error value</li>
+</ul>
+</li>
+
+<li>
+       <p>Implement the package manager event callback:</p>
+
+       
+<pre class="prettyprint">void event_cb(const char *type, const char *package, package_manager_event_type_e event_type, package_manager_event_state_e event_state, int progress, package_manager_error_e error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (event_state == PACKAGE_MANAGER_EVENT_STATE_STARTED)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Started&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (event_state == PACKAGE_MANAGER_EVENT_STATE_PROCESSING)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Progress : %d&quot;, progress);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (event_state == PACKAGE_MANAGER_EVENT_STATE_COMPLETED)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Completed&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed&quot;);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+</li>
+<li>
+       <p>Free the package manager:</p>
+
+       
+<pre class="prettyprint">package_manager_destroy(package_manager_h manager);</pre>
+
+</li>
+</ol>
+       </div>
+               </li>
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm
new file mode 100644 (file)
index 0000000..93434ae
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm
@@ -0,0 +1,204 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application: Creating Background Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#callback">Listening to Events</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/service_app_n.htm">Service Application Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Service Application: Creating Background Applications</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage service applications.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Service Application API basics by learning about:</p>
+
+<ul>
+       <li><a class="opensection" href="#callback">Listening to Events</a> <p>Register and set callbacks for application state change events and system events.</p></li> 
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="callback" name="callback" class="items-tit-h2">Listening to Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To listen to events:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;serviceapp.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;serviceapp.h&gt;
+</pre></li>
+<li>
+
+<p>Add callbacks for application state change events:</p>
+
+<ul class="ul">
+
+<li>
+<p>Add a callback for initializing the service application. This callback is called when the application is launched.</p>
+<p>Use the callback to write the necessary initialization code, such as setting up the dbus connection.</p>
+<p>The callback returns a Boolean value. If there is a critical error during the launch, the return is <span style="font-family: Courier New,Courier,monospace">false</span>, thereby cancelling the launch. Otherwise, the return is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<p>The callback receives user data.</p>
+<pre class="prettyprint">bool service_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+</li>
+
+<li>
+<p>Add a callback for terminating the service application. This callback is called when the application terminates.</p>
+<p>Use the callback to release all resources, especially any allocations and shared resources used by other applications.</p>
+<p>The callback returns nothing: Its return type is <span style="font-family: Courier New,Courier,monospace">void</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function quits the application&#39;s main loop internally.</p>
+<pre class="prettyprint">void __service_app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+&nbsp;&nbsp;&nbsp;service_app_exit();
+
+&nbsp;&nbsp;&nbsp;return;
+}</pre>
+</li>
+
+<li>
+<p>Add a control callback for handling service requests from other applications. This callback is called when the service application receives an <span style="font-family: Courier New,Courier,monospace">app_control</span> request from another application.</p>
+<pre class="prettyprint">void __service_app_control (app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+&nbsp;&nbsp;&nbsp;service_app_exit();
+
+&nbsp;&nbsp;&nbsp;return;
+}</pre>
+</li>
+
+</ul>
+
+</li>
+
+<li>
+
+<p>Add callbacks for system events:</p>
+
+<ul class="ul">
+
+<li>
+<p>Add the low memory callback for handling the low memory event. This callback is called when the device is low on memory.</p>
+<pre class="prettyprint">void service_app_low_memory_callback(void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+&nbsp;&nbsp;&nbsp;service_app_exit();
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+
+<li>
+<p>Add the low battery callback for handling the low battery event. This callback is called when the device is low on battery power.</p>
+<pre class="prettyprint">void service_app_low_battery_callback(void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+&nbsp;&nbsp;&nbsp;service_app_exit();
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+
+</ul>
+
+</li>
+
+<li>
+
+<p>Set the callbacks in the <span style="font-family: Courier New,Courier,monospace">service_app_event_callback_s</span> structure. This structure is passed to the function that starts the service application.</p>
+
+<pre class="prettyprint">int main(int argc, char* argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+
+&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;service_app_main() is called.&quot;);
+
+&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+</li>
+</ol>
+       </div>
+               </li>                                                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
new file mode 100644 (file)
index 0000000..50f019a
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Shortcut: Adding a Shortcut to Home</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#add">Adding a Shortcut</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/app/shortcut_n.htm">Shortcut Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Shortcut: Adding a Shortcut to Home</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can add shortcuts on the Home screen, and track when shortcuts are added to the Home screen.</p>
+<h2>Warm-up</h2>
+<p>Become familiar with the Shortcut API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#add">Adding a Shortcut</a>
+               <p>Add a shortcut to the Home screen.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="add" name="add" class="items-tit-h2">Adding a Shortcut</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To add a shortcut to the Home screen from your application:</p>
+
+<ol>
+
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;shortcut_manager.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;shortcut_manager.h&gt;
+</pre>
+</li>
+<li><p>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function:</p>
+
+<pre class="prettyprint">shortcut_add_to_home(&quot;Music Player&quot;, LAUNCH_BY_PACKAGE, NULL, image_path, 1, result_cb, NULL);</pre>
+
+<p>To add a shortcut, you have to know the package name and set an icon for the application. The above example sets the icon parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span>, which adds a default icon for the application.</p></li>
+
+<li><p>To track possible errors, define a callback function:</p>
+<pre class="prettyprint">static int result_cb(int ret, void *data)
+{
+&nbsp;&nbsp;&nbsp;if (ret &lt; 0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// No error detected
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/base/base_tutorials_n.htm b/org.tizen.tutorials/html/native/base/base_tutorials_n.htm
new file mode 100644 (file)
index 0000000..0617c96
--- /dev/null
+++ b/org.tizen.tutorials/html/native/base/base_tutorials_n.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Base: Using Fundamental Libraries</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+       <p class="toc-title">Related Info</p>
+          <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API</a></li>
+               </ul>
+       
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Base: Using Fundamental Libraries</h1>
+
+<p>The base tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+<ul>
+<li><a href="sqlite_tutorial_n.htm">Sqlite: Managing the SQL Database</a> <p>Demonstrates how you can access SQLite and OpenSSL, and encrypt and store application data.</p></li>
+<li><a href="i18n_tutorial_n.htm">i18n: Managing Characters, Numbers, and Locales</a><p>Demonstrates how you can manage numbers, date, time and locale information.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm b/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm
new file mode 100644 (file)
index 0000000..7ad6f45
--- /dev/null
+++ b/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm
@@ -0,0 +1,456 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Characters, Numbers, and Locales</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#characters">Managing Characters and Strings</a></li>
+                       <li><a class="opensection" href="#dates">Managing Dates and Calendar</a></li>
+                       <li><a class="opensection" href="#locales">Managing Locales</a></li>
+                       <li><a class="opensection" href="#numbers">Managing Numbers</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/base/i18n_n.htm">i18n Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API</a></li>
+               </ul>
+       
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>i18n: Managing Characters, Numbers, and Locales</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage numbers, date, time and locale information.</p> 
+<h2>Warm-up</h2>
+
+ <p>Become familiar with the i18n API basics by learning about:</p> 
+               <ul>
+                       <li><a href="#characters">Managing Characters and Strings</a>
+                  <p>Convert and manage characters and strings.</p></li>
+                  <li><a href="#dates">Managing Dates and Calendar</a>
+                       <p>Manage dates and calendar.</p></li>
+                  <li><a href="#locales">Managing Locales</a>
+                       <p>Manage locales, which represent a specific geographical, political, or cultural region.</p></li>     
+                  <li><a href="#numbers">Managing Numbers</a>
+                       <p>Format and parse numbers for any locale.</p></li>
+                       
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+
+                       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="characters" name="characters" class="items-tit-h2">Managing Characters and Strings</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">
+                <ul class="ul"><li>All source and destination buffers must be different.</li>
+                <li>To use the localization-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;utils_i18n.h&gt;
+</pre></li></ul></td> 
+               </tr> 
+          </tbody> 
+         </table>
+
+<h3 id="compare" name="compare">Comparing Ustrings</h3>
+<p>To compare two Ustrings:</p>
+<ol>
+<li><p>To compare 2 Ustrings for bitwise equality, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_compare()</span> function. The obtained result is equal to 0 if the compared Ustrings are equal. The result has a negative value if the first Ustring is bitwise smaller than the second Ustring, and a positive value if the first Ustring is bigger than the second one.</p>
+<pre class="prettyprint">
+i18n_uchar s1[64];
+i18n_ustring_copy_ua(s1, &quot;Tizen&quot;);
+i18n_uchar s2[64];
+i18n_ustring_copy_ua(s2, &quot;Bada&quot;);
+int32_t result = i18n_ustring_compare(s1, s2);
+</pre></li></ol>
+
+<p>For a more complex, locale-sensitive comparison, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">Ucollator</a> API:</p>
+<ol>
+<li>Create a Ucollator using the <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_create()</span> function. <p>Specify the locale as the first argument and a handle to the created Ucollator as the second argument.</p>
+<pre class="prettyprint">
+i18n_ucollator_h coll;
+i18n_ucollator_create(I18N_ULOCALE_US, &amp;coll);
+</pre></li>
+<li>Set the Ucollator strength. <p>The strength influences how strings are compared. There are a few available strength levels:</p>
+<ul class="ul">
+<li>Primary differences, such as different base letters (&quot;a&quot; vs &quot;b&quot;)</li> 
+<li>Secondary differences, such as different accented forms of the same base letter (&quot;a&quot; vs &quot;ä&quot;)</li> 
+<li>Tertiary differences, such as case differences (&quot;a&quot; vs &quot;A&quot;)</li>
+</ul>
+
+<pre class="prettyprint">
+i18n_ucollator_set_strength(coll, I18N_UCOLLATOR_DEFAULT_STRENGTH);
+</pre></li>
+<li>Compare 2 Ustrings.
+<p>To compare 2 Ustrings, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_equal()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_str_collator()</span> functions. The result of the first one is whether the compared Ustrings are equal, and the second function returns whether the first Ustring is equal to, or smaller or bigger than the second (<span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_EQUAL</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_LESS</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_GREATER</span>).</p>
+<p>As the arguments, specify a Ucollator handle, the first Ustring, the length of the first Ustring (-1 if the string is zero-terminated), the second Ustring, the length of the second Ustring (-1 if the string is zero-terminated), variable to store the result.</p>
+<pre class="prettyprint">
+int result;
+i18n_ucollator_equal(coll, s1, -1, s2, -1, &amp;result);
+i18n_ucollator_str_collator(coll, s1, -1, s2, -1, &amp;result);
+</pre></li>
+<li>Destroy the Ucollator.
+<p>When you finish using the Ucollator, destroy it using the <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_destroy()</span> function.</p>
+<pre class="prettyprint">
+i18n_ucollator_destroy(coll);
+</pre></li></ol>         
+
+<h3 id="strings" name="strings">Converting Strings to Ustrings</h3>
+<p>To convert strings to Ustrings:</p>
+
+<ul class="ul"><li><p>To convert a byte string to a Unicode string (Ustring), use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_ua()</span> function.</p>
+<pre class="prettyprint">
+const char *src = &quot;Tizen&quot;;
+i18n_uchar dest[64];
+i18n_ustring_copy_ua(dest, src);
+</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_ua_n()</span> function works similarly but it copies n characters at most, where n is its third argument.</p>
+<pre class="prettyprint">
+const char *src = &quot;Tizen&quot;;
+i18n_uchar dest[64];
+i18n_ustring_copy_ua_n(dest, src, 64);
+</pre></li>
+<li><p>Another way to convert a string to a Ustring is using the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_from_UTF8()</span> function. Its parameters include a destination buffer, a destination buffer capacity (limit), the length of the converted Ustring, the source string buffer, and the length of the original string (can be -1 if the string is zero-terminated).</p>
+<pre class="prettyprint">
+const char *src = &quot;Tizen&quot;;
+i18n_uchar dest[64];
+int dest_len;
+i18n_uerror_code_e error_code = I18N_ERROR_NONE;
+i18n_ustring_from_UTF8(dest, 64, &amp;dest_len, src, -1, &amp;error_code);
+</pre></li></ul>
+
+<h3 id="ustrings" name="ustrings">Converting Ustrings to Strings</h3>
+<p>To convert Ustrings to strings:</p>
+
+<ul class="ul">
+<li><p>To convert a Ustring to a byte string, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_au()</span> function.</p>
+<pre class="prettyprint">
+i18n_uchar src[64];
+i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+const char dest[64];
+i18n_ustring_copy_au(dest, src);
+</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_au_n()</span> function works similarly but it copies n characters at most, where n is its third argument.</p>
+<pre class="prettyprint">
+i18n_uchar src[64];
+i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+const char dest[64];
+i18n_ustring_copy_au_n(dest, src, 64);
+</pre></li>
+<li><p>Another way to convert a Ustring to a string is using the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_UTF8()</span> function. Its parameters include a destination buffer, a destination buffer capacity (limit), the length of the converted Ustring, the source string buffer, and the length of the original string (can be -1 if the string is zero-terminated). To get the length of a Ustring, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_get_length()</span> function.</p>
+<pre class="prettyprint">
+i18n_uchar src[64];
+i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+const char dest[64];
+int dest_len;
+i18n_uerror_code_e error_code = I18N_ERROR_NONE;
+i18n_ustring_to_UTF8(dest, 64, &amp;dest_len, src, i18n_ustring_get_length(src), &amp;error_code);
+</pre></li></ul>
+
+<h3 id="unicode" name="unicode">Getting Unicode Block of a Character</h3>
+<p>To get information about the location of a specified character:</p>
+<ol>
+<li><p>To get information about which Unicode allocation block contains the specified character, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_ublock_code()</span> function. The Unicode blocks are listed in the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_ublock_code_e</span> enumeration.</p>
+<pre class="prettyprint">
+i18n_uchar character = 0xACE0;
+i18n_uchar_ublock_code_e ublock;
+i18n_uchar_get_ublock_code(character, &amp;ublock);
+</pre></li></ol>
+
+<h3 id="normalize" name="normalize">Normalizing Ustrings</h3>
+<p>To normalize a Ustring:</p>
+<ol>
+<li>Get a Unormalizer instance.
+<p>To get a Unormalizer instance, use the <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> function of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">Unormalization</a> API. The first argument is <span style="font-family: Courier New,Courier,monospace">NULL</span> to use the built-in normalizer, then specify the name of the normalizer (<span style="font-family: Courier New,Courier,monospace">nfc</span> or <span style="font-family: Courier New,Courier,monospace">nfkc</span>), normalization mode (compose or decompose), and a handle to get a normalizer.</p>
+<pre class="prettyprint">
+i18n_unormalizer_h normalizer;
+i18n_unormalization_get_instance(NULL, &quot;nfc&quot;, I18N_UNORMALIZATION_DECOMPOSE, &amp;normalizer);
+</pre>
+</li>
+
+<li>Normalize a Ustring or Uchar.
+<p>To normalize a Ustring or Uchar using the obtained normalizer, use the <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_normalize()</span> function. The arguments are: the handle to normalizer, the source Ustring, the source Ustring length (-1 if the string is zero-terminated), a destination buffer, the size of destination buffer and a variable to store the actual length of the normalized Ustring.</p>
+<pre class="prettyprint">
+i18n_uchar src = 0xACE0;
+i18n_uchar dest[4];
+int dest_str_len;
+i18n_unormalization_normalize(normalizer, &amp;src, 1, dest, 4, &amp;dest_str_len);
+</pre></li></ol>
+
+<h3 id="search" name="search">Searching Text in Ustring</h3>
+<p>To search a substring in a Ustring:</p>
+<ol>
+<li>Create a search iterator.
+<p>To create a search iterator, use the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_create()</span> function of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">Usearch</a> API. To create the iterator, specify the searched pattern, the length of the searched pattern (-1 if the string is zero-terminated), the Ustring where the pattern is searched, the length of this Ustring, a locale associated with the text language, an optional break iterator structure, and a handle to created search iterator.</p>
+<pre class="prettyprint">
+i18n_uchar text[64];
+i18n_ustring_copy_ua(text, &quot;TIZEN&quot;);
+i18n_uchar pattern[64];
+i18n_ustring_copy_ua(pattern, &quot;ZEN&quot;);
+i18n_usearch_h usearch;
+i18n_usearch_create(pattern, -1, text, -1, I18N_ULOCALE_US, NULL, &amp;usearch);
+</pre></li>
+<li>Get the first index.
+<p>To get the first index with the found pattern, use the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_first()</span> function.</p>
+<pre class="prettyprint">
+int index;
+i18n_usearch_first(usearch, &amp;index);
+</pre></li>
+<li>Destroy the search iterator.
+<p>When you finish using the search iterator, destroy it using the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_destroy()</span> function.</p>
+<pre class="prettyprint">
+i18n_usearch_destroy(usearch);
+</pre></li></ol>
+
+<h3 id="uppercase" name="uppercase">Using Uppercase Ustring</h3>
+<p>To change the characters in a Ustring to uppercase:</p>
+<ol>
+<li><p>To change all characters in a Ustring to uppercase, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_uppercase()</span> function. The arguments include a result buffer, a result buffer capacity, the original Ustring, the original Ustring length (-1 if the string is zero-terminated), a locale that represents the string language, and a result length.</p>
+<pre class="prettyprint">
+i18n_uchar src[64];
+i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+i18n_uchar dest[64];
+i18n_ustring_to_upper(dest, 64, src, -1, I18N_ULOCALE_US, &amp;error_code);
+</pre></li></ol>
+       
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="dates" name="dates" class="items-tit-h2">Managing Dates and Calendar</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To create and use the Ucalendar:</p>
+<ol>
+<li><p>To use the date and calendar-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">Ucalendar</a>, <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">Udate</a>, and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">Udatepg</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;utils_i18n.h&gt;
+</pre>
+<ul class="ul">
+       <li>The Ucalendar API is used for converting between an <span style="font-family: Courier New,Courier,monospace">i18n_udate</span> object and a set of integer fields, such as <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR</span>.</li>
+       <li>The Udate API consists of functions that 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 provides flexible generation of date format patterns, such as &quot;yy-MM-dd&quot;.</li>
+</ul>
+
+</li>
+<li>Create a Ucalendar.
+<p>To create a Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_create()</span> function. Insert the following arguments: the time zone symbol (such as &quot;Asia/Seoul&quot;, &quot;UTC&quot;, &quot;GMT+9&quot;) or <span style="font-family: Courier New,Courier,monospace">NULL</span> for the default time zone, the length of time zone symbol (-1 if the symbol is zero-terminated), the desired locale (cannot be associated with the chosen time zone), the calendar type (default, Gregorian), and a handle to the created Ucalendar.</p>
+<pre class="prettyprint">
+i18n_uchar timezone[17];
+i18n_ustring_copy_ua_n(timezone, &quot;America/New_York&quot;, 17);
+i18n_ucalendar_h ucalendar;
+i18n_ucalendar_create(timezone, -1, I18N_ULOCALE_US, I18N_UCALENDAR_DEFAULT, &amp;ucalendar);
+</pre></li>
+
+<li>Set a date.
+<p>To set a date in the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_date_time()</span> function. Provide a handle to the Ucalendar, year, month reduced by 1 (0 for January, 1 for February, and so forth; use the values of the<span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_months_e</span> enumeration to avoid mistakes), day, hour, minute, and second.</p>
+<pre class="prettyprint">
+i18n_ucalendar_set_date_time(ucalendar, 2014, I18N_UCALENDAR_JULY, 1, 9, 0, 0);</pre>
+<p>To set a date using millisecond from the epoch, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_milliseconds()</span> function:</p>
+<pre class="prettyprint">
+i18n_udate udate;
+// udate must be set
+i18n_ucalendar_set_milliseconds(ucalendar, udate);
+</pre>
+<p>To add a specified period to the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_add()</span> function. Specify a handle to the Ucalendar, a field of Ucalendar to add to (year, week, day; the value of the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_date_fields_e</span> enumeration) and the amount to add to field (use a negative value to subtract).</p>
+<pre class="prettyprint">i18n_ucalendar_add(ucalendar, I18N_UCALENDAR_HOUR, 3);</pre></li>
+
+<li>Get a date.
+<p>To get a date from the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get()</span> function. You can get one of the possible values (such as year, week of year, day of month, hour, or day of year; for more information, see the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_date_fields_e</span> enumeration) at once.</p>
+<pre class="prettyprint">
+int uday;
+i18n_ucalendar_get(ucalendar, I18N_UCALENDAR_DAY_OF_YEAR, &amp;uday);
+</pre>
+<p>To get a date in milliseconds from the epoch, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_milliseconds()</span> function.</p>
+<pre class="prettyprint">
+i18n_udate date;
+i18n_ucalendar_get_ milliseconds(ucalendar, &amp;date);
+</pre>
+<p>To check whether the Ucalendar date is in daylight saving time, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_is_in_daylight_time()</span> function.</p>
+<pre class="prettyprint">
+bool dst;
+i18n_ucalendar_is_in_daylight_time(ucalendar, &amp;dst);
+</pre>
+<p>To get an actual current date from the system, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_get_now()</span> function. The obtained date is represented as milliseconds from the epoch.</p>
+<pre class="prettyprint">
+i18n_udate now;
+i18n_ucalendar_get_now(&amp;now);</pre></li>
+
+<li>Format a date.
+<p>To format a date, first create a Udatepg (pattern generator) that helps with creating the date pattern. Use the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_create()</span> function, providing a desired locale and a handle to the created Udatepg.</p>
+<pre class="prettyprint">
+i18n_udatepg_h udatepg;
+i18n_udatepg_create(I18N_ULOCALE_UK, &amp;udatepg);
+</pre>
+<p>To generate a date best pattern, use the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function. Prepare a draft format to define which kind of fields should 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). As arguments, pass a handle to the date pattern generator, a format draft, the length of the draft (-1 if zero-terminated), a buffer for the generated pattern, the size of the buffer, and a variable to store the actual size of the generated pattern.</p>
+<pre class="prettyprint">
+int pattern_len;
+i18n_uchar format[64];
+i18n_ustring_copy_ua_n(format, &quot;EEEdMMMyyyyHHmmssz&quot;, 64);
+i18n_uchar best_pattern[64];
+i18n_udatepg_get_best_pattern(udatepg, format, 64, best_pattern, 64, &amp;pattern_len);
+</pre>
+<p>To create a date format, use the <span style="font-family: Courier New,Courier,monospace">i18n_udate_create()</span> function. Specify the style to format time, the style to format date (from the <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_style_e</span> enumeration), the desired locale, the desired time zone name, the length of the time zone name, a date pattern to use, the length of the pattern, and a handle to the created date format).</p>
+<pre class="prettyprint">
+i18n_udate_format_h date_format;
+i18n_ustring_copy_ua_n(timezone, &quot;Asia/Seoul&quot;, 17);
+i18n_udate_create(I18N_UDATE_FULL, I18N_UDATE_FULL, I18N_ULOCALE_UK, timezone, -1, best_pattern, -1, &amp;date_format);
+</pre>
+<p>To obtain a well-formatted Ustring with a specified date, use the <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_date()</span> function. The arguments are a handle to the date format, the date in milliseconds from the epoch, a buffer for a result, the size of the destination buffer, an optional handle to a UFieldPosition structure to get the positions of the fields, and a variable to store the actual size of the obtained Ustring.</p>
+<pre class="prettyprint">
+i18n_uchar date_result[64];
+int date_len;
+i18n_udate_format_date(date_format, now, date_result, 64, NULL, &amp;date_len);
+</pre></li>
+
+<li>Destroy the Ucalendar, Udatepg, and Udate.
+<p>When you finish using the created Ucalendar, Udatepg and Udate, destroy them using the  <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_destroy()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_destroy()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_udate_destroy()</span> functions.</p>
+<pre class="prettyprint">
+i18n_ucalendar_destroy(ucalendar);
+i18n_udatepg_destroy(udatepg);
+i18n_udate_destroy(date_format);
+</pre></li>
+</ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="locales" name="locales" class="items-tit-h2">Managing Locales</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To manage the features of a specific geographical, political, or cultural region:</p>
+
+<ol>
+<li><p>To use the locale-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">Ulocale</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;utils_i18n.h&gt;
+</pre></li>
+<li>To manage locale information:
+<ul class="ul">
+<li>To get the language associated with a locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function. Provide the locale symbol (such as &quot;en_US&quot; or &quot;ko_KR&quot; - the supported locales are defined in the API as <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_*</span>), a buffer to the language code, the size of the buffer, and a variable to store the actual length of the language code.
+<pre class="prettyprint">
+char language[64];
+int lang_len;
+i18n_ulocale_get_language(I18N_ULOCALE_GERMANY, language, 64, &amp;lang_len);
+</pre></li>
+
+<li>To get a full name for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> function. The arguments are a locale to get the full name, a locale to localize the name (specify the language of the obtained name), a buffer for the name, the size of the buffer, and a variable to store the actual size of the name.
+<pre class="prettyprint">
+i18n_uchar name[64];
+int name_len;
+i18n_ulocale_get_display_name(I18N_ULOCALE_CANADA_FRENCH, I18N_ULOCALE_GERMANY, name, 64, &amp;name_len);
+</pre>
+<p>In this example, the name of the &quot;fr_CA&quot; locale is obtained in German.</p></li>
+
+<li>To get the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_default()</span> function.
+<pre class="prettyprint">
+char *locale;
+i18n_ulocale_get_default(&amp;locale);
+</pre>
+<p>To set the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_set_default()</span> function.</p>
+<pre class="prettyprint">
+i18n_ulocale_set_default(I18N_ULOCALE_KOREA);</pre></li></ul></li>
+</ol>
+                       </div>
+               </li>                   
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="numbers" name="numbers" class="items-tit-h2">Managing Numbers</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <p>To format and parse numbers for a locale:</p>
+<ol>
+<li><p>To use the number-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">Unumber</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;utils_i18n.h&gt;
+</pre></li>
+<li>Create a number format.
+<p>To start using the Unumber module, create a number format using the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_create()</span> function. Specify its arguments, which are the type of the number format (such as decimal, currency, or scientific), the format pattern (only for decimal and rule-based types), the length of the format pattern, a locale identifier (<span style="font-family: Courier New,Courier,monospace">NULL</span> for default), an optional pointer to a UParseError struct, and a handle to the created number format.</p>
+<pre class="prettyprint">
+i18n_unumber_format_h num_format;
+i18n_unumber_create(I18N_UNUMBER_CURRENCY, NULL, -1, I18N_ULOCALE_JAPAN, NULL, &amp;num_format);</pre></li>
+
+<li>Get a symbol associated with the number format.
+<p>To get a symbol associated with the created number format, use the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_get_symbol()</span> function. The parameters are the number format, the symbol to get (see the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_symbol_e</span> enumeration in documentation), the destination buffer, the size of the buffer, a variable to store the length of the symbol.</p>
+<pre class="prettyprint">
+i18n_uchar buffer[64];
+int len;
+i18n_unumber_get_symbol(num_format, I18N_UNUMBER_INTL_CURRENCY_SYMBOL, buffer, 64, &amp;len);</pre></li>
+
+<li>Destroy the number format.
+<p>When you finish using the number format, destroy it with the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_destroy()</span> function.</p>
+<pre class="prettyprint">i18n_unumber_destroy(num_format);</pre></li>
+</ol>
+                       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e7d7381
--- /dev/null
+++ b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
@@ -0,0 +1,680 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Sqlite: Managing the SQL Database</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Database</a></li>
+                       <li><a class="opensection" href="#store">Storing Encrypted Data</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite API</a></li>
+               </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sqlite: Managing the SQL Database</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how 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 located within the <a href="../../../../org.tizen.gettingstarted/html/details/tizen_apis.htm#layout">native API layout</a>.</p>
+
+<h2>Warm-up</h2> 
+<p>Become familiar with the basics of the Sqlite API by learning about:</p> 
+       <ul>
+               <li><a class="opensection" href="#init">Initializing the Database</a>
+               <p>Initialize the database for use.</p></li>
+               <li><a class="opensection" href="#store">Storing Encrypted Data</a>
+               <p>Store AES encrypted data in the SQL database.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Initialize external open source libraries:</p>
+
+<ol><li><p>To operate on an SQL database provided by SQLite:</p>
+<ol>
+       <li>Configure the database interface <span style="font-family: Courier New,Courier,monospace">sqlite3_config</span> (<span style="font-family: Courier New,Courier,monospace">SQLITE_CONFIG_URI, 1</span>). It allows setting the path to the database using URI.</li>
+       <li>Initialize the interface with the <span style="font-family: Courier New,Courier,monospace">sqlite3_initialize()</span> function.</li>
+       <li>Open database. If it is not configured in other way, <span style="font-family: Courier New,Courier,monospace">sqlite3_open(&quot;file:/opt/usr/media/Documents/test.db&quot;, &amp;db)</span> creates a new database file, if the URI points to non-existing one. The handle to the database is stored in a database variable.</li>
+       <li>Create a table, this step is described later.</li>
+</ol></li>
+
+<li><p>To operate with OpenSSL AES, salt and initial vectors are needed. Those are auxiliary variables, which are used to generate a cryptographic key:</p>
+<ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace">RAND_bytes()</span> generates a random chain of bytes.</li>
+       <li>An additional character is appended after the last character of a chain to point the end of the salt[8]=0x00 variable.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">PrepareToSQL()</span> removes some of the SQL special characters from the chain to make it possible to insert it to the database.</li>
+</ul></li>
+<li><p>Include the required headers:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;stdio.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;string.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;time.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;stdint.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;stdlib.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;sqlite3.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;openssl/aes.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;openssl/crypto.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;openssl/rand.h&gt;</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">#include &lt;openssl/evp.h&gt;</span></li>
+</ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">time.h</span> is obtained to create an example message to encrypt and store.</p></li></ol>
+
+<p>This scenario is only a draft 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>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">While operating with real data, make sure that you fulfill all security requirements. Code shown in this tutorial demonstrates only how to use libraries APIs on Tizen but not how to perform fully secure encryption.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+
+<pre class="prettyprint">
+#define BUFFER 300 // Buffer size, used in functions
+const int key_len = 256; // AES key length
+
+static const unsigned char password[] = {&quot;DummyPassword&quot;}; // Password to generate key
+       
+sqlite3 *db; // Database handle
+
+unsigned char salt[9]; // Encryption salt
+unsigned char iv[17]; // Encryption initial vector
+  
+char *hellomsg = {&quot;Hello Tizen! SQLite OpenSSL&quot;};
+char text[BUFFER];
+</pre>
+
+<pre class="prettyprint">
+time_t rawtime;
+struct tm *timeinfo;
+
+time(&amp;rawtime);
+timeinfo = localtime(&amp;rawtime);
+sprintf(text, &quot;%s %s&quot;, hellomsg, asctime(timeinfo));
+
+sqlite3_shutdown();
+
+sqlite3_config(SQLITE_CONFIG_URI, 1);
+
+sqlite3_initialize();
+
+char* resource = app_get_data_path();
+int siz = strlen(resource)+10;
+
+char* path = malloc(sizeof(char)*siz);
+
+strncat(path, resource, siz);
+strncat(path, &quot;test.db&quot;, siz);
+
+memset(path, 0, siz);
+
+sqlite3_open(path, &amp;db);
+
+free(path);
+
+CreateTable();
+
+RAND_bytes(salt, 8);
+RAND_bytes(iv, 16);
+
+salt[8]=0x00;
+iv[16]=0x00;
+
+PrepareToSQL(salt);
+PrepareToSQL(iv);
+</pre>
+<p>To create a table, an SQL query has to be prepared. The <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function executes the query in the defined database.</p>
+
+<p>An SQL query:</p>
+<pre class="prettyprint">
+CREATE TABLE IF NOT EXISTS EncryptedData(TEXT NOT 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;ENCRYPTED INT NOT 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;SALT TEXT NOT 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;IV TEXT NOT 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;PART 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;&nbsp;&nbsp;&nbsp;&nbsp;KEY INTEGER PRIMARY KEY);
+</pre>
+
+<p>A return message is passed to the callback function as an array of strings. A database is created only if it does not exist already. The created database name is EncryptedData, and it contains the following fields:</p>
+<ol>
+<li>DATA</li>
+<li>ENCRYPTED</li>
+<li>SALT</li>
+<li>IV</li>
+<li>PART</li>
+<li>KEY</li>
+</ol>
+
+<pre class="prettyprint">
+static int CreateTable()
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char *ErrMsg;
+&nbsp;&nbsp;&nbsp;char *sql = &quot;CREATE TABLE IF NOT EXISTS EncryptedData(&quot;  \
+&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;&quot;ENCRYPTED  INT  NOT NULL,&quot;\
+&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;&quot;IV  TEXT  NOT NULL,&quot; \
+&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;&quot;KEY  INTEGER  PRIMARY KEY);&quot;;
+
+&nbsp;&nbsp;&nbsp;sqlite3_exec(db,sql, callback, 0, &amp;ErrMsg);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+ 
+
+<p>The string delimiting characters are removed. In a real implementation, replace some more characters, such as the comment sequence.</p>
+<pre class="prettyprint">
+void PrepareToSQL(unsigned char* msg)
+{
+&nbsp;&nbsp;&nbsp;int i=0;
+&nbsp;&nbsp;&nbsp;while(msg[i]!=0x00)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (msg[i]==&#39;\&#39;&#39;)msg[i]=&#39;a&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (msg[i]==&#39;\&quot;&#39;)msg[i]=&#39;b&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++i;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="store" name="store" class="items-tit-h2">Storing Encrypted Data</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This scenario shows how to:</p>
+<ul class="ul">
+<li>Encrypt a message with OpenSSL</li>
+<li>Prepare it to store in the database with Base64</li>
+<li>Store in the SQLite database</li>
+<li>Get the database content</li>
+<li>Encrypt the message</li>
+</ul>
+
+<p>To store encrypted data:</p>
+<ol>
+       <li>Store a short message.
+       <p>OpenSSL AES_Encrypt allows encrypting up to 16 characters at once. Adding a short message (length&lt;=16 characters) is divided in 2 steps:</p>
+       <ol>
+               <li>Encrypt plain text <span style="font-family: Courier New,Courier,monospace">EncryptMsg()</span>.</li>
+               <li>Execute database insertion <span style="font-family: Courier New,Courier,monospace">InsertRecord()</span>.</li>
+       </ol>
+       <pre class="prettyprint">
+char *ShortMsg = &quot;Short Msg.&quot;;
+EncryptMsg(ShortMsg, decrypted_out, password, salt, iv);
+InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
+</pre>
+       </li>
+       
+       <li>Encrypt.
+       <ol>
+               <li>Generate a string for key generation from password and salt using <span style="font-family: Courier New,Courier,monospace">PKCS5_PBKDF2_HMAC_SHA1()</span>. Also, an initial vector can be used in different hash functions. In this case, only the first byte of the initial vector is used as an iteration variable for a hash algorithm.</li>
+               <li>Generate the encryption key using the <span style="font-family: Courier New,Courier,monospace">AES_set_encrypt_key()</span> function. A key len defines the AES key length. Check the actual recommended length and encoding type before use. This tutorial uses AES 256, which is defined in the initialization section.</li>
+               <li>Encrypt the data.</li>
+               <li>Encode Base64. Data is encoded to make it safe to insert it to the database. Base 64 does not contain any special characters. Encoding and decoding functions are listed at the end of the tutorial.</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, unsigned char *localsalt, unsigned char *vector)
+{
+&nbsp;&nbsp;&nbsp;AES_KEY encryption_key;
+&nbsp;&nbsp;&nbsp;int iter = (int)vector[0];
+&nbsp;&nbsp;&nbsp;unsigned char key[key_len+1];
+&nbsp;&nbsp;&nbsp;char *msgbuff;
+&nbsp;&nbsp;&nbsp;unsigned char buf[BUFFER];
+&nbsp;&nbsp;&nbsp;unsigned int retlen;
+&nbsp;&nbsp;&nbsp;int x;
+
+&nbsp;&nbsp;&nbsp;memset(buf,0x00,BUFFER);
+
+&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);
+
+
+&nbsp;&nbsp;&nbsp;AES_set_encrypt_key(key, key_len, &amp;encryption_key);
+&nbsp;&nbsp;&nbsp;AES_encrypt((unsigned char *)in, (unsigned char *)buf, &amp;encryption_key);
+
+&nbsp;&nbsp;&nbsp;for (x=0; buf[x]!=0x00; x++);
+
+&nbsp;&nbsp;&nbsp;msgbuff = base64_encode(buf, x, &amp;retlen);
+
+&nbsp;&nbsp;&nbsp;memcpy(buf, msgbuff, retlen);
+&nbsp;&nbsp;&nbsp;buf[retlen+1]=0x00;
+&nbsp;&nbsp;&nbsp;free(msgbuff);
+   
+&nbsp;&nbsp;&nbsp;memcpy(out, buf, retlen+1);
+
+&nbsp;&nbsp;&nbsp;for (x=0; buf[x]!=0x00; x++);
+
+&nbsp;&nbsp;&nbsp;return x;
+}
+</pre>
+</li>
+ 
+       <li>Insert a record into the database.
+       <p>To insert data to the database, use the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function. A query is prepared with common C functions. The encrypted variable is stored in the database and indicates whether the DATA field in the database is encrypted.</p>
+       <pre class="prettyprint">
+static int InsertRecord(unsigned char *msg, int encrypted,
+&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 part, int len)
+{
+&nbsp;&nbsp;&nbsp;char sqlbuff[BUFFER]; 
+&nbsp;&nbsp;&nbsp;snprintf(sqlbuff, BUFFER, &quot;INSERT INTO EncryptedData
+&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;msg, encrypted, salt, iv, part);
+
+&nbsp;&nbsp;&nbsp;sqlite3_exec(db, sqlbuff, callback, 0, &amp;ErrMsg);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+       </li>
+
+       <li>Store long messages.
+       <p>Any message longer than 16 characters has to be split into shorter parts. In this scenario, each part is stored in its own record to simplify the decoding procedure.</p>
+       <pre class="prettyprint">ret = InsertMessage((unsigned char *)text);    
+</pre>
+       
+       <p>A message is divided into blocks 16 characters long. Each block is tagged by its own number with a <span style="font-family: Courier New,Courier,monospace">parts</span> variable. A tag is stored in the database in the PART field.</p>
+       <pre class="prettyprint">
+static int InsertMessage(unsigned char* text)
+{
+&nbsp;&nbsp;&nbsp;unsigned char encrypted_out[BUFFER];
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int len, retlen, parts=0, pos;
+&nbsp;&nbsp;&nbsp;char membuf[17];
+
+&nbsp;&nbsp;&nbsp;for (len = 0; text[len]!=0x00; len++);
+
+&nbsp;&nbsp;&nbsp;for (pos = 0; (len-pos)&gt;16; pos+=16)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(membuf, &amp;text[pos], 16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;membuf[16] = 0x00;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EncryptMsg((char *)membuf, encrypted_out, password, salt, iv);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; encrypted_out[x]!=0x00; x++);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;InsertRecord(encrypted_out, 1, parts,x);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts++;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (len-pos&gt;0)
+&nbsp;&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;encrypted_out, password, salt, iv);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;InsertRecord(encrypted_out, 1, parts, retlen);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+       </li>
+       
+       <li>List the database content.
+       <p>After previous actions, the database contains AES encrypted content, stored in a Base64 notation.</p>
+       <pre class="prettyprint">
+ShowRecords();
+</pre>
+<p>Example database content:</p>
+<pre class="prettyprint">
+0: DATA = xPRnJYwvQTc4VJKkW4EroQ==  
+1: DATA = EZI+uOGxcnUseJnbH57/Bg== 
+</pre>
+
+<p>To list all records, use the <span style="font-family: Courier New,Courier,monospace">SELECT * FROM EncryptedData</span> query. The callback function is invoked for each record returned by SQLite. SQLite allows passing user data to the callback function. User data is the 4th parameter of <span style="font-family: Courier New,Courier,monospace">sqlite3_exec(..., ..., ..., &amp;counter, ...)</span>.</p>
+<pre class="prettyprint">
+static void ShowRecords()
+{
+&nbsp;&nbsp;&nbsp;char *sql = &quot;select * from EncryptedData&quot;;
+&nbsp;&nbsp;&nbsp;int counter = 0, ret = 0;
+&nbsp;&nbsp;&nbsp;char *ErrMsg;
+
+&nbsp;&nbsp;&nbsp;sqlite3_exec(db, sql, callback, &amp;counter, &amp;ErrMsg);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+<p>Callback simply prints an obtained record. The record is passed in the form of a few arrays of strings. <span style="font-family: Courier New,Courier,monospace">Argv</span> contains the column content, <span style="font-family: Courier New,Courier,monospace">azColName</span> contains the column name. <span style="font-family: Courier New,Courier,monospace">Argc</span> is the number of columns. Counter is user data. Here it is used to indicate the record number in a row (not an SQL primary key) while listing. If the content of any column is empty, the <span style="font-family: Courier New,Courier,monospace">NULL</span> string is printed.</p>
+<pre class="prettyprint">
+static int callback(void *counter, int argc, char **argv, char **azColName)
+{
+&nbsp;&nbsp;&nbsp;int *localcounter = (int *)counter;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-%d: &quot;, *localcounter);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i&lt;argc; i++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s = %s | &quot;, azColName[i], argv[i] ? argv[i] : &quot;NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;(*localcounter)++;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>Decrypt.
+<p>All encrypted records are selected from database, and they are decrypted and listed.</p>
+<pre class="prettyprint">DecryptRecords();</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">SELECT * FROM EncryptedData</span> query where <span style="font-family: Courier New,Courier,monospace">ENCRYPTED=&#39;1&#39;</span> lists all encrypted records. The <span style="font-family: Courier New,Courier,monospace">callbackdecrypt()</span> function is invoked for each record returned by the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function. In case of an error, the SQLite API requires releasing error message memory with the <span style="font-family: Courier New,Courier,monospace">sqlite3_free()</span> function.</p>
+<pre class="prettyprint">
+static void DecryptRecords()
+{
+&nbsp;&nbsp;&nbsp;char *sql = &quot;select * from EncryptedData where ENCRYPTED=&#39;1&#39;&quot;;
+&nbsp;&nbsp;&nbsp;int counter = 0;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;char *ErrMsg;
+
+&nbsp;&nbsp;&nbsp;ret = sqlite3_exec(db, sql, callbackdecrypt, &amp;counter, &amp;ErrMsg);
+&nbsp;&nbsp;&nbsp;if (ret)
+&nbsp;&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;sqlite3_free(ErrMsg);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The callback function is similar to the function used to list records. There is an action added for the <span style="font-family: Courier New,Courier,monospace">argv[ i ] &amp;&amp; i==0</span> case. It means that if a column is not empty and the column is DATA, you must perform further actions. From an SQL query, we know that the DATA content is encrypted.</p>
+
+<p>To decrypt the message:</p>
+<ul class="ul">
+<li>Data is decoded from Base64</li>
+<li>Delimiting character is added</li>
+<li><span style="font-family: Courier New,Courier,monospace">DecryptMsg()</span> is called for decryption</li>
+<li>Decrypted data is listed</li>
+</ul>
+<pre class="prettyprint">
+static int callbackdecrypt(void *counter, int argc, char **argv, char **azColName)
+{
+&nbsp;&nbsp;&nbsp;unsigned char decrypted_out[BUFFER];
+&nbsp;&nbsp;&nbsp;int *localcounter = (int *)counter;
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;unsigned int olen;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-%d: &quot;, *localcounter);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i&lt;argc; i++)
+&nbsp;&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;&nbsp;&nbsp;&nbsp;unsigned char *basebuffer = base64_decode(argv[i], strlen(argv[i]), &amp;olen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *decryptbuffer = malloc(sizeof(char)* olen +1);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(decryptbuffer, 0x00, olen+1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(decryptbuffer, basebuffer, olen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decryptbuffer[olen] = 0x00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(basebuffer);
+
+&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;password, (unsigned char *)argv[2], (unsigned char *)argv[3]);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(decryptbuffer);
+
+&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;(char*)decrypted_out);
+       
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s = %s | &quot;, azColName[i], argv[i] ? argv[i] : &quot;NULL&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;(*localcounter)++;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+<p>The decryption routine is similar to encryption:</p>
+<pre class="prettyprint">
+static int DecryptMsg(unsigned char* in, unsigned char * out, const unsigned char* password, unsigned char* localsalt, unsigned char* vector)
+{
+&nbsp;&nbsp;&nbsp;AES_KEY decryption_key;
+&nbsp;&nbsp;&nbsp;int iter = (int)vector[0];
+&nbsp;&nbsp;&nbsp;unsigned char key[key_len+1];
+&nbsp;&nbsp;&nbsp;int x;
+
+&nbsp;&nbsp;&nbsp;memset(out, 0x00, BUFFER);
+
+&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;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;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;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;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;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;key);
+
+&nbsp;&nbsp;&nbsp;AES_set_decrypt_key(key, key_len, &amp;decryption_key);
+&nbsp;&nbsp;&nbsp;AES_decrypt((unsigned char *)in, out, &amp;decryption_key);
+
+&nbsp;&nbsp;&nbsp;for (x = 0; out[x]!=0x00; x++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x++;
+
+&nbsp;&nbsp;&nbsp;return x;
+}
+</pre>
+</li>
+
+<li>Clean up.
+<p>Despite the resources allocated with the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function, the SQLite library has to be closed properly when not needed anymore:</p>
+<pre class="prettyprint">
+base64_cleanup();
+sqlite3_close(db);
+sqlite3_shutdown();
+</pre>
+</li>
+<li>Base64 
+<p>The following example shows the Base 64 encoding and decoding interface:</p>
+<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;&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;&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;&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;&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;&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;&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;&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;};
+static char *decoding_table = NULL;
+static int mod_table[] = {0, 2, 1};
+
+void build_decoding_table()
+{
+&nbsp;&nbsp;&nbsp;decoding_table = malloc(256);
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;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;*output_length = 4 * ((input_length + 2) / 3);
+
+&nbsp;&nbsp;&nbsp;char *encoded_data = malloc(*output_length);
+&nbsp;&nbsp;&nbsp;if (encoded_data == NULL) return NULL;
+
+&nbsp;&nbsp;&nbsp;int i, j;
+&nbsp;&nbsp;&nbsp;for (i = 0, j = 0; i &lt; input_length;)
+&nbsp;&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;uint32_t octet_b = i &lt; input_length ? (unsigned char)data[i++] : 0;
+&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;uint32_t triple = (octet_a &lt;&lt; 0x10) + (octet_b &lt;&lt; 0x08) + octet_c;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 3 * 6) &amp; 0x3F];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 2 * 6) &amp; 0x3F];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 1 * 6) &amp; 0x3F];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 0 * 6) &amp; 0x3F];
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; mod_table[input_length % 3]; i++)encoded_data[*output_length - 1 - i] = &#39;=&#39;;
+
+&nbsp;&nbsp;&nbsp;return encoded_data;
+}
+
+unsigned char *base64_decode(const char *data, size_t input_length, size_t *output_length)
+{
+&nbsp;&nbsp;&nbsp;if (decoding_table == NULL) build_decoding_table();
+
+&nbsp;&nbsp;&nbsp;if (input_length % 4 != 0) return NULL;
+
+&nbsp;&nbsp;&nbsp;*output_length = input_length / 4 * 3;
+&nbsp;&nbsp;&nbsp;if (data[input_length - 1] == &#39;=&#39;) (*output_length)--;
+&nbsp;&nbsp;&nbsp;if (data[input_length - 2] == &#39;=&#39;) (*output_length)--;
+
+&nbsp;&nbsp;&nbsp;unsigned char *decoded_data = malloc(*output_length);
+&nbsp;&nbsp;&nbsp;if (decoded_data == NULL) return NULL;
+
+&nbsp;&nbsp;&nbsp;int i, j;
+
+&nbsp;&nbsp;&nbsp;for (i = 0, j = 0; i &lt; input_length;)
+&nbsp;&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;uint32_t sextet_b = data[i] == &#39;=&#39; ? 0 &amp; i++ : decoding_table[(int)data[i++]];
+&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;uint32_t sextet_d = data[i] == &#39;=&#39; ? 0 &amp; i++ : decoding_table[(int)data[i++]];
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t triple = (sextet_a &lt;&lt; 3 * 6)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (sextet_b &lt;&lt; 2 * 6)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (sextet_c &lt;&lt; 1 * 6)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (sextet_d &lt;&lt; 0 * 6);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length) decoded_data[j++] = (triple &gt;&gt; 2 * 8) &amp; 0xFF;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length) decoded_data[j++] = (triple &gt;&gt; 1 * 8) &amp; 0xFF;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length) decoded_data[j++] = (triple &gt;&gt; 0 * 8) &amp; 0xFF;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return decoded_data;
+}
+
+void base64_cleanup() 
+{
+&nbsp;&nbsp;&nbsp;free(decoding_table);
+}
+</pre>
+</li>
+
+<li>Main function source code:
+
+<pre class="prettyprint">
+int OpenSQL_AES_example_1(void)
+{
+&nbsp;&nbsp;&nbsp;unsigned char decrypted_out[BUFFER];
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;if (init_err)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Initial error\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Insert long message
+&nbsp;&nbsp;&nbsp;ret = InsertMessage((unsigned char *)text);
+&nbsp;&nbsp;&nbsp;if (ret)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Insert ENCRYPTED MessageError\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Insert message up to 16 characters
+&nbsp;&nbsp;&nbsp;char *ShortMsg = &quot;Short Msg.&quot;;
+&nbsp;&nbsp;&nbsp;EncryptMsg(ShortMsg, decrypted_out, password, salt, iv);
+&nbsp;&nbsp;&nbsp;InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
+&nbsp;&nbsp;&nbsp;if (ret)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Insert ENCRYPTED MessageError\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Show raw database
+&nbsp;&nbsp;&nbsp;ShowRecords();
+
+&nbsp;&nbsp;&nbsp;// Show decrypted database
+&nbsp;&nbsp;&nbsp;DecryptRecords();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+</ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
new file mode 100644 (file)
index 0000000..876cfb6
--- /dev/null
+++ b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Content: Getting and Handling Media Content</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API</a></li>
+               
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Content: Getting and Handling Media Content</h1>
+
+ <p>The content tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+  <ul>
+       <li><a href="download_tutorial_n.htm">Download: Downloading Content from the Internet</a> <p>Demonstrates how you can download content asynchronously from a given URL into the device storage.</p></li>
+       <li><a href="media_content_tutorial_n.htm">Media Content: Using Album, Bookmark, Playlist, and Other Media Content</a> 
+       <p>Demonstrates how you can manage media content.</p></li>
+       <li><a href="mime_type_tutorial_n.htm">MIME Type: Mapping MIME Types to and from File Extensions</a> <p>Demonstrates how you can map MIME types to file extensions.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/content/download_tutorial_n.htm b/org.tizen.tutorials/html/native/content/download_tutorial_n.htm
new file mode 100644 (file)
index 0000000..c87c597
--- /dev/null
+++ b/org.tizen.tutorials/html/native/content/download_tutorial_n.htm
@@ -0,0 +1,246 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Download: Downloading Content from the Internet</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#download">Download Content from a URL</a></li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/content/download_n.htm">Download Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Download: Downloading Content from the Internet</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can download content asynchronously from a given URL into the device storage.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Download API basics by learning about:</p>
+
+<ul>
+       <li><a class="opensection" href="#download">Downloading Content from a URL</a>
+        <p>Receive a download ID, configure a download URL and destination, and launch a download process.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="download" name="download" class="items-tit-h2">Downloading Content from a URL</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+
+<p>To download content:</p>
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;download.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;download.h&gt;
+</pre></li>
+<li>Create the download handle.
+<p>The downloading library needs no initialization prior to the API usage. To download content from the internet, the download ID must be assigned. The URL and destination have to be set before the downloading process can be started.</p>
+<p>Before starting any downloading, assign the download ID with the <span style="font-family: Courier New,Courier,monospace">download_create()</span> function:</p>
+
+<pre class="prettyprint">
+download_error_e error;
+int download_id;
+       
+error = download_create(&amp;download_id);
+</pre>
+
+<p>The download ID functions as the handle that is used to manage the download.</p></li>
+
+
+<li>Define and set download callbacks.
+<p>Data specified by the URL is downloaded asynchronously and each download-related event (start, pause, stop, finish, or progress update) is propagated to the application through a callback.</p>
+<p>Register the progress callback with the <span style="font-family: Courier New,Courier,monospace;">download_set_progress_cb()</span> function, and the state change callback with the <span style="font-family: Courier New,Courier,monospace;">download_set_state_changed_cb()</span> function.</p>
+
+<pre class="prettyprint">error = download_set_state_changed_cb(download_id, state_changed_cb, NULL);
+
+error = download_set_progress_cb(download_id, progress_cb, &amp;content_size);
+</pre>
+<p>The state change callback is called every time the download state changes, and the progress callback is called every time the download progress changes.</p></li>
+
+<li>Set the download URL and other details.
+<p>Before the download can be started, it is necessary to set the URL source path for the download:</p>
+<pre class="prettyprint">
+error = download_set_url(download_id, &quot;http://tizen.org&quot;;
+</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">
+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;);
+</pre></li>
+
+<li>Set the download options:
+<ul class="ul"><li>Auto download
+
+<p>To set an automatic download, call the <span style="font-family: Courier New,Courier,monospace;">download_set_auto_download()</span> function passing the download handle and setting the second parameter to <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
+<p>This operation changes the download manager state so that it continues downloading even after the client process is terminated. Set the notification download option when using this feature, to allow the user to receive the download result when the client process is not alive. </p>
+
+<pre class="prettyprint">
+error = download_set_auto_download(download_id, true);
+</pre>
+</li>
+
+<li>Network type
+<p>To set the desired network type, use the <span style="font-family: Courier New,Courier,monospace;">download_set_network_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gadf73239ac2efa6d4214a03751c76c9b8">download_network_type_e</a> enumeration defines the available download network types. The default value is <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NETWORK_ALL</span>, if the client does not set any values.</p>
+
+<pre class="prettyprint">
+download_network_type_e value = 0;
+error_code = download_set_network_type (download_id, DOWNLOAD_NETWORK_ALL);
+
+error_code = download_get_network_type (download_id, &amp;value);
+</pre>
+
+</li>
+
+<li>Notifications
+<p>To set notifications with a service action, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gab2ec29afc07197987eb2b88614fac67f">download_notification_type_e</a> enumeration defines the available download network types. The default value is <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NOTIFICATION_TYPE_NONE</span>, if the client does not set any values.</p>
+<p>If the client wants to change the title or description of the notification item, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_title()</span> or <span style="font-family: Courier New,Courier,monospace;">download_set_notification_description()</span> function. If the client wants to change the action when the notification item is clicked, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_service_handle()</span> function. If the service action is not set, the default operation is the following:</p>
+<ul class="ul">
+<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 = 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, *desc = NULL;
+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 = download_get_notification_app_control(download_id, DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED, &amp;app_control);
+error = app_control_destroy(app_control);
+</pre>
+</li>
+</ul></li>
+
+<li>Control the download process.
+<p>Downloading can be started, paused, or canceled using the <span style="font-family: Courier New,Courier,monospace;">download_start()</span>, <span style="font-family: Courier New,Courier,monospace;">download_pause()</span>, or <span style="font-family: Courier New,Courier,monospace;">download_cancel()</span> function. The download ID handle is used with all these functions.</p>
+<pre class="prettyprint">
+error = download_start(download_id);
+
+error = download_pause(download_id);
+
+error = download_start(download_id);
+
+error = download_cancel(download_id);
+</pre>
+<p>To pause a download, it must be in the <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_STATE_DOWNLOADING</span> state. After pausing, the download state changes to <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_STATE_PAUSED</span>. After the download is stopped, the download state changes to <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_STATE_CANCELED</span>.</p></li>
+
+<li>Monitor the download progress.
+<p>Use the progress callback to monitor the download progress. The following example prints the number of bytes received and the total size of the file being downloaded. Since you do not know the file size at the beginning, use 0.</p>
+<ol><li>Create the download:
+<pre class="prettyprint">
+unsigned long long content_size = 0;
+
+error = download_create(&amp;download_id);</pre></li>
+<li>Register the progress callback and start the download:
+<pre class="prettyprint">
+error = download_set_progress_cb(download_id, progress_cb, &amp;content_size);
+
+error = download_start(download_id);</pre></li>
+
+<li>When the file is being downloaded, get the total content size:
+<pre class="prettyprint">
+download_state_e state = 0;
+content_size = 0;
+error = download_get_state(download_id, &amp;state);
+if (state == DOWNLOAD_STATE_DOWNLOADING) 
+{
+&nbsp;&nbsp;&nbsp;error = download_get_content_size(download_id, &amp;content_size);
+}
+</pre></li>
+<li>The received parameter of the <span style="font-family: Courier New,Courier,monospace;">progress_cb()</span> 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;dlog_print(DLOG_INFO, LOG_TAG, &quot;received: %llu of %llu&quot;, received, *((unsigned long long*)user_data));
+}</pre></li></ol></li>
+
+<li>Get error information.
+
+<p>To get the error information, use the <span style="font-family: Courier New,Courier,monospace;">download_get_error()</span> function:</p>
+<pre class="prettyprint">
+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>If the registered download is not needed anymore (the downloading is finished or has been canceled), delete it using the <span style="font-family: Courier New,Courier,monospace;">download_destroy()</span> function. In addition, unset all callback functions.</p>
+<pre class="prettyprint">
+download_unset_progress_cb(download_id);
+download_unset_state_changed_cb(download_id);    
+error = download_destroy(download_id);
+</pre></li></ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm b/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm
new file mode 100644 (file)
index 0000000..1a370a0
--- /dev/null
+++ b/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm
@@ -0,0 +1,2070 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Using Album, Bookmark, Playlist, and Other Media Content</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>                
+               <ul class="toc">
+                       <li>Media content
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#initialize_media_content">Initializing Media Content</a></li>
+                                       <li><a class="opensection" href="#folder_list">Getting the Folder List</a></li>
+                                       <li><a class="opensection" href="#item_list">Getting the Item List</a></li>
+                                       <li><a class="opensection" href="#destroy">Destroying the Handle</a></li>
+                                       <li><a class="opensection" href="#update">Receiving Update Notifications</a></li>
+                               </ul>
+                       </li>
+                       <li>Album
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_album">Initializing the Album Module</a></li>
+                                       <li><a class="opensection" href="#findingall">Finding All Albums</a></li>
+                                       <li><a class="opensection" href="#findingalbums">Finding Albums Using a Filter</a></li>
+                                       <li><a class="opensection" href="#findinginfo">Retrieving Album Content Information</a></li>
+                               </ul>
+                       </li>
+                       <li>Bookmark
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_bookmark">Initializing Bookmarks</a></li>
+                                       <li><a class="opensection" href="#inserting">Inserting a Bookmark</a></li>
+                                       <li><a class="opensection" href="#finding">Finding Bookmarks</a></li>
+                                       <li><a class="opensection" href="#reading">Reading Bookmark Information</a></li>
+                                       <li><a class="opensection" href="#removing">Removing a Bookmark</a></li>
+                               </ul>
+                       </li>
+                       <li>Filter
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_filter">Initializing a Filter</a></li>
+                                       <li><a class="opensection" href="#filter">Setting up a Filter</a></li>
+                                       <li><a class="opensection" href="#media">Using Filters to Find Media Items</a></li>
+                               </ul>
+                       </li>
+                       <li>Folder
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_media_folder">Initializing Media Folders</a></li>
+                                       <li><a class="opensection" href="#find">Finding All Media Folders</a></li>
+                                       <li><a class="opensection" href="#filter_folder">Finding Folders Using a Filter</a></li>
+                                       <li><a class="opensection" href="#folder_content">Finding Folder Content</a></li>
+                               </ul>
+                       </li>
+                       <li>Media information 
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#initialize_media_info">Initializing Media Information</a></li>
+                                       <li><a class="opensection" href="#info">Using Media Information</a></li>
+                                       <li><a class="opensection" href="#insert">Inserting Media in the Database</a></li>
+                                       <li><a class="opensection" href="#scan">Inserting Media in a Folder</a></li>
+                               </ul>
+                       </li>
+                       <li>Playlist 
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_playlist">Initializing a Playlist</a></li>
+                                       <li><a class="opensection" href="#manage">Managing Playlists</a></li>
+                               </ul>  
+                       </li>
+                       <li>Tag
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#initialize_tag">Initializing Media Tags</a></li>
+                                       <li><a class="opensection" href="#tag_list">Getting the Tag List</a></li>
+                               </ul>
+                       </li>
+                       <li>Advanced media content
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#find_groups">Finding Media Item Groups</a></li>       
+                                       <li><a class="opensection" href="#filter_groups">Finding Media Item Groups Using a Filter</a></li>
+                               </ul>
+                       </li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../org.tizen.guides/html/native/content/media_content_n.htm">Media Content Guide</a></li>
+                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Content: Using Album, Bookmark, Playlist, and Other Media Content</h1>
+  <div class="cont"><div class="static-cont">
+  
+  <p>This tutorial demonstrates how you can manage media content.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Media Content API basics by learning about:</p>
+       <ul>
+               <li>Media content
+                       <ul>
+                               <li><a class="opensection" href="#initialize_media_content">Initializing Media Content</a>
+                               <p>Initialize the database for use.</p></li>
+                               <li><a class="opensection" href="#folder_list">Getting the Folder List</a>
+                               <p>Get a folder list.</p></li>
+                               <li><a class="opensection" href="#item_list">Getting the Item List</a>
+                               <p>Get an item list.</p></li>
+                               <li><a class="opensection" href="#destroy">Destroying the Handle</a>
+                               <p>Destroy a handle.</p></li>
+                               <li><a class="opensection" href="#update">Receiving Update Notifications</a>
+                               <p>Set an update notification callback.</p></li>
+                       </ul>
+               </li>
+               <li>Album
+                       <ul>
+                               <li><a class="opensection" href="#init_album">Initializing the Album Module</a>
+                               <p>Initialize media albums for use.</p></li>
+                               <li><a class="opensection" href="#findingall">Finding All Albums</a>
+                               <p>Find information about albums available in the system.</p></li>
+                               <li><a class="opensection" href="#findingalbums">Finding Albums Using a Filter</a>
+                               <p>Find albums that satisfy a specific condition.</p></li>
+                               <li><a class="opensection" href="#findinginfo">Retrieving Album Content Information</a>
+                               <p>Retrieve information about the media items in an album.</p></li>
+                       </ul>
+               </li>
+               <li>Bookmark
+                       <ul>
+                               <li><a class="opensection" href="#init_bookmark">Initializing Bookmarks</a>
+                               <p>Initialize bookmarks for use.</p></li>
+                               <li><a class="opensection" href="#inserting">Inserting a Bookmark</a>
+                               <p>Set a bookmark for a video file.</p></li>
+                               <li><a class="opensection" href="#finding">Finding Bookmarks</a>
+                               <p>Find bookmarks using a filter.</p></li>
+                               <li><a class="opensection" href="#reading">Reading Bookmark Information</a>
+                               <p>Read the details of a given bookmark.</p></li>
+                               <li><a class="opensection" href="#removing">Removing a Bookmark</a>
+                               <p>Remove a bookmark from a video file.</p></li>
+                       </ul>
+               </li>
+               <li>Filter
+                       <ul>
+                               <li><a class="opensection" href="#init_filter">Initializing a Filter</a>
+                               <p>Initialize filter for use.</p></li>
+
+                               <li><a class="opensection" href="#filter">Setting up a Filter</a>
+                               <p>Create a filter and set its properties.</p></li>
+
+                               <li><a class="opensection" href="#media">Using Filters to Find Media Items</a>
+                               <p>Use a filter to find media items.</p></li>
+                       </ul>
+               </li>
+               <li>Folder
+                       <ul>
+                               <li><a class="opensection" href="#init_media_folder">Initializing Media Folders</a>
+                               <p>Initialize media folders for use.</p></li>
+
+                               <li><a class="opensection" href="#find">Finding All Media Folders</a>
+                               <p>List all available media folders.</p></li>
+
+                               <li><a class="opensection" href="#filter_folder">Finding Folders Using a Filter</a>
+                               <p>Find folders satisfying a given condition, and sort the results.</p></li>
+
+                               <li><a class="opensection" href="#folder_content">Finding Folder Content</a>
+                               <p>List folder content and get information about media items in the folders.</p></li>
+                       </ul>
+               </li>
+               <li>Media information 
+                       <ul>
+                               <li><a class="opensection" href="#initialize_media_info">Initializing Media Information</a>
+                               <p>Initialize media information for use.</p></li>
+
+                               <li><a class="opensection" href="#info">Using Media Information</a>
+                               <p>Use media information.</p></li>
+
+                               <li><a class="opensection" href="#insert">Inserting Media in the Database</a>
+                               <p>Add media information in the media database.</p></li>
+
+                               <li><a class="opensection" href="#scan">Inserting Media in a Folder</a>
+                               <p>Add media information in a folder.</p></li>
+                       </ul>
+               </li>
+               <li>Playlist 
+                       <ul>
+                               <li><a class="opensection" href="#init_playlist">Initializing a Playlist</a>
+                               <p>Initialize playlists for use. </p></li>
+                               <li><a class="opensection" href="#manage">Managing Playlists</a>
+                               <p>Add playlists to the database, search them, and retrieve information about them.</p></li>
+                       </ul>  
+               </li>
+               <li>Tag
+                       <ul>
+                               <li><a class="opensection" href="#initialize_tag">Initializing Media Tags</a>
+                               <p>Initialize media tags for use.</p></li>
+                               <li><a class="opensection" href="#tag_list">Getting the Tag List</a>
+                               <p>Get information about media tags.</p></li>
+                       </ul>
+               </li>
+       </ul>
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of the Media Content API, we can now move on to more advanced tasks, including:</p>
+<ul class="ul">
+               <li>Advanced media content
+                       <ul>
+                               <li><a class="opensection" href="#find_groups">Finding Media Item Groups</a> 
+                               <p>Find all available media items grouped by their MIME type.</p></li>  
+                               <li><a class="opensection" href="#filter_groups">Finding Media Item Groups Using a Filter</a>
+                               <p>Find grouped media items filtered by name.</p>
+                               </li>
+                       </ul>
+               </li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="initialize_media_content" name="initialize_media_content" class="items-tit-h2">Initializing Media Content</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To use the media database:</p>
+<ol>
+<li><p>Functions in this module use an SQLite database to save the metadata of the media files on your device, along with the tags and bookmarks that the user sets. To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+#include &lt;glib.h&gt;
+</pre>
+<p>The example application used in the other use cases also requires the <span style="font-family: Courier New,Courier,monospace">&lt;glib.h&gt;</span> header file.</p>
+</li>
+<li>Connect to the database:
+<pre class="prettyprint">
+int ret = MEDIA_CONTENT_ERROR_NONE;
+
+ret = media_content_connect();
+if (ret == MEDIA_CONTENT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;connection is success&quot;);
+else
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;connection is failed&quot;);
+
+return ret;
+</pre></li>
+<li>
+<p>When you do not use the database anymore, disconnect from it:</p>
+<pre class="prettyprint">
+media_content_disconnect ();
+</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="folder_list" name="folder_list" class="items-tit-h2">Getting the Folder List</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To retrieve a list of folders where the media files are stored, register a callback function for each API to manage an individual item in the callback function:</p>
+
+<ol>
+<li>Register a callback function to get the folder list:
+<pre class="prettyprint">
+bool gallery_folder_list_cb(media_folder_h folder, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_folder_h new_folder = NULL;
+&nbsp;&nbsp;&nbsp;media_folder_clone(&amp;new_folder, folder);
+
+&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data; // Include glib.h for this value 
+
+&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_folder);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+<li>Get the folder list:
+<pre class="prettyprint">
+int i;
+int count;
+filter_h filter = NULL;
+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, &amp;folder_list);
+if (ret != MEDIA_CONTENT_ERROR_NONE) {
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_folder_foreach_folder_from_db failed: %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;return ret;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_folder_foreach_folder_from_db success!!&quot;);
+
+&nbsp;&nbsp;&nbsp;char *folder_id = NULL;
+&nbsp;&nbsp;&nbsp;char *folder_name = NULL;
+&nbsp;&nbsp;&nbsp;char *folder_path = NULL;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(folder_list); i++) 
+&nbsp;&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;ret = media_folder_get_folder_id(folder_handle, &amp;folder_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_name(folder_handle, &amp;folder_name);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_path(folder_handle, &amp;folder_path);
+
+&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;// Release allocated strings 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free (folder_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free (folder_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free (folder_path);
+&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_folder_get_media_count_from_db failed: %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media count [%d] : %d&quot;, i, count);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+</ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="item_list" name="item_list" class="items-tit-h2">Getting the Item List</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To retrieve the item list, use a foreach function with a previously defined callback:</p>
+
+<ol>
+<li>Create a callback function to retrieve a media item:
+<pre class="prettyprint">
+bool gallery_media_item_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
+&nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
+
+&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data; // Include glib.h for this value 
+&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li>To find media items, use the <span style="font-family: Courier New,Courier,monospace;">media_info_foreach_media_from_db()</span> function with a filter to filter and sort the results. For a detailed list of condition fields (such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_TYPE</span>) and their values (such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_TYPE_IMAGE</span> and <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_TYPE_VIDEO</span>), see the <span style="font-family: Courier New,Courier,monospace;">media_content_type.h</span> header file.
+
+<pre class="prettyprint">
+#define BUFLEN 200 
+
+// Get the item list 
+media_info_h media_handle = NULL;
+GList *all_item_list = NULL;
+
+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);
+ret = media_filter_set_condition(filter, buf, collate_type);
+if (ret != MEDIA_CONTENT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set condition&quot;);
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+ret = media_filter_set_order(filter, order_type, MEDIA_DISPLAY_NAME, collate_type);
+if (ret != MEDIA_CONTENT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set order&quot;);
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+ret = media_info_foreach_media_from_db(filter, gallery_media_item_cb, &amp;all_item_list);
+</pre></li>
+</ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="destroy" name="destroy" class="items-tit-h2">Destroying the Handle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To destroy the handle received from each function (to release resources):</p>
+
+<pre class="prettyprint">
+// Remove the folder list 
+if (folder_list) 
+{
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(folder_list); i++) 
+&nbsp;&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;media_folder_destroy(folder_handle);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;g_list_free(folder_list);
+}
+
+// Remove all items list 
+if (all_item_list) 
+{
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(all_item_list); i++) 
+&nbsp;&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;ret = media_info_destroy(media_handle);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;g_list_free(all_item_list);
+}
+
+// Destroy handle of the filter
+media_filter_destroy(filter);
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update" name="update" class="items-tit-h2">Receiving Update Notifications</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<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>
+<li>Define the database update callback function:
+<pre class="prettyprint">
+void _noti_cb(media_content_error_e error, int pid,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_type_e update_type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_type_e media_type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *uuid, char *path, char *mime_type, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (error == MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&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;&nbsp;&nbsp;else 
+&nbsp;&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;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti from PID(%d)\n&quot;, pid);
+
+&nbsp;&nbsp;&nbsp;if (update_item == MEDIA_ITEM_FILE) 
+&nbsp;&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;} else if (update_item == MEDIA_ITEM_DIRECTORY) 
+&nbsp;&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;&nbsp;&nbsp;if (update_type == MEDIA_CONTENT_INSERT) 
+&nbsp;&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;&nbsp;&nbsp;else if (update_type == MEDIA_CONTENT_DELETE) 
+&nbsp;&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;&nbsp;&nbsp;else if (update_type == MEDIA_CONTENT_UPDATE) 
+&nbsp;&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;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;content type : %d\n&quot;, media_type);
+
+&nbsp;&nbsp;&nbsp;if (path) dlog_print(DLOG_DEBUG, LOG_TAG, &quot;path : %s\n&quot;, path);
+&nbsp;&nbsp;&nbsp;if (uuid) dlog_print(DLOG_DEBUG, LOG_TAG, &quot;uuid : %s\n&quot;, uuid);
+&nbsp;&nbsp;&nbsp;if (mime_type) dlog_print(DLOG_DEBUG, LOG_TAG, &quot;mime_type : %s\n&quot;, mime_type);
+&nbsp;&nbsp;&nbsp;if (user_data) dlog_print(DLOG_DEBUG, LOG_TAG, &quot;String : %s\n&quot;, (char *)user_data);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre></li>
+
+<li>Register the callback function:
+<pre class="prettyprint">
+int ret = MEDIA_CONTENT_ERROR_NONE;
+
+// Subscribe notifications 
+char *user_str = strdup(&quot;hi&quot;);
+media_content_set_db_updated_cb(_noti_cb, (void*)user_str);
+</pre></li>
+
+<li>When you no longer want to receive notifications, unregister the database update callback function:
+<pre class="prettyprint">
+media_content_unset_db_updated_cb();
+</pre></li>
+</ol>
+
+       </div>
+               </li>   
+       
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_album" name="init_album" class="items-tit-h2">Initializing the Album Module</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__ALBUM__MODULE.html">Media Album</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre>                 
+       
+<p>Before using the Album module, open a connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace;">media_content_connect()</span> function:</p>
+       
+<pre class="prettyprint">media_content_connect();</pre>
+
+<p>When the module is no longer needed, close the connection:</p>
+
+<pre class="prettyprint">media_content_disconnect();</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="findingall" name="findingall" class="items-tit-h2">Finding All Albums</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To find all albums in the system and access information about the album content:</p>
+<ol><li>Find all albums.
+<p>Call the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_count_from_db()</span> and <span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> functions to receive information about albums. Set the first parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span> to retrieve all albums and perform no filtering.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">media_album_list_cb()</span>callback is called for each found album. </p>
+
+<pre class="prettyprint">media_album_foreach_album_from_db(NULL, media_album_list_cb, NULL);</pre>
+
+<p>Note that the function is synchronous. The call blocks until the callback is called for all albums or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p></li>
+
+<li>Retrieve album information.
+
+<p>Define the callback and retrieve the basic album information (album id, name, the artist name, and the number of media items in the album) in it.</p>
+<p>If the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the iteration continues and the callback is called for the next album, if available. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the iteration stops.</p>
+
+<pre class="prettyprint">bool media_album_list_cb(media_album_h album, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;int id = -1; 
+&nbsp;&nbsp;&nbsp;char *name = NULL, *artist = NULL;
+&nbsp;&nbsp;&nbsp;int count = -1;
+
+&nbsp;&nbsp;&nbsp;// Get the ID of the album
+&nbsp;&nbsp;&nbsp;ret = media_album_get_album_id(album, &amp;id);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling  
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;&nbsp;&nbsp;// Get name of the album
+&nbsp;&nbsp;&nbsp;ret = media_album_get_name(album, &amp;name);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(name);
+&nbsp;&nbsp;&nbsp;}   
+
+&nbsp;&nbsp;&nbsp;// Get the artist name
+&nbsp;&nbsp;&nbsp;ret = media_album_get_artist(album, &amp;artist);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(artist);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Get media count in the album
+&nbsp;&nbsp;&nbsp;// Filter is NULL - all media items are counted
+&nbsp;&nbsp;&nbsp;ret = media_album_get_media_count_from_db(id, NULL, &amp;count);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media count in this album: %d\n&quot;, count);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Free <span style="font-family: Courier New,Courier,monospace">album_name</span> and <span style="font-family: Courier New,Courier,monospace">artist</span> after use.</td>
+</tr>
+</tbody>
+</table> </li></ol>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="findingalbums" name="findingalbums" class="items-tit-h2">Finding Albums Using a Filter</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Use a filter to find the albums that meet a certain criteria. If an album does not meet the conditions, it is not in the results.</p>
+
+<p>Before searching for the albums, create the filter, and set its conditions and sort order:</p>
+
+<pre class="prettyprint">#define BUFLEN 200
+
+filter_h filter = NULL;
+char buf[BUFLEN] = {&#39;\0&#39;};
+
+media_filter_create(&amp;filter);
+
+snprintf(buf, BUFLEN, &quot;%s = &#39;Tizen&#39;&quot;, MEDIA_ARTIST);
+media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
+
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_DESC, MEDIA_DISPLAY_NAME, MEDIA_CONTENT_COLLATE_NOCASE);
+
+media_album_foreach_album_from_db(filter, media_album_list_cb, NULL);
+
+media_filter_destroy(filter);</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="findinginfo" name="findinginfo" class="items-tit-h2">Retrieving Album Content Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To access information about the media items in a given album:</p>
+
+<ol><li>Request album content.
+
+<ol><li><p>Before you can read the album content information, acquire the album ID. If you have the album handle (<span style="font-family: Courier New,Courier,monospace">media_album_h</span>), you can call the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_id()</span> function:</p>
+
+<pre class="prettyprint">int id = -1;
+
+media_album_get_album_id(album, &amp;id);</pre>
+
+<p>To obtain the handle, call the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> function. The handle is provided in the callback.</p></li>
+
+<li><p>Request the album content and media item count with the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_media_from_db()</span> and <span style="font-family: Courier New,Courier,monospace">media_album_get_media_count_from_db()</span> functions using the album ID as the first parameter.</p>
+
+<p>The following call finds all the media items in the album (<span style="font-family: Courier New,Courier,monospace">NULL</span> filter). The <span style="font-family: Courier New,Courier,monospace">album_contents_info_cb()</span> callback is called for each item.</p>
+
+<pre class="prettyprint">media_album_foreach_media_from_db(id, NULL, album_contents_info_cb, NULL);</pre>
+
+
+<p>This function is synchronous. The call blocks until the callback is called for all the albums or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p></li></ol></li>
+
+<li id="receive" name="receive">Receive album content.
+<p>Define the callback in which you can receive and handle the album content.</p>
+<p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the callback is called for the next item, if available. The iteration stops when the return value is <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+ 
+<pre class="prettyprint">bool album_contents_info_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;char *title = NULL, *mime_type = NULL;
+&nbsp;&nbsp;&nbsp;unsigned long long size = -1;
+
+&nbsp;&nbsp;&nbsp;// Read the item title
+&nbsp;&nbsp;&nbsp;ret = media_info_get_title(media, &amp;title);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(title);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Read the item MIME type
+&nbsp;&nbsp;&nbsp;ret = media_info_get_mime_type(media, &amp;mime_type);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(mime_type);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Read the item size
+&nbsp;&nbsp;&nbsp;ret = media_info_get_size(media, &amp;size);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Size: %llu\n&quot;, size);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Free <span style="font-family: Courier New,Courier,monospace">title</span> and <span style="font-family: Courier New,Courier,monospace">mime_type</span> after use.</td>
+</tr>
+</tbody>
+</table></li></ol>
+       </div>
+               </li>   
+       <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_bookmark" name="init_bookmark" class="items-tit-h2">Initializing Bookmarks</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To initialize the bookmark feature:</p>
+<ol><li>                       
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__BOOKMARK__MODULE.html">Media Bookmark</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre></li>
+<li><p>Before using bookmarks, open a connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function.</p>
+       
+<pre class="prettyprint">media_content_connect();</pre>
+
+<p>Close the connection when the service is no longer needed:</p>
+
+<pre class="prettyprint">media_content_disconnect();</pre></li></ol>
+
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="inserting" name="inserting" class="items-tit-h2">Inserting a Bookmark</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set a bookmark for a video file at a given timestamp, use the <span style="font-family: Courier New,Courier,monospace">media_bookmark_insert_to_db()</span> function:</p>
+
+<pre class="prettyprint">char* thumbnail_path = &quot;path/to/image/file&quot;;
+
+media_bookmark_insert_to_db(media_id, 220, thumbnail_path);
+media_bookmark_insert_to_db(media_id, 210, thumbnail_path);</pre>
+
+<p>The parameters are the media ID of the video file, the moment (time in seconds from the beginning) in the video to bookmark, and the image used as a thumbnail for the bookmark. You can use the same thumbnail for more than 1 bookmark.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="finding" name="finding" class="items-tit-h2">Finding Bookmarks</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To find a media item&#39;s bookmarks and filter the results:</p>
+
+<h3>Finding All Bookmarks</h3>
+
+<p>To find the bookmarks set for a media item, use the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_bookmark_from_db()</span> function:</p>
+
+<pre class="prettyprint">media_info_foreach_bookmark_from_db(media_id, NULL, get_bookmarks_cb, NULL);</pre>
+
+<p>The media ID, required as the first parameter, can be obtained by calling the <span style="font-family: Courier New,Courier,monospace">*_get_media_id()</span> functions. The handles that these functions require can be obtained from various sources. For example, <span style="font-family: Courier New,Courier,monospace">media_info_h</span> (needed for <span style="font-family: Courier New,Courier,monospace">media_info_get_media_id()</span>) is provided after calling the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> or <span style="font-family: Courier New,Courier,monospace">media_info_insert_to_db()</span> function.</p>
+
+<p>Find the bookmarks satisfying certain criteria or otherwise modify the results with a filter. If the filter parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>, no filtering is performed and all bookmarks are returned.</p>
+
+<p>The callback is called for each bookmark in the media item. If the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, calling of the callback continues, if there are more bookmarks for which the callback has not been called yet. If the return value is <span style="font-family: Courier New,Courier,monospace">false</span>, the callback iteration stops.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">media_info_foreach_bookmark_from_db()</span> function is synchronous. It blocks until the callback is called for all bookmarks or returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+
+<h3>Finding Bookmarks Using a Filter</h3>
+
+<p>To filter the bookmarks, create a filter and set its properties:</p>
+
+<ol><li>Create a filter.
+<pre class="prettyprint">filter_h filter = NULL;
+
+media_filter_create(&amp;filter);</pre></li>
+
+<li>Set a condition.
+<p>For example, you can receive a bookmark set after a certain time. In this example, only the bookmarks set at the 220th second of the file or later are returned.</p>
+
+<pre class="prettyprint">#define BUFLEN 200
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+snprintf(buf, BUFLEN, &quot;%s &gt;= 220&quot;, BOOKMARK_MARKED_TIME);
+media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);</pre></li>
+
+<li>Set the offset for the filter.
+
+<pre class="prettyprint">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;0, // 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;3 // Count
+);</pre>
+
+<p>The count sets the limit on the number of returned bookmarks, and the offset determines which of the found bookmarks counts as the &quot;first&quot;. For example, if you sort the bookmarks in an ascending order and the offset is set to 1, you do not receive the earliest bookmark.</p></li>
+
+<li>Define the sorting order. 
+<p>The following code causes the filter to sort the results by time, in an ascending order:</p>
+
+<pre class="prettyprint">media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, BOOKMARK_MARKED_TIME, MEDIA_CONTENT_COLLATE_NOCASE);</pre></li>
+
+<li>Apply the filter.
+
+<pre class="prettyprint">media_info_foreach_bookmark_from_db(media_id, filter, get_bookmarks_cb, NULL);</pre>
+
+<p>For information on how to implement the callback, see the <a href="#reading">Reading Bookmark Information</a>.</p></li>
+
+<li><p>Destroy the filter.</p>
+
+<pre class="prettyprint">media_filter_destroy(filter);</pre></li>
+
+</ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="reading" name="reading" class="items-tit-h2">Reading Bookmark Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To read the bookmark information within a callback after finding the bookmark:</p>
+
+<pre class="prettyprint">bool get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;char *thumb = NULL;
+
+&nbsp;&nbsp;&nbsp;if(bookmark != NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_bookmark_get_thumbnail_path(bookmark, &amp;thumb);
+&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;free(thumb);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t time;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_bookmark_get_marked_time(bookmark, &amp;time);
+&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;&nbsp;&nbsp;return true;
+}</pre>
+<p>The above callback prints the thumbnail path and marked time for each found bookmark.</p>
+<p>Free the thumbnail path after use.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="removing" name="removing" class="items-tit-h2">Removing a Bookmark</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To remove a bookmark:</p>
+<ol><li><p>Acquire the bookmark ID:</p>
+
+<pre class="prettyprint">
+media_bookmark_h bookmark = NULL;
+
+// Assuming you have the bookmark handle (media_bookmark_h)
+int bookmark_id = -1;
+media_bookmark_get_bookmark_id(bookmark, &amp;bookmark_id);</pre></li>
+
+<li><p>Delete the bookmark:</p>
+
+<pre class="prettyprint">media_bookmark_delete_from_db(bookmark_id);</pre></li></ol>
+       </div>
+               </li>           
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="init_filter" name="init_filter" class="items-tit-h2">Initializing a Filter</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__FILTER__MODULE.html">Media Filter</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre>
+<p>Open the connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function before using the Media Filter API:</p>
+       
+<pre class="prettyprint">media_content_connect();</pre>
+
+<p>When the service is no longer needed, close the connection:</p>
+
+<pre class="prettyprint">media_content_disconnect();</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="filter" name="filter" class="items-tit-h2">Setting up a Filter</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a filter and set its properties: offset, condition, and sorting order.</p>
+
+<ol>
+<li>Create a filter.
+<p>Create a filter using the <span style="font-family: Courier New,Courier,monospace">media_filter_create()</span> function:</p>
+
+<pre class="prettyprint">filter_h filter = NULL;
+
+media_filter_create(&amp;filter);
+</pre>
+
+<p>When the filter is no longer needed, destroy it using the <span style="font-family: Courier New,Courier,monospace">media_filter_destroy()</span> function:</p>
+
+<pre class="prettyprint">media_filter_destroy(filter);</pre>
+</li>
+
+<li>Set the condition.
+
+<p>Set the condition using the <span style="font-family: Courier New,Courier,monospace">media_filter_set_condition()</span> function.</p>
+<p>The following code sets the condition which finds albums with the artist name &quot;Tizen&quot; and the condition is case insensitive:</p>
+
+<pre class="prettyprint">#define BUFLEN 200
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+snprintf(buf, BUFLEN, &quot;%s = &#39;Tizen&#39;&quot;, MEDIA_ARTIST);
+ret = media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);</pre>
+
+<p>The function parameters are:</p>
+<ul class="ul"><li>Filter handle</li>
+<li>Condition string used for filtering the search results
+<p>Queries made with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a> API are passed to a SQL database. A part of each query is a <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause that determines which properties correspond to certain conditions. The condition string defines the <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause and must match the following pattern:</p>
+<pre class="prettyprint">&lt;property&gt; &lt;relation&gt; &lt;value&gt;
+
+// If the relation is =, &gt;, &gt;=, &lt;, or &lt;=, the following is also valid
+&lt;value&gt; &lt;relation&gt; &lt;property&gt;</pre>
+
+<p>The valid relations are:</p>
+
+<pre class="prettyprint">=, &gt;, &gt;=, &lt;, &lt;=, IN, NOT IN, LIKE</pre>
+
+<p>Conditions can be joined by <span style="font-family: Courier New,Courier,monospace">OR</span> and <span style="font-family: Courier New,Courier,monospace">AND</span> to form more complex conditions.</p>
+
+<p>Condition properties are defined by a series of <span style="font-family: Courier New,Courier,monospace">#define</span> directives. Each Content submodule contains definitions for properties used in the submodule.</p></li>
+<li>Collation type determining how the strings are compared
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">media_content_collation_e</a> enumerator defines the available collation types.</p></li></ul>
+
+<p>To read the condition of an existing filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_condition()</span> function:</p>
+
+<pre class="prettyprint">char *check_condition = NULL;
+media_content_collation_e check_collate_type = MEDIA_CONTENT_COLLATE_DEFAULT;
+
+media_filter_get_condition(filter, &amp;check_condition, &amp;check_collate_type);</pre>
+</li>
+
+<li>Set the sorting order.
+
+<p>The sorting order is set using the <span style="font-family: Courier New,Courier,monospace">media_filter_set_order()</span> function. For example, the following code sets the order by the artist name, ascending order, and  case sensitive.</p>
+
+<pre class="prettyprint">media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST, 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 <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">media_content_order_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">media_content_collation_e</a> enumerators.</p>
+
+<p>To read the order settings of a filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_order()</span> function:</p>
+
+<pre class="prettyprint">media_content_order_e check_order_type = MEDIA_CONTENT_ORDER_ASC;
+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, &amp;check_order_collate_type);</pre>
+</li>
+
+<li>Set the offset.
+
+<p>To avoid receiving all results returned by the query, use the <span style="font-family: Courier New,Courier,monospace">media_filter_set_offset()</span> function.</p>
+
+<p>For example, set the offset to return results starting from the beginning (offset 0), and get a maximum of 5 results:</p>
+
+<pre class="prettyprint">media_filter_set_offset(filter, 0, 5);</pre>
+
+<p>You can use the offset to get specific results. For example, if you sort the items by size in an ascending order and set the offset to 10, the 10 smallest items are not included in the results.</p>
+
+<p>To read the filter offset settings, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_offset()</span> function:</p>
+
+<pre class="prettyprint">int check_offset = 0;
+int check_count = 0;
+
+media_filter_get_offset(filter, &amp;check_offset, &amp;check_count);</pre>
+</li>
+</ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="media" name="media" class="items-tit-h2">Using Filters to Find Media Items</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use a filter to find media items:</p>
+
+<p>The filter construction depends on what kind of a query it is used for. The condition string contains different properties (columns), depending on the submodule.</p>
+
+<p>The following example finds media items with the following conditions:</p>
+
+<ul class="ul"><li>The artist is &#39;Tizen&#39;</li>
+<li>The search for the artist is case-insensitive</li>
+<li>The results are ordered by the artist, ascending, and case-sensitive</li>
+<li>At most 5 results are provided, starting from the first result</li></ul>
+
+
+<pre class="prettyprint">filter_h filter = NULL;
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+media_filter_create(&amp;filter);
+
+media_filter_set_offset(filter, 0, 5);
+snprintf(buf, BUFLEN, &quot;%s = &#39;Tizen&#39;&quot;, MEDIA_ARTIST);
+media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST, MEDIA_CONTENT_COLLATE_DEFAULT);
+
+media_info_foreach_media_from_db(filter, media_cb, NULL);
+
+media_filter_destroy(filter);</pre>
+       </div>
+               </li>           
+                       <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_media_folder" name="init_media_folder" class="items-tit-h2">Initializing Media Folders</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__FOLDER__MODULE.html">Media Folder</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre>
+<p>Open the connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function before using the Media Folder API:</p>
+       
+<pre class="prettyprint">media_content_connect();</pre>
+
+<p>When the service is no longer needed, close the connection:</p>
+
+<pre class="prettyprint">media_content_disconnect();</pre>
+
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="find" name="find" class="items-tit-h2">Finding All Media Folders</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To list all available media folders and their content:</p>
+
+<ol>
+<li>Request all folders.
+<p>Find folders using the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function. This function finds all folders meeting the criteria given in a filter (when set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, all folders available on the system are returned) and calls the callback for each such folder.</p>
+ 
+<pre class="prettyprint">media_folder_foreach_folder_from_db(NULL, folder_cb, NULL);</pre>
+
+<p>This function is synchronous; it continues until the callback is called for all available folders or the callback returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+</li>
+
+<li>Read folder details within the callback:
+
+<pre class="prettyprint">bool folder_cb(media_folder_h folder, void *user_data)
+{</pre>
+
+<p>The return value determines if the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace">false</span>).</p>
+
+<p>Once you have the folder handle (<span style="font-family: Courier New,Courier,monospace">media_folder_h</span>), you can read the folder information:</p>
+
+<ul class="ul"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">media_folder_get_folder_id()</span>, <span style="font-family: Courier New,Courier,monospace">media_folder_get_name()</span>, and <span style="font-family: Courier New,Courier,monospace">media_folder_get_path()</span> functions to read the folder ID, name, and path:</p>
+
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;char *folder_id = NULL;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *path = NULL;
+
+&nbsp;&nbsp;&nbsp;ret = media_folder_get_folder_id(folder, &amp;folder_id);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;&nbsp;&nbsp;ret = media_folder_get_name(folder, &amp;name);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(name);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = media_folder_get_path(folder, &amp;path);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(path);
+&nbsp;&nbsp;&nbsp;}</pre>
+
+<p>Free <span style="font-family: Courier New,Courier,monospace">name</span> and <span style="font-family: Courier New,Courier,monospace">path</span> at the end. The <span style="font-family: Courier New,Courier,monospace">folder_id</span> is freed later, since it is still needed.</p></li>
+
+<li><p>Read the folder storage type using the <span style="font-family: Courier New,Courier,monospace">media_folder_get_storage_type()</span> function:</p>
+
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;media_content_storage_e storage_type = MEDIA_CONTENT_STORAGE_INTERNAL;
+
+&nbsp;&nbsp;&nbsp;ret = media_folder_get_storage_type(folder, &amp;storage_type);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (storage_type) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&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;&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;&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;}</pre></li>
+
+<li><p>Get the last modified time:</p>
+
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;time_t time = 0;
+
+&nbsp;&nbsp;&nbsp;ret = media_folder_get_modified_time(folder, &amp;time);
+&nbsp;&nbsp;&nbsp;if (MEDIA_CONTENT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Modified time: %s&quot;, ctime(&amp;time));
+&nbsp;&nbsp;&nbsp;}</pre></li>
+
+<li>Get the media item count in the folder with the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function. <p>The second argument is the filter. If it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, all media is counted.</p>
+
+<p>Free the <span style="font-family: Courier New,Courier,monospace">folder_id</span> value after it is used for the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function.</p>
+
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;int item_count = -1; 
+
+&nbsp;&nbsp;&nbsp;ret = media_folder_get_media_count_from_db(folder_id, NULL, &amp;item_count);
+&nbsp;&nbsp;&nbsp;if (MEDIA_CONTENT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Number of media contents: %d\n&quot;, item_count);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;free(folder_id);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li></ul>
+</li>
+</ol>
+
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="filter_folder" name="filter_folder" class="items-tit-h2">Finding Folders Using a Filter</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Use filters to choose which folders are found by the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function. For example, find folders which meet certain conditions, such as a name containing a given substring. Other modifications of the results, such as sorting, are also possible.</p>
+
+<ol>
+<li>Create a filter.
+<p>Create a filter using the <span style="font-family: Courier New,Courier,monospace">media_filter_create()</span> function:</p>
+
+<pre class="prettyprint">filter_h filter = NULL;
+
+media_filter_create(&amp;filter);</pre>
+
+<p>Destroy the filter when it is no longer needed:</p>
+
+<pre class="prettyprint">media_filter_destroy(filter);</pre>
+</li>
+
+<li>Set the condition.
+<p>Set the condition with the <span style="font-family: Courier New,Courier,monospace">media_filter_set_condition()</span> function.</p>
+
+<p>The condition is the string used as the argument to the WHERE clause in the SQL query. The general format is &quot;&lt;property&gt; &lt;relation&gt; &lt;value&gt;&quot;, such as &quot;FOLDER_NAME = &#39;Downloads&#39;&quot;.</p>
+<ul class="ul"><li>Condition for the &#39;Downloads&#39; folder name:
+
+<pre class="prettyprint">#define BUFLEN 200
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+snprintf(buf, BUFLEN, &quot;%s = &#39;Downloads&#39;&quot;, FOLDER_NAME);</pre></li>
+
+<li><p>Condition for the internal folder storage type:</p>
+
+<pre class="prettyprint">snprintf(buf, BUFLEN, &quot;%s = %d&quot;, FOLDER_STORAGE_TYPE, MEDIA_CONTENT_STORAGE_INTERNAL);</pre></li></ul>
+
+<p>The following code finds the folders in the device internal storage. The results are sorted with respect to the modified time, in an ascending order.</p>
+
+<pre class="prettyprint">#define BUFLEN 200
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+snprintf(buf, BUFLEN, &quot;%s = %d&quot;, 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, MEDIA_CONTENT_COLLATE_DEFAULT);
+
+media_folder_foreach_folder_from_db(filter, folder_cb, NULL);
+
+media_filter_destroy(filter);</pre>
+</li>
+</ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="folder_content" name="folder_content" class="items-tit-h2">Finding Folder Content</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To list folder content and get information about media items in the folders:</p>
+
+<ol>
+<li>Request folder content.
+<p>To find all media items from the folder with the given ID, use the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_media_from_db()</span> function. The function is synchronous; it blocks until the callback calls are finished.</p>
+
+<pre class="prettyprint">media_folder_foreach_media_from_db(folder_id, NULL, media_cb, NULL);</pre>
+
+<p>The callback is iterated until it has been called for all items or it returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+</li>
+
+<li>Receive folder content.
+
+<p>List the content using the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_media_from_db()</span> function (this is very similar to using the <span style="font-family: Courier New,Courier,monospace">media_album_foreach_media_from_db()</span> function, since both functions call callbacks of the same type). To implement the callback, see the <a href="#receive"><span style="font-family: Courier New,Courier,monospace">media_album_foreach_media_from_db()</span> callback  implementation</a>.</p>
+
+<p>The following example prints the title of the media item for which it was called.</p>
+
+<pre class="prettyprint">bool media_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char *title = NULL;
+
+&nbsp;&nbsp;&nbsp;ret = media_info_get_title(media, &amp;title);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&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;free(title);
+&nbsp;&nbsp;&nbsp;}   
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+</li>
+</ol>
+       </div>
+               </li>   
+       <li>
+                       <div class="devicespec-tit">
+ <h2 id="initialize_media_info" name="initialize_media_info" class="items-tit-h2">Initializing Media Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the media database:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__INFO__MODULE.html">Media Information</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre>
+</li>
+<li><p>Before retrieving media information, open a connection to the Content Service using the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function:</p>
+       
+<pre class="prettyprint">media_content_connect();</pre>
+</li>
+
+<li><p>Close the connection when the service is no longer needed:</p>
+
+<pre class="prettyprint">media_content_disconnect();</pre>
+</li>
+</ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="info" name="info" class="items-tit-h2">Using Media Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To retrieve media information:</p>
+
+<ol>
+<li>Create a callback function to retrieve a media item:
+
+<pre class="prettyprint">
+bool gallery_media_item_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
+&nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
+
+&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
+&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li>Create a handle by setting a query and filter.
+
+<p>Media information is based on the media information handle. The metadata varies depending on the media type, such as image, video, or audio. You can obtain common information from the media information.</p>
+<p>Based on the media information handle, use a getter function for the metadata after calling a clone function supported by each metadata.</p>
+
+<pre class="prettyprint">
+#define BUFLEN 200
+GList *all_item_list = NULL; // Include glib.h
+media_content_type_e media_type;
+media_info_h media_handle = NULL;
+char *media_id = NULL;
+char *media_name = NULL;
+char *media_path = NULL;
+char buf[BUFLEN] = {&#39;\0&#39;};
+int ret = MEDIA_CONTENT_ERROR_NONE;
+filter_h filter = NULL;
+media_content_collation_e collate_type = MEDIA_CONTENT_COLLATE_NOCASE;
+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, 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;media_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set condition&quot;);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+ret = media_filter_set_order(filter, order_type, MEDIA_DISPLAY_NAME, collate_type);
+if (ret != MEDIA_CONTENT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set order&quot;);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_info_foreach_media_from_db failed: %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
+
+&nbsp;&nbsp;&nbsp;return ret;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(all_item_list); i++) 
+&nbsp;&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;media_info_get_media_id(media_handle, &amp;media_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_media_type(media_handle, &amp;media_type);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_display_name(media_handle, &amp;media_name);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_file_path(media_handle, &amp;media_path);
+
+&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;&nbsp;&nbsp;&nbsp;image_meta_h image_handle;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_orientation_e orientation = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int width = 0, height = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *datetaken = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *burst_id = NULL;
+
+&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;if (ret != MEDIA_CONTENT_ERROR_NONE) 
+&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;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;image_meta_get_height(image_handle, &amp;height);
+
+&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;image_meta_get_date_taken(image_handle, &amp;datetaken);
+
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;This is an image&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Width : %d, Height : %d, Orientation : %d, Date taken : %s&quot;, width, height, orientation, datetaken);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (datetaken) free(datetaken);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (burst_id) free(burst_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_destroy(image_handle);
+&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;video_meta_h video_handle;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *title = NULL, *artist = NULL, *album = NULL, *album_artist = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int duration = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t time_played = 0;
+
+&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;if (ret != MEDIA_CONTENT_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;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;video_meta_get_album(video_handle, &amp;album);
+
+&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;video_meta_get_duration(video_handle, &amp;duration);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_get_played_time(video_handle, &amp;time_played);
+
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Title: %s, Album: %s, Artist: %s, Album_artist: %s \n Duration: %d, Played time: %d&quot;, 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;free(artist);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(album);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(album_artist);
+
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_id [%d] : %s&quot;, i, media_id);
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_path [%d] : %s&quot;, i, media_path);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_path);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(title);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>When the filter is no longer used, destroy the list, filter, and query:
+
+<pre class="prettyprint">
+media_filter_destroy(filter);
+filter = NULL;
+</pre></li>
+</ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="insert" name="insert" class="items-tit-h2">Inserting Media in the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>To insert media in the database:</p>
+
+<ol><li><p>To use newly created media files, first insert them into the database. You need the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span> privilege to use the needed APIs.</p>
+<p>You also need the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span> or <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span> privilege, since when you insert metadata, the media content APIs access content in the internal or external storage.</p></li>
+
+<li><p>To add information in the database:</p>
+ 
+<ul class="ul"><li><p>You can use the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function:</p>
+<pre class="prettyprint">int ret = MEDIA_CONTENT_ERROR_NONE;
+char *path = &quot;/opt/usr/media/Images/Default.jpg&quot;;
+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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Insertion successful&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Insertion failed&quot;);
+&nbsp;&nbsp;&nbsp;if (media_item != NULL)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_destroy(media_item);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+// After using the media handle, destroy it
+ret = media_info_destroy(media_item);
+if (ret != MEDIA_CONTENT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre></li>
+
+<li>You can use the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function:
+<pre class="prettyprint">
+int ret = MEDIA_CONTENT_ERROR_NONE;
+const char *file_path = &quot;/opt/usr/media/test/image1.jpg&quot;;
+
+ret = media_content_scan_file(file_path);
+</pre></li></ul>
+
+<p>The difference between the 2 functions is that the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function is used by getting <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> of the media file after inserting it to the database, whereas the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function supports only inserting a file to the media database, or removing it.</p>
+
+<p>Basically, the media database does not allow duplicate paths. If you try to insert the same data, the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function returns an error. But the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function does not return an error, and allows you to get <span style="font-family: Courier New,Courier,monospace;">media_info_h</span>.</p></li>
+
+
+<li><p>After using the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function, destroy the received <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> with using the <span style="font-family: Courier New,Courier,monospace;">media_info_destroy()</span> function.</p></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="scan" name="scan" class="items-tit-h2">Inserting Media in a Folder</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+
+
+<p>To insert media in a folder:</p>
+ 
+<ol>
+<li><p>You can scan either a single folder, or include its subdirectories. You need the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span> privilege to use these APIs.</p>
+<p>You also need the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span> or <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span> privilege, since when you insert metadata, the media content APIs access content in the internal or external storage.</p></li>
+<li>As scanning works asynchronously, you must a callback function:
+<pre class="prettyprint">
+void _scan_cb(media_content_error_e err, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, (&quot;Folder scanned\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre></li>
+
+<li>Scan a folder and its subfolders:
+<pre class="prettyprint">
+int ret = MEDIA_CONTENT_ERROR_NONE;
+const char *dir_path = &quot;/opt/usr/media&quot;;
+
+ret = media_content_scan_folder(dir_path, TRUE, _scan_cb, NULL);
+if (ret != MEDIA_CONTENT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre></li>
+</ol>
+       </div>
+               </li>                   
+       
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="init_playlist" name="init_playlist" class="items-tit-h2">Initializing a Playlist</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the playlists:</p>
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__PLAYLIST__MODULE.html">Media Playlist</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre>
+</li>
+
+<li><p>Establish a connection to the database:</p>
+<pre class="prettyprint">
+media_content_connect();
+</pre>
+<p>Close the connection when the service is no longer needed:</p>
+<pre class="prettyprint">
+media_content_disconnect();
+</pre>
+</li></ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Playlists</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create and insert a playlist to the database, perform a search on existing records and handle the found items:</p>
+
+
+<ol><li>Insert a record to the database.
+<ol><li><p>To operate on the database, it has to contain records. Add a new playlist to the database using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_insert_to_db()</span> function. It returns a handle to the newly created record.</p>
+<pre class="prettyprint">media_playlist_h playlist = NULL;
+filter_h audio_filter = NULL;
+GList *media_id_list = NULL; // This requires glib.h inclusion
+int media_count;
+int start_position = -1;
+int count = -1;
+int x;
+int id;
+int ret;
+
+// Create the playlist
+media_playlist_insert_to_db(&quot;playlist_for_tutorial&quot;, &amp;playlist);
+</pre></li>
+
+<li><p>To fill a playlist with data, register the existing media in the database using the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function. Then you can check the media database size using the <span style="font-family: Courier New,Courier,monospace;">media_info_get_media_count_from_db()</span> function and allocate the required amount of space. The callback function registered using the <span style="font-family: Courier New,Courier,monospace;">media_info_foreach_media_from_db()</span>  function returns a list of media IDs.</p>
+
+<p>The specified media objects are added to the playlist with <span style="font-family: Courier New,Courier,monospace;">media_playlist_add_media()</span>.</p>
+<pre class="prettyprint">
+// sound_path must be set to an audio file
+media_content_scan_file(path); 
+
+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;for (x = 0; x &lt; media_count; x++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_id = (char*)g_list_nth_data(media_id_list, x);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_playlist_add_media(playlist, media_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_id);
+&nbsp;&nbsp;&nbsp;}
+}
+
+media_playlist_update_to_db(playlist);</pre></li>
+
+<li><p>In the callback function, cast the user data to a proper type and copy the media ID:</p>
+
+<pre class="prettyprint">bool _media_info_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char *data = NULL;
+&nbsp;&nbsp;&nbsp;char *id = NULL;
+
+&nbsp;&nbsp;&nbsp;if (media != NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_media_id(media, &amp;id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media found: %s\n&quot;, id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data = strdup(id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(id);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li></ol></li>
+
+
+
+<li>Perform a search.
+<p>To select any records from the database, you must know their ID or perform a search on the records.</p>
+
+<p>To start a search, use the <span style="font-family: Courier New,Courier,monospace;">media_playlist_foreach_playlist_from_db()</span> function. To use this function, provide an existing filter and a callback function to be used each time a record is found.</p>
+
+<pre class="prettyprint">
+media_playlist_foreach_playlist_from_db(NULL, playlist_list_cb,  NULL);
+</pre>
+
+<p>You can define the playlist name using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_set_name()</span> function.</p></li>
+
+<li>Handle the found records.
+
+<ol><li><p>When a record is found, a callback function is invoked. A handle to the record is passed as a playlist function parameter.</p> 
+<pre class="prettyprint">static bool playlist_list_cb(media_playlist_h playlist, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;int playlist_id = 0;
+&nbsp;&nbsp;&nbsp;int count = 0;
+</pre></li>
+
+<li><p>Access the record details using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_get_name()</span> and <span style="font-family: Courier New,Courier,monospace;">media_playlist_get_playlist_id()</span> functions.</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;media_playlist_get_name(playlist, &amp;name);
+&nbsp;&nbsp;&nbsp;media_playlist_get_playlist_id(playlist, &amp;playlist_id);
+</pre></li>
+
+<li><p>After reading the playlist ID, execute 2 searches on it. The first search filter operates on all records on the playlist, and the second one works only on the first 10 records. Destroy the filters after all operations. </p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">media_playlist_foreach_media_from_db()</span> function invokes a callback for each record matching the filter. The search is performed on a playlist with the specified ID.</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;filter_h temp_filter = NULL;
+&nbsp;&nbsp;&nbsp;media_filter_create(&amp;temp_filter);
+
+&nbsp;&nbsp;&nbsp;media_filter_set_offset(temp_filter, -1, -1);
+
+&nbsp;&nbsp;&nbsp;media_playlist_get_media_count_from_db(playlist_id, temp_filter, &amp;count);
+&nbsp;&nbsp;&nbsp;filter_h audio_fltr;
+
+&nbsp;&nbsp;&nbsp;media_filter_create(&amp;audio_fltr);
+
+&nbsp;&nbsp;&nbsp;media_filter_set_offset(audio_fltr, 0, 10);
+
+&nbsp;&nbsp;&nbsp;media_playlist_foreach_media_from_db(playlist_id, audio_fltr, audio_list_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;media_filter_destroy(audio_fltr);
+&nbsp;&nbsp;&nbsp;media_filter_destroy(temp_filter);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li>
+
+<li><p>The callback function operates on the records the same way as before. To get the media info, use the following functions:</p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">media_info_get_audio()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">media_info_get_media_id()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">media_info_get_size()</span></li></ul>
+
+<pre class="prettyprint">static bool audio_list_cb(int playlist_member_id, media_info_h media_hndl, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;char * id;
+&nbsp;&nbsp;&nbsp;media_info_get_media_id(media_hndl, &amp;id);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media on the playlist: %s\n&quot;, id);
+&nbsp;&nbsp;&nbsp;free(id);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li></ol></li>
+
+
+<li>Clean up.
+<p>After all operations, delete the playlist from the database to avoid creating useless records. In addition, destroy all filters and handles to the records. At the end, close the connection to the database.</p>
+<pre class="prettyprint">media_playlist_get_playlist_id(playlist, &amp;id);
+media_playlist_delete_from_db(id);
+
+media_playlist_destroy(playlist);
+
+media_filter_destroy(audio_filter);
+media_content_disconnect();</pre></li></ol>
+       </div>
+               </li>           
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="initialize_tag" name="initialize_tag" class="items-tit-h2">Initializing Media Tags</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__TAG__MODULE.html">Media Tag</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_content.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_content.h&gt;
+</pre>
+
+<p>Before retrieving tag information, open a connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function:</p>
+       
+<pre class="prettyprint">media_content_connect();</pre>
+
+<p>Close the connection when the service is no longer needed:</p>
+
+<pre class="prettyprint">media_content_disconnect();</pre>
+
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="tag_list" name="tag_list" class="items-tit-h2">Getting the Tag List</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the tag list:</p>
+
+<ol>
+<li>Define callback functions:
+<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;media_tag_h new_tag = NULL;
+&nbsp;&nbsp;&nbsp;media_tag_clone(&amp;new_tag, tag);
+
+&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
+&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_tag);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool gallery_media_item_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
+&nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
+
+&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
+&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+<li>After getting the tag information which is already set, you can import individual media information.
+
+<p>Get a tag and media list using a tag ID:</p>
+<pre class="prettyprint">
+media_tag_h tag_handle = NULL;
+GList *tag_list = NULL;
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_tag_foreach_tag_from_db() failed: %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;return ret;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_tag_foreach_tag_from_db() successful&quot;);
+&nbsp;&nbsp;&nbsp;char *tag_name = NULL;
+&nbsp;&nbsp;&nbsp;int tag_id;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(tag_list); i++) 
+&nbsp;&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;media_tag_get_tag_id(tag_handle, &amp;tag_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_tag_get_name(tag_handle, &amp;tag_name);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_tag_foreach_media_from_db(tag_id, NULL, gallery_media_item_cb, &amp;media_list_in_tag);
+&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_tag_foreach_media_from_db() failed: %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_tag_foreach_media_from_db() successful&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int j = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_h tag_media_handle;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_id = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_name = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_path = NULL;
+&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;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;&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;ret = media_info_get_media_id(tag_media_handle, &amp;media_id);
+
+&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;ret = media_info_get_file_path(tag_media_handle, &amp;media_path);
+
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[%s] media_id [%d] : %s&quot;, tag_name, j, media_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[%s] media_type [%d] : %d&quot;, tag_name, j, media_type);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[%s] media_name [%d] : %s&quot;, tag_name, j, media_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[%s] media_path [%d] : %s&quot;, tag_name, j, media_path);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_id);
+&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;free(media_path);
+&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;free(tag_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_tag_destroy(tag_handle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_list_free(media_list_in_tag);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;g_list_free(tag_list);
+}
+</pre></li>
+</ol>
+       </div>
+               </li>           <li>
+                       <div class="devicespec-tit">
+ <h2 id="find_groups" name="find_groups" class="items-tit-h2">Finding Media Item Groups</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To find groups of media items and items in a given group:</p>
+
+<ol>
+<li>Search for groups.
+<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 <span style="font-family: Courier New,Courier,monospace;">media_group_e</span> values, such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_GROUP_ARTIST</span> and <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_GROUP_MIME_TYPE</span>.</p>
+<ol><li>
+<p>Find the number of MIME type-related groups:</p>
+
+<pre class="prettyprint">
+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);
+</pre>
+
+<p>The first argument is the <a href="#filter">filter</a>. In this example, the filter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, which means that no filtering is performed and all items are considered when searching.</p></li>
+
+<li><p>Find groups using the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_group_from_db()</span> function.</p>
+
+<p>The first parameter defines a filter, and the second the group identifier. The third parameter defines the callback called for each group, and the final parameter is the data passed to the callback upon each call.</p>
+
+<p>The following example searches all media items and provides all groups as the result. For each found group, the <span style="font-family: Courier New,Courier,monospace;">group_cb()</span> function is called. The group identifier is given as the data passed to the callback.</p>
+
+<pre class="prettyprint">
+media_group_foreach_group_from_db(NULL, group, group_cb, (void *) group);
+</pre></li></ol></li>
+
+<li>Receive group data.
+<ol><li>
+<p>Define the callback for receiving the group data. If the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the iteration over the found groups continues. If the return value is <span style="font-family: Courier New,Courier,monospace;">false</span>, the iteration is stopped.</p>
+
+<p>Each time the callback is called for a group, the group name is passed as the <span style="font-family: Courier New,Courier,monospace;">name</span> argument. In this case, names are set to various found MIME types, such as <span style="font-family: Courier New,Courier,monospace;">image/png</span> and <span style="font-family: Courier New,Courier,monospace;">audio/mpeg</span>.</p>
+
+<p>Having the group name and identifier (passed in <span style="font-family: Courier New,Courier,monospace;">user_data</span>), find the number of items in the group using the <span style="font-family: Courier New,Courier,monospace;">media_group_get_media_count_from_db() function</span>. The third parameter is the filter, set to <span style="font-family: Courier New,Courier,monospace;">NULL</span> to count all items in the group.</p>
+
+<p>To find all items in the group, call the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The arguments are similar to those in the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The <span style="font-family: Courier New,Courier,monospace;">media_cb()</span> callback is called for each found item.</p>
+
+<pre class="prettyprint">
+bool group_cb(const char *name, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;media_group_e group = (media_group_e) user_data;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;\n&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Group name: %s\n&quot;, name);
+
+&nbsp;&nbsp;&nbsp;int count = -1; 
+&nbsp;&nbsp;&nbsp;media_group_get_media_count_from_db(name, group, NULL, &amp;count);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media count in group: %d\n&quot;, count);
+
+&nbsp;&nbsp;&nbsp;media_group_foreach_media_from_db(name, group, NULL, media_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace;">media_cb()</span> callback to handle each found item:
+
+<pre class="prettyprint">
+bool media_cb(media_info_h media, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+
+&nbsp;&nbsp;&nbsp;media_info_get_display_name(media, &amp;name);
+&nbsp;&nbsp;&nbsp;if (name != NULL) 
+&nbsp;&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;free(name);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li></ol></li></ol>
+
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="filter_groups" name="filter_groups" class="items-tit-h2">Finding Media Item Groups Using a Filter</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To find groups containing only items matching the given criteria:</p>       
+       
+<ol>
+<li>Create a filter.
+<p>When searching for groups, you can use a filter to limit what media items are considered. For example, search only for items containing a given substring in their name. Items which do not meet this condition are ignored, and groups are formed entirely of items which meet the condition. For example, if you group files by MIME type and only look for files containing &#39;.jpg&#39; in their name, groups which do not contain such files are not listed.</p>
+
+<pre class="prettyprint">
+filter_h filter;
+
+media_filter_create(&amp;filter);
+</pre></li>
+
+<li><p>Set the filter condition. The condition is a string used in a SQL query. </p>
+<p>The following example searches for files containing &#39;.jpg&#39; in their name. The &#39;%&#39; characters in the query act as wildcards. Also, they should be escaped using another &#39;%&#39; character to avoid compiler warnings.</p>
+
+<pre class="prettyprint">
+#define BUFLEN 200 // This is just an example
+char buf[BUFLEN] = { &#39;\0&#39; };
+
+snprintf(buf, BUFLEN, &quot;%s LIKE &#39;%%.jpg&#39;&quot;, MEDIA_DISPLAY_NAME);
+media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);
+</pre></li>
+
+<li><p>Search for groups as in the &quot;Finding Media Item Groups&quot; use case, but define the created filter as the first parameter. The same callbacks as before are used.</p>
+
+<pre class="prettyprint">
+int count = -1; 
+media_group_get_group_count_from_db(filter, group, &amp;count);
+dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Group count: %d\n&quot;, count);
+
+media_group_foreach_group_from_db(filter, group, group_cb, (void *) group);
+</pre></li></ol>
+
+       </div>
+               </li>   
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm b/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm
new file mode 100644 (file)
index 0000000..9bf5161
--- /dev/null
+++ b/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm
@@ -0,0 +1,180 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>MIME Type: Mapping MIME Types to and from File Extensions</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#get_file_ext">Getting the MIME Type for a File Extension</a></li>
+                       <li><a class="opensection" href="#get_mime">Getting Extensions for a MIME Type</a></li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+
+             <li><a href="../../../../org.tizen.guides/html/native/content/mime_type_n.htm">MIME Type Guide</a></li>
+                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>MIME Type: Mapping MIME Types to and from File Extensions</h1>
+  <div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can map MIME types to file extensions and vice versa.</p>
+
+<h2>Warm-up</h2> 
+<p>Become familiar with the MIME Type API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#get_file_ext">Getting the MIME Type for a File Extension</a>
+               <p>Get a MIME type when an extension is known.</p></li>
+               <li><a class="opensection" href="#get_mime">Getting Extensions for a MIME Type</a>
+               <p>Get extensions mapped to certain MIME types.</p></li>
+   </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get_file_ext" name="get_file_ext" class="items-tit-h2">Getting the MIME Type for a File Extension</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the MIME types of all files in a directory when the extensions are known:</p>
+ <ol>
+ <li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;mime_type.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;mime_type.h&gt;
+</pre>
+</li>
+ 
+ 
+ <li><p>To get a MIME type for a file extension, use the <span style="font-family: Courier New,Courier,monospace;">mime_type_get_mime_type()</span> 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 <span style="font-family: Courier New,Courier,monospace;">&#39;application/octet-stream&#39;</span> 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);
+</pre></li>
+
+<li><p>Get the extensions of all files in a <span style="font-family: Courier New,Courier,monospace;">/tmp</span> directory and get their MIME types. To get the directory content, use the dirent structure available in the <span style="font-family: Courier New,Courier,monospace;">&lt;dirent.h&gt;</span> header:</p>
+
+<pre class="prettyprint">
+struct dirent *pDirent = NULL;
+DIR *dir;
+dir = opendir(&quot;/tmp/&quot;);
+if (dir) 
+{
+&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) 
+&nbsp;&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;continue;
+</pre></li>
+
+<li><p>Get the extension from a file name using the <span style="font-family: Courier New,Courier,monospace;">strrchr()</span> function available in the <span style="font-family: Courier New,Courier,monospace;">&lt;string.h&gt;</span> header. Incrementing the pointer address is necessary, so use the extension without a dot:</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *extension = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!extension)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extension++;
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">mime_type_get_mime_type()</span> 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;mime_type_get_mime_type(extension, &amp;mime_type);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Here you have a mime type in its variable
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(mime_type);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;closedir(dir);
+}
+</pre></li></ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get_mime" name="get_mime" class="items-tit-h2">Getting Extensions for a MIME Type</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get a list of extensions associated, for example, with an image or jpeg MIME type:</p>
+
+<ol>
+ <li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;mime_type.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;mime_type.h&gt;
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">mime_type_get_file_extension()</span> function. The parameters are the MIME type, the array of file extensions, and the length of the array of the file extensions (marked as zero if there are none).
+
+<pre class="prettyprint">
+char **extension;
+int length;
+int error = mime_type_get_file_extension(&quot;image/jpeg&quot;, &amp;extension, &amp;length);
+
+int i;
+for (i=0; i &lt; length; i++)
+&nbsp;&nbsp;&nbsp;// Use extension[i]
+
+for (i=0; i &lt; length; i++)
+&nbsp;&nbsp;&nbsp;free(extension[i]);
+free(extension);
+</pre></li></ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
new file mode 100644 (file)
index 0000000..01c0891
--- /dev/null
+++ b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
@@ -0,0 +1,129 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Activity Recognition: Detecting Device Activities</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#activity" class="opensection">Detecting Activities</a></li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/context/activity_recognition_n.htm">Activity Recognition Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Activity Recognition: Detecting Device Activities</h1>
+<div class="cont"><div class="static-cont">    
+
+  <p>This tutorial demonstrates how you can manage and monitor various system information and attached devices.</p> 
+
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Activity Recognition API basics by learning about:</p> 
+               <ul>
+                       <li><a href="#activity">Detecting Activities</a>
+                       <p>Detect user activities.</p>
+                       </li>
+               </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="activity" name="activity" class="items-tit-h2">Detecting Activities</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To set and unset callback functions for the activity monitor and retrieve details from the received activity data:</p>
+<ol><li><p>To use the activity recognition-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;activity_recognition.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;activity_recognition.h&gt;
+</pre></li>
+
+<li>Create a handle for activity monitoring using the <span style="font-family: Courier New,Courier,monospace;">activity_create()</span> function:
+<pre class="prettyprint">
+activity_h handle;
+activity_create(&amp;handle);
+</pre>
+</li>
+
+<li>To subscribe to notifications about specific activity state changes, invoke the <span style="font-family: Courier New,Courier,monospace;">activity_start_recognition()</span> function to register a callback function. 
+<p>When specific activity data is received, the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback</span> callback is invoked.</p>
+
+<p>The following example starts the activity monitor to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> activity is detected. Any of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">activity_type_e</a> enumerators can be used in place of the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> value.</p>
+<pre class="prettyprint">
+activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NULL);
+</pre>
+</li>
+
+<li>When the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback()</span> callback is invoked, the current activity is delivered as a parameter, and you can extract the accuracy of the recognized activity:
+<pre class="prettyprint">void example_activity_callback(activity_type_e activity, const activity_data_h data, double timestamp, activity_error_e error, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int result;
+
+&nbsp;&nbsp;&nbsp;activity_accuracy_e accuracy;
+&nbsp;&nbsp;&nbsp;result = activity_get_accuracy(data, &amp;accuracy);
+
+&nbsp;&nbsp;&nbsp;if (result != ACTIVITY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+&nbsp;&nbsp;&nbsp;}
+}</pre></li>
+<li>When activity monitoring is no longer used, unset the callback function and destroy the handle: 
+<pre class="prettyprint">activity_stop_recognition(handle);
+activity_release(handle);</pre></li></ol>  
+                       </div>
+               </li></ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/context/context_tutorials_n.htm b/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
new file mode 100644 (file)
index 0000000..55ba2d5
--- /dev/null
+++ b/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Context: Detecting and Exploiting Contextual Information</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Context: Detecting and Exploiting Contextual Information</h1>
+
+ <p>The context tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+  <ul>
+   
+   <li><a href="activity_tutorial_n.htm">Activity Recognition: Detecting Device Activities</a> <p>Demonstrates how you can detect user activities.</p></li>
+   <li><a href="gesture_tutorial_n.htm">Gesture Recognition: Detecting Device Gestures</a> <p>Demonstrates how you can detect gestures performed with 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
new file mode 100644 (file)
index 0000000..719857d
--- /dev/null
+++ b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
@@ -0,0 +1,148 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Gesture Recognition: Detecting Device Gestures</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#gesture" class="opensection">Detecting Gestures</a>
+                       </li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/context/gesture_recognition_n.htm">Gesture Recognition Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Gesture Recognition: Detecting Device Gestures</h1>
+<div class="cont"><div class="static-cont">    
+ 
+       <p>This tutorial demonstrates how you can detect gestures performed with the device.</p> 
+       
+  
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Gesture Recognition API basics by learning about:</p> 
+                       <ul>
+    <li><a href="#gesture">Detecting Gestures</a>
+    <p>Detect user gestures.</p></li>
+               </ul>
+               
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="gesture" name="gesture" class="items-tit-h2">Detecting Gestures</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+<p>To set and unset callback functions for user gestures:</p>
+
+<ol><li><p>To use the gesture recognition-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;gesture_recognition.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;gesture_recognition.h&gt;
+</pre></li>
+
+<li>Create a handle for gesture detection using the <span style="font-family: Courier New,Courier,monospace;">gesture_create()</span> function:
+
+<pre class="prettyprint">
+gesture_h handle;
+gesture_create(&amp;handle);</pre></li>
+
+<li><p>To subscribe to notifications about gesture events, invoke the <span style="font-family: Courier New,Courier,monospace;">gesture_start_recognition()</span> function to register a callback function and start gesture detection.</p>
+<p>When the registered gesture is detected, the <span style="font-family: Courier New,Courier,monospace;">gesture_cb</span> callback is invoked.</p>
+
+<pre class="prettyprint">gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT, gesture_cb, NULL);</pre>
+
+<p>The above example starts gesture detection to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> gesture is detected. The application can use any of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">gesture_type_e</a> enumerators in place of the <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> value. Note that not all gestures are supported by all devices. In such cases, the function returns the <span style="font-family: Courier New,Courier,monospace;">GESTURE_ERROR_NOT_SUPPORTED</span> value.</p>
+
+<p>If the default gesture option is designated, the system tries to reduce power consumption to detect the gesture. For example, the gesture is not necessarily detected while the display is switched off. Using the <span style="font-family: Courier New,Courier,monospace;">GESTURE_OPTION_ALWAYS_ON</span> option prevents such power-saving behaviors. For more information about the gesture options, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">gesture_option_e</a> enumeration.</p></li>
+
+<li><p>When the <span style="font-family: Courier New,Courier,monospace;">gesture_cb()</span> callback function is invoked, you can retrieve the event data using the <span style="font-family: Courier New,Courier,monospace;">gesture_get_event()</span> function:</p>
+
+<pre class="prettyprint">void gesture_cb(gesture_type_e gesture, const gesture_data_h data, double timestamp, gesture_error_e error, void *user_data)
+{                      
+&nbsp;&nbsp;&nbsp;gesture_event_e event;
+&nbsp;&nbsp;&nbsp;if (gesture == GESTURE_PICK_UP) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gesture_get_event(data, &amp;event);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event == GESTURE_EVENT_DETECTED) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>If the application registered multiple gestures to a single callback function, the input parameter gesture can be used to distinguish the gesture received.</p>
+<p>Some gestures can return different types of events. For example, <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE</span> can return <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_DETECTED</span> or <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_FINISHED</span>.</p>
+
+<p>In case of <span style="font-family: Courier New,Courier,monospace;">GESTURE_TILT</span>, the <span style="font-family: Courier New,Courier,monospace;">gesture_get_tilt()</span> function can be used to extract the tilting angles.</p>
+
+<pre class="prettyprint">int x, y;
+if (gesture == GESTURE_TILT) 
+{
+&nbsp;&nbsp;&nbsp;gesture_get_tilt(data, &amp;x, &amp;y);
+}</pre></li>
+
+<li><p>When gesture detection is no longer used, unset the callback functions with the <span style="font-family: Courier New,Courier,monospace;">gesture_stop_recognition()</span> function and destroy the handle with the <span style="font-family: Courier New,Courier,monospace;">gesture_release()</span> function:</p>
+
+<pre class="prettyprint">gesture_stop_recognition(handle);
+gesture_release(handle);</pre></li></ol>  
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
new file mode 100644 (file)
index 0000000..a828d53
--- /dev/null
+++ b/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
@@ -0,0 +1,348 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Cairo Integration: Linking Cairo and Evas</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#rectangle" class="opensection">Creating a Rectangle with a Black Border</a></li>
+                       <li><a href="#graph" class="opensection">Displaying a Temperature Graph</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/graphics/cairo_n.htm">Cairo Integration Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Cairo Integration: Linking Cairo and Evas</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can implement applications linking Cairo to Evas.</p>
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the Cairo API basics by learning about:</p>
+<ul>
+<li><a href="#rectangle">Creating a Rectangle with a Black Border</a>
+<p>Create a PNG file containing a rectangle with a black border.</p></li>
+
+<li><a href="#graph">Displaying a Temperature Graph</a>
+<p>Link Cairo to Evas and display a temperature graph on the screen.</p></li>
+
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="rectangle" name="rectangle" class="items-tit-h2">Creating a Rectangle with a Black Border</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To be built with gcc -o cairo-ex1 cairo-ex1.c <span style="font-family: Courier New,Courier,monospace">pkg-config cairo --cflags --libs</span>. Launching the example creates a .png file containing a rectangle with a black border.</p>
+
+   <p class="figure">Figure: An Example of Cairo</p> 
+  <p style="text-align:center;"><img alt="An Example of Cairo" src="../../images/cairo-ex1.png" /></p>
+  
+<p>The following example shows how to run a simple application with Cairo and to create a file on the disk.</p>
+<p>To include the Cairo headers, use the following code.</p>
+<pre class="prettyprint">#include &lt;cairo.h&gt;
+#include &lt;app.h&gt;
+</pre>
+
+<p> The main function contains all the code. </p>
+<pre class="prettyprint">int main (int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+
+<p>To create a Cairo surface with a fixed size and to define the pixels format to ARGB32, use the following code. The color format is the same as the ARGB8888 of EFL.</p>
+<pre class="prettyprint">surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32, 240, 80);
+</pre>
+
+<p> To create a Cairo context with surface as a parameter, use the following code. This Cairo object is used for all painting operations.</p>
+<pre class="prettyprint">cairo = cairo_create (surface);
+</pre>
+<p> Cairo has many APIs for painting: APIs for example for changing the size of the pen, choosing the colors, or creating different forms such as circles, rectangles, paths and curves. The following example shows how to create a black rectangle.</p>
+<pre class="prettyprint">cairo_rectangle(cairo, 10, 10, 220, 60);
+cairo_stroke(cairo);
+</pre>
+<p>To render the surface on an image on a disk, use the following code.</p>
+<pre class="prettyprint">cairo_surface_write_to_png (surface, &quot;cairo-ex1.png&quot;);
+</pre>
+<p>To free all resources, use the following code.</p>
+<pre class="prettyprint">cairo_destroy (cairo);
+cairo_surface_destroy (surface);
+</pre>
+
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="graph" name="graph" class="items-tit-h2">Displaying a Temperature Graph</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>The graph example shows how to link Cairo to evas and how to display a temperature graph on the screen.</p>
+<p>To include the headers, use the following code.</p>
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+#include &lt;cairo.h&gt;
+#include &lt;app.h&gt;
+</pre>
+<p>To create an application data structure that contains all the pointers to objects to be manipulated, use the following code.</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;// All graphical objects here are pointers to the value of the type Evas_Object
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *image;
+&nbsp;&nbsp;&nbsp;cairo_t *cairo;
+&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;
+&nbsp;&nbsp;&nbsp;unsigned char *pixels;
+} appdata_s;
+</pre>
+<p> The main functions add only one callback to the Appcore. The callback is called when the application is created.</p>
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+<p>To create a window and a conformant container, use the <span style="font-family: Courier New,Courier,monospace">create_gui</span> function.</p>
+<pre class="prettyprint">static void
+create_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;int max_temp;
+&nbsp;&nbsp;&nbsp;int min_temp;
+&nbsp;&nbsp;&nbsp;int x, y;
+&nbsp;&nbsp;&nbsp;double det, a, b;
+&nbsp;&nbsp;&nbsp;int row_stride;
+
+&nbsp;&nbsp;&nbsp;// Create the 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;if (elm_win_wm_rotation_supported_get(ad-&gt;win))
+&nbsp;&nbsp;&nbsp;{
+&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, (const int *)(&amp;rots), 4);
+&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;ad-&gt;conformant = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conformant);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;win, 480, 300);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);
+</pre>
+
+<p>The following example shows how to create an evas_object image. We set it to enable alpha. The color format matches with the one we use in Cairo and we set it to ARGB8888; in other words, Red, Green, Blue and Alpha are coded on 8bits each. Set the size of the image, and set the fill settings to the same as the image size.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create an evas_object_image which contains the Cairo content 
+&nbsp;&nbsp;&nbsp;ad-&gt;image = evas_object_image_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;evas_object_image_alpha_set(ad-&gt;image, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_image_colorspace_set(ad-&gt;image, EVAS_COLORSPACE_ARGB8888);
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;image, WIDTH, HEIGHT);
+&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(ad-&gt;image, 0, 0, WIDTH, HEIGHT);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;image);
+</pre>
+<p>To create the Cairo surface, the pixels must be allocated, as they are the link between Cairo and evas. For that we need to know the whole size of the image by setting the row stride value.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);
+&nbsp;&nbsp;&nbsp;// Create the pixels 
+&nbsp;&nbsp;&nbsp;ad-&gt;pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
+&nbsp;&nbsp;&nbsp;// Create the cairo surface 
+&nbsp;&nbsp;&nbsp;ad-&gt;surface = cairo_image_surface_create_for_data(ad-&gt;pixels, CAIRO_FORMAT_ARGB32,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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);
+
+&nbsp;&nbsp;&nbsp;// Create the cairo context 
+&nbsp;&nbsp;&nbsp;ad-&gt;cairo = cairo_create (ad-&gt;surface);
+</pre>
+<p>Set evas to use the pixels created as pixels of the image with the following code.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Set the pixels created as image&#39;s pixels 
+&nbsp;&nbsp;&nbsp;evas_object_image_data_set(ad-&gt;image, ad-&gt;pixels);
+</pre>
+<p> In the following example, paint the axis of the graph with a 2px black pen. Set Cairo to move the pen at the position 10,10 and create a line between this point and the position 10, HEIGHT. This creates a vertical black line. Continue the line from the current point and to the position WIDTH, HEIGHT. This is the horizontal black line.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;cairo_set_source_rgb(ad-&gt;cairo, 0.0, 0.0, 0.0);
+&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo, 2);
+&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, 10, 10);
+&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, 10, HEIGHT);
+&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+</pre>
+<p> The data to be graphed is an array of 12 values in °C (Celsius degrees). Each value represents the mean temperature value of a month. The graph is linear on the X axis, because the index in the array represents the month. For the Y axis, transform the float value into the pixel position. To create a full scale graph, the minimum values are displayed at the lower position, and the maximum values at the upper position. To show the minimum and maximum values, iterate the data.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;max_temp = INT_MIN;
+&nbsp;&nbsp;&nbsp;min_temp = INT_MAX;
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; NB_TEMPS; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_temp = MAX(temperatures[i], max_temp);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min_temp = MIN(temperatures[i], min_temp);
+&nbsp;&nbsp;&nbsp;}
+</pre>
+<p>To resolve the two linear equations with two variables, use the following code.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;det = - (min_temp * 1 - max_temp * 1);
+&nbsp;&nbsp;&nbsp;a = (1 * 0 - 1 * HEIGHT) / det;
+&nbsp;&nbsp;&nbsp;b = (HEIGHT * max_temp - 0 * min_temp) / det;
+</pre>
+<p>To create a red grid, use the coefficient calculated previously. Five horizontal lines are painted, in every 10°C degrees, from -10°C to +40°C. Paint the 0°C with a 4px thick pen and the other lines with a 1px. For the vertical lines, the space between the lines is the width of the graph divided by 12 months.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Select the red color to paint the grid 
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 1.0, 0.0, 0.0, 0.5);
+&nbsp;&nbsp;&nbsp;// Paint horizontal lines in red, with a thicker line for 0°C 
+&nbsp;&nbsp;&nbsp;for (i = -10; i &lt;= 40; i += 5)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// For the 0°C line, set a thicker pen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i == 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo, 4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Calculate the y position 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = (int)(a * i + b);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, 10, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, WIDTH, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Paint the 11 verticals lines (the first one is already painted as the black y axis)
+&nbsp;&nbsp;&nbsp;for (i = 1; i &lt; 12; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = (int)(i * (WIDTH / NB_TEMPS) + 10);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, x, HEIGHT);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, x, 10);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+</pre>
+<p>Paint the graph line with a green color. As for the horizontal lines, use the same coefficient to find the correspondence between the temperature in °C and the value in pixels on the graph. Once the conversion is done, graph the line with the <span style="font-family: Courier New,Courier,monospace">cairo_line_to</span> API.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Set a green value for temperature graph 
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 0.5, 0.8, 0.3, 0.8);
+&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo, 10);
+&nbsp;&nbsp;&nbsp;// Iterate the array to get the temperature values of each month 
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; NB_TEMPS; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// x coordinate is easily calculated, because it is a multiple of the graph_size divided by the number of points 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = (int)(i * (WIDTH / NB_TEMPS) + 10);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the themp_to_pix function to set the y coordinate corresponding to the temp value 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = (int)(a * temperatures[i] + b);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to (ad-&gt;cairo, x, y);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+</pre>
+<p>Update the evas object image on the screen by calling</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(ad-&gt;image, 0, 0, WIDTH, HEIGHT);
+}</pre>
+
+<p>The picture below shows the application.</p>
+
+   <p class="figure">Figure: cairo-graph</p> 
+  <p style="text-align:center;"><img alt="cairo-graph" src="../../images/graph_app.png" /></p>
+
+                       </div>
+               </li>           
+               
+       
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm b/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm
new file mode 100644 (file)
index 0000000..42b55d3
--- /dev/null
+++ b/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Creating and Managing Graphics</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a class="opensection" href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Graphics: Creating and Managing Graphics</h1>      
+<p>The graphics tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p> 
+  <ul> 
+       <li><a href="opengl_tutorial_n.htm">OpenGL ES: Using OpenGL ES Graphics</a> <p>Demonstrates how you can use OpenGL ES graphics, OpenGL ES and EvasGL extensions, and implement multi-threaded applications.</p></li>
+       <li><a href="tbm_tutorial_n.htm">TBM Surface: Providing a Rendering Surface for the Tizen Framework</a> <p>Demonstrates how you can create and manage the Tizen Buffer Manager (TBM) surface.</p></li>
+       <li><a href="cairo_tutorial_n.htm">Cairo Integration: Linking Cairo and Evas</a> <p>Demonstrates how you can implement applications linking Cairo to Evas.</p></li> 
+       <li><a href="widget_tutorial_n.htm">Graphic Widget: Drawing Simple Images Using Evas Objects</a> <p>Demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL widget library.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
new file mode 100644 (file)
index 0000000..3fb796e
--- /dev/null
+++ b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
@@ -0,0 +1,2580 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>OpenGL ES: Using OpenGL ES Graphics</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">         
+                <li>GLView widget
+                        <ul class="toc">
+                               <li><a href="#basic" class="opensection">Creating the Basic Application</a></li>
+                               <li><a href="#cube" class="opensection">Creating the Cube</a></li>
+                               <li><a href="#draw" class="opensection">Drawing the Cube with GLView</a></li>
+                               <li><a href="#render" class="opensection">Rendering the Cube</a></li>
+                               <li><a href="#animate" class="opensection">Animating the Cube</a></li>
+                               <li><a href="#widget" class="opensection">Implementing Widget Interaction</a></li>
+                               <li><a href="#effect" class="opensection">Implementing Effects</a></li>
+                               <li><a href="#source" class="opensection">Viewing the Entire Cube Source</a></li>
+                       </ul>
+               </li>
+                <li><a class="opensection" href="#multithread">Using OpenGL ES in Multi-threaded Applications</a></li> 
+                <li><a class="opensection" href="#ext">Using OpenGL ES Extensions</a></li>
+            <li><a class="opensection" href="#evas_ext">Using EvasGL Extensions</a></li>
+            <li><a class="opensection" href="#direct">Using Direct Rendering</a></li>
+            <li><a class="opensection" href="#client">Using Client-side Rotation</a></li>       
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>OpenGL ES: Using OpenGL ES Graphics</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView widget and EvasGL.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the OpenGL ES API basics by learning about:</p>
+<ul>    
+         <li>GLView widget
+         <ul>
+               <li><a href="#basic">Creating the Basic Application</a>
+               <p>Create a basic application with a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by the GLView library.</p></li>
+               <li><a href="#cube">Creating the Cube</a>
+               <p>Create and color a cube.</p></li>
+               <li><a href="#draw">Drawing the Cube with GLView</a>
+               <p>Draw a cube.</p></li>
+               <li><a href="#render">Rendering the Cube</a>
+               <p>Render a cube.</p></li>
+               <li><a href="#animate">Animating the Cube</a>
+               <p>Create an animation.</p></li>
+               <li><a href="#widget">Implementing Widget Interaction</a>
+               <p>Create widgets that interact with the rendering.</p></li>
+               <li><a href="#effect">Implementing Effects</a>
+               <p>Create fancy effects for the screen.</p></li>
+               <li><a href="#source">Viewing the Entire Cube Source</a>
+               <p>View the entire source code of the cube example.</p></li>  
+         </ul>   </li>
+         <li><a href="#multithread">Using OpenGL ES in Multi-threaded Applications</a>
+         <p>Share OpenGL ES data across threads, synchronize data, and pass messages between threads.</p></li>
+         <li><a href="#ext">Using OpenGL ES Extensions</a>
+         <p>Check whether an extension is available, and call it.</p></li>
+         <li><a href="#evas_ext">Using EvasGL Extensions</a>
+         <p>Check whether an Evas extension is available, and use it.</p></li>
+         <li><a href="#direct">Using Direct Rendering</a>
+         <p>Enhance performance through the Direct Rendering option.</p></li>
+         <li><a href="#client">Using Client-side Rotation</a>
+         <p>Use client-side rotation when the application is using Direct Rendering.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">               
+       
+       
+<li>
+                       <div class="devicespec-tit">
+                               <h2 id="basic" name="basic" class="items-tit-h2">Creating the Basic Application</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>This tutorial demonstrates how to create a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.</p>
+<p>First create a basic application as explained in the Basic application tutorial. This provides a basic UI application skeleton which already makes available the window object that contains the GLView  canvas.</p>
+<h3>Building the Environment</h3>
+<p>Define the application data structure that holds all the objects pertinent for the GLView application:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window</li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *conform</span>: Conformant object for indicator</li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *glview</span>: GLView object</li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *main_box</span>: Box object which contains glview and inner_box</li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *inner_box</span>: Box object for toolbox</li>
+</ul>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *main_box;
+&nbsp;&nbsp;&nbsp;Evas_Object *inner_box;
+} appdata_s;
+</pre>
+
+<h3>OpenGL ES Canvas</h3>
+
+<p>When developing an application with Elementary, you can create a window by using the Elementary utility function as below:</p>
+
+<pre class="prettyprint">
+elm_config_accel_preference_set(&quot;opengl&quot;); 
+ad-&gt;win = elm_win_util_standard_add(&quot;GLView Example&quot;, &quot;GLView Example&quot;);</pre>
+
+<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> before creating a window which makes an application to use GPU.</p>
+
+<pre class="prettyprint">
+ad-&gt;glview = elm_glview_add(ad-&gt;main_box);</pre>
+
+<p>There are 2 different methods to call GL functions.</p>
+
+<ul class="ul"><li>First is to use Elementary GL Helper functions. You have to include <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> and define a global variable by using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>. Before calling gl functions, write <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span>. This tutorial uses this method. The usage is as follows.
+
+<pre class="prettyprint">
+#include &lt;Elementary_GL_Helpers.h&gt;
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
+
+static void create_gl_canvas(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
+}
+
+static void draw_gl(Evas_Object *obj) 
+{ 
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+}</pre></li>
+
+<li><p>Second, you can get the Evas_GL instance from <span style="font-family: Courier New,Courier,monospace">elm_glview_gl_api_get</span> function, then you can call the OpenGL ES functions with the instance.</p>
+
+<pre class="prettyprint">
+ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
+Evas_GL_API *glapi = elm_glview_gl_api_get(ad-&gt;glview);
+glapi-&gt;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);</pre></li></ul>
+
+<p>The next thing to do is to set the GLView mode. <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set(Evas_Object *obj, Elm_GLView_Mode mode)</span> supports alpha, depth, stencil, MSAA, and client_side_rotation.</p>
+
+<pre class="prettyprint">
+elm_glview_mode_set(ad-&gt;glview, ELM_GLVIEW_DEPTH);</pre>
+
+<p>To set up callbacks:</p>
+
+<pre class="prettyprint">
+elm_glview_init_func_set(ad-&gt;glview, init_gl);
+elm_glview_resize_func_set(ad-&gt;glview, resize_gl);
+elm_glview_render_func_set(ad-&gt;glview, draw_gl);
+elm_glview_del_func_set(ad-&gt;glview, del_gl);
+ani = ecore_animator_add(animate_cb, ad-&gt;glview);</pre>
+
+<ul class="ul">
+       <li>Callback for initialization
+       <p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created. This is called from the main loop, just as the 3 other callbacks.</p>
+       </li>
+       <li>Callback for resizing
+       <p>The resize callback is called whenever the GLView widget is resized. A common action to take here is to reset the viewport.</p>
+       </li>
+       <li>Callback for drawing
+       <p>The drawing callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>
+
+       <pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
+
+       <p>Another policy is ELM_GLVIEW_POLICY_ALWAYS, which requests render always even when it is not visible. So on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. Here it covers the whole window.</p>
+       </li>
+       <li>Callback for deleting
+       <p>The delete callback is triggered when the GLView is being destroyed, from the main loop, and no other callback can be called on the same object afterwards.</p>
+       </li>
+       <li>Add an animator.
+       <p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games might want to use an animator to have a regular update of the scene.</p>
+
+       <p>Any other event can be used to refresh the view, for example user input if the view needs to be updated.</p>
+       </li>
+</ul>
+
+
+         
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="cube" name="cube" class="items-tit-h2">Creating the Cube</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>Creating and the coloring the cube can be separated into two distinct tasks: define the vertices and then add the colors to the faces.</p>
+
+
+   <p class="figure">Figure: Cube</p> 
+  <p style="text-align:center;"><img alt="Cube" src="../../images/cube.png" /></p>
+
+
+<p>Declare an array that stores the vertices of the cube in order to make it look like the drawing above.</p>
+ <pre class="prettyprint">static const float vertices[] =
+{
+&nbsp;&nbsp;&nbsp;// Front
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;// Right
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;// Back
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;// Left
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;// Top
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;// Bottom
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f
+};
+</pre>
+
+   <p class="figure">Figure: Cube matrix</p> 
+  <p style="text-align:center;"><img alt="Cube matrix" src="../../images/cube_matrix.png" /></p>
+
+<p>Each triangle is defined with three point coordinates, three vertices for each triangle, two triangles per face and six faces, so there are 36 vertices is total.</p>
+<p>The next step is to specify a color for each face of the cube. Each color is represented in the RGBA format for the corresponding vertex, where each component is ranged from 0 to 1 where 1 is the maximum value. For example, in 32-byte color space, the RGB color of (16, 147, 237) is translated as (0.0625, 0.57421875, 0.92578125). The A of RGBA stands for the alpha channel, which represents the transparency of the color. All colors defined in this tutorial are opaque to make it simpler, so each alpha value is set to 1.0. In this example, different variants of blue are used for the faces of the cube.</p>
+<p>Specify the colors of the cube into an array dedicated to this vertex:</p>
+<pre class="prettyprint">static const float colors[] =
+{
+&nbsp;&nbsp;&nbsp;// Front
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Right
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Back
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Left
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Top
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Bottom
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f
+};
+</pre>
+
+                       </div>
+               </li>           
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="draw" name="draw" class="items-tit-h2">Drawing the Cube with GLView</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<h3>Mathematical Functions for Matrices</h3>
+<p>After the model is initialized, create functionality to manipulate the scene. OpenGL ES 2.0 provided by GLView  requires more preliminary work that the previous version of the library, but  gives more power and flexibility, although our example does not take much benefit.</p>
+<p>First, declare additional global variables for tasks specific to OpenGL ES 2.0. A program object is needed, an identifier for the vertices buffer and another for the colors. Three variables are also required to ensure the connection with the shader language:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">mvpLoc</span> is an identifier for model-view-projection matrix.</li>
+<li><span style="font-family: Courier New,Courier,monospace">positionLoc</span> is an identifier for the vertex position.</li>
+<li><span style="font-family: Courier New,Courier,monospace">colorLoc</span> is an identifier for the vertex color.</li>
+</ul>
+<p>Declare all these variables in the appdata object as static variables so that each function can use variables and that they exist for the whole duration of the program.</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;unsigned int     program;
+&nbsp;&nbsp;&nbsp;unsigned int     vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int     fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int     vertexID;
+&nbsp;&nbsp;&nbsp;unsigned int     colorID;
+&nbsp;&nbsp;&nbsp;unsigned int     mvpLoc;
+&nbsp;&nbsp;&nbsp;unsigned int     positionLoc;
+&nbsp;&nbsp;&nbsp;unsigned int     colorLoc;
+}
+</pre>
+<p>Since OpenGL ES 2.0, some functions for matrix transformations have been removed. Define three matrices to use: projection matrix, model-view matrix, and a combination of these allows you to perform any transformations on the initial vertices matrix.</p>
+
+<h4>Matrix Multiplication Function (glMultMatrix)</h4>
+<p>First, define a function that is able to return the inner  product of two matrices. This function reproduces the behavior of <span style="font-family: Courier New,Courier,monospace">glMultMatrix()</span> available in OpenGL ES 1.1. This function is very useful since almost every matrix transformation can be translated as multiplications of matrices.</p>
+<p>The function takes three arguments, one is for the result and the other 2 matrices are operands:</p>
+<pre class="prettyprint">static void
+customMutlMatrix(float matrix[16], const float matrix0[16], const float matrix1[16])
+{
+&nbsp;&nbsp;&nbsp;int i, row, column;
+&nbsp;&nbsp;&nbsp;float temp[16];
+&nbsp;&nbsp;&nbsp;for (column = 0; column &lt; 4; column++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (row = 0; row &lt; 4; row++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] = 0.0f;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 4; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] += matrix0[i * 4 + row] * matrix1[column * 4 + i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 16; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = temp[i];
+}
+</pre>
+<h4>Matrix Identity Function (glLoadIdentity)</h4>
+
+<p>Implement a function equivalent to <span style="font-family: Courier New,Courier,monospace">glLoadIdentity()</span> that replaces the current matrix with the identity matrix:</p>
+<pre class="prettyprint">const float unit_matrix[] = 
+{
+&nbsp;&nbsp;&nbsp;1.0f, 0.0f, 0.0f, 0.0f,
+&nbsp;&nbsp;&nbsp;0.0f, 1.0f, 0.0f, 0.0f,
+&nbsp;&nbsp;&nbsp;0.0f, 0.0f, 1.0f, 0.0f,
+&nbsp;&nbsp;&nbsp;0.0f, 0.0f, 0.0f, 1.0f
+}
+
+static void
+customLoadIdentity(float matrix[16])
+{
+&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; 16; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = unit_matrix[i];
+}
+</pre>
+
+<h4>Matrix Projection Function (glFrustum)</h4>
+<p>Since <span style="font-family: Courier New,Courier,monospace">glFrustum</span> has been depreciated, implement a function that produces perspective projection matrices that are used to transform from eye coordinate space to clip coordinate space. This matrix projects a portion of the space (the &quot;fustum&quot;) to your screen. Many caveats apply (normalized device coordinates, perspective divide, etc), but that is the idea:</p>
+<pre class="prettyprint">static int
+customFrustum(float result[16], 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float left,   const float right, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float bottom, const float top, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float near,   const float far)
+{
+&nbsp;&nbsp;&nbsp;if ((right - left) == 0.0f || (top - bottom) == 0.0f || (far - near) == 0.0f) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+
+&nbsp;&nbsp;&nbsp;result[0] = 2.0f / (right - left);
+&nbsp;&nbsp;&nbsp;result[1] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[2] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[3] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;result[4] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[5] = 2.0f / (top - bottom);
+&nbsp;&nbsp;&nbsp;result[6] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[7] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;result[8] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[9] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[10] = -2.0f / (far - near);
+&nbsp;&nbsp;&nbsp;result[11] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;result[12] = -(right + left) / (right - left);
+&nbsp;&nbsp;&nbsp;result[13] = -(top + bottom) / (top - bottom);
+&nbsp;&nbsp;&nbsp;result[14] = -(far + near) / (far - near);
+&nbsp;&nbsp;&nbsp;result[15] = 1.0f;
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+</pre>
+
+<h4>Matrix Scaling Function (glScale)</h4>
+<p>Depreciated <span style="font-family: Courier New,Courier,monospace">glScale()</span> function represents  a non-uniform scaling along the x, y, and z axes. The three parameters indicate the desired scale factor along each of the three axes:</p>
+<pre class="prettyprint">const float scale_matrix[] = 
+{
+&nbsp;&nbsp;&nbsp;x,    0.0f, 0.0f, 0.0f,
+&nbsp;&nbsp;&nbsp;0.0f, y,    0.0f, 0.0f,
+&nbsp;&nbsp;&nbsp;0.0f, 0.0f, z,    0.0f,
+&nbsp;&nbsp;&nbsp;0.0f, 0.0f, 0.0f, 1.0f
+}
+</pre>
+<p>Here is the implementation of the matrix scaling function:</p>
+<pre class="prettyprint">static void
+customScale(float matrix[16], const float sx, const float sy, const float sz)
+{ 
+&nbsp;&nbsp;&nbsp;matrix[0]  *= sx; 
+&nbsp;&nbsp;&nbsp;matrix[1]  *= sx; 
+&nbsp;&nbsp;&nbsp;matrix[2]  *= sx; 
+&nbsp;&nbsp;&nbsp;matrix[3]  *= sx; 
+
+&nbsp;&nbsp;&nbsp;matrix[4]  *= sy; 
+&nbsp;&nbsp;&nbsp;matrix[5]  *= sy; 
+&nbsp;&nbsp;&nbsp;matrix[6]  *= sy; 
+&nbsp;&nbsp;&nbsp;matrix[7]  *= sy; 
+
+&nbsp;&nbsp;&nbsp;matrix[8]  *= sz; 
+&nbsp;&nbsp;&nbsp;matrix[9]  *= sz; 
+&nbsp;&nbsp;&nbsp;matrix[10] *= sz; 
+&nbsp;&nbsp;&nbsp;matrix[11] *= sz; 
+}
+</pre>
+
+<h4>Matrix Rotation Function (glRotate)</h4>
+<p>Define a function to represent a rotation by the vector (x y z). The current matrix is multiplied by a rotation matrix:</p>
+<pre class="prettyprint">static void
+customRotate(float matrix[16], const float anglex, const float angley, const floatanglez)
+{
+&nbsp;&nbsp;&nbsp;const float pi = 3.141592f;
+&nbsp;&nbsp;&nbsp;float temp[16];
+&nbsp;&nbsp;&nbsp;float rz = 2.0f * pi * anglez / 360.0f;
+&nbsp;&nbsp;&nbsp;float rx = 2.0f * pi * anglex / 360.0f;
+&nbsp;&nbsp;&nbsp;float ry = 2.0f * pi * angley / 360.0f;
+&nbsp;&nbsp;&nbsp;float sy = sinf(ry);
+&nbsp;&nbsp;&nbsp;float cy = cosf(ry);
+&nbsp;&nbsp;&nbsp;float sx = sinf(rx);
+&nbsp;&nbsp;&nbsp;float cx = cosf(rx);
+&nbsp;&nbsp;&nbsp;float sz = sinf(rz);
+&nbsp;&nbsp;&nbsp;float cz = cosf(rz);
+
+&nbsp;&nbsp;&nbsp;customLoadIdentity(temp);
+
+&nbsp;&nbsp;&nbsp;temp[0] = cy * cz - sx * sy * sz;
+&nbsp;&nbsp;&nbsp;temp[1] = cz * sx * sy + cy * sz;
+&nbsp;&nbsp;&nbsp;temp[2] = -cx * sy;
+
+&nbsp;&nbsp;&nbsp;temp[4] = -cx * sz;
+&nbsp;&nbsp;&nbsp;temp[5] = cx * cz;
+&nbsp;&nbsp;&nbsp;temp[6] = sx;
+
+&nbsp;&nbsp;&nbsp;temp[8] = cz * sy + cy * sx * sz;
+&nbsp;&nbsp;&nbsp;temp[9] = -cy * cz * sx + sy * sz;
+&nbsp;&nbsp;&nbsp;temp[10] = cx * cy;
+
+&nbsp;&nbsp;&nbsp;customMultMatrix(matrix, matrix, temp);
+}
+</pre>
+
+<h3>Create the Shader</h3>
+<p>Define the source for the shader using a string array. First comes out vertex shader, which is used to a medium precision for float values. Then build a uniform matrix with dimensions 4x4 intended to hold the model-view-projection matrix. Also create two vector attributes which have 4 components for the vertex position and the color. This varying variable <span style="font-family: Courier New,Courier,monospace">v_color</span> can be accessed from the fragment shader. In the main function of the shader, initialize the position of the current vertex, <span style="font-family: Courier New,Courier,monospace">gl_Position</span>, with the product of the vertex position and the model-view-projection matrix, in order to normalize the position for the target screen. The pixel color is calculated by the varying variable from the vertex shader.</p>
+<p>In the fragment shader, declare a varying variable, then set the color of the pixel with this interpolated color.</p>
+<pre class="prettyprint">static const char vertex_shader[] =
+&nbsp;&nbsp;&nbsp;&quot;precision mediump float;&quot;
+&nbsp;&nbsp;&nbsp;&quot;uniform mat4 u_mvpMat;&quot;
+&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_position;&quot;
+&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;varying vec4 v_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
+&nbsp;&nbsp;&nbsp;&quot;{&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;gl_Position = u_mvpMat * a_position;&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;v_color = a_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;}&quot;;
+
+static const char fragment_shader[] =
+&nbsp;&nbsp;&nbsp;&quot;varying lowp vec4 v_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
+&nbsp;&nbsp;&nbsp;&quot;{&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;gl_FragColor = v_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;}&quot;;
+</pre>
+<p>Create the shaders, attach the source code that is just defined and compile the program object:</p>
+<pre class="prettyprint">static void
+initShaders(void* data)
+{
+&nbsp;&nbsp;&nbsp;const char *p;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;p = vertex_shader;
+&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
+
+&nbsp;&nbsp;&nbsp;p = fragment_shader;
+&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
+</pre>
+<p>Once the shaders are ready, instantiate the program object and link the shaders. If the linking succeeds, you can destroy the shaders afterwards (using <span style="font-family: Courier New,Courier,monospace">glDeleteShader</span>). Since they are inside the program object, so it is pointless to keep them in memory.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
+
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
+
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
+
+&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
+</pre>
+
+<p>For shader process, create identifiers for the attribute variables used in the shader program. First create an identifier for the model-view-projection matrix, another one for the current vertex position, and a last one for the vertex color.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;ad-&gt;mvpLoc      = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMat&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;positionLoc = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;colorLoc    = glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
+</pre>
+
+<p>Finally, generate the buffers for the vertex positions and colors.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vertexID);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
+&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
+
+&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;colorID);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
+&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
+}
+</pre>
+
+<p>Allocate memory for the matrix and load a unit matrix into it. Then define the value that is used in order to build the perspective projection matrix. The <span style="font-family: Courier New,Courier,monospace">customFrustum()</span> function is used for it. Multiply this resulting matrix with a resizing matrix, so the model is correctly adjusted to the screen.</p>
+<pre class="prettyprint">
+float aspect;
+customLoadIdentity(view);
+
+if (w &gt; h) 
+{
+&nbsp;&nbsp;&nbsp;aspect = (float)w/h;
+&nbsp;&nbsp;&nbsp;customFrustum(view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
+}
+else 
+{
+&nbsp;&nbsp;&nbsp;aspect = (float)h/w;
+&nbsp;&nbsp;&nbsp;customFrustum(view, -1.0, 1.0, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
+}
+</pre>
+
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="render" name="render" class="items-tit-h2">Rendering the Cube</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>We set the viewport at 0,0 corresponding to the bottom left edge of the window, and the height and width of the GL surface. Clear the depth and the color buffers to the values that were selected during initialization. Then call the <span style="font-family: Courier New,Courier,monospace">glUseProgram()</span> function in order to trigger the shader program.</p>
+<pre class="prettyprint">glViewport(0, 0, w, h);
+glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+glUseProgram(ad-&gt;program);
+</pre>
+
+<p>Also bind the position and color identifiers to the buffers defined above.</p>
+<pre class="prettyprint">glEnableVertexAttribArray(ad-&gt;positionLoc);
+glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
+glVertexAttribPointer(ad-&gt;positionLoc, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);
+
+glEnableVertexAttribArray(ad-&gt;colorLoc);
+glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
+glVertexAttribPointer(ad-&gt;colorLoc, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(float), 0);
+</pre>
+
+<p>After this, initialize and calculate the transformation matrix of the model-view matrix by calling the <span style="font-family: Courier New,Courier,monospace">customRotate()</span> function. This makes the cube view rotate a little for a better perspective. Once the model-view matrix is ready to display, multiply the projection matrix with the model-view matrix.</p>
+<pre class="prettyprint">customLoadIdentity(model);
+customRotate(ad-&gt;model, 45.0f, 45.0f, 0.0f);
+customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
+</pre>
+
+<p>Then load the model-view-projection matrix into the shader and call <span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> to draw the model.</p>
+<pre class="prettyprint">glUniformMatrix4fv(ad-&gt;mvpLoc, 1, GL_FALSE, mvp);
+glDrawArrays(GL_TRIANGLES, 0, 36);
+glFlush();
+</pre>
+
+<p>You now are the proud owner of a nice cube!</p>
+
+   <p class="figure">Figure: Static cube</p> 
+  <p style="text-align:center;"><img alt="Static cube" src="../../images/static_cube.png" /></p>
+
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="animate" name="animate" class="items-tit-h2">Animating the Cube</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p><span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> is used to create an animation.</p>
+<pre class="prettyprint">static Eina_Bool
+animate_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+static void
+create_gl_canvas(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;ani = ecore_animator_add(animate_cb, ad-&gt;glview);
+}
+</pre>
+
+<p>Next define the global variables which are used as parameters of the rendering process. Add parameters to the application data object that are used to control the scaling and the rotation of the cube. To make the cube rotate on one axis, take z, and allow the user to interact with the mouse to make the cube rotate on the two other axes x and y. In order to figure out whether the user is holding the mouse down, add a Boolean variable to have this information. Operations such as shader initialization or program compilation are not required at each tick of the animation loop. For better performance, isolate such task from the repetitive rendering loop. For such purpose, add a Boolean variable which tells whether the initialization is already done.</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;float xangle;
+&nbsp;&nbsp;&nbsp;float yangle;
+&nbsp;&nbsp;&nbsp;float zangle;
+&nbsp;&nbsp;&nbsp;Eina_Bool mouse_down : 1;
+&nbsp;&nbsp;&nbsp;Eina_Bool initialized : 1;
+}  appdata_s;
+</pre>
+
+<p>Here are the modifications that must be done to the rendering loop for animation.</p>
+<p>First, lighten the recurrent rendering process by adding an initialization step:</p>
+<pre class="prettyprint">if (ad-&gt;initialized) 
+{
+&nbsp;&nbsp;&nbsp;initShaders(ad);
+&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
+}
+</pre>
+
+<p>Before drawing the vertices, the rotation angle for the model-view matrix must be incremented for every tick.</p>
+<pre class="prettyprint">customLoadIdentity(ad-&gt;model);
+customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
+customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
+</pre>
+
+<p>This makes the cube rotate automatically. The next thing is to use the mouse to drag the cube around. To do so, add callbacks for mouse events. The first callback defines whether the user is holding the mouse down while moving the cursor around:</p>
+<pre class="prettyprint">static void
+mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
+}
+
+static void
+mouse_up_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
+}
+</pre>
+
+<p>When the mouse is down, calculate the new rotation angle with the mouse movement along the x and y axis:</p>
+<pre class="prettyprint">static void
+mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
+&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *)event_info;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;
+
+&nbsp;&nbsp;&nbsp;if(ad-&gt;mouse_down) 
+&nbsp;&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;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Define the mouse events callbacks when creating the image canvas:</p>
+<pre class="prettyprint">evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+</pre>
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="widget" name="widget" class="items-tit-h2">Implementing Widget Interaction</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>Consider using widget to control some aspects of the rendering. For example, use some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *slx;
+&nbsp;&nbsp;&nbsp;Evas_Object *sly;
+&nbsp;&nbsp;&nbsp;Evas_Object *slz;
+}
+</pre>
+
+<p>When rendering the GUI, build and show the sliders. Those accept values in a range from 0.0 to 1.5 and control the scaling of each axis of the cube.</p>
+<pre class="prettyprint">// Slider for X-axis scale
+ad-&gt;slx = elm_slider_add(ad-&gt;inner_box);
+evas_object_size_hint_align_set(ad-&gt;slx, EVAS_HINT_FILL, 0);
+elm_slider_horizontal_set(ad-&gt;slx, EINA_TRUE);
+elm_slider_unit_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
+elm_slider_indicator_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
+elm_slider_indicator_show_set(ad-&gt;slx, EINA_TRUE);
+elm_slider_min_max_set(ad-&gt;slx, 0, 1.5);
+elm_slider_value_set(ad-&gt;slx, 0.75);
+evas_object_color_set(ad-&gt;slx, 0.0, 0.0, 120, 255);
+elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slx);
+evas_object_show(ad-&gt;slx);
+
+// Slider for Y-axis scale
+ad-&gt;sly = elm_slider_add(ad-&gt;inner_box);
+evas_object_size_hint_align_set(ad-&gt;sly, EVAS_HINT_FILL, 0);
+elm_slider_horizontal_set(ad-&gt;sly, EINA_TRUE);
+elm_slider_unit_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
+elm_slider_indicator_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
+elm_slider_indicator_show_set(ad-&gt;sly, EINA_TRUE);
+elm_slider_min_max_set(ad-&gt;sly, 0, 1.5);
+elm_slider_value_set(ad-&gt;sly, 0.75);
+evas_object_color_set(ad-&gt;sly, 0.0, 0.0, 120, 255);
+elm_box_pack_end(ad-&gt;inner_box, ad-&gt;sly);
+evas_object_show(ad-&gt;sly);
+
+// Slider for Z-axis scale
+ad-&gt;slz = elm_slider_add(ad-&gt;inner_box);
+evas_object_size_hint_align_set(ad-&gt;slz, EVAS_HINT_FILL, 0);
+elm_slider_horizontal_set(ad-&gt;slz, EINA_TRUE);
+elm_slider_unit_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
+elm_slider_indicator_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
+elm_slider_indicator_show_set(ad-&gt;slz, EINA_TRUE);
+elm_slider_min_max_set(ad-&gt;slz, 0, 1.5);
+elm_slider_value_set(ad-&gt;slz, 0.75);
+evas_object_color_set(ad-&gt;slz, 0.0, 0.0, 120, 255);
+elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slz);
+evas_object_show(ad-&gt;slz);
+</pre>
+
+<p>Then use the actual sliders&#39;s values and pass them to the scaling function in the rendering loop:</p>
+<pre class="prettyprint">double scalex = elm_slider_value_get(ad-&gt;slx);
+double scaley = elm_slider_value_get(ad-&gt;sly);
+double scalez = elm_slider_value_get(ad-&gt;slz);
+
+customLoadIdentity(ad-&gt;model);
+customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
+customScale(ad-&gt;model, scalex, scaley, scalez);
+customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
+</pre>
+
+<p>Consider also using a colorpicker to change the background. To achieve this, add a colorselector widget:</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *cs;
+}
+</pre>
+
+<p>Build the widget with a default palette and add it to the GUI:</p>
+<pre class="prettyprint">ad-&gt;cs = elm_colorselector_add(ad-&gt;inner_box);
+elm_colorselector_mode_set(ad-&gt;cs, ELM_COLORSELECTOR_BOTH);
+elm_colorselector_palette_name_set(ad-&gt;cs, &quot;default&quot;);
+elm_box_pack_end(ad-&gt;inner_box, ad-&gt;cs);
+evas_object_show(ad-&gt;cs);
+</pre>
+
+<p>When rendering the cube, retrieve the currently selected color to define the color buffer. The colors from the colorselector vary from 0 to 255, which  needs to be converted to the color format of OpenGL ES.</p>
+<p>Build the widget with a default palette and add it to the GUI:</p>
+<pre class="prettyprint">int r, g, b, a;
+elm_colorselector_color_get(ad-&gt;cs, &amp;r, &amp;g, &amp;b, &amp;a);
+glClearColor(r/255.0, g/255.0, b/255.0, a/255.0);
+glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+</pre>
+
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="effect" name="effect" class="items-tit-h2">Implementing Effects</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>Create a button that resets the scene by putting the background color to black and makes the cube bounce back to its original scale. First add the button to the application data object:</p>
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+}
+</pre>
+
+<p>Then add the button to the GUI:</p>
+<pre class="prettyprint">elm_object_text_set(ad-&gt;button, &quot;Reset&quot;);
+elm_box_pack_start(ad-&gt;reset_vbox, ad-&gt;button);
+evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, btn_reset_cb, ad);
+elm_box_pack_end(ad-&gt;inner_box, ad-&gt;button);
+evas_object_show(ad-&gt;button);
+</pre>
+
+<p>Declare a callback that resets the variables that have influence on the drawing of the cube. In addition, animate the sliders when they get back to their original position using <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>.</p>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;float slx_value;
+&nbsp;&nbsp;&nbsp;float sly_value;
+&nbsp;&nbsp;&nbsp;float slz_value;
+} appdata_s;
+
+static Eina_Bool
+animate_reset_cb(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;double frame = pos;
+&nbsp;&nbsp;&nbsp;float x, y, z;
+
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
+&nbsp;&nbsp;&nbsp;x = ad-&gt;slx_value*(1-frame) + 0.75*frame;
+&nbsp;&nbsp;&nbsp;y = ad-&gt;sly_value*(1-frame) + 0.75*frame;
+&nbsp;&nbsp;&nbsp;z = ad-&gt;slz_value*(1-frame) + 0.75*frame;
+
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slx, x);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;sly, y);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slz, z);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+static void
+btn_reset_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;slx_value = elm_slider_value_get(ad-&gt;slx);
+&nbsp;&nbsp;&nbsp;ad-&gt;sly_value = elm_slider_value_get(ad-&gt;sly);
+&nbsp;&nbsp;&nbsp;ad-&gt;slz_value = elm_slider_value_get(ad-&gt;slz);
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, animate_reset_cb, ad);
+}
+</pre>
+
+                       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="source" name="source" class="items-tit-h2">Viewing the Entire Cube Source</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>The following code snippet contains the full code of the cube example. The details are explained in the other use cases.</p>
+<pre class="prettyprint">/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ */
+
+#include &lt;app.h&gt;
+#include &lt;Elementary.h&gt;
+#include &lt;Elementary_GL_Helpers.h&gt;
+#include &lt;efl_extension.h&gt;
+#include &lt;dlog.h&gt;
+
+#if !defined(PACKAGE)
+#define PACKAGE &quot;org.tizen.glviewtutorial&quot;
+#endif
+
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
+
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;// Elm_Widgets
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;
+&nbsp;&nbsp;&nbsp;Evas_Object *main_box;
+&nbsp;&nbsp;&nbsp;Evas_Object *inner_box;
+&nbsp;&nbsp;&nbsp;Evas_Object *slx;
+&nbsp;&nbsp;&nbsp;Evas_Object *sly;
+&nbsp;&nbsp;&nbsp;Evas_Object *slz;
+&nbsp;&nbsp;&nbsp;Evas_Object *cs;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;unsigned int     program;
+&nbsp;&nbsp;&nbsp;unsigned int     vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int     fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int     vertexID;
+&nbsp;&nbsp;&nbsp;unsigned int     colorID;
+&nbsp;&nbsp;&nbsp;unsigned int&nbsp;&nbsp;&nbsp; mvpLoc;
+&nbsp;&nbsp;&nbsp;unsigned int&nbsp;&nbsp;&nbsp; positionLoc;
+&nbsp;&nbsp;&nbsp;unsigned int&nbsp;&nbsp;&nbsp; colorLoc;
+&nbsp;&nbsp;&nbsp;float                         model[16], mvp[16];
+&nbsp;&nbsp;&nbsp;float                         view[16];
+&nbsp;&nbsp;&nbsp;float            xangle;
+&nbsp;&nbsp;&nbsp;float            yangle;
+&nbsp;&nbsp;&nbsp;float            zangle;
+&nbsp;&nbsp;&nbsp;Eina_Bool        mouse_down : 1;
+&nbsp;&nbsp;&nbsp;Eina_Bool        initialized : 1;
+
+&nbsp;&nbsp;&nbsp;float            slx_value;
+&nbsp;&nbsp;&nbsp;float            sly_value;
+&nbsp;&nbsp;&nbsp;float            slz_value;
+} appdata_s;
+
+
+static const float vertices[] =
+{
+&nbsp;&nbsp;&nbsp;// Front
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;// Right
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;// Back
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;// Left
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;// Top
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;// Bottom
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
+&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
+&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f
+};
+
+static const float colors[] =
+{
+&nbsp;&nbsp;&nbsp;// Front
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Right
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Back
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Left
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Top
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;// Bottom
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
+&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f
+};
+
+/* Vertex Shader Source */
+static const char vertex_shader[] =
+&nbsp;&nbsp;&nbsp;&quot;precision mediump float;&quot;
+&nbsp;&nbsp;&nbsp;&quot;uniform mat4 u_mvpMat;&quot;
+&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_position;&quot;
+&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;varying vec4 v_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
+&nbsp;&nbsp;&nbsp;&quot;{&quot;
+&nbsp;&nbsp;&nbsp;&quot;&nbsp;&nbsp;&nbsp;gl_Position = u_mvpMat * a_position;&quot;
+&nbsp;&nbsp;&nbsp;&quot;&nbsp;&nbsp;&nbsp;v_color = a_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;}&quot;;
+
+/* Fragment Shader Source */
+static const char fragment_shader[] =
+&nbsp;&nbsp;&nbsp;&quot;varying lowp vec4 v_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
+&nbsp;&nbsp;&nbsp;&quot;{&quot;
+&nbsp;&nbsp;&nbsp;&quot;&nbsp;&nbsp;&nbsp;gl_FragColor = v_color;&quot;
+&nbsp;&nbsp;&nbsp;&quot;}&quot;;
+
+static void
+customLoadIdentity(float matrix[16])
+{
+&nbsp;&nbsp;&nbsp;matrix[0] = 1.0f;
+&nbsp;&nbsp;&nbsp;matrix[1] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[2] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[3] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;matrix[4] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[5] = 1.0f;
+&nbsp;&nbsp;&nbsp;matrix[6] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[7] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;matrix[8] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[9] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[10] = 1.0f;
+&nbsp;&nbsp;&nbsp;matrix[11] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;matrix[12] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[13] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[14] = 0.0f;
+&nbsp;&nbsp;&nbsp;matrix[15] = 1.0f;
+}
+
+static void
+customMutlMatrix(float matrix[16], const float matrix0[16], const float matrix1[16])
+{
+&nbsp;&nbsp;&nbsp;int i, row,column;
+&nbsp;&nbsp;&nbsp;float temp[16];
+&nbsp;&nbsp;&nbsp;for (column = 0; column &lt; 4; column++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (row = 0; row &lt; 4; row++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] = 0.0f;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 4; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] += matrix0[i * 4 + row] * matrix1[column * 4 + i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 16; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = temp[i];
+}
+
+static void
+customScale(float matrix[16], const float sx, const float sy, const float sz)
+{
+&nbsp;&nbsp;&nbsp;matrix[0]  *= sx;
+&nbsp;&nbsp;&nbsp;matrix[1]  *= sx;
+&nbsp;&nbsp;&nbsp;matrix[2]  *= sx;
+&nbsp;&nbsp;&nbsp;matrix[3]  *= sx;
+
+&nbsp;&nbsp;&nbsp;matrix[4]  *= sy;
+&nbsp;&nbsp;&nbsp;matrix[5]  *= sy;
+&nbsp;&nbsp;&nbsp;matrix[6]  *= sy;
+&nbsp;&nbsp;&nbsp;matrix[7]  *= sy;
+
+&nbsp;&nbsp;&nbsp;matrix[8]  *= sz;
+&nbsp;&nbsp;&nbsp;matrix[9]  *= sz;
+&nbsp;&nbsp;&nbsp;matrix[10] *= sz;
+&nbsp;&nbsp;&nbsp;matrix[11] *= sz;
+}
+
+static void
+customRotate(float matrix[16], const float anglex, const float angley, const float anglez)
+{
+&nbsp;&nbsp;&nbsp;const float pi = 3.141592f;
+&nbsp;&nbsp;&nbsp;float temp[16];
+&nbsp;&nbsp;&nbsp;float rz = 2.0f * pi * anglez / 360.0f;
+&nbsp;&nbsp;&nbsp;float rx = 2.0f * pi * anglex / 360.0f;
+&nbsp;&nbsp;&nbsp;float ry = 2.0f * pi * angley / 360.0f;
+&nbsp;&nbsp;&nbsp;float sy = sinf(ry);
+&nbsp;&nbsp;&nbsp;float cy = cosf(ry);
+&nbsp;&nbsp;&nbsp;float sx = sinf(rx);
+&nbsp;&nbsp;&nbsp;float cx = cosf(rx);
+&nbsp;&nbsp;&nbsp;float sz = sinf(rz);
+&nbsp;&nbsp;&nbsp;float cz = cosf(rz);
+
+&nbsp;&nbsp;&nbsp;customLoadIdentity(temp);
+
+&nbsp;&nbsp;&nbsp;temp[0] = cy * cz - sx * sy * sz;
+&nbsp;&nbsp;&nbsp;temp[1] = cz * sx * sy + cy * sz;
+&nbsp;&nbsp;&nbsp;temp[2] = -cx * sy;
+
+&nbsp;&nbsp;&nbsp;temp[4] = -cx * sz;
+&nbsp;&nbsp;&nbsp;temp[5] = cx * cz;
+&nbsp;&nbsp;&nbsp;temp[6] = sx;
+
+&nbsp;&nbsp;&nbsp;temp[8] = cz * sy + cy * sx * sz;
+&nbsp;&nbsp;&nbsp;temp[9] = -cy * cz * sx + sy * sz;
+&nbsp;&nbsp;&nbsp;temp[10] = cx * cy;
+
+&nbsp;&nbsp;&nbsp;customMutlMatrix(matrix, matrix, temp);
+}
+
+static int
+customFrustum(float result[16], const float left, const float right, const float bottom, const float top, const float near, const float far)
+{
+&nbsp;&nbsp;&nbsp;if ((right - left) == 0.0f || (top - bottom) == 0.0f || (far - near) == 0.0f) return 0;
+
+&nbsp;&nbsp;&nbsp;result[0] = 2.0f / (right - left);
+&nbsp;&nbsp;&nbsp;result[1] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[2] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[3] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;result[4] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[5] = 2.0f / (top - bottom);
+&nbsp;&nbsp;&nbsp;result[6] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[7] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;result[8] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[9] = 0.0f;
+&nbsp;&nbsp;&nbsp;result[10] = -2.0f / (far - near);
+&nbsp;&nbsp;&nbsp;result[11] = 0.0f;
+
+&nbsp;&nbsp;&nbsp;result[12] = -(right + left) / (right - left);
+&nbsp;&nbsp;&nbsp;result[13] = -(top + bottom) / (top - bottom);
+&nbsp;&nbsp;&nbsp;result[14] = -(far + near) / (far - near);
+&nbsp;&nbsp;&nbsp;result[15] = 1.0f;
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+
+static void
+initShaders(void* data)
+{
+&nbsp;&nbsp;&nbsp;const char *p;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;p = vertex_shader;
+&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
+
+&nbsp;&nbsp;&nbsp;p = fragment_shader;
+&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
+
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
+
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
+
+&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;mvpLoc&nbsp;&nbsp;&nbsp;  = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMat&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;positionLoc = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;colorLoc&nbsp;&nbsp;&nbsp;= glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
+}
+
+static void init_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initShaders(ad);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vertexID);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;colorID);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+}
+
+void resize_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;float aspect;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;customLoadIdentity(ad-&gt;view);
+
+&nbsp;&nbsp;&nbsp;if (w &gt; h) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float) w / h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;customFrustum(ad-&gt;view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float) h / w;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;customFrustum(ad-&gt;view, -1.0, 1.0, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void draw_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;int r, g, b, a;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+
+&nbsp;&nbsp;&nbsp;double scalex = elm_slider_value_get(ad-&gt;slx);
+&nbsp;&nbsp;&nbsp;double scaley = elm_slider_value_get(ad-&gt;sly);
+&nbsp;&nbsp;&nbsp;double scalez = elm_slider_value_get(ad-&gt;slz);
+
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;elm_colorselector_color_get(ad-&gt;cs, &amp;r, &amp;g, &amp;b, &amp;a);
+
+&nbsp;&nbsp;&nbsp;glClearDepthf(1.0f);
+&nbsp;&nbsp;&nbsp;glClearColor(r / 255.0, g / 255.0, b / 255.0, a / 255.0);
+&nbsp;&nbsp;&nbsp;glEnable(GL_CULL_FACE);
+
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);
+
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;positionLoc);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;positionLoc, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);
+
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;colorLoc);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;colorLoc, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(float), 0);
+
+&nbsp;&nbsp;&nbsp;customLoadIdentity(ad-&gt;model);
+&nbsp;&nbsp;&nbsp;customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
+&nbsp;&nbsp;&nbsp;customScale(ad-&gt;model, scalex, scaley, scalez);
+&nbsp;&nbsp;&nbsp;customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
+
+&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;mvpLoc, 1, GL_FALSE, ad-&gt;mvp);
+&nbsp;&nbsp;&nbsp;glDrawArrays(GL_TRIANGLES, 0, 36);
+
+&nbsp;&nbsp;&nbsp;glFlush();
+}
+
+static void del_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
+&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);
+
+&nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);
+}
+
+static Eina_Bool animate_cb(void *data) 
+{
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+static void del_animate_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Animator *ani = evas_object_data_get(obj, &quot;ani&quot;);
+&nbsp;&nbsp;&nbsp;ecore_animator_del(ani);
+}
+
+static void mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
+}
+
+static void mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
+&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *) event_info;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) 
+&nbsp;&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;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
+}
+
+static Eina_Bool animate_reset_cb(void *data, double pos) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;double frame = pos;
+&nbsp;&nbsp;&nbsp;float x, y, z;
+
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
+&nbsp;&nbsp;&nbsp;x = ad-&gt;slx_value * (1 - frame) + 0.75 * frame;
+&nbsp;&nbsp;&nbsp;y = ad-&gt;sly_value * (1 - frame) + 0.75 * frame;
+&nbsp;&nbsp;&nbsp;z = ad-&gt;slz_value * (1 - frame) + 0.75 * frame;
+
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slx, x);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;sly, y);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slz, z);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+static void btn_reset_cb(void *data, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;slx_value = elm_slider_value_get(ad-&gt;slx);
+&nbsp;&nbsp;&nbsp;ad-&gt;sly_value = elm_slider_value_get(ad-&gt;sly);
+&nbsp;&nbsp;&nbsp;ad-&gt;slz_value = elm_slider_value_get(ad-&gt;slz);
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, animate_reset_cb, ad);
+}
+
+static void win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;w, &amp;h);
+
+&nbsp;&nbsp;&nbsp;if (w &gt; h) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(ad-&gt;main_box, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(ad-&gt;main_box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void win_back_cb(void *data, Evas_Object *obj, void *event_info) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;/* Let window go to hidden state. */
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+
+static void
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}
+
+static void create_base_gui(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;/* Window */
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&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;&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, (const int *) (&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, 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;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&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_TRANSPARENT);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND,   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;ad-&gt;main_box = elm_box_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;main_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;main_box);
+
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;main_box);
+
+&nbsp;&nbsp;&nbsp;/* Show window after base gui is set up */
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+
+static void create_gl_canvas(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Animator *ani;
+
+&nbsp;&nbsp;&nbsp;/* Create and initialize GLView */
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;glview, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;glview, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;/* Request a surface with alpha and a depth buffer */
+&nbsp;&nbsp;&nbsp;elm_glview_mode_set(ad-&gt;glview, ELM_GLVIEW_DEPTH);
+
+&nbsp;&nbsp;&nbsp;/* The resize policy tells GLView what to do with the surface when it
+&nbsp;&nbsp;&nbsp; * resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to
+&nbsp;&nbsp;&nbsp; * destroy the current surface and recreate it to the new size.
+&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(ad-&gt;glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+
+&nbsp;&nbsp;&nbsp;/* The render policy sets how GLView should render GL code.
+&nbsp;&nbsp;&nbsp; * ELM_GLVIEW_RENDER_POLICY_ON_DEMAND will have the GL callback
+&nbsp;&nbsp;&nbsp; * called only when the object is visible.
+&nbsp;&nbsp;&nbsp; * ELM_GLVIEW_RENDER_POLICY_ALWAYS would cause the callback to be
+&nbsp;&nbsp;&nbsp; * called even if the object were hidden.
+&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(ad-&gt;glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
+
+&nbsp;&nbsp;&nbsp;/* The initialize callback function gets registered here */
+&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(ad-&gt;glview, init_gl);
+
+&nbsp;&nbsp;&nbsp;/* The delete callback function gets registered here */
+&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(ad-&gt;glview, del_gl);
+
+&nbsp;&nbsp;&nbsp;/* The resize callback function gets registered here */
+&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(ad-&gt;glview, resize_gl);
+
+&nbsp;&nbsp;&nbsp;/* The render callback function gets registered here */
+&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(ad-&gt;glview, draw_gl);
+
+&nbsp;&nbsp;&nbsp;/* Add the GLView to the box and show it */
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;main_box, ad-&gt;glview);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;glview);
+
+&nbsp;&nbsp;&nbsp;/* This adds an animator so that the app will regularly
+&nbsp;&nbsp;&nbsp; * trigger updates of the GLView using elm_glview_changed_set().
+&nbsp;&nbsp;&nbsp; *
+&nbsp;&nbsp;&nbsp; * NOTE: If you delete GL, this animator will keep running trying to access
+&nbsp;&nbsp;&nbsp; * GL so this animator needs to be deleted with ecore_animator_del().
+&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;ani = ecore_animator_add(animate_cb, ad-&gt;glview);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;glview, &quot;ani&quot;, ani);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;glview, &quot;ad&quot;, ad);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, del_animate_cb, ad-&gt;glview);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+
+&nbsp;&nbsp;&nbsp;/* Set rotation variables */
+&nbsp;&nbsp;&nbsp;ad-&gt;xangle = 45.0f;
+&nbsp;&nbsp;&nbsp;ad-&gt;yangle = 45.0f;
+&nbsp;&nbsp;&nbsp;ad-&gt;zangle = 0.0f;
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_FALSE;
+}
+
+static void create_toolbox(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;ad-&gt;inner_box = elm_box_add(ad-&gt;main_box);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(ad-&gt;inner_box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(ad-&gt;inner_box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;main_box, ad-&gt;inner_box);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;inner_box);
+
+&nbsp;&nbsp;&nbsp;// Color selector for the background
+&nbsp;&nbsp;&nbsp;ad-&gt;cs = elm_colorselector_add(ad-&gt;inner_box);
+&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(ad-&gt;cs, ELM_COLORSELECTOR_BOTH);
+&nbsp;&nbsp;&nbsp;elm_colorselector_palette_name_set(ad-&gt;cs, &quot;default&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;cs);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;cs);
+
+&nbsp;&nbsp;&nbsp;// Slider for X-axis scale
+&nbsp;&nbsp;&nbsp;ad-&gt;slx = elm_slider_add(ad-&gt;inner_box);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;slx, EVAS_HINT_FILL, 0);
+&nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;slx, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_slider_unit_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(ad-&gt;slx, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(ad-&gt;slx, 0, 1.5);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slx, 0.75);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;slx, 0.0, 0.0, 120, 255);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slx);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;slx);
+
+&nbsp;&nbsp;&nbsp;// Slider for Y-axis scale
+&nbsp;&nbsp;&nbsp;ad-&gt;sly = elm_slider_add(ad-&gt;inner_box);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;sly, EVAS_HINT_FILL, 0);
+&nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;sly, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_slider_unit_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(ad-&gt;sly, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(ad-&gt;sly, 0, 1.5);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;sly, 0.75);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;sly, 0.0, 0.0, 120, 255);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;sly);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;sly);
+
+&nbsp;&nbsp;&nbsp;// Slider for Z-axis scale
+&nbsp;&nbsp;&nbsp;ad-&gt;slz = elm_slider_add(ad-&gt;inner_box);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;slz, EVAS_HINT_FILL, 0);
+&nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;slz, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_slider_unit_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(ad-&gt;slz, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(ad-&gt;slz, 0, 1.5);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slz, 0.75);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;slz, 0.0, 0.0, 120, 255);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slz);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;slz);
+
+&nbsp;&nbsp;&nbsp;// Reset button
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;inner_box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Reset&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, btn_reset_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;button, EVAS_HINT_FILL, 0);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;button);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
+}
+
+static bool app_create(void *data) 
+{
+&nbsp;&nbsp;&nbsp;/* Hook to take necessary actions before main event loop starts
+&nbsp;&nbsp;&nbsp; *Initialize UI resources and application's data
+&nbsp;&nbsp;&nbsp; *If this function returns true, the main loop of application starts
+&nbsp;&nbsp;&nbsp; *If this function returns false, the application is terminated */
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+&nbsp;&nbsp;&nbsp;create_gl_canvas(ad);
+&nbsp;&nbsp;&nbsp;create_toolbox(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static void app_control(app_control_h app_control, void *data) 
+{
+&nbsp;&nbsp;&nbsp;/* Handle the launch request. */
+}
+
+static void app_pause(void *data) 
+{
+&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes invisible. */
+}
+
+static void app_resume(void *data) 
+{
+&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes visible. */
+}
+
+static void app_terminate(void *data) 
+{
+&nbsp;&nbsp;&nbsp;/* Release all resources. */
+}
+
+int main(int argc, char *argv[]) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = { 0, };
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0, };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, PACKAGE, &quot;The application failed to start, and returned %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>   
+                       </div>
+               </li>   
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="multithread" name="multithread" class="items-tit-h2">Using OpenGL ES in Multi-threaded Applications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+<p>To use OpenGL ES in multi-threaded applications, set up the rendering view and initialize the application:</p>
+ 
+<ol>
+<li>Manage the Elementary GLView:
+<ol>
+
+<li>Create a single GLView widget covering the whole window using the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function:
+<pre class="prettyprint">
+typedef struct 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;
+
+&nbsp;&nbsp;&nbsp;Eina_Lock lck;
+
+&nbsp;&nbsp;&nbsp;/* RT to main loop */
+&nbsp;&nbsp;&nbsp;Ecore_Pipe *pipe;
+
+&nbsp;&nbsp;&nbsp;/* Main loop to RT: direct pipe file descriptors */
+&nbsp;&nbsp;&nbsp;int rt_rpipefd, rt_wpipefd;
+
+&nbsp;&nbsp;&nbsp;/* General OpenGL ES data: program to draw a texture fullscreen */
+&nbsp;&nbsp;&nbsp;GLuint vtx_shader[1], fgmt_shader[1], program[1], vbo[2];
+&nbsp;&nbsp;&nbsp;Evas_GL_Context *main_ctx;
+
+&nbsp;&nbsp;&nbsp;/* Render thread data */
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread *thread;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GLfloat c1, c2, c3, c4;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool cancelled;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool finished;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool ready;
+&nbsp;&nbsp;&nbsp;} th;
+
+&nbsp;&nbsp;&nbsp;/* Pool of Target_Buffer: empty, ready (locked access) */
+&nbsp;&nbsp;&nbsp;Eina_Inlist *buffers_empty;
+&nbsp;&nbsp;&nbsp;Eina_Inlist *buffers_ready;
+&nbsp;&nbsp;&nbsp;Target_Buffer *last_buffer;
+} App_Data;
+
+static bool app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win, *glview;
+&nbsp;&nbsp;&nbsp;App_Data *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Request OpenGL hardware acceleration
+ 
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;gl&quot;);
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_override_set(EINA_TRUE);
+&nbsp;&nbsp;&nbsp;// Create a basic window  
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(&quot;win&quot;, &quot;Multi-thread OpenGL ES demo&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+&nbsp;&nbsp;&nbsp;// On window deletion, exit the render thread  
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, delete_cb, &amp;ad);
+&nbsp;&nbsp;&nbsp;// Create a basic OpenGL ES surface with GLView  
+&nbsp;&nbsp;&nbsp;glview = elm_glview_version_add(win, EVAS_GL_GLES_2_X);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(glview, 240, 240);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, glview);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(glview);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(glview, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(glview, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(glview);
+
+&nbsp;&nbsp;&nbsp;elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA);
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
+&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(glview, init);
+&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(glview, render);
+
+&nbsp;&nbsp;&nbsp;evas_object_data_set(glview, &quot;ad&quot;, &amp;ad);
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = glview;
+}
+</pre>
+</li>
+
+<li>Initialize the gl status. The main thread render function acts as a compositor thread.
+<pre class="prettyprint">
+static void
+init(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = evas_object_data_get(obj, &quot;ad&quot;);
+&nbsp;&nbsp;&nbsp;const char *p;
+&nbsp;&nbsp;&nbsp;static const char vertex_texture[] =
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;attribute vec4 vPosition;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;attribute vec2 vTexCoord;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;varying vec2 texcoord;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;void main()\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;   gl_Position = vPosition;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;   texcoord = vTexCoord;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}\n&quot;;
+&nbsp;&nbsp;&nbsp;static const char fragment_texture[] =
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;#ifdef GL_ES\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;precision mediump float;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;#endif\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;uniform sampler2D tex;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;varying vec2 texcoord;\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;void main()\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;   gl_FragColor = texture2D(tex, texcoord);\n&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}\n&quot;;
+&nbsp;&nbsp;&nbsp;const float rectangle_fullscreen_vertices[] =
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, -1.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,  1.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0,  0.0
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;const float texture_vertices[] =
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,  1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,  0.0,
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;// Init main data
+&nbsp;&nbsp;&nbsp;ad-&gt;main_ctx = evas_gl_current_context_get(elm_glview_evas_gl_get(obj));
+&nbsp;&nbsp;&nbsp;// Create vertex data
+&nbsp;&nbsp;&nbsp;glGenBuffers(2, ad-&gt;vbo);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo[0]);
+&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, 3 * 6 * 4, rectangle_fullscreen_vertices, GL_STATIC_DRAW);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo[1]);
+&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, 2 * 6 * 4, texture_vertices, GL_STATIC_DRAW);
+&nbsp;&nbsp;&nbsp;// Texture draw
+&nbsp;&nbsp;&nbsp;p = vertex_texture;
+&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader[0] = glCreateShader(GL_VERTEX_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader[0], 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader[0]);
+&nbsp;&nbsp;&nbsp;p = fragment_texture;
+&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader[0] = glCreateShader(GL_FRAGMENT_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader[0], 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader[0]);
+&nbsp;&nbsp;&nbsp;ad-&gt;program[0] = glCreateProgram();
+&nbsp;&nbsp;&nbsp;glAttachShader(ad->program[0], ad-&gt;vtx_shader[0]);
+&nbsp;&nbsp;&nbsp;glAttachShader(ad->program[0], ad-&gt;fgmt_shader[0]);
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Create Ecore threads:
+<p>To easily create threads with EFL, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread()</span> infrastructure, which provides a high level abstraction over system threads, along with callbacks in the main loop to signal that a thread has finished running or has been canceled.</p>
+<p>When the main OpenGL ES context is properly set up, spawn the render thread and start setting up its OpenGL ES context:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glBindAttribLocation(ad-&gt;program[0], 0, &quot;vPosition&quot;);
+&nbsp;&nbsp;&nbsp;glBindAttribLocation(ad-&gt;program[0], 1, &quot;vTexCoord&quot;);
+&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program[0]);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;th.thread = ecore_thread_run(thread_run, thread_end, thread_cancel, ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">thread_run()</span>, <span style="font-family: Courier New,Courier,monospace;">thread_end()</span>, and <span style="font-family: Courier New,Courier,monospace;">thread_cancel()</span> callback functions are called when the thread runs, returns successfully, or is canceled prematurely. In this application, the thread always returns and must never be forcefully canceled because it never returns from the <span style="font-family: Courier New,Courier,monospace;">thread_run()</span> function. To run again, trigger a cancel callback if the thread is calling the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function.</p>
+</li>
+</ol>
+
+       <h3>Managing Inter-thread Communication Channels</h3>
+                       
+<p>To establish safe communication channels between threads:</p>
+<ol>
+<li>Since most of EFL is not thread-safe, certain operations cannot be executed from another thread and you must use the main loop instead. 
+<p>Establish a communication channel from the render thread to the main loop:</p>
+<ol>
+<li>Create an <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span> channel.
+<p>EFL provides a simple tool to send messages to the main thread using pipes. Ecore Pipe is the abstraction layer around pipe objects, and is the easiest way to send a message from any thread back to the main thread.</p>
+<pre class="prettyprint">
+// In the app_create() function, create pipe for messaging  
+ad.pipe = ecore_pipe_add(pipe_handler, &amp;ad);
+eina_lock_new(&amp;ad.lck);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span> creates a new <span style="font-family: Courier New,Courier,monospace;">Eina_Lock</span>. It protects access to shared variables.</p>
+</li>
+<li>Send messages with <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>.
+<p>The following code passes <span style="font-family: Courier New,Courier,monospace;">Message_Data</span> structures, which are copied by <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span> and sent over to the <span style="font-family: Courier New,Courier,monospace;">pipe_handler</span> callback. <span style="font-family: Courier New,Courier,monospace;">Message_Data</span> structures have to be defined by the application.</p>
+<pre class="prettyprint">
+// Render thread to main loop  
+static void
+message_send(App_Data *ad, Message_Type type, ...)
+{
+&nbsp;&nbsp;&nbsp;Message_Data msg = {0};
+&nbsp;&nbsp;&nbsp;msg.type = type;
+&nbsp;&nbsp;&nbsp;if (type == MSG_NEWFRAME)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;va_list args;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;va_start(args, type);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg.newframe.target = va_arg(args, Target_Buffer *);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;va_end(args);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// The pipe copies the passed data
+&nbsp;&nbsp;&nbsp;ecore_pipe_write(ad-&gt;pipe, &amp;msg, sizeof(msg));
+}
+</pre>
+</li>
+
+<li>Receive messages through the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>.
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span> has a callback running in the main thread, and receives data sent over by any thread.</p>
+<pre class="prettyprint">
+static void
+pipe_handler(void *data, void *buf, unsigned int len EINA_UNUSED)
+{
+&nbsp;&nbsp;&nbsp;Message_Data *msg = buf;
+&nbsp;&nbsp;&nbsp;App_Data *ad = data;
+&nbsp;&nbsp;&nbsp;switch (msg-&gt;type)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MSG_HELLO:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Render thread has started  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;The render thread is saying hello.\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MSG_GOODBYE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// It is now safe to request exit from the main loop  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Thread has cleanly terminated.\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_exit();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>You need not use the <span style="font-family: Courier New,Courier,monospace;">free()</span> function to free data since the data belongs to the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>.</p>
+</li>
+</ol>
+</li>
+
+<li><p>Sending messages to the render thread from the main thread covers input event passing handling. The following example passes input event messages and regular ticks to the render thread.</p>
+
+<p>Establish a communication channel from the main thread to the render thread:</p>
+
+<ol>
+<li>Create a pipe.
+<p>The easiest way to send a simple message in EFL in Tizen is to rely on a POSIX pipe file handle:</p>
+<pre class="prettyprint">
+// Create a pipe for messaging  
+int fds[2];
+pipe(fds);
+ad.rt_rpipefd = fds[0];
+ad.rt_wpipefd = fds[1];
+</pre>
+</li>
+
+<li>Send messages to a thread. Write data to the pipe created above, from the main loop:
+<pre class="prettyprint">
+// Main loop to render thread  
+static void
+event_send(App_Data *ad, Event_Type type, ...)
+{
+&nbsp;&nbsp;&nbsp;// Event Data is defined by application
+&nbsp;&nbsp;&nbsp;Event_Data *ed = calloc(1, sizeof(Event_Data));
+&nbsp;&nbsp;&nbsp;ed-&gt;type = type;
+&nbsp;&nbsp;&nbsp;if (type == EVENT_MOUSE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;va_list args;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;va_start(args, type);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ed-&gt;mouse.down = (va_arg(args, int) != 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;va_end(args);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Manually send this over the pipe fd (only the pointer)  
+&nbsp;&nbsp;&nbsp;write(ad-&gt;rt_wpipefd, &amp;ed, sizeof(ed));
+}
+</pre>
+</li>
+
+<li>Receive messages in a thread:
+<p>In the render thread, use the event handling code:</p>
+<pre class="prettyprint">
+while (!ecore_thread_check(ad-&gt;th.thread))
+{
+&nbsp;&nbsp;&nbsp;Event_Data *ev = NULL;
+&nbsp;&nbsp;&nbsp;int r;
+
+&nbsp;&nbsp;&nbsp;// Render
+
+&nbsp;&nbsp;&nbsp;r = read(ad-&gt;rt_rpipefd, &amp;ev, sizeof(ev));
+&nbsp;&nbsp;&nbsp;if ((r == sizeof(ev)) &amp;&amp; ev)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle message
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>Use a simple pipe file descriptor to use the <span style="font-family: Courier New,Courier,monospace;">poll()</span> or <span style="font-family: Courier New,Courier,monospace;">select()</span> function, in order to wait for events for a pre-determined period of time, or to wait for events on more than a single file descriptor. In this example, the main loop is responsible for the render thread life-cycle:
+<pre class="prettyprint">
+thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
+{
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(evgl, ad-&gt;th.sfc, ad-&gt;th.ctx);
+&nbsp;&nbsp;&nbsp;while (!ecore_thread_check(ad-&gt;th.thread))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Prepare new frame */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, target-&gt;fbo);
+         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (((r = read(ad-&gt;rt_rpipefd, &amp;ev, sizeof(ev))) == sizeof(ev)) &amp;&amp; ev)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev-&gt;type == EVENT_QUIT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(ev);
+&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;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function returns true when the thread is canceled using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function.</p>
+</li>
+</ol>
+</li>
+
+<li>Handle input events:
+<p>With the above setup environment, pass input events from the main thread to any thread.</p>
+<ol>
+<li>Add the following code to the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function to catch mouse up or down events on the GLView object:
+<pre class="prettyprint">
+evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, &amp;ad);
+evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, &amp;ad);
+</pre>
+</li>
+
+<li>
+<p>Add a handle to the callbacks:</p>
+<p>The mouse down callback sends a mouse down event to render thread.</p>
+<pre class="prettyprint">
+static void
+mouse_down_cb(void *data, Evas *e EINA_UNUSED,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *obj EINA_UNUSED, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Down *event = event_info;
+&nbsp;&nbsp;&nbsp;App_Data *ad = data;
+&nbsp;&nbsp;&nbsp;if (event-&gt;button != 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;event_send(ad, EVENT_MOUSE, EINA_TRUE);
+}
+</pre>
+</li>
+<li>
+<p>The mouse up callback sends a mouse up event to render thread.</p>
+<pre class="prettyprint">
+static void
+mouse_up_cb(void *data, Evas *e EINA_UNUSED,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *obj EINA_UNUSED, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Up *event = event_info;
+&nbsp;&nbsp;&nbsp;App_Data *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (event-&gt;button != 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;event_send(ad, EVENT_MOUSE, EINA_FALSE);
+}
+</pre>
+
+<p>The render thread receives these events calling the <span style="font-family: Courier New,Courier,monospace;">read()</span> function:</p>
+<pre class="prettyprint">
+thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
+{
+&nbsp;&nbsp;&nbsp;/* Prepare new frame */
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
+&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, target-&gt;fbo);
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(evgl, ad-&gt;th.sfc, ad-&gt;th.ctx);
+&nbsp;&nbsp;&nbsp;while (!ecore_thread_check(ad-&gt;th.thread))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Check for events from the main thread (one event at a time)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (((r = read(ad-&gt;rt_rpipefd, &amp;ev, sizeof(ev))) == sizeof(ev)) &amp;&amp; ev)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev-&gt;type == EVENT_MOUSE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev-&gt;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;// Do something
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+
+<h3>Managing Multi-thread OpenGL ES</h3>
+                       
+<p>To deliver the result of OpenGL ES rendering to the main thread for compositing, render the thread:</p>
+<ol>
+<li>
+<p>The easiest way to share data between threads in OpenGL ES is to use shared contexts. However, all objects ID&#39;s, such as texture IDs and FBOs, are shared between contexts. In addition, it is not always allowed to bind the same object from different contexts at the same time.</p>
+
+<p>The example shows that the render thread uses EvasGL directly to create a dummy PBuffer surface and its render context. The PBuffer surface is necessary for the <span style="font-family: Courier New,Courier,monospace;">evas_gl_make_current()</span> function:</p>
+<pre class="prettyprint">
+Evas_GL *evgl = elm_glview_evas_gl_get(ad-&gt;glview);
+
+cfg = evas_gl_config_new();
+cfg-&gt;color_format = EVAS_GL_NO_FBO;
+cfg-&gt;depth_bits = EVAS_GL_DEPTH_NONE;
+cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE;
+cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE;
+ad-&gt;th.sfc = evas_gl_pbuffer_surface_create(evgl, cfg, 1, 1, NULL);
+evas_gl_config_free(cfg);
+ad-&gt;th.ctx = evas_gl_context_create(evgl, ad-&gt;main_ctx);
+evas_gl_make_current(evgl, ad-&gt;th.sfc, ad-&gt;th.ctx);
+</pre>
+</li>
+
+<li>
+<p>Deliver images from one context to another using a shared FBO. The following example uses a pool of at least 2 buffers: texture and FBO. This works as double or triple buffering. At all times, one buffer is used for drawing (rendering in the render thread) and the other for compositing (reading in the main thread).</p>
+<pre class="prettyprint">
+// Create targets (needs at least 2)  
+eina_lock_take(&amp;ad-&gt;lck);
+for (i = 0; i &lt; BUFFER_COUNT; i++)
+{
+&nbsp;&nbsp;&nbsp;target = target_create(ad);
+&nbsp;&nbsp;&nbsp;if (!target) break;
+&nbsp;&nbsp;&nbsp;target-&gt;id = i;
+&nbsp;&nbsp;&nbsp;ad-&gt;buffers_empty = eina_inlist_append(ad-&gt;buffers_empty,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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_INLIST_GET(target));
+}
+eina_lock_release(&amp;ad-&gt;lck);
+message_send(ad, MSG_READY);
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">target_create()</span> function to create a texture and an attached FBO, and package them together:</p>
+<pre class="prettyprint">
+typedef struct 
+{
+&nbsp;&nbsp;&nbsp;EINA_INLIST;
+&nbsp;&nbsp;&nbsp;GLuint fbo, tex;
+&nbsp;&nbsp;&nbsp;EvasGLSync sync;
+&nbsp;&nbsp;&nbsp;int id;
+} 
+Target_Buffer;
+
+static Target_Buffer *
+target_create(App_Data *ad EINA_UNUSED)
+{
+&nbsp;&nbsp;&nbsp;Target_Buffer *target = calloc(1, sizeof(Target_Buffer));
+&nbsp;&nbsp;&nbsp;GLenum err;
+&nbsp;&nbsp;&nbsp;if (!target)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;glGenFramebuffers(1, &amp;target-&gt;fbo);
+&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, target-&gt;fbo);
+&nbsp;&nbsp;&nbsp;glGenTextures(1, &amp;target-&gt;tex);
+&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, target-&gt;tex);
+&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
+&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
+&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
+&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
+&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, BUFFER_WIDTH, BUFFER_HEIGHT, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
+&nbsp;&nbsp;&nbsp;glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, target-&gt;tex, 0);
+&nbsp;&nbsp;&nbsp;err = glCheckFramebufferStatus(GL_FRAMEBUFFER);
+&nbsp;&nbsp;&nbsp;if (err != GL_FRAMEBUFFER_COMPLETE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;FBO could not be set: 0x%x\n&quot;, (int) err);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;target-&gt;tex);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteFramebuffers(1, &amp;target-&gt;fbo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(target);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return target;
+}
+</pre>
+</li>
+
+<li>
+<p>Use the shared buffers in the render thread as target surfaces:</p>
+<pre class="prettyprint">
+thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
+{
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(evgl, ad-&gt;th.sfc, ad-&gt;th.ctx);
+&nbsp;&nbsp;&nbsp;while (!ecore_thread_check(ad-&gt;th.thread))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get an empty buffer  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_lock_take(&amp;ad-&gt;lck);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!ad-&gt;buffers_empty)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Wait
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_lock_release(&amp;ad-&gt;lck);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(1000);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target = EINA_INLIST_CONTAINER_GET(ad-&gt;buffers_empty, Target_Buffer);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;buffers_empty = eina_inlist_remove(ad-&gt;buffers_empty, ad-&gt;buffers_empty);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_lock_release(&amp;ad-&gt;lck);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Prepare new frame  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, target-&gt;fbo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a new frame  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thread_draw(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Release FBO; some drivers complain if it is bound by a different thread
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, 0);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>To render in a thread, use the <span style="font-family: Courier New,Courier,monospace;">thread_draw()</span> function. The following example draws with a color:</p>
+<pre class="prettyprint">
+static void
+thread_draw(App_Data *ad, Evas_GL_API *gl)
+{
+&nbsp;&nbsp;&nbsp;// Draw function  
+&nbsp;&nbsp;&nbsp;GL()glClearColor(ad-&gt;th.c1, ad-&gt;th.c2, ad-&gt;th.c3, ad-&gt;th.c4);
+&nbsp;&nbsp;&nbsp;GL()glClear(GL_COLOR_BUFFER_BIT);
+}
+</pre>
+</li>
+
+<li>Render the FBO to the screen. The following example uses the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>:
+<pre class="prettyprint">
+// Signal the main thread that a new frame is now available  
+message_send(ad, MSG_NEWFRAME, target);
+</pre>
+</li>
+<li>
+<p>The pipe handler receives this message in <span style="font-family: Courier New,Courier,monospace;">pipe_handler</span>. The following example adds the target buffer to a queue:</p>
+<pre class="prettyprint">
+case MSG_NEWFRAME:
+&nbsp;&nbsp;&nbsp;// Queue a new frame description  
+&nbsp;&nbsp;&nbsp;printf(&quot;Got a new frame with buffer %d\n&quot;, msg-&gt;newframe.target-&gt;id);
+&nbsp;&nbsp;&nbsp;eina_lock_take(&amp;ad-&gt;lck);
+&nbsp;&nbsp;&nbsp;ad-&gt;buffers_ready = eina_inlist_append(ad-&gt;buffers_ready, EINA_INLIST_GET(msg-&gt;newframe.target));
+&nbsp;&nbsp;&nbsp;eina_lock_release(&amp;ad-&gt;lck);
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(ad-&gt;glview);
+&nbsp;&nbsp;&nbsp;break;
+</pre>
+</li>
+<li>
+<p>The GLView <span style="font-family: Courier New,Courier,monospace;">render()</span> function is called from the main loop, and draws the texture to the screen:</p>
+<pre class="prettyprint">
+// Draw the texture on the screen  
+evas_object_geometry_get(ad-&gt;glview, 0, 0, &amp;w, &amp;h);
+draw_rectangle(ad, w, h, target-&gt;tex);
+</pre>
+
+<p>Draw the texture:</p>
+<pre class="prettyprint">
+void
+draw_rectangle(App_Data *ad, int w, int h, int tex)
+{
+&nbsp;&nbsp;&nbsp;GLuint u;
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+&nbsp;&nbsp;&nbsp;glClearColor(0.2, 0.2, 0.2, 1.0);
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
+&nbsp;&nbsp;&nbsp;glEnable(GL_BLEND);
+&nbsp;&nbsp;&nbsp;glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
+&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program[0]);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo[0]);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(0);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo[1]);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 0, 0);
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(1);
+&nbsp;&nbsp;&nbsp;u = glGetUniformLocation(ad-&gt;program[0], &quot;tex&quot;);
+&nbsp;&nbsp;&nbsp;glUniform1i(u, 0);
+&nbsp;&nbsp;&nbsp;glActiveTexture(GL_TEXTURE0);
+&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, tex);
+&nbsp;&nbsp;&nbsp;glDrawArrays(GL_TRIANGLES, 0, 6);
+}
+</pre>
+</li>
+
+<li>
+<p>The above code works in some cases but depending on the GPU and driver, there can be synchronization issues between the 2 threads, as one is drawing and the other is reading from the same object. Remember that most GL commands are asynchronous.</p>
+
+<p>You can synchronize data between threads:</p>
+<ul class="ul">
+<li>Using fence sync objects
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">fence_sync</span> extension:</p>
+<pre class="prettyprint">
+// Create fence sync  
+if (evasglCreateSync)
+&nbsp;&nbsp;&nbsp;target-&gt;sync = evasglCreateSync(evgl, EVAS_GL_SYNC_FENCE, NULL);
+else
+{
+&nbsp;&nbsp;&nbsp;target-&gt;sync = EVAS_GL_NO_SYNC;
+&nbsp;&nbsp;&nbsp;glFinish();
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace;">evasglCreateSync</span> function pointer is <span style="font-family: Courier New,Courier,monospace;">NULL</span> if the extension is not supported. In that case, call the <span style="font-family: Courier New,Courier,monospace;">glFinish()</span> function, because the lock is not used.</p>
+</li>
+
+<li>Waiting on a fence
+<p>The main thread now waits on this sync before drawing the texture on the screen. This yields a better performance than the <span style="font-family: Courier New,Courier,monospace;">glFinish()</span> function:</p>
+<pre class="prettyprint">
+// Wait for the render thread to complete rendering, if fence_sync is available  
+if (target-&gt;sync)
+{
+&nbsp;&nbsp;&nbsp;evasglClientWaitSync(evgl, target-&gt;sync,
+&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_SYNC_FLUSH_COMMANDS_BIT,
+&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_FOREVER);
+&nbsp;&nbsp;&nbsp;evasglDestroySync(evgl, target-&gt;sync);
+&nbsp;&nbsp;&nbsp;target-&gt;sync = EVAS_GL_NO_SYNC;
+}
+
+// Draw the texture on the screen  
+</pre>
+
+
+<p>Instead of passing <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_FOREVER</span>, it is also possible to pass a timeout, so that the wait function never dead locks.</p>
+</li>
+</ul>
+</li>
+</ol>
+
+<h3>Using EvasGL Images</h3>
+               
+<p>You can deliver the result of rendering from one OpenGL ES thread to another to use EvasGLImage objects. This requires an underlying EGL image extension (or equivalent if the backend is not EGL), and might not be fully supported on all platforms.</p>
+<ol>
+<li>
+<p>To check for the presence of this extension, check the function pointers in Evas_GL_API:</p>
+<pre class="prettyprint">
+if (evasglCreateImageForContext)
+{
+&nbsp;&nbsp;&nbsp;// Create an image
+}
+</pre>
+</li>
+
+<li>
+<p>Create the image with a texture ID or a renderbuffer ID. Since EFL abstracts the underlying display system, such as X or Wayland, a portable application limits itself to the most portable options, such as pure OpenGL ES objects:</p>
+<pre class="prettyprint">
+if (evasglCreateImageForContext)
+{
+&nbsp;&nbsp;&nbsp;// Create an image
+&nbsp;&nbsp;&nbsp;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;(void*)(intptr_t)texid, NULL);
+}
+</pre>
+<p>Tizen also provides specific buffers created with TBM that can be passed to this function. Unfortunately the image extension is more device-dependent, and may not even work in the Tizen emulator.</p>
+</li>
+</ol>                  
+                       
+                       
+                       
+                       </div>
+                       </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="ext" name="ext" class="items-tit-h2">Using OpenGL ES Extensions</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>EvasGL, offering an abstraction layer above OpenGL ES, provides an easy mechanism to check for support and use OpenGL ES extensions:</p>
+
+<ol>
+       <li>Detect support for an extension.
+       <p>In OpenGL ES, you must always call the <span style="font-family: Courier New,Courier,monospace;">glGetString(GL_EXTENSIONS)</span> function. Make sure that the extension name is present in the list and then dynamically find the function pointer using the <span style="font-family: Courier New,Courier,monospace;">dlsym()</span>, <span style="font-family: Courier New,Courier,monospace;">eglGetProcAddress()</span>, or <span style="font-family: Courier New,Courier,monospace;">glXGetProcAddress()</span> function.</p>
+
+       <p>Since EvasGL exposes only a structure with the function pointers set to internal wrappers or the proper OpenGL ES implementation library, it can also expose all the detected extensions simply by setting their function pointers.</p>
+
+       <p>To detect support for the <span style="font-family: Courier New,Courier,monospace;">GL_OES_get_program_binary</span> extension or equivalent, and to get the function pointer associated:</p>
+
+       <pre class="prettyprint">
+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;printf(&quot;Program binary extension is supported.\n&quot;);
+}
+</pre>
+       </li>
+       <li>Call an extension.
+       <p>Calling an extension is similar to calling a function:</p>
+
+       <pre class="prettyprint">
+if (gl-&gt;glGetProgramBinaryOES)
+{
+&nbsp;&nbsp;&nbsp;char buf[4096];
+&nbsp;&nbsp;&nbsp;size_t len;
+&nbsp;&nbsp;&nbsp;Glenum fmt;
+&nbsp;&nbsp;&nbsp;gl-&gt;glGetProgramBinaryOES(prgid, sizeof(buf), &amp;len, &amp;fmt, buf);
+}
+</pre>
+       </li>
+</ol>
+
+                       </div>
+               </li>           
+       
+
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="evas_ext" name="evas_ext" class="items-tit-h2">Using EvasGL Extensions</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>EvasGL is not only an abstraction layer on top of OpenGL ES, but also on top of EGL and GLX. As such, EvasGL tries to imitate EGL in a platform-independent manner, and exposes the underlying platform extensions when it can.</p>
+
+<p>Image and sync support are the most commonly used EvasGL extensions. Both can be used for multi-thread rendering, but EvasGL images can also be used to share images between contexts.</p>
+
+<h3>EvasGLImage</h3>
+
+<p>There are 2 versions of the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage</span> function, out of which extra <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Context</span> is taken as an argument. It is recommended to call <span style="font-family: Courier New,Courier,monospace;">evasglCreateImageForContext</span> if you are dealing with multiple contexts, otherwise calling the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage</span> function is sufficient.</p>
+
+<p>The code below is just an example.</p>
+
+<ol>
+       <li>Check for support.
+       <p>Before using this extension, check whether it is supported:</p>
+
+       <pre class="prettyprint">
+if (gl-&gt;evasglCreateImageForContext &amp;&amp; gl-&gt;evasglDestroyImage)
+{
+&nbsp;&nbsp;&nbsp;// Good...
+}
+</pre>
+       </li>
+       <li>Create an image.
+       <p>Create a render buffer and bind it to an EvasGL image:</p>
+
+       <pre class="prettyprint">
+const int width = 64, height = 64;
+GLuint fbo, color_rb;
+EvasGLImage *image;
+Evas_GL *evgl;
+Evas_GL_Context *ctx;
+
+gl-&gt;GenFramebuffers(1, &amp;fbo);
+gl-&gt;glBindFramebuffer(GL_FRAMEBUFFER_EXT, fbo);
+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);
+
+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);
+</pre>
+
+       <p>The EvasGL image is now created and available for use from another context.</p>
+       </li>
+       <li>Use an image.
+       <p>To draw something in the texture and render that texture to the screen. To skip the draw function:</p>
+
+       <pre class="prettyprint">
+gl-&gt;glBindFramebuffer(GL_FRAMEBUFFER_EXT, fbo);
+draw_scene(glview);</pre>
+
+       <p>You can also bind the image to a texture for display on the back buffer:</p>
+
+       <pre class="prettyprint">
+GLuint tex;
+
+gl-&gt;glBindFramebuffer(GL_FRAMEBUFFER_EXT, 0);
+gl-&gt;glGenTextures(1, &amp;tex);
+gl-&gt;glBindTexture(GL_TEXTURE_2D, tex);
+gl-&gt;glEGLImageTargetTexture2DOES(GL_TEXTURE_2D, image);
+And do the actual draw operation (draw the contents of the texture on screen):
+static const GLint verts[12] = { -5, -6, -10,  5, -6, -10,  -5, 4, 10,  5, 4, 10 };
+static const GLint tex_coords[8] = { 0, 0,  1, 0,  0, 1,  1, 1 };
+
+gl-&gt;glClearColor(0, 0, 0, 0);
+gl-&gt;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+gl-&gt;glEnable(GL_TEXTURE_2D);
+gl-&gt;glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
+gl-&gt;glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_R, GL_REPEAT);
+gl-&gt;glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
+gl-&gt;glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
+
+gl-&gt;glEnableClientState(GL_VERTEX_ARRAY);
+gl-&gt;glEnableClientState(GL_TEXTURE_COORD_ARRAY);
+gl-&gt;glVertexPointer(3, GL_INT, 0, verts);
+gl-&gt;glTexCoordPointer(2, GL_INT, 0, tex_coords);
+
+gl-&gt;glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
+
+gl-&gt;glDisableClientState(GL_VERTEX_ARRAY);
+gl-&gt;glDisableClientState(GL_COLOR_ARRAY);
+gl-&gt;glDisable(GL_TEXTURE_2D);
+</pre>
+
+       <p>The image content can be shared between different contexts.</p>
+       </li>
+       <li>Destroy an image.
+       <p>After releasing all the associated resources, such as FBO and textures, release the image object itself:</p>
+
+       <pre class="prettyprint">
+gl-&gt;evasglDestroyImage(image);</pre>
+       </li>
+</ol>
+
+<h3>Sync</h3>
+
+<p>Another commonly used extension is the fence sync extension along with the reusable sync and wait sync. This allows creating a semaphore-style object that is released as soon as all the previous render operations have been completed.</p>
+
+<p>This guide does not explain the details of these extensions, as they should behave in a similar way to their EGL implementations.</p>
+
+<p>As usual with extensions, check the support:</p>
+
+<pre class="prettyprint">
+if (gl-&gt;evasglCreateSync)
+  // fence_sync must be supported
+</pre>
+
+
+                       </div>
+               </li>           
+       
+
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="direct" name="direct" class="items-tit-h2">Using Direct Rendering</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To enhance rendering performance, the Direct Rendering option is supported.</p>
+
+<h3>GLView</h3>
+
+<pre class="prettyprint">
+Evas_Object *gl;
+gl = elm_glview_add(win);
+ 
+elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT);</pre>
+
+<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_DIRECT</span> option is one of GLView mode&#39;s enums and the option can be enabled using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function.</p>
+
+<h3>EvasGL</h3>
+
+<pre class="prettyprint">
+Evas_GL_Config *cfg;
+cfg = evas_gl_config_new();
+ 
+cfg-&gt;options_bits = EVAS_GL_OPTIONS_DIRECT;</pre>
+
+<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_DIRECT</span> is one of EvasGL&#39;s config options and the option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If direct rendering is enabled, EvasGL will render directly to the back buffer of the window. Otherwise, EvasGL will render to the off screen buffer, then composited to the back buffer of the window.
+
+<p>Although direct rendering is enabled, EvasGL will not always render directly to the back buffer. Here are some conditions that will disable direct rendering and force a fallback to indirect rendering in a frame buffer.</p>
+
+<ol>
+       <li>If the object&#39;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, (<span style="font-family: Courier New,Courier,monospace;">RESIZE_POLICY_SCALE</span>).</li>
+       <li>If the window is rotated and <span style="font-family: Courier New,Courier,monospace;">CLIENT_SIDE_ROTATION</span> is not set.</li>
+       <li>If the GLView policy is set to <span style="font-family: Courier New,Courier,monospace;">ALWAYS</span> render or the EvasGL does not use pixel getter callback.</li>
+</ol></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Caution</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In case the GL functions are called outside the render callback function, call <span style="font-family: Courier New,Courier,monospace;">evas_gl_make_current()</span> before the GL function calls. This solution only works if the target surface is not an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled.
+
+<p>If the target buffer is an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> 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 will occur.</p></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+                       </div>
+               </li>           
+       
+
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="client" name="client" class="items-tit-h2">Using Client-side Rotation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>The Client Side Rotation is a special value that indicates to EFL that the application will handle the view rotation when the device is rotated. This is needed only when the application requests Direct Rendering.</p>
+
+<p>If the window is rotated and the Direct Rendering flag is set, Client Side Rotation can be used to avoid falling back to a frame buffer.</p>
+
+<h3>GLView</h3>
+
+<pre class="prettyprint">
+Evas_Object *gl;
+gl = elm_glview_add(win);
+ 
+elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT | ELM_GLVIEW_CLIENT_SIDE_ROTATION);</pre>
+
+<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span> option is one of GLView mode&#39;s enums and the option can be enabled by using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function. This option is needed only when Direct Rendering is enabled.</p>
+
+<h3>EvasGL</h3>
+
+<pre class="prettyprint">
+Evas_GL_Config *cfg;
+cfg = evas_gl_config_new();
+ 
+cfg-&gt;options_bits = EVAS_GL_OPTIONS_DIRECT | EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION;</pre>
+
+<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> is one of EvasGL&#39;s config options and this option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
+
+<p>Get the current rotation value:</p>
+
+<pre class="prettyprint">
+static void _draw_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;int w, h, rotation;
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;rotation = evas_gl_rotation_get(ad-&gt;evasgl);
+
+&nbsp;&nbsp;&nbsp;if (rotation % 180)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// adjust gl size
+&nbsp;&nbsp;&nbsp;} 
+}</pre>
+
+<p>To get the current rotation of the view, in degrees, call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_rotation_get()</span> in order to properly handle the current rotation of the view. It will always return 0 unless the option <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.</p>                     
+</div>
+               </li>           
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
new file mode 100644 (file)
index 0000000..12c88d1
--- /dev/null
+++ b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
@@ -0,0 +1,175 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>TBM Surface: Providing a Rendering Surface for the Tizen Framework</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create" class="opensection">Managing the TBM Surface</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/graphics/tbm_n.htm">TBM Surface Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TBM Surface: Providing a Rendering Surface for the Tizen Framework</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can create, destroy, map, unmap, and access a surface that is a kind of graphic buffer.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the TBM Surface API basics by learning about:</p>
+<ul>
+       <li><a href="#create">Managing the TBM Surface</a>
+       <p>Create and manage the TBM surface.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Managing the TBM Surface</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To create the TBM surface:</p>
+
+<ol>
+
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;tbm_surface.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;tbm_surface.h&gt;
+</pre></li>
+
+<li>Query the formats supported by the system using the <span style="font-family: Courier New,Courier,monospace">tbm_surface_query_formats()</span> function. Free the array of format list after viewing the formats.
+<pre class="prettyprint">
+tbm_format *formats;
+uint32_t format_num;
+
+if (tbm_surface_query_formats (&amp;formats, &amp;format_num) != TBM_SURFACE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;dlog_print (DLOG_ERROR, LOG_TAG, &quot;Failed to get formats supported by the system\n&quot;);
+}
+</pre>
+</li>
+
+<li>
+<p>Create the TBM surface (<span style="font-family: Courier New,Courier,monospace">tbm_surface</span>), defining its format, height, and width:</p>
+<pre class="prettyprint">
+int i;
+tbm_surface_h surface = NULL;
+
+for (i = 0; i&lt;format_num; i++)
+{
+&nbsp;&nbsp;&nbsp;if (formats[i] == TBM_FORMAT_ARGB8888)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;surface = tbm_surface_create (128, 128, TBM_FORMAT_ARGB8888);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (surface == NULL)
+&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;break;
+&nbsp;&nbsp;&nbsp;}
+}
+if (i == format_num)
+{
+&nbsp;&nbsp;&nbsp;dlog_print (DLOG_ERROR, LOG_TAG, &quot;format not supported\n&quot;);
+}
+</pre>
+</li>
+
+<li>
+<p>Map the TBM surface with the access option. After the surface is mapped, the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> information is saved in the <span style="font-family: Courier New,Courier,monospace">tbm_surface_info</span> structure:</p>
+<pre class="prettyprint">
+tbm_surface_info_s surface_info;
+
+if (tbm_surface_map (surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE, &amp;surface_info) != TBM_SURFACE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Fail to map tbm_surface\n&quot;);
+}
+</pre>
+</li>
+
+<li>
+<p>Store data at the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> by using pointer of each plane:</p>
+<pre class="prettyprint">
+for (i = 0; i&lt;surface_info.num_planes; i++)
+{
+&nbsp;&nbsp;&nbsp;memset (surface_info.planes[i].ptr, 0x0, surface_info.planes[i].size);
+}
+</pre>
+</li>
+
+<li>Unmap and destroy <span style="font-family: Courier New,Courier,monospace">tbm_surface</span>.
+<pre class="prettyprint">
+if (tbm_surface_unmap (surface) != TBM_SURFACE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to unmap tbm_surface\n&quot;);
+}
+if (tbm_surface_destroy (surface) != TBM_SURFACE_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to destroy tbm_surface\n&quot;);
+}
+free (formats);
+</pre>
+</li>
+</ol>
+
+                       </div>
+               </li>
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm
new file mode 100644 (file)
index 0000000..4f061d0
--- /dev/null
+++ b/org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm
@@ -0,0 +1,279 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Graphic Widget: Drawing Simple Images Using Evas Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#rectangle" class="opensection">Drawing a Rectangle or Line</a></li>
+                       <li><a href="#gradation" class="opensection">Implementing Gradation</a></li>
+                       <li><a href="#resizing" class="opensection">Resizing Images</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Graphic Widget: Drawing Simple Images Using Evas Objects</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL widget library.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Evas API basics by learning about:</p>
+<ul>
+<li><a href="#rectangle">Drawing a Rectangle or Line</a>
+<p>Draw a rectangle or a line object on the screen in a variety of size and color.</p></li>
+<li><a href="#gradation">Implementing Gradation</a>
+<p>Represent a gradation effect using the rectangle object.</p></li>
+<li><a href="#resizing">Resizing Images</a>
+<p>Adjust the loaded image size and draw on the screen.</p></li>
+
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="rectangle" name="rectangle" class="items-tit-h2">Drawing a Rectangle or Line</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>The rectangle and line demo is implemented in the <span style="font-family: Courier New,Courier,monospace">rectline.c</span> file. It uses a widget layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
+<p>The EFL has the following types of non-container objects:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Rectangle</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Image</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Text</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Line</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_TextBlock</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Polygon</span></li>
+</ul>
+
+<p>Each object has a visual appearance that can be drawn on the canvas.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view</span> function creates 10 rectangles and 10 lines with random sizes and coordinates, and draws those objects on the <span style="font-family: Courier New,Courier,monospace">evas</span>. The color and the transparency of the object is also randomized.</p>
+<p>The coordinates and sizes cannot be expanded beyond the screen size.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *rect, *line;
+&nbsp;&nbsp;&nbsp;Evas *e;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;e = evas_object_evas_get(layout);
+
+&nbsp;&nbsp;&nbsp;// Draw rects
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt;= 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x, y, w, h, r, g, b, a;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = rand() % 480;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = rand() % 800;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = rand() % 480;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = rand() % 800;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = rand() % 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = rand() % 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b = rand() % 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a = rand() % 255;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rect = evas_object_rectangle_add(e);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(rect, w, h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(rect, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, r, g, b, a);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Draw lines
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt;= 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x1, y1, x2, y2, r, g, b, a;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x1 = rand() % 480;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y1 = rand() % 800;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x2 = rand() % 480;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y2 = rand() % 800;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = rand() % 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = rand() % 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b = rand() % 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a = rand() % 255;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line = evas_object_line_add(e);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_line_xy_set(line, x1, y1, x2, y2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(line, r, g, b, a);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(line);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+</pre>
+
+<p>The following figure illustrates the result.</p>
+
+  <p class="figure">Figure: Rectangles and lines</p> 
+  <p style="text-align:center;"><img alt="Rectangles and lines" src="../../images/demo_rectangle2.png" /></p>
+
+                       </div>
+               </li>
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="gradation" name="gradation" class="items-tit-h2">Implementing Gradation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>The gradation demo is implemented in the <span style="font-family: Courier New,Courier,monospace">gradation.c</span> file. It uses a widget layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p> 
+<p>The sample application creates rows of small rectangles that eventually fill the screen, starts a new row when the earlier row gets to the end of the screen, and changes the color of the squares as the number of the rows increases.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *rect, *line;
+&nbsp;&nbsp;&nbsp;Evas *e;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;e = evas_object_evas_get(layout);
+
+&nbsp;&nbsp;&nbsp;int x, y, w, h, r, g, b, a;
+&nbsp;&nbsp;&nbsp;x = 0;
+&nbsp;&nbsp;&nbsp;y = 0;
+&nbsp;&nbsp;&nbsp;w = 480;
+&nbsp;&nbsp;&nbsp;h = 10;
+&nbsp;&nbsp;&nbsp;r = 0;
+&nbsp;&nbsp;&nbsp;g = 0;
+&nbsp;&nbsp;&nbsp;b = 0;
+&nbsp;&nbsp;&nbsp;a = 255;
+
+&nbsp;&nbsp;&nbsp;// Draw rects
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 200; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rect = evas_object_rectangle_add(e);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(rect, w, h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(rect, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y +=4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, r, g, b, a);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (r &lt; 255)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r +=4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (g &lt; 255)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g +=4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b +=4;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+</pre>
+
+<p>The following figure illustrates the result.</p>
+
+<p class="figure">Figure: Gradation</p> 
+  <p style="text-align:center;"><img alt="Gradation" src="../../images/demo_gradation2.png" /></p> 
+
+                       </div>
+               </li>           
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="resizing" name="resizing" class="items-tit-h2">Resizing Images</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>The image resizing demo is implemented in the <span style="font-family: Courier New,Courier,monospace">imageresize.c</span> file. It creates image objects with random sizes and coordinates. It uses a widget layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *img;
+&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt;= 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x, y, w, h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = rand() % 480;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = rand() % 800;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = rand() % 480;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = rand() % 800;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img = elm_image_add(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s/image.jpg&quot;, ICON_DIR);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(img, buf, NULL);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, w, h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+</pre>
+
+<p>The following figure illustrates the result.</p>
+
+<p class="figure">Figure: Image resizing</p> 
+  <p style="text-align:center;"><img alt="Image resizing" src="../../images/demo_resizing2.png" /></p> 
+
+                       </div>
+               </li>                   
+       
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
new file mode 100644 (file)
index 0000000..398ce34
--- /dev/null
+++ b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
@@ -0,0 +1,442 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Using Location Information and Service</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#initial">Initializing the Location Service</a></li>
+                       <li><a href="#last_known">Getting the Last Known Location</a></li>
+                       <li><a href="#update">Getting Location Updates</a></li>
+                       <li><a href="#bound">Using Location Bounds</a></li>
+                       <li><a href="#satellite">Getting Satellite Information</a></li>
+                       <li><a href="#track">Tracking the Route</a></li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Location: Using Location Information and Service</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can retrieve and use location information, and track the route.</p> 
+
+  
+  <h2>Warm-up</h2> 
+  <p>Become familiar with the Location API basics by learning about:</p>
+               <ul>
+               <li><a href="#initial">Initializing the Location Service</a>
+               <p>Fulfill the prerequisites, start the location service, and stop it when no longer needed.</p></li>
+               <li><a href="#last_known">Getting the Last Known Location</a>
+               <p>Retrieve the last known position of the device.</p></li>
+
+               <li><a href="#update">Getting Location Updates</a>
+               <p>Acquire the device&#39;s position (given as coordinates) and keep tracking whenever the position is updated.</p></li>
+
+               <li><a href="#bound">Using Location Bounds</a>
+               <p>Create a location area and track its bounds.</p></li>
+
+               <li><a href="#satellite">Getting Satellite Information</a>
+               <p>Acquire information on satellites, which connect with the device to get location information.</p></li>
+               </ul>
+  
+  <h2>Follow-up</h2> 
+  <p>Once we have learned the basics of the Location API, we can now move on to more advanced tasks, including:</p>
+               <ul>
+               <li><a href="#track">Tracking the Route</a>
+               <p>Get information about the current position, velocity, and distance.</p></li>
+               </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="initial" name="initial" class="items-tit-h2">Initializing the Location Service</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<ol><li><p>To use the location-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;locations.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;locations.h&gt;
+</pre></li>
+<li><p>Create a location manager handle using the <span style="font-family: Courier New,Courier,monospace">location_manager_create()</span> function before you use it. For this example, the GPS is used as the source of the position data, so the first argument is <span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_GPS</span>. You can use other values of the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> enumeration, such as <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_HYBRID</span> or <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_CPS</span>, but they are less accurate.</p>
+<pre class="prettyprint">
+location_manager_h manager;
+location_manager_create(LOCATIONS_METHOD_GPS, &amp;manager);
+</pre>
+<p>Each location manager is an independent service. Multiple location managers can be created in the same application to provide different services, such as GPS and Bluetooth. Callbacks are set for a given location manager and are called depending on whether the service was started for its manager.</p></li>
+
+<li><p>Start the location service using the <span style="font-family: Courier New,Courier,monospace">location_manager_start()</span> function. This call is asynchronous and only initiates the process of starting the service of the location manager. Once the manager is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the <span style="font-family: Courier New,Courier,monospace">location_manager_set_service_state_changed_cb()</span> function.</p>
+<pre class="prettyprint">
+location_manager_start(manager);</pre></li>
+
+<li><p>Using the location service is power consuming, so if the service is not used, you can stop updating the location using the <span style="font-family: Courier New,Courier,monospace">location_manager_stop()</span> function. Call the <span style="font-family: Courier New,Courier,monospace">location_manager_start()</span> function again if the update position information is needed.</p>
+<pre class="prettyprint">location_manager_stop(manager);</pre></li>
+
+<li><p>At the end of the application, destroy all used resources, such as the location manager (<span style="font-family: Courier New,Courier,monospace">location_manager_destroy()</span>):</p>
+<pre class="prettyprint">
+location_manager_destroy(manager);
+manager = NULL;
+</pre>
+<p>If you destroy the handle, there is no need to call the <span style="font-family: Courier New,Courier,monospace">location_manager_stop()</span> function to stop the service, the service is automatically stopped. Also, you do not have to unset previously set callbacks.</p></li></ol>  
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="last_known" name="last_known" class="items-tit-h2">Getting the Last Known Location</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                                 <p>To retrieve synchronously the last known location of the device:</p>
+  <ol>
+   <li> <p>Create the variable for <span style="font-family: Courier New,Courier,monospace">location_manager_h</span> with the method you want to apply for the application:</p> <pre class="prettyprint">
+location_manager_h manager;
+int ret = location_manager_create(LOCATIONS_METHOD_GPS, &amp;manager);
+</pre>  </li>
+
+       <li>Register a callback function for location service state changes and start the Location Manager:
+       <pre class="prettyprint">
+ret = location_manager_set_service_state_changed_cb(manager, __state_changed_cb, NULL);
+ret = location_manager_start(manager);</pre>
+       <p>The function <span style="font-family: Courier New,Courier,monospace">__state_changed_cb</span> is a callback function, which is called when the status of location service state changes. </p>
+       <pre class="prettyprint">
+static location_service_state_e service_state;
+static void __state_changed_cb(location_service_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;service_state = state;
+}
+</pre>
+</li>
+<li>After starting the Location Manager, call the <span style="font-family: Courier New,Courier,monospace">location_manager_get_last_location()</span> function to get the last location information including altitude, latitude, and direction:
+<pre class="prettyprint">
+double altitude, latitude, longitude, climb, direction, speed;
+double horizontal, 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, &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>Use this function instead of repeatedly requesting current locations to spare the Location Manager from running costly positioning systems.</p></li>
+
+<li>When getting the current location information, call the <span style="font-family: Courier New,Courier,monospace">location_manager_get_location()</span> function after the service is enabled:
+<pre class="prettyprint">
+static void __state_changed_cb(location_service_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;double altitude, latitude, longitude, climb, direction, speed;
+&nbsp;&nbsp;&nbsp;double horizontal, vertical;
+&nbsp;&nbsp;&nbsp;location_accuracy_level_e level;
+&nbsp;&nbsp;&nbsp;time_t timestamp;
+
+&nbsp;&nbsp;&nbsp;if (state == LOCATIONS_SERVICE_ENABLED) 
+&nbsp;&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;&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;&amp;horizontal, &amp;vertical, &amp;timestamp);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>When you no longer need the Location Manager, destroy it. You must also unset all connected callback functions and stop the Location Manager:
+<pre class="prettyprint">
+location_manager_unset_service_state_changed_cb(manager);
+location_manager_stop(manager);
+location_manager_destroy(manager);</pre></li></ol>
+</div></li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="update" name="update" class="items-tit-h2">Getting Location Updates</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>You can acquire the device&#39;s position (given as coordinates) and convert it to the corresponding address. You can get a notification of the position update periodically using the position update callback. The position update callback is invoked periodically, receiving the device&#39;s current position with every call.</p>
+<ol><li><p>Register the callback using the <span style="font-family: Courier New,Courier,monospace">location_manager_set_position_updated_cb()</span> function:</p>
+<pre class="prettyprint">location_manager_set_position_updated_cb(manager, position_updated, 2, NULL);</pre>
+<p>The third parameter determines the frequency of callback calls. In this example, the callback is called every 2 seconds.</p></li>
+<li><p>When the update is received, you can, for example, update the variables that store the current position:</p>
+<pre class="prettyprint">
+static double user_latitude, user_longitude;
+static void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;user_latitude = latitude;
+&nbsp;&nbsp;&nbsp;user_longitude = longitude;
+}
+</pre>
+
+         <table class="note">
+          <tbody>
+               <tr>
+                <th class="note">Note</th>
+               </tr>
+               <tr>
+                <td class="note">The callback is called only if the Location Manager has been started. The same holds for all other callbacks registered with the manager.</td>
+               </tr>
+          </tbody>
+         </table> </li></ol>  
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="bound" name="bound" class="items-tit-h2">Using Location Bounds</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>You can define a virtual permitter, which is tracked to see whether you enter or exit the area.</p>
+<p>To use location bounds:</p>
+
+<ol>
+<li>Create location bounds with the required type (rectangle, circle, or polygon) needed for your application (each type has their own API sets):
+<pre class="prettyprint">
+int poly_size = 3; // Triangle shaped bounds
+location_coords_s coord_list[poly_size];
+coord_list[0].latitude = 37; // Temporary value
+coord_list[0].longitude = 126;
+coord_list[1].latitude = 38;
+coord_list[1].longitude = 128;
+coord_list[2].latitude = 35;
+coord_list[2].longitude = 128;
+location_bounds_h bounds_poly;
+ret = location_bounds_create_polygon(coord_list, poly_size, &amp;bounds_poly);
+</pre>
+<p>When a circular bound is needed, use the <span style="font-family: Courier New,Courier,monospace">location_bounds_create_circle()</span> function.</p></li>
+
+<li>Get the coordinates of the generated polygon bounds. Register a callback function to notify you of the polygon coordinates:
+<pre class="prettyprint">
+ret = location_bounds_foreach_polygon_coords(bounds_poly, capi_poly_coords_cb, NULL);</pre>
+<p>For the callback function (the second parameter in the function above) implement the function separately:</p>
+<pre class="prettyprint">
+static double latitude, longitude;
+static bool capi_poly_coords_cb(location_coords_s coords, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;latitude = coords.latitude;
+&nbsp;&nbsp;&nbsp;longitude = coords.longitude;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+<li><p>Register the callback using the <span style="font-family: Courier New,Courier,monospace">location_bounds_set_state_changed_cb()</span> function:</p>
+<pre class="prettyprint">location_bounds_set_state_changed_cb(bounds_poly, bounds_state_changed_cb, NULL);</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">bounds_state_changed_cb</span> function is a callback, which is called when you enter or exit the defined region.</p>
+<pre class="prettyprint">
+static location_boundary_state_e bound_state;
+static void bounds_state_changed_cb(location_boundary_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;bound_state = state;
+}
+</pre>
+</li>
+<li><p>Call the <span style="font-family: Courier New,Courier,monospace">location_manager_add_boundary()</span> function to get the boundary information.</p>
+<pre class="prettyprint">location_manager_add_boundary(manager, bounds_poly);</pre>
+</li>
+
+<li>After using the polygon bounds, destroy them:
+<pre class="prettyprint">
+location_bounds_destroy(bounds_poly);</pre></li>
+</ol>  
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="satellite" name="satellite" class="items-tit-h2">Getting Satellite Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>You can acquire and update information of the satellite connected with the device. The information includes azimuth, elevation, PRN, SNR, and NMEA data. You can also get a notification of the satellite update periodically using the satellite update callback. The satellite update callback is invoked periodically, receiving the information of connected satellites with every call.</p>
+<ol><li><p>Register the callback using the <span style="font-family: Courier New,Courier,monospace">location_manager_set_satellite_updated_cb()</span> function:</p>
+<pre class="prettyprint">
+gps_status_set_satellite_updated_cb(manager, capi_gps_status_satellite_updated_cb, 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 having brief satellite information is called. To get the detailed satellite information in the sky, call the <span style="font-family: Courier New,Courier,monospace">gps_status_foreach_satellites_in_view()</span> function in the callback. Variables that store current satellite information are updated:
+
+<pre class="prettyprint">
+int cur_azimuth, cur_elevation, cur_prn, cur_snr;
+
+static bool 
+capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation, unsigned int prn, int snr, bool is_in_use, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;cur_azimuth = azimuth;
+&nbsp;&nbsp;&nbsp;cur_elevation = elevation;
+&nbsp;&nbsp;&nbsp;cur_prn = prn;
+&nbsp;&nbsp;&nbsp;cur_snr = snr;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static int numofactive, numofinview;
+
+static void 
+capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview, time_t timestamp, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;numofinview = num_of_active;
+&nbsp;&nbsp;&nbsp;if (num_of_inview &gt; 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gps_status_foreach_satellites_in_view(manager, capi_gps_status_get_satellites_cb, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+         <table class="note">
+          <tbody>
+               <tr>
+                <th class="note">Note</th>
+               </tr>
+               <tr>
+                <td class="note">Note that the callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.</td>
+               </tr>
+          </tbody>
+         </table> </li></ol>  
+                       </div>
+               </li>   
+
+<li>
+                       <div class="devicespec-tit">
+                               <h2 id="track" name="track" class="items-tit-h2">Tracking the Route</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To get information about the current position, velocity, and distance.</p>
+ 
+<ol><li>Receive periodic notifications.
+<ol><li>
+<p>You can get notifications of the position and velocity updates using the position and velocity update callbacks. The callbacks are invoked periodically, receiving the device&#39;s current position or velocity with every call.</p>
+
+<ul class="ul"><li><p>Register the position update callback using the <span style="font-family: Courier New,Courier,monospace;">location_manager_set_position_updated_cb()</span> function:</p>
+
+<pre class="prettyprint">
+location_manager_set_position_updated_cb(manager, position_updated, 2, NULL);
+</pre></li>
+
+<li><p>Register the velocity update callback using the <span style="font-family: Courier New,Courier,monospace;">location_manager_set_velocity_updated_cb()</span> function:</p>
+
+<pre class="prettyprint">
+location_manager_set_position_updated_cb(manager, velocity_updated, 2, NULL);
+</pre></li></ul>
+
+<p>The third parameter determines the frequency of the callback calls. In this example, the callback is called every 2 seconds.</p></li>
+
+<li><p>Define the position and velocity callback functions:</p>
+
+<pre class="prettyprint">
+void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data);
+void velocity_updated(double speed, double direction, double climb, time_t timestamp, void *user_data);
+</pre>
+
+<p>Within the function, 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>
+
+<li>Receive the current information.
+<p>You can get the current information about position, velocity, or localization accuracy:</p>
+<ul class="ul"><li>To get information about the current position (altitude, latitude, and longitude), use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_position()</span> function:
+
+<pre class="prettyprint">
+time_t timestamp;
+double altitude;
+double latitude;
+double longitude;
+location_manager_get_position(manager, &amp;altitude, &amp;latitude, &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 <span style="font-family: Courier New,Courier,monospace;">location_manager_get_velocity()</span> function:</p>
+
+<pre class="prettyprint">
+double climb;
+double direction;
+double speed;
+location_manager_get_velocity(manager, &amp;climb, &amp;direction, &amp;speed, &amp;timestamp);
+</pre></li>
+
+<li><p>To get information about the current accuracy (level – see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#ga4878b9a0afa5990dd2bb500850c1828b">location_accuracy_level_e</a> enumeration, and horizontal and vertical accuracy), use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_accuracy()</span> function:</p>
+
+<pre class="prettyprint">
+location_accuracy_level_e level;
+double horizontal;
+double vertical;
+location_manager_get_accuracy(manager, &amp;level, &amp;horizontal, &amp;vertical);
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_location()</span> function to get all of the above 10 values at once:</p>
+
+<pre class="prettyprint">
+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>
+
+<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>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_position()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_velocity()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_accuracy()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">location_manager_get_last_location()</span></li>
+</ul>
+
+<p>The syntax of these functions corresponds to the functions presented above.</p></li></ul></li>
+
+<li>Get the distance.
+<p>To get a distance (in meters) between 2 points, use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_distance()</span> function. The obtained value is a great-circle distance; the shortest distance between 2 points on the sphere.</p>
+<p>Provide the latitude and longitude of the starting point, the latitude and longitude of the end point, and the variable to store obtained distance:</p>
+
+<pre class="prettyprint">
+double distance;
+location_manager_get_distance(37.28, 127.01, 52.23, 21.01, &amp;distance);
+</pre>
+
+<p>To get more precise traveled distance, sum distances between each 2 consecutive points, delivered by the periodic position update callback.</p></li></ol>
+ 
+                       </div>
+               </li>   
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
new file mode 100644 (file)
index 0000000..64be9b3
--- /dev/null
+++ b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
@@ -0,0 +1,209 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Email: Managing Emails</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Email Service</a></li>
+                       <li><a class="opensection" href="#creatingmail">Creating and Sending Email</a></li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/messaging/email_n.htm">Email Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Email: Managing Emails</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can send email messages with attachments.</p>
+
+        <h2>Warm-up</h2>
+        <p>Become familiar with the Email API basics by learning about:</p>
+        <ul>
+            <li><a class="opensection" href="#init">Initializing the Email Service</a>
+                       <p>Initialize the email service for use.</p></li>
+                       <li><a class="opensection" href="#creatingmail">Creating and Sending Email</a>
+                       <p>Create and send a message after adding attachments and recipients.</p></li>
+        </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Email Service</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the email service:</p>
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;email.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;email.h&gt;
+</pre></li>
+<li>                   
+<p>Set up at least 1 email account on your device before sending an email.</p></li>
+
+<li><p>To build your application with the Email API, package dependencies and the build option must be configured: </p>
+
+<ol><li>Add the below line to the spec file.
+
+<pre class="prettyprint">BuildRequires:capi-messaging-email</pre></li>
+
+<li>Add <span style="font-family: Courier New,Courier,monospace">capi-messaging-email</span> to <span style="font-family: Courier New,Courier,monospace">pkg_check_modules</span> in the <span style="font-family: Courier New,Courier,monospace;">CMakeList.txt</span> file.</li></ol></li></ol>
+
+<p>The email service does not need any initialization or connection opening before the API usage. Email creation and sending functions can be used without any additional preparation.</p>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="creatingmail" name="creatingmail" class="items-tit-h2">Creating and Sending Email</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create and send email messages:</p>
+
+<ol><li>Create an email message.
+<p>To create an email message and receive its handle, use the <span style="font-family: Courier New,Courier,monospace;">email_create_message()</span> function. The function return code informs about success or failure:</p>
+<pre class="prettyprint">email_h msg;
+int error_code = EMAILS_ERROR_NONE;
+error_code = email_create_message(&amp;msg);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create email message\n&quot;);
+}</pre>
+<p>One of the possible error codes that is not related to the Email module itself is <span style="font-family: Courier New,Courier,monospace;">EMAIL_ERROR_ACCOUNT_NOT_FOUND</span>. This error occurs if no email account has been configured on a device.</p></li>
+
+<li>Add recipients and attachments.
+<p>Email recipients can be added to the email message one by one. There is no possibility to add lists of recipients in one function call. Each address has to be given as a character string and the address type (TO, CC, BCC) has to be declared:</p>
+<pre class="prettyprint">error_code = email_add_recipient(msg, EMAIL_RECIPIENT_TYPE_TO, &quot;example@mail.com&quot;);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to add recipient\n&quot;);
+}</pre>
+<p>To add an attachment to the email message, you need a full path to the attachment file. Currently, files with size up to 10 MB are supported.</p>
+    <pre class="prettyprint">error_code = email_add_attach(msg, &quot;/full/path/to/attachment&quot;);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to add attachment\n&quot;);
+}</pre></li>
+
+<li>Remove recipients or attachments.
+<p>You can remove added recipients and attachments. In both cases, all recipients or attachments are removed at once. It is not possible to remove one selected item. As all functions from the Email API, the <span style="font-family: Courier New,Courier,monospace;">email_remove_all_attachments()</span> and <span style="font-family: Courier New,Courier,monospace;">email_remove_all_recipients()</span> functions inform about success or failure by the returned error code:</p>
+<pre class="prettyprint">error_code = email_remove_all_recipients(msg);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to add remove recipients\n&quot;);
+}
+error_code = email_remove_all_attachments (msg);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to remove attachments\n&quot;);
+}</pre></li>
+
+<li>Save the email before sending it.
+<pre class="prettyprint">error_code = email_save_message(msg);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to save email\n&quot;);
+}
+</pre></li>
+
+<li>Define the email sending status callback.
+<p>Email sending is an asynchronous operation, and thus the sending status cannot be checked directly in the return code from the <span style="font-family: Courier New,Courier,monospace;">email_send_message()</span> function. To receive notifications about sending success or failure, a callback function must be defined:</p>
+<pre class="prettyprint">static void email_send_status(email_h email, email_sending_e result, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result == EMAIL_SENDING_FAILED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to send email\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (result == EMAIL_SENDING_SUCCEEDED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sending was successful
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Email sending finished with success\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li>
+
+<li>Send the email.
+<p>If the email message object is ready and the sending status callback is defined, the message can be sent:</p>
+<pre class="prettyprint">error_code = email_set_message_sent_cb(msg, email_send_status, NULL);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to set sending status callback\n&quot;);
+}
+
+error_code = email_send_message(msg, false);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;&quot;);
+}</pre>
+<p>When the message is sent or if sending was canceled and the message is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace;">email_destroy_message()</span> function. The callback registered for the specified message must also be unset using the <span style="font-family: Courier New,Courier,monospace;">email_unset_message_sent_cb()</span> callback function:</p>
+<pre class="prettyprint">error_code = email_unset_message_sent_cb(msg);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to unset status callback\n&quot;);
+}
+
+error_code = email_destroy_message(msg);
+if (error_code != EMAILS_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to delete email message\n&quot;);
+}</pre></li></ol>
+       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
new file mode 100644 (file)
index 0000000..bed3fa4
--- /dev/null
+++ b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Sending SMS, MMS, Email, and Push Messages</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Messaging: Sending SMS, MMS, Email, and Push Messages</h1>
+
+ <p>The messaging tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+      <ul>
+      
+        
+          <li><a class="opensection" href="sms_mms_tutorial_n.htm">Messages: Creating and Sending SMS and MMS Messages</a> <p>Demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.</p></li>     
+          <li><a class="opensection" href="email_tutorial_n.htm">Email: Managing Emails</a> <p>Demonstrates how you can send emails with attachments.</p></li>
+          <li><a class="opensection" href="push_tutorial_n.htm">Push: Using the Push Service</a> <p>Demonstrates how you can receive notifications through the Internet even when the application is not running.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
new file mode 100644 (file)
index 0000000..2e71161
--- /dev/null
+++ b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
@@ -0,0 +1,927 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Push: Using the Push Service</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a class="opensection" href="#start">Initializing the Push Service</a></li>
+                               <li><a class="opensection" href="#connect">Connecting to the Push Service</a></li>
+                               <li><a class="opensection" href="#registration">Registering with the Push Server</a></li>
+                               <li>Notification management
+                               <ul class="toc">
+                               <li><a class="opensection" href="#send">Sending Push Notifications</a></li>     
+                               <li><a class="opensection" href="#dealing">Handling Push Notifications</a></li>
+                               </ul></li>
+                               <li><a class="opensection" href="#security">Managing Security</a></li>  
+               </ul>     
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/messaging/push_n.htm">Push Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Push: Using the Push Service</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can use the Tizen Push Service to allow applications in a mobile device to receive notifications through the Internet even when the applications are not running.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Push API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#start">Initializing the Push Service</a>
+               <p>Initialize the push service for use.</p></li>
+               <li><a class="opensection" href="#connect">Connecting to the Push Service</a>
+               <p>Establish a socket connection to the push service.</p></li>
+               <li><a class="opensection" href="#registration">Registering with the Push Server</a>
+               <p>Register and unregister with the push server.</p></li>
+               <li>Notification management
+               <ul>
+               <li><a class="opensection" href="#send">Sending Push Notifications</a>
+               <p>Send push notifications from the application server to an application.</p></li>      
+               <li><a class="opensection" href="#dealing">Handling Push Notifications</a>
+               <p>Receive notifications at different states.</p></li>
+               </ul></li>
+               <li><a class="opensection" href="#security">Managing Security</a>
+               <p>Ensure the security of notifications containing sensitive information.</p></li>
+       </ul>
+          
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="start" name="start" class="items-tit-h2">Initializing the Push Service</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The following figure illustrates the architecture of the Tizen push service.</p>
+<p style="text-align:center;"><img alt="Overview" 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>When an application is installed and launched, it sends a registration request to Tizen push server through the push service.</li>
+<li>If the registration request is approved, the server replies the registration ID to the application through the push service.</li>
+<li>The application sends the registration ID to the application server. This registration ID is used to identify the application installed in that particular device.</li>
+<li>When the application server needs to send a push notification to the application in that particular device, it sends the notification together with the registration ID to the push server.</li>
+<li>When the push server receives the notification and the registration ID, it checks which device has the application of the registration ID and then sends the notification to that device.</li>
+<li>When the push service receives the notification and the registration ID, it sends the notification to the destination application.</li>
+</ol>
+
+<p>Make sure the following requirements are fulfilled:</p>
+<ol>
+<li>Internet access 
+<p>To connect to the Tizen push server and receive notifications from it, your 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 your project in the Tizen SDK, you are given the package ID (randomly generated by the SDK or entered by yourself). The Tizen push server identifies your applications using the package ID.</p></li>
+<li>Permission to Tizen push servers
+<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 following information. When the team approves your request, you receive a push app ID corresponding to your package ID.</p></li>
+</ol>
+
+<table>
+<caption>Table: Request form details</caption>
+   <colgroup> 
+    <col width="25%" /> 
+    <col width="75%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th colspan="2">Developer information</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Email address</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Your email address to receive the approval response.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Last name</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Your last name.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>First name</p></td> 
+     <td rowspan="1" colspan="1"> <p>Your first name.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Country</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Your country of residence.</p> </td> 
+       </tr>
+    <tr> 
+     <th colspan="2">Application information</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Package ID </p> </td> 
+     <td rowspan="1" colspan="1"> <p> The ID of the application package that uses the push messaging service. The package ID can be obtained from the <span style="font-family: Courier New,Courier,monospace">.xml</span> file in the Tizen SDK.  </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Application name</p> </td> 
+     <td rowspan="1" colspan="1"> <p>Name of the application that uses the push service.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p>Testing purpose</p> </td> 
+     <td rowspan="1" colspan="1"> <p> Yes or no. If you request the service for testing purposes only, the duration of the push service is limited to 3 weeks.</p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Purpose of the push notification usage </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Description of how you plan to use the push service, including the situations in which you want to use it. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> App launch date </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Application launch date in the YYYY/MM/DD format.<br />For example: 2014/08/01. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Service area/country </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Service area, such as Asia, Africa, America, Europe, or the country where the application is used. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Daily push requests </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Estimated number of daily notifications. </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> Transactions per second </p> </td> 
+     <td rowspan="1" colspan="1"> <p> Estimated peak number of transactions per second (the recommendation is below 100). </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+
+<p>To set up the required library and privilege for your application:</p>
+<ol>
+<li><p>To use APIs for the Tizen push service, include the  <span style="font-family: Courier New,Courier,monospace;">&lt;push-service.h&gt;</span> header file to your application:</p>
+
+<pre class="prettyprint">
+#include &lt;push-service.h&gt;
+</pre>
+</li>
+
+<li id="privilege" name="privilege"><p>To access the Tizen push service on the device, add the following privilege to the manifest file:
+</p>
+
+<pre class="prettyprint">
+http://tizen.org/privilege/push
+</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="connect" name="connect" class="items-tit-h2">Connecting to the Push Service</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To request or receive push notifications, establish a socket connection to the push service. All the information regarding this connection must be controlled by a connection handle which can be defined as a global variable:</p>
+
+<pre class="prettyprint">
+push_service_connection_h push_conn;
+</pre>
+
+<p>To manage push service connections:</p>
+<ol>
+<li>Connect to the push service.
+<p>Once the connection handle is defined, use the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function to connect the push service:</p>
+
+<pre class="prettyprint">
+#define PUSH_APP_ID &quot;YOUR_PUSH_ID_HERE&quot;
+
+static bool app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;// Connect to the push service when the application is launched
+&nbsp;&nbsp;&nbsp;ret = push_service_connect(PUSH_APP_ID, _state_cb, _noti_cb, NULL, &amp;push_conn);
+
+&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Your implementation here
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;push_service_connect() Failed&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>In the above example, the application establishes a socket connection to the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The <span style="font-family: Courier New,Courier,monospace;">YOUR_PUSH_ID_HERE</span> argument is the push app ID received from the Tizen push server team when the access to the server was requested. Keep this push app ID confidential, otherwise your push notifications can be hijacked by malicious applications.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> parameters are callback functions called when the <a href="#state">state changes</a> or <a href="#dealing">a notification arrives from the server</a> through the push service.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">push_conn</span> parameter is the output of the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. If the connection between your application and the service is successful, the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> and the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> connection handle is returned through the last parameter. If the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function returns other values, the connection to the service failed. This happens most likely when the <a href="#privilege">push privilege</a> is not added in the SDK.</p>
+
+<p>This sample application establishes a connection to the service when it is launched and disconnects from the service when it terminates. Due to this, the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function is located in the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function, which is called when the application is launched.
+</p>
+</li>
+
+<li>Disconnect from the push service.
+<p>When the application terminates or no longer uses the push service, close the connection using the <span style="font-family: Courier New,Courier,monospace;">push_service_disconnect()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">push_service_disconnect()</span> function closes the existing connection associated with the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> handle and returns all the resources allocated for the connection.</p>
+
+<pre class="prettyprint">
+push_service_disconnect(push_conn);
+push_conn = NULL;
+</pre>
+
+<p>The connection is automatically closed when the application terminates. Hence, if your application uses the push service while being launched, your application does not need this function. However, your application can disconnect the service in the middle of the application operation. If you add a toggle switch to your application for switching the push service on and off, call this function when the service is switched off.</p>
+</li>
+
+<li id="state" name="state">Handle state transitions.
+<p>After the connection to the service is made, your application is notified whenever the connection state changes. This notification is conducted through the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> callback, which is defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The following figure illustrates the possible states.</p>
+
+<p style="text-align:center;"><img alt="State transitions" src="../../images/push_state_transitions.png" /></p>
+
+<p>Once launched, your application is in the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state. When the application establishes a connection to the service using the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function, the state becomes either <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> or <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>:</p>
+<ul class="ul"><li>If your application is currently registered to the push server, the service forces your application to transit from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state. In this case, your application can request deregistration to the push server through the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>.</li>
+<li>If your application is not currently registered to the push server, the state transits from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state. In this case, your application can request registration to the push server through the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>.</li>
+<li>When an error occurs, the state transits to <span style="font-family: Courier New,Courier,monospace;">ERROR</span>.</li></ul>
+
+<p>When the current state transits, the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> function is called and the new state is obtained from the first argument. The application then needs to determine its actions based on the new state:</p>
+
+<pre class="prettyprint">
+static void _state_cb(push_service_state_e state, const char *err, void *user_data)    
+{
+&nbsp;&nbsp;&nbsp;switch (state)       
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_UNREGISTERED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;Arrived at STATE_UNREGISTERED&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_state_unregistered(user_data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_REGISTERED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;Arrived at STATE_REGISTERED&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_state_registered(user_data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;Arrived at STATE_ERROR&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_state_error(err, user_data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;Unknown State&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>In the above example, the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span>, <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span>, and <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> functions contain the actions for the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>, <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>, and <span style="font-family: Courier New,Courier,monospace;">ERROR</span> states, respectively. Your application does not need to handle the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state because it is maintained internally, and this callback function is never invoked in this state. The second argument, <span style="font-family: Courier New,Courier,monospace;">err</span>, is the error message from the push service when the state becomes ERROR. Consequently, only the <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> function takes this argument while others ignore it.</p>
+</li>
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="registration" name="registration" class="items-tit-h2">Registering with the Push Server</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To receive push notifications, your application must send a registration request to the Tizen push server. When the server receives this request, it assigns a registration ID that is unique to your application on the particular device. When sending a notification from your application server, this registration ID is used as a destination address of your application. If your application no longer needs to receive push notifications, it needs to send a deregistration request to the server.</p>
+
+<ol>
+<li>Request registration.
+<p>After connecting to the push service, request registration using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function.</p>
+<p>The function takes 3 arguments. The first argument is the connection handle that was returned from the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The second argument is the callback function that returns the result of this registration request. The last argument is the user data to be handed over to the result callback function. </p>
+
+<pre class="prettyprint">
+static void _on_state_unregistered(void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;// Send a registration request to the push service
+&nbsp;&nbsp;&nbsp;ret = push_service_register(push_conn, _result_cb, NULL);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span> function containing the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function is called when the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>. This sample application is designed to send the registration request as soon as it is connected to the push service. If your application requires users to login to your service, this registration request must be sent after the login process is complete.</p>
+
+<p>Note that the registration request is non-blocking. If <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> returns from the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function, your request is successfully delivered to the push service. However, it does not necessarily mean that your request is approved by the server. If the push service successfully sends your request to the server and receives an approval, the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> callback is called with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_RESULT_SUCCESS</span> from the first parameter:</p>
+
+<pre class="prettyprint">
+static void _result_cb(push_service_result_e result, const char *msg, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result == PUSH_SERVICE_RESULT_SUCCESS)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;Registration request is approved.&quot;);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;Registration ERROR [%s]&quot;, msg);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+
+<p>When an error occurs in the middle of the registration process, the reason is returned from the first parameter of the callback. For example, if the push server is not responding, the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> (because delivery to the service is successful), but the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> function is called later with <span style="font-family: Courier New,Courier,monospace;">PUSH_RESULT_TIMEOUT</span>. In this case, your application does not need to request registration again because the push service keeps the previous request and sends it when the network becomes online. The <span style="font-family: Courier New,Courier,monospace;">msg</span> argument is the error message from the push service if the request fails.</p>
+</li>
+
+<li id="upon" name="upon">
+<p>Your application transits to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state in one of the following cases:</p>
+<ul class="ul">
+<li>Your registration request that your application sent at the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state is approved.</li>
+<li>Your already-registered application at the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state is successfully connected to the push service.</li>
+</ul>
+
+<p>In both cases, the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> callback function is called with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_STATE_REGISTERED</span>. The application calls the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span> function immediately, <a href="#state">as shown in the state transitions</a>. Although you determine the actions inside the function, the following example shows the following actions that you need to bear in mind:</p>
+<ul class="ul">
+<li>If the application has already been registered, request unread notifications to the service that has arrived before the application is launched.</li>
+<li>If the application is newly registered, send the registration ID issued by the push server to your application server.</li>
+</ul>
+
+<pre class="prettyprint">
+static void _on_state_registered(void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char *reg_id = NULL;
+&nbsp;&nbsp;&nbsp;char *app_id = NULL;
+
+&nbsp;&nbsp;&nbsp;// Request unread notifications to the push service 
+&nbsp;&nbsp;&nbsp;// _noti_cb() is called if there are unread notifications
+&nbsp;&nbsp;&nbsp;ret = push_service_request_unread_notification(push_conn);
+
+&nbsp;&nbsp;&nbsp;// Get the registration ID
+&nbsp;&nbsp;&nbsp;ret = push_service_get_registration_id(push_conn, &amp;reg_id);
+&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE)  
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;ERROR [%d]: push_service_get_registration_id()&quot;, ret);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Send reg_id to your application server if necessary
+&nbsp;&nbsp;&nbsp;_send_reg_id_if_necessary(reg_id);
+
+&nbsp;&nbsp;&nbsp;if (reg_id)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(reg_id);
+}
+</pre>
+
+<p>First, you asynchronously request notifications that have arrived before the application is launched. If there is such a notification, it can be received through the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function after the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span> function returns. Once your request for unread notifications is successfully delivered, <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> is returned.</p>
+<p>Secondly, retrieve the registration ID from the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> connection handle. If the ID is new or updated, you need to send it to your application server. This ID is used as a destination address to your application in a particular device. If your application has already sent the ID, you can skip this step. This logic is implemented in the <span style="font-family: Courier New,Courier,monospace;">_send_reg_id_if_necessary()</span> function.</p>
+
+<p>Compute the hash value of the ID and compare it with the existing hash value.</p>
+<ul class="ul"><li>If they are different, your current ID is different from the previous one. In that case, send the registration ID to your application server and then store the new hash value. For security, it is not safe to keep your ID as a string because it can be easily exposed.</li>
+<li>If they are the same, your application server already has this registration ID. In this case, the application exits this function.</li></ul>
+
+
+<pre class="prettyprint">
+#include &lt;openssl/sha.h&gt;
+#define PUSH_HASH_KEY &quot;existing_push_reg_id&quot;
+
+static void _send_reg_id_if_necessary(const char *reg_id)
+{
+&nbsp;&nbsp;&nbsp;unsigned char md[SHA_DIGEST_LENGTH];
+&nbsp;&nbsp;&nbsp;char hash_string[2*SHA_DIGEST_LENGTH+1];
+&nbsp;&nbsp;&nbsp;char *buf_ptr = hash_string;
+&nbsp;&nbsp;&nbsp;char *stored_hash_value = NULL;
+&nbsp;&nbsp;&nbsp;int ret, i;
+
+&nbsp;&nbsp;&nbsp;// Generate a hash string from reg_id
+&nbsp;&nbsp;&nbsp;SHA1((unsigned char *)reg_id, sizeof(reg_id), md);
+
+&nbsp;&nbsp;&nbsp;// Convert byte array to hex string
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; SHA_DIGEST_LENGTH; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf_ptr += sprintf(buf_ptr, &quot;%02X&quot;, md[i]);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;hash_string[2*SHA_DIGEST_LENGTH] = &#39;\0&#39;;
+
+&nbsp;&nbsp;&nbsp;// Get the saved hash string
+&nbsp;&nbsp;&nbsp;ret = preference_get_string(PUSH_HASH_KEY, &amp;stored_hash_value);
+
+&nbsp;&nbsp;&nbsp;// If there is no hash string stored before or
+&nbsp;&nbsp;&nbsp;// if the stored hash string is different from the new one,
+&nbsp;&nbsp;&nbsp;// send reg_id to the server
+&nbsp;&nbsp;&nbsp;if (ret != PREFERENCE_ERROR_NONE || strncmp(stored_hash_value, hash_string, 2*SHA_DIGEST_LENGTH) !=0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Your implementation here to send reg_id to your application server
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = _send_reg_id(reg_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If reg_id is successfully sent, store the new hash value.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!ret) 
+&nbsp;&nbsp;&nbsp;&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;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (stored_hash_value) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(stored_hash_value);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+
+<li>Request deregistration.
+<p>When your application no longer wants to receive push notifications, use the following function to request deregistration:</p>
+
+<pre class="prettyprint">
+push_service_deregister(push_conn, _dereg_result_cb, NULL);
+</pre>
+
+<p>This function is non-blocking. If <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> returns from this function, the request is successfully received by the push service. The result of this request is returned in the <span style="font-family: Courier New,Courier,monospace;">_dereg_result_cb()</span> callback function. The third argument is the pointer to the user data which is handed over to the result function.</p>
+
+<p>Note that the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function is not used, if the application is intended to receive push notifications while being installed. If the application is uninstalled, the push service detects the event and deregisters the application automatically. In contrast, if the application wants to receive push notifications only when a user logs in, the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function must be called whenever a user logs out.</p>
+</li>
+</ol>
+
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="send" name="send" class="items-tit-h2">Sending Push Notifications</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Once your application successfully sends its registration ID to your application server, you are ready to send push notifications from your application server to the application on that particular device. In this tutorial, a simple instruction for sending a push notification to 1 device is provided. For advanced features, refer to the detailed guide from the push server team.</p>
+
+<p>To send push notifications:</p>
+
+<ul class="ul">
+<li>Determine the RQM server.
+ <p>The request manager (RQM) servers collect your push notifications before sending them to your applications. The RQM server must be chosen based on the first 2 digits of the registration ID.</p>
+ 
+<table>
+<caption>Table: RQM servers</caption>
+<tbody>
+<tr>
+ <th>Prefix of the <span style="font-family: Courier New,Courier,monospace;">regId</span></th>
+ <th>Region</th>
+ <th>URL</th>
+</tr>
+<tr>
+ <td>00</td>
+ <td>US East</td>
+ <td>https://useast.push.samsungosp.com:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>01</td>
+ <td>US West</td>
+ <td>https://uswest.push.samsungosp.com:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>02</td>
+ <td>Asia Pacific Southeast</td>
+ <td>https://apsoutheast.push.samsungosp.com:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>03</td>
+ <td>EU West</td>
+ <td>https://euwest.push.samsungosp.com:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>04</td>
+ <td>Asia Pacific Northeast</td>
+ <td>https://apnortheast.push.samsungosp.com:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>05</td>
+ <td>Korea</td>
+ <td>https://apkorea.push.samsungosp.com:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>06</td>
+ <td>China</td>
+ <td>https://apchina.push.samsungosp.com.cn:8088/spp/pns/api/push</td>
+</tr>
+<tr>
+ <td>7C</td>
+ <td>Staging (AP Northeast)</td>
+ <td>https://175.41.248.50:8088/spp/pns/api/push</td>
+</tr>
+</tbody>
+</table>
+
+<p>For instance, if the registration ID of the application that you want to send a notification to begins with 04, the URL of the RQM server must be <span style="font-family: Courier New,Courier,monospace;">https://apnortheast.push.samsungosp.com:8088/spp/pns/api/push</span>.</p>
+</li>
+
+<li>Create the notification message.
+<p>A message is one of the fields that constitute a notification. This message field contains not only the message to show in the quick panel on the device, but also the behaviors that the device should take when receiving the notification. This message field is a string that consists of key-value pairs. The available options are given in the following table.</p>
+
+<table>
+<caption>Table: Message key-value pairs</caption>
+<tbody>
+<tr>
+ <th>Key</th>
+ <th>Value</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">action</span></td>
+ <td>ALERT: Store the message and alert the user.
+       <p>SILENT: Store the message without alerting the user.</p>
+       <p>DISCARD: Discard the message.</p>
+       <p>LAUNCH: Forcibly launch the app and deliver the notification.</p></td>
+ <td>Action to be performed if the application is not running. If action is not included, the default behavior is SILENT.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">alertMessage</span></td>
+ <td>Up to 127 bytes</td>
+ <td>Alert message shown to the user in the quick panel. If the action is not set as ALERT, this value is meaningless.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">badgeOption</span></td>
+ <td>INCREASE: Increase the badge number by the given value.
+       <p>DECREASE: Decrease the badge number by the given value.</p>
+       <p>SET: Set badge number to the given value.</p></td>
+ <td>Option for updating the icon badge number. If the action is set as DISCARD, the <span style="font-family: Courier New,Courier,monospace;">badgeOption</span> is ignored. If it is not included, the icon badge number remains unchanged.</td>
+</tr>
+<tr>
+ <td>badgeNumber</td>
+ <td>0-999</td>
+  <td>-</td>
+</tr>
+</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 as follows:</p>
+
+<pre class="prettyprint">&quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;</pre>
+
+<p>Note that this message field takes effect only when your application is not running (more precisely, when your 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, neither showing the &quot;Hi&quot; message in the quick panel nor increasing the badge count.</p>
+</li>
+
+<li>Send notifications.
+<p>With the message field that you just created, you can construct a notification using a JSON query and send it to the RQM server using the POST method. The following list contains the details:</p>
+<ul class="ul">
+<li>URI: URI of the RQM server chosen based on the first 2 digits of the registration ID</li>
+<li>Method: POST</li>
+<li>Data: JSON </li>
+<li>Description: Request a notification push to a push client</li>
+<li>Note: 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. System default value can be changed as needed.</li>
+<li>Header
+
+<p>There are 2 required fields: <span style="font-family: Courier New,Courier,monospace;">appID</span> and <span style="font-family: Courier New,Courier,monospace;">appSecret</span>.</p>
+
+<p>The fields are given when you register your 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>
+
+</li>
+<li>Arguments
+<table>
+<caption>Table: Arguments</caption>
+<tbody>
+<tr>
+ <th>Key</th>
+ <th>Description</th>
+ <th>Additional information</th>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">regID</span></td>
+ <td>Distinguish a recipient from other recipients by assigning a unique registration ID to each recipient. The registration ID is assigned when a third party application is installed in a device and marked to use an application service. The preloaded push client connects to the push server and registers the third party application. Then the push server returns the registration ID to the push client. The push client passes this ID to the third party application. The push server passes this registration ID to a third party server. For the rest of the applications, the third party application passes this registration ID to the third party server. This passing registration ID policy can change.</td>
+ <td>required
+ <p>type: String</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">requestID</span></td>
+ <td>A third party server needs to assign a request ID to each request. It enables distinguishing a request from others.</td>
+ <td>required
+ <p>type: String</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">sender</span></td>
+ <td>Information of the user who sends the notification.</td>
+ <td>optional
+ <p>type: String</p>
+ <p>default: null</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">message</span></td>
+ <td>The message the sender wants to deliver. It can be a multibyte character. It goes through the push server and push client from a third party server. The push client just passes it to the third party application so that it is needed to handle the message. 
+ <p>Maximum message length must be less than 2 kb. Make sure that if there is no message and <span style="font-family: Courier New,Courier,monospace;">appData</span>, the push server rejects the message and returns an error.</p></td>
+ <td>conditionally mandatory
+(if <span style="font-family: Courier New,Courier,monospace;">appData</span> is null, this field is required)
+<p>type: String</p>
+<p>default: null</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">appData</span></td>
+ <td>Third party applications can use this field to carry their own data. It is dependent on the type described below. 
+ <p>Make sure that if there is no message and no <span style="font-family: Courier New,Courier,monospace;">appData</span>, the push server rejects the message and returns an error.</p></td>
+ <td>conditionally mandatory
+(if message is null, this field is required)
+ <p>type: String</p>
+ <p>default: null</p></td>
+</tr>
+
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">type</span></td>
+ <td>This field lets the push client know how to deal with push notification messages. If this field is set to 0, it is a normal push notification to pass to an application. Number 1 is assigned for system message and 2 is assigned for errors. Between 10 and 100, they are embedded cases, such as 10: m.fluent. After a hundred, they are user-defined.</td>
+ <td>optional
+ <p>type: int</p>
+ <p>default: 0</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">delayDate</span></td>
+ <td>The time how long the server holds the request before sending the request to the push client. This is an optional field, so if this field does not exist, the server applies its default values as 0 (minute). If <span style="font-family: Courier New,Courier,monospace;">delayTime</span> is 0, the push server delivers as soon as the push server receives the notification request.</td>
+ <td>optional
+ <p>type: int</p>
+ <p>unit: minute</p>
+ <p>default: 0</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">reliableOption</span></td>
+ <td>The push server guarantees reliable message delivery if the <span style="font-family: Courier New,Courier,monospace;">reliableOption</span> is set. Possible options are the following:
+ <ul class="ul">
+  <li><span style="font-family: Courier New,Courier,monospace;">NoReliable</span>: Do not send any acknowledgment back to a third party server and do not store the notification in the push server if the push client did not receive the notification.</li>
+  <li><span style="font-family: Courier New,Courier,monospace;">Transport</span>: Send an acknowledgment back to the third party server when the push client receives the notification.</li>
+  <li><span style="font-family: Courier New,Courier,monospace;">Application</span>: Send an acknowledgment back to the third party server when a third party application checks the notification.</li>
+ </ul>
+ <p>This is an optional field, so if this field does not exist, the server applies its default value as <span style="font-family: Courier New,Courier,monospace;">Transport</span>. An acknowledgment at this point does not mean a response to the notification request, but an acknowledgment that the push client has received the notification. This acknowledgment as a form of JSON is sent to the app server by the push server through http when the push client receives the notification.</p>
+ </td>
+ <td>optional
+ <p>type: String</p>
+ <p>default: Transport</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">sessionInfo</span></td>
+ <td>Connection information of an application. 3<sup>rd</sup> party applications can define this field by themselves.</td>
+ <td>optional
+ <p>type: String</p>
+ <p>default: null</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">timeStamp</span></td>
+ <td>Server time in milliseconds when a notification request has been made.</td>
+ <td>optional
+ <p>type: long</p>
+ <p>default: null</p></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">connectionTerm</span></td>
+ <td>The option determines whether it stays registered with the push client. If the value is 0, it stays registered. If the value is 1, it does not stay registered.</td>
+ <td>optional
+ <p>type: int</p>
+ <p>default: null</p></td>
+</tr>
+</tbody>
+</table>
+</li>
+
+<li>Example header
+<pre class="prettyprint">
+appID: 1234567890987654
+appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
+</pre></li>
+
+<li>Example request    
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;encoding&quot; : &quot;base64&quot; // Optional
+&nbsp;&nbsp;&nbsp;&quot;regID&quot; : &quot;ab123456&quot;,
+&nbsp;&nbsp;&nbsp;&quot;requestID&quot; : &quot;0000001&quot;,
+&nbsp;&nbsp;&nbsp;&quot;sender&quot; : &quot;oscal&quot;, // Optional
+&nbsp;&nbsp;&nbsp;&quot;type&quot; : 0 // Optional
+&nbsp;&nbsp;&nbsp;&quot;message&quot; : &quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;, // Optional
+&nbsp;&nbsp;&nbsp;&quot;appData&quot; : &quot;{id:asdf&amp;passwd:1234}&quot;, // Optional, (Opaque)
+&nbsp;&nbsp;&nbsp;&quot;delayDate&quot; : 60, // Optional
+&nbsp;&nbsp;&nbsp;&quot;reliableOption&quot; : &quot;Transport&quot;, // Optional 
+&nbsp;&nbsp;&nbsp;&quot;sessionInfo&quot; : &quot;002002&quot;, // Optional
+&nbsp;&nbsp;&nbsp;&quot;timeStamp&quot; : 1234567890, // Optional
+}
+</pre>
+</li>
+
+<li>Example response
+<p>If the push server receives a notification request, the server returns a JSON string that contains the <span style="font-family: Courier New,Courier,monospace;">regID</span>, <span style="font-family: Courier New,Courier,monospace;">requestID</span>, status code, and status message. If the request contains a malformed JSON format, requests are not processed and are returned without the <span style="font-family: Courier New,Courier,monospace;">regID</span> and <span style="font-family: Courier New,Courier,monospace;">requestID</span> values. If the request is of the JSON format but has invalid data, no requests are processed and are considered as an error. This return message only shows whether receiving notification request was successful. This return message does not deal with whether the push client receives the notification. The order of the return message is the same as the request message order.</p>
+
+<p>The following example is shown if the request is successful:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;results&quot;:
+&nbsp;&nbsp;&nbsp;[{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;:&quot;ab123456&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;:&quot;0000001&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;:1000,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;:&quot;Success&quot;
+&nbsp;&nbsp;&nbsp;}]
+}
+</pre>
+<p>The following example is shown if the request fails due to malformation:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;results&quot;:
+&nbsp;&nbsp;&nbsp;[{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;:&quot;&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;:&quot;&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;:3023,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;:&quot;error of json mapping exception&quot;
+&nbsp;&nbsp;&nbsp;}]
+}
+</pre><p>The following example is shown if the request fails due to abnormal data:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;results&quot;:
+&nbsp;&nbsp;&nbsp;[{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;:&quot;ab123456&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;:&quot;0000001&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;:3008,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;:&quot;error of not registered regID&quot;
+&nbsp;&nbsp;&nbsp;}]
+}
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="dealing" name="dealing" class="items-tit-h2">Handling Push Notifications</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>When a notification arrives at the device, it is delivered to the destination application in a manner that depends on whether the application is running.</p>
+
+<p>To handle incoming push notifications:</p>
+
+<ul class="ul">
+<li id="receive" name="receive">Receive notifications when the application is running.
+<p>When a notification arrives to your application while it is running (precisely, your application is connected to the service), the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function is called as defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. In this callback function, you can handle the received notification. The following example shows how your application can retrieve the app data (payload), message, and timestamp from the received notification:</p>
+
+<pre class="prettyprint">
+static void _noti_cb(push_service_notification_h noti, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;char *data=NULL; // App data loaded on the notification
+&nbsp;&nbsp;&nbsp;char *msg=NULL; // Noti message
+&nbsp;&nbsp;&nbsp;long long int time_stamp; // Time when the noti is generated
+&nbsp;&nbsp;&nbsp;char *sender=NULL; // Optional sender information
+&nbsp;&nbsp;&nbsp;char *session_info=NULL; // Optional session information
+&nbsp;&nbsp;&nbsp;char *request_id=NULL; // Optional request ID
+&nbsp;&nbsp;&nbsp;int type=0; // Optional type information
+
+&nbsp;&nbsp;&nbsp;// Retrieve app data from noti
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_data(noti, &amp;data);
+&nbsp;&nbsp;&nbsp;// Your logic here to decrypt app data if it is encrypted
+
+&nbsp;&nbsp;&nbsp;// Retrieve notification message from noti
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_message(noti, &amp;msg);
+
+&nbsp;&nbsp;&nbsp;// Retrieve the time when notification is created from noti
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_time(noti, &amp;time_stamp);
+
+&nbsp;&nbsp;&nbsp;// Retrieve the optional information
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_sender(noti, &amp;sender);
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_session_info(noti, &amp;session_info);
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_request_id(noti, &amp;request_id);
+&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_type(noti, &amp;type);
+
+&nbsp;&nbsp;&nbsp;// Your implementation here to use data, msg, time_stamp, sender,
+&nbsp;&nbsp;&nbsp;// session_info, request_id, and type
+
+&nbsp;&nbsp;&nbsp;// Free all resources
+&nbsp;&nbsp;&nbsp;// Do not free noti in the callback function
+&nbsp;&nbsp;&nbsp;if (data)    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+&nbsp;&nbsp;&nbsp;if (msg)     
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(msg);
+&nbsp;&nbsp;&nbsp;if (sender)  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(sender);
+&nbsp;&nbsp;&nbsp;if (session_info)    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(session_info);
+&nbsp;&nbsp;&nbsp;if (request_id)      
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(request_id);
+}
+</pre>
+
+<p>When the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function is called, obtain the notification through the first parameter. The second parameter is the pointer to the user data. You can retrieve the app data, message, and time stamp from the handle using the <span style="font-family: Courier New,Courier,monospace;">push_get_notification_data()</span>, <span style="font-family: Courier New,Courier,monospace;">push_get_notification_message()</span>, and <span style="font-family: Courier New,Courier,monospace;">push_get_notification_time()</span> functions respectively. Before exiting the function, free the data. However, do not free <span style="font-family: Courier New,Courier,monospace;">noti</span> in the notification callback function. It is freed automatically right after this callback function.</p>
+</li>
+
+<li>Receive notifications when the application is not running.
+<p>If the notification arrives when your application is not running, there are 3 ways to handle the notification:</p>
+<ul class="ul">
+<li>Forcibly launch the application and deliver the notification to it.</li>
+<li>Store the notification at the push service database and request it later when the application is launched.</li>
+<li>Discard it.</li>
+</ul>
+
+<p>For the first option, you need to set the action to LAUNCH in the message field when sending the notification from the application server.</p>
+
+<p>When such notification action arrives at the device, the push service forcibly launches your application and delivers the notification as a bundle. To retrieve the notification when launched, call the <span style="font-family: Courier New,Courier,monospace;">push_service_app_control_to_notification()</span> function in the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> function, which is a callback function that is triggered when your application is launched by another application or process.
+</p>
+
+<pre class="prettyprint">
+static void app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;char *op = NULL;
+&nbsp;&nbsp;&nbsp;push_service_notification_h noti = NULL;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;if (app_control_get_operation(app_control, &amp;op) &lt; 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+       
+&nbsp;&nbsp;&nbsp;// Retrieve noti from the bundle
+&nbsp;&nbsp;&nbsp;ret = push_service_app_control_to_notification(app_control, op, &amp;noti);
+
+&nbsp;&nbsp;&nbsp;if (noti)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Your implementation for handling noti
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Free the noti
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;push_service_free_notification(noti);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Your implementation for the case when 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// this app is not launched by the push service
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (op)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(op);
+}
+</pre>
+
+<p>When you create your project in the SDK, the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> function is created automatically. When your application is launched by the push service, all related information regarding this launch request is delivered through the <span style="font-family: Courier New,Courier,monospace;">app_control</span> argument. From this handle, retrieve the <span style="font-family: Courier New,Courier,monospace;">op</span> operation using the <span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span> function. With <span style="font-family: Courier New,Courier,monospace;">app_control</span> and <span style="font-family: Courier New,Courier,monospace;">op</span>, retrieve the notification data using the <span style="font-family: Courier New,Courier,monospace;">push_service_app_control_to_noti_data()</span> function. If your application is not launched by the push service, this function returns as <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>For the second option, you need to set the action to <span style="font-family: Courier New,Courier,monospace;">ALERT</span> or <span style="font-family: Courier New,Courier,monospace;">SILENT</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service keeps the notification in the database and waits for the request from the application. The difference of the 2 options is that the former shows the alert message in the quick panel and changes the badge count while the latter does not. If the user clicks the message in the quick panel, the push service forcibly launches the application and delivers the notification through the app control callback function as in the first option. </p>
+
+<p>For the last option, you need to set the action to <span style="font-family: Courier New,Courier,monospace;">DISCARD</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service discards the notification unless the application is running.</p>
+</li>
+
+<li>Request unread notifications.
+
+<p>If the user does not launch the application from the quick panel, the application requests the unread notifications after start-up using the <span style="font-family: Courier New,Courier,monospace;">push_service_request_unread_notification()</span> function as <a href="#upon">already introduced</a>. The synchronous request using the <span style="font-family: Courier New,Courier,monospace;">push_service_get_unread_notification()</span> function is shown below:
+</p>
+
+<pre class="prettyprint">
+push_service_notification_h noti;
+int ret;
+do 
+{
+&nbsp;&nbsp;&nbsp;ret = push_service_get_unread_notification(push_conn, &amp;noti);
+
+&nbsp;&nbsp;&nbsp;// Your implementation to process unread message noti
+
+&nbsp;&nbsp;&nbsp;push_server_free_notification(&amp;noti);
+} while (1);
+</pre>
+
+<p>Call this function repeatedly until no notification is returned. If there are multiple unread notifications, the notifications are retrieved in their arrival order. Note that the <span style="font-family: Courier New,Courier,monospace;">push_server_free_notification()</span> function blocks the code while it receives a notification from the service. Unless you need a synchronous behavior, the asynchronous function is recommended.</p>
+
+
+</li>
+</ul>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="security" name="security" class="items-tit-h2">Managing Security</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>When you send a notification with sensitive information, be aware of the chance that the notification is hijacked by someone else. It is your responsibility to keep such sensitive information safe from malicious access. The following instructions are strongly recommended:</p>
+
+<ul class="ul">
+<li>Keep your push app ID confidential. <p>If it is exposed, hackers can try to hijack your notifications using a fake application with the exposed ID.</p></li>
+<li>Do not store the registration ID on the device. <p>This ID can be seen as a destination address of the notifications. Without this ID, hackers cannot send fake notifications to your application.</p></li>
+<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, your application decrypts the payload and retrieves the sensitive information.</p></li>
+<li>Do not hardcode your AppSecret in your source code. <p>The AppSecret is a key to accessing the push server for sending notifications. If notifications are sent from your application server, your application does not need to know the AppSecret at all. Keep the AppSecret in the server and do not load any related information in your application. If you want device-to-device notification delivery without your application server, your 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>
+       </div>
+               </li>                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
new file mode 100644 (file)
index 0000000..2e89c33
--- /dev/null
+++ b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
@@ -0,0 +1,270 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Messages: Creating and Sending SMS and MMS Messages</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Messages Service</a></li>
+                       <li><a class="opensection" href="#fetching">Fetching Messages from a Specified Message Box</a></li>
+                       <li><a class="opensection" href="#sending">Sending SMS or MMS Messages</a></li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/messaging/messages_n.htm">Messages Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Messages: Creating and Sending SMS and MMS Messages</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.</p>
+
+        <h2>Warm-up</h2>
+        <p>Become familiar with the Messages API basics by learning about:</p>
+        <ul>
+            <li><a class="opensection" href="#init">Initializing the Messages Service</a>
+                       <p>Initialize the Messages service for use.</p></li>
+                       <li><a class="opensection" href="#fetching">Fetching Messages from a Specified Message Box</a>
+                       <p>Fetch all SMS or MMS messages from a given message box (such as Inbox or the sent items).</p></li>
+                       <li><a class="opensection" href="#sending">Sending SMS or MMS Messages</a>
+                       <p>Create and send a message, and add attachments to MMS messages.</p></li>
+        </ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Messages Service</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the Messages service:</p>
+
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;messages.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;messages.h&gt;
+</pre></li>
+<li><p>The Messages service works like a client-service architecture. In this architecture, a Tizen application is the client side and has to connect to the service before using the Messages API.</p>
+<p>Establish a connection using the <span style="font-family: Courier New,Courier,monospace;">messages_open_service(messages_service_h *service)</span> function:</p>
+
+<pre class="prettyprint">static messages_service_h service_handle = NULL;
+int error_code;
+
+error_code = messages_open_service(&amp;service_handle);
+
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}</pre></li>
+
+<li><p>When a connection with the Messages service is no longer needed (or the application is exiting), call the <span style="font-family: Courier New,Courier,monospace;">messages_close_service()</span> function for proper connection closing:</p>
+
+<pre class="prettyprint">messages_close_service(service_handle);
+service_handle = NULL;</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="fetching" name="fetching" class="items-tit-h2">Fetching Messages from a Specified Message Box</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To fetch messages from a message box, use the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function with the appropriate parameters. One of these parameters is the callback function called for each message matching the search criteria.</p>
+
+<ol><li>Define the message searching callback function.
+<ol><li>
+<p>The callback function signature has to match the following typedef:</p>
+<pre class="prettyprint">typedef bool(* messages_search_cb)(messages_message_h msg, int index, int result_count, int total_count, void *user_data)</pre></li>
+<li><p>Within the callback, to print the message content (or to show it to the user in any other way), extract its text, address, and type as below:</p>
+<pre class="prettyprint">char *message = NULL, *address = NULL;
+messages_recipient_type_e rtype;
+int error_code = MESSAGES_ERROR_NONE;
+
+error_code = messages_get_text(msg, &amp;message);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to get message content&quot;);
+}
+
+error_code = messages_get_address(msg, 0, &amp;address, &amp;rtype);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to get recipient address&quot;);
+}
+
+messages_message_type_e mtype = MESSAGES_TYPE_UNKNOWN;
+messages_get_message_type(msg, &amp;mtype);</pre></li>
+
+<li><p>For MMS messages, the subject and attachments attributes exist and can be extracted from the found message:</p>
+<pre class="prettyprint">if (MESSAGES_TYPE_MMS == mtype) 
+{
+&nbsp;&nbsp;&nbsp;char *subject = NULL;
+&nbsp;&nbsp;&nbsp;error_code = messages_mms_get_subject(msg, &amp;subject);
+&nbsp;&nbsp;&nbsp;if (error_code != MESSAGES_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to get MMS subject&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;int atcount = 0;
+&nbsp;&nbsp;&nbsp;messages_mms_get_attachment_count(msg, &amp;atcount);
+}</pre></li>
+
+<li><p>The memory allocated for the message given to the callback function and for all string variables extracted from the message have to be explicitly released before leaving their visibility scope:</p>
+<pre class="prettyprint">free(subject);
+free(message);
+free(address);</pre></li></ol></li>
+
+
+<li>Call the search function.
+<p>With a connection opened and callback prepared, the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function can be called to retrieve all existing messages stored in different mailboxes. The function arguments allow to select only a subset of all available messages based on:</p>
+<ul class="ul"><li>Message box type (inbox, outbox, sent items, drafts, or all of them)</li>
+<li>Message type (such as SMS, MMS)</li>
+<li>Keyword (for searching based on text and subject)</li>
+<li>Address (message recipient address)</li></ul>
+
+<p>The following example shows a simple search for all SMS messages in all message boxes with a callback function named <span style="font-family: Courier New,Courier,monospace;">message_search_callback</span>:</p>
+<pre class="prettyprint">int error_code;
+error_code = messages_open_service(&amp;service_handle);
+if (error_code != MESSAGES_ERROR_NONE) 
+
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to open connection&quot;);
+}
+
+error_code = messages_foreach_message(service_handle, MESSAGES_MBOX_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;&nbsp;MESSAGES_TYPE_SMS, NULL, NULL, 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;messages_search_callback, NULL);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Messages searching failed&quot;);
+}
+
+messages_close_service(service_handle);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sending" name="sending" class="items-tit-h2">Sending SMS or MMS Messages</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The Messaging API provides functions to send SMS (Short Message Service) messages and MMS (Multimedia Message Service) messages with attachments (image or video files):</p>
+<ol><li>Create a message.
+<p>Before sending a message, open a connection to the messaging service.</p>
+<p>To create an SMS or an MMS message, use the <span style="font-family: Courier New,Courier,monospace;">messages_create_message()</span> function. Specify the message type (<span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_SMS</span> or <span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_MMS</span>) when creating the message. The following example creates an SMS message:</p>
+<pre class="prettyprint">int error_code;
+messages_message_h msg_hndl = NULL;
+
+// Create an SMS message handle
+error_code = messages_create_message(MESSAGES_TYPE_SMS, &amp;msg_hndl);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to create message&quot;);
+}</pre></li>
+<li>Define the recipients and message body.
+<p>Functions for setting the recipient address and the message body (the message text) are the same for SMS and MMS, but in this case the message type specification is not needed:</p>
+<pre class="prettyprint">error_code = messages_add_address(msg_hndl, &quot;123456789&quot;, MESSAGES_RECIPIENT_TO);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to add recipient address&quot;);
+}
+
+error_code = messages_set_text(msg_hndl, __PRETTY_FUNCTION__);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to set message text&quot;);
+}</pre></li>
+
+<li>Set a subject and add an attachment (note that sending MMS is not supported on the Emulator).
+<ul class="ul"><li><p>You can set a message subject and add attachments to MMS messages. Set the subject:</p>
+<pre class="prettyprint">error_code = messages_mms_set_subject(msg_hndl, &quot;MMS test&quot;);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to set MMS subject&quot;);
+}</pre></li>
+<li><p>Add attachments to the MMS message 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>
+<pre class="prettyprint">error_code = messages_mms_add_attachment(g_message, MESSAGES_MEDIA_IMAGE, &quot;/path/to/image/file&quot;);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to add attachment to MMS&quot;);
+}</pre></li></ul></li>
+
+<li>Send the message.
+<ol><li><p>SMS and MMS sending is an asynchronous operation, and a callback function is needed to receive the sending operation status. This function has to match the following typedef:</p>
+<pre class="prettyprint">typedef void(* messages_sent_cb)(messages_sending_result_e result, void *user_data)</pre></li>
+<li><p>Using the first parameter in the callback (result), the messaging service informs you about the sending status. It can be used to determine whether the sending succeeded:</p>
+<pre class="prettyprint">static void sent_msg_cb(messages_sending_result_e result, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (MESSAGES_SENDING_SUCCEEDED == result) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Message sending succeeded&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Message sending failed&quot;);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li>
+<li><p>If the connection to the messaging service is open (<span style="font-family: Courier New,Courier,monospace;">service_handle</span>) and the message itself is successfully created (<span style="font-family: Courier New,Courier,monospace;">msg_hndl</span>), send it using the <span style="font-family: Courier New,Courier,monospace;">messages_send_message()</span> function:</p>
+<pre class="prettyprint">error_code = messages_send_message(service_handle, msg_hndl, true, sent_msg_cb, NULL);
+if (error_code != MESSAGES_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to send message&quot;);
+}</pre></li></ol></li></ol>
+       </div>
+               </li>                   
+                               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
new file mode 100644 (file)
index 0000000..f75c22c
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
@@ -0,0 +1,391 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 I/O: Recording from the Audio Device and Playing Raw Audio Data</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Audio Devices</a></li>
+                       <li><a class="opensection" href="#simple">Managing Simple Recording and Playback</a></li>
+                       <li><a class="opensection" href="#async">Managing Asynchronous Recording and Playback</a></li>
+                       <li><a class="opensection" href="#release">Releasing Resources</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/audio_io_n.htm">Audio I/O Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Audio I/O: Recording from the Audio Device and Playing Raw Audio Data</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can control audio input and output to record, and play an audio sample.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Audio I/O and Sound Manager API basics by learning about:</p>
+
+<ul>
+ <li><a class="opensection" href="#init">Initializing the Audio Devices</a>
+ <p>Initialize the audio input and output devices for use.</p></li>
+ <li><a class="opensection" href="#simple">Managing Simple Recording and Playback</a>
+  <p>Record an audio sample from the audio input device, play the recorded audio sample through the audio output device, and modify the volume in the recorded audio sample using a simple API.</p>
+ </li>
+ <li><a class="opensection" href="#async">Managing Asynchronous Recording and Playback</a>
+  <p>Record an audio sample from the audio input device, play the recorded audio sample through the audio output device, and modify the volume in the recorded audio sample using a low-latency API.</p>
+ </li>
+ <li><a class="opensection" href="#release">Releasing Resources</a>
+  <p>Finish all audio device operations.</p>
+ </li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Audio Devices</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+
+<p>To initialize the audio devices for use:</p>
+<ol><li>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> APIs, include the <span style="font-family: Courier New,Courier,monospace">&lt;audio_io.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header files in your application:</p>
+<pre class="prettyprint">
+#include &lt;audio_io.h&gt;
+#include &lt;sound_manager.h&gt;
+</pre></li>
+<li><p>To initialize the audio input and output devices, use the <span style="font-family: Courier New,Courier,monospace">audio_in_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> functions:</p>
+<pre class="prettyprint">#define SAMPLE_RATE 44100
+
+audio_in_h input; // Declare audio input handle
+audio_io_error_e ret;
+
+// Audio input device initialization
+ret = audio_in_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE, &amp;input);
+
+audio_out_h output; // Declare audio output handle
+// Audio output device initialization
+ret = audio_out_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE, SOUND_TYPE_SYSTEM, &amp;output);
+</pre>
+<p>The audio input and output devices support the channel types defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">audio_channel_e</a> enumeration, and the sample types defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">audio_sample_type_e</a> enumeration. Set the same channel and sample type for both devices.</p>
+
+<p>The sound type is defined in the <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header file. You can select the sound type according to the audio sample type.</p></li></ol>
+                       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="simple" name="simple" class="items-tit-h2">Managing Simple Recording and Playback</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<h3 id="prepare" name="prepare">Preparing the Audio Input and Output Devices</h3>
+
+<p>To prepare the audio input device for recording audio, use the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function. To prepare the audio output device for playing the recorded audio, use the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function.</p>
+
+<pre class="prettyprint">// Audio input prepare
+ret = audio_in_prepare(input);
+
+// Audio output prepare
+ret = audio_out_prepare(output);
+</pre>
+
+<h3 id="set" name="set">Creating an Audio Buffer</h3>
+
+<p>To create a buffer for storing the recorded audio:</p>
+
+<ol>
+
+<li>
+
+<p>Get the buffer size using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function:</p>
+
+<pre class="prettyprint">int buffer_size;
+
+ret = audio_in_get_buffer_size(input, &amp;buffer_size);
+if (ret != AUDIO_IO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;return -1;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">buffer_size</span> parameter returns the preferred size of the buffer based on the specified audio parameters.</p>
+
+</li>
+
+<li>
+
+<p>Allocate memory for the buffer using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function:</p>
+
+<pre class="prettyprint">void *buffer = malloc(buffer_size);</pre>
+
+</li>
+
+</ol>
+
+<p>Alternatively, create the buffer by explicitly calculating the buffer size:</p>
+
+<ol>
+
+<li>
+
+<p>Retrieve the audio channel type and audio sample type information using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span> and <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> functions, respectively:</p>
+
+<pre class="prettyprint">audio_channel_e channel;
+// Retrieve audio channel type
+ret = audio_in_get_channel(input, &amp;channel);
+if (ret != AUDIO_IO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+audio_sample_type_e sample_type;
+// Retrieve audio sample type
+ret = audio_in_get_sample_type(input, &amp;sample_type);
+if (ret != AUDIO_IO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;return -1;
+}</pre>
+
+</li>
+
+<li>
+
+<p>Calculate the buffer size based on the retrieved information, and allocate memory for the buffer using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function:</p>
+
+<pre class="prettyprint">buffer_size = 5* SAMPLE_RATE * (channel == AUDIO_CHANNEL_STEREO ? 2 : 1) * (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);
+// Allocate memory using malloc
+buffer = malloc(buffer_size);</pre>
+
+</li>
+
+</ol>
+
+<h3 id="record" name="record">Recording and Playing an Audio Sample</h3>
+
+<p>To record and play an audio sample:</p>
+
+<ol><li><p>To record an audio sample to the buffer, use the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function:</p>
+
+<pre class="prettyprint">ret = audio_in_read(input, buffer, buffer_size);
+</pre></li>
+
+<li><p>To play the recorded audio sample from the buffer, use the <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function:</p>
+
+<pre class="prettyprint">ret = audio_out_write(output, buffer, buffer_size);
+</pre></li>
+
+<li><p>To modify the volume of the audio sample playback:</p>
+
+<pre class="prettyprint">#include &lt;limits.h&gt;
+
+void modify_sound()
+{
+&nbsp;&nbsp;&nbsp;void *i = buffer;
+&nbsp;&nbsp;&nbsp;void *end = buffer + buffer_size;
+&nbsp;&nbsp;&nbsp;while (i &lt; (buffer+buffer_size))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (sample_type == AUDIO_SAMPLE_TYPE_S16_LE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Assume compiler&#39;s signed short is 2 bytes long
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signed short *value = (signed short*)i;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get sample louder
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int tmp = (*value) * 8; // Why not 8 times louder? (on dB scale even much louder)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tmp &gt; MAX_SIGNED_SHORT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp = MAX_SIGNED_SHORT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tmp &lt; MIN_SIGHED_SHORT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp =  MIN_SIGHED_SHORT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(*value) = tmp;
+&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;char *value = (char*)i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get sample louder
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int tmp = (*value) * 8; // Why not 8 times louder? (on dB scale even much louder)
+&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;tmp = 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(*value) = tmp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Go to next sample
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i += sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>In this example, the volume is significantly increased. You can also make other modifications to the audio sample playback.</p></li></ol>
+                       </div>
+               </li>                                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="async" name="async" class="items-tit-h2">Managing Asynchronous Recording and Playback</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage asynchronous recording and playback:</p>
+
+<ol><li>Create audio callback functions:
+<ol><li>Create a callback function for recording:
+
+<pre class="prettyprint">FILE* fp_w = NULL;
+fp_w = fopen(&quot;/tmp/pcm_w.raw&quot;, &quot;w&quot;);
+
+void _audio_io_stream_read_cb(audio_in_h handle, size_t nbytes, void *userdata)
+{
+&nbsp;&nbsp;&nbsp;const void * buffer = NULL;
+
+&nbsp;&nbsp;&nbsp;if (nbytes &gt; 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Retrieve buffer pointer from audio in buffer
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio_in_peek(handle, &amp;buffer, &amp;nbytes);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fp_w) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fwrite(buffer, sizeof(char), nbytes, fp_w);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Remove audio in data from actual stream buffer
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio_in_drop(handle);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>Create a callback function for playback:
+
+<pre class="prettyprint">FILE* fp_r = NULL;
+fp_r = fopen(&quot;/tmp/pcm.raw&quot;, &quot;r&quot;);
+
+void _audio_io_stream_write_cb(audio_out_h handle, size_t nbytes, void *userdata)
+{
+&nbsp;&nbsp;&nbsp;char* buffer = NULL;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;if (nbytes &gt; 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffer = malloc (nbytes);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(buffer, 0, nbytes);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = fread(buffer, 1, nbytes, fp_r);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = audio_out_write(handle, buffer, nbytes);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(ret &gt; AUDIO_IO_ERROR_NONE) 
+&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;free (buffer);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol></li>
+
+<li>Set the audio callbacks:
+
+<ol><li><p>To set an input callback, use the <span style="font-family: Courier New,Courier,monospace">audio_in_set_stream_cb()</span> function:</p>
+
+<pre class="prettyprint">ret = audio_in_set_stream_cb(input, _audio_io_stream_read_cb, NULL);</pre></li>
+
+<li><p>To set an output callback, use the <span style="font-family: Courier New,Courier,monospace">audio_out_set_stream_cb()</span> function:</p>
+
+<pre class="prettyprint">ret = audio_out_set_stream_cb(output, _audio_io_stream_write_cb, NULL);</pre></li></ol></li>
+
+<li>Prepare the audio input and output devices
+
+<p>To prepare the audio input device for recording audio, use the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function. To prepare the audio output device for playing the recorded audio, use the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function.</p>
+
+<pre class="prettyprint">// Audio input prepare
+ret = audio_in_prepare(input);
+
+// Audio output prepare
+ret = audio_out_prepare(output);
+</pre></li></ol>
+                       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="release" name="release" class="items-tit-h2">Releasing Resources</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To destroy the audio handles and release the allocated resources after you have finished working with the audio input and output devices:</p>
+
+<ol><li><p>Release the memory allocated to the buffer using the <span style="font-family: Courier New,Courier,monospace">free()</span> function:</p>
+
+<pre class="prettyprint">free(buffer);</pre></li>
+
+<li><p>Unprepare the audio input and output devices using the <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions. Destroy the audio input and output handles using the <span style="font-family: Courier New,Courier,monospace">audio_in_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span> functions.</p>
+
+<pre class="prettyprint">ret = audio_in_unprepare(input);
+
+ret = audio_in_destroy(input);
+
+ret = audio_out_unprepare(output);
+
+ret = audio_out_destroy(output);
+</pre></li>
+
+<li><p>Close opened file using the <span style="font-family: Courier New,Courier,monospace">fclose()</span> function:</p>
+
+<pre class="prettyprint">fclose(fp_w);
+fp_w = NULL;
+
+fclose(fp_r);
+fp_r = NULL;</pre></li></ol>
+                       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm
new file mode 100644 (file)
index 0000000..31f8f68
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm
@@ -0,0 +1,559 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Camera: Controlling a Camera Device</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Camera</a></li>
+                       <li><a class="opensection" href="#photo">Taking a Photo</a></li>
+                       <li><a class="opensection" href="#attributes">Setting Camera Attributes</a></li>
+                       <li><a class="opensection" href="#release">Releasing Resources</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/camera_n.htm">Camera Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Camera: Controlling a Camera Device</h1>
+  <div class="cont"><div class="static-cont">
+<p>This tutorial demonstrates how you can start a camera preview and take a photo. This tutorial also demonstrates how you can configure a camera by setting selected attributes.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Camera API basics by learning about:</p>
+
+<ul>
+ <li><a class="opensection" href="#init">Initializing the Camera</a>
+ <p>Initialize the camera for use.</p>
+ </li>
+ <li><a class="opensection" href="#photo">Taking a Photo</a>
+  <p>Start a camera preview and take a photo.</p>
+ </li>
+ <li><a class="opensection" href="#attributes">Setting Camera Attributes</a>
+  <p>Set the camera preview, zoom, and brightness attributes.</p>
+ </li>
+ <li><a class="opensection" href="#release">Releasing Resources</a>
+  <p>Stop the camera, unregister the callback functions, and destroy the camera handle and release all its resources.</p>
+ </li>
+
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Camera</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>Before you can start a camera preview or take a photo:</p>
+
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;camera.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;camera.h&gt;
+</pre></li>
+ <li>Create a handle for the camera, and configure the camera.</li>
+ <li>Register callback functions for handling the camera preview and camera auto-focus.</li>
+</ol>
+
+<h3 id="configure" name="configure">Creating and Configuring a Camera</h3>
+
+<ol>
+
+<li>
+
+<p>Create a structure for storing the global data related to the camera handle. In this tutorial, the <span style="font-family: Courier New,Courier,monospace">camdata</span> structure is used to store the <span style="font-family: Courier New,Courier,monospace">g_camera</span> variable, which is the camera handle.</p>
+
+<pre class="prettyprint">typedef struct _camdata
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *rect;
+&nbsp;&nbsp;&nbsp;Evas *evas;
+&nbsp;&nbsp;&nbsp;camera_h g_camera; // Camera handle
+}
+camdata;
+
+static camdata cam_data;</pre>
+
+</li>
+
+<li>
+
+<p>Create 2 auxiliary variables to control whether taking photos (<span style="font-family: Courier New,Courier,monospace">g_enable_shot</span>) and auto-focusing (<span style="font-family: Courier New,Courier,monospace">g_enable_focus</span>) are allowed. These variables are used in the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> and <span style="font-family: Courier New,Courier,monospace">_camera_focus_cb()</span> functions.</p>
+
+<pre class="prettyprint">static bool g_enable_shot = false;
+static bool g_enable_focus = true;</pre>
+
+</li>
+
+<li>
+
+<p>Create a handle for the camera using the <span style="font-family: Courier New,Courier,monospace">camera_create()</span> function:</p>
+
+<pre class="prettyprint">int error_code = 0;
+
+// Create camera handle
+error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;cam_data.g_camera);
+if (error_code == CAMERA_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG , &quot;error code = %d&quot;, error_code);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;error code = %d&quot;, error_code);
+}</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">CAMERA_DEVICE_CAMERA0</span> means that the current activated camera sensor is 0, of 2 selectable devices. These values are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">camera_device_e</a> enumeration.</p>
+
+</li>
+
+<li>
+
+<p>Check the current state of the camera using the <span style="font-family: Courier New,Courier,monospace">camera_get_state()</span> function:</p>
+
+<pre class="prettyprint">camera_state_e state;
+
+// Check camera state after create
+error_code = camera_get_state(cam_data.g_camera, &amp;state);
+</pre>
+
+
+<p>The returned state is one of the values defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">camera_state_e</a> enumeration. If the state is not <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>, reinitialize the camera.</p>
+
+</li>
+
+<li>
+
+<p>Set the image quality using the <span style="font-family: Courier New,Courier,monospace">camera_attr_set_image_quality()</span> function:</p>
+
+<pre class="prettyprint">error_code = camera_attr_set_image_quality(cam_data.g_camera, 100);
+</pre>
+<p>The supported quality of the image value&#39;s boundary is from 1 to 100.</p>
+</li>
+
+<li>
+
+<p>Set the display for showing preview images by using the <span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function with 1 of the camera display types (<span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_EVAS</span> or <span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_OVERLAY</span>) defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">camera_display_type_e</a>  enumeration:</p>
+
+<table class="note">
+ <tbody>
+  <tr>
+  <th class="note">Note</th>
+  </tr>
+  <tr>
+   <td class="note">Depending on the device, the application must set the display preferences using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<ul class="ul"><li>Example: Set the display according to the <span style="font-family: Courier New,Courier,monospace">camera_display_type_e</span>
+
+<pre class="prettyprint">
+int error_code = CAMERA_ERROR_NONE;
+Evas_Object *g_eo = NULL;
+
+static void create_base_gui (camdata *cam_data, camera_display_type_e display_type)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
+&nbsp;&nbsp;&nbsp;// PACKAGE contains the package name&#39;s character info
+&nbsp;&nbsp;&nbsp;cam_data-&gt;win = elm_win_add(NULL, PACKAGE, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;if (display_type == CAMERA_DISPLAY_TYPE_EVAS) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_title_set(cam_data-&gt;win, PACKAGE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_borderless_set(cam_data-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_resize(cam_data-&gt;win, 240, 320);
+&nbsp;&nbsp;&nbsp;if (display_type == CAMERA_DISPLAY_TYPE_OVERLAY) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(cam_data-&gt;win, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(cam_data-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_move(cam_data-&gt;win, 0, 0);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(cam_data-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;cam_data-&gt;evas = evas_object_evas_get(cam_data-&gt;win);
+
+&nbsp;&nbsp;&nbsp;switch (display_type) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case CAMERA_DISPLAY_TYPE_EVAS:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set Evas image object for drawing
+&nbsp;&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;&nbsp;evas_object_image_size_set(g_eo, 240, 320);
+&nbsp;&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;&nbsp;evas_object_resize(g_eo, 240, 320);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(g_eo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(cam_data.win);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case CAMERA_DISPLAY_TYPE_OVERLAY:
+&nbsp;&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;&nbsp;evas_object_resize(cam_data-&gt;rect, 240, 320);
+&nbsp;&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;&nbsp;evas_object_color_set(cam_data-&gt;rect, 0, 0, 0, 0);
+&nbsp;&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;&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;&nbsp;// Show window after base gui is set up
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(cam_data-&gt;win);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+
+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;dlog_print(DLOG_DEBUG, &quot;camera_set_display failed [0x%x]&quot;, ret);
+&nbsp;&nbsp;&nbsp;camera_destroy(cam_data.g_camera);
+&nbsp;&nbsp;&nbsp;cam_data.g_camera = 0;
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre></li></ul>
+
+
+<p>This function must be called before previewing and thus the camera state must be <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>.</p>
+</li>
+
+<li>
+
+<p>Set the camera preview resolution using the <span style="font-family: Courier New,Courier,monospace">camera_set_preview_resolution()</span> function (this function must be called before previewing).</p>
+
+
+<p>To find out which resolutions can be set for the camera preview on a specific device, use the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span> function. It invokes a callback function for every supported preview resolution. Note that the foreach function stops when the callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
+
+<p>The following example code sets the camera preview resolution to the first found supported resolution:</p>
+
+<pre class="prettyprint">int resolution[2];
+
+static bool _preview_resolution_cb(int width, int height, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int *resolution = (int*)user_data;
+&nbsp;&nbsp;&nbsp;resolution[0] = width;
+&nbsp;&nbsp;&nbsp;resolution[1] = height;
+
+&nbsp;&nbsp;&nbsp;return false;
+}
+
+// Find a resolution that is supported in the device
+error_code = camera_foreach_supported_preview_resolution(cam_data.g_camera, _preview_resolution_cb, resolution);
+
+// Set the supported resolution for camera preview
+error_code = camera_set_preview_resolution(cam_data.g_camera, resolution[0], resolution[1]);
+</pre>
+
+</li>
+
+<li>
+
+<p>Set the capture format using the <span style="font-family: Courier New,Courier,monospace">camera_set_capture_format()</span> function:</p>
+
+<pre class="prettyprint">
+error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JPEG);
+</pre>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">camera_pixel_format_e</a> enumeration defines the available capture formats.</p>
+
+</li>
+
+</ol>
+
+<h3 id="callbacks" name="callbacks" >Setting Callbacks for Camera Preview and Camera Focus</h3>
+
+<ol>
+
+<li>
+
+<p>To receive notifications about delivering a copy of the newly previewed frame, register a callback function using the <span style="font-family: Courier New,Courier,monospace">camera_set_preview_cb()</span> function. The callback function is called once per frame during the preview.</p>
+
+<pre class="prettyprint">// Set camera preview callback
+error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
+</pre>
+
+<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> callback function. The callback function starts auto-focusing using the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function, whose parameters are the <span style="font-family: Courier New,Courier,monospace">camera_h</span> camera handle and a Boolean flag defining whether the camera must continuously try to focus. The <span style="font-family: Courier New,Courier,monospace">g_enable_focus</span> flag is set to <span style="font-family: Courier New,Courier,monospace">false</span> to prevent the capturing process from restarting.</p>
+
+<pre class="prettyprint">
+static void _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int error_code = 0;
+
+&nbsp;&nbsp;&nbsp;if (g_enable_focus == true)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_focusing(cam_data.g_camera, true);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_enable_focus = false;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">g_enable_focus</span> flag is set to <span style="font-family: Courier New,Courier,monospace">true</span> at the application startup. When the callback is called for the first time (for the first frame of the given preview), the camera starts auto-focusing and the flag is set to <span style="font-family: Courier New,Courier,monospace">false</span>. No subsequent calls to the callback (for the remaining frames) take any action.</p>
+</li>
+
+<li>
+<p>To receive notifications about auto-focus state changes, register a callback function using the <span style="font-family: Courier New,Courier,monospace">camera_set_focus_changed_cb()</span> function:</p>
+
+<pre class="prettyprint">// Set camera focus change callback
+error_code = camera_set_focus_changed_cb(cam_data.g_camera, _camera_focus_cb, NULL);
+</pre>
+
+<p>After the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function is called, the camera starts auto-focusing. Before the auto-focus starts, the focus state is <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_RELEASED</span>. When the auto-focus starts, the state changes to <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_ONGOING</span>. If the process finishes successfully, the state changes to <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_FOCUSED</span>. If there are errors, the state changes to <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_FAILED</span>.</p>
+
+<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_focus_cb()</span> callback function, which is called whenever the auto-focus state changes. The callback function starts the capture process if the camera is in the <span style="font-family: Courier New,Courier,monospace">CAMERA_FOCUS_STATE_FOCUSED</span> state and the <span style="font-family: Courier New,Courier,monospace">g_enable_shot</span> flag is true. The <span style="font-family: Courier New,Courier,monospace">g_enable_shot</span> flag is set to <span style="font-family: Courier New,Courier,monospace">false</span> to prevent the capturing process from restarting.</p>
+
+<pre class="prettyprint">
+static void _camera_focus_cb(camera_focus_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;if (state == CAMERA_FOCUS_STATE_FOCUSED &amp;&amp; g_enable_shot == true)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//  Start capture
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_capture(cam_data.g_camera, _camera_capturing_cb, _camera_completed_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_enable_shot = false;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+</li>
+
+</ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="photo" name="photo" class="items-tit-h2">Taking a Photo</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To take a photo:</p>
+
+<ol>
+<li><a href="#init">Initialize the camera</a>.</li>
+ <li>Start the camera preview.
+<p>The camera preview draws preview frames on the screen and allows you to capture frames as still images.</p>
+
+<p>To start the camera preview, use the <span style="font-family: Courier New,Courier,monospace">camera_start_preview()</span> function:</p>
+
+<pre class="prettyprint">error_code = camera_start_preview(cam_data.g_camera);
+</pre>
+
+</li>
+ <li>Capture an image:
+
+<ol>
+
+<li>
+
+<p>When the camera preview starts, the application calls the camera preview callback function (see <a href="#callbacks">Setting Callbacks for Camera Preview and Changing Focus</a>). The callback function then calls the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function.</p>
+
+</li>
+
+<li>
+
+<p>When the camera auto-focusing starts, the application calls the camera focus callback function (see <a href="#callbacks">Setting Callbacks for Camera Preview and Changing Focus</a>). The callback function then calls the <span style="font-family: Courier New,Courier,monospace">camera_start_capture()</span> function, which starts capturing still images.</p>
+
+<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_capturing_cb()</span> callback function. The callback function is called once for each captured frame and is used to get information about the captured image. The image is saved in the format set by the <span style="font-family: Courier New,Courier,monospace">camera_set_capture_format()</span> function (see <a href="#configure">Creating and Configuring a Camera</a>). In this example, the format is JPEG.</p>
+
+<pre class="prettyprint">
+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;dlog_print(DLOG_DEBUG, LOG_TAG , &quot;Writing image to file&quot;);
+&nbsp;&nbsp;&nbsp;FILE *file = fopen(g_fname, &quot;w+&quot;);
+
+&nbsp;&nbsp;&nbsp;if (image-&gt;data != NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fwrite(image-&gt;data, 1, image-&gt;size, file);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;fclose(file);
+}</pre>
+
+</li>
+
+<li>
+
+<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_completed_cb()</span> function. The callback function is used to provide a notification after capturing is finished. In this example, the application waits 0.025 seconds before restarting the camera preview with auto-focusing.</p>
+
+<pre class="prettyprint">
+static void _camera_completed_cb(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int error_code = 0;
+
+&nbsp;&nbsp;&nbsp;usleep(25000);  // Wait 0.025 seconds to show captured image
+
+&nbsp;&nbsp;&nbsp;// Start camera preview
+&nbsp;&nbsp;&nbsp;error_code = camera_start_preview(cam_data.g_camera);
+
+&nbsp;&nbsp;&nbsp;g_enable_focus = true;
+}</pre>
+
+</li>
+
+</ol></li>
+</ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="attributes" name="attributes" class="items-tit-h2">Setting Camera Attributes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>You can set the following additional camera attributes:</p>
+
+<ul class="ul">
+ <li>Camera preview attributes</li>
+ <li>Camera zoom attribute</li>
+ <li>Camera brightness attribute</li>
+</ul>
+
+<h3>Setting the Camera Preview Attributes</h3>
+
+<p>The camera preview attributes are a group of attributes that you can set before starting the preview. The following example code sets the FPS and image quality attributes:</p>
+
+<pre class="prettyprint">error_code = camera_attr_set_preview_fps(cam_data.g_camera, CAMERA_ATTR_FPS_AUTO);
+
+error_code = camera_attr_set_image_quality(cam_data.g_camera, 100);
+</pre>
+
+<h3>Setting the Camera Zoom Attribute </h3>
+
+<p>To set the zoom level, use the <span style="font-family: Courier New,Courier,monospace">camera_attr_set_zoom()</span> function. To get the range of the available zoom level values, use the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_zoom_range()</span> function.</p>
+
+<p>The following example code sets the zoom level to minimum:</p>
+
+<pre class="prettyprint">int min, max;
+
+error_code = camera_attr_get_zoom_range(cam_data.g_camera, &amp;min, &amp;max);
+
+error_code = camera_attr_set_zoom(cam_data.g_camera, min);
+</pre>
+
+<h3>Setting the Camera Brightness Attribute</h3>
+
+<p>The current brightness level is stored in the global <span style="font-family: Courier New,Courier,monospace">g_bright_level</span> variable. To get the range of the available brightness level values, use the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_brightness_range()</span> function:</p>
+
+<pre class="prettyprint">int min, max;
+ 
+error_code = camera_attr_get_brightness_range(cam_data.g_camera, &amp;min, &amp;max);
+</pre>
+
+<p>To get the current brightness level, use the <span style="font-family: Courier New,Courier,monospace">camera_attr_get_brightness()</span> function:</p>
+
+<pre class="prettyprint">static int g_bright_level;
+
+error_code = camera_attr_get_brightness(cam_data.g_camera, &amp;g_bright_level);
+</pre>
+
+<p>To set a new brightness level, use the <span style="font-family: Courier New,Courier,monospace">camera_attr_set_brightness()</span> function:</p>
+
+<pre class="prettyprint">if (g_bright_level &gt;= LEVEL_UPPER_BOUND)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG , &quot;Brightness is set to maximum level&quot;);
+&nbsp;&nbsp;&nbsp;g_bright_level = LEVEL_UPPER_BOUND - 1;
+}
+else if (g_bright_level &lt;= LEVEL_LOWER_BOUND)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG , &quot;Brightness is set to maximum level&quot;);
+&nbsp;&nbsp;&nbsp;g_bright_level = LEVEL_LOWER_BOUND + 1;
+}
+else
+{
+&nbsp;&nbsp;&nbsp;g_bright_level++;
+}
+
+// Set camera brightness
+error_code = camera_attr_set_brightness(cam_data.g_camera, g_bright_level);
+</pre>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="release" name="release" class="items-tit-h2">Releasing Resources</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>After you have finished working with the camera, stop the camera and clean up the application environment:</p>
+
+<ol>
+ <li>If the auto-focus is switched on, switch if off using the <span style="font-family: Courier New,Courier,monospace">camera_cancel_focusing()</span> function:
+ <pre class="prettyprint">// Cancel camera focusing
+error_code = camera_cancel_focusing(cam_data.g_camera);</pre></li>
+
+ <li>Stop the camera preview using the <span style="font-family: Courier New,Courier,monospace">camera_stop_preview()</span> function:
+ <pre class="prettyprint">// Stop camera preview
+error_code = camera_stop_preview(cam_data.g_camera);</pre></li>
+
+ <li>Unregister the camera preview and camera focus change callback functions using the <span style="font-family: Courier New,Courier,monospace">camera_unset_preview_cb()</span> and <span style="font-family: Courier New,Courier,monospace">camera_unset_focus_changed_cb()</span> functions, respectively:
+ <pre class="prettyprint">// Unregister camera preview callback
+error_code = camera_unset_preview_cb(cam_data.g_camera);
+
+// Unregister camera focus change callback
+error_code = camera_unset_focus_changed_cb(cam_data.g_camera);</pre></li>
+
+ <li>Destroy the camera handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">camera_destroy()</span> function:
+ <pre class="prettyprint">// Destroy camera handle
+error_code = camera_destroy(cam_data.g_camera);</pre></li>
+</ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm
new file mode 100644 (file)
index 0000000..87f2295
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm
@@ -0,0 +1,414 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Util: Encoding, Decoding, and Transforming Images</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Image Utilities</a></li>
+                       <li>Image manipulation
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#colorspace">Converting the Color Space</a></li>
+                                       <li><a class="opensection" href="#resize">Resizing an Image</a></li>
+                                       <li><a class="opensection" href="#rotate">Rotating an Image</a></li>
+                                       <li><a class="opensection" href="#crop">Cropping an Image</a></li>
+                               </ul>
+                       </li>
+                       <li><a class="opensection" href="#decode">Decoding from a File or Memory</a></li>
+                       <li><a class="opensection" href="#encode">Encoding to a File or Memory</a></li>
+               </ul>     
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/image_util_n.htm">Image Util Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Image Util: Encoding, Decoding, and Transforming Images</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can convert, resize, rotate, and crop an image, and decode and encode a JPEG image.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Image Util API basics by learning about:</p>
+
+<ul>
+ <li><a class="opensection" href="#init">Initializing Image Utilities</a>
+ <p>Initialize the image utilities for use.</p></li>
+ <li>Image manipulation
+   <ul>
+        <li><a class="opensection" href="#colorspace">Converting the Color Space</a>
+         <p>Convert an image from one color space to another.</p>
+        </li>
+        <li><a class="opensection" href="#resize">Resizing an Image</a>
+         <p>Resize an image.</p>
+        </li>
+        <li><a class="opensection" href="#rotate">Rotating an Image</a>
+         <p>Rotate an image.</p>
+        </li>
+        <li><a class="opensection" href="#crop">Cropping an Image</a>
+         <p>Crop an image.</p>
+        </li>
+  </ul>
+ </li>
+ <li><a class="opensection" href="#decode">Decoding from a File or Memory</a>
+  <p>Decode a JPEG image from a file or memory.</p>
+ </li>
+ <li><a class="opensection" href="#encode">Encoding to a File or Memory</a>
+  <p>Encode raw image data to a JPEG file or to memory in JPEG format.</p>
+ </li>
+</ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Image Utilities</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize image utilities:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;image_util.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;image_util.h&gt;
+</pre></li>                    
+<li><p>Declare the required variables:</p>
+
+<pre class="prettyprint">
+#define SAMPLE_FILENAME &quot;/tmp/sample_image.jpg&quot;
+#define OUTPUT_ROTATED_JPEG &quot;/tmp/rotated_image.jpg&quot;
+
+const image_util_colorspace_e colorspace = IMAGE_UTIL_COLORSPACE_RGB888;
+unsigned char *img_rotate_target = NULL;
+unsigned char *img_source = NULL;
+int ret = 0;
+int width = 0, height = 0;
+unsigned int size_decode = 0;</pre></li>
+
+<li><p>To ensure that a function has been properly executed, always check its return value. If the return value is different from <span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ERROR_NONE</span>, an error has occurred.</p>
+
+<p>The Image Util API supports the following color spaces defined in the <span style="font-family: Courier New,Courier,monospace">image_util_colorspace_e</span> enumerator:</p>
+
+<pre class="prettyprint">IMAGE_UTIL_COLORSPACE_YV12,       // YV12 - YCrCb planar format
+IMAGE_UTIL_COLORSPACE_YUV422,     // YUV422 - planar 
+IMAGE_UTIL_COLORSPACE_I420,       // YUV420 - planar 
+IMAGE_UTIL_COLORSPACE_NV12,       // NV12- planar 
+IMAGE_UTIL_COLORSPACE_UYVY,       // UYVY - packed 
+IMAGE_UTIL_COLORSPACE_YUYV,       // YUYV - packed 
+IMAGE_UTIL_COLORSPACE_RGB565,     // RGB565, high-byte is Blue
+IMAGE_UTIL_COLORSPACE_RGB888,     // RGB888, high-byte is Blue 
+IMAGE_UTIL_COLORSPACE_ARGB8888,   // ARGB8888, high-byte is Blue 
+IMAGE_UTIL_COLORSPACE_BGRA8888,   // BGRA8888, high-byte is Alpha 
+IMAGE_UTIL_COLORSPACE_RGBA8888,   // RGBA8888, high-byte is Alpha 
+IMAGE_UTIL_COLORSPACE_BGRX8888,   // BGRX8888, high-byte is X 
+IMAGE_UTIL_COLORSPACE_NV21,       // NV12 - planar 
+IMAGE_UTIL_COLORSPACE_NV16,       // NV16 - planar 
+IMAGE_UTIL_COLORSPACE_NV61,       // NV61 - planar</pre>
+
+<p>To find out which color spaces are encoded, use the <span style="font-family: Courier New,Courier,monospace">image_util_foreach_supported_jpeg_colorspace()</span> function:</p>
+
+<pre class="prettyprint">int image_util_foreach_supported_jpeg_colorspace(image_util_supported_jpeg_colorspace_cb 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;void * user_data);</pre>
+
+<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></li></ol>
+       </div>
+               </li>                   
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="colorspace" name="colorspace" class="items-tit-h2">Converting the Color Space</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To convert an image from one color space to another:</p>
+<ol><li>Create a transform handle to support the conversion.
+
+<p>The transform is related and limited to image processing, such as converting, resizing, rotating, and cropping.</p>
+
+<pre class="prettyprint">transformation_h handle;
+ret = image_util_transform_create(&amp;handle);
+</pre></li>
+<li>
+<p>To use hardware acceleration, enable it using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_hardware_acceleration(handle, true);</pre>
+
+<p>Even though you use hardware acceleration, you can set the output format with the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_colorspace()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_colorspace(handle, colorspace);
+</pre></li>
+<li>
+<p>After creating the <span style="font-family: Courier New,Courier,monospace">transform_h</span> handle and setting the output property, execute the transform using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function.</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb</span> callback for handling the function results.</p>
+
+<pre class="prettyprint">ret = image_util_transform_run(handle, src, (image_util_transform_completed_cb)completed_callback, user_data);
+</pre>
+<table class="note"> 
+ <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note"><ul class="ul"><li>The function only converts the color space. It does not change the image width or height.</li>
+   <li>Because of the restrictions of the image processing library, not all color space combinations are supported for conversion. For example, the NV12 format is commonly used in hardware chips, but it is not supported by the library.</li>
+   <li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
+  </tr> 
+ </tbody> 
+</table></li>
+<li>
+<p>When the callback confirms that the transform is completed, call the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_destroy(handle);</pre>
+
+
+</li></ol>
+       </div>
+               </li>   
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="resize" name="resize" class="items-tit-h2">Resizing an Image</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To resize an image:</p>
+
+<ol><li><p>Create a transform handle to support resizing.</p>
+
+<p>The transform is related and limited to image processing, such as converting, resizing, rotating, and cropping.</p>
+
+<pre class="prettyprint">transformation_h handle;
+ret = image_util_transform_create(&amp;handle);
+</pre></li>
+<li>
+<p>To use hardware acceleration, enable it using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_hardware_acceleration(handle, true);</pre>
+
+<p>Even though you use hardware acceleration, you can set the output resolution with the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_resolution()</span> function.</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_resolution(handle, width, height);
+</pre></li>
+<li>
+<p>After creating the <span style="font-family: Courier New,Courier,monospace">transform_h</span> handle and setting the output property, execute the transform using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function.</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb</span> callback for handling the function results.</p>
+<pre class="prettyprint">ret = image_util_transform_run(handle, src, (image_util_transform_completed_cb)completed_callback, user_data);
+</pre>
+<table class="note">
+ <tbody>
+  <tr>
+   <th class="note">Note</th>
+  </tr>
+  <tr>
+   <td class="note"><ul class="ul"><li>Since the source format is the same as the target format, you can ignore the format.</li>
+   <li>If the color space is YUV, the target image width and height must be multiples of 8. This restriction does not apply to the RGB images.</li>
+   <li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
+  </tr>
+ </tbody>
+</table></li>
+<li>
+<p>When the callback confirms that the transform is completed, call the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+<pre class="prettyprint">ret = image_util_transform_destroy(handle);</pre>
+</li></ol>
+       </div>
+               </li>   
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="rotate" name="rotate" class="items-tit-h2">Rotating an Image</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To rotate an image:</p>
+
+<ol><li><p>Create a transform handle to support rotating.</p>
+
+<p>The transform is related and limited to image processing, such as converting, resizing, rotating, and cropping.</p>
+
+<pre class="prettyprint">transformation_h handle;
+ret = image_util_transform_create(&amp;handle);
+</pre></li>
+<li>
+<p>To use hardware acceleration, enable it using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_hardware_acceleration(handle, true);</pre>
+
+<p>Even though you use hardware acceleration, you can set the rotation property with the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_rotation()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_rotation(handle, rotation);</pre>
+<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">rotation</span> parameter are:</p>
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_NONE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_90</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_180</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_270</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_FLIP_HORZ</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_FLIP_VERT</span></li>
+</ul>
+</li>
+<li>
+<p>After creating the <span style="font-family: Courier New,Courier,monospace">transform_h</span> handle and setting the output property, execute the transform using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function.</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb</span> callback for handling the function results.</p>
+<pre class="prettyprint">ret = image_util_transform_run(handle, src, (image_util_transform_completed_cb)completed_callback, user_data);
+</pre>
+<table class="note">
+ <tbody>
+  <tr>
+   <th class="note">Note</th>
+  </tr>
+  <tr>
+   <td class="note"><ul class="ul"><li>Since the source format is the same as the target format, you can ignore the <span style="font-family: Courier New,Courier,monospace">src_format.</span></li>
+   <li>If the color space is YUV, the target image width and height must be multiples of 8. This restriction does not apply to the RGB images.</li>
+   <li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
+  </tr>
+ </tbody>
+</table></li>
+<li>
+<p>When the callback confirms that the transform is completed, call the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_destroy(handle);</pre>
+
+</li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="crop" name="crop" class="items-tit-h2">Cropping an Image</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To crop an image:</p>
+
+<ol><li><p>Create a transform handle to support cropping.</p>
+
+<p>The transform is related and limited to image processing, such as converting, resizing, rotating, and cropping.</p>
+
+<pre class="prettyprint">transformation_h handle;
+ret = image_util_transform_create(&amp;handle);
+</pre></li>
+<li>
+<p>To use hardware acceleration, enable it using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_hardware_acceleration()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_hardware_acceleration(handle, true);</pre>
+
+<p>Even though you use hardware acceleration, you can set the cropped property with the <span style="font-family: Courier New,Courier,monospace">image_util_transform_set_crop_area()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_set_crop_area(handle, start_x, start_y, end_x, end_y);
+</pre></li>
+<li>
+<p>After creating the <span style="font-family: Courier New,Courier,monospace">transform_h</span> handle and setting the output property, execute the transform using the <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function.</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">image_util_transform_completed_cb</span> callback for handling the function results.</p>
+
+<pre class="prettyprint">ret = image_util_transform_run(handle, src, (image_util_transform_completed_cb)completed_callback, user_data);
+</pre>
+</li>
+<li>
+<p>When the callback confirms that the transform is completed, call the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
+
+<pre class="prettyprint">ret = image_util_transform_destroy(handle);</pre>
+
+
+<table class="note"> 
+ <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note"><ul class="ul"><li>Because of a YUV restriction, and because the crop start position can otherwise be set arbitrarily, the cropped image width and height must be even.</li>
+   <li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
+  </tr> 
+ </tbody> 
+</table>
+</li></ol>
+       </div>
+               </li>   
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="decode" name="decode" class="items-tit-h2">Decoding from a File or Memory</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To decode a JPEG image:</p>
+
+<ul class="ul"><li>To decode from a file, use the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg()</span> function.
+
+<p>Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
+
+<pre class="prettyprint">ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &amp;img_source, &amp;width, &amp;height, &amp;size_decode);</pre></li>
+
+<li><p>To decode from memory, use the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg_from_memory()</span> function.</p>
+
+<p>Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
+
+<pre class="prettyprint">ret = image_util_decode_jpeg_from_memory(jpeg_buffer, jpeg_size, colorspace, image_buffer, width, height, size);</pre></li></ul>
+       </div>
+               </li>   
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="encode" name="encode" class="items-tit-h2">Encoding to a File or Memory</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To encode a rotated or flipped image:</p>
+
+<ul class="ul"><li>To encode to a JPEG file, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg()</span> function:
+
+<pre class="prettyprint">ret = image_util_encode_jpeg(img_flip_target, dest_width, dest_height, colorspace, 100, OUTPUT_ROTATED_JPEG);</pre></li>
+
+<li>To encode to memory in JPEG format, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg_to_memory()</span> function:
+
+<pre class="prettyprint">ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height, colorspace, 100, jpeg_buffer, jpeg_size);</pre></li></ul>
+       </div>
+               </li>   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm
new file mode 100644 (file)
index 0000000..013367f
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm
@@ -0,0 +1,171 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Codec: Encoding and Decoding Media Files</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Media Codecs</a></li>
+                       <li><a class="opensection" href="#manage">Managing Media Codecs</a></li>
+                       <li><a class="opensection" href="#release">Releasing Resources</a></li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/media_codecs_n.htm">Media Codec Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Codec: Encoding and Decoding Media Files</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how to encode and decode media files.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Media Codec API basics by learning about:</p>
+
+<ul><li>
+<a class="opensection" href="#init">Initializing Media Codecs</a>
+<p>Initialize the media codecs for use.</p></li>
+
+<li><a class="opensection" href="#manage">Managing Media Codecs</a>
+<p>Prepare and start the codec.</p></li>
+
+<li><a class="opensection" href="#release">Releasing Resources</a>
+<p>Reset the codec and destroy the handle.</p></li></ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Media Codecs</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Before using the Media codec:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_codec.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_codec.h&gt;
+</pre></li>
+<li>Define a handle for the media codec and pass it to the <span style="font-family: Courier New,Courier,monospace">mediacodec_create()</span> function. The handle must be passed to all other Media Codec APIs.
+<pre class="prettyprint">
+mediacodec_h *mediacodec;
+ret = mediacodec_create(&amp;mediacodec);</pre>
+</li>
+<li>If the handle is created normally, set the codec and configuration using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_codec()</span> function.
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">mediacodec_codec_type_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">mediacodec_support_type_e</a> enumeration define the media codec type and support type.</p>
+<pre class="prettyprint">ret = mediacodec_set_codec(mediacodec, (mediacodec_codec_type_e)codecid, flag); </pre>
+</li>
+<li>Set the video decoder using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_vdec_info()</span> or <span style="font-family: Courier New,Courier,monospace">mediacodec_set_venc_info()</span> function. 
+<pre class="prettyprint">ret = mediacodec_set_vdec_info(mediacodec, width, height);
+
+// Or
+
+ret = mediacodec_set_venc_info(mediacodec, width, height, fps, target_bits);</pre>
+</li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Media Codecs</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The Media Codec usage follows a basic pattern:</p>
+<ol><li>Create and configure the Media Codec handle.</li>
+<li>Loop until done:
+<ul class="ul"><li>If an input buffer is ready, read a chunk of input and copy it into the buffer.</li> 
+<li>If an output buffer is ready, copy the output from the buffer.</li></ul></li>
+<li>Release the Media Codec handle.</li></ol> 
+
+
+<p>To manage the codec process loop:</p>
+
+<ol>
+<li>If the prerequisites are set normally, prepare the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_prepare()</span> function.
+
+<pre class="prettyprint">ret = mediacodec_prepare(mediacodec);
+</pre>
+</li>
+
+<li>Start the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> functions.
+<pre class="prettyprint">media_packet_h in_buf = NULL;
+ret = mediacodec_process_input (mediacodec, in_buf, 0);
+
+media_packet_h output_buf = NULL;
+ret = mediacodec_get_output (mediacodec, &amp;output_buf, 0);
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="release" name="release" class="items-tit-h2">Releasing Resources</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To reset the codec and destroy the handle using the <span style="font-family: Courier New,Courier,monospace">mediacodec_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">mediacodec_destroy()</span> functions after you have finished work with the media codec:</p>
+<pre class="prettyprint">ret = mediacodec_unprepare(mediacodec);
+
+ret = mediacodec_destroy(mediacodec);
+</pre>
+<p>Afterwards, the media codec state is changed to <span style="font-family: Courier New,Courier,monospace">MEDIACODEC_STATE_NONE</span>.</p>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
new file mode 100644 (file)
index 0000000..d13a605
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
@@ -0,0 +1,232 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Tool: Managing Media Handles</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#format">Managing the Media Format Handle</a></li>
+                       <li><a class="opensection" href="#packet">Managing the Media Packet Handle</a></li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/media_tools_n.htm">Media Tool Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Tool: Managing Media Handles</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how to create, set, and get media handles.</p>
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the Media Tool API basics by learning about:</p>
+
+<ul><li><a class="opensection" href="#format">Managing the Media Format Handle</a>
+<p>Create, set, and get the <span style="font-family: Courier New,Courier,monospace">&lt;media_format_h&gt;</span> handle.</p></li>
+
+<li><a class="opensection" href="#packet">Managing the Media Packet Handle</a>
+<p>Create, set, and get the <span style="font-family: Courier New,Courier,monospace">&lt;media_packet_h&gt;</span> handle.</p></li></ul>
+  
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="format" name="format" class="items-tit-h2">Managing the Media Format Handle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage the media format handle:</p>
+
+<ol><li><p>To use the media format handle of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_format.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_format.h&gt;
+</pre></li>
+<li>Define a handle for <span style="font-family: Courier New,Courier,monospace">media_format_h</span> and pass it to the <span style="font-family: Courier New,Courier,monospace">media_format_create()</span> function, which returns the handle. Set the video (or audio) information with the <span style="font-family: Courier New,Courier,monospace">media_format_set_video_info()</span> function.
+<pre class="prettyprint">
+media_format_h format;
+if (media_format_create(&amp;format) == MEDIA_FORMAT_ERROR_NONE)     
+{
+&nbsp;&nbsp;&nbsp;if (media_format_set_video_info(format, MEDIA_FORMAT_H264_HP, 480, 640, 10000000, 15000000) != MEDIA_FORMAT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{             
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;media_format_set_video_info failed!&quot;);         
+&nbsp;&nbsp;&nbsp;}
+}
+else
+{         
+&nbsp;&nbsp;&nbsp;printf(&quot;media_format_create() failed!&quot;);     
+}</pre></li>
+ 
+<li>To get video format information, use the <span style="font-family: Courier New,Courier,monospace">media_format_get_video_info()</span> function: 
+<pre class="prettyprint">
+media_format_h fmt;
+
+media_format_mimetype_e mime;
+int w;
+int h;
+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) == MEDIA_PACKET_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;media_format_get_video_info success! width = %d, height = %d&quot;, w, h);
+}
+else
+{
+&nbsp;&nbsp;&nbsp;print(&quot;media_format_get_video is failed...&quot;);
+}</pre></li></ol>
+       </div>
+               </li>           
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="packet" name="packet" class="items-tit-h2">Managing the Media Packet Handle</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage the media packet handle:</p>
+
+<ol>
+<li><p>To use the media packet handle of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_packet.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_packet.h&gt;
+</pre></li>
+
+<li>Define a handle for <span style="font-family: Courier New,Courier,monospace">media_packet_h</span> and pass it to a creation function with an existing <span style="font-family: Courier New,Courier,monospace">media_format_h</span> handle.
+<p>To reuse the packet handle, set the return value as <span style="font-family: Courier New,Courier,monospace">MEDIA_PACKET_REUSE</span> of <span style="font-family: Courier New,Courier,monospace">int (*media_packet_finalize_cb)</span> and use <span style="font-family: Courier New,Courier,monospace">media_format_unref(media_format_h fmt)</span> after creating the handle.</p>
+<p>The following creation functions are available:</p>
+<ul class="ul"><li>Create a handle and allocate a buffer into the heap or TBM surface with the <span style="font-family: Courier New,Courier,monospace">media_packet_create_alloc()</span> function:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;media_format_h fmt;
+&nbsp;&nbsp;&nbsp;media_packet_h packet;
+ 
+&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
+&nbsp;&nbsp;&nbsp;media_format_set_video_info(fmt, MEDIA_FORMAT_H264_HP, 480, 640, 10000000, 15000000);
+ 
+&nbsp;&nbsp;&nbsp;media_packet_create_alloc (fmt, _finalize_callback, fcb_data, &amp;packet);
+&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
+}
+ 
+int _finalize_callback(media_packet_h packet, int err, void* userdata)
+{
+&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_REUSE;
+}</pre>
+
+</li>
+<li>Create only a handle with the <span style="font-family: Courier New,Courier,monospace">media_packet_create()</span> function:
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;media_format_h fmt;
+&nbsp;&nbsp;&nbsp;media_packet_h packet;
+ 
+&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
+&nbsp;&nbsp;&nbsp;media_format_set_video_info(fmt, MEDIA_FORMAT_H264_HP, 480, 640, 10000000, 15000000);
+ 
+&nbsp;&nbsp;&nbsp;media_packet_create (fmt, _finalize_callback, fcb_data, &amp;packet);
+&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
+}
+int _finalize_callback(media_packet_h packet, int err, void* userdata)
+{
+&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_FINALIZE;
+}
+
+</pre>
+</li>
+<li>Create a handle and store the TBM surface data with the <span style="font-family: Courier New,Courier,monospace">media_packet_create_from_tbm_surface()</span> function:
+<pre class="prettyprint">{
+&nbsp;&nbsp;&nbsp;media_format_h fmt;
+&nbsp;&nbsp;&nbsp;media_packet_h packet;
+
+&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
+&nbsp;&nbsp;&nbsp;media_format_set_video_info(fmt, MEDIA_FORMAT_RGBA, 128, 128, 2000000, 15000000);
+
+&nbsp;&nbsp;&nbsp;media_packet_create_from_tbm_surface (fmt, surface, _finalize_callback, fcb_data, &amp;packet);
+&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
+}
+int _finalize_callback(media_packet_h packet, int err, void* userdata)
+{
+&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_FINALIZE;
+}
+
+</pre>
+</li></ul></li>
+ 
+<li>Set and get the metadata with the media packet handle: 
+<pre class="prettyprint">
+int ret = MEDIA_PACKET_ERROR_NONE;
+
+// format1 already exists
+ 
+media_packet_create_alloc(format1, NULL, NULL, &amp;packet);
+ 
+ret = media_packet_set_duration(packet, duration);
+ 
+// After media_packet_get_format(), use media_format_unref()
+media_format_h tmp;
+media_packet_get_format(packet, &amp;tmp);
+media_format_unref(tmp);
+ 
+// Set previously created format2 to packet
+// After media_packet_set_format(), use media_format_unref()
+media_packet_set_format(packet, format2);
+ 
+// Packet format is format2. If format2 ref_count is 1, format2 is free
+// If format2 ref_count is bigger than 1, it is not free
+media_packet_destroy(packet);
+</pre></li></ol>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm
new file mode 100644 (file)
index 0000000..b3ebbeb
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm
@@ -0,0 +1,326 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Metadata Extractor: Extracting Metadata from an Input Media File</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a class="opensection" href="#init_metadata">Initializing the Metadata Extractor</a></li>
+                               <li><a class="opensection" href="#get_metadata">Getting Metadata, Artwork, and Frame</a></li>
+               </ul>  
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm">Metadata Extractor Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Metadata Extractor: Extracting Metadata from an Input Media File</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can extract metadata from media files.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Metadata Extractor API basics by learning about:</p>
+
+       <ul>
+                       <li><a class="opensection" href="#init_metadata">Initializing the Metadata Extractor</a>
+                       <p>Initialize the metadata extractor for use.</p></li>
+                       <li><a class="opensection" href="#get_metadata">Getting Metadata, Artwork, and Frame</a>
+                       <p>Create a metadata extractor handle, bind the handle with the file, and get metadata, artwork, lyrics, and frames.</p></li>
+       </ul>
+        
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_metadata" name="init_metadata" class="items-tit-h2">Initializing the Metadata Extractor</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The metadata extractor can only be used with video and audio files. It is not supported in the image files.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+<p>To initialize the metadata extractor:</p>
+  <ol>
+
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;metadata_extractor.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;metadata_extractor.h&gt;
+</pre></li><li><p>To work with the Metadata Extractor API, create a handle to the metadata extractor. A global variable is used in this tutorial:</p>
+
+<pre class="prettyprint">
+static metadata_extractor_h g_metadata_h = NULL;
+</pre></li>
+
+<li><p>Files must contain metadata in order for the Metadata Extractor API functions to work. This tutorial uses 2 files - an audio file in the mp3 format and a video file in the mp4 format.</p>
+
+<p>You must get the default path for this tutorial.  For the following example code, you must include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file.</p>
+<pre class="prettyprint">
+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_test_path;
+char *video_test_path;
+
+static bool storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+void _get_internal_storage_path()
+{
+&nbsp;&nbsp;&nbsp;int error;
+&nbsp;&nbsp;&nbsp;char *path = NULL;
+
+&nbsp;&nbsp;&nbsp;error = storage_foreach_device_supported(storage_cb, NULL);
+&nbsp;&nbsp;&nbsp;error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &amp;path);
+&nbsp;&nbsp;&nbsp;if (error != STORAGE_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_music_storage_path = strdup(path);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
+&nbsp;&nbsp;&nbsp;if (error != STORAGE_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_video_storage_path = strdup(path);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
+&nbsp;&nbsp;&nbsp;}
+} 
+
+void _make_test_path()
+{
+&nbsp;&nbsp;&nbsp;int path_len = 0;
+
+&nbsp;&nbsp;&nbsp;path_len = strlen(internal_music_storage_path) + strlen(music_file_name) + 1;
+&nbsp;&nbsp;&nbsp;music_test_path = malloc(path_len);
+&nbsp;&nbsp;&nbsp;memset(music_test_path, 0x0, path_len);
+
+&nbsp;&nbsp;&nbsp;strncat(music_test_path, internal_music_storage_path, strlen(internal_music_storage_path));
+&nbsp;&nbsp;&nbsp;strncat(music_test_path, music_file_name, strlen(music_file_name));
+
+&nbsp;&nbsp;&nbsp;path_len = strlen(internal_video_storage_path) + strlen(video_file_name) + 1;
+&nbsp;&nbsp;&nbsp;video_test_path = malloc(path_len);
+&nbsp;&nbsp;&nbsp;memset(video_test_path, 0x0, path_len);
+
+&nbsp;&nbsp;&nbsp;strncat(video_test_path, internal_video_storage_path, strlen(internal_video_storage_path));
+&nbsp;&nbsp;&nbsp;strncat(video_test_path, video_file_name, strlen(video_file_name));
+}
+</pre>
+</li></ol>
+<p>The metadata extractor APIs can use not only common content in the storage (internal or external), but also the private content in your application data.</p>  
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get_metadata" name="get_metadata" class="items-tit-h2">Getting Metadata, Artwork, and Frame</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get metadata from the file:</p>
+<ol>
+<li>Create the metadata extractor handle.
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_create()</span> function. This is necessary to prepare the metadata extractor handle for work.</p>
+
+<pre class="prettyprint">
+ret = metadata_extractor_create(&amp;g_metadata_h);
+</pre></li>
+<li>Set the path to the file whose data you want to obtain.
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_set_path()</span> function. It binds the handle with the media file specified in the <span style="font-family: Courier New,Courier,monospace;">video_test_path</span>, passed as a second argument to this function.</p>
+
+<pre class="prettyprint">
+ret = metadata_extractor_set_path(g_metadata_h, video_test_path);
+
+// Or
+
+ret = metadata_extractor_set_path(g_metadata_h, music_test_path);
+</pre></li>
+<li>Get metadata from the file.
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_metadata()</span> function, which takes 3 parameters. The first one is the handle to the metadata extractor. The second parameter is the wanted data type. The possible values for this parameter are those defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">metadata_extractor_attr_e</a> enumeration. In this tutorial all the possible data from the file is extracted, so a function with all possible attribute types is needed. The value read from the file is stored in the final parameter, which is a pointer to the <span style="font-family: Courier New,Courier,monospace;">char</span> variable and is fulfilled by the function.</p>
+
+<pre class="prettyprint">
+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);
+if (value != NULL) 
+{
+&nbsp;&nbsp;&nbsp;free(value);
+&nbsp;&nbsp;&nbsp;value = NULL;
+}
+</pre>
+
+<p>After calling the function, check whether the value returned by the function is equal to <span style="font-family: Courier New,Courier,monospace;">METADATA_EXTRACTOR_ERROR_NONE</span>. If it is not, an error occurred. Otherwise, the function got the requested data successfully and its value is stored in the <span style="font-family: Courier New,Courier,monospace;">value</span> variable. The obtained value is printed to the screen. When the work with the obtained value is finished, release it using the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+<p>
+The other types of metadata attributes can be obtained in the exactly same way. Just change the second parameter during calling the function to get different attributes of the metadata.
+</p>
+</li>
+<li>Get the artwork of the file (in case of music content).
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_artwork()</span> function.</p>
+<p>This function takes 4 parameters. The first one is the handle to the metadata extractor. Other parameters are [out] – type parameters, so their values are fulfilled by the function. The first of them, the <span style="font-family: Courier New,Courier,monospace;">artwork</span> variable, is fulfilled with the encoded artwork image, the <span style="font-family: Courier New,Courier,monospace;">artwork_size</span> variable stores the size of the encoded artwork, and the <span style="font-family: Courier New,Courier,monospace;">artwork_mime</span> variable contains the mime type of the artwork. The obtained values are merely printed. Afterwards, release the memory allocated for the <span style="font-family: Courier New,Courier,monospace;">artwork</span> and <span style="font-family: Courier New,Courier,monospace;">artwork_mime</span> variables to avoid memory leaks.</p>
+
+<pre class="prettyprint">
+int artwork_size = 0;
+void *artwork = NULL;
+char *artwork_mime = NULL;
+
+ret = metadata_extractor_get_artwork(g_metadata_h, &amp;artwork, &amp;artwork_size, &amp;artwork_mime);
+dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Artwork: size: %d, mime type: %s\n&quot;, artwork_size, artwork_mime);
+if (artwork != NULL) 
+{
+&nbsp;&nbsp;&nbsp;free(artwork);
+&nbsp;&nbsp;&nbsp;artwork = NULL;
+}
+
+if (artwork_mime != NULL) 
+{
+&nbsp;&nbsp;&nbsp;free(artwork_mime);
+&nbsp;&nbsp;&nbsp;artwork_mime = NULL;
+}
+</pre>
+</li>
+
+<li>Get synchronized lyrics from the file (in case of music content).
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_synclyrics()</span> function. It takes the following parameters:</p>
+<ul class="ul">
+<li>Handle to the metadata extractor</li>
+<li>Index of the time/lyrics set</li>
+<li>Time information of the index</li>
+<li>Lyrics of the index</li>
+</ul>
+
+<p>The last 2 parameters are of the type [out].</p>
+
+<pre class="prettyprint">
+unsigned long time_info = 0;
+char *lyrics = NULL;
+
+ret = metadata_extractor_get_synclyrics(g_metadata_h, 1, &amp;time_info, &amp;lyrics);
+if (lyrics != NULL) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Synclyrics: time_info: %d, lyrics: %s\n&quot;, time_info, lyrics);
+&nbsp;&nbsp;&nbsp;free(lyrics);
+&nbsp;&nbsp;&nbsp;lyrics = NULL;
+}
+</pre>
+
+<p>If the function returns <span style="font-family: Courier New,Courier,monospace;">METADATA_EXTRACTOR_ERROR_NONE</span>, no errors occurred and the time information and lyrics were correctly fulfilled by the function. Only their values are printed. Free the memory allocated for the lyrics to avoid memory leaks.</p>
+</li>
+
+<li>Get frames from video files.
+<p>Use the following functions. The <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_frame()</span> function gets the frame of a video media file without specifying the time when the frame appears. The <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_frame_at_time()</span> function takes a timestamp as one of the parameters. This parameter defines when a specific frame appears in the video file.</p>
+
+<pre class="prettyprint">
+// Use metadata_extractor_get_frame()
+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);
+if (frame != NULL) 
+{
+&nbsp;&nbsp;&nbsp;free(frame);
+&nbsp;&nbsp;&nbsp;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, &amp;frame, &amp;frame_size);
+dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Frame at %d: size: %d\n&quot;, timestamp, frame_size);
+if (frame != NULL) 
+{
+&nbsp;&nbsp;&nbsp;free(frame);
+&nbsp;&nbsp;&nbsp;frame = NULL;
+}
+</pre>
+
+<p>Both functions take the handle to the metadata extractor as their first parameter. They also take the <span style="font-family: Courier New,Courier,monospace;">frame</span> and <span style="font-family: Courier New,Courier,monospace;">frame_size</span> variables to fulfill them. The difference is that the second function takes 2 more parameters. The first one was described above. It defines the timestamp from the beginning of the movie to the wanted frame. The second additional parameter is a Boolean value defining whether the user can get an accurate frame (if the value is <span style="font-family: Courier New,Courier,monospace;">true</span>) or only the nearest i-frame.</p>
+
+<p>To check whether the functions are executed successfully, check the value returned by them. If it is <span style="font-family: Courier New,Courier,monospace;">METADATA_EXTRACTOR_ERROR_NONE</span>, no errors occurred and the frame has been successfully stored in the frame variable.</p>
+
+<p>Release the memory allocated for the frame by calling the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p></li>
+
+<li>Clean up on the application end.
+<pre class="prettyprint">
+metadata_extractor_destroy(g_metadata_h);
+</pre></li>
+</ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
new file mode 100644 (file)
index 0000000..67469b1
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Multimedia: Handling Audio, Video, Camera, and Images</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Multimedia: Handling Audio, Video, Camera, and Images</h1>
+    <p>The multimedia tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+  <ul>
+   <li><a class="opensection" href="audio_io_tutorial_n.htm">Audio I/O: Recording from the Audio Device and Playing Raw Audio Data</a> <p>Demonstrates how you can read audio data, create buffers, and get audio-related properties.</p></li>
+   <li><a class="opensection" href="camera_tutorial_n.htm">Camera: Controlling a Camera Device</a> <p>Demonstrates how you can access the camera preview, focus, and take photos.</p></li>
+  
+   <li><a class="opensection" href="image_util_tutorial_n.htm">Image Util: Encoding, Decoding, and Transforming Images</a> <p>Demonstrates how you can process images and decode or encode JPEG image files.</p></li>
+  <li><a class="opensection" href="media_codec_tutorial_n.htm">Media Codec: Encoding and Decoding Media Files</a> <p>Demonstrates how you can encode and decode media files.</p></li>
+
+  <li><a class="opensection" href="media_tools_tutorial_n.htm">Media Tool: Managing Media Handles</a> <p>Demonstrates how you can manage media handles.</p></li>
+  <li><a class="opensection" href="metadata_extractor_tutorial_n.htm">Metadata Extractor: Extracting Metadata from an Input Media File</a> <p>Demonstrates how you can get metadata from media files.</p></li>
+  <li><a class="opensection" href="player_tutorial_n.htm">Player: Playing Multimedia Content from a File, Network, and Memory</a> <p>Demonstrates how you can play audio and video files, and control audio equalizer.</p></li>
+  <li><a class="opensection" href="radio_tutorial_n.htm">Radio: Accessing the Radio</a> <p>Demonstrates how you can tune the radio for listening, scan frequencies, and search channels.</p></li>
+  <li><a class="opensection" href="recorder_tutorial_n.htm">Recorder: Recording Audio and Video</a> <p>Demonstrates how you can record audio and video.</p></li>
+
+  <li><a class="opensection" href="tone_player_tutorial_n.htm">Tone Player: Playing Tones</a> <p>Demonstrates how you can play tones.</p></li>  
+  <li><a class="opensection" href="video_util_tutorial_n.htm">Video Util: Transcoding Media Files</a> <p>Demonstrates how you can transcode and trim video files.</p></li>
+  <li><a class="opensection" href="wav_player_tutorial_n.htm">WAV Player: Playing Waveform Audio Files</a> <p>Demonstrates how you can play WAV files.</p></li>  
+  <li><a class="opensection" href="sound_manager_tutorial_n.htm">Sound Manager: Managing Sound Parameters</a> <p>Demonstrates how you can set the sound session type and control volume.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm
new file mode 100644 (file)
index 0000000..cadfd11
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm
@@ -0,0 +1,824 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Player: Playing Multimedia Content from a File, Network, and Memory</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Player
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init">Initializing the Player</a></li>
+                                       <li><a class="opensection" href="#play_audio">Playing an Audio File</a></li>
+                                       <li><a class="opensection" href="#play_video">Playing a Video File</a></li>
+                                       <li><a class="opensection" href="#release">Stopping the Player and Releasing Resources</a></li>
+                               </ul>
+                       </li>
+                       <li>Multi-player
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_multiplayer">Initializing the Players</a></li>
+                                       <li><a class="opensection" href="#play">Playing Multiple Files Simultaneously</a></li>
+                               </ul>
+                       </li>
+                       <li>Advanced player
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#set_parameters">Setting Display Parameters</a></li>
+                                       <li><a class="opensection" href="#get_stream">Getting Stream Information</a></li>
+                                       <li><a class="opensection" href="#insert">Inserting Subtitles</a></li>
+                               </ul>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/player_n.htm">Player Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Player: Playing Multimedia Content from a File, Network, and Memory</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can play audio and video files and play multiple audio files simultaneously.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Player API basics by learning about:</p>
+<ul>
+       
+       <li>Player
+               <ul>
+                        <li><a class="opensection" href="#init">Initialing the Player</a>
+                        <p>Initialize the player for use.</p>
+                        </li>
+                        <li><a class="opensection" href="#play_audio">Playing an Audio File</a>
+                         <p>Play an audio file.</p>
+                        </li>
+                        <li><a class="opensection" href="#play_video">Playing a Video File</a>
+                         <p>Play a video file.</p>
+                        </li>
+                        <li><a class="opensection" href="#release">Stopping the Player and Releasing Resources</a>
+                         <p>Stop the player and release the resources allocated to the player.</p>
+                        </li>
+               </ul>
+       </li>
+       <li>Multi-player
+               <ul>
+                        <li><a class="opensection" href="#init_multiplayer">Initializing the Players</a>
+                        <p>Initialize the players for use.</p></li>
+                        <li><a class="opensection" href="#play">Playing Multiple Files Simultaneously</a>
+                         <p>Create multiple players for playing multiple files simultaneously.</p>
+                        </li>
+               </ul>
+       </li>
+</ul>
+
+<h2>Follow-up</h2>
+
+<p>Once we have learned the basics of the Player API, we can now move on to more advanced tasks, including:</p>
+<ul>
+       <li>Advanced player
+               <ul>
+                        <li><a class="opensection" href="#set_parameters">Setting Display Parameters</a>
+                         <p>Set different display parameters.</p>
+                        </li>
+                         <li><a class="opensection" href="#get_stream">Getting Stream Information</a>
+                         <p>Get information about the stream.</p>
+                        </li>
+                          <li><a class="opensection" href="#insert">Inserting Subtitles</a>
+                         <p>Insert subtitles to video files.</p>
+                        </li>
+               </ul>
+       </li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Player</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the player:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;player.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;glib.h&gt;</span> header files in your application:</p>
+<pre class="prettyprint">#include &lt;player.h&gt;
+#include &lt;Elementary.h&gt;
+#include &lt;glib.h&gt;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span> header file is needed for setting the display.</p></li>
+
+<li>
+<p>Create a player handle and pass it to the <span style="font-family: Courier New,Courier,monospace;">player_create()</span> function. You need the player handle for defining which file to play and with what playback settings.</p>
+
+<pre class="prettyprint">
+#define MP3_SAMPLE = &quot;/opt/usr/media/SampleAudio.mp3&quot;;
+#define MP4_SAMPLE = &quot;/opt/usr/media/SampleVideo.mp4&quot;;
+
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;player_h player;
+} 
+
+static void init_base_player(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;int error_code = 0;
+&nbsp;&nbsp;&nbsp;error_code = player_create(&amp;ad-&gt;player);
+&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create&quot;);
+&nbsp;&nbsp;&nbsp;// Do setting more for playback, like setting callback, setting_uri and prepare
+}
+
+static void create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Make window
+&nbsp;&nbsp;&nbsp;// Make button
+&nbsp;&nbsp;&nbsp;// Add callback to button
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_init, &quot;clicked&quot;, init_base_player, ad);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_end, &quot;clicked&quot;, release_base_player, ad);                 
+&nbsp;&nbsp;&nbsp;// Create an Evas image object for the video surface
+}
+
+static void app_create(void *data) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+
+</li>
+
+<li>
+
+<p>To receive notifications about playback interruptions, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">player_set_interrupted_cb()</span>
+function. The playback is interrupted and the callback triggered when
+another multimedia application is run. The player state automatically
+changes to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span> or <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> according to the session policy. To get the current state, use the <span style="font-family: Courier New,Courier,monospace;">player_get_state()</span> function.</p>
+
+<pre class="prettyprint">static void _player_interrupted_cb(player_interrupted_coded_e code, void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;player_state_e state;
+
+&nbsp;&nbsp;&nbsp;player_get_state(ad-&gt;player, &amp;state);
+&nbsp;&nbsp; log_print(DLOG_INFO, LOG_TAG, &quot;current player state = %d&quot;, state);
+&nbsp;&nbsp;&nbsp;// If the state is PLAYER_STATE_PAUSED, update UI like button
+}
+
+static void init_base_player(appdata_s *ad)
+{  
+&nbsp;&nbsp;&nbsp;// Set an interruption callback if the application wants to know the point
+&nbsp;&nbsp;&nbsp;error_code = player_set_interrupted_cb(g_player, _player_interrupted_cb, ad);
+&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create&quot;);
+}</pre>
+
+</li>
+
+<li>
+
+<p>To receive a notification when the playback completes, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">player_set_completed_cb()</span> function:</p>
+
+<pre class="prettyprint">static void _player_completed_cb(void *data)
+{
+&nbsp;&nbsp; dlog_print(DLOG_INFO, &quot;Player&quot;, &quot;Playback End&quot;);
+}
+
+static void init_base_player(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Set a completed callback if the application wants to know the point
+&nbsp;&nbsp;&nbsp;error_code = player_set_completed_cb(g_player, _player_completed_cb, ad);
+
+&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set completed cb&quot;);
+}</pre>
+
+
+
+</li>
+
+<li>
+
+<p>To receive notifications about player errors during the playback, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">player_set_error_cb()</span> function:</p>
+
+<pre class="prettyprint">static void init_base_player(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;error_code = player_set_error_cb(g_player, _player_error_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set error cb&quot;);
+}</pre>
+
+<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace;">_player_error_cb()</span>
+callback function. The callback is triggered when the player stops
+working due to an error. The callback tries to change the player state
+to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span> by calling the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function. The callback then removes all other callbacks and resets the player by calling the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span> function. At the end, the player is in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> state, so you can release the resources allocated to the player.</p>
+
+<pre class="prettyprint">static void _player_error_cb(int error_code, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;playback failed, error = %x&quot;, error_code);
+}</pre>
+
+<table class="note">
+ <tbody>
+  <tr>
+   <th class="note">Note</th>
+  </tr>
+  <tr>
+   <td class="note">Do not call the <span style="font-family: Courier New,Courier,monospace;">player_destroy()</span> function from the called context, as this can cause the <span style="font-family: Courier New,Courier,monospace;">PLAYER_ERROR_INVALID_OPERATION</span> error.</td>
+  </tr>
+ </tbody>
+</table>
+
+</li>
+
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="play_audio" name="play_audio" class="items-tit-h2">Playing an Audio File</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To play an audio file:</p><ol>
+<li>
+<p>Set the audio file path after creating the audio player handler.</p>
+
+<p>To specify the source file to play, use the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_set_uri(ad-&gt;player, MP3_SAMPLE);</pre>
+</li>
+
+<li>
+<p>Prepare the player for playback.</p>
+
+<p>Before you can start the playback, the player has to change its state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>. To change the state, use the <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_prepare(ad-&gt;player);</pre>
+
+</li>
+
+<li>
+
+<p>Play the audio file.</p>
+
+<p>To start the playback, use the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_start(ad-&gt;player);</pre>
+
+</li>
+
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="play_video" name="play_video" class="items-tit-h2">Playing a Video File</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To play a video file:</p>
+
+<ol>
+<li>
+<p>Set the video file path.</p>
+
+<p>To specify the source file to play, use the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_set_uri(ad-&gt;player, MP4_SAMPLE);</pre>
+
+</li>
+
+<li>
+
+<p>Set the display on which the video is played.</p>
+
+<p>To get the correct display handle, use the <span style="font-family: Courier New,Courier,monospace;">GET_DISPLAY()</span> function. To set the display, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function with the display handle.</p>
+
+<pre class="prettyprint">error_code = player_set_display(g_player, PLAYER_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(evas_obj));</pre>
+
+<table class="note">
+ <tbody>
+  <tr>
+   <th class="note">Note</th>
+  </tr>
+  <tr>
+   <td class="note">In
+case of an overlay surface, when the device orientation changes, the
+displayed video does not rotate automatically. If you want to change
+the video orientation according to the device orientation, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function within the <span style="font-family: Courier New,Courier,monospace;">app_device_orientation_cb()</span>
+callback function used by the application. In case of an Evas surface,
+the Evas object for the video is rotated by the window manager used by
+the application, not by the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function.</td>
+  </tr>
+ </tbody>
+</table>
+
+</li>
+
+<li>
+
+<p>Prepare the player for playback.</p>
+
+<p>Before you can start the playback, the player has to change its state from <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>. To change the state, use the <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_prepare(ad-&gt;player);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">player_prepare()</span> function works synchronously, so it can be blocked. To prepare the player asynchronously instead, use the <span style="font-family: Courier New,Courier,monospace;">player_prepare_async()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_prepare_async(ad-&gt;player, _prepared_cb, ad);</pre>
+
+</li>
+
+<li>
+
+<p>Play the video file:</p>
+
+<ol>
+
+<li>
+
+<p>Ensure that the player state has changed to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>. To check the state, use the <span style="font-family: Courier New,Courier,monospace;">player_get_state()</span> function, and to start the playback, use the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function:</p>
+
+<pre class="prettyprint">player_state_e state;
+do 
+{
+&nbsp;&nbsp;&nbsp;error_code = player_get_state(ad-&gt;player, &amp;state);
+&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;usleep(1000);
+} while (state != PLAYER_STATE_READY);
+
+if (error_code == PLAYER_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;error_code = player_start(ad-&gt;player);
+}</pre>
+
+</li>
+
+<li>
+
+<p>To start the playback, use the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function:</p>
+
+<pre class="prettyprint">error_code = player_start(g_player);</pre>
+<p>After a successful call of this function, the player state is set to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span> and the playback of the media content stored in the previously specified file starts. The video file plays until you call the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> or <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function.</p>
+</li>
+
+<li>
+
+<p>If you used the <span style="font-family: Courier New,Courier,monospace;">player_prepare_async()</span> function to prepare the player, use the following callback functions to handle the playback:</p>
+
+<pre class="prettyprint">static void _prepared_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;int error_code = 0;
+&nbsp;&nbsp;&nbsp;error_code = player_start(ad-&gt;player);
+}</pre>
+
+</li>
+
+</ol>
+
+</li>
+
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="release" name="release" class="items-tit-h2">Stopping the Player and Releasing Resources</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To stop the player when it is no longer needed:</p>
+<ol><li>Reset the player using the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span> function with the player handle as a parameter. Before using this function, make sure that the player is stopped using the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function.<p></p>
+
+<pre class="prettyprint">error_code = player_stop(player);
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_stop() = %d&quot;, error_code);
+
+error_code = player_unprepare(player);
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_unprepare() = %d&quot;, error_code);
+</pre></li>
+
+<li><p>When the player is unprepared, it is in the <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span> state. Destroy the player handle using the <span style="font-family: Courier New,Courier,monospace;">player_destroy()</span> function.</p>
+
+<pre class="prettyprint">error_code = player_destroy(player);
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_destroy = %d&quot;, error_code);
+</pre></li></ol>
+
+       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_multiplayer" name="init_multiplayer" class="items-tit-h2">Initializing the Players</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the players:</p>
+<ol>
+
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;player.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;stdio.h&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;unistd.h&gt;</span> header files in your application:</p>
+<pre class="prettyprint">
+#include &lt;player.h&gt;
+#include &lt;stdio.h&gt;
+#include &lt;unistd.h&gt;
+</pre></li>
+
+<li>Declare the variables for player handlers, player states, file paths, playback time, and return value:
+
+<pre class="prettyprint">
+static player_h player_1, player_2, player_3;
+static player_state_e state_1, state_2, state_3;
+static int ret =0;
+static char *path_1 = &quot;tmp/sample.3gp&quot;;
+static char *path_2 = &quot;tmp/test.wav&quot;;
+static char *path_3 = &quot;tmp/test2.wav&quot;;
+static const int PLAYBACK_TIME=6;</pre>
+
+<p>To ensure that a function has been properly executed, always check its return value. If the return value differs from <span style="font-family: Courier New,Courier,monospace">PLAYER_ERROR_NONE</span>, an error has occurred.</p></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="play" name="play" class="items-tit-h2">Playing Multiple Files Simultaneously</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To play multiple files simultaneously:</p>
+
+<ol>
+
+<li>
+
+<p>To play multiple files at the same time, create a player handle for each file using the <span style="font-family: Courier New,Courier,monospace">player_create()</span> function:</p>
+
+<pre class="prettyprint">ret = player_create(&amp;player_1);
+
+ret = player_create(&amp;player_2);
+
+ret = player_create(&amp;player_3);
+</pre>
+
+</li>
+
+<li>
+
+<p>To specify the source files to play, use the <span style="font-family: Courier New,Courier,monospace">player_set_uri()</span> function:</p>
+
+<pre class="prettyprint">ret = player_set_uri(player_1, path_1);
+
+ret = player_set_uri(player_2, path_2);
+
+ret = player_set_uri(player_3, path_3);
+</pre>
+
+</li>
+
+<li>
+
+<p>Before you can start the playback, the players have to change their states from <span style="font-family: Courier New,Courier,monospace">PLAYER_STATE_IDLE</span> to <span style="font-family: Courier New,Courier,monospace">PLAYER_STATE_READY</span>. To change the states, use the <span style="font-family: Courier New,Courier,monospace">player_prepare()</span> function:</p>
+
+
+<pre class="prettyprint">ret = player_prepare (player_1);
+
+ret = player_prepare (player_2);
+
+ret = player_prepare (player_3);
+</pre>
+
+</li>
+
+<li>
+
+<p>Play the files:</p>
+
+<ol>
+
+<li>
+
+<p>Ensure that the player states have changed to <span style="font-family: Courier New,Courier,monospace">PLAYER_STATE_READY</span>. To check the states, use the <span style="font-family: Courier New,Courier,monospace">player_get_state()</span> function. It is recommended to implement a waiting loop for each player:</p>
+
+<pre class="prettyprint">// Wait to prepare player_1
+ret = player_get_state(player_1, &amp;state_1);
+
+while(state_1 != PLAYER_STATE_READY)
+{
+&nbsp;&nbsp;&nbsp;ret = player_get_state(player_1, &amp;state_1);
+
+&nbsp;&nbsp;&nbsp;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;ret = player_get_state(player_2, &amp;state_2);
+
+&nbsp;&nbsp;&nbsp;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;ret = player_get_state(player_3, &amp;state_3);
+
+&nbsp;&nbsp;&nbsp;usleep(1000);
+}</pre>
+
+</li>
+
+<li>
+
+<p>To start the playback, use the <span style="font-family: Courier New,Courier,monospace">player_start()</span> function:</p>
+
+<pre class="prettyprint">ret = player_start(player_1);
+
+ret = player_start(player_2);
+
+ret = player_start(player_3);
+</pre>
+
+</li>
+
+</ol>
+
+</li>
+
+<li>
+<p>To reset the players and destroy the player handles, use the <span style="font-family: Courier New,Courier,monospace">player_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">player_destroy()</span> functions, respectively:</p>
+
+<pre class="prettyprint">ret = player_unprepare(player_1);
+ret = player_destroy(player_1);
+
+ret = player_unprepare(player_2);
+ret = player_destroy(player_2);
+
+ret = player_unprepare(player_3);
+ret = player_destroy(player_3);
+</pre>
+
+</li>
+
+</ol>
+       </div>
+               </li>                   
+               
+               <li>            
+               <div class="devicespec-tit">
+ <h2 id="set_parameters" name="set_parameters" class="items-tit-h2">Setting Display Parameters</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set the display parameters:</p>
+<ol>
+       <li><a class="opensection" href="#init">Create the player handle</a> and <a class="opensection" href="#play_video">prepare the player</a>.</li>
+       <li>Set the parameters:
+       <ul class="ul">
+               <li>Set the display.
+               <ol>
+                       <li><p>To play a video, set the display on which the video is rendered. Get the display handle from the window with the <span style="font-family: Courier New,Courier,monospace;">GET_DISPLAY()</span> function, and set the display type.</p>
+                       <p>The display is created from the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function called with the player handle, a <span style="font-family: Courier New,Courier,monospace;">player_display_type_e</span> display type, and a <span style="font-family: Courier New,Courier,monospace;">player_display_h</span> display handle.</p>
+                       <p>After successfully calling this function, the player is connected to the display handle.</p>
+                       <pre class="prettyprint">player_display_h display;
+                       
+error_code = player_set_display(player, PLAYER_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(evas_obj));
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display = %d&quot;, error_code);</pre>
+                       </li>
+
+
+                       <li><p>When the source data and the display are set and the player status is <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>, invoke the <span style="font-family: Courier New,Courier,monospace;">player_start()</span> function:</p>
+<pre class="prettyprint">error_code = player_start(player);
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_start = %d&quot;, error_code);</pre>
+                       <p>After a successful call of this function, the player state is set to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>. The playback of the media contents stored in the previously specified file starts. The video file plays until the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> or <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function is called.</p></li></ol></li>
+
+<li>Set the display visibility.
+                       <ol><li><p>Before setting the visibility of the x surface video display, check that it has not already been done by using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_visible()</span> function:</p>
+<pre class="prettyprint">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);</pre></li>
+
+
+                       <li><p>If the <span style="font-family: Courier New,Courier,monospace;">is_visible</span> variable is set to <span style="font-family: Courier New,Courier,monospace;">false</span>, the visibility of the display can be set using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_visible()</span> function:</p>
+
+<pre class="prettyprint">if (!is_visible) 
+{
+&nbsp;&nbsp;&nbsp;error_code = player_set_display_visible(player, true);
+&nbsp;&nbsp; dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_visible = %d&quot;, error_code);
+}
+</pre></li></ol></li>          
+
+<li>Set the display mode.
+                       <ol><li><p>Check the possibility of using the video display mode using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_mode_changeable()</span> function:</p>
+
+<pre class="prettyprint">bool is_changeable;
+
+error_code = player_is_display_mode_changeable(player, &amp;is_changeable);
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_is_display_mode_changeable = %d&quot;, error_code);
+</pre></li>
+                       <li><p>If the <span style="font-family: Courier New,Courier,monospace;">is_changeable</span> variable is set to <span style="font-family: Courier New,Courier,monospace;">true</span>, set the display mode using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_mode()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">player_display_mode_e</a> enumerator defines the available display modes.</p>
+<pre class="prettyprint">if (is_changeable)
+{
+&nbsp;&nbsp;&nbsp;error_code = player_set_display_mode(player, PLAYER_DISPLAY_MODE_FULL_SCREEN);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
+}</pre></li></ol></li>
+
+<li>Set the display rotation.
+<p>Set the display rotation using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">player_display_rotation_e</a> enumerator defines the available display rotations.</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);</pre></li></ul></li></ol>
+
+                       
+       </div>
+               </li>   
+               <li>
+               <div class="devicespec-tit">
+ <h2 id="get_stream" name="get_stream" class="items-tit-h2">Getting Stream Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get stream information:</p>
+<ol>
+<li><a class="opensection" href="#init">Create the player handle</a>, <a class="opensection" href="#play_video">prepare the player</a>, and <a class="opensection" href="#set_parameters">set the display</a>.
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To get the stream information, the player state must be either <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span> or <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span>.</td>
+</tr>
+</tbody>
+</table> </li>
+<li>Get the stream information
+<ul class="ul"><li>Get the video size.
+
+<p>Get the width and height of the video display using the <span style="font-family: Courier New,Courier,monospace;">player_get_video_size()</span> function:</p>
+
+<pre class="prettyprint">int width, 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);</pre></li>
+
+<li>Get the duration.
+<p>Get the total media running time using the <span style="font-family: Courier New,Courier,monospace;">player_get_duration()</span> function. The duration is returned in milliseconds.</p>
+
+<pre class="prettyprint">int duration;
+
+error_code = player_get_duration(player, &amp;duration);
+dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_duration = %d&quot;, error_code);</pre></li>
+
+<li>Get the video stream info.
+<p>Get the video stream information using the <span style="font-family: Courier New,Courier,monospace;">player_get_video_stream_info()</span> function. The function returns the number of frames per second and the video bit rate (in Hz).</p>
+
+<pre class="prettyprint">int fps, 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);
+</pre></li>
+
+<li>Get the codec info.
+<p>Get information about the video codec using the <span style="font-family: Courier New,Courier,monospace;">player_get_codec_info()</span> function:</p>
+
+<pre class="prettyprint">char *video_codec;
+
+error_code = player_get_codec_info(player, NULL, &amp;video_codec);
+dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_codec_info = %d&quot;, error_code);
+</pre></li>
+
+<li>Get the content info.
+<p>Get information about the author, album, artist, genre, title, and year using the <span style="font-family: Courier New,Courier,monospace;">get_info_content()</span> function. The values are specified by the <span style="font-family: Courier New,Courier,monospace;">player_content_info_e</span> enumeration.</p>
+
+<pre class="prettyprint">char *album, *artist, *author, *genre, *title, *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);
+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);
+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);
+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);
+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);
+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);
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The values must be released by the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</td>
+</tr>
+</tbody>
+</table> </li>
+
+<li>Get the album art.
+<p>Get the album art using the <span style="font-family: Courier New,Courier,monospace;">player_get_album_art()</span> function. It returns the encoded artwork image and size.</p>
+
+<pre class="prettyprint">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);
+</pre></li></ul></li></ol>
+       </div>
+               </li>   
+               <li>
+               <div class="devicespec-tit">
+ <h2 id="insert" name="insert" class="items-tit-h2">Inserting Subtitles</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert subtitles to a video file:</p>
+<ol><li><a class="opensection" href="#init">Create the player handle</a> and <a class="opensection" href="#play_video">prepare the player</a>.</li>
+<li><p>To set the subtitle path, use the <span style="font-family: Courier New,Courier,monospace;">player_set_subtitle_path()</span> function:</p>
+<pre class="prettyprint">#define SUBTITLE &quot;subtitles_test_file.srt&quot;
+
+char *data_path = app_get_data_path();
+int path_len = strlen(data_path) + 10;
+char *path = malloc(path_len);
+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);
+free(path);
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The subtitle path can be set when the player state is <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_IDLE</span>, <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_READY</span>, <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>, or <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PAUSED</span>.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>After setting the subtitle path, you can <a href="#play_video">play the video file</a> as usual, by setting the video display and starting the player.</p></li></ol>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e975994
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm
@@ -0,0 +1,275 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Radio: Accessing the Radio</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Radio</a></li>
+                       <li><a class="opensection" href="#scan">Scanning for All Available Radio Frequencies</a></li>
+                       <li><a class="opensection" href="#tune">Tuning the Radio and Beginning Listening</a></li>
+                       <li><a class="opensection" href="#seek">Seeking for a Nearby Channel</a></li>
+               </ul> 
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/radio_n.htm">Radio Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Radio: Accessing the Radio</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how to create and tune a radio.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Radio API basics by learning about:</p>
+
+<ul>
+ <li><a class="opensection" href="#init">Initializing the Radio</a>
+ <p>Initialize the radio for use.</p></li>
+ <li><a class="opensection" href="#scan">Scanning for All Available Radio Frequencies</a>
+ <p>Scan for radio frequencies.</p></li>
+ <li><a class="opensection" href="#tune">Tuning the Radio and Beginning Listening</a>
+ <p>Tune in to a station and begin listening.</p></li>
+ <li><a class="opensection" href="#seek">Seeking for a Nearby Channel</a>
+ <p>Look for radio channels nearby.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Radio</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the radio for use:</p><ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;radio.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;radio.h&gt;
+</pre></li>
+<li><p>Define a handle for the radio using the <span style="font-family: Courier New,Courier,monospace">radio_create()</span> function:</p>
+
+<pre class="prettyprint">
+#define MAX_FREQUENCIES 10
+typedef struct radioInfo
+{
+&nbsp;&nbsp;&nbsp;radio_h radio;
+&nbsp;&nbsp;&nbsp;int frequencies[MAX_FREQUENCIES];
+&nbsp;&nbsp;&nbsp;int num_freq;
+&nbsp;&nbsp;&nbsp;int selected_channel;
+} mRadioInfo;
+
+mRadioInfo mRadio;
+ret = radio_create(&amp;mRadio.radio);
+if (ret != RADIO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;return false;
+}
+</pre></li>
+
+<li><p>To receive notifications when your radio playback is interrupted, register the <span style="font-family: Courier New,Courier,monospace">radio_set_interrupted_cb()</span> callback function. When the application disappears into the background, use the following code:</p>
+
+<pre class="prettyprint">ret = radio_set_interrupted_cb(mRadio.radio, on_radio_interrupted, &amp;mRadio);
+if (ret != RADIO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;// Delete the radio handle before closing the application
+&nbsp;&nbsp;&nbsp;return false;
+}
+</pre></li>
+<li>
+<p>Implement the callback function:</p>
+
+<pre class="prettyprint">
+static void 
+on_radio_interrupted(radio_interrupted_code_e code, void* userdata)
+{
+&nbsp;&nbsp;&nbsp;// Search the radio handle from userdata
+&nbsp;&nbsp;&nbsp;mRadioInfo* mRadio = (mRadioInfo *)userdata;
+ 
+&nbsp;&nbsp;&nbsp;switch (code)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;case RADIO_INTERRUPTED_COMPLETED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The application, which was the source of conflict, is closed now
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Restart the radio playback here
+&nbsp;&nbsp;&nbsp;break;
+ 
+&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Your radio listening is interrupted
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Release the application resources or save the current state here
+&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="scan" name="scan" class="items-tit-h2">Scanning for All Available Radio Frequencies</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To scan for available radio frequencies:</p>
+                       <ol><li><p>Define and set the callback for the &quot;scan completed&quot; notification:</p>
+
+<pre class="prettyprint">ret = radio_set_scan_completed_cb(mRadio.radio, on_scan_finished, &amp;mRadio);
+if (ret != RADIO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;return false;
+}
+</pre>
+</li>
+<li>
+<p>Implement the callback function:</p>
+
+<pre class="prettyprint">void 
+on_scan_finished(void* userdata)
+{
+&nbsp;&nbsp;&nbsp;// Frequency scanning is done. Tune into one of the scanned frequencies
+&nbsp;&nbsp;&nbsp;// and start listening 
+}
+</pre>
+
+<p>The callback function returns the available frequencies:</p>
+
+<pre class="prettyprint">
+void 
+on_scan_updated(int frequency, void* userdata)
+{
+&nbsp;&nbsp;&nbsp;mRadioInfo* mRadio = (mRadioInfo *)userdata;
+&nbsp;&nbsp;&nbsp;// Store the radio channels in the array. Frequency values represent the kHz of the channel
+&nbsp;&nbsp;&nbsp;mRadio-&gt;frequencies[mRadio-&gt;num_freq++] = frequency;
+}
+</pre>
+</li>
+<li>
+<p>Start scanning</p>
+<pre class="prettyprint">radio_scan_start(mRadio.radio, on_scan_updated, &amp;mRadio);</pre>
+
+<p>The scanning time depends on your environment (the strength of the radio signal). Cancel the current scan using the <span style="font-family: Courier New,Courier,monospace">radio_scan_stop()</span> function.</p></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="tune" name="tune" class="items-tit-h2">Tuning the Radio and Beginning Listening</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To tune in to a frequency:</p>
+                       <ol><li><p>Select the frequency and tune into it.</p>
+
+<pre class="prettyprint">
+ret = radio_set_frequency(mRadio.radio, mRadio.frequencies[mRadio.selected_channel]);
+if (ret != RADIO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;return false;
+} 
+</pre>
+</li>
+<li>
+<p>Start listening to the radio using the <span style="font-family: Courier New,Courier,monospace">radio_start()</span> function:</p>
+
+<pre class="prettyprint">
+ret = radio_start(mRadio.radio);
+if (ret != RADIO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;return false;
+}
+</pre>
+
+<p>If the radio emits no sound, check the signal strength with the <span style="font-family: Courier New,Courier,monospace">radio_get_signal_strength()</span> function, which returns the current signal strength as a &#39;dbuV&#39; value.</p></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="seek" name="seek" class="items-tit-h2">Seeking for a Nearby Channel</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To seek for a nearby channel:</p>
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace">radio_seek_down()</span> functions to search for an active nearby channel frequency and tune into that frequency. This is very similar to the scanning operation, but only the nearest active frequency is searched for. Once the maximum frequency is reached in any direction, the search is stopped.
+
+<p>To seek down, use the <span style="font-family: Courier New,Courier,monospace">radio_seek_down()</span> function:</p>
+
+<pre class="prettyprint">
+ret = radio_seek_down(mRadio.radio, on_seek_completed, &amp;mRadio);
+if (ret != RADIO_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;return false;
+} 
+</pre>
+
+<p>To seek down, use the <span style="font-family: Courier New,Courier,monospace">radio_seek_up()</span> function in a similar fashion.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">on_seek_completed</span> callback returns the nearest available frequency:</p>
+
+<pre class="prettyprint">
+void on_seek_completed(int frequency, void* userdata)
+{
+&nbsp;&nbsp;&nbsp;mRadioInfo *mRadio = (mRadioInfo *)userdata;
+&nbsp;&nbsp;&nbsp;int new_frequency = 0;
+ 
+&nbsp;&nbsp;&nbsp;// The seek is done. The radio is tuned into the newly found frequency
+&nbsp;&nbsp;&nbsp;// The application sets the new frequency and updates the user interface
+&nbsp;&nbsp;&nbsp;radio_get_frequency(mRadio-&gt;radio, &amp;new_frequency);   
+}
+</pre>
+</li></ol>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm
new file mode 100644 (file)
index 0000000..d356386
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm
@@ -0,0 +1,715 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Recorder: Recording Audio and Video</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Audio recorder
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_audio">Initializing the Audio Recorder</a></li>
+                                       <li><a class="opensection" href="#record_audio">Recording Audio</a></li>
+                               </ul>
+                       </li>
+                       <li>Video recorder
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_video">Initializing the Video Recorder</a></li>
+                                       <li><a class="opensection" href="#record_video">Recording a Video</a></li>
+                               </ul>
+                       </li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/recorder_n.htm">Recorder Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Recorder: Recording Audio and Video</h1>
+  <div class="cont"><div class="static-cont">  
+
+<p>This tutorial demonstrates how you can record audio and video.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Recorder and Camera API basics by learning about:</p>
+
+<ul>
+       <li>Audio recorder
+               <ul>
+                       <li><a class="opensection" href="#init_audio">Initializing the Audio Recorder</a>
+                        <p>Initialize the audio recorder for use.</p></li>
+                       <li><a class="opensection" href="#record_audio">Recording Audio</a>
+                         <p>Start, stop, cancel, and pause recording an audio file, and release resources after finishing recording.</p>
+                        </li>
+               </ul>
+       </li>
+       <li>Video recorder
+               <ul>
+                       <li><a class="opensection" href="#init_video">Initializing the Video Recorder</a>
+                       <p>Initialize the devices for use.</p>
+                       </li>
+                       <li><a class="opensection" href="#record_video">Recording a Video</a>
+                       <p>Prepare, record, commit, and cancel a video.</p></li>
+               </ul>
+       </li>
+</ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_audio" name="init_audio" class="items-tit-h2">Initializing the Audio Recorder</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To initialize the audio recorder for use:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;recorder.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;recorder.h&gt;
+</pre></li>
+<li><p>Create a handle for the audio recorder using the <span style="font-family: Courier New,Courier,monospace">recorder_create_audiorecorder()</span> function:</p>
+
+<pre class="prettyprint">static recorder_h g_recorder;
+
+// Create recorder handle to record audio
+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);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;error code = %d&quot;, error_code);
+}</pre>
+
+
+<p>After successfully creating the handle, the state of the audio recorder is set to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>.</p></li>
+
+<li><p>To receive notifications about the audio recorder state changes, register a callback function using the <span style="font-family: Courier New,Courier,monospace">recorder_set_state_changed_cb()</span> function:</p>
+
+<pre class="prettyprint">
+error_code = recorder_set_state_changed_cb(g_recorder, _state_changed_cb, NULL);
+</pre></li>
+
+<li><p>The callback function returns the following parameters:</p>
+
+<ul class="ul">
+ <li><span style="font-family: Courier New,Courier,monospace">previous</span>: The previous state of the audio recorder.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">current</span>: The current state of the audio recorder.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">by_policy</span>: If the state was changed by a policy, this is set to <span style="font-family: Courier New,Courier,monospace">true</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">user_data</span>: The custom data passed from the <span style="font-family: Courier New,Courier,monospace">recorder_set_state_changed_cb()</span> function.</li>
+</ul>
+
+<p>The following example code implements a simple callback function that prints the previous and current audio recorder states:</p>
+
+<pre class="prettyprint">
+static void _state_changed_cb(recorder_state_e previous, recorder_state_e current, bool by_policy, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG , &quot;_recorder_state_changed_cb (prev: %d, curr: %d)\n&quot;, previous, current);
+}</pre></li>
+
+<li><p>Before you can set any audio recorder attributes, set the audio codec for encoding the audio stream using the <span style="font-family: Courier New,Courier,monospace">recorder_set_audio_encoder()</span> function. Based on the audio codec, set the correct file format using the <span style="font-family: Courier New,Courier,monospace">recorder_set_file_format()</span> function. For example, if you set the codec to AAC, set the file format to 3GP. In addition, set the file name correctly according to the file format when you call the <span style="font-family: Courier New,Courier,monospace">recorder_set_filename()</span> function. The function takes as a parameter the full path of the file to which the recorded audio data is to be stored.</p>
+
+<pre class="prettyprint">
+#define FILENAME_PREFIX &quot;AUDIO&quot;
+struct tm localtime = { 0 };
+time_t rawtime = time(NULL);
+char filename[256] = { &#39;\0&#39; };
+size_t size;
+
+// Set audio encoder
+error_code = recorder_set_audio_encoder(g_recorder, RECORDER_AUDIO_CODEC_AAC);
+
+// Set audio sample rate
+error_code = recorder_attr_set_audio_samplerate(rec_data.recorder, 44100);
+
+// Set file format according to audio encoder
+error_code = recorder_set_file_format(g_recorder, RECORDER_FILE_FORMAT_3GP);
+
+// Make file name
+if (localtime_r(&amp;rawtime, &amp;localtime) != NULL)
+{
+&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;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;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;localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+// Set file name according to file format
+error_code = recorder_set_filename(g_recorder, filename);
+</pre>
+
+<p>The following table lists the available audio codecs.</p>
+
+<table>
+ <caption>
+   Table: Available audio codecs
+ </caption>
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Description</th>
+   <th>Notes</th>   
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_CODEC_DISABLE</span></td>
+   <td>Disable audio track</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_CODEC_AMR</span></td>
+   <td>AMR codec</td>
+   <td>Set the sampling rate under 8000 and mono channel in the Emulator.</td>
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_CODEC_AAC</span></td>
+   <td>AAC codec</td>
+   <td>Set the sampling rate as 44100 and stereo channel in the Emulator.</td>
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_CODEC_VORBIS</span></td>
+   <td>Vorbis codec</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_CODEC_PCM</span></td>
+   <td>PCM codec</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following table lists the available audio devices.</p>
+
+<table>
+ <caption>
+   Table: Available audio devices
+ </caption>
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_DEVICE_MIC</span></td>
+   <td>Mic device</td>
+  </tr>
+  <tr>
+   <td><span style="font-family: Courier New,Courier,monospace">RECORDER_AUDIO_DEVICE_MODEM</span></td>
+   <td>Modem</td>
+  </tr>
+ </tbody>
+</table></li>
+
+<li><p>After setting the audio encoder, file format, and file name, you can set additional attributes for the audio recorder. The following example code sets the file size limit, encoder bitrate, audio device, and sampling rate:</p>
+
+<pre class="prettyprint">// Set max file size to 1024 [kB]
+error_code = recorder_attr_set_size_limit(g_recorder, 1024);
+
+// Set bitrate of audio encoder
+error_code = recorder_attr_set_audio_encoder_bitrate(g_recorder, 28800);
+
+// Set audio device to microphone
+error_code = recorder_attr_set_audio_device(g_recorder, RECORDER_AUDIO_DEVICE_MIC);
+
+// Set audio sample rate
+error_code = recorder_attr_set_audio_samplerate(g_recorder, 44100);
+</pre></li>
+
+<li><p>To receive notifications about reaching the recording limit, register a callback function using the <span style="font-family: Courier New,Courier,monospace">recorder_set_recording_limit_reached_cb()</span> function:</p>
+
+<pre class="prettyprint">
+error_code = recorder_set_recording_limit_reached_cb(g_recorder, _recorder_recording_limit_reached_cb, NULL);
+</pre></li>
+
+<li><p>The following example code implements a simple callback function that prints a notification about reaching the recording limit:</p>
+
+<pre class="prettyprint">
+static void _recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG , &quot;Recording limit reached: %d\n&quot;, type);
+}</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="record_audio" name="record_audio" class="items-tit-h2">Recording Audio</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To record audio:</p>
+<ol>
+<li><p>To prepare the audio recorder for recording, use the <span style="font-family: Courier New,Courier,monospace">recorder_prepare()</span> function:</p>
+
+<pre class="prettyprint">
+error_code = recorder_prepare(g_recorder);</pre>
+
+       <p>After calling the function, the audio recorder state is set to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>. You can now start recording audio.</p></li>
+
+<li><p>To start recording audio, use the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function with the correct recorder handle:</p>
+
+<pre class="prettyprint">
+error_code = recorder_start(g_recorder);</pre></li>
+
+<li><p>You can pause recording only when the audio recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span>. To check the state, use the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function.</p>
+
+       <p>To pause recording audio, use the <span style="font-family: Courier New,Courier,monospace">recorder_pause()</span> function with the correct recorder handle:</p>
+
+<pre class="prettyprint">
+error_code = recorder_pause(g_recorder);</pre>
+
+       <p>To resume recording audio, use the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function.</p></li>
+
+<li><p>You can cancel recording only when the audio recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>. To check the state, use the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function.</p>
+
+       <p>To cancel recording audio, use the <span style="font-family: Courier New,Courier,monospace">recorder_cancel()</span> function with the correct recorder handle. The cancelled recording is discarded and no data is written to a file.</p>
+
+<pre class="prettyprint">
+error_code = recorder_cancel(g_recorder);</pre></li>
+
+<li><p>You can stop recording only when the audio recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>. To check the state, use the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function.</p>
+
+       <p>To stop recording audio and save the recorded data to a file, use the <span style="font-family: Courier New,Courier,monospace">recorder_commit()</span> function. If the target file path has been set to an existing file, the existing file is replaced with the new audio file.</p>
+
+       <p>The following example code first checks the audio recorder&#39;s state, and then stops the recorder and stores the recorded data to a file:</p>
+
+<pre class="prettyprint">// Check audio recorder state
+static bool _recorder_expect_state(recorder_h recorder, recorder_state_e expected_state)
+{
+&nbsp;&nbsp;&nbsp;recorder_state_e state;
+&nbsp;&nbsp;&nbsp;int error_code = recorder_get_state(recorder, &amp;state);
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG , &quot;recorder state = %d, expected recorder state = %d&quot;, state, expected_state);
+&nbsp;&nbsp;&nbsp;if (state == expected_state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return FALSE;
+}
+
+// Stop recording and save recorded data
+if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING) || _recorder_expect_state(g_recorder, RECORDER_STATE_PAUSED))
+{
+&nbsp;&nbsp;&nbsp;error_code = recorder_commit(g_recorder);
+&nbsp;&nbsp;&nbsp;if (error_code != RECORDER_ERROR_NONE) {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;error code = %d&quot;, error_code);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
+&nbsp;&nbsp;&nbsp;}
+}</pre></li>
+
+<li><p>After you have finished recording, release all resources associated with the audio recorder:</p>
+
+       <ol>
+
+       <li>Unregister the recording limit callback function using the <span style="font-family: Courier New,Courier,monospace">recorder_unset_recording_limit_reached_cb()</span> function.
+<pre class="prettyprint">error_code = recorder_unset_recording_limit_reached_cb(g_recorder);</pre></li>
+
+       <li>If the audio recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>, reset the media content and recorder state using the <span style="font-family: Courier New,Courier,monospace">recorder_unprepare()</span> function. The function sets the recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>.
+<pre class="prettyprint">error_code = recorder_unprepare(g_recorder);</pre></li>
+       
+       <li>Unregister the state change callback function using the <span style="font-family: Courier New,Courier,monospace">recorder_unset_state_changed_cb()</span> function.
+<pre class="prettyprint">error_code = recorder_unset_state_changed_cb(g_recorder);</pre></li>
+       
+       <li>Destroy the recorder handle using the <span style="font-family: Courier New,Courier,monospace">recorder_destroy()</span> function.
+<pre class="prettyprint">error_code = recorder_destroy(g_recorder);</pre></li></ol></li>
+       
+       </ol>
+       </div>
+               </li>   
+       <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_video" name="init_video" class="items-tit-h2">Initializing the Video Recorder</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the video recorder:</p>
+<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a> APIs, include the <span style="font-family: Courier New,Courier,monospace;">&lt;camera.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;recorder.h&gt;</span> header files in your application:
+<pre class="prettyprint">
+#include &lt;camera.h&gt;
+#include &lt;recorder.h&gt;
+</pre></li>
+
+<li>To provide recording functionalities, the camera is configured while the camera handle is created. Then the recorder is configured. The following sections describe how to configure a camera and recorder.
+
+<pre class="prettyprint">
+#include &lt;unistd.h&gt;
+#include &lt;cstdio&gt;
+struct recdata
+{
+&nbsp;&nbsp;&nbsp;bool shutdown;
+&nbsp;&nbsp;&nbsp;recorder_h recorder;
+&nbsp;&nbsp;&nbsp;camera_h camera;
+};
+static const int RECORD_TIME=2;
+static const int RECORD_LIMIT=4;
+#define FILENAME_PREFIX &quot;VIDEO&quot;
+static int g_bitrate = 288000;
+static int duration;
+static int playing=0;
+static int ret;</pre></li></ol>
+
+
+<h3 id="camera_config">Configuring the Camera</h3>
+
+<p>To configure the camera:</p>
+<ol><li><p>Define a structure containing the handles to the media recorder and camera and a boolean variable specifying whether the recorder is switched off. You can declare variables to keep the record time, video file paths, bit rate, record limit, flag, and return value.</p>
+<pre class="prettyprint">
+static recdata rec_data;
+</pre></li>
+
+<li><p>To use the camera, create the camera handle using the <span style="font-family: Courier New,Courier,monospace">camera_create()</span> function. The function&#39;s arguments are the camera handle and the hardware camera to access. If it succeeds, the camera state is changed to <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>. Get the camera state using the <span style="font-family: Courier New,Courier,monospace">camera_get_state()</span> function:</p>
+<pre class="prettyprint">
+int error_code = 0;
+
+rec_data.shutdown = FALSE;
+rec_data.camera = NULL;
+rec_data.recorder = NULL;
+
+// Create 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);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;error code = %d&quot;, error_code);
+}
+</pre></li>
+
+<li><p>Set a display for the preview to see what you are recording. To set a display for the preview, call the <a href="camera_tutorial_n.htm"><span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function with a valid camera handle</a>.</p>
+</li></ol>
+
+<h3>Registering Callback Functions</h3>
+
+<p>To register callback functions, which are useful in informing you when something has happened or changed in your application:</p>
+
+<ol><li><p>To monitor when the recording limit is reached, register a callback function using the <span style="font-family: Courier New,Courier,monospace;">recorder_set_recording_limit_reached_cb()</span> function:</p>
+
+<pre class="prettyprint">ret = recorder_set_recording_limit_reached_cb(rec_data.recorder, _recorder_recording_limit_reached_cb, 0);
+</pre></li>
+
+<li><p>Define the callback function that prints a notification about reaching the recording limit:</p>
+
+<pre class="prettyprint">static void _recorder_recording_limit_reached_cb (recorder_recording_limit_type_e type, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, &quot;Video Recorder&quot;, &quot;Recording limit reached: %d\n&quot;, type);
+}
+</pre></li>
+
+<li><p>To check whether the callback function works properly, use the <span style="font-family: Courier New,Courier,monospace;">sleep()</span> function to reach the recording limit:</p>
+
+<pre class="prettyprint">ret = recorder_start(rec_data.recorder);
+
+sleep(RECORD_LIMIT+1); // Waits more than record limit
+ret = recorder_pause(rec_data.recorder);
+</pre></li>
+
+<li><p>To unregister the callback function, use the <span style="font-family: Courier New,Courier,monospace;">recorder_unset_recording_limit_reached_cb()</span> function:</p>
+
+<pre class="prettyprint">ret = recorder_unset_recording_limit_reached_cb(rec_data.recorder);
+</pre></li></ol>
+
+<h3 id="recorder_config">Configuring the Recorder</h3>
+
+<p>To configure the recorder:</p>
+<ol><li><p>When the camera state is <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>, create the recorder handle using the <span style="font-family: Courier New,Courier,monospace">recorder_create_videorecorder()</span> function with a valid camera handle and record handle. If the function succeeds, the recorder state becomes <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>. The recorder can also be created when camera is in other states. Get the recorder state using the <span style="font-family: Courier New,Courier,monospace">recorder_get_state()</span> function.</p>
+<pre class="prettyprint">
+// Create the 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);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;error code = %d&quot;, error_code);
+}
+</pre></li>
+<li><p>To subscribe to notifications about recorder state changes, invoke the <span style="font-family: Courier New,Courier,monospace">recorder_set_state_changed_cb()</span> function to register the callback function. The parameters are: the valid recorder handle, the callback function, and data passed to the callback.</p>
+<pre class="prettyprint">
+// Set the recorder state changed callback
+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_INFO, LOG_TAG , &quot;error code = %d&quot;, error_code);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;error code = %d&quot;, error_code);
+}
+</pre></li>
+<li><p>The callback function receives the following parameters:</p>
+<ul class="ul">
+       <li>Previous state of the recorder</li>
+       <li>Current state of the recorder</li>
+       <li><span style="font-family: Courier New,Courier,monospace">by_policy</span> flag (true if the state is changed by policy)</li>
+       <li><span style="font-family: Courier New,Courier,monospace">user_data</span> passed from the callback registration function</li>
+</ul>
+
+<pre class="prettyprint">
+// Recorder state changed callback - check state changes of the 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);
+}
+</pre></li>
+
+<li><p>The Recorder API supports the following attributes:</p>
+<ul class="ul">
+       <li>Audio codec for encoding audio stream</li>
+       <li>Video codec for encoding video stream</li>
+       <li>File format</li>
+       <li>File path to record</li>
+       <li>Time limit of the recording file</li>
+       <li>Maximum size of the recording file</li>
+       <li>Audio device for recording</li>
+       <li>Sampling rate of the audio stream</li>
+       <li>Bitrate of the audio and video encoder</li>
+       <li>Mute state of the recorder</li>
+       <li>Slow motion rate</li>
+       <li>Number of audio channels</li>
+</ul>
+
+<p>To set the video codec for encoding a video stream, invoke the <span style="font-family: Courier New,Courier,monospace">recorder_set_video_encoder()</span> function. Choose one of the codecs from the <span style="font-family: Courier New,Courier,monospace">recorder_video_codec_e</span> enumeration. The following tables show the available codecs and formats.</p>
+
+<table> 
+   <caption>
+     Table: Available video codecs
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Value</th>
+        <th>Description</th>
+    </tr> 
+    <tr> 
+     <td>RECORDER_VIDEO_CODEC_H263</td>
+        <td>H263 codec</td>
+    </tr> 
+       <tr>
+        <td>RECORDER_VIDEO_CODEC_H264</td>
+        <td>H264 codec</td>
+       </tr>
+       <tr>
+        <td>RECORDER_VIDEO_CODEC_MPEG4</td>
+        <td>MPEG4 codec</td>
+       </tr>
+       <tr>
+        <td>RECORDER_VIDEO_CODEC_THEORA</td>
+        <td>Theora codec</td>
+       </tr>
+   </tbody> 
+  </table> 
+
+<table> 
+   <caption>
+     Table: Available formats
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Value</th>
+        <th>Description</th>
+    </tr> 
+    <tr> 
+     <td>RECORDER_FILE_FORMAT_3GP</td>
+        <td>3GP</td>
+    </tr> 
+       <tr>
+        <td>RECORDER_FILE_FORMAT_MP4</td>
+        <td>MP4</td>
+       </tr>
+       <tr>
+        <td>RECORDER_FILE_FORMAT_AMR</td>
+        <td>AMR</td>
+       </tr>
+       <tr>
+        <td>RECORDER_FILE_FORMAT_ADTS</td>
+        <td>ADTS</td>
+       </tr>
+       <tr>
+        <td>RECORDER_FILE_FORMAT_WAV</td>
+        <td>WAV</td>
+       </tr>
+   </tbody> 
+   </table> 
+
+<p>Before setting the video codec, check the video codecs that your device supports. To check the codecs, use the <span style="font-family: Courier New,Courier,monospace">recorder_foreach_supported_video_encoder()</span> function. One of its parameters is a callback, which is called for each supported codec of the given recorder. If you set the return type as <span style="font-family: Courier New,Courier,monospace">false</span> in the <span style="font-family: Courier New,Courier,monospace">_video_encoder_cb</span> callback, you can search for a supporting codec. However, if you set the return type as <span style="font-family: Courier New,Courier,monospace">true</span>, you can get codecs which are supported in the target or Emulator. In the following example, the codec of the recorder is set to the first found supported resolution.</p>
+   
+<pre class="prettyprint">
+recorder_video_codec_e supported_codec;
+static bool _video_encoder_cb(recorder_video_codec_e codec, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;recorder_video_codec_e * supported_codec = (recorder_video_codec_e*)user_data;
+&nbsp;&nbsp;&nbsp;*supported_codec = codec;
+
+&nbsp;&nbsp;&nbsp;return false;
+}
+
+error_code = recorder_foreach_supported_video_encoder(rec_data.recorder, _video_encoder_cb, &amp;supported_codec);
+
+// Set the video encoder of the recorder
+error_code = recorder_set_video_encoder(rec_data.recorder, supported_codec);
+</pre>
+</li>
+
+<li>
+<p>Set the bitrate of the video encoder using the <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_video_encoder_bitrate()</span> function. Set the file format for recording media stream by invoking the <span style="font-family: Courier New,Courier,monospace">recorder_set_file_format()</span> function. Before setting the file format, check the file formats your device supports using the <span style="font-family: Courier New,Courier,monospace">recorder_foreach_supported_file_format()</span> function. Furthermore, set the file path to store the recorded data by invoking the <span style="font-family: Courier New,Courier,monospace">recorder_set_filename()</span> function.</p>
+<pre class="prettyprint">
+static int g_bitrate = 288000;
+struct tm localtime = { 0 };
+time_t rawtime = time(NULL);
+char filename[256] = { &#39;\0&#39; };
+size_t size;
+
+// Set the bitrate of the video encoder
+error_code = recorder_attr_set_video_encoder_bitrate(rec_data.recorder, g_bitrate);
+
+// Set the recording file format
+error_code = recorder_set_file_format(rec_data.recorder, RECORDER_FILE_FORMAT_MP4);
+
+// Make the file name
+if (localtime_r(&amp;rawtime, &amp;localtime) != NULL)
+{
+&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;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;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;localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+// Set the file path to store the recorded data
+error_code = recorder_set_filename(rec_data.recorder, filename);
+</pre></li>
+<li><p><a class="opensection" href="#init_audio">Set the audio encoder, bitrate of the audio encoder, and sampling rate of audio</a> using the <span style="font-family: Courier New,Courier,monospace">recorder_set_audio_encoder()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_encoder_bitrate()</span>, and <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_samplerate()</span> functions, as with the video encoder.</p>
+       </li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="record_video" name="record_video" class="items-tit-h2">Recording a Video</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To record a video:</p>
+
+<ol>
+       <li>Configure the <a href="#camera_config">camera</a> and the <a href="#recorder_config">recorder</a>.</li>
+       <li>Prepare the recorder.
+       <p>Call the <span style="font-family: Courier New,Courier,monospace">recorder_prepare()</span> function with a valid recorder handle to change the recorder state to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>, one of the states in which you are able to start recording by calling the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function.</p>
+       <pre class="prettyprint">
+// Prepare the recorder, resulting in setting the recorder state to RECORDER_STATE_READY
+error_code = recorder_prepare(rec_data.recorder);
+</pre></li>
+
+       <li>Start recording.
+       <p>Start recording by calling the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function with a valid recorder handle.</p>
+<pre class="prettyprint">
+// Start the recorder 
+error_code = recorder_start(rec_data.recorder);
+</pre>
+       <p>After successfully starting the recorder, the file is removed automatically and replaced with a new one if you set the file path to an existing file. Note that the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function is valid in the ready state (<span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>) or the paused state (<span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>).</p></li>
+
+       <li>Commit recording.
+       <p>To stop recording and save the results, invoke the <span style="font-family: Courier New,Courier,monospace">recorder_commit()</span> function with a valid recorder handle. The results of the recording are saved to the previously configured file path. This function can be called if the recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span> or <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>.</p>
+<pre class="prettyprint">
+// Stop recording and save the recorded data to the previously configured path
+error_code = recorder_commit(rec_data.recorder);
+</pre>
+       <p>After this, the recorder state is changed to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>.</p></li>
+
+       <li>Cancel recording.
+       <p>If you do not want to save your recording, invoke the <span style="font-family: Courier New,Courier,monospace">recorder_cancel()</span> function with a proper recorder handle. The only difference between this and the <span style="font-family: Courier New,Courier,monospace">recorder_commit()</span> function is that the recording data is not written in the recording file.</p>
+<pre class="prettyprint">
+// Stop recording without saving recorded data
+error_code = recorder_cancel(rec_data.recorder);
+</pre></li>
+
+       <li>Pausing recording.
+       <p>To pause recording, use the <span style="font-family: Courier New,Courier,monospace">recorder_pause()</span> function with the valid recorder handle. To restart recording later, use the <span style="font-family: Courier New,Courier,monospace">recorder_start()</span> function. This function can be called if the recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_RECORDING</span>.</p>
+       <pre class="prettyprint">
+// Pause recording
+error_code = recorder_pause(rec_data.recorder);
+</pre>
+       <p>After this the recorder state is changed to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_PAUSED</span>.</p></li>
+
+       <li>Clean up after working with camera is finished.
+       <p>When you have finished recording, invoke the <span style="font-family: Courier New,Courier,monospace">recorder_unprepare()</span> function to reset the media recorder. The required state for this function is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_READY</span>. After calling the function, the recorder state is <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_CREATED</span>, which allows you to free all the recorder resources with the <span style="font-family: Courier New,Courier,monospace">recorder_destroy()</span> function.</p>
+<pre class="prettyprint">
+// Unprepare the recorder
+error_code = recorder_unprepare(rec_data-&gt;recorder);
+
+// Destroy the recorder
+error_code = recorder_destroy(rec_data.recorder);
+</pre>
+<p>After this the recorder state is changed to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_NONE</span>.</p>
+</li>
+</ol>
+       </div>
+               </li>                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
new file mode 100644 (file)
index 0000000..a220380
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
@@ -0,0 +1,484 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Sound Manager: Managing Sound Parameters</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#set">Setting the Sound Session Type</a></li>
+                       <li><a class="opensection" href="#manage">Managing Volume Control</a></li>
+                       <li><a class="opensection" href="#query">Querying Sound Devices</a></li>
+                       <li><a class="opensection" href="#session">Managing Sound Manager Session Parameters</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/sound_manager_n.htm">Sound Manager Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sound Manager: Managing Sound Parameters</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you manage sounds.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Sound Manager API basics by learning about:</p>  
+<ul>  
+<li><a class="opensection" href="#set">Setting the Sound Session Type</a>
+<p>Set a sound session type for your application.</p></li>
+
+<li><a class="opensection" href="#manage">Managing Volume Control</a>
+<p>Control the volume of your application.</p></li>
+
+<li><a class="opensection" href="#query">Querying Sound Devices</a>
+<p>Query sound device information.</p></li></ul>
+
+
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of the Sound Manager API, we can now move on to more advanced tasks, including:</p>
+<ul>  
+<li><a class="opensection" href="#session">Managing Sound Manager Session Parameters</a>
+<p>Obtain and set basic sound session parameters, such as volume and sound type of the actual sound sessions.</p></li></ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set" name="set" class="items-tit-h2">Setting the Sound Session Type</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set your application sound session type and monitor session changes:</p>
+
+
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;sound_manager.h&gt;
+</pre></li>
+
+<li>Set the sound session type.
+<p>Set the application sound session type using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_type()</span> function. The function sets the type of your sound session across the system.</p>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">sound_session_type_e</a> enumeration defines the available sound session types.</p>
+<pre class="prettyprint">int error_code;
+ 
+error_code = sound_manager_set_session_type(SOUND_SESSION_TYPE_MEDIA);
+</pre></li>
+
+<li>Subscribe to the session change notifications.
+<p>To be informed when a sound session change has occurred, define the <span style="font-family: Courier New,Courier,monospace">sound_session_interrupted_cb()</span> callback function:</p>
+<pre class="prettyprint">static void sound_session_interrupted_cb(sound_session_interrupted_code_e code, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (code == SOUND_SESSION_INTERRUPTED_BY_MEDIA)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Session has been interrupted by media application, handle accordingly
+&nbsp;&nbsp;&nbsp;if (code == SOUND_SESSION_INTERRUPTED_COMPLETED)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Interruption completed, handle accordingly
+}
+</pre></li>
+
+<li><p>To register the callback function, call <span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_interrupted_cb()</span> with a callback and the data which passes the user data:</p>
+<pre class="prettyprint">error_code = sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
+</pre></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Volume Control</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To control your application volume:</p>
+
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;sound_manager.h&gt;
+</pre></li>
+
+<li>Subscribe to the volume change notifications.
+<p>Define the <span style="font-family: Courier New,Courier,monospace">sound_manager_volume_changed_cb()</span> callback function, which is called every time the sound volume changes. Register the callback function using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume_changed_cb()</span> function. When the volume changes and the callback function is invoked, use the callback to see which sound type has changed and what the new volume level is.</p>
+
+<pre class="prettyprint">#define MBUF 128
+ 
+int error_code;
+ 
+static void _sound_manager_volume_changed_cb(sound_type_e type, unsigned int volume, void* user_data)  
+{
+&nbsp;&nbsp;&nbsp;char buf[MBUF] = {0, };
+ 
+&nbsp;&nbsp;&nbsp;snprintf(buf, MBUF, &quot;(%d) type volume changed to (%d)&quot;, type, volume);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;Sound Manager&quot;, &quot;Volume Changed : %s&quot;, buf);
+}
+
+error_code = sound_manager_set_volume_changed_cb(_sound_manager_volume_changed_cb, NULL);
+</pre></li>
+
+<li>Get the maximum and current volume.
+<p>To get the current volume, call the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_volume()</span> function with the sound type and the <span style="font-family: Courier New,Courier,monospace">int</span> value where the function places the current volume. You can call this function for every sound media type. To get the maximum volume, call the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_max_volume()</span> function with similar parameters.</p>
+<pre class="prettyprint">
+int ret;
+sound_session_type_e type = SOUND_SESSION_TYPE_MEDIA;
+
+int max_vol = 0;
+
+ret = sound_manager_get_max_volume(type, &amp;max_vol);
+
+int cur_vol = 0;
+
+ret = sound_manager_get_volume(type, &amp;cur_vol);
+</pre></li>
+
+<li>Set a new volume.
+<p>To set a new volume level, call the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume()</span> function. In the following example code, the first parameter is the sound type and the second parameter is a value received from the slider in the application UI, with which the user sets the volume value.</p>
+<pre class="prettyprint">
+int ret;
+sound_session_type_e type = SOUND_SESSION_TYPE_MEDIA;
+int value;
+
+// Make sure the value is within the system max volume by using the sound_manager_get_max_volume() function 
+
+ret = sound_manager_set_volume(type, value);
+</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="query" name="query" class="items-tit-h2">Querying Sound Devices</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To query for information:</p>
+<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;sound_manager.h&gt;
+</pre></li>
+<li>To query the information of the connected sound devices:
+<ul class="ul"><li>To access sound devices and their information:
+<ol>
+
+<li>Set the mask.
+<p>Define a combination of masks to narrow down the sound devices whose information you need.</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;
+</pre></li>
+<li>Get a sound device list handle and device handle.
+<p>To query the desired sound device information, you need a connected sound device list, and the sound device handle. Use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_device_list()</span> function to get the list handle of the currently connected sound devices. Use this handle as an input parameter for the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_next_device()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_get_prev_device()</span> functions to get each sound device handle.</p>
+<pre class="prettyprint">
+sound_device_list_h list;
+sound_device_h device;
+sound_device_type_e type;
+sound_device_io_direction_e direction;
+
+ret = sound_manager_get_current_device_list(mask, &amp;list);
+</pre></li>
+<li>Get sound device information.
+<p>With the sound device handle, you can query the sound device information (there is a dedicated function for each type of information: device type, IO direction, ID, name, and state). With the query functions, use the sound device handle as the first parameter (input), and the device information type enumerator as the second parameter (output).</p>
+<p>The following example shows the sequential progress of getting information of sound device type and IO direction.</p>
+<pre class="prettyprint">
+while ((_ret = sound_manager_get_next/prev_device(list, &amp;device)) != SOUND_MANAGER_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
+ 
+&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sound device type is Bluetooth, handle accordingly
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (type == SOUND_DEVICE_AUDIO_JACK) 
+&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;if (direction == BOTH)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The sound device has both headphone and mic, handle accordingly
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle accordingly
+&nbsp;&nbsp;&nbsp;}
+}
+if (_ret == SOUND_MANAGER_ERROR_NO_DATA) 
+{
+&nbsp;&nbsp;&nbsp;// End of the available devices, handle accordingly
+}
+</pre></li></ol></li>
+<li>To monitor the device connection changes:
+<ol><li>To receive a notification whenever the sound device connection state changes, define the <span style="font-family: Courier New,Courier,monospace">sound_device_connected_cb</span> callback function.
+<pre class="prettyprint">
+static void _sound_device_connected_cb(sound_device_h device, bool is_connected, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;sound_device_type_e type;
+
+&nbsp;&nbsp;&nbsp;if (is_connected) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sound device type is Bluetooth, 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;// Handle accordingly
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sound device type is Bluetooth, 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;// Handle accordingly
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>To register the callback function, call the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> with the defined callback and data which passes the user data. Use the mask to narrow down the callback information.
+<pre class="prettyprint">
+mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK | SOUND_DEVICE_IO_DIRECTION_BOTH_MASK;
+
+ret = sound_manager_set_device_connected_cb(mask, _sound_device_connected_cb, NULL);
+</pre>
+
+<p>Remember that the initial state of the connected sound device is deactivated.</p></li></ol></li>
+
+<li>To monitor the device information changes:
+<ol><li>To receive a notification whenever the sound device information changes, define the <span style="font-family: Courier New,Courier,monospace">sound_device_information_changed_cb</span> callback function.
+<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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;sound_device_type_e type;
+&nbsp;&nbsp;&nbsp;sound_device_state_e state;
+&nbsp;&nbsp;&nbsp;sound_device_io_direction_e direction;
+
+&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
+&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH) 
+&nbsp;&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;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_state(device, &amp;state);
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bluetooth device has been deactivated, handle accordingly
+&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;// Handle accordingly
+&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;ret = sound_manager_get_device_io_direction(device, &amp;direction);
+&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;// IO direction of the Bluetooth device is now out, handle accordingly
+&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;// Handle accordingly
+&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;// Handle accordingly
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>To register the callback function, call the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> with the defined callback and data which passes the user data. Use the mask to narrow down the callback information.
+<pre class="prettyprint">
+mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK | SOUND_DEVICE_IO_DIRECTION_BOTH_MASK;
+
+ret = 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;&nbsp;&nbsp;_sound_device_information_changed_cb, NULL);
+</pre>
+</li></ol></li>
+</ul> </li></ol>
+       </div>
+               </li>   
+               <li>
+            <div class="devicespec-tit">
+                <h2 id="session" name="session" class="items-tit-h2">Managing Sound Manager Session Parameters</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>To obtain and modify basic sound session parameters:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;sound_manager.h&gt;
+</pre>
+</li>
+<li>Store the parameter data.
+<p>The session parameters are stored in the following enumeration structures:</p>
+
+<ul class="ul"><li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">sound_session_type_e</a></li>
+<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">sound_session_option_for_during_play_e</a></li>
+<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">sound_session_option_for_starting_e</a></li>
+<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">sound_session_option_for_resumption_e</a></li></ul>
+
+
+</li>
+
+<li>Detect interruptions.
+<ol><li>
+<p>To detect and track session status changes, register a callback function:</p>
+
+<pre class="prettyprint">
+sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
+</pre></li>
+
+<li><p>Define the callback function content. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga9d7c723a05f1eab1b1d535bfad527b93">sound_session_interrupted_code_e</a> enumeration defines the available interruption sources.</p>
+
+<pre class="prettyprint">
+void _sound_session_interrupted_cb(sound_session_interrupted_code_e code, void * userdata)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Interrupt code: %d\n&quot;, code);
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
+&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;&quot;SOUND_SESSION_INTERRUPTED_BY_MEDIA %d | &quot;\
+&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;&quot;SOUND_SESSION_INTERRUPTED_BY_EARJACK_UNPLUG %d | &quot;\
+&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;&quot;SOUND_SESSION_INTERRUPTED_BY_ALARM %d | &quot;\
+&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;&quot;SOUND_SESSION_INTERRUPTED_BY_NOTIFICATION %d\n\n&quot;,
+
+&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;SOUND_SESSION_INTERRUPTED_BY_MEDIA,
+&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;SOUND_SESSION_INTERRUPTED_BY_EARJACK_UNPLUG,
+&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;SOUND_SESSION_INTERRUPTED_BY_ALARM,
+&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;SOUND_SESSION_INTERRUPTED_BY_NOTIFICATION);
+}
+</pre>
+</li></ol></li>
+
+<li>Manage the session type.
+<p>To get a valid sound session, the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a> API is used in this tutorial. For more information, see the <a href="tone_player_tutorial_n.htm">Tone Player Tutorial</a>.</p>
+<p>To determine and change the session type, use the following functions:</p>
+
+<pre class="prettyprint">
+#include &lt;tone_player.h&gt;
+int id;
+sound_session_type_e type;
+
+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;&quot;SOUND_SESSION_TYPE_MEDIA %d | &quot;\
+&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_ALARM %d | &quot;\
+&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_NOTIFICATION %d | &quot;\
+&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_EMERGENCY %d \n&quot;,
+&nbsp;&nbsp;&nbsp;type,
+&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_MEDIA,
+&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_ALARM,
+&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_NOTIFICATION,
+&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_EMERGENCY);
+
+sound_manager_set_session_type(SOUND_SESSION_TYPE_NOTIFICATION);
+</pre>
+</li>
+
+<li>Manage the session options.
+<p>To determine the sound session behavior after an interruption or start, or during the playback, use the following functions:</p>
+
+<pre class="prettyprint">
+sound_session_option_for_starting_e start;
+sound_session_option_for_during_play_e play;
+sound_session_option_for_resumption_e res;
+
+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_manager_set_media_session_resumption_option(SOUND_SESSION_OPTION_RESUMPTION_BY_SYSTEM_OR_MEDIA_PAUSED);
+</pre>
+</li>
+
+<li>Clean up.
+<p>When the interrupt callback is no longer needed, deregister it:</p>
+
+<pre class="prettyprint">
+sound_manager_unset_session_interrupted_cb();
+</pre>
+</li>
+</ol>
+ 
+            </div>
+        </li>          
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm
new file mode 100644 (file)
index 0000000..f6e8134
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm
@@ -0,0 +1,149 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Tone Player: Playing Tones</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Tone Player</a></li>
+                       <li><a class="opensection" href="#play">Playing a Tone</a></li>
+                       <li><a class="opensection" href="#duration">Playing a Tone for a Specified Duration</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/tone_player_n.htm">Tone Player Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tone Player: Playing Tones</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how to play audio tones.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Tone Player API basics by learning about:</p>
+
+<ul>
+       <li><a class="opensection" href="#init">Initializing the Tone Player</a>
+       <p>Initialize the tone player for use.</p></li>
+       <li><a class="opensection" href="#play">Playing a Tone</a>
+       <p>Start playing a tone and stop playing it.</p></li>
+       <li><a class="opensection" href="#duration">Playing a Tone for a Specified Duration</a>
+       <p>Play a tone for a specified duration.</p></li>
+</ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Tone Player</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+
+<p>Initialize the tone player:</p>
+<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;tone_player.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;sound_manager.h&gt;</span> header files in your application:
+<pre class="prettyprint">
+#include &lt;tone_player.h&gt;
+#include &lt;sound_manager.h&gt;
+</pre></li>
+<li>To start using the tone player, declare a variable which identifies the tone player:
+<pre class="prettyprint">int tone_player_id;</pre></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="play" name="play" class="items-tit-h2">Playing a Tone</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+
+<p>To start and stop playing a tone:</p>
+
+<ol>
+<li>To start playback, use the <span style="font-family: Courier New,Courier,monospace">tone_player_start()</span> function. The player ID is assigned if the function succeeds. The function takes the following parameters:
+       <ul class="ul">
+               <li>Tone type, selected from the <span style="font-family: Courier New,Courier,monospace">tone_type_e</span> enum, defines which tone type to use (such as DTMF0 or DTMF1).</li>
+               <li>Media sound type, from the <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> enum, defines which sound type is used (such as <span style="font-family: Courier New,Courier,monospace">NOTIFICATION</span>, <span style="font-family: Courier New,Courier,monospace">ALARM</span>, or <span style="font-family: Courier New,Courier,monospace">RINGTONE</span>).</li>
+               <li>Tone duration in milliseconds. If the duration is set to -1, the playback continues infinitely.</li>
+               <li>Player ID is an output parameter, and its value is set by the function. The ID of the tone player that started first is 0, the ID of the second is 1, and so on. If you determine the value to be <span style="font-family: Courier New,Courier,monospace">NULL</span>, the ID is not returned.</li>
+       </ul>
+
+<pre class="prettyprint">tone_player_start(TONE_TYPE_DEFAULT, SOUND_TYPE_MEDIA, -1, &amp;tone_player_id);</pre>
+</li>
+
+<li>To stop the playback, use the <span style="font-family: Courier New,Courier,monospace">tone_player_stop()</span> function with the ID of the player which you want to stop:
+<pre class="prettyprint">tone_player_stop(tone_player_id);</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="duration" name="duration" class="items-tit-h2">Playing a Tone for a Specified Duration</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To start playing a tone, use the <span style="font-family: Courier New,Courier,monospace">tone_player_start()</span> function with the tone type, sound type, and duration time as parameters. In this example, a congestion tone is played as a call sound for 1 second (1000 milliseconds):</p>
+<pre class="prettyprint">tone_player_start(TONE_TYPE_SUP_CONGESTION, SOUND_TYPE_CALL, 1000, &amp;tone_player_id);</pre>
+<p>When the duration is set to a specified time, playing is stopped automatically. You can also use the <span style="font-family: Courier New,Courier,monospace">tone_player_stop()</span> function to stop the playback manually.</p>
+       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e4e3642
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm
@@ -0,0 +1,374 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Util: Transcoding Media Files</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Video Utilities</a></li>
+                       <li><a class="opensection" href="#manage">Managing Transcoding</a></li>
+                       <li><a class="opensection" href="#set">Setting Parameters</a></li>
+                       <li><a class="opensection" href="#get">Monitoring the Transcoding Progress</a></li>
+               </ul>    
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/video_util_n.htm">Video Util Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Video Util: Transcoding Media Files</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can transcode and trim video files.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Video Util API basics by learning about:</p>
+
+  <ul>
+       <li><a class="opensection" href="#init">Initializing Video Utilities</a>
+       <p>Initialize the video utilities for use.</p></li>
+       <li><a class="opensection" href="#manage">Managing Transcoding</a>
+       <p>Start, cancel, and finish the transcoding process and monitor its progress.</p></li>
+   </ul>
+ <h2>Follow-up</h2> 
+ <p>Once we have learned the basics of the Video Util API, we can now move on to more advanced tasks, including:</p>
+ <ul>
+       <li><a class="opensection" href="#set">Setting Parameters</a>
+       <p>Set basic parameters for the video utility.</p></li>
+       <li><a class="opensection" href="#get">Monitoring the Transcoding Progress</a>
+       <p>Get progress information about the transcoding process.</p></li>
+  </ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Video Utilities</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Before using the video util:</p>
+  
+  <ol>
+  <li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;video_util.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;video_util.h&gt;
+</pre></li>
+<li>Declare a variable, which identifies the video util handle used for transcoding:
+  
+<pre class="prettyprint">video_util_h *handle;</pre></li>
+
+<li><p>Create the handle:</p>
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+</pre></li>
+
+<li><p>If the handle is created normally, set the input files with the <span style="font-family: Courier New,Courier,monospace">video_util_set_file_path()</span> function:</p>
+
+<pre class="prettyprint">int video_util_set_file_path(video_util_h handle, const char *path);
+</pre> </li>
+
+<li><p>Set the file format with the <span style="font-family: Courier New,Courier,monospace">video_util_set_file_format()</span> function. 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>
+
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+ret = video_util_set_file_format(video_h, VIDEO_UTIL_FILE_FORMAT_3GP);
+</pre></li>
+
+<li><p>Set the video codec with the <span style="font-family: Courier New,Courier,monospace">video_util_set_video_codec()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#gabadbb5a64155f42fe180bedac40f289e">video_util_video_codec_e</a> enumeration defines the available video codecs.</p>
+
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+ret = video_util_set_video_codec(video_h, VIDEO_UTIL_VIDEO_CODEC_MPEG4);
+</pre></li>
+
+<li><p>Set the audio codec with the <span style="font-family: Courier New,Courier,monospace">video_util_set_audio_codec()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#ga48da7f77144a99f5733a90d62805c435">video_util_audio_codec_e</a> enumeration defines the available audio codecs.</p>
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+ret = video_util_set_audio_codec(video_h, VIDEO_UTIL_AUDIO_CODEC_AAC);
+</pre></li>
+
+<li><p>Set the seek mode with the <span style="font-family: Courier New,Courier,monospace">video_util_set_accurate_mode()</span> function.</p>
+
+<p>If the accurate mode is enabled, the user can get an accurate frame for the given duration in the <span style="font-family: Courier New,Courier,monospace">video_util_start_transcoding()</span> function.</p>
+
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+
+ret = video_util_set_accurate_mode(video_h, 0);
+</pre></li>
+
+<li><p>Set the resolution with the <span style="font-family: Courier New,Courier,monospace">video_util_set_resolution()</span> function:</p>
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+
+ret = video_util_set_resolution(video_h, 176, 144);
+</pre>
+<p>If transcoding is done with the original input (&#39;trim&#39;), both the width and height are 0.</p></li>
+
+<li><p>Set the FPS with the <span style="font-family: Courier New,Courier,monospace">video_util_set_fps()</span> function:</p>
+
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+
+ret = video_util_set_fps(video_h, 10);
+</pre></li>
+<li><p>When the handle is no longer needed, free the memory: </p>
+
+<pre class="prettyprint">
+error_code = video_util_destroy(handle);
+</pre></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Transcoding</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage the transcoding process:</p>  
+
+<ol><li><p>If the prerequisites are set normally, start the transcoding with the <span style="font-family: Courier New,Courier,monospace">video_util_start_transcoding()</span> function.</p> 
+<pre class="prettyprint">
+ret = video_util_start_transcoding(video_h);
+</pre></li>
+
+<li><p>While transcoding:</p>
+<ul class="ul"><li>Call the <span style="font-family: Courier New,Courier,monospace">video_util_get_progress_transcoding()</span> function to get the current progress.
+</li>
+
+<li>Call the <span style="font-family: Courier New,Courier,monospace">video_util_cancel_transcoding()</span> function to cancel the transcoding process.
+<p>The function uses a handle created using the <span style="font-family: Courier New,Courier,monospace">video_util_create()</span> function. If you call this function after the complete transcoding callback is <span style="font-family: Courier New,Courier,monospace">TRUE</span>, you cannot cancel the transcoding.</p>
+<pre class="prettyprint">
+video_util_h video_h = NULL;
+ret = video_util_create(&amp;video_h);
+
+ret = video_util_cancel_transcoding(video_h);
+</pre>
+</li></ul></li>
+
+<li><p>When the transcoding returns a complete callback, destroy the handle with the <span style="font-family: Courier New,Courier,monospace">video_util_destroy()</span> function.</p>
+
+<p>This function destroys the handle of a completed transcoding. The function contains the cancel function, if it is called during the transcoding process.</p>
+<p>If you do not call the destroy function after completing the transcoding, new transcoding is not possible, and a memory crash can occur.</p></li></ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set" name="set" class="items-tit-h2">Setting Parameters</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set the basic parameters of the video util:</p>
+
+<ol>
+<li><a href="#init">Initialize the video utilities</a>.</li>
+<li>Check the supported file format.
+<ol><li><p>Check the supported file formats:</p>
+
+<pre class="prettyprint">
+error_code = video_util_foreach_supported_file_format(handle, video_util_file_supported, NULL);
+</pre>
+
+<p>The first parameter refers to the handle of the video util, and the second parameter to the callback function to be invoked.</p></li>
+
+
+
+<li><p>Define the callback function:</p>
+
+<pre class="prettyprint">
+static bool video_util_file_supported(video_util_file_format_e format, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;format %s\n&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format == VIDEO_UTIL_FILE_FORMAT_3GP? &quot;VIDEO_UTIL_FILE_FORMAT_3GP&quot;: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format == VIDEO_UTIL_FILE_FORMAT_MP4? &quot;VIDEO_UTIL_FILE_FORMAT_MP4&quot;: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_FILE_FORMAT_MAX&quot;);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre></li></ol>
+</li>
+
+<li>Check the supported codecs.
+<ol><li><p>Check the supported audio and video codecs:</p>
+
+<pre class="prettyprint">
+video_util_foreach_supported_video_codec(handle, video_util_video_supported, NULL);
+
+video_util_foreach_supported_audio_codec(handle, video_util_audio_supported, NULL);
+</pre>
+
+<p>The first parameter refers to the handle of the video util, and the second parameter to the callback function to be invoked.</p></li>
+
+<li>
+
+<p>Define the callback functions:</p>
+
+<pre class="prettyprint">
+static bool video_util_video_supported(video_util_video_codec_e codec, void *user_data)
+{
+&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;codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4? &quot;VIDEO_UTIL_VIDEO_CODEC_MPEG4&quot;: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec == VIDEO_UTIL_VIDEO_CODEC_H263? &quot;VIDEO_UTIL_VIDEO_CODEC_H263&quot;: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec == VIDEO_UTIL_VIDEO_CODEC_H264? &quot;VIDEO_UTIL_VIDEO_CODEC_H264": 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_VIDEO_CODEC_NONE&quot;);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+
+static bool video_util_audio_supported(video_util_audio_codec_e codec, void *user_data)
+{
+&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;codec==VIDEO_UTIL_AUDIO_CODEC_AAC? &quot;VIDEO_UTIL_AUDIO_CODEC_AAC&quot;: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec==VIDEO_UTIL_AUDIO_CODEC_AMRNB? &quot;VIDEO_UTIL_AUDIO_CODEC_AMRNB&quot;: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_AUDIO_CODEC_NONE&quot;);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre></li></ol>
+
+<p>To check the support for a specified codec, such as <span style="font-family: Courier New,Courier,monospace;">VIDEO_UTIL_VIDEO_CODEC_MPEG4</span>:</p>
+
+<pre class="prettyprint">
+static bool video_util_video_supported(video_util_video_codec_e codec, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data = true;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+
+bool supported = false;
+video_util_foreach_supported_video_codec(handle, video_util_video_supported, &amp;supported);
+dlog_print(DLOG_INFO, LOG_TAG, &quot;MPEG4 codec %s&quot;, supported?&quot;supported&quot;:&quot;not supported&quot;);
+</pre>
+</li>
+
+<li>Set codecs.
+<p>To set the audio and video codecs:</p>
+
+<pre class="prettyprint">
+error_code = video_util_set_audio_codec(handle, VIDEO_UTIL_AUDIO_CODEC_AAC);
+
+error_code = video_util_set_video_codec(handle, VIDEO_UTIL_VIDEO_CODEC_MPEG4);
+</pre>
+</li>
+
+<li>Set the resolution.
+<p>To set the video resolution:</p>
+
+<p>The first parameter refers to the handle of the video util, the second to the media width (if the width is 0, it is set to the original size where the minimum value is 128), and the third to the height of the media (if the height is 0, it is set to its original size, the minimum value being 96).</p>
+
+<pre class="prettyprint">
+int error_code = video_util_set_resolution(handle, 640, 480);
+</pre>
+</li>
+
+<li>Set the FPS.
+<p>To set the frames per second (FPS):</p>
+
+<p>The first parameter refers to the handle of the video util and the second to the frame rate. The frame rate minimum value is 5 and the maximum value is 30.</p>
+
+<pre class="prettyprint">
+int error_code = video_util_set_fps(handle, 25);
+</pre>
+</li>
+</ol>
+       </div>
+               </li>                                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get" name="get" class="items-tit-h2">Monitoring the Transcoding Progress</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the progress of the video util:</p>
+<ol>
+<li><a href="#init">Initialize the video utilities</a>.</li>
+<li>Execute the transcoding first.
+<p>Check whether the transcoding works normally:</p>
+
+<pre class="prettyprint">
+error_code = video_util_start_transcoding(video_util_h handle, unsigned long start, unsigned long duration, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 *out_path, video_util_transcoding_progress_cb 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_util_transcoding_completed_cb completed_cb, void *user_data);
+</pre>
+
+<p>The first parameter refers to the handle of the video util, the second and third parameter to the argument for seek, the fourth parameter to the output path, and the fifth and sixth parameter to the callback function to be invoked and its parameter.</p></li>
+
+<li>To get the transcoding progress, execute the <span style="font-family: Courier New,Courier,monospace;">video_util_get_progress_transcoding()</span> function within the <span style="font-family: Courier New,Courier,monospace;">progress_cb</span> callback of the <span style="font-family: Courier New,Courier,monospace;">video_util_start_transcoding()</span> function:
+
+<pre class="prettyprint">
+video_util_get_progress_transcoding(video_util_h handle, unsigned long *current_position, unsigned long *duration);
+</pre>
+</li>
+
+
+</ol>
+       </div>
+               </li>                                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm
new file mode 100644 (file)
index 0000000..ac0c85a
--- /dev/null
+++ b/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm
@@ -0,0 +1,138 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>WAV Player: Playing Waveform Audio Files</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#start">Starting and Stopping the WAV Player</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/wav_player_n.htm">WAV Player Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>WAV Player: Playing Waveform Audio Files</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how to play Waveform Audio File Format (WAV) files.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the WAV Player API basics by learning about:</p>
+
+<ul>
+       <li><a class="opensection" href="#start">Starting and Stopping the WAV Player</a>
+                        <p>Start and stop playing a WAV file.</p></li>
+</ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">       
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="start" name="start" class="items-tit-h2">Starting and Stopping the WAV Player</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To start and stop the WAV player:</p>
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;wav_player.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;stdio.h&gt;
+#include &lt;wav_player.h&gt;
+#include &lt;sound_manager.h&gt;
+</pre></li>
+<li>Start the WAV player.
+
+<p>Implement a callback function that is called when the WAV file is no longer being played.</p>
+
+<p>Declare a variable which keeps the return value of the function. Invoke the <span style="font-family: Courier New,Courier,monospace">wav_player_start()</span> function to play the WAV file:</p>
+
+
+<pre class="prettyprint">
+static void _playback_completed_cb(int id, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;const char* path = (const char*)user_data;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;WAV Player&quot;, &quot;Completed! [id:%d, path:%s]&quot;, id, path);
+}
+
+void main() 
+{
+&nbsp;&nbsp;&nbsp;int wav_player_id;
+&nbsp;&nbsp;&nbsp;wav_player_error_e ret;
+&nbsp;&nbsp;&nbsp;const char* wav_path = &quot;/tmp/test.wav&quot;;
+
+&nbsp;&nbsp;&nbsp;ret = wav_player_start(wav_path, SOUND_TYPE_MEDIA, _playback_completed_cb, (void*)wav_path, &amp;wav_player_id);
+}
+</pre>
+</li>
+
+<li>Stop the WAV player.
+<p>To stop the WAV player, use the <span style="font-family: Courier New,Courier,monospace">wav_player_stop()</span> function with the ID of a given WAV player as an argument:</p>
+
+<pre class="prettyprint">
+void my_stop()
+{
+&nbsp;&nbsp;&nbsp;wav_player_error_e ret;
+&nbsp;&nbsp;&nbsp;ret = wav_player_stop(wav_player_id);
+}
+</pre>
+</li>
+</ol>
+       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
new file mode 100644 (file)
index 0000000..4702b3b
--- /dev/null
+++ b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
@@ -0,0 +1,1051 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Bluetooth: Managing Bluetooth Devices</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Bluetooth</a></li>
+                       <li><a class="opensection" href="#enable">Enabling and Disabling Bluetooth</a></li>
+                       <li><a class="opensection" href="#state">Initializing Bluetooth and Checking the Adapter State</a></li>
+                       <li><a class="opensection" href="#find">Finding Other Devices</a></li>
+                       <li>Serial Port Profile (SPP)
+                       <ul class="toc">
+                       <li><a class="opensection" href="#connect">Connecting to Other Devices Using SPP</a></li>
+                       <li><a class="opensection" href="#exchange">Exchanging Data Using SPP</a></li>
+                       <li><a class="opensection" href="#disconnect">Disconnecting from the Connected Device Using SPP</a></li>
+                       </ul></li>
+                       <li>Object Push Profile (OPP)
+                       <ul class="toc"><li><a class="opensection" href="#exc">Exchanging Data Using OPP</a></li>
+                       </ul></li>
+                       <li><a class="opensection" href="#release">Releasing All Resources</a></li>
+               </ul>       
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/network/bluetooth_n.htm">Bluetooth Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Bluetooth: Managing Bluetooth Devices</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how you can use Bluetooth connections.</p>
+
+ <h2>Warm-up</h2>
+ <p>Become familiar with the Bluetooth API basics by learning about:</p>
+                       <ul>
+                               <li><a class="opensection" href="#init">Initializing Bluetooth</a>
+                               <p>Initialize Bluetooth for use.</p></li>
+                               <li><a class="opensection" href="#enable">Enabling and Disabling Bluetooth</a>
+                               <p>Enable or disable Bluetooth. </p></li>
+                               <li><a class="opensection" href="#state">Initializing Bluetooth and Checking the Adapter State</a>
+                               <p>Initialize Bluetooth and check the Bluetooth adapter state.</p></li>
+                               <li><a class="opensection" href="#find">Finding Other Devices</a>
+                               <p>Find other devices using Bluetooth.</p></li>
+                               <li>Serial Port Profile (SPP)
+                               <ul>
+                               <li><a class="opensection" href="#connect">Connecting to Other Devices Using SPP</a>
+                               <p>Connect to other devices through SPP.</p></li>
+                               <li><a class="opensection" href="#exchange">Exchanging Data Using SPP</a>
+                               <p>Exchange data between devices through SPP.</p></li>
+                               <li><a class="opensection" href="#disconnect">Disconnecting from the Connected Device Using SPP</a>
+                               <p>Disconnect from the connected devices.</p></li>
+                               </ul></li>
+                               <li>Object Push Profile (OPP)
+                               <ul><li><a class="opensection" href="#exc">Exchanging Data Using OPP</a>
+                               <p>Exchange data between devices through OPP.</p></li>
+                               </ul></li>
+                               <li><a class="opensection" href="#release">Releasing All Resources</a>
+                               <p>Release all resources related to using the Bluetooth connection.</p></li>
+                       </ul>           
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Bluetooth</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To initialize Bluetooth:</p>
+<ol>
+<li>                   
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;bluetooth.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;bluetooth.h&gt;
+</pre></li>                            
+<li>                   
+<p>Initialize Bluetooth:</p>
+<pre class="prettyprint">
+#include &lt;dlog.h&gt;
+
+bt_error_e ret;
+
+ret = bt_initialize();
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_initialize] Failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+}</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="enable" name="enable" class="items-tit-h2">Enabling and Disabling Bluetooth</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To enable or disable Bluetooth:</p>
+                       
+<p>No Bluetooth API is provided to enable or disable Bluetooth. Use the Bluetooth ON/OFF application illustrated in the following figure (off screen on the left and on screen on the right).</p>
+
+    <p class="figure">Figure: Bluetooth ON/OFF application</p> 
+  <p style="text-align:center;"><img alt="Bluetooth ON/OFF application" src="../../images/bluetooth_onoff.png" /></p> 
+
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+#include &lt;dlog.h&gt;
+
+int bt_onoff_operation(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;if (service == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service_create failed!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service,  &quot;http://tizen.org/appcontrol/operation/edit&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(service,  &quot;application/x-bluetooth-on-off&quot;);
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to Bluetooth On/Off app!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to relaunch Bluetooth On/Off app!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="state" name="state" class="items-tit-h2">Initializing Bluetooth and Checking the Adapter State</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To communicate with other devices using Bluetooth, learn to check the Bluetooth adapter state:</p>
+
+<ol><li>Check, whether the Bluetooth adapter is enabled on your device:
+<pre class="prettyprint">bt_adapter_state_e adapter_state;
+ 
+// Check whether the Bluetooth Service is enabled
+ret = bt_adapter_get_state(&amp;adapter_state);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_get_state] Failed&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+// If the Bluetooth Service is not enabled
+if (adapter_state == BT_ADAPTER_DISABLED) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Bluetooth adapter is not enabled. You should enable Bluetooth!!&quot;);
+}</pre>
+<p>Register the Bluetooth state change callback function in order to receive information about Bluetooth state changes.</p></li>
+
+<li>Define and register the Bluetooth adapter state callback function to get notified when the Bluetooth adapter has enabled or disabled:
+<pre class="prettyprint">
+#include &lt;bluetooth.h&gt;
+#include &lt;dlog.h&gt; 
+
+bt_error_e ret;
+
+void adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[adapter_state_changed_cb] Failed! result=%d&quot;, result);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (adapter_state == BT_ADAPTER_ENABLED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Bluetooth is enabled!&quot;);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get information about Bluetooth adapter
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *local_address = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_get_address(&amp;local_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Adapter address: %s.&quot;, local_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (local_address)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(local_address); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *local_name;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_get_name(&amp;local_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Adapter name: %s.&quot;, local_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (local_name)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(local_name); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Visibility mode of the Bluetooth device
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_visibility_mode_e mode;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Duration until the visibility mode is changed so that other devices cannot find your device
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int duration = 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_get_visibility(&amp;mode, &amp;duration);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (mode) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Visibility: NON_DISCOVERABLE&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Visibility: GENERAL_DISCOVERABLE&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_VISIBILITY_MODE_LIMITED_DISCOVERABLE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Visibility: LIMITED_DISCOVERABLE&quot;);
+&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;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Bluetooth is disabled!&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When you try to get device information
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// by invoking bt_adapter_get_name(), bt_adapter_get_address(), or bt_adapter_get_visibility(), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// BT_ERROR_NOT_ENABLED will occur
+&nbsp;&nbsp;&nbsp;}
+}
+ret = bt_adapter_set_state_changed_cb(adapter_state_changed_cb, NULL);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_set_state_changed_cb()] Failed.&quot;);
+}
+</pre></li>
+</ol>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="find" name="find" class="items-tit-h2">Finding Other Devices</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To find remote Bluetooth devices either through device discovery or querying bonded devices:</p>
+
+<h3>Defining and Registering the Discovery State Callback Function</h3>
+<p>Discovering available Bluetooth-enabled devices is the first step to communicating with remote devices. There are 2 types of Bluetooth devices: classic Bluetooth devices and Bluetooth LE devices. Both device types use their own APIs to discover devices of the same type.</p>
+<p>Define a callback with the following function signature to get information about a specific device type:</p>
+<pre class="prettyprint">typedef void(* bt_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;&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 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s *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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
+typedef 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_device_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 *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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
+</pre>
+<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">result</span>, specifies the result of the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_start_device_discover()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_stop_device_discovery()</span> function in classic Bluetooth, or the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_start_discover_device()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_device_discovery()</span> function in Bluetooth LE.</p>
+
+<p>This discovery start functions for the 2 types are declared as follows:</p>
+<pre class="prettyprint">// Classic Bluetooth
+int bt_adapter_start_device_discovery(void);
+int bt_adapter_stop_device_discovery(void);
+
+// Bluetooth LE
+int bt_adapter_le_start_device_discovery(void);
+int bt_adapter_le_stop_device_discovery(void);
+</pre>
+ 
+<p>If discovering Bluetooth succeeds, you will receive the <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_NONE</span> result as the first parameter in your <span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_changed_cb()</span> (classic Bluetooth)  or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_changed_cb()</span> (Bluetooth LE) callback function. If your device did not start to discover devices due to an error, then the result code will be <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_TIMEOUT</span>.</p>
+<p>If stopping the discovery succeeds, you can also receive <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_CANCELLED</span>.</p>
+
+<p>The values in <span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_e</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_e</span> (Bluetooth LE) are as follows:</p>
+
+<table> 
+   <caption>
+     Table: Discovery states 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Discovery state</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span></td> 
+     <td>When discovery is started</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_DEVICE_DISCOVERY_FINISHED</span></td> 
+     <td>When discovery is finished</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span></td> 
+     <td>When a device is found</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span></td> 
+     <td>When LE discovery is started</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED</span></td> 
+     <td>When LE discovery is finished</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span></td> 
+     <td>When an LE device is found</td> 
+    </tr>      
+   </tbody> 
+  </table>
+       
+       
+       
+<p>When your implemented callback function is first called, the second parameter, <span style="font-family: Courier New,Courier,monospace;">discovery_state</span>, is <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span>. This indicates that device discovery has begun.</p>
+<p>Each time you find a remote Bluetooth device, <span style="font-family: Courier New,Courier,monospace;">discovery_state</span> will be in the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span> state.</p>
+<p>At the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span> state, you can get some information about a discovered device, such as the device MAC address, name, class, rssi (received signal strength indicator), and bonding state. Using this information, you can connect to the discovered device.</p>
+<p><span style="font-family: Courier New,Courier,monospace;">discovery_info</span> is a NULL value in the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span>, <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span>, <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FINISHED</span>, or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED</span> state.</p>
+<p>An example implementation for classic Bluetooth (Bluetooth LE usage is the same):</p>
+<pre class="prettyprint">#include &lt;glib.h&gt; // For GList
+void adapter_device_discovery_state_changed_cb(int result, bt_adapter_device_discovery_state_e discovery_state, bt_adapter_device_discovery_info_s *discovery_info, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[adapter_device_discovery_state_changed_cb] Failed! result(%d).&quot;, result);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;GList** searched_device_list = (GList**)user_data;
+&nbsp;&nbsp;&nbsp;switch (discovery_state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_STARTED:
+&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;break;
+&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_FINISHED:
+&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;break;
+&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_FOUND:
+&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;if (discovery_info != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Device Address: %s&quot;, discovery_info-&gt;remote_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Device Name is: %s&quot;, discovery_info-&gt;remote_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s * new_device_info = malloc(sizeof(bt_adapter_device_discovery_info_s));
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(new_device_info, discovery_info, sizeof(bt_adapter_device_discovery_info_s));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info-&gt;remote_address = strdup(discovery_info-&gt;remote_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info-&gt;remote_name = strdup(discovery_info-&gt;remote_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*searched_device_list = g_list_append(*searched_device_list, (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;break;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>Register the callback for classic Bluetooth (Bluetooth LE usage is the same):</p>
+<pre class="prettyprint">GList *devices_list = NULL;
+ret = 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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_set_device_discovery_state_changed_cb] Failed.&quot;);
+}</pre>
+
+<h3>Finding Other Bluetooth Devices</h3>
+<p>If you want to stop the device discovery, call <span style="font-family: Courier New,Courier,monospace;">bt_adapter_stop_device_discovery()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_device_discovery()</span> (Bluetooth LE).</p>
+<p>A remote Bluetooth device will respond to the request if it is enabled and in a discovery mode. Classic Bluetooth and Bluetooth LE usages are the same.</p>
+<pre class="prettyprint">
+// Classic Bluetooth
+ret = bt_adapter_start_discover_device(type);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_start_discover_device] Failed.&quot;);
+}</pre>
+
+<h3>Enabling Discovery</h3>
+<p>For other devices to find your device, your device must be discoverable.</p>
+<p>To check the current visibility of your device, do the following:</p>
+<pre class="prettyprint">
+// 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);
+if (mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The device is not discoverable.&quot;);
+} 
+else if (mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The device is discoverable. No time limit.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The device is discoverable for a set period of time.&quot;);
+}</pre>
+
+<p>To change the visibility mode, use the Bluetooth visibility setting application (shown below with the initial screen on the left and the visibility setting screen on the right).</p>
+
+<p style="text-align:center;"><img alt="Bluetooth visibility setting application" src="../../images/bluetooth_visibility.png" /></p>
+
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+#include &lt;dlog.h&gt;
+
+int bt_set_visibility_operation(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;if (service == NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service_create failed!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service,  &quot;http://tizen.org/appcontrol/operation/edit&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(service,  &quot;application/x-bluetooth-visibility&quot;);
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to Bluetooth On/Off app!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to relaunch Bluetooth On/Off app!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+
+<p>If you want to get a notification when the visibility is changed after 90 seconds, you must implement the following callback and register it.</p>
+<pre class="prettyprint">typedef void(* bt_adapter_visibility_mode_changed_cb)(int result, bt_adapter_visibility_mode_e visibility_mode, void *user_data)</pre>
+<p>An example implementation:</p>
+<pre class="prettyprint">void adapter_visibility_mode_changed_cb(int result, bt_adapter_visibility_mode_e visibility_mode, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[visibility_mode_changed_cb] None discoverable mode!&quot;);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[visibility_mode_changed_cb] General discoverable mode!&quot;);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[visibility_mode_changed_cb] Limited discoverable mode!&quot;);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+<p>Register the callback:</p>
+<pre class="prettyprint">ret = bt_adapter_set_visibility_mode_changed_cb(adapter_visibility_mode_changed_cb, NULL);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_set_visibility_mode_changed_cb] Failed.&quot;);
+}</pre>
+
+<h3>Querying Bonded Devices</h3>
+<p>Before trying to find the remote devices nearby, you can query the list of bonded devices to get the basic information (such as device address and name) your device has stored for the bonded devices. In order to get all bonded devices, call <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span>. You can get information about bonded devices in <span style="font-family: Courier New,Courier,monospace;">bt_adapter_bonded_device_cb()</span>, which you need to call for each bonded device.</p>
+<p><span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> is declared as follows:</p>
+<pre class="prettyprint">int bt_adapter_foreach_bonded_device(bt_adapter_bonded_device_cb foreach_cb, void *user_data)</pre>
+<p>The callback function is declared as follows:</p>
+<pre class="prettyprint">typedef bool(* bt_adapter_bonded_device_cb)(bt_device_info_s *device_info, void *user_data)</pre>
+<p>You can get information (such as the device name, service list, and Mac address) about the bonded device.</p>
+<p>To continue performing iterations, your implemented callback function must return <span style="font-family: Courier New,Courier,monospace;">true</span>. Otherwise, it returns <span style="font-family: Courier New,Courier,monospace;">false</span> and stops performing additional iterations.</p>
+<p>The following code sample describes how to query bonded devices and how to discover a desired device.</p>
+<pre class="prettyprint">// Server address for connecting
+char *bt_server_address = NULL;
+const char *remote_server_name = &quot;server device&quot;;
+ 
+bool adapter_bonded_device_cb(bt_device_info_s *device_info, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (device_info == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (!strcmp(device_info-&gt;remote_name, (char*)user_data)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The server device is found in bonded device list. address(%s)&quot;, device_info-&gt;remote_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_server_address = strdup(device_info-&gt;remote_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If you want to stop iterating, you can return &quot;false&quot;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;// Get information about bonded device
+&nbsp;&nbsp;&nbsp;int count_of_bonded_device = 1;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Get information about the bonded device(%d)&quot;, count_of_bonded_device);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote address = %s.&quot;, device_info-&gt;remote_address);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote name = %s.&quot;, device_info-&gt;remote_name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service count = %d.&quot;, device_info-&gt;service_count);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bonded?? %d.&quot;, device_info-&gt;is_bonded);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;connected?? %d.&quot;, device_info-&gt;is_connected);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;authorized?? %d.&quot;, device_info-&gt;is_authorized);
+ 
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;major_device_class %d.&quot;, device_info-&gt;bt_class.major_device_class);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;minor_device_class %d.&quot;, device_info-&gt;bt_class.minor_device_class);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;major_service_class_mask %d.&quot;, device_info-&gt;bt_class.major_service_class_mask);
+&nbsp;&nbsp;&nbsp;count_of_bonded_device++;
+&nbsp;&nbsp;&nbsp;// Keep iterating
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+ret = bt_adapter_foreach_bonded_device(adapter_bonded_device_cb, remote_server_name);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_foreach_bonded_device] Failed!&quot;);
+}
+
+if (bt_server_address != NULL)
+&nbsp;&nbsp;&nbsp;free(bt_server_address);
+</pre>
+
+<h3>Requesting Bonding with a Remote Bluetooth Device</h3>
+<p>You already got information about a remote device through device discovery or querying a bonded device. You can request to bond with that device using the <span style="font-family: Courier New,Courier,monospace;">bt_device_create_bond()</span> function. If you want to cancel bonding, call <span style="font-family: Courier New,Courier,monospace;">bt_device_cancel_bonding()</span>.</p>
+<p>To get notified when the bonding has finished, register a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function using the <span style="font-family: Courier New,Courier,monospace;">bt_device_set_bond_created_cb()</span> function. From this callback, you can get the service list that the remote Bluetooth device provides and the service uuid from that service list.</p>
+<p>The example below shows how to implement a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function and bond with a remote Bluetooth device.</p>
+
+<pre class="prettyprint">void device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_device_bond_created_cb] Failed. result(%d).&quot;, result);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;if (device_info != NULL &amp;&amp; !strcmp(device_info-&gt;remote_address, remote_server_address)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: A bond with chat_server is created.&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: The number of service - %d.&quot;, device_info-&gt;service_count);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: is_bonded - %d.&quot;, device_info-&gt;is_bonded);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: is_connected - %d.&quot;, device_info-&gt;is_connected);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Callback: A bond with another device is created.&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+
+// You can get bt_server_address from bt_adapter_bonded_device_cb() or bt_device_service_searched_cb()
+// device_info-&gt;remote_address in bt_adapter_bonded_device_cb()
+// sdp_info-&gt;remote_address in bt_device_service_searched_cb()
+ 
+ret = bt_device_set_bond_created_cb(device_bond_created_cb, bt_server_address);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_device_set_bond_created_cb] failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+ 
+ret = bt_device_create_bond(bt_server_address);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_device_create_bond] failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_device_create_bond] succeeded. device_bond_created_cb callback will be called.&quot;);
+}</pre>
+<p>After that, the remote device is included in the bonded device list. So next time you do not need to find it again. Without finding, you can get information (such as address and name) by querying the bonded device.</p>
+<p>You can verify the bonding by calling the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function.</p>
+<p>If you want to remove the device from the bonded list, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_destroy_bond()</span> function.</p>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="connect" name="connect" class="items-tit-h2">Connecting to Other Devices Using SPP</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To connect to other devices:</p>                    
+<h3>Connecting as a Server</h3>
+<p>For your device to work as a server, establish a connection using an RFCOMM socket.</p>
+<p>To establish a connection, create a RFCOMM Bluetooth socket using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function. It has the following signature:</p>
+<pre class="prettyprint">int bt_socket_create_rfcomm(const char *port_uuid, int *socket_fd)</pre>
+<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">port_uuid</span>, uniquely identifies which service to provide. It is the UUID of the service. This UUID must match for the connection to be accepted. The second parameter, <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, is the RFCOMM socket ID as an output parameter.</p>
+<p>The example below shows how to make an rfcomm socket with the Bluetooth API.</p>
+<pre class="prettyprint">const char* my_uuid=&quot;00001101-0000-1000-8000-00805F9B34FB&quot;;
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_socket_create_rfcomm() failed.&quot;);
+}</pre>
+<p>To listen for an incoming connection, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_listen_and_accept_rfcomm()</span> function.</p>
+<p>This function is declared as follows:</p>
+<pre class="prettyprint">int bt_socket_listen_and_accept_rfcomm(int socket_fd, int max_pending_connections)</pre>
+
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">int socket_fd</span>: socket fd passed from <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span>, which starts listening</li>
+<li><span style="font-family: Courier New,Courier,monospace;">int max_pending_connections</span>: maximum number of pending connections that a Bluetooth server can store</li></ul>
+
+
+<p>You can be notified about which device connects to your device by using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function.</p>
+
+<p>The callback function is declared as follows:</p>
+<pre class="prettyprint">typedef void (* bt_socket_connection_state_changed_cb) (int result, bt_socket_connection_state_e connection_state, bt_socket_connection_s *connection, void *user_data)</pre>
+
+<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">result</span>, is the change in the connection state. The second parameter, <span style="font-family: Courier New,Courier,monospace;">connection_state</span>, is the connection state, itself, either <span style="font-family: Courier New,Courier,monospace;">BT_SOCKET_CONNECTED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_SOCKET_DISCONNECTED</span>. The third parameter is the pointer to the structure <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span>, which can specify an RFCOMM Bluetooth socket. The <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span> structure contains <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, role (client or server), and the opposite Bluetooth device&#39;s MAC address. The fourth parameter, <span style="font-family: Courier New,Courier,monospace;">user_data</span>, is user-defined data.</p>
+
+<p>The example below shows how to implement a callback function and start listening for Bluetooth client devices.</p>
+<pre class="prettyprint">void socket_connection_state_changed(int result, bt_socket_connection_state_e connection_state, bt_socket_connection_s *connection, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[socket_connection_state_changed_cb] Failed. result =%d.&quot;, result);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;if (connection_state == BT_SOCKET_CONNECTED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Connected.&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (connection != NULL) 
+&nbsp;&nbsp;&nbsp;&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;, connection-&gt;socket_fd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Role of connection - %d.&quot;, connection-&gt;local_role);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Address of connection - %s.&quot;, connection-&gt;remote_address);
+&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;server_socket_fd = connection-&gt;socket_fd;
+&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;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;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Disconnected.&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (connection != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Socket of disconnection - %d.&quot;, connection-&gt;socket_fd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Address of connection - %s.&quot;, connection-&gt;remote_address);
+&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;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: No connection data&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+ 
+bt_error_e ret;
+ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_set_connection_state_changed_cb] failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+ 
+ret = bt_socket_listen_and_accept_rfcomm(server_socket_fd, 5);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_listen_and_accept_rfcomm] failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_listen_and_accept_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.&quot;);
+&nbsp;&nbsp;&nbsp;// Waiting for incoming connections
+}</pre>
+<p>If you do not want to accept any other connections or provide a service, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> function.</p>
+
+<h3>Connecting as a Client</h3>
+<p>Set up the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function that is called when your device is connected to a Bluetooth server device.</p>
+
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When you connect to a Bluetooth server device, keep the server socket fd from <span style="font-family: Courier New,Courier,monospace;">t_socket_connection_s-&gt;socket_fd</span> in <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span>.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+<p>Request a connection to the Bluetooth server. The server socket fd is used when you send data or disconnect.</p>
+<pre class="prettyprint">bt_socket_connect_rfcomm (const char *remote_address, const char *remote_port_uuid)</pre>
+<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">remote_address</span>, is the address of the remote device. You can get this from the <span style="font-family: Courier New,Courier,monospace;">bt_device_info_s</span> structure.</p>
+
+<p>The second parameter, <span style="font-family: Courier New,Courier,monospace;">remote_port_uuid</span>, is the UUID for the specific RFCOMM-based service on a remote device.</p>
+<p>This remote_port_uuid must match the UUID used by the server device in the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function.</p>
+
+<p>The example below shows how to connect to a specific RFCOMM-based service on a remote device.</p>
+
+<pre class="prettyprint">const char *service_uuid=&quot;00001101-0000-1000-8000-00805F9B34FB&quot;;
+ 
+ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_set_connection_state_changed_cb] failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+ 
+ret = bt_socket_connect_rfcomm(bt_server_address, service_uuid);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_connect_rfcomm] failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_connect_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.&quot;);
+}</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="exchange" name="exchange" class="items-tit-h2">Exchanging Data Using SPP</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To share data between devices after establishing a connection:</p>
+<ol><li><p>To write data, use the <span style="font-family: Courier New,Courier,monospace;">bt_socket_send_data()</span> function.</p>
+<p>This function is declared as follows:</p>
+<pre class="prettyprint">int bt_socket_send_data(int socket_fd, const char *data, int length)</pre>
+<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, is the socket ID from the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function. The second parameter, <span style="font-family: Courier New,Courier,monospace;">data</span>, is the data to write. The third parameter, <span style="font-family: Courier New,Courier,monospace;">length</span>, is the data length.</p></li>
+<li><p>To read data from other devices, you must set up the <span style="font-family: Courier New,Courier,monospace;">bt_socket_data_received_cb()</span> callback that will be invoked when your device receives data from other Bluetooth devices.</p>
+<p>To register a <span style="font-family: Courier New,Courier,monospace;">bt_socket_data_received_cb()</span> callback function, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_set_data_received_cb()</span> function. The callback function is declared as follows:</p>
+<pre class="prettyprint">typedef void bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)</pre>
+<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">data</span>, is the pointer to the structure <span style="font-family: Courier New,Courier,monospace;">bt_socket_received_data_s</span> that can specify received data, data size, and socket fd. The second parameter, <span style="font-family: Courier New,Courier,monospace;">user_data</span>, is user data. This callback will be called whenever your device receives data from other Bluetooth devices. You can read the data in the callback.</p>
+
+<pre class="prettyprint">bt_error_e ret;
+char data[] = &quot;Sending test&quot;;
+int client_socket_fd = 0;
+
+void bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;if (data == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;No received data!&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Socket fd: %d&quot;, data-&gt;socket_fd);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Data: %s&quot;, data-&gt;data);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Size: %d&quot;, 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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_data_received_cb] regist to fail.&quot;);
+}
+ret = bt_socket_send_data(client_socket_fd, data, sizeof(data));
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_send_data] regist to fail.&quot;);
+}</pre>
+
+</li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="disconnect" name="disconnect" class="items-tit-h2">Disconnecting from the Connected Device Using SPP</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To disconnect from a device, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_socket_disconnect_rfcomm()</span> function:</p>
+
+<ol><li>Disconnect the Bluetooth server:
+<pre class="prettyprint">bt_error_e ret;
+ 
+// You can get &quot;server_socket_fd&quot; from output of bt_socket_create_rfcomm()
+ret = bt_socket_destroy_rfcomm(server_socket_fd);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_destroy_rfcomm] Failed.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_destroy_rfcomm] Succeeded. socket_fd = %d&quot;, server_socket_fd);
+}</pre></li>
+
+<li>Disconnect the Bluetooth client:
+<pre class="prettyprint">bt_error_e ret;
+ 
+// You can get &quot;server_socket_fd&quot; from bt_socket_connection_state_changed_cb()
+ret = bt_socket_disconnect_rfcomm(server_socket_fd);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_destroy_rfcomm] Failed. server_socket_fd = %d.&quot;, server_socket_fd);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_destroy_rfcomm] Succeeded. server_socket_fd = %d.&quot;, server_socket_fd);
+}</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="exc" name="exc" class="items-tit-h2">Exchanging Data Using OPP</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To exchange data with Object Push Profile (OPP):</p>                        
+                       
+<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>
+
+<h3>Server Role</h3>
+<p>The API has a server role to initialize the status of an OPP server device.</p>
+<pre class="prettyprint">
+bt_error_e ret;
+
+const char* dest = &quot;/tmp&quot;; // Destination path
+void connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
+}
+ret = bt_opp_server_initialize_by_connection_request (dest, connection_requested_cb_for_opp_server, NULL);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_server_initialize_by_connection_request] Failed.&quot;);
+}
+</pre>
+<p>This function initializes the OPP server device requested by the <span style="font-family: Courier New,Courier,monospace;">bt_opp_server_push_requested_cb()</span>. The <span style="font-family: Courier New,Courier,monospace;">bt_opp_server_connection_requested_cb</span> function is called when an OPP connection is requested.</p>
+
+<p>When a client requests a file push, the server can accept or reject it using the following functions:</p>
+<pre class="prettyprint">
+bt_error_e ret;
+const char file_name [18] = &quot;tempfile&quot;;
+
+void bt_opp_server_transfer_progress_cb_for_opp(const char *file, long long size, int percent, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, size);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;percent: %d&quot;, percent);
+}
+
+void bt_opp_server_transfer_finished_cb_for_opp(int result, const char *file, long long size, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, 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);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_server_accept] Failed.&quot;);
+}
+
+ret = bt_opp_server_reject();
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_server_reject] Failed.&quot;);
+}
+</pre>
+
+<h3>Client Role</h3>
+<p>Initialize the client using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_initialize()</span> function:</p>
+<pre class="prettyprint">
+bt_error_e ret;
+
+ret = bt_opp_client_initialize();
+if (ret != BLUETOOTH_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_initialize() fail&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+</pre>
+<p>You can get the information of a file that can be sent to the server device using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_add_file()</span> function:</p>
+<pre class="prettyprint">
+bt_error_e ret;
+char *resource_path = NULL;
+char caller_id_path[1024] = {&#39;\0&#39;, };
+
+resource_path = app_get_resource_path();
+snprintf(caller_id_path, sizeof(caller_id_path)-1, &quot;%s/image1.jpg&quot;, resource_path);
+free(resource_path);
+
+ret = bt_opp_client_add_file(caller_id_path);
+
+if (ret != BLUETOOTH_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_add_file() fail&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+</pre>
+<p>You can send the files to the server using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_push_files()</span> function:</p>
+<pre class="prettyprint">
+bt_error_e ret;
+char remote_addr[18] = &quot;F6:FB:8F:D8:C8:7C&quot;;
+
+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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, 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;&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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, (long)size);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;percent: %d&quot;, percent);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, 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;&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;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, 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);
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_client_push_files] Failed.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_opp_client_push_files] Succeeded.&quot;);
+}
+</pre>
+
+<p>After the push is finished by the client, call the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_clear_files()</span> and <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_deinitialize()</span> to release the Bluetooth resources related to the OPP client:</p>
+<pre class="prettyprint">
+bt_error_e ret;
+
+// Delete file info
+ret = bt_opp_client_clear_files();
+if (ret != BLUETOOTH_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_clear_files() fail&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+ret = bt_opp_client_deinitialize();
+if (ret != BLUETOOTH_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;ERR(&quot;bt_opp_client_initialize &quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_initialize Failed.&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="release" name="release" class="items-tit-h2">Releasing All Resources</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To release all Bluetooth resources, call the <span style="font-family: Courier New,Courier,monospace;">bt_deinitialize()</span> function:</p>
+<pre class="prettyprint">
+// Unregister callbacks
+bt_adapter_unset_state_changed_cb();
+bt_adapter_unset_device_discovery_state_changed_cb();
+bt_device_unset_service_searched_cb();
+bt_socket_unset_data_received_cb();
+bt_socket_unset_connection_state_changed_cb();
+ 
+// Release resources
+
+// Deinitialize Bluetooth
+ret = bt_deinitialize();
+if (ret != BT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_deinitialize] Failed.&quot;);
+}</pre>
+
+       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
new file mode 100644 (file)
index 0000000..6eede21
--- /dev/null
+++ b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Connection: Managing Modem Data Connections</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                  <li><a class="opensection" href="#init">Initializing Connections</a></li>
+                  <li><a class="opensection" href="#detail">Getting the Network Connection Details</a></li>
+                  <li><a class="opensection" href="#info">Getting the Connection Information</a></li>
+                  <li><a class="opensection" href="#register">Registering the Property Change Callback</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/network/connection_n.htm">Connection Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Connection: Managing Modem Data Connections</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how you can get the network connection information, such as default gateway and proxy configuration, IPv4 and IPv6 addresses, cellular connection state, and data transfer statistics.</p>
+
+ <h2>Warm-up</h2>
+ <p>Become familiar with the Connection API basics by learning about:</p>
+        <ul>
+                 <li><a class="opensection" href="#init">Initializing Connections</a>
+                 <p>Initialize the connection module for use.</p></li>
+                 <li><a class="opensection" href="#detail">Getting the Network Connection Details</a>
+                 <p>Get the current connection type, IP address, and proxy information.</p></li>
+                 <li><a class="opensection" href="#info">Getting the Connection Information</a>
+                 <p>Obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent/received data and last sent/received data.</p></li>
+                  <li><a class="opensection" href="#register">Registering the Property Change Callback</a>
+                 <p>Register a callback for receiving notifications about connection property changes.</p></li>
+         </ul>
+       
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Connections</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ 
+ 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;net_connection.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;net_connection.h&gt;
+</pre>
+ <p>To be able to use all connection functions, you must create a handle that contains information about the connection. Use the <span style="font-family: Courier New,Courier,monospace;">connection</span> static variable that stores the connection handle.</p>
+   <pre class="prettyprint">static connection_h connection;</pre>
+   
+    <p>Create the connection handle using the <span style="font-family: Courier New,Courier,monospace;">connection_create()</span> function that allows you to obtain the connection state and data transfer information.</p>
+   <pre class="prettyprint">int error_code;
+ 
+error_code = connection_create(&amp;connection);
+if (error_code != CONNECTION_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;return;</pre>
+   
+    <p>Destroy the created connection handle when you do not need it anymore. </p>
+   <pre class="prettyprint">connection_destroy(connection);</pre>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="detail" name="detail" class="items-tit-h2">Getting the Network Connection Details</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the type of the current connection, IP address, and proxy information, the Connection API supports the following network types:</p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_DISCONNECTED</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_WIFI</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_CELLULAR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_ETHERNET</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_BT</span></li>
+</ul>
+
+<p>The Connection API supports both IPv4 and IPv6 with the following address types:</p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_ADDRESS_FAMILY_IPV4</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_ADDRESS_FAMILY_IPV6</span></li></ul>
+<p>In this tutorial, an IPv4 address is retrieved.</p>
+
+<ol>
+<li>To get the type of the current profile for data connection, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_type()</span> function:
+
+<pre class="prettyprint">
+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;dlog_print(DLOG_INFO, LOG_TAG, &quot;Network connection type : %d&quot;, net_state);
+}</pre>
+<p>You can also use the <span style="font-family: Courier New,Courier,monospace;">connection_set_type_changed_cb()</span> function to register a callback function that is called when the connection type changes.</p>
+
+<pre class="prettyprint">
+connection_set_type_changed_cb(connection, __connection_changed_cb, NULL);
+</pre>
+
+<p>When the connection type changes, the <span style="font-family: Courier New,Courier,monospace;">__connection_changed_cb()</span> function is invoked.</p>
+
+<pre class="prettyprint">
+static void __connection_changed_cb(connection_type_e type, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Type changed callback, connection type : %d", type);
+}</pre></li>
+
+<li>To get the connection IPv4 address, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_ip_address()</span> function. The IP address is printed using dlog util, or shown to the user in another way. 
+<p>Finally, free the memory allocated for the <span style="font-family: Courier New,Courier,monospace;">ip_addr</span> temporary variable.</p>
+
+<pre class="prettyprint">
+char *ip_addr = NULL;
+error_code = connection_get_ip_address(connection, CONNECTION_ADDRESS_FAMILY_IPV4, &amp;ip_addr);
+if (error_code == CONNECTION_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;IP address : %s&quot;, ip_addr);
+&nbsp;&nbsp;&nbsp;free(ip_addr);
+}</pre></li>
+
+<li>To get the connection proxy information, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_proxy()</span> function. The proxy address is printed. 
+<p>Finally, free the memory allocated for the <span style="font-family: Courier New,Courier,monospace;">proxy_addr</span> 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;dlog_print(DLOG_INFO, LOG_TAG, &quot;Proxy address : %s&quot;, proxy_addr);
+&nbsp;&nbsp;&nbsp;free(proxy_addr); 
+}</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="info" name="info" class="items-tit-h2">Getting the Connection Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent or received data and last sent or received data (only Wi-Fi and cellular statistics information is supported):</p>
+
+<ol><li>To get the cellular connection state, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_cellular_state()</span> function. There are 6 states in which the network connection can be:
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_FLIGHT_MODE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_ROAMING_OFF</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_CALL_ONLY_AVAILABLE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_AVAILABLE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_CONNECTED</span></li>
+</ul>
+
+<p>In the example, using a <span style="font-family: Courier New,Courier,monospace;">switch</span> statement, the cellular state is shown.</p>
+
+<pre class="prettyprint">connection_cellular_state_e cellular_state;
+connection_get_cellular_state(connection, &amp;cellular_state);
+switch (cellular_state) 
+{
+&nbsp;&nbsp;&nbsp;case CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Out of service&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_CELLULAR_STATE_FLIGHT_MODE: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Flight mode&quot;);   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_CELLULAR_STATE_ROAMING_OFF: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Roaming is turned off&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_CELLULAR_STATE_CALL_ONLY_AVAILABLE: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Call only&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_CELLULAR_STATE_AVAILABLE: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Available&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_CELLULAR_STATE_CONNECTED: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Connected&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;default: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre></li>
+
+<li>To get the Wi-Fi connection state, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_wifi_state()</span> function. There are 3 states in which the Wi-Fi connection can be:
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_WIFI_STATE_DEACTIVATED</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_WIFI_STATE_DISCONNECTED</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_WIFI_STATE_CONNECTED</span></li>
+</ul>
+
+<p>In the example, using a <span style="font-family: Courier New,Courier,monospace;">switch</span> statement, the <span style="font-family: Courier New,Courier,monospace;">wifi_state</span> enumeration variable is shown.</p>
+
+<pre class="prettyprint">connection_wifi_state_e wifi_state;
+connection_get_wifi_state(connection, &amp;wifi_state);
+switch (wifi_state) 
+{
+&nbsp;&nbsp;&nbsp;case CONNECTION_WIFI_STATE_DEACTIVATED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Deactivated state&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_WIFI_STATE_DISCONNECTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Disconnected state&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case CONNECTION_WIFI_STATE_CONNECTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Connected state&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre></li>
+
+<li>Get connection statistics.
+
+<p>Connection statistics include the amount of total sent and received data and the last sent and received data. To read the statistics, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_statistics()</span> function. The function arguments determine which statistics are received, and for which connection type.</p>
+
+<p>Statistics are identified by the following constants:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA</span></li>
+</ul>
+
+<p>Use the following constants to set the connection type:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_WIFI</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_CELLULAR</span></li>
+</ul>
+
+<p>The code below reads all statistics for cellular and WiFi connections.</p>
+
+<pre class="prettyprint">long long last_received_size;
+error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR, 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, 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, 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, CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA, &amp; total_sent_size);
+// Handle statistics
+ 
+error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI, CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA, &amp; last_received_size);
+// Handle statistics
+ 
+error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI, CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA, &amp; last_sent_size);
+// Handle statistics
+ 
+error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI, CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA, &amp; total_received_size);
+// Handle statistics
+ 
+error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI, CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA, &amp; total_sent_size);
+// Handle statistics</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="register" name="register" class="items-tit-h2">Registering the Property Change Callback</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To register callback functions that are called when information changes:</p>
+
+<ol><li>Define callback functions.
+
+<p>In this tutorial, the callbacks registered are the <span style="font-family: Courier New,Courier,monospace;">__ip_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">__proxy_changed_cb()</span> functions, used for address changes. In case of an address change, an information message is printed in the file (or shown to the user in another way). The message contains information on which address has been changed and what the new value is.</p>
+
+<pre class="prettyprint">static void __ip_changed_cb(const char* ipv4_address, const char* ipv6_address, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s callback, IPv4 address : %s, IPv6 address : %s&quot;, (char *)user_data, ipv4_address, (ipv6_address ? ipv6_address : &quot;NULL&quot;));
+}
+ 
+static void __proxy_changed_cb(const char* ipv4_address, const char* ipv6_address, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s callback, IPv4 address : %s, IPv6 address : %s&quot;, (char *)user_data, ipv4_address, (ipv6_address ? ipv6_address : &quot;NULL&quot;));
+}
+</pre></li>
+
+<li>Register the defined callback functions.
+
+<p>You have to register the previously defined callback functions. The <span style="font-family: Courier New,Courier,monospace;">connection_set_ip_address_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">connection_set_proxy_address_changed_cb()</span> functions are used to register the <span style="font-family: Courier New,Courier,monospace;">__ip_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">__proxy_changed_cb()</span> functions called when the IP address or the proxy address is changed, respectively. The last parameter (<span style="font-family: Courier New,Courier,monospace;">user_data</span>) is set to a message which is printed in the callback.</p>
+
+<pre class="prettyprint">error_code = connection_set_ip_address_changed_cb(connection, __ip_changed_cb, &quot;IP addr changed:&quot;);
+if (error_code != CONNECTION_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+error_code = connection_set_proxy_address_changed_cb(connection, __proxy_changed_cb, &quot;Proxy IP addr changed:&quot;);
+if (error_code != CONNECTION_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+
+<li>Unregister the callback functions.
+
+<p>When the callback functions are not needed any more, unregister them using the <span style="font-family: Courier New,Courier,monospace;">connection_unset_network_state_changed_cb()</span> function.</p>
+
+<pre class="prettyprint">error_code = connection_unset_ip_address_changed_cb(connection);
+if (error_code != CONNECTION_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+  
+error_code = connection_unset_proxy_address_changed_cb(connection);
+if (error_code != CONNECTION_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li></ol>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
new file mode 100644 (file)
index 0000000..2aeedc7
--- /dev/null
+++ b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Connections and Communication</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+     
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Network: Managing Connections and Communication</h1>
+
+
+ <p>The connectivity tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+      <ul>
+                  <li><a class="opensection" href="connection_tutorial_n.htm">Connection: Managing Modem Data Connections</a> <p>Demonstrates how you can get network connection information, such as default gateway and proxy configuration, IPv4/IPv6 address, cellular connection state, and data transfer statistics.</p></li>
+                  <li><a class="opensection" href="bluetooth_tutorial_n.htm">Bluetooth: Managing Bluetooth Devices</a> <p>Demonstrates how you can enable Bluetooth, connect to other devices, and exchange data.</p></li>
+                  <li><a class="opensection" href="nfc_tutorial_n.htm">NFC: Managing Near Field Radio Communication</a> <p>Demonstrates how you can activate NFC and get cached NFC messages and send and receive NDEF messages using the NFC P2P mode.</p></li>
+                  <li><a class="opensection" href="wifi_tutorial_n.htm">Wi-Fi: Managing Wi-Fi and Monitoring Its State</a> <p>Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.</p></li>
+                  <li><a class="opensection" href="wifi_direct_tutorial_n.htm">Wi-Fi Direct: Managing Wi-Fi Direct&trade;</a> <p>Demonstrates how you can manage Wi-Fi Direct&trade; connections.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e09df13
--- /dev/null
+++ b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
@@ -0,0 +1,712 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>NFC: Managing Near Field Radio Communication</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>NFC
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init">Initializing NFC</a></li>
+                                       <li><a class="opensection" href="#enable">Enabling and Disabling NFC</a></li>
+                                       <li><a class="opensection" href="#work">Working with NFC</a></li>
+                                       <li><a class="opensection" href="#get">Getting a Cached NFC Message</a></li>
+                               </ul>
+                       </li>
+                       <li>NFC P2P bump
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#init_p2p">Initializing NFC P2P</a></li>
+                                       <li><a class="opensection" href="#send">Sending and Receiving a Message through NFC P2P</a></li>
+                               </ul>
+                       </li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/network/nfc_n.htm">NFC Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>NFC: Managing Near Field Radio Communication</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can manage Near Field Communication (NFC) and send and receive NFC Data Exchange Format (NDEF) messages using the NFC peer-to-peer (P2P) mode.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the NFC API basics by learning about:</p>
+       <ul>
+               <li>NFC
+                       <ul>
+                               <li><a class="opensection" href="#init">Initializing NFC</a>
+                               <p>Initialize NFC for use.</p></li>
+                               <li><a class="opensection" href="#enable">Enabling and Disabling NFC</a>
+                               <p>Enable or disable NFC using the toggle application.</p></li>
+                               <li><a class="opensection" href="#work">Working with NFC</a>
+                               <p>Initialize NFC asynchronously, set the NFC tag filter, and register all necessary NFC callbacks.</p></li>
+                               <li><a class="opensection" href="#get">Getting a Cached NFC Message</a>
+                               <p>Initialize NFC synchronously and get a cached NFC message</p></li>
+                       </ul>   
+               </li>
+               <li>NFC P2P bump
+                       <ul>
+                               <li><a class="opensection" href="#init_p2p">Initializing NFC P2P</a>
+                               <p>Initialize NFC P2P for use.</p></li>
+
+                               <li><a class="opensection" href="#send">Sending and Receiving a Message through NFC P2P</a>
+                               <p>Exchange NDEF messages using NFC P2P between 2 devices.</p></li>
+                       </ul>
+               </li>
+       </ul>
+       
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing NFC</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Near Field Communication (NFC) is an international standard (<a href="http://www.iso.org/iso/catalogue_detail.htm?csnumber=38578" target="blank">ISO/IEC 18092</a>) that specifies an interface and a protocol for simple wireless interconnection of closely coupled devices. There are 3 groups of application scenarios for NFC:</p>
+
+<ul class="ul"><li>Device close to a wireless tag</li>
+<li>Device close to another device (target)</li>
+<li>Device close to a point of sales terminal</li></ul>
+
+<p>In the NFC tutorial, the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a> API is used to write an application which initializes the NFC adapter and registers callbacks called in case of each connection scenario, so the user is able to work with NFC manually. By connecting your device to the other NFC point (tag, device, or sales terminal), you can invoke the specified callback registered earlier. The second scenario of this tutorial shows how to get the message cached by NFC.</p>
+
+<p>To initialize NFC:</p>
+<ol><li>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;nfc.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;nfc.h&gt;
+</pre></li>
+
+<li><p>Check whether the device you want to work with supports NFC. This can be done by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_is_supported()</span> function. It takes no parameters and it simply returns <span style="font-family: Courier New,Courier,monospace;">true</span> if NFC is supported on the device and <span style="font-family: Courier New,Courier,monospace;">false</span> otherwise.</p>
+<pre class="prettyprint">void Network_NFC_startup(void)
+{
+&nbsp;&nbsp;&nbsp;gmainloop = g_main_loop_new(NULL, FALSE);
+&nbsp;&nbsp;&nbsp;bool is_nfc_supported = nfc_manager_is_supported();
+&nbsp;&nbsp;&nbsp;if (!is_nfc_supported)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "is_nfc_supported NOT SUPPORTED");
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">gmainloop</span>, which is being created here, is used to wait for the results of calling asynchronous functions.</p></li>
+
+<li><p>When the work with NFC is finished, the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_deinitialize()</span> function must be called to clear the environment.</p>
+
+<pre class="prettyprint">void Network_NFC_cleanup(void)
+{
+&nbsp;&nbsp;&nbsp;g_main_loop_unref (gmainloop);
+&nbsp;&nbsp;&nbsp;nfc_manager_deinitialize();
+}</pre></li></ol>
+
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="enable" name="enable" class="items-tit-h2">Enabling and Disabling NFC</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To enable or disable NFC:</p>                       
+<p>The NFC API does not contain functions for enabling or disabling NFC. Use the NFC toggle application illustrated in the following figure (off screen on the left and on screen on the right).</p>
+    <p class="figure">Figure: NFC toggle application</p>
+  <p style="text-align:center;"><img alt="NFC ON/OFF application" src="../../images/nfc_onoff.png" /></p>
+
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+#include &lt;dlog.h&gt;
+
+int nfc_onoff_operation(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;if (service == NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service_create failed!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service,  &quot;http://tizen.org/appcontrol/operation/setting/nfc&quot;);
+&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service,  &quot;type&quot;, &quot;nfc&quot;);
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to NFC On/Off app!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to relaunch NFC On/Off app!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="work" name="work" class="items-tit-h2">Working with NFC</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To work with NFC manually, you need to:</p>
+
+<ol><li>Initialize NFC</li>
+<li>Register for notifications</li>
+<li>Work with NFC manually</li>
+<li>Clean up at the end</li></ol>
+
+<h3 id="init_NFC">Initializing NFC</h3>
+<p>To initialize NFC:</p>
+<ol><li>
+<p>The first function to be used is <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span>.</p>
+<pre class="prettyprint">int error_code = NFC_ERROR_NONE;
+
+error_code = nfc_manager_initialize();
+if (NFC_ERROR_NONE != error_code) // Error occurred
+
+g_timeout_add(1000, timeout_func, gmainloop);
+g_main_loop_run(gmainloop);</pre>
+
+<p>After calling the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function run <span style="font-family: Courier New,Courier,monospace;">gmainloop</span> to wait for the result of the initialization. It is closed when the time set in the <span style="font-family: Courier New,Courier,monospace;">g_timeout_add</span> function elapses. This time is in milliseconds so the <span style="font-family: Courier New,Courier,monospace;">timeout_func</span> is called after 1 second passes.</p></li>
+
+<li><p>When the initialization is finished, call the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_activation_changed_cb()</span> function. The function registers the callback that is invoked every time the activation state of NFC changes. The parameters are:</p>
+<ul class="ul"><li>Activation state changed callback</li>
+<li>Data passed to the callback</li></ul>
+<pre class="prettyprint">error_code = nfc_manager_set_activation_changed_cb(on_nfc_activation_changed, NULL);</pre>
+
+<p>The code of the <span style="font-family: Courier New,Courier,monospace;">on_nfc_activation_changed</span> callback is simple and looks like this:</p>
+<pre class="prettyprint">static void on_nfc_activation_changed(bool activated, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (activated)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC activated");
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC deactivated");
+}</pre>
+<p>So in our example, this callback only informs the user that the activation state has changed.</p></li>
+
+
+<li><p>After this step, the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_filter()</span> function is used. It declares the tag filtering option. Use a bit operation of the type <span style="font-family: Courier New,Courier,monospace;">nfc_tag_filter_e</span> to specify the type of filtering. The default value is <span style="font-family: Courier New,Courier,monospace;">NFC_TAG_FILTER_ALL_ENABLE</span>, which means that all tag types are enabled.</p>
+<pre class="prettyprint">nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);</pre></li>
+
+<li><p>You need to register callback functions to receive discovery notifications for tag, NDEF, peer-to-peer, secure element, and secure element transaction events. To register a callback function for receiving tag discovery notifications, use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_discovered_cb()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback function described later in the tutorial. The second argument is a user data parameter. In our case, that parameter is not needed and you can pass a <span style="font-family: Courier New,Courier,monospace;">NULL</span> value to the function. In the same way, register NDEF, peer-to-peer, secure element, and secure element transaction event notifications using:</p>
+<ul class="ul"><li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_ndef_discovered_cb()</span> function to register an NDEF event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_ndef_discovered()</span> callback function</li>
+<li><span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_p2p_target_discovered_cb()</span> to register peer-to-peer event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span> callback function</li>
+<li><span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_se_event_cb()</span> to register secure element event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_se_event()</span> callback function</li>
+<li><span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_se_transaction_event_cb()</span> to register secure element transaction event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_se_transaction_event()</span> callback function</li></ul>
+
+<pre class="prettyprint">error_code = nfc_manager_set_tag_discovered_cb(on_nfc_tag_discovered, NULL);
+if (NFC_ERROR_NONE != error_code) // Error occurred
+
+error_code = nfc_manager_set_ndef_discovered_cb(on_nfc_ndef_discovered, NULL);
+if (NFC_ERROR_NONE != error_code) // Error occurred
+
+error_code = nfc_manager_set_p2p_target_discovered_cb(on_nfc_p2p_target_discovered, NULL);
+if (NFC_ERROR_NONE != error_code) // Error occurred
+
+error_code = nfc_manager_set_se_event_cb(on_nfc_se_event, NULL);
+if (NFC_ERROR_NONE != error_code) // Error occurred
+
+error_code = nfc_manager_set_se_transaction_event_cb(NFC_SE_TYPE_ESE, on_nfc_se_transaction_event, NULL);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
+
+<li><p>Check whether system handling for tag and target discovery is enabled or disabled. By default it is enabled. Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_is_system_handler_enabled()</span> function to check the current state. If the function returns <span style="font-family: Courier New,Courier,monospace;">FALSE</span>, enable system handling using the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_system_handler_enable()</span> function and pass the <span style="font-family: Courier New,Courier,monospace;">TRUE</span> value as an input parameter.</p>
+
+<pre class="prettyprint">if (nfc_manager_is_system_handler_enabled() != true)
+&nbsp;&nbsp;&nbsp;nfc_manager_set_system_handler_enable(true);</pre></li></ol>
+
+<h3>Working with NFC Manually</h3>
+
+<p>After initializing NFC, you can start using NFC on the device. You can connect to other devices, resulting in launching the code from the registered callbacks.</p>
+
+
+<h4 id="tag_work" name="tag_work">Working with NFC tags</h4>
+
+<p>When a tag is discovered, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback registered before is called. The first parameter of the function is the NFC discovered type. Second is a tag handle and the last is user data. In the described example, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback prints out the information about the discovered tag.</p>
+
+<p>At the beginning of this callback, the NFC discovered type is checked. It can be <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_ATTACHED</span> if the tag has connected to the device and <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_DETACHED</span> if the tag was detached.  If the tag is attached, you can print out information read from it.</p>
+
+<p>To get the type of the tag, the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_get_type()</span> function must be called. It takes 2 parameters. The first one is the handle to the tag and the second is a pointer to a (<span style="font-family: Courier New,Courier,monospace;">nfc_tag_type_e</span>) variable, where the type of the tag is stored.</p>
+<pre class="prettyprint">nfc_tag_get_type(tag, &amp;tag_type);</pre>
+<p>You can also get the size of the NDEF message stored in the tag by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_get_ndef_size()</span> function. The parameters are similar to the ones described above, but instead of the <span style="font-family: Courier New,Courier,monospace;">tag_type</span> variable, the pointer is passed to an unsigned <span style="font-family: Courier New,Courier,monospace;">int</span> variable where the current size of the tag is stored.</p>
+<pre class="prettyprint">nfc_tag_get_ndef_size(tag, &amp;size);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">nfc_tag_get_maximum_ndef_size()</span> function can be used to get the maximum NDEF message size  that can be stored in the tag. It also takes 2 parameters, where the first one is a tag handle and the second is a pointer to an unsigned <span style="font-family: Courier New,Courier,monospace;">int</span> where the maximum size of the tag is stored.</p>
+<pre class="prettyprint">nfc_tag_get_maximum_ndef_size(tag, &amp;maximum_ndef_bytes_size);</pre>
+
+<p>After getting the basic tag information, retrieve all remaining tag information by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_foreach_information()</span> function. This function takes 3 parameters. The first one is the tag that is operated on. The second one is a callback that is called for each found pair of key and value in the tag. The last one is user data that can be passed to the callback, but as there is no need to pass any data, <span style="font-family: Courier New,Courier,monospace;">NULL</span> is passed.</p>
+<pre class="prettyprint">error_code = nfc_tag_foreach_information(tag, on_nfc_tag_information_event, NULL);
+
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_information_event()</span> callback in this tutorial is really simple. It just prints out the found keys and their values.</p>
+<pre class="prettyprint">on_nfc_tag_information_event(const char *key, const unsigned char *value, int value_size, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Title: %s, Value: %s", key, (char*)value);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+<p><span style="font-family: Courier New,Courier,monospace;">true</span> is returned to continue the iteration over all other pairs of keys and values. If <span style="font-family: Courier New,Courier,monospace;">false</span> is returned, then the iteration stops.</p>
+
+<p>After these actions, check the nfc tag filter and print it out. Doing this ensures us that the callback was called and informs us what kind of a tag filter is set right now. For example, if the callback has not printed any information about the tag, but it printed out that the tag filter is <span style="font-family: Courier New,Courier,monospace;">NFC_TAG_FILTER_ALL_DISABLE</span>, then you know that the filter needs to be set to the proper value to read the specific tag type. To check the current tag filter, you can use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_get_tag_filter()</span> function.</p>
+<pre class="prettyprint">filter = nfc_manager_get_tag_filter();</pre>
+
+<p>The last thing left in the described callback is the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_read_ndef()</span> function. It enables reading the tag data. 3 parameters are used:</p>
+<ul class="ul"><li>Tag handle</li>
+<li>Callback invoked when the reading is completed</li>
+<li>User data passed to the callback</li></ul>
+
+<pre class="prettyprint">error_code = nfc_tag_read_ndef(tag, on_nfc_tag_read_completed, NULL);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+
+<p>After the tag message has been read, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_read_completed()</span> callback is called. It has 3 parameters:</p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">error_code</span> – defining status of reading the message</li>
+<li><span style="font-family: Courier New,Courier,monospace;">message</span> (<span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span>) – message read from the tag</li>
+<li><span style="font-family: Courier New,Courier,monospace;">user_data</span> – data passed to the callback, <span style="font-family: Courier New,Courier,monospace;">NULL</span> if no data need to be passed</li></ul>
+
+<pre class="prettyprint">static void on_nfc_tag_read_completed(int error_code, nfc_ndef_message_h message, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (!found_error(NFC_ERROR_NONE, &quot;nfc_manager_set_activation&quot;, error_code))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_read_cb(clone_message(message));
+}</pre>
+<p>If there was no error (<span style="font-family: Courier New,Courier,monospace;">error_code == NFC_ERROR_NONE</span>), you can operate on the retrieved message. To present how to use other NFC API functionality, 2 additional functions have been presented. Firstly, clone the message by calling the <span style="font-family: Courier New,Courier,monospace;">clone_message()</span> function: </p>
+<pre class="prettyprint">static nfc_ndef_message_h clone_message(nfc_ndef_message_h msg)
+{
+&nbsp;&nbsp;&nbsp;unsigned char *rawdata;
+&nbsp;&nbsp;&nbsp;unsigned int rawdata_size;
+&nbsp;&nbsp;&nbsp;nfc_ndef_message_h msg_cp;
+
+&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_rawdata(msg, &amp;rawdata, &amp;rawdata_size);
+&nbsp;&nbsp;&nbsp;nfc_ndef_message_create_from_rawdata(&amp;msg_cp, rawdata, rawdata_size);
+&nbsp;&nbsp;&nbsp;free(rawdata);
+
+&nbsp;&nbsp;&nbsp;return msg_cp;
+}</pre>
+<p>As it can be seen, 2 NFC API functions are used here. The first one is the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_rawdata()</span> function. It gets a copy of the bytes array of the NDEF message. It takes 3 parameters:</p>
+<ul class="ul"><li>The handle to NDEF message</li>
+<li><span style="font-family: Courier New,Courier,monospace;">[out] rawdata</span> – two dimensional bytes array</li>
+<li><span style="font-family: Courier New,Courier,monospace;">[out] rawdata_size</span> – the size of bytes array </li></ul>
+
+<p><span style="font-family: Courier New,Courier,monospace;">[out]</span> parameters are variables that must be passed to be fulfilled inside the called function. </p>
+<p>In the end, <span style="font-family: Courier New,Courier,monospace;">rawdata</span> must be released with free().</p>
+
+<p>The second function is <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_create_from_rawdata()</span>, and it creates an NDEF message handle from raw serial bytes. Use it to create a copy of the message retrieved from the tag. 3 parameters need to be provided:</p>
+<ul class="ul"><li>[out] Handle to the message (<span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span>)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">rawdata</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">rawdata_size</span></li></ul>
+
+
+<p>Now let&#39;s discuss the second function prepared to show the functionality of the NFC API. It takes as a parameter a handle to the tag message. Pass the cloned message to it.</p>
+<pre class="prettyprint">nfc_ndef_message_read_cb(clone_message(message));</pre>
+
+<p>First, get the number of records stored in the tag message. To do this, use the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_record_count()</span> function. It needs the handle to the message that is operated on and the pointer to an integer which is fulfilled by the function with the number of records in the message.</p>
+<pre class="prettyprint">error_code = nfc_ndef_message_get_record_count(message, &amp;count);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+<p>Iterate through all the records in the message and get all information stored in each record. The first called function is <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_record()</span>. This function gets a record from the message by index. It returns a pointer to the record so if you change the record, it directly affects the NDEF message.</p>
+<pre class="prettyprint">error_code = nfc_ndef_message_get_record(message, i, &amp;rec);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+<p>Parameters are:</p>
+<ul class="ul"><li>Handle to the NDEF message</li>
+<li>Index of the record</li>
+<li><span style="font-family: Courier New,Courier,monospace;">[out]</span> Handle to the record</li></ul>
+
+<p>Now, when the pointer to the specific record exists,  get the record data:</p>
+
+<ul class="ul"><li>Record ID by calling <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_id()</span>
+
+<pre class="prettyprint">error_code = nfc_ndef_message_get_record(message, i, &amp;rec);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
+
+<li>Record type using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_type()</span> function
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_type(rec, &amp;type_str, &amp;type_len);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
+
+<li>Record TNF (Type Name Format) with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_tnf()</span> function
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_tnf(rec, &amp;tnf);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
+
+<li>Record payload by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_payload()</span> function
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_payload(record, &amp;payload, &amp;payload_len);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li></ul>
+
+
+
+<p>To get more information from the tag, specify what type of a tag message you are dealing with. If there is message with <span style="font-family: Courier New,Courier,monospace;">Type = &quot;T&quot;</span> and the TNF is <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_WELL_KNOWN</span>, then it is possible to get the following data:</p>
+
+<ul class="ul"><li>Record text with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_text()</span> function
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_text(record, &amp;text);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
+
+<li>Record text language code by using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_langcode()</span> function
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_langcode(record, &amp;language);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
+
+<li>Record text encoding type by calling <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_encode_type()</span>
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_encode_type(record, &amp;encode);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li></ul>
+
+
+<p>If there is a message with <span style="font-family: Courier New,Courier,monospace;">Type=&quot;U&quot;</span> and TNF is also <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_WELL_KNOWN</span>, can get the URI using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_uri()</span> function:</p>
+
+<pre class="prettyprint">error_code = nfc_ndef_record_get_uri(record, &amp;uri);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+
+<p>Finally, if the TNF of the record is <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_MIME_MEDIA</span>, then it is possible to get the record mime type.</p>
+<pre class="prettyprint">error_code = nfc_ndef_record_get_mime_type(record, &amp;mime);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+
+<h4>Working with NFC NDEF Messages</h4>
+
+<p>It is the same as described in working with the NFC tag NDEF message. In the registered callback <span style="font-family: Courier New,Courier,monospace;">on_nfc_ndef_discovered()</span>, get the number of records in the message and then iterate through those records. After getting the handles to those records, get the payloads of those records:</p>
+<pre class="prettyprint">static void on_nfc_ndef_discovered(nfc_ndef_message_h message, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int count, i;
+&nbsp;&nbsp;&nbsp;unsigned int size;
+&nbsp;&nbsp;&nbsp;unsigned char * payload;
+&nbsp;&nbsp;&nbsp;nfc_ndef_record_h record;
+
+&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record_count(message, &amp;count);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "on_nfc_ndef_discovered %d", count);
+
+&nbsp;&nbsp;&nbsp;for (i=0; i&lt;count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record(message, i, &amp;record);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_record_get_payload (record, &amp;payload, &amp;size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Record Number : %d, Payload : %s", i, payload);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<h4>Working with NFC P2P Target</h4>
+
+<p>This section discusses the callback that is invoked on peer-to-peer target discovery. When the device is connected to some P2P target, it is possible to exchange NDEF data with that peer target. It allows:</p>
+<ul class="ul"><li>Sending NDEF messages</li>
+<li>Receiving NDEF messages</li></ul>
+
+<p>In this tutorial, our registered callback for such a connection is called <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span>. It has the following parameters:</p>
+<ul class="ul"><li>The type of NFC discovery (<span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span>)</li>
+<li>The handle to the target</li>
+<li>User data</li></ul>
+
+<p>First, check the first parameter (<span style="font-family: Courier New,Courier,monospace;">type</span>). If the type is <span style="font-family: Courier New,Courier,monospace;">NFC_DISCOVERED_TYPE_ATTACHED</span>, then it means that the remote device was attached to the device. </p>
+<pre class="prettyprint">if (type == NFC_DISCOVERED_TYPE_ATTACHED)
+{
+&nbsp;&nbsp;&nbsp;// Remote device is attached; execute code
+}</pre>
+
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_p2p_set_data_received_cb()</span> function to register a callback that is invoked when any data from the connected target is received.</p>
+<pre class="prettyprint">error_code = nfc_p2p_set_data_received_cb(target, on_nfc_p2p_read_completed, 0);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+
+<p>The code of the registered <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_read_completed()</span> callback is presented below:</p>
+<pre class="prettyprint">static void on_nfc_p2p_read_completed(nfc_p2p_target_h target, nfc_ndef_message_h message, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int count;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "on_nfc_p2p_read_completed");
+
+&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record_count(message, &amp;count);
+&nbsp;&nbsp;&nbsp;nfc_ndef_message_read_cb(clone_message(message));
+}</pre>
+
+<p>After reading the message from the remote device, check its number of records using the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_record_count()</span> function and get more detailed info about the message by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_read_cb()</span> function described earlier.</p>
+
+<p>While having some other device connected through NFC, hand over the connection to some alternative carrier (AC), such as Bluetooth, Wi-Fi, or Wi-Fi Direct&trade;.</p>
+
+<p>Firstly, call the <span style="font-family: Courier New,Courier,monospace;">nfc_p2p_is_supported_ac_type()</span> function to find out which alternative carriers are supported by the device.</p>
+<pre class="prettyprint">nfc_ac_type_e ac = NFC_AC_TYPE_BT;
+
+while(NFC_AC_TYPE_UNKNOWN != ac)
+{
+&nbsp;&nbsp;&nbsp;if (nfc_p2p_is_supported_ac_type(ac)) break;
+&nbsp;&nbsp;&nbsp;ac++;
+}</pre>
+
+<p>Iterate through the known AC types and break the iteration after finding the first one that is supported. The supported AC type is stored in the <span style="font-family: Courier New,Courier,monospace;">ac</span> variable.</p>
+<p>Now, make the connection handover by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_p2p_connection_handover()</span> function.</p>
+<pre class="prettyprint">if (NFC_AC_TYPE_UNKNOWN != ac)
+&nbsp;&nbsp;&nbsp;nfc_p2p_connection_handover(target, ac, on_nfc_p2p_connection_handover_completed, NULL);</pre>
+<p>The parameters are:</p>
+<ul class="ul"><li>Handle to the remote device</li>
+<li>Preferred alternative carrier</li>
+<li>Callback function to invoke after this function has completed
+<p>It can be null if notification is not required.</p></li>
+<li>User data to be passed to the callback function</li></ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_connection_handover_completed()</span> callback in this tutorial only prints the alternative carrier data if no error occurs during the handover.</p>
+<pre class="prettyprint">static void on_nfc_p2p_connection_handover_completed(int error_code, nfc_ac_type_e carrier, void * ac_data, int ac_data_size, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (!found_error(NFC_ERROR_NONE, &quot;on_nfc_p2p_connection_handover_completed&quot;, error_code))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *_data = (char *) malloc(sizeof(char) * (ac_data_size + 1));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strncpy(_data, (char *)ac_data, ac_data_size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_data[ac_data_size] = &#39;\0&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "AC: %s", _data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(_data);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<h4>Working with NFC Secure Element</h4>
+
+<p>The secure element event notification is received through the <span style="font-family: Courier New,Courier,monospace;">on_nfc_se_event()</span> function. The first parameter defines the event type. The second one is user data - in this case it is not used. Depending on the event type, you can take some additional actions.</p>
+<pre class="prettyprint">static void on_nfc_se_event(nfc_se_event_e event, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;switch (event)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_START_TRANSACTION:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This event notifies the terminal host that it shall launch
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// an application associated with an NFC application in a
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// UICC (Universal Integrated Circuit Card) host
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Start Transaction");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_END_TRANSACTION:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This event notifies the terminal host that the current transaction
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// in process was ended
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: End Transaction");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_CONNECTIVITY:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// It is a ready signal to communicate UICC (Universal Integrated Circuit
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Card) with terminal host. \nUICC (Universal Integrated Circuit Card)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// creates a pipe and opens the pipe channel.\nThen it sends the signal
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to terminal host or host controller
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Connectivity");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_FIELD_ON:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When the CLF (Contactless Front-end) detects 5ra RF field, the card
+&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;// application gate.\nWhen there are multiple open card RF gates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the CLF shall send the #NFC_SE_EVENT_FIELD_ON on all open pipes
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to these gates. Next the CLF starts the initialization
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// and anti-collision process as defined in ISO/IEC 14443-3 [6]
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Field ON");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_FIELD_OFF:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When the CLF (Contactless Front-end) detects that the RF field
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// is off, the card RF gate shall send #NFC_SE_EVENT_FIELD_OFF to
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the card application gate.\nWhen there are multiple open card RF
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// gates the CLF shall send the #NFC_SE_EVENT_FIELD_OFF to one gate
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Field OFF");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_TRANSACTION:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This event notifies that an external reader is trying to access a secure
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// element
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Remote Start Transaction");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: DEFAULT:OTHER");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+} </pre>
+
+
+<p>The secure element transaction event gives you 4 information parameters and user data. You can get the application ID (specified in ISO/IEC 7816-4) from the first parameter, size of aid from the second parameter, the parameter list (specified in ISO/IEC 8825-1) from the third parameter, and the size of the parameter from the next function input parameter.</p>
+<pre class="prettyprint">static void on_nfc_se_transaction_event(nfc_se_type_e se_type, unsigned char *aid, int aid_size, unsigned char *param, int param_size, void *user_data)
+{
+&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Secure Element(SIM/UICC(Universal Integrated Circuit Card)) transaction event data");
+}</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get" name="get" class="items-tit-h2">Getting a Cached NFC Message</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get a cached NFC message:</p>
+
+<ol><li>Initialize NFC.
+<p>To initialize NFC, the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function can be used, as shown in <a href="#init_NFC">Initializing NFC</a>. </p></li>
+<li>Set the NFC tag filter.
+<p>Setting the NFC tag filter as shown in <a href="#tag_work">Working with NFC Tags</a>). Just as a reminder, setting the tag filter is possible by using the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_filter()</span> function.</p>
+<pre class="prettyprint">nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);</pre></li>
+<li>Enable the NFC system handler.
+<p>Before getting the cached message, enable the system handler:</p>
+<pre class="prettyprint">if (nfc_manager_is_system_handler_enabled() != true)
+&nbsp;&nbsp;&nbsp;nfc_manager_set_system_handler_enable(true);</pre></li>
+<li>Get the cached message.
+<p>Get the cached message by calling the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_get_cached_message()</span> function. Pass a variable of the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span> type, which is fulfilled with the cached message by the function.</p>
+<pre class="prettyprint">nfc_ndef_message_h message = NULL;
+
+error_code = nfc_manager_get_cached_message(&amp;message);
+if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
+<p>After getting the message, get the detailed information from the message as it was described before. To do this, check whether there were any errors and whether the message is not <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+<pre class="prettyprint">if (message != NULL)
+{
+&nbsp;&nbsp;&nbsp;on_nfc_ndef_discovered(clone_message(message), NULL);
+}</pre></li>
+<li>Clean up at the application end.</li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init_p2p" name="init_p2p" class="items-tit-h2">Initializing NFC P2P</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To initialize NFC P2P:</p>
+<ol>
+<li><p>Make sure you have 2 target devices that support the NFC P2P mode. Note that the device screen should be unlocked to use NFC.</p></li>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;nfc.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;nfc.h&gt;
+</pre></li>
+<li>To start using the NFC API, initialize the API by calling the <span style="font-family: Courier New,Courier,monospace">nfc_manager_initialize()</span> function:
+<pre class="prettyprint">nfc_manager_initialize();</pre></li>
+<li><p>After the initialization of the API manager, ensure that NFC is supported and activated on the device. The <span style="font-family: Courier New,Courier,monospace">nfc_manager_is_supported()</span> function checks whether NFC is supported. The <span style="font-family: Courier New,Courier,monospace">nfc_manager_is_activated()</span> function gets the NFC activation state. </p>
+<pre class="prettyprint">if (!nfc_manager_is_supported()) 
+{
+&nbsp;&nbsp;&nbsp;// Report error, end the application
+}
+if (!nfc_manager_is_activated()) 
+{
+&nbsp;&nbsp;&nbsp;// Report error, switch on NFC
+}</pre></li>
+
+<li><p>At the end of the application life-cycle, call the <span style="font-family: Courier New,Courier,monospace">nfc_manager_deinitialize()</span> function. It releases all resources of the NFC manager and disconnects the session between it and your application.</p>
+<pre class="prettyprint">nfc_manager_deinitialize();</pre></li></ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="send" name="send" class="items-tit-h2">Sending and Receiving a Message through NFC P2P</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To send and receive messages using the NFC P2P mode (a simple NDEF message containing a business card (name, phone number, and e-mail address) of the device owner is prepared and exchanged with the second device):</p>
+
+<ol><li>Prepare the NDEF message.
+<p>An NDEF message consists of several NDEF records. A record payload type is determined by two values: the TNF (Type Name Format) and type. There are a few TNFs and related types of the NDEF records, like text record, URI record, and MIME record. In this tutorial, only text records are used.</p>
+<p>The sample message in this tutorial contains a name, phone number, and e-mail address of the device owner. Values can be stored in a file or taken from the UI of the application – in this tutorial getting values has been omitted.</p>
+<p>To create a text record, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_record_create_text()</span> function. Its arguments are a record handle, the text to store, the language code (for example en-US or ko-KR), and the encoding type. The following example creates 3 records for a name, phone number, and e-mail address:</p>
+<pre class="prettyprint">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;;
+
+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);</pre>
+<p>When the records are created, they should be appended to a message. Before that, create and initialize an NDEF message using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_create()</span> function. As an argument, pass a handle to the created message.</p>
+<pre class="prettyprint">nfc_ndef_message_h ndef_message = NULL;
+nfc_ndef_message_create(&amp;ndef_message);</pre>
+<p>Append the created records to the message using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_append_record()</span> function. This function appends the record with the next index. To insert a record at the specified index, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_insert_record()</span> function instead.</p>
+<pre class="prettyprint">nfc_ndef_message_append_record(ndef_message, ndef_name_record);
+nfc_ndef_message_append_record(ndef_message, ndef_phone_record);
+nfc_ndef_message_append_record(ndef_message, ndef_email_record);</pre></li>
+
+<li>Notify the application about the discovered P2P target.
+<p>To exchange messages using P2P, firstly register a callback for receiving notifications about discovered P2P targets using the <span style="font-family: Courier New,Courier,monospace">nfc_manager_set_p2p_target_discovered_cb()</span> 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);</pre></li>
+
+<li id="received" name="received">Notify the application about the received data.
+<p>In this tutorial, both devices receive and send a message to each other, so when another P2P target is attached, register a callback for receiving notifications about received data from this device. Use the <span style="font-family: Courier New,Courier,monospace">nfc_p2p_set_data_received_cb()</span> function (the best way is to place this code in the callback called after the P2P device is discovered). Specify the peer target handle – it was provided by the previously set callback.</p>
+<pre class="prettyprint">nfc_p2p_set_data_received_cb(target, on_p2p_data_received, NULL);</pre>
+</li>
+
+<li>Send a message to another device.
+<p>When another P2P device is attached, send the prepared message to it. You can use the <span style="font-family: Courier New,Courier,monospace">nfc_p2p_send()</span> or <span style="font-family: Courier New,Courier,monospace">nfc_p2p_send_no_permission()</span> function if you do not want to check permissions. Provide a target handle and a sent message handle. You can also set a callback called when the sending is completed.</p>
+<pre class="prettyprint">nfc_p2p_send(target, ndef_message, NULL, NULL);</pre></li>
+
+<li id="receive" name="receive">Receive a message from another device.
+<p>When the callback about receive data is called, the device receives a message from another device. The callback provides a handle to the received message and a handle to the message source.</p>
+<p>Get the number of records in the received message using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_get_record_count()</span> function. In this example, the number should be 3, since there are 3 records a name,  phone number, and e-mail address.</p>
+<pre class="prettyprint">int count;
+nfc_ndef_message_get_record_count(message, &amp;count);</pre>
+<p>To get a specified record from the message, use the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_message_get_record()</span> function. Specify a message handle, a record index, and a handle to store the obtained record. When the text record is obtained, get the stored text using the <span style="font-family: Courier New,Courier,monospace">nfc_ndef_record_get_text()</span> function. In the tutorial, there are 3 text records to obtain.</p>
+<pre class="prettyprint">nfc_ndef_record_h ndef_record;
+
+char *name = NULL;
+nfc_ndef_message_get_record(message, 0, &amp;ndef_record);
+nfc_ndef_record_get_text(ndef_record, &amp;name);
+
+char *phone = NULL;
+nfc_ndef_message_get_record(message, 1, &amp;ndef_record);
+nfc_ndef_record_get_text(ndef_record, &amp;phone);
+
+char *email = NULL;
+nfc_ndef_message_get_record(message, 2, &amp;ndef_record);
+nfc_ndef_record_get_text(ndef_record, &amp;email);</pre>
+<p>Then you can use obtained values to create, for example, a new contact.</p>
+
+<p>Note that depending on the record type, some obtained values should be freed and others should not. For example, you should free the obtained text from a text record. See the documentation to know how to get the payload of other types of records.</p></li></ol>
+       </div>
+               </li>
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
new file mode 100644 (file)
index 0000000..d09727b
--- /dev/null
+++ b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
@@ -0,0 +1,525 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Wi-Fi Direct: Managing Wi-Fi Direct&trade;</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#initialization">Initializing Wi-Fi Direct&trade;</a></li>             
+                       <li><a class="opensection" href="#activating">Activating Wi-Fi Direct&trade;</a></li>   
+                       <li>Peers and groups
+                       <ul class="toc">
+                       <li><a class="opensection" href="#getting_device_info">Getting the Wi-Fi Direct&trade; Peer Device Information</a></li>                 
+                       <li><a class="opensection" href="#connecting_device">Connecting to a Specific Wi-Fi Direct&trade; Peer Device</a></li>                  
+                       <li><a class="opensection" href="#creating_group">Managing Wi-Fi Direct&trade; Groups</a></li>  
+                       </ul></li>
+                       <li><a class="opensection" href="#deactivating">Deactivating Wi-Fi Direct&trade;</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/network/wifi_direct_n.htm">Wi-Fi Direct Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Wi-Fi Direct: Managing Wi-Fi Direct&trade;</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how to manage Wi-Fi Direct&trade; connections.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Wi-Fi Direct API basics by learning about:</p>
+               <ul>
+                       <li><a class="opensection" href="#initialization">Initializing Wi-Fi Direct&trade;</a>
+                       <p>Initialize Wi-Fi Direct&trade; for using all Wi-Fi Direct&trade; functions.</p></li>                 
+                       <li><a class="opensection" href="#activating">Activating Wi-Fi Direct&trade;</a>
+                       <p>Activate the Wi-Fi Direct&trade; local device asynchronously.</p></li>       
+                       <li>Peers and groups
+                       <ul>                    
+                       <li><a class="opensection" href="#getting_device_info">Getting the Wi-Fi Direct&trade; Peer Device Information</a>
+                       <p>Obtain the Wi-Fi Direct&trade; peer device information.</p></li>                     
+                       <li><a class="opensection" href="#connecting_device">Connecting to a Specific Wi-Fi Direct&trade; Peer Device</a>
+                       <p>Connect to a specific Wi-Fi Direct&trade; peer device.</p></li>                      
+                       <li><a class="opensection" href="#creating_group">Managing Wi-Fi Direct&trade; Groups</a>
+                       <p>Create a Wi-Fi Direct&trade; group, and manage group members and information.</p></li>
+                       </ul></li>              
+                       <li><a class="opensection" href="#deactivating">Deactivating Wi-Fi Direct&trade;</a>
+                       <p>Deactivate the Wi-Fi Direct&trade; local device asynchronously.</p></li>
+               </ul>
+       
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="initialization" name="initialization" class="items-tit-h2">Initializing Wi-Fi Direct&trade;</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To be able to use all Wi-Fi Direct&trade; functions, initialize Wi-Fi Direct&trade;:</p>
+
+<ol>
+
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;wifi_direct.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;wifi_direct.h&gt;
+</pre></li>
+<li>Call the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_initialize()</span> function:
+
+<pre class="prettyprint">
+int error_code;
+
+error_code = wifi_direct_initialize();
+</pre>
+
+<p>When Wi-Fi Direct&trade; is no longer needed (or application is exiting), release it:</p>
+
+<pre class="prettyprint">
+wifi_direct_deinitialize();
+</pre></li>
+
+<li><p>To get the Wi-Fi Direct&trade; activation and deactivation events, set up the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_device_state_changed_cb()</span> callback:</p>
+
+<pre class="prettyprint">
+int error_code;
+void device_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_device_state_e device_state, void *user_data);
+
+error_code = wifi_direct_set_device_state_changed_cb(device_state_changed_cb, NULL);
+</pre>
+
+<p>When this callback is no longer needed or the application is exiting, unset it:</p>
+<pre class="prettyprint">
+wifi_direct_unset_device_state_changed_cb(NULL);
+</pre></li>
+
+<li><p>To get the Wi-Fi Direct&trade; discovery events, set up the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_discovery_state_changed_cb</span> callback:</p>
+
+<pre class="prettyprint">
+int error_code;
+void discovery_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery_state_e discovery_state, void *user_data);
+
+error_code = wifi_direct_set_discovery_state_changed_cb (discovery_state_changed_cb, NULL);
+</pre>
+
+<p>When this callback is no longer needed or the application is exiting, unset it:</p>
+
+<pre class="prettyprint">
+wifi_direct_unset_discovery_state_changed_cb(NULL);
+</pre></li>
+
+<li><p>To get Wi-Fi Direct&trade; connection events, set up the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_connection_state_changed_cb</span> callback:</p>
+
+<pre class="prettyprint">
+int error_code;
+void connection_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_connection_state_e connection_state, void *user_data);
+
+error_code = wifi_direct_set_connection_state_changed_cb(connection_state_changed_cb, NULL);
+</pre>
+
+<p>When this callback is no longer needed or the application is exiting, unset it:</p>
+
+<pre class="prettyprint">
+wifi_direct_unset_connection_state_changed_cb(NULL);
+</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="activating" name="activating" class="items-tit-h2">Activating Wi-Fi Direct&trade;</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To activate and deactivate a Wi-Fi Direct&trade; local device and to check the Wi-Fi Direct&trade; local device state:</p>
+
+
+<ol><li>Activate a Wi-Fi Direct&trade; local device
+<p>Define the <span style="font-family: Courier New,Courier,monospace;">device_state_changed_cb()</span> callback function. When a Wi-Fi Direct&trade; local device activates or deactivates, an information message is printed in the console (or you can show it to the user some other way).</p>
+
+<pre class="prettyprint">
+static void device_state_changed_cb ((wifi_direct_error_e error_code, wifi_direct_discovery_state_e discovery_state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (device_state == WIFI_DIRECT_DEVICE_STATE_ACTIVATED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Activate Wi-Fi Direct&trade; device!\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (device_state == WIFI_DIRECT_DEVICE_STATE_DEACTIVATED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Deactivate Wi-Fi Direct&trade; device!\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li><p>Switch on the Wi-Fi Direct&trade; local device with the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_activate()</span> function. After the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_activate()</span> function is completed, the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_device_state_changed_cb()</span> callback is called, if you set it before.</p>
+
+<pre class="prettyprint">
+error_code = wifi_activate(NULL);
+</pre></li>
+
+<li>Check the Wi-Fi Direct&trade; state.
+<p>You can check the Wi-Fi Direct&trade; local device state using the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_get_state()</span> function:</p>
+
+<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);
+</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="getting_device_info" name="getting_device_info" class="items-tit-h2">Getting the Wi-Fi Direct&trade; Peer Device Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To discover nearby Wi-Fi Direct&trade; peer devices, and after discovering, to print the results of the discovery, such as Wi-Fi Direct&trade; peer device information:</p>
+
+<ol><li>Define a callback function for the discovery, to be called when the discovery state is changed.
+<p>In this tutorial, the example callback is <span style="font-family: Courier New,Courier,monospace;">discovery_state_changed_cb()</span>.</p>
+
+<pre class="prettyprint">
+void discovery_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_discovery_state_e discovery_state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;switch (discovery_state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_ONLY_LISTEN_STARTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: ONLY_LISTEN_STARTED&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCOVERY_STARTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: DISCOVERY_STARTED&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCOVERY_FOUND:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: DISCOVERY_FOUND&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCOVERY_FINISHED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: DISCOVERY_FINISHED&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;UNKNOWN_DISCOVERY_STATE&quot;;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return &quot;UNKNOWN_DISCOVERY_STATE&quot;;
+}
+</pre></li>
+
+<li>Start the discovery to scan nearby devices.
+<p>When the Wi-Fi Direct&trade; discovery state changes, the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_discovery_state_changed_cb()</span> function is called.</p>
+
+<pre class="prettyprint">
+wifi_direct_start_discovery (false, 0);
+</pre></li>
+
+<li>Show the search results.
+
+<p>Show the discovery result using the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_discovered_peer_cb()</span> callback, which is invoked by the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_foreach_discovered_peers()</span> function. In this tutorial, the Wi-Fi Direct&trade; peer device information is printed.</p>
+
+<pre class="prettyprint">
+bool discovered_peer_cb(wifi_direct_discovered_peer_info_s *peer, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (NULL != peer) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nDevice Name: %s&quot;, peer-&gt;device_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nMac Address: %s&quot;, peer-&gt;mac_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+}
+int rv = wifi_direct_foreach_discovered_peers(discovered_peer_cb, NULL);
+</pre>
+
+<p>You can also get other information, including the connection state, device type, Wi-Fi display information, and WPS type.</p></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="connecting_device" name="connecting_device" class="items-tit-h2">Connecting to a Specific Wi-Fi Direct&trade; Peer Device</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To connect to a specific device:</p>
+
+<ol><li>Define the callback function for the connection state.
+
+<p>The connection event received from the Wi-Fi Direct&trade; framework invokes the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_connection_state_changed_cb()</span> callback function. This example defines the <span style="font-family: Courier New,Courier,monospace;">connection_state_changed_cb()</span> callback to handle all Wi-Fi Direct&trade; connection events.</p>
+
+<pre class="prettyprint">
+static void connection_state_changed_cb(wifi_direct_error_e error_code, wifi_direct_connection_state_e connection_state, const char *mac_address, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Connection state changed to: [%d] [%s]\n&quot;, connection_state, test_wfd_convert_connection_state_to_string(connection_state));
+
+&nbsp;&nbsp;&nbsp;bool accept_connection = false;
+&nbsp;&nbsp;&nbsp;int rv = 0;
+
+&nbsp;&nbsp;&nbsp;switch (connection_state)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_WPS_REQ:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Outgoing requests
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_wps_type_e wps_mode;
+&nbsp;&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;&nbsp;// Handle the event      
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_REQ:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Incoming requests
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_wps_type_e wps_mode;
+&nbsp;&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;&nbsp;// Handle the event      
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_INVITATION_REQ:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Invitation request from peer
+&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;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISASSOCIATION_IND:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_IND:
+&nbsp;&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;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_IN_PROGRESS:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Connection in progress\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_RSP:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_GROUP_CREATED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_GROUP_DESTROYED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_RSP:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Unknown State Received\n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>Connect with a Wi-Fi Direct&trade; peer device.
+
+<p>Check whether Wi-Fi Direct&trade; is activated using the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_get_state()</span> function, and then get the specific device address from the user. Call the <span style="font-family: Courier New,Courier,monospace;">wifi_direct_foreach_discovered_peers()</span> function to get a specific device address as a result of the device discovering process.</p>
+
+<pre class="prettyprint">
+char * mac_address = NULL;
+wifi_direct_state_e state;
+int error_code;
+
+wifi_direct_get_state(&amp;state);
+if (state &lt; WIFI_DIRECT_STATE_ACTIVATED)
+&nbsp;&nbsp;&nbsp;return -1;
+       
+mac_address = calloc(1, 32*sizeof(char));
+if (!mac_address) 
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;cannot allocate memory&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+printf(&quot;\nEnter Mac_address: &quot;);
+if (scanf(&quot; %s&quot;, mac_address) &lt; 1) 
+{
+&nbsp;&nbsp;&nbsp;free(mac_address);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+if (strlen(mac_address) &gt; 23)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;\nWrong Mac_address&quot;);
+}
+
+error_code = wifi_direct_connect(mac_address);
+if (error_code != WIFI_DIRECT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Fail to connect\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+printf(&quot;Connection step finished\n&quot;);
+</pre></li>
+
+<li>Disconnect from a specific Wi-Fi Direct&trade; device:
+
+<pre class="prettyprint">
+char * mac_address = NULL;
+wifi_direct_state_e state;
+int error_code;
+
+wifi_direct_get_state(&amp;state);
+if (state &lt; WIFI_DIRECT_STATE_ACTIVATED)
+&nbsp;&nbsp;&nbsp;return -1;
+       
+mac_address = calloc(1, 32*sizeof(char));
+if (!mac_address) 
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;cannot allocate memory&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+printf(&quot;\nEnter Mac_address: &quot;);
+if (scanf(&quot; %s&quot;, mac_address) &lt; 1) 
+{
+&nbsp;&nbsp;&nbsp;free(mac_address);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+if (strlen(mac_address) &gt; 23)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;\nWrong Mac_address&quot;);
+}
+
+error_code = wifi_direct_disconnect(mac_address);
+if (error_code != WIFI_DIRECT_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Fail to disconnect\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+printf(&quot;Disconnection step finished\n&quot;);
+</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="creating_group" name="creating_group" class="items-tit-h2">Managing Wi-Fi Direct&trade; Groups</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create an autonomous Wi-Fi Direct&trade; group without connection and to make your device an autonomous group owner:</p>
+
+<ol><li>Create a Wi-Fi Direct&trade; group and become a group owner:
+
+<pre class="prettyprint">
+wifi_direct_state_e state;
+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;return -1;
+}
+
+error_code = wifi_direct_create_group();
+if(error_code != WIFI_DIRECT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Fail to create wifi direct group\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+printf(&quot;Connection step finished\n&quot;);
+</pre></li>
+
+<li>Destroy all connections and the group:
+
+<pre class="prettyprint">
+wifi_direct_state_e state;
+int error_code;
+
+wifi_direct_get_state(&amp;state);
+if(state &lt; WIFI_DIRECT_STATE_CONNECTED) 
+{
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+error_code = wifi_direct_destroy_group();
+if(error_code != WIFI_DIRECT_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Fail to destroy wifi direct group\n&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+printf(&quot;Disconnection step finished\n&quot;);
+</pre></li>
+<li>When Wi-Fi Direct&trade; connections or group is no longer needed, destroy all the Wi-Fi Direct&trade; connections and group.</li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="deactivating" name="deactivating" class="items-tit-h2">Deactivating Wi-Fi Direct&trade;</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To power off the local device when Wi-Fi Direct&trade; is no longer needed (or the application is exiting), use the <span style="font-family: Courier New,Courier,monospace">wifi_direct_deactivate()</span> function:</p>
+
+<pre class="prettyprint">
+wifi_direct_deactivate(NULL);
+</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
new file mode 100644 (file)
index 0000000..6d279ac
--- /dev/null
+++ b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
@@ -0,0 +1,350 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Wi-Fi: Managing Wi-Fi and Monitoring Its State</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Wi-Fi</a></li>
+                       <li><a class="opensection" href="#activate">Activating a Wi-Fi Device</a></li>
+                       <li><a class="opensection" href="#scan">Scanning for Access Points</a></li>
+                       <li><a class="opensection" href="#connect">Connecting to a Specific Access Point</a></li>
+                       <li><a class="opensection" href="#deactivate">Deactivating the Wi-Fi Device</a></li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/network/wifi_n.htm">Wi-Fi Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Wi-Fi: Managing Wi-Fi and Monitoring Its State</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can manage Wi-Fi connections and monitor the state of Wi-Fi.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Wi-Fi API basics by learning about: </p>
+               <ul>
+                       <li><a class="opensection" href="#init">Initializing Wi-Fi</a><p>Initialize Wi-Fi for use.</p></li>
+                       <li><a class="opensection" href="#activate">Activating a Wi-Fi Device</a><p>Activate the Wi-Fi device asynchronously.</p></li>
+                       <li><a class="opensection" href="#scan">Scanning for Access Points</a><p>Scan the nearby access points and retrieve information about them.</p></li>
+                       <li><a class="opensection" href="#connect">Connecting to a Specific Access Point</a><p>Connect to a specific access point after scanning.</p></li>
+                       <li><a class="opensection" href="#deactivate">Deactivating the Wi-Fi Device</a><p>Deactivate the Wi-Fi device asynchronously.</p></li>
+               </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Wi-Fi</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;wifi.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;wifi.h&gt;
+</pre>
+<p>To be able to use all Wi-Fi functions, initialize Wi-Fi using the <span style="font-family: Courier New,Courier,monospace;">wifi_initialize()</span> function:</p>
+
+<pre class="prettyprint">
+int error_code;
+
+error_code = wifi_initialize();
+if (error_code != WIFI_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;return;
+</pre>
+
+<p>When Wi-Fi is no longer needed or the application is exiting, release Wi-Fi:</p>
+
+<pre class="prettyprint">
+wifi_deinitialize();
+</pre>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="activate" name="activate" class="items-tit-h2">Activating a Wi-Fi Device</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To activate and deactivate a local Wi-Fi device, and to check that Wi-Fi is activated:</p>
+
+<ol><li>Activate a Wi-Fi device using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> function. After the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> function is completed, the <span style="font-family: Courier New,Courier,monospace">__wifi_activated_cb()</span> function is invoked.
+ 
+<pre class="prettyprint">
+error_code = wifi_activate(__wifi_activated_cb, NULL);
+</pre>
+
+<p>Define the <span style="font-family: Courier New,Courier,monospace">__wifi_activated_cb()</span> function for a callback. In case of Wi-Fi device activation, an information message is printed using dlog util (or shown to the user in another way).</p>
+
+<pre class="prettyprint">
+static void __wifi_activated_cb(wifi_error_e result, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result == WIFI_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success to activate Wi-Fi device!&quot;);
+}
+</pre></li>
+
+<li>Check the Wi-Fi connection using the <span style="font-family: Courier New,Courier,monospace">wifi_is_activated()</span> function. The parameter indicates, whether Wi-Fi is activated.
+
+<pre class="prettyprint">
+bool wifi_activated = false;
+wifi_is_activated(&amp;wifi_activated);
+if (wifi_activated)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success to get Wi-Fi device state.&quot;);
+}
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to get Wi-Fi device state.&quot;);
+}
+</pre></li></ol>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="scan" name="scan" class="items-tit-h2">Scanning for Access Points</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To scan nearby access points, and after scanning, to print the result of the scan, such as the AP name and state:</p>
+
+<ol><li>Scan nearby access points asynchronously. When the scan is finished, the <span style="font-family: Courier New,Courier,monospace">__scan_request_cb()</span> function is called.
+ 
+<pre class="prettyprint">
+wifi_scan(__scan_request_cb, NULL);
+</pre></li>
+
+<li>Define a callback function to be called when the scan is finished. In this tutorial, the callback is the <span style="font-family: Courier New,Courier,monospace">__scan_request_cb()</span> function. It invokes the <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function for getting information on the found AP. The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function gets the result of the scan. The <span style="font-family: Courier New,Courier,monospace">__wifi_found_ap_cb()</span> function is called when you get the found access point repeatedly.
+ 
+<pre class="prettyprint">
+void __scan_request_cb(wifi_error_e error_code, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;error_code = wifi_foreach_found_aps(__wifi_found_ap_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to scan&quot;);
+}
+</pre></li>
+
+<li>Show the result of the scan using the <span style="font-family: Courier New,Courier,monospace">__wifi_found_ap_cb()</span> callback function, which is invoked by the <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function. In this tutorial, print the AP name and connection state.
+
+<pre class="prettyprint">
+bool __wifi_found_ap_cb(wifi_ap_h ap, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;int error_code = 0;
+&nbsp;&nbsp;&nbsp;char *ap_name = NULL;
+&nbsp;&nbsp;&nbsp;wifi_connection_state_e state;
+
+
+&nbsp;&nbsp;&nbsp;error_code = wifi_ap_get_essid(ap, &amp;ap_name);
+&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to get AP name.&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;error_code = wifi_ap_get_connection_state(ap, &amp;state);
+&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to get state.&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;AP name : %s, state : %s&quot;, ap_name, print_state(state));
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static const char* print_state(wifi_connection_state_e state) 
+{
+&nbsp;&nbsp;&nbsp;switch (state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_DISCONNECTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Disconnected&quot;;
+&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_ASSOCIATION:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Association&quot;;
+&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_CONNECTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Connected&quot;;
+&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_CONFIGURATION:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Configuration&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>You can get other information, including frequency, IP address, and security type. For more information, see the <a href="../../../../org.tizen.guides/html/native/network/wifi_n.htm">Wi-Fi</a> guide.</p></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="connect" name="connect" class="items-tit-h2">Connecting to a Specific Access Point</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To make a connection using a specific access point:</p>
+
+<ol><li>Select an access point.
+<p>Check whether Wi-Fi is activated using the <span style="font-family: Courier New,Courier,monospace">wifi_is_activated()</span> function, and then receive the specific AP name from the user. Call the <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function to compare the AP name with the result of the scan and connecting to the AP.</p>
+
+<pre class="prettyprint">
+char ap_name[33];
+bool state = false;
+
+wifi_is_activated(&amp;state);
+if (state == false)
+&nbsp;&nbsp;&nbsp;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);
+
+error_code = wifi_foreach_found_aps(__found_connect_ap_cb, ap_name);
+if (error_code != WIFI_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to connect (can’t get AP list)&quot;);
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+
+dlog_print(DLOG_INFO, LOG_TAG, &quot;Connection step finished&quot;);
+</pre></li>
+
+<li>Make a connection with an access point.
+<p>The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function called above invokes a callback function, which is <span style="font-family: Courier New,Courier,monospace">__found_connect_ap_cb()</span>. Define the <span style="font-family: Courier New,Courier,monospace">__found_connection_ap_cb()</span> callback. This function compares <span style="font-family: Courier New,Courier,monospace">user_data</span> (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 <span style="font-family: Courier New,Courier,monospace">wifi_ap_set_passphrase()</span> function.</p> 
+<p>Finally, connect to a specific AP using the <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function.</p>
+
+<pre class="prettyprint">
+static bool __found_connect_ap_cb(wifi_ap_h ap, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;int error_code = 0;
+&nbsp;&nbsp;&nbsp;char *ap_name = NULL;
+&nbsp;&nbsp;&nbsp;char *ap_name_part = (char*)user_data;
+
+&nbsp;&nbsp;&nbsp;error_code = wifi_ap_get_essid(ap, &amp;ap_name);
+&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to get AP name&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (strstr(ap_name, ap_name_part) != NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool required = false;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (wifi_ap_is_passphrase_required(ap, &amp;required) == WIFI_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Passphrase required: %s&quot;, required ? &quot;True&quot; : &quot;False&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to get Passphrase required&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (required) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char passphrase[100];
+&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;error_code = scanf(&quot;99%s&quot;, passphrase);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_ap_set_passphrase(ap, passphrase);
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to set passphrase&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_connect(ap, __connected_cb, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Fail to connection request&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success to connection request&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(ap_name);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;free(ap_name);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li>Provide a notification about the result of the connection.
+<p>The <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function called earlier invokes the <span style="font-family: Courier New,Courier,monospace">__connected_cb()</span> function. With this function, you can provide the result of the connection.</p>
+
+<pre class="prettyprint">
+static void __connected_cb(wifi_error_e result, void* user_data) 
+{
+&nbsp;&nbsp;&nbsp;if (result == WIFI_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Wi-Fi Connection Succeeded&quot;);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Wi-Fi Connection Failed!&quot;);
+}
+</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="deactivate" name="deactivate" class="items-tit-h2">Deactivating the Wi-Fi Device</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To power off the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> function:</p>
+<pre class="prettyprint">
+wifi_deactivate(NULL, NULL);
+</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
new file mode 100644 (file)
index 0000000..5f8f9cc
--- /dev/null
+++ b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
@@ -0,0 +1,1098 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Key Manager: Using Keys and Certificates, and Implementing Access Control</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#initialize">Initializing the Key Manager</a></li>
+                       <li>Repository management
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#savingkey">Saving, Getting, or Removing a Key</a></li>
+                                       <li><a class="opensection" href="#savingcert">Saving, Getting, or Removing a Certificate</a></li>
+                                       <li><a class="opensection" href="#savingdata">Saving, Getting, or Removing Data</a></li>
+                               </ul>
+                       </li>
+                       <li><a class="opensection" href="#creatingkey">Creating Key Pairs</a></li>
+                       <li><a class="opensection" href="#creatingsignat">Creating or Verifying Signatures</a></li>
+                       <li><a class="opensection" href="#verifying">Verifying or Getting a Certificate Chain</a></li>
+                       <li><a class="opensection" href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>
+                       <li><a class="opensection" href="#access">Implementing Access Control</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/security/key_manager_n.htm">Key Manager Guide</a></li>
+                       <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Key Manager: Using Keys and Certificates, and Implementing Access Control</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can use the key manager to create a secure repository for keys, certificates, and sensitive data.</p>
+
+
+       <h2>Warm-up</h2>
+       <p>Become familiar with the Key Manager API basics by learning about:</p>
+<ul>
+<li><a href="#initialize">Initializing the Key Manager</a>
+<p>Define the header file and privileges required to use the key manager.</p></li>
+
+<li>Repository management
+       <ul>
+               <li><a href="#savingkey">Saving, Getting, or Removing a Key</a>
+               <p>Store, get, or remove a key.</p></li>
+
+               <li><a href="#savingcert">Saving, Getting, or Removing a Certificate</a>
+               <p>Store, get, or remove a certificate.</p></li>
+
+               <li><a href="#savingdata">Saving, Getting, or Removing Data</a>
+               <p>Store, get, or remove data.</p></li>
+       </ul>
+</li>
+<li><a href="#creatingkey">Creating Key Pairs</a>
+<p>Create an RSA/ECDSA private or public key pair and store it inside the key manager.</p></li>
+
+<li><a href="#creatingsignat">Creating or Verifying Signatures</a>
+<p>Create or verify a signature on a given message.</p></li>
+
+<li><a href="#verifying">Verifying or Getting a Certificate Chain</a>
+<p>Verify a certificate chain and get it.</p></li>
+
+<li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a>
+<p>Load a certificate or key from a certificate file or a <span style="font-family: Courier New,Courier,monospace;">PKCS#12</span> file.</p></li>
+
+<li><a href="#access">Implementing Access Control</a>
+<p>Set access control rules for each individual client&#39;s data, certificates, and keys.</p></li>
+</ul>
+               
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="initialize" name="initialize" class="items-tit-h2">Initializing the Key Manager</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To define the header file and privileges required to use the key manager:</p>
+<ol>           
+<li><p>To use the Key Manager privileged API, declare the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span> privilege in the <span style="font-family: Courier New,Courier,monospace;">&lt;package name&gt;.xml</span> file of the application package.</p></li>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;ckmc/ckmc-manager.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;ckmc/ckmc-manager.h&gt;
+</pre></li></ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="savingkey" name="savingkey" class="items-tit-h2">Saving, Getting, or Removing a Key</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To store, remove, and retrieve client keys from the key manager:</p>
+
+<ol><li>Store a new key.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_key_s test_key;
+ckmc_policy_s store_policy;
+char* alias= &quot;mykey&quot;;
+char* key_password = NULL;
+
+char* binary_key = &quot;-----BEGIN PUBLIC KEY-----\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----&quot;;
+
+test_key.raw_key =  (unsigned char *) binary_key;
+test_key.key_size = strlen(binary_key);
+test_key.key_type = CKMC_KEY_NONE; // The real key type is determined by the key manager
+test_key.password = NULL; // This means the binary_key is not encrypted with any password
+
+store_policy.password = key_password; // NULL means that the test_key is not encrypted with a per key password
+store_policy.extractable = true; // This means that the key value is extractable
+
+ret = ckmc_save_key(alias, test_key, store_policy);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+
+<li>Get a key from the key manager.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_key_s *test_key;
+char* alias= &quot;mykey&quot;;
+char* key_password = NULL;
+
+ret = ckmc_get_key(alias, key_password, &amp;test_key);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+dlog_print(DLOG_INFO, LOG_TAG, &quot;key size =%d\n&quot;, test_key-&gt;key_size);
+
+ckmc_key_free(test_key); // Called when the key is no longer needed
+</pre></li>
+
+<li>Get the key alias list.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_alias_list_s *alias_list;
+ckmc_alias_list_s *plist;
+ckmc_key_s *test_key;
+char* key_password = NULL;
+int count_list = 0;
+
+ret = ckmc_get_key_alias_list(&amp;alias_list);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+plist = alias_list;
+do
+{
+&nbsp;&nbsp;&nbsp;ckmc_get_key(plist-&gt;alias, key_password, &amp;test_key);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th key : key size =%d\n&quot;, ++count_list, test_key->key_size);
+&nbsp;&nbsp;&nbsp;ckmc_key_free(test_key);
+&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
+}
+while(plist != NULL);
+
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed.
+</pre></li>
+<li>Remove the key.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+const char* alias= &quot;mykey&quot;;
+
+ret = ckmc_remove_key(alias);
+if (CKMC_ERROR_NONE != ret) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li></ol>
+
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="savingcert" name="savingcert" class="items-tit-h2">Saving, Getting, or Removing a Certificate</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To store, remove, or retrieve the client certificate from the key manager:</p>
+
+<ol><li>Store a new certificate.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+char* password = NULL;
+ckmc_cert_s cert;
+const char *alias = &quot;myCert&quot;;
+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;;
+
+test_policy.password = password;
+test_policy.extractable = true;
+
+cert.raw_cert =  (unsigned char *) certPem;
+cert.cert_size = strlen(certPem);
+cert.data_format = CKMC_FORM_PEM;
+
+ret = ckmc_save_cert(alias, cert, test_policy);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+
+<li>Get a certificate from the key manager.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_cert_s *test_cert;
+char* alias= &quot;myCert&quot;;
+char* password = NULL;
+
+ret = ckmc_get_cert(alias, password, &amp;test_cert);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, test_cert-&gt;cert_size);
+
+ckmc_cert_free(test_cert); // Called when the certificate is no longer needed
+</pre></li>
+<li>Get the certificate alias list.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_alias_list_s *alias_list;
+ckmc_alias_list_s *plist;
+ckmc_cert_s *test_cert;
+char* password = NULL;
+int count_list = 0;
+
+ret = ckmc_get_cert_alias_list(&amp;alias_list);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+plist = alias_list;
+do
+{
+&nbsp;&nbsp;&nbsp;ckmc_get_cert(plist-&gt;alias, password, &amp;test_cert);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th cert : cert size =%d\n&quot;, ++count_list, test_cert-&gt;cert_size);
+&nbsp;&nbsp;&nbsp;ckmc_cert_free(test_cert);
+&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
+}
+while(plist != NULL);
+
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed
+</pre></li>
+
+<li>Remove the certificate.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+const char* alias= &quot;myCert&quot;;
+
+ret = ckmc_remove_cert(alias);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li></ol>
+
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="savingdata" name="savingdata" class="items-tit-h2">Saving, Getting, or Removing Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To store, remove, or retrieve client data on or from the key manager:</p>
+
+<ol><li>Store new data.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+char* password = NULL;
+ckmc_raw_buffer_s test_data;
+const char *alias = &quot;myData&quot;;
+ckmc_policy_s test_policy;
+
+const char *char_bin_data = &quot;My Binary Data&quot;;
+
+test_policy.password = password;
+test_policy.extractable = true;
+
+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;// Error handling
+}
+</pre></li>
+
+<li>Get data from the key manager.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+char* password = NULL;
+ckmc_raw_buffer_s *test_data;
+const char *alias = &quot;myData&quot;;
+
+ret = ckmc_get_data(alias, password, &amp;test_data);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+dlog_print(DLOG_INFO, LOG_TAG, &quot;data size =%d\n&quot;, test_data-&gt; size);
+
+ckmc_buffer_free(test_data); // Called when the buffer is no longer needed
+</pre></li>
+
+<li>Get the data alias list.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_alias_list_s *alias_list;
+ckmc_alias_list_s *plist;
+ckmc_raw_buffer_s *test_data;
+char* password = NULL;
+int count_list = 0;
+
+ret = ckmc_get_data_alias_list(&amp;alias_list);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+plist = alias_list;
+do
+{
+&nbsp;&nbsp;&nbsp;ckmc_get_data(plist-&gt;alias, password, &amp;test_data);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th data : data size =%d\n&quot;, ++count_list, test_data-&gt;size);
+&nbsp;&nbsp;&nbsp;ckmc_buffer_free(test_data);
+&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
+}
+while(plist != NULL);
+
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed
+</pre></li>
+<li>Remove data.
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+const char* alias= &quot;myData&quot;;
+
+ret = ckmc_remove_data(alias);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li></ol>
+
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="creatingkey" name="creatingkey" class="items-tit-h2">Creating Key Pairs</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:</p>
+
+<ul class="ul"><li><p>Create the RSA key pair:</p>
+<pre class="prettyprint">
+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;;
+ckmc_policy_s policy_private_key;
+ckmc_policy_s policy_public_key;
+
+// This private key is encrypted with a password additionally
+policy_private_key.password = (char *)&quot;pri_password&quot;;
+policy_private_key.extractable = false; // This key cannot be extracted from the key manager
+
+policy_public_key.password = NULL;
+policy_public_key.extractable = true;
+
+ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+
+<li><p>Create the ECDSA key pair:</p>
+<pre class="prettyprint">
+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;;
+ckmc_policy_s policy_private_key;
+ckmc_policy_s policy_public_key;
+
+// This private key is encrypted with the password additionally
+policy_private_key.password = (char *)&quot;pri_password&quot;;
+policy_private_key.extractable = false; // This key cannot be extracted from the key manager
+
+policy_public_key.password = NULL;
+policy_public_key.extractable = true;
+
+ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+
+<li><p>Create the DSA  key pair:</p>
+<pre class="prettyprint">
+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;;
+ckmc_policy_s policy_private_key;
+ckmc_policy_s policy_public_key;
+
+// This private key is encrypted with a password additionally
+policy_private_key.password = (char *)&quot;pri_password&quot;;
+policy_private_key.extractable = false;
+
+policy_public_key.password = NULL;
+policy_public_key.extractable = true;
+
+ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
+if(CKMC_ERROR_NONE != ret)
+
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li></ul>
+
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="creatingsignat" name="creatingsignat" class="items-tit-h2">Creating or Verifying Signatures</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       <p>To create or verify signatures:</p>
+<ol><li>Store a private and public key.
+<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;;
+char *pri_passwd = NULL;
+char *pub_passwd = NULL;
+ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;
+ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;
+ckmc_raw_buffer_s *signature;
+
+ckmc_key_s pubkey;
+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;&quot;Proc-Type: 4,ENCRYPTED\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;DEK-Info: DES-EDE3-CBC,6C6507B11671DABC\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;YiKNviNqc/V/i241CKtAVsNckesE0kcaka3VrY7ApXR+Va93YoEwVQ8gB9cE/eHH\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;S0j3ZS1PAVFM/qo4ZnPdMzaSLvTQw0GAL90wWgF3XQ+feMnWyBObEoQdGXE828TB\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;SLz4UOIQ55Dx6JSWTfEhwAlPs2cEWD14xvuxPzAEzBIYmWmBBsCN94YgFeRTzjH0\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;TImoYVMN60GgOfZWw6rXq9RaV5dY0Y6F1piypCLGD35VaXAutdHIDvwUGECPm7SN\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;w05jRro53E1vb4mYlZEY/bs4q7XEOI5+ZKT76Xn0oEJNX1KRL1h2q8fgUkm5j40M\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;uQj71aLR9KyIoQARwGLeRy09tLVjH3fj66CCMqaPcxcIRIyWi5yYBB0s53ipm6A9\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;CYuyc7MS2C0pOdWKsDvYsHR/36KUiIdPuhF4AbaTqqO0eWeuP7Na7dGK56Fl+ooi\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;cUpJr7cIqMl2vL25B0jW7d4TB3zwCEkVVD1fBPeNoZWo30z4bILcBqjjPkQfHZ2e\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;xNraG3qI4FHjoPT8JEE8p+PgwaMoINlICyIMKiCdvwz9yEnsHPy7FkmatpS+jFoS\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;mg8R9vMwgK/HGEm0dmb/7/a0XsG2jCDm6cOmJdZJFQ8JW7hFs3eOHpNlQYDChG2D\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;A1ExslqBtbpicywTZhzFdYU/hxeCr4UqcY27Zmhr4JlBPMyvadWKeOqCamWepjbT\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;T/MhWJbmWgZbI5s5sbpu7cOYubQcUIEsTaQXGx/KEzGo1HLn9tzSeQfP/nqjAD/L\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;T5t1Mb8o4LuV/fGIT33Q3i2FospJMqp2JINNzG18I6Fjo08PTvJ3row40Rb76+lJ\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;wN1IBthgBgsgsOdB6XNc56sV+uq2TACsNNWw+JnFRCkCQgfF/KUrvN+WireWq88B\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;9UPG+Hbans5A6K+y1a+bzfdYnKws7x8wNRyPxb7Vb2t9ZTl5PBorPLVGsjgf9N5X\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;tCdBlfJsUdXot+EOxrIczV5zx0JIB1Y9hrDG07RYkzPuJKxkW7skqeLo8oWGVpaQ\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;LGWvuebky1R75hcSuL3e4QHfjBHPdQ31fScB884tqkbhBAWr2nT9bYEmyT170bno\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;8QkyOSb99xZBX55sLDHs9p61sTJr2C9Lz/KaWQs+3hTkpwSjSRyjEMH2n491qiQX\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;G+kvLEnvtR8sl9zinorj/RfsxyPntAxudfY3qaYUu2QkLvVdfTVUVbxS/Fg8f7B3\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;hEjCtpKgFjPxQuHE3didNOr5xM7mkmLN/QA7yHVgdpE64T5mFgC3JcVRpcR7zBPH\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;3OeXHgjrhDfN8UIX/cq6gNgD8w7O0rhHa3mEXI1xP14ykPcJ7wlRuLm9P3fwx5A2\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;jQrVKJKw1Nzummmspn4VOpJY3LkH4Sxo4e7Soo1l1cxJpzmERwgMF+vGz1L70+DG\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;M0hVrz1PxlOsBBFgcdS4TB91DIs/RcFDqrJ4gOPNKCgBP+rgTXXLFcxUwJfE3lKg\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;Kmpwdne6FuQYX3eyRVAmPgOHbJuRQCh/V4fYo51UxCcEKeKy6UgOPEJlXksWGbH5\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;VFmlytYW6dFKJvjltSmK6L2r+TlyEQoXwTqe4bkfhB2LniDEq28hKQ==\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;-----END RSA PRIVATE KEY-----\n&quot;;
+
+const char *pub = &quot;-----BEGIN PUBLIC KEY-----\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;
+&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----\n&quot;;
+pubkey.raw_key = (unsigned char *)pub;
+pubkey.key_size = strlen(pub);
+pubkey.key_type = CKMC_KEY_NONE;
+pubkey.password = NULL;
+
+pubpolicy.password = pub_passwd;
+pubpolicy.extractable = false;
+
+pripolicy.password = pri_passwd;
+pripolicy.extractable = true;
+
+prikey.raw_key = (unsigned char *)prv;
+prikey.key_size = strlen(prv);
+prikey.key_type = CKMC_KEY_NONE;
+prikey.password = key_passwd; // The private key, prv, is encrypted with the key_password
+
+ret = ckmc_save_key(pri_alias, prikey, pripolicy);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+ret = ckmc_save_key(pub_alias, pubkey, pubpolicy);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+
+<li>Create and verify the signature:
+<ul class="ul">
+<li>Create and verify using a hash algorithm:
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+const char *message = &quot;message test&quot;;
+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;;
+char *pri_passwd = NULL;
+char *pub_passwd = NULL;
+
+msg_buff.data = (unsigned char *)message;
+msg_buff.size = strlen(message);
+
+ret = ckmc_create_signature (pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &amp;signature);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+ret = ckmc_verify_signature (pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// 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;;
+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;;
+char *pri_passwd = NULL;
+char *pub_passwd = NULL;
+
+msg_buff.data = (unsigned char *)message;
+msg_buff.size = strlen(message);
+
+ret = ckmc_create_signature (pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &amp;signature);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+ret = ckmc_verify_signature (pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+</ul>
+</li></ol>
+
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="verifying" name="verifying" class="items-tit-h2">Verifying or Getting a Certificate Chain</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+                       <p>To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:</p>
+<ul class="ul"><li><p>Get a certificate chain with raw certificates.</p>
+<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_cert_s c_cert; // For a user certificate
+ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate
+ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificate
+ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain
+
+int cnt = 0;
+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;;
+
+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;;
+
+c_cert.raw_cert = (unsigned char *) ee;
+c_cert.cert_size = strlen(ee);
+c_cert.data_format = CKMC_FORM_PEM;
+
+c_cert1.raw_cert = (unsigned char *) im;
+c_cert1.cert_size = strlen(im);
+c_cert1.data_format = CKMC_FORM_PEM;
+
+untrustedcerts.cert = &amp;c_cert1;
+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;// Error handling
+}
+
+next=cert_chain_list;
+do
+{
+&nbsp;&nbsp;&nbsp;current = next;
+&nbsp;&nbsp;&nbsp;next = current-&gt;next;
+}
+while(next != NULL);
+
+ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed
+</pre></li>
+
+<li><p>Get a certificate chain with aliases of untrusted CA certificates.</p>
+<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+char* password = NULL;
+const char *ca_alias = &quot;untrusted_ca_cert1&quot;;
+ckmc_policy_s test_policy;
+
+ckmc_cert_s c_cert; // For a user certificate
+ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate
+ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate&#39;s alias
+ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain
+
+int cnt = 0;
+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;;
+
+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;;
+
+c_cert.raw_cert = (unsigned char *) ee;
+c_cert.cert_size = strlen(ee);
+c_cert.data_format = CKMC_FORM_PEM;
+
+c_cert1.raw_cert = (unsigned char *) im;
+c_cert1.cert_size = strlen(im);
+c_cert1.data_format = CKMC_FORM_PEM;
+
+test_policy.password = password;
+test_policy.extractable = true;
+
+ret = ckmc_save_cert(ca_alias, c_cert1, test_policy);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// 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;// Error handling
+}
+
+next=cert_chain_list;
+do
+{
+&nbsp;&nbsp;&nbsp;current = next;
+&nbsp;&nbsp;&nbsp;next = current-&gt;next;
+}
+while(next != NULL);
+
+ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed
+</pre></li></ul>
+            </div>
+        </li>          
+               <li>
+            <div class="devicespec-tit">
+                <h2 id="pkcs" name="pkcs" class="items-tit-h2">Loading a Certificate or a PKCS#12 File</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To load certificates (from a file with the DER or PEM format) or a private key, a certificate, or CA certificates (from a PKCS#12 file):</p>
+
+<ul class="ul"><li><p>Load from a certificate file.</p>
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_cert_s *pcert;
+const char *file_name = &quot;/tmp/ckmc_test_cert.pem&quot;;
+
+ret = ckmc_load_cert_from_file(file_name, &amp;pcert);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, pcert-&gt;cert_size);
+
+ckmc_cert_free(pcert); // Called when the certificate is no longer needed
+</pre></li>
+
+<li><p>Load from a PKCS#12 file.</p>
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+ckmc_key_s *private_key = NULL;
+ckmc_cert_s *cert = NULL;
+ckmc_cert_list_s *ca_cert_list = NULL;
+const char *p12file = &quot;/tmp/ckmc_p12_test.p12&quot;;
+const char *password = &quot;password&quot;;  // PKCS#12 file can be protected by a password
+
+ret = ckmc_load_from_pkcs12_file(p12file, password, &amp;private_key, &amp;cert, &amp;ca_cert_list);
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+if (private_key != NULL)
+{
+&nbsp;&nbsp;&nbsp;// Check a private key
+}
+
+if (cert != NULL)
+{
+&nbsp;&nbsp;&nbsp;// Check a certificate
+
+}
+
+int cnt = 0;
+ckmc_cert_list_s *tmp_list = ca_cert_list;
+while(tmp_list!= NULL)
+{
+&nbsp;&nbsp;&nbsp;// Check a certificate list
+
+&nbsp;&nbsp;&nbsp;tmp_list = tmp_list -&gt;next;
+}
+
+ckmc_key_free(private_key); // Called when the key is no longer needed
+ckmc_cert_free(cert); // Called when the certificate is no longer needed
+ckmc_cert_list_all_free(ca_cert_list); // Called when the list is no longer needed
+</pre></li></ul>
+
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="access" name="access" class="items-tit-h2">Implementing Access Control</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To implement access control rules for each individual client&#39;s data, certificates, and keys:</p>
+
+<ol><li><p>Store test data:</p>
+<pre class="prettyprint">
+int ret = CKMC_ERROR_NONE;
+
+char* password = NULL;
+ckmc_raw_buffer_s test_data;
+const char *alias = &quot;targetData&quot;;
+ckmc_policy_s test_policy;
+
+const char *char_bin_data = &quot;Access control test Data&quot;;
+
+test_policy.password = password;
+test_policy.extractable = true;
+
+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;// 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;;
+
+ret = ckmc_allow_access(alias, target1, CKMC_AR_READ); // Only allow reading data
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+ret = ckmc_allow_access(alias, target2, CKMC_AR_READ_REMOVE); // Allow reading and deleting data
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// 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;;
+
+ret = ckmc_allow_access(alias, target, CKMC_AR_READ); // Allow the target user to a read (alias)
+if (CKMC_ERROR_NONE != ret)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+
+ret = ckmc_deny_access(alias, target); // Deny the target user access to data (alias)
+if (CKMC_ERROR_NONE != ret)
+
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre></li>
+</ol>
+
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+ 
+ </body>
+ </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
new file mode 100644 (file)
index 0000000..06c1b08
--- /dev/null
+++ b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
@@ -0,0 +1,168 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Privilege Info: Managing Privilege Information</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a class="opensection" href="#get">Getting Privilege Information</a></li>
+        </ul>          
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/security/privilege_n.htm">Privilege Info Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Privilege Info: Managing Privilege Information</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can display privilege information, such as the name and description of a given privilege.</p>
+
+       <h2 id="warm-up" name="warm-up">Warm-up</h2>
+       <p>
+       Become familiar with the Privilege Info API basics by learning about:</p>
+       <ul>
+               <li><a href="#get">Getting Privilege Information</a>
+               <p>Get privilege information, such as the display name and description of a privilege.</p></li>
+       </ul>  
+
+ <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="get" name="get" class="items-tit-h2">Getting Privilege Information</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>To get privilege display information:</p>
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;privilege_information.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;privilege_information.h&gt;
+</pre></li>
+<li>To get various privilege information:
+<ol>
+
+               <li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function:
+               
+               <pre class="prettyprint">
+char* displayName = NULL;
+int retVal = privilege_info_get_display_name(&quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;displayName);</pre>
+
+               <p>The function takes the following parameters:</p>
+                       <ul class="ul">
+                        <li>API version</li>
+                        <li>Privilege name</li>
+                        <li>Privilege display name</li>
+                       </ul>
+                       
+</li>
+
+               <li>Get the privilege display name by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name_by_pkgtype()</span> function:
+               
+               <pre class="prettyprint">
+char* displayName = NULL;
+int retVal = privilege_info_get_display_name_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;displayName);</pre>
+
+               <p>The function takes the following parameters:</p>
+                       <ul class="ul">
+                       <li>Package type</li>
+                        <li>API version</li>
+                        <li>Privilege name</li>
+                        <li>Privilege display name</li>
+                       </ul>
+                       
+</li>
+
+<li>Get the privilege description using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description()</span> function:
+
+<pre class="prettyprint">
+char* description = NULL;
+int retVal = privilege_info_get_description(&quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;description);</pre>
+
+<p>The function takes the following parameters:</p>
+ <ul class="ul">
+ <li>API version</li>
+ <li>Privilege name</li>
+ <li>Description of the privilege</li></ul>
+
+</li>
+
+
+<li>Get the privilege description by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description_by_pkgtype()</span> function:
+
+<pre class="prettyprint">
+char* description = NULL;
+int retVal = privilege_info_get_description_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;description);</pre>
+
+<p>The function takes the following parameters:</p>
+ <ul class="ul">
+ <li>Package type</li>
+ <li>API version</li>
+ <li>Privilege name</li>
+ <li>Description of the privilege</li></ul>
+
+</li>
+
+</ol>
+<p>All functions above return the defined <span style="font-family: Courier New,Courier,monospace;">privilege_info_error_e</span> enum value that indicates the result of executing the function and provides the privilege description by assigning the matching value to the third parameter.</p>
+
+</li></ol>
+
+            </div>
+        </li>
+     </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+ 
+ </body>
+ </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
new file mode 100644 (file)
index 0000000..031b942
--- /dev/null
+++ b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Handling Keys and Cryptographic Operations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Security: Handling Keys and Cryptographic Operations</h1>
+       <p>The security tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p> 
+       <ul> 
+               <li><a class="opensection" href="key_tutorial_n.htm">Key Manager: Using Keys and Certificates, and Implementing Access Control</a> <p>Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.</p></li>
+               <li><a class="opensection" href="privilege_tutorial_n.htm">Privilege Info: Managing Privilege Information</a> <p>Demonstrates how you can display privilege information, such as the name and description of a given privilege.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+ 
+ </body>
+ </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/account_tutorial_n.htm b/org.tizen.tutorials/html/native/social/account_tutorial_n.htm
new file mode 100644 (file)
index 0000000..188f948
--- /dev/null
+++ b/org.tizen.tutorials/html/native/social/account_tutorial_n.htm
@@ -0,0 +1,1073 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Account Manager: Managing Account Information on the Device</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Accounts</a></li>
+                       <li><a class="opensection" href="#add">Creating and Managing an Account</a></li>
+                       <li>Information retrieval
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#get">Getting Account Information</a></li>
+                                       <li><a class="opensection" href="#retrieve">Retrieving Accounts by Package Name</a></li>
+                                       <li><a class="opensection" href="#capability">Retrieving Account Providers by Capability</a></li>
+                               </ul>
+                       </li>
+                       <li><a class="opensection" href="#remove">Removing an Account</a></li>
+                       <li><a class="opensection" href="#disconnect">Disconnecting from the Account Service</a></li>
+                       <li><a class="opensection" href="#screen">Adding an Application on the Account Screen</a></li>
+                       <li><a class="opensection" href="#queries">Performing Database Queries</a></li>
+                       <li><a class="opensection" href="#secret">Managing Account Secrecy</a></li>
+                       <li><a class="opensection" href="#update">Updating Accounts</a></li>
+                       <li><a class="opensection" href="#type">Managing Account Types</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Account Manager: Managing Account Information on the Device</h1>
+  <div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information, such as user name, display name, domain name, and email address.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Account Manager API basics by learning about:</p>
+<ul>
+               <li><a class="opensection" href="#init">Initializing the Accounts</a>
+               <p>Initialize the account manager for use.</p></li>
+               <li><a class="opensection" href="#add">Creating and Managing an Account</a>
+               <p>Create an account, set its properties, and insert it to the database.</p></li>
+               <li>Information retrieval
+               <ul>
+               <li><a class="opensection" href="#get">Getting Account Information</a>
+               <p>Retrieve information for each existing account and implement a callback function.</p></li>
+               <li><a class="opensection" href="#retrieve">Retrieving Accounts by Package Name</a>
+               <p>Retrieve accounts based on a specific package.</p></li>
+               <li><a class="opensection" href="#capability">Retrieving Account Providers by Capability</a>
+               <p>Retrieve accounts providers based on a specific capability.</p></li>
+               </ul>
+               </li>
+               <li><a class="opensection" href="#remove">Removing an Account</a>
+               <p>Remove an account from the database.</p></li>
+               <li><a class="opensection" href="#disconnect">Disconnecting from the Account Service</a>
+               <p>Destroy the account handle and disconnect from the service.</p></li>
+               <li><a class="opensection" href="#screen">Adding an Application on the Account Screen</a>
+               <p>Display your application on the Add account screen of a Tizen device.</p>
+               </li>
+</ul>
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of the Account Manager API, we can now move on to more advanced tasks, including:</p>
+<ul>
+               <li><a class="opensection" href="#queries">Performing Database Queries</a>
+               <p>Manage accounts and query them based on various attributes.</p></li>
+               <li><a class="opensection" href="#secret">Managing Account Secrecy</a>
+               <p>Manage account secrecy levels.</p></li>
+               <li><a class="opensection" href="#update">Updating Accounts</a>
+               <p>Update account details.</p></li>
+               <li><a class="opensection" href="#type">Managing Account Types</a>
+               <p>Manage account types.</p></li>
+               
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Accounts</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the account manager:</p>
+<ol>
+<li> <p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;account.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;account.h&gt;
+</pre></li>
+<li><p>Declare the necessary global variables. To know, whether a function has been executed properly, see that the return is equal to <span style="font-family: Courier New,Courier,monospace;">ACCOUNT_ERROR_NONE</span>.</p>
+ 
+<pre class="prettyprint">
+#include &lt;stdio.h&gt;
+#include &lt;time.h&gt;
+#include &lt;dlog.h&gt;
+
+static account_h account = NULL;
+static int account_id = 0;
+int ret = 0;
+</pre></li>
+
+<li><p>Set up the required privileges for your application:</p>
+
+<ul class="ul">
+<li>To use APIs for reading account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span> privilege to the manifest file.
+</li>
+
+<li>To use APIs for writing account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span> privilege to the manifest file.
+</li>
+
+</ul></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="add" name="add" class="items-tit-h2">Creating and Managing an Account</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To connect to the Account Service, create an account, set it properties, and add it to the account database:</p>
+
+<ol>
+<li>To operate on the account database, connect the application with the Account Service using the <span style="font-family: Courier New,Courier,monospace;">account_connect()</span> function:
+
+<pre class="prettyprint">
+ret = account_connect();
+</pre>
+</li>
+ 
+<li>Create an account using the <span style="font-family: Courier New,Courier,monospace;">account_create()</span> function and the previously defined account handle:
+
+<pre class="prettyprint">
+ret = account_create(&amp;account);
+</pre>
+</li>
+<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;;
+
+ret = account_set_user_name(account, account_name);
+
+ret = account_set_display_name(account, display_name);
+
+ret = account_set_domain_name(account, domain_name);
+
+ret = account_set_email_address(account, email_address);
+
+ret = account_set_icon_path(account, image_path);
+</pre>
+</li>
+
+<li>When the account is configured, use the <span style="font-family: Courier New,Courier,monospace;">account_insert_to_db()</span> function to insert the account to the account database. Use the account ID as the second parameter (<span style="font-family: Courier New,Courier,monospace;">account_id</span>):
+
+ <pre class="prettyprint">
+ret = account_insert_to_db(account, &amp;account_id);
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get" name="get" class="items-tit-h2">Getting Account Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To get account information, such as user name, display name, domain name, and email address:</p>
+
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">account_get_total_count_from_db()</span> function to get the total number of inserted records.
+<p>To get individual records, use the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function, which iterates through all the records and invokes a callback function for each account:</p>
+<pre class="prettyprint">account_foreach_account_from_db (account_cb callback, void *user_data)</pre>
+ 
+<p>The function takes the following parameters:</p>
+<ul class="ul">
+    <li><span style="font-family: Courier New,Courier,monospace;">callback</span>: Callback function to be invoked</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data to be passed to the callback function</li>
+</ul>
+ 
+<pre class="prettyprint">
+int total_count = -1;
+ret = account_get_total_count_from_db(&amp;total_count);
+
+ret = account_foreach_account_from_db(on_account_read, NULL);
+</pre> 
+</li>
+
+<li>Define the callback function:
+<pre class="prettyprint">typedef bool(* account_cb)(account_h account, void *user_data)</pre>
+ 
+<p>The callback function takes the following parameters:</p>
+<ul class="ul">
+    <li><span style="font-family: Courier New,Courier,monospace;">account</span>: Account handle</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data passed from the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function</li>
+</ul>
+
+<p>This function retrieves information for each account.</p>
+</li>
+<li>To get more details, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_user_name()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_display_name()</span>, and <span style="font-family: Courier New,Courier,monospace;">account_get_icon_path()</span> functions:
+
+<pre class="prettyprint">
+static bool on_account_read(account_h account, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;
+&nbsp;&nbsp;&nbsp;char *icon_path = NULL;
+&nbsp;&nbsp;&nbsp;// Get the account ID
+&nbsp;&nbsp;&nbsp;ret = account_get_account_id(account, &amp;account_id);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Get the user name
+&nbsp;&nbsp;&nbsp;ret = account_get_user_name(account, &amp;name);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;name: %s&quot;, name);
+&nbsp;&nbsp;&nbsp;// Get the display name
+&nbsp;&nbsp;&nbsp;ret = account_get_display_name(account, &amp;display_name);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;display_name: %s&quot;, display_name);
+&nbsp;&nbsp;&nbsp;// Get the icon path
+&nbsp;&nbsp;&nbsp;ret = account_get_icon_path(account, &amp;icon_path);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;icon_path: %s&quot;, icon_path);
+
+&nbsp;&nbsp;&nbsp;free(name);
+&nbsp;&nbsp;&nbsp;free(display_name);
+&nbsp;&nbsp;&nbsp;free(icon_path);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Accounts by Package Name</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>To retrieve accounts by a specific account provider:</p>
+  <ol>
+  <li>Connect with the Account Service using the <span style="font-family: Courier New,Courier,monospace">account_connect()</span> function.</li>
+   <li>Define the <span style="font-family: Courier New,Courier,monospace">account_cb()</span> callback for getting data of accounts as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function.
+   <pre class="prettyprint">
+static bool account_callback(account_h account, void* user_data) // account_cb() callback
+{
+&nbsp;&nbsp;&nbsp;// Called once for each account in the database
+}
+</pre></li>
+   <li>Retrieve the accounts of a specific account provider using the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function, and specifying the package name of the account provider:
+<pre class="prettyprint">int ret = -1;
+char* package_name = &quot;package_name&quot;;
+ret = account_query_account_by_package_name(account_callback, package_name, NULL);
+</pre></li>
+  </ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="capability" name="capability" class="items-tit-h2">Retrieving Account Providers by Capability</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+ <p>To retrieve account providers by a specific capability:</p>
+  <ol>
+  <li>Connect with the Account Service using the <span style="font-family: Courier New,Courier,monospace">account_connect()</span> function.</li>
+   <li>Define <span style="font-family: Courier New,Courier,monospace">account_type_cb()</span> callback for getting account providers as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. The callback takes the account provider handle as the first parameter.
+<pre class="prettyprint">
+static bool account_type_callback(account_type_h account_type, void* user_data) // account_type_cb() callback
+{
+&nbsp;&nbsp;&nbsp;// Called once for each account type in the database
+}
+</pre>
+</li>
+   
+   <li>Retrieve the account providers of a specific capability by using the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function:
+<pre class="prettyprint">
+account_type_h account_type = NULL;
+int ret = -1;
+char* capability = &quot;http://tizen.org/account/capability/contact&quot;;
+
+ret = account_type_create(&amp;account_type);
+
+ret = account_type_query_by_provider_feature(account_type_callback, capability, account_type);
+</pre></li>
+  </ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="remove" name="remove" class="items-tit-h2">Removing an Account</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_user_name()</span>, or <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_package_name()</span> function. They all remove a given account record.</p>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To get the ID needed as an argument of the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span> function, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span> function.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<pre class="prettyprint">
+ret = account_delete_from_db_by_id(account_id);
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="disconnect" name="disconnect" class="items-tit-h2">Disconnecting from the Account Service</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To disconnect from the Account Service:</p>
+
+<ol>
+<li>To destroy the account handle, use the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:
+<pre class="prettyprint">
+ret = account_destroy(account);
+</pre>
+</li>
+<li>To disconnect from the Account Service, use the <span style="font-family: Courier New,Courier,monospace;">account_disconnect()</span> function:
+<pre class="prettyprint">
+ret = account_disconnect();
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="screen" name="screen" class="items-tit-h2">Adding an Application on the Account Screen</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To add your application on the Add account screen of the device:</p>
+
+<ol>
+<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; multiple-accounts-support=&quot;true or false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;application normal icon path&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account-small&quot;&gt;application normal icon path&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&gt;</pre>
+
+<p>The required information includes:</p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">appid=&quot;app-id name&quot;</span>
+<p>Application ID (for example, <span style="font-family: Courier New,Courier,monospace">appid=&quot;org.tizen.account&quot;</span>).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">providerid=&quot;url style string&quot;</span>
+<p>Provider identification string (for example, <span style="font-family: Courier New,Courier,monospace">providerid=&quot;http://www.tizen.org&quot;</span>).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">multiple-accounts-support=&quot;true or false&quot;</span>
+<p>Multiple account support (if your application can manage 2 or more accounts, set to <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise set to <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account&quot;&gt;application normal icon path&lt;/icon&gt;</span>
+<p>Icon displayed on the Add account screen.</p>
+<p>The icon size must be 72x72 px and the icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account-small&quot;&gt;application small icon path&lt;/icon&gt;</span>
+<p>Small icon displayed on the Other application screen to represent the account provider.</p>
+<p>The small icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;</span>
+<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><span style="font-family: Courier New,Courier,monospace">&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;</span>
+<p>For more information, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide</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 (<span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span>) defined in the <span style="font-family: Courier New,Courier,monospace">account-types.h</span> header file, so the sign-in screen must be displayed.</p>
+
+    <p class="figure">Figure: Sign-in screen</p> 
+  <p style="text-align:center;"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p> 
+</li>
+</ol>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">For more information on operations and events, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide.</td>
+    </tr>
+   </tbody>
+  </table>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="queries" name="queries" class="items-tit-h2">Performing Database Queries</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To perform database queries:</p>
+
+
+<ol>
+<li>Connect the application with the Account Service using the <span style="font-family: Courier New,Courier,monospace;">account_connect()</span> function:
+
+<pre class="prettyprint">
+ret = account_connect();
+</pre>
+</li>
+<li>Prepare sample content.
+<p>To perform queries, you need existing content in the database. To access existing account, obtain it from the database. It can be done using a few functions, depending on the user requirements.</p>
+<p>To create new content to the database:</p>
+
+<ol><li><p>The <span style="font-family: Courier New,Courier,monospace;">create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
+
+<p>After creating the account, it is added to the database. When no longer needed, the account handle has to be destroyed using the <span style="font-family: Courier New,Courier,monospace;">account_destroy(account)</span> function.</p>
+
+<pre class="prettyprint">
+int id[3];
+static account_h account = NULL;
+
+create_Account(&amp;account, &quot;Person&quot;, &quot;DiplayPerson&quot;, &quot;Person Domain&quot;, &quot;someone1@somewho.com&quot;);
+
+account_set_capability(account, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED);
+
+account_set_capability(account, &quot;Next&quot;, ACCOUNT_CAPABILITY_ENABLED);
+ 
+account_set_capability(account, &quot;Another&quot;, ACCOUNT_CAPABILITY_DISABLED);
+
+account_insert_to_db(account, &amp;id[0]);
+
+account_destroy(account);
+</pre></li>
+
+<li><p>Add 2 more accounts to the database.</p>
+
+<pre class="prettyprint">
+Create_Account(&amp;account, &quot;PersonX&quot;, &quot;DisplayX&quot;, &quot;Other Domain&quot;, &quot;someone2@somewho.com&quot;);
+account_insert_to_db(account, &amp;id[1]);
+
+account_destroy(account);
+
+Create_Account(&amp;account, &quot;Human&quot;, &quot;Humanity&quot;, &quot;Everyone&quot;, &quot;someone3@somewho.com&quot;);
+
+account_insert_to_db(account, &amp;id[2]);
+
+account_destroy(account);
+
+Create_Account(&amp;account, &quot;LastOne&quot;, &quot;LastDisplay&quot;, &quot;Last Domain&quot;, &quot;someone4@somewho.com&quot;);
+account_insert_to_db(account, &amp;id[2]);
+account_destroy(account);
+</pre>
+</li>
+
+<li>Create an account.
+<p>For more information, see the <a href="account_tutorial_n.htm">Account Tutorial</a>.</p>
+
+<pre class="prettyprint">
+static int Create_Account(account_h * account, char * account_name, char * display_name, char *  domain_name, char * email_address)
+{
+&nbsp;&nbsp;&nbsp;account_create(account);
+
+&nbsp;&nbsp;&nbsp;account_set_user_name(*account, account_name);
+
+&nbsp;&nbsp;&nbsp;account_set_display_name(*account, display_name);
+
+&nbsp;&nbsp;&nbsp;account_set_domain_name(*account, domain_name);
+
+&nbsp;&nbsp;&nbsp;account_set_email_address(*account, email_address);
+}
+</pre></li></ol>
+</li>
+
+<li>List accounts.
+<ol><li>
+<p>To verify the database insertion, all accounts are listed.</p>
+
+<pre class="prettyprint">
+struct Account_Records
+{
+&nbsp;&nbsp;&nbsp;int count;
+&nbsp;&nbsp;&nbsp;int tab[100];
+};
+
+struct Account_Records rec;
+ 
+List_Accounts(&amp;rec);
+</pre></li>
+
+<li><p>When <span style="font-family: Courier New,Courier,monospace;">struct Account_Records* rec</span> is not <span style="font-family: Courier New,Courier,monospace;">Null</span>, <span style="font-family: Courier New,Courier,monospace;">List_Accounts</span> counts all records in the database. Records are obtained using the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function.</p>
+
+<pre class="prettyprint">
+static void List_Accounts(struct Account_Records* rec)
+{
+&nbsp;&nbsp;&nbsp;if (rec!=NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;count=0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;account_foreach_account_from_db(on_account_read, rec);
+}
+</pre></li>
+
+<li><p>For each found record, the <span style="font-family: Courier New,Courier,monospace;">on_account_read()</span> callback function is called. If <span style="font-family: Courier New,Courier,monospace;">void *user_data</span> is not null, the function is counting the existing accounts. String data returned by the get functions has to be released with <span style="font-family: Courier New,Courier,monospace;">free</span>. Data prepared with the <span style="font-family: Courier New,Courier,monospace;">sprint()</span> function can, for example, be sent for <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>
+
+<pre class="prettyprint">
+static bool on_account_read(account_h account, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int account_id = 0;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;
+&nbsp;&nbsp;&nbsp;struct Account_Records * rec = (struct Account_Records *)user_data;
+&nbsp;&nbsp;&nbsp;char buf[100];
+
+&nbsp;&nbsp;&nbsp;account_get_account_id(account, &amp;account_id);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback ID: %d\n&quot;, account_id);
+
+&nbsp;&nbsp;&nbsp;if (user_data!=NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;tab[rec-&gt;count++]=account_id;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;account_get_user_name(account, &amp;name);
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Name: %s\n&quot;, name);
+
+&nbsp;&nbsp;&nbsp;free(name);
+
+&nbsp;&nbsp;&nbsp;account_get_display_name(account, &amp;display_name);
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Disp.: %s\n&quot;, display_name);
+
+&nbsp;&nbsp;&nbsp;free(display_name);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre></li></ol>
+</li>
+<li>Query the account by ID.
+<p>The easiest way to get access to an account stored in the database is referring to it by its ID. It can be done with the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_account_id()</span> function. This function requires an existing handle to an account as an input parameter. </p>
+
+<pre class="prettyprint">
+for (i=0; i&lt;rec.count; i++)
+{
+&nbsp;&nbsp;&nbsp;account_create(&amp;account);
+&nbsp;&nbsp;&nbsp;account_query_account_by_account_id (rec.tab[i], &amp;account);
+
+&nbsp;&nbsp;&nbsp;Show_Account(account);
+
+&nbsp;&nbsp;&nbsp;account_destroy(account);
+}
+</pre>
+</li>
+
+<li>Show the account.
+<p>The following function prepares data to send it to any text output.</p>
+
+<pre class="prettyprint">
+static int Show_Account(account_h acc)
+{
+&nbsp;&nbsp;&nbsp;int account_id = 0;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;
+&nbsp;&nbsp;&nbsp;char buf[100];
+
+&nbsp;&nbsp;&nbsp;account_get_account_id(acc, &amp;account_id);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account ID: %d\n&quot;, account_id);
+
+&nbsp;&nbsp;&nbsp;account_get_user_name(acc, &amp;name);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Name: %s\n&quot;, name);
+
+&nbsp;&nbsp;&nbsp;free(name);
+
+&nbsp;&nbsp;&nbsp;account_get_display_name(acc, &amp;display_name);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Disp.: %s\n&quot;, display_name);
+
+&nbsp;&nbsp;&nbsp;free(display_name);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>Query the account by various attributes:
+<ul class="ul"><li>Query by username.
+<p>Querying data by username requires providing a valid username callback function. In this example, it is the same function as for <span style="font-family: Courier New,Courier,monospace;">for_each</span>, but cast without the third parameter.</p>
+
+<pre class="prettyprint">
+account_query_account_by_user_name (on_account_read, &quot;Human&quot;, NULL);
+</pre>
+</li>
+
+<li>Query by package name
+<p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <span style="font-family: Courier New,Courier,monospace;">account_set_package_name()</span> function. To list accounts by package name, the user can provide a name by itself or obtain it with the <span style="font-family: Courier New,Courier,monospace;">account_get_package_name()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_package_name()</span> 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">
+char * package_name;
+account_get_package_name (account, &amp;package_name);
+account_query_account_by_package_name (on_account_read, package_name, NULL);
+free(package_name);
+</pre>
+</li>
+
+<li>Query by capability
+<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;, ACCOUNT_CAPABILITY_ENABLED, NULL);
+</pre>
+</li>
+
+<li> Query by capability type
+<p>This function is similar to the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_capability()</span> function, but returns all accounts with a specified capability, without checking its state.</p>
+
+<pre class="prettyprint">
+account_query_account_by_capability_type (on_account_read, &quot;Next&quot;, NULL);
+</pre>
+</li>
+
+<li>Query capability by account ID
+<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_capability_by_account_id()</span> function is different from the previous functions. It lists all capabilities from an account with a specified ID. In this case it requires a different type of callback, as listed below.</p>
+
+<pre class="prettyprint">
+account_query_capability_by_account_id (_capability_cb, id[0], NULL);
+</pre>
+
+<p>The callback function prepares data to be sent to an output.</p>
+
+<pre class="prettyprint">
+static bool _capability_cb(const char *capability_type, account_capability_state_e capability_state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char buf[200];
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Found capability: %s on state %d\n&quot;, capability_type, capability_state);
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+</pre>
+</li></ul></li>
+
+<li>Clean up.
+<p>When no longer needed, all handles to accounts have to be destroyed and the connection to the database has to be closed. In addition, the sample application deletes all its accounts.</p>
+
+<pre class="prettyprint">
+account_destroy(account);
+
+account_foreach_account_from_db(delete_account, NULL);
+
+account_disconnect();
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="secret" name="secret" class="items-tit-h2">Managing Account Secrecy</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To manage account secrecy:</p>
+<ol>
+<li>Connect the application with the Account Service using the <span style="font-family: Courier New,Courier,monospace;">account_connect()</span> function:
+
+<pre class="prettyprint">
+ret = account_connect();
+</pre>
+</li>
+<li>Select the secrecy level using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">account_secrecy_state_e</a> enumeration.
+
+<pre class="prettyprint">
+static account_h account = NULL;
+account_secrecy_state_e secret;
+ 
+char buf[200];
+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;);
+
+account_set_secret(account, ACCOUNT_SECRECY_INVALID);
+
+account_get_secret(account, &amp;secret);
+
+account_insert_to_db(account, &amp;id);
+
+sprintf(buf,&quot;Account 1 secret: %d\n&quot;, 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;);
+
+account_set_secret(account, ACCOUNT_SECRECY_INVISIBLE);
+
+account_get_secret(account, &amp;secret);
+
+account_insert_to_db(account, &amp;id);
+
+sprintf(buf, &quot; Account 2 secret: %d\n&quot;, 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;);
+
+ret = account_set_secret(account, ACCOUNT_SECRECY_VISIBLE);
+
+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);
+
+account_destroy(account);
+
+List_Accounts(NULL);
+
+account_foreach_account_from_db(delete_account, NULL);
+</pre>
+
+<p>Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the <span style="font-family: Courier New,Courier,monospace;">for_each</span> function. For further information on how to add your application to the account screen, see the <a href="account_tutorial_n.htm">Account Tutorial</a>.</p>
+
+<pre class="prettyprint">// List_Account() console output
+MyCallback ID: 12
+MyCallback Name: Security 1
+MyCallback Disp.: Invalid
+-------------------
+MyCallback ID: 13
+MyCallback Name: Security 2
+MyCallback Disp.: Invisible
+-------------------
+MyCallback ID: 14
+MyCallback Name: Secret 3
+MyCallback Disp.: Visible
+</pre>
+</li>
+
+<li>Clean up.
+<p>Account handles have to be destroyed when not needed anymore. Accounts are removed from the database. The connection has to be terminated.</p>
+
+<pre class="prettyprint">
+account_destroy(account);
+
+account_foreach_account_from_db(delete_account, NULL);
+
+account_disconnect();
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update" name="update" class="items-tit-h2">Updating Accounts</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To update and track account data.</p>
+
+<ol>
+<li>Connect the application with the Account Service using the <span style="font-family: Courier New,Courier,monospace;">account_connect()</span> function:
+
+<pre class="prettyprint">
+ret = account_connect();
+</pre>
+</li>
+<li>Subscribe notifications.
+<p>To track account changes, create an <span style="font-family: Courier New,Courier,monospace;">account_subscribe_h</span> instance and register a notification.</p>
+
+<pre class="prettyprint">
+account_type_h account_type;
+account_subscribe_h account_subscribe;
+
+account_subscribe_create(&amp;account_subscribe);
+
+account_subscribe_notification(account_subscribe, _account_event_cb, NULL);
+</pre>
+</li>
+
+<li>Create an account.
+<p>Accounts are created and then their handles are destroyed. The package name is obtained from the second account.</p>
+
+<pre class="prettyprint">
+Create_Account(&amp;account, &quot;Updater&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
+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;);
+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);
+
+Show_Account(account);
+account_destroy(account);
+</pre>
+</li>
+
+<li>Update the account.
+<ul class="ul"><li><p>To update an account by its ID:</p>
+<ol>
+<li>Create a handle to the account.</li>
+<li>Get the account from the database (also possible by ID).</li>
+<li>Make the necessary changes.</li>
+<li>Update the account using the account handle and a valid ID.</li>
+<li>Destroy the account handle.</li>
+</ol>
+
+<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_id(account, id);
+account_destroy(account);
+</pre>
+</li>
+
+<li>Update account by user name.
+<p>To update an account by its user name:</p>
+<ol>
+<li>Create a handle to the account.</li>
+<li>Get the account from the database (also by ID).</li>
+<li>Make the necessary changes.</li>
+<li>Update the account using the account handle, a valid user name, and a package name. There can be accounts with the same user names in different packages.</li>
+<li>Destroy the account handle.</li>
+</ol>
+
+<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_destroy(account);
+</pre></li></ul>
+</li>
+
+<li>Create the callback.
+<p>When any action is taking place on any account when a notification is subscribed, a callback function is invoked. The callback function provides in its parameters the event type as a string, the ID of the account associated with the actual change, and, additionally, the user data registered while subscribing the notification.</p>
+
+<pre class="prettyprint">
+bool _account_event_cb(const char *event_type, int account_id, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char buf[200];
+
+&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;ACCOUNT EVENT: %s, %d\n&quot;, event_type, account_id);
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+</pre>
+</li>
+
+<li>Show accounts.
+<p>To verify the updates, the account can be shown.</p>
+
+<pre class="prettyprint">
+account_create(&amp;account);
+account_query_account_by_account_id(id, &amp;account);
+Show_Account(account);
+account_destroy(account);
+</pre>
+</li>
+
+<li>Clean up.
+<p>Unsubscribe the notification when no longer needed.</p>
+
+<pre class="prettyprint">
+account_unsubscribe_notification(account_subscribe);
+
+account_destroy(account);
+
+account_foreach_account_from_db(delete_account, NULL);
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="type" name="type" class="items-tit-h2">Managing Account Types</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+<p>To manage account types:</p>
+
+<ol>
+<li>Connect the application with the Account Service using the <span style="font-family: Courier New,Courier,monospace;">account_connect()</span> function:
+
+<pre class="prettyprint">
+ret = account_connect();
+</pre>
+</li>
+<li>Create a type.
+<p>To operate on the account type, create a handle to it.</p>
+
+<pre class="prettyprint">
+account_type_h account_type;
+
+account_type_create(&amp;account_type);
+</pre>
+</li>
+
+<li>Add the type.
+<p>If the account type with a specified ID does not exists, it can be added to the database.</p>
+
+<p>It is possible to set, for example:</p>
+<ul class="ul">
+<li>ID</li>
+<li>Labels</li>
+<li>Features</li>
+<li>Multiple account support (this is only a flag)</li>
+</ul>
+
+<p>After all the options are set, the account type has to be added to the database.</p>
+
+<pre class="prettyprint">
+if (account_type_query_app_id_exist(type_id))
+{
+&nbsp;&nbsp;&nbsp;account_type_set_app_id(account_type, type_id);
+
+&nbsp;&nbsp;&nbsp;account_type_set_multiple_account_support(account_type, true);
+
+&nbsp;&nbsp;&nbsp;account_type_set_label(account_type, &quot;TestLable&quot;, &quot;TestLocale&quot;);
+
+&nbsp;&nbsp;&nbsp;account_type_set_provider_feature(account_type, &quot;Example Feature&quot;);
+
+&nbsp;&nbsp;&nbsp;account_type_insert_to_db(account_type, &amp;id);
+}
+</pre>
+</li>
+
+<li>List types and labels.
+<p>To list the account types or all the labels from a specified type, a proper callback function has to be provided.</p>
+
+<pre class="prettyprint">
+account_type_foreach_account_type_from_db(_account_type_cb, NULL);
+
+account_type_query_label_by_app_id(_account_label_cb, type_id, NULL);
+</pre>
+
+<p>While listing the labels, the user has access to the ID of the account type, label and its local value, and the user data passed while casting the query function.</p>
+
+<pre class="prettyprint">
+bool _account_label_cb(char *id, char *label, char *locale, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char buf[200];
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Get Label ID: %s LABEL: %s LOCALE %s\n&quot;, app_id, label, locale);
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+</pre>
+
+<p>The account type callback has access to the account type and user data.</p>
+
+<pre class="prettyprint">
+bool _account_type_cb(account_type_h account_type, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char * id;
+&nbsp;&nbsp;&nbsp;int support;
+&nbsp;&nbsp;&nbsp;char buf[200];
+
+&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;id);
+
+&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;support);
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Account Type ID: %s Multiple support %d:\n&quot;, id, support);
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+</pre>
+</li>
+
+<li>Clean up.
+<p>All allocated handles have to be destroyed. The account type is also removed. The connection to the database has to be closed.</p>
+
+<pre class="prettyprint">
+account_type_delete_by_app_id(type_id);
+
+account_type_destroy(account_type);
+
+account_disconnect();
+</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               
+               
+       </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
new file mode 100644 (file)
index 0000000..76df87d
--- /dev/null
+++ b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
@@ -0,0 +1,1083 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Calendar Events and Accessing the Calendar Database</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Calendar</a>
+                       </li>
+                       <li>Calendar management
+                       <ul class="toc">
+                               <li><a class="opensection" href="#create_event">Creating an Event</a></li>
+                               <li><a class="opensection" href="#set_event">Setting Event Properties</a></li>
+                               <li><a class="opensection" href="#insert_event">Inserting an Event to the Database</a></li>
+                               <li><a class="opensection" href="#get_event">Getting Events</a></li>
+                               <li><a class="opensection" href="#update_event">Updating an Event</a></li>
+                               <li><a class="opensection" href="#delete_event">Deleting an Event</a></li>
+                               <li><a class="opensection" href="#exception_add">Setting Exceptions when Inserting Events</a></li>
+                               <li><a class="opensection" href="#exception_modify">Adding an Exception Date for an Existing Event</a></li>
+                               <li><a class="opensection" href="#monitor_event">Monitoring Event Changes</a></li>
+                       </ul></li>
+                       <li>Todos
+                               <ul class="toc">
+                               <li><a class="opensection" href="#create">Creating a Todo</a></li>
+                               <li><a class="opensection" href="#set">Setting Todo Properties</a></li>
+                               <li><a class="opensection" href="#insert">Inserting a Todo to the Database</a></li>
+                               <li><a class="opensection" href="#get">Getting Todos</a></li>
+                               <li><a class="opensection" href="#update">Updating a Todo</a></li>
+                               <li><a class="opensection" href="#delete">Deleting a Todo</a></li>
+                               <li><a class="opensection" href="#monitor">Monitoring Todo Changes</a></li>
+                       </ul></li>
+                       <li>vCalendars
+                               <ul class="toc">
+                               <li><a class="opensection" href="#make">Making a vCalendar</a></li>
+                               <li><a class="opensection" href="#parse">Parsing a vCalendar</a></li>
+                       </ul></li>
+               </ul>      
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Calendar: Managing Calendar Events and Accessing the Calendar Database</h1>
+   <div class="cont"><div class="static-cont">
+   
+<p>This tutorial demonstrates how to you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>
+
+
+    <h2 id="warmup" name="warmup">Warm-up</h2>
+    <p>Become familiar with the Calendar API basics by learning about:</p>
+    <ul>
+                       <li><a class="opensection" href="#init">Initializing the Calendar</a>
+                       <p>Initialize the calendar for use.</p></li>
+                       <li>Calendar management
+                       <ul>
+                               <li><a class="opensection" href="#create_event">Creating an Event</a>
+                               <p>Create a new event.</p></li>
+                               <li><a class="opensection" href="#set_event">Setting Event Properties</a>
+                               <p>Set event properties, such as subject and description.</p></li>
+                               <li><a class="opensection" href="#insert_event">Inserting an Event to the Database</a>
+                               <p>Insert an event to the Calendar database.</p></li>
+                               <li><a class="opensection" href="#get_event">Getting Events</a>
+                               <p>Retrieve a single event or a list of events.</p></li>
+                               <li><a class="opensection" href="#update_event">Updating an Event</a>
+                               <p>Update event details.</p></li>
+                               <li><a class="opensection" href="#delete_event">Deleting an Event</a>
+                               <p>Delete an event from the database.</p></li>
+                               <li><a class="opensection" href="#exception_add">Setting Exceptions when Inserting Events</a>
+                               <p>Set exceptions when creating an event with a frequency.</p></li>
+                               <li><a class="opensection" href="#exception_modify">Adding an Exception Date for an Existing Event</a>
+                               <p>Add an exception date for an existing event.</p></li>
+                               <li><a class="opensection" href="#monitor_event">Monitoring Event Changes</a>
+                               <p>Receive notifications when changes occur in events.</p></li>
+                       </ul></li>
+                       <li>Todos
+                               <ul>
+                               <li><a class="opensection" href="#create">Creating a Todo</a>
+                               <p>Create a new todo.</p></li>
+                               <li><a class="opensection" href="#set">Setting Todo Properties</a>
+                               <p>Set todo properties, such as subject and description.</p></li>
+                               <li><a class="opensection" href="#insert">Inserting a Todo to the Database</a>
+                               <p>Insert a todo to the calendar database.</p></li>
+                               <li><a class="opensection" href="#get">Getting Todos</a>
+                               <p>Retrieve a single todo or a list of todos.</p></li>
+                               <li><a class="opensection" href="#update">Updating a Todo</a>
+                               <p>Update todo details.</p></li>
+                               <li><a class="opensection" href="#delete">Deleting a Todo</a>
+                               <p>Delete the todo from the database.</p></li>
+                               <li><a class="opensection" href="#monitor">Monitoring Todo Changes</a>
+                               <p>Receive notifications when changes occur in todos.</p></li>
+                       </ul></li>
+                       <li>vCalendars
+                               <ul>
+                               <li><a class="opensection" href="#make">Making a vCalendar</a>
+                               <p>Make a vCalendar stream from an event record.</p></li>
+                               <li><a class="opensection" href="#parse">Parsing a vCalendar</a>
+                               <p>Parse a vCalendar from a file and insert to the database.</p></li>
+                       </ul></li>
+               </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Calendar</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+                       
+<p>To initialize the Calendar Service:</p>
+<ol><li>                       
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;calendar.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;calendar.h&gt;
+</pre></li>                    
+                       
+<li>           
+<p>Most of API functions return error codes, so you must define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store the error codes. Each time when a function returns error codes, verify the result of the operation.</p></li>
+
+<li><p>To connect to the Calendar Service, call the <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> function. Without this function, you cannot get access to the Calendar database.</p>
+<pre class="prettyprint">int error_code;
+error_code = calendar_connect();
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_connect: %x\n&quot;, error_code);</pre>
+
+
+<p>When the Calendar APIs are no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> function:</p>
+<pre class="prettyprint">error_code = calendar_disconnect();
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar disconnect failed: %x\n&quot;, error_code);</pre></li></ol>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create_event" name="create_evemt" class="items-tit-h2">Creating an Event</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To define and create a new event handle (record), since the Calendar Service uses the event handler mechanism:</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined event handle as a parameter to create an event associated to the event handle and an <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> parameter for the event type.</p>
+<p>Verify the status of the error code. If the event is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, you can check the error and take appropriate action or stop other operations on the database.</p>
+<pre class="prettyprint">calendar_record_h event = NULL;
+error_code = calendar_record_create(_calendar_event._uri, &amp;event);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create: %x\n&quot;, error_code);</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set_event" name="set_event" class="items-tit-h2">Setting Event Properties</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set the event properties:</p>
+
+<ol><li>Set the event subject.
+<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the event handle (created before), as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_event.summary</span> for subject type, and the subject, which is a string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.summary, &quot;summary&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set record summary failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the event description.
+<p>The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function sets the description of the event when the second argument is <span style="font-family: Courier New,Courier,monospace">_calendar_event.description</span>. This function takes the event handle as the first argument, and the description, which is a string value, as the third argument. The description argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.description, &quot;description&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the event timezone ID.
+<p>The start and end time must be inserted in the event. If the timezone ID is not inserted, the timezone for the start and end time is considered to be UTC. The properties are in the <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> file.</p>
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_tzid failed : %x\n&quot;, error_code);
+
+error_code = calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_tzid failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the event start and end dates.
+<p>You can set the other properties similarly. To set the start date, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span> functions and check the error codes. </p>
+<pre class="prettyprint">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, starttime);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, 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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_time failed : %x\n&quot;, error_code);</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">calendar_time_s</span> has 2 types. For more information about the types, see the <a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar</a> guide.</p>
+</li>
+<li>Set the event frequency.
+<p>To create recurring events, set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">frequency property</a>.</p>
+<pre class="prettyprint">error_code = calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);
+
+error_code = calendar_record_set_int(event, _calendar_event.interval, 1);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);
+
+error_code = calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">range of recurrence</a> for the event.
+<pre class="prettyprint">error_code = calendar_record_set_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set range_type failed : %x\n&quot;, error_code);
+
+error_code = calendar_record_set_int(event, _calendar_event.count, 8);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set count failed : %x\n&quot;, error_code);</pre></li>
+
+<li>Add an alarm.
+<p>To add an alarm, create an alarm handle and insert it as a child.</p>
+<pre class="prettyprint">calendar_record_h alarm = NULL;
+calendar_time_s ct;
+error_code = CALENDAR_ERROR_NONE;
+error_code += calendar_record_create(_calendar_alarm._uri, &amp;alarm);
+error_code += calendar_record_set_int(alarm, _calendar_alarm.tick_unit, 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);
+error_code += calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);
+
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar add alarm failed \n&quot;);</pre>
+<p>The following alarm tick units are available:</p>
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MINUTE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_HOUR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_DAY</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_WEEK</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MONTH</span>     (not recommended)</li>
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_SPECIFIC</span> (must use specific unixtime)</li></ul></li>
+<li>Add an attendee.
+<p>To add an attendee, create an attendee handle and insert it as a child.</p>
+<pre class="prettyprint">calendar_record_h attendee = NULL;
+error_code = CALENDAR_ERROR_NONE;
+error_code += calendar_record_create(_calendar_attendee._uri, &amp;attendee);
+error_code += calendar_record_set_str(attendee, _calendar_attendee.name, &quot;John&quot;);
+error_code += calendar_record_add_child_record(event, _calendar_event.calendar_attendee, attendee);
+
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar add alarm failed \n&quot;);</pre></li></ol>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="insert_event" name="insert_event" class="items-tit-h2">Inserting an Event to the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert an event record:</p>
+
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the newly created event into the Calendar database. The first argument is the event handle, the second is the record ID - a unique ID is assigned to the event you are adding and returned as the second argument. If the event is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.
+<pre class="prettyprint">int id = -1;
+error_code = calendar_db_insert_record(event, &amp;id);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);
+
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;id: %d\n&quot;, id);</pre></li>
+<li>After inserting, destroy the used structures:
+<pre class="prettyprint">calendar_record_destroy(event, true);</pre></li></ol>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get_event" name="get_event" class="items-tit-h2">Getting Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To retrieve a single event or all events one by one. You can also filter the events by one of the properties:</p>
+
+<ol><li>Get a single event record using its ID.
+<pre class="prettyprint">calendar_record_h record;
+const int event_id = ... // Acquire event ID
+error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
+<li>Get the event record list.
+<p>To get all events without filtering, you need a record list:</p>
+<pre class="prettyprint">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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get all records failed: %x\n&quot;, error_code);</pre></li>
+
+<li>Filter the list.
+<ol><li>
+<p>To get events with filtering, you need a record list and a query:</p>
+<pre class="prettyprint">calendar_list_h list = NULL;
+calendar_query_h query = NULL;
+
+error_code = calendar_query_create(_calendar_event._uri, &amp;query);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create query failed: %x\n&quot;, error_code);</pre></li>
+<li>Before retrieving the events, create a filter for the list. You can filter the list based on various parameters.
+<pre class="prettyprint">calendar_filter_h filter = NULL;
+
+error_code = calendar_filter_create (_calendar_event._uri, &amp;filter);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create filter failed: %x\n&quot;, error_code);</pre></li>
+<li>Add a condition, such as summary:
+<pre class="prettyprint">error_code = calendar_filter_add_str(filter, _calendar_event.summary, CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>
+</li>
+<li>To add more conditions, define an operator between the conditions:
+<pre class="prettyprint">error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add operator failed: %x\n&quot;, error_code);
+
+error_code = calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;description to find&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>
+<p>In the above example, only events which contain a summary &quot;summary to find&quot; and description &quot;description to find&quot; are retrieved.</p>
+<p>You can create a filter with integer and time conditions. For instance, to filter all day events which start after 1st January 2014, add the following filter:</p>
+<pre class="prettyprint">calendar_time_s time_to_compare = {0};
+time_to_compare.type = CALENDAR_TIME_LOCALTIME;
+time_to_compare.time.date.mday = 1;
+time_to_compare.time.date.month = 1;
+time_to_compare.time.date.year = 2014;
+error_code = calendar_filter_add_caltime(filter, _calendar_event.start_time, CALENDAR_MATCH_GREATER_THAN, time_to_compare);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add caltime failed: %x\n&quot;, error_code);</pre>
+<p>The type parameter determines whether the event is a daily (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>) non-all-day event (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span>). To get the specified time period, use 2 conditions using <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_GREATER_THAN</span> and <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_LESS_THAN</span> with the operator <span style="font-family: Courier New,Courier,monospace">CALENDAR_FILTER_OPERATOR_OR</span>. You can also use <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_EQUAL</span> to set an equality condition.</p></li>
+<li>Connect the query with the list:
+<pre class="prettyprint">error_code = calendar_query_set_filter(query, filter);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;query set filter failed: %x\n&quot;, error_code);
+
+error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get records with query failed: %x\n&quot;, error_code);</pre>
+
+<p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>
+<li>Free the filter and query:
+<pre class="prettyprint">calendar_filter_destroy(filter);
+calendar_query_destroy(query);</pre></li></ol></li>
+
+<li>Iterate the list and read the records.
+<ol><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
+<p>Note on the returned values&#39; ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>
+<pre class="prettyprint">calendar_record_h record;
+while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;char* summary;
+&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_event.summary, &amp;summary);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">calendar_gl_event_data_t</span> structure like below:
+<pre class="prettyprint">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;gl_event_data = _create_gl_event_data(record);
+&nbsp;&nbsp;&nbsp;// You can get, for example, summary:
+&nbsp;&nbsp;&nbsp;// gl_event_data-&gt;summary
+
+&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+
+<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.
+<pre class="prettyprint">typedef struct _calendar_gl_event_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *summary;
+&nbsp;&nbsp;&nbsp;char *description;
+&nbsp;&nbsp;&nbsp;calendar_time_s start_time;
+} calendar_gl_event_data_t;
+
+static void _free_gl_event_data(calendar_gl_event_data_t *gl_event_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_event_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;summary);
+&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;description);
+&nbsp;&nbsp;&nbsp;free(gl_event_data);
+}
+
+static calendar_gl_event_data_t *_create_gl_event_data(calendar_record_h record)
+{
+&nbsp;&nbsp;&nbsp;calendar_gl_event_data_t *gl_event_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_event_data = malloc(sizeof(calendar_gl_event_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_event_data, 0x0, sizeof(calendar_gl_event_data_t));
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.summary, &amp;gl_event_data-&gt;summary);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get summary failed: %i\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.description, &amp;gl_event_data-&gt;description);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get description failed: %i\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_event.id, &amp;gl_event_data-&gt;id);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get id failed: %i\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_event.start_time, &amp;gl_event_data-&gt;start_time);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar get start time failed: %i\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_event_data;
+}</pre>
+<p>To get access to a specified data from the record, firstly it is necessary to get its child responsible for the requested type.</p></li></ol></li>
+<li>Free the list:
+<pre class="prettyprint">calendar_list_destroy(list, true);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update_event" name="update_event" class="items-tit-h2">Updating an Event</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To update an event record:</p>
+
+<ol><li>Get the event record handle to update with the ID.
+<pre class="prettyprint">calendar_record_h record;
+const int event_id = ... // Acquire event ID
+error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
+<li>Set the properties to update.
+<pre class="prettyprint">error_code = calendar_record_set_str(record, _calendar_event.summary, &quot;summary updated&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set summary failed: %x\n&quot;, error_code);
+
+error_code = calendar_record_set_str(record, _calendar_event.description, &quot;description updated&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set description failed: %x\n&quot;, error_code);</pre></li>
+<li>To update the record, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.
+<pre class="prettyprint">error_code = calendar_db_update_record(record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db update record failed: %x\n&quot;, error_code);</pre></li>
+<li>When the event handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the event handle and free the allocated memory.
+<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="delete_event" name="delete_event" class="items-tit-h2">Deleting an Event</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete an event, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> as the first parameter and event ID as the second one:</p>
+<pre class="prettyprint">int event_id = ... // Acquire event ID
+error_code = calendar_db_delete_record(_calendar_event._uri, event_id);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db delete record failed: %x\n&quot;, error_code);</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="exception_add" name="exception_add" class="items-tit-h2">Setting Exceptions when Inserting Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set an exception date to an event record when creating the event:</p>
+
+<ol><li>Create a recurring event.
+<p>The following example creates an event record with the following properties:</p>
+<ul class="ul"><li>Frequency: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RECURRENCE_MONTHLY</span></li>
+<li>Interval: 1</li>
+<li>Bymonthday: &quot;3, 4, 5&quot;</li>
+<li>Range type: count</li>
+<li>Count: 8</li></ul>
+
+<pre class="prettyprint">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;);
+
+calendar_time_s st = {0};
+st.type = CALENDAR_TIME_UTIME;
+st.time.utime = 1349226000;
+error_code  += calendar_record_set_caltime(event, _calendar_event.start_time, st);
+
+calendar_time_s et = {0};
+et.type = CALENDAR_TIME_UTIME;
+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, 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_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);
+error_code += calendar_record_set_int(event, _calendar_event.count, 8);
+
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record create failed: \n&quot;);</pre>
+
+<p>The created event has 8 instances.</p>
+
+  <table>
+   <caption>
+     Table: Event instances
+   </caption>
+   <tbody>
+    <tr>
+     <th>unixtime</th>
+     <th>Date time</th>
+    </tr>
+    <tr>
+     <td>1349226000
+        <br/>1349312400
+        <br/>1349398800
+        <br/>1351904400
+        <br/>1351990800
+        <br/>1352077200
+        <br/>1354496400
+        <br/>1354582800</td>
+     <td>2012-10-03 01:00:00
+        <br/>2012-10-04 01:00:00
+        <br/>2012-10-05 01:00:00
+        <br/>2012-11-03 01:00:00
+        <br/>2012-11-04 01:00:00
+        <br/>2012-11-05 01:00:00
+        <br/>2012-12-03 01:00:00
+        <br/>2012-12-04 01:00:00</td>
+    </tr>
+
+   </tbody>
+  </table></li>
+<li>Set the exdate property to create the exception.
+<p>In vcalendar 2.0 (RFC 2445), exdate is used to identify a deleted instance. If multiple instances are deleted, datetimes are added with a comma (such as 20121104T010000Z, 20121105T010000Z, 20121203T010000Z).</p>
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.exdate, &quot;20121104T010000Z&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record set string failed: %x\n&quot;, error_code);</pre></li>
+<li>Insert the record.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the event into the Calendar database.</p>
+<pre class="prettyprint">int event_id;
+error_code = calendar_db_insert_record(event, &amp;event_id);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar db insert record failed: %x\n&quot;, error_code);
+
+calendar_record_destroy(event, true);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="exception_modify" name="exception_modify" class="items-tit-h2">Adding an Exception Date for an Existing Event</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To add an exception date to an existing event:</p>
+
+<ol><li>Make sure you have an existing event.</li>
+<li>Clone the existing event record and set new properties for the exception.
+<p>Cloning means that the new record has the original event&#39;s properties. In vcalendar 2.0 (RFC 2445), the recurrence ID is used to identify the modified instance (exception).</p>
+<pre class="prettyprint">calendar_record_h clone = NULL;
+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, event_id);
+error_code += calendar_record_set_str(clone, _calendar_event.recurrence_id, &quot;20121005T010000Z&quot;);
+
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record clone failed: %x\n&quot;, error_code);</pre></li>
+<li>Insert the new record.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the new event record into the Calendar database.</p>
+<pre class="prettyprint">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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar db insert record failed: %x\n&quot;, error_code);
+
+calendar_record_destroy(clone, true);
+calendar_record_destroy(event, true);</pre></li></ol>
+
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="monitor_event" name="monitor_event" class="items-tit-h2">Monitoring Event Changes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To register a callback function that listens for event changes:</p>
+<ol><li>Register the callback function.
+<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback, NULL);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db add changed cb failed: %x\n&quot;, error_code);</pre></li>
+<li>Define the callback function.
+<p>The callback function is called when an event changes. The code below shows how to get the new event details.</p>
+<pre class="prettyprint">static calendar_gl_event_data_t *_gl_event_data = ...
+static void _event_changed_callback(const char *view_uri, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_event._uri))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;if (NULL == _gl_event_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;int event_id = _gl_event_data-&gt;id;
+&nbsp;&nbsp;&nbsp;_free_gl_event_data(_gl_event_data);
+&nbsp;&nbsp;&nbsp;_gl_event_data = NULL;
+
+&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;
+&nbsp;&nbsp;&nbsp;int error_code;
+&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp; _gl_event_data = _create_gl_event_data(record);
+&nbsp;&nbsp;&nbsp;// Use _gl_event_data
+
+&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);
+}</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating a Todo</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To define and create a new todo handle record, since the Calendar Service uses a todo handler mechanism:</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined todo handle as a parameter to create a todo associated with the todo handle and a <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> parameter for the todo type.</p>
+<p>Verify the status of the error code. If the todo handle is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, check the error and take appropriate action, or stop other operations on the database.</p>
+<pre class="prettyprint">calendar_record_h todo = NULL;
+error_code = calendar_record_create(_calendar_todo._uri, &amp;todo);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create: %x\n&quot;, error_code);</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set" name="set" class="items-tit-h2">Setting Todo Properties</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set the todo properties:</p>
+<ol><li>Set the todo subject.
+<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the todo handle (created before) as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_todo.summary</span> for the subject type, and the subject, which is string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
+<pre class="prettyprint">error_code = calendar_record_set_str(todo, _calendar_todo.summary, &quot;summary&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the todo description.
+<p>The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_uri()</span> function sets the description of the todo when the second argument is <span style="font-family: Courier New,Courier,monospace">_calendar_todo.description</span>. This function takes the todo handle as the first argument, and the description, which is string value, as the third argument. The description argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
+<pre class="prettyprint">error_code = calendar_record_set_str(todo, _calendar_todo.description, &quot;description&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the todo due date.
+<p>To set the due date, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span> function and check the error codes. </p>
+<pre class="prettyprint">calendar_time_s duetime = {0};
+duetime.type = CALENDAR_TIME_UTIME;
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set due_time failed : %x\n&quot;, error_code);</pre></li>
+<li>Set the todo status.
+<p>You can set the other properties similarly. To set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">todo status</a>, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int()</span> function and check the error codes.</p>
+<pre class="prettyprint">error_code = calendar_record_set_int(todo, _calendar_todo.todo_status, CALENDAR_TODO_STATUS_COMPLETED);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set todo_status failed : %x\n&quot;, error_code);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="insert" name="insert" class="items-tit-h2">Inserting a Todo to the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert a todo record:</p>
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert a newly created todo into the Calendar database. The first argument is the todo handle, the second is the record ID. A unique ID is assigned to the record you are adding, and is returned as the third argument of the called function. If the todo is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.
+<pre class="prettyprint">int id;
+error_code = calendar_db_insert_record(todo, &amp;id);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);</pre></li>
+<li>After inserting, destroy the used structures:
+<pre class="prettyprint">calendar_record_destroy(todo, true);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get" name="get" class="items-tit-h2">Getting Todos</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To retrieve a single todo or all todos one by one. You can also filter the todos by one of the properties:</p>
+
+<ol><li>Get a single todo record using its ID.
+<pre class="prettyprint">calendar_record_h record;
+const int todo_id = ... // Acquire todo ID
+error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
+<li>Get the todo record list.
+<p>To get all todos without filtering, you need a record list:</p>
+<pre class="prettyprint">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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get all records failed: %x\n&quot;, error_code);</pre></li>
+<li>Filter the list.
+<ol><li>To get todos with filtering, you need a record list and a query:
+<pre class="prettyprint">calendar_list_h list = NULL;
+calendar_query_h query = NULL;
+
+error_code = calendar_query_create(_calendar_todo._uri, &amp;query);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create query failed: %x\n&quot;, error_code);</pre></li>
+<li>Before retrieving the todos, create a filter for the list. You can filter the list based on various parameters.
+<pre class="prettyprint">calendar_filter_h filter = NULL;
+
+error_code = calendar_filter_create (_calendar_todo._uri, &amp;filter);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create filter failed: %x\n&quot;, error_code);</pre></li>
+<li>Add a condition, such as summary:
+<pre class="prettyprint">error_code = calendar_filter_add_str(filter, _calendar_todo.summary, CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre></li>
+<li>To add more conditions, define an operator between the conditions:
+<pre class="prettyprint">error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add operator failed: %x\n&quot;, error_code);
+
+error_code = calendar_filter_add_str(filter, _calendar_todo.description, CALENDAR_MATCH_CONTAINS, &quot;description to find&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>
+<p>In the above example, only todos which contain a summary &quot;summary to find&quot; and description &quot;description to find&quot; are retrieved.</p>
+<p>You can create a filter with integer and time conditions. For instance, to filter all todos which are completed, add the following filter:</p>
+<pre class="prettyprint">error_code = 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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add integer failed: %x\n&quot;, error_code);</pre></li>
+<li>Connect the query with the list:
+<pre class="prettyprint">error_code = calendar_query_set_filter(query, filter);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;query set filter failed: %x\n&quot;, error_code);
+
+error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get records with query failed: %x\n&quot;, error_code);</pre>
+<p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>
+
+<li>Free the filter and query:
+<pre class="prettyprint">calendar_filter_destroy(filter);
+calendar_query_destroy(query);</pre></li>
+</ol></li>
+<li>Iterate the list and read the records.
+<ol><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
+<p>Note on the returned values&#39; ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>
+<pre class="prettyprint">calendar_record_h record;
+while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;char* summary;
+&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_todo.summary, &amp;summary);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">calendar_gl_todo_data_t</span> structure like below:
+<pre class="prettyprint">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;gl_todo_data = _create_gl_todo_data(record);
+&nbsp;&nbsp;&nbsp;// You can get, for example, summary:
+&nbsp;&nbsp;&nbsp;// gl_todo_data-&gt;summary
+
+&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+
+<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.
+<pre class="prettyprint">typedef struct _calendar_gl_todo_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *summary;
+&nbsp;&nbsp;&nbsp;char *description;
+&nbsp;&nbsp;&nbsp;calendar_time_s due_time;
+} calendar_gl_todo_data_t;
+
+static void _free_gl_todo_data(calendar_gl_todo_data_t *gl_todo_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_todo_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;summary);
+&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;description);
+&nbsp;&nbsp;&nbsp;free(gl_todo_data);
+}
+
+static calendar_gl_todo_data_t *_create_gl_todo_data(calendar_record_h record)
+{
+&nbsp;&nbsp;&nbsp;calendar_gl_todo_data_t *gl_todo_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_todo_data = malloc(sizeof(calendar_gl_todo_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_todo_data, 0x0, sizeof(calendar_gl_todo_data_t));
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.summary, &amp;gl_todo_data-&gt;summary);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get summary failed: %x\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.description, &amp;gl_todo_data-&gt;description);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get description failed: %x\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_todo.id, &amp;gl_todo_data-&gt;id);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get id failed: %x\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_todo.due_time, &amp;gl_todo_data-&gt;due_time);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar get due time failed: %x\n&quot;, error_code);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_todo_data;
+}</pre>
+<p>To get access to a specified data from the record, firstly you must get its child responsible for the requested type. Data returned by any function with the <span style="font-family: Courier New,Courier,monospace">_p</span> suffix must not be passed to <span style="font-family: Courier New,Courier,monospace">_free_gl_todo_data()</span>.</p></li></ol></li>
+<li>Free the list:
+<pre class="prettyprint">
+calendar_list_destroy(list, true);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update" name="update" class="items-tit-h2">Updating a Todo</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To update a todo record:</p>
+<ol><li>Get the todo record handle to update with the ID.
+<pre class="prettyprint">calendar_record_h record;
+const int todo_id = ... // Acquire todo ID
+error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
+<li>Set the properties to update.
+<pre class="prettyprint">error_code = calendar_record_set_str(record, _calendar_todo.summary, &quot;summary updated&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set summary failed: %x\n&quot;, error_code);
+
+error_code = calendar_record_set_str(record, _calendar_todo.description, &quot;description updated&quot;);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set description failed: %x\n&quot;, error_code);</pre></li>
+<li>To update record, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.
+<pre class="prettyprint">error_code = calendar_db_update_record(record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db update record failed: %x\n&quot;, error_code);</pre></li>
+<li>When the todo handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the todo handle and free the allocated memory.
+<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="delete" name="delete" class="items-tit-h2">Deleting a Todo</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete a todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> as the first parameter and the todo ID as the second one.</p>
+<pre class="prettyprint">int todo_id = ... // Acquire todo ID
+error_code = calendar_db_delete_record(_calendar_todo._uri, todo_id);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db delete record failed: %x\n&quot;, error_code);</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Todo Changes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To register a callback function that listens for todo changes:</p>
+<ol><li>Register the callback function.
+
+<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_todo._uri, _todo_changed_callback, NULL);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db add changed cb failed: %x\n&quot;, error_code);</pre></li>
+<li>Define the callback function.
+<p>The callback function is called when a todo changes. The code below shows how to get the new todo details.</p>
+<pre class="prettyprint">static calendar_gl_todo_data_t *_gl_todo_data = ...
+static void _todo_changed_callback(const char *view_uri, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_todo._uri))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;if (NULL == _gl_todo_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;int todo_id = _gl_todo_data-&gt;id;
+&nbsp;&nbsp;&nbsp;_free_gl_todo_data(_gl_todo_data);
+&nbsp;&nbsp;&nbsp;_gl_todo_data = NULL;
+
+&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;
+&nbsp;&nbsp;&nbsp;calendar_error_e error_code;
+&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;_gl_todo_data = _create_gl_todo_data(record);
+&nbsp;&nbsp;&nbsp;// Use _gl_todo_data
+
+&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);
+}</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="make" name="make" class="items-tit-h2">Making a vCalendar</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To make a vCalendar stream from an event record:</p>
+<ol><li>Get the event record by the event ID.
+<pre class="prettyprint">int event_id = ... // Acquire 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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
+<li>Make the vCalendar stream by the event record.
+<pre class="prettyprint">char *vcalendar_stream = NULL;
+calendar_list_h list = NULL;
+
+error_code = calendar_list_create(&amp;list);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;list create failed: %x\n&quot;, error_code);
+
+error_code = calendar_list_add(list, record);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;list add failed: %x\n&quot;, error_code);
+
+error_code = calendar_vcalendar_make_from_records(list, &amp;vcalendar_stream);
+if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;vcalendar make from records failed: %x\n&quot;, error_code);</pre></li>
+<li>When the list handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_list_destroy()</span> function to destroy the list handle and free the allocated memory.
+<pre class="prettyprint">free(vcalendar_stream);
+calendar_list_destroy(list, true);</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="parse" name="parse" class="items-tit-h2">Parsing a vCalendar</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To parse a vCalendar from a file and insert to the database:</p>
+<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;, resource_path, &quot;vcalendar.ics&quot;);
+free(resource_path);
+
+error_code = calendar_vcalendar_parse_to_calendar_foreach(vcalendar_file_path, // File path of vCalendar
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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, // Callback function 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;NULL); // User data to be passed to the callback function</pre>
+
+<p>The vCalendar stream contains multiple event or todo objects. The callback function is called after parsing each event or todo. If you return <span style="font-family: Courier New,Courier,monospace">false</span> on the callback function, parsing stops.</p>
+<pre class="prettyprint">static bool _vcalendar_parse_cb(calendar_record_h record, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == record)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;int id = -1;
+&nbsp;&nbsp;&nbsp;error_code = calendar_db_insert_record(record, &amp;id);
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;inserted id: %d\n&quot;, id);
+&nbsp;&nbsp;&nbsp;// Use record
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
new file mode 100644 (file)
index 0000000..51edc66
--- /dev/null
+++ b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
@@ -0,0 +1,3479 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Contacts</a></li>
+                       <li>Contacts
+                               <ul class="toc">
+                               <li><a class="opensection" href="#create_contact">Creating a Contact</a></li>
+                               <li><a class="opensection" href="#set_contact">Setting Contact Properties</a></li>
+                               <li><a class="opensection" href="#insert_contact">Inserting a Contact to the Database</a></li>
+                               <li><a class="opensection" href="#get_contact">Getting Contacts</a></li>
+                               <li><a class="opensection" href="#update_contact">Updating a Contact</a></li>
+                               <li><a class="opensection" href="#delete_contact">Deleting a Person</a></li>
+                               <li><a class="opensection" href="#link_contact">Linking and Unlinking Contacts</a></li>
+                               <li><a class="opensection" href="#manage_contact">Managing Favorites</a></li>
+                               <li><a class="opensection" href="#monitor_contact">Monitoring Person Changes</a></li>
+                               </ul></li>
+                       <li>Groups
+                               <ul class="toc">
+                               <li><a class="opensection" href="#create">Creating a Group</a></li>
+                               <li><a class="opensection" href="#set">Setting Group Properties</a></li>
+                               <li><a class="opensection" href="#insert">Inserting a Group to the Database</a></li>
+                               <li><a class="opensection" href="#get">Getting Groups</a></li>
+                               <li><a class="opensection" href="#update">Updating a Group</a></li>
+                               <li><a class="opensection" href="#delete">Deleting a Group</a></li>
+                               <li><a class="opensection" href="#manage">Managing Group Members</a></li>
+                               <li><a class="opensection" href="#monitor">Monitoring Group Changes</a></li>
+                               </ul></li>
+                       <li>vCards
+                               <ul class="toc">
+                               <li><a class="opensection" href="#make">Making a vCard</a></li>
+                               <li><a class="opensection" href="#parse">Parsing a vCard</a></li>
+                               </ul></li>
+                       <li>Speed dials
+                               <ul class="toc">
+                               <li><a class="opensection" href="#sd_init">Initializing the Speed Dial Feature</a></li>
+                               <li><a class="opensection" href="#sd_create">Creating a Speed Dial</a></li>
+                               <li><a class="opensection" href="#sd_set">Setting Speed Dial Properties</a></li>
+                               <li><a class="opensection" href="#sd_insert">Inserting a Speed Dial to the Database</a></li>
+                               <li><a class="opensection" href="#sd_get">Getting Speed Dials</a></li>
+                               <li><a class="opensection" href="#sd_update">Updating a Speed Dial</a></li>
+                               <li><a class="opensection" href="#sd_delete">Deleting a Speed Dial</a></li>
+                               </ul>
+                       </li>
+                       <li>Phone logs
+                               <ul class="toc">
+                               <li><a class="opensection" href="#pl_init">Initializing the Phone Log</a></li>
+                               <li><a class="opensection" href="#pl_create">Creating a Log</a></li>
+                               <li><a class="opensection" href="#pl_set">Setting Log Properties</a></li>
+                               <li><a class="opensection" href="#pl_insert">Inserting a Log to the Database</a></li>
+                               <li><a class="opensection" href="#pl_get">Getting Logs</a></li>
+                               <li><a class="opensection" href="#pl_delete">Deleting a Log</a></li>
+                               </ul>
+                       </li>                   
+                       <li>Records
+                               <ul class="toc">
+                               <li><a class="opensection" href="#insert2">Inserting New Records</a></li>
+                               <li><a class="opensection" href="#get2">Getting Record Details</a></li>
+                               <li><a class="opensection" href="#list2">Handling Lists</a></li>
+                               <li><a class="opensection" href="#delete2">Deleting Records</a></li>
+                               <li><a class="opensection" href="#link2">Linking Persons</a></li>
+                               </ul></li>
+                       <li>Contact settings
+                               <ul class="toc">
+                               <li><a class="opensection" href="#settings">Managing Contact Settings</a></li>
+                               <li><a class="opensection" href="#sim">Managing Contacts on the SIM Card</a></li>
+                               </ul></li>
+                       <li>vCard information
+                               <ul class="toc">
+                               <li><a class="opensection" href="#import">Importing from vCard</a></li>
+                               <li><a class="opensection" href="#export">Exporting to vCard</a></li>
+                               </ul></li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contacts Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</h1>
+   <div class="cont"><div class="static-cont"> 
+   
+<p>This tutorial demonstrates how you can manage contacts and groups, and import them to or export them from the vCard format.</p>
+
+  <h2>Warm-up</h2>
+      <p>Become familiar with the Contacts API basics by learning about:</p>
+      <ul>
+                       <li><a class="opensection" href="#init">Initializing Contacts</a>
+                       <p>Initialize the contacts for use.</p></li>
+                       <li>Contacts
+                               <ul><li><a class="opensection" href="#create_contact">Creating a Contact</a>
+                               <p>Create a new contact.</p></li>
+                               <li><a class="opensection" href="#set_contact">Setting Contact Properties</a>
+                               <p>Set contact properties, such as name and image.</p></li>
+                               <li><a class="opensection" href="#insert_contact">Inserting a Contact to the Database</a>
+                               <p>Insert a contact to the Contacts database.</p></li>
+                               <li><a class="opensection" href="#get_contact">Getting Contacts</a>
+                               <p>Retrieve single contacts or a list of contacts.</p></li>
+                               <li><a class="opensection" href="#update_contact">Updating a Contact</a>
+                               <p>Update contact details.</p></li>
+                               <li><a class="opensection" href="#delete_contact">Deleting a Person</a>
+                               <p>Delete the person from the database.</p></li>
+                               <li><a class="opensection" href="#link_contact">Linking and Unlinking Contacts</a>
+                               <p>Link and unlink contacts to persons.</p></li>
+                               <li><a class="opensection" href="#manage_contact">Managing Favorites</a>
+                               <p>Set or unset a person to be a favorite.</p></li>
+                               <li><a class="opensection" href="#monitor_contact">Monitoring Person Changes</a>
+                               <p>Receive notifications when changes occur in persons.</p></li>
+                               </ul></li>
+                       <li>Groups
+                               <ul><li><a href="#create">Creating a Group</a>
+                               <p>Create a new group.</p></li>
+                               <li><a class="opensection" href="#set">Setting Group Properties</a>
+                               <p>Set group properties, such as name and image.</p></li>
+                               <li><a class="opensection" href="#insert">Inserting a Group to the Database</a>
+                               <p>Insert a group to the Contacts database.</p></li>
+                               <li><a class="opensection" href="#get">Getting Groups</a>
+                               <p>Retrieve single groups or a list of groups.</p></li>
+                               <li><a class="opensection" href="#update">Updating a Group</a>
+                               <p>Update group details.</p></li>
+                               <li><a class="opensection" href="#delete">Deleting a Group</a>
+                               <p>Delete the group from the database.</p></li>
+                               <li><a class="opensection" href="#manage">Managing Group Members</a>
+                               <p>Add, remove, and retrieve group members.</p></li>
+                               <li><a class="opensection" href="#monitor">Monitoring Group Changes</a>
+                               <p>Receive notifications when changes occur in groups.</p></li>
+                               </ul></li>
+                       <li>vCards
+                               <ul>
+                               <li><a class="opensection" href="#make">Making a vCard</a>
+                               <p>Make a vCard stream from a person record.</p></li>
+                               <li><a class="opensection" href="#parse">Parsing a vCard</a>
+                               <p>Parse a vCard from a file and insert to the database.</p></li>
+                               </ul></li>
+                       <li>Speed dials 
+                               <ul>
+                               <li><a class="opensection" href="#sd_init">Initializing the Speed Dial Feature</a>
+                               <p>Initialize the speed dial feature for use.</p></li>
+                               <li><a class="opensection" href="#sd_create">Creating a Speed Dial</a>
+                               <p>Create a new speed dial.</p></li>
+                               <li><a class="opensection" href="#sd_set">Setting Speed Dial Properties</a>
+                               <p>Set speed dial properties, such as speed dial number and number ID.</p></li>
+                               <li><a class="opensection" href="#sd_insert">Inserting a Speed Dial to the Database</a>
+                               <p>Insert a speed dial to the database.</p></li>
+                               <li><a class="opensection" href="#sd_get">Getting Speed Dials</a>
+                               <p>Retrieve a single speed dial or a list of speed dials.</p></li>
+                               <li><a class="opensection" href="#sd_update">Updating a Speed Dial</a>
+                               <p>Update speed dial details.</p></li>
+                               <li><a class="opensection" href="#sd_delete">Deleting a Speed Dial</a>
+                               <p>Delete the speed dial from the database.</p></li>
+                               </ul></li>
+                       <li>Phone logs  
+                               <ul>
+                               <li><a class="opensection" href="#pl_init">Initializing the Phone Log</a>
+                               <p>Initialize the phone log for use.</p></li>
+                               <li><a class="opensection" href="#pl_create">Creating a Log</a>
+                               <p>Create a new log.</p></li>
+                               <li><a class="opensection" href="#pl_set">Setting Log Properties</a>
+                               <p>Set log properties, such as type, time, and address.</p></li>
+                               <li><a class="opensection" href="#pl_insert">Inserting a Log to the Database</a>
+                               <p>Insert a log to the database.</p></li>
+                               <li><a class="opensection" href="#pl_get">Getting Logs</a>
+                               <p>Retrieve single log or a list of logs.</p></li>
+                               <li><a class="opensection" href="#pl_delete">Deleting a Log</a>
+                               <p>Delete the log from the database.</p></li>
+                               </ul>                           
+                       </li></ul>
+               <h2>Follow-up</h2> 
+               <p>Once we have learned the basics of the Contacts API, we can now move on to more advanced tasks, including:</p>
+               <ul>
+                       <li>Records
+                               <ul>
+                               <li><a class="opensection" href="#insert2">Inserting New Records</a>
+                               <p>Add new records to the database.</p></li>
+                               <li><a class="opensection" href="#get2">Getting Record Details</a>
+                               <p>Get information from existing records.</p></li>
+                               <li><a class="opensection" href="#list2">Handling Lists</a>
+                               <p>Iterate, filter, and sort record lists.</p></li>
+                               <li><a class="opensection" href="#delete2">Deleting Records</a>
+                               <p>Remove records from the database.</p></li>
+                               <li><a class="opensection" href="#link2">Linking Persons</a>
+                               <p>Assign several contacts to one person.</p></li>
+                               </ul></li>
+                       <li>Contact settings
+                               <ul>
+                               <li><a class="opensection" href="#settings">Managing Contact Settings</a>
+                               <p>Change the display settings of contacts.</p></li>                            
+                               <li><a class="opensection" href="#sim">Managing Contacts on the SIM Card</a>
+                               <p>Check that the SIM card is initialized and import contacts from the SIM card.</p></li>
+                               </ul></li>
+                       <li>vCard information
+                               <ul>
+                               <li><a class="opensection" href="#import">Importing from vCard</a>
+                               <p>Import contacts from vCard files.</p></li>
+                               <li><a class="opensection" href="#export">Exporting to vCard</a>
+                               <p>Export contacts to vCard files.</p></li>
+                               </ul></li>
+                               </ul>
+             
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Contacts</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To start with the Contact Service:</p>
+<ol><li>                       
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;contacts.h&gt;
+</pre></li>    
+<li>Most of the API functions return error codes, therefore define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store error codes. Each time when a function returns error codes, verify the result of the operation.</li>
+<li><p>Call the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function, which connects your application with the Contact Service. Without this function, you cannot get access to the Contacts database.</p>
+<pre class="prettyprint">int error_code;
+error_code = contacts_connect();
+</pre></li>
+<li>When the Contacts APIs are not needed anymore, you have to disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function:
+<pre class="prettyprint">error_code = contacts_disconnect();
+</pre></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create_contact" name="create_contact" class="items-tit-h2">Creating a Contact</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Before you insert a record, you need to create a record handle. To create it and assign a new record:</p>
+<pre class="prettyprint">contacts_record_h contact;
+
+error_code = contacts_record_create(_contacts_contact._uri, &amp;contact);
+</pre>
+
+<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> to create contact type records.</p>
+<p>This record, however, contains no additional information, like a name or phone number. To add them, you must set contact properties by creating additional records and setting them as child records of the contact record. Note that records created this way are objects in the memory, with <span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variables as their handles. Changes made to these objects are not reflected in the database until your explicit request, using <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span>.</p>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set_contact" name="set_contact" class="items-tit-h2">Setting Contact Properties</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set the contact name, birthday, and phone number:</p>
+<ol><li>Add the contact name.
+<ol><li>Create a name record:
+<pre class="prettyprint">contacts_record_h name;
+
+error_code = contacts_record_create(_contacts_name._uri, &amp;name);
+</pre></li>
+<li>To set the first name, set the value of a string type property identified by <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span>.
+<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function is used to set string field values. There are other similar functions for other types, such as integer and double. The <span style="font-family: Courier New,Courier,monospace">name</span> variable is the record handle created above. The second argument – <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span> – is the property identifier, and the third argument is the value to be assigned.</p></li>
+<li>Set the last name similarly:
+<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.last, &quot;Smith&quot;);
+</pre>
+</li>
+<li>Associate the <span style="font-family: Courier New,Courier,monospace">name</span> record with the <span style="font-family: Courier New,Courier,monospace">contact</span> record, by setting the name as the contact&#39;s child record. In this example, it is achieved using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span>.
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.name, name);
+</pre>
+<p>The second argument (<span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>) is the parent property to which the child record is assigned. See <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">Contacts</a> API. In the API, the <span style="font-family: Courier New,Courier,monospace">name</span> property is listed as one of the <span style="font-family: Courier New,Courier,monospace">record</span> type properties, which means that other records can be assigned to this property as child records (&quot;single&quot; means that only 1 <span style="font-family: Courier New,Courier,monospace">_contacts_name</span> type child record is allowed). The required type of the child record is specified in the API. </p></li></ol></li>
+<li>Add an image.
+<ol><li>Create an image record:
+<pre class="prettyprint">contacts_record_h image;
+
+error_code = contacts_record_create(_contacts_image._uri, &amp;image);
+</pre></li>
+<li>To set the image, set the value of a string type property identified by <span style="font-family: Courier New,Courier,monospace">_contacts_image.path</span>:
+<pre class="prettyprint">
+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);
+free(resource_path);
+error_code = contacts_record_set_str(image, _contacts_image.path, caller_id_path);
+</pre></li>
+<li>Set the image record as the contact&#39;s child record:
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.image, image);
+</pre></li></ol></li>
+<li>Add an event.
+<p>You can add a birthday event associated with the contact. An event contains the date and the event type, among other properties.</p>
+<ol><li>Create an event record:
+<pre class="prettyprint">contacts_record_h event;
+
+error_code = contacts_record_create(_contacts_event._uri, &amp;event);
+</pre></li>
+<li>Set the event date. The date is an integer, equal to year * 10000 + month * 100 + day.
+<pre class="prettyprint">int year = 1990;
+int month = 5;
+int day = 21;
+int int_date = year * 10000 + month * 100 + day;
+
+error_code = contacts_record_set_int(event, _contacts_event.date, int_date);
+</pre></li>
+<li>Set the event type to birthday. For available types, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">contacts_event_type_e</a> enumeration.
+<pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_BIRTH);
+</pre></li>
+<li>If the type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_CUSTOM</span>, you can set a custom label (see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_event">_contacts_event view</a>).
+<pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_CUSTOM);
+
+error_code = contacts_record_set_str(event, _contacts_event.label, &quot;Event description&quot;);
+</pre></li>
+<li>Set the event record as the contact&#39;s child record:
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.event, event);
+</pre></li></ol></li>
+<li>Add a phone number.
+<p>The phone number is added to a parent record using an alternative method.</p>
+<ol><li>Create a phone number record and set the <span style="font-family: Courier New,Courier,monospace">number</span> property:
+<pre class="prettyprint">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;);
+</pre></li>
+<li>Set the number record as the contact&#39;s child record:
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);
+</pre></li></ol></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="insert_contact" name="insert_contact" class="items-tit-h2">Inserting a Contact to the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To insert a contact:</p>
+
+<ol><li><p>When the data is set for the contact and name records, you can insert them into the database. When you insert a parent record, all child records added to it using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> are inserted automatically.</p>
+
+<p>Insert a contact record:</p>
+
+<pre class="prettyprint">int id = -1;
+
+error_code = contacts_db_insert_record(contact, &amp;id);
+</pre></li>
+<li>When the records are in the database, the objects representing them in the memory are no longer needed and must be destroyed.
+<pre class="prettyprint">contacts_record_destroy(contact, true);</pre>
+<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, child records of the given record (objects representing them in the memory) are also destroyed. This does not depend on the way the child records were added.</p></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get_contact" name="get_contact" class="items-tit-h2">Getting Contacts</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To retrieve contact records:</p>
+
+<ol><li><p>A person is an aggregation of one or more contacts associated with the same person. The person is created automatically when inserting a contact record. To use the contact information in your application, you must learn to print basic person information.</p>
+
+<p>To get a single person record:</p>
+<ol><li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">person_id</span>:</p>
+<pre class="prettyprint">contacts_record_h person  = NULL;
+const int person_id = ... // Acquire person ID
+int error_code;
+
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
+</pre></li>
+<li>When you no longer need the person record, destroy the used structures:
+<pre class="prettyprint">
+contacts_record_destroy(speeddial, true);
+</pre></li></ol></li>
+
+<li>To get the total person record list:
+<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<pre class="prettyprint">contacts_list_h list = NULL;
+
+error_code = contacts_db_get_all_records(_contacts_person._uri, 0, 0, &amp;list);
+</pre></li>
+<li><p id="iterate_c" name="iterate_c">Iterate the list and read the records.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<ol><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>  
+  
+<pre class="prettyprint">contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;char* display_name;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_person.display_name, &amp;display_name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display_name: %s&quot;, display_name);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+}</pre></li>
+<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_person_data_t</span> structure like below:
+<pre class="prettyprint">contacts_gl_person_data_t *gl_person_data = NULL;
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;gl_person_data = _create_gl_person_data(record);
+&nbsp;&nbsp;&nbsp;// You can get, for example, display name:
+&nbsp;&nbsp;&nbsp;// gl_person_data-&gt;display_name
+
+&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+}</pre></li>
+<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.
+<pre class="prettyprint">typedef struct _contacts_gl_person_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *display_name;
+&nbsp;&nbsp;&nbsp;char *default_phone_number;
+&nbsp;&nbsp;&nbsp;contacts_list_h associated_contacts;
+} contacts_gl_person_data_t;
+
+static void _free_gl_person_data(contacts_gl_person_data_t *gl_person_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_person_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;display_name);
+&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;default_phone_number);
+&nbsp;&nbsp;&nbsp;contacts_list_destroy(gl_person_data-&gt;associated_contacts, true);
+&nbsp;&nbsp;&nbsp;free(gl_person_data);
+}
+
+static contacts_gl_person_data_t* _create_gl_person_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_person_data_t *gl_person_data;
+
+&nbsp;&nbsp;&nbsp;gl_person_data = malloc(sizeof(contacts_gl_person_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_person_data, 0x0, sizeof(contacts_gl_person_data_t));
+&nbsp;&nbsp;&nbsp;if (contacts_record_get_int(record, _contacts_person.id, &amp;gl_person_data-&gt;id) != CONTACTS_ERROR_NONE)
+&nbsp;&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;_free_gl_person_data(gl_person_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&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;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_display_name() failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (false == _get_default_phone_number(record, &amp;gl_person_data-&gt;default_phone_number))
+&nbsp;&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;_free_gl_person_data(gl_person_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (false == _get_associated_contacts(record, &amp;gl_person_data-&gt;associated_contacts))
+&nbsp;&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;_free_gl_person_data(gl_person_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;_print_phone_numbers(gl_person_data-&gt;associated_contacts);
+&nbsp;&nbsp;&nbsp;_print_events(gl_person_data-&gt;associated_contacts);
+
+&nbsp;&nbsp;&nbsp;return gl_person_data;
+}</pre></li>
+<li>Get person details.
+<ul class="ul">
+<li>Get the display name.
+<p>Assuming that you have the person record handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span>), you can access the <span style="font-family: Courier New,Courier,monospace">display_name</span> property. You can read the display name property and print it:</p>
+<pre class="prettyprint">static bool _get_display_name(contacts_record_h record, char **display_name)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(record, _contacts_person.display_name, display_name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display name: %s&quot;, *display_name);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li>
+<li>Get associated contacts.
+<p>You can get the associated contacts of a person by query. In this example, you get the associated contact records.</p>
+<pre class="prettyprint">static bool _get_associated_contacts(contacts_record_h record, contacts_list_h *associated_contacts)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+&nbsp;&nbsp;&nbsp;int person_id;
+&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
+&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
+
+&nbsp;&nbsp;&nbsp;error_code = CONTACTS_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_contact._uri, &amp;query);
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
+
+&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
+
+&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
+
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li>
+<li>Get phone numbers.
+<p>You can get the numbers of a person by iterating the contacts list. In this example, you get all the number records and print them.</p>
+<pre class="prettyprint">static void _print_phone_numbers(contacts_list_h associated_contacts)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+&nbsp;&nbsp;&nbsp;contacts_record_h contact;
+&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) 
+&nbsp;&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;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact) == CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_count(contact, _contacts_contact.number, &amp;count);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_get_child_record_count(%d)&quot;, error_code);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&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;contacts_record_h number = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.number, i, &amp;number);
+&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;continue;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int number_id;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(number, _contacts_number.id, &amp;number_id);
+&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;char *number_str = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(number, _contacts_number.number, &amp;number_str);
+&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;error_code = contacts_list_next(associated_contacts);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li>
+<li>Get the default phone number.
+<p>If a contact has multiple phone numbers, one of them is defined as the default phone number. A person also has a default phone number. You can get the default phone number of a person by query. The Contact Service provides the <span style="font-family: Courier New,Courier,monospace">_contacts_person_number</span> view for getting the default phone number of a person. In the default phone number record, the <span style="font-family: Courier New,Courier,monospace">is_primary_default</span> property value is <span style="font-family: Courier New,Courier,monospace">true</span>. This example shows how to get the default phone number of a person by query.</p>
+<pre class="prettyprint">static bool _get_default_phone_number(contacts_record_h record, char **default_phone_number)
+{
+&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
+&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
+&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
+&nbsp;&nbsp;&nbsp;contacts_record_h record_person_number = NULL;
+&nbsp;&nbsp;&nbsp;int person_id;
+&nbsp;&nbsp;&nbsp;int error_code = CONTACTS_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
+
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_person_number._uri, &amp;query);
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_person_number._uri, &amp;filter);
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default, true);
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
+&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+&nbsp;&nbsp;&nbsp;error_code += contacts_list_get_current_record_p(list, &amp;record_person_number);
+
+&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_str(record_person_number, _contacts_person_number.number, default_phone_number);
+
+&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
+&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
+
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li>
+<li>Get events.
+<p>You can get the events by iterating the contacts list.</p>
+<pre class="prettyprint">static void _print_events(contacts_list_h associated_contacts)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+&nbsp;&nbsp;&nbsp;contacts_record_h contact;
+&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) 
+&nbsp;&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;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact) == CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_count(contact, _contacts_contact.event, &amp;count);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_get_child_record_count(%d)&quot;, error_code);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&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;contacts_record_h event = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, i, &amp;event);
+&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;continue;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int event_id;
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event id: %d&quot;, event_id);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int date;
+&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;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event: %d&quot;, date);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li></ul></li></ol></li>
+<li>When you no longer need the person record, destroy the used structures:
+<pre class="prettyprint">
+contacts_list_destroy(list, true);</pre>
+</li></ol></li>
+       <li>To get the filtered person record list:
+       <ol>
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:
+               <ol>
+                       <li>To get a person list with filtering, create a record list and a query:
+                       <pre class="prettyprint">
+contacts_list_h list = NULL;
+contacts_query_h query = NULL;
+
+error_code = contacts_query_create(_contacts_person._uri, &amp;query);
+</pre>
+                       </li>
+                       <li>Create a filter:
+                       <pre class="prettyprint">
+contacts_filter_h filter = NULL;
+
+error_code = contacts_filter_create(_contacts_person._uri, &amp;filter);
+</pre>
+                       </li>
+                       <li>Add a condition, such as display_name:
+                       <pre class="prettyprint">
+error_code = contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;John&quot;);
+</pre>
+                       </li>
+                       <li>To add multiple conditions, you must define an operator between the conditions:
+                       <pre class="prettyprint">
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+
+error_code = contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);
+</pre>
+                       </li>
+                       <li>Connect the query with the list:
+                       <pre class="prettyprint">
+error_code = contacts_query_set_filter(query, filter);
+
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+</pre>
+
+                       <p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p>
+                       </li>
+                       <li>Free the filter and query:
+                       <pre class="prettyprint">
+contacts_filter_destroy(filter);
+contacts_query_destroy(query);
+</pre>
+                       </li>
+               </ol>
+               </li>
+               <li><a href="#iterate_c">Iterate the list and read the records.</a></li>
+               <li>When you no longer need the person record, destroy the used structures:
+               <pre class="prettyprint">
+contacts_list_destroy(list, true);
+</pre>
+               </li>
+       </ol>
+       </li>
+       <li>To get the searched person record list:
+       <ol>
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function.
+               <p>The Contact Service provides an API for the contact search. The <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function provides an easy way to find records based on a given keyword. The following example shows how to find the contact records which contain the &quot;John&quot; keyword:</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);
+</pre>
+               </li>
+               <li><a href="#iterate_c">Iterate the list and read the records.</a></li>
+               <li>When you no longer need the person record, destroy the used structures:
+               <pre class="prettyprint">
+contacts_list_destroy(list, true);
+</pre>
+               </li>
+       </ol>
+       </li>
+</ol>
+
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update_contact" name="update_contact" class="items-tit-h2">Updating a Contact</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To change the name, birthday, and phone number of an existing contact:</p>
+<ol><li>Get the contact.
+<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the contact ID:</p>
+<pre class="prettyprint">int contact_id = ... // Acquire contact ID
+contacts_record_h contact = NULL;
+
+error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);
+</pre>
+<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p></li>
+<li>Change the name.
+<ol><li><p>To modify the contact name, get the name record with the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, which provides a list of the child records of a given type.</p>
+<pre class="prettyprint">contacts_record_h name = NULL;
+
+error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &amp;name);
+</pre>
+
+<p>The function parameters are the parent record, the child record type, a child record index, and the resulting child record. Since there can be only one child record of type <span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>, the index is set to 0 to get the first (and only) child record.</p></li>
+
+<li>Change the first name:
+<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.first, &quot;Mark&quot;);
+</pre>
+<p>This only changes the data in the memory object, not in the database. To insert the new value, the <span style="font-family: Courier New,Courier,monospace">name</span> record must be inserted. However, if you acquire this record using <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> (as in this example), you only need to update the parent record.</p></li></ol></li>
+<li>Change the birthday event.
+<ol><li>If only 1 event is set for the contact, you can call <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> to get the event record. If there are more events, you must iterate over the child records.
+<pre class="prettyprint">contacts_record_h event = NULL;
+error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &amp;event);
+</pre></li>
+
+<li>Update the record:
+<pre class="prettyprint">int new_date = 1990 * 10000 + 6 * 100 + 21;
+
+error_code = contacts_record_set_int(event, _contacts_event.date, new_date);
+</pre></li></ol></li>
+<li>Update the contact record.
+<p>Update the contact. Any changes in the child records (such as name and birthday) are also inserted.</p>
+<pre class="prettyprint">error_code = contacts_db_update_record(contact);
+</pre></li>
+<li>When the record handle is no more needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory:
+<pre class="prettyprint">contacts_record_destroy(contact, true);</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="delete_contact" name="delete_contact" class="items-tit-h2">Deleting a Person</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_person._uri</span> as the first parameter and the person ID as the second one:</p>
+<pre class="prettyprint">int person_id = ... // Acquire person ID
+
+error_code = contacts_db_delete_record(_contacts_person._uri, person_id);
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="link_contact" name="link_contact" class="items-tit-h2">Linking and Unlinking Contacts</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To link and unlink contacts (manually and automatically):</p>
+<ul class="ul"><li>To link a person to another person manually, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function with base person ID as the first parameter and another person ID as the second one.
+<pre class="prettyprint">int person_id1 = ... // Acquire base person ID
+int person_id2 = ... // Acquire another person ID
+
+error_code = contacts_person_link_person(person_id1, person_id2);
+</pre></li>
+<li>To link a contact automatically to a person when creating, set the <span style="font-family: Courier New,Courier,monospace">link_mode</span> property to <span style="font-family: Courier New,Courier,monospace">CONTACTS_CONTACT_LINK_MODE_NONE</span> when inserting.
+<p>The Contact Service determines the link based on the <span style="font-family: Courier New,Courier,monospace">number</span> and <span style="font-family: Courier New,Courier,monospace">email</span> properties. If the links leads to  a contact in the same address book, the link does not work.</p>
+<pre class="prettyprint">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, 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_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_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
+error_code += contacts_db_insert_record(contact, NULL);
+
+contacts_record_destroy(contact, true);</pre></li>
+<li>To unlink a contact from a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_unlink_contact()</span> function with the base person ID as the first parameter and the contact ID as the second one. A new person is created when unlinking. You can get the new person ID as the third parameter.
+<pre class="prettyprint">int person_id = ... // Acquire base person ID
+int contact_id = ... // Acquire contact ID
+int unlinked_person_id;
+
+error_code = contacts_person_unlink_contact(person_id, contact_id, &amp;unlinked_person_id);
+</pre></li></ul>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage_contact" name="manage_contact" class="items-tit-h2">Managing Favorites</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage person favorites:</p>
+<ul class="ul"><li>To set a person as favorite when creating a contact, use the <span style="font-family: Courier New,Courier,monospace">is_favorite</span> property of the <span style="font-family: Courier New,Courier,monospace">person</span> record. If the property is set to <span style="font-family: Courier New,Courier,monospace">true</span> when creating a contact, the person is set as favorite:
+<pre class="prettyprint">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_bool(contact, _contacts_contact.is_favorite, true);
+// Set other properties
+
+// New person is set as favorite
+error_code += contacts_db_insert_record(contact, NULL);
+
+contacts_record_destroy(contact, true);</pre></li>
+<li>To set an existing person as favorite, update the <span style="font-family: Courier New,Courier,monospace">person</span> record:
+<pre class="prettyprint">int person_id = ... // Acquire person ID
+contacts_record_h person = NULL;
+
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
+
+error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, true);
+
+error_code = contacts_db_update_record(person);
+
+contacts_record_destroy(person, true);</pre></li>
+<li>To unset a favorite:
+<pre class="prettyprint">int person_id = ... // Acquire person ID
+contacts_record_h person = NULL;
+
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
+
+error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, false);
+
+error_code = contacts_db_update_record(person);
+
+contacts_record_destroy(person, true);</pre></li></ul>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="monitor_contact" name="monitor_contact" class="items-tit-h2">Monitoring Person Changes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To register a callback function to listen for person changes:</p>
+<ol><li>Register the callback function.
+<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_person._uri, _person_changed_callback, NULL);
+</pre></li>
+<li>Define the callback function.
+<p>The callback function is called when the person data changes. The code below shows how to update person details in the callback function.</p>
+<pre class="prettyprint">static contacts_gl_person_data_t *_gl_person_data = ...
+void _person_changed_callback(const char *view_uri, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_person._uri))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;if (_gl_person_data == NULL)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;int person_id = _gl_person_data-&gt;id;
+&nbsp;&nbsp;&nbsp;_free_gl_person_data(_gl_person_data);
+&nbsp;&nbsp;&nbsp;_gl_person_data = NULL;
+
+&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;_gl_person_data = _create_gl_person_data(record);
+&nbsp;&nbsp;&nbsp;// Use _gl_person_data
+
+&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);
+}</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating a Group</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a new group record:</p>
+<pre class="prettyprint">contacts_record_h group = NULL;
+
+error_code = contacts_record_create(_contacts_group._uri, &amp;group);
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set" name="set" class="items-tit-h2">Setting Group Properties</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set group properties:</p>
+
+<ol><li>Set the group name.
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function sets the name of the group when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_group.name</span>. This function takes the group record handle as the first argument, and the name, which is a string value, as the third argument. The name argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service if needed.</p>
+<pre class="prettyprint">error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbors&quot;);
+</pre></li>
+<li>Set an image and ringtone path.
+<p>You can set the other properties similarly. To set the image and ringtone path, call the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function and check the error codes.</p>
+<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);
+error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
+snprintf(temp_path, sizeof(temp_path), &quot;%s/ringtone.mp3&quot;, resource_path);
+free(resource_path);
+error_code = contacts_record_set_str(group, _contacts_group.ringtone_path, temp_path);
+</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="insert" name="insert" class="items-tit-h2">Inserting a Group to the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert a group record:</p>
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created group into the Contacts database.
+<p> The first argument is the group record handle, the second is the record ID. A unique ID is assigned to the record your are adding, and is returned as the third argument of the called function. If the group is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.</p>
+<pre class="prettyprint">int added_group_id = -1;
+
+error_code = contacts_db_insert_record(group, &amp;added_group_id);
+</pre></li>
+<li>After inserting, the used structures have to be destroyed:
+<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get" name="get" class="items-tit-h2">Getting Groups</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get all of the group records one by one, or to filter them by one of the properties:</p>
+
+<ol><li>To get a single group record:
+<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">group_id</span>:</p>
+<pre class="prettyprint">contacts_record_h group;
+int group_id = ... // Acquire group ID
+error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
+</pre></li>
+<li>When you no longer need the group record, destroy the used structures:
+
+<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol></li>
+
+<li>To get the total group record list:
+<ol><li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<pre class="prettyprint">contacts_list_h list = NULL;
+error_code = contacts_db_get_all_records(_contacts_group._uri, 0, 0, &amp;list);
+</pre></li>
+
+<li>To iterate the list and read the records:
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+               <ol>
+                       <li>
+                       <p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
+
+                       <pre class="prettyprint">
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;char* name;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, "group name: %s", name);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre>
+                       </li>
+                       <li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure like below:
+                       <pre class="prettyprint">
+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;gl_group_data = _create_gl_group_data(record);
+&nbsp;&nbsp;&nbsp;// You can get, for example, display name:
+&nbsp;&nbsp;&nbsp;// gl_group_data-&gt;name
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre>
+                       </li>
+                       <li>The memory for the record data is allocated, and the data is copied from the record by the functions listed in the following snippet:
+                       <pre class="prettyprint">
+typedef struct _contacts_gl_group_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *name;
+&nbsp;&nbsp;&nbsp;char *image_path;
+&nbsp;&nbsp;&nbsp;char *ringtone_path;
+} contacts_gl_group_data_t;
+
+static void _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);
+&nbsp;&nbsp;&nbsp;free(gl_group_data);
+}
+
+static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
+
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id, &amp;gl_group_data-&gt;id))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name, &amp;gl_group_data-&gt;name))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path, &amp;gl_group_data-&gt;image_path))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path, &amp;gl_group_data-&gt;ringtone_path))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_group_data;
+}</pre>
+                       </li>
+               </ol>
+               </li>
+               <li>When you no longer need the group record, destroy the used structures:
+               <pre class="prettyprint">
+contacts_list_destroy(list, true);
+</pre>
+               </li>
+       </ol>
+       </li>
+       <li>To get the filtered group record list:
+       <ol>
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:
+               <ol>
+<li>To get groups with filtering, you need a record list and a query:
+<pre class="prettyprint">contacts_list_h list = NULL;
+contacts_query_h query = NULL;
+
+error_code = contacts_query_create(_contacts_group._uri, &amp;query);
+</pre></li>
+<li>Before getting the groups, filter the list. There is a possibility to filter based on various parameters. To create a filter, the following code is used:
+<pre class="prettyprint">contacts_filter_h filter = NULL;
+
+error_code = contacts_filter_create(_contacts_group._uri, &amp;filter);
+</pre></li>
+<li>Add a condition, such as group name:
+<pre class="prettyprint">error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;neighbors&quot;);
+</pre>
+<p>That way only groups which contain the name &quot;neighbors&quot; are retrieved. To use multiple conditions, add an operator between them:</p>
+<pre class="prettyprint">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;);
+</pre></li>
+<li>Connect the query with the list:
+<pre class="prettyprint">error_code = contacts_query_set_filter(query, filter);
+
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+</pre>
+<p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>
+<li>Free the filter and query:
+<pre class="prettyprint">
+contacts_filter_destroy(filter);
+contacts_query_destroy(query);
+</pre></li>
+</ol></li>
+<li>To iterate the list and read the records:
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<ol><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
+
+<pre class="prettyprint">contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;char* name;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;group name: %s&quot;, name);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+<li><p>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure like below: </p>
+<pre class="prettyprint">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;gl_group_data = _create_gl_group_data(record);
+&nbsp;&nbsp;&nbsp;// You can get, for example, display name:
+&nbsp;&nbsp;&nbsp;// gl_group_data-&gt;name
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+<li><p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>
+<pre class="prettyprint">typedef struct _contacts_gl_group_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *name;
+&nbsp;&nbsp;&nbsp;char *image_path;
+&nbsp;&nbsp;&nbsp;char *ringtone_path;
+} contacts_gl_group_data_t;
+
+static void _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);
+&nbsp;&nbsp;&nbsp;free(gl_group_data);
+}
+
+static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
+
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id, &amp;gl_group_data-&gt;id))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name, &amp;gl_group_data-&gt;name))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path, &amp;gl_group_data-&gt;image_path))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path, &amp;gl_group_data-&gt;ringtone_path))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_group_data;
+}</pre></li></ol></li>
+<li>When you no longer need the group record, destroy the used structures:
+<pre class="prettyprint">
+contacts_list_destroy(list, true);</pre>
+</li></ol></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update" name="update" class="items-tit-h2">Updating a Group</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To change the name and image of an existing person:</p>
+<ol><li>Get the group.
+<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h type</span> variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the group ID:</p>
+<pre class="prettyprint">int group_id = ... // Acquire group ID
+contacts_record_h group = NULL;
+
+error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
+</pre>
+<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
+</li>
+<li>Change the name and image.
+<p>Change the name and image property using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function.</p>
+<pre class="prettyprint">error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Family&quot;);
+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);
+free(resource_path);
+error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
+</pre></li>
+
+<li>Update the group record.
+<p>Update the group. The above changes (name and image) are also inserted.</p>
+<pre class="prettyprint">error_code = contacts_db_update_record(group);
+</pre></li>
+<li>Clean up.
+<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>
+<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="delete" name="delete" class="items-tit-h2">Deleting a Group</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete a group, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> as the first parameter and group ID as the second one;</p>
+<pre class="prettyprint">int group_id = ... // Acquire group ID
+
+error_code = contacts_db_delete_record(_contacts_group._uri, group_id);
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Group Members</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage group members:</p>
+
+<ul class="ul"><li>To add a group member, you need to know the contact ID and the group ID. Then you need to call <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span>.
+<pre class="prettyprint">int contact_id = ... // Acquire contact ID
+int group_id = ... // Acquire group ID
+
+error_code = contacts_group_add_contact(group_id, contact_id);
+</pre></li>
+<li>To remove a contact from a group, call <span style="font-family: Courier New,Courier,monospace">contacts_group_remove_contact()</span>.
+<pre class="prettyprint">int contact_id = ... // Acquire contact ID
+int group_id = ... // Acquire group ID
+
+error_code = contacts_group_remove_contact(group_id, contact_id);
+</pre></li>
+
+<li>To get a list of persons assigned to a specific group:
+<ol><li>Get the records of type <span style="font-family: Courier New,Courier,monospace">_contacts_person_group_assigned</span>:
+<pre class="prettyprint">int group_id = ... // Acquire group ID
+
+contacts_query_h query = NULL;
+contacts_filter_h filter = NULL;
+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, CONTACTS_MATCH_EQUAL, group_id);
+contacts_query_set_filter(query, filter);
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);</pre></li>
+<li>Iterate over the list elements.
+<pre class="prettyprint">contacts_record_h person = NULL;
+int error_code;
+
+while (contacts_list_get_current_record_p(list, &amp;person) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;int person_id;
+&nbsp;&nbsp;&nbsp;contacts_record_get_int(person, _contacts_person_group_assigned.person_id, &amp;person_id);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Person id: %d&quot;, person_id);
+
+&nbsp;&nbsp;&nbsp;char *display_name;
+&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(person, _contacts_person_group_assigned.display_name, &amp;display_name);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Display name: %s&quot;, display_name);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}</pre></li>
+<li>Destroy the filter, query, and list handles when no longer needed.
+<pre class="prettyprint">contacts_list_destroy(list, true);
+contacts_filter_destroy(filter);
+contacts_query_destroy(query);</pre></li></ol></li></ul>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Group Changes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To register a callback function to listen for group changes:</p>
+<ol><li>Register the callback function.
+<p>The code below shows how to register a callback function to listen for group changes.</p>
+<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_group._uri, _group_changed_callback, NULL);
+</pre></li>
+<li>Define the callback function.
+<p>The callback function is called when the group data changes. The code below shows how to update the group details in the callback function.</p>
+<pre class="prettyprint">static contacts_gl_group_data_t *_gl_group_data = ...
+static void _group_changed_callback(const char *view_uri, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_group._uri))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;if (_gl_group_data == NULL)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;int group_id = _gl_group_data-&gt;id;
+&nbsp;&nbsp;&nbsp;_free_gl_group_data(_gl_group_data);
+&nbsp;&nbsp;&nbsp;_gl_group_data = NULL;
+
+&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;record);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;_gl_group_data = _create_gl_group_data(record);
+&nbsp;&nbsp;&nbsp;// Use _gl_group_data
+
+&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);
+}</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="make" name="make" class="items-tit-h2">Making a vCard</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To make a vCard stream from a person record:</p>
+<ol><li>Get the person record by the person ID.
+<pre class="prettyprint">int person_id = ... // Acquire person ID
+
+contacts_record_h record = NULL;
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);
+</pre></li>
+<li>Make the vCard stream by the person record.
+<pre class="prettyprint">char *vcard_stream = NULL;
+error_code = contacts_vcard_make_from_person(record, &amp;vcard_stream);
+</pre>
+
+    <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The Contact Service API allows you to make a vCard stream from a person, contact, and my profile records:
+<pre class="prettyprint">int contacts_vcard_make_from_person(contacts_record_h person, char **vcard_stream);
+int contacts_vcard_make_from_contact(contacts_record_h contact, char **vcard_stream);
+int contacts_vcard_make_from_my_profile(contacts_record_h my_profile, char **vcard_stream);</pre>
+</td>
+    </tr>
+   </tbody>
+  </table> </li>
+
+<li>Destroy the handle when it is no longer needed.
+<pre class="prettyprint">free(vcard_stream);
+contacts_record_destroy(record, true);</pre>
+ </li>   </ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="parse" name="parse" class="items-tit-h2">Parsing a vCard</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To parse a vCard from a file and insert to the database:</p>
+<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);
+free(resource_path);
+error_code = contacts_vcard_parse_to_contact_foreach(temp_path, // File path of vCard
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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, // Callback function 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;NULL); // User data to be passed to the callback function
+</pre>
+
+<p>The vCard stream contains multiple contact objects. The callback function is called after parsing each contact. If you return <span style="font-family: Courier New,Courier,monospace">false</span> on the callback function, parsing stops.</p>
+<pre class="prettyprint">static bool _vcard_parse_cb(contacts_record_h contact, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == contact)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;int contact_id = -1;
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_insert_record(contact, &amp;contact_id);
+&nbsp;&nbsp;&nbsp;// Use the contact record
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+       </div>
+               </li>
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_init" name="sd_init" class="items-tit-h2">Initializing the Speed Dial Feature</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To start with the Contact Service:</p>
+<ol>
+<li>                   
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;contacts.h&gt;
+</pre></li>    
+<li>Most API functions return error codes, therefore define the <span style="font-family: Courier New,Courier,monospace">int</span> type at the beginning of your code. The <span style="font-family: Courier New,Courier,monospace">int</span> type is used to store error codes. Each time when a function returns error codes, verify the result of the operation.</li>
+<li>Call the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function, which connects your application to the Contact Service. Without this function, you cannot access the Contacts database.
+<pre class="prettyprint">
+int error_code;
+error_code = contacts_connect();
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts connect failed: %x&quot;, error_code);
+</pre>
+</li>
+
+<li>When the Contacts APIs are not needed anymore, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function: 
+<pre class="prettyprint">
+error_code = contacts_disconnect();
+</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_create" name="sd_create" class="items-tit-h2">Creating a Speed Dial</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a speed dial record:</p>
+<pre class="prettyprint">
+contacts_record_h speeddial;
+error_code = contacts_record_create(_contacts_speeddial._uri, &amp;speeddial);
+</pre>
+<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> to create speed dial type records.</p>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_set" name="sd_set" class="items-tit-h2">Setting Speed Dial Properties</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set speed dial properties:</p>
+<ol>
+<li>Set the speed dial number.
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function sets the speed dial type when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial.speeddial_number</span>. This function takes the speed dial record handle as the first argument, and the speed dial number, which is an integer value, as the third argument. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, or disconnecting from the service.</p>
+<pre class="prettyprint">
+int speeddial_number = ... // Acquire speed dial number
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.speeddial_number, speeddial_number);
+</pre>
+</li>
+
+<li>Set the number ID:
+<pre class="prettyprint">
+int number_id = ... // Acquire number id
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial. number_id, number_id);
+</pre>
+</li>
+</ol>
+
+    <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">This tutorial does not describe how to insert a number. For more information, see the <a href="contact_tutorial_n.htm">Contact Tutorial</a>.</td>
+    </tr>
+   </tbody>
+  </table>
+  
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_insert" name="sd_insert" class="items-tit-h2">Inserting a Speed Dial to the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert a speed dial record:</p>
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created speed dial into the Contacts database. The first argument is the speed dial record handle, the second is the speed dial number. If the speed dial is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.
+<pre class="prettyprint">
+int added_speeddial_id = -1;
+
+error_code = contacts_db_insert_record(speeddial, &amp;added_speeddial_id);    
+</pre>
+</li>
+
+<li>After inserting the speed dial record, destroy the used structures:
+<pre class="prettyprint">
+contacts_record_destroy(speeddial, true);
+</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_get" name="sd_get" class="items-tit-h2">Getting Speed Dials</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get all of the speed dial records one by one, or to filter them by one of the properties:</p>
+<ol>
+<li>To get a single speed dial record:
+<ol>
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">speeddial_id</span>:</p>
+<pre class="prettyprint">
+contacts_record_h speeddial;
+int speeddial_id = ... // Acquire speed dial ID
+error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id, &amp;speeddial);
+</pre>
+</li>
+
+<li>After finish using the speed dial record, destroy the used structures:
+
+<pre class="prettyprint">contacts_record_destroy(speeddial, true);</pre></li></ol></li>
+
+<li>To get the total speed dial record list:
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:
+<pre class="prettyprint">
+contacts_list_h list = NULL;
+error_code = contacts_db_get_all_records(_contacts_speeddial._uri, 0, 0, &amp;list);
+</pre>
+</li>
+
+<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
+               
+         <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table>     
+               
+
+               <pre class="prettyprint">
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;int number;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;number);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+
+               <p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>
+
+               <pre class="prettyprint">
+contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);
+
+&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+
+               <p>The memory for the record data is allocated, and the data is copied from the record by the functions shown in the following snippet:</p>
+
+               <pre class="prettyprint">
+typedef struct _contacts_gl_speeddial_data
+{
+&nbsp;&nbsp;&nbsp;int speeddial_number;
+&nbsp;&nbsp;&nbsp;char *number;
+&nbsp;&nbsp;&nbsp;char *display_name;
+&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;
+} contacts_gl_speeddial_data_t;
+
+static void _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);
+}
+
+static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
+
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;gl_speeddial_data-&gt;speeddial_number))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.number, &amp;gl_speeddial_data-&gt;number))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.display_name, &amp;gl_speeddial_data-&gt;display_name))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.image_thumbnail_path, &amp;gl_speeddial_data-&gt;image_thumbnail_path))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_speeddial_data;
+}
+</pre>
+               </li>
+               <li>After you no longer need the speed dial record, destroy the used structures:
+               <pre class="prettyprint">
+contacts_list_destroy(list, true);</pre>
+               </li>
+       </ol>
+       </li>
+       <li>To get the filtered speed dial record list:
+       <ol>
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.
+               <ol>
+                       <li>Create a record list and query:
+
+       <pre class="prettyprint">
+contacts_list_h list = NULL;
+contacts_query_h query = NULL;
+
+error_code = contacts_query_create(_contacts_speeddial._uri, &amp;query);
+</pre>
+       </li>
+       <li>Filter the list before getting the speed dials. It is possible to filter with various parameters. To create a filter:
+       <pre class="prettyprint">
+contacts_filter_h filter = NULL;
+
+error_code = contacts_filter_create(_contacts_speeddial._uri, &amp;filter);
+</pre>
+       </li>
+
+       <li>Add a condition, such as the speed dial number.
+       <p>The following example retrieves only those speed dials whose numbers are less than 3.</p>
+       <pre class="prettyprint">
+error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number, CONTACTS_MATCH_LESS_THAN, 3);
+</pre>
+       <p>To use multiple conditions, add an operator between them:</p>
+       <pre class="prettyprint">
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
+
+error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number, CONTACTS_MATCH_GREATER_THAN, 15);
+</pre>
+       </li>
+
+       <li>Connect the query with the list: 
+       <pre class="prettyprint">
+error_code = contacts_query_set_filter(query, filter);
+
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+</pre>
+       <p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p>
+       </li>
+
+<li>Free the filter and query: 
+<pre class="prettyprint">
+contacts_filter_destroy(filter);
+contacts_query_destroy(query);
+</pre>
+</li>
+</ol>
+</li>
+
+<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<pre class="prettyprint">
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;int number;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;number);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+
+<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>
+<pre class="prettyprint">
+contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);
+
+&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+<p>The memory for the record data is allocated, and the data is copied from the record by the functions shown in the following snippet.</p>
+<pre class="prettyprint">
+typedef struct _contacts_gl_speeddial_data
+{
+&nbsp;&nbsp;&nbsp;int speeddial_number;
+&nbsp;&nbsp;&nbsp;char *number;
+&nbsp;&nbsp;&nbsp;char *display_name;
+&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;
+} contacts_gl_speeddial_data_t;
+
+static void _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);
+}
+
+static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
+
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;gl_speeddial_data-&gt;speeddial_number))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.number, &amp;gl_speeddial_data-&gt;number))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.display_name, &amp;gl_speeddial_data-&gt;display_name))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.image_thumbnail_path, &amp;gl_speeddial_data-&gt;image_thumbnail_path))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_speeddial_data;
+}
+</pre>
+</li>
+<li>When you no longer need the speed dial record, destroy the used structures:
+<pre class="prettyprint">
+contacts_list_destroy(list, true);</pre></li>
+</ol></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_update" name="sd_update" class="items-tit-h2">Updating a Speed Dial</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To change the number ID of an existing speed dial:</p>
+<ol>
+<li>Get the speed dial. 
+<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the speed dial number:</p>
+<pre class="prettyprint">
+int speeddial_number = ... // Acquire speed dial number
+contacts_record_h speeddial = NULL;
+
+error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number, &amp;speeddial);
+</pre>
+
+<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
+</li>
+
+<li>Change the number ID by setting the <span style="font-family: Courier New,Courier,monospace">number_id</span> property using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function:
+<pre class="prettyprint">
+int number_id = ... // Acquire number id
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id, number_id);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
+</pre>
+</li>
+
+<li>Update the speed dial record. 
+<p>Update the speed dial. The above changes (<span style="font-family: Courier New,Courier,monospace">number_id</span>) are also inserted.</p>
+<pre class="prettyprint">
+error_code = contacts_db_update_record(speeddial);
+</pre>
+</li>
+
+<li>Clean up. 
+<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>
+<pre class="prettyprint">
+contacts_record_destroy(speeddial, true);
+</pre>
+</li>
+</ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sd_delete" name="sd_delete" class="items-tit-h2">Deleting a Speed Dial</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete a speed dial, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> as the first parameter and speed dial number as the second one;</p>
+<pre class="prettyprint">
+int speeddial_number = ... // Acquire speed dial number
+
+error_code = contacts_db_delete_record(_contacts_speeddial._uri, speeddial_number);
+</pre>
+       </div>
+               </li>   
+<li>
+                       <div class="devicespec-tit">
+ <h2 id="pl_init" name="pl_init" class="items-tit-h2">Initializing the Phone Log</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To start with the Contact Service:</p>
+<ol>
+<li>                   
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;contacts.h&gt;
+</pre></li>    
+<li>Most of the API functions return error codes, therefore define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store error codes. Each time when a function returns error codes, verify the result of the operation.</li>
+<li>Call the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function, which connects your application with the Contact Service. Without this function, you cannot get access to the Contacts database.
+<pre class="prettyprint">
+int error_code;
+error_code = contacts_connect();
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts connect failed: %x&quot;, error_code);
+</pre>
+</li>
+
+<li>When the Contacts APIs are not needed anymore, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function: 
+<pre class="prettyprint">
+error_code = contacts_disconnect();
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts connect failed: %x&quot;, error_code);
+</pre>
+</li>
+</ol>
+
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="pl_create" name="pl_create" class="items-tit-h2">Creating a Log</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a log record:</p>
+<pre class="prettyprint">
+contacts_record_h log;
+error_code = contacts_record_create(_contacts_phone_log._uri, &amp;log);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record create failed: %x&quot;, error_code);
+</pre>
+<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> to create log type records.</p>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="pl_set" name="pl_set" class="items-tit-h2">Setting Log Properties</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To set log properties:</p>
+<ol>
+<li>Set the log type.
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function sets the type of the log when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.log_type</span>. This function takes the log record handle as the first argument, and the type, which is a integer value, as the third argument. The function returns the status code. If the function returns an error, free memory, remove handles, and disconnect from the service, if needed.</p>
+<pre class="prettyprint">
+error_code = contacts_record_set_int(log, _contacts_phone_log.log_type, CONTACTS_PLOG_TYPE_VOICE_INCOMMING);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
+</pre>
+
+<p>The enumeration flag names for the log types are:</p>
+<pre class="prettyprint">
+CONTACTS_PLOG_TYPE_NONE
+CONTACTS_PLOG_TYPE_VOICE_INCOMMING
+CONTACTS_PLOG_TYPE_VOICE_OUTGOING
+CONTACTS_PLOG_TYPE_VIDEO_INCOMING
+CONTACTS_PLOG_TYPE_VIDEO_OUTGOING
+CONTACTS_PLOG_TYPE_VOICE_INCOMMING_UNSEEN
+CONTACTS_PLOG_TYPE_VOICE_INCOMMING_SEEN
+CONTACTS_PLOG_TYPE_VIDEO_INCOMING_UNSEEN
+CONTACTS_PLOG_TYPE_VIDEO_INCOMING_SEEN
+CONTACTS_PLOG_TYPE_VOICE_REJECT
+CONTACTS_PLOG_TYPE_VIDEO_REJECT
+CONTACTS_PLOG_TYPE_VOICE_BLOCKED
+CONTACTS_PLOG_TYPE_VIDEO_BLOCKED
+CONTACTS_PLOG_TYPE_MMS_INCOMING
+CONTACTS_PLOG_TYPE_MMS_OUTGOING
+CONTACTS_PLOG_TYPE_SMS_INCOMING
+CONTACTS_PLOG_TYPE_SMS_OUTGOING
+CONTACTS_PLOG_TYPE_SMS_BLOCKED
+CONTACTS_PLOG_TYPE_MMS_BLOCKED
+CONTACTS_PLOG_TYPE_EMAIL_RECEIVED
+CONTACTS_PLOG_TYPE_EMAIL_SENT
+</pre></li>
+
+<li>Set time, duration, and address:
+<pre class="prettyprint">
+error_code = contacts_record_set_int(log, _contacts_phone_log.log_time, (int)time(NULL));
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
+
+error_code = contacts_record_set_int(log, _contacts_phone_log.extra_data1, 37);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
+
+error_code = contacts_record_set_str(log, _contacts_phone_log.address, &quot;+8231-1234-5678&quot;);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set string failed: %x&quot;, error_code);
+</pre>
+
+<p>Log time means the number of seconds since 1970-01-01 00:00:00 (UTC). The <span style="font-family: Courier New,Courier,monospace">extra_data1</span> property means the <span style="font-family: Courier New,Courier,monospace">message_id</span>, <span style="font-family: Courier New,Courier,monospace">email_id</span>, or duration (seconds) of a call. The address property means a number or an email.</p>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="pl_insert" name="pl_insert" class="items-tit-h2">Inserting a Log to the Database</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert a log record:</p>
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created log into the Contacts database. The first argument is the log record handle, the second is the record ID. If the log is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.
+<pre class="prettyprint">
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db insert record failed: %x&quot;, error_code);
+</pre>
+</li>
+<li>After inserting the log, destroy the used structures:
+<pre class="prettyprint">contacts_record_destroy(log, true);</pre>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="pl_get" name="pl_get" class="items-tit-h2">Getting Logs</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get all log records one by one, or to filter them by one of the properties:</p>
+<ol>
+<li>To get a single log record: 
+<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">log_id</span>:</p>
+<pre class="prettyprint">contacts_record_h log;
+int log_id = ... // Acquire log ID
+error_code = contacts_db_get_record(_contacts_phone_log._uri, log_id, &amp;log);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get record failed: %x&quot;, error_code);
+</pre></li>
+<li>After inserting the log, destroy the used structures:
+<pre class="prettyprint">contacts_record_destroy(log, true);</pre></li></ol>
+</li>
+<li>To get the total log record list:
+<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<pre class="prettyprint">
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get all records failed: %x&quot;, error_code);
+</pre>
+</li>
+
+<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+
+<pre class="prettyprint">
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;int type;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;type);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+
+<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>
+
+<pre class="prettyprint">
+contacts_gl_log_data_t *gl_log_data = NULL;
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);
+
+&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+
+<p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>
+
+               <pre class="prettyprint">
+typedef struct _contacts_gl_log_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *address;
+&nbsp;&nbsp;&nbsp;int log_type;
+&nbsp;&nbsp;&nbsp;int log_time;
+} contacts_gl_log_data_t;
+
+static void _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);
+&nbsp;&nbsp;&nbsp;free(gl_log_data);
+}
+
+static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));
+
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.id, &amp;gl_log_data-&gt;id))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_phone_log.address, &amp;gl_log_data-&gt;address))
+&nbsp;&nbsp;&nbsp;{                                                            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;gl_log_data-&gt;log_type))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_time, &amp;gl_log_data-&gt;log_time))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_log_data;
+}
+</pre>
+               </li>
+<li>After getting the log record, destroy the used structures:
+<pre class="prettyprint">
+contacts_list_destroy(list, true);</pre>
+               </li>
+       </ol>
+       </li>
+       <li>To get the filtered log record list:
+       <ol>
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.
+               <ol>
+<li>Create a record list and query:
+<pre class="prettyprint">
+contacts_list_h list = NULL;
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts query create failed: %x&quot;, error_code);
+</pre>
+       </li>
+       
+       <li>Before getting the logs, filter the list. There is a possibility to filter based on various parameters. To create a filter, use the following code: 
+       <pre class="prettyprint">
+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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter create failed: %x&quot;, error_code);
+</pre>
+       </li>
+       
+       <li>Add a condition, such as the log type.
+       <p>The following example retrieves only those logs which type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_INCOMMING</span>.</p>
+       <pre class="prettyprint">
+error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type, CONTACTS_MATCH_EQUAL, CONTACTS_PLOG_TYPE_VOICE_INCOMMING);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add integer failed: %x&quot;, error_code);
+</pre>
+        
+       <p>To use multiple conditions, add an operator between them:</p>
+       <pre class="prettyprint">
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add operator failed: %x&quot;, error_code);
+error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type, CONTACTS_MATCH_EQUAL, CONTACTS_PLOG_TYPE_VOICE_OUTGOING);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add integer failed: %x&quot;, error_code);
+</pre>
+       </li>
+       
+       <li>Connect the query with the list: 
+       <pre class="prettyprint">
+error_code = contacts_query_set_filter(query, filter);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts query set filter failed: %x&quot;, error_code);
+
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get records with query failed: %x&quot;, error_code);
+</pre>
+       <p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. After all operations, release the list.</p>
+       </li>
+       
+       <li>Free the filter and query: 
+       <pre class="prettyprint">
+contacts_filter_destroy(filter);
+contacts_query_destroy(query);
+</pre>
+       </li>
+</ol>
+</li>
+
+<li>To iterate the list and read the records, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
+
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<pre class="prettyprint">
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;int type;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;type);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+
+<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>
+<pre class="prettyprint">
+contacts_gl_log_data_t *gl_log_data = NULL;
+contacts_record_h record;
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);
+
+&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+}
+</pre>
+<p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>
+<pre class="prettyprint">
+typedef struct _contacts_gl_log_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *address;
+&nbsp;&nbsp;&nbsp;int log_type;
+&nbsp;&nbsp;&nbsp;int log_time;
+} contacts_gl_log_data_t;
+
+static void _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)
+{
+&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);
+&nbsp;&nbsp;&nbsp;free(gl_log_data);
+}
+
+static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)
+{
+&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));
+&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));
+
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.id, &amp;gl_log_data-&gt;id))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_phone_log.address, &amp;gl_log_data-&gt;address))
+&nbsp;&nbsp;&nbsp;{                                                            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;gl_log_data-&gt;log_type))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_time, &amp;gl_log_data-&gt;log_time))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return gl_log_data;
+}
+</pre>
+</li>
+<li>After getting the log record, destroy the used structures.
+<pre class="prettyprint">
+contacts_list_destroy(list, true);</pre></li>
+</ol></li></ol>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="pl_delete" name="pl_delete" class="items-tit-h2">Deleting a Log</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete a log, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> as the first parameter and log ID as the second one:</p>
+<pre class="prettyprint">
+int log_id = ... // Acquire log ID
+
+error_code = contacts_db_delete_record(_contacts_phone_log._uri, log_id);
+if (error_code != CONTACTS_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db delete record failed: %x&quot;, error_code);
+</pre>
+       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="insert2" name="insert2" class="items-tit-h2">Inserting New Records</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To insert a new record:</p>
+
+<ol>
+<li>Create a record.
+
+<p>The basic concept in the Contacts API is a record. A record can be a complex set of data, containing other data. For example, an address record can contain the country, region, and street. Also, the contained data can be a reference to another record. For example, a contact record contains the <span style="font-family: Courier New,Courier,monospace;">address</span> property, which is a reference to an address record. Effectively, a record can be a node in a tree or a graph of relations between records.</p>
+
+<p>Each record type has a special <span style="font-family: Courier New,Courier,monospace;">view</span> structure, which contains identifiers of its properties. For example, the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view describes the properties of the contact record. It contains properties, such as the name, company, and nickname of the contact. A special property in such structures is the URI, which is used to identify the record type. Every view describing a record has this property.</p>
+
+<p>To create a new contact record, create a root record of the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view type:</p>
+
+<pre class="prettyprint">
+contacts_record_h hcontact = NULL;
+
+error_code = contacts_record_create(_contacts_contact._uri, &amp;hcontact);
+</pre>
+
+<p>Creating a group is similar to creating a record. The only difference is using another view – the group view.</p>
+</li>
+
+<li>Set properties.
+<p>Set the properties of the newly created record. Almost every property in the contact view is a record itself, so create more records, as needed. The following example shows how to add an address record to a contact.</p>
+
+<ol>
+<li>Create a new record.
+<p>Use the address view because the added record is an address:</p>
+
+<pre class="prettyprint">
+contacts_record_h haddress = NULL;
+contacts_record_create(_contacts_address._uri, &amp;haddress);
+</pre>
+</li>
+
+<li>Set the address record properties (parameters available in the current view):
+
+<pre class="prettyprint">
+contacts_record_set_str(haddress, _contacts_address.country, &quot;Korea&quot;);
+</pre>
+</li>
+
+<li>Add the address record to your contact:
+
+<pre class="prettyprint">
+contacts_record_add_child_record(hcontact, _contacts_contact.address, haddress
+</pre>
+<p>Do not destroy the record handle which is added to another as a child.</p>
+</li></ol>
+</li>
+
+<li>Insert records.
+<p>After setting properties, insert the root record only to the database. You receive the ID of this record in the database.</p>
+
+<pre class="prettyprint">
+int id;
+error_code = contacts_db_insert_record(hcontact, &amp;id);
+</pre>
+</li>
+
+<li>Clean up.
+<p>Destroy the record structure.</p>
+
+<pre class="prettyprint">
+error_code = contacts_record_destroy(hcontact, true);
+</pre>
+</li>
+</ol>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="get2" name="get2" class="items-tit-h2">Getting Record Details</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To find all records and get their details:</p>
+
+<ol>
+<li>Get a single record.
+<p>Get a record handle when you know its ID:</p>
+
+<pre class="prettyprint">
+contacts_record_h record;
+const int ID = 2;
+
+contacts_db_get_record(_contacts_contact._uri, ID, &amp;record);
+</pre>
+</li>
+
+<li>Get record details.
+<p>To get the details, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_*</span> function with the record handle. The following example gets the contact display name:</p>
+
+<pre class="prettyprint">
+char * d_name;
+contacts_record_get_str(record, _contacts_contact.display_name, d_name);
+free(d_name);
+</pre>
+</li>
+
+<li>Get child record details.
+<p>When using 1 view, you sometimes need details from another view. For example, you get records using the contact view and need to get the first or last name. If you want to get the name, get the record from the name view using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_child_record_at_p()</span> function:</p>
+
+<pre class="prettyprint">
+contacts_record_h child_record;
+contacts_record_get_child_record_at_p(record, _contacts_contact.name, 0, &amp;child_record);
+// In the child_record, you have the record form name view
+char *f_name;
+contacts_record_get_str(record, _contacts_name.first_name, f_name);
+free(f_name);
+</pre>
+</li>
+
+<li>Get parent record details.
+<p>When using the child view, you sometimes need to get details of the parent. For example, you get records using the name view and want to know whether the contact has an email address. To get the parent details, get its ID in almost every view with <span style="font-family: Courier New,Courier,monospace;">contact_id</span>. After that, get the parent record:</p>
+
+<pre class="prettyprint">
+contacts_record_h parent_record;
+int parent_id;
+contacts_record_get_int(record, _contacts_name.contact_id, &amp;parent_id);
+contacts_db_get_child_record(_contacts_contact._uri, parent_id, &amp;parent_record);
+// In the parent_record, get bool
+bool h_email;
+contacts_record_get_bool(parent_record, _contacts_contact.has_email, &amp;h_email);
+</pre>
+</li>
+
+<li>Get details through a structure.
+<ol><li><p>For more record details, use a structure to get them.</p>
+<p>The memory for the record data is allocated and the data is copied from the record by functions listed in the following step.</p>
+
+<pre class="prettyprint">
+gldata = _create_gl_data(record);
+char * number = gldata-&gt;number;
+
+typedef struct _contact_gl_data
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;char *first;
+&nbsp;&nbsp;&nbsp;char *last;
+&nbsp;&nbsp;&nbsp;char *number;
+&nbsp;&nbsp;&nbsp;char *image_path;
+} contact_gl_data_t;
+
+static contact_gl_data_t *_create_gl_data(contacts_record_h r_contact)
+{
+&nbsp;&nbsp;&nbsp;contact_gl_data_t *data;
+&nbsp;&nbsp;&nbsp;data = malloc(sizeof(contact_gl_data_t));
+&nbsp;&nbsp;&nbsp;memset(data, 0x0, sizeof(contact_gl_data_t));
+
+&nbsp;&nbsp;&nbsp;if (! _get_contact_id(r_contact, &amp;data-&gt;id))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (!_get_contact_number(r_contact, &amp;data-&gt;number))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (!_get_contact_first(r_contact, &amp;data-&gt;first))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;if (!_get_contact_last(r_contact, &amp;data-&gt;last))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&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;&nbsp;free(data-&gt;number);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;last);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return data;
+}
+</pre>
+</li>
+
+<li>Retrieve record data into the structure.
+<p>Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function (for the property lists, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a>). Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+
+<ul class="ul"><li><p>To get the name details, get the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> (representing the child) from the <span style="font-family: Courier New,Courier,monospace;">r_contact</span> parent. Both structures have the <span style="font-family: Courier New,Courier,monospace;">contacts_record_h</span> type. After obtaining a child record, get the desired data from it using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>
+
+<pre class="prettyprint">
+static bool _get_contact_last(contacts_record_h r_contact, char **last)
+{
+&nbsp;&nbsp;&nbsp;contacts_record_h r_name;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact,  _contacts_contact.name, 0, &amp;r_name);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.last, last);
+}
+</pre></li>
+
+<li><p>The record ID is obtained directly from the parent record. An ID is a unique number representing the record key in the database. You can manipulate a record with functions, such as <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_record()</span> or <span style="font-family: Courier New,Courier,monospace;">contacts_db_delete_records()</span>, if you know their ID.</p>
+
+<pre class="prettyprint">
+static bool _get_contact_id(contacts_record_h r_contact, int *id)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(r_contact, _contacts_contact.id, id);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li><p>To get a contact number, check whether it exists using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function. If it exists, use the various <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">Query</a>  and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">Filter</a> functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>
+<ul class="ul"><li>Get a list of all numbers and filter the list to get the default:
+<pre class="prettyprint">
+static bool _get_contact_number(contacts_record_h r_contact, char **number)
+{
+&nbsp;&nbsp;&nbsp;int id;
+&nbsp;&nbsp;&nbsp;int error_code;
+&nbsp;&nbsp;&nbsp;contacts_record_h r_number;
+&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
+&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
+&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
+
+&nbsp;&nbsp;&nbsp;if (!_get_contact_id(r_contact, &amp;id))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+
+&nbsp;&nbsp;&nbsp;bool has_number;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &amp;has_number);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_query_create(_contacts_number._uri, &amp;query);
+
+&nbsp;&nbsp;&nbsp;unsigned int fields[] = { _contacts_number.number };
+&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_projection(query, fields, 1);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_create(_contacts_number._uri, &amp;filter);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_int(filter, _contacts_number.contact_id, CONTACTS_MATCH_EXACTLY, id);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_bool(filter, _contacts_number.is_default, true);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_filter(query, filter);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_records_with_query(query, 0, 1, &amp;list);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_get_current_record_p(list, &amp;r_number);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number, _contacts_number.number, number);
+
+&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
+&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
+&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
+}
+</pre></li>
+
+<li><p>Directly access the default number:</p>
+
+<pre class="prettyprint">
+static bool _get_contact_number(contacts_record_h r_contact, char **number)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+&nbsp;&nbsp;&nbsp;contacts_record_h r_number;
+
+&nbsp;&nbsp;&nbsp;bool has_number;
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &amp;has_number);
+
+&nbsp;&nbsp;&nbsp;if (!has_number)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*number = NULL;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.number, 0, &amp;r_number);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number, _contacts_number.number, number);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+<p>To get a second number, change the third parameter (<span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p</span>) from 0 to 1.</p></li></ul></li>
+
+
+<li><p>An image can be obtained directly from the parent record:</p>
+
+<pre class="prettyprint">
+static bool _get_contact_image(contacts_record_h r_contact, char **image_path)
+{
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_contact, _contacts_contact.image_thumbnail_path, image_path);
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Thumb path: \&#39;%s\&#39;&quot;, *image_path);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li><p>Get the first name as the last name:</p>
+
+<pre class="prettyprint">
+static bool _get_contact_first(contacts_record_h r_contact, char **first)
+{
+&nbsp;&nbsp;&nbsp;contacts_record_h r_name;
+&nbsp;&nbsp;&nbsp;int error_code;
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.name, 0, &amp;r_name);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.first, first);
+}
+</pre></li></ul>
+</li></ol></li>
+
+<li>Clean up.
+<ol><li><p>Destroy the <span style="font-family: Courier New,Courier,monospace;">contacts_list_h</span> list.</p>
+<p>When the access to the database is no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace;">contact_disconnect()</span> function.</p>
+
+<pre class="prettyprint">
+error_code = contacts_list_destroy(list, true);
+
+error_code = contacts_disconnect();
+</pre></li>
+
+<li><p>Destroy all other used handles as well:</p>
+
+<pre class="prettyprint">
+contacts_query_destroy(query); // If query has been used
+contacts_filter_destroy(filter); // If filter has been used
+</pre></li></ol>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="list2" name="list2" class="items-tit-h2">Handling Lists</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To access multiple records using lists and contact property filters, and to sort records:</p>
+
+<ol>
+<li>Get a record list.
+<ul class="ul"><li>To get all records:
+<p>The following function retrieves all records and returns the result list. After all operations, the list must be released with the <span style="font-family: Courier New,Courier,monospace;">contacts_list_destroy()</span> function.</p>
+
+<pre class="prettyprint">
+contacts_list_h list = NULL;
+
+contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);
+</pre>
+</li>
+<li>To filter and get specific records:
+<ol>
+<li>Create a query for a list.
+<p>To filter or sort records, you need a record list and query:</p>
+
+<pre class="prettyprint">
+contacts_list_h list = NULL;
+contacts_query_h query = NULL;
+
+contacts_query_create(_contacts_name._uri, &amp;query);
+</pre>
+</li>
+
+<li>Create a filter for the query.
+<p>Before getting contacts, filter the list. It is possible to filter by various parameters, such as the name view.</p>
+
+<pre class="prettyprint">
+contacts_filter_h filter = NULL;
+
+contacts_filter_create (_contacts_name._uri, &amp;filter);
+</pre>
+
+<p>The first parameter defines in which view to place the filter. To filter by the first and last name, use the <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span> filter. The first parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function must be the same parameter as in the filter to be appended. For more information on views, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> tables.</p></li>
+
+<li><p>Add a condition, such as the following where only contacts beginning with &quot;Za&quot; are shown:</p>
+
+<pre class="prettyprint">
+contacts_filter_add_str(filter, _contacts_name.last_name, CONTACTS_MATCH_CONTAINS, &quot;Za&quot;);
+</pre>
+
+<p>To receive contacts which starts by a given string, the <span style="font-family: Courier New,Courier,monospace;">CONTACTS_MATCH_CONTAINS</span> parameter has to be set. Use the parameter if you need to get records which contain the given string anywhere.</p></li>
+
+<li><p>To add more conditions, add operators between them. In this case, define the operator between conditions first:</p>
+
+<pre class="prettyprint">
+contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+</pre>
+
+<p>After that you can add another condition. If you need to use a logic expression &quot;C1 AND (C2 OR C3)&quot;, conditions 2 and 3 must be in another filter to have logical brackets. The following example shows a filter that passes through contacts with a first name starting with &quot;Ada&quot; or &quot;Igo&quot;:</p>
+
+<pre class="prettyprint">
+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, CONTACTS_MATCH_STARTSWITH, &quot;Ada&quot;);
+contacts_filter_add_operator(n_filter, CONTACTS_FILTER_OPERATOR_OR);
+contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, &quot;Igo”&quot;);
+</pre></li>
+
+<li><p>To add an extra filter to a parent filter:</p>
+
+<pre class="prettyprint">
+contacts_filter_add_filter(filter, n_filter);
+</pre>
+
+<p>The parent filter passes through contacts with a last name beginning with &quot;Za&quot; and a first name starting with &quot;Ada&quot; or &quot;Igo&quot;.</p></li>
+<li><p>Connect a filter with query:</p>
+
+<pre class="prettyprint">
+contacts_query_set_filter(query, filter);
+</pre></li></ol></li></ul>
+</li>
+
+<li>Sort a record list.
+<p>To sort records by any of its view details:</p>
+
+<pre class="prettyprint">
+contacts_query_set_sort(query, _contacts_name.first, true);
+</pre>
+
+<p>The first parameter is the query to be filtered, the second is the property to sort, and the last sets the ascending order.</p>
+</li>
+
+<li>Set a projection to a list.
+<p>A projection allows you to query the data for specific properties of a record. It can reduce latency in case of a large database.</p>
+<p>To set the projection, use the <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_projection()</span> function. 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, _contacts_name.first, _contacts_name.last}
+contacts_query_set_projection(query, my_projection, sizeof(my_projection)/sizeof(int));
+</pre>
+
+<p>After filtering, such as getting numbers, there can be several records which differ only in a few detail types. When setting the projection, the results can contain identical records. To avoid these situations, use the distinction function:</p>
+
+<pre class="prettyprint">
+contacts_query_set_distinct(query, true);
+</pre>
+</li>
+
+<li>Get the record list with a query.
+<p>Get the list with the query:</p>
+
+<pre class="prettyprint">
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+</pre>
+
+<p>The third parameter refers to limiting results. If 0 is passed, there are no limits. Release the list after all the operations.</p>
+</li>
+
+<li id="iterate_l" name="iterate_l">Iterate on the list and read the records.
+<p>The <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function retrieves a record from the contacts list. The current default record is the first record.</p>
+
+<p>To iterate on a list, use the <span style="font-family: Courier New,Courier,monospace;">contacts_list_prev()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_next()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_first()</span>, and <span style="font-family: Courier New,Courier,monospace;">contacts_list_last()</span> functions.</p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace;">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to data in an existing record.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>To read records:</p>
+
+<ul class="ul"><li>To get only a few details:
+
+<pre class="prettyprint">
+contacts_record_h record;
+
+while (contacts_list_get_current_record_p(list, &amp;record) == 0)
+{
+&nbsp;&nbsp;&nbsp;// Get details
+&nbsp;&nbsp;&nbsp;char * disp_name;
+&nbsp;&nbsp;&nbsp;contacts_record_get_str(record, _contacts_contact.display_name, &amp;disp_name);
+&nbsp;&nbsp;&nbsp;free(disp_name);
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+}
+</pre></li>
+
+<li><p>To get more details, use the following example, where the obtained records are passed to the <span style="font-family: Courier New,Courier,monospace;">_create_gl_data()</span> function for further processing:</p>
+
+<pre class="prettyprint">
+contacts_record_h record;
+contact_gl_data_t *gldata = NULL;
+
+while (contacts_list_get_current_record_p(list, &amp;record) == 0)
+{
+&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(record);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+}
+</pre></li>
+
+<li><p>The previous examples work if you use the default (<span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span>) view. If you use filtering in another view as shown in the filter example, and you want to use this structure (change view to default), use the following code:</p>
+
+<pre class="prettyprint">
+contacts_record_h record;
+contact_gl_data_t *gldata = NULL;
+
+while (contacts_list_get_current_record_p(list, &amp;record) == 0)
+{
+&nbsp;&nbsp;&nbsp;int record_id;
+&nbsp;&nbsp;&nbsp;contacts_record_h c_record;
+&nbsp;&nbsp;&nbsp;contacts_record_get_int(record, _contacts_name._uri, &amp;contact_id);
+&nbsp;&nbsp;&nbsp;contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;c_record);
+&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(c_record);
+
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+}
+</pre>
+
+<p>This way it is possible to switch to the default view from another view (in a similar manner to the above example <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span>).</p></li></ul>
+</li>
+
+<li>Insert the list to the database.
+<p>You can insert a whole list to the database. This can be useful when you have several records to create and you want to insert them all at once.</p>
+
+<ol>
+<li>If you have a list, use it or create a new one:
+
+<pre class="prettyprint">
+contacts_list_h list;
+contacts_list_create(&amp;list);
+</pre>
+</li>
+
+<li>Add records to the list:
+
+<pre class="prettyprint">
+contacts_list_add (list, record);
+</pre>
+</li>
+
+<li>Insert the list into the database:
+
+<pre class="prettyprint">
+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);
+free(ids);
+</pre>
+
+<p>This inserts the entire list to the database and gets the IDs of the inserted records.</p>
+</li>
+
+<li>Destroy the list:
+
+<pre class="prettyprint">
+contacts_list_destroy(list, true);
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+
+       </div>
+               </li>
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="delete2" name="delete2" class="items-tit-h2">Deleting Records</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To delete records from the contact database, you need to know their ID:</p>
+
+<pre class="prettyprint">
+int id;
+// Get id
+int error = contacts_db_delete_record(_contacts_contact._uri, id);
+</pre>
+
+<p>If you only have the record handle, get the ID first:</p>
+
+<pre class="prettyprint">
+contacts_record_get_int(record, _contacts_contact.id, &amp;id);
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="link2" name="link2" class="items-tit-h2">Linking Persons</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To link persons (a useful joining method if there are several contacts assigned to one person):</p>
+
+<ol>
+<li>Link a person to another person.
+<p>To link persons with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_link_person()</span> function, you need the person ID. To get the person ID, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_int()</span> function.</p>
+
+<pre class="prettyprint">
+int first_person_id;
+contacts_record h record1;
+// Get the first record
+int error_code = contacts_record_get_int(record1, _contacts_contact.person_id, &amp;first_person_id);
+
+contacts_record h record2;
+// Get the second record
+error_code = contacts_record_get_int(record2, _contacts_contact.person_id, &amp;second_person_id);
+
+contacts_person_link_person(first_person_id, second_person_id);
+</pre>
+
+<p>This links the 2 contacts available through record handles.</p>
+</li>
+
+<li>Set the default properties.
+<p>Set the default values from one of the linked contacts with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function. The first parameter determines the detail to be set using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">contacts_person_property_e</a> enum.</p>
+
+<p>To set a default number from one of the persons, you have to know its ID. Get the detail ID using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function, because you need to get the value from the <span style="font-family: Courier New,Courier,monospace;">_contact_number</span> view.</p>
+
+<pre class="prettyprint">
+contacts_record_h record;
+int record_number = -1;
+// Get the record handle
+contacts_record_h record_number;
+error_code = contacts_record_get_child_record_at_p(record, _contacts_contact.number, 0, &amp;record_number);
+
+error_code = contacts_record_get_int(record_number, _contacts_number.id, &amp;number_id);
+
+error_code = contacts_record_destroy(record_number, true);
+
+// Use the record_number variable
+error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER, person_id, number_id);
+</pre>
+</li>
+
+<li>Get default properties.
+<p>Get the default property values of a person with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_get_default_property()</span> function:</p>
+
+<ol><li><p>Get the ID of the default email details:</p>
+
+<pre class="prettyprint">
+int person_email_number;
+error_code = contacts_person_get_default_property (CONTACTS_PERSON_PROPERTY_EMAIL, person_id, &amp;person_email_number);
+</pre></li>
+
+<li><p>Get the default email: </p>
+
+<pre class="prettyprint">
+int person_email_detail_number;
+error_code = contacts_person_get_default_property (CONTACTS_PERSON_PROPERTY_EMAIL, person_id, &amp;person_email_number);
+
+contacts_record_h email_record;
+error_code = contacts_db_get_record(_contacts_email._uri, person_email_detail_number, &amp;email_record);
+char * default_email;
+
+error_code = contacts_record_get_str_p(email_record, _contacts_email.email, &amp;default_email);
+
+// Use default_email
+
+error_code = contacts_record_destroy(email_record, true);
+</pre></li></ol>
+</li>
+
+<li>Unlink persons.
+<p>To unlink a contact using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_unlink_contact()</span> function:</p>
+
+<ol><li><p>If you have the record handle, get the contact ID: </p>
+
+<pre class="prettyprint">
+int person_id;
+contacts_record_get_int(record, _contacts_contact.id, &amp;person_id);
+</pre></li>
+
+<li><p>Unlink a contact from another and get its ID:</p>
+
+<pre class="prettyprint">
+int unlinked_person_id;
+int contacts_person_unlink_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;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;&amp;unlinked_person_id)
+</pre></li></ol>
+</li>
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="settings" name="settings" class="items-tit-h2">Managing Contact Settings</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To manage the display settings of contacts:</p>
+
+<ol>
+<li>Get the display and sorting order.
+<p>Check the current display order (the order in which the names are displayed) using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_display_order()</span> function, and the sorting order using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_sorting_order()</span> function:</p>
+
+<pre class="prettyprint">
+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;, display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&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;, sorting_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);
+</pre>
+</li>
+
+<li>Change the display and sorting orders.
+<p>To change the display and sorting orders, use the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_display_order()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_sorting_order()</span> functions:</p>
+
+<pre class="prettyprint">
+contacts_setting_set_name_display_order (CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST);
+
+contacts_setting_set_name_sorting_order (CONTACTS_NAME_SORTING_ORDER_FIRSTLAST);
+</pre>
+</li>
+
+<li>Track the order changes with callbacks.
+<p>To track changes in the display and sorting orders:</p>
+<ol><li>Register callbacks with the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_sorting_order_changed_cb()</span> functions. </li>
+<li>Define the callbacks themselves:
+<pre class="prettyprint">
+static void display_changed_cb(contacts_name_display_order_e name_display_order, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed display order: %s&quot;, name_display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);
+}
+
+static void sorting_changed_cb(contacts_name_sorting_order_e name_display_order, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed sorting order: %s&quot;, name_display_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST?"CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);
+}
+</pre>
+<p>The above examples cause a message to be printed when the order changes. To track the changes, write a timeout function after setting the callback.</p></li>
+<li>Unregister the callbacks when they are no longer needed using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_sorting_order_changed_cb()</span> functions.</li></ol>
+
+</li>
+</ol>
+       </div>
+               </li>
+                               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sim" name="sim" class="items-tit-h2">Managing Contacts on the SIM Card</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To check whether the SIM card is initialized and then import contacts from the SIM card:</p>
+<ol>
+<li>Check whether the SIM card is initialized.
+<p>Before using any SIM card methods, ensure that the SIM card initialization is complete:</p>
+
+<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;);
+</pre></li>
+
+<li>Import all contacts from the SIM card.
+<p>When the contacts from the SIM card are available, import them:</p>
+
+<pre class="prettyprint">
+int err = contacts_sim_import_all_contacts();
+</pre>
+</li>
+
+</ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="import" name="import" class="items-tit-h2">Importing from vCard</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To import contacts from all vCard files from a specified directory:</p>
+
+<ul class="ul">
+<li>Get contact records from a stream.
+<p>To receive a records list from the vCard stream, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function. Afterwards, the received list is ready to use and you can perform the iteration on the list.</p>
+
+<p>The following example uses the stream in the vCard format and gets the records from the received list: </p>
+
+<pre class="prettyprint">
+char * vcard_stream;
+// Get vCard stream
+contacts_list_h contacts_list;
+int err = contacts_vcard_parse_to_contacts(vcard_stream, contacts_list);
+
+while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) 
+{
+&nbsp;&nbsp;&nbsp;// Get next records from file
+&nbsp;&nbsp;&nbsp;err = contacts_list_next(list_import);
+}
+err = contacts_list_destroy(list_import, true);
+</pre>
+
+<p>You can also use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span> function. With this function, you have to get the file content manually, and it needs a callback:</p>
+
+<pre class="prettyprint">
+bool contacts_vcard_cb(contacts_record_h record, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Here you have a record
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>The callback is called for each record from a vCard file. The iteration continues as long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
+
+<p>To check how many records are contained in a vCard file, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_get_entity_count()</span> function.</p>
+
+</li>
+
+<li>Import the vCard stream.
+<ul class="ul"><li><p>Get all the files with a .vcf extension from the directory. It can be done through dirent structures available in the <span style="font-family: Courier New,Courier,monospace;">&lt;dirent.h&gt;</span> header. The following example gets the path to every file in a directory:</p>
+
+<pre class="prettyprint">
+char folder[] = &quot;/tmp&quot;;
+DIR *dir = opendir(folder);
+struct dirent *pDirent = NULL;
+if (dir) 
+{
+&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) 
+&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;continue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *extension = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!extension || strcmp(extension, &quot;.vcf&quot;))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * filepath = malloc(strlen(folder)+strlen(pDirent-&gt;d_name)+4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(filepath, &quot;%s/%s&quot;, folder, pDirent-&gt;d_name);
+        
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Full path to file available through filepath string
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(filepath);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li><p>If you use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function, you need to get the file stream manually. The following example shows how to get a records list from a file:</p>
+
+<pre class="prettyprint">
+FILE *fp = fopen(filepath, &quot;r&quot;);
+fseek(fp, 0, 2);
+int bufsize = ftell(fp);
+rewind(fp);
+if (bufsize &lt; 1)
+&nbsp;&nbsp;&nbsp;return 1;
+char * vcard_stream = malloc(sizeof(char) * (bufsize));
+memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));
+if (fp != NULL) 
+{
+&nbsp;&nbsp;&nbsp;char str[200];
+&nbsp;&nbsp;&nbsp;while(fgets(str, 200, fp) != NULL)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(vcard_stream+strlen(vcard_stream), &quot;%s&quot;, str);
+&nbsp;&nbsp;&nbsp;fclose(fp); 
+} 
+else
+&nbsp;&nbsp;&nbsp;// Error handling
+int err = contacts_vcard_parse_to_contacts(vcard_stream, contacts_list);
+free(vcard_stream);
+</pre></li>
+
+<li><p>You can also use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span>  function. It requires a callback and retrieves the file path instead of a file stream:</p>
+
+<pre class="prettyprint">
+bool contacts_vcard_cb(contacts_record_h record, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Here you have record
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+err = contacts_vcard_parse_to_contact_foreach (filepath, contacts_vcard_cb, NULL);
+</pre></li>
+
+<li><p>Add a record in  a callback function:</p>
+
+<pre class="prettyprint">
+int id = -1;
+err = contacts_db_insert_record(record, &amp;id);
+</pre></li></ul>
+
+<p>The following example represents the full code of the previous step:</p>
+
+<pre class="prettyprint">
+char []folder = &quot;/path/&quot;;
+contacts_list_h list_import;
+contacts_record_h record;
+err = contacts_vcard_parse_to_contacts(content, &amp;list_import);
+
+while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) 
+{
+&nbsp;&nbsp;&nbsp;int id = -1;
+&nbsp;&nbsp;&nbsp;err = contacts_db_insert_record(record, &amp;id); // Add to list
+
+&nbsp;&nbsp;&nbsp;contacts_list_next(list_import);
+}
+
+DIR *dir = opendir(folder);
+struct dirent *pDirent = NULL;
+if (dir) 
+{
+&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) 
+&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;continue;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *exte = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!exte || strcmp(exte, &quot;.vcf&quot;))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
+&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;char * file_path = malloc(strlen(folder)+strlen(pDirent-&gt;d_name)+4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(file_path, &quot;%s/%s&quot;, folder, pDirent-&gt;d_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int count;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_vcard_get_entity_count(file_path, &amp;count);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Number of records in file: count
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count &lt; 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FILE * fp = fopen(file_path, &quot;r&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fseek(fp, 0, 2) != 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int bufsize = ftell(fp);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rewind(fp);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file size: %i&quot;, bufsize); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bufsize &lt; 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * vcard_stream = malloc(sizeof(char) * (bufsize));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fp != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char str[150];
+&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;sprintf(vcard_stream+strlen(vcard_stream), &quot;%s&quot;, str);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fclose(fp);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Here import
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h list_import;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_vcard_parse_to_contacts(vcard_stream, &amp;list_import);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_vcard_parse_to_contacts failed: %d&quot;, err);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(vcard_stream);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_db_insert_record(record, &amp;id); // Add to list
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_list_add failed&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_list_next(list_import);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_list_destroy(list_import, true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_list_destroy failed: %d&quot;, err);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free (file_path);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;closedir(dir);
+}
+</pre>
+</li>
+</ul>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="export" name="export" class="items-tit-h2">Exporting to vCard</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To export your contacts to a vCard file:</p>
+
+<ol>
+<li>Export contacts to a file.
+<ul class="ul"><li><p>To export a contact from the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view to the vCard format, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_contact()</span> function.</p></li>
+
+
+<li><p>To export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_person</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_person()</span> function. If you need to export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_my_profile</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_my_profile()</span> function.</p></li></ul>
+
+<p>The following example uses the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view, but the use of the other views is the same:</p>
+
+<pre class="prettyprint">
+contacts_record_h contact;
+// Get record to contacts_record_h
+char *vcard_stream;
+int err = contacts_vcard_make_from_contact(contact, &amp;vcard_stream);
+
+// Stream in vCard format is now in vcard_stream
+free(vcard_stream);
+</pre></li>
+
+<li><p>Write to a file:</p>
+
+<pre class="prettyprint">
+FILE * file = fopen(&quot;/path/contacts.vcf&quot;, &quot;w&quot;);
+fwrite(vcard_stream, 1, strlen(vcard_stream), file);
+fclose(file);
+</pre></li></ol>
+
+
+<p>The following example shows how to get all records from a database and put them into a single file.</p>
+<p>Get the list of all records using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_all_records()</span> function and the current records using the <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function. Get the vCard stream and write to the file in a <span style="font-family: Courier New,Courier,monospace;">while</span> loop:</p>
+
+<pre class="prettyprint">
+char file_path[] = &quot;/path/contacts.vcf&quot;;
+contacts_list_h list = NULL;
+err = contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);
+
+contacts_record_h record;
+FILE * file = fopen(file_path, &quot;w&quot;);
+
+while (contacts_list_get_current_record_p(list, &amp;record) == 0) 
+{
+&nbsp;&nbsp;&nbsp;err = contacts_vcard_make_from_contact(record, &amp;vcard_stream);
+&nbsp;&nbsp;&nbsp;// Save to file
+&nbsp;&nbsp;&nbsp;fwrite(vcard_stream, 1, strlen(vcard_stream), file);
+&nbsp;&nbsp;&nbsp;free(vcard_stream);
+&nbsp;&nbsp;&nbsp;err = contacts_list_next(list);
+}
+fclose(file);
+contacts_list_destroy(list, true);
+</pre>
+
+       </div>
+               </li>
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
new file mode 100644 (file)
index 0000000..0a85abb
--- /dev/null
+++ b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Social: Managing Personal Data</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Social: Managing Personal Data</h1>
+
+ <p>The social tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+  <ul>
+   <li><a href="account_tutorial_n.htm">Account Manager: Managing Account Information on the Device</a> <p>Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.</p></li>
+   <li><a href="calendar_tutorial_n.htm">Calendar: Managing Calendar Events and Accessing the Calendar Database</a> <p> Demonstrates how you can manage calendars, events, and tasks.</p> </li>
+   <li><a href="contact_tutorial_n.htm">Contacts: Managing Contacts and Groups, and Accessing the Contact Database</a> <p>Demonstrates how you can manage contact information, contact groups, vCards, and phone logs.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/system/device_tutorial_n.htm b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
new file mode 100644 (file)
index 0000000..b2a8da1
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
@@ -0,0 +1,396 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#battery" class="opensection">Retrieving Battery Information</a></li>
+                       <li>Device control
+                       <ul class="toc">
+                       <li><a href="#display" class="opensection">Controlling the Display</a></li>
+                       <li><a href="#haptic" class="opensection">Controlling Haptic Devices</a></li>
+                       <li><a href="#led" class="opensection">Controlling LED Devices</a></li>
+                       <li><a href="#power" class="opensection">Controlling the Power State</a></li>
+                       </ul></li>
+                       <li><a href="#changes" class="opensection">Monitoring Device Changes</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/device_n.htm">Device Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how to manage the display, battery, LED, haptic, and power functions.</p>
+
+
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Device API basics by learning about:</p> 
+       <ul>
+       <li><a href="#battery" class="opensection">Retrieving Battery Information</a>
+       <p>Get battery information.</p></li>
+       <li>Device control
+       <ul>
+       <li><a href="#display" class="opensection">Controlling the Display</a>
+       <p>Control display devices.</p></li>
+       <li><a href="#haptic" class="opensection">Controlling Haptic Devices</a>
+       <p>Control haptic devices.</p></li>
+       <li><a href="#led" class="opensection">Controlling LED Devices</a>
+       <p>Control LED devices.</p></li>
+       <li><a href="#power" class="opensection">Controlling the Power State</a>
+       <p>Control the device power state.</p></li>
+       </ul></li>
+       <li><a href="#changes" class="opensection">Monitoring Device Changes</a>
+       <p>Register a changed device event to monitor device changes.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="battery" name="battery" class="items-tit-h2">Retrieving Battery Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+               <p>To retrieve battery information:</p>                 
+       <ol>
+       <li>
+       <p>To use the battery-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;device/battery.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;device/battery.h&gt;</pre>
+               </li>
+
+               <li>Get the battery details:
+                       <ul class="ul">
+                               <li>Get the battery percentage with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_percent()</span> 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>
+
+<pre class="prettyprint">
+int error, pct;
+error = device_battery_get_percent(&amp;pct);
+</pre></li>
+
+               <li>Get the current charging battery state with the <span style="font-family: Courier New,Courier,monospace;">device_battery_is_charging()</span> function:
+
+<pre class="prettyprint">
+int error;
+bool charging;
+error = device_battery_is_charging(&amp;charging);
+</pre>
+               </li>
+
+               <li>Get the current battery level state with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_level_status()</span> function.
+                       <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">device_battery_level_e</a> enumerator defines the available battery levels.</p>
+<pre class="prettyprint">
+int error;
+device_battery_level_e level;
+error = device_battery_get_level_status(&amp;level);
+</pre>
+               </li>
+               </ul></li>
+       </ol> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="display" name="display" class="items-tit-h2">Controlling the Display</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To control the display:</p>
+               <ol>
+               <li>
+               <p>To use the display-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;device/display.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;device/display.h&gt;</pre>
+</li>
+
+               <li>Retrieve and set display properties:
+               <ul class="ul">
+               <li>Get the number of display devices with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_numbers()</span> function:
+<pre class="prettyprint">
+int error, num;
+error = device_display_get_numbers(&amp;num);
+</pre>
+               </li>
+               
+               <li>Get the maximum brightness with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_max_brightness()</span> function.
+               <p>The function returns the maximum brightness value that can be set. This function always returns as 100.</p>
+
+<pre class="prettyprint">
+int error, max;
+error = device_display_get_max_brightness(0, &amp;max);
+</pre>
+               </li>
+                       
+               <li>Get and set the display brightness with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_brightness()</span> and <span style="font-family: Courier New,Courier,monospace;">device_display_set_brightness()</span> functions:
+
+<pre class="prettyprint">
+int error, brt;
+error = device_display_get_brightness(0, &amp;brt);
+
+error = device_display_set_brightness(0, 100);
+</pre>
+               </li>
+
+               <li>Get and set the display state with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_state()</span> and <span style="font-family: Courier New,Courier,monospace;">device_display_change_state()</span> functions:
+
+<pre class="prettyprint">
+int error;
+display_state_e state;
+error = device_display_get_state(&amp;state);
+
+error = device_display_change_state(DISPLAY_STATE_NORMAL);
+</pre>
+
+               <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">display_state_e</a> enumerator defines the available display states.</p>
+               </li>
+               </ul></li></ol></div></li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="haptic" name="haptic" class="items-tit-h2">Controlling Haptic Devices</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To control haptic devices:</p>
+               <ol>
+               <li>
+<p>To use the haptic-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;device/haptic.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;device/haptic.h&gt;</pre>
+</li>
+
+<li>Get the number of haptic devices with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_get_count()</span> function.
+
+<pre class="prettyprint">
+int error, num;
+error = device_haptic_get_count(&amp;num);
+</pre>
+</li>
+
+<li>Initialize the haptic device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_open()</span> function.
+<p>The function opens a haptic-vibration device and returns the handle of the haptic device. It makes a connection to the vibrator.</p>
+<pre class="prettyprint">
+int error;
+haptic_device_h handle;
+error = device_haptic_open(0, &amp;handle);
+</pre>
+</li>
+
+<li>Play and stop an effect on the device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_vibrate()</span> and <span style="font-family: Courier New,Courier,monospace;">device_haptic_stop()</span> functions.
+<p>The device vibrates during specified time with a constant intensity. The effect handle can be 0.</p>
+<pre class="prettyprint">
+int error;
+haptic_effect_h effect_handle;
+error = device_haptic_vibrate(handle, 1000, 100, &amp;effect_handle);
+
+error = device_haptic_stop(handle, &amp;effect_handle);
+</pre>
+</li>
+
+<li>When no longer needed, uninitialize the haptic device with the <span style="font-family: Courier New,Courier,monospace;">device_haptic_close()</span> function.
+<p>The function closes the haptic handle. It disconnects the connection to the vibrator.</p>
+
+<pre class="prettyprint">
+int error;
+error = device_haptic_close(0, handle);
+</pre>
+</li>
+</ol></div></li>
+                               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="led" name="led" class="items-tit-h2">Controlling LED Devices</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To control LED devices:</p>
+               <ol>
+               <li>
+<p>To use the LED-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;device/led.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;device/led.h&gt;</pre>
+</li>
+
+<li>Get the maximum brightness value of a torch LED with the <span style="font-family: Courier New,Courier,monospace;">device_flash_get_max_brightness()</span> function.
+<p>The function returns the maximum brightness value of the torch LED located next to the camera.</p>
+<pre class="prettyprint">
+int error, max;
+error = device_flash_get_max_brightness(&amp;max);
+</pre>
+</li>
+
+<li>Get and set the current brightness value of a torch LED with the <span style="font-family: Courier New,Courier,monospace;">device_flash_get_brightness()</span> and <span style="font-family: Courier New,Courier,monospace;">device_flash_set_brightness()</span> functions.
+
+<pre class="prettyprint">
+int error, val;
+error = device_flash_get_brightness(&amp;val);
+
+error = device_flash_set_brightness(1);
+</pre>
+</li>
+
+<li>Play and stop a custom effect of the service LED with the <span style="font-family: Courier New,Courier,monospace;">device_led_play_custom()</span> and <span style="font-family: Courier New,Courier,monospace;">device_led_stop_custom()</span> functions.
+<p>The custom effect of the service LED that is located on the front of a device plays.</p>
+
+<pre class="prettyprint">
+int error;
+error = device_led_play_custom(1000,500,0xFFFF0000, LED_CUSTOM_DEFAULT);
+
+error = device_led_stop_custom();
+</pre>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">led_custom_flags</a> enumerator defines the available custom effects.</p>
+</li>
+</ol></div></li>                       
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="power" name="power" class="items-tit-h2">Controlling the Power State</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To control the device power state:</p>
+               <ol>
+               <li>
+<p>To use the power-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;device/power.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;device/power.h&gt;</pre>
+</li>
+
+<li>Lock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_request_lock()</span> function.
+<p>The function locks the given lock state for a specified time. After the given timeout, the given lock state  is unlocked automatically. If the process is destroyed, every lock is removed.</p>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">power_lock_e</a> enumerator defines the available lock types.</p>
+
+<pre class="prettyprint">
+int error;
+error = device_power_request_lock(POWER_LOCK_CPU, 0);
+</pre>
+</li>
+
+<li>Unlock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_release_lock()</span> function.
+<p>The function releases the given lock state locked before.</p>
+<pre class="prettyprint">
+int error;
+error = device_power_release_lock(POWER_LOCK_CPU);
+</pre>
+</li>
+
+<li>Change the current power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_wakeup()</span> function.
+<p>The function changes the current power state to the normal or dim state:</p>
+
+ <pre class="prettyprint">
+int error;
+error = device_power_wakeup(true);
+</pre>
+</li>
+</ol></div></li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="changes" name="changes" class="items-tit-h2">Monitoring Device Changes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To monitor device changes:</p>
+               <ol>
+               <li>
+<p>To use the device change-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;device/callback.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;device/callback.h&gt;</pre>
+</li>
+
+<li>Define the device changed callback, which is called when a device status changes.
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">device_callback_e</a> enumerator defines the available callback types.</p>
+
+<pre class="prettyprint">
+static void changed_cb(device_callback_e type, void *value, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int val;
+&nbsp;&nbsp;&nbsp;if (type != DEVICE_CALLBACK_DISPLAY_STATE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;val = (int)value;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;current display state : %d&quot;, val);
+}
+</pre>
+</li>
+
+<li>Register the callback function:
+<pre class="prettyprint">
+int error;
+error = device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb, NULL);
+</pre>
+</li>
+
+<li>When no longer needed, unregister the callback function:
+<pre class="prettyprint">int device_remove_callback(device_callback_e type, device_changed_cb callback);</pre>
+<pre class="prettyprint">
+int error;
+error = device_remove_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb);
+</pre>
+</li>
+</ol></div></li>
+                               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
new file mode 100644 (file)
index 0000000..f7cda37
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
@@ -0,0 +1,242 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>dlog: Sending Log Output for Debug Activities</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing dlog</a>
+                       </li>
+                       <li><a class="opensection" href="#send">Sending a Log Message</a>
+                       </li>
+                       <li><a class="opensection" href="#check">Checking the Output Logs</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/dlog_n.htm">dlog Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>dlog: Sending Log Output for Debug Activities</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how to send log messages to a circular log device and check them.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the dlog API basics by learning about:</p>
+       <ul>
+               <li><a href="#init">Initializing dlog</a>
+               <p>Initialize dlog for use.</p></li>
+               <li><a href="#send">Sending a Log Message</a>
+               <p>Send a log message.</p></li>
+               <li><a href="#check">Checking the Output Logs</a>
+               <p>Check the output.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing dlog</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To initialize dlog:</p>
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;dlog.h&gt;
+</pre></li>            
+<li>Make sure you have the necessary tools:
+       <ul class="ul">
+       <li>dlog library: <span style="font-family: Courier New,Courier,monospace">libdlog.so</span>
+       <p>The dlog library provides a logging function to send log messages to the kernel log device.</p></li>
+       <li>dlogutil: <span style="font-family: Courier New,Courier,monospace">dlogutil</span>
+       <p>dlogutil enables you to view log messages in the log device, and provides filtered message output.</p></li>
+       <li>Requirement: linux-2.6.32 kernel</li>
+</ul></li></ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="send" name="send" class="items-tit-h2">Sending a Log Message</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Send a log message with the  <span style="font-family: Courier New,Courier,monospace">MY_APP</span> tag with various priorities.</p>
+
+<pre class="prettyprint">
+#include&lt;dlog.h&gt;
+#define TAG &quot;MY_APP&quot;
+
+int main(void)
+{
+&nbsp;&nbsp;&nbsp;int integer = 21;
+&nbsp;&nbsp;&nbsp;char string[] = &quot;test dlog&quot;;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, TAG, &quot;debug message&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;info message&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_WARN, TAG, &quot;warning message&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;error message&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;%s, %d&quot;, string, integer);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="check" name="check" class="items-tit-h2">Checking the Output Logs</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Execute dlogutil on the device sdb shell to check the out log.</p>
+
+<p>Check the sdb guide to connect to a target and use it.</p>
+
+<pre class="prettyprint">
+Desktop:~$ sdb shell
+sh-3.2#
+sh-3.2# dlogutil MY_APP
+arc = 2, optind = 1, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+D/MY_APP  (11097): debug message
+I/MY_APP  (11097): info message
+W/MY_APP  (11097): warning message
+E/MY_APP  (11097): error message
+I/MY_APP  (11097): test dlog, 21
+sh-3.2# dlogutil MY_APP:I
+arc = 2, optind = 1, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+I/MY_APP  (11097): info message
+W/MY_APP  (11097): warning message
+E/MY_APP  (11097): error message
+I/MY_APP  (11097): test dlog, 21
+sh-3.2# dlogutil MY_APP:W
+arc = 2, optind = 1, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+W/MY_APP  (11097): warning message
+E/MY_APP  (11097): error message
+sh-3.2# dlogutil MY_APP:E
+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  
+arc = 4, optind = 3, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+12-26 07:06:02.084+0000 D/MY_APP  (11097): debug message
+12-26 07:06:02.084+0000 I/MY_APP  (11097): info message
+12-26 07:06:02.084+0000 W/MY_APP  (11097): warning message
+12-26 07:06:02.084+0000 E/MY_APP  (11097): error message
+12-26 07:06:02.084+0000 I/MY_APP  (11097): test dlog, 21
+sh-3.2# dlogutil -v threadtime MY_APP
+arc = 4, optind = 3, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+12-26 07:06:02.084+0000 11097 11097 D MY_APP  : debug message
+12-26 07:06:02.084+0000 11097 11097 I MY_APP  : info message
+12-26 07:06:02.084+0000 11097 11097 W MY_APP  : warning message
+12-26 07:06:02.084+0000 11097 11097 E MY_APP  : error message
+12-26 07:06:02.084+0000 11097 11097 I MY_APP  : test dlog, 21
+sh-3.2# dlogutil -v long MY_APP
+arc = 4, optind = 3, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+[ 12-26 07:06:02.084 11097:11097 D/MY_APP   ]
+debug message
+
+[ 12-26 07:06:02.084 11097:11097 I/MY_APP   ]
+info message
+
+[ 12-26 07:06:02.084 11097:11097 W/MY_APP   ]
+warning message
+
+[ 12-26 07:06:02.084 11097:11097 E/MY_APP   ]
+error message
+
+[ 12-26 07:06:02.084 11097:11097 I/MY_APP   ]
+test dlog, 21
+sh-3.2# dlogutil -v raw MY_APP
+arc = 4, optind = 3, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+debug message
+info message
+warning message
+error message
+test dlog, 21
+sh-3.2# dlogutil -v brief MY_APP
+arc = 4, optind = 3, Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+D/MY_APP  (11097): debug message
+I/MY_APP  (11097): info message
+W/MY_APP  (11097): warning message
+E/MY_APP  (11097): error message
+I/MY_APP  (11097): test dlog, 21
+</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm b/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
new file mode 100644 (file)
index 0000000..73e0951
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
@@ -0,0 +1,202 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 key: Managing Callbacks from Media Key Events</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#register" class="opensection">Monitoring Media Key Events</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/media_keys_n.htm">Media key Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media key: Managing Callbacks from Media Key Events</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage callbacks for media key events.</p> 
+       
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Media key API basics by learning about:</p> 
+                       <ul>
+       <li><a href="#register">Monitoring Media Key Events</a>
+       <p>Register and unregister a callback for a media key event.</p>
+       </li></ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="register" name="register" class="items-tit-h2">Monitoring Media Key Events</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To monitor media key events:</p>
+<ol>
+
+<li><p>To use the media key-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;media_key.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;media_key.h&gt;
+</pre></li>
+
+<li>Implement the callback to handle media key events:
+<pre class="prettyprint">
+void event_cb(media_key_e key, media_key_event_e status, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;switch (key) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PLAY:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STOP:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PAUSE:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PREVIOUS:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_NEXT:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_FASTFORWARD:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_REWIND:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PLAYPAUSE:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_UNKNOWN:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;switch (status) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STATUS_PRESSED:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STATUS_RELEASED:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STATUS_UNKNOWN:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&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;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Register the defined callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_reserve()</span> function:
+
+<pre class="prettyprint">
+void medi_key_api_func()
+{
+&nbsp;&nbsp;&nbsp;int r = 0;
+
+&nbsp;&nbsp;&nbsp;r = media_key_reserve(event_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;if (r == MEDIA_KEY_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Reserve media key success.&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Reserve media key fail.&quot;);
+&nbsp;&nbsp;&nbsp;}
+</pre>
+</li>
+<li>
+<p>When you no longer need to track media key events, unregister the callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_release()</span> function:</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;r = media_key_release(event_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;if (r == MEDIA_KEY_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Release media key success.&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (r == MEDIA_KEY_ERROR_INVALID_PARAMETER)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Invalid parameter.&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (r == MEDIA_KEY_ERROR_OPERATION_FAILED)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Operation failed.&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Fail. Unknown reason.&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>  
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm
new file mode 100644 (file)
index 0000000..8495471
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm
@@ -0,0 +1,221 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Receiving and Monitoring Runtime Information</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#get" class="opensection">Getting Runtime Information</a></li>
+                       <li><a href="#monitor" class="opensection">Monitoring Runtime Information Changes</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/runtime_info_n.htm">Runtime information Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Runtime information: Receiving and Monitoring Runtime Information</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how you can obtain runtime information, such as system preferences.</p> 
+
+  
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Runtime information API basics by learning about:</p> 
+                       <ul>
+       <li><a href="#get">Getting Runtime Information</a>
+       <p>Get runtime information.</p></li>
+       <li><a href="#monitor">Monitoring Runtime Information Changes</a>
+       <p>Register a callback function for a specific change in the runtime information.</p>
+       </li></ul>              
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="get" name="get" class="items-tit-h2">Getting Runtime Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To get runtime information, which consists of key, value pairs:</p>
+
+<ol>
+<li><p>To use the runtime information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;runtime_info.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;runtime_info.h&gt;
+</pre></li>
+
+<li>Check whether Bluetooth is enabled.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span> key to check whether Bluetooth is enabled. The type of the value is <span style="font-family: Courier New,Courier,monospace">bool</span>, and the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_bool()</span> function is used for the information.</p>
+       
+<pre class="prettyprint">
+#include &lt;stdbool.h&gt;
+#include &lt;runtime_info.h&gt;
+void func(void)
+{
+&nbsp;&nbsp;&nbsp;bool value;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;ret = runtime_info_get_value_bool(RUNTIME_INFO_KEY_BLUETOOTH_ENABLED, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Bluetooth: %s&quot;, value ? &quot;Enabled&quot; : &quot;Disabled&quot;);
+}
+</pre></li>
+<li>Get the Wi-Fi status.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_WIFI_STATUS</span> key to get the Wi-Fi status. The type of the value is <span style="font-family: Courier New,Courier,monospace">integer</span>, and the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_int()</span> function is used for the information.</p>
+       
+<pre class="prettyprint">
+#include &lt;runtime_info.h&gt;
+
+void func(void)
+{
+&nbsp;&nbsp;&nbsp;int value;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;ret = runtime_info_get_value_int(RUNTIME_INFO_KEY_WIFI_STATUS, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Wi-Fi status: %d&quot;, value);
+&nbsp;&nbsp;&nbsp;switch (value)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;case RUNTIME_INFO_WIFI_STATUS_DISABLED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Wi-Fi is disabled 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case RUNTIME_INFO_WIFI_STATUS_UNCONNECTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Wi-Fi is disconnected 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;case RUNTIME_INFO_WIFI_STATUS_CONNECTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Wi-Fi is connected 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Runtime Information Changes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To monitor runtime information changes:</p>
+
+<ol>
+<li><p>To use the runtime information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;runtime_info.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;runtime_info.h&gt;
+</pre></li>
+<li><p>Applications can be notified about changes in the runtime information. The <span style="font-family: Courier New,Courier,monospace">runtime_info_set_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace">runtime_info_unset_changed_cb()</span> functions are used to register a callback function. </p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span> key to monitor the connection state of the USB cable:</p>
+
+<pre class="prettyprint">
+#include &lt;stdbool.h&gt;
+#include &lt;runtime_info.h&gt;
+
+void usb_connection_changed(runtime_info_key_e key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;bool value;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;if (key != RUNTIME_INFO_KEY_USB_CONNECTED)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;ret = runtime_info_get_value_bool(key, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB status: %s&quot;, value ? &quot;Connected&quot; : &quot;Disconnected&quot;);
+}
+
+void func(void)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;void *data;
+
+&nbsp;&nbsp;&nbsp;ret = runtime_info_set_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED, usb_connection_changed, data);
+&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = runtime_info_unset_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED);
+&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+                       </div>
+               </li>
+                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm
new file mode 100644 (file)
index 0000000..74821c4
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm
@@ -0,0 +1,296 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Sensor: Using Sensors and Managing Sensor Events</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#retrieve">Retrieving a Sensor</a></li>
+                       <li><a href="#event">Registering a Sensor Event</a></li>
+                       <li><a href="#accuracy">Registering the Accuracy Changed Callback</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/sensors_n.htm">Sensor Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sensor: Using Sensors and Managing Sensor Events</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how you can manage sensors, retrieve information from and about them, and set intervals for sensor events.</p> 
+
+  
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Sensor API basics by learning about:</p> 
+       <ul>
+       <li><a href="#retrieve">Retrieving a Sensor</a>
+       <p>Check the sensor support and retrieve the sensor.</p></li>
+       <li><a href="#event">Registering a Sensor Event</a>
+       <p>Get a specific sensor using criteria such as vendor and name.</p></li>
+       <li><a href="#accuracy">Registering the Accuracy Changed Callback</a>
+       <p>Create an event which is called when the accuracy is changed.</p>
+       </li></ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving a Sensor</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To declare the variables and get a sensor handle:</p>
+
+<ol>
+<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a> API, include the following header file:
+<pre class="prettyprint">
+#include &lt;sensor.h&gt;
+</pre>
+</li>
+<li>Check whether a sensor is supported:
+<pre class="prettyprint">
+int error;
+bool supported;
+sensor_type_e type = SENSOR_ACCELEROMETER;
+
+error = sensor_is_supported(type, &amp;supported);
+</pre>
+</li>
+<li>Get a handle of the default sensor or a sensor list:
+<pre class="prettyprint">
+int error;
+sensor_type_e type = SENSOR_ACCELEROMETER;
+sensor_h sensor;
+
+error = sensor_get_default_sensor(type, &amp;sensor);
+</pre>
+<pre class="prettyprint">
+int error;
+sensor_type_e type = SENSOR_ALL;
+sensor_h *list;
+
+error = sensor_get_default_sensor(type, &amp;list);
+
+// API caller must explicitly free this list after use
+// free(list);
+</pre>
+</li>
+</ol>  
+                       </div>
+               </li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="event" name="event" class="items-tit-h2">Registering a Sensor Event</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To set and unset callback functions for sensor events:</p>
+
+<ol>
+<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a> API, include the following header file:
+<pre class="prettyprint">
+#include &lt;sensor.h&gt;
+</pre>
+</li>
+<li>Create an event listener:
+<pre class="prettyprint">
+sensor_h sensor;
+
+sensor_listener_h listener;
+error = sensor_create_listener (sensor, &amp;listener);</pre>
+</li>
+<li>Register a callback: 
+<pre class="prettyprint">
+void on_sensor_event(sensor_h sensor, sensor_event_s *event, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Select a specific sensor with a sensor handle
+&nbsp;&nbsp;&nbsp;// This example uses sensor type, assuming there is only 1 sensor for each type
+&nbsp;&nbsp;&nbsp;sensor_type_e type;
+&nbsp;&nbsp;&nbsp;sensor_get_type(sensor, &amp;type);
+&nbsp;&nbsp;&nbsp;switch (type) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case SENSOR_ACCELEROMETER:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use sensor information
+&nbsp;&nbsp;&nbsp;}
+}
+
+error = sensor_listener_set_event_cb(listener, 100, on_sensor_event, user_data);
+</pre>
+<p>The following example shows the use of <span style="font-family: Courier New,Courier,monospace">sensor_event_s</span>:</p>
+<pre class="prettyprint">
+// In sensor.h
+typedef struct                   
+{                                
+&nbsp;&nbsp;&nbsp;int accuracy;                
+&nbsp;&nbsp;&nbsp;unsigned long long timestamp;
+&nbsp;&nbsp;&nbsp;int value_count;             
+&nbsp;&nbsp;&nbsp;float values[MAX_VALUE_SIZE];
+}
+sensor_event_s;</pre>
+
+</li>
+<li>Reset the interval (in milliseconds) (optional): 
+<p>In case of the proximity sensor, the setting interval has no effect. The proximity event occurs when the value changes.</p>
+<pre class="prettyprint">
+error = sensor_listener_set_interval(listener, 100);
+</pre>
+
+</li>
+<li>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html#gaf517b61e58b872f985fc2fc2a26aa56a">sensor option</a> (optional):
+<pre class="prettyprint">
+error = sensor_listener_set_option(listener, SENSOR_OPTION_ALWAYS_ON);
+</pre>
+
+
+</li>
+<li>Start a sensor listener: 
+<pre class="prettyprint">
+error = sensor_listener_start(listener);
+</pre>
+
+</li>
+<li>Read sensor data (optional).
+<p>In order to read sensor data, call the <span style="font-family: Courier New,Courier,monospace">sensor_listener_start()</span> function:</p>
+<pre class="prettyprint">
+sensor_event_s event;
+error = sensor_listener_read_data(listener, &amp;event);
+</pre>
+
+</li>
+<li>Unset the callback:
+<pre class="prettyprint">
+error = sensor_listener_unset_event_cb(listener);
+</pre>
+
+</li>
+<li>Stop the listener:
+<pre class="prettyprint">
+error = sensor_listener_stop(listener);
+</pre>
+
+</li>
+<li>Destroy the listener:
+<pre class="prettyprint">
+error = sensor_destroy_listener(listener);
+</pre>
+
+</li>
+<li>Read sensor details (optional):
+<pre class="prettyprint">
+char *name;
+char *vendor;
+sensor_type_e type;
+float min_range;
+float max_range;
+float resolution;
+int min_interval;
+
+error = sensor_get_name(listener, &amp;name);
+error = sensor_get_vendor(listener, &amp;vendor);
+error = sensor_get_type(listener, &amp;type);
+error = sensor_get_min_range(listener, &amp;min_range);
+error = sensor_get_max_range(listener, &amp;max_range);
+error = sensor_get_resolution(listener, &amp;resolution);
+error = sensor_get_min_interval(listener, &amp;min_interval);
+</pre>
+
+</li>
+</ol>
+                       </div>
+               </li>
+                               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="accuracy" name="accuracy" class="items-tit-h2">Registering the Accuracy Changed Callback</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To register the accuracy changed callback:</p>
+
+<ol>
+<li>To use the Sensor API, include the following header file:
+<pre class="prettyprint">
+#include &lt;sensor.h&gt;
+</pre>
+</li>
+<li>Create an event listener:
+<pre class="prettyprint">
+sensor_h sensor;
+
+sensor_listener_h listener;
+error = sensor_create_listener (sensor, &amp;listener);
+</pre>
+
+</li>
+<li>Register the accuracy changed callback: 
+<pre class="prettyprint">
+error = sensor_listener_set_accuracy_cb (listener, sensor_accuracy_changed_cb, user_data);
+void sensor_accuracy_changed_cb(sensor_h sensor, unsigned long long 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;sensor_data_accuracy_e accuracy, void *data)
+{
+&nbsp;&nbsp;&nbsp;// Use the timestamp or accuracy from the sensor
+}</pre>
+</li>
+</ol>
+                       </div>
+               </li>
+                               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm b/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm
new file mode 100644 (file)
index 0000000..5463457
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm
@@ -0,0 +1,321 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Storage: Getting Information about Storages</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#statvfs" class="opensection">Using Statvfs Wrapper</a></li>
+                       <li><a href="#storage" class="opensection">Retrieving Storage Information</a></li>
+                       <li><a href="#state" class="opensection">Monitoring Storage State Changes</a></li>
+                       <li><a href="#space" class="opensection">Retrieving Storage Space Information</a></li>                  
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/storage_n.htm">Storage Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Storage: Getting Information about Storages</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how you can obtain detailed information from the internal and external storage.</p> 
+       
+  
+  <h2>Warm-up</h2>
+    <p>Become familiar with the Storage API basics by learning about:</p> 
+       <ul>
+       <li><a href="#statvfs">Using Statvfs Wrapper</a>
+       <p>Retrieve internal and external memory sizes.</p></li>
+       <li><a href="#storage">Retrieving Storage Information</a>
+       <p>Retrieve information about supported storages and the storage content.</p></li>
+       <li><a href="#state">Monitoring Storage State Changes</a>
+       <p>Monitor changes in the storage state.</p></li>
+       <li><a href="#space">Retrieving Storage Space Information</a>
+       <p>Retrieve information about the storage space.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="statvfs" name="statvfs" class="items-tit-h2">Using Statvfs Wrapper</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>Use the statvfs wrapper to get memory sizes:</p>
+<ol>
+<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;storage.h&gt;
+</pre></li>
+<li><p>Get memory sizes:</p>
+<ul class="ul">
+<li>Get internal memory size with the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> function.
+<p>The function returns the internal memory size. Use it instead of the statvfs function when you need the internal memory size.</p>
+<p>At least a low memory pop-up is launched in case the memory is low, and to do that, a minimum memory is reserved. To allow memory for the pop-up, the function returns a memory size except for a minimum memory size. The minimum memory size depends on the device storage size.</p>
+<p>Statvfs structure has a different structure size from the <span style="font-family: Courier New,Courier,monospace;">__USE_FILE_OFFSET64</span> option. If your module defines this option, libstorage changes <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> to <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size64()</span> automatically.</p>
+<pre class="prettyprint">
+int error;
+struct statvfs s;
+error = storage_get_internal_memory_size(&amp;s);
+</pre>
+</li>
+
+<li>Get external memory size with the <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> function.
+<p>The function returns the external memory size. Use it instead of the statvfs function when you need the external memory size.</p>
+<p>At least a low memory pop-up is launched in case the memory is low, and to do that, a minimum memory is reserved. To allow memory for the pop-up, the function returns a memory size except for a minimum memory size. The minimum memory size depends on the device storage size.</p>
+
+<p>Statvfs structure has a different structure size from the <span style="font-family: Courier New,Courier,monospace;">__USE_FILE_OFFSET64</span> option. If your module defines this option, libstorage changes <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> to <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size64()</span> automatically.</p>
+
+<pre class="prettyprint">
+int error;
+struct statvfs s;
+error = storage_get_external_memory_size(&amp;s);
+</pre></li>
+</ul>
+</li>
+</ol>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="storage" name="storage" class="items-tit-h2">Retrieving Storage Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To retrieve storage information:</p>
+<ol>
+<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;storage.h&gt;
+</pre></li>
+<li><p>Retrieve storage information:</p>
+<ul class="ul">
+<li>Check for supported storages.
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_device_supported_cb</span> callback function to get information once for each supported storage. If this function returns <span style="font-family: Courier New,Courier,monospace;">false</span>, the iteration is finished.</p>
+
+<pre class="prettyprint">
+static int internal_storage_id;
+static bool storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+
+<li>Retrieve all storages in a device.
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_foreach_device_supported()</span> function to invoke the <span style="font-family: Courier New,Courier,monospace;">storage_device_supported_cb()</span> callback function repeatedly, once for each storage in a device.</p>
+
+<pre class="prettyprint">
+int error;
+error = storage_foreach_device_supported(storage_cb, NULL);
+</pre>
+</li>
+
+<li>Get the root directory.
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_root_directory()</span> function to get the absolute path to the root directory of a given storage. Files saved on the internal and external storage are readable or writeable by all applications. When an application is uninstalled, the files written by that application are not removed from the internal or external storage.</p>
+
+<pre class="prettyprint">
+int error;
+char *path;
+error = storage_get_root_directory(internal_storage_id, &amp;path);
+
+free(path);
+</pre>
+</li>
+
+<li>Get the media directory.
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function to get the absolute path to each directory of the given storage. Files saved on the internal or external storage are readable or writeable by all applications. When an application is uninstalled, the files written by that application are not removed from the internal or external storage.</p>
+
+<p>The second parameter defines the directory type based on the <span style="font-family: Courier New,Courier,monospace;">storage_directory_e</span> enum:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_IMAGES</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_SOUNDS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_VIDEOS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_CAMERA</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_DOWNLOADS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_MUSIC</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_DOCUMENTS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_OTHERS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_SYSTEM_RINGTONES</span></li>
+</ul>
+
+<pre class="prettyprint">
+int error;
+char *path;
+error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_IMAGES, &amp;path);
+
+free(path);
+</pre>
+</li>
+
+<li>Get the storage type.
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_type()</span> function to get the type of the given storage.</p>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">storage_type_e</a> enumerator defines the available storage types.</p>
+
+<pre class="prettyprint">
+int error;
+storage_type_e type;
+error = storage_get_type(internal_storage_id, &amp;type);
+</pre>
+</li>
+
+<li>Get the storage mount state.
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_state()</span> function to get the current state of the given storage.</p>
+
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">storage_state_e</a> enumerator defines the available storage states.</p>
+
+<pre class="prettyprint">
+int error;
+storage_state_e state;
+error = storage_get_state(internal_storage_id, &amp;state);</pre></li></ul>
+</li></ol></div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="state" name="state" class="items-tit-h2">Monitoring Storage State Changes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To monitor storage state changes:</p>
+
+<ol>
+<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;storage.h&gt;
+</pre></li>
+<li>Define the storage changed callback, which is called when a storage state changes.
+
+<pre class="prettyprint">
+static void storage_changed_cb(int storage_id, storage_state_e state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;if (storage_id != internal_storage_id)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;state changed to %d&quot;, state);
+}
+</pre>
+</li>
+
+<li>Register the callback.
+
+<pre class="prettyprint">
+int error;
+error = storage_set_state_changed_cb(internal_storage_id, storage_changed_cb, NULL);
+</pre>
+</li>
+
+<li>When the callback is no longer needed, unregister it.
+<pre class="prettyprint">
+int error;
+error = storage_unset_state_changed_cb(internal_storage_id, storage_changed_cb);
+</pre>
+</li></ol>
+                       </div>
+               </li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="space" name="space" class="items-tit-h2">Retrieving Storage Space Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To retrieve storage space information:</p>
+
+<ol>
+<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;">&lt;storage.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;storage.h&gt;
+</pre></li>
+<li><p>Retrieve storage space:</p>
+<ul class="ul">
+<li>Get the total space of the storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_total_space()</span> function.
+<p>The function returns the total space of the given storage in bytes. It invokes the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> or <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> internally.</p>
+
+<pre class="prettyprint">
+int error;
+unsigned long long bytes;
+error = storage_get_total_space(internal_storage_id, &amp;bytes);
+</pre>
+</li>
+
+<li>Get the available space of the storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_available_space()</span> function.
+<p>This function returns the available space of the given storage in bytes. This function invokes the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> or <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> internally.</p>
+
+<pre class="prettyprint">
+int error;
+unsigned long long bytes;
+error = storage_get_available_space(internal_storage_id, &amp;bytes);
+</pre></li>
+</ul></li>
+</ol>
+                       </div>
+               </li>
+       </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
new file mode 100644 (file)
index 0000000..18b745c
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
@@ -0,0 +1,161 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Obtaining Device Information</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#model">Getting the Device Model Name</a></li>
+                       <li><a href="#camera">Checking Whether a Camera is Provided</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/sysinfo_n.htm">System Information Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System Information: Obtaining Device Information</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how you can obtain device information, such as platform version, device model, and supported device features.</p> 
+       
+  
+  <h2>Warm-up</h2>
+    <p>Become familiar with the System Information API basics by learning about:</p> 
+                       <ul>
+<li><a href="#model">Getting the Device Model Name</a>                 
+<p>Get the model name of the device.</p></li>
+<li><a href="#camera">Checking Whether a Camera is Provided</a>
+ <p>Check whether the device provides a camera.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="model" name="model" class="items-tit-h2">Getting the Device Model Name</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To get the device model name:</p><ol>       
+<li><p>To use the device-specific information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;system_info.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;system_info.h&gt;
+</pre></li>
+<li><p>Device-specific information consists of &quot;key, value&quot; pairs. To get the device model name, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/system/model_name</span> key.</p><p>The type of the value is String, which means that the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_string()</span> function is used for the information. The value of the key must be released by the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+ 
+<pre class="prettyprint">
+void func(void)
+{
+&nbsp;&nbsp;&nbsp;char *value;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;ret = system_info_get_platform_string(&quot;tizen.org/system/model_name&quot;, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != SYSTEM_INFO_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Model name: %s&quot;, value);
+
+&nbsp;&nbsp;&nbsp;free(value); // Release after use 
+} 
+</pre></li></ol>
+                       </div>
+               </li>
+                               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="camera" name="camera" class="items-tit-h2">Checking Whether a Camera is Provided</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To check whether a camera is provided:</p>
+<ol>
+<li><p>To use the device-specific information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;system_info.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;system_info.h&gt;
+</pre></li>
+<li><p>To check whether the device provides any kind of a camera, use the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/camera</span> key.</p>
+<p>The type of the value is bool, which means that the <span style="font-family: Courier New,Courier,monospace;">system_info_get_platform_bool()</span> function is used for the information.</p>
+
+<pre class="prettyprint">
+#include &lt;stdbool.h&gt;
+
+void func(void)
+{
+&nbsp;&nbsp;&nbsp;bool value;
+&nbsp;&nbsp;&nbsp;int ret;
+
+&nbsp;&nbsp;&nbsp;ret = system_info_get_platform_bool(&quot;tizen.org/feature/camera&quot;, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != SYSTEM_INFO_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Camera: %s&quot;, value ? &quot;Supported&quot; : &quot;Not supported&quot;);
+}
+</pre></li></ol>
+                       </div>
+               </li>
+                               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
new file mode 100644 (file)
index 0000000..9b6f9a0
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
@@ -0,0 +1,238 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Getting Miscellaneous System Settings and Preferences</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#settings" class="opensection">Managing System Settings</a>
+                       </li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/settings_n.htm">System Settings Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System Settings: Getting Miscellaneous System Settings and Preferences</h1>
+<div class="cont"><div class="static-cont">    
+
+       <p>This tutorial demonstrates how you can manage and monitor system settings.</p> 
+       
+  <h2>Warm-up</h2>
+    <p>Become familiar with the System Settings API basics by learning about:</p> 
+       <ul>
+       <li><a href="#settings">Managing System Settings</a>
+       <p>Obtain, set, and track system settings.</p>
+       </li>
+       </ul>   
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="settings" name="settings" class="items-tit-h2">Managing System Settings</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+       <p>To manage system settings, which provide access to system variables:</p>
+<ol>
+<li><p>To use the system settings-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;system_settings.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;system_settings.h&gt;
+</pre></li>
+
+<li><p>Define auxiliary structures:</p>
+
+<pre class="prettyprint">
+struct _ret_type_define
+{
+&nbsp;&nbsp;&nbsp;system_settings_key_e key;
+&nbsp;&nbsp;&nbsp;int returns;
+};
+
+typedef enum
+{
+&nbsp;&nbsp;&nbsp;_RET_BOO = 0,
+&nbsp;&nbsp;&nbsp;_RET_INT,
+&nbsp;&nbsp;&nbsp;_RET_STRING
+} _SYSTEM_SETTINGS_TYPES;
+
+struct _ret_type_define _ret_type[] =
+{
+&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;SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, _RET_STRING
+&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;SYSTEM_SETTINGS_KEY_FONT_SIZE, _RET_INT
+&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;SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION, _RET_BOOL
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Others
+&nbsp;&nbsp;&nbsp;}
+};
+</pre>
+
+<pre class="prettyprint">
+static const char *_info_key[SYS_INFO_COUNT]=
+{
+&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE&quot;,
+&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN&quot;,
+&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN&quot;,
+&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_FONT_SIZE&quot;,
+&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_FONT_TYPE&quot;,
+&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION&quot;,
+&nbsp;&nbsp;&nbsp;// Others
+};
+</pre>
+</li>
+
+<li><p>Get the setting data.</p>
+<p>The available settings are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">system_settings_key_e</a> enumerator.</p>
+ 
+<p>Read the data using the following functions, according to the data type of the value you want to read:</p>
+
+<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_int (system_settings_key_e key, int *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_bool (system_settings_key_e key, bool *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_double (system_settings_key_e key, double *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_string (system_settings_key_e key, char **value)</span></li>
+</ul>
+
+<pre class="prettyprint">
+#define  SYS_INFO_COUNT 6
+
+int i;
+for (i = 0; i&lt;SYS_INFO_COUNT; i++)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR,LOG_TAG,&quot;%d- System_settings: %s : &quot;, i, _info_key[_ret_type[i].key]);
+
+&nbsp;&nbsp;&nbsp;if (_ret_type[i].returns==_RET_BOOL)
+&nbsp;&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%d&quot;, _bool_ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (_ret_type[i].returns==_RET_INT)
+&nbsp;&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%d&quot;, _int_ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (_ret_type[i].returns==_RET_STRING)
+&nbsp;&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%s&quot;, _string_ret);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(_string_ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (_ret_type[i].returns==_RET_DOUBLE)
+&nbsp;&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%f&quot;, _double_ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else dlog_print(DLOG_ERROR, LOG_TAG, &quot;Undefined return type&quot;);
+}
+</pre>
+</li>
+
+
+<li><p>Track changes in the settings.</p>
+<ol><li><p>To track changes in the value of any system setting, set a callback function with the proper key.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span> setting does not support the callback function, so you must iterate through the <span style="font-family: Courier New,Courier,monospace">SYS_INFO_COUNT-1</span> records.</p>
+
+<pre class="prettyprint">
+for (i = 0; i&lt;SYS_INFO_COUNT-1; i++)
+{
+&nbsp;&nbsp;&nbsp;system_settings_set_changed_cb(_ret_type[i].key, _system_settings_changed_cb, 0);
+}
+</pre></li>
+
+<li><p>Define the callback which is invoked after each change. The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> key refers to the key which has changed.</p>
+
+<pre class="prettyprint">
+static void _system_settings_changed_cb(system_settings_key_e key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Runtime Info changed: %s&quot;, _info_key[key]);
+}
+</pre></li>
+
+<li><p>When they are no longer needed, unregister the callbacks:</p>
+
+<pre class="prettyprint">
+for (i = 0; i&lt;SYS_INFO_COUNT-1; i++)
+{
+&nbsp;&nbsp;&nbsp;system_settings_unset_changed_cb(_ret_type[i].key, _system_settings_changed_cb, 0);
+}
+</pre></li></ol>
+</li>
+
+</ol>  
+                       </div>
+               </li>
+                               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/system/system_tutorials_n.htm b/org.tizen.tutorials/html/native/system/system_tutorials_n.htm
new file mode 100644 (file)
index 0000000..1fea3c3
--- /dev/null
+++ b/org.tizen.tutorials/html/native/system/system_tutorials_n.htm
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Getting System Information and Managing Devices</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>System: Getting System Information and Managing Devices</h1>
+       <p>The system tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p> 
+       <ul>
+       
+               <li><a href="device_tutorial_n.htm">Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display</a>
+               <p>Demonstrates how you can control attached devices, such as display, battery, LED, haptic, and power.</p>
+               </li>
+               <li><a href="dlog_tutorial_n.htm">dlog: Sending Log Output for Debug Activities</a> <p>Demonstrates how you can use the dlog library to collect log messages from various applications and the system.</p></li>
+               <li><a href="media_key_tutorial_n.htm">Media key: Managing Callbacks from Media Key Events</a> <p>Demonstrates how you can manage callbacks for media key events.</p></li>      
+               <li><a href="runtime_tutorial_n.htm">Runtime information: Receiving and Monitoring Runtime Information</a>
+               <p>Demonstrates how you can obtain runtime information, such as system preferences.</p>
+               </li>
+               <li><a href="sensor_tutorial_n.htm">Sensor: Using Sensors and Managing Sensor Events</a>
+               <p>Demonstrates how you can manage sensors, retrieve information from and about them, and set intervals for sensor events.</p>
+               </li>
+               <li><a href="sysinfo_tutorial_n.htm">System Information: Obtaining Device Information</a>
+               <p>Demonstrates how you can obtain device information, such as platform version, device model, and supported device features.</p>
+               </li>
+               <li><a href="system_setting_tutorial_n.htm">System Settings: Getting Miscellaneous System Settings and Preferences</a>
+               <p>Demonstrates how you can manage and monitor system settings.</p>
+               </li>
+               <li><a href="storage_tutorial_n.htm">Storage: Getting Information about Storages</a>
+               <p>Demonstrates how you can obtain detailed information from the internal and external storage.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
new file mode 100644 (file)
index 0000000..4362266
--- /dev/null
+++ b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
@@ -0,0 +1,465 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Telephony: Handling Phone Call, SIM Card, and Network Information</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Telephony Service</a></li>
+                       <li><a class="opensection" href="#call">Getting Call Information</a></li>
+                       <li><a class="opensection" href="#sim">Getting SIM Information</a></li>
+                       <li><a class="opensection" href="#network">Getting Network Information</a></li>
+                       <li><a class="opensection" href="#modem">Getting Modem Information</a></li>
+               </ul>        
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Telephony: Handling Phone Call, SIM Card, and Network Information</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can get the state of both voice and video calls, get notified when the user makes a voice or video call or hangs up the phone, extract information stored on a SIM card, and get IMEI information.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Telephony API basics by learning about:</p>
+
+<ul>
+       <li><a class="opensection" href="#init">Initializing the Telephony Service</a>
+       <p>Initialize telephony for use.</p></li>
+       <li><a class="opensection" href="#call">Getting Call Information</a>
+       <p>Access call information and track changes in call status.</p></li>
+       <li><a class="opensection" href="#sim">Getting SIM Information</a>
+       <p>Access SIM information and track changes in SIM status.</p></li>
+       <li><a class="opensection" href="#network">Getting Network Information</a>
+       <p>Access network information and track changes in network status.</p></li>
+       <li><a class="opensection" href="#modem">Getting Modem Information</a>
+       <p>Access modem information.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Telephony Service</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To initialize the telephony service:</p>                    
+<p>In a multi-SIM scenario, you must define which subscription you need, in case the application is related to calling, networks, modems, or SIM cards. Telephony provides a function to create handles for different subscriptions.</p>
+
+<ol>
+<li>                   
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;telephony.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;telephony.h&gt;
+</pre></li>    
+<li>
+<p>To create a telephony handle, use the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure that holds the handles for all the subscriptions defined in <span style="font-family: Courier New,Courier,monospace">telephony_common.h</span>.</p>
+
+<pre class="prettyprint">
+typedef struct
+{
+&nbsp;&nbsp;&nbsp;unsigned int count;
+&nbsp;&nbsp;&nbsp;telephony_h *handle;
+}
+telephony_handle_list_s;
+</pre>
+<p>Pass the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure pointer to get the telephony handles for all subscriptions. You can send requests to specific subscriptions using the telephony handle for that subscription.</p></li>
+<li><p>Get the telephony handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function.</p>
+
+<pre class="prettyprint">
+#include &lt;telephony.h&gt;
+telephony_handle_list_s handle_list;
+int main()
+{
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;ret = telephony_init(&amp;handle_list); // In case of single SIM, we get only one handle
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; handle_list.count; i++)
+&nbsp;&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;handle_list.handle[i], i);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+ }
+</pre></li>
+
+<li><p>When the telephony handle is no longer needed, the <span style="font-family: Courier New,Courier,monospace">telephony_deinit()</span> function must be called to free the handle.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_deinit()
+{
+&nbsp;&nbsp;&nbsp;ret = telephony_deinit(&amp;handle_list);
+}
+</pre></li></ol>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="call" name="call" class="items-tit-h2">Getting Call Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the voice and video call states and be notified when the user makes a voice or video call or hangs up the phone, use the Telephony <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">Call</a> API in call-related actions:</p>
+
+<h3>Getting the Call State</h3>
+
+<ol><li><p>You can get the state of the current voice call by using the <span style="font-family: Courier New,Courier,monospace">telephony_call_get_voice_call_state()</span> function. It returns one of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html#gafef963e029b4d1d48bece63245f692f2">telephony_call_state_e</a> values.</p>
+
+
+<pre class="prettyprint">
+void tutorial_telephony_call_get_voice_call_state()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;telephony_call_state_e voice_call_state;
+&nbsp;&nbsp;&nbsp;ret = telephony_call_get_voice_call_state(handle_list.handle[0], &amp;voice_call_state);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Voice call state: [%d]", voice_call_state);
+}
+</pre></li>
+
+<li><p>You can use the previous process to get to the video call state by replacing voice with video in the function: <span style="font-family: Courier New,Courier,monospace">telephony_call_get_video_call_state()</span>.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_call_get_video_call_state()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;telephony_call_state_e video_call_state;
+&nbsp;&nbsp;&nbsp;ret = telephony_call_get_video_call_state(handle_list.handle[0], &amp;video_call_state);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Video call state: [%d]", video_call_state);
+}
+</pre></li></ol>
+
+<h3>Receiving Change Notifications for the Call States</h3>
+<p>The callback function can be used to obtain change notifications for the call state asynchronously. The call state is returned through a callback function, given to the function as one of its parameters.</p>
+
+<ol><li><p>To be notified when the voice call state changes, implement a callback function compatible with the <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> function typedef and register this function.</p>
+
+<pre class="prettyprint">
+void voice_call_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;telephony_call_state_e voice_call_state = *(int *)data;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Voice call state: [%d]", voice_call_state);
+}
+
+void tutorial_telephony_set_noti_cb_voice()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_VOICE_CALL_STATE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;voice_call_state_noti_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>After registering, you are notified of the voice call state until you cancel the registration of the callback function. To unregister the callback, invoke the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function with <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATE</span>.</p></li>
+
+<li><p>To be notified when the video call state changes, use the same callback function typedef as for the voice calls.</p>
+
+<pre class="prettyprint">
+void video_call_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;telephony_call_state_e video_call_state = *(int *)data;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Video call state: [%d]", video_call_state);
+}
+
+void tutorial_telephony_set_noti_cb_video()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_VIDEO_CALL_STATE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_call_state_noti_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>After registering, you are notified of the video call state information until you cancel the registration of the callback function. To unregister the callback, invoke the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function with <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATE</span>.</p></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="sim" name="sim" class="items-tit-h2">Getting SIM Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To extract information stored on a SIM card, use the Telephony <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">SIM</a> API:</p>
+
+<h3>Getting the State of the SIM</h3>
+<p>Before retrieving information from the SIM card, retrieve the state of the SIM card. You can get SIM-related information only if the state of the SIM is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</p>
+
+<p>You can get the state of the SIM card by calling the <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span> function. It returns the status of the SIM, which is one of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">telephony_sim_state_e</a> values, through its output parameters.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_sim_get_state()
+{
+&nbsp;&nbsp;&nbsp;telephony_sim_state_e state;
+&nbsp;&nbsp;&nbsp;ret = telephony_sim_get_state(handle_list.handle[0], &amp;state);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "SIM status: [%d]", status);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Receiving Change Notifications for the SIM State</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain notifications for the changes in the SIM state asynchronously. The SIM status is returned through a callback function, given to the function as one of its parameters.</p>
+
+<pre class="prettyprint">
+void sim_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;telephony_sim_state_e sim_state = *(int *)data;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", sim_state);
+}
+
+void tutorial_telephony_set_noti_cb_sim()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&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;sim_state_noti_cb, NULL);
+&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;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>The callback function is invoked automatically when the status of the SIM changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function.</p>
+
+<p>Once the callback function of the SIM state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
+
+<h3>Getting SIM Information</h3>
+<p>If you know the current SIM state and, for example, it is <span style="font-family: Courier New,Courier,monospace">SIM_STATE_AVAILABLE</span>, call the SIM API to get the following information from the SIM card: ICC-ID, MCC, MNC, SPN, Subscriber name, and Subscriber number.</p>
+
+<p>If you do not get an error (<span style="font-family: Courier New,Courier,monospace">SIM_ERROR_NONE</span>), the requested SIM information is received and stored in an output parameter. You must free all returned variables once you are done with them.</p>
+
+<p>To get ICCID information from a SIM card:</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_sim_get_icc_id()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;char *iccid;
+&nbsp;&nbsp;&nbsp;ret = telephony_sim_get_icc_id(handle_list.handle[0], &amp;iccid);
+&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Integrated Circuit Card IDentification: %s", iccid);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(iccid);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="network" name="network" class="items-tit-h2">Getting Network Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To access, but not change, information about the current cellular network and telephony service, use the Telephony <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">Network</a> API:</p>
+
+
+<h3>Getting the Network Service State</h3>
+<p>Determine the state of the service network. The network service state is one of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">telephony_network_service_state_e</a> enumeration values.</p>
+
+<p>You can only get telephony network information if the state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_network_get_service_state()
+{
+&nbsp;&nbsp;&nbsp;telephony_network_service_state_e network_service_state;
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = telephony_network_get_service_state(handle_list.handle[0], &amp;network_service_state);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Network Service State [%d]", network_service_state);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Receiving Network Service State Change Notifications</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain change notifications for a network asynchronously. The network status is returned through a callback function, given to the function as one of its parameters.</p>
+
+<p>The Telephony Network API provides change notifications for the following information:</p>
+<ul class="ul">
+       <li>Network service state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span>)</li>
+       <li>Cell ID changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span>)</li>
+       <li>Roaming state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span>)</li>
+       <li>Signal strength changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span>)</li>
+</ul>
+
+<pre class="prettyprint">
+void network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;telephony_network_service_state_e network_state = *(int *)data;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", network_state);
+}
+
+void tutorial_telephony_set_noti_cb_network()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&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;network_service_state_noti_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<p>The callback function is invoked automatically when the status of the network changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. To get additional notifications when the Cell ID, RSSI level, or roaming state changes, define corresponding callback functions. Register each one of them with their corresponding notification ID.</p>
+
+<p>Once the callback function of the network state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
+
+<h3>Getting Network Information</h3>
+<p>If the current network service state is <span style="font-family: Courier New,Courier,monospace">NETWORK_INFO_SERVICE_STATE_IN_SERVICE</span>, use the Telephony Network API to get the network information: LAC, Cell ID, RSSI, roaming state, MNC, network provider name, and network type.</p>
+
+<p>You must free all returned variables (strings) once you are done with them.</p>
+
+<p>To get network information:</p>
+
+<ul class="ul"><li><p>To get the Cell ID:</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_network_get_cell_id()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;int cell_id;
+&nbsp;&nbsp;&nbsp;ret = telephony_network_get_cell_id(handle_list.handle[0], &amp;cell_id);
+&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Cell Id: %d", cell_id);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre></li>
+
+<li><p>To get the MNC:</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_network_get_mnc()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;char *mnc;
+&nbsp;&nbsp;&nbsp;ret = telephony_network_get_mnc(handle_list.handle[0], &amp;mnc);
+&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "mnc: %s", mnc);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(mnc);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre></li></ul>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="modem" name="modem" class="items-tit-h2">Getting Modem Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get IMEI information, use the Telephony <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">Modem</a> API:</p>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span> function, and free all returned variables (strings) once you are done with them.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_modem_get_imei()
+{
+&nbsp;&nbsp;&nbsp;telephony_error_e ret;
+&nbsp;&nbsp;&nbsp;char *imei;
+&nbsp;&nbsp;&nbsp;ret = telephony_modem_get_imei(handle_list.handle[0], &amp;imei);
+&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "imei: %s", imei);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(imei);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+       </div>
+               </li>           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/tutorials_n.htm b/org.tizen.tutorials/html/native/tutorials_n.htm
new file mode 100644 (file)
index 0000000..a774872
--- /dev/null
+++ b/org.tizen.tutorials/html/native/tutorials_n.htm
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Tutorials</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.guides/html/native/guides_n.htm">Tizen Native Guides</a></li> 
+                       <li><a href="../../../org.tizen.native.mobile.apireference/index.html">Native API Reference</a></li>
+               </ul>
+       </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">Native Tutorials</font></h1>
+
+<p>Tizen native tutorials teach you how to incorporate Tizen features into your application. The tutorials cover detailed code snippets to help you see how to write the required code in practice.</p>
+
+<p>Select the API domain you are interested in and see how you can implement its various functionalities into your application:</p>
+
+<ul>
+       <li><a href="app_framework/app_framework_tutorials_n.htm">Application Framework: Controlling Your Application</a>
+       <p>Demonstrate how you can configure application properties and manage application data.</p></li>
+       <li><a href="base/base_tutorials_n.htm">Base: Using Fundamental Libraries</a>
+       <p>Demonstrate how you can manage locale-sensitive information and use SQL databases in your application.</p></li>
+       <li><a href="content/content_tutorials_n.htm">Content: Getting and Handling Media Content</a>
+       <p>Demonstrate how you can manage and store a variety of data types, input and output data, and device content.</p></li>
+       <li><a href="context/context_tutorials_n.htm">Context: Detecting and Exploiting Contextual Information</a>
+       <p>Demonstrate how you can detect user activities and gestures.</p></li>
+       <li><a href="graphics/graphics_tutorials_n.htm">Graphics: Creating and Managing Graphics</a>
+       <p>Demonstrate how you can create and edit various kinds of images, shapes, text, and elements, and recognize specific elements from images and video.</p></li>
+       <li><a href="location/location_tutorials_n.htm">Location: Using Location Information and Service</a>
+       <p>Demonstrate how you can manage location data.</p></li>
+       <li><a href="messaging/messaging_tutorials_n.htm">Messaging: Sending SMS, MMS, Email, and Push Messages</a>
+       <p>Demonstrate how you can send and receive SMS, MMS, email, and push messages.</p></li>
+       <li><a href="multimedia/multimedia_tutorials_n.htm">Multimedia: Handling Audio, Video, Camera, and Images</a>
+       <p>Demonstrate how you can capture and play various media.</p></li>
+       <li><a href="network/network_tutorials_n.htm">Network: Managing Connections and Communication</a>
+       <p>Demonstrate how you can send data to networks and other applications, and receive data back from them.</p></li>
+       <li><a href="security/security_tutorials_n.htm">Security: Handling Keys and Cryptographic Operations</a>
+       <p>Demonstrate how you can increase the security of your application through cryptography and request control.</p></li>
+       <li><a href="social/social_tutorials_n.htm">Social: Managing Personal Data</a>
+       <p>Demonstrate how you can manage the user&#39;s personal data, such as contacts, calendars, and call history, on the device.</p></li>
+       <li><a href="system/system_tutorials_n.htm">System: Getting System Information and Managing Devices</a>
+       <p>Demonstrate how you can manage data related to or provided by the device.</p></li>
+       <li><a href="telephony/telephony_tutorials_n.htm">Telephony: Handling Phone Call, SIM Card, and Network Information</a>
+       <p>Demonstrates how you can retrieve call status, extract information stored on a SIM card, and get information about the current cellular network and telephony service.</p></li>
+       <li><a href="ui/ui_tutorials_n.htm">UI: Creating the Application UI</a>
+       <p>Demonstrate how you can create a visual outlook for your application to ensure the best possible user experience.</p></li>
+       <li><a href="uix/uix_tutorials_n.htm">UIX: Taking Advantage of UI Extensions</a>
+       <p>Demonstrate how you can recognize and synthesize speech.</p></li>    
+       <li><a href="web/web_tutorials_n.htm">Web: Managing Web Pages and Web Content</a>
+       <p>Demonstrate how you can create a simple web browser</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm
new file mode 100644 (file)
index 0000000..431380b
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Effect Types: Using Various Effect and Effect Types</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm">Animation and Effect Types Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Animation and Effect Types: Using Various Effect and Effect Types</h1>
+
+<p>The animation and effect tutorials demonstrate how to create and implement a variety of animation effects in Tizen mobile native applications:</p> 
+       <ul> 
+          <li><a href="ecore_effects_tutorial_n.htm">Ecore Animator: Creating Ecore Animations</a> <p>Demonstrates how you can create an animation by changing and manipulating the Evas object attributes.</p></li>
+          <li><a href="edje_effects_tutorial_n.htm">Edje Animation: Using the Edje Library to Create Animations</a> <p>Demonstrates how you can use the Edje library to create your own animations.</p></li>
+          <li><a href="elm_transit_tutorial_n.htm">Elementary Animations: Applying Transition Effects to an Evas Object</a> <p>Demonstrates how you can create animated transitions effects to an Evas object using ELM transit.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm
new file mode 100644 (file)
index 0000000..52e7f1b
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm
@@ -0,0 +1,232 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Framework: Managing the Application Framework</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#framework">Handling the Application Framework</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Application Framework: Managing the Application Framework</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage the application framework.</p> 
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the EFL API basics by learning about:</p>
+
+               <ul> 
+                       <li><a class="opensection" href="#framework">Handling the Application Framework</a> <p>Start the application and manage its interactions with the operating system.</p></li>
+               </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="framework" name="framework" class="items-tit-h2">Handling the Application Framework</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Appcore is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.</p>
+<p>An application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the appcore and starts it.</p>
+<p>The code below is the minimal application using appcore. It only builds and runs.</p>
+<pre class="prettyprint">
+// Add this include to be able to use the functions from appcore.
+#include &lt;app.h&gt;
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;// Create and ui_app_lifecycle_callback_s object and initialize its contents to 0
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;// Run the application
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, NULL);
+}
+</pre>
+
+<p>Appcore is based on callbacks. There are two classes of callbacks: those about the application&#39;s life-cycle and those about the system.</p>
+<p>The application&#39;s life-cycle callbacks are:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">create</span>: first initialization, comes after <span style="font-family: Courier New,Courier,monospace;">app_main()</span> has been called and initializes UI.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">control</span>: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: saves work, releases resources, and exits.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: sets the application&#39;s window not visible and switches to a mode which uses less resources.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: sets the application&#39;s window to be visible again.</li>
+</ul>
+
+<p>Then, system-related callbacks:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">low_memory</span>: the system is running low on memory, saves work, and releases resources; if this is not enough are freed, some applications will be killed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">low_battery</span>: the system is running low on battery (less than 5%), saves work and avoids battery-draining workloads.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">device_orientation</span>: the screen orientation changed between vertical and horizontal, orientation information is given to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">language_changed</span>: language of the system is changed and messages are translated.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">region_format_changed</span>: time zone has changed.</li>
+</ul>
+
+<p>A basic implementation is shown below:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+
+// Structure to store the data for application&#39;s logic; it is given
+// to each callback invoked through appcore
+typedef struct appdata {
+&nbsp;&nbsp;&nbsp;char *several;
+&nbsp;&nbsp;&nbsp;char *fields;
+} appdata_s;
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Hook to take necessary actions before main event loop starts; this
+&nbsp;&nbsp;&nbsp;// usually means initializing UI and application&#39;s data (the &quot;data&quot;
+&nbsp;&nbsp;&nbsp;// parameter to this function)
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+
+&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static void
+app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;// Handles the launch request, show the user the task requested through the
+&nbsp;&nbsp;&nbsp;// &quot;app_control&quot; parameter (detailed in the next section)
+}
+
+static void
+app_pause(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Takes necessary actions when application becomes invisible
+}
+
+static void
+app_resume(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Takes necessary actions when application becomes visible
+}
+
+static void
+app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Releases all resources
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (!ad) {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// If specific steps are needed:
+&nbsp;&nbsp;&nbsp;// destroy_gui(ad);
+}
+
+static void
+app_device_orientation(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Takes necessary actions when device orientation changes
+}
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;// Sets the callbacks for the application&#39;s logic; explanation on the
+&nbsp;&nbsp;&nbsp;// implementation below
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;// Note the &amp;ad below; this is how the struct is given to callbacks
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+
+<p> The last section of this tutorial describes app control. It is a mechanism through which an application receives additional information about why it was started and with which parameters.</p>
+<p>An application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control callback</span>. A definition for that callback is: </p>
+<pre class="prettyprint">app_control_cb(app_control_h app_control, void *user_data);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through functions from the SDK.</p>
+<p>The most interesting ones are:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: retrieves a string describing which operation the application was started for.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: retrieves the MIME type of the data (e.g. image/jpg).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: gets the string value associated with the given key.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: gets the string array associated with the given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with a key is an array).</li>
+</ul>
+<p>If other functions are needed, check the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header.</p>
+       </div>
+               </li>
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm
new file mode 100644 (file)
index 0000000..77c6f6d
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm
@@ -0,0 +1,312 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Using  Basic Interactions</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#button">Using Buttons</a></li>
+                       <li><a class="opensection" href="#simple_text">Using Simple Text</a></li>
+                       <li><a class="opensection" href="#simple_list">Using Simple Lists</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_widgets_n.htm">UI Widgets Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__elm__widget__group.html">Elementary Widgets API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Basic: Using  Basic Interactions</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial teaches the basics of widgets interactions. It builds upon the <a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a>.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Elementary Widgets API by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#button">Using Buttons</a>
+               <p>Use buttons in your application.</p></li>
+               <li><a class="opensection" href="#simple_text">Using Simple Text</a>
+               <p>Use simple text and text styles in your application.</p></li>
+               <li><a class="opensection" href="#simple_list">Using Simple Lists</a>
+               <p>Use different kinds of lists in your application.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="button" name="button" class="items-tit-h2">Using Buttons</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The basic application code is the same as in the <a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a>.</p>
+
+<h3>Button Styles </h3>
+<h4>Basic Text Button</h4>
+
+<p>To create a text-only button, use the following code.</p>
+<pre class="prettyprint">Evas_Object* button;
+
+button = elm_button_add(box);
+elm_object_text_set(button, &quot;Click me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+
+<h4>Basic Icon Button</h4>
+<p>Instead of a button with text, create a button with icon.</p>
+<pre class="prettyprint">Evas_Object* button2;
+Evas_Object* icon2;
+
+button2 = elm_button_add(box);
+icon2 = elm_icon_add(box);
+elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button2, &quot;icon&quot;, icon2);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+
+<h4>Icon and Text Button</h4>
+<p>Create buttons with both an icon and a label.</p>
+<pre class="prettyprint">Evas_Object* button3;
+Evas_Object* icon3;
+button3 = elm_button_add(box);
+icon3 = elm_icon_add(box);
+elm_image_file_set(icon, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button3, &quot;icon&quot;, icon3);
+elm_object_text_set(button3, &quot;Press me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+
+<h4>Disabled Button</h4>
+<p>To disable a button so that it is not in use, only shown.</p>
+<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
+</pre>
+
+<h3>Callbacks </h3>
+<p>The Elementary buttons respond to user interactions with several events.</p>
+
+<h4>Click Event</h4>
+<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
+<pre class="prettyprint">
+static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
+}
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
+</pre>
+
+<h4>Press/Unpress Events</h4>
+<p>The button may also respond to the press and unpress events instead of the whole click.</p>
+<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
+}
+static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
+}
+
+evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
+evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
+</pre>
+
+<h4>Repeated Events</h4>
+<p>The button may also receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, may be set. In this example, the initial timeout is set to one second, and the repeat interval to half a second.</p>
+<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char buf[16];
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
+}
+
+elm_button_autorepeat_set(button3, EINA_TRUE);
+elm_button_autorepeat_initial_timeout_set(button3, 1.0);
+elm_button_autorepeat_gap_timeout_set(button3, 0.5);
+evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="simple_text" name="simple_text" class="items-tit-h2">Using Simple Text</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<h3>Basic Text</h3>
+<p>To create a label object, use the following code.</p>
+<pre class="prettyprint">label = elm_label_add(ad-&gt;win);
+elm_object_text_set(label, &quot;My label&quot;);
+evas_object_show(label);
+</pre>
+
+<h3>Sliding Text</h3>
+<p>If your text is too long, set it to slide. The duration of the slide is set to five seconds in the following example. There are several styles available:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text stops at an edge, reverts to its initial position and slides again.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text moves backwards after stopping at the edge. In the example, it is set to bounce.</li>
+</ul>
+
+<pre class="prettyprint">Evas_Object* label;
+label = elm_label_add(-&gt;win);
+elm_object_text_set(label, &quot;This text is supposed to be really long.&quot;);
+elm_label_slide_set(label, EINA_TRUE);
+elm_label_slide_duration_set(label, 5.);
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+evas_object_show(label);
+</pre>
+
+<p>If needed, you can use the <span style="font-family: Courier New,Courier,monospace">slide,end</span> event to respond to the moment when the sliding text reaches its end.</p>
+
+<h3>Marker Text</h3>
+<p>A marker is a text that is centered and bold by default. As the default color is white, set the blue color in this example.</p>
+<pre class="prettyprint">elm_object_style_set(label, &quot;marker&quot;);
+evas_object_color_set(label, 0, 0, 255, 255);
+</pre>
+
+<h3>Styling the Text</h3>
+<p>You can apply basic styles to the text. For a bolded text, do as follows.</p>
+<pre class="prettyprint">elm_object_text_set(label, &quot;&lt;b&gt;This text is bold.&lt;/b&gt;&quot;);
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="simple_list" name="simple_list" class="items-tit-h2">Using Simple Lists</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<h3>Basic List</h3>
+<p>A list is a scrollable container, whose children are selected.</p>
+<pre class="prettyprint">Evas_Object* list;
+Evas_Object* icon;
+list = elm_list_add(ad-&gt;win);
+elm_list_item_append(list, &quot;Text item&quot;, NULL, NULL, NULL, NULL);
+icon = elm_icon_add(ad-&gt;win);
+elm_icon_standard_set(icon, &quot;chat&quot;);
+elm_list_item_append(list, &quot;Second item&quot;, icon, NULL, NULL, NULL);
+Evas_Object* button;
+button = elm_button_add();
+elm_object_text_set(button, &quot;Button&quot;);
+elm_list_item_append(list, &quot;Fourth item&quot;, NULL, button, NULL, NULL);
+elm_list_go(list);
+</pre>
+
+<p>Any Evas Object can be added as an icon, either at the beginning (third parameter) or the end (fourth parameter).</p>
+
+<h3>List Orientation</h3>
+<p>By default, a list is set vertically. This is how to display it horizontally.</p>
+<pre class="prettyprint">elm_list_horizontal_set(list, EINA_TRUE);
+</pre>
+
+<h3>List Mode</h3>
+<p>There are several modes for the list item dimensions.</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>: The list does not set any size measures to inform the container how to resize it. If the list is not created as a &quot;resize object&quot;, its dimensions are zeroed. The list respects the container&#39;s geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>: This is the default value. This list is the same as ELM_LIST_COMPRESS, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>: This list sets a minimum size measure on the list object, so that containers may respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>: Besides setting a minimum size on the transverse axis, as in <span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>, this list sets a minimum size on the longitudinal axis to reserve space for all its children to be visible at the same time. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
+</ul>
+<pre class="prettyprint">elm_list_mode_set(list, ELM_LIST_COMPRESS);
+</pre>
+
+<h3>Scroller Policy</h3>
+<p>Several effects are shown on a list.</p>
+<p>For example, the scroller is set to bounce at the end on either direction.</p>
+<pre class="prettyprint">elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+
+
+<p>This is how to control displaying scrollbars. The second argument is for the horizontal axis, the third one for the vertical axis.</p>
+<pre class="prettyprint">elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_ON);
+</pre>
+
+<p>As for the bounce preference, the second argument is for the horizontal axis, the third one for the vertical axis.</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> hides the scrollbar</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> shows the scrollbar</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> the scrollbar is  shown only when needed and stays hidden at other times</li>
+</ul>
+
+<h3>Events</h3>
+<p>A list responds to several events:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user clicks or presses an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The user scrolls the list to the top edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The user scrolls the list to the bottom edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The user scrolls the list to the left edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The user scrolls the list to the right edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item is pressed and highlighted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The press and highlight is removed on an item.</li>
+</ul>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e605b64
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm
@@ -0,0 +1,470 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Animator: Creating Ecore Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#setup">Setting Up the Application</a></li>
+                       <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a></li>
+                       <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a></li>
+                       <li><a class="opensection" href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
+                       <li><a class="opensection" href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#ecore_animation">Ecore Animator Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html">Ecore Animator API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Ecore Animator: Creating Ecore Animations</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Ecore Animator API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#setup">Setting Up the Application</a>
+               <p>Prepare the application for use.</p> </li>
+               <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a>
+               <p>Create rotation animation effects.</p> </li>
+               <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a>
+               <p>Create zoom animation effects.</p></li>
+               <li><a class="opensection" href="#3d_rotate">Creating a 3D Rotation Effect</a>
+               <p>Create 3D rotation effects.</p></li>
+               <li><a class="opensection" href="#drop_bounce">Creating Drop and Bounce Effects</a>
+               <p>Create drop and bounce effects.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="setup" name="setup" class="items-tit-h2">Setting Up the Application</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>In this part of the tutorial, we create a simple application that manipulates and animates an Evas object. We use a &quot;Basic UI Application&quot; as the basis for the application.</p>
+<p>First, we set up the widgets we are going to use in the application:</p>
+
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;// Main window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;// Application title
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+
+&nbsp;&nbsp;&nbsp;// Buttons
+&nbsp;&nbsp;&nbsp;Evas_Object *bt1;
+&nbsp;&nbsp;&nbsp;Evas_Object *bt2;
+&nbsp;&nbsp;&nbsp;Evas_Object *bt3;
+
+&nbsp;&nbsp;&nbsp;// Animation target
+&nbsp;&nbsp;&nbsp;Evas_Object *target;
+} appdata_s;
+</pre>
+
+<p>We then create the actual widgets in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
+
+<pre class="prettyprint">// Main 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)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;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);
+
+// Application title
+ad-&gt;label = elm_label_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;label, &quot;Ecore Animator Tutorial&quot;);
+evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+evas_object_show(ad-&gt;label);
+</pre>
+
+<p>Next, we create the animation target, which is an Evas object of type <span style="font-family: Courier New,Courier,monospace">Elm_Image</span>. We store the image in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. We use the same Tizen logo as in the EDC animation example (<span style="font-family: Courier New,Courier,monospace">res/images/tizen-logo.png</span>).</p>
+
+<pre class="prettyprint">// Animation target
+// Setting the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
+// Adding the image
+ad-&gt;target = elm_image_add(ad-&gt;win);
+// Setting the image path
+if (!elm_image_file_set(ad-&gt;target, buf, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
+evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+//Moving the image
+evas_object_move(ad-&gt;target, 130, 100);
+//Resizing the image
+evas_object_resize(ad-&gt;target, 200, 100);
+//Showing the image
+evas_object_show(ad-&gt;target);
+</pre>
+
+<p>All images are available in the <span style="font-family: Courier New,Courier,monospace">/opt/usr/apps/&lt;PACKAGE_NAME&gt;/res/images</span> folder of the application. The package name is defined at the begin of the application code:</p>
+
+<pre class="prettyprint">#if !defined(PACKAGE)
+#define PACKAGE &quot;org.tizen.ecoreanimator&quot;
+#endif
+</pre>
+
+<p>The image path is set by calling the <span style="font-family: Courier New,Courier,monospace">elm_image_file_set()</span> function. This function takes as arguments the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object and the path of the image file, built with the <span style="font-family: Courier New,Courier,monospace">snprintf()</span> function and stored in a buffer.</p>
+
+<pre class="prettyprint">// Setting the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
+// Adding the image
+ad-&gt;target = elm_image_add(ad-&gt;win);
+// Setting the image path
+if (!elm_image_file_set(ad-&gt;target, buf, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
+evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+
+<p>The remaining code moves and resizes the image:</p>
+
+<pre class="prettyprint">//Moving the image
+evas_object_move(ad-&gt;target, 130, 100);
+//Resizing the image
+evas_object_resize(ad-&gt;target, 200, 100);
+//Showing the image
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="rotate" name="rotate" class="items-tit-h2">Creating a Rotation Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>After the animation target is created, we can create the first button and the associated rotation animation:</p>
+
+<pre class="prettyprint">// Button 1
+ad-&gt;bt1 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt1, &quot;Rotate&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt1, 25, 0);
+evas_object_resize(ad-&gt;bt1, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt1, &quot;clicked&quot;, _btn_rotate_cb, ad);
+evas_object_show(ad-&gt;bt1);
+</pre>
+
+<p>We create the button for triggering the rotation effect. The button is placed and resized, and associated with the <span style="font-family: Courier New,Courier,monospace">_btn_rotate_cb()</span> callback function. This callback function calls the animation on the animation target.</p>
+
+<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_rotate, ad-&gt;target);
+}
+</pre>
+
+<p>In this callback function, we create an Ecore animator timeline using the <span style="font-family: Courier New,Courier,monospace">ecore_animator_timeline_add()</span> function. This function adds an animator that runs for a limited time: we run the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> animation callback function for 1 second on the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object.</p>
+
+<p>Next, we write the animation callback function that actually runs the animation. This callback is an <span style="font-family: Courier New,Courier,monospace">Ecore_Timeline_Cb</span> function, meaning it returns an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span> value and takes as arguments some <span style="font-family: Courier New,Courier,monospace">data</span> and the current position along the animation timeline (<span style="font-family: Courier New,Courier,monospace">pos</span>).</p>
+
+<p>To create the rotation animation, we use an Evas Map. The map handles the necessary map points and allows you to manipulate the target Evas object on the X, Y, and Z axes.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;// Get the animation target
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;// Declaration of an `Evas_Map`
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;// Variables to store the target size and position
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;// Getting the size and position of the target
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;// Creation of an `Evas_Map` of 4 points
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;// Populate source and destination map points to match exactly object.
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
+&nbsp;&nbsp;&nbsp;evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+&nbsp;&nbsp;&nbsp;// Setting the object to &quot;animate&quot; in the `Evas_Map`
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;// Starting the Animation
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;// Free used memory
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>In the animation callback function, we first declare the Evas Map. To implement the rotation, we need to set an X and Y center, so we create 4 integer variables to store the size and position of the target. This information is provided by the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function, which returns the X and Y coordinates and the weight and height of the target Evas object. Now we have all the required data to build the animation.</p>
+
+<p>We create an Evas Map consisting of four points, and we populate these points with the animation target:</p>
+
+<pre class="prettyprint">// Creation of an Evas_Map of 4 points
+m = evas_map_new(4);
+// Populate source and destination map points to match the object.
+evas_map_util_points_populate_from_object(m, obj);
+</pre>
+
+<p>Now we can define the rotation using the <span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span> function:</p>
+
+<pre class="prettyprint">// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
+evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+</pre>
+
+<p>The animation callback function will be called at several points along the timeline, which is why we multiply the rotation angle (360°) by the timeline position (<span style="font-family: Courier New,Courier,monospace">pos</span>) to get the actual animation angle. If we do not do this, we will never see the animation take place. We then join the target object to the map and run the animation: </p>
+
+<pre class="prettyprint">// Setting the object to &quot;animate&quot; in the Evas Map
+evas_object_map_set(obj, m);
+// Starting the Animation
+evas_object_map_enable_set(obj, EINA_TRUE);
+</pre>
+
+<p>Each call to the animation callback function will rotate the object (360 * timeline position) degrees.</p>
+
+<p>Finally, we free up the memory allocated to the Evas Map:</p>
+
+<pre class="prettyprint">// Free used memory
+evas_map_free(m);
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="zoom" name="zoom" class="items-tit-h2">Creating a Zoom Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The next animation is a zoom, for which we also use an Evas Map.</p>
+
+<p>First, we create the button in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+
+<pre class="prettyprint">// Button 2
+ad-&gt;bt2 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt2, &quot;Zoom&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt2, 315, 0);
+evas_object_resize(ad-&gt;bt2, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt2, &quot;clicked&quot;, _btn_zoom_cb, ad);
+evas_object_show(ad-&gt;bt2);
+</pre>
+
+<p>We then create the button callback function with a new timeline:</p>
+
+<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_zoom, ad-&gt;target);
+}
+</pre>
+
+<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> animation callback function, which is almost identical to the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> callback function, except that we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function to create the animation:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function takes the following arguments:</p>
+
+<ul class="ul">
+<li>The map to change</li>
+<li>The horizontal zoom factor</li>
+<li>The vertical zoom factor</li>
+<li>The horizontal position (X coordinate) of the zooming center</li>
+<li>The vertical position (Y coordinate) of the zooming center</li>
+</ul>
+
+<p>Here, we use a horizontal and vertical zoom factor of 2, and the X and Y coordinates of the target as the horizontal and vertical center coordinates.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> callback function is called at several points along the animation timeline, which is why we multiply the horizontal and vertical zoom factor values by the timeline position. Each call will zoom more than the previous one, thereby creating the animation effect.</p>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="3d_rotate" name="3d_rotate" class="items-tit-h2">Creating a 3D Rotation Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The last animation is a 3D rotation. For this one, we are going to rotate the Evas object on all three axes (X, Y, Z).</p>
+
+<p>First, we create the button and its callback function:</p>
+
+<pre class="prettyprint">// Button 3
+ad-&gt;bt3 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt3, &quot;3D&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt3, 170, 0);
+evas_object_resize(ad-&gt;bt3, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt3, &quot;clicked&quot;, _btn_3d_cb, ad);
+evas_object_show(ad-&gt;bt3);
+</pre>
+
+<pre class="prettyprint">static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_3d, ad-&gt;target);
+}
+</pre>
+
+<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> animation callback function, which is very similar to the rotate and zoom callback functions. To create the animation, we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function, which allows you to rotate any Evas object on all three axes.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_3d(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function takes the following arguments:</p>
+
+<ul class="ul">
+<li>The map to change</li>
+<li>The angle (0-360°) to rotate around the X axis</li>
+<li>The angle (0-360°) to rotate around the Y axis</li>
+<li>The angle (0-360°) to rotate around the Z axis</li>
+<li>The X coordinate of the rotation center</li>
+<li>The Y coordinate of the rotation center</li>
+<li>The Z coordinate of the rotation center</li>
+</ul>
+
+<p>Here, we rotate 360 degrees around each axis. The horizontal (X) rotation center is the X position of the target plus its width divided by 2. The vertical (Y) rotation center is the Y position of the target plus 60. The Z rotation center is 0.</p>
+
+<p>As with the rotation and zoom animations, we multiply the angles by the timeline position to gently rotate the target on each call to the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> callback function along the timeline.</p>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="drop_bounce" name="drop_bounce" class="items-tit-h2">Creating Drop and Bounce Effects</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To finish, we add drop and bounce effects to our buttons at application start. To do this, we create one timeline per button after creating the buttons in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_timeline_add(2, _do_drop, ad-&gt;bt1);
+ecore_animator_timeline_add(2.3, _do_drop, ad-&gt;bt2);
+ecore_animator_timeline_add(2.5, _do_drop, ad-&gt;bt3);
+</pre>
+
+<p>We call the same <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> animation callback function for each timeline. In this callback, instead of using an Evas Map, we simply change the position of the target using the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_drop(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+&nbsp;&nbsp;&nbsp;double frame = pos;
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>To get the bounce effect, we use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_pos_map()</span> function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as <span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and <span style="font-family: Courier New,Courier,monospace">BOUNCE</span>. This function takes the following arguments:</p>
+
+<ul class="ul">
+<li>The input position to map</li>
+<li>The mapping to use (<span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and so on)</li>
+<li>v1, which is the first parameter used by the mapping</li>
+<li>v2, which is the second parameter used by the mapping</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">ECORE_POS_MAP_BOUNCE</span> map we use starts at 0.0, then drops like a ball bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1. Here, we bounce 4 times with a decay factor of 2:</p>
+
+<pre class="prettyprint">frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+</pre>
+
+<p>This frame is used in the move function to create the animation. The value increases on each <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.</p>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm
new file mode 100644 (file)
index 0000000..1fe259f
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm
@@ -0,0 +1,408 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Animation: Using the Edje Library to Create Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#startup">Animating on Application Start-up</a>
+                       </li>
+                       <li><a class="opensection" href="#click">Animating Object on Click</a>
+                       </li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">                
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#edje_animation">Edje Animation Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Animation.html">Edje Animation API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Edje Animation: Using the Edje Library to Create Animations</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> can create pre-defined animations, but you can also use the Edje library to create your own animations.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Edje Animation API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#startup">Animating on Application Start-up</a>
+               <p>Run an animation on application start-up.</p></li>
+               <li><a class="opensection" href="#click">Animating Object on Click</a>
+               <p>Animate an object when clicking.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="startup" name="startup" class="items-tit-h2">Animating on Application Start-up</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>The goal of this tutorial is to create an animation target and buttons to start animations, all this in an EDC (Edje Data Collection) file.</p>
+<p>First create an application using Basic EDC UI Application. This model provides a simple application just like the one used in the previous chapter, but with one more element: an <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
+<p>Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title. In this example a Tizen logo is added to the window and the behavior of the window title is changed.</p>
+<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">res/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/&lt;yourapplicationname&gt;.png</span> into the Edje images directory <span style="font-family: Courier New,Courier,monospace">res/images</span>. Add then the image to the Edje images collection.</p>
+<pre class="prettyprint">images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;edceffects.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;tizen-logo.png&quot; COMP;
+}
+</pre>
+
+<p>Then add an Edje part using the small logo: this part has two states. This is the first important notion for animations. The <span style="font-family: Courier New,Courier,monospace">STATE</span> describes the appearance of a part: size, position, color, etc.</p>
+<p>In this example, the part has two states, default and down-state:</p>
+<pre class="prettyprint">// An image using the tizen logo
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&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;max: 63 63;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 63 63;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;small-logo.png&quot;; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;down-state&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.92;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.05 1.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>The logo part has the <span style="font-family: Courier New,Courier,monospace">IMAGE</span> type. The default state contains in the first description of the part sets:</p>
+<ul class="ul">
+<li>the maximum and minimum size using the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> statements</li>
+<li>the image to use in this <span style="font-family: Courier New,Courier,monospace">part</span></li>
+<li>the default position.</li>
+</ul>
+<p>The second state, down-state, inherits all of the default&#39;s attributes, and only changes the position to put the image at the bottom of the application window.</p>
+<p>These two states are the start and end states of the animation. To actually create the animation, add a <span style="font-family: Courier New,Courier,monospace">program</span> to the Edge <span style="font-family: Courier New,Courier,monospace">programs</span> collection.</p>
+<pre class="prettyprint">// Icon drop animation
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;down-state&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;transition: BOUNCE 2.5 0.0 5.0;
+}
+</pre><p>This program is named <span style="font-family: Courier New,Courier,monospace">animation,state1</span> and is started when the application receives the <span style="font-family: Courier New,Courier,monospace">load</span> signal immediately on startup. It runs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action so it changes the object state from default to down-state. The target of the program is the logo <span style="font-family: Courier New,Courier,monospace">part</span>.</p>
+<p>In order to switch from one state to another, it uses a <span style="font-family: Courier New,Courier,monospace">transition</span> of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with three parameters, the <span style="font-family: Courier New,Courier,monospace">FIXME</span>, the <span style="font-family: Courier New,Courier,monospace">FIXME</span>, and the duration which here is set to five seconds.</p>
+<p>This produces an falling and bouncing effect.</p>
+<p>Also add an animation for the window title to make it move from the left to the right with a bounce effect while growing the font size.</p>
+<p>Create a new state on the part called &quot;txt_title&quot; inside which both the font size and position are changed.</p>
+<pre class="prettyprint">part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+
+&nbsp;&nbsp;&nbsp;// The default State
+&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.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&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;size: 24;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// The &quot;Bigger&quot; state
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;Bigger&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.75 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&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;size: 28;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Create a program to animate this part on startup, just like the small Tizen logo.</p>
+<pre class="prettyprint">// Make the title bigger
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,bigtitle&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;Bigger&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 5.0;
+}
+</pre>
+<p>This program goes from the default state to the bigger state in five seconds with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> effect, automatically running on the application startup.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="click" name="click" class="items-tit-h2">Animating Object on Click</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>All the previous animations are automatic and do not have any relation with the user&#39;s actions. Next animate a part by clicking on another one. Make the title restore its default aspect when clicking on the small logo.</p>
+<p>The parts and the states are already defined. The animation goes back to the default state, there is no need to add any parts or states: only add a program which makes the transition when clicking on logo part.</p>
+<pre class="prettyprint">// Make the title go back to normal
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animation,normaltitle&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
+}
+</pre><p>This program starts when the application receives the signal <span style="font-family: Courier New,Courier,monospace">mouse,clicked,*</span> (any button of the mouse is clicked) from the part called logo, (<span style="font-family: Courier New,Courier,monospace">source</span>). It performs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action and sets the default state on the target <span style="font-family: Courier New,Courier,monospace">txt_file</span> part with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> transition.</p>
+<p>When clicking any mouse button on the small logo, the title goes back to its original state.</p>
+<h3>Rotating Parts</h3>
+<p>Next add two more buttons to the application and create programs to animate a target.</p>
+<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store Elementary widgets.</p>
+<p>First create the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, and then the <span style="font-family: Courier New,Courier,monospace">Elementary</span> widgets in the <span style="font-family: Courier New,Courier,monospace">.c</span> file.</p>
+<pre class="prettyprint">// Container for the rotate button
+part 
+{
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;name: &quot;btn/rotate&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;rel1.relative: 0.10 0.80;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.30 0.90;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>This part is called <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, it only has a <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> type and a default state with its position being on the bottom left of the screen.</p>
+<pre class="prettyprint">// Container for the grow button
+part 
+{
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;name: &quot;btn/grow&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;rel1.relative: 1.02 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 2.02 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>This second <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is very similar to the first one. It is placed relatively to <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, in order to remain next to it.</p>
+<p>Next create the actual widgets. This is done in the <span style="font-family: Courier New,Courier,monospace">.c</span> file and is very similar to what is done for the buttons in the first chapter.</p>
+<p>This code is added to the <span style="font-family: Courier New,Courier,monospace">create_base_ui</span> function.</p>
+<pre class="prettyprint">// Creation button in the app window
+ad-&gt;button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
+// Add the button to the edje layout container called &quot;btn/rotate&quot;
+elm_object_part_content_set(ad-&gt;layout, &quot;btn/rotate&quot;, ad-&gt;button);
+evas_object_show(ad-&gt;button);
+
+// Creation a up button in the app window
+ad-&gt;btn_up = elm_button_add(ad-&gt;win);
+// Add the button to the edje layout container called &quot;btn/grow&quot;
+elm_object_text_set(ad-&gt;btn_up, &quot;Grow&quot;);
+elm_object_part_content_set(ad-&gt;layout, &quot;btn/grow&quot;, ad-&gt;btn_up);
+evas_object_show(ad-&gt;btn_up);
+</pre><p>In the default Basic EDC UI Application, the Edje layout is loaded by default. Create two Elementary buttons and add them to the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> containers, without having to setup sizes or positions as this is done in the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> container.</p>
+<p>Note that the part name is very important because it is used to be merged the Elementary widget and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
+<p>When the buttons placed and set, create the animation target. it is done in the EDC file.</p>
+<p>Add the animation target part.</p>
+<p>The part initialization and the default <span style="font-family: Courier New,Courier,monospace">state</span>:</p>
+<pre class="prettyprint">// The animation target
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+
+&nbsp;&nbsp;&nbsp;// Default state
+&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 { normal: &quot;tizen-logo.png&quot;; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; /* red */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.3 0.3; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.7 0.4; }
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>This <span style="font-family: Courier New,Courier,monospace">part</span> is an image displaying a big Tizen logo, placed on the top of the screen more or less centered.</p>
+<p>Create a state to change the color and add the <span style="font-family: Courier New,Courier,monospace">map</span> statement.</p>
+<pre class="prettyprint">// The rotate state
+description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+
+&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Enable Map on the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Enable smooth rendering
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Enable perspective
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Apply rotations on the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.x: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.y: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.z: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;color: 0 255 0 255; /* green */
+}
+</pre><p>This part changes the color to green and defines the <span style="font-family: Courier New,Courier,monospace">map</span>. This statement makes rotations possible on an Edje <span style="font-family: Courier New,Courier,monospace">part</span>. Rotations are done around the x, y or z axes. In this example, the map is enabled and a 0&#176; rotation is applied around each axis.</p>
+<p>Add a state with a rotation around the z axis of 360&#176;.</p>
+<pre class="prettyprint">description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 1.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;map.rotation.z: 360;
+}
+</pre><p>This <span style="font-family: Courier New,Courier,monospace">state</span> inherits from the default state parameters and add a rotation around the z axis.</p>
+<p>Finally add a state to the other button animation grow. Change the size of the animation target and add an offset.</p>
+<pre class="prettyprint">// The grow state
+description {
+&nbsp;&nbsp;&nbsp;state: &quot;grow&quot; 0.0;
+&nbsp;&nbsp;&nbsp;color: 0 0 255 255; /* blue */
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.7 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>The last step is to create the programs to make all these states animate.</p>
+<p>To make the rotation animation smoother, create and chain several <span style="font-family: Courier New,Courier,monospace">programs</span> with different durations.</p>
+<p>First create the main one: it goes from the default state to the rotate 0.0 state in 0.2 seconds.</p>
+<p>Note that the states are all named the same way (rotate) but not with the same version. This version allows you to have more than one state with the same name, in fact the actual name of the state is the name plus the version.</p>
+<pre class="prettyprint">// Change the color of target to green
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,target&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 0.2;
+&nbsp;&nbsp;&nbsp;after: &quot;rotate,target,2&quot;;
+}
+</pre><p>The program starts when the <span style="font-family: Courier New,Courier,monospace">btn/rotate</span> part is clicked with any mouse button. When the animation ends, it calls the next one called <span style="font-family: Courier New,Courier,monospace">rotate,target,2</span>.</p>
+<pre class="prettyprint">// Rotate 360&#176;
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,target,2&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 0.7;
+&nbsp;&nbsp;&nbsp;after: &quot;rotate,end&quot;;
+}
+</pre><p>This program sets the part state to <span style="font-family: Courier New,Courier,monospace">rotate 1.0</span> in 0.7 seconds, and when done calls the next one <span style="font-family: Courier New,Courier,monospace">rotate,end</span>.</p>
+<pre class="prettyprint">// Go back to the normal.
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,end&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+}
+</pre><p><span style="font-family: Courier New,Courier,monospace">rotate,end</span> is the last program of the rotation effect: it sets the state to <span style="font-family: Courier New,Courier,monospace">rotate 0.0</span> very fast.</p>
+<p>The last program of this example is the grow effect, it switches from one state to another.</p>
+<pre class="prettyprint">// Grow the target and go back to normal state
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;grow,target&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;btn/grow&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;grow&quot; 1.0;
+&nbsp;&nbsp;&nbsp;after: &quot;go,default&quot;;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+}
+</pre><p>It starts when the <span style="font-family: Courier New,Courier,monospace">btn/grow</span> part is clicked, it goes from the current state to <span style="font-family: Courier New,Courier,monospace">grow 1.0</span> in one second. It then calls the <span style="font-family: Courier New,Courier,monospace">go,default</span> program. In this program, both size and color change during the transition.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">go,default</span> program sets the status back default for the animation target.</p>
+<pre class="prettyprint">// Go back to normal (default) state
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;go,default&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 1.0;
+}
+</pre>
+
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm
new file mode 100644 (file)
index 0000000..1feadf8
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm
@@ -0,0 +1,186 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Extension: Creating a Naviframe Window</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#create">Creating Objects</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Efl Extension: Creating a Naviframe Window</h1>
+  <div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can use the Efl Extension API to create an application with a window. The window contains a naviframe and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe.</p>
+  
+  <p>When the <strong>Menu</strong> key is pressed, a popup is created and an EFL Extension <strong>Back</strong> key event for this popup is registered. If the popup is shown and the <strong>Back</strong> key is pressed, the popup is removed. Otherwise, if the <strong>Back</strong> key is pressed and there is no popup, the application is hidden.</p>
+  
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the Efl Extension API basics by learning about:</p>
+<ul>
+       <li><a href="#create">Creating Objects</a>
+       <p>Create objects using the naviframe and window.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating Objects</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create objects:</p> 
+
+<ol>
+<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;efl_extension.h&gt;
+</pre></li>
+<li>Create objects using the window and naviframe:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+
+&nbsp;&nbsp;&nbsp;// Create window
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
+
+&nbsp;&nbsp;&nbsp;// Create naviframe
+&nbsp;&nbsp;&nbsp;Evas_Object *nf = NULL;
+&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(nf);
+
+&nbsp;&nbsp;&nbsp;// Content
+&nbsp;&nbsp;&nbsp;Evas_Object *label = NULL;
+&nbsp;&nbsp;&nbsp;label = elm_label_add(nf);
+&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;elm_naviframe_item_push(nf, &quot;Efl Extension usage&quot;, NULL, NULL, label, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show window
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register EFL Extension callbacks for the naviframe:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register EFL extension callbacks for Menu and Back key events
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
+}
+</pre>
+</li>
+
+<li>Create a popup and register EFL Extension <strong>Back</strong> key event callbacks for it:
+<pre class="prettyprint">
+static void
+_create_popup(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *parent = obj;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL, *content = NULL;
+&nbsp;&nbsp;&nbsp;popup = elm_popup_add(parent);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+&nbsp;&nbsp;&nbsp;elm_popup_orient_set(popup, ELM_POPUP_ORIENT_CENTER);
+
+&nbsp;&nbsp;&nbsp;// Popup content
+&nbsp;&nbsp;&nbsp;content = elm_label_add(parent);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(content, &quot;Press back key to remove popup.&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, content);
+
+&nbsp;&nbsp;&nbsp;// Register extension callback for the Back key event
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+}
+</pre>
+
+<p>To remove the popup when a <strong>Back</strong> key event occurs, use the <span style="font-family: Courier New,Courier,monospace;">eext_popup_back_cb</span> callback.</p>
+
+<p>The callback function for menu key callback:</p>
+<pre class="prettyprint">
+static void
+_nf_back_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
+
+&nbsp;&nbsp;&nbsp;// Hide window
+&nbsp;&nbsp;&nbsp;elm_win_lower(win);
+}
+</pre>
+</li>
+</ol>
+
+       </div>
+               </li>                   
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e650d0f
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm
@@ -0,0 +1,745 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Optimization: Optimizing Tizen Native Applications</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#edc">Optimizing EDC</a></li>
+                       <li><a class="opensection" href="#evas">Optimizing Evas</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                        <li><a href="../../../../org.tizen.gettingstarted/html/process/performance_n.htm">Optimizing Application Performance</a></li>
+                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>EFL Optimization: Optimizing Tizen Native Applications</h1>
+<div class="cont"><div class="static-cont">     
+
+<p>This tutorial demonstrates how you can optimize your Tizen native application.</p>
+
+  <h2>Warm-up</h2>
+  <p>Become familiar with the EFL API basics by learning about:</p>
+  <ul>
+<li><a href="#edc">Optimizing EDC</a>
+<p>Optimize the EDC code.</p></li>
+<li><a href="#evas">Optimizing Evas</a>
+<p>Optimize the Evas code.</p></li>
+  </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div> 
+ 
+       <ul class="devicespecifications">
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="edc" name="edc" class="items-tit-h2">Optimizing EDC</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To optimize EDC:</p>
+<ol>
+<li>Remove unnecessary parts.
+<p>When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;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;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;new&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;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 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;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.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;&nbsp;&nbsp;<strong>part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;old&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;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 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;color: 0 0 0 0;
+&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: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;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;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;new&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;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 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;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.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;&nbsp;&nbsp;}
+}
+</pre> </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+</li>
+
+<li>Use Text, if possible, instead of Textblock.
+<p>The following EDCs lead to the same result. However, use TEXT for the simple texts for high performance apart from using tags or multiple lines.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;styles 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=&quot;Sans&quot; font_size=30 text_class=entry 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color=#0088AA style=shadow,bottom 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadow_color=#00000080 valign=0.5 ellipsis=1.0 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wrap=none align=center&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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: TEXTBLOCK;
+&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;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;style: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &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;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;simple&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: SHADOW;
+&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;align: 0.5 0.5;
+&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;visible: 1;
+&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;size: 30;
+&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;text: &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;}
+}
+</pre> </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+</li>
+
+<li>Compress images and embed your images into EDC.
+<p>When you use a fixed image, it is more efficient to call an image within EDC. This save time in accessing the image data and is more suitable for the data size.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;<strong>images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;logo.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}</strong>
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;logo&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&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;logo.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1 1;
+&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;}
+}
+</pre>
+
+</li>
+
+<li>Use a SPACER part, if possible.
+<p>When you use a part (such as Padding) which is invisible but has a size, using Spacer is more efficient.
+Since Spacer is invisible, it does not have the visible and color options.</p>
+
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
+&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;<strong>color: 0 0 0 0;</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&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;align: 0.0 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;&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;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
+&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;<strong>color: 0 0 0 0;</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 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;&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;content&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 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
+&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;}
+}
+</pre> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
+&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.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&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;align: 0.0 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;&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;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
+&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.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 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;&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;content&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 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
+&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;}
+}
+</pre> </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+</li>
+
+<li>Use the image border feature.
+<p>When you use an image, you do not need to use a full size or larger size image. As you can see below, it is much more efficient to scale the image using a border option.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;test&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&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.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.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;}
+}
+</pre> </p> </td> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&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;&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;test&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&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.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>image.border: 5 5 5 5</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </p> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p style="text-align:center;"><img alt="Image before" src="../../images/image_before.png" /></p> </td> 
+     <td rowspan="1" colspan="1" class="middle"><p style="text-align:center;"><img alt="Image after" src="../../images/image_after.png" /></p> </td> 
+       </tr>
+</tbody>
+</table>
+
+</li>
+</ol>
+                       </div>
+               </li>   
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="evas" name="evas" class="items-tit-h2">Optimizing Evas</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To optimize Evas:</p>
+<ol>
+<li>Use a rectangle object instead of using a solid color image.
+<p>When you need a solid color object, it is better (more efficient) to use a rectangle object than the image.</p>
+<table>
+   <colgroup> 
+    <col width="100%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+image = elm_image_add(win);
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+elm_image_file_set(image, buf, NULL);
+evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, image);
+evas_object_show(image);
+</pre> </p> </td> 
+       </tr>
+    <tr> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+rect = evas_object_rectangle_add(evas_object_evas_get(win));
+evas_object_color_set(rect, 255, 255, 255, 255);
+evas_object_size_hint_weight_set(rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, rect);
+evas_object_show(rect);
+</pre> </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+</li>
+
+<li>Make an object invisible instead of setting alpha as 0.
+<p>To make an object invisible, it is more efficient to use <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> instead of changing the alpha value to 0.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+       <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+        <th>After</th>
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+static void
+_invisible_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;evas_object_color_set(obj, 0, 0, 0, 0);   
+}
+</pre> </p> </td>
+<td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+static void
+_invisible_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;evas_object_hide(obj);   
+}
+</pre> </p> </td>  
+       </tr>
+</tbody>
+</table>
+
+</li>
+
+<li>If you need maximum optimization, use <span style="font-family: Courier New,Courier,monospace">evas_object_image</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">elm_icon</span>.
+<table>
+   <colgroup> 
+    <col width="100%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+img = elm_image_add((parent);
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+elm_image_file_set(img, buf, NULL);
+evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(img);
+</pre> </p> </td> 
+       </tr>
+    <tr> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+img = evas_object_image_add(evas_object_evas_get(parent));
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+evas_object_image_file_set(img, buf, NULL);
+evas_object_image_filled_set(img, EINA_TRUE);
+evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(img);
+</pre> </p> </td> 
+       </tr>
+</tbody>
+</table>
+</li>
+
+<li>Set the parent correctly to avoid the elementary tree reconstruction.
+<p>Before creating an object, make sure that the relationship between parent and child is set correctly to avoid having to reconstruct later. </p>
+<table>
+   <colgroup> 
+    <col width="50%" />
+    <col width="50%" />        
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+         <th>After</th>
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+win = elm_win_add();
+
+scroller = elm_scroller_add(win);
+
+box = elm_box_add(win);
+
+button = elm_button_add(win);
+</pre> </p> </td> 
+<td rowspan="1" colspan="1"> <p> 
+<pre class="prettyprint">
+win = elm_win_add();
+
+scroller = elm_scroller_add(win);
+
+box = elm_box_add(scroller);
+
+button = elm_button_add(box);
+</pre> </p> </td> 
+       </tr>
+</tbody>
+</table>
+
+</li>
+</ol>
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm
new file mode 100644 (file)
index 0000000..b076193
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm
@@ -0,0 +1,694 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Using EFL Features for Designing the UI</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                 <li><a href="#basic">Learning EFL Basics</a></li>     
+                 <li><a href="#native">Using EFL in Tizen Native Applications</a></li>
+                 <li><a href="#layout">Using the Base Application Layout</a></li>
+                 <li><a href="#ClockSimple">Creating a Simple Clock View</a></li>
+                 <li><a href="#ClockComplex">Creating a Complex Clock View</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                         <li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>        
+                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>EFL: Using EFL Features for Designing the UI</h1>
+  <div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can use EFL to create your application UI. EFL is an open-source toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from data structures to widget sets. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
+  
+ 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the EFL API basics by learning about:</p>
+
+<ul>
+  <li><a href="#basic">Learning EFL Basics</a> 
+         <p>Learn the basic EFL characteristics and the EFL libraries supported in Tizen.</p></li>     
+  <li><a href="#native">Using EFL in Tizen Native Applications</a> 
+         <p>Start the Ecore main loop.</p> </li>
+  <li><a href="#layout">Using the Base Application Layout</a> 
+         <p>Use the base layout with EFL for your application.</p> </li>
+  <li><a href="#ClockSimple">Creating a Simple Clock View</a> 
+         <p>Create a simple clock view using a box, container widget, and label to create a basic layout.</p> </li>
+  <li><a href="#ClockComplex">Creating a Complex Clock View</a> 
+         <p>Create a complex clock view by organizing a basic layout using boxes.</p> </li>
+
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="basic" name="basic" class="items-tit-h2">Learning EFL Basics</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.</p>
+
+<p>Currently, five EFL libraries are publicly available to Tizen native applications. These libraries provide the following features, among others:</p>
+
+<ul class="ul">
+ <li>Data structures</li>
+ <li>Optimized rendering</li>
+ <li>Thread pool</li>
+ <li>Events and callbacks</li>
+ <li>Fd handlers</li>
+ <li>Timers and animators</li>
+ <li>Widgets</li>
+ <li>Layout scripts</li>
+</ul>
+
+<h3>EFL Characteristics</h3>
+
+<p>EFL is aimed at not only desktop computers but also touch-screen and embedded devices, making EFL applications portable to many different types of devices. Applications do not need to care about the types of devices and profiles they run on. Instead of changing the code, it is typically enough to simply configure the applications for different devices.</p>
+
+<p>The key characteristics of EFL include:</p>
+
+<ul class="ul">
+ <li><strong>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'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>Back-end engine support</strong>
+  <p>EFL supports several back-end engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows, and Mac OS. Applications do not need to deal with each back-end engine separately.</p></li>
+ <li><strong>GUI and logic separation</strong>
+  <p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
+ <li><strong>Themeable</strong>
+  <p>An EFL theme can be changed at runtime without restarting the application. Widgets are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of widgets to achieve a specific look and feel.</p></li>
+ <li><strong>Scalable</strong>
+  <p>EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.</p></li>
+ <li><strong>Animations</strong>
+  <p>EFL supports different types of animations. Evas supports Evas maps with low-level APIs for performing 2D, 2.5D, and 3D object transformations. Edje supports pre-defined transitions and wrapping of Evas maps. Elementary supports transit APIs for various types of animations, which can be combined.</p></li>
+ <li><strong>Hardware acceleration</strong>
+  <p>EFL supports OpenGL&reg; and OpenGL-ES acceleration.</p></li>
+</ul>
+       
+       
+       <h3 name="libraries" id="libraries">EFL Libraries</h3>
+
+<p class="figure">Figure: EFL libraries</p>
+<p style="text-align:center;"><img alt="EFL libraries" src="../../images/efl_libraries.png"/></p>
+
+<p>Tizen supports the following EFL libraries:</p>
+
+<ul class="ul">
+ <li><strong>Ecore</strong>
+  <p>A clean and tiny event loop library with many convenience modules supporting operating system abstraction and integration. Ecore runs a main loop that is a key feature for event-driven applications and the rest of EFL. The Ecore main loop runs infinitely (or until requested to quit) and handles all registered events, such as touch, mouse, key, timers, animators, idlers, and fd handlers. Ecore also provides modules for handling network connections, files, input methods, and so on. EFL assumes that you run an Ecore main loop at all times (except at application startup and shutdown) and use the main loop to handle all callbacks (unless otherwise documented). ELF also assumes that threads use the Ecore infrastructure to return the results of their work back to the main loop for implementation.</p></li>
+ <li><strong>Edje</strong>
+  <p>A complex graphical design and layout library. Edje supports a separation between layout and logic. Edje was designed as a theme layer for moving the look, feel, and animation of objects into separate data files loaded at runtime, as opposed to being defined in-code. Using a plain text <span style="font-family: Courier New,Courier,monospace">edc</span> file, you can describe your application's layout without writing a line of code.</p></li>
+ <li><strong>Eina</strong>
+  <p>A library for data types and other useful tools. Eina provides data types such as lists, in-line lists, arrays, in-line arrays, hash tables, compact lists, iterator functions, sparse matrices, red-black trees, string buffers, shared string tokens, rectangle regions, generic value storage, and data models. Eina also supports tools such as benchmarking infrastructure, converters, counters, error handlers, basic file handlers, lazy allocators, loggers, magic number handlers, memory pools, modules, rectangles, safety checks, and string handlers.</p></li>
+ <li><strong>Elementary</strong>
+  <p>A widget set library. Elementary is composed of several common UI widgets, such as buttons, check boxes, entries, lists, pop-ups, and windows. Some infrastructure is shipped with Elementary, such as scale configuration handling, finger-size configuration for touch UIs, theme handling, focus handling, accessibility, UI mirroring, and profile handling.</p></li>
+ <li><strong>Evas</strong>
+  <p>A highly optimized scene graph and rendering library. Evas is a stateful canvas scene graph in which you can place objects such as rectangles, lines, polygons, text, text blocks, images, and smart objects. Evas uses a scene graph to keep track of the state of all objects. You do not need to worry about objects repainting or keeping their states. You only need to modify them for the new state and let Evas take care of the rest. Evas supports anti-aliased text, smooth super and sub-sampled scaled images, alpha-blended objects, and more.</p></li>
+</ul>
+
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="native" name="native" class="items-tit-h2">Using EFL in Tizen Native Applications</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
+
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+
+After your application is running:
+
+<ol>
+ <li>Create a window, and organize your widgets inside the window.</li>
+ <li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations, timers for timeouts).</li>
+</ol>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="layout" name="layout" class="items-tit-h2">Using the Base Application Layout</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+
+<p>This section provides how to use base layout with EFL for your application. Also, you can get some idea of sample layouts for applications.</p>
+
+<h3>Using the Base Layout</h3>
+
+<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and widget hierarchy of the base layout:</p>
+
+<p class="figure">Figure: Base layout wireframe and widget hierarchy</p>
+<p style="text-align:center;"><img alt="Base layout wireframe and widget hierarchy" src="../../images/base_layout.png"/></p>
+
+<p>The widgets have the following roles:</p>
+
+<ul class="ul">
+ <li>Window (Elm_win): Every UI widget from Elementary is rendered in a Window.</li>
+ <li>Conformant (Elm_Conformant): The Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).</li>
+ <li>Naviframe (Elm_Naviframe): The Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the Naviframe's view area.</li>
+</ul>
+
+
+<h3>Sample Applications with the Base Layout</h3>
+
+<h4>Setting</h4>
+
+<p>The Setting application consists of a list to show as a menu. For organizing the application, create the application layout with a screen-size-list and place the layout into the Naviframe's view area.</p>
+
+<p class="figure">Figure: Setting UI and layout</p>
+<p style="text-align:center;"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
+
+<p>For more information, see the Setting sample application.</p>
+
+<h4>Application Store</h4>
+
+<p>For organizing the Application Store application, you need to add a scroller to the base layout, since the total height of the layout will be greater than the screen size, and you will therefore need to scroll the screen contents up and down. If the layout is larger than the screen, the scroller makes the view itself scrollable.</p>
+
+<p>You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.</p>
+
+<p class="figure">Figure: Application Store UI and layout</p>
+<p style="text-align:center;"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
+
+<p>For more information, see the Application Store sample application.</p>
+
+<h3>Sample Applications with a Custom Layout</h3>
+
+<h4>Calculator - No Naviframe</h4>
+
+<p>The Calculator is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the two reasons why you should use a Naviframe, you do not need to add a Naviframe to the Calculator.</p>
+
+<p>You can organize the application layout with container widgets. Container widgets are used for arranging widgets, both basic widgets and other container widgets.</p>
+
+<p class="figure">Figure: Calculator UI and layout</p>
+<p style="text-align:center;"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
+
+<p>For more information, see the Calculator sample application.</p>
+
+<h4>Email - Drawer</h4>
+
+<p>The Email application shows information using a list. The main view is the same as in the Setting application, consisting of a screen-size-list for displaying emails. However, the Email application has an additional feature: the Drawer, which is used for displaying the menu with a hierarchy.</p>
+
+<p>To develop the application as a Tizen native application, add a layout on the Conformant, and add a Naviframe to the layout. This layout has a content area for the Drawer and Naviframe, and its style name is "layout/drawer/panel". To use this layout, use the following code:</p>
+
+<pre class="prettyprint">
+layout = elm_layout_add(parent);
+elm_layout_theme_set(layout, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+</pre>
+
+<p>The style includes parts for locating the Drawer and the main view. In the Drawer area, you can add a list to indicate the menu. In the main view, you can add a Naviframe to organize the view of the layout.</p>
+
+<p class="figure">Figure: Email UI and layout</p>
+<p style="text-align:center;"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
+
+<p>For more information, see the Email sample application.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="ClockSimple" name="ClockSimple" class="items-tit-h2">Creating a Simple Clock View</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+<p>This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container widget, and label to create a basic layout. The application includes the following widgets:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager widget</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container widget for layouting other widgets</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic widget for showing text with a tag</li>
+</ul> 
+
+<p>The following figure illustrates the main view of the simple clock sample application and its wireframe structure.</p>
+  
+  <p class="figure">Figure: Simple clock screen</p>
+<p style="text-align:center;"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
+
+<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
+
+<pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;// Save the window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+} 
+appdata_s;
+</pre>
+
+<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
+
+<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
+
+<pre class="prettyprint">int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function to create a basic layout with a window, conformant and naviframe. This is the basic layout in the Tizen mobile environment.</p>
+  
+<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+/* Conformant */
+conform = elm_conformant_add(ad-&gt;win);
+elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, conform);
+evas_object_show(conform);
+
+/* Naviframe */
+nf = elm_naviframe_add(conform);
+elm_object_content_set(conform, nf);
+evas_object_show(nf);
+</pre>
+
+<p>After creating a basic layout, create the main layout for the application. In this sample, it contains a box with 3 labels. The labels show the time, city and date. To add the labels to the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function.</p>
+  
+<p>After adding the labels, you must set their text. You can set or decorate the text in the labels using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function. You can modify the text size (<span style="font-family: Courier New,Courier,monospace">font_size</span>), color (<span style="font-family: Courier New,Courier,monospace">color</span>), and thickness (<span style="font-family: Courier New,Courier,monospace">b</span>).</p>
+  
+  <pre class="prettyprint">
+// Add the box
+box = elm_box_add(nf);
+// Create a label
+label1 = elm_label_add(box);
+// Set text to the label with a tag
+elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
+// Add the label to the box
+elm_box_pack_end(box, label1);
+// Change label visibility
+evas_object_show(label1);
+
+// Repeat with other labels
+
+evas_object_show(box);
+</pre>
+
+<p>After creating the box with labels, set the box as a new view. You can also set the title of the application. These operations are handled by the naviframe using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function:</p>
+  
+  <pre class="prettyprint">elm_naviframe_item_push(nf, _(&quot;World Clock&quot;), NULL, NULL, box, &quot;basic&quot;);</pre>
+  
+<p>The parameters include the title, the name of the widget added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.</p>
+  
+  <p>The following figure illustrates the widget hierarchy of the application.</p>
+
+  <p class="figure">Figure: Simple clock widgets</p>
+<p style="text-align:center;"><img alt="Simple clock widgets" src="../../images/efl_simple_clock_tree.png" /></p>
+  
+<p>Set the HW key handler. The Tizen mobile environment supports the <strong>More</strong> and back keys, but only the back key is handled in this sample. </p> 
+<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+</pre> 
+
+<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
+<pre class="prettyprint">static void
+win_back_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="ClockComplex" name="ClockComplex" class="items-tit-h2">Creating a Complex Clock View</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ 
+<p>This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following widgets:</p>
+
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager widget</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container widget for layouting other widgets</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic widget for showing text with a tag</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List widget</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_button</span>: Simple push button</li>
+</ul> 
+  
+<p>The following figure illustrates the main view of the complex clock sample application and its wireframe structure.</p>
+  
+  <p class="figure">Figure: Complex clock screen</p>
+<p style="text-align:center;"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
+
+<h3>Basic GUI</h3> 
+
+<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
+
+<pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;// Save the window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+} 
+appdata_s;
+</pre>
+
+<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
+
+<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
+
+<pre class="prettyprint">int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>The base GUI of the application contains the following elements:</p>
+
+<ul class="ul">
+<li>Clock</li>
+<li>List</li>
+<li>Main layout with buttons</li>
+</ul>
+
+<h3>Clock</h3> 
+
+ <p>The clock element contains 3 labels. The labels are packed as a single box widget, which is part of the main layout.</p> 
+<pre class="prettyprint">static Evas_Object *
+create_clock(Evas_Object *nf)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *label1, *label2, *label3;
+
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
+
+&nbsp;&nbsp;&nbsp;label1 = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label1);
+&nbsp;&nbsp;&nbsp;evas_object_show(label1);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;return box;
+}
+</pre>
+
+<h3>List</h3> 
+
+<p>This element contains a list of cities. The widget used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p> 
+<pre class="prettyprint">static Evas_Object *
+create_list(Evas_Object *nf)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = NULL;
+&nbsp;&nbsp;&nbsp;int i, num_of_item;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;list = elm_genlist_add(nf);
+</pre> 
+  
+<p>To add items to the list, use the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> class. After adding a new class, set callback function to detect, when the item is rendered. </p> 
+<pre class="prettyprint">itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;2line.top.4&quot;;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = gl_text_get_cb;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = NULL;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
+</pre> 
+
+<p>In this application, all the list items are similar and use the same callback function (<span style="font-family: Courier New,Courier,monospace">gl_text_get_cb()</span>) for setting text, so only 1 item class is created:</p> 
+<pre class="prettyprint">static char*
+gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;item_data_s *id = data;
+&nbsp;&nbsp;&nbsp;char buf[1024];
+
+&nbsp;&nbsp;&nbsp;if (id-&gt;index == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text.main.left.top&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;07:26&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.top&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Cardiff&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.left.bottom&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Wen, Jan 1&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.bottom&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;wales&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre> 
+
+<p>Append items using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. In this application, 3 items are added:</p> 
+<pre class="prettyprint">num_of_item = 3;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; num_of_item; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(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;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;&nbsp;&nbsp;&nbsp;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;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;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;&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;id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = it;
+&nbsp;&nbsp;&nbsp;}
+</pre>
+ 
+ <h3>Main Layout with a Button</h3> 
+ 
+<p>In the main layout, the other layout elements are merged together and a button added. The following example describes handling the main layout:</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(conform);
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(conform, nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(nf);
+}
+</pre> 
+
+<p>The box widget is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p> 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre> 
+
+<p>The box contains the following elements:</p> 
+
+<ul class="ul">
+
+<li><p>The clock element contains 3 labels. The parameter for the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function is 0.1 meaning that the height of the clock box occupies 30% of the available area. </p> 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;clock = create_clock(nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, clock);
+</pre> 
+</li>
+
+<li><p>The list element is packed into the box. As the <span style="font-family: Courier New,Courier,monospace">genlist</span> elements does not have a determined size, its size depends on the <span style="font-family: Courier New,Courier,monospace">layout</span> parameter.</p> 
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(box);
+&nbsp;&nbsp;&nbsp;elm_layout_theme_set(layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;rect = create_list(nf);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, &quot;elm.swallow.content&quot;, rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, layout);
+</pre> 
+</li>
+
+<li><p>The button element has a callback function to detect, when the button is clicked.</p> 
+<pre class="prettyprint">button = elm_button_add(box);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, btn_clicked_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Terminate&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+</pre> 
+</li>
+</ul>
+
+<p>The following figure illustrates the widget hierarchy of the application.</p>
+
+  <p class="figure">Figure: Complex clock widgets</p>
+<p style="text-align:center;"><img alt="Complex clock widgets" src="../../images/efl_complex_clock_tree.png" /></p>
+
+<p>Add the main layout to the naviframe, and set the HW key handler:</p> 
+<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+</pre> 
+
+<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
+<pre class="prettyprint">static void
+win_back_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+</pre> 
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm
new file mode 100644 (file)
index 0000000..dde507c
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm
@@ -0,0 +1,174 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 UTIL: Adjusting the Notification Window Level</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing EFL Utility</a>
+                       </li>
+                       <li><a class="opensection" href="#create">Create a Notification Window and Setting a Notification Window Level</a>
+                       </li>
+                       <li><a class="opensection" href="#getting">Getting the Notification Window Level</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_util_n.htm">EFL UTIL Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>EFL UTIL: Adjusting the Notification Window Level</h1>
+  <div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can adjust the level of a notification window using the EFL UTIL API.</p>
+  
+  <h2>Warm-up</h2>
+  <p>Become familiar with the EFL UTIL API basics by learning about:</p>
+  
+  <ul>
+  <li><a href="#init">Initializing EFL Utility</a><p>Initialize the EFL Util for use.</p></li>
+  <li><a href="#create">Creating a Notification Window and Setting a Notification Window Level</a>
+  <p>Create a notification window and set the window level.</p></li>
+  <li><a href="#getting">Getting the Notification Window Level</a>
+  <p>Get the notification window level.</p></li>
+  </ul>
+       
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing EFL Utility</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>To use the EFL UTIL API, the following header file has to be included:</p>
+  <pre class="prettyprint">#include &lt;efl_util.h&gt;</pre> 
+  <p>If the window type is not notification type, the <span style="font-family: Courier New,Courier,monospace">efl_util_set_notification_window_level()</span> function returns an error.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating a Notification Window and Setting a Notification Window Level</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create a notification window and set the window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_set_notification_window_level()</span> function: </p> 
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+void create_win() 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Create notification window
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Set notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
+&nbsp;&nbsp;&nbsp;if (error != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="getting" name="getting" class="items-tit-h2">Getting the Notification Window Level</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To get the notification window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_get_notification_window_level()</span> function:</p>
+
+<pre class="prettyprint">void create_win() 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;efl_util_notification_level_e notification_level;
+&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Create notification window
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Get notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, &amp;notification_level);
+&nbsp;&nbsp;&nbsp;if (error == EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 1
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 2
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm
new file mode 100644 (file)
index 0000000..ee3f0ba
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm
@@ -0,0 +1,711 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Applying Transition Effects to an Evas Object</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#setup">Setting Up the Application</a>
+                       </li>
+                       <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a>
+                       </li>
+                       <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a>
+                       </li>
+                       <li><a class="opensection" href="#flip">Creating a Flip Effect</a>
+                       </li>
+                       <li><a class="opensection" href="#blend">Creating a Blend Transition</a>
+                       </li>
+                       <li><a class="opensection" href="#fade">Creating a Fade Effect</a>
+                       </li>
+                       <li><a class="opensection" href="#flip_y">Creating a Flip on y Axis</a>
+                       </li>
+                       <li><a class="opensection" href="#wipe">Creating a Wipe Effect</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">                
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#elm_transit">Elementary Animations Guide</a> </li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Elementary Animations: Applying Transition Effects to an Evas Object</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Transit API basics by learning about:</p>
+       <ul> 
+                       <li><a class="opensection" href="#setup">Setting Up the Application</a>
+                       <p>Prepare the application for use.</p></li>
+                       <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a>
+                       <p>Create a rotation effect in your application.</p></li>
+                       <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a>
+                       <p>Create a zoom effect in  your application.</p></li>
+                       <li><a class="opensection" href="#flip">Creating a Flip Effect</a>
+                       <p>Create a flip effect in your application.</p></li>
+                       <li><a class="opensection" href="#blend">Creating a Blend Transition</a>
+                       <p>Create a blend transition in your application.</p></li>
+                       <li><a class="opensection" href="#fade">Creating a Fade Effect</a>
+                       <p>Create a fade effect in your application.</p></li>
+                       <li><a class="opensection" href="#flip_y">Creating a Flip on y Axis</a>
+                       <p>Create a flip on y axis in your application.</p></li>
+                       <li><a class="opensection" href="#wipe">Creating a Wipe Effect</a>
+                       <p>Create a wipe effect in your application.</p></li>           
+                       <li><a href="transit_effect_tutorial_n.htm">Implementing Elementary Transit Effects</a> <p>Demonstrates how you can implement a variety of EFL animation effects.</p></li>
+       </ul>
+               
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="setup" name="setup" class="items-tit-h2">Setting Up the Application</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>First create a basic application like explained in the <a href="basic_tutorial_n.htm">Basic Tutorial</a>.</p>
+
+<p>When the application is ready, create Evas objects and animate them. In this example, one single object is animated with different type of animations.</p>
+
+<p>Create the structure of our application represented by a struct named <span style="font-family: Courier New,Courier,monospace">appdata</span></p>
+
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+&nbsp;&nbsp;&nbsp;Evas_Object *buttonbck;
+&nbsp;&nbsp;&nbsp;Evas_Object *hbox;
+&nbsp;&nbsp;&nbsp;Evas_Object *left_vbox;
+&nbsp;&nbsp;&nbsp;Evas_Object *center_vbox;
+&nbsp;&nbsp;&nbsp;Evas_Object *right_vbox;
+&nbsp;&nbsp;&nbsp;float rt_angle, zto, zfrom;
+} appdata_s;
+</pre>
+
+<p>This structure holds the main widgets of the application:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">win</span>: the main window</li>
+<li><span style="font-family: Courier New,Courier,monospace">label</span>: the title label</li>
+<li><span style="font-family: Courier New,Courier,monospace">button</span>: a button object, the target of the animations</li>
+<li><span style="font-family: Courier New,Courier,monospace">buttonbck</span>: a button representing the back of the target button</li>
+<li><span style="font-family: Courier New,Courier,monospace">left_vbox</span>: a vertical box to place the first buttons column</li>
+<li><span style="font-family: Courier New,Courier,monospace">center_vbox</span>: a vertical box to store the second buttons column</li>
+<li><span style="font-family: Courier New,Courier,monospace">right_vbox</span>: a vertical box to store the last buttons column</li>
+<li><span style="font-family: Courier New,Courier,monospace">hbox</span>: a horizontal box to store the vertical boxes</li>
+<li><span style="font-family: Courier New,Courier,monospace">rt_angle</span>, <span style="font-family: Courier New,Courier,monospace">zto</span>, <span style="font-family: Courier New,Courier,monospace">zfrom</span>: these variables are used to store values for animations</li>
+</ul>
+
+<p>Place the widgets on the application&#39;s canvas. To make things easier, the widget creation is split into two functions.</p>
+
+<p>The first function creates widgets on the main window, and the second in the boxes.</p>
+
+<pre class="prettyprint">create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;ad-&gt;rt_angle = 360.0;
+&nbsp;&nbsp;&nbsp;ad-&gt;zfrom = 1.0;
+&nbsp;&nbsp;&nbsp;ad-&gt;zto = 2.0;
+
+&nbsp;&nbsp;&nbsp;/* Window */
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&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;&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, (const int *)(&amp;rots), 4);
+&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;/* Label*/
+&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+
+&nbsp;&nbsp;&nbsp;/* Show window after base gui is set up */
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Creation a button in the app window
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Moving the button to x=50 y=100
+&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;button, 50, 100);
+
+&nbsp;&nbsp;&nbsp;// Resizing the button 100x50
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;button, 200, 50);
+
+&nbsp;&nbsp;&nbsp;// Showing the button
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
+
+&nbsp;&nbsp;&nbsp;// Creation a back button in the app window
+&nbsp;&nbsp;&nbsp;ad-&gt;buttonbck = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;buttonbck, &quot;Button back&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;buttonbck, 50, 100);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;buttonbck, 200, 50);
+
+&nbsp;&nbsp;&nbsp;_create_btn_box(ad);
+
+} //End of create_base_gui
+</pre>
+
+<p>This function takes <span style="font-family: Courier New,Courier,monospace">appdata_s *ad</span> as its only parameter. This function is called by the creation callback <span style="font-family: Courier New,Courier,monospace">app_create</span> of the Tizen application (<span style="font-family: Courier New,Courier,monospace">event_callback.create = app_create;</span>) in the <span style="font-family: Courier New,Courier,monospace">main</span> function of the application.</p>
+
+<p>Set up the needed values like the rotation angle, the original zoom value (<span style="font-family: Courier New,Courier,monospace">zfrom</span>), and the destination zoom value (<span style="font-family: Courier New,Courier,monospace">zto</span>).</p>
+
+<pre class="prettyprint">ad-&gt;rt_angle = 360.0;
+ad-&gt;zfrom = 1.0;
+ad-&gt;zto = 2.0;
+</pre>
+
+<p>Create the main window with a title and add the <span style="font-family: Courier New,Courier,monospace">delete</span> callback:</p>
+
+<pre class="prettyprint">/* 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)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;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);
+
+/* Label*/
+ad-&gt;label = elm_label_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
+evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+evas_object_show(ad-&gt;label);
+
+/* Show window after base gui is set up */
+evas_object_show(ad-&gt;win);
+
+ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+</pre>
+
+<p>Next create the animation target button and the back button. Call the button box creation function with the application data as its parameter.</p>
+
+<pre class="prettyprint">_create_btn_box(ad);
+</pre>
+
+<p>Add a set of buttons to this box that starts animations on the animation target.</p>
+
+<p>Create the structure of the buttons box with three columns (vertical boxes) and one horizontal for the main container.</p>
+
+<pre class="prettyprint">// Creation of the main container box
+ad-&gt;hbox = elm_box_add(ad-&gt;win);
+elm_box_horizontal_set(ad-&gt;hbox, EINA_TRUE);
+elm_box_homogeneous_set(ad-&gt;hbox, EINA_TRUE);
+evas_object_move(ad-&gt;hbox, 10, 500);
+evas_object_show(ad-&gt;hbox);
+
+// Creation of the first column
+ad-&gt;left_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;left_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;left_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;left_vbox);
+elm_box_pack_start(ad-&gt;hbox, ad-&gt;left_vbox);
+
+// Creation of the second column
+ad-&gt;center_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;center_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;center_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;center_vbox);
+elm_box_pack_end(ad-&gt;hbox, ad-&gt;center_vbox);
+
+// Creation of the last column
+ad-&gt;right_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;right_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;right_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;right_vbox);
+elm_box_pack_end(ad-&gt;hbox, ad-&gt;right_vbox);
+</pre>
+
+<p>Then create the first action button for the resize effect.</p>
+
+<pre class="prettyprint">// Button creation
+btn_resize = elm_button_add(ad-&gt;win);
+// Setting the button text
+elm_object_text_set(btn_resize, &quot;Resize&quot;);
+// Setting the hint weight policy
+evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
+// Showing the button
+evas_object_show(btn_resize);
+// Setting the &quot;clicked&quot; callback
+evas_object_smart_callback_add(btn_resize, &quot;clicked&quot;, _btn_resize_cb, ad);
+// Adding the button to the first column
+elm_box_pack_end(ad-&gt;left_vbox, btn_resize);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> defines the callback function that is to be called when the button is clicked. In this example, set a <span style="font-family: Courier New,Courier,monospace">_btn_resize_cb</span> function and pass the application data <span style="font-family: Courier New,Courier,monospace">ad</span> to this callback function.</p>
+
+<p>The callback by itself only sets a new text for the animation target button, and calls a function which will actually animate the button.</p>
+
+<pre class="prettyprint">static void _btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
+&nbsp;&nbsp;&nbsp;//evas_object_resize(ad-&gt;button, 100, 50);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Resize&quot;);
+&nbsp;&nbsp;&nbsp;_resize_effect(ad-&gt;button);
+
+}
+</pre>
+
+<p>This function is an <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> and thus needs to have its specific prototype: it does not return anything and receives three parameters:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">data</span>: data to be passed</li>
+<li><span style="font-family: Courier New,Courier,monospace">btn</span>: the object the callback is being called about</li>
+<li><span style="font-family: Courier New,Courier,monospace">ev</span>: the actual event, seldom used</li>
+</ul>
+
+<p>In this case, use <span style="font-family: Courier New,Courier,monospace">data</span> to pass the application data to the callback. However, the parameter&#39;s type is <span style="font-family: Courier New,Courier,monospace">void *</span> and not <span style="font-family: Courier New,Courier,monospace">appdata_s *</span>. Initialize a variable of the correct type with the pointer.</p>
+<pre class="prettyprint">appdata_s *ad = data;
+</pre>
+
+<p>Then use the application data in the callback function. At this point create the animation directly in the callback function, but it is more straightforward to encapsulate the animation process into a dedicated function. <span style="font-family: Courier New,Courier,monospace">_resize_effect</span> implements the animation code:</p>
+
+<pre class="prettyprint">static void _resize_effect(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp;// Elementary Transition declaration and creation
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+
+&nbsp;&nbsp;&nbsp;// Adding the transition target object
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;// Setting the resize effect
+&nbsp;&nbsp;&nbsp;elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+
+&nbsp;&nbsp;&nbsp;// Setting the transition duration
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+
+&nbsp;&nbsp;&nbsp;// Starting the transition
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+<p>Create an <span style="font-family: Courier New,Courier,monospace">Elm_Transit *</span> object representing the transition.</p>
+
+<pre class="prettyprint">Elm_Transit *trans = elm_transit_add();
+</pre>
+
+<p>Then add the target object to the transition</p>
+
+<pre class="prettyprint">elm_transit_object_add(trans, obj);
+</pre>
+
+<p>Add a resizing transition to the object with the origin and destination width and height in pixels.</p>
+
+<pre class="prettyprint">elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+</pre>
+<p>100 and 50 are respectively the object&#39;s width and height when the effect begins, whereas 300 and 150 are respectively the object&#39;s width and height when the effect ends: the object grows from 100×50 to 300×150.</p>
+
+<p>After that set the transition duration with <span style="font-family: Courier New,Courier,monospace">elm_transit_duration_set</span>.</p>
+<pre class="prettyprint">elm_transit_duration_set(trans, 3.0);
+</pre>
+
+<p>The animation lasts three seconds. The duration parameter is a double.</p>
+
+<p>Now start the animation by calling <span style="font-family: Courier New,Courier,monospace">elm_transit_go</span> with the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> object.</p>
+
+<pre class="prettyprint">elm_transit_go(trans);
+</pre>
+
+<p>When the resize button is clicked, the animation target button grows.</p>
+
+<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="rotate" name="rotate" class="items-tit-h2">Creating a Rotation Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This effect rotates the animation target button with an angle of 360&deg;. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad-&gt;rt_angle</span>.</p>
+
+<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
+
+<pre class="prettyprint">// The rotation button
+btn_rotate = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_rotate, &quot;Rotate&quot;);
+evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_rotate);
+evas_object_smart_callback_add(btn_rotate, &quot;clicked&quot;, _btn_rotate_cb, ad);
+elm_box_pack_end(ad-&gt;center_vbox, btn_rotate);
+</pre>
+
+<p>In the rotate button callback, call the effect function with the target button as first parameter and the rotation angle as the second one.</p>
+
+<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
+&nbsp;&nbsp;&nbsp;_rotation_effect(ad-&gt;button, ad-&gt;rt_angle);
+}
+</pre>
+
+<p>The animation function rotates the animation target by adding a rotation effect with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_rotation_add</span>. This function takes three parameters:</p>
+
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">Elm_Transit</span></li>
+<li>the rotation position at which the effect begins</li>
+<li>the rotation position at which the effect ends</li>
+</ul>
+
+<p>Rotation starts at 0&deg; to finish at 360&deg;. The animation lasts two seconds.</p>
+
+<pre class="prettyprint">static void _rotation_effect(Evas_Object *obj, float angle)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;// rotates the object from its original angle to given degrees to the right
+&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(trans, 0.0, angle);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="zoom" name="zoom" class="items-tit-h2">Creating a Zoom Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The zoom effect zooms on the animation target to make it twice bigger. Store the source rate and the destination rate in the application data using <span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>.</p>
+<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
+
+<pre class="prettyprint">// The zoom button
+btn_zoom = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_zoom, &quot;Zoom&quot;);
+evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_zoom);
+evas_object_smart_callback_add(btn_zoom, &quot;clicked&quot;, _btn_zoom_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_zoom);
+</pre>
+
+<p>Then add a callback function in order to perform the animation.</p>
+
+<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
+&nbsp;&nbsp;&nbsp;//evas_object_resize(ad-&gt;button, 100, 50);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Zoom&quot;);
+&nbsp;&nbsp;&nbsp;_zoom_effect(ad-&gt;button, ad-&gt;zfrom, ad-&gt;zto);
+}
+</pre>
+
+<p>To create the zoom effect, use <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_zoom_add</span> with the start rate and the destination rate stored in application data (<span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>)</p>
+
+<pre class="prettyprint">static void _zoom_effect(Evas_Object *obj, float from, float to)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(trans, from, to);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="flip" name="flip" class="items-tit-h2">Creating a Flip Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This effect is applied to a pair of objects, in the order they are added, to the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> transition. In this example, add the animation target button and the button called buttonbck which represents the back of the target button.</p>
+
+<p>Create the action button for the flip effect:</p>
+
+<pre class="prettyprint">// The flip button
+btn_flip = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_flip, &quot;Flip x&quot;);
+evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip);
+evas_object_smart_callback_add(btn_flip, &quot;clicked&quot;, _btn_flip_cb, ad);
+elm_box_pack_end(ad-&gt;left_vbox, btn_flip);
+</pre>
+
+<p>The corresponding callback to create and start the animation with the two objects (target button and back button) to animate is like follows.</p>
+
+<pre class="prettyprint">static void _btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip&quot;);
+&nbsp;&nbsp;&nbsp;_flip_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+
+<p>Create the function which runs the animation. This flip animation is created using <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_flip_add</span>. The second parameter is the axis of the flip: in this example it is the X axis, so the button flips down to top to show the back button. The last parameter is the flip direction: <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> means clockwise.</p>
+
+<pre class="prettyprint">static void _flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="blend" name="blend" class="items-tit-h2">Creating a Blend Transition</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The blend effect also works the same way as the flip, but without the axes or direction information. Use the back button here as well. To create the blend effect button:</p>
+
+<pre class="prettyprint">// The blend button
+btn_blend = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_blend, &quot;Blend&quot;);
+evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_blend);
+evas_object_smart_callback_add(btn_blend, &quot;clicked&quot;, _btn_blend_cb, ad);
+elm_box_pack_end(ad-&gt;center_vbox, btn_blend);
+</pre>
+
+<p>The blend transition callback is:</p>
+
+<pre class="prettyprint">static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Blend&quot;);
+&nbsp;&nbsp;&nbsp;_blend_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+
+<p>Create and start the blend animation. This animation is created by adding it to and <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>. Add two objects, as for the flip.</p>
+
+<pre class="prettyprint">static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_blend_add(trans);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="fade" name="fade" class="items-tit-h2">Creating a Fade Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The fade effect works exactly the same way as the blend effect. First create the button:</p>
+
+<pre class="prettyprint">// The fade button
+btn_fade = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_fade, &quot;Fade&quot;);
+evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_fade);
+evas_object_smart_callback_add(btn_fade, &quot;clicked&quot;, _btn_fade_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_fade);
+</pre>
+
+<p>Then add the button&#39;s callback:</p>
+
+<pre class="prettyprint">static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Fade&quot;);
+&nbsp;&nbsp;&nbsp;_fade_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+
+<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_fade_add</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>.</p>
+
+<pre class="prettyprint">static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_fade_add(trans);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="flip_y" name="flip_y" class="items-tit-h2">Creating a Flip on y Axis</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This is same as the flip transition, but on y axis. To create a flip on y axis:</p>
+
+<pre class="prettyprint">// The flip y button
+btn_flip_y = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_flip_y, &quot;Flip y&quot;);
+evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip_y);
+evas_object_smart_callback_add(btn_flip_y, &quot;clicked&quot;, _btn_flip_y_cb, ad);
+elm_box_pack_end(ad-&gt;left_vbox, btn_flip_y);
+
+static void _btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip 2&quot;);
+&nbsp;&nbsp;&nbsp;_flip_y_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+
+static void _flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="wipe" name="wipe" class="items-tit-h2">Creating a Wipe Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The wipe transition is applied on an Evas object considering the wipe type and the direction. Use <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> to hide the button, and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> to do it from left to right.</p>
+
+<p>The wipe animation button is as follows:</p>
+
+<pre class="prettyprint">// The wipe button
+btn_wipe = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_wipe, &quot;Wipe&quot;);
+evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_wipe);
+evas_object_smart_callback_add(btn_wipe, &quot;clicked&quot;, _btn_wipe_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_wipe);
+</pre>
+
+<p>The wipe button callback looks like:</p>
+
+<pre class="prettyprint">static void _btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
+&nbsp;&nbsp;&nbsp;//evas_object_resize(ad-&gt;button, 100, 50);
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Wipe&quot;);
+&nbsp;&nbsp;&nbsp;_wipe_effect(ad-&gt;button);
+}
+</pre>
+
+<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_wipe_add</span> with <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> as the second parameter to hide the button and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> as last parameter to set the direction (left to right).</p>
+
+<pre class="prettyprint">static void _wipe_effect(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp; Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp; trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp; elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp; elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+&nbsp;&nbsp;&nbsp; elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp; elm_transit_go(trans);
+}
+</pre>
+       </div>
+               </li>   
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm
new file mode 100644 (file)
index 0000000..7e9f7ec
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm
@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Evas: Creating and Managing Image Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage" class="opensection">Managing Images</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/ui/evas_n.htm">Evas Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Evas: Creating and Managing Image Objects</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can create and manage image objects.</p>
+ 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Evas API basics by learning about:</p>
+<ul>
+<li><a href="#manage">Managing Images</a>
+<p>Manage image objects, for example, by scaling and improving their performance.</p></li>
+
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="manage" name="manage" class="items-tit-h2">Managing Images</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To manage image objects in Evas:</p>
+
+<ul class="ul">
+<li>Limit visibility.
+<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
+
+<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>
+<p>Define how to fill the image object area with the given pixel data. You can use a sub-region of the original image, or have it tiled repeatedly on the image object.</p>
+
+<pre class="prettyprint">
+img = evas_object_image_add(canvas);
+evas_object_image_file_set(img, &quot;path/to/img&quot;, NULL);
+evas_object_image_fill_set(img, 0, 0, w, h);
+</pre>
+
+
+<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function helper that you can use instead of the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function:</p>
+
+<pre class="prettyprint">
+evas_object_image_filled_set(img, EINA_TRUE);
+</pre>
+</li>
+
+<li>Scale image objects.
+<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function.</p>
+<p>Control the aspect ratio of an image for different sizes with functions to load images scaled up or down in memory.</p>
+
+<p>Evas has a scale cache, which caches scaled versions of images used often. You can also have Evas rescale the images smoothly, however, that is computationally expensive.</p>
+</li>
+
+<li>Give performance hints.
+<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>
+
+<p>Evas addresses this issue with image preloading:</p>
+
+<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_preload(prev, EINA_TRUE);
+next = evas_object_image_filled_add(canvas);
+evas_object_image_file_set(next, &quot;/path/to/next&quot;, NULL);
+evas_object_image_preload(next, EINA_TRUE);
+</pre>
+
+<p>If you are loading an image which is too big, set its loading size smaller.</p>
+
+<p>Load a scaled down version of the image in the memory if that is the size you are displaying (this can speed up the loading considerably):</p>
+<pre class="prettyprint">evas_object_image_load_scale_down_set(img, zoom);</pre>
+<p>If you know you are showing a sub-set of the image pixels, you can avoid loading the complementary data:</p>
+<pre class="prettyprint">evas_object_image_load_region_set(img, x, y, w, h);
+</pre>
+</li>
+
+<li>Specify borders.
+<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 class="figure">Figure: Borders in Evas</p> 
+<p style="text-align:center;"><img alt="Borders in Evas" src="../../images/9patch.png" /></p> 
+
+</li>
+</ul>
+
+                       </div>
+               </li>
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm
new file mode 100644 (file)
index 0000000..22607e8
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Effect: Using Animations and Effects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Event and Effect: Using Animations and Effects</h1>
+
+<p>The event and effect tutorials demonstrate how to create and implement a variety of animation effects and use gestures in Tizen mobile native applications:</p> 
+       <ul> 
+          <li><a href="animation_event_types_tutorials_n.htm">Animation and Effect Types: Using Various Effect and Effect Types</a> <p>Demonstrates how you can create different kinds of animations and effects.</p></li>
+          <li><a href="gesture_detector_tutorial_n.htm">Gesture Detector: Implementing Gestures Provided by the EFL Library</a> <p>Demonstrates how you can implement gestures provided by the EFL library.</p></li>
+          <li><a href="multipoint_touch_tutorial_n.htm">Multi-point Touch: Tracking Touch Events</a> <p>Demonstrates how you can paint on a canvas using touch gestures, and track touch events.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm
new file mode 100644 (file)
index 0000000..7a9d4e0
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm
@@ -0,0 +1,332 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Font Setting: Using Various Fonts in the Application</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#widget">Setting the Font for a Widget</a></li>
+                       <li><a class="opensection" href="#edc">Setting the Font Using EDC</a></li>
+                       <li><a class="opensection" href="#edje">Using the Edje Text Class</a></li>
+                       <li><a class="opensection" href="#own">Setting Your Own Font</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/font_setting_n.htm">Font Setting Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts API</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text Class API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Font Setting: Using Various Fonts in the Application</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can use different methods to set and change the font style in your application. You can change the font to another system-default font or one of your own fonts.</p>
+
+<h2>Warm-up</h2> 
+<p>Become familiar with the Elementary Fonts and Edje Text Class API basics by learning about:</p>
+       <ul> 
+               <li><a class="opensection" href="#widget">Setting the Font for a Widget</a>
+               <p>Set the font of a widget.</p></li>
+               <li><a class="opensection" href="#edc">Setting the Font Using EDC</a>
+               <p>Create a layout with text using the EDC.</p></li>
+               <li><a class="opensection" href="#edje">Using the Edje Text Class</a>
+               <p>Change the font of several text parts simultaneously.</p></li>
+               <li><a class="opensection" href="#own">Setting Your Own Font</a>
+               <p>Change the font of several text parts simultaneously.</p></li>
+       </ul>
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 name="widget" id="widget" class="items-tit-h2">Setting the Font for a Widget</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>You can use the <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts</a> API to set the font for an application.</p>
+<p>To set a font for a widget:</p>
+<ul class="ul">
+<li>Set the font for a common widget:
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">You can set the font for a textblock in the code, but not in EDC (Edje Data Collection). If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in this way because the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> type does not support markup tags.</td> 
+    </tr> 
+   </tbody>
+  </table>
+
+<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);
+</pre>
+</li>
+<li>Set the font for an <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">entry widget</a> using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry widget for each attribute.
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the widget. To change the font of the guide text, you have to add markup tags.</td> 
+    </tr> 
+   </tbody>
+  </table>
+<pre class="prettyprint">
+char *user_style = &quot;DEFAULT=&#39;font=Sans:style=Regular font_size=40&#39;&quot;;
+elm_entry_text_style_user_push(entry, user_style);
+elm_object_part_text_set(entry, &quot;elm.guide&quot;,
+&nbsp;&nbsp;&nbsp;&quot;&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;&quot;);
+</pre>
+</li>
+</ul>
+
+               </div>
+               </li>                                   
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 name="edc" id="edc" class="items-tit-h2">Setting the Font Using EDC</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To create a layout with text using the EDC, you can set the font for each text part or textblock:</p>
+<ul class="ul">
+<li id="TEXT">Set the font of a text part using the font family name and a specific style of the font family:
+<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;}
+}
+</pre>
+</li>
+
+<li>Add style information, which can be used for multiple textblock parts:
+<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&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+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;}
+}
+</pre>
+</li>
+</ul>
+
+               </div>
+               </li>                           
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 name="edje" id="edje" class="items-tit-h2">Using the Edje Text Class</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>You can use the <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text class</a> to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a widget with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td> 
+    </tr> 
+   </tbody>
+  </table>
+
+
+<p>To set the text class, you can use reserved words for text class, but you can also make your own text class:</p>
+
+<ul class="ul">
+       <li>Set a class for a text 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;text_class: &quot;my_class&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Set a class for a textblock:
+<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 ... text_class=my_class&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+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;}
+}
+</pre>
+</li>
+<li>
+<p>You can handle font and font style per <span style="font-family: Courier New,Courier,monospace;">text_class</span>. If you set your own <span style="font-family: Courier New,Courier,monospace;">text_class</span> in the EDC, you can change the font and font size:</p>
+
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, 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 show set 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_apply();
+</pre>
+</li>
+</ul>
+
+               </div>
+               </li>                           
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 name="own" id="own" class="items-tit-h2">Setting Your Own Font</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>You can create your own font and use them in your application. Before using your fonts, set the path for the fonts. Use the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> or prepend function once when the application is launched.</p>
+<pre class="prettyprint">
+char *font_path = &quot;/opt/usr/apps/org.tizen.myapp/res/fonts/&quot;;
+evas_font_path_global_append(font_path);
+</pre>
+
+<p>After calling the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> function, you can load your fonts including the family name and style.</p>
+
+               </div>
+               </li>                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/form_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/form_tutorial_n.htm
new file mode 100644 (file)
index 0000000..c61373a
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/form_tutorial_n.htm
@@ -0,0 +1,345 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Form: Creating the Basic Application and Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#create">Creating the Basic Application</a></li>
+                       <li><a class="opensection" href="#naviframe">Creating the Naviframe</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Form: Creating the Basic Application and Layout</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial explains how to create a basic application for displaying a list of contacts, and a form for displaying and editing contact information when an item is selected on the contact list.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Elementary API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#create">Creating the Basic Application</a>
+               <p>Create an elementary application.</p></li>
+               <li><a class="opensection" href="#naviframe">Creating the Naviframe</a>
+               <p>Create the application layout.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating the Basic Application</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create an elementary application with a single window, use the following code.</p>
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = { 0 };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;// Zero out the structure
+&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre> 
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="naviframe" name="naviframe" class="items-tit-h2">Creating the Naviframe</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Use a naviframe in this application to switch between different views. The first view that is displayed is the list of contacts. When a user selects an item on this list, information on the contact is displayed in a form. Both the view list and the form are opened in a naviframe, which handles the animations between the views for you. It also manages creating a back button in the top bar and launching the back animation when you select it, deletes the form view, and shows the list of contacts again.</p>
+
+<h3>Naviframe</h3>
+<p>The naviframe is the main layout of the window, so it takes all the space available. To configure this, use the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add</span> function. The first parameter is the main window, the second is the naviframe object. The naviframe is to be resized along with the window. The object (the naviframe) fills its parent (the main window) by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_resize_hint_weight_set</span> function on the naviframe object. The naviframe object expands in both x and y directions. In the end, evas shows the naviframe object on the screen.</p>
+<pre class="prettyprint"> // Create the naviframe
+nav = elm_naviframe_add(win);
+evas_object_size_hint_weight_set(nav, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, nav);
+evas_object_show(nav);
+</pre> 
+
+<h3>Contact List</h3>
+<p>Handle the contact list with the <span style="font-family: Courier New,Courier,monospace">_create_contact_list</span> function. This function takes the parent object as the parameter (in this case the naviframe) and returns the genlist. To create the genlist, use the following code.</p>
+<pre class="prettyprint">static Evas_Object *
+_create_contact_list(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;// Create a new genlist
+&nbsp;&nbsp;&nbsp;list = elm_genlist_add(parent);
+&nbsp;&nbsp;&nbsp;evas_object_show(list);
+
+&nbsp;&nbsp;&nbsp;// Create a new item class for the genlist
+&nbsp;&nbsp;&nbsp;itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;default&quot;;
+&nbsp;&nbsp;&nbsp;// Set the callback used when the genlist text is created
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _genlist_text_get;
+&nbsp;&nbsp;&nbsp;// Set the callback be used when the content of the item is created
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get&nbsp;&nbsp;&nbsp;= _genlist_content_get;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.state_get = NULL;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
+}
+</pre>
+
+<p>itc is a static variable containing the item class. The item class contains all functions that are called back when an item is created. In this case, create the callbacks <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> (for labels) and <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> (for icons). These functions are called when labels and icons of the genlist item are created.</p>
+<p>The list of contacts is contained in an array of Contacts.</p>
+<pre class="prettyprint">typedef struct _Contact Contact;
+
+struct _Contact
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;const char *mobile;
+&nbsp;&nbsp;&nbsp;const char *address;
+&nbsp;&nbsp;&nbsp;const char *email;
+&nbsp;&nbsp;&nbsp;const char *icon;
+};
+
+static Contact contacts[] = 
+{
+&nbsp;&nbsp;&nbsp;{&quot;Alexander Holmes&quot;, &quot;+1234567896&quot;, &quot;&quot;, &quot;alexander_holmes@tizen.org&quot;, &quot;c1.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Lara Alvaréz&quot;,&nbsp;&nbsp;&nbsp; &quot;+9876543216&quot;, &quot;&quot;, &quot;lara_alvares@tizen.org&quot;, &quot;c2.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Aksel Møller&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;aksel_moller@tizen.org&quot;, &quot;c3.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Anir Amghar&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+1679432846&quot;, &quot;&quot;, &quot;anir_amghar@tizen.org&quot;, &quot;c4.png&quot;&nbsp;&nbsp;&nbsp; },
+&nbsp;&nbsp;&nbsp;{&quot;Noémie Cordier&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;noemie_cordier@tizen.org&quot;, &quot;c5.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Henry Thompson&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;henry_thompson@tizen.org&quot;, &quot;c6.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Mai Phan&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;mai_phan@tizen.org&quot;, &quot;c7.png&quot;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+};
+</pre>
+
+<p>Create a genlist item for each item of the array with the following code.</p>
+<pre class="prettyprint">
+// Create a genlist item for each item in the contacts array
+for (i = 0; i &lt; EINA_C_ARRAY_LENGTH(contacts); i++)
+{
+&nbsp;&nbsp;&nbsp;// Append the item, add a callback when the item is selected, and use the
+&nbsp;&nbsp;&nbsp;// current contact item as data pointer for the callbacks
+&nbsp;&nbsp;&nbsp;elm_genlist_item_append(list, itc,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i],
+&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;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;_contact_selected_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i]);
+}
+</pre>
+
+<p>Attach the <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb</span> callback function to the genlist item. When an item is selected in the list, the data pointer passed as the argument calls this function. Here it is a pointer on the contact. Pass the contact in the array to all the Item Class callbacks.</p>
+<p>Push the list at the top of the naviframe with the following code.</p>
+<pre class="prettyprint">
+// Create the list of contacts
+list = _create_contact_list(win);
+
+// Push the list on top of the naviframe
+elm_naviframe_item_push(nav, NULL, NULL, NULL, list, NULL);
+</pre>
+
+<p>The Item class functions are called, the <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> first.</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Contact *contact = data;
+
+&nbsp;&nbsp;&nbsp;// Return a new allocated string for the contact name
+&nbsp;&nbsp;&nbsp;return strdup(contact-&gt;name);
+}
+</pre>
+
+<p>These functions show the index of the contact in the array and return a freshly allocated string with the name of the contact.</p>
+<p>When the user selects an item in the list, a callback registers on the select signal and calls the corresponding function; in this case, <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb()</span>. The user retrieves the index of the array passed in the data and creates the form on contact information based on this index.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are two different swallow parts. A swallow part is a container in the edje file of the genlist item, which may contain an evas object. The following figure shows the layout of different parts in the theme.</p>
+
+
+&nbsp;&nbsp;&nbsp;<p class="figure">Figure: Genlist item</p> 
+  <p style="text-align:center;"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>   
+ 
+
+<p>There are two elm.swallow parts. When the callback function for the creation of icons is called, the part name is passed via the <span style="font-family: Courier New,Courier,monospace">part</span> variable. Compare this variable to <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> for the first object and to <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> for the icon at the end.</p>
+
+<h3>Icon</h3>
+<p>Create the icon when the callback is recognized. In this example, we use an <span style="font-family: Courier New,Courier,monospace">elm_icon</span> object.</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Contact *contact = data;
+
+&nbsp;&nbsp;&nbsp;// Test which part is being created
+&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char filename[PATH_MAX];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a new icon
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic = elm_icon_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the filename of the file which is to be loaded
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, filename, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the ratio squared
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the icon
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ic;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre>
+
+<p>Note that in case of <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> the return is NULL, and no icon is added.</p>
+<p>The user may question the complexity of creating a genlist, and the benefits of callbacks for the creation of items. In a genlist with thousands of elements, graphical items are not created. Only the ones currently displayed on the screen are created with the callbacks in the Genlist Item Class. Otherwise, objects are created by calling the respective callback function when the user scrolls the list.</p>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">When the genlist is first created, the Elementary needs to know the height of the list. All elements in the list are not necessarily the same size due to different kind of styles. Thus, the Elementary creates all elements once to know the size, and displays the scroll bars correctly. If all your items have the same height, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set</span> to impose the same height to all items. The Elementary does not create the complete list as the global size is a multiple of the height of the first item. It saves you cpu time.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+  
+<h3>Contact Form</h3>
+<p>The contact list is created inside the <span style="font-family: Courier New,Courier,monospace">_create_contact_form</span> function. This function takes a parent Evas_Object and a contact item as parameters, and returns an Evas_Object. The parent is the naviframe object, and the contact item contains the information on the contact.</p>
+<p>To display the various information about the contact, we use boxes in this example.</p>
+
+   <p class="figure">Figure: Form contact layout</p> 
+  <p style="text-align:center;"><img alt="Form contact layout" src="../../images/form_contact_layout.png" /></p>
+
+
+<p>The first box is an vertical box.</p>
+<pre class="prettyprint">vbox = elm_box_add(parent);
+elm_box_align_set(vbox, 0, 0);
+evas_object_show(vbox);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_box_align_set</span> keeps the box element aligned to the top left corner.</p>
+<p>To add an icon, use the <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function to create the icon in the genlist item. For a bigger icon, set the minimum size of the icon object to 96x96 px.</p>
+<p>The most important function in this case is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end</span>. It adds the icon object at the end of the vbox. As the icon is the first object added, it is displayed on top of the box.</p>
+<pre class="prettyprint">
+ic = elm_icon_add(vbox);
+snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
+elm_image_file_set(ic, filename, NULL);
+evas_object_size_hint_min_set(ic, 96, 96);
+evas_object_show(ic);
+elm_box_pack_end(vbox, ic);
+</pre>
+
+<p>In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the widgets in a horizontal layout, use a horizontal box.</p>
+<pre class="prettyprint">
+hbox = elm_box_add(vbox);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+elm_box_padding_set(hbox, 32, 32);
+evas_object_size_hint_weight_set(hbox, EVAS_HINT_EXPAND, 0);
+evas_object_size_hint_align_set(hbox, EVAS_HINT_FILL, 0);
+evas_object_show(hbox);
+</pre>
+
+<p>Change the orientation of the box with <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set</span>. To get space between the elements of the vbox, set the padding to 32px. To set the item of the box not to expand vertically, use <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set</span>.</p>
+<p>Create the label object, which is an elm_label. Set its text, and do not align or expand it.</p>
+<pre class="prettyprint">
+label = elm_label_add(hbox);
+elm_object_text_set(label, form_items[i]);
+evas_object_size_hint_weight_set(label, 0, 0);
+evas_object_size_hint_align_set(label, 0, 0);
+evas_object_show(label);
+</pre>
+
+<p>Create the edit line, which is an elm_entry.</p>
+<pre class="prettyprint">
+edit = elm_entry_add(hbox);
+evas_object_size_hint_weight_set(edit, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(edit, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(edit);
+</pre>
+
+<p>Add the label and the edit inside the horizontal box and add the horizontal box to the vertical box.</p>
+<pre class="prettyprint">
+elm_box_pack_end(hbox, label);
+elm_box_pack_end(hbox, edit);
+
+elm_box_pack_end(vbox, hbox);
+</pre>
+
+       <p class="figure">Figure: Form tutorial: form</p> 
+  <p style="text-align:center;"><img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
+
+   <p class="figure">Figure: Form tutorial: list</p> 
+  <p style="text-align:center;"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /></p>
+       </div>
+               </li>                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm
new file mode 100644 (file)
index 0000000..ea66bec
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm
@@ -0,0 +1,528 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Managing Large Element Sets</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Set-up
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#genlist_application_init">Initializing the Application</a></li>
+                                       <li><a class="opensection" href="#genlist_creation">Creating a Genlist</a></li>
+                                       <li><a class="opensection" href="#entries_creation">Adding New Entries</a></li>
+                               </ul>
+                       </li>
+                       <li>Modifications
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
+                                       <li><a class="opensection" href="#item_modes">Using Item Modes</a></li>
+                                       <li><a class="opensection" href="#other_apis">Using Other APIs</a></li>
+                               </ul>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="../../../../org.tizen.guides/html/native/ui/ui_widgets_n.htm#genlist">Genlist Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Genlist.html">Genlist API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Genlist: Managing Large Element Sets</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial deals with genlists, a list widget for large sets of elements. It uses callbacks to populate entries. The same widget handles both flat lists and trees.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Genlist API basics by learning about:</p>
+       <ul>
+               <li>Set-up
+                       <ul>
+                               <li><a class="opensection" href="#genlist_application_init">Initializing the Application</a>
+                               <p>Initialize the application for use.</p></li>
+                               <li><a class="opensection" href="#genlist_creation">Creating a Genlist</a>
+                               <p>Create a genlist.</p></li>
+                               <li><a class="opensection" href="#entries_creation">Adding New Entries</a>
+                               <p>Add new entries to the list.</p></li>
+                       </ul>
+               </li>
+               <li>Modifications
+                       <ul>
+                               <li><a class="opensection" href="#item_style">Choosing Another Item Style to Add or Remove Parts</a>
+                               <p>Customize your list.</p></li>
+                               <li><a class="opensection" href="#item_modes">Using Item Modes</a>
+                               <p>Use different list modes in your application.</p></li>
+                               <li><a class="opensection" href="#other_apis">Using Other APIs</a>
+                               <p>Change the item class and size of the genlist.</p></li>
+                       </ul>
+               </li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="genlist_application_init" name="genlist_application_init" class="items-tit-h2">Initializing the Application</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+   <p class="figure">Figure: Example of a genlist</p> 
+  <p style="text-align:center;"><img alt="Example of a genlist" src="../../images/genlist_1line.png" /></p>
+  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant widget that contains a naviframe widget. The genlist goes inside the naviframe.</p>
+<pre class="prettyprint">static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
+
+&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;_create_list(app);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
+&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
+<pre class="prettyprint">struct app_data
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
+};
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="genlist_creation" name="genlist_creation" class="items-tit-h2">Creating a Genlist</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
+<pre class="prettyprint">Evas_object *list = elm_genlist_add(parent);
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="entries_creation" name="entries_creation" class="items-tit-h2">Adding New Entries</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
+<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
+Building a Basic Item Class</h3>
+<p>The code for the minimal genlist item class is below: </p>
+
+<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;func.text_get = NULL;
+itc-&gt;func.content_get = NULL;
+itc-&gt;func.state_get = NULL;
+itc-&gt;func.del = NULL;
+</pre>
+
+<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
+<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
+<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;NULL,                    // Item data
+&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
+&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
+&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
+&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
+);
+</pre>
+<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
+<h3 id="text_get" name="text_get">Text in the List Elements</h3>
+<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
+
+<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
+<p>If you are not familiar with the concept of parts in the EFLs,  read the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm#simple_edc_file">Write a Simple EDC File</a> section.</p>
+
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. The <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide explains how to do that.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj __UNUSED__, const char *part)
+{
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
+<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
+<p>The prototype of the callback must match this one: </p>
+<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+
+<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
+<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
+
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
+<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
+<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;NULL,                    // item data
+&nbsp;&nbsp;&nbsp;NULL,                    // parent item for trees, NULL if none
+&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // item type, other values are used for trees
+&nbsp;&nbsp;&nbsp;_genlist_selected_cb,      // callback on selection of the item
+&nbsp;&nbsp;&nbsp;NULL                     // data for that callback function
+);
+</pre>
+
+<p>This callback adheres to the following prototype: </p>
+<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
+</pre>
+
+<p>The implementation below changes the item style of items when they are selected:</p>
+<pre class="prettyprint">static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;struct app_data *app = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+       <h2 id="item_style" name="item_style" class="items-tit-h2">Choosing Another Item Style to Add or Remove Parts</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
+<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
+</pre>
+<p>The <a class="opensection" href="../../../../org.tizen.guides/html/native/ui/ui_widgets_n.htm#genlist">Genlist Widget</a> lists all available item styles.</p>
+<p>Further customization is achieved by modifying the theme as explained in the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide.</p>
+<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="item_modes" name="item_modes" class="items-tit-h2">Using Item Modes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>So far the genlist examples have all featured bare lists while the genlist widget is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the widget until another group comes and replaces it.</p>
+<h3 id="item_group" name="item_group">Group Mode</h3>
+<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
+<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
+<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
+<pre class="prettyprint">
+app-&gt;itc = elm_genlist_item_class_new();
+app-&gt;itc-&gt;item_style = &quot;default_style&quot;;
+app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
+app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
+app-&gt;itc-&gt;func.state_get = NULL;
+app-&gt;itc-&gt;func.del = NULL; 
+
+app-&gt;itc2 = elm_genlist_item_class_new();
+app-&gt;itc2-&gt;item_style = &quot;icon_top_text_bottom&quot;;
+app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
+app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
+app-&gt;itc2-&gt;func.state_get = NULL;
+app-&gt;itc2-&gt;func.del = NULL; 
+</pre>
+
+<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
+<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
+<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
+<pre class="prettyprint">
+for (i = 0; i &lt; 1000; i++) 
+{
+&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (10 * i),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
+&nbsp;&nbsp;&nbsp;);
+&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (10 * i + j),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="item_tree" name="item_tree">Tree Mode</h3>
+<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
+<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
+</pre>
+
+<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
+<pre class="prettyprint">
+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<pre class="prettyprint">
+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+</pre>
+
+<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
+<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
+<pre class="prettyprint">static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (i + i_parent),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it_parent,
+&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;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
+<pre class="prettyprint">static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
+}
+</pre>
+
+<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
+<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="other_apis" name="other_apis" class="items-tit-h2">Using Other APIs</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+
+<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
+<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
+
+<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
+<p>Changing the item class of a widget is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
+<pre class="prettyprint">static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+       </div>
+               </li>                   
+               </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm
new file mode 100644 (file)
index 0000000..2ddff87
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm
@@ -0,0 +1,296 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Gesture Detector: Implementing Gestures Provided by the EFL Library</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Touch Gestures</a></li>
+                       <li><a class="opensection" href="#touch">Implementing Touch Gestures</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Gesture Detector: Implementing Gestures Provided by the EFL Library</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the UI API basics by learning about:</p> 
+       <ul>
+               <li><a  class="opensection" href="#init">Initializing Touch Gestures</a>
+               <p>Initialize the touch gestures for use.</p></li>
+               <li><a  class="opensection" href="#touch">Implementing Touch Gestures</a>
+               <p>Implement different kinds of touch gestures.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Touch Gestures</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> widget to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> widget which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, 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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;layout);
+&nbsp;&nbsp;&nbsp;// Calendar View
+&nbsp;&nbsp;&nbsp;create_main_view(ad);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;nf, &quot;Calendar&quot;, NULL, NULL, ad-&gt;calendar, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;elm.swallow.content&quot;, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view</span> function creates the application layout by arranging the labels and rectangles by using recursive composition of the box layout:</p>
+<pre class="prettyprint">
+static void
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(ad-&gt;box, 0, 5 * elm_config_scale_get());
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
+&nbsp;&nbsp;&nbsp;// Event Rect
+&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(ad-&gt;box));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;gl = create_gesture_layer(ad);
+
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;box, ad-&gt;rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
+}
+</pre>
+
+<p>A gesture layer is added to the rectangle object. This layer is able to receive the gesture event:</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_gesture_layer(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *g = elm_gesture_layer_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_gesture_layer_attach(g, ad-&gt;rect);
+}
+</pre>
+
+<p>The following figure illustrates the Gesture Detector.</p>
+
+  <p class="figure">Figure: Gesture Detector screen</p> 
+  <p style="text-align:center;"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p> 
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="touch" name="touch" class="items-tit-h2">Implementing Touch Gestures</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> is the function to which a gesture layer for a particular object is attached.</p>
+<p>A gesture can have 4 different states:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_MOVE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span></li></ul>
+<p>Every gesture starts with the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state and finishes with either the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span> or <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span> state depending on whether the gesture is completed or aborted on that object. </p>
+<p>If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">Elm_gesture_layer_cb_set()</span> API is used for registering state change callback for a particular gesture.</p>
+<p>For more information about the gestures, see the gesture documentation.</p>
+
+<p>To detect touch gestures:</p>
+<ul class="ul">
+<li><p>The following example adds callbacks for listening to the tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, n_finger_tap_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, n_finger_tap_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, n_finger_tap_abort, ad);
+</pre></li>
+<li><p>The following example adds callbacks for listening to the double tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, dbl_click_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, dbl_click_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, dbl_click_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, dbl_click_abort, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the triple tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, triple_click_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, triple_click_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, triple_click_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, triple_click_abort, ad);
+</pre></li>
+<li><p>The following example adds callbacks for listening to the long tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the momentum gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the line gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, line_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, line_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, line_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, line_abort, ad);
+</pre></li>
+ 
+<li><p>The following examples add callbacks for listening to the flick gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, flick_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, flick_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, flick_abort, ad);
+</pre></li>
+
+<li><p>The following examples add callbacks for listening to the zoom gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, zoom_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, zoom_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, zoom_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, zoom_move, ad);
+</pre></li>
+ 
+<li><p>The following example adds callbacks for listening to the rotate gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, rotate_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, rotate_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, rotate_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, rotate_move, ad);
+</pre></li>
+
+<li><p>The following example adds a callback for getting the tap gesture finishing notification:</p>
+<pre class="prettyprint">
+static Evas_Event_Flags
+n_finger_tap_end(void *data, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *) event_info;
+&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+}
+</pre></li>
+</ul>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm
new file mode 100644 (file)
index 0000000..270c869
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm
@@ -0,0 +1,574 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Menu: Adding Menus to the Application</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#structure">Defining the Application &quot;Structure&quot;</a></li>
+                       <li><a class="opensection" href="#theme">Defining the Application Theme</a></li>
+                       <li><a class="opensection" href="#basic_ui">Creating the Basic UI</a></li>
+                       <li><a class="opensection" href="#hidden_menu">Creating a Hidden Menu</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Menu: Adding Menus to the Application</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial shows how to add menus to the application. The example code creates an application with 3 views, these views are showed by an interaction with a menu bar, placed on the top of the application. The application has also a hidden menu that appears only when the menu button is pressed.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Elementary API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#structure">Defining the Application &quot;Structure&quot;</a>
+               <p>Define the structure of the application.</p></li>
+               <li><a class="opensection" href="#theme">Defining the Application Theme</a>
+               <p>Create a theme using Basic EDC UI Application.</p></li>
+               <li><a class="opensection" href="#basic_ui">Creating the Basic UI</a>
+               <p>Create menus and toolbars.</p></li>
+               <li><a class="opensection" href="#hidden_menu">Creating a Hidden Menu</a>
+               <p>Create a hidden menu in your application.</p></li>
+       </ul>
+               
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="structure" name="structure" class="items-tit-h2">Defining the Application &quot;Structure&quot;</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Define the structure of the application:</p>
+ <pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* win;      // The main window
+&nbsp;&nbsp;&nbsp;Evas_Object* layout;   // The Edje layout
+&nbsp;&nbsp;&nbsp;Evas_Object* conform;  // The conform
+&nbsp;&nbsp;&nbsp;Evas_Object *nf;       // The Naviframe to handle the views
+&nbsp;&nbsp;&nbsp;appmenu_s *menu;       // The main menu
+&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu;   // The side menu
+&nbsp;&nbsp;&nbsp;mainview_s *main_view; // The main view (dayselector)
+&nbsp;&nbsp;&nbsp;calview_s *cal_view;   // The calendar view
+&nbsp;&nbsp;&nbsp;dateview_s *date_view; // The date and time view
+&nbsp;&nbsp;&nbsp;settview_s *settings_view; // The settings view
+&nbsp;&nbsp;&nbsp;Eina_Bool sdmenu_up;   // A Boolean variable to keep the side menu status
+} appdata_s;
+</pre>
+<p>This structure contains some specific variables for the views and the menus.</p>
+<p>Define the main view by using the structure <span style="font-family: Courier New,Courier,monospace">mainview</span>, it is composed of a <span style="font-family: Courier New,Courier,monospace">box</span> (the main container), a <span style="font-family: Courier New,Courier,monospace">dayselector</span>, an image <span style="font-family: Courier New,Courier,monospace">img</span>, and a label <span style="font-family: Courier New,Courier,monospace">lb_main</span>.</p>
+ <pre class="prettyprint">typedef struct mainview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box;         //The main container of the view
+&nbsp;&nbsp;&nbsp;Evas_Object *colorselector; //A color selector
+&nbsp;&nbsp;&nbsp;Evas_Object *img;          //An image 
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_day;      //A label
+} mainview_s;
+</pre>
+<p>The date view is very similar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> widget and a label <span style="font-family: Courier New,Courier,monospace">lb_date</span>.</p>
+ <pre class="prettyprint">typedef struct dateview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box;      //The main container of the view 
+&nbsp;&nbsp;&nbsp;Evas_Object *datetime; //A datetime widget 
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_date;  //A label 
+} dateview_s;
+</pre>
+<p>The last view is the calendar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">calendar</span> and a label <span style="font-family: Courier New,Courier,monospace">lb_cal</span>.</p>
+ <pre class="prettyprint">typedef struct calview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box;      //The main container of the view 
+&nbsp;&nbsp;&nbsp;Evas_Object *calendar; //A calendar widget  
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_cal;   //A label widget
+} calview_s;
+</pre>
+<p>The last members of the application structure are the 2 menus. The main menu is fixed and visible, and the side menu is hidden on application starts. These menus are represented by the <span style="font-family: Courier New,Courier,monospace">appmenu</span> structure.</p>
+ <pre class="prettyprint">typedef struct appmenu
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *tb;           //The toolbar
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *submenu; //The submenu item
+} appmenu_s;
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="theme" name="theme" class="items-tit-h2">Defining the Application Theme</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>After the structure is defined, define the UI. In this tutorial, Basic EDC UI Application is used. </p>
+<p>This application structure is based on this skeleton:</p>
+
+<p class="figure">Figure: Menu skeleton</p> 
+  <p style="text-align:center;"><img alt="Menu skeleton" src="../../images/menu_skeleton.png" /></p>
+  
+
+<p>The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for widgets and views.</p>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">main_menu</span> <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part in the <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
+ <pre class="prettyprint">
+part
+{
+&nbsp;&nbsp;&nbsp;name: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;}
+} //End menu/main
+</pre>
+<p>This part has two descriptions, one for the real position named <span style="font-family: Courier New,Courier,monospace">up</span> and another out of the screen as the default position. Create these states to animate the menu on application start. The animation is run by <span style="font-family: Courier New,Courier,monospace">animation,menu_main</span>.</p>
+ <pre class="prettyprint">program
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_main&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
+} // END animation,menu_main
+</pre>
+<p>For more information about animations, see the Effects tutorial.</p>
+<p>Create another container for the views. This container is also a &quot;SWALLOW&quot; part.</p>
+ <pre class="prettyprint">part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;view/main&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255; 
+&nbsp;&nbsp;&nbsp;}
+} // END view/main 
+</pre>
+<p>This part has also two descriptions for animation purpose, like the <span style="font-family: Courier New,Courier,monospace">main_menu</span> part.</p>
+<p>The program:</p>
+ <pre class="prettyprint">program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,view_main&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;view/main&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} //END animation,view_main
+</pre>
+<p>The last container is the side menu called <span style="font-family: Courier New,Courier,monospace">menu/side</span>.</p>
+ <pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&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.3 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: -0.3 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; 
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.3 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+} //END menu/side
+</pre>
+<p>By default, this container is hidden. Clicking menu button makes it appear. The second description places the container on the left of the screen. Here is the program to run animation:</p>
+ <pre class="prettyprint">
+ program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} //END animation,menu_side
+</pre>
+<p>This program runs when it receives an event called <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
+<p>Create a program that does the opposite and starts when it receives a signal called <span style="font-family: Courier New,Courier,monospace">hide,menu_side</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> 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;
+} //END animation,menu_side,hide
+
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} //END animation,menu_side
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="basic_ui" name="basic_ui" class="items-tit-h2">Creating the Basic UI</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The view container <span style="font-family: Courier New,Courier,monospace">view/main</span> is structured like this:</p>
+
+
+<p class="figure">Figure: Main view</p> 
+<p style="text-align:center;"><img alt="Main view" src="../../images/view_main.png" /></p>
+
+<p>The naviframe contains and manages the boxes. For more information, see the Container programming guide. This widget handle views. In this example each view is contained in a <span style="font-family: Courier New,Courier,monospace">box</span> and the <span style="font-family: Courier New,Courier,monospace">box</span> is contained in the naviframe.</p>
+<p>Create the naviframe in the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function and allocate the memory to handle the views and menus of the application.</p>
+ <pre class="prettyprint">
+ // Memory allocation
+ad-&gt;main_view = calloc(1, sizeof(mainview_s)); // Allocating memory for the main view 
+ad-&gt;cal_view = calloc(1, sizeof(calview_s));   // Allocating memory for the calendar view 
+ad-&gt;date_view = calloc(1, sizeof(dateview_s)); // allocating memory for the date view 
+ad-&gt;settings_view = calloc(1, sizeof(settview_s)); // allocating memory for the Settings view
+// END of Memory allocation
+</pre>
+<p>Use <span style="font-family: Courier New,Courier,monospace">app_terminate</span> function to free the memory:</p>
+ <pre class="prettyprint">app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;/* Release all resources. */
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;free(ad-&gt;menu);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;sidemenu);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;main_view);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;cal_view);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;settings_view);
+} //END of app_terminate
+</pre>
+<p>Create the naviframe:</p>
+
+<p>Create the main menu after most of the containers are created. First create a new <span style="font-family: Courier New,Courier,monospace">_build_main_menu</span> function, it takes an <span style="font-family: Courier New,Courier,monospace">appdata_s</span> as a parameter. This function is called by <span style="font-family: Courier New,Courier,monospace">create_base_gui</span>.</p>
+ <pre class="prettyprint">static void _build_main_menu(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;//Memory allocation for the main menu function.
+&nbsp;&nbsp;&nbsp;appmenu_s *menu = calloc(1, sizeof(appmenu_s));
+&nbsp;&nbsp;&nbsp;//Putting the &quot;main&quot; menu in the application data.
+&nbsp;&nbsp;&nbsp;ad-&gt;menu = menu;
+
+&nbsp;&nbsp;&nbsp;// Creation of the &quot;Menu&quot; toolbar
+&nbsp;&nbsp;&nbsp;menu-&gt;tb = elm_toolbar_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Setting the &quot;Menu&quot; Toolbar properties
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(menu-&gt;tb, ELM_TOOLBAR_SHRINK_NONE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(menu-&gt;tb, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(menu-&gt;tb, EINA_FALSE);
+
+&nbsp;&nbsp;&nbsp;// Adding menu items to the &quot;Menu&quot; toolbar
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/calendar.png&quot;, &quot;Calendar&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Date&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/settings.png&quot;, &quot;Settings&quot;, _menu_item_selected_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Showing the widget
+&nbsp;&nbsp;&nbsp;evas_object_show(menu-&gt;tb);
+
+&nbsp;&nbsp;&nbsp;// Adding the widget to the &quot;menu/main&quot; SWALLOW container defined in the .edc theme file.
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/main&quot;, menu-&gt;tb);
+
+&nbsp;&nbsp;&nbsp;// Set the default view 
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(menu-&gt;tb), EINA_TRUE);
+}
+</pre>
+<p>Create a toolbar with <span style="font-family: Courier New,Courier,monospace">elm_toolbar_add</span>. This toolbar is a child of the main window so set <span style="font-family: Courier New,Courier,monospace">ad-&gt;win</span> as parameter.</p>
+<p>Setup the behavior of the toolbar, the display mode is set by using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_shrink_mode_set</span>. The toolbar does not scroll under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_NONE</span> mode, but it enforces a minimum size, so that all the items fit inside it. It does not scroll or show the items that do not fit under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_HIDE</span> mode. Finally, it scrolls under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_SCROLL</span> mode, and it creates a button to aggregate items which did not fit with the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_MENU</span> mode.</p>
+
+<p>In this example, there is only a limited number of menu elements and thus <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span> is used.</p>
+
+<p>Expand the transverse length of the item according the transverse length of the toolbar, giving <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as second parameter of <span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set</span>.</p>
+
+<p>Make the menu items have the same size by setting <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> to <span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set</span>. This activates the homogeneous mode of the toolbar.</p>
+<p>Add menu items to the toolbar using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span>. This function takes 4 parameters:</p>
+<ul class="ul">
+<li>the target toolbar</li>
+<li>the icon path for the menu item</li>
+<li>the item label</li>
+<li>the function to call when the item is clicked</li>
+<li>the data to associate with the item for related callbacks.</li>
+</ul>
+<p>For the icons, add some images in the resource directory of the application <span style="font-family: Courier New,Courier,monospace">res/images</span> and define a macro to contain this path in the application <span style="font-family: Courier New,Courier,monospace">.h</span> file. In this example it is <span style="font-family: Courier New,Courier,monospace">inc/menututorial.h</span>.</p>
+
+<pre class="prettyprint">#define ICON_DIR &quot;/opt/usr/apps/&quot;PACKAGE&quot;/res/images&quot;
+</pre>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">PACKAGE</span> macro to setup this <span style="font-family: Courier New,Courier,monospace">ICON_DIR</span> macro. This way you can add items to the toolbar using icon images placed in the resource directory of the application.</p>
+
+<p>The item label is very important, it is used in the item callback function.</p>
+
+<p>In this example, only one callback is created to manage all the items but there can be several callback functions. Pass the application data to the callback.</p>
+
+<p>This callback is an <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb</span>, it must have this prototype:</p>
+<pre class="prettyprint">
+_mycallback(void *data, Evas_Object *obj, void *ev)
+</pre>
+
+<p>In this example, the aim of the callback is to create the view which the user has requested. It is named <span style="font-family: Courier New,Courier,monospace">_menu_item_selected_cb</span>, and in this function we recover the calling object text to call the correct view creation function.</p>
+<pre class="prettyprint">
+it = ev;
+
+// Get the menu item text
+str = elm_object_item_text_get(it);
+
+// Comparing with the possible view names
+if (!strcmp(str, &quot;Calendar&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Calendar View&quot;
+&nbsp;&nbsp;&nbsp;_build_calendar_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;cal_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Date&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot;
+&nbsp;&nbsp;&nbsp;_build_date_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Home&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Home or main View&quot;
+&nbsp;&nbsp;&nbsp;_build_main_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;main_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Settings&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Settings&quot; view
+&nbsp;&nbsp;&nbsp;_build_settings_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;settings_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Clock&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot; 
+&nbsp;&nbsp;&nbsp;_build_date_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
+}
+
+// Show the view in the naviframe 
+elm_object_content_set(ad-&gt;nf, view);
+</pre>
+<p>The menu has views, Calendar, Date, Settings, and Home (main view). The view names are stored in the menu item label, to get the label compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exit.</p>
+<p>This way when the user clicks a menu item, the view changes. The naviframe widget destroys its content on each call of <span style="font-family: Courier New,Courier,monospace">elm_object_content_set</span>. That is why the content must be built again on each item click.</p>
+<p>Create the functions which create the views.</p>
+ <pre class="prettyprint">static void _build_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;mainview_s *view = ad-&gt;main_view;
+&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
+
+&nbsp;&nbsp;&nbsp;//Main box
+&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;view-&gt;colorselector = elm_colorselector_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(view-&gt;colorselector, ELM_COLORSELECTOR_PALETTE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;colorselector);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;colorselector);
+
+&nbsp;&nbsp;&nbsp;view-&gt;img = elm_image_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;img, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;img, 256, 256);
+&nbsp;&nbsp;&nbsp;;snprintf(buf, sizeof(buf), &quot;%s/%s&quot;, ICON_DIR, &quot;tizen-logo.png&quot;);
+&nbsp;&nbsp;&nbsp;if (!elm_image_file_set(view-&gt;img, buf, NULL))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Problem loading image&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;img);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;img);
+
+&nbsp;&nbsp;&nbsp;view-&gt;lb_day = elm_label_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Main view&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_day, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_day);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_day);
+}
+
+static void
+_build_calendar_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;calview_s *view = ad-&gt;cal_view;
+
+&nbsp;&nbsp;&nbsp;//Main box image = elm_image_add(win);
+
+&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;view-&gt;calendar = elm_image_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;calendar, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;calendar, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;calendar, 256, 256);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(view-&gt;calendar, ICON_DIR&quot;/calendar.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;calendar);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;calendar);
+
+&nbsp;&nbsp;&nbsp;view-&gt;lb_cal = elm_label_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_cal, &quot;The calendar view&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_cal, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_cal);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_cal);
+} // End of_build_calendar_view
+</pre>
+<p>Each function creates a view and stores it in the application data.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="hidden_menu" name="hidden_menu" class="items-tit-h2">Creating a Hidden Menu</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Add a new function called <span style="font-family: Courier New,Courier,monospace">_build_side_menu</span> to create the side Menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the sidemenu attribute of the structure.</p>
+ <pre class="prettyprint">static void _build_side_menu(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu = calloc(1, sizeof(appmenu_s));
+&nbsp;&nbsp;&nbsp;ad-&gt;sidemenu = sidemenu;
+
+&nbsp;&nbsp;&nbsp;sidemenu-&gt;tb = elm_toolbar_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(sidemenu-&gt;tb, ELM_TOOLBAR_SHRINK_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(sidemenu-&gt;tb, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/account.png&quot;, &quot;Account&quot;, NULL, NULL);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/contacts.png&quot;, &quot;Friends&quot;, NULL, NULL);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Clock&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(sidemenu-&gt;tb, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_show(sidemenu-&gt;tb);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/side&quot;, sidemenu-&gt;tb);
+&nbsp;&nbsp;&nbsp;elm_toolbar_horizontal_set(sidemenu-&gt;tb, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(sidemenu-&gt;tb), EINA_TRUE);
+}
+</pre>
+<p>The side menu is created but hidden by default, to make it appear the use must click Home button.</p>
+
+<p>By default the Basic EDC UI application creates a function <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> to handle the key down events. In the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function an <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add</span> function is called with the <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> macro and with <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> as callback. In this callback, the <span style="font-family: Courier New,Courier,monospace">KEY_END</span> event puts the window on the lower state.</p>
+ <pre class="prettyprint">keydown_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *ev = event;
+&nbsp;&nbsp;&nbsp;if (!strcmp(ev-&gt;keyname, KEY_END)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Let window go to hide state. */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE;
+}
+</pre>
+<p>The key name of menu button is <span style="font-family: Courier New,Courier,monospace">XF86Send</span>. Add the menu button key press handling to the <span style="font-family: Courier New,Courier,monospace">keydown_cb</span>. The menu is shown on the first press and hidden it on the second press. Use <span style="font-family: Courier New,Courier,monospace">Eina_Bool sdmenu_up</span> on the application data to store the menu status during the application execution. If <span style="font-family: Courier New,Courier,monospace">ad-&gt;sdmenu_up</span> is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> the menu is visible.</p>
+
+<p>A program <span style="font-family: Courier New,Courier,monospace">animation,menu_side</span> is defined in the <span style="font-family: Courier New,Courier,monospace">.edc</span> theme file. This program is run when the signal <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> is received with the source MenuButton. Also the program who hides the side menu is defined and is called <span style="font-family: Courier New,Courier,monospace">animation,menu_side,hide</span> which start on signal <span style="font-family: Courier New,Courier,monospace">hide,sidemenu</span>.</p>
+
+<p>Test side menu status by sending the signals using <span style="font-family: Courier New,Courier,monospace">elm_object_signal_emit</span></p>
+ <pre class="prettyprint">
+if (!strcmp(ev-&gt;keyname, &quot;XF86Send&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;if (ad-&gt;sdmenu_up == EINA_TRUE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If the menu is visible send a &quot;hide,sidemenu&quot; signal
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Store the new menu status (hidden).
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Now the menu appears and disappears when the menu button is pressed.</p>
+<p>The first side menu button sends back to the main view:</p>
+ <pre class="prettyprint">
+// Hide the side menu if it&#39;s visible
+if (ad-&gt;sdmenu_up == EINA_TRUE) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
+}
+</pre>
+<p>This way the menu disappears when the view is selected by the user.</p>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm
new file mode 100644 (file)
index 0000000..a174b01
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm
@@ -0,0 +1,300 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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-point Touch: Tracking Touch Events</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing Multi-point Touch</a></li>
+                       <li><a class="opensection" href="#canvas">Handling the Canvas</a></li>
+                       <li><a class="opensection" href="#touch">Managing Touch Events</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Multi-point Touch: Tracking Touch Events</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to paint on a canvas and track touch events.</p>
+
+<h2>Warm-up</h2>
+  <p>Become familiar with the UI API basics by learning about:</p> 
+       <ul>
+               <li><a class="opensection" href="#init">Initializing Multi-point Touch</a>
+               <p>Initialize multi-point touch for use.</p></li>
+               <li><a class="opensection" href="#canvas">Handling the Canvas</a>
+               <p>Paint on a canvas.</p></li>
+               <li><a class="opensection" href="#touch">Managing Touch Events</a>
+               <p>Manage and track different touch events.</p></li>
+       </ul>
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing Multi-point Touch</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
+
+<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">appdata</span> structure includes <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointers, a list, and a Boolean flag.</p>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *nf;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+&nbsp;&nbsp;&nbsp;Evas_Object *box;
+&nbsp;&nbsp;&nbsp;Evas_Object *rect;
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+
+&nbsp;&nbsp;&nbsp;// List of mouse spots
+&nbsp;&nbsp;&nbsp;Eina_List *spots;
+
+&nbsp;&nbsp;&nbsp;// Flag for checking the mouse down event
+&nbsp;&nbsp;&nbsp;Eina_Bool down; 
+} 
+appdata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function initializes event callbacks and calls the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function to start the EFL application.</p>
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+
+
+<p>The following figure illustrates the Multi-point Touch.</p>
+
+  <p class="figure">Figure: Multi-point Touch screens</p> 
+  <p style="text-align:center;"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p> 
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="canvas" name="canvas" class="items-tit-h2">Handling the Canvas</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.</p> 
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
+
+&nbsp;&nbsp;&nbsp;// Button
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Clear&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, button_clicked_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Create main view
+&nbsp;&nbsp;&nbsp;ad-&gt;box = create_main_view(ad);
+&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;NULL, NULL, ad-&gt;box, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, ad-&gt;button);
+} 
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main view including the label and an event rectangle. </p> 
+<p>The label displays information on mouse event status and coordinates (x, y positions). The event rectangle is received completely through mouse (touch) events. To show 2 elements in a Naviframe content area, a container combining those elements is necessary. A box container functions in that role. The label and rectangle pack end the box and the box is embedded into the Naviframe content area.</p> 
+
+<pre class="prettyprint">static Evas_Object *
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box;
+
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;// Label
+&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;None&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;label);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+
+&nbsp;&nbsp;&nbsp;// Event Rect
+&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_spot()</span> function creates a rectangle, resizes the rectangle according to received size input, and moves the rectangle according to received coordinates (x, y positions) input.</p>
+
+<pre class="prettyprint">Evas_Object *
+create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+&nbsp;&nbsp;&nbsp;spot = evas_object_rectangle_add(evas_object_evas_get(parent));
+&nbsp;&nbsp;&nbsp;evas_object_resize(spot, size, size);
+&nbsp;&nbsp;&nbsp;// Adjust x, y positions to be center of object
+&nbsp;&nbsp;&nbsp;evas_object_move(spot, x - (size/2), y - (size/2));
+&nbsp;&nbsp;&nbsp;evas_object_show(spot);
+
+&nbsp;&nbsp;&nbsp;return spot;
+}
+</pre>
+
+<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List (ad-&gt;spots)</span> for managing other functions. The <span style="font-family: Courier New,Courier,monospace">button_clicked_cb()</span> function removes all <span style="font-family: Courier New,Courier,monospace">evas_objects</span> into the <span style="font-family: Courier New,Courier,monospace">ad-&gt;spots</span> list, meaning all spot rectangles are cleared.</p>
+
+<pre class="prettyprint">static void
+button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(ad->spots, spot)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(spot);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spot = NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad->label, "Clear");
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="touch" name="touch" class="items-tit-h2">Managing Touch Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>On the bottom of the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, event callbacks are added to the event rectangle. An event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+
+<p>The following touch event types are supported:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: This event is called when the given object receives the mouse down event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: This event is called when the given object receives the mouse up event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: This event is called when the given object receives the mouse move event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: This event is called when the given object has already received the mouse down event and receives the multi-mouse down event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: This event is called when the given object receives the multi-mouse up event. </li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: This event is called when the given object receives the multi-mouse move event.</li>
+</ul>
+<p>If the given object receives a mouse event, a callback function is called, and event information, such as coordinates (x, y positions) is passed. The <span style="font-family: Courier New,Courier,monospace">mousemove_cb()</span> function sets the mouse status, positions text in the label, and draws a spot rectangle. To distinguish down and up positions, set different colors for the down and up rectangles.</p>
+
+<pre class="prettyprint">
+static void
+mousemove_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+&nbsp;&nbsp;&nbsp;char buf[1024];
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev = event_info;
+&nbsp;&nbsp;&nbsp;Evas_Coord x = ev-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;Evas_Coord y = ev-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;int size = (int) 5 * elm_config_scale_get();
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;down)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Mouse Move, %d, %d&quot;, x, y);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+
+&nbsp;&nbsp;&nbsp;// Draw spot on event position
+&nbsp;&nbsp;&nbsp;spot = create_spot(ad-&gt;rect, x, y, size);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(spot, 0, 0, 0, 255);
+&nbsp;&nbsp;&nbsp;ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
+}
+</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm
new file mode 100644 (file)
index 0000000..e329ff9
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm
@@ -0,0 +1,278 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Creating Navigation Using Naviframes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#create">Creating Naviframes</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="../../../../org.tizen.guides/html/native/ui/containers_n.htm#naviframe">Naviframe Container Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Naviframe.html">Naviframe API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Naviframe: Creating Navigation Using Naviframes</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Naviframe API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#create">Creating Naviframes</a>
+               <p>Create a UI with naviframes.</p></li>
+       </ul>
+       
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating Naviframes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
+
+<p>This tutorial shows a UI with three naviframes. Each naviframe is made of 20 screens, each made up of a label with the text &quot;label
+&lt;n&gt;&quot;, a title with the same text, and previous and next buttons, which are used to navigate between the screens.</p>
+<p>TODO: screenshots of the staged interface</p>
+<p>The naviframe is &quot;one-way&quot;: elements are added, and when the user clicks on the &quot;previous&quot; button, they are removed; there is no &quot;next&quot; button by default. To add it, we define a structure that holds the naviframe object along with a stack of the elements that the user has popped by using the &quot;previous&quot; button.</p>
+<p>Note that it is possible to create the elements on-the-fly each time the &quot;next&quot; button is pressed. Both approaches are valid.</p>
+<pre class="prettyprint">// NOTE: A zipper is a datastructure for an ordered set of elements and a
+// cursor in this set, meaning there are elements before the cursor (which are
+// stored inside the naviframe) and after (which are stored in the &quot;popped&quot;
+// list.
+struct naviframe_zipper 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Eina_List *popped;
+};
+</pre>
+
+<p>To add several naviframes, create a function that factors their creation and initializes the naviframe_zipper structure defined above.</p>
+<pre class="prettyprint">static struct naviframe_zipper *
+_naviframe_add(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = malloc(sizeof(struct naviframe_zipper));
+&nbsp;&nbsp;&nbsp;z-&gt;naviframe = elm_naviframe_add(parent);
+&nbsp;&nbsp;&nbsp;z-&gt;popped = NULL;
+
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(z-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(z-&gt;naviframe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(z-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;// By default, objects are destroyed when they are popped from the naviframe
+&nbsp;&nbsp;&nbsp;// To save and re-use them, enable &quot;preserve_on_pop&quot;
+&nbsp;&nbsp;&nbsp;elm_naviframe_content_preserve_on_pop_set(z-&gt;naviframe, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return z;
+}
+</pre>
+<p>Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe widget builds a button for &quot;previous&quot; by default, but allows the programmers to provide their own buttons. It has a specific slot for the &quot;next&quot; button.</p>
+<pre class="prettyprint">// Save the element that is popped from the naviframe
+static void
+_naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
+&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_prepend(z-&gt;popped, elm_naviframe_item_pop(z-&gt;naviframe));
+}
+
+// Set the first element after the current one available and push it to the
+// naviframe
+static void
+_naviframe_next(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
+&nbsp;&nbsp;&nbsp;const char *text;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
+
+&nbsp;&nbsp;&nbsp;label = eina_list_data_get(z-&gt;popped);
+&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_remove_list(z-&gt;popped, z-&gt;popped);
+&nbsp;&nbsp;&nbsp;if (label != NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The widget is saved inside the naviframe but nothing more; we need
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to create new buttons and set the title text again (copy the one
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// from the label that is saved).
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = elm_object_text_get(label);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_naviframe_item_push(z-&gt;naviframe, text, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p> When a naviframe and the pages that go inside it are built, populate it.</p>
+<p>Remember that three naviframes are created, each populated in a different way. The common bits have been factored out as a function and the specific parts are executed through a callback. The generic function is shown below.</p>
+<pre class="prettyprint">// Generic naviframe-populate function:
+// Its third (and last) parameter is a callback for customization, i.e. pushes
+// the new items to a specific position; it returns a &quot;context&quot; value that is
+// used between its calls and enables behaviors such as &quot;push after the
+// previously-pushed item&quot; 
+static struct naviframe_zipper*
+_naviframe_populate_gen(Evas_Object *parent, const char *id,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void * (*populate_cb) (Evas_Object *nav, const char *title, Evas_Object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*prev, Evas_Object *next, Evas_Object *label, Elm_Object_Item *context)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
+&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *context = NULL;
+&nbsp;&nbsp;&nbsp;char buf[256];
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_add(parent);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = elm_label_add(z-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s [%d]&quot;, id, i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(label, buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(label);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use the populate_cb callback to provide the customization of the way the
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// elements are added inside the naviframe
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context = populate_cb(z-&gt;naviframe, buf, prev, next, label, context);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return z;
+}
+</pre>
+<p>The prototype of the callbacks is fairly large, but that is because of the syntax for callbacks in C.</p>
+<pre class="prettyprint">// Push items one after the other
+static Elm_Object_Item *
+_populate_cb__push(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+}
+
+// Push items one after the other but use insert_after for it
+static Elm_Object_Item *
+_populate_cb__push_then_insert_after(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;if (context == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_after(nav, context, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+
+// Push one item and repeatedly insert new items before the last inserted
+// item
+static Elm_Object_Item *
+_populate_cb__push_then_insert_before(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;if (context == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_before(nav, context, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Create a window with a vertical box, which holds the three naviframes from the Appcore&#39;s <span style="font-family: Courier New,Courier,monospace">app_create</span> callback.</p>
+
+<pre class="prettyprint">static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *w, *box;
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
+
+&nbsp;&nbsp;&nbsp;w = elm_win_util_standard_add(&quot;Naviframe Test&quot;, &quot;Naviframe Test&quot;);
+
+&nbsp;&nbsp;&nbsp;box = elm_box_add(w);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(w, box);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Before&quot;, _populate_cb__push_then_insert_before);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;After&quot;, _populate_cb__push_then_insert_after);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Push&quot;, _populate_cb__push);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(w);
+}
+</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm
new file mode 100644 (file)
index 0000000..9b26988
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm
@@ -0,0 +1,358 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Using Panes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the Application</a></li>
+               <li><a class="opensection" href="#create">Creating a Panes Widget</a></li>
+               <li><a class="opensection" href="#config">Configuring the Panes</a></li>
+               <li><a class="opensection" href="#signals">Handling Signals</a></li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="../../../../org.tizen.guides/html/native/ui/containers_n.htm#panes">Panes Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Panes.html">Panes API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Panes: Using Panes</h1>
+  <div class="cont"><div class="static-cont">  
+  
+<p>This tutorial explains how to use Panes in the application.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Panes API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#init">Initializing the Application</a>
+               <p>Initialize the application for use.</p></li>
+               <li><a class="opensection" href="#create">Creating a Panes Widget</a>
+               <p>Create panes to the application.</p></li>
+               <li><a class="opensection" href="#config">Configuring the Panes</a>
+               <p>Change the pane settings and layout.</p></li>
+               <li><a class="opensection" href="#signals">Handling Signals</a>
+               <p>Handle signals based on user interaction.</p></li>
+       </ul> 
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the Application</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This is how to start an Appcore application.</p>
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+#include &lt;app.h&gt;
+
+struct _appdata 
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+};
+
+static void app_terminate(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct _appdata *ad;
+
+&nbsp;&nbsp;&nbsp;if (!user_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;ad = user_data;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;win);
+}
+
+static bool app_create(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct _appdata *ad;
+&nbsp;&nbsp;&nbsp;Evas_Object *win, *conformant, *naviframe, *panes, *panes_h, *nav_it, *bt;
+
+&nbsp;&nbsp;&nbsp;if (!user_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;ad = user_data;
+
+&nbsp;&nbsp;&nbsp;// Create window 
+&nbsp;&nbsp;&nbsp;elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(&quot;panes&quot;, &quot;Panes tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (!win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;win = win;
+
+&nbsp;&nbsp;&nbsp;// Add elm_conformant 
+&nbsp;&nbsp;&nbsp;conformant = elm_conformant_add(win);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conformant);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(conformant);
+
+&nbsp;&nbsp;&nbsp;// Add naviframe to conformant 
+&nbsp;&nbsp;&nbsp;naviframe = elm_naviframe_add(conformant);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(conformant, naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(naviframe);
+
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 320, 400);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+<p>The code above creates a window entitled &quot;Panes tutorial&quot;, composed of a conformant widget that contains a naviframe widget. To add a new Panes object, use the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
+       </div>
+               </li>   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating a Panes Widget</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The elm_panes widget adds a draggable bar between two contents. When dragged, this bar resizes the contents&#39; size. To create a new Panes into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<pre class="prettyprint">// Add an elm_panes 
+panes = elm_panes_add(naviframe);
+evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, panes);
+evas_object_show(panes);
+
+nav_it = elm_naviframe_item_push (naviframe, &quot;Panes view&quot;, NULL, NULL, panes, NULL);
+</pre>
+<p>Here the Panes is created and added in the naviframe.</p>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="config" name="config" class="items-tit-h2">Configuring the Panes</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>By default, the orientation of the Panes is vertical. To modify the orientation, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
+<pre class="prettyprint">// Add a horizontal elm_panes 
+panes_h = elm_panes_add(naviframe);
+elm_panes_horizontal_set(panes_h, EINA_TRUE);
+</pre>
+<p>The code above creates another Panes object and sets the horizontal orientation. To add content in a panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. Here we add the horizontal Panes (panes_h) to the &quot;left&quot; part of the first created Panes (panes).</p>
+<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, panes_h);
+</pre>
+
+<p>This is how to set a button object to the &quot;right&quot; side of our vertical Panes widget.</p>
+<pre class="prettyprint">// Create a button object 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Right&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+
+// and set it to the &quot;right&quot; part of the vertical Panes 
+elm_object_part_content_set(panes, &quot;right&quot;, bt);
+</pre>
+
+<p>The content of the horizontal Panes is set with two button objects (up and down). When populating a vertically displayed Panes, the left content is placed at the top, and the right content is placed at the bottom.</p>
+<pre class="prettyprint">// Create a &quot;Up&quot; button 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Up&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+elm_object_part_content_set(panes_h, &quot;left&quot;, bt);
+
+// Create a &quot;Down&quot; button 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Down&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+elm_object_part_content_set(panes_h, &quot;right&quot;, bt);
+</pre>
+
+<p>The elm_panes can be dragged with the mouse but the proportion can also be set with the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions. As an example, this is how to set the left size of both panes to 80%.</p>
+<pre class="prettyprint">// Set the proportion of the panes to 80% 
+elm_panes_content_left_size_set(panes, 0.8);
+elm_panes_content_left_size_set(panes_h, 0.8);
+</pre>
+
+<p>The Panes proportions can also be fixed so that the user is not able to drag them. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_fixed_set()</span> function.</p>
+<pre class="prettyprint">// Fix the Panes proportion 
+elm_panes_fixed_set(panes_h, EINA_TRUE);
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="signals" name="signals" class="items-tit-h2">Handling Signals</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The Panes widgets emit four different signals, depending on the users&#39; interaction with the draggable bar.</p>
+<ul class="ul">
+<li>&quot;press&quot; - The pane is pressed.</li>
+<li>&quot;unpressed&quot; - The pane is released after being pressed.</li>
+<li>&quot;clicked&quot; - The pane is clicked.</li>
+<li>&quot;clicked,double&quot; - The pane is double clicked.</li>
+</ul>
+<p>We add a callback function for each of them.</p>
+
+<h3>&quot;clicked&quot; Signal </h3>
+
+<p>The callback function for the clicked signal prints &quot;Clicked&quot; to standard output.</p>
+<pre class="prettyprint">// clicked callback 
+static void
+_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Clicked\n&quot;);
+}
+</pre>
+
+<p>This is how to register this callback function to the vertical panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked&quot;, _clicked_cb, panes);
+</pre>
+
+<h3>&quot;press&quot; Signal </h3>
+
+<p>The callback function for the &quot;press&quot; signal prints &quot;Pressed&quot; to the standard output.</p>
+<pre class="prettyprint">// press callback 
+static void
+_press_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Pressed\n&quot;);
+}
+</pre>
+
+<p>This is how to register this callback function to the vertical panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;press&quot;, _press_cb, panes);
+</pre>
+
+<h3>&quot;unpress&quot; Signal </h3>
+
+<p>For the &quot;unpress&quot; signal, the proportion size of the left content of the Panes widget is printed to the standard output. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function.</p>
+<pre class="prettyprint">// unpress callback 
+static void
+_unpress_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Unpressed, size : %f\n&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_get(obj));
+}
+</pre>
+<p>This is how to register this callback function to the Panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;unpress&quot;, _unpress_cb, panes);
+</pre>
+
+<h3>&quot;clicked,double&quot; Signal </h3>
+
+<p>Hide the left part of the Panes widget on the &quot;clicked,double&quot; signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes widget, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
+
+<pre class="prettyprint">// double clicked callback 
+static void
+_clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;static double size = 0.0;
+&nbsp;&nbsp;&nbsp;double tmp_size = 0.0;
+&nbsp;&nbsp;&nbsp;tmp_size = elm_panes_content_left_size_get(obj);
+&nbsp;&nbsp;&nbsp;if (tmp_size &gt; 0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, 0.0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Double clicked, hidden.\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &quot;Double clicked, restoring size.\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;size = tmp_size;
+}
+</pre>
+
+<p>This is how to register this callback function to the Panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked,double&quot;, _clicked_double_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;panes);
+</pre>
+
+<p class="figure">Figure: Panes tutorial in action</p> 
+  <p style="text-align:center;"><img alt="Panes tutorial in action" src="../../images/pane_tuto.png" /></p>
+       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm
new file mode 100644 (file)
index 0000000..1e06226
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm
@@ -0,0 +1,252 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Transit: Implementing Elementary Transit Effects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#initial">Initializing the Application Layout</a></li>
+                       <li><a class="opensection" href="#rotation">Implementing the Rotation Effect</a></li>
+                       <li><a class="opensection" href="#zoom">Implementing the Zoom Effect</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#elm_transit">Elementary Animations Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Transit: Implementing Elementary Transit Effects</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the Transit API available in the EFL library.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Transit API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#initial">Initializing the Application Layout</a>
+               <p>Initialize the application layout for use.</p></li>
+               <li><a class="opensection" href="#rotation">Implementing the Rotation Effect</a>
+               <p>Implement the rotation effect to the UI layout.</p></li>
+               <li><a class="opensection" href="#zoom">Implementing the Zoom Effect</a>
+               <p>Implement the zooming effect to the UI layout.</p></li>
+       </ul>   
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="initial" name="initial" class="items-tit-h2">Initializing the Application Layout</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The application uses widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+<p>The transit is designed to apply various animated transition effects to the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The following transition effects are supported in the Tizen native applications:</p>
+<ul class="ul">
+<li>Blend</li>
+<li>Color</li>
+<li>Fade</li>
+<li>Flip</li>
+<li>Rotation</li>
+<li>Transition</li>
+<li>Wipe</li>
+<li>Zoom</li>
+</ul>
+
+<p>The application layout is created by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> widget is added to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> widget, which acts as a view manager for the window and provides the window title functionality.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&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;&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, (const int *)(&amp;rots), 4);
+&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;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, 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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = create_main_view(ad);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+
+&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main content. It consists of a naviframe containing a list. This function returns a list of naviframe object pointers for the content set.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
+&nbsp;&nbsp;&nbsp;Evas_Object *navi, *list;
+
+&nbsp;&nbsp;&nbsp;navi = elm_naviframe_add(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;list = elm_list_add(navi);
+&nbsp;&nbsp;&nbsp;elm_list_mode_set(list, ELM_LIST_COMPRESS);
+
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Blend&quot;, NULL, NULL, blend_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Fade&quot;, NULL, NULL, fade_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Flip&quot;, NULL, NULL, flip_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Rotation&quot;, NULL, NULL, rotation_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;ResizableFlip&quot;, NULL, NULL, resizable_flip_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Translation&quot;, NULL, NULL, translation_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Wipe&quot;, NULL, NULL, wipe_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Zoom&quot;, NULL, NULL, zoom_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Custom&quot;, NULL, NULL, custom_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_go(list);
+
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(navi, &quot;Transit&quot;, NULL, NULL, list, NULL);
+
+&nbsp;&nbsp;&nbsp;return navi;
+}
+</pre>
+
+<p>This document describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> document. The following figure illustrates the rotation and zoom effects.</p>
+
+<p class="figure">Figure: Rotation and zoom</p>
+<p style="text-align:center;"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p> 
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="rotation" name="rotation" class="items-tit-h2">Implementing the Rotation Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>If the list item named by rotation includes the touch event, the callback function for this event is called.</p>
+<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
+<p>To implement the rotation effect:</p>
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> object with the <span style="font-family: Courier New,Courier,monospace">elm_transit_add()</span> function to add the transit effect.</li>
+<li>Set the transit rotation amount and duration.</li>
+<li>To start the transit animation, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function.</li>
+</ol>
+<pre class="prettyprint">
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
+
+&nbsp;&nbsp;&nbsp;// 360 degree rotation effect in the clock-wise direction
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(transit, 0, 360);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 1);
+&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit, transit_del_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
+}
+</pre>
+       </div>
+               </li>                   
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="zoom" name="zoom" class="items-tit-h2">Implementing the Zoom Effect</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>If the list item named by zoom includes the touch event, the callback function for this event is called.</p>
+<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
+<p>There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:</p>
+<ol>
+<li>After adding the transit object, add an <span style="font-family: Courier New,Courier,monospace">evas_object</span> to get the effect.</li>
+<li>Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration.</li>
+<li>Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration.</li>
+<li>Set both of effects to be applied in sequence.</li>
+</ol>
+<pre class="prettyprint">
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
+&nbsp;&nbsp;&nbsp;// Zoom out to scale 0.6
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 0.5);
+
+&nbsp;&nbsp;&nbsp;// Zoom in to the original size
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit2 = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit2, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit2, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit2, 0.5);
+&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;elm_transit_chain_transit_add(transit, transit2);
+&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
+}
+</pre>
+       </div>
+               </li>                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm
new file mode 100644 (file)
index 0000000..408f9a6
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Control: Managing  UI Elements</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_control_n.htm">UI Control Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI Control: Managing  UI Elements</h1>
+
+       <p>The UI control tutorials demonstrate how you can manage user interface-related features in Tizen mobile native applications:</p> 
+               <ul> 
+                   <li><a href="basic_tutorial_n.htm">Basic: Using  Basic Interactions</a> <p>Demonstrates how you can implement an application with basic widgets interactions.</p></li>
+                       <li><a href="form_tutorial_n.htm">Form: Creating the Basic Application and Layout</a> <p>Demonstrates how you can create a basic application that provides a form.</p></li>
+                       <li><a href="naviframe_tutorial_n.htm">Naviframe: Creating Navigation Using Naviframes</a> <p>Demonstrates how you can use a naviframe container in your application.</p></li>  
+                       <li><a href="genlist_tutorial_n.htm">Genlist: Managing Large Element Sets</a> <p>Demonstrates how you can use a genlist widget to manage large element sets in your application.</p></li>
+                       <li><a href="menu_tutorial_n.htm">Menu: Adding Menus to the Application</a> <p>Demonstrates how you can create menus for your application.</p></li>                     
+                       <li><a href="panes_tutorial_n.htm">Panes: Using Panes</a> <p>Demonstrates how you can use a panes widget in your application.</p></li>
+                       <li><a href="ui_layout_tutorial_n.htm">UI Layout: Creating a UI Screen Layout</a> <p>Demonstrates how you can compose a UI screen using the layout classes available in the EFL widget library.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm
new file mode 100644 (file)
index 0000000..8d8629e
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm
@@ -0,0 +1,302 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Layout: Creating a UI Screen Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Creating the UI Layout</a></li>
+                       <li><a class="opensection" href="#content">Adding Content to the Screen</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>UI Layout: Creating a UI Screen Layout</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL widget library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the UI API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#init">Creating the UI Layout</a>
+               <p>Create an application layout.</p></li>
+               <li><a class="opensection" href="#content">Adding Content to the Screen</a>
+               <p>Add content to UI screens.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Creating the UI Layout</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The sample application uses widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> widget to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> widget which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function and adds it to naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_wm_desktop_layout_support_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, 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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;UiLayout&quot;, NULL, NULL, NULL, &quot;tabbar/icon/notitle&quot;);
+
+&nbsp;&nbsp;&nbsp;// Tabbar
+&nbsp;&nbsp;&nbsp;ad-&gt;tabbar = create_toolbar(ad);
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, ad-&gt;tabbar);
+
+&nbsp;&nbsp;&nbsp;// Set the first view
+&nbsp;&nbsp;&nbsp;tabbar_it = elm_toolbar_first_item_get(ad-&gt;tabbar);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Show window after base gui is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function creates the toolbar which is then added to the naviframe.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_toolbar(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *tabbar;
+
+&nbsp;&nbsp;&nbsp;tabbar = elm_toolbar_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(tabbar, &quot;tabbar&quot;);
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Box&quot;, tabbar_item_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Grid&quot;, tabbar_item_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Table&quot;, tabbar_item_cb, ad);
+
+&nbsp;&nbsp;&nbsp;return tabbar;
+}
+</pre>
+
+<p>The following figure illustrates the UI Layout.</p>
+
+  <p class="figure">Figure: UI Layout screen</p> 
+  <p style="text-align:center;"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p> 
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="content" name="content" class="items-tit-h2">Adding Content to the Screen</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>The <span style="font-family: Courier New,Courier,monospace">create_box_view()</span> function creates the screen using a recursive composition of the box layout.</p> 
+
+<pre class="prettyprint">static Evas_Object*
+create_box_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *box1, *box2, *box3;
+
+&nbsp;&nbsp;&nbsp;box = elm_box_add(parent);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box, 10, 10);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;box1 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box1, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box1, 8, 8);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box1);
+
+&nbsp;&nbsp;&nbsp;box2 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box2, 6, 6);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box2);
+
+&nbsp;&nbsp;&nbsp;box3 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box3, 5, 5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box3, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_show(box3);
+} 
+</pre>
+
+<p>Once the box layout is created, content or another box layout is added to the box. Box implements the size policy during the size calculation.</p> 
+
+<pre class="prettyprint">// Add an item to the box
+Evas_Object *item1 = create_content(box, &quot;Item 1&quot;);
+evas_object_size_hint_min_set(item1, 0, 40);
+elm_box_pack_end(box, item1);
+elm_box_pack_end(box, box1);
+elm_box_pack_end(box, box3);
+elm_box_pack_end(box, create_content(box, &quot;Item 4&quot;));
+
+// Add an item to the box1
+elm_box_pack_end(box1, create_content(box1, &quot;Item 2.1&quot;));
+elm_box_pack_end(box1, box2);
+elm_box_pack_end(box1, create_content(box1, &quot;Item 2.3&quot;));
+
+// Add an item to the box2
+elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.1&quot;));
+elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.2&quot;));
+
+// Add an item to the box3
+elm_box_pack_end(box3, create_content(box3, &quot;Item 3.1&quot;));
+elm_box_pack_end(box3, create_content(box3, &quot;Item 3.2&quot;));
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_table_view()</span> function creates the screen by composing table layout with content and grid view.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_table_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *table, *item;
+
+&nbsp;&nbsp;&nbsp;table = elm_table_add(parent);
+&nbsp;&nbsp;&nbsp;elm_table_padding_set(table, 10, 10);
+&nbsp;&nbsp;&nbsp;elm_table_homogeneous_set(table, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 1&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 0, 2, 1);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 2&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 2, 0, 1, 1);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 3&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 1, 3, 1);
+
+&nbsp;&nbsp;&nbsp;// Add a grid view item
+&nbsp;&nbsp;&nbsp;item = create_grid_view(table);
+&nbsp;&nbsp;&nbsp;evas_object_show(item);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 2, 3, 10);
+
+&nbsp;&nbsp;&nbsp;return table;
+}
+</pre>
+
+<p>The table layout can be used for freestyle layouting, and for standard layouts, such as lists and grids. It does not consider the size policy of the child item during size calculation.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_grid_view()</span> function composes a screen using the grid layout and also uses box and table layout as a child item to pack inside a grid. It uses free style layouting, and during size evaluation of the child item, it does not take the size policy of the child item into consideration.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_grid_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *grid, *item;
+
+&nbsp;&nbsp;&nbsp;grid = elm_grid_add(parent);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;// Red background for the grid
+&nbsp;&nbsp;&nbsp;item = create_bg(grid, 255, 0, 0);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 0, 0, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Add the item to the grid
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item1&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 1, 1, 98, 98);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item2&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 5, 20, 20);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item3&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 23, 5, 76, 94);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item4&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 27, 20, 70);
+
+&nbsp;&nbsp;&nbsp;// Black background for the box view item
+&nbsp;&nbsp;&nbsp;item = create_bg(grid, 40, 40, 40);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 25, 10, 73, 87);
+
+&nbsp;&nbsp;&nbsp;// Add the box view item to the grid
+&nbsp;&nbsp;&nbsp;item = create_box_view(grid);
+&nbsp;&nbsp;&nbsp;evas_object_show(item);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 26, 11, 71, 85);
+
+&nbsp;&nbsp;&nbsp;return grid;
+}
+</pre>
+
+       </div>
+               </li>                           
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
new file mode 100644 (file)
index 0000000..2ca6c78
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Creating the Application UI</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI: Creating the Application UI</h1>
+       <p>The UI tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen mobile native applications:</p> 
+  <ul> 
+    <li><a href="efl_tutorial_n.htm">EFL: Using EFL Features for Designing the UI</a> <p>Demonstrates how you can use EFL to create your application UI.</p></li>
+       <li><a  href="evas_tutorial_n.htm">Evas: Creating and Managing Image Objects</a> <p>Demonstrates how you can create and manage image objects.</p></li>  
+       <li><a href="events_effects_tutorials_n.htm">Event and Effect: Using Animations and Effects</a> <p>Demonstrate how you can create and implement a variety of animation effects and use gestures in applications.</p></li>  
+       <li><a href="ui_control_tutorials_n.htm">UI Control: Managing  UI Elements</a> <p>Demonstrate how you can manage user interface-related features.</p></li> 
+       <li><a href="efl_extension_tutorial_n.htm">Efl Extension: Creating a Naviframe Window</a> <p>Demonstrates how you can register the EFL Extension Menu and Back key events.</p></li> 
+    <li><a href="font_settings_tutorial_n.htm">Font Setting: Using Various Fonts in the Application</a> <p>Demonstrates how you can modify the fonts and text size of your application, or set your own font.</p></li>         
+    <li><a href="efl_util_tutorial_n.htm">EFL UTIL: Adjusting the Notification Window Level</a> <p>Demonstrates how you can create a notification window and adjust its position.</p></li>
+       <li><a href="efl_optimization_tutorial_n.htm">EFL Optimization: Optimizing Tizen Native Applications</a> <p>Demonstrates how you can optimize your Tizen native 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
new file mode 100644 (file)
index 0000000..35b4cc8
--- /dev/null
+++ b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
@@ -0,0 +1,694 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>STT: Recognizing Speech</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create">Creating and Destroying STT Handles</a></li>
+                       <li><a href="#set">Setting and Unsetting Callbacks</a></li>
+                       <li><a href="#get">Getting Information</a></li>
+                       <li><a href="#prepare">Connecting and Disconnecting the STT</a></li>
+                       <li><a href="#option">Setting Options and Controlling Recording</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/uix/stt_n.htm">STT Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>STT: Recognizing Speech</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can recognize sound data recorded by user and send the result as text.</p>  
+
+                               
+<h2>Warm-up</h2>
+<p>Become familiar with the STT API basics by learning about:</p>
+       <ul>
+               <li><a href="#create">Creating and Destroying STT Handles</a>
+               <p>Create and destroy the STT handle.</p></li>
+
+               <li><a href="#set">Setting and Unsetting Callbacks</a>
+               <p>Set and unset callbacks for obtaining notifications about recognition results, state changes, and errors.</p></li>
+
+               <li><a href="#get">Getting Information</a>
+               <p>Get information that includes, for example, language and state.</p></li>
+
+               <li><a href="#prepare">Connecting and Disconnecting the STT</a>
+               <p>Connect and disconnect the STT.</p></li>
+
+               <li><a href="#option">Setting Options and Controlling Recording</a>
+               <p>Set the options and control recording for the STT.</p></li>
+       </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating and Destroying STT Handles</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To create and destroy STT handles:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;stt.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;stt.h&gt;</pre>
+</li>                  
+<li><p>To use the STT library, create an STT handle. The STT handle is used for other STT functions as a parameter. After creating the handle, the STT state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>.</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">STT is not thread-safe and depends on the ecore main loop. Therefore, you must have the ecore main loop. Do not use STT in a thread.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<pre class="prettyprint">
+void create_stt_handle()
+{
+&nbsp;&nbsp;&nbsp;stt_h stt;
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_create(&amp;stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != result)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li><p>When you do not need the STT library anymore, destroy the STT handle using the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function:</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function within the callback function, or the <span style="font-family: Courier New,Courier,monospace;">stt_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OPERATION_FAILED</span>.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<pre class="prettyprint">
+void destroy_stt_handle(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_destroy(stt); // stt is the STT handle
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != result)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li> </ol>
+                       </div>
+               </li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="set" name="set" class="items-tit-h2">Setting and Unsetting Callbacks</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To set and unset callbacks:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;stt.h&gt;</span> header file in your application. The enum values for the callback function parameter are defined in the header file, as well as the parameter details.
+<pre class="prettyprint">
+#include &lt;stt.h&gt;</pre>
+</li>
+<li><p>The STT API provides various callback functions used to get the information including the recognition result, state changes, language changes, and errors. Call the callback functions in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span> state.</p>
+
+<p>You can use the following callbacks:</p>
+<ul class="ul">
+<li>State changed
+<p>If you set the state changed callback for the STT, it is invoked when a state is changed by the STT.</p>
+<pre class="prettyprint">
+void state_changed_cb(stt_h stt, stt_state_e previous, stt_state_e current, void* user_data)
+{ 
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+void set_state_changed_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_state_changed_cb(stt, state_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling 
+&nbsp;&nbsp;&nbsp;}
+}
+void unset_state_changed_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_unset_state_changed_cb(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Default language changed
+<p>The default language of the STT is changed either when the system language is changed, or through the STT settings. You can get the notification of this change if you set a callback for it.</p>
+<pre class="prettyprint">
+void default_language_changed_cb(stt_h 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;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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+void set_default_language_changed_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_default_language_changed_cb(stt, default_language_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+void unset_default_language_changed_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_unset_default_language_changed_cb(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Recognition result 
+<p>To get the STT recognition result, set the recognition result callback function.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">stt_foreach_detailed_result()</span> function retrieves the time stamp of the current recognition result, so it can be called within the <span style="font-family: Courier New,Courier,monospace;">stt_recognition_result_cb()</span> callback function.</p>
+<pre class="prettyprint">
+bool result_time_cb(stt_h stt, int index, stt_result_time_event_e event, const char* text,
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long start_time, long end_time, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+
+void recognition_result_cb(stt_h stt, stt_result_event_e event, const char** data, int 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_count, const char* msg, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// If you want to get time info of result 
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_foreach_detailed_result(stt, result_time_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+
+void set_recognition_result_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_recognition_result_cb(stt, recognition_result_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void unset_recognition_result_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_unset_recognition_result_cb(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Error
+<p>When an error occurs, the STT library sends an error message using a callback function:</p>
+<pre class="prettyprint">
+void error_cb(stt_h stt, stt_error_e reason, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+
+void set_error_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_error_cb(stt, error_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void unset_error_cb(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;Int ret;
+&nbsp;&nbsp;&nbsp;Ret = stt_unset_error_cb(stt);
+&nbsp;&nbsp;&nbsp;If (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+</ul></li></ol> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="get" name="get" class="items-tit-h2">Getting Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To get information of the current STT state and the languages used:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;stt.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;stt.h&gt;</pre>
+</li>
+<li><p>You can obtain the current STT state, the list of supported languages, and the current language:</p>
+<ul class="ul">
+<li>Get the current state.
+<p>The STT state is changed by other functions. It is also applied as a precondition for each function. Get the current state using the <span style="font-family: Courier New,Courier,monospace;">stt_get_state()</span> function.</p>
+<pre class="prettyprint">
+void get_state(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;stt_state_e current_state;
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_get_state(stt, &amp;current_state);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Obtain a list of languages supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_languages()</span> function. The <span style="font-family: Courier New,Courier,monospace;">stt_supported_language_cb</span> callback is invoked for each supported language repeatedly. You can continue or stop getting the supported languages through the return value of the callback function.
+<pre class="prettyprint">
+bool supported_language_cb(stt_h stt, const char* language, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;return true; // Get next supported language 
+
+&nbsp;&nbsp;&nbsp;return false; // Stop 
+}
+
+void get_supported_language(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_foreach_supported_languages(stt, supported_language_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Get the default language using the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function. The recognition of the STT works for this default language if you do not set the language as a parameter of the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function. You can get a notification about the default language by changing the callback function that changes the default language.
+<pre class="prettyprint">
+void get_default_language(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char* default_lang = NULL;
+&nbsp;&nbsp;&nbsp;ret = stt_get_default_language(stt, &amp;default_lang);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Obtain a list of engines supported by the STT using the <span style="font-family: Courier New,Courier,monospace;">stt_foreach_supported_engines()</span> function. When this function is called, the <span style="font-family: Courier New,Courier,monospace;">stt_supported_engine_cb</span> callback is invoked repeatedly for each supported engine. You can continue or stop getting the supported engine through the return value of the callback function.
+<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;&nbsp;void* user_data)
+{
+&nbsp;&nbsp;&nbsp;return true; // Get next supported language 
+
+&nbsp;&nbsp;&nbsp;return false; // Stop 
+}
+
+void get_supported_engine(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_foreach_supported_engines(stt, supported_engine_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Get or set the current engine, which is used for the STT recognition, using the <span style="font-family: Courier New,Courier,monospace;">stt_set_engine()</span> and <span style="font-family: Courier New,Courier,monospace;">stt_get_engine()</span> functions.
+<p>The supported language, silence detection, and supported recognition types depend on the STT engine.</p>
+<pre class="prettyprint">
+// Get the engine 
+void get_current_engine(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char* current_engine_id = NULL;
+&nbsp;&nbsp;&nbsp;ret = stt_get_engine(stt, &amp;current_engine_id);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+// Set the engine 
+void set_current_engine(stt_h stt, const char* engine_id)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_engine(stt, engine_id);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Get the supported recognition types. Check whether the recognition type defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;stt.h&gt;</span> header file is supported.
+<p>The normal recognition type, <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE</span>, means that the whole recognition result is sent at the end of recognition and that the STT engine supports it. To get a partial recognition result, use the <span style="font-family: Courier New,Courier,monospace;">STT_RECOGNITION_TYPE_FREE_PARTIAL</span> recognition type, if it is supported by the current engine.</p>
+<pre class="prettyprint">
+void check_supported_recognition_type(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;bool support;
+&nbsp;&nbsp;&nbsp;ret = stt_is_recognition_type_supported(stt, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STT_RECOGNITION_TYPE_FREE_PARTIAL, &amp;support);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul></li></ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="prepare" name="prepare" class="items-tit-h2">Connecting and Disconnecting the STT</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To operate the STT:</p>
+               <ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;stt.h&gt;</span> header file in your application:
+               <pre class="prettyprint">
+#include &lt;stt.h&gt;</pre>
+               </li>
+               <li><p>After you create the STT handle, connect the background STT daemon:</p>
+               <ul class="ul">
+               <li>
+               <p>The <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function is asynchronous and the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>:</p>
+
+<pre class="prettyprint">
+void prepare_for_stt(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_prepare(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+               <table class="note"> 
+                          <tbody> 
+                               <tr> 
+                                <th class="note">Note</th> 
+                               </tr> 
+                               <tr> 
+                                <td class="note">If you get the error callback after calling the <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function, STT is not available.</td> 
+                               </tr> 
+                          </tbody> 
+                         </table> 
+               </li>
+               <li>
+               <p>The <span style="font-family: Courier New,Courier,monospace;">stt_unprepare()</span> function disconnects the STT, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span>:</p>
+
+               <pre class="prettyprint">void unprepared_for_stt(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_unprepare(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+               </li>
+               </ul>
+               </li>
+               </ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="option" name="option" class="items-tit-h2">Setting Options and Controlling Recording</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To set the STT options and control recording:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;stt.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;stt.h&gt;</pre>
+</li>
+<li><p>You can set the following STT options:</p>
+<ul class="ul">
+<li>Set silence detection.
+<p>After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop it using the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
+<p>If you set the silence detection as automatic, STT works as a global STT setting. This option must be set in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
+<pre class="prettyprint">
+void set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;// The default type is STT_OPTION_SILENCE_DETECTION_AUTO 
+&nbsp;&nbsp;&nbsp;ret = stt_set_silence_detection(stt, type); 
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Set and unset the starting sound.
+<p>To play a sound before the STT recognition starts, call the <span style="font-family: Courier New,Courier,monospace;">set_start_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">The sound file path must be a full path. The sound type supports only the WAV format.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<pre class="prettyprint">
+void set_start_sound(stt_h stt, const char* filename)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_start_sound(stt, filename);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void unset_start_sound(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_unset_start_sound(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Set or unset the stop sound.
+<p>To play a sound when the STT stops, use the <span style="font-family: Courier New,Courier,monospace;">stt_set_stop_sound()</span> function in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state:</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">The sound file path must be a full path. The sound type supports only the WAV format.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+         
+<pre class="prettyprint">
+void set_stop_sound(stt_h stt, const char* filename)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_set_stop_sound(stt, filename);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void unset_stop_sound(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_unset_stop_sound(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Start, stop, and cancel recognition:
+       <ul class="ul">
+               <li><p>To start recording, use the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function. The connected STT daemon starts recording, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_RECORDING</span>.</p>
+               <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">If the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function fails, check the error code. You can get the following error codes: 
+                <ul class="ul">
+                <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_RECORDER_BUSY</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OUT_OF_NETWORK</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_INVALID_STATE</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_INVALID_LANGUAGE</span></li>
+                </ul></td> 
+               </tr> 
+          </tbody> 
+         </table> <p>The language and recognition type must be supported by the current STT engine. If you set <span style="font-family: Courier New,Courier,monospace;">NULL</span> as the language parameter, the STT default language is selected using the <span style="font-family: Courier New,Courier,monospace;">stt_get_default_language()</span> function.</p>
+
+<pre class="prettyprint">
+void start(stt_h stt, const char* language, const char* type)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_start(stt, language, type); // The default language is NULL
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li><p>When the STT recording is in process, you can retrieve the current recording volume using the <span style="font-family: Courier New,Courier,monospace;">stt_get_recording_volume()</span> function. The volume value is retrieved periodically with the short-term recorded sound data as dB (decibels). The STT volume normally has a negative value, and 0 is the maximum value.</p>
+<pre class="prettyprint">
+void get_volume(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;float current_volume;
+&nbsp;&nbsp;&nbsp;ret = stt_get_recording_volume(stt, &amp;current_volume);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>To stop recording and get the recognition result, use the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function. The state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_PROCESSING</span>. The result is sent as a recognition result callback and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<pre class="prettyprint">
+void stop(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_stop(stt);
+&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>To stop recording without getting the result, use the <span style="font-family: Courier New,Courier,monospace;">stt_cancel()</span> function. It changes the state to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>.</p>
+<pre class="prettyprint">
+void cancel(stt_h stt)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = stt_cancel(stt);
+&nbsp;&nbsp;&nbsp;if (VC_STATIC_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul>
+</li>
+</ul></li></ol>
+                       </div>
+               </li>
+                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm
new file mode 100644 (file)
index 0000000..f501e30
--- /dev/null
+++ b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm
@@ -0,0 +1,641 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Set-up
+                               <ul class="toc">
+                                       <li><a href="#create" class="opensection">Creating and Destroying TTS Handles</a></li>
+                                       <li><a href="#set" class="opensection">Setting and Unsetting Callbacks</a></li>
+                                       <li><a href="#get" class="opensection">Getting Information</a></li>
+                                       <li><a href="#mode" class="opensection">Getting and Setting the Mode</a></li>
+                                       <li><a href="#prepare" class="opensection">Connecting and Disconnecting TTS</a></li>
+                               </ul>
+                       </li>
+                       <li><a href="#text" class="opensection">Adding Text</a></li>
+                       <li><a href="#start" class="opensection">Starting, Stopping, and Pausing Playback</a>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/uix/tts_n.htm">TTS Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can synthesize text into sound data as utterance and play, pause, and stop it.</p>
+                               
+<h2>Warm-up</h2>
+<p>Become familiar with the TTS API basics by learning about:</p>
+<ul>
+<li>Set-up
+       <ul>
+               <li><a href="#create">Creating and Destroying TTS Handles</a>
+               <p>Create and destroy the TTS handle.</p></li>
+               
+               <li><a href="#set">Setting and Unsetting Callbacks</a>
+               <p>Set and unset callbacks for obtaining notifications, such as when playing utterance is started or completed.</p></li>
+               
+               <li><a href="#get">Getting Information</a>
+               <p>Get information on the supported voice, current state, and voice.</p></li>
+               
+               <li><a href="#mode">Getting and Setting the Mode</a>
+               <p>Get and set the TTS mode.</p></li>
+               
+               <li><a href="#prepare">Connecting and Disconnecting TTS</a>
+               <p>Connect and disconnect the TTS.</p></li>
+       </ul>
+</li>
+
+<li><a href="#text">Adding Text</a>
+<p>Request to add text for TTS play.</p></li>
+
+<li><a href="#start">Starting, Stopping, and Pausing Playback</a>
+<p>Start TTS playback, stop, and pause it.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating and Destroying TTS Handles</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To create and destroy TTS handles:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+<li><p>To use the TTS library, create a TTS handle. The TTS handle is used for other TTS functions as a parameter. After the creation, the TTS state changes to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">TTS is not thread-safe and depends on the ecore main loop. Therefore, you must have the ecore main loop. Do not use TTS in a thread.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<pre class="prettyprint">
+void create_tts_handle()
+{
+&nbsp;&nbsp;&nbsp;tts_h tts;
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_create(&amp;tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NENE != result)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li><p>When you do not need to use the TTS library anymore, destroy the TTS handle using the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function:</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function within the callback function, or the <span style="font-family: Courier New,Courier,monospace;">tts_destroy()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace;">TTS_ERROR_OPERATION_FAILED</span>.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<pre class="prettyprint">
+void destroy_tts_handle(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_destroy(tts); // tts is the TTS handle
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != result)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+                       </div>
+               </li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="set" name="set" class="items-tit-h2">Setting and Unsetting Callbacks</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To set and unset callbacks:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application. The enum values for the parameters of the callback functions are defined there. You can also find the parameter details in the header file.
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+<li><p>The TTS API provides various callback functions used to get information, such as changing states and starting a completing utterance. Call the setting and unsetting callback functions in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state. </p>
+<p>You can use the following callbacks:</p>
+<ul class="ul">
+<li>State changed
+<p>If you set the state change callback for the TTS, it is invoked when the TTS state changes.</p>
+<pre class="prettyprint">
+void state_changed_cb(tts_h tts, tts_state_e previous, tts_state_e current, void* user_data)
+{ 
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+void set_state_changed_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_set_state_changed_cb(tts, state_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+void unset_state_changed_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_unset_state_changed_cb(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Default voice changed
+<p>In the TTS library, the voice includes the language used and the voice type, such as male or female. The default voice of the TTS is changed either when the system language is changed, or from the TTS settings. You can get a notification of this change:</p>
+<pre class="prettyprint">
+void default_voice_changed_cb(tts_h tts,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char* previous_language, int previous_voice_type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char* current_language, int current_voice_type, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+void set_default_voice_changed_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_set_default_voice_changed_cb(tts, default_voice_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+void unset_default_language_changed_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_unset_default_voice_changed_cb(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Utterance started or completed
+<p>If you add text in the TTS, that text is handled as an utterance and it obtains its own ID. After you request starting, the text is synthesized by an engine and played out. You can get a notification of an utterance has starting or completing:</p>
+<pre class="prettyprint">
+void utterance_started_cb(tts_h tts, int utt_id, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+
+void utterance_completed_cb(tts_h tts, int utt_id, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+
+void set_utterance_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_set_utterance_started_cb(tts, utterance_started_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = tts_set_utterance_completed_cb(tts, utterance_completed_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void unset_utterance_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_unset_utterance_started_cb(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = tts_unset_utterance_completed_cb(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Error
+<p>When an error occurs, the TTS library sends a message using a callback function:</p>
+<pre class="prettyprint">
+void error_cb(tts_h tts, int utt_id, tts_error_e reason, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;// Your code 
+}
+
+void set_error_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_set_error_cb(tts, error_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void unset_error_cb(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_unset_error_cb(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul></li></ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="get" name="get" class="items-tit-h2">Getting Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To get information of the current TTS state and the voices used:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+<li><p>You can obtain the current state, the supported voice list, and the current voice:</p>
+<ul class="ul">
+<li>Get the current state.
+<p>The TTS state is changed by other functions, and it is also applied as a precondition of each API. You can get the current state using the <span style="font-family: Courier New,Courier,monospace;">tts_get_state()</span> function.</p>
+<pre class="prettyprint">
+void get_state(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;tts_state_e current_state;
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_get_state(tts, &amp;current_state);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Obtain a list of voices supported by the TTS using the <span style="font-family: Courier New,Courier,monospace;">tts_foreach_supported_voices()</span> function. The <span style="font-family: Courier New,Courier,monospace;">tts_supported_voice_cb</span> callback is invoked repeatedly for each supported voice. You can continue or stop getting the supported voice by the return value of the callback function.
+<pre class="prettyprint">
+bool supported_voice_cb(tts_h tts, const char* language, int voice_type, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;return true; // Get next supported language 
+&nbsp;&nbsp;&nbsp;return false; // Stop 
+}
+
+void get_supported_voice(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_foreach_supported_voices(tts, supported_language_cb, NULL);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Get the default voice using the <span style="font-family: Courier New,Courier,monospace;">tts_get_default_voice()</span> function. If you do not set the language and the voice type as parameters of the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function, the TTS synthesizes the text using the default voice. You can get notified about the default voice changing:
+<pre class="prettyprint">
+void get_default_voice(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char* default_lang = NULL;
+&nbsp;&nbsp;&nbsp;int default_voice_type;
+&nbsp;&nbsp;&nbsp;ret = tts_get_default_voice(tts, &amp;default_lang, &amp;default_voice_type);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul></li></ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="mode" name="mode" class="items-tit-h2">Getting and Setting the Mode</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To get and set the mode:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+<li><p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_DEFAULT</span>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played. Use these functions in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state.</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">The <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_NOTIFICATION</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_MODE_SCREEN_READER</span> modes are mixed with other sound sources, but they are used only for platform-specific features. Do not use them for normal applications.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+ 
+<pre class="prettyprint">
+void set_mode(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;tts_mode_e mode = TTS_MODE_DEFAULT;
+&nbsp;&nbsp;&nbsp;ret = tts_set_mode(tts, mode);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+
+void get_mode(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;tts_mode_e mode;
+&nbsp;&nbsp;&nbsp;ret = tts_get_mode(tts, &amp;mode);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="prepare" name="prepare" class="items-tit-h2">Connecting and Disconnecting TTS</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To operate the TTS:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+
+<li><p>After you create the TTS handle, connect the background TTS daemon. The daemon synthesizes the text with the engine and plays the resulting sound data:</p>
+<ul class="ul">
+<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> API is asynchronous, and the state of the TTS is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+
+<pre class="prettyprint">
+void prepare_for_tts(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_prepare(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">If you can get the error callback after using the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function, the TTS is not available.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+       </li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_unprepare()</span> API is used for disconnection, and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
+         
+<pre class="prettyprint">void unprepared_for_tts(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_unprepare(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+</ul></li></ol>
+                       </div>
+               </li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="text" name="text" class="items-tit-h2">Adding Text</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To add text:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application. There are defined values, <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_TYPE_AUTO</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_SPEED_AUTO</span> for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file.
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+<li>To manage text:
+<ul class="ul">
+<li>
+<p>You can request the TTS library to read your own text using the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> 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>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">If the added text is too long, some engines need a long time for synthesis. It is recommended to add a proper length text clip.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<p>When you do not set the language and use <span style="font-family: Courier New,Courier,monospace;">NULL</span> for the language, the default language is used for synthesizing text.</p>
+
+<p>You can add text at any point after the <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function changes the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<pre class="prettyprint">
+void add_text(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;const char* text = &quot;tutorial&quot;; // Text for read 
+&nbsp;&nbsp;&nbsp;const char* language = &quot;en_US&quot;; // Language 
+&nbsp;&nbsp;&nbsp;int voice_type = TTS_VOICE_TYPE_FEMALE; // Voice type 
+&nbsp;&nbsp;&nbsp;int speed = TTS_SPEED_AUTO; // Read speed 
+&nbsp;&nbsp;&nbsp;int utt_id; // Utterance ID for the requested text
+
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_add_text(tts, text, language, voice_type, speed, &amp;utt_id);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>
+<p>There is a length limit for the added text in the engine. You can retrieve the maximum value using the <span style="font-family: Courier New,Courier,monospace;">tts_get_max_text_size()</span> function in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state.</p>
+<pre class="prettyprint">
+void get_maximum_text_size(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;int size;
+&nbsp;&nbsp;&nbsp;ret = tts_get_max_text_size(tts, &amp;size);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul></li></ol>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="start" name="start" class="items-tit-h2">Starting, Stopping, and Pausing Playback</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<p>To start, pause, and stop playback:</p>
+<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;tts.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;tts.h&gt;</pre>
+</li>
+<li><p>To start synthesizing the text added in the queue and play the resulting sound data in sequence, use the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function. The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span>. The playback continues until you call the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> or the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function.</p>
+
+<p>If there is no text in the queue, the TTS waits for text to be added in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> state. In that case, when you add text, the TTS starts synthesizing and playing it immediately. The TTS state need not change to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span> state before using the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function.</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">If you get the TTS state changed callback in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PLAYING</span> without the TTS API call, prepare the TTS state. The TTS state can change if other applications request TTS play, the audio session requests TTS pause, or the TTS engine changes.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+<pre class="prettyprint">
+void start(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_play(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>If you want to pause the process, use the <span style="font-family: Courier New,Courier,monospace;">tts_pause()</span> function to change the state to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_PAUSED</span>. You can resume playback using the <span style="font-family: Courier New,Courier,monospace;">tts_play()</span> function.</p>
+<pre class="prettyprint">
+void pause(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_pause(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>To stop the playback, use the <span style="font-family: Courier New,Courier,monospace;">tts_stop()</span> function. All the texts in the queue are removed. The state is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<pre class="prettyprint">
+void stop(tts_h tts)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;ret = tts_stop(tts);
+&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+                       </div>
+               </li>
+                                               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm b/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm
new file mode 100644 (file)
index 0000000..a2f449a
--- /dev/null
+++ b/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>UIX: Taking Advantage of UI Extensions</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX Guides</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UIX: Taking Advantage of UI Extensions</h1>
+       <p>The UIX tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>    
+       <ul>
+               <li><a href="tts_tutorial_n.htm">TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data</a>
+               <p>Demonstrates how you can synthesize text into sound data and play it.</p>
+               </li>
+               <li><a href="stt_tutorial_n.htm">STT: Recognizing the speech</a>
+               <p>Demonstrates how you can recognize sound data recorded by the user and send the result as text.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
new file mode 100644 (file)
index 0000000..5e1491c
--- /dev/null
+++ b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
@@ -0,0 +1,584 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Web Pages and Web Content</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#init">Initializing the EWK WebKit</a>
+                       </li>
+                       <li><a class="opensection" href="#window">Creating and Deleting a Window Object</a>
+                       </li>
+                       <li><a class="opensection" href="#layout">Setting the Window Layout</a>
+                       </li>
+                       <li><a class="opensection" href="#view">Setting the Window View</a>
+                       </li>
+                       <li><a class="opensection" href="#keymouse">Handling Key and Mouse Events</a>
+                       </li>
+                       <li><a class="opensection" href="#show">Showing a Window and Setting the Focus</a>
+                       </li>
+                       <li><a class="opensection" href="#pageurl">Setting the Page URL</a>
+                       </li>
+                       <li><a class="opensection" href="#helper">Finding a Window</a>
+                       </li>
+                       <li><a class="opensection" href="#finalize">Finalizing the Application</a>
+                       </li>
+               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API</a></li>
+               </ul>
+       
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web: Managing Web Pages and Web Content</h1>
+  <div class="cont"><div class="static-cont">
+<p>This tutorial demonstrates how to create a simple Web browser.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Web API basics by learning about:</p>
+       <ul>
+               <li><a class="opensection" href="#init">Initializing the EFL WebKit</a>
+               <p>Initialize the EFL WebKit (EWK) for use.</p></li>
+               <li><a class="opensection" href="#window">Creating and Deleting a Window Object</a>
+               <p>Create and delete a window object.</p></li>
+               <li><a class="opensection" href="#layout">Setting the Window Layout</a>
+               <p>Create the window layout.</p></li>
+               <li><a class="opensection" href="#view">Setting the Window View</a>
+               <p>Set the window smart view and settings.</p></li>
+               <li><a class="opensection" href="#keymouse">Handling Key and Mouse Events</a>
+               <p>Handle the key and mouse event.</p></li>
+               <li><a class="opensection" href="#show">Showing a Window and Setting the Focus</a>
+               <p>Show a window and set the focus.</p></li>
+               <li><a class="opensection" href="#pageurl">Setting the Page URL</a>
+               <p>Set the page URL.</p></li>
+               <li><a class="opensection" href="#helper">Finding a Window</a>
+               <p>Use the helper functions to find a window.</p></li>
+               <li><a class="opensection" href="#finalize">Finalizing the Application</a>
+               <p>Finalize the application.</p></li>
+       </ul>
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="init" name="init" class="items-tit-h2">Initializing the EWK WebKit</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To initialize the EWK WebKit:</p>
+<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a> API, include the <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore_Evas.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore_Getopt.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;Eet.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;Eina.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;Elementary.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;Evas.h&gt;</span>, and <span style="font-family: Courier New,Courier,monospace;">&lt;EWebKit.h&gt;</span> header files in your application:
+<pre class="prettyprint">
+#include &lt;Ecore.h&gt;
+#include &lt;Ecore_Evas.h&gt;
+#include &lt;Ecore_Getopt.h&gt;
+#include &lt;Eet.h&gt;
+#include &lt;Eina.h&gt;
+#include &lt;Elementary.h&gt;
+#include &lt;Evas.h&gt;
+#include &lt;EWebKit.h&gt;
+</pre></li>
+<li>To use the EWK API, an application needs the following privileges:
+
+<table> 
+   <caption>
+     Table: Required privileges for an EWK application
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Privilege</th> 
+     <th>Description</th>       
+    </tr> 
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span></td> 
+       <td>Allows the application to open another application conditionally.</td>           
+    </tr>
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.write</span></td> 
+       <td>Allows the application to create, update and delete content.</td>        
+    </tr>
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/internet</span></td> 
+       <td>Allows the application to use the Internet connection.</td>      
+    </tr> 
+     <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span></td> 
+       <td>Allows the application to provide user notifications, such as messages and badges</td>           
+    </tr> 
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/location</span></td> 
+       <td>Allows the application to use the user location data.</td>       
+    </tr>
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/camera</span></td> 
+       <td>Allows the application to manage the device cameras to preview and capture pictures.</td>        
+    </tr>
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/externalstorage</span></td> 
+       <td>Allows the application to access, read and write to the external storage.</td>           
+    </tr>
+    <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/display</span></td> 
+       <td>Allows the application to access the display.</td>       
+    </tr>  
+       <tr> 
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/network.get</span></td> 
+       <td>Allows the application to create a network connection.</td>      
+    </tr>
+   </tbody> 
+  </table> </li>
+<li>The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, use the <span style="font-family: Courier New,Courier,monospace">Browser_window</span> data structure. The browser window data is stored in a <span style="font-family: Courier New,Courier,monospace">Browser_window</span> structure that contains 2 <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> instances.
+
+<pre class="prettyprint">
+typedef struct _Browser_Window
+{ 
+&nbsp;&nbsp;&nbsp;Evas_Object *elm_window; 
+&nbsp;&nbsp;&nbsp;Evas_Object *ewk_view; 
+&nbsp;&nbsp;&nbsp;Evas_Object *back_button;
+&nbsp;&nbsp;&nbsp;Evas_Object *forward_button;
+} Browser_Window;
+ 
+EXPORT_API int 
+main(int argc, char *argv[]) 
+{ 
+&nbsp;&nbsp;&nbsp;int args = 1; 
+&nbsp;&nbsp;&nbsp;Browser_Window window; 
+&nbsp;&nbsp;&nbsp;memset(&amp;window, 0x00, sizeof(struct Browser_Window));
+
+   ui_app_lifecycle_callback_s ops;
+   memset(&amp;ops, 0x00, sizeof(ui_app_lifecycle_callback_s));
+
+&nbsp;&nbsp;&nbsp;ops.create = br_app_create;
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;ops, &amp;window);   
+}
+</pre></li>
+
+<li>To create a window, call the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function in the <span style="font-family: Courier New,Courier,monospace">br_app_create(void *browser)</span> function.
+
+<pre class="prettyprint">
+window = window_create(NULL, 0, 0, EINA_FALSE);
+</pre></li></ol>
+       </div>
+               </li>           
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="window" name="window" class="items-tit-h2">Creating and Deleting a Window Object</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To create and delete a window object:</p>
+<ol>
+<li>To create a window object, use the <span style="font-family: Courier New,Courier,monospace">elm_win_add(Evas_Object* parent, const char* name, Elm_Win_Type) type</span> function.</li>
+ 
+<li>You can add a Smart Callback to your window using the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add (Evas_Object * obj, const char * event, Evas_Smart_Cb func, const void * data)</span> function.</li> 
+
+<li>The function adds a callback to the event specified by the event on the smart object (smart event).
+ 
+<pre class="prettyprint">
+static Browser_Window *window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
+{
+&nbsp;&nbsp;&nbsp;// Allocate memory
+&nbsp;&nbsp;&nbsp;Browser_Window *window = calloc(1, sizeof(Browser_Window));
+&nbsp;&nbsp;&nbsp;if (!window) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;ERROR: could not create browser window.&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Create window
+&nbsp;&nbsp;&nbsp;window-&gt;elm_window = elm_win_add(NULL, &quot;minibrowser-window&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window-&gt;elm_window, &quot;delete,request&quot;, on_window_deletion, &amp;window);
+}
+</pre></li>
+
+<li>An application also needs a callback fired for the Deletion Window Event. In the callback&#39;s body of implementation, call the <span style="font-family: Courier New,Courier,monospace">window_close()</span> function for a returned object of the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function.
+ 
+<pre class="prettyprint">
+static void on_window_deletion(void *user_data, Evas_Object *elm_window, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;window_close(window_find_with_elm_window(elm_window));
+}
+</pre></li></ol>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="layout" name="layout" class="items-tit-h2">Setting the Window Layout</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Create the window layout.</p>
+
+<p class="figure">Figure: Window layout</p>
+<p style="text-align:center;"> <img alt="Window layout" src="../../images/window_layout.png"/></p>
+
+<p>For this purpose, create new boxes (<span style="font-family: Courier New,Courier,monospace">vertical_layout</span> and <span style="font-family: Courier New,Courier,monospace">horizontal_layout</span>) using the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function:</p>
+
+<pre class="prettyprint">
+// Create vertical layout
+Evas_Object *vertical_layout = elm_box_add(window->elm_window);
+elm_box_padding_set(vertical_layout, 0, 2);
+evas_object_size_hint_weight_set(vertical_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(window-&gt;elm_window, vertical_layout);
+evas_object_show(vertical_layout);
+
+// Create horizontal layout for top bar
+Evas_Object *horizontal_layout = elm_box_add(window-&gt;elm_window);
+elm_box_horizontal_set(horizontal_layout, EINA_TRUE);
+evas_object_size_hint_weight_set(horizontal_layout, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(horizontal_layout, EVAS_HINT_FILL, 0.0);
+elm_box_pack_end(vertical_layout, horizontal_layout);
+evas_object_show(horizontal_layout);
+</pre>
+       
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> 
+function sets the hints for an object’s weight. <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span> is a macro definition 
+for a value 1.0. (<span style="font-family: Courier New,Courier,monospace">EVAS_HIT_FILL</span> for -1.0). 
+<span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add (Evas_Object* obj, Evas_Object* subobj)</span> 
+adds a subobj as the resize object of obj. 
+<span style="font-family: Courier New,Courier,monospace">evas_object_show(Evas_Object* obj)</span> makes an obj visible. 
+The <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end (Evas_Object* obj, Evas_Object* subobj)</span> function adds a subobject at the end of the pack list.</p>
+
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="view" name="view" class="items-tit-h2">Setting the Window View</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>Create a window view and set the user agent. To create the view, use the <span style="font-family: Courier New,Courier,monospace">_ewk_view_add()</span> function. The view is an object that displays pages in the browser. To set the user agent, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_user_agent_set()</span> function.</p>
+
+<pre class="prettyprint">
+static Browser_Window *window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode) 
+{ 
+&nbsp;&nbsp;&nbsp;Evas *evas = evas_object_evas_get(window-&gt;elm_window);
+&nbsp;&nbsp;&nbsp;window-&gt;ewk_view = ewk_view_add(evas);
+
+&nbsp;&nbsp;&nbsp;ewk_view_user_agent_set(window-&gt;ewk_view, user_agent_string);
+}</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="keymouse" name="keymouse" class="items-tit-h2">Handling Key and Mouse Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To handle mouse or key events, corresponding callbacks need to be set by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+
+<pre class="prettyprint">
+static Browser_Window *window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode) 
+{ 
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(window-&gt;ewk_view, EVAS_CALLBACK_KEY_DOWN, on_key_down, window); 
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(window-&gt;ewk_view, EVAS_CALLBACK_MOUSE_DOWN, on_mouse_down, window); 
+}
+</pre>
+
+<table> 
+   <caption>
+     Table: Key and mouse callbacks 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Callback</th>
+        <th>Callback type</th>  
+    </tr> 
+    <tr> 
+       <td>Key down</td>
+     <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">static void on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info);</span></td>         
+    </tr>      
+    <tr> 
+       <td>Mouse down</td>
+     <td><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span></td>
+       <td><span style="font-family: Courier New,Courier,monospace">static void on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info);</span></td>       
+    </tr> 
+   </tbody> 
+</table> 
+
+<p>To handle pressed key modifiers, such as Control or Alt, the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_is_set()</span> function must be called. To get the <span style="font-family: Courier New,Courier,monospace">Evas_Modifier</span> object that contains information about which key modifiers are registered, call the <span style="font-family: Courier New,Courier,monospace">evas_key_modifier_get()</span> function, passing the <span style="font-family: Courier New,Courier,monospace">Evas</span> canvas object as an argument. Example code:</p>
+
+<pre class="prettyprint">
+static void on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info) 
+{ 
+&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)user_data; 
+&nbsp;&nbsp;&nbsp;Evas_Event_Key_Down *ev = (Evas_Event_Key_Down*) event_info; 
+
+&nbsp;&nbsp;&nbsp;const Evas_Modifier *mod = evas_key_modifier_get(e); 
+&nbsp;&nbsp;&nbsp;Eina_Bool ctrlPressed = evas_key_modifier_is_set(mod, &quot;Control&quot;); 
+&nbsp;&nbsp;&nbsp;Eina_Bool altPressed = evas_key_modifier_is_set(mod, &quot;Alt&quot;);
+}
+</pre>
+
+<p>Now <span style="font-family: Courier New,Courier,monospace">ev-&gt;key</span> contains the name of the key that caused the event trigger. For example, to check whether the combination Alt + Left Arrow was pressed, <span style="font-family: Courier New,Courier,monospace">(!strcmp(ev-&gt;key, &quot;Left&quot;) &amp;&amp; altPressed)</span> must evaluate to <span style="font-family: Courier New,Courier,monospace">TRUE</span>.</p>
+
+<table> 
+   <caption>
+     Table: Key behavior
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Key</th> 
+     <th>Behavior</th>
+        <th>API</th>    
+    </tr> 
+    <tr> 
+       <td>Alt+Left</td>
+     <td>Back view</td>
+       <td><span style="font-family: Courier New,Courier,monospace">ewk_view_back</span></td>       
+    </tr>      
+    <tr> 
+       <td>Alt+Right</td>
+     <td>Forward view</td>
+       <td><span style="font-family: Courier New,Courier,monospace">ewk_view_forward</span></td>            
+    </tr> 
+           <tr> 
+       <td>F5</td>
+     <td>Reload view</td>
+       <td><span style="font-family: Courier New,Courier,monospace">ewk_view_reload</span></td>             
+    </tr> 
+           <tr> 
+       <td>Alt+F5</td>
+     <td>Reload view bypassing cache</td>
+       <td><span style="font-family: Courier New,Courier,monospace">ewk_view_bypass_cache</span></td>       
+    </tr> 
+           <tr> 
+       <td>F6</td>
+     <td>Stop</td>
+       <td><span style="font-family: Courier New,Courier,monospace">ewk_view_stop</span></td>       
+    </tr> 
+   </tbody> 
+</table> 
+
+<p>The mouse down event information is stored in <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span>. Similarly as in key events, <span style="font-family: Courier New,Courier,monospace">ev-&gt;button</span> contains information on which button was pressed. In this example, pressing the first button calls the <span style="font-family: Courier New,Courier,monospace">view_focus_set()</span> function to update the focus. Example code:</p>
+
+<pre class="prettyprint">
+static void on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info) 
+{ 
+&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)user_data; 
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Down *ev = (Evas_Event_Mouse_Down *)event_info; 
+
+&nbsp;&nbsp;&nbsp;if (ev-&gt;button == 1) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_focus_set(window, EINA_TRUE); 
+}
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="show" name="show" class="items-tit-h2">Showing a Window and Setting the Focus</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>In EFL, the UI focus control is implemented in an Elementary object, not an <span style="font-family: Courier New,Courier,monospace">Evas_object</span>. Therefore, the application using EWK derived from an <span style="font-family: Courier New,Courier,monospace">Evas_object</span> must control the focus itself. For example, steal focus away from the <span style="font-family: Courier New,Courier,monospace">elm_window</span> object and give it to the <span style="font-family: Courier New,Courier,monospace">ewk_view</span>.</p>
+<p>To set the focus to a <span style="font-family: Courier New,Courier,monospace">ewk_view</span>, use the <span style="font-family: Courier New,Courier,monospace">void elm_object_focus_set (Evas_Object *obj, Eina_Bool focus)</span> and <span style="font-family: Courier New,Courier,monospace">void evas_object_focus_set (Evas_Object *obj, Eina_Bool focus)</span> functions. Example code:</p>
+
+<pre class="prettyprint">
+static void view_focus_set(Browser_Window *window, Eina_Bool focus) 
+{ 
+&nbsp;&nbsp;&nbsp;// We steal focus away from elm focus model and start to do things 
+&nbsp;&nbsp;&nbsp;// manually here, so elm now has no clue what is up. Tell elm that its 
+&nbsp;&nbsp;&nbsp;// top level widget is to be unfocused so elm gives up the focus 
+&nbsp;&nbsp;&nbsp;elm_object_focus_set(elm_object_top_widget_get(window-&gt;elm_window), EINA_FALSE); 
+&nbsp;&nbsp;&nbsp;evas_object_focus_set(window-&gt;ewk_view, focus); 
+};
+</pre>
+
+<p>Call this function in the <span style="font-family: Courier New,Courier,monospace">window_create()</span> function.</p>
+
+<pre class="prettyprint">
+window_create()
+{
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(window-&gt;elm_window, window-&gt;ewk_view);
+&nbsp;&nbsp;&nbsp;evas_object_show(window-&gt;ewk_view);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(window-&gt;elm_window);
+
+&nbsp;&nbsp;&nbsp;view_focus_set(window, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return window;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">void evas_object_show (Evas_Object *obj)</span> function makes the given <span style="font-family: Courier New,Courier,monospace">Evas</span> object visible.</p>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="pageurl" name="pageurl" class="items-tit-h2">Setting the Page URL</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This example uses 2 helper functions for finding window structures. The first one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function, takes <span style="font-family: Courier New,Courier,monospace">elm_window</span> as an argument and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of. The second one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_ewk_view()</span> function, does the same with <span style="font-family: Courier New,Courier,monospace">ewk_view</span> passed as an argument. Both of them use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the windows list.</p>
+
+<pre class="prettyprint">
+char *url_from_user_input(const char *arg)
+{
+&nbsp;&nbsp;&nbsp;// If it is already a URL, return the argument as is
+&nbsp;&nbsp;&nbsp;if (has_scheme(arg) || !strcasecmp(arg, &quot;about:blank&quot;))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(arg);
+
+&nbsp;&nbsp;&nbsp;Eina_Strbuf *buf = eina_strbuf_manage_new(eina_file_path_sanitize(arg));
+
+&nbsp;&nbsp;&nbsp;// Check whether the path exists
+&nbsp;&nbsp;&nbsp;if (ecore_file_exists(eina_strbuf_string_get(buf)))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// File exists, convert local path to a URL
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_strbuf_prepend(buf, &quot;file://&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The path does not exist, convert it to a URL by
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// prepending http:// scheme:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// www.google.com -&gt; http://www.google.com
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_strbuf_string_free(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_strbuf_append_printf(buf, &quot;http://%s&quot;, arg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;char *url = eina_strbuf_string_steal(buf);
+&nbsp;&nbsp;&nbsp;eina_strbuf_free(buf);
+
+&nbsp;&nbsp;&nbsp;return url;
+}
+</pre>
+
+<p>The body of the <span style="font-family: Courier New,Courier,monospace">has_scheme()</span> function used in the previous code can be found here:</p>
+
+<pre class="prettyprint">
+Eina_Bool has_scheme(const char *url)
+{
+&nbsp;&nbsp;&nbsp;return !!strstr(url, &quot;://&quot;);
+}
+</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="helper" name="helper" class="items-tit-h2">Finding a Window</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>This example uses 2 helper functions for finding window structures. The first one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function, takes <span style="font-family: Courier New,Courier,monospace">elm_window</span> as an argument and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of. The second one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_ewk_view()</span> function, does the same for <span style="font-family: Courier New,Courier,monospace">ewk_view</span>. Both of them use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the windows list.</p>
+
+<pre class="prettyprint">
+static Browser_Window *window_find_with_elm_window(Evas_Object *elm_window) 
+{ 
+&nbsp;&nbsp;&nbsp;Eina_List *l; 
+&nbsp;&nbsp;&nbsp;void *data; 
+
+&nbsp;&nbsp;&nbsp;if (!elm_window) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL; 
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(windows, l, data)
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)data; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (window-&gt;elm_window == elm_window) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return window; 
+&nbsp;&nbsp;&nbsp;} 
+
+&nbsp;&nbsp;&nbsp;return NULL; 
+}
+
+static Browser_Window *window_find_with_ewk_view(Evas_Object *ewk_view) 
+{ 
+&nbsp;&nbsp;&nbsp;Eina_List *l; 
+&nbsp;&nbsp;&nbsp;void *data; 
+
+&nbsp;&nbsp;&nbsp;if (!ewk_view) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL; 
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(windows, l, data)
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)data; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (window-&gt;ewk_view == ewk_view) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return window; 
+&nbsp;&nbsp;&nbsp;} 
+
+&nbsp;&nbsp;&nbsp;return NULL; 
+}</pre>
+       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="finalize" name="finalize" class="items-tit-h2">Finalizing the Application</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+<p>To close the application correctly, use the <span style="font-family: Courier New,Courier,monospace">ewk_shutdown()</span> function. This function cleans up any resources your application has allocated.</p>
+
+<pre class="prettyprint">
+static void br_app_terminate(void *app_data)
+{
+&nbsp;&nbsp;&nbsp;ewk_shutdown();
+}</pre>
+
+<p>In the main function, register the termination callback:</p>
+
+<pre class="prettyprint">
+main()
+{
+&nbsp;&nbsp;&nbsp;ops.create = br_app_create;
+&nbsp;&nbsp;&nbsp;ops.terminate = br_app_terminate;
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;ops, &amp;window);
+}
+</pre>
+
+       </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/scripts/common.js b/org.tizen.tutorials/html/scripts/common.js
new file mode 100644 (file)
index 0000000..60250b6
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){
+       $('#contents table').each(function(){
+               if (!$(this).parent().hasClass('table')) {
+                       $(this).wrap('<div class="table"></div>');
+               }
+       });
+
+       // Lnb Menu Initialize
+       if($('div#contents').find('.lnb').length){
+               if($("ul li.events_news").size() > 0) {
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+               }
+               initLnb();
+               initScript(staticURL + "/js/fixednavbar.js", function(){});
+       }
+
+       //family site
+       if($('div#footer').find('dl#familySlider').length){
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+       }
+
+       // Svn Commit Test
+       
+       // Language Selection
+       if($('div#header').find('.util').length){
+               var $lang = $('div#header').find('.util');
+               $lang.find('a.lang').toggle(function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+                       },function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+                       });
+
+               $lang.bind('mouseleave',function(){
+                       $(this).find('ul.language').hide();
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+               });
+
+               $lang.find('ul.language').children().last().on("keydown", function(e) {
+                       if(e.which == 9 && e.shiftKey) {
+                               return true;
+                       }
+                       
+                       if(e.which == 9) {
+                               e.preventDefault();
+                               $lang.find('ul.language').hide();
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+                               setTimeout(function() {
+                                       $("#searchTop").focus();
+                               }, 1);
+                       }
+               });
+       }
+
+       // Open the Sitemap
+       var $open = $('div#header').find('.bt-open');
+       $open.bind('click',function(){
+               var $self = $(this);
+               var $sitemap = $('div#wrapper').find('div#sitemap');
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+               if($sitemap.is(':visible')){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+                       $self.attr('title','open sitemap');
+               }else{
+                       var source = $self.css('background-image').replace('.gif','_.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+                       $self.attr('title','close sitemap');
+               }
+               
+               $self.css('background-image',source);
+               $sitemap.slideToggle('fast');
+               
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       $self.css('background-image',source);
+                       $sitemap.slideToggle('fast');
+               });
+
+       });
+
+       // Search Auto Complete
+       var $search = $('div#header').find('fieldset.search');
+       var $searchList = $search.find('#topAutocomplete>ul');
+
+       if($search.length){
+               $search.find('> input').each(function(){
+                       $(this).bind({
+                               keydown : function(e){
+                       
+                                       if(e.type=='keydown'&& $(this).val().length!=0){
+                                               $search.find('#topAutocomplete').show();
+                                               var hei = $searchList.outerHeight();
+                                               if(hei>400){
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
+                                               }
+                                       }
+                                       if(e.keyCode==9){
+                                               $search.unbind('focusout.search');
+                                       }
+                                       if(e.keyCode==40){
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+                                               //window.scrollTo(0,0);
+                                       }
+                               },
+                               focusin : function(e){
+                                       if($(this).val()==='Search'){
+                                               $(this).val('');
+                                       }
+                               },
+                               focusout : function(e){
+                                       if($(this).val().length==0) $(this).val('Search');
+                               }
+                       });
+               });
+
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+               //      if(e.keyCode==40){
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
+               //      }
+               //});
+
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){
+                       if($search.find('> input').val().length==0){
+                               $search.find('> input').val('Search');
+                       }
+                       $search.find('#topAutocomplete').hide();
+               });
+
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
+                       $search.find('> input').val('Search');
+                       $search.find('#topAutocomplete').hide();
+                       
+                       //$search.bind('focusout.search', function(){
+                       //      $(this).find('> input').val('Search');
+                       //      $(this).find('#topAutocomplete').hide();
+                       //});
+               });
+       }
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+       var script = document.createElement("script");
+       script.type = "text/javascript";
+
+       if(script.readyState){ // 인터넷 익스플로러
+               script.onreadystatechange = function(){
+                       if(script.readyState=="loaded" || script.readyState=="complete"){
+                               script.onreadystatechange = null;
+                               callback();
+                       }
+               };
+       }else{  // 다른  브라우저
+               script.onload = function(){
+                       callback();
+               };
+       }
+
+       script.src = url;
+       document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+       var sMenu = $('.lnb');
+       var sItem = sMenu.find('>li');
+
+       sItem.each(function(){
+               if($(this).find('a').hasClass('more')){
+                       if($(this).find('ul').is(":visible")) {
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
+                       } else {
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+                       }
+               }
+       });
+       
+       var setIcoArrText = function(obj) {
+               if(obj.next().is(":visible")) {
+                       obj.text("close submenu");
+               } else {
+                       obj.text("open submenu");
+               }
+       }
+       
+       sItem.find('.ico-arr').on("click", function() {
+               var $that = $(this);
+               var liBox = $that.parent();   
+               var ulBox = $that.next();
+               
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+               
+               if(liBox.hasClass("on")) {
+                       if(ulBox.is(":visible")) {
+                               ulBox.hide();
+                               $that.addClass("ico-on");
+                       } else {
+                               ulBox.show();
+                               $that.removeClass("ico-on");
+                       }
+                       setIcoArrText($that);
+                       return true;
+               }
+               
+               if(liBox.hasClass("active")) {
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+                       ulBox.hide();
+               } else {
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");
+                       ulBox.show();
+               }
+               setIcoArrText($that);
+       });
+
+       sItem.hover(function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+               $(this).find("a").eq(0).addClass("bov");
+       },function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+                $(this).find("a").eq(0).removeClass("bov");
+
+       });
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+       // 롤링할 객체를 변수에 담아둔다.
+       var el = $('#'+container).find('#'+objectId);
+       var lastChild;
+       var speed = 3000;
+       var timer = 0;
+       var autoplay = false;
+
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
+       el.data('animating',false);
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
+
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
+
+       if(arguments.length==4){
+               el.data('autoStart', auto);
+       }
+
+       if(el.data('autoStart')){
+               if(timer==0){
+                       timer = setInterval(moveNextSlide, speed);
+                       autoplay = true;
+               }
+       }
+
+       el.bind({
+               mouseenter:function(){
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+       el.data('prev').bind({
+               click:function(e){
+                       e.preventDefault();
+                       movePrevSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+       el.data('next').bind({
+               click:function(e){
+                       e.preventDefault();
+                       moveNextSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       function movePrevSlide(){
+               if(!el.data('animating')){
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
+               
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+    function moveNextSlide(){
+               if(!el.data('animating')){
+                       el.data('animating',true);
+
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
+
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+}
+
+function fn_slide(options){
+
+       var opts = jQuery.extend({},options);
+
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
+       var auto = false;
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+       var time;
+
+
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
+       effect = opts.effect;
+       auto = opts.auto;
+
+       if(auto){
+               time = setTimeout('slideShow()',3000);
+       }
+
+       slideShow = function(){
+
+               if(current < len-1){
+                       current++;
+               }else{
+                       current=0;
+               }
+
+               controllStatus();
+
+               moveControl('next');
+
+               time = setTimeout('slideShow()',3000);
+       }
+
+       controllStatus = function(){
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+               if(current>0||current<len-1){                           
+                       $prev.show();
+                       $next.show();
+               }
+               if(current==0){
+                       $prev.hide();
+                       $next.show();
+               }
+               if(current>=len-1){
+                       $prev.show();
+                       $next.hide();
+               }
+       }
+
+       moveControl = function(msg){
+               if(opts.bt!=null){
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
+               }
+
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                       $obj.children().hide();
+                       $obj.children().eq(current).show();
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                       $obj.animate({'left':'-'+size*current},'slow');
+               }
+       }
+
+       $obj.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               }
+       });
+
+       //롤링 버튼 클릭시
+       $bt.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
+
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+                       controllStatus();
+
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                               $obj.children().hide();
+                               $obj.children().eq(current).show();
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                               $obj.animate({'left':'-'+size*current},'slow');
+                       }
+
+                       // 모든 롤링 버튼을 비활성화
+                       $bt.each(function(){
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');
+                                $(this).find('img').attr('src',source);
+                       });
+
+                       // 선택한 롤링버튼을 활성화
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+
+                       return false;
+               }
+       });
+
+       //이전 버튼 클릭시
+       $prev.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
+                       current--;                                                      //이미지 인덱스값 1씩 감소
+
+                       moveControl('prev');
+
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+                       return false;
+               }
+       });
+
+       //다음 버튼 클릭시
+       $next.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       current++;                                                      //이미지 인덱스값 1씩 증가
+                       
+                       moveControl('next');
+
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+                       return false;
+               }
+       });
+
+}
+
+// main rolling banner
+function slideMotion1(){
+       var $banner = $('#rolling .motionview'),
+               //$nav = $('#rolling ul.nav'),
+               banner = {prev:null, next:null},
+               size = $banner.children().length;
+               index = 1,
+               speed = 3000,
+               timer = null,
+               auto = true,
+               width = parseInt(100/size),
+               rest = parseInt(100%size);
+
+       var $nav = $('<ul class="nav">').insertAfter($banner);
+
+       $banner.children().each(function(index){
+               index++;
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+               if(index==size){
+                       $nav.children().eq(-1).find('a').css('background-image','none');
+               }
+       });
+
+       if(rest>0){
+               width+=rest;
+               $nav.children().eq(-1).css('width',width+'%');
+       }
+
+       $nav.delegate("li",'click',function(){
+               var idx = $nav.children().index(this);
+               index = idx;
+               banner.prev = $banner.find('a.active');
+               banner.next = $banner.find('a').eq(index);
+
+               clearInterval(timer);
+               auto = false;
+               
+               $nav.trigger('change.banner',banner)
+                       .trigger('change.tab',index);
+
+               return false;
+       });
+
+       $nav.bind('change.banner',function(event, banner){
+               aniMotion();
+       });
+
+       $nav.bind('change.tab',function(event, index){
+               $nav.children().find('a').removeClass('sel');
+               $nav.children().eq(index).find('a').addClass('sel');
+       });
+
+       timer = setInterval(autoMotion, speed);
+
+       function autoMotion(){
+               if(index > size-1) index = 0;
+
+               aniMotion();
+       }
+
+       function aniMotion(){
+               if(auto){
+                       banner.prev = $banner.find('a.active');
+                       banner.next = $banner.find('a').eq(index);
+
+                       $nav.children().find('a').removeClass('sel');
+                       $nav.children().eq(index).find('a').addClass('sel');
+               }
+               banner.prev.addClass('last-active');
+               banner.next.css({'opacity':0.0})
+                       .addClass('active')
+                       .animate({'opacity':1.0}, 1000, function(){
+                               banner.prev.removeClass('active last-active');
+
+                               if(auto){
+                                       index++;
+                               }else{
+                                       index++;
+                                       timer = setInterval(autoMotion, speed*1.5);
+                                       auto = true;
+                               }
+                       });
+       }
+}
+
+// forum list show or hide function
+function toggleFunc(){
+       
+       var defaulNum = [2];
+
+       $('.forum-tit').each(function(){
+               var self = $(this);
+
+               var idx = $('.forum-tit').index(this);
+
+               for(i=0;i<=defaulNum.length;i++){
+                       if(idx==defaulNum[i]){
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+                               self.find('a.toggle').css('background-image',source);
+
+                               self.find('a.toggle').text('Show');
+                               self.addClass('mb35').next().hide();
+                       }
+               }
+
+               self.find('a.toggle').click(function(){
+                       
+                       if(self.next().is(':visible')){
+                               var source = $(this).css('background-image').replace('.gif','_.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Show');
+                               self.addClass('mb35').next().hide();
+                       }else{
+                               var source = $(this).css('background-image').replace('_.gif','.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Hide');
+                               self.removeClass('mb35').next().show();
+                       }
+
+                       return false;
+
+               });
+
+       });
+}
+
+// 파일 업로드
+function fileUpload( width ){
+       //var $img = $('.attach input[type=image]');
+       //var width = $img.attr('width');
+
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+       var $file = $('.attach input.upload').css({
+               "position": "absolute",
+               "top": "0px",
+               "right": "0px",
+               "width": w,
+               "cursor": "pointer",
+               "opacity": "0.0",
+               "height": "23px"
+       });
+       $file.off('change');
+       $file.on('change',function(e){
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+                       return;
+               }
+               var idx = $file.index(this);
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+               var fileErrMsg = {
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+                           ,ext_ko : "지원하지 않는 확장자 입니다."
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"
+                           ,ext_en : "File extention not allowed for upload."
+               };
+               var initFileInput = function(obj) {
+                       $(obj).parent().find('input.file').val("");
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
+                       else $(obj).val("");
+               };
+               
+               var filename = $(this).val();
+               
+               //CHK File ext
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+                                     , "jpg", "png", "zip"];
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+               var findFlag = false;
+               for(var i = 0; i < imgExts.length; i++) {
+                       if(imgExts[i] == fileExt) {
+                               findFlag = true;
+                               break;
+                       }
+               }
+       
+               if(findFlag == false) {
+                       alert( fileErrMsg["ext_" + localeCode] );
+                       initFileInput(this);
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+                       return;
+               }
+               
+               //CHK File Size
+               if(
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
+                               || $.browser.mozilla //FF
+                               || $.browser.safari //Chrome
+               )
+               {
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+                       if( filesize > 200 ) {
+                               alert( fileErrMsg["limit_" + localeCode] );
+                               initFileInput(this);
+                               return;
+                       }
+               }
+               
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+       });
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+       if(!arguments.length) return false;
+       
+       var bt = $('#'+args.bt);
+       var obj = $('#'+args.obj);
+
+       var source = bt.css('background-image');
+       
+       if(obj.is(':visible')){
+               obj.hide();
+       }
+
+       bt.toggle(function(){
+               var src = source.replace('.gif','_.gif');
+               bt.css('background-image', src);
+               obj.show();
+               
+               return false;
+       },function(){
+               var src = source.replace('_.gif','.gif');
+               bt.css('background-image', src);
+               obj.hide();
+
+               return false;
+       });
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+  var $self = $(this);
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+  
+  $self.find('a').bind('click',function(){
+   $("#selArea ul").hide();
+   /*
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+   $answer.hide().find('.conts').hide();
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+   */
+
+   /* 20120822 hjh modify*/
+   /* if ( this open )?  close : all close, e.target open */
+   var cutTtl  = $(this).parent().children("div").html();
+   var ttl     = $(this).parent().parent().children("td.real_question").html();
+   
+   if($(this).parents('tr').next().find('.answer').is(':visible')){
+    $(this).html(cutTtl);
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+     $answer.hide();
+    });
+   }else{
+    titleInit();
+    $(this).html(ttl);
+    $answer.hide().find('.conts').hide();
+    //$answer.slideUp('normal').find('.conts').hide();
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
+   }   
+
+   return false;
+  });
+ });
+
+ $answer.each(function(){
+  var $self = $(this);
+
+  $(this).find('a.bt-close-faq').bind('click',function(){
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");
+   var cutTtl      = question_td.children("div").html();
+   question_td.children("a").html(cutTtl);
+   
+   $self.find('.conts').slideUp('fast',function(){
+    $self.hide();
+   });
+
+   return false;
+  });
+ });
+ 
+ var titleInit = function() {
+  $question.each(function(i) {
+   $(this).find("a").html($(this).find("div").html());
+  });
+ }
+}
+
+
+
+/**
+ *  쓰기페이지 Tab 영역 컨트롤
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+       var tabs = $('.tab-list').find("li");
+       var elements = $( selector );
+
+       $( elements ).each( function( i ) {
+               if( i != 0 )
+               {
+                       $(this).hide();
+               }
+       })
+
+       // Control Tabs
+       $( tabs ).each( function( i ) {
+               $( this ).click( function(){
+                       resetClass();
+
+                       $( this ).find( 'a' ).addClass( "sel" );
+                       $( elements[i] ).show();
+
+                       return false;
+               });
+       });
+
+       // Class 리셋
+       function resetClass()
+       {
+               $( tabs ).each( function( i ) {
+                       $( this ).find( 'a' ).removeClass( 'sel' );
+               });
+
+               $( elements ).each( function( i ) {
+                       $( this ).hide();
+               });
+       }
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn            = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    $("a.remove-btn").eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ obj.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ 
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile    = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj       = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+  var firstCompFile = compFile.eq(0);
+  firstCompFile.prev().prev().val("");
+  if ($.browser.msie) {
+               $(obj).parent().find('input.file').val("");
+               firstCompFile.replaceWith( firstCompFile.clone(true) );
+       } else {
+               firstCompFile.val("");
+               firstCompFile.prev().prev().val("");
+  }
+ } else {
+  obj.parent().remove();
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+  
+  //add-btn event..
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+ 
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+ 
+ setTimeout(function() {
+  $("#" + id).focus();
+ }, 100);
+ 
+ $("#" + id).on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   var that = $(this);
+   setTimeout(function() {
+    that.prev().focus();
+   }, 1);
+  }
+ });
+ 
+ $("#" + id).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/** 
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );
+ 
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+ 
+ inputFile.on("keydown", function(e) {
+  var that = $(this);
+  
+  if(e.which == 9 && e.shiftKey) {
+   return true;
+  }
+  
+  if(e.which === 9) {
+   e.preventDefault();
+   setTimeout(function() {
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ inputFile.on("focusin", function(e) {
+  $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+  $(this).parent().css("outline", "");
+ });
+ 
+ firstAddAction(btnFileAttach, limit, w, btnName);
+ 
+ /*
+ btnFileAttach.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    inputFile.focus();
+   }, 1);
+  }
+ });
+ 
+ btnFileAttach.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ */
+ /**
+  *  2012-08-08 전종호 추가
+  *  파일 Input Text 영역 너비를 잡아주는 메서드
+  */
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+ 
+ $("#" + removeBtnId).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/** 
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+       var isCompareView=false;
+       $("#devicespecs-list > li").each( 
+               function(i){ 
+                       $(".info", this).bind("click", devicespecsListInfoToggle);
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);
+                       
+                       //detail info layer toggle function
+                       function devicespecsListInfoToggle (){
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+                               return false;
+                       }
+       });
+
+
+       /* DEVICE COMPARE 열리는 부분
+       - defualt : close. 
+       - 최초 한번만 열림 
+       - 현재는 compare 버튼에 공통으로 함수 바인딩
+       */
+       function devicespecsCompareOnOff (){
+               if ( isCompareView ) return;
+               var ww = ( isCompareView ) ? "30px":"207px";
+               $("#devicespecs-compare").animate({
+                   height: ww }, 300, "linear", function(){ });
+
+               isCompareView = ( isCompareView ) ? false:true;
+               return false;
+       }
+
+       //compare 버튼 공통으로 클릭 이벤트 걸림 
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/** 
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+       var isImgView = false;
+       var isView = 0;
+       
+       //thumbnail overevent bind
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+       focusDeviceDetail (1);
+       
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.type === "keydown" && e.which == 9) {
+                       setTimeout(function() {
+                               $("#img-viewer-handle a").eq(0).focus();        
+                       }, 1);
+               }
+       });
+       
+       //thumbnail viewarea controll handler bind
+       $("#img-viewer-handle").click(function () {
+               var ww;
+               var src = $("#img-viewer-handle img").attr("src");
+               if ( isImgView ){
+                       ww = "300px";
+                       src = src.replace(".gif", "_.gif");
+                       $("#img-viewer-thumbnail").hide();
+                       $("#device-info").show();
+               }else{
+                       ww = "730px";
+                       src = src.replace("_.gif", ".gif");
+                       $("#img-viewer-thumbnail").show();
+                       $("#device-info").hide();
+                       focusDeviceDetail(1);
+               }
+               
+               $("#img-viewer-handle img").attr("src", src);
+       $("#img-viewer").animate({
+                   width: ww
+                       }, 300, "linear", function(){
+                       if($.browser.msie)
+                               $("#img-inner").css("width", ww);
+               });
+               
+       isImgView = ( isImgView ) ? false:true;
+    });
+
+       //thumbnail overevent function (update date 2012.09.05 kangki)
+       function focusDeviceDetail ( id ) {
+               if ( isView == id ) return;
+
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+               $( "#img-viewer-bic > img").attr("src", imgSrc);
+               isView = (id);          
+       }
+
+       /*toggle devicespecs List*/
+       if($('div#contents').find('.devicespec-tit').length){
+               
+               $('.devicespec-tit').each(function(){
+                       var self = $(this);
+                       $('a', self).bind ("click", fnToggle);
+
+                       function fnToggle(){
+
+                               if ( $(this).parent().parent().next().is(':visible') ){
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+                                       self.find('em').text('Show');
+                                       self.next().hide();
+
+                                       return false;
+                               }else{
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+                                       self.find('em').text('Hide');
+                                       self.next().show();
+
+                                       return false;
+                               }
+                       }
+                                                       
+               });
+       }
+
+       /*all Show Hide devicespecs List*/
+       if($('div#contents').find('.devicespecs-util').length){
+               var self = $('div#contents').find('.devicespecs-util');
+
+               $('.showA', self).bind ("click", function (){
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( !me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+                                       me.find('em').text('Hide');
+                                       me.next().show();
+                               }
+                       });
+                       return false;
+               })
+               $('.hideA', self).bind ("click", function (){
+                       
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+                                       me.find('em').text('Show');
+                                       me.next().hide();
+                               }
+                                                               
+                       });
+                       return false;
+               })
+       }       
+}
+
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+       var focusTarget = "input";
+
+       $("#searchInput").bind("keydown", checkSearchText);
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+
+       $(".autocomplete").mouseleave(function(){
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".autocomplete").css("visibility", "visible");
+
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+
+                       var hei = $(".autocomplete").find('>ul').outerHeight();
+                       if(hei>400){
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+                       }
+               }
+               else{
+                       $(".autocomplete").css("visibility", "hidden");
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+ */
+
+function setTopScroll(selector) {
+       if ( !selector ) return false;
+       var btn = $( selector );
+       var w = $( window );
+       btn.css( "position", "absolute" );
+
+
+       btn.click( function(){ w.scrollTop( 0 ) } );
+
+       var wheight = w.innerHeight();
+       
+       $(window).resize( function() {
+               wheight = w.innerHeight();
+               redraw();
+       });
+
+       $(window).scroll( function() {
+               redraw();
+       })
+
+       /**
+        *      Top 버튼의 재정렬 메서드
+        */
+       function redraw()
+       {
+               var t = w.scrollTop() + wheight - 289;
+
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {
+                       t = wheight / 2;
+               }
+               
+               btn.clearQueue();
+
+               btn.animate({
+           top: t
+               }, 500, function() {
+           // Animation complete.
+               });
+               //btn.css( "top", t );
+               //console.log( "target : " + t );
+       }
+
+       redraw();
+       /*
+       obj.initTop = position;
+       obj.topLimit = topLimit;
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+       obj.style.position = "absolute";
+       obj.top = obj.initTop;
+       // obj.left = obj.initLeft;
+
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
+               obj.getTop = function() {
+                       return window.pageYOffset;
+               }
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+               obj.getTop = function() {
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+               }
+       } else {
+               obj.getTop = function() {
+                       return 0;
+               }
+       }
+
+       if ( self.innerHeight ) {       //WebKit
+               obj.getHeight = function() {
+                       return self.innerHeight;
+               }
+       } else if( document.documentElement.clientHeight ) {
+               obj.getHeight = function() {
+                       return document.documentElement.clientHeight;
+               }
+       } else {
+               obj.getHeight = function() {
+                       return 500;
+               }
+       }
+
+       obj.move = setInterval( function() {
+               if ( obj.initTop > 0 ) {
+                       pos = obj.getTop() + obj.initTop;
+               } else {
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
+               }
+
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+               if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+               interval = obj.top - pos;
+               obj.top = obj.top - interval / 3;
+               obj.style.top = obj.top + "px";
+       }, 30 )
+       */
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){ 
+       var x,y; 
+       if (window.innerHeight) { // IE 외 모든 브라우저 
+               x = (screen.availWidth - self.innerWidth) / 2; 
+               y = (screen.availHeight - self.innerHeight) / 2; 
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
+               x = (screen.availWidth - document.body.clientWidth) / 2; 
+               y = (screen.availHeight - document.body.clientHeight) / 2; 
+       } 
+       window.moveTo(x,y); 
+}
+
+// Layer Popup Open
+function layer_open(el){
+       var temp = $('#' + el);
+
+       if(!temp.hasClass('sty2')){
+               $('.layer').fadeIn();
+       }
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       if(temp.hasClass('sty2')){
+               temp.fadeIn();
+
+               temp.find('a.cbtn').click(function(e){
+                       temp.fadeOut();
+               });
+               temp.find('a.gbtn').click(function(e){
+                       temp.fadeOut();
+               });
+
+               return false;
+       }
+       // 닫는 버튼 gbtn-c 추가 20130627
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+               $('.layer').fadeOut();
+               return false;
+       });
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+       var temp = $('#' + el);
+       $('input').attr('disabled', 'disabled');
+       $('.layerPop').fadeIn();
+       
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+               $('.layerPop').fadeOut();
+               $('input').removeAttr('disabled');
+               return false;
+       });
+}
+
+
+function pop_account(url){
+       window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+       window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/** 
+ *  [PAGE] Tags
+ *  date : 20120820
+ *  author : 전종호
+ */
+function initTags()
+{
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+       // 마지막 아이템은 제외
+       var eleArr = $(".tag-list").find("li");
+
+       $( eleArr ).each( function( i ) {
+               if( i < eleArr.length - 1 )
+               {
+                       var target = $(this).find("a")[0];
+                       var content = $( target ).html();
+
+                       $( target ).html( content + "," );
+               }
+       })
+}
+
+$(document).ready(function(){
+       $(".tip_info").css("cursor","pointer");
+       $(".tip_info > img").mouseover(function(){
+               $(".tip_cont").css("display","block");
+       });
+       $(".tip_info > img").mouseout(function(){
+               $(".tip_cont").css("display","none");
+       });
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+       var $L = $("#" + id) ;
+       var $D  = $("#" + id + "down") ;
+
+       $T = $("#" + id) ;
+
+       $L.show();
+       isPopup = true ;
+
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+       $("#" + id + "agree").focus() ;
+
+       jQuery(":focusable").focusin(function(e){
+               if (isPopup) {
+                       e.stopPropagation() ;
+                       if ($L.find(jQuery(this)).length > 0) {
+                       } else {
+                               jQuery(this).blur() ;
+                               jQuery("#" + id + " :focusable:first").focus() ;
+                       }
+               }
+       }) ;
+
+       $L.find('.close').click(function(){
+               resetPopup(id) ;
+       });
+
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+       $("#" + T + "down").hide();
+       $("#" + T + "agree").attr("checked", false) ;
+       isPopup = false ;
+       $("#" + T).hide() ;
+       $("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+       if ($("#" + T + "agree").is(':checked')) {
+               commonDownloadLog(F, I) ;
+               resetPopup(T) ;
+       }
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+       if ( "area" === nodeName ) {
+               map = element.parentNode;
+               mapName = map.name;
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+               img = $( "img[usemap=#" + mapName + "]" )[0];
+               return !!img && visible( img );
+       }
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+                       visible( element ) ;
+}
+
+function visible( element ) {
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+               return $.css( this, "visibility" ) === "hidden";
+       }).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device1').hide();
+       
+       $('#thumb_view_btn').hover(function() {
+               $('.view_device1').show();
+       },function() {
+               $('.view_device1').hide();
+       });
+               
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device2').hide();
+       
+       $('#thumb_view_btn2').hover(function() {
+               $('.view_device2').show();
+       },function() {
+               $('.view_device2').hide();
+       });
+               
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+       var $L = $("#" + popId) ;
+       $L.show(100);
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+       $L.find('.close').click(function(){
+               $L.hide();
+       });
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
diff --git a/org.tizen.tutorials/html/scripts/core.js b/org.tizen.tutorials/html/scripts/core.js
new file mode 100644 (file)
index 0000000..68dea4c
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10. 
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+       if (!seperator) seperator = '-';
+
+       date = $.SD.replaceAll(date, seperator, '');
+       date = $.SD.replaceAll(date, '/', '');
+
+       if (date.length !== 8) return null;
+       
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+       if (date.valueOf().toString() === 'NaN') return null;
+
+       return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+       if (!seperator) seperator = '/';
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+       var str, dateString = date.getFullYear();
+
+       str             = "0" + (date.getMonth()+1);
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+       str             = "0" + date.getDate();
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+
+       return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+       var tnum    = num + "";
+       var tarr    = new Array();
+       var dot     = "";
+       var idxDot  = tnum.indexOf(".");
+       var sign    = "";
+       var tinx    = 0;
+       var fnum    = tnum;
+        
+       
+       if(idxDot > -1) {
+               fnum = tnum.substring(0, idxDot);
+               dot  = tnum.substring(idxDot);
+               tnum = fnum;
+       } 
+       
+       if(tnum.indexOf("-") > -1) {
+               fnum = tnum.substring(1);
+               sign = tnum.substring(0, 1);
+       }
+       
+       for(var inx = fnum.length; inx > 0; ) {
+               tarr[tinx++] = fnum.substring(inx, inx - 3);
+               inx = inx - 3;
+       }
+       
+       return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+       doAjax : function (json) {
+               var param = {
+                       async : json.async,
+                       type : json.type,
+                       dataType : json.dataType,
+                       cache: json.cache,
+                       timeout : json.timeout,
+                       success : json.success,
+                       error : json.error
+               };
+
+               if (param.dataType === 'jsonp') {
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+               } else {
+                       param.url = json.url;
+                       param.data = json.data;
+               }
+               $.ajax(param);
+       },
+       
+       get : function (json) {
+               $.SD.ajax.doAjax({ 
+                       url:json.url,
+                       cache:json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'get', 
+                       dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       },
+       
+       post : function (json) {
+               $.SD.ajax.doAjax({ url:json.url,
+                       cache: json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'post', dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       }
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+       
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/[0-9]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+               return false;
+       }
+       
+       return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+       var scrollbars  = "no";
+       var resizeable  = "no";
+       
+       if(popObj.scrollbars) {
+               scrollbars = popObj.scrollbars; 
+       }
+       
+       if(popObj.resizeable) {
+               resizeable = popObj.resizeable;
+       }
+       
+       var width  = screen.width;
+       var height = screen.height;
+
+       var x = ( width / 2 ) - ( popObj.width / 2 );
+       var y = ( height / 2 ) - ( popObj.height / 2 );
+
+       var opt = "left=" + x +
+                 ",top=" + y +
+                 ",width=" + popObj.width +
+                 ",height=" + popObj.height +
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+                 ",scrollbars=" + scrollbars +
+                 ",resizable=" + resizeable;
+       var pop = window.open(popObj.url, popObj.target, opt);
+       if(pop) {
+               pop.focus();
+       }
+}
+
+$.SD.isValidDate = function(val) {
+       if(val.length != 8) {
+               return false;
+       }
+       
+       var yyyy = Number(val.substring(0, 4)); 
+       var mm   = Number(val.substring(4, 6));
+       var dd   = Number(val.substring(6));
+       
+       if( mm < 1 || mm > 12 ) {
+               return false;
+       }
+       
+       var endDay  = 0;
+       
+       if( mm == 2 ) {
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+                       endDay = 29;
+               } else {
+                       endDay = 28;
+               }
+               
+       } else {
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+               endDay = endDays[mm - 1];
+       }
+       
+       if( dd <= 0 || dd > endDay ) {
+               return false;
+       } 
+       
+       return true;
+       
+}
+
+$.SD.boardDownload = function(option, func) {
+       var jsonData = {
+               url: "/board/ajaxDwnldProc.do",
+               async: false,
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+                               //location.href = $(obj).attr("href");
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDwnldProc.do",
+               async: false,
+               data: {fileName: fileName, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               location.href = fileFullPath;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(target == 'new'){
+                                       window.open(fileFullPath, '');
+                               }else{
+                                       location.href = fileFullPath;
+                               }
+                               
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonAllShareClickCountProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+       var jsonData = {
+               url: "/common/ajaxCommonClickCountProc.do",
+               data: {categoryName: categoryName, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+       var resultSize = 0;
+       if(str == null){
+               return 0;
+       }
+       for(var i=0; i<str.length; i++){
+         var c = escape(str.charAt(i));
+         if(c.length == 1){
+                 resultSize ++;
+         }     else if(c.indexOf("%u") != -1) {
+                 resultSize += 2;
+         }     else if(c.indexOf("%") != -1) {
+                 resultSize += c.length/3;
+         }
+       }
+       return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+       var tempStr = new String(str);
+       var len = 0;
+       for ( var i = 0; i < str.length; i++) {
+               var c = escape(str.charAt(i));
+               if (c.length == 1)
+                       len++;
+               else if (c.indexOf("%u") != -1)
+                       len += 2;
+               else if (c.indexOf("%") != -1)
+                       len += c.length / 3;
+               if (len > limit) {
+                       tempStr = tempStr.substring(0, i);
+                       break;
+               }
+       }
+       return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/** 
+ * Method pagination 
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+       var info = {
+                        prev : 1
+                       ,first : 1
+                       ,begin : pageInfo.begin - 0
+                       ,current : pageInfo.current - 0
+                       ,end : pageInfo.end - 0
+                       ,last : pageInfo.last - 0
+                       ,next : 1
+               },
+               target  = this, 
+               page    = $('<span class="page"></span>'),
+               prev    = "", 
+               next    = "", 
+               i               = 0, 
+               n               = 0;
+
+       info.begin       = info.begin < 1 ? 1 : info.begin;
+       info.current = info.current < 1 ? 1 : info.current;
+       info.end         = info.end < 1 ? 1 : info.end;
+       info.last        = info.last < 1 ? 1 : info.last;
+
+       info.prev = info.current - 1;
+       info.next = info.current + 1;
+
+       target.addClass("pageNumber");
+       target.addClass("mt20");
+       target.children().remove();
+
+       if (info.first < info.begin) {
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.first);
+               }));
+       }
+
+       if (info.prev >= info.first) {
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.prev);
+               }));
+       }
+
+       i = info.begin;
+       n = info.end;
+       for(; i <= n; i++) {
+               if (i === info.current) {
+                       page.append('<strong>'+i+'</strong>');
+               } else {
+                       (function(index){
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+                                       e.preventDefault();
+                                       func(index);
+                               }));
+                       })(i);
+               }
+       }
+
+       target.append(page);
+
+       if (info.next <= info.last) {
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.next);
+               }));
+       }
+       
+       if (info.last > info.end) {
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.last);
+               }));
+       }       
+};
+
+/**
+ *  Method : popup Show Hide 
+ */
+$.fn.popupShow = function(options) {
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);
+       
+       if($("body div#" + opts.maskId).size() == 0) {
+               $("body").append("<div id='" + opts.maskId + "'></div>");
+               $("#" + opts.maskId).css({
+                       "position" : "absolute",
+                       "left"     : "0",
+                       "top"      : "0",
+                       "z-index"  : "9000",
+                       "background-color" : "#000",
+                       "display"  : "none"
+               });
+       }
+       
+       var mask_layer  = $("#" + opts.maskId);
+       var popup_layer = $(this);
+       
+       popup_layer.css("z-index", "9999");
+       
+       var maskHeight = $(document).height();
+       var maskWidth = $(window).width();
+       
+       mask_layer.css({'width':maskWidth,'height':maskHeight});
+       
+       mask_layer.fadeIn(opts.fadeSec);
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);
+       
+       var winH = $(window).height();
+       var winW = $(window).width();
+       
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+       
+       popup_layer.fadeIn(opts.fadeSec);
+       
+       var init_num = 0;
+       
+       if(init_num == 0) {
+               mask_layer.click(function() {
+                       $(this).hide();
+                       popup_layer.hide();
+               });
+               
+               
+               $("#" + opts.closeId).click( function(e) {
+                       e.preventDefault();
+                       popup_layer.popupHidden(opts.maskId);
+               });
+               
+               
+               $(window).resize( function() {
+                       var maskHeight = $(document).height();
+                       var maskWidth  = $(window).width();
+                       var winH       = $(window).height();
+                       var winW       = $(window).width();
+                       
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});
+                       
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+               });
+               
+               init_num++;
+       }
+};
+
+$.fn.popupHidden = function(maskId) {
+       var id = "#";
+       
+       if(maskId) {
+               id = id + maskId;
+       } else {
+               id = id + $.fn.popupShow.defaults.maskId; 
+       }
+       
+       $(id).hide();
+       $(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+       speed : "slow",
+       fadeLow : 0.8,
+       fadeSec : 100,
+       maskId  : "mask",
+       popupId : "layer-pop",
+       closeId : "layer-pop-close"
+};
+
+/**
+ *  Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+       var that = this;
+       var target = null;
+
+       that.each(function (i, item) {
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+               if (filePath != "") {
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+                       if (!imgExts[fileExt]) {
+                               target = item;
+                               return false;
+                       }
+               }
+       });
+
+       return target;
+}      
+
+/**
+ *  Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+       return this.optional(element) 
+              || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+    var label = $(this).data('label');
+    
+    /*
+    if (event && event.type === 'focusin') {
+      label.hide();
+    } else if (event && event.type === 'focusout') {
+      label.css('opacity', options.placeholderOpacity);
+    }
+    */
+    
+    if (event && event.type !== 'keydown') {
+      toggleLabel(this, label);
+    } else {
+      // Use timeout to catch val() just after the key is pressed
+      // Using keyup is too slow.   
+      (function(input) {
+        setTimeout(function() {
+          toggleLabel(input, label);
+        }, 0);
+      })(this);
+    }
+    
+    if (event && event.type === 'focusin') {
+       label.hide();
+    }
+  };
+  
+  var toggleLabel = function(input, label) {
+    if ($(input).val()) {
+      label.hide();
+    } else {
+      label.show();
+    }
+  };
+
+  $.fn.stickyPlaceholders = function(options) {
+    var defaults = {
+      wrapperClass: 'sticky-placeholder-wrapper',
+      wrapperDisplay: 'block',
+      labelClass: 'sticky-placeholder-label',
+      placeholderAttr: 'placeholder',
+      dataAttr: 'data-sticky-placeholder',
+      placeholderColor: '#000',
+      placeholderOpacity: 0.5,
+      placeholderFocusOpacity: 0.25
+    };
+    options = $.extend(defaults, options);
+
+    return this.each(function() {
+      var input       = $(this),
+          placeholder = input.attr(options.placeholderAttr),
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+          labelStyle;
+
+      // store a reference to each input's label
+      input.data('label', label);
+
+      // remove the placeholder attribute to avoid conflcits
+      input.removeAttr('placeholder');
+      
+      // If the dataAttr is set and it's not equal to the placeholderAttr
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+        input.attr('data-sticky-placeholder', placeholder);
+      }
+
+      labelStyle = {
+        'color': options.placeholderColor,
+        'cursor': 'text',
+        'font-family': input.css('font-family'),
+        'font-weight': input.css('font-weight'),
+        'font-size': input.css('font-size'),
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+        'opacity': options.placeholderOpacity,
+        'padding-left': input.css('padding-left'),
+        'padding-top': input.css('padding-top'),
+        'position': 'absolute',
+        'text-transform': input.css('text-transform'),
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+      };
+      label.css(labelStyle);
+      
+      // hide the placeholder if the input already has a value
+      if (input.val()) {
+        label.hide();
+      }
+
+      $(this).bind('keydown input focusin focusout', function(event) {
+        $.SD.alterParent.call(this, options, event);
+      });
+        
+      // prevent click/dblclick from selecting the label text
+      label.bind('mousedown', function(e) {
+        e.preventDefault();
+      });
+      
+      // call alterParent initially without an event to set up the wrapper elements
+      $.SD.alterParent.call(this, options);
+    });
+  };
+ 
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+       $("#" + file_id).on("keydown", function(e) {
+               var that = $(this);
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.which === 9) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + after_id).focus();
+                       }, 1);
+               }
+       });
+       
+       $("#" + after_id).on("keydown", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + file_id).focus();
+                       }, 1);
+               }
+       });
+}  
+
+$.SD.closeWP = function() {
+       var Browser = navigator.appName;
+       var indexB = Browser.indexOf('Explorer');
+       if (indexB > 0) {
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);
+           window.opener.focus();
+           if (Version >= 7) {
+               window.open('', '_self', '');
+               window.close();
+           }
+           else if (Version == 6) {
+               window.opener = null;
+               window.close();
+           }
+           else {
+               window.opener = '';
+               window.close();
+           }
+       }
+       else {
+           window.close();
+       }
+}
+
+$.SD.profileFacebook = function() {
+       location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+        switch($(this).attr('id')) {
+        case 'changeEn': onClickChangeEn(e);  break;
+        case 'changeZh': onClickChangeZh(e); break;
+        case 'changeKo': onClickChangeKo(e); break;
+        case 'signOut': onClickSignOut(e); break;
+        case 'signUp': onClickSignUp(e); break;
+        case 'signIn': onClickSignIn(e); break;
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+        case 'signOff': onClickSignOff(e); break;
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+        case 'deleteAccount' : onClickDeleteAccount(e); break;
+        }
+});
+ 
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+       e.preventDefault();
+       var $this = $(this);
+       
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+               var sns = $this.attr("id").substring(4).toLowerCase();
+               switch(sns) {
+               case "facebook" :
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+                       $("div.content img").each(function() {
+                               var that = $(this);
+                               if(that.width() > 200 && that.height() > 200) {
+                                       imgUrl = that.attr("src");
+                                       return false;
+                               }
+                       });
+                       
+                       var data = {
+                               app_id : $("#sd_appId").text(),
+                               link : copyUrl,
+                               picture : imgUrl,
+                               name : $("title").text(),
+                               caption : "developer.samsung.com",
+                               description : $("div.content p").eq(0).text(),
+                               redirectUri : "http://" + location.host + "/board/sns.do"
+                       };
+                       var url = "https://www.facebook.com/dialog/feed?" ;
+                       url += "app_id=" + data.app_id + "&" ;
+                       url += "link=" + data.link + "&" ;
+                       url += "picture=" + data.picture + "&" ;
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;
+                       url += "redirect_uri=" + data.redirectUri ;
+                       sendSNS(sns, url, 850, 600);
+                       break;
+               case "twitter" :
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+                       break;
+               }
+       }
+       
+       function sendSNS(sns, url, iWidth, iHeight) {
+               var popObj = { url : url
+                                    , width : iWidth
+                                    , height: iHeight
+                                    , target: sns
+                                    , scrollbars: "yes"
+                                    , resizeable: "yes"};
+       
+               $SD.popupCenter(popObj);
+       }
+})
+ 
+//document rady End #########################################
+ });
+
+;(function(){
+       window.deviceImageError = function(el) {
+               var noImage = noImage || '/images/common/device_details_noimage.gif';
+               if (el.src === noImage) 
+                       return;
+               el.src = noImage;
+       };
+})();
+
+function commonDownload(fileName, categoryId){
+       if (fileName == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!!!")
+               return;
+       }else{
+               $SD.commonDownload(fileName, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+               });
+       }
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+/*
+function layer_view(id){
+
+       var $layer = $('#'+id);
+       var $down  = $('.license-layer').find('a#down');
+
+       $layer.show();
+       $layer.find('.close, #down').click(function(){
+               $layer.hide();
+       });
+
+       function countChecked() {
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
+       }
+
+       $(":checkbox").click(countChecked);
+}
+*/
diff --git a/org.tizen.tutorials/html/scripts/jquery.util.js b/org.tizen.tutorials/html/scripts/jquery.util.js
new file mode 100644 (file)
index 0000000..3fc3ad0
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
+ *          
+ *   class: Inside the class attribute, wrapped in curly braces: { }
+ *   
+ *   elem:  Inside a child element (e.g. a script tag). The
+ *          name parameter indicates *which* element.
+ *          
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ * 
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ * 
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ * 
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ * 
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+       metadata : {
+               defaults : {
+                       type: 'class',
+                       name: 'metadata',
+                       cre: /({.*})/,
+                       single: 'metadata'
+               },
+               setType: function( type, name ){
+                       this.defaults.type = type;
+                       this.defaults.name = name;
+               },
+               get: function( elem, opts ){
+                       var settings = $.extend({},this.defaults,opts);
+                       // check for empty string in single property
+                       if ( !settings.single.length ) settings.single = 'metadata';
+                       
+                       var data = $.data(elem, settings.single);
+                       // returned cached data if it already exists
+                       if ( data ) return data;
+                       
+                       data = "{}";
+                       
+                       if ( settings.type == "class" ) {
+                               var m = settings.cre.exec( elem.className );
+                               if ( m )
+                                       data = m[1];
+                       } else if ( settings.type == "elem" ) {
+                               if( !elem.getElementsByTagName )
+                                       return undefined;
+                               var e = elem.getElementsByTagName(settings.name);
+                               if ( e.length )
+                                       data = $.trim(e[0].innerHTML);
+                       } else if ( elem.getAttribute != undefined ) {
+                               var attr = elem.getAttribute( settings.name );
+                               if ( attr )
+                                       data = attr;
+                       }
+                       
+                       if ( data.indexOf( '{' ) <0 )
+                       data = "{" + data + "}";
+                       
+                       data = eval("(" + data + ")");
+                       
+                       $.data( elem, settings.single, data );
+                       return data;
+               }
+       }
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+       return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+       // http://docs.jquery.com/Plugins/Validation/validate
+       validate: function( options ) {
+
+               // if nothing is selected, return nothing; can't chain anyway
+               if (!this.length) {
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+                       return;
+               }
+
+               // check if a validator for this form was already created
+               var validator = $.data(this[0], 'validator');
+               if ( validator ) {
+                       return validator;
+               }
+
+               // Add novalidate tag if HTML5.
+               this.attr('novalidate', 'novalidate');
+
+               validator = new $.validator( options, this[0] );
+               $.data(this[0], 'validator', validator);
+
+               if ( validator.settings.onsubmit ) {
+
+                       var inputsAndButtons = this.find("input, button");
+
+                       // allow suppresing validation by adding a cancel class to the submit button
+                       inputsAndButtons.filter(".cancel").click(function () {
+                               validator.cancelSubmit = true;
+                       });
+
+                       // when a submitHandler is used, capture the submitting button
+                       if (validator.settings.submitHandler) {
+                               inputsAndButtons.filter(":submit").click(function () {
+                                       validator.submitButton = this;
+                               });
+                       }
+
+                       // validate the form on submit
+                       this.submit( function( event ) {
+                               if ( validator.settings.debug )
+                                       // prevent form submit to be able to see console output
+                                       event.preventDefault();
+
+                               function handle() {
+                                       if ( validator.settings.submitHandler ) {
+                                               if (validator.submitButton) {
+                                                       // insert a hidden input as a replacement for the missing submit button
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+                                               }
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );
+                                               if (validator.submitButton) {
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+                                                       hidden.remove();
+                                               }
+                                               return false;
+                                       }
+                                       return true;
+                               }
+
+                               // prevent submit for invalid forms or custom submit handlers
+                               if ( validator.cancelSubmit ) {
+                                       validator.cancelSubmit = false;
+                                       return handle();
+                               }
+                               if ( validator.form() ) {
+                                       if ( validator.pendingRequest ) {
+                                               validator.formSubmitted = true;
+                                               return false;
+                                       }
+                                       return handle();
+                               } else {
+                                       validator.focusInvalid();
+                                       return false;
+                               }
+                       });
+               }
+
+               return validator;
+       },
+       // http://docs.jquery.com/Plugins/Validation/valid
+       valid: function() {
+        if ( $(this[0]).is('form')) {
+            return this.validate().form();
+        } else {
+            var valid = true;
+            var validator = $(this[0].form).validate();
+            this.each(function() {
+                               valid &= validator.element(this);
+            });
+            return valid;
+        }
+    },
+       // attributes: space seperated list of attributes to retrieve and remove
+       removeAttrs: function(attributes) {
+               var result = {},
+                       $element = this;
+               $.each(attributes.split(/\s/), function(index, value) {
+                       result[value] = $element.attr(value);
+                       $element.removeAttr(value);
+               });
+               return result;
+       },
+       // http://docs.jquery.com/Plugins/Validation/rules
+       rules: function(command, argument) {
+               var element = this[0];
+
+               if (command) {
+                       var settings = $.data(element.form, 'validator').settings;
+                       var staticRules = settings.rules;
+                       var existingRules = $.validator.staticRules(element);
+                       switch(command) {
+                       case "add":
+                               $.extend(existingRules, $.validator.normalizeRule(argument));
+                               staticRules[element.name] = existingRules;
+                               if (argument.messages)
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+                               break;
+                       case "remove":
+                               if (!argument) {
+                                       delete staticRules[element.name];
+                                       return existingRules;
+                               }
+                               var filtered = {};
+                               $.each(argument.split(/\s/), function(index, method) {
+                                       filtered[method] = existingRules[method];
+                                       delete existingRules[method];
+                               });
+                               return filtered;
+                       }
+               }
+
+               var data = $.validator.normalizeRules(
+               $.extend(
+                       {},
+                       $.validator.metadataRules(element),
+                       $.validator.classRules(element),
+                       $.validator.attributeRules(element),
+                       $.validator.staticRules(element)
+               ), element);
+
+               // make sure required is at front
+               if (data.required) {
+                       var param = data.required;
+                       delete data.required;
+                       data = $.extend({required: param}, data);
+               }
+
+               return data;
+       }
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+       // http://docs.jquery.com/Plugins/Validation/blank
+       blank: function(a) {return !$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/filled
+       filled: function(a) {return !!$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/unchecked
+       unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+       this.settings = $.extend( true, {}, $.validator.defaults, options );
+       this.currentForm = form;
+       this.init();
+};
+
+$.validator.format = function(source, params) {
+       if ( arguments.length == 1 )
+               return function() {
+                       var args = $.makeArray(arguments);
+                       args.unshift(source);
+                       return $.validator.format.apply( this, args );
+               };
+       if ( arguments.length > 2 && params.constructor != Array  ) {
+               params = $.makeArray(arguments).slice(1);
+       }
+       if ( params.constructor != Array ) {
+               params = [ params ];
+       }
+       $.each(params, function(i, n) {
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+       });
+       return source;
+};
+
+$.extend($.validator, {
+
+       defaults: {
+               messages: {},
+               groups: {},
+               rules: {},
+               errorClass: "error",
+               validClass: "valid",
+               errorElement: "label",
+               focusInvalid: true,
+               errorContainer: $( [] ),
+               errorLabelContainer: $( [] ),
+               onsubmit: true,
+               ignore: ":hidden",
+               ignoreTitle: false,
+               onfocusin: function(element, event) {
+                       this.lastActive = element;
+
+                       // hide error label and remove error class on focus if enabled
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+                               this.addWrapper(this.errorsFor(element)).hide();
+                       }
+               },
+               onfocusout: function(element, event) {
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+                               this.element(element);
+                       }
+               },
+               onkeyup: function(element, event) {
+                       if ( element.name in this.submitted || element == this.lastElement ) {
+                               this.element(element);
+                       }
+               },
+               onclick: function(element, event) {
+                       // click on selects, radiobuttons and checkboxes
+                       if ( element.name in this.submitted )
+                               this.element(element);
+                       // or option elements, check parent select in that case
+                       else if (element.parentNode.name in this.submitted)
+                               this.element(element.parentNode);
+               },
+               highlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+                       } else {
+                               $(element).addClass(errorClass).removeClass(validClass);
+                       }
+               },
+               unhighlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+                       } else {
+                               $(element).removeClass(errorClass).addClass(validClass);
+                       }
+               }
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+       setDefaults: function(settings) {
+               $.extend( $.validator.defaults, settings );
+       },
+
+       messages: {
+               required: "This field is required.",
+               remote: "Please fix this field.",
+               email: "Please enter a valid email address.",
+               url: "Please enter a valid URL.",
+               date: "Please enter a valid date.",
+               dateISO: "Please enter a valid date (ISO).",
+               number: "Please enter a valid number.",
+               digits: "Please enter only digits.",
+               creditcard: "Please enter a valid credit card number.",
+               equalTo: "Please enter the same value again.",
+               accept: "Please enter a value with a valid extension.",
+               maxlength: $.validator.format("Please enter no more than {0} characters."),
+               minlength: $.validator.format("Please enter at least {0} characters."),
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+               range: $.validator.format("Please enter a value between {0} and {1}."),
+               max: $.validator.format("Please enter a value less than or equal to {0}."),
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")
+       },
+
+       autoCreateRanges: false,
+
+       prototype: {
+
+               init: function() {
+                       this.labelContainer = $(this.settings.errorLabelContainer);
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+                       this.submitted = {};
+                       this.valueCache = {};
+                       this.pendingRequest = 0;
+                       this.pending = {};
+                       this.invalid = {};
+                       this.reset();
+
+                       var groups = (this.groups = {});
+                       $.each(this.settings.groups, function(key, value) {
+                               $.each(value.split(/\s/), function(index, name) {
+                                       groups[name] = key;
+                               });
+                       });
+                       var rules = this.settings.rules;
+                       $.each(rules, function(key, value) {
+                               rules[key] = $.validator.normalizeRule(value);
+                       });
+
+                       function delegate(event) {
+                               var validator = $.data(this[0].form, "validator"),
+                                       eventType = "on" + event.type.replace(/^validate/, "");
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+                       }
+                       $(this.currentForm)
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +
+                                               "[type='range'], [type='color'] ",
+                                               "focusin focusout keyup", delegate)
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+                       if (this.settings.invalidHandler)
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/form
+               form: function() {
+                       this.checkForm();
+                       $.extend(this.submitted, this.errorMap);
+                       this.invalid = $.extend({}, this.errorMap);
+                       if (!this.valid())
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                       this.showErrors();
+                       return this.valid();
+               },
+
+               // 원본소스
+               /*
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               this.check( elements[i] );
+                       }
+                       return this.valid();
+               },
+               */
+
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+                                               this.check( this.findByName( elements[i].name )[cnt] );
+                                       }
+                               } else {
+                                       this.check( elements[i] );
+                               }
+                       }
+                       return this.valid();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/element
+               element: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+                       this.lastElement = element;
+                       this.prepareElement( element );
+                       this.currentElements = $(element);
+                       var result = this.check( element );
+                       if ( result ) {
+                               delete this.invalid[element.name];
+                       } else {
+                               this.invalid[element.name] = true;
+                       }
+                       if ( !this.numberOfInvalids() ) {
+                               // Hide error containers on last error
+                               this.toHide = this.toHide.add( this.containers );
+                       }
+                       this.showErrors();
+                       return result;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+               showErrors: function(errors) {
+                       if(errors) {
+                               // add items to error list and map
+                               $.extend( this.errorMap, errors );
+                               this.errorList = [];
+                               for ( var name in errors ) {
+                                       this.errorList.push({
+                                               message: errors[name],
+                                               element: this.findByName(name)[0]
+                                       });
+                               }
+                               // remove items from success list
+                               this.successList = $.grep( this.successList, function(element) {
+                                       return !(element.name in errors);
+                               });
+                       }
+                       this.settings.showErrors
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+                               : this.defaultShowErrors();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+               resetForm: function() {
+                       if ( $.fn.resetForm )
+                               $( this.currentForm ).resetForm();
+                       this.submitted = {};
+                       this.lastElement = null;
+                       this.prepareForm();
+                       this.hideErrors();
+                       this.elements().removeClass( this.settings.errorClass );
+               },
+
+               numberOfInvalids: function() {
+                       return this.objectLength(this.invalid);
+               },
+
+               objectLength: function( obj ) {
+                       var count = 0;
+                       for ( var i in obj )
+                               count++;
+                       return count;
+               },
+
+               hideErrors: function() {
+                       this.addWrapper( this.toHide ).hide();
+               },
+
+               valid: function() {
+                       return this.size() == 0;
+               },
+
+               size: function() {
+                       return this.errorList.length;
+               },
+
+               focusInvalid: function() {
+                       if( this.settings.focusInvalid ) {
+                               try {
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+                                       .filter(":visible")
+                                       .focus()
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+                                       .trigger("focusin");
+                               } catch(e) {
+                                       // ignore IE throwing errors when focusing hidden elements
+                               }
+                       }
+               },
+
+               findLastActive: function() {
+                       var lastActive = this.lastActive;
+                       return lastActive && $.grep(this.errorList, function(n) {
+                               return n.element.name == lastActive.name;
+                       }).length == 1 && lastActive;
+               },
+
+               elements: function() {
+                       var validator = this,
+                               rulesCache = {};
+
+                       // select all valid inputs inside the form (no submit or reset buttons)
+                       return $(this.currentForm)
+                       .find("input, select, textarea")
+                       .not(":submit, :reset, :image, [disabled]")
+                       .not( this.settings.ignore )
+                       .filter(function() {
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+                               // select only the first element for each name, and only those with rules specified
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+                                       return false;
+
+                               rulesCache[this.name] = true;
+                               return true;
+                       });
+               },
+
+               clean: function( selector ) {
+                       return $( selector )[0];
+               },
+
+               errors: function() {
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+               },
+
+               reset: function() {
+                       this.successList = [];
+                       this.errorList = [];
+                       this.errorMap = {};
+                       this.toShow = $([]);
+                       this.toHide = $([]);
+                       this.currentElements = $([]);
+               },
+
+               prepareForm: function() {
+                       this.reset();
+                       this.toHide = this.errors().add( this.containers );
+               },
+
+               prepareElement: function( element ) {
+                       this.reset();
+                       this.toHide = this.errorsFor(element);
+               },
+
+               check: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+
+                       var rules = $(element).rules();
+                       var dependencyMismatch = false;
+                       for (var method in rules ) {
+                               var rule = { method: method, parameters: rules[method] };
+                               try {
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+                                       // if a method indicates that the field is optional and therefore valid,
+                                       // don't mark it as valid when there are no other rules
+                                       if ( result == "dependency-mismatch" ) {
+                                               dependencyMismatch = true;
+                                               continue;
+                                       }
+                                       dependencyMismatch = false;
+
+                                       if ( result == "pending" ) {
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );
+                                               return;
+                                       }
+
+                                       if( !result ) {
+                                               this.formatAndAdd( element, rule );
+                                               return false;
+                                       }
+                               } catch(e) {
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+                                                + ", check the '" + rule.method + "' method", e);
+                                       throw e;
+                               }
+                       }
+                       if (dependencyMismatch)
+                               return;
+                       if ( this.objectLength(rules) )
+                               this.successList.push(element);
+                       return true;
+               },
+
+               // return the custom message for the given element and validation method
+               // specified in the element's "messages" metadata
+               customMetaMessage: function(element, method) {
+                       if (!$.metadata)
+                               return;
+
+                       var meta = this.settings.meta
+                               ? $(element).metadata()[this.settings.meta]
+                               : $(element).metadata();
+
+                       return meta && meta.messages && meta.messages[method];
+               },
+
+               // return the custom message for the given element name and validation method
+               customMessage: function( name, method ) {
+                       var m = this.settings.messages[name];
+                       return m && (m.constructor == String
+                               ? m
+                               : m[method]);
+               },
+
+               // return the first defined argument, allowing empty strings
+               findDefined: function() {
+                       for(var i = 0; i < arguments.length; i++) {
+                               if (arguments[i] !== undefined)
+                                       return arguments[i];
+                       }
+                       return undefined;
+               },
+
+               defaultMessage: function( element, method) {
+                       return this.findDefined(
+                               this.customMessage( element.name, method ),
+                               this.customMetaMessage( element, method ),
+                               // title is never undefined, so handle empty string as undefined
+                               !this.settings.ignoreTitle && element.title || undefined,
+                               $.validator.messages[method],
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"
+                       );
+               },
+
+               formatAndAdd: function( element, rule ) {
+                       var message = this.defaultMessage( element, rule.method ),
+                               theregex = /\$?\{(\d+)\}/g;
+                       if ( typeof message == "function" ) {
+                               message = message.call(this, rule.parameters, element);
+                       } else if (theregex.test(message)) {
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+                       }
+                       this.errorList.push({
+                               message: message,
+                               element: element
+                       });
+
+                       this.errorMap[element.name] = message;
+                       this.submitted[element.name] = message;
+               },
+
+               addWrapper: function(toToggle) {
+                       if ( this.settings.wrapper )
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+                       return toToggle;
+               },
+
+               defaultShowErrors: function() {
+                       for ( var i = 0; this.errorList[i]; i++ ) {
+                               var error = this.errorList[i];
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+                               this.showLabel( error.element, error.message );
+                       }
+                       if( this.errorList.length ) {
+                               this.toShow = this.toShow.add( this.containers );
+                       }
+                       if (this.settings.success) {
+                               for ( var i = 0; this.successList[i]; i++ ) {
+                                       this.showLabel( this.successList[i] );
+                               }
+                       }
+                       if (this.settings.unhighlight) {
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+                               }
+                       }
+                       this.toHide = this.toHide.not( this.toShow );
+                       this.hideErrors();
+                       this.addWrapper( this.toShow ).show();
+               },
+
+               validElements: function() {
+                       return this.currentElements.not(this.invalidElements());
+               },
+
+               invalidElements: function() {
+                       return $(this.errorList).map(function() {
+                               return this.element;
+                       });
+               },
+
+               showLabel: function(element, message) {
+                       var label = this.errorsFor( element );
+                       if ( label.length ) {
+                               // refresh error/success class
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+                               // check if we have a generated label, replace the message then
+                               label.attr("generated") && label.html(message);
+                       } else {
+                               // create label
+                               label = $("<" + this.settings.errorElement + "/>")
+                                       .attr({"for":  this.idOrName(element), generated: true})
+                                       .addClass(this.settings.errorClass)
+                                       .html(message || "");
+                               if ( this.settings.wrapper ) {
+                                       // make sure the element is visible, even in IE
+                                       // actually showing the wrapped element is handled elsewhere
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+                               }
+                               if ( !this.labelContainer.append(label).length )
+                                       this.settings.errorPlacement
+                                               ? this.settings.errorPlacement(label, $(element) )
+                                               : label.insertAfter(element);
+                       }
+                       if ( !message && this.settings.success ) {
+                               label.text("");
+                               typeof this.settings.success == "string"
+                                       ? label.addClass( this.settings.success )
+                                       : this.settings.success( label );
+                       }
+                       this.toShow = this.toShow.add(label);
+               },
+
+               errorsFor: function(element) {
+                       var name = this.idOrName(element);
+               return this.errors().filter(function() {
+                               return $(this).attr('for') == name;
+                       });
+               },
+
+               idOrName: function(element) {
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+               },
+
+               validationTargetFor: function(element) {
+                       // if radio/checkbox, validate first element in group instead
+                       if (this.checkable(element)) {
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
+                       }
+                       return element;
+               },
+
+               checkable: function( element ) {
+                       return /radio|checkbox/i.test(element.type);
+               },
+
+               findByName: function( name ) {
+                       // select by name and filter by form for performance over form.find("[name=...]")
+                       var form = this.currentForm;
+                       return $(document.getElementsByName(name)).map(function(index, element) {
+                               return element.form == form && element.name == name && element  || null;
+                       });
+               },
+
+               getLength: function(value, element) {
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               return $("option:selected", element).length;
+                       case 'input':
+                               if( this.checkable( element) )
+                                       return this.findByName(element.name).filter(':checked').length;
+                       }
+                       return value.length;
+               },
+
+               depend: function(param, element) {
+                       return this.dependTypes[typeof param]
+                               ? this.dependTypes[typeof param](param, element)
+                               : true;
+               },
+
+               dependTypes: {
+                       "boolean": function(param, element) {
+                               return param;
+                       },
+                       "string": function(param, element) {
+                               return !!$(param, element.form).length;
+                       },
+                       "function": function(param, element) {
+                               return param(element);
+                       }
+               },
+
+               optional: function(element) {
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+               },
+
+               startRequest: function(element) {
+                       if (!this.pending[element.name]) {
+                               this.pendingRequest++;
+                               this.pending[element.name] = true;
+                       }
+               },
+
+               stopRequest: function(element, valid) {
+                       this.pendingRequest--;
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0
+                       if (this.pendingRequest < 0)
+                               this.pendingRequest = 0;
+                       delete this.pending[element.name];
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+                               $(this.currentForm).submit();
+                               this.formSubmitted = false;
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                               this.formSubmitted = false;
+                       }
+               },
+
+               previousValue: function(element) {
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
+                               old: null,
+                               valid: true,
+                               message: this.defaultMessage( element, "remote" )
+                       });
+               }
+
+       },
+
+       classRuleSettings: {
+               required: {required: true},
+               email: {email: true},
+               url: {url: true},
+               date: {date: true},
+               dateISO: {dateISO: true},
+               dateDE: {dateDE: true},
+               number: {number: true},
+               numberDE: {numberDE: true},
+               digits: {digits: true},
+               creditcard: {creditcard: true}
+       },
+
+       addClassRules: function(className, rules) {
+               className.constructor == String ?
+                       this.classRuleSettings[className] = rules :
+                       $.extend(this.classRuleSettings, className);
+       },
+
+       classRules: function(element) {
+               var rules = {};
+               var classes = $(element).attr('class');
+               classes && $.each(classes.split(' '), function() {
+                       if (this in $.validator.classRuleSettings) {
+                               $.extend(rules, $.validator.classRuleSettings[this]);
+                       }
+               });
+               return rules;
+       },
+
+       attributeRules: function(element) {
+               var rules = {};
+               var $element = $(element);
+
+               for (var method in $.validator.methods) {
+                       var value;
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
+                       if (method === 'required' && typeof $.fn.prop === 'function') {
+                               value = $element.prop(method);
+                       } else {
+                               value = $element.attr(method);
+                       }
+                       if (value) {
+                               rules[method] = value;
+                       } else if ($element[0].getAttribute("type") === method) {
+                               rules[method] = true;
+                       }
+               }
+
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+                       delete rules.maxlength;
+               }
+
+               return rules;
+       },
+
+       metadataRules: function(element) {
+               if (!$.metadata) return {};
+
+               var meta = $.data(element.form, 'validator').settings.meta;
+               return meta ?
+                       $(element).metadata()[meta] :
+                       $(element).metadata();
+       },
+
+       staticRules: function(element) {
+               var rules = {};
+               var validator = $.data(element.form, 'validator');
+               if (validator.settings.rules) {
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+               }
+               return rules;
+       },
+
+       normalizeRules: function(rules, element) {
+               // handle dependency check
+               $.each(rules, function(prop, val) {
+                       // ignore rule when param is explicitly false, eg. required:false
+                       if (val === false) {
+                               delete rules[prop];
+                               return;
+                       }
+                       if (val.param || val.depends) {
+                               var keepRule = true;
+                               switch (typeof val.depends) {
+                                       case "string":
+                                               keepRule = !!$(val.depends, element.form).length;
+                                               break;
+                                       case "function":
+                                               keepRule = val.depends.call(element, element);
+                                               break;
+                               }
+                               if (keepRule) {
+                                       rules[prop] = val.param !== undefined ? val.param : true;
+                               } else {
+                                       delete rules[prop];
+                               }
+                       }
+               });
+
+               // evaluate parameters
+               $.each(rules, function(rule, parameter) {
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+               });
+
+               // clean number parameters
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
+                       if (rules[this]) {
+                               rules[this] = Number(rules[this]);
+                       }
+               });
+               $.each(['rangelength', 'range'], function() {
+                       if (rules[this]) {
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+                       }
+               });
+
+               if ($.validator.autoCreateRanges) {
+                       // auto-create ranges
+                       if (rules.min && rules.max) {
+                               rules.range = [rules.min, rules.max];
+                               delete rules.min;
+                               delete rules.max;
+                       }
+                       if (rules.minlength && rules.maxlength) {
+                               rules.rangelength = [rules.minlength, rules.maxlength];
+                               delete rules.minlength;
+                               delete rules.maxlength;
+                       }
+               }
+
+               // To support custom messages in metadata ignore rule methods titled "messages"
+               if (rules.messages) {
+                       delete rules.messages;
+               }
+
+               return rules;
+       },
+
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+       normalizeRule: function(data) {
+               if( typeof data == "string" ) {
+                       var transformed = {};
+                       $.each(data.split(/\s/), function() {
+                               transformed[this] = true;
+                       });
+                       data = transformed;
+               }
+               return data;
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+       addMethod: function(name, method, message) {
+               $.validator.methods[name] = method;
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+               if (method.length < 3) {
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
+               }
+       },
+
+       methods: {
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/required
+               required: function(value, element, param) {
+                       // check if dependency is met
+                       if ( !this.depend(param, element) )
+                               return "dependency-mismatch";
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               // could be an array for select-multiple or a string, both are fine this way
+                               var val = $(element).val();
+                               return val && val.length > 0;
+                       case 'input':
+                               if ( this.checkable(element) )
+                                       return this.getLength(value, element) > 0;
+                       default:
+                               return $.trim(value).length > 0;
+                       }
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote
+               remote: function(value, element, param) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+
+                       var previous = this.previousValue(element);
+                       if (!this.settings.messages[element.name] )
+                               this.settings.messages[element.name] = {};
+                       previous.originalMessage = this.settings.messages[element.name].remote;
+                       this.settings.messages[element.name].remote = previous.message;
+
+                       param = typeof param == "string" && {url:param} || param;
+
+                       if ( this.pending[element.name] ) {
+                               return "pending";
+                       }
+                       if ( previous.old === value ) {
+                               return previous.valid;
+                       }
+
+                       previous.old = value;
+                       var validator = this;
+                       this.startRequest(element);
+                       var data = {};
+                       data[element.name] = value;
+                       $.ajax($.extend(true, {
+                               url: param,
+                               mode: "abort",
+                               port: "validate" + element.name,
+                               dataType: "json",
+                               data: data,
+                               success: function(response) {
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;
+                                       var valid = response === true;
+                                       if ( valid ) {
+                                               var submitted = validator.formSubmitted;
+                                               validator.prepareElement(element);
+                                               validator.formSubmitted = submitted;
+                                               validator.successList.push(element);
+                                               validator.showErrors();
+                                       } else {
+                                               var errors = {};
+                                               var message = response || validator.defaultMessage( element, "remote" );
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+                                               validator.showErrors(errors);
+                                       }
+                                       previous.valid = valid;
+                                       validator.stopRequest(element, valid);
+                               }
+                       }, param));
+                       return "pending";
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
+               minlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+               maxlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+               rangelength: function(value, element, param) {
+                       var length = this.getLength($.trim(value), element);
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/min
+               min: function( value, element, param ) {
+                       return this.optional(element) || value >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/max
+               max: function( value, element, param ) {
+                       return this.optional(element) || value <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/range
+               range: function( value, element, param ) {
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/email
+               email: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/url
+               url: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/date
+               date: function(value, element) {
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+               dateISO: function(value, element) {
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/number
+               number: function(value, element) {
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits
+               digits: function(value, element) {
+                       return this.optional(element) || /^\d+$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+               // based on http://en.wikipedia.org/wiki/Luhn
+               creditcard: function(value, element) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+                       // accept only spaces, digits and dashes
+                       if (/[^0-9 -]+/.test(value))
+                               return false;
+                       var nCheck = 0,
+                               nDigit = 0,
+                               bEven = false;
+
+                       value = value.replace(/\D/g, "");
+
+                       for (var n = value.length - 1; n >= 0; n--) {
+                               var cDigit = value.charAt(n);
+                               var nDigit = parseInt(cDigit, 10);
+                               if (bEven) {
+                                       if ((nDigit *= 2) > 9)
+                                               nDigit -= 9;
+                               }
+                               nCheck += nDigit;
+                               bEven = !bEven;
+                       }
+
+                       return (nCheck % 10) == 0;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept
+               accept: function(value, element, param) {
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+               equalTo: function(value, element, param) {
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+                               $(element).valid();
+                       });
+                       return value == target.val();
+               }
+
+       }
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+       var pendingRequests = {};
+       // Use a prefilter if available (1.5+)
+       if ( $.ajaxPrefilter ) {
+               $.ajaxPrefilter(function(settings, _, xhr) {
+                       var port = settings.port;
+                       if (settings.mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               pendingRequests[port] = xhr;
+                       }
+               });
+       } else {
+               // Proxy ajax
+               var ajax = $.ajax;
+               $.ajax = function(settings) {
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+                       if (mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               return (pendingRequests[port] = ajax.apply(this, arguments));
+                       }
+                       return ajax.apply(this, arguments);
+               };
+       }
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+       // only implement if not provided by jQuery core (since 1.4)
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+               $.each({
+                       focus: 'focusin',
+                       blur: 'focusout'
+               }, function( original, fix ){
+                       $.event.special[fix] = {
+                               setup:function() {
+                                       this.addEventListener( original, handler, true );
+                               },
+                               teardown:function() {
+                                       this.removeEventListener( original, handler, true );
+                               },
+                               handler: function(e) {
+                                       arguments[0] = $.event.fix(e);
+                                       arguments[0].type = fix;
+                                       return $.event.handle.apply(this, arguments);
+                               }
+                       };
+                       function handler(e) {
+                               e = $.event.fix(e);
+                               e.type = fix;
+                               return $.event.handle.call(this, e);
+                       }
+               });
+       };
+       $.extend($.fn, {
+               validateDelegate: function(delegate, type, handler) {
+                       return this.bind(type, function(event) {
+                               var target = $(event.target);
+                               if (target.is(delegate)) {
+                                       return handler.apply(target, arguments);
+                               }
+                       });
+               }
+       });
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/scripts/jquery.zclip.min.js b/org.tizen.tutorials/html/scripts/jquery.zclip.min.js
new file mode 100644 (file)
index 0000000..51471a1
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/scripts/navi.js b/org.tizen.tutorials/html/scripts/navi.js
new file mode 100644 (file)
index 0000000..badc738
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[
+    var staticURL = "http://img-developer.samsung.com";
+       var sslCall = "";
+
+       if('' !== 'N') {
+               var locationStr = location.href;
+               if(locationStr.indexOf("https://") > -1) {
+                       location.href = "http://" + locationStr.substring(8);
+               }     
+    }
+
+//     if( typeof($) === function ) {
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+               //? ??? ?? ?? ??? ?? ?? ???.
+//     }
+    $SD.pagination.alt = {
+               first:"go first",
+               prev:"go prev",
+               next:"go next",
+               last:"go last"
+    };
+    $(document).ready(function(){
+       var myVar;
+           topSearchInit();//top search ??
+           $('#searchTop').attr("autocomplete","off");
+           var searchingBoolean = false;
+           
+           var topSearchChange = function(){
+               
+               if (searchingBoolean) return;
+               
+                       var searchInput = $('#searchTop').val();
+                       
+                       if($('#searchTop').val() != ""){
+                               $("#topAutocomplete").hide();
+                               searchingBoolean = true;
+                               
+                               var jsonData = {
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+                                               async : true,
+                                               data : { searchInput : searchInput},
+                                               success : function(data){
+                                                       if (searchInput == $('#searchTop').val()){
+                                                               var autoComplete = data.kwdNm;
+                                                               var tmpHtml = "";
+                                                               
+                                                               if (autoComplete.length > 0){
+                                                                       $('#topAutocomplete').children().remove();
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+                                                                       $.each(autoComplete, function(i, item){
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+                                                                               a.data('keyword', item.kwdNm);
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
+                                                                       });
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+                                                                               if(e.which == 9 && e.shiftKey) {
+                                                                                       return true;
+                                                                               }
+                                                                               
+                                                                               if(e.which == 9) {
+                                                                                       e.preventDefault();
+                                                                                       $('#topAutocomplete').hide();   
+                                                                                       setTimeout(function() {
+                                                                                               $("#searchTopBtn").focus();
+                                                                                       }, 1);
+                                                                               }
+                                                                               
+                                                                       });
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});
+                                                                   $("#searchTopBtn").on("focusout", function(e) {
+                                                                               $('#topAutocomplete').hide();
+                                                                       });
+                                                               }else{
+                                                                       $('#topAutocomplete').children().remove();
+                                                               }
+                                                               if($('#searchTop').val() == ""){
+                                                                       $("#topAutocomplete").hide();
+                                                                       searchingBoolean = false;
+                                                                       return;
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               searchingBoolean = false;
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                               if (autoComplete.length == 0){
+                                                                       $("#topAutocomplete").hide();
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               $("#topAutocomplete").show();
+                                                                               var $searchList = $("#topAutocomplete").find('ul');
+                                                                               var hei = $searchList.outerHeight();
+                                                                               if(hei>180){
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
+                                                                               }
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                       }else{
+                                                               searchingBoolean = false;
+                                                               topSearchChange();
+                                                       }
+                                               },
+                                               error : function() {searchingBoolean = false;}
+                                               
+                               };
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
+                               $SD.ajax.get(jsonData);
+                               searchingBoolean = false;
+                       }
+                       
+                       //console.log("/search/autoComplete.do end");
+                       //console.groupEnd();
+               };
+               
+               $('#searchTop').keyup(function(e){
+                       if($('#searchTop').val() == ""){
+                               $('#topAutocomplete').children().remove();
+                               $("#topAutocomplete").hide();
+                       }else{
+                               if(e.which == 13){
+                                       search();
+                               }else{
+                                       topSearchChange();
+                               }
+                       }
+               });
+               
+               var search = function(){
+                       if($.trim($('#searchTop').val()) == ""){
+                               alert('Search keyword is required.');
+                       }else{
+                               $('#topSearchForm').submit();
+                       }
+               };
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){
+                       e.preventDefault();
+                       var keyword = $(this).data('keyword');
+                       $("#searchTop").val(keyword);
+                       $('#topSearchForm').submit();
+               });
+               
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+                       if(e.which == 13) {
+                               e.preventDefault();
+                               var keyword = $(this).data('keyword');
+                               $("#searchTop").val(keyword);
+                               $('#topSearchForm').submit();                   
+                       }
+               });
+               
+               $('#searchTopBtn').click(function(e){
+                       search();       
+               });  
+    });
+    
+    function topSearchEnter(){
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+               alert('Search keyword is required.');
+               return false;
+       }else{
+               return true;
+       }
+    }
+
+/* Tracking Code TOTAL */
+               var _gaq = _gaq || [];
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+               _gaq.push(['_setAccount', 'UA-6892706-3']);
+               _gaq.push(['_setDomainName', 'samsung.com']);
+               _gaq.push(['_setAllowLinker', true]);
+               _gaq.push(['_trackPageview']);
+               (function() {
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                 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);
+               })();
+       
+               <!--// Tracking Code 1 -->
+                       var _gaq = _gaq || [];
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);
+                       _gaq.push(['_trackPageview']);
+                       (function() {
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                         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);
+                       })();
diff --git a/org.tizen.tutorials/html/scripts/search.js b/org.tizen.tutorials/html/scripts/search.js
new file mode 100644 (file)
index 0000000..d1ae5ad
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+       var focusTarget = "input";
+
+       //$("#autocomplete").hide();
+
+       //$("#searchInput").bind("keydown", checkSearchText);
+       
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $("#autocomplete").bind("mouseleave",function(){
+               $(this).hide();
+               $("#btnDropdown").removeClass("dropdownoff");
+               $("#btnDropdown").addClass("dropdown");         
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       //$(".autocomplete").css("visibility", "visible");
+                       $("#autocomplete").show();
+                       
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+               }
+               else{
+                       //$(".autocomplete").css("visibility", "hidden");
+                       $("#autocomplete").hide();
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+
+
+
+function topSearchInit()
+{
+       var focusTarget = "input";
+
+       //$("#searchTop").bind("keydown", checkSearchText);
+       
+       $("#searchTop").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {       
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchTop" ).focusin( function()   {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchTop").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".topAutocomplete").css("visibility", "visible");
+               }else{
+                       $(".topAutocomplete").css("visibility", "hidden");
+                       $("#topAutocomplete").hide();
+               }
+       }
+}
diff --git a/org.tizen.tutorials/html/scripts/showhide.js b/org.tizen.tutorials/html/scripts/showhide.js
new file mode 100644 (file)
index 0000000..cf3dc21
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/showhide.js
@@ -0,0 +1,200 @@
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+       me.find('em').text('Hide');
+       me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+       var me = $(this);
+       var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+       if ( me.next().is(':visible') ){
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+               me.find('em').text('Show');
+               me.next().hide();
+       }
+                                       
+});
+return false;
+})
+}      
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+       var idx = $('.devicespec-tit a').index(this);
+
+       if ( $(this).parent().parent().next().is(':visible') ){
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+               self.find('em').text('Show');
+               self.next().hide();
+
+               return false;
+       }else{
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+               self.find('em').text('Hide');
+
+               self.next().show();
+
+               return false;
+       }
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow =  $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+       var openheading = function(target) {
+               var origin = $(target);
+               target = origin.closest('.devicespec-con');
+               if (!(target.length > 0)) {
+                       target = origin.closest('.devicespec-tit');
+               }
+               if (target.length > 0) {
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
+                       }
+               }
+
+               $(window.location.hash)[0].scrollIntoView();
+       };
+
+       $(".opensection").click(function(){
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');
+               openheading(target);
+       });
+
+       if (window.location.hash) {
+               var target = $(window.location.hash);
+               openheading(target);
+               //$(target).focus(); //uncomment if fail to work
+       }
+
+       var isScrolledIntoView = function(elem)
+       {
+               var docViewTop = $('#contents').scrollTop();
+               var docViewBottom = docViewTop + $('#contents').height();
+
+               var elemTop = $(elem).offset().top;
+               var elemBottom = elemTop + $(elem).height();
+
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
+       }
+
+       $('#contents').scroll();
+       
+
+       var updateH = function(){
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+                       $('.help_breadcrumbs').hide();
+               } else {
+                       $('a.top.sms').hide();
+                       $('.help_breadcrumbs').show();
+               }
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
+
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+
+               if ($('a.top').is(':visible'))
+               {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+               } else {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+               }
+               $('#toc').css('height', $('#toc').css('height') - 5);
+
+               $('#toc_border').height($('#toc').outerHeight() + 5);
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+               $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+               //$('#toc').css('width', $('#toc_border').width() - 40);
+               $('#toc').css('width', $('#toc_border').width() - 49);
+       };
+
+       var updateH_no_toc = function() {
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+               } else {
+                       $('a.top.sms').hide();
+               }
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+       }
+
+       if ($('body').hasClass('no-toc')) {
+               updateH = updateH_no_toc;
+       }
+       $(window).resize(updateH);
+       $('#contents').scroll(updateH);
+       $(window).resize();
+       
+       $('a.top').click(function(){$('#contents').scrollTop(0)});
+
+       var hashchanged = function() {
+               if (window.location.hash.length) {
+                       openheading(window.location.hash);
+                       //$(window.location.hash).scrollTo();
+                       $(window.location.hash)[0].scrollIntoView();
+
+               } else 
+               {
+                       $('#contents').scrollTop(0);
+               }
+       };
+
+       if (("onhashchange" in window) && !($.browser.msie)) { 
+               $(window).bind( 'hashchange',hashchanged);
+       }
+       else { 
+               var prevHash = window.location.hash;
+               window.setInterval(function () {
+                       if (window.location.hash != prevHash) {
+                               hashchanged();
+                               prevHash = window.location.hash;
+                       }
+               }, 100);
+       }
+});
diff --git a/org.tizen.tutorials/html/scripts/snippet.js b/org.tizen.tutorials/html/scripts/snippet.js
new file mode 100644 (file)
index 0000000..777e9ae
--- /dev/null
+++ b/org.tizen.tutorials/html/scripts/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm
new file mode 100644 (file)
index 0000000..d8fbb48
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm
@@ -0,0 +1,217 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Alarm: Scheduling an Application to Be Launched at a Specific Time</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage">Managing Alarms</a></li>
+                       <li><a href="#launch">Launching Applications with Alarms</a></li>
+                       <li><a href="#check">Checking for Alarm Events</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/application/alarm_w.htm">Alarm Guide</a></li>
+                       <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>                   
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Alarm: Scheduling an Application to Be Launched at a Specific Time</h1>
+       <div class="cont"><div class="static-cont">     
+
+<p>This tutorial demonstrates how you can manage alarms in the device to automatically launch applications when an alarm is triggered.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Alarm API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Alarm API basics by learning about:</p>
+  <ul>
+   <li><a href="#manage" class="opensection">Managing Alarms</a> <p>Create an absolute and relative alarm, retrieve a list of alarms and delete an alarm.</p></li>
+   <li><a href="#launch" class="opensection">Launching Applications with Alarms</a> <p>Launch an application or application service when an alarm is triggered.</p></li>
+   <li><a href="#check" class="opensection">Checking for Alarm Events</a> <p>Check when the next absolute or relative alarm is going to be triggered.</p></li>
+  </ul>
+  
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="manage" name="manage" class="items-tit-h2">Managing Alarms</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+                       <p>Learning how to create and delete alarms is a basic alarm management skill:</p> 
+  <ol> 
+   <li><p>To create an absolute alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmAbsolute</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a> applications).</p> <p>You must define the time and date when the alarm is triggered as a <span style="font-family: Courier New,Courier,monospace">Date</span> object.</p> <pre class="prettyprint">
+/* Alarm is triggered at 8:00 on April 4, 2012 */
+var date = new Date(2012, 3, 4, 8, 0);
+var alarm1 = new tizen.AlarmAbsolute(date);
+</pre> </li> 
+   <li><p>To create a relative alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmRelative</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmRelative">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmRelative">wearable</a> applications). </p> <p>You must define the delay after which the alarm is triggered.</p> 
+<pre class="prettyprint">
+/* Alarm is triggered in 3 hours */
+var alarm2 = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR); 
+</pre> </li> 
+   <li><p>To create a recurring absolute alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmAbsolute</span> interface. </p> <p>You must define the time and date when the alarm is triggered as a <span style="font-family: Courier New,Courier,monospace">Date</span> object. In addition, you can define a time period or the weekdays when the alarm is repeated.</p> <pre class="prettyprint">
+/* Alarm is triggered for the first time at 8:00 on April 4, 2012 */
+var date = new Date(2012, 3, 4, 8, 0);
+
+/* Alarm repeats every 2 days, at 08:00, starting after April 4, 2012 */
+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;]); 
+</pre> 
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">You cannot define both a time period and a weekday recurrence for the same alarm.</td> 
+      </tr> 
+     </tbody> 
+    </table> </li> 
+   <li><p>To create a recurring relative alarm, create an instance of the <span style="font-family: Courier New,Courier,monospace">AlarmRelative</span> interface.</p> <p>You must define the delay after which the alarm is triggered, and the period after which it is repeated.</p> <pre class="prettyprint">
+/* Alarm is triggered for the first time in 1 hour, and then repeated every 2 minutes */
+var alarm5 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR, 2 * tizen.alarm.PERIOD_MINUTE);
+</pre> </li> 
+   <li><p>To obtain a list of all the alarms that have been set on a device but not yet triggered, use the <span style="font-family: Courier New,Courier,monospace">getAll()</span> method:</p> <pre class="prettyprint">
+var alarms = tizen.alarm.getAll(); 
+console.log(alarms.length + &quot; alarms present in the storage.&quot;);
+</pre></li> 
+   <li><p>To delete an alarm, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method with the alarm ID:</p> <pre class="prettyprint">
+/* First add created alarm to the device */
+tizen.alarm.add(alarm1, &quot;tizen.internet&quot;);
+/* Then remove it */
+tizen.alarm.remove(alarm1.id);
+</pre> <p>To delete all alarms at once, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method.</p></li> 
+  </ol> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="launch" name="launch" class="items-tit-h2">Launching Applications with Alarms</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+                       <p>Learning how to launch application with alarms is a basic alarm management skill:</p> 
+  <ol> 
+   <li> <p>To launch an application when an alarm is triggered, you must define the application as a parameter in the <span style="font-family: Courier New,Courier,monospace">add()</span> 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.alarm.add(alarm, &quot;tizen.internet&quot;); 
+</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 <span style="font-family: Courier New,Courier,monospace">add()</span> method used to add the created alarm to the system:</p> <pre class="prettyprint">
+/* Run the browser and open the defined browser page with the operation/view application control */
+
+var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
+var appControl = 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://www.tizen.org&quot;);
+
+tizen.alarm.add(alarm, &quot;org.tizen.browser&quot;, appControl);
+</pre> </li> 
+  </ol>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="check" name="check" class="items-tit-h2">Checking for Alarm Events</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+                       <p>Learning how to check for the next alarm to be triggered is a basic alarm management skill:</p> 
+  <ol> 
+   <li><p>Create an absolute alarm:</p> <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;);
+
+</pre> </li> 
+   <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getNextScheduledDate()</span> 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());
+</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;);
+</pre> </li> 
+   <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getRemainingSeconds()</span> 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;);
+</pre></li> 
+  </ol>
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
new file mode 100644 (file)
index 0000000..1ae3ad4
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Controlling Your Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application API for Wearable Web</a></li>                       
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Application: Controlling Your Applications</h1>
+       
+<p>The application management tutorials demonstrate how to use the following features in creating Tizen Web applications:</p> 
+  <ul> 
+    <li><a href="alarm_tutorial_w.htm">Alarm: Scheduling an Application to Be Launched at a Specific Time</a> <p>Demonstrates how you can manage alarms in the device.</p></li>
+       <li><a href="application_tutorial_w.htm">Application: Providing Information about Applications and Controlling Applications</a> <p>Demonstrates how you can retrieve application information, receive application notifications, and perform application management actions.</p></li>
+   <li><a href="package_tutorial_w.htm">Package: Providing Information about Package Installation and Installed Packages</a> <p>Demonstrates how you can retrieve package information, receive package notifications, and perform package management actions.</p></li> 
+  </ul> 
+  
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>      
+<ul>
+   <li><a href="data_tutorial_w.htm">Data Control: Providing Information about Packages and their Installation</a> <p>Demonstrates how you can share data between 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm
new file mode 100644 (file)
index 0000000..f5f8a44
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm
@@ -0,0 +1,310 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Providing Information about Applications and Controlling Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
+               <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#retrieve">Retrieving Application Information</a>
+            </li>
+            <li><a href="#manage">Managing Applications</a>
+            </li>
+            <li><a href="#receive">Receiving Notifications on Application List Changes</a>
+            </li>
+            <li><a href="#launch">Launching Applications with the Application Control</a>
+            </li>
+                       <li><a href="#handle">Handling Application Control Requests</a>
+            </li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API for Wearable Web</a></li>                       
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Application: Providing Information about Applications and Controlling Applications</h1>
+       <div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can manage and launch applications.</p> 
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+  <h2 id="warmup" name="warmup">Warm-up</h2> 
+  <p>Become familiar with the Application API basics by learning about:</p> 
+   <ul>
+      <li><a class="opensection" href="#retrieve">Retrieving Application Information</a> <p>Display a list of applications that are currently installed or running on the device, and retrieve application information, such as application name, application ID, and context ID.</p></li>
+      <li><a class="opensection" href="#manage">Managing Applications</a> <p>Launch, stop, hide, or exit applications.</p></li>
+      <li><a class="opensection" href="#receive">Receiving Notifications on Application List Changes</a> <p>Receive notifications when applications are installed, updated, or uninstalled.</p></li>
+      <li><a class="opensection" href="#launch">Launching Applications with the Application Control</a> <p>Launch applications by a request based on their functionality.</p></li> 
+         <li><a class="opensection" href="#handle">Handling Application Control Requests</a> <p>Handle requests from other applications and reply with a result.</p></li> 
+  </ul> 
+               
+ <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Application Information</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">               
+                               
+                <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 <span style="font-family: Courier New,Courier,monospace">getAppsInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> <pre class="prettyprint">function onListInstalledApplications(applications)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The number of installed applications is &quot; + applications.length);
+}
+tizen.application.getAppsInfo(onListInstalledApplications);</pre> <p>The list of applications is returned to the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationArraySuccessCallback</span> event handler as an array of <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a> applications).</p> </li>
+   <li><p>To retrieve a list of running applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p> <pre class="prettyprint">function onRunningApplicationContexts(contexts)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The number of running applications is &quot; + 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 <span style="font-family: Courier New,Courier,monospace">ApplicationContext</span> objects.</p></li>
+   <li><p>To retrieve basic application information, use the <span style="font-family: Courier New,Courier,monospace">getAppInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> 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);
+</pre> </li>
+   <li><p>To retrieve application context information, use the <span style="font-family: Courier New,Courier,monospace">getAppContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> 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);</pre> </li>
+  </ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing Applications</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">       
+                               
+                <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 <span style="font-family: Courier New,Courier,monospace">launch()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications), and to stop an application, use the <span style="font-family: Courier New,Courier,monospace">kill()</span> method.</p> <p>In the following example, the application to be launched and stopped is an alarm, with the <span style="font-family: Courier New,Courier,monospace">&quot;samplealarm&quot;</span> ID.</p>
+
+<pre class="prettyprint">
+/* Launch the application */
+tizen.application.launch(&quot;samplealarm&quot;, 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;}
+}
+
+tizen.application.getAppsContext(onGetAppsContextSuccess);
+</pre> <p></p>You can also <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#launch">launch an application using the application control</a>.<p></p> </li>
+   <li><p>To retrieve the current application, use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method:</p> <pre class="prettyprint">var currApp = tizen.application.getCurrentApplication();</pre> </li>
+   <li><p>To hide the current application, use the <span style="font-family: Courier New,Courier,monospace">hide()</span> method:</p> <pre class="prettyprint">
+currApp.hide();
+</pre> </li>
+   <li><p>To exit the current application, use the <span style="font-family: Courier New,Courier,monospace">exit()</span> method:</p> <pre class="prettyprint">
+currApp.exit();
+</pre> </li>
+  </ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Application List Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+                <p>Learning to receive notifications when the list of installed applications changes allows you to manage all the device applications from your application:</p>
+  <ol>
+   <li> <p>Define the event handlers for different notifications by implementing the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationEventCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformationEventCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformationEventCallback">wearable</a> applications):</p>
+
+<pre class="prettyprint">var appEventCB =
+{
+&nbsp;&nbsp;&nbsp;/* When a new application is installed */
+&nbsp;&nbsp;&nbsp;oninstalled: function(appInfo)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Application &quot; + appInfo.name + &quot; installed&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;/* When an application is updated */
+&nbsp;&nbsp;&nbsp;onupdated: function(appInfo)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Application &quot; + appInfo.name + &quot; updated&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;/* When an application is uninstalled */
+&nbsp;&nbsp;&nbsp;onuninstalled: function(appId)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Application &quot; + appId + &quot; uninstalled&quot;);
+&nbsp;&nbsp;&nbsp;}
+} </pre> </li>
+   <li> <p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">var listenerID = tizen.application.addAppInfoEventListener(appEventCB);</pre> </li>
+   <li> <p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeAppInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> <pre class="prettyprint">
+tizen.application.removeAppInfoEventListener(listenerID);</pre> </li>
+  </ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="launch" name="launch" class="items-tit-h2">Launching Applications with the Application Control</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+ <p>Learning to use the application controls to launch applications allows you to take advantage of all the device applications from your application:</p>
+
+ <p>An installed application can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application (an optionally passing some data to the service). The service application then responds with an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications) (which can contain some data as well).</p>
+  <ol>
+   <li><p>To use the application control to pick image files from a list of images, create an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> 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).</p> <p>Define the desired functionality required from the application to be launched. The application needs to have an operation type suitable for selecting images, with URI as <span style="font-family: Courier New,Courier,monospace">null</span>, and the MIME type as <span style="font-family: Courier New,Courier,monospace">image/*</span>.</p> <pre class="prettyprint">var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;, null, &quot;image/*&quot;);</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/selected&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;cropped 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;}
+}</pre> </li>
+   <li>Call the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method to find a suitable application to select the images: <pre class="prettyprint">tizen.application.launchAppControl(appControl, 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;function(){console.log(&quot;launch appControl 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){/* 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;appControlReplyCB);</pre> </li>
+  </ol>
+            </div>
+        </li>
+               
+       <li>
+            <div class="devicespec-tit">
+                <h2 id="handle" name="handle" class="items-tit-h2">Handling Application Control Requests</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+                               
+  <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 is identified by the operation name. Other applications can request it and use the provided feature of the service application
+    (optionally passing some data to the service). The service application gets the request, performs some actions, and sends the result to caller application with
+    an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> array (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications).</p>
+
+
+  <ol>
+   <li><p>To enable the application to receive Application Control requests, open the <a href="../../../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#set_widget">widget configuration editor</a> and
+   add an operation in the <span style="font-family: Courier New,Courier,monospace">app-control</span> section.</p>
+   <p>In this example, the name of the operation is <span style="font-family: Courier New,Courier,monospace">http://example.tizen.org/operation/get_time</span>.
+   The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains a <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_appcontrol">&lt;tizen:app-control&gt;</a> element:</p>
+<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:app-control&gt;
+</pre>
+   <p>For more information, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#exporting">Exporting Application Control Functionality</a>.</p>
+   </li>
+   <li><p>To retrieve an object of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a> applications),
+   use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of
+   the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications) and
+   the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of
+   the <span style="font-family: Courier New,Courier,monospace">Application</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a> applications):</p>
+<pre class="prettyprint">
+var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+
+if (reqAppControl &amp;&amp; reqAppControl.callerAppId)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Requester AppID: &quot; + reqAppControl.callerAppId + &quot;\nwith operation: &quot; + reqAppControl.appControl.operation);
+}
+else
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The application was not launched with Application Control.&quot;);
+}
+</pre></li>
+   <li><p>To send a reply to the caller application, use the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> method of
+   the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> 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]);
+}
+</pre></li>
+
+  </ol>
+
+  <p>For more information on launching an application, see <a href="#launch">Launching Applications with the Application Control</a>.</p>
+             </div>
+        </li>          
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm
new file mode 100644 (file)
index 0000000..4c46d78
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm
@@ -0,0 +1,285 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Providing Information about Packages and their Installation</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#map">Managing Data in Key-value Pairs</a></li>
+                       <li><a href="#sql">Managing SQL-type Data</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/application/data_w.htm">Data Control Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">Data Control API for Mobile Web</a></li>                  
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Data Control: Providing Information about Packages and their Installation</h1>
+       <div class="cont"><div class="static-cont">     
+
+  <p>This tutorial demonstrates how you can share data between applications.</p>
+  
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Data Control API basics by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#map">Managing Data in Key-value Pairs</a><p>Get, add, update, and remove values assigned to a key.</p></li>
+   <li><a class="opensection" href="#sql">Managing SQL-type Data</a><p>Select, insert, update, and remove SQL-type data.</p></li>
+  </ul>
+ 
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       
+<ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="map" name="map" class="items-tit-h2">Managing Data in Key-value Pairs</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+  <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 <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">MappedDataControlConsumer</a> object using
+   the <span style="font-family: Courier New,Courier,monospace">getDataControlConsumer()</span> method of
+   the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">DataControlManager</a> interface.
+   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 <span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;</span> provider ID.</p>
+<pre class="prettyprint">
+// Get the map-type DataControlConsumerObject
+try 
+{
+&nbsp;&nbsp;&nbsp;var globalMappedConsumer = tizen.datacontrol.getDataControlConsumer(&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;, &quot;Dictionary&quot;, &quot;MAP&quot;);
+}
+</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>
+<pre class="prettyprint">
+var globalReqId = new Date().getTime() % 2e9;
+</pre></li>
+   <li><p>Define a common success and error callback:</p>
+<pre class="prettyprint">
+function onRequestSuccess(id)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Request &quot; + id + &quot; - done&quot;);
+}
+
+function onRequestError(id, error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;error in request &quot; + id + &quot;, message: &quot; + error.message);
+}
+</pre></li>
+<li>To manage key-value pairs:
+<ul class="ul">
+   <li><p>To add a key-value pair, use the <span style="font-family: Courier New,Courier,monospace">addValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span>:</p>
+<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, onRequestError);
+}
+</pre></li>
+   <li><p>To retrieve values assigned to a key, use the <span style="font-family: Courier New,Courier,monospace">getValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span>:</p>
+<pre class="prettyprint">
+function onGetValueSuccess(values, id)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Values retrieved in request &quot; + id + &quot;: &quot; + values.toString());
+}
+
+try 
+{
+&nbsp;&nbsp;&nbsp;globalReqId++;
+&nbsp;&nbsp;&nbsp;globalMappedConsumer.getValue(globalReqId, &quot;tizen&quot;, onGetValueSuccess, onRequestError);
+}
+</pre></li>
+   <li><p>To update a value assigned to a key, use the <span style="font-family: Courier New,Courier,monospace">updateValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span> 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;, onRequestSuccess, onRequestError);
+}
+</pre></li>
+   <li><p>To remove a key-value pair, use the <span style="font-family: Courier New,Courier,monospace">removeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span> interface:</p>
+<pre class="prettyprint">
+try 
+{
+&nbsp;&nbsp;&nbsp;globalReqId++;
+&nbsp;&nbsp;&nbsp;globalMappedConsumer.removeValue(globalReqId, &quot;tizen&quot;, &quot;Bar&quot;, onRequestSuccess, onRequestError);
+}
+</pre></li></ul></li>
+  </ol>
+               </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="sql" name="sql" class="items-tit-h2">Managing SQL-type Data</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+  <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 <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">SQLDataControlConsumer</a> object, use
+   the <span style="font-family: Courier New,Courier,monospace">getDataControlConsumer()</span> method of
+   the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">DataControlManager</a> interface.
+   This object allows accessing the data stored by the DataControl provider.</p>
+   <p>You need a running DataControl provider application, which uses the <span style="font-family: Courier New,Courier,monospace">&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;</span> provider ID.</p>
+<pre class="prettyprint">
+// Get SQL type DataControlConsumerObject
+try 
+{
+&nbsp;&nbsp;&nbsp;var globalSQLConsumer = tizen.datacontrol.getDataControlConsumer(&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;, &quot;Dictionary&quot;, &quot;SQL&quot;);
+}
+</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>
+<pre class="prettyprint">
+var globalReqId = new Date().getTime() % 2e9;
+</pre></li>
+   <li><p>Define a common success and error callback:</p>
+<pre class="prettyprint">
+function onRequestSuccess(id)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Request &quot; + id + &quot; - done&quot;);
+}
+
+function onRequestError(id, error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;error in request &quot; + id + &quot;, message: &quot; + error.message);
+}
+</pre> </li>
+
+<li>To manage the data:
+<ul class="ul">
+   <li><p>To insert data, use the <span style="font-family: Courier New,Courier,monospace">insert()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
+<pre class="prettyprint">
+function onInsertSuccess(reqId, rowId)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;request: &quot; + reqId + &quot; succeed - inserted row id:&quot; + 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;'tizen1'&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);
+}
+</pre> </li>
+   <li><p>To select data, use the <span style="font-family: Courier New,Courier,monospace">select()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> 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] + &quot;, value: &quot; + result[i].values[j]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+
+try 
+{
+&nbsp;&nbsp;&nbsp;var columns = [&quot;WORD&quot;, &quot;WORD_DESC&quot; ];
+&nbsp;&nbsp;&nbsp;globalReqId++;
+&nbsp;&nbsp;&nbsp;globalSQLConsumer.select(globalReqId, columns, &quot;WORD=&#39;tizen1&#39;&quot;, onSelectSuccess, onRequestError);
+}
+</pre> </li>
+   <li><p>To update data, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> 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;, onRequestSuccess, onRequestError);
+}
+</pre> </li>
+   <li><p>To remove data, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
+<pre class="prettyprint">
+try 
+{
+&nbsp;&nbsp;&nbsp;globalReqId++;
+&nbsp;&nbsp;&nbsp;globalSQLConsumer.remove(globalReqId, &quot;WORD=&#39;tizen1&#39;&quot;, onRequestSuccess, onRequestError);
+}
+</pre> </li></ul></li>
+  </ol>
+               </div>
+               </li>                   
+       </ul>
+ 
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm
new file mode 100644 (file)
index 0000000..2ebae10
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm
@@ -0,0 +1,197 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Providing Information about Package Installation and Installed Packages</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
+               <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+                       <ul class="toc">
+                               <li><a href="#retrieve">Retrieving Package Information</a>
+
+                               </li>
+                               <li><a href="#manage">Managing Packages</a>
+
+                               </li>
+                               <li><a href="#receive">Receiving Package Change Notifications</a>
+
+                               </li>
+                       </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/application/package_w.htm">Package Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">Package API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">Package API for Wearable Web</a></li>                       
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+       <h1>Package: Providing Information about Package Installation and Installed Packages</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can manage packages and retrieve information about them.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  <h2 id="warmup" name="warmup">Warm-up</h2> 
+  <p>Become familiar with the Package API basics by learning about:</p> 
+  <ul> 
+   <li><a class="opensection" href="#retrieve">Retrieving Package Information</a> <p>Display a list of installed packages on the device, and retrieve package information, such as name, ID, icon path, and version.</p></li> 
+   <li><a class="opensection" href="#manage">Managing Packages</a> <p>Install or uninstall packages.</p></li> 
+   <li><a class="opensection" href="#receive">Receiving Package Change Notifications</a> <p>Receive notifications if packages are installed, updated, or uninstalled.</p></li> 
+  </ul>                
+  
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+  <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Package Information</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+                <p>Learning how to retrieve information about installed packages allows you to manage device packages from your application:</p>
+  <ol>
+   <li><p>To retrieve a list of installed packages, use the <span style="font-family: Courier New,Courier,monospace">getPackagesInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a> applications):</p> <pre class="prettyprint lang-js">function onListInstalledPackages(lists)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The number of installed package is &quot; + lists.length);
+}
+
+tizen.package.getPackagesInfo(onListInstalledPackages);</pre> <p>The list of installed packages is returned to the <span style="font-family: Courier New,Courier,monospace">PackageInformationArraySuccessCallback()</span> methods as an array of <span style="font-family: Courier New,Courier,monospace">PackageInformation</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a> applications).</p></li>
+   <li><p>To retrieve basic package information, use the <span style="font-family: Courier New,Courier,monospace">getPackageInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> 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;);</pre></li>
+  </ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing Packages</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+                <p>Learning how to install and uninstall packages is a basic package management skill:</p>
+  <ol>
+   <li><p>To install a package, use the <span style="font-family: Courier New,Courier,monospace">install()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a> applications), specifying the local package installation path on your device. You can retrieve the installation progress using the <span style="font-family: Courier New,Courier,monospace">PackageProgressCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageProgressCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageProgressCallback">wearable</a> applications).</p> <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;}
+};
+
+tizen.filesystem.resolve(&quot;downloads/test.wgt&quot;, function(packageFile)
+{
+&nbsp;&nbsp;&nbsp;tizen.package.install(packageFile.toURI(), onInstallation);
+});</pre></li>
+   <li><p>To uninstall a package, use the <span style="font-family: Courier New,Courier,monospace">uninstall()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface, specifying the package ID. You can retrieve the uninstallation progress using the <span style="font-family: Courier New,Courier,monospace">PackageProgressCallback</span> 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;}
+};
+
+tizen.package.uninstall(&quot;TEST_APP_ID&quot;, onUninstallation);</pre></li>
+  </ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="receive" name="receive" class="items-tit-h2">Receiving Package Change Notifications</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">       
+                               
+                <p>Learning to receive notifications when the list of installed packages changes allows you to manage device packages from your application:</p>
+  <ol>
+   <li><p>Define the event handlers for different notifications using the <span style="font-family: Courier New,Courier,monospace">PackageInformationEventCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformationEventCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformationEventCallback">wearable</a> applications):</p> <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;}
+};</pre></li>
+   <li><p>Register the listener to use the defined event handlers with the <span style="font-family: Courier New,Courier,monospace">setPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a> applications):</p> <pre class="prettyprint lang-js">tizen.package.setPackageInfoEventListener(packageEventCallback);</pre></li>
+   <li><p>To stop receiving notifications, use the <span style="font-family: Courier New,Courier,monospace">unsetPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface:</p> <pre class="prettyprint lang-js">tizen.package.unsetPackageInfoEventListener();</pre></li>
+  </ol>
+             </div>
+        </li>
+     </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
new file mode 100644 (file)
index 0000000..50d38d8
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
@@ -0,0 +1,385 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a></li>
+            <li><a href="#Discovering_BT_Devices">Discovering Bluetooth Devices</a></li>
+            <li><a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a></li>
+            <li><a href="#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a></li>
+            <li><a href="#Communicating_Health">Communicating with a Health Source Device</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm">Bluetooth Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP</h1>
+<div class="cont"><div class="static-cont">
+
+       
+ <p>This tutorial demonstrates how you can manage Bluetooth and exchange data with a peer device.</p>
+ 
+   <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+      <h2 id="warm_up" name="warm_up">Warm-up</h2>
+      <p>Become familiar with the Bluetooth API basics by learning about:</p>
+      <ul>
+       <li><a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a> <p>Enable and disable the local Bluetooth adapter, and change the device name for it.</p></li>
+       <li><a href="#Discovering_BT_Devices">Discovering Bluetooth Devices</a> <p>Search remote devices and get a list of the known devices.</p></li>
+       <li><a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a> <p>Create and end a bonding with a Bluetooth device.</p></li>
+       <li><a href="#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a> <p>Register a service as a server, connect as a client to the service provided by the server device, and exchange data with the device.</p></li>
+       <li><a href="#Communicating_Health">Communicating with a Health Source Device</a> <p>Act as a sink and communicate with a health source device.</p></li>
+      </ul>
+       <h2 id="task" name="task">Task</h2>
+      <p>In the <a href="task_bluetoothchat_w.htm">Bluetooth Chat</a> task, we will walk through how to use the device as a Bluetooth server or client in a chat application.</p>
+         
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter" class="items-tit-h2">Managing the Local Bluetooth Adapter</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Learning how to enable or disable the local Bluetooth adapter, and set the device name is a basic Bluetooth management skill:</p>
+  <p>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 class="figure"><img src="../../../images/bluetooth_onoff.png" alt="Bluetooth Setting Screen"/></p>
+  <ol>
+   <li>Retrieve a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">BluetoothAdapter</a> object with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> object to request the Bluetooth switching operation:
+<pre class="prettyprint">var bluetoothSwitchAppControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/edit&quot;, null, &quot;application/x-bluetooth-on-off&quot;);
+var adapter = tizen.bluetooth.getDefaultAdapter();</pre></li>
+
+<li> Define a callback function for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method:
+<pre class="prettyprint">function launchSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth Settings application is successfully launched.&quot;);
+}
+function launchError(error)
+{
+&nbsp;&nbsp;&nbsp;alert(&quot;An error occurred: &quot; + error.name + &quot;. Please enable Bluetooth through the Settings application.&quot;);
+}</pre></li>
+
+<li> Define the reply callback of the application control which implements the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>:
+<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;}
+};</pre></li>
+
+<li> If necessary, request launching the Bluetooth Settings with the prepared <span style="font-family: Courier New,Courier,monospace">bluetoothSwitchAppControl</span>:
+<pre class="prettyprint">if (adapter.powered)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth is already enabled&quot;);
+}
+else
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Try to launch the Bluetooth Settings application.&quot;);
+&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(bluetoothSwitchAppControl, null, launchSuccess, launchError, serviceReply);
+}</pre></li>
+
+<li><p>To display the Bluetooth visibility switch, use the <span style="font-family: Courier New,Courier,monospace">application/x-bluetooth-visibility</span> mime option. Bluetooth visibility means that the device is discoverable by other Bluetooth devices.</p>
+<pre class="prettyprint">var bluetoothVisibilityAppControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/edit&quot;, null, &quot;application/x-bluetooth-visibility&quot;);
+function launchVisibilityError(error) 
+{
+&nbsp;&nbsp;&nbsp;alert(&quot;An error occurred: &quot; + error.name + &quot;. Please enable Bluetooth visibility through the Settings application.&quot;);
+}
+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 " + (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;}
+};
+tizen.application.launchAppControl(bluetoothVisibilityAppControl, null, null, launchError, serviceVisibilityReply);
+</pre></li>
+
+   <li><p>Set a friendly name for the device using the <span style="font-family: Courier New,Courier,monospace">setName()</span> 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> 
+  </ol>
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices" class="items-tit-h2">Discovering Bluetooth Devices</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Learning how to search for remote devices and get the known devices is a basic Bluetooth management skill:</p>
+  <ol>
+   <li>Retrieve a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">BluetoothAdapter</a> object with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+</pre></li>
+   <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> method.</p> <p>The results of the search are returned in the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a>.</p> <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;}
+}
+
+/* Discover devices */
+adapter.discoverDevices(discoverDevicesSuccessCallback, null);
+</pre>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
+      </tr>
+     </tbody>
+    </table> </li>
+   <li><p>To retrieve known devices (which have been previously paired or searched for), use the <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> method.</p> <p>The results of the search are returned in the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a>.</p> <pre class="prettyprint">
+/* When a known device is found */
+function onGotDevices(devices)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The number of known devices: &quot; + devices.length);
+}
+
+/* Retrieve known devices */
+adapter.getKnownDevices(onGotDevices);
+</pre></li>
+  </ol>
+  
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Creating_Bond" name="Creating_Bond" class="items-tit-h2">Creating a Bonding with a Bluetooth Device</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Learning how to create a bonding with other devices is a basic Bluetooth management skill:</p>
+  <ol>
+   <li>Retrieve a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">BluetoothAdapter</a> object with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+</pre></li>
+   <li><p>To create a bonding with another device, use the <span style="font-family: Courier New,Courier,monospace">createBonding()</span> method:</p> <pre class="prettyprint">
+function onBondingSuccessCallback(device)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;A bonding is created - name: &quot; + device.name);
+}
+
+function onErrorCallback(e)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Cannot create a bonding, reason: &quot; + e.message);
+}
+
+adapter.createBonding(&quot;35:F4:59:D1:7A:03&quot;, onBondingSuccessCallback, onErrorCallback);
+</pre>
+
+   <table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">The MAC address of the Bluetooth device is a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">BluetoothAddress</a> object. You can get the MAC address of the peer device from the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">BluetoothDevice</a> object, which is returned in the success callback of the <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span>&#39;s <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> and <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> methods.</td>
+     </tr>
+    </tbody>
+   </table></li>
+
+   <li><p>To end the bonding with a remote device, use the <span style="font-family: Courier New,Courier,monospace">destroyBonding()</span> method:</p> <pre class="prettyprint">adapter.destroyBonding(&quot;35:F4:59:D1:7A:03&quot;);</pre></li>
+  </ol>
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Connecting_BT_device" name="Connecting_BT_device" class="items-tit-h2">Connecting to and Exchanging Data with a Bluetooth Device</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+   <p>The Radio Frequency Communication (RFCOMM) is a set of transport protocols which allows multiple simultaneous connections to a device. The device that provides a service is called a server device, and devices that request the service are called client devices. </p> 
+  <p>Learning how to connect to services provided by a server device to the client devices is a basic Bluetooth management skill:</p> 
+  <ol> 
+   <li>Retrieve a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">BluetoothAdapter</a> object instance with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+</pre></li> 
+   <li><p>To register a service and allow client devices to connect to it, use the <span style="font-family: Courier New,Courier,monospace">registerRFCOMMServiceByUUID()</span> method on the server device:</p> <pre class="prettyprint">adapter.registerRFCOMMServiceByUUID(serviceUUID, &quot;My service&quot;);</pre> 
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">BluetoothDevice</a> object. The object has an array of UUIDs available for the device.</td> 
+      </tr> 
+     </tbody> 
+    </table> <p>When the service has been successfully registered, the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a> interface is triggered.</p> </li> 
+       
+       <li>Before establishing a connection, your device must be bonded with a peer device. For more information, see <a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a>.</li>
+       
+       <li><p>To connect to the server device, use the <span style="font-family: Courier New,Courier,monospace">connectToServiceByUUID()</span> 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;},
+&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;}
+);</pre> 
+
+<p>When a connection between 2 devices is established, the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a> interface on the client device and the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler in the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceHandler">BluetoothServiceHandler</a> interface on the server device are triggered.</p></li> 
+   <li><p>To send data to the peer device, use the <span style="font-family: Courier New,Courier,monospace">writeData()</span> method:</p>
+<pre class="prettyprint">
+var somemsg = [3, 2, 1];
+var length = socket.writeData(somemsg);
+</pre> 
+
+<p>To send data between the devices, use a socket mechanism with the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">BluetoothSocket</a> interface. The proper socket is received when the devices are connected.</p></li> 
+
+<li><p>To read the data in the server device, use the <span style="font-family: Courier New,Courier,monospace">readData()</span> method:</p> 
+
+<pre class="prettyprint">var data = socket.readData();</pre> 
+
+<p>When an incoming message is received from the peer device, the <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> interface is triggered. </p></li> 
+  </ol> 
+ </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Communicating_Health" name="Communicating_Health" class="items-tit-h2">Communicating with a Health Source Device</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+   <p>To increase the communication capabilities of your application, you must learn to communicate with a health source device:</p> 
+  <ol> 
+   <li>Retrieve a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">BluetoothHealthProfileHandler</a> object:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+var healthProfileHandler = adapter.getBluetoothProfileHandler(&quot;HEALTH&quot;);
+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;
+}
+
+healthProfileHandler.registerSinkApplication(4100, &quot;testSinkApp&quot;, onSinkApp);
+</pre> 
+<p>When the sink application is registered successfully, the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a> interface 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>
+<li><p>To connect to the health source device, use the <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">BluetoothHealthProfileHandler</a> interface:</p>
+<pre class="prettyprint">
+function onConnect(channel) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Success&quot;);
+&nbsp;&nbsp;&nbsp;healthChannel = channel;
+}
+
+adapter.getDevice(&quot;35:F4:59:D1:7A:03&quot;, function(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;&nbsp;&nbsp;healthProfileHandler.connectToSource(device, healthApplication, onConnect); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+</pre> 
+<p>When a connection between 2 devices is established, the success callback of the <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method is called. In addition, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplication">BluetoothHealthApplication</a> instance is called, if the success callback attribute is set. You can get the connected <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannel">BluetoothHealthChannel</a> object from the callbacks.</p></li> 
+<li><p>To send data to the source device, use the <span style="font-family: Courier New,Courier,monospace">sendData()</span> method:</p>
+<pre class="prettyprint">
+var dataToSend = [0, 0, 0];
+var length = healthChannel.sendData(dataToSend);</pre> 
+<p>The <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a> interface is called when the data is received, if you set a listener on the connected channel by using the <span style="font-family: Courier New,Courier,monospace">setListener()</span> method.</p></li> 
+   
+    <li><p>Disconnect from the health source device:</p> <pre class="prettyprint">
+healthChannel.close();
+</pre> 
+<p>When the channel is disconnected, the <span style="font-family: Courier New,Courier,monospace">onclose</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface is called.</p></li>   
+  </ol> 
+    </div>
+        </li>
+      </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
new file mode 100644 (file)
index 0000000..cbda43b
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Communication: Connecting to the Network and Communicating with Messages</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm">Communication Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Communication: Connecting to the Network and Communicating with Messages</h1>
+
+    <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Communication API domain is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The communication tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="bluetooth_tutorial_w.htm">Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP</a> <p>Demonstrates how you can manage Bluetooth and exchange data with a peer device.</p></li> 
+   <li><a href="messaging_tutorial_w.htm">Messaging: Managing and Receiving SMS, MMS, and Email Messages</a> <p>Demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p></li>
+   <li><a href="nfc_tutorial_w.htm">NFC: Managing an NFC Device and Detecting NFC Tags and Peers</a> <p>Demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.</p></li>
+   <li><a href="push_tutorial_w.htm">Push: Receiving Push Notifications from a Push Server</a> <p>Demonstrates how you can register your application, connect to the push service, and start receiving push notifications.</p></li>
+   <li><a href="secure_element_tutorial_w.htm">Secure Element: Accessing Secure Elements</a> <p>Demonstrates how you can access and manage secure elements in a 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
new file mode 100644 (file)
index 0000000..37eddbc
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
@@ -0,0 +1,441 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing and Receiving SMS, MMS, and Email Messages</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li>Message sending
+                       <ul class="toc">
+            <li><a href="#Sending_Messages">Creating and Sending Messages</a></li>
+            <li><a href="#Selecting_the_SIM_Card">Selecting the SIM Card for Sending Messages</a></li>
+                       </ul></li>
+                       <li><a href="#Managing_Messages">Managing Messages</a></li>
+                       <li><a href="#Find_Folders">Finding Folders</a></li>
+            <li><a href="#Synchronizing_with_the_Server">Synchronizing with the Server</a></li>
+            <li><a href="#Receiving_Notifications">Receiving Notifications on Message Storage Changes</a></li>         
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/messaging_w.htm">Messaging Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Messaging: Managing and Receiving SMS, MMS, and Email Messages</h1>
+ <div class="cont"><div class="static-cont">
+ 
+ <p>This tutorial demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p>
+ 
+    <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+     
+  <h2>Warm-up</h2>
+      <p>Become familiar with the Messaging API basics by learning about:</p>
+      <ul>
+               <li>Message sending
+               <ul>
+       <li><a href="#Sending_Messages">Creating and Sending Messages</a> <p>Create and send messages, and save message drafts.</p> </li>
+          <li><a href="#Selecting_the_SIM_Card">Selecting the SIM Card for Sending Messages</a> <p>Retrieve information on available SIM cards and select the SIM card to send a message.</p></li>
+          </ul></li>
+       <li><a href="#Managing_Messages">Managing Messages</a> <p>Find, update, and delete messages in the message storage.</p> </li>
+          <li><a href="#Find_Folders">Finding Folders</a> <p>Find message folders belonging to a message service.</p></li>
+       <li><a href="#Synchronizing_with_the_Server">Synchronizing with the Server</a> <p>Load email messages and attachments from the email service and synchronize email.</p> </li>
+       <li><a href="#Receiving_Notifications">Receiving Notifications on Message Storage Changes</a> <p>Receive notifications when messages are added, updated, or deleted.</p></li>
+       
+      </ul>
+  <h2 id="task" name="task">Task</h2>
+      <p>In the <a href="task_chatter_w.htm">Chatter</a> task, we will walk through how to send, receive, and manage messages in your application.</p>
+         
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+  <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Sending_Messages" name="Sending_Messages" class="items-tit-h2">Creating and Sending Messages</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con"> 
+  
+  <p>To create engaging applications with various messaging features, you must learn to create and send messages:</p> 
+  <ol> 
+<li><p>Retrieve the messaging service using the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> 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>
+<pre class="prettyprint">
+function errorCallback(error) 
+{
+&nbsp;&nbsp;&nbsp;console.log(error.name + &quot;: &quot; + error.message);
+}
+
+tizen.messaging.getMessageServices(&quot;messaging.sms&quot;, serviceListCB, errorCallback);</pre> </li> 
+
+<li><p>In the success callback of the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> method, use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> interface to define the content and attributes of the message, and then send the message using the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface.</p> <p>If the message is not ready to be sent yet, save the message draft using the <span style="font-family: Courier New,Courier,monospace">addDraftMessage()</span> 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;);
+}
+
+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;}
+}</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:</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;)];
+</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;}
+}
+</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> 
+  </ol> 
+  </div>
+        </li>
+                <li>
+            <div class="devicespec-tit">
+                <h2 id="Selecting_the_SIM_Card" name="Selecting_the_SIM_Card" class="items-tit-h2">Selecting the SIM Card for Sending Messages</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>To add the dual SIM feature to your messaging application, you must learn to retrieve information on available SIM cards and select the SIM card to send SMS and MMS messages:</p>
+<ol>
+<li>To check how many SIM cards are available, call the <span style="font-family: Courier New,Courier,monospace">getCount()</span> 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;);
+if (count &gt; 1)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Dual SIM is supported&quot;);
+}
+</pre>
+</li>
+<li>To retrieve additional information on the available SIM cards, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValueArray()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface:
+<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 + &quot; (&quot; + sims[i].operatorName + &quot;) &quot; + sims[i].state);
+&nbsp;&nbsp;&nbsp;}
+}
+tizen.systeminfo.getPropertyValueArray(&quot;SIM&quot;, getPropertySuccess);
+</pre>
+<p>The information can be presented to the user to let them select the SIM card they want.</p>
+</li>
+<li>To send the message using the second SIM card, call the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface specifying the SIM index as <span style="font-family: Courier New,Courier,monospace">2</span>:
+<pre class="prettyprint">
+function sendSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Message has been sent&quot;);
+}
+
+function serviceSuccess(messageService)
+{
+&nbsp;&nbsp;&nbsp;message = new Message(messageService.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;to: [&quot;0001&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;plainBody: &quot;Surprise!&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;// SIM is selected (first SIM - 1, second SIM - 2):
+&nbsp;&nbsp;&nbsp;messageService.sendMessage(message, sendSuccess, null, 2);
+}
+
+tizen.messaging.getMessageServices(&quot;messaging.sms&quot;, serviceSuccess);
+</pre>
+</li>
+</ol>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Messages" name="Managing_Messages" class="items-tit-h2">Managing Messages</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+  <p>To create engaging applications with various messaging features, you must learn 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 <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface with a filter (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#messaging">Messaging Filter Attributes</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;);
+       
+&nbsp;&nbsp;&nbsp;emailService.messageStorage.findMessages(filter, messageArrayCB);
+}
+tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceListCB);
+</pre> 
+<p>The <span style="font-family: Courier New,Courier,monospace">findMessages()</span> 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 <span style="font-family: Courier New,Courier,monospace">loadMessageBody()</span> 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 <span style="font-family: Courier New,Courier,monospace">updateMessages()</span> method. The method uses an array of <span style="font-family: Courier New,Courier,monospace">Message</span> objects found previously by the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method as a parameter.</p> 
+   <p>In the following example, the <span style="font-family: Courier New,Courier,monospace">isRead</span> attribute of the first <span style="font-family: Courier New,Courier,monospace">Message</span> object in the given array is updated to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<pre class="prettyprint">
+function successCallback()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Success&quot;);
+}
+
+function messageArrayCB(messages) 
+{
+&nbsp;&nbsp;&nbsp;messages[0].isRead = true;
+&nbsp;&nbsp;&nbsp;emailService.messageStorage.updateMessages(messages, successCallback);
+}</pre> </li> 
+   <li><p>To delete a message from the message storage, use the <span style="font-family: Courier New,Courier,monospace">removeMessages()</span> method:</p> <pre class="prettyprint">function messageArrayCB(messages) 
+{
+&nbsp;&nbsp;&nbsp;emailService.messagingStorage.removeMessages(messages, successCallback);
+}</pre> </li> 
+  </ol> 
+   </div>
+        </li>          
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Find_Folders" name="Find_Folders" class="items-tit-h2">Finding Folders</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">  
+  
+  <p>To create engaging applications with various messaging features, you must learn how to find message folders:</p>
+  <ol>
+   <li><p>To retrieve the messaging service, use the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Messaging">Messaging</a> interface: </p>
+<pre class="prettyprint">
+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];
+}
+
+tizen.messaging.getMessageServices(&quot;messaging.email&quot;, 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;);
+
+&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;}
+}
+
+function onFindFoldersFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred:  &quot; + error.name);
+}
+</pre> </li>
+   <li><p>Define a filter (for attributes supported by the message folder filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#messaging">Messaging Filter Attributes</a>):</p>
+<pre class="prettyprint">
+var filter = new tizen.AttributeFilter(&quot;serviceId&quot;, &quot;EXACTLY&quot;, service.id);
+</pre> </li>
+   <li><p>To get all message folders, use the <span style="font-family: Courier New,Courier,monospace">findFolders()</span> 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.findFolders(filter, onFindFolders, onFindFoldersFail);</pre> </li>
+  </ol>
+   </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Synchronizing_with_the_Server" name="Synchronizing_with_the_Server" class="items-tit-h2">Synchronizing with the Server</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con"> 
+  
+  <p>To create engaging applications with various messaging features, you must learn to load email messages and attachments and synchronize email:</p>
+  <ol>
+   <li><p>Retrieve the messaging service using the <span style="font-family: Courier New,Courier,monospace">getMessageServices()</span> method. </p> <pre class="prettyprint">
+tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceListCB, errorCallback);</pre> </li>
+   <li><p>Search for all email messages with attachments using the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> 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;, &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);</pre></li>
+   <li><p>To load a message body, use the <span style="font-family: Courier New,Courier,monospace">loadMessageBody()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> 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);
+</pre> </li>
+   <li><p>To download the message attachments, use the <span style="font-family: Courier New,Courier,monospace">loadMessageAttachment()</span> 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;}
+}</pre> </li>
+   <li><p>To synchronize email with an external server:</p>
+    <ol>
+     <li><p>To synchronize all account folders, use the <span style="font-family: Courier New,Courier,monospace">sync()</span> method:</p> <pre class="prettyprint">
+/* Synchronize the folders in the success event handler */
+function servicesListSuccessCB(services)
+{
+&nbsp;&nbsp;&nbsp;services[0].sync(serviceSyncedCB, null, 30);
+}
+
+/* Get the email service */
+tizen.messaging.getMessageServices(&quot;messaging.email&quot;, servicesListSuccessCB); </pre> </li>
+     <li>To synchronize a specific folder, use the <span style="font-family: Courier New,Courier,monospace">syncFolder()</span> method. In the following example, only folders containing &quot;INBOX&quot; in their name are synchronized.<p></p> <pre class="prettyprint">
+var emailService; /* Assume email service is initialized */
+function serviceCallback(services)
+{
+&nbsp;&nbsp;&nbsp;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;}
+};
+
+/* Get the email service */
+tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceCallback, errorCallback);
+
+/* Search for specific folders */
+var filter = new tizen.AttributeFilter(&quot;serviceId&quot;, &quot;EXISTS&quot;);
+emailService.messageStorage.findFolders(filter, folderQueryCallback)); </pre> </li>
+    </ol> </li>
+  </ol>
+ </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Receiving_Notifications" name="Receiving_Notifications" class="items-tit-h2">Receiving Notifications on Message Storage Changes</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various messaging features, you must learn to receive notifications when messages and message folders are added, updated, or removed:</p>
+  <ol>
+   <li>Define the needed variable: <pre class="prettyprint">/* Watch identifier */
+var watchId;</pre></li>
+   <li><p>Define the event handlers for different notifications by implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessagesChangeCallback">MessagesChangeCallback</a> listener interface:</p> <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;}
+};
+</pre> </li>
+   <li>Register the listener to use the defined event handlers: <pre class="prettyprint">
+watchId = msgService.messageStorage.addMessagesChangeListener(messageChangeCallback);
+</pre> </li>
+   <li><p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p> <pre class="prettyprint">msgService.messageStorage.removeChangeListener(watchId);</pre> </li>
+  </ol>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To provide notifications for changes in specific conversations or message folders, use the applicable methods and event handlers similarly as above.</td>
+    </tr>
+   </tbody>
+  </table>
+    </div>
+        </li>
+      </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
new file mode 100644 (file)
index 0000000..615b42a
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
@@ -0,0 +1,326 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>NFC: Managing an NFC Device and Detecting NFC Tags and Peers</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#Managing_NFC_Conn">Managing NFC Connectivity</a></li>
+            <li><a href="#Detecting_NFC_Tags" >Detecting NFC Tags and Peer Devices</a></li>
+                       <li>NDEF data
+                       <ul class="toc">
+            <li><a href="#Handling_NDEF_Messages">Handling NDEF Messages</a></li>
+            <li><a href="#Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</a></li>
+            <li><a href="#Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</a></li>
+                       </ul></li>
+            <li><a href="#Using_NFC_Card_Emulation">Using NFC Card Emulation</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/nfc_w.htm">NFC Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>NFC: Managing an NFC Device and Detecting NFC Tags and Peers</h1>
+<div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.</p>
+ 
+    <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+     
+      <h2 id="warm_up" name="warm_up">Warm-up</h2>
+      <p>Become familiar with the NFC API basics by learning about:</p>
+      <ul>
+       <li><a href="#Managing_NFC_Conn">Managing NFC Connectivity</a> <p>Retrieve the default NFC adapter and enable or disable NFC.</p></li>
+       <li><a href="#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> <p>Receive notifications when an NFC tag or peer device has been detected.</p></li>
+          <li>NDEF data
+          <ul>
+       <li><a href="#Handling_NDEF_Messages">Handling NDEF Messages</a> <p>Create NDEF records and add them to an NDEF message.</p></li>
+       <li><a href="#Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</a> <p>Read NDEF messages and exchange them with peer devices.</p></li>
+       <li><a href="#Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</a> <p>Read NDEF messages and exchange them with tags.</p></li>
+          </ul></li>
+       <li><a href="#Using_NFC_Card_Emulation">Using NFC Card Emulation</a> <p>Enable NFC card emulation and monitor the transaction taking place.</p></li>
+      </ul>
+      <h2 id="task" name="task">Task</h2>
+      <p>In the <a href="task_contactsexchanger_w.htm">Contacts Exchanger</a> task, we will walk through how to exchange contacts between devices over the NFC connection.</p>
+         
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+  <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_NFC_Conn" name="Managing_NFC_Conn" class="items-tit-h2">Managing NFC Connectivity</h2><span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con"> 
+  
+  <p>Learning how to enable or disable the NFC service is a basic NFC management skill:</p>
+  <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request a built-in Settings application to let the user enable or disable the NFC.</td>
+      </tr>
+     </tbody>
+    </table>
+  <ol>
+   <li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> object to request the NFC switching operation:</p>
+   <pre class="prettyprint">var nfcSwitchAppControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/nfc&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;&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;)]);
+var adapter = tizen.nfc.getDefaultAdapter();</pre></li>
+   <li>Define the event listener for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method:
+<pre class="prettyprint">function launchSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;NFC Settings application is successfully launched.&quot;);
+}</pre></li>
+<li>Define the event handler for an application control, which implements the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a> interface:
+<pre class="prettyprint">var serviceReply =
+{
+&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;/* Error handling */
+&nbsp;&nbsp;&nbsp;}
+};</pre></li>
+<li> If necessary, request launching the NFC Settings with <span style="font-family: Courier New,Courier,monospace">nfcSwitchAppControl</span> as parameter:
+<pre class="prettyprint">if (adapter.powered)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;NFC is already enabled&quot;);
+}
+else
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Try to launch the NFC Settings application.&quot;);
+&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess, launchError, serviceReply);
+}</pre></li>
+  </ol>
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Detecting_NFC_Tags" name="Detecting_NFC_Tags" class="items-tit-h2">Detecting NFC Tags and Peer Devices</h2><span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Learning how to detect NFC tags and peer devices is a basic NFC management skill:</p>
+  <ol>
+   <li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:</p> <pre class="prettyprint">var nfcAdapter = tizen.nfc.getDefaultAdapter();</pre></li>
+   <li><p>Define the event handlers for NFC tag detection using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">NFCTagDetectCallback</a> listener interface:</p> <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;}
+}</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 <span style="font-family: Courier New,Courier,monospace;">setTagListener()</span> 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;, &quot;MIFARE_ULTRA&quot;, &quot;MIFARE_DESFIRE&quot;];
+
+/* Registers the event listener */
+nfcAdapter.setTagListener(setTagDetect, tagFilter);</pre> </li>
+   <li><p>To stop the tag detection, use the <span style="font-family: Courier New,Courier,monospace;">unsetTagListener()</span> method:</p> <pre class="prettyprint">
+nfcAdapter.unsetTagListener();</pre> </li>
+  </ol>
+  <p>NFC peers are detected similarly as NFC tags, except that the <span style="font-family: Courier New,Courier,monospace;">setPeerListener()</span> method is used to register the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">NFCPeerDetectCallback</a> listener interface, and the <span style="font-family: Courier New,Courier,monospace;">unsetPeerListener()</span> method is used to stop the peer detection.</p>
+    </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Handling_NDEF_Messages" name="Handling_NDEF_Messages" class="items-tit-h2">Handling NDEF Messages</h2> <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  
+  <p>Learning how to create NDEF messages is a basic NFC management skill:</p>
+  <ol>
+   <li><p>To create an NDEF URI record, create an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">NDEFRecordURI</a> interface instance and specify the URI parameter.</p> <p>Additionally, you can create instances of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">NDEFRecord</a>, <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">NDEFRecordText</a>, or <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> interfaces based on the record type to be created.</p> <pre class="prettyprint">var newRecord = new tizen.NDEFRecordURI(&quot;https://www.tizen.org/&quot;);</pre></li>
+   <li><p>Create an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> interface instance:</p> <pre class="prettyprint">
+var newMessage = new tizen.NDEFMessage(); </pre></li>
+   <li><p>To add an NDEF record to an NDEF message, use the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface:</p> <pre class="prettyprint">
+newMessage.records[0] = newRecord;</pre></li>
+  </ol>
+    </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Exchanging_NDEF_Peers" name="Exchanging_NDEF_Peers" class="items-tit-h2">Exchanging NDEF Data with Peers</h2> <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Learning how to exchange NDEF data with peer devices is a basic NFC management skill:</p>
+  <ol>
+   <li><p>To receive NDEF messages from a peer device, use the <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">NFCPeer</a> interface.</p><p>The <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">NDEFMessageReadCallback</a> 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);
+}
+
+/* Set a listener to receive an NDEF message */
+Peer.setReceiveNDEFListener(readMessage);</pre></li>
+   <li><p>To send an NDEF message to an NFC peer, use the <span style="font-family: Courier New,Courier,monospace;">sendNDEF()</span> method:</p> <pre class="prettyprint">
+var newMessage = new tizen.NDEFMessage();
+
+Peer.sendNDEF(newMessage);</pre></li>
+  </ol>
+   </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Exchanging_NDEF_Tags" name="Exchanging_NDEF_Tags" class="items-tit-h2">Exchanging NDEF Data with Tags</h2> <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+  <p>Learning how to exchange NDEF data with tags is a basic NFC management skill:</p>
+  <ol>
+   <li><p>To read data from an NFC tag, use the <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">NFCTag</a> interface.</p> <p>The <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">NDEFMessageReadCallback</a> 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);
+}
+
+/* Check whether the NFC tag supports NDEF format */
+if (Tag.isSupportedNDEF)
+{
+&nbsp;&nbsp;&nbsp;/* Read NDEF data */
+&nbsp;&nbsp;&nbsp;Tag.readNDEF(readMessage);
+}</pre></li>
+   <li><p>To write data on an NFC tag, use the <span style="font-family: Courier New,Courier,monospace;">writeNDEF()</span> method:</p> <pre class="prettyprint">
+var newMessage = new tizen.NDEFMessage();
+function writeCallback()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Success!&quot;);
+}
+Tag.writeNDEF(newMessage, writeCallback);</pre> <p>You can use the <span style="font-family: Courier New,Courier,monospace;">transceive()</span> method to transfer raw data, as a byte array, to an NFC tag without knowing the underlying details of the tag.</p></li>
+  </ol>
+    </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="Using_NFC_Card_Emulation" name="Using_NFC_Card_Emulation" class="items-tit-h2">Using NFC Card Emulation</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Learning how to enable or disable the NFC card emulation and detect Secure Element transactions is a basic NFC management skill:</p>
+<ol>
+<li>Declare the required variables and obtain the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> object using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">NFCManager</a> interface:
+<pre class="prettyprint">
+var adapter = tizen.nfc.getDefaultAdapter();
+var modeListenerId = 0, aseListenerId = 0, transListenerId = 0;
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">addCardEmulationModeChangeListener()</span>  method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to register a listener to monitor the current card emulation mode:
+<pre class="prettyprint">
+modeListenerId = adapter.addCardEmulationModeChangeListener(function(mode)
+{
+&nbsp;&nbsp;&nbsp;if(mode === &quot;ALWAYS_ON&quot;)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;We are ready to go now&quot;);
+&nbsp;&nbsp;&nbsp;}
+});
+</pre></li>
+<li>To enable NFC card emulation, change the value of the <span style="font-family: Courier New,Courier,monospace">cardEmulationMode</span>  attribute:
+<pre class="prettyprint">
+adapter.cardEmulationMode = &quot;ALWAYS_ON&quot;;
+</pre></li>
+ <li>To be notified when the type of an active NFC secure element changes, use the <span style="font-family: Courier New,Courier,monospace">addActiveSecureElementChangeListener()</span>  method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+<pre class="prettyprint">
+aseListenerId = adapter.addActiveSecureElementChangeListener(function(seType)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Active secure element is &quot; + seType);
+});
+</pre></li>
+<li>To be notified when a NFC secure element transaction data is exchanged, use the <span style="font-family: Courier New,Courier,monospace">addTransactionEventListener()</span>  method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+<pre class="prettyprint">
+function onDetected(appletId, data)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;NFC secure element transaction detected. Application: &quot; + appletId + &quot;. Protocol data: &quot; + data);
+});
+transListenerId = adapter.addTransactionEventListener(&quot;UICC&quot;, 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;;
+</pre></li>
+</ol>
+            </div>
+        </li>
+
+      </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
new file mode 100644 (file)
index 0000000..c222612
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
@@ -0,0 +1,146 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Push: Receiving Push Notifications from a Push Server</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Registering">Registering to the Push Service</a></li>
+                       <li><a href="#Receiving">Receiving Push Notifications</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/push_w.htm">Push Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Push: Receiving Push Notifications from a Push Server</h1>
+<div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can register your application, connect to the push service, and start receiving push notifications.</p>
+ 
+     <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+    
+      <h2>Warm-up</h2>
+      <p>Become familiar with the Push API basics by learning about:</p>
+      <ul>
+       <li><a href="#Registering">Registering to the Push Service</a> <p>Register to the push service and get the registration identifier.</p> </li>
+       <li><a href="#Receiving">Receiving Push Notifications</a> <p>Connect to the push service and start receiving push notifications.</p></li>
+      </ul>
+         
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Registering" name="Registering" class="items-tit-h2">Registering to the Push Service</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">  
+  
+  <p>To receive push notifications, you must learn how to register your application to the push service:</p> 
+  <ol> 
+   <li><p>Define the data to be used when the process is launched by the notification service:</p> <pre class="prettyprint">
+var service = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/push_test&quot;);
+</pre> </li> 
+   <li><p>Define event handlers for the registration results:</p> <pre class="prettyprint">
+function errorCallback(response) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;The following error occurred: &#39; +  response.name);
+}
+
+function registerSuccessCallback(id) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Registration succeeded with id: &quot; + id);
+}
+</pre> </li> 
+   <li> <p>Register the application for the service with the <span style="font-family: Courier New,Courier,monospace">registerService()</span> method:</p> <pre class="prettyprint">tizen.push.registerService(service, registerSuccessCallback, errorCallback);</pre> <p>If the registration is successful, the <span style="font-family: Courier New,Courier,monospace;">registerSuccessCallback()</span> event handler returns the registration ID.</p> </li> 
+  </ol> 
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Receiving" name="Receiving" class="items-tit-h2">Receiving Push Notifications</h2><span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con"> 
+  
+  <p>To take advantage of the push technology, you must learn how to connect to the push service and receive push notifications:</p> 
+  <ol> 
+   <li><p>Define the event handlers for the push connection. The push notifications are delivered in the success event handler.</p> <pre class="prettyprint">
+function errorCallback(response)
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;The following error occurred: &#39; +  response.name);
+}
+
+function notificationCallback(noti)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Notification received with alert message: &quot; + noti.alertMessage);
+}
+</pre> </li> 
+   <li> <p>Request the push service connection with the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method:</p> <pre class="prettyprint">tizen.push.connectService(notificationCallback, errorCallback);</pre> <p>If the connection is established, you start receiving push notifications.</p> </li> 
+  </ol>
+     </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
new file mode 100644 (file)
index 0000000..a1b8f78
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
@@ -0,0 +1,246 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Secure Element: Accessing Secure Elements</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Managing_Secure_Element">Managing Secure Elements</a></li>
+                       <li><a href="#Opening_Sessions">Opening Sessions and Channels</a></li>
+                       <li><a href="#Transmitting_APDU">Transmitting APDUs to Secure Elements</a></li>
+                       <li><a href="#Closing_Sessions">Closing Sessions and Channels</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/secure_element_w.htm">Secure Element Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">Secure Element API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Secure Element: Accessing Secure Elements</h1>
+<div class="cont"><div class="static-cont"> 
+ 
+ <p>This tutorial demonstrates how you can access and manage secure elements in a device.</p>
+ 
+    <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+     
+  <h2>Warm-up</h2>
+          <p>Become familiar with the Secure Element API basics by learning about:</p>
+          <ul>
+           <li><a href="#Managing_Secure_Element">Managing Secure Elements</a> <p>Retrieve all available secure element readers, and track changes in the available readers.</p> </li>
+           <li><a href="#Opening_Sessions">Opening Sessions and Channels</a> <p>Open a session, and then a basic and logical channel within the session.</p></li>
+           <li><a href="#Transmitting_APDU">Transmitting APDUs to Secure Elements</a> <p>Transmit an application protocol data units (APDU) command to a secure element.</p></li>
+           <li><a href="#Closing_Sessions">Closing Sessions and Channels</a> <p>Close specific channels and sessions, or all channels and sessions.</p></li>
+          </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+  
+  <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Managing_Secure_Element" name="Managing_Secure_Element" class="items-tit-h2">Managing Secure Elements</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con"> 
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">getReaders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">SEService</a> interface. The method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a> interface, 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;}
+}
+tizen.seService.getReaders(success, function(err) {/* Error handling */});
+</pre> </li> 
+
+   <li> <p>To receive reader change notifications, use the <span style="font-family: Courier New,Courier,monospace">registerSEListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SEService</span> interface:</p> 
+   <ol>
+      <li><p>Define a listener using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEChangeListener">SEChangeListener</a> interface:</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;},
+}
+</pre> </li> 
+   <li><p>Register the listener:</p> <pre class="prettyprint">
+var seListener = tizen.seService.registerSEListener(setSEChange);
+</pre> </li> 
+   </ol>   
+   </li> 
+ <li><p>To stop listening to the reader changes, use the <span style="font-family: Courier New,Courier,monospace">unregisterSEListener()</span> method:</p> <pre class="prettyprint">
+tizen.seService.unregisterSEListener(seListener);
+</pre> </li>   
+  </ol> 
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Opening_Sessions" name="Opening_Sessions" class="items-tit-h2">Opening Sessions and Channels</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+  <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 <span style="font-family: Courier New,Courier,monospace">openSession()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">Reader</a> interface. The method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SessionSuccessCallback">SessionSuccessCallback</a> interface, 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;);
+}
+
+function errorCB(err)
+{
+&nbsp;&nbsp;&nbsp;/* Error handling */
+}
+reader.openSession(successCB, errorCB);
+</pre> </li> 
+   <li><p>To open a channel within a session:</p>
+   <ol>
+      <li><p>Open a basic channel with the <span style="font-family: Courier New,Courier,monospace">openBasicChannel()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">Session</a> interface. The method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ChannelSuccessCallback">ChannelSuccessCallback</a> interface, which is invoked when a channel is opened to communicate with a specific applet.</p> <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;);
+}
+
+function errorCB(err)
+{
+&nbsp;&nbsp;&nbsp;/* Error handling */
+}
+
+/* This aid is for testing purposes for your applet */
+session.openBasicChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successCB, errorCB);
+</pre> </li> 
+   <li><p>Open a logical channel with the <span style="font-family: Courier New,Courier,monospace">openLogicalChannel()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> interface. As with a basic channel, the method registers the <span style="font-family: Courier New,Courier,monospace">ChannelSuccessCallback</span> interface.</p> <pre class="prettyprint">
+session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successCB, errorCB);
+</pre> </li> 
+   </ol>   
+   </li> 
+  </ol>
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Transmitting_APDU" name="Transmitting_APDU" class="items-tit-h2">Transmitting APDUs to Secure Elements</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">transmit()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">Channel</a> interface.</p> <pre class="prettyprint">
+/* The APDU command is defined in ISO7816-4 */  
+channel.transmit(command, successCB, errorCB);
+</pre> </li> 
+   <li><p>The <span style="font-family: Courier New,Courier,monospace">transmit()</span> method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#TransmitSuccessCallback">TransmitSuccessCallback</a> interface, which is invoked when a command has been successfully transmitted:</p> <pre class="prettyprint">
+function successCB(response)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;An APDU is transmitted successfully. The response is &quot; + response);
+}
+function errorCB(err)
+{
+&nbsp;&nbsp;&nbsp;/* Error handling */
+}
+</pre> </li> 
+  </ol> 
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Closing_Sessions" name="Closing_Sessions" class="items-tit-h2">Closing Sessions and Channels</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">Channel</a> interface:</p> <pre class="prettyprint">
+channel.close();
+</pre> </li> 
+   <li><p>To close all channels within a specific session, use the <span style="font-family: Courier New,Courier,monospace">closeChannels()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">Session</a> interface:</p> <pre class="prettyprint">
+session.closeChannels();
+</pre> </li> 
+     <li><p>To close a specific session, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> interface:</p> <pre class="prettyprint">
+session.close();
+</pre> </li> 
+   <li><p>To close all session for a specific reader, use the <span style="font-family: Courier New,Courier,monospace">closeSessions()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">Reader</a> interface:</p> <pre class="prettyprint">
+reader.closeSessions();
+</pre> </li>  
+ </ol> 
+     </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm
new file mode 100644 (file)
index 0000000..a2f5aa0
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm
@@ -0,0 +1,409 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Bluetooth Chat</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
+            <li><a href="#Initializing_App">Initializing the Application</a></li>
+            <li><a href="#Creating_Connection">Creating the Connection</a></li> 
+            <li><a href="#Exchanging_Data">Sending a Message</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm">Bluetooth Guide</a></li> 
+            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<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 SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">BluetoothChat</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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> 
+  <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> 
+  <p>The BluetoothChat sample application layout uses the template manager based on the MVC (Model-View-Controller) architecture, and consists of 3 screens: the main screen displays buttons for creating or joining a chat, the Choose your server screen displays a list of available servers, and the chat screen  displays the conversation history, an input area, and a button, allowing the user to write and send messages.</p> 
+
+  <p>The following figure shows the main screens of the application.</p> 
+  <p class="figure">Figure: BluetoothChat screens</p> 
+  <p style="text-align: center;"><img alt="BluetoothChat screens" src="../../../images/bluetoothchat.png" /></p>
+  
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep"> 
+   <li>index.html Source File
+   <ol><li>
+   <p>The main screen displays option buttons. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
+   
+        <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;</pre></li>
+ <li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. It contains buttons (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications) 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;/div&gt;
+</pre>
+  </li>
+  </ol>
+  </li>
+  <li>app.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">checkPowerState()</span> method is used to check the Bluetooth connection status. If the Bluetooth connection is not on, the main screen only displays the <strong>Turn bluetooth on</strong> button.</p>
+<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));
+},
+</pre>
+</li>
+<li>app.ui.events.js Source File
+<p>The <strong>Create server</strong> and <strong>Join server</strong> button events are defined in the <span style="font-family: Courier New,Courier,monospace">app.ui.events.js</span> 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;app.resetApplicationMode();
+&nbsp;&nbsp;&nbsp;app.startServer();
+});
+
+$(&#39;#clientButton&#39;).on(&#39;click&#39;, function(event) 
+{
+&nbsp;&nbsp;&nbsp;app.resetApplicationMode();
+&nbsp;&nbsp;&nbsp;app.startClient();
+});
+</pre>
+</li>
+
+<li>templates/keyboard_page.tpl Source File
+<ol>
+<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&gt;
+</pre>
+</li>
+<li><p>When the user enters the server or client name and taps <strong>OK</strong>, the <span style="font-family: Courier New,Courier,monospace">getApplicationMode()</span> 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;event.preventDefault();
+&nbsp;&nbsp;&nbsp;var value = $(&#39;#keyboard-text&#39;).val(), mode;
+&nbsp;&nbsp;&nbsp;if (value.length !== 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.setUserName(value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mode = app.getApplicationMode();
+&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;app.setAdapterName();
+&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;$.mobile.changePage(&#39;#choose&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+
+
+<h3 id="server" name="server">Defining the Choose Your Server Screen</h3> 
+<ol class="tutorstep">
+<li>templates/choose_page.tpl Source File
+<ol><li><p>The content section of the Choose your server screen displays a list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications) 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&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 pop-ups (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm">wearable</a> applications).</p>
+<pre class="prettyprint">
+$(&#39;#choose-content&#39;).on(&#39;tap&#39;, &#39;ul.ui-listview li&#39;, function() 
+{
+&nbsp;&nbsp;&nbsp;app.client.stopServerSearching($(this).attr(&#39;address&#39;));
+});
+</pre>
+</li>
+</ol>
+</li>
+</ol> 
+
+<h3 id="chat" name="chat">Defining the Chat Screen</h3> 
+<ol class="tutorstep">
+<li>templates/chat_page.tpl Source File
+<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 <span style="font-family: Courier New,Courier,monospace">left_bubble.tpl</span> and <span style="font-family: Courier New,Courier,monospace">right_bubble.tpl</span> template files.</p>
+ <p>The footer section contains a <span style="font-family: Courier New,Courier,monospace">textArea</span> 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&gt;
+</pre>
+
+</li>
+<li>app.ui.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">checkSendButtonState()</span> method is used to check whether there is text in the <span style="font-family: Courier New,Courier,monospace">textArea</span>. If the <span style="font-family: Courier New,Courier,monospace">textArea</span> field is empty, the <strong>Send</strong> button is disabled.</p>
+<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;}
+},
+</pre>
+</li>
+</ol>
+
+ <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
+  <ol class="tutorstep">
+   <li>config.xml Source File
+    <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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/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;/widget&gt;</pre>
+   </li>
+  </ol>
+
+ <h2 id="Creating_Connection" name="Creating_Connection">Creating the Connection</h2> 
+  <p>This section builds upon the elements described in <a href="bluetooth_tutorial_w.htm#Discovering_BT_Devices">Discovering Bluetooth Devices</a> and <a href="bluetooth_tutorial_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p> 
+
+
+  <h3 id="check" name="check">Checking the Bluetooth Status</h3>
+  
+  <ol class="tutorstep">
+  <li>app.server.js Source File
+  <ol><li><p>Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method.</p>
+<pre class="prettyprint">
+this.adapter = tizen.bluetooth.getDefaultAdapter();
+</pre>
+  </li>
+  <li>
+  <p>The power status of the adapter can be checked using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method.</p>
+<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;setTimeout(function() {callback();}, 500);
+&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;}
+},
+</pre>
+  </li>
+  </ol>
+</li>
+</ol>
+  <h3 id="register" name="register">Registering the Server</h3> 
+  <ol class="tutorstep">
+  <li>app.server.js Source File
+  <p>One of the devices must be defined to be used as the server. This is done using the <span style="font-family: Courier New,Courier,monospace">registerServer()</span> method.</p>
+  <pre class="prettyprint">
+registerServer: function Server_registerServer() 
+{
+&nbsp;&nbsp;&nbsp;this.model.registerServer(this.adapter, this.serviceUUID, this.registerServerSuccess.bind(this));
+},
+</pre>
+  </li>
+  </ol>
+
+  <h3 id="connect" name="connect">Connecting Devices</h3> 
+  <ol class="tutorstep">
+  <li>app.client.model.js Source File
+  <ol>
+  <li>
+  <p>After defining the default Bluetooth adapter and setting up the server, you can select the requested server and bond the devices using the <span style="font-family: Courier New,Courier,monospace">connectToService()</span> 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, 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, errorCallback, &#39;RFCOMM&#39;);
+&nbsp;&nbsp;&nbsp;}
+},
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">connectToService()</span> method sends a ping to ensure that the server is responding.
+<pre class="prettyprint">
+sendPing: function ClientModel_sendPing(name, socket)
+</pre>
+</li>
+</ol>
+  </li>
+  </ol>
+
+  
+<h2 id="Exchanging_Data" name="Exchanging_Data">Sending a Message</h2>
+
+  <p>This section builds upon the elements described in <a href="bluetooth_tutorial_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p> 
+  <ol class="tutorstep">
+<li>app.client.model.js Source File  
+<p>Before sending a message, the message data must be stringified to the JSON format. The data is then written to the selected socket using the <span style="font-family: Courier New,Courier,monospace">writeData()</span> method.</p>  
+
+<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;}
+},
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
new file mode 100644 (file)
index 0000000..0f90b38
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
@@ -0,0 +1,584 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Chatter</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
+            <li><a href="#Initializing_App">Initializing the Application</a></li>
+            <li><a href="#Managing_Messages">Managing Messages</a></li>
+            <li><a href="#Creating_Sending_Messages">Creating and Sending Messages</a></li>
+            <li><a href="#Managing_Message_Status">Managing Message Status Changes</a></li> 
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/messaging_w.htm">Messaging Guide</a></li> 
+            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging API for Mobile Web</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Task: Chatter</h1> 
+  <p>This task, based on the Chatter sample delivered with the Tizen SDK, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API to send, receive, and manage your messages. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">Chatter</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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="#Managing_Messages">Managing Messages</a> defines how to retrieve message recipient information and group it into a single list.</li>
+   <li><a href="#Creating_Sending_Messages">Creating and Sending Messages</a> defines how to get contacts using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API, how to set the recipient for a new message, and how to send the message.</li>
+   <li><a href="#Managing_Message_Status">Managing Message Status Changes</a> defines how to use event listeners to check and update the message status.</li>
+  </ul> 
+  <p>This sample is a fully functional application for managing, creating, and sending messages.</p> 
+  
+  <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2> 
+  <p>The Chatter sample application layout consists of 3 screens: the main screen displays a contact list, the Select contact screen displays a contact list and a pop-up allowing the user to enter a phone number, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send a message.</p> 
+
+  <p>The following figure shows the main screens of the application.</p> 
+  <p class="figure">Figure: Chatter screens</p> 
+  <p style="text-align: center;"><img alt="Chatter screens" src="../../../images/chatter.png" /></p> 
+
+  
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+  <ol class="tutorstep"> 
+
+   <li>main_page.tpl Source File 
+<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
+<p>The content section of the screen is added dynamically and displays a contact list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications). The footer section contains a tab bar (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">mobile</a> applications) 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&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&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&gt;
+</pre>
+
+</li> 
+
+<li>app.ui.event.js Source File 
+<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;event.preventDefault();
+&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;app.loadContacts();
+});
+</pre>
+</li>
+  </ol> 
+  
+  <h3 id="contact" name="contact">Defining the Select Contact Screen</h3> 
+  <ol class="tutorstep">
+  <li>contactSelect.tpl Source File
+  <p>The content section of the Select contact screen displays a contact list. If the user taps the <strong>Enter number</strong> button (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications), a pop-up appears allowing the user to enter a phone number for a contact not on the list. The popup component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm">wearable</a> applications) 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&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&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;&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&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&gt;
+</pre>
+  </li>
+  </ol>
+  
+  <h3 id="chat" name="chat">Defining the Chat Screen</h3> 
+  <ol class="tutorstep">
+  <li>chat.tpl Source File
+  <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>
+ <p>The footer section contains a <span style="font-family: Courier New,Courier,monospace">textarea</span> for writing a message and a button for sending it.</p>
+ <p>
+The template also contains a <span style="font-family: Courier New,Courier,monospace">popup</span> 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&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; 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&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&gt;
+</pre>
+  </li>
+  </ol>
+
+  <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
+  <ol class="tutorstep">
+   <li>config.xml Source File
+    <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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/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;/widget&gt;</pre>
+   </li> 
+  </ol> 
+
+  
+  <h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2> 
+
+  <p>This section builds upon the elements described in <a href="messaging_tutorial_w.htm#Managing_Messages">Managing Messages</a>.</p>
+
+
+  <h3 id="get" name="get">Retrieving SMS Messages</h3>
+ <p>The message retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.model.js</span> file.</p>
+    <ol class="tutorstep"> 
+   <li>Preparing the Message Service
+   <p>To retrieve messages from the device storage, you must first initialize the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface and prepare the <span style="font-family: Courier New,Courier,monospace">smsService</span> object.</p>
+        <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;self.smsService = s[0];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareMessages(app.fillUpMessagePage.bind(self));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.messagesChangeListener();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+</li> 
+
+  <li>Retrieving Messages for the Device Storage<p>The messages are retrieved using the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. The first argument of the method a is the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">AttributeFilter</a> filter object of the Tizen API, and the second argument is an event handler for sorting the messages (newest on top). The retrieved messages are saved in the <span style="font-family: Courier New,Courier,monospace">messagesList</span> variable.</p>
+  <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.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;&nbsp;&nbsp;&nbsp;&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(messages) 
+&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;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;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.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;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 
+&nbsp;&nbsp;&nbsp;&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;messages.sort(compare);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.messagesList = self.groupMessages(messages);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.loadCallerList();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+  </li>
+  </ol>
+  
+  <h3 id="group" name="group">Grouping SMS Messages</h3>
+  <p>Chatter messages are grouped according to their recipient key. Each recipient object consists of a message array and the latest message. The grouped object can be used for both main and chat screens of the Chatter application.</p>
+  <p>The message grouping functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.model.js</span> file.</p>
+  <ol class="tutorstep"> 
+  <li>Creating the Group
+  <ol>
+  <li>
+  <p>The <span style="font-family: Courier New,Courier,monospace">groupMessages()</span> method is used to filter the messages according to their status.</p>
+  <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) || 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;
+}
+</pre>
+  </li>
+  <li>
+  <p>The <span style="font-family: Courier New,Courier,monospace">groupMessagesSingle()</span> method prepares the conversation array for the recipient key.</p>
+<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;
+}
+</pre>
+  </li>
+ </ol></li> 
+  <li>Pushing Data to the Conversation Array
+  <p>The <span style="font-family: Courier New,Courier,monospace">pushData()</span> method pushes the retrieved data into the recipient conversation array and sets the <span style="font-family: Courier New,Courier,monospace">lastMessage</span> 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;
+}
+</pre>
+  </li>
+
+<li>Including the Latest Message
+<p>The <span style="font-family: Courier New,Courier,monospace">getGroupObject()</span> method is used to include the latest message in the array.</p>
+<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;};
+}
+</pre>
+  </li>
+  </ol>
+  
+  <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="messaging_tutorial_w.htm#Sending_Messages">Creating and Sending Messages</a>.</p>
+ 
+
+  <h3 id="get_contact" name="get_contact">Getting the Contact List</h3>
+  <ol class="tutorstep"> 
+   <li>app.model.js Source File
+   <ol><li><p>To get the contact list from the device memory, get the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method.</p>
+        <pre class="prettyprint">
+this.addressBook = tizen.contact.getDefaultAddressBook();
+</pre></li> 
+<li>
+<p>The contacts are retrieved using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface of the Contact API, and grouped into a <span style="font-family: Courier New,Courier,monospace">contactsLoaded</span> object.
+</p>
+<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);
+}
+</pre>
+</li>
+</ol>
+</li></ol>
+  <h3 id="prepare" name="prepare">Setting the Message Recipient</h3>
+  <p>The message recipient selection functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.js</span> file.</p>
+  <ol class="tutorstep"> 
+  <li>Displaying the Contacts
+  <p>Before the user write the message text, they select the message recipient. The recipient list stored in the <span style="font-family: Courier New,Courier,monospace">contactsLoaded</span> 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], &#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;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;return -1;
+&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;return 1;
+&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;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;}</pre>
+</li>
+<li>Selecting the Contact
+<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;app.ui.onCallerListElementTap(event, $(this));
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;ul.trigger(&#39;create&#39;);
+&nbsp;&nbsp;&nbsp;ul.listview(&#39;refresh&#39;);
+}
+</pre>
+  </li>
+  </ol>
+  
+  <h3 id="send" name="send">Sending the Message</h3>
+  <ol class="tutorstep"> 
+  <li>app.model.js Source File
+  <p>After the user writes the message and taps the <strong>Send</strong> button, the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method is called to send the message using the <span style="font-family: Courier New,Courier,monospace">smsService</span> object. The message type and recipient information are included as arguments for the method.</p>
+  <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;}
+},
+</pre>
+  </li>
+ 
+  </ol>
+  
+  <h2 id="Managing_Message_Status" name="Managing_Message_Status">Managing Message Status Changes</h2> 
+
+  <p>This section builds upon the elements described in <a href="messaging_tutorial_w.htm#Receiving_Notifications">
+Receiving Notifications on Message Storage Changes</a>.</p>
+  
+  <h3 id="get_message" name="get_message">Getting the Message Status</h3> 
+  <ol class="tutorstep"> 
+   <li>app.model.js Source File<p>An event listener is added to detect whether messages have been changed, added, or removed using the <span style="font-family: Courier New,Courier,monospace">addMessagesChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. When messages have been added or removed, the <span style="font-family: Courier New,Courier,monospace">prepareMessages()</span> method is called to refresh the message list.</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);
+}
+</pre></li> 
+</ol>
+
+  <h3 id="change" name="change">Displaying Updated Messages</h3> 
+  <ol class="tutorstep"> 
+  <li>app.ui.js Source File<p> When the message status has changed, the <span style="font-family: Courier New,Courier,monospace">changeMessageStatus()</span>method is called to update the message view.</p>
+  <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;self.changeMessageStatus(message, loop)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 1000);
+&nbsp;&nbsp;&nbsp;}
+}
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
new file mode 100644 (file)
index 0000000..967e466
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
@@ -0,0 +1,503 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Contacts Exchanger</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
+            <li><a href="#Initializing_App">Initializing the Application</a></li>
+            <li><a href="#Setting_NFC_Conn">Setting up the NFC Connection</a></li>
+            <li><a href="#Exchanging_Contact_Tags">Exchanging Contact Information with Tags</a></li>
+            <li><a href="#Exchanging_Contact_Peers">Exchanging Contact Information with Peers</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/nfc_w.htm">NFC Guide</a></li> 
+            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>              
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Task: Contacts Exchanger</h1> 
+  <p>This task, based on the ContactsExchanger sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">ContactsExchanger</a>.</p>
+ 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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>
+   <li><a href="#Exchanging_Contact_Tags">Exchanging Contact Information with Tags</a> defines how to receive a contact as an NDEF message, prepare the message, and save the contact on the SIM card using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API.</li>
+   <li><a href="#Exchanging_Contact_Peers">Exchanging Contact Information with Peers</a> defines how to exchange messages between devices.</li>
+  </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> 
+ 
+  
+  <p>The following figure shows the main screens of the application.</p> 
+  <p class="figure">Figure: ContactsExchanger screens</p> 
+  <p style="text-align: center;"><img alt="ContactsExchangerscreens" src="../../../images/contactsexchanger.png" /></p> 
+  
+<h3 id="main" name="main">Defining the Main Screen</h3> 
+  <ol class="tutorstep"> 
+   <li>index.html Source File
+<ol><li>   
+<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;</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;/div&gt;
+</pre>
+   </li>
+ </ol>
+</li> 
+   <li>app.ui.js Source File
+   <ol><li><p>The <span style="font-family: Courier New,Courier,monospace">loadStartPage()</span> method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the <span style="font-family: Courier New,Courier,monospace">loadStartContent()</span> method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.</p>
+<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;}
+}
+</pre>
+</li>
+<li>
+<p>If the default contact card is not defined, the content section of the screen displays a message and a button (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications) 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;Default card is not defined yet!&lt;br&gt;Do you want to define it now?&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&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&gt;
+</pre>
+</li>
+</ol>
+   </li>
+  </ol>
+  <h3 id="selection" name="selection">Defining the Contacts List Screen</h3>
+    <ol class="tutorstep"><li>index.html Source File
+  <p>The Contacts list screen displays an aggregated contact list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications) 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&gt;
+</pre>
+<p>Selecting a list item saves the contact information in the local storage, and returns the user to the main screen.</p>
+</li>
+</ol>
+
+  <h3 id="transfer" name="transfer">Defining the Transfer Screen</h3>
+  <p>The transfer screen is simply a countdown screen to give the user 10 seconds to communicate with another device or a tag.</p>
+  <ol class="tutorstep"><li>app.ui.js Source File
+  <ol><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;);
+</pre>
+</li>
+<li>
+<p>After the <span style="font-family: Courier New,Courier,monospace">pageshow</span> event, the screen is prepared according to the selected button. The <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> 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;if (tizen.nfc.getDefaultAdapter().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;var option = $(this).data(&#39;option&#39;);
+&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;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;&#39;PUT WIRELESS TAG&lt;br&gt;CLOSE TO&lt;br&gt;YOUR DEVICE&#39;);
+&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;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;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;&#39;PUT WIRELESS TAG&lt;br&gt;CLOSE TO&lt;br&gt;YOUR DEVICE&#39;);
+&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;else 
+&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;&#39;PUT YOUR DEVICE&lt;br&gt;CLOSE TO&lt;br&gt;OTHER DEVICE&#39;);
+&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;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.mobile.changePage(&#39;#start&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;Please turn on NFC adapter&#39;);
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">prepareWaitingPage()</span> method defines the transfer page UI.</p>
+<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;));
+},
+</pre>
+</li>
+
+<li>
+<p>Finally, the screen displays a countdown from 10 to 0 using the <span style="font-family: Courier New,Courier,monospace">countDown()</span> method:</p>
+<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;this.countDown(time, obj);
+&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;this.countDown(time, obj);
+&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;}
+},
+</pre>
+</li>
+</ol></li>
+</ol>
+
+<h3 id="add" name="add">Defining the Add Contact Screen</h3>
+<ol class="tutorstep"><li>app.ui.js Source File
+<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;
+
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;content-contact&quot;&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&gt;
+</pre>
+</li></ol>
+
+ <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
+  <ol class="tutorstep"> 
+   <li>config.xml Source File
+    <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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;/widget&gt;</pre>
+   </li>
+  </ol>
+
+<h2 id="Setting_NFC_Conn" name="Setting_NFC_Conn">Setting up the NFC Connection</h2> 
+  <p>This section builds upon the elements described in <a href="nfc_tutorial_w.htm#Managing_NFC_Conn">Managing NFC Connectivity</a>.</p> 
+  <ol class="tutorstep">
+  <li>app.nfc.js Source File
+  <p>To create an NFC connection, get the default NFC adapter using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method, and launch the NFC service using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface, which takes the NFC status as a parameter.</p>
+<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();
+
+&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();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfcStateMemory = false;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfcAdapter.setPowered(true, this.onPowerOn.bind(this), this.onPowerOnFails.bind(this));
+
+&nbsp;&nbsp;&nbsp;},
+}
+</pre>
+</li>
+</ol>
+  
+<h2 id="Exchanging_Contact_Tags" name="Exchanging_Contact_Tags">Exchanging Contact Information with Tags</h2> 
+  <p>This section builds upon the elements described in <a href="nfc_tutorial_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_tutorial_w.htm#Handling_NDEF_Messages">Handling NDEF Messages</a>.</p> 
+ 
+  
+<h3 id="read" name="read">Reading an NDEF Message from an NFC Tag</h3>
+  <ol class="tutorstep">
+  <li>app.nfc.card.js Source File
+  <ol><li>
+<p>When the user taps the <strong>Read from card</strong> button on the main screen, the transfer page is displayed. The <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method  of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the tag is properly attached and the NDEF message valid.</p>
+<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;});
+}
+</pre>
+</li>
+<li><p>When the tag is attached, the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> event is fired to retrieve the sent NDEF message information.</p>
+<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;}
+}
+</pre>
+</li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">readMessage()</span> method is used to get the sent information record, retrieve the contact, and display the Add contact screen.</p>
+<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;} 
+},
+fillRecordInfo: function nfc_fillRecordInfo(record) 
+{
+&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var contactsData = this.resolveContact(this.convertNDEF2phoneNumber(record.payload));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.app.nfc.displayContact(contactsData);
+&nbsp;&nbsp;&nbsp;}
+}
+</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>
+</li>
+</ol>
+</li>
+  </ol>
+     
+<h3 id="write" name="write">Writing an NDEF Message to the NFC Tag</h3> 
+  <ol class="tutorstep">
+  <li>app.nfc.card.js Source File
+  <ol><li>
+  <p>When the user taps the <strong>Write to card</strong> button on the main screen, the transfer page is displayed, and the <span style="font-family: Courier New,Courier,monospace">setTagDetectWrite()</span> method is called. The <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method adds an event listener to detect whether the tag is successfully attached.</p>
+<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);
+}
+</pre></li>
+<li><p>When the tag is attached, the contact is prepared for sending it over the NFC connection. The <span style="font-family: Courier New,Courier,monospace">prepareForNFC()</span> and <span style="font-family: Courier New,Courier,monospace">phoneNumber2NDEF()</span> 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;}
+}
+</pre>
+  </li>
+</ol>
+</li>
+</ol>  
+
+<h2 id="Exchanging_Contact_Peers" name="Exchanging_Contact_Peers">Exchanging Contact Information with Peers</h2> 
+    <p>This section builds upon the elements described in <a href="nfc_tutorial_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_tutorial_w.htm#Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</a>.</p>  
+
+<p>The data exchange functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.nfc.peer.js</span> file.</p>
+  <ol class="tutorstep">
+  <li>Sending Information
+<ol><li><p>When the user taps the <strong>Communicate with another device</strong> button on the main screen, the transfer page  is displayed. The <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the peer is properly attached.</p>
+<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;}
+}
+</pre>
+</li>
+<li>
+<p>When the peer is attached, the contact data is converted to an NDEF message format and sent to the peer device using the <span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> method.</p>
+<pre class="prettyprint">
+sucTargetAttach: function nfc_peer_sucTargetAttach(target) 
+&nbsp;&nbsp;&nbsp;{
+&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;}
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Receiving Information
+<p> The <span style="font-family: Courier New,Courier,monospace">setReceiveFromTarget()</span>  method is used to attach listeners to detect incoming NDEF messages.</p>
+<pre class="prettyprint">
+setReceiveFromTarget: function nfc_peer_setReceiveFromTarget() 
+{
+&nbsp;&nbsp;&nbsp;this.nfc.nfcTarget.setReceiveNDEFListener(this.nfc.readMessage.bind(this.nfc));
+}
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
new file mode 100644 (file)
index 0000000..0e2e714
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
@@ -0,0 +1,439 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Content: Discovering Multimedia Content (Such as Images, Videos, or Music)</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#browse">Browsing Content</a>
+            </li>
+            <li><a href="#manage">Managing Content</a>
+            </li>
+            <li><a href="#receive">Receiving Notifications on Content Changes</a>
+            </li>
+                       <li>Playlist
+                       <ul class="toc">
+                               <li><a href="#create">Creating a Playlist</a></li>
+                               <li><a href="#manage_p">Managing Playlists</a></li>
+                               <li><a href="#items">Managing Playlist Items</a></li>
+                       </ul></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/content/content_w.htm">Content Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">Content API for Wearable Web</a></li>                        
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Content: Discovering Multimedia Content (Such as Images, Videos, or Music)</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can retrieve content and manage items in your device local storage.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h2 id="warm_up" name="warm_up">Warm-up</h2>
+  <p>Become familiar with the Content API basics by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#browse">Browsing Content</a> <p>Browse and search for directories and items in directories.</p></li>
+   <li><a class="opensection" href="#manage">Managing Content</a> <p>View and update item details.</p></li>
+   <li><a class="opensection" href="#receive">Receiving Notifications on Content Changes</a> <p>Receive notifications when a content item is added, updated, or deleted.</p></li>
+   <li>Playlist
+   <ul>
+   <li><a class="opensection" href="#create">Creating a Playlist</a> <p>Create a new playlist and add items. Create a new playlist based on an existing playlist.</p></li>
+       <li><a class="opensection" href="#manage_p">Managing Playlists</a> <p>Retrieve all playlists. Remove a playlist.</p></li>
+       <li><a class="opensection" href="#items">Managing Playlist Items</a> <p>Add, retrieve, and remove items. Change item position and order.</p></li></ul>
+       </li>
+  </ul>
+  
+  <h2 id="task" name="task">Task</h2>
+  <p>In the <a href="task_mediacontent_w.htm">Media Content</a> task, we will walk through how to browse and manage the media directories in your application.</p>
+            
+ <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="browse" name="browse" class="items-tit-h2">Browsing Content</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+  <p>Learning how to browse and search for content directories and content items in directories is a basic content management skill:</p>
+  <ol>
+   <li><p>Retrieve the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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) using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object:</p> <pre class="prettyprint">var manager = tizen.content;</pre></li>
+   <li> <p>To search for the content directories in the local device, use the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. The method returns an array of <span style="font-family: Courier New,Courier,monospace">ContentDirectory</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentDirectory">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentDirectory">wearable</a> applications).</p> <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;}
+}
+
+manager.getDirectories(onDirectoryArraySuccess);</pre></li>
+   <li>To search for the content items in all directories, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. The method returns an array of <span style="font-family: Courier New,Courier,monospace">Content</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#Content">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#Content">wearable</a> applications).<p></p> <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 + &quot;:&quot; + contents[i].mimeType);
+&nbsp;&nbsp;&nbsp;}
+}
+
+var contentType = &quot;VIDEO&quot;;
+var filter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, contentType);
+manager.find(onContentItemArraySuccess, null, null, filter);
+</pre>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To retrieve a specific set of content items, you can specify a content directory (with the directory ID), filter, and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">directoryId</span>, <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#content">Content Filter Attributes</a>). <p>In this example, the directory ID is set to <span style="font-family: Courier New,Courier,monospace">null</span> (which means that all directories are searched), the filter retrieves all content items whose type is VIDEO, and no sorting order is defined (which means that the default sorting order is used).</p> </td>
+      </tr>
+     </tbody>
+    </table> </li>
+  </ol>
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Content</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p>Learning how to view content details and update them is a basic content management skill:</p>
+  <ol>
+   <li><p>Retrieve the<span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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) using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object, and search for the item whose details you want to update.</p> <p>In the following example, the item whose title is <span style="font-family: Courier New,Courier,monospace">image7.jpg</span> 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;);
+manager.find(onMediaItemArraySuccess, null, null, filter);</pre></li>
+   <li>In the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> 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;}
+}</pre></li>
+   <li><p>To update the editable attributes of the content item, use the <span style="font-family: Courier New,Courier,monospace">update()</span> 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;}
+}</pre></li>
+   <li><p>To scan for the content item file, use the <span style="font-family: Courier New,Courier,monospace">scanFile()</span> method. Because scanning is not performed automatically when the content file is copied or moved, call the <span style="font-family: Courier New,Courier,monospace">scanFile()</span> method to find the file.</p> <pre class="prettyprint">
+/* Assume the images/photo.jpg is copied to the device */
+function onScanSuccessCallback(path)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Scanning completed:&quot; + path);
+};
+
+tizen.filesystem.resolve(&quot;images/photo.jpg&quot;, function(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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+</pre></li>
+  </ol>
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Content Changes</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p>To create engaging applications with various content features, you must learn to receive notifications when content items are added, updated, or removed:</p>
+  <ol>
+   <li><p>Define the event handlers for different notifications using the <span style="font-family: Courier New,Courier,monospace">ContentChangeCallback</span> listener instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentChangeCallback">wearable</a> applications):</p> <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;}
+};
+</pre> </li>
+   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
+tizen.content.setChangeListener(listener);
+</pre> </li>
+   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">unsetChangeListener()</span> method: </p> <pre class="prettyprint">
+tizen.content.unsetChangeListener();
+</pre> </li>
+  </ol>
+  </div>
+  </li>
+       <li>
+            <div class="devicespec-tit">
+                <h2 id="create" name="create" class="items-tit-h2">Creating a Playlist</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+
+<p>Learning how to create a new playlist enables adding a playlist from your application:</p>
+
+<ul class="ul">
+<li><p>To create a new empty playlist, use the <span style="font-family: Courier New,Courier,monospace">createPlaylist()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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):</p>
+
+<pre class="prettyprint">function createSuccess(playlist)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;create SUCCESS&quot;);
+}
+
+tizen.content.createPlaylist(&quot;My new playlist&quot;, 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 <span style="font-family: Courier New,Courier,monospace">createPlaylist()</span> method, passing the source playlist as an argument:
+
+<pre class="prettyprint">function createSuccess(playlist)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;create SUCCESS&quot;);
+}
+
+tizen.content.getPlaylists(function(playlists)
+{
+&nbsp;&nbsp;&nbsp;var existingPlaylist = playlists[0];
+&nbsp;&nbsp;&nbsp;tizen.content.createPlaylist(&quot;My new playlist&quot;, createSuccess, null, existingPlaylist);
+});</pre>
+</li>
+</ul>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage_p" name="manage_p" class="items-tit-h2">Managing Playlists</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Learning how to retrieve and remove playlists is a basic playlist management skill:</p>
+
+<ul class="ul">
+<li><p>To retrieve a list of all playlists, use the <span style="font-family: Courier New,Courier,monospace">getPlaylists()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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):</p>
+
+<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 + &quot; number of tracks:&quot; + cur.numberOfTracks);
+&nbsp;&nbsp;&nbsp;}
+}
+tizen.content.getPlaylists(getPlaylistsSuccess);</pre></li>
+
+<li>To remove a playlist, use the <span style="font-family: Courier New,Courier,monospace">removePlaylist()</span> method providing the ID of the playlist:
+
+<pre class="prettyprint">function removePlaylistSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;removePlaylist() is successfully done.&quot;);
+}
+
+tizen.content.getPlaylists(function(playlists)
+{
+&nbsp;&nbsp;&nbsp;var myPlaylist = playlists[0];
+&nbsp;&nbsp;&nbsp;tizen.content.removePlaylist(myPlaylist.id, removePlaylistSuccess);
+});</pre></li>
+
+</ul>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="items" name="items" class="items-tit-h2">Managing Playlist Items</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+
+<p>Learning how to manage list items is a basic playlist management skill:</p>
+
+<ul class="ul">
+
+<li>To add items to a playlist:
+
+<ol>
+<li><p>Retrieve the multimedia content using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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):</p>
+
+<pre class="prettyprint">var myPlaylist;
+
+tizen.content.getPlaylists(function(playlists)
+{
+&nbsp;&nbsp;&nbsp;myPlaylist = playlists[0];
+&nbsp;&nbsp;&nbsp;tizen.content.find(findSuccess, null, null, new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;AUDIO&quot;));
+});
+</pre></li>
+
+<li>To add multiple items to the retrieved playlist, use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#Playlist">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#Playlist">wearable</a> applications):
+
+<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;}
+}</pre></li>
+
+<li>To add a single item to the retrieved playlist, use the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface:
+
+<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;}
+}</pre>
+</li>
+</ol></li>
+<li>To retrieve items from a playlist, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface:
+
+<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;}
+}
+
+tizen.content.getPlaylists(function(playlists)
+{
+&nbsp;&nbsp;&nbsp;var myPlaylist = playlists[0];
+&nbsp;&nbsp;&nbsp;myPlaylist.get(getSuccess);
+});</pre>
+</li>
+
+<li>To change the position of a single playlist item (track), use the <span style="font-family: Courier New,Courier,monospace">move()</span> method of the <span style="font-family: Courier New,Courier,monospace">Playlist</span> interface. The 2nd argument indicates how much and in which direction the item is moved.
+<p>Note that before moving the item, first you must retrieve it using the <span style="font-family: Courier New,Courier,monospace">get()</span> method.</p>
+<pre class="prettyprint">
+var myItem; /* Assume that it was retrieved using the get() method */
+function moveSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;move item SUCCESS&quot;);
+}
+
+tizen.content.getPlaylists(function(playlists)
+{
+&nbsp;&nbsp;&nbsp;var myPlaylist = playlists[0];
+&nbsp;&nbsp;&nbsp;myPlaylist.move(myItem, -2, moveSuccess);
+});</pre>
+
+<p>The example above moves the track 2 positions up on the playlist. The second argument of the <span style="font-family: Courier New,Courier,monospace">move()</span> method can be a negative value, which means moving the track up, or a positive value, which means moving the track down. If the value is greater than number of tracks above or below, the item is accordingly moved to the beginning or end of the playlist.</p>
+
+</li>
+
+<li>To change the order of all items in the playlist, use the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method. This feature is useful when sorting the playlist.
+
+<p>Following example reverses the order of the playlist items. For the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method to work, you must pass all items from the playlist. If an item is missing or an item from a different playlist is included, the <span style="font-family: Courier New,Courier,monospace">InvalidValuesError</span> exception is returned in the error callback. </p>
+
+<ol><li>Get all tracks using the <span style="font-family: Courier New,Courier,monospace">get()</span> method.</li>
+<li>Within the success callback of the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method, create an array with the new order:
+
+<pre class="prettyprint">
+var items; /* Assume that it was retrieved using the get() method */
+var newOrder = items.slice(0);
+newOrder.reverse();</pre></li>
+<li>Execute the <span style="font-family: Courier New,Courier,monospace">setOrder()</span> method:
+
+<pre class="prettyprint">function setOrderSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Set items order SUCCESS&quot;);
+}
+
+myPlaylist.setOrder(newOrder, setOrderSuccess); </pre>
+</li></ol>
+</li>
+</ul>
+            </div>
+        </li>
+        
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm
new file mode 100644 (file)
index 0000000..0aa2148
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Content: Getting and Handling Content</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content API for Wearable Web</a></li>                       
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Content: Getting and Handling Content</h1>
+
+ <p>The content tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+    <li><a href="content_tutorial_w.htm">Content: Discovering Multimedia Content (Such as Images, Videos, or Music)</a> <p>Demonstrates how you can receive information about content folders and items stored on external and internal storages and find and update the content of a media item.</p></li>
+       <li><a href="download_tutorial_w.htm">Download: Downloading Remote Objects by HTTP Request</a> <p>Demonstrates how you can manage and monitor downloads.</p></li>
+  </ul>
+
+  <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+    <li><a href="exif_tutorial_w.htm">Exif: Manipulating EXIF Data from JPEG Files</a> <p>Demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm
new file mode 100644 (file)
index 0000000..012f09e
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm
@@ -0,0 +1,202 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Download: Downloading Remote Objects by HTTP Request</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage">Managing Downloads</a>
+                       </li>
+                       <li><a href="#check">Checking the Download State and Information</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/content/download_w.htm">Download Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">Download API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download API for Wearable Web</a></li>                      
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Download: Downloading Remote Objects by HTTP Request</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can manage and monitor downloads.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. 
+               <p>The Download API is supported on all Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Download API basics by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#manage">Managing Downloads</a> <p>Start, pause, and cancel downloading a file.</p></li>
+   <li><a class="opensection" href="#check">Checking the Download State and Information</a> <p>Check whether a download is currently ongoing, failed, paused, or completed, and retrieve the download information.</p></li>
+  </ul>
+  
+   <h2>Task</h2> 
+  <p>In the <a href="task_downloadmanager_w.htm">Download Manager</a> task, we will walk through how to download URL content to the device storage.</p> 
+ 
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Downloads</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+ 
+  <p>To provide the user access to Internet resources, you must learn how to manage download operations:</p> 
+  <ol> 
+   <li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a> applications) that defines the URL of the file to be downloaded:</p> <pre class="prettyprint">
+var downloadRequest = new tizen.DownloadRequest(&quot;http://download.tizen.org/tools/README.txt&quot;, &quot;downloads&quot;);
+</pre> <p>The final parameter (<span style="font-family: Courier New,Courier,monospace">downloads</span>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the <span style="font-family: Courier New,Courier,monospace">Filesystem</span> 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 folder is not an absolute folder location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (<span style="font-family: Courier New,Courier,monospace">downloads</span> 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 <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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):</p>
+<pre class="prettyprint">
+tizen.systeminfo.getPropertyValue(&quot;NETWORK&quot;, function(networkInfo)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 (networkInfo.networkType === &quot;NONE&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Network connection is not available. Download is not possible.&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;downloadRequest = 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</pre></li>
+
+ <li>Define the event handlers for different download process notifications using the <span style="font-family: Courier New,Courier,monospace">DownloadCallback</span> listener interface  (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadCallback">wearable</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;}
+};</pre> </li> 
+   <li><p>To start the download of the HTML file from the Internet, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a> applications):</p> <pre class="prettyprint">
+downloadId = tizen.download.start(downloadRequest, listener);
+</pre> <p>The <span style="font-family: Courier New,Courier,monospace">start()</span> method returns a unique identifier for the download operation.</p> </li> 
+   <li>During the download: 
+    <ol> 
+     <li><p>To pause the download, use the <span style="font-family: Courier New,Courier,monospace">pause()</span> method with the download ID:</p> <pre class="prettyprint">
+tizen.download.pause(downloadId);
+</pre> </li> 
+     <li><p>To resume the download, use the <span style="font-family: Courier New,Courier,monospace">resume()</span> method with the download ID:</p> <pre class="prettyprint">
+tizen.download.resume(downloadId);
+</pre> </li> 
+     <li><p>To cancel the download, use the <span style="font-family: Courier New,Courier,monospace">cancel()</span> method with the download ID:</p> <pre class="prettyprint">
+tizen.download.cancel(downloadId);
+</pre> </li> 
+    </ol></li> 
+  </ol> 
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="check" name="check" class="items-tit-h2">Checking the Download State and Information</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ 
+  <p>To provide the user access to Internet resources, you must learn how to check the state of a download operation and retrieve relevant information:</p> 
+  <ol> 
+   <li><p>To be able to monitor the download state, you need the download ID, which is the return value of the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a> applications):</p> <pre class="prettyprint">
+downloadId = tizen.download.start(downloadRequest, listener); 
+</pre> </li> 
+   <li><p> Use the <span style="font-family: Courier New,Courier,monospace">getState()</span> method with the download ID as a parameter to get the current state:</p> <pre class="prettyprint">
+var state = tizen.download.getState(downloadId);
+</pre> <p>The method returns a <span style="font-family: Courier New,Courier,monospace">DownloadState</span> enumerator value (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a> applications). </p> </li> 
+   <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getDownloadRequest()</span> 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 <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> information (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a> applications) which is used as the parameter when starting the download.</p> </li> 
+   <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getMIMEType()</span> 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);
+</pre><p>The method returns the MIME type the target file which has started downloading.</p> </li> 
+  </ol> 
+                       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm
new file mode 100644 (file)
index 0000000..e775dba
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm
@@ -0,0 +1,332 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Exif: Manipulating EXIF Data from JPEG Files</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#load">Loading the EXIF Data</a></li>
+            <li><a href="#add">Adding EXIF Data</a></li>
+            <li><a href="#update">Updating the EXIF Data</a></li>
+            <li><a href="#copy">Copying the EXIF Data</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/content/exif_w.htm">Exif Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API for Mobile Web</a></li>                 
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Exif: Manipulating EXIF Data from JPEG Files</h1>
+<div class="cont"><div class="static-cont">
+       
+<p>This tutorial demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.</p>
+
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<h2>Warm-up</h2>
+<p>Become familiar with the Exif API basics by learning about:</p>
+<ul>
+ <li><a href="#load">Loading the EXIF Data</a> <p>Retrieve the EXIF data from specific file.</p></li>
+ <li><a href="#add">Adding EXIF Data</a> <p>Add EXIF data to a JPEG file with no current EXIF information.</p></li>
+ <li><a href="#update">Updating the EXIF Data</a> <p>Update the EXIF data in a JPEG file.</p></li>
+ <li><a href="#copy">Copying the EXIF Data</a> <p>Copy the EXIF data from one JPEG file to another.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="load" name="load" class="items-tit-h2">Loading the EXIF Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Learning how to retrieve EXIF data from JPEG files is a useful content management skill:</p>
+<ol>
+<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 <span style="font-family: Courier New,Courier,monospace">file:///opt/usr/media/Images/tizen.jpg</span>). The <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> and <span style="font-family: Courier New,Courier,monospace">toURI()</span> methods can be used to convert a virtual path to a URI.</p>
+
+<pre class="prettyprint">var fileURI = &quot;&quot;;
+function resolveSuccess(file)
+{
+&nbsp;&nbsp;&nbsp;fileURI = file.toURI();
+&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully resolved file: &quot; + fileURI);
+}
+
+function resolveFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;resolve() error occurred: &quot; + error.name + &quot; with message: &quot; + error.message);
+}
+
+tizen.filesystem.resolve(&quot;images/tizen.jpg&quot;, resolveSuccess, resolveFail);</pre></li>
+
+<li><p>With a valid <span style="font-family: Courier New,Courier,monospace">File</span> object, use the <span style="font-family: Courier New,Courier,monospace">getExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface and pass the URI to the method.</p>
+
+<pre class="prettyprint">function onSuccess(exifInfo)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully got EXIF information object&quot;);
+}
+
+function onError(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message:&quot; + error.message);
+}
+
+tizen.exif.getExifInfo(fileURI, onSuccess, onError);</pre>
+<p>With a valid <span style="font-family: Courier New,Courier,monospace">exifInfo</span> object, you can access various <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> attributes, such as width, height, orientation, and flash.</p>
+</li>
+
+<li>To retrieve an EXIF thumbnail of the image:
+<ol><li>Resolve the input JPEG file:
+
+<pre class="prettyprint">var fileURI = &quot;&quot;;
+
+tizen.filesystem.resolve(&quot;images/tizen.jpg&quot;, resolveSuccess, resolveFail); </pre></li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">getThumbnail()</span> method to retrieve the thumbnail:
+
+<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;}
+}
+
+function onError(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message: &quot; + 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);
+} </pre></li></ol></li>
+
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="add" name="add" class="items-tit-h2">Adding EXIF Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Learning how to add EXIF data to JPEG files is a useful content management skill:</p>
+<ol>
+
+<li><p>Create a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> object:</p>
+
+<pre class="prettyprint">var myNewExif = new tizen.ExifInformation();
+myNewExif.userComment = &quot;Photo taken on Charles Bridge in Prague&quot;;
+myNewExif.gpsLocation = new tizen.SimpleCoordinates(50.086447, 14.411856);</pre>
+
+</li>
+
+<li><p>Resolve the virtual path to the output JPEG file and get the URI:</p>
+
+<pre class="prettyprint">var fileNoExifURI = &quot;&quot;;
+function resolveSuccess(file)
+{
+&nbsp;&nbsp;&nbsp;fileNoExifURI = file.toURI();
+&nbsp;&nbsp;&nbsp;console.log("Successfully resolved file: &quot; + fileNoExifURI);
+}
+
+function resolveFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message: &quot; + error.message);
+}
+
+tizen.filesystem.resolve(&quot;images/image_without_exif.jpg&quot;, resolveSuccess, resolveFail);</pre>
+
+</li>
+
+<li><p>When you have a valid URI to the file, set it in the <span style="font-family: Courier New,Courier,monospace">myNewExif</span> object and call the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the  <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface:</p>
+
+<pre class="prettyprint">function onSaveSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully saved EXIF information to JPEG file&quot;);
+}
+
+function onSaveError(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred:&quot; + error.name + &quot; with message:&quot; + error.message);
+}
+
+myNewExif.uri = fileNoExifURI;
+tizen.exif.saveExifInfo(myNewExif, onSaveSuccess, onSaveError);</pre>
+
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="update" name="update" class="items-tit-h2">Updating the EXIF Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Learning how to update EXIF data in JPEG files is a useful content management skill:</p>
+<ol>
+<li><p>To update the EXIF data, load the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> object from the file and change the values of the object properties.</p>
+<p>You can remove information from the file by setting the property to <span style="font-family: Courier New,Courier,monospace">null</span>.</p>
+
+<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;
+}
+
+tizen.filesystem.resolve(&quot;images/photo.jpg&quot;, function(file)
+{
+&nbsp;&nbsp;&nbsp;tizen.exif.getExifInfo(file.toURI(), getSuccess);
+});</pre></li>
+
+<li>After updating the property values, use the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface to save the changes to the file:
+
+<pre class="prettyprint">function saveSuccess(exifInfo)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;new EXIF saved&quot;);
+}
+
+tizen.exif.saveExifInfo(exifInfo, saveSuccess);</pre></li>
+
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="copy" name="copy" class="items-tit-h2">Copying the EXIF Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Learning how to copy EXIF data between JPEG files is a useful content management skill:</p>
+<ol>
+<li><p>Get the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> object and resolve the output file, and then change the <span style="font-family: Courier New,Courier,monospace">sourceExifInfo.uri</span> attribute to point to the output JPEG file:</p>
+
+<pre class="prettyprint">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();
+}
+
+function resolveOutFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message: &quot; + 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, resolveOutFail);
+}
+
+tizen.exif.getExifInfo(fileURI, onSuccess);</pre></li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface to save the changes in the output JPEG file:
+
+<pre class="prettyprint">
+function onSaveSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully saved EXIF information to JPEG file&quot;);
+}
+
+function onSaveError(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred:&quot; + error.name + &quot; with message:&quot; + 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);
+}
+</pre></li>
+
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm b/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm
new file mode 100644 (file)
index 0000000..7fbf944
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm
@@ -0,0 +1,448 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Download Manager</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#manage">Managing Downloads</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/content/download_w.htm">Download Guide</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">Download API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download API for Wearable Web</a></li>                     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Task: Download Manager</h1> 
+ 
+ <p>This task, based on the DownloadManager sample delivered with the Tizen SDK, demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Download</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">DownloadManager</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="#manage">Managing Downloads</a> defines how to start, pause, resume, or cancel a content download.</li> 
+  </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> 
+
+
+  
+<h2 id="layout" name="layout">Defining the Application Layout</h2> 
+
+  <p>The DownloadManager sample application layout contains only 1 screen: the main screen that displays the download items and progress. The application also has a template for displaying the download items.</p>  
+ 
+  <p>The following figure shows the main screens of the application.</p> 
+  <p class="figure">Figure: DownloadManager screens</p> 
+  <p style="text-align: center;"><img alt="DownloadManager screens" src="../../../images/downloadmanager.png" /></p> 
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+
+  <ol class="tutorstep"> 
+   <li>index.html Source File 
+<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&gt;
+</pre></li>
+<li>js/app.ui.events.js Source File 
+<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;app.startDownloading($(&#39;#main-url-text&#39;).val());
+});        
+</pre></li>
+
+<li>index.html Source File  
+        <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&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; id=&quot;refresh-button&quot;&gt;Refresh&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+<li>js/app.ui.events.js Source File 
+<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;event.preventDefault();
+&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;app.refreshDownloadsList();
+});       
+</pre></li></ol>
+
+  <h3 id="template" name="template">Defining the Template Mechanism</h3> 
+  
+<p>The Template Manager is used to follow the MVC architecture while generating a view item for the downloaded content. The whole process of generating the output HTML is divided into 3 parts:</p>  
+  
+  <ol class="tutorstep"> 
+   <li>js/app.ui.templateManager.js Source File 
+   <ol><li>
+<p>The Template Manager loads the template files to the cache.</p>
+
+     <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;/* Cache template html */
+&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;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;fileName,
+&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;].join(&#39;&#39;);
+&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;app.config.get(&#39;templateDir&#39;),
+&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;].join(&#39;/&#39;);
+
+&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;url: tplPath,
+&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;dataType: &#39;html&#39;,
+&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;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;/* Increase counter */
+&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;/* Save to cache */
+&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;/* 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;if (cachedTemplates &gt;= tplNames.length &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;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;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;/* 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;else 
+&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;cachedTemplates += 1;
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;}
+};
+</pre> </li> 
+<li>
+<p>The Template Manager returns the template HTML 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;}
+
+&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+}
+</pre></li>
+<li>
+<p>The Template Manager returns the completed template where specified parameters have been inserted.</p>
+     <pre class="prettyprint">
+getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams) 
+{
+&nbsp;&nbsp;&nbsp;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;}
+
+&nbsp;&nbsp;&nbsp;return tplHtml;
+}
+</pre></li>
+    </ol> </li></ol>
+       
+<h3 id="item" name="item">Defining the Download Items</h3>     
+       
+<ol class="tutorstep"> 
+   <li>templates/download-row.tpl Source File 
+<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> 
+     <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&gt;
+</pre></li>
+</ol>  
+
+
+  <h2 id="manage" name="manage">Managing Downloads</h2> 
+
+  <p>This section builds upon the elements described in <a href="download_tutorial_w.htm#manage">Managing Downloads</a>.</p> 
+ 
+  
+<p>The core functionalities regarding the control of the download request are implemented in the <span style="font-family: Courier New,Courier,monospace">js/app.model.js</span> file.</p> 
+ 
+<h3 id="start" name="start">Starting the Download</h3> 
+  <ol class="tutorstep"> 
+   <li>js/app.model.js Source File
+   
+<p>The download process starts when user clicks <strong>OK</strong> next to the URL input field on the main screen.  The button click indirectly invokes the <span style="font-family: Courier New,Courier,monospace">startDownloading()</span> method, which is responsible for starting the download process. A new <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> object is created and the download process is started through the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> object.</p> 
+<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;} 
+}
+</pre></li> 
+   <li>js/app.js Source File
+   
+<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,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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.model.updateRecord.bind(this, 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;&nbsp;&#39;fileName&#39;: 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;&#39;url&#39;: url,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;state&#39;: 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;}));
+}
+</pre></li> 
+   <li>js/app.ui.js Source File
+   
+<p>The user interface is updated using the download row template obtained through the <span style="font-family: Courier New,Courier,monospace">templateManager</span> object.</p> 
+<pre class="prettyprint">
+addDownloadRecordToList: function Ui_addDownloadRecordToList(id, url, fileName, 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;&nbsp;&nbsp;&nbsp;ul.append(listElement).listview(&#39;refresh&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ul.find(&#39;#progressbar&#39; + id).progressbar({value: 0});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ul.find(&#39;#delete&#39; + id).button();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ul.find(&#39;#button&#39; + id).button();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updateStorageCallback($(&#39;#progressbar&#39; + id).progressbar(&#39;option&#39;, &#39;value&#39;));
+}
+</pre></li> 
+  </ol> 
+   <h3 id="pause" name="pause">Pausing and Resuming the Download</h3>
+  
+  <ol class="tutorstep"> 
+   <li>js/app.ui.events.js 
+<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;event.preventDefault();
+&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;var obj = $(this);
+&nbsp;&nbsp;&nbsp;if (obj.attr(&#39;state&#39;) === &#39;play&#39;) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.pauseDownloading(obj.attr(&#39;for-download&#39;));
+&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;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;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;obj.attr(&#39;listener-flag&#39;));
+&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;app.launchFile($(&#39;#name&#39; + obj.attr(&#39;for-download&#39;)).text());
+&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;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;obj.attr(&#39;for-download&#39;));
+&nbsp;&nbsp;&nbsp;}
+});
+</pre> </li> 
+     <li>js/app.model.js Source File
+<ol><li>        
+        <p>If the request is in the play state, and the user clicks the button, the download process is paused. The user interface is notified about the pause by the callback, provided while starting the download process.</p> 
+<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;} 
+}
+</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, 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;}
+}
+</pre></li> 
+    </ol> </li> 
+  </ol> 
+  <h3 id="stop" name="stop">Stopping the Download</h3> 
+  <ol class="tutorstep"> 
+   <li>js/app.ui.events.js Source File 
+<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;event.preventDefault();
+&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;var obj = $(this);
+&nbsp;&nbsp;&nbsp;if (obj.attr(&#39;state&#39;) === &#39;play&#39;) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.cancelDownloading(obj.attr(&#39;for-download&#39;));
+&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;obj.attr(&#39;state&#39;) === &#39;finished&#39; ||
+&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;obj.attr(&#39;state&#39;) === &#39;failed&#39;) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.deleteDownloading(obj.attr(&#39;for-download&#39;));
+&nbsp;&nbsp;&nbsp;}
+});</pre></li> 
+     <li>js/app.model.js
+        <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;} 
+}
+</pre></li> 
+     <li>js/app.ui.js
+        <p>If the download request is not in the play state, the download is removed from the main screen list and local storage.</p> 
+<pre class="prettyprint">
+deleteDownloading: function Ui_deleteDownloading(id) 
+{
+&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + id).remove();
+}
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm b/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
new file mode 100644 (file)
index 0000000..603bbf6
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
@@ -0,0 +1,304 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <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> 
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/content/content_w.htm">Content Guide</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">Content API for Wearable Web</a></li>                       
+               </ul>
+       </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 SDK, demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Content</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">Media Content</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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 Content 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 class="figure">Figure: Content screens</p> 
+  <p style="text-align: center;"><img alt="Content screens" src="../../../images/content_sd.png" /></p> 
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+  <ol class="tutorstep"> 
+   <li>index.html Source File 
+    <ol> 
+     <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 <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;
+</pre></li> 
+     <li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>.</p>
+<p>The section has a list widget displaying the storage types, and a list divider for the folder list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> 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;/div&gt;</pre></li></ol></li></ol>
+
+  <h3 id="content" name="content">Defining the Content Screen</h3> 
+  <ol class="tutorstep"> 
+   <li>index.html Source File 
+<p>Similarly as the main screen, the content screen contains a list widget displaying radio buttons (defined within an <span style="font-family: Courier New,Courier,monospace;">&lt;input&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">type</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">radio</span>) for the content types and a list divider for the item list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).
+</p>
+
+     <pre class="prettyprint lang-html">
+&lt;!--Content 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;
+
+&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; 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;/div&gt;</pre> </li> 
+    </ol> 
+       
+       <p>The Details screen content section contains a list widget, and every list item is defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
+ 
+
+ <h2 id="initialize" name="initialize">Initializing the Application</h2>
+  <ol class="tutorstep"> 
+   <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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;/widget&gt;</pre></li> 
+  </ol> 
+
+ <h2 id="browse" name="browse">Browsing Content</h2> 
+  <p>This section builds upon the elements described in <a href="content_tutorial_w.htm#browse">Browsing Content</a>.</p> 
+  
+
+  <h3 id="get_folder" name="get_folder">Retrieving Media Directories</h3> 
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+    <ol> 
+     <li><p>The Content API uses the same <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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 <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object.</p> <pre class="prettyprint">gMediaSource = tizen.content;</pre></li> 
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">getFolders()</span> method to retrieve the list of directories present in all storage types. The <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> method is called to perform the actual operation of retrieving the directories, based on the selection made in the <strong>Storage type</strong> list.</p> <p>In the example below, all the directories in the device containing media items are retrieved.</p> <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;var id = $(this).data(&quot;id&quot;);
+&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;getFolderItems(Number(id), gMediaType);
+&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;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;}
+
+&nbsp;&nbsp;&nbsp;flagInit = true;
+}</pre> </li> 
+     <li><p>The <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> method calls the <span style="font-family: Courier New,Courier,monospace">makeListItem()</span> 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 <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> 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, gMediaFolders[i].directoryURI);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&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;}
+}</pre></li> 
+    </ol> </li> 
+  </ol> 
+  <h3 id="get_item" name="get_item">Retrieving Media Items</h3> 
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+    <ol> 
+     <li><p>To get the media item list, use the <span style="font-family: Courier New,Courier,monospace">getFolderItems()</span> method. The method takes 2 attributes: <span style="font-family: Courier New,Courier,monospace">folderId</span>, which takes the folder ID whose media item list is to be displayed and <span style="font-family: Courier New,Courier,monospace">mediaType</span>, which specifies the media type (all, image, audio, or video).</p> <p>The <span style="font-family: Courier New,Courier,monospace">getFolderItems()</span> 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> 
+     <li><p>The <span style="font-family: Courier New,Courier,monospace">find()</span> 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 <span style="font-family: Courier New,Courier,monospace">showItemList()</span> 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;
+
+&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 == &quot;ALL&quot; ? null : new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, 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;}
+}
+</pre></li> 
+     <li><p>The <span style="font-family: Courier New,Courier,monospace">showItemList()</span> 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());
+
+&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;}
+
+&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;);
+}</pre></li> 
+    </ol> </li> 
+  </ol> 
+
+
+<h2 id="manage" name="manage">Viewing Media File Details</h2>
+  <p>This section builds upon the elements described in <a href="content_tutorial_w.htm#manage">Managing Content</a>.</p> 
+  <ol class="tutorstep"> 
+   <li>main.js Source File <p>To view the details of a media file, use the <span style="font-family: Courier New,Courier,monospace">showMediaDetail()</span> method, which displays the properties of the selected media file depending on the type of the file. The <span style="font-family: Courier New,Courier,monospace">makeCommonPropertiesListItems()</span> method defines a list of properties common to all the types of media files.</p> <p>The <span style="font-family: Courier New,Courier,monospace">showMediaDetail()</span> 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 */
+
+&nbsp;&nbsp;&nbsp;$(&quot;#media-details&quot;).html(str).trigger(&quot;create&quot;).listview(&quot;refresh&quot;);
+}</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm
new file mode 100644 (file)
index 0000000..4c9829e
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/dynamic/dynamic_tutorial_w.htm
@@ -0,0 +1,357 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Box: Taking Advantage of the Dynamic Box</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#load">Loading the Dynamic Box</a></li>
+            <li><a href="#define">Defining Viewport Settings</a></li>
+            <li><a href="#parse">Parsing the URL Query</a></li>
+            <li><a href="#reload">Using a Web Application to Reload the Dynamic Box</a></li>
+                       <li><a href="#send">Sending Messages between Dynamic Box and Drop View</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/dynamic/dynamic_w.htm">Dynamic Box Guide</a></li>
+        </ul> 
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Dynamic Box: Taking Advantage of the Dynamic Box</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can create a Dynamic Box and implement specific features within the Dynamic Box.</p>
+
+    <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Dynamic Box feature is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Dynamic Box basics by learning about:</p>
+<ul>
+    <li><a class="opensection" href="#load">Loading the Dynamic Box</a> <p>Load the Dynamic Box when required.</p></li>
+    <li><a class="opensection" href="#define">Defining Viewport Settings</a> <p>Define the correct size viewport for the box window.</p></li>
+    <li><a class="opensection" href="#parse">Parsing the URL Query</a> <p>Parse the query string of the box URL and use it in loading the box.</p></li>
+    <li><a class="opensection" href="#reload">Using a Web Application to Reload the Dynamic Box</a> <p>Reload the Dynamic Box directly or periodically using a Web application.</p></li>
+    <li><a class="opensection" href="#send">Sending Messages between Dynamic Box and Drop View</a><p>Communicate between the box and Drop View when the Drop View is opened.</p></li>
+</ul> 
+
+<div class="devicespecs-util mt5 clfix">
+    <ul class="dutil">
+        <li><a href="#" class="showA">Show All</a></li>
+        <li class="none"><a href="#" class="hideA">Hide All</a></li>
+    </ul>
+</div>
+
+<ul class="devicespecifications">
+
+    <li>
+        <div class="devicespec-tit">
+            <h2 id="load" name="load" class="items-tit-h2">Loading the Dynamic Box</h2>
+            <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+        </div>
+        <div class="devicespec-con">
+                       
+
+<p>Learning when the Dynamic Box is loaded is important to develop the Dynamic Box:</p>
+<ol>
+   <li><p>The box page of the Dynamic Box is automatically loaded when the Dynamic Box is created, the box is resized, the box update period expires, or the Drop View is opened.</p>
+    <p>Since the onload event of the box content is fired, after 30 seconds, the execution of the box content is stopped. After that, the content execution depends on <span style="font-family: Courier New,Courier,monospace">mouse-event</span> attribute value of the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget&gt;</span> element:</p>
+    <pre class="prettyprint">
+&lt;!--Box content cannot interact with users at all,--&gt;
+&lt;!--and no JavaScript code is executed--&gt;
+&lt;tizen:box-content src=&quot;…&quot; mouse-event=&quot;false&quot;&gt;
+
+&lt;!--Box content interacts with users (such as though button clicks),--&gt;
+&lt;!--and JavaScript code can be executed for 5 seconds--&gt;
+&lt;!--If there is no click for 5 seconds from the last click,--&gt;
+&lt;!--the box execution ends until a new click occurs--&gt;
+&lt;tizen:box-content src=&quot;…&quot; mouse-event=&quot;true&quot;&gt;
+</pre></li>
+<li>When the Drop View is opened, its box content is reloaded and continues to be alive by closing the Drop View. If the Drop View is closed, its box content execution is stopped.</li>
+    <li>If you indicate the duration (in seconds) for box reloading using the <span style="font-family: Courier New,Courier,monospace">update-period</span> attribute, the box is reloaded accordingly. If the update period has expired and the box is in the background, reloading the box is deferred until the box returns to the foreground.</li>
+</ol>
+        </div>
+    </li>
+
+    <li>
+        <div class="devicespec-tit">
+            <h2 id="define" name="define" class="items-tit-h2">Defining Viewport Settings</h2>
+            <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+        </div>
+        <div class="devicespec-con">
+
+<p>Learning how to handle viewport settings is a basic Dynamic Box management skill:</p>
+<ol>
+    <li><p>The box window size varies between 1 x 1, 2 x 1, and 2 x 2. The real pixels for the width and height of 1 cell can differ between Tizen devices, so the box content must be developed relative to the device width.</p>
+    <p>Generally, Web pages use a viewport metatag for readability and consist of relative content. You can also set the viewport to your box for readability regardless of the device resolution.</p>
+    <p>If you set the viewport to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the box viewport width is set to box window width automatically.</p>
+    <pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
+&lt;/head&gt;
+</pre></li>
+    <li>Use <span style="font-family: Courier New,Courier,monospace">window.innerWidth</span> in content to get the actual width that applies to viewport metatag mentioned above.</li>
+</ol>
+<p>The Drop View viewport can be set like the box viewport.</p>
+        </div>
+    </li>
+
+    <li>
+        <div class="devicespec-tit">
+            <h2 id="parse" name="parse" class="items-tit-h2">Parsing the URL Query</h2>
+            <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+        </div>
+        <div class="devicespec-con">   
+
+  <p>Tizen provides useful information on URL query for Dynamic Box and Drop View. The use of this information on URL query is optional. Use this information to create a richer Dynamic Box:</p> 
+<ol>
+    <li><p>When the Dynamic Box is loaded on a viewer, Tizen sets specific information on the URL query of the Dynamic Box:</p>
+    <pre class="prettyprint">
+[Box start page].html?type=[string]&amp;width=[int]&amp;height=[int]</pre>
+    <p>The <span style="font-family: Courier New,Courier,monospace">type</span> key defines the box loading type, which can be:</p>
+    <ul class="ul">
+        <li><span style="font-family: Courier New,Courier,monospace">create</span>: the Dynamic Box is created on the Dynamic Box Viewer</li>
+        <li><span style="font-family: Courier New,Courier,monospace">update</span>: the update period has expired</li>
+        <li><span style="font-family: Courier New,Courier,monospace">resize</span>: the Dynamic Box is resized by the user</li>
+               <li><span style="font-family: Courier New,Courier,monospace">pdopen</span>: the Drop View is opened</li></ul>
+               <p>The <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> keys define the size of the box window. You can also get the box window size using the <span style="font-family: Courier New,Courier,monospace">window.outerWidth</span> and <span style="font-family: Courier New,Courier,monospace">window.outerHeight</span> objects.</p></li>
+               <li><p>When the Drop View is loaded through flicking down the Dynamic Box, Tizen sets additional information in the URL query of the Drop View regarding its position. You can use this information to let the Drop View draw an arrow pointing to the Dynamic Box.</p>
+               <pre class="prettyprint">[DropView start page].html?type=pdopen&amp;width=[int]&amp;height=[int]&amp;pdopen-direction=[up|down]&amp;pdopen-arrow-xpos=[int]</pre>
+               <p>The value of the <span style="font-family: Courier New,Courier,monospace">type</span> key is fixed to <span style="font-family: Courier New,Courier,monospace">pdopen</span> on the URL of the Drop View. The <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> keys have the same meaning as those of the box.</p>
+               <p>The <span style="font-family: Courier New,Courier,monospace">pdopen-direction</span> key defines whether the Drop View opens above or below the Dynamic Box:</p>
+                       <ul class="ul">
+                               <li><span style="font-family: Courier New,Courier,monospace">down</span>: The Drop View opens below the Dynamic Box.</li>
+                               <li><span style="font-family: Courier New,Courier,monospace">up</span>: The Drop View opens above the Dynamic Box.</li>
+                       </ul>
+               <p>The <span style="font-family: Courier New,Courier,monospace">pdopen-arrow-xpos</span> key defines the X coordinate of the center of the Dynamic Box in pixels, and the range of values is from 0 to the device width.</p></li>
+               <li><p>If needed, the Dynamic Box can use this information to handle its content when loaded. The query string is added to all box URLs as default.</p>
+    <p>Parse the query string and use it on the box content:</p>
+    <pre class="prettyprint">function getParameters()
+{
+&nbsp;&nbsp;&nbsp;var searchString = window.location.search.substring(1), params = searchString.split(&quot;&amp;&quot;), info = {};
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; params.length; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var val = params[i].split(&quot;=&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info[unescape(val[0])] = unescape(val[1]);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return info;
+}
+
+var gInfo = getParameter();
+console.log(&quot;load type: &quot; + gInfo.type);
+console.log(&quot;width: &quot; + gInfo.width);
+console.log(&quot;height: &quot; + gInfo.height);
+</pre></li>
+</ol>
+        </div>
+    </li>
+
+    <li>
+        <div class="devicespec-tit">
+            <h2 id="reload" name="reload" class="items-tit-h2">Using a Web Application to Reload the Dynamic Box</h2>
+            <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+        </div>
+        <div class="devicespec-con">
+               
+<p>Learning how to request reloading of the Dynamic Box directly or periodically from a Web application is a basic Dynamic Box management skill.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">A Web application can only reload its own Dynamic Box.</td>
+        </tr>
+    </tbody>
+</table>
+
+<ul class="ul">
+    <li><p>To request reloading directly:</p>
+        <ol>
+            <li>
+                <p>Modify the application configuration:</p>
+                <ol>
+                    <li>
+                        <p>Add the following entry to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file to obtain the needed API privilege:</p>
+                        <pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre>
+                    </li>
+                    <li>
+                        <p>Set the <span style="font-family: Courier New,Courier,monospace">operation</span> attribute of the application control:</p>
+                        <pre>http://tizen.org/appcontrol/operation/dynamicbox/web/update</pre>
+                    </li>
+                    <li>
+                        <p>Set the <span style="font-family: Courier New,Courier,monospace">uri</span> attribute of the application control:</p>
+                        <pre>&#39;uri&#39; = box-service://&lt;dynamic-box-id&gt;</pre>
+                        <p>The <span style="font-family: Courier New,Courier,monospace">dynamic-box-id</span> is the ID of the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-widget&gt;</span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. For example: <span style="font-family: Courier New,Courier,monospace">box-service://syWXgC5ZcI.DynamicBox.default</span>.</p>
+                    </li>
+                    <li>
+                        <p>Set the <span style="font-family: Courier New,Courier,monospace">content-info</span> key to pass a key or value to the reloaded box in the <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span>. This step is optional.</p>
+                        <p>The value of the key is passed to the Dynamic Box as a query:</p>
+                        <pre>index.html?type=update&amp;width=&lt;int&gt;&amp;height=&lt;int&gt;&amp;&lt;value passed from Web app&gt;</pre>
+                        <p>Do not use predefined URL keys for the Box and Drop View, like <span style="font-family: Courier New,Courier,monospace">type</span>, <span style="font-family: Courier New,Courier,monospace">width</span>, and <span style="font-family: Courier New,Courier,monospace">height</span>. If the Web application sets <span style="font-family: Courier New,Courier,monospace">content-info</span> to <span style="font-family: Courier New,Courier,monospace">color=red&amp;style=2</span>, the box&#39;s URL query is as follows:</p>
+                        <pre>index.html?type=update&amp;width=354&amp;height=354&amp;color=red&amp;style=2</pre>
+                    </li>
+                </ol>
+            </li>
+            <li>
+                <p>Request the application Dynamic Box to be reloaded using the <span style="font-family: Courier New,Courier,monospace">tizen.application.launchAppControl()</span> method:</p>
+                <pre class="prettyprint">var contentInfo = &quot;updateType=direct&quot;;
+var appControlData = new tizen.ApplicationControlData(&quot;content-info&quot;, [contentInfo]);
+var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/dynamicbox/web/update&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;box-service://syWXgC5ZcI.DynamicBox.default&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, [appControlData]);
+tizen.application.launchAppControl(appControl, &quot;dbox.web-provider&quot;);</pre>
+                <p>The <span style="font-family: Courier New,Courier,monospace">dbox.web-provider</span> argument is an ID for an internal service that manages the life-cycle of the Dynamic Box. This attribute must be specified to update the Dynamic Box.</p>
+            </li>
+        </ol>
+    </li>
+    <li>
+        <p>To request reloading periodically:</p>
+        <ol>
+            <li>
+                <p>Specify the Dynamic Box update period with the <span style="font-family: Courier New,Courier,monospace">update-period</span> attribute in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+                <pre class="prettyprint">&lt;tizen:app-widget update-period=&quot;3600&quot;&gt;</pre>
+                <p>The minimum value for the attribute is 1800 s. This restriction is used to prevent potential power drain caused by frequent updates. However, you can use the Tizen <span style="font-family: Courier New,Courier,monospace">Alarm</span> (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) and <span style="font-family: Courier New,Courier,monospace">Application</span> (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) APIs to update the Dynamic Box more frequently.</p>
+            </li>
+            <li>
+                <p>To call the Alarm API, specify the <span style="font-family: Courier New,Courier,monospace">dbox.web-provider</span> attribute:</p>
+                <pre class="prettyprint">var alarm = new tizen.AlarmRelative(1, 10*tizen.alarm.PERIOD_MINUTE);
+tizen.alarm.add(alarm, &quot;dbox.web-provider&quot;, appControl);</pre>
+                <p>The <span style="font-family: Courier New,Courier,monospace">appControl</span> data required for the Tizen Alarm API can be created by setting the <span style="font-family: Courier New,Courier,monospace">operation</span> and <span style="font-family: Courier New,Courier,monospace">uri</span> attributes as described in the direct reloading request above.</p>
+            </li>
+            <li>
+                <p>To remove a registered alarm, use the <span style="font-family: Courier New,Courier,monospace">tizen.alarm.remove()</span> method.</p>
+            </li>
+        </ol>
+    </li>
+</ul>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">If a Web application sends a reloading request while running in the background, the request is deferred until the application returns to the foreground.</td>
+    </tr>
+   </tbody>
+</table>
+        </div>
+    </li>
+    <li>
+        <div class="devicespec-tit">
+            <h2 id="send" name="send" class="items-tit-h2">Sending Messages between Dynamic Box and Drop View</h2>
+            <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+        </div>
+        <div class="devicespec-con">
+               
+  <p>Learning how to send messages between a Dynamic Box and Drop View is a basic Dynamic Box management skill. Through messaging, the Drop View can control the box content and the box can send responses for the Drop View requests.</p> 
+  <ol>
+  <li>To send a message from the Drop View to the Dynamic Box:
+  <ol>
+   <li><p>Open the Drop View and send a message to its Dynamic Box using the <span style="font-family: Courier New,Courier,monospace;">sendMessageToBox()</span> method. The method takes the message string as parameter:</p> 
+   <pre class="prettyprint">
+window.appwidget.sendMessageToBox(message)</pre></li>
+<li><p>Add an event listener to register a <span style="font-family: Courier New,Courier,monospace;">pdmessage</span> event for the box content and receive the message:</p> 
+   <pre class="prettyprint">
+window.addEventListener(&quot;pdmessage&quot;, function(message) 
+{ 
+&nbsp;&nbsp;&nbsp;console.log(&quot;message from Drop View: &quot; + message); 
+}, false);
+</pre></li></ol>
+</li>
+  <li>To send a message from the Dynamic Box to the Drop View:
+  <ol>
+   <li><p>After the Drop View is opened, the box can send a message to its Drop View using the <span style="font-family: Courier New,Courier,monospace;">sendMessageToPd()</span> method. The method takes the message string as parameter:</p> 
+   <pre class="prettyprint">
+window.appwidget.sendMessageToPd(message)</pre></li>
+<li><p>Add an event listener to register a <span style="font-family: Courier New,Courier,monospace;">boxmessage</span> event for the Drop View content and receive the message:</p> 
+<pre class="prettyprint">
+window.addEventListener(&quot;boxmessage&quot;, function(message) 
+{ 
+&nbsp;&nbsp;&nbsp;console.log(&quot;message from Box: &quot; + message); 
+}, false);
+</pre></li></ol>
+</li>
+<li><p>Before using the Web API for sending messages, register a listener for the <span style="font-family: Courier New,Courier,monospace;">appwidgetready</span> JavaScript event:</p><pre class="prettyprint">window.addEventListener(&quot;appwidgetready&quot;, callbackFunction, false);</pre>
+<p>When your box content starts to load, some JavaScript objects for the Dynamic Box APIs may not load and you must check whether any such objects have already been loaded. If the objects have not been loaded yet, the <span style="font-family: Courier New,Courier,monospace;">appwidgetready</span> event can be triggered to know when the objects are fully loaded. In this case, you can call Dynamic Box APIs after the <span style="font-family: Courier New,Courier,monospace;">appwidgetready</span> event is triggered.</p>
+<pre class="prettyprint">if (typeofwindow.appwidget != &#39;undefined&#39;)
+{
+&nbsp;&nbsp;&nbsp;/* JavaScript object for Dynamic Box APIs was loaded */
+&nbsp;&nbsp;&nbsp;/* Call Dynamic Box APIs, or register Dynamic Box events, such as &#39;pdmessage&#39; or &#39;boxmessage&#39; */
+&nbsp;&nbsp;&nbsp;console.log(&quot;javascript object was already loaded&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;/* Register appwidgetready event */ 
+&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;appwidgetready&quot;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* JavaScript object for Dynamic Box APIs was loaded */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call Dynamic Box APIs, or register Dynamic Box events, such as &#39;pdmessage&#39; or &#39;boxmessage&#39; */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;javascript objects for dynamic box have been fully loaded!&quot;);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li>
+</ol>
+<p>You can determine the message format to be a specific string containing keys and their values.</p>
+        </div>
+    </li>
+</ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
new file mode 100644 (file)
index 0000000..d62b9f0
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
@@ -0,0 +1,241 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#read">Reading the Content of an Archive</a></li>
+            <li><a href="#create">Creating an Archive</a></li>
+            <li><a href="#extract">Extracting Files from an Archive</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/input_output/archive_w.htm">Archive Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>                   
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can create, browse, and extract ZIP archives.</p>
+
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Archive API basics by learning about:</p>
+<ul> 
+ <li><a href="#read">Reading the Content of an Archive</a> <p>Open an archive and check its content.</p> </li>
+ <li><a href="#create">Creating an Archive</a> <p>Create a new archive file and add files to it.</p> </li>
+ <li><a href="#extract">Extracting Files from an Archive</a> <p>Extract all files from an archive, or extract a selected file.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="read" name="read" class="items-tit-h2">Reading the Content of an Archive</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Opening an archive and accessing a list of its members is a basic archive management skill:</p>
+<ol>
+<li><p>To access the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface. The provided callback function receives an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">ArchiveFile</a> object.</p>
+
+<pre class="prettyprint">var myArchive = null;
+function openSuccess(arch)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;ArchiveFile mode: &quot; + arch.mode);
+&nbsp;&nbsp;&nbsp;myArchive = arch;
+}
+tizen.archive.open(&quot;downloads/archive.zip&quot;, &quot;r&quot;, openSuccess); </pre> </li>
+
+<li> <p>Get the list of all files contained inside the archive using the <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+
+<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;}
+}
+myArchive.getEntries(listSuccess);</pre>
+</li>
+<li><p>After the work with the archive is finished, close the archive  using the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+
+<pre class="prettyprint">
+archive.close();</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="create" name="create" class="items-tit-h2">Creating an Archive</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>Creating an archive and adding files to it is a basic archive management skill:</p>
+<ol>
+
+<li><p>To create the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface and set the mode as <span style="font-family: Courier New,Courier,monospace">w</span>:</p>
+
+<pre class="prettyprint">
+tizen.archive.open(&quot;downloads/new_archive.zip&quot;, &quot;w&quot;, createSuccess);</pre>
+</li>
+
+<li>Add a file to the archive using the <span style="font-family: Courier New,Courier,monospace">add()</span> method. The file can be specified using a virtual path:
+
+
+<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;);
+}
+function successCallback()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;File added&quot;);
+}
+function createSuccess(archive)
+{
+&nbsp;&nbsp;&nbsp;archive.add(&quot;downloads/file.txt&quot;, successCallback, null, progressCallback);
+}
+</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="extract" name="extract" class="items-tit-h2">Extracting Files from an Archive</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+
+<p>Extracting a file from an archive is a basic archive management skill:</p>
+
+<ol>
+<li>
+<p>To access an archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface. The &quot;r&quot; 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);</pre>
+</li>
+
+<li>To extract files:
+<ul class="ul">
+<li>
+<p>To extract all files from the archive, use the <span style="font-family: Courier New,Courier,monospace">extractAll()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">ArchiveFile</a> interface.</p>
+
+<pre class="prettyprint">
+function progressCallback(opId, val, name)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;extracting operation (: &quot; + opId + &quot;) is in progress (&quot; + (val * 100).toFixed(1) + &quot;%)&quot;);
+}
+
+function openSuccess(archive)
+{
+&nbsp;&nbsp;&nbsp;archive.extractAll(&quot;music&quot;, null, null, progressCallback);
+}</pre>
+</li>
+<li>
+<p>To extract only a selected file from the archive, use the <span style="font-family: Courier New,Courier,monospace">extract()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFileEntry">ArchiveFileEntry</a> interface.</p>
+<p>First, get the <span style="font-family: Courier New,Courier,monospace">archiveFileEntry</span> object using the <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span> or <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+
+<pre class="prettyprint">
+function extractSuccessCallback()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;File extracted&quot;);
+}
+function getEntrySuccess(entry)
+{
+&nbsp;&nbsp;&nbsp;entry.extract(&quot;downloads/extract&quot;, extractSuccessCallback);
+}
+
+function openSuccess(archive)
+{
+&nbsp;&nbsp;&nbsp;archive.getEntryByName(&quot;my_file.txt&quot;, getEntrySuccess);
+}</pre>
+</li>
+</ul>
+</li>
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm
new file mode 100644 (file)
index 0000000..ab7e233
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm
@@ -0,0 +1,286 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Filesystem: Providing Access to the Device File System</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage">Managing File Storages</a>
+                       </li>
+                       <li><a href="#create">Creating and Deleting Files and Directories</a>
+                       </li>
+                       <li><a href="#retrieve">Retrieving Files and File Details</a>
+                       </li>
+                       <li><a href="#file_dir">Managing Files and Directories</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">Filesystem Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem API for Wearable Web</a></li>                  
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Filesystem: Providing Access to the Device File System</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can control files and directories on the device.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Filesystem API basics by learning about:</p>
+
+<ul>
+   <li><a class="opensection" href="#manage">Managing File Storages</a> <p>Retrieve file storages and storage details, and subscribe to notifications on storage state changes.</p> </li>
+   <li><a class="opensection" href="#create">Creating and Deleting Files and Directories</a> <p>Create and delete files and directories in the file system.</p> </li>
+   <li><a class="opensection" href="#retrieve">Retrieving Files and File Details</a> <p>Retrieve a list of files in a directory, the URI of the file, or the file content as a <span style="font-family: Courier New,Courier,monospace">DOMString</span>.</p></li>
+   <li><a class="opensection" href="#file_dir">Managing Files and Directories</a> <p>Open, read, write, copy, move, and close files and directories.</p></li>
+</ul>
+
+ <h2>Task</h2>
+<p>In the <a href="task_filemanager_w.htm">File Manager</a> task, we will walk through how to manage files in your application.</p>
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing File Storages</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+  <p>Learning how to manage file storages is a basic data management skill:</p> 
+  <ol> 
+   <li><p>To list available storages, use the <span style="font-family: Courier New,Courier,monospace">listStorages()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> 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) to search for the storages available on the device.</p> <p>If the search is successful, a list of found <span style="font-family: Courier New,Courier,monospace">FileSystemStorage</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemStorage">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemStorage">wearable</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;}
+}
+
+/* Search for the storages */
+tizen.filesystem.listStorages(checkCorruptedRemovableDrives);</pre> </li> 
+   <li> <p>To get storage details based on the storage name (the <span style="font-family: Courier New,Courier,monospace">label</span> attribute), use the <span style="font-family: Courier New,Courier,monospace">getStorage()</span> method.</p> <p>The success callback receives the <span style="font-family: Courier New,Courier,monospace">FileSystemStorage</span> object containing the storage details as an input parameter.</p> <pre class="prettyprint">
+/* Success event handler */
+function onStorage(storage) 
+{ 
+&nbsp;&nbsp;&nbsp;console.log(&quot;Storage found:&quot; + storage.label);
+}
+
+/* Retrieve a storage */
+tizen.filesystem.getStorage(&quot;music&quot;, onStorage);</pre> </li> 
+   <li><p>To receive notifications on the storage state changes, for example, additions and removals, register an event handler with the <span style="font-family: Courier New,Courier,monospace">addStorageStateChangeListener()</span> method.</p> <p>An event is generated each time the storage state changes.</p> <pre class="prettyprint">
+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;);
+}
+
+/* Register the event handler */
+ watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);</pre> </li> 
+   <li><p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeStorageStateChangeListener()</span> method:</p> <pre class="prettyprint">
+tizen.filesystem.removeStorageStateChangeListener(watchID);</pre> </li> 
+  </ol> 
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating and Deleting Files and Directories</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con"> 
+
+  <p>Learning how to create and delete files and directories is a basic data management skill:</p> 
+  <ol> 
+   <li><p>To create a file in the current directory, use the <span style="font-family: Courier New,Courier,monospace">createFile()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> 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):</p> <pre class="prettyprint">
+var documentsDir, newFile;
+tizen.filesystem.resolve(&quot;documents&quot;, function(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;&nbsp;&nbsp;&nbsp;documentsDir = 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;newFile = documentsDir.createFile(&quot;newFilePath&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;});</pre> </li> 
+
+   <li><p>To create a directory within the file system, use the <span style="font-family: Courier New,Courier,monospace">createDirectory()</span> 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;);</pre> </li> 
+
+   <li><p>To delete a file, use the <span style="font-family: Courier New,Courier,monospace">deleteFile()</span> method:</p> <pre class="prettyprint">
+function onDelete()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;deletedFile() is successfully done.&quot;);
+}
+
+documentsDir.deleteFile(newFile.fullPath, onDelete);</pre> </li> 
+   <li><p>To delete a directory, use the <span style="font-family: Courier New,Courier,monospace">deleteDirectory()</span> method.</p> <p>The second parameter defines whether the deletion is performed recursively for the sub-directories as well. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">false</span>, the directory is deleted only if it is empty.</p> <pre class="prettyprint">
+documentsDir.deleteDirectory(newDir.fullPath, false, onDelete);
+anotherNewDir.parent.deleteDirectory(anotherNewDir.fullPath, false, onDelete);</pre> </li> 
+  </ol> 
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Files and File Details</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+  <p>Learning how to get files and file details from the file system is a basic data management skill:</p> 
+  <ol> 
+   <li><p>To access a specific file or directory within the file system, retrieve a file handle using the <span style="font-family: Courier New,Courier,monospace">resolve()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> 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):</p> <pre class="prettyprint">
+tizen.filesystem.resolve(&#39;documents&#39;, onResolveSuccess, null, &#39;r&#39;);</pre> <p>The <span style="font-family: Courier New,Courier,monospace">File</span> object (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 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 <span style="font-family: Courier New,Courier,monospace">listFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> object:<p></p> <pre class="prettyprint">
+function onResolveSuccess(dir)
+{  
+&nbsp;&nbsp;&nbsp;dir.listFiles(onsuccess);
+}</pre> <p>The method returns an array of <span style="font-family: Courier New,Courier,monospace">File</span> objects.</p> </li> 
+   <li><p>To retrieve the file URI, use the <span style="font-family: Courier New,Courier,monospace">toURI()</span> 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());</pre> </li> 
+   <li><p>To retrieve the file content as a DOMString, use the <span style="font-family: Courier New,Courier,monospace">readAsText()</span> 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;files[i].readAsText(function(str) {console.log(&quot;File content: &quot; + str);}, &quot;UTF-8&quot;);
+&nbsp;&nbsp;&nbsp;}
+}</pre> </li> 
+  </ol> 
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="file_dir" name="file_dir" class="items-tit-h2">Managing Files and Directories</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+  <p>Learning how to read and write to files, and move and copy files and directories, is a basic data management skill:</p> 
+  <ol> 
+   <li><p>To open a file, use the <span style="font-family: Courier New,Courier,monospace">openStream()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> 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).</p> <p>The method returns a <span style="font-family: Courier New,Courier,monospace">FileStream</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileStream">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileStream">wearable</a> applications), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;documentsDir = 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;});
+
+var testFile = documentsDir.createFile(&quot;test.txt&quot;);
+if (testFile != null) 
+{
+&nbsp;&nbsp;&nbsp;testFile.openStream(&quot;w&quot;, onOpenSuccess, null, &quot;UTF-8&quot;);
+}</pre> </li> 
+   <li><p></p>Perform all actual operations, such as reading, writing, or closing, on the file through the <span style="font-family: Courier New,Courier,monospace">FileStream</span> object based on a position attribute, which represents the current position in the file:<p></p> <pre class="prettyprint">
+function onOpenSuccess(fs)
+{
+&nbsp;&nbsp;&nbsp;/* Write HelloWorld to the file */
+&nbsp;&nbsp;&nbsp;fs.write(&quot;HelloWorld&quot;);
+
+&nbsp;&nbsp;&nbsp;/* Read the file content */
+&nbsp;&nbsp;&nbsp;fs.read(testFile.fileSize);
+
+&nbsp;&nbsp;&nbsp;/* Close the file */
+&nbsp;&nbsp;&nbsp;fs.close();
+}
+</pre> </li> 
+   <li><p>To copy a file or directory, use the <span style="font-family: Courier New,Courier,monospace">copyTo()</span> method. The following example copies the files to the <span style="font-family: Courier New,Courier,monospace">images/backup/</span> directory. Since the third parameter is set to <span style="font-family: Courier New,Courier,monospace">true</span>, any existing files with the same name in the target directory are overwritten.</p> <pre class="prettyprint">
+var files; /* Assume that this is an array of File objects */
+function onSuccess()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;success&quot;);
+}
+
+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);
+}
+</pre> </li> 
+   <li><p>To move a file or directory, use the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. The following example moves the files to the <span style="font-family: Courier New,Courier,monospace">images/newFolder/</span> directory. Since the third parameter is set to <span style="font-family: Courier New,Courier,monospace">false</span>, no existing files with the same name in the target directory are overwritten.</p> <pre class="prettyprint">
+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);
+}
+</pre> </li> 
+  </ol> 
+ </div>
+               </li>
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm
new file mode 100644 (file)
index 0000000..ed01319
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Input/Output: Processing Input and Output</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#I/O">Input/Output API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#I/O">Input/Output API for Wearable Web</a></li>                       
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Input/Output: Processing Input and Output</h1>
+
+ <p>The input/output tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>  
+    <li><a href="filesystem_tutorial_w.htm">Filesystem: Providing Access to the Device File System</a> <p>Demonstrates how you can control local files and file operations, retrieve and monitor storage information, and access the sandboxed sections of the local file system to search, create, and delete a directory or file.</p></li>
+       <li><a href="message_port_tutorial_w.htm">Message Port: Communicating with Other Applications</a> <p>Demonstrates how you can send and receive messages through message ports.</p></li>
+  </ul>
+
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>   
+<ul>
+    <li><a href="archive_tutorial_w.htm">Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation</a> <p>Demonstrates how you can create, browse, and extract ZIP archives.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm
new file mode 100644 (file)
index 0000000..f2a34db
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm
@@ -0,0 +1,144 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Communicating with Other Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#Manage_Message_Port">Managing Message Ports</a>
+            </li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/input_output/message_port_w.htm">Message Port Guide</a></li>
+                       <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>                       
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Message Port: Communicating with Other Applications</h1>
+<div class="cont"><div class="static-cont">
+
+ <p>This tutorial demonstrates how you can send and receive messages through message ports.</p>
+ 
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+     
+      <h2>Warm-up</h2>
+      <p>Become familiar with the Message Port API basics by learning about:</p>
+      <ul>
+       <li><a class="opensection" href="#Manage_Message_Port">Managing Message Ports</a> <p>Send and receive messages.</p> </li>
+      </ul>
+         
+    <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+    <!-- Folds -->
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="Manage_Message_Port" name="Manage_Message_Port" class="items-tit-h2">Managing Message Ports</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+                               
+  <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> 
+<li><p>To create a local port which receives messages, use the <span style="font-family: Courier New,Courier,monospace">requestLocalMessagePort()</span> method of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a> applications):</p>
+<pre class="prettyprint">
+var localPort = tizen.messageport.requestLocalMessagePort(&quot;SAMPLE_PORT&quot;);
+</pre> </li> 
+<li><p>To retrieve an instance of the <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#RemoteMessagePort">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#RemoteMessagePort">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">requestRemoteMessagePort()</span> method of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object. The <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interface sends messages to the port identified by an <span style="font-family: Courier New,Courier,monospace">ApplicationId</span> and a port name.</p>
+<pre class="prettyprint">
+var targetApplicationId = tizen.application.getCurrentApplication().appInfo.id;
+var remotePort = tizen.messageport.requestRemoteMessagePort(targetApplicationId, &quot;SAMPLE_PORT&quot;);
+</pre> </li> 
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">addMessagePortListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> 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;console.log(&quot;key:&quot; + data[i].key + &quot; / value:&quot; + data[i].value);
+&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;}
+});
+</pre> </li> 
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method of the <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> 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;dummy&quot;}
+];
+remotePort.sendMessage(messageData);
+</pre> 
+<p>If you expect a response message, pass the instance of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface as a second parameter of <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method to specify the message port where the response is sent:</p>
+<pre class="prettyprint">
+remotePort.sendMessage(messageData, localPort);
+</pre> </li>
+  </ol> 
+  
+<p>To implement the application receiving the message as a native application, see the mobile native <a href="../../../native/app_framework/message_port_tutorial_n.htm">Message Port Tutorial</a>.</p>  
+</div></li></ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm
new file mode 100644 (file)
index 0000000..79e39e0
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm
@@ -0,0 +1,565 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <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> 
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">Filesystem Guide</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem API for Wearable Web</a></li>                 
+               </ul>
+       </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 SDK, demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Filesystem</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">FileManager</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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> 
+  <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 class="figure">Figure: FileManager screen</p> 
+  <p style="text-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 class="tutorstep"> 
+   <li>app.ui.templateManager.js Source File 
+    <ol> 
+     <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;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;tplName = [fileName, app.config.get(&#39;templateExtension&#39;)].join(&#39;&#39;);
+&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;$.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;url: tplPath,
+&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;dataType: &#39;html&#39;,
+&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;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;cachedTemplates += 1;
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;/* 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;else
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;}
+}
+</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;}
+
+&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+}
+</pre> </li> 
+     <li><p>The <span style="font-family: Courier New,Courier,monospace">getCompleted()</span> method returns the completed template using the specified parameters, prepared by the <span style="font-family: Courier New,Courier,monospace">passThruModifiers()</span> method.</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;tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;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;&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;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(regModOff, content);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return tplHtml;
+}</pre> </li> 
+    </ol> </li> 
+  </ol>
+  
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+  <p>The main screen elements initialization and display functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.ui.js</span> file.</p>
+  <ol class="tutorstep"> 
+   <li>main.tpl Source File
+<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 <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;
+
+&nbsp;&nbsp;&nbsp;&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;
+
+&nbsp;&nbsp;&nbsp;&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;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+
+&lt;/div&gt;
+</pre></li> 
+
+     <li>folderRow.tpl Source File
+<p>The <span style="font-family: Courier New,Courier,monospace;">folderRow.tpl</span> template file defines the actual content of the main screen, which is initialized in the  <span style="font-family: Courier New,Courier,monospace;">app.ui.js</span> 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; uri=&quot;%uri|escapeEncies%&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;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&gt;
+
+</pre> </li> 
+  </ol> 
+  
+  <h3 id="foot" name="foot">Defining the Footer Controls</h3> 
+  <ol class="tutorstep"> 
+   <li>main.tpl Source File 
+<p>The footer section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">footer</span>. The footer section contains a tab bar (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">mobile</a> applications) 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;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 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;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre> <p></p></li> </ol>
+
+  <h3 id="popup" name="popup">Defining the Pop-up Window</h3>
+  <ol class="tutorstep"> 
+   <li>main.tpl Source File 
+<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;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li> </ol>
+ 
+<h2 id="clipboard" name="clipboard">Managing Clipboard</h2> 
+  <p>This section builds upon the elements described in <a href="filesystem_tutorial_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 <span style="font-family: Courier New,Courier,monospace;">app.clipboard.js</span> file.</p>  
+  <ol class="tutorstep"> 
+   <li>Retrieving Clipboard Content <p>The <span style="font-family: Courier New,Courier,monospace;">get()</span> 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;
+}</pre> </li> 
+   <li>Adding New Content to the Clipboard <p>The <span style="font-family: Courier New,Courier,monospace;">add()</span> method is defined to add filesystem paths to the clipboard.</p> <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;
+}</pre> </li>
+   <li>Checking if a Path is Present in the Clipboard <p>The <span style="font-family: Courier New,Courier,monospace;">has()</span> method is defined to check whether the currently copied filesystem path is already present in the clipboard.</p> <pre class="prettyprint">has: function Clipboard_has(path)
+{
+&nbsp;&nbsp;&nbsp;return $.inArray(path, this.data) === -1 ? false : true;
+}
+</pre> </li>  
+   <li>Setting the Clipboard Mode<p>The <span style="font-family: Courier New,Courier,monospace;">setMode()</span> method is defined to set the clipboard in 3 available modes - copy, move, and inactive (default).</p> <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;
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre> </li> 
+   <li>Clearing the Clipboard<p>The <span style="font-family: Courier New,Courier,monospace;">clear()</span> method is defined to clear all the clipboard content and reset it to the default mode.</p> <pre class="prettyprint">clear: function Clipboard_clear()
+{
+&nbsp;&nbsp;&nbsp;this.data = [];
+&nbsp;&nbsp;&nbsp;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 <span style="font-family: Courier New,Courier,monospace;">app.js</span> file.</p>  
+  <ol class="tutorstep"> 
+   <li>Copying Content to the Clipboard
+<p>The <span style="font-family: Courier New,Courier,monospace;">saveToClipboard()</span> 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());
+}</pre></li>
+
+<li>Pasting Content from the Clipboard 
+   <ol><li><p>The <span style="font-family: Courier New,Courier,monospace;">pasteClipboard()</span> 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,
+&nbsp;&nbsp;&nbsp;&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.currentPath, 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,
+&nbsp;&nbsp;&nbsp;&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.currentPath, this.onPasteClipboardSuccess.bind(this));
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre></li>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace;">onPasteClipboardSuccess()</span> 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();
+}</pre></li></ol>
+   </li> 
+  </ol> 
+
+ <h2 id="storage" name="storage">Managing Device Storage</h2> 
+  <p>This section builds upon the elements described in <a href="filesystem_tutorial_w.htm#manage">Managing File Storages</a>,  <a href="filesystem_tutorial_w.htm#create">Creating and Deleting Files and Directories</a>, and <a href="filesystem_tutorial_w.htm#retrieve">Retrieving Files and File Details</a>.</p> 
+
+ <h3 id="configure" name="configure">Initializing the Device Storage</h3> 
+  <ol class="tutorstep"> 
+   <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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;/widget&gt;</pre> </li> 
+  </ol>  
+  <h3 id="retrieve" name="retrieve">Retrieving Storages</h3> 
+
+  <ol class="tutorstep"> 
+ <li>app.model.js Source File<p>The <span style="font-family: Courier New,Courier,monospace;">loadInternalStorages()</span> method calls the <span style="font-family: Courier New,Courier,monospace;">getStorages()</span> 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;self.storages = storages;
+&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();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}, &#39;internal0&#39;);
+}</pre> </li> 
+   <li>app.systemIO.js Source File 
+   <p>The <span style="font-family: Courier New,Courier,monospace;">listStorages()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileSystemManager</span> 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;var tmp = [],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = storages.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
+
+&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;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;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;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;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;else
+&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;if (typeof onSuccess === &#39;function&#39;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess(tmp);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;}
+}</pre> </li> 
+</ol>
+
+  <h3 id="manage" name="manage">Managing Files and Directories</h3> 
+  <p>The directory creation functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.js</span> file. The file creation, file deletion, and directory deletion functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.systemIO.js</span> file.</p>
+  <ol class="tutorstep"> 
+   <li>Creating a File <p>The <span style="font-family: Courier New,Courier,monospace;">createFile()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> 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;}
+}</pre><p>Similarly, the <span style="font-family: Courier New,Courier,monospace;">createDirectory()</span> method is used to create a directory at the current storage location in the application.</p></li> 
+   <li>Deleting a File <p>The <span style="font-family: Courier New,Courier,monospace;">deleteFile()</span> method of the <span style="font-family: Courier New,Courier,monospace;">File</span> 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;}
+}</pre><p>Similarly, the <span style="font-family: Courier New,Courier,monospace;">deleteDirectory()</span> 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 <span style="font-family: Courier New,Courier,monospace;">app.systemIO.js</span> file. The file URI retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.ui.js</span> file.</p> 
+  <ol class="tutorstep"> 
+   <li>Retrieving a File <p>The <span style="font-family: Courier New,Courier,monospace;">resolve()</span> method of the <span style="font-family: Courier New,Courier,monospace;">FileSystemManager</span> 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() {};
+
+&nbsp;&nbsp;&nbsp;try
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.filesystem.resolve(directoryPath, onSuccess, onError, openMode);
+&nbsp;&nbsp;&nbsp;}
+}</pre> </li> 
+   <li>Retrieving a List of Files <p>The <span style="font-family: Courier New,Courier,monospace;">listFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace;">FileSystemManager</span> interface is used to list all the files and directories present in the current storage location in the application.</p>
+   <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;var tmp = [],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = files.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
+
+&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;tmp.push(files[i].name);
+&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;onSuccess(tmp);
+&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;console.error(&#39;SystemIO_getFilesList dir.listFiles() error:&#39;, e);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;}
+}</pre> </li> 
+   <li>Retrieving a Folder or File URI<p>The <span style="font-family: Courier New,Courier,monospace;">toURI()</span> method of the <span style="font-family: Courier New,Courier,monospace;">FileSystemManager</span> interface is used to retrieve the folder or file URI.</p>
+   <pre class="prettyprint">displayFolder: function Ui_displayFolder(folderName, nodes, refresh)
+{
+&nbsp;&nbsp;&nbsp;var len = nodes.length,
+&nbsp;&nbsp;&nbsp;listElements = [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;}
+}</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
new file mode 100644 (file)
index 0000000..d7c24f8
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
@@ -0,0 +1,137 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Key: Controlling Multimedia Playback</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#state">Managing Media Key State Changes</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm">Media Key Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html">Media Key API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key API for Wearable Web</a></li>                    
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Media Key: Controlling Multimedia Playback</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can control multimedia playback.</p>
+
+   <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+               <p>The Media Key API is not supported on any Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Media Key API basics by learning about:</p>
+<ul>
+ <li><a class="opensection" href="#state">Managing Media Key State Changes</a> <p>Register a listener and monitor changes in the media key states.</p> </li>
+</ul>
+
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="state" name="state" class="items-tit-h2">Managing Media Key State Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Learning how to register key event listener is a basic media key management skill:</p>
+<ol>
+
+<li>Implement the listener to handle media key state changes. The listener can contain event listeners for key press (<span style="font-family: Courier New,Courier,monospace">onpress</span>) and release (<span style="font-family: Courier New,Courier,monospace">onrelease</span>) notifications.
+<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;}
+}</pre>
+
+</li>
+<li>Register the media key state change listener:
+
+<pre class="prettyprint">
+tizen.mediakey.setMediaKeyEventListener(myMediaKeyChangeListener);</pre>
+
+</li>
+<li>Unregister the media key state change listener when it is no longer needed:
+<pre class="prettyprint">
+tizen.mediakey.unsetMediaKeyEventListener();</pre>
+
+</li></ol>            
+</div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
new file mode 100644 (file)
index 0000000..fbd4a89
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Multimedia: Controlling and Playing Multimedia</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia API for Wearable Web</a></li>                 
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Multimedia: Controlling and Playing Multimedia</h1>
+
+    <p>The multimedia tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="media_key_tutorial_w.htm">Media Key: Controlling Multimedia Playback</a> <p>Demonstrates how you can control multimedia playback.</p></li>
+   <li><a href="sound_tutorial_w.htm">Sound: Controlling the Sound Volume Level</a> <p>Demonstrates how you can manage the device volume levels.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
new file mode 100644 (file)
index 0000000..cab00bc
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
@@ -0,0 +1,173 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Sound: Controlling the Sound Volume Level</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#manage">Managing Sound and Volume</a></li>
+            <li><a href="#monitor">Monitoring Sound and Volume Changes</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/sound_w.htm">Sound Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">Sound API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">Sound API for Wearable Web</a></li>                   
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Sound: Controlling the Sound Volume Level</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can manage the device volume levels.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Sound API basics by learning about:</p>
+<ul>
+ <li><a class="opensection" href="#manage">Managing Sound and Volume</a> <p>Get the current sound mode and set the volume level.</p> </li>
+ <li><a class="opensection" href="#monitor">Monitoring Sound and Volume Changes</a> <p>Track changes in the sound mode and volume level.</p> </li>
+</ul>
+
+  <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing Sound and Volume</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Managing sound modes and volume levels is a basic multimedia management skill:</p>
+<ol>
+<li>Get the current volume level using the <span style="font-family: Courier New,Courier,monospace">getVolume()</span> method:
+
+<pre class="prettyprint">
+var vol = tizen.sound.getVolume(&quot;RINGTONE&quot;);
+</pre>
+
+</li>
+<li>Set a new volume level using the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method.
+<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);</pre>
+
+</li>
+<li>Get the current sound mode using the <span style="font-family: Courier New,Courier,monospace">getSoundMode()</span> method:
+
+<pre class="prettyprint">
+var mode = tizen.sound.getSoundMode();
+console.log(&quot;Sound Mode is &quot; + mode);</pre>
+
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Sound and Volume Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+
+<p>Managing sound and volume changes is a basic multimedia management skill:</p>
+<ol>
+
+<li>Register the volume change listener to track changes in the volume level:
+
+<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();
+}
+
+tizen.sound.setVolumeChangeListener(onsuccessCB);</pre>
+
+</li>
+<li>Register the sound mode change listener to track changes in the sound mode:
+
+<pre class="prettyprint">
+function onsuccessCB(mode)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Mode is &quot; + mode);
+&nbsp;&nbsp;&nbsp;tizen.sound.unsetSoundModeChangeListener();
+}
+
+tizen.sound.setSoundModeChangeListener(onsuccessCB);
+</pre>
+
+</li>
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
new file mode 100644 (file)
index 0000000..85dbc14
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
@@ -0,0 +1,274 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Application: Creating a Service Application</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create">Creating a Service Application</a></li>
+                       <li><a href="#package">Packaging a Service Application</a></li>
+                       <li><a href="#launch">Launching a Service Application</a></li>
+                       <li><a href="#terminate">Terminating a Service Application</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/service/service_w.htm">Service Application Guide</a></li>
+        </ul> 
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Service Application: Creating a Service Application</h1>
+ <div class="cont"><div class="static-cont">
+ 
+<p>This tutorial demonstrates how you can create a service application and implement specific features within the service application.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the service application basics by learning about:</p>
+<ul>
+<li><a href="#create">Creating a Service Application</a>
+<p>Create a service application by writing key components.</p></li>
+<li><a href="#package">Packaging a Service Application</a>
+<p>Package a service application.</p></li>
+<li><a href="#launch">Launching a Service Application</a>
+<p>Launch a service application.</p></li>
+<li><a href="#terminate">Terminating a Service Application</a>
+<p>Terminate a service application</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating a Service Application</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+ <p>Learning how to create a service application is a basic application management skill:</p>
+
+
+<p>The service application consists of a number of callbacks. To write a service application, you must implement the predefined callbacks for their purpose and register them using the <a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank">CommonJS Modules</a> API.</p>
+
+<ol><li>Create the service entry point with the <span style="font-family: Courier New,Courier,monospace">onStart()</span> callback.
+<p>The callback is invoked when the service is launched. Within the callback, you can prepare resources and initialize whatever the service application needs during the execution.</p>
+<pre class="prettyprint">
+module.exports.onStart = function() 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;service start&quot;);
+
+&nbsp;&nbsp;&nbsp;var remoteMsgPort = tizen.messageport.requestRemoteMessagePort(&quot;websvcapp0.WebServiceApplication&quot;, &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);
+}
+</pre></li>
+
+<li>Write the request handler with the <span style="font-family: Courier New,Courier,monospace">onRequest()</span> callback.
+<p>The callback is invoked to handle incoming service requests. Within the callback, write code for each request from other applications and the platform. To obtain the request, use the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> function in the <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.</p>
+<pre class="prettyprint">
+module.exports.onRequest = function() 
+{
+&nbsp;&nbsp;&nbsp;var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+&nbsp;&nbsp;&nbsp;if (reqAppControl) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (reqAppControl.appControl.operation == &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;, onDeviceOrientationSuccess);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>Write the termination with the <span style="font-family: Courier New,Courier,monospace">onExit()</span> callback.
+<p>The callback is invoked when the service is about to be stopped. All resources can be cleared and backed up within the callback.</p>
+<pre class="prettyprint">
+module.exports.onExit = function() 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;service terminate&quot;);
+}
+</pre></li></ol>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="package" name="package" class="items-tit-h2">Packaging a Service Application</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+ <p>Learning how to package a service application is a basic application management skill:</p>
+
+<p>A widget package can contain 1 Web UI application and several service applications. Each application in the widget package shares the same package ID and has a unique application ID. In the following example, you can use the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span> element to contain information for the Web UI application. The <span style="font-family: Courier New,Courier,monospace">&lt;tizen:service&gt;</span> element is used to contain information about the service application. The UI application and the service application have the same package ID and different application IDs.</p>
+
+<ol><li>Define the service in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;tizen:service&gt;</span> 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 lang-js">
+&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=http://tizen.org/ns/widgets
+&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; 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;/widget&gt;
+</pre></li></ol>
+ 
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="launch" name="launch" class="items-tit-h2">Launching a Service Application</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+ <p>Learning how to launch a service application is a basic application management skill:</p>
+
+
+<ul class="ul">
+<li>Launch by other applications
+<p>The Web application launches a service application by calling the <span style="font-family: Courier New,Courier,monospace">launch()</span> or <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> function 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; + e.message);});
+</pre>
+</li>
+
+<li>Launch by the system
+<p>A service application can start automatically if the <span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">true</span>. This requires partner-level certification.</p>
+<pre class="prettyprint">
+&lt;tizen:service id=&quot;websvcapp0.service1&quot; on-boot=&quot;true&quot;&gt;
+</pre>
+</li>
+</ul>
+</div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="terminate" name="terminate" class="items-tit-h2">Terminating a Service Application</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+<p>Learning how to terminate a service application is a basic application management skill:</p>
+
+
+<ol>
+<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 <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> function. </p>
+<pre class="prettyprint">
+var remoteMsgPort = tizen.messageport.requestRemoteMessagePort(&quot;websvcapp0.service1&quot;, &quot;SERVICE_SAMPLE2&quot;);
+remoteMsgPort.sendMessage([{ key : &quot;key&quot;, value : &quot;SERVICE_EXIT&quot; }]);
+</pre>
+</li>
+
+<li>The service application can terminate itself by calling the <span style="font-family: Courier New,Courier,monospace">exit()</span> function after getting a signal through the message port:
+<pre class="prettyprint">
+var localMsgPort = tizen.messageport.requestLocalMessagePort(&quot;SERVICE_SAMPLE2&quot;);
+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;}
+}
+var watchId = localMsgPort.addMessagePortListener(onreceived);
+</pre>
+</li>
+</ol>
+                       </div>
+               </li>           
+               
+    </ul>      
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
new file mode 100644 (file)
index 0000000..830586e
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
@@ -0,0 +1,365 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Account: Managing Accounts and Account Information</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#get_account">Retrieving Accounts</a></li>
+            <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>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/account_w.htm">Account Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Account: Managing Accounts and Account Information</h1>
+ <div class="cont"><div class="static-cont">
+       
+<p>This tutorial demonstrates how you can manage accounts and retrieve account information.</p>
+
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<h2>Warm-up</h2>
+<p>Become familiar with the Account API basics by learning about:</p>
+<ul>
+<li><a href="#get_account">Retrieving Accounts</a>
+<p>Get all accounts or one with a specific ID.</p>
+</li>
+<li><a href="#get_providers">Retrieving Providers</a>
+<p>Get the account provider belonging to current application or get all account providers.</p>
+</li>
+<li><a href="#manage">Managing Accounts</a>
+<p>Add, update, and remove an account.</p>
+</li>
+<li><a href="#listener">Receiving Notifications on Account Changes</a>
+<p>Register and remove an account change listener.</p>
+</li>
+<li><a href="#extend">Managing Extended Account Data</a>
+<p>Get and set extended data for an account.</p>
+</li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="get_account" name="get_account" class="items-tit-h2">Retrieving Accounts</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+
+<p>Learning how to retrieve account information enables you to include account support into your applications:</p>
+
+<ul  class="ul">
+<li>To retrieve information about all available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
+
+<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;}
+}
+function getAccountsError(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);
+}
+tizen.account.getAccounts(getAccountsSuccess, getAccountsError);</pre>
+</li>
+
+<li>If you already know the ID of the account, you can get the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> object using the <span style="font-family: Courier New,Courier,monospace">getAccount()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
+
+<pre class="prettyprint">var account = tizen.account.getAccount(my_account_id);</pre>
+</li>
+</ul>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="get_providers" name="get_providers" class="items-tit-h2">Retrieving Providers</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>To create accounts, you must learn how to get access to account providers:</p>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>
+    </tr>
+   </tbody>
+</table>
+
+<ul  class="ul">
+<li>Get a specific account provider with the given application ID using the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">ApplicationManager</a> interface.
+<p>If the current application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">&lt;tizen:account&gt;</a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), you can use the current application ID.  Otherwise, get the ID of the current application using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>
+
+<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;
+var provider = tizen.account.getProvider(appId);</pre>
+</li>
+<li>To get information about all available account providers, use the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
+
+<pre class="prettyprint">function getProvidersSuccess(providers)
+{
+&nbsp;&nbsp;&nbsp;// providers is an array whose members are providers with contact capability
+}
+function getProvidersError(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);
+}
+
+tizen.account.getProviders(getProvidersSuccess, getProvidersError, &quot;http://tizen.org/account/capability/contact&quot;);</pre>
+</li>
+</ul>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing Accounts</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">               
+
+<p>Creating, adding, updating, and deleting accounts is a basic account management skill:</p>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span> privilege and must be the account provider.</td>
+    </tr>
+   </tbody>
+</table>
+
+<ol>
+<li>To create an account, first get an account provider. If your application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">&lt;tizen:account&gt;</a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), use the <span style="font-family: Courier New,Courier,monospace">getProvider()</span> method:
+
+<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;
+var accountProvider = tizen.account.getProvider(appId);</pre>
+</li>
+<li>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> interface:
+
+<pre class="prettyprint">var account = new tizen.Account(accountProvider, {userName: &#39;admin&#39;, iconUri: &#39;path/to/icon.jpg&#39;});</pre>
+</li>
+<li>Add the account to the account database:
+
+<pre class="prettyprint">tizen.account.add(account);</pre>
+</li>
+<li>To update the account information, change the attributes of the <span style="font-family: Courier New,Courier,monospace">Account</span> object for the relevant account:
+
+<pre class="prettyprint">account.userName = &#39;new username&#39;;</pre>
+</li>
+<li>To save the changed values, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
+
+<pre class="prettyprint">tizen.account.update(account);</pre>
+</li>
+
+<li>To remove the account from the system, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of  the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface, providing the account ID:
+
+<pre class="prettyprint">tizen.account.remove(account.id);</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="listener" name="listener" class="items-tit-h2">Receiving Notifications on Account Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Learning how to register change listeners enables you to synchronize the view of your application with the changes in the account database:</p>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>
+    </tr>
+   </tbody>
+</table>
+
+<ol>
+<li>Define a listener implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountChangeCallback">AccountChangeCallback</a> interface:
+
+<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;}
+};</pre>
+</li>
+<li>Register the account listener using the <span style="font-family: Courier New,Courier,monospace">addAccountListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface to start receiving notifications about changes:
+
+<pre class="prettyprint">var watchId = tizen.account.addAccountListener(accountChangeListener);</pre>
+</li>
+<li>When notifications are no longer required, unregister the listener using the <span style="font-family: Courier New,Courier,monospace">removeAccountListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
+
+<pre class="prettyprint">tizen.account.removeAccountListener(watchId);</pre>
+</li>
+</ol></div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="extend" name="extend" class="items-tit-h2">Managing Extended Account Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">       
+
+<p>Learning how to manage extended data for an account enables you to include account support into your applications:</p>
+
+<ol>
+<li><a href="#get_account">Retrieve the account object</a>.</li>
+<li>Manage the extended data for the retrieved account:
+<ul  class="ul"><li>To set extended data:
+<p>Set the additional information with the <span style="font-family: Courier New,Courier,monospace">setExtendedData()</span> method:</p>
+
+<pre class="prettyprint">var key = &#39;nickname&#39;;
+var value = &#39;nickname of anonymous user&#39;;
+account.setExtendedData(key, value);</pre>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To perform this operation, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span> privilege.</td>
+    </tr>
+   </tbody>
+</table>
+<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;);</pre>
+</li>
+
+<li>To get extended data:
+<ul  class="ul"><li>To retrieve extended data value for a specific key, use the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method:
+
+<pre class="prettyprint">var key = &#39;accessToken&#39;;
+var value = account.getExtendedData(key); </pre>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To perform this operation, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>
+    </tr>
+   </tbody>
+</table>
+</li>
+<li>To retrieve all extended data for an account, use the asynchronous version of the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method. The success callback contains an array of the extended data key-value pairs.
+
+<pre class="prettyprint">account.getExtendedData(function(extendedData)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&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 (var i = 0; i &lt; extendedData.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;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 key = extendedData.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;var value = extendedData.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;console.log(key + &quot; : &quot; + 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;&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)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&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;Error : &quot; + e.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;});</pre>
+
+</li></ul></li></ul></li>
+
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
new file mode 100644 (file)
index 0000000..2bbc1d9
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
@@ -0,0 +1,174 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Bookmark: Managing Web Browser Bookmarks</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Creating_Bookmark">Creating Bookmark Folders and Items</a></li>
+                       <li><a href="#Deleting_Bookmark">Deleting Bookmarks</a></li>
+                       <li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/bookmark_w.htm">Bookmark Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Bookmark: Managing Web Browser Bookmarks</h1>
+ <div class="cont"><div class="static-cont">
+  
+      <p>This tutorial demonstrates how you can manage Tizen Web browser bookmarks on the device.</p>
+         
+           <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+      
+  <h2>Warm-up</h2>
+      <p>Become familiar with the Bookmark API basics by learning about:</p>
+      <ul>
+       <li><a href="#Creating_Bookmark">Creating Bookmarks Folders and Items</a> <p>Add bookmark folders and items in the root bookmark folder, or in subfolders.</p> </li>
+       <li><a href="#Deleting_Bookmark">Deleting Bookmarks</a> <p>Remove bookmark folders or items.</p></li>
+       <li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a> <p>Retrieve a list of the current bookmarks in the root bookmark folder.</p> </li>
+      </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       
+                       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="Creating_Bookmark" name="Creating_Bookmark" class="items-tit-h2">Creating Bookmark Folders and Items</h2>
+       <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+ 
+  <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 class="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;);
+</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;);</pre> </li> 
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> 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> 
+     <li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">BookmarkFolder</span> and <span style="font-family: Courier New,Courier,monospace">BookmarkItem</span> interface:</p> <pre class="prettyprint">
+var folder2 = new tizen.BookmarkFolder(&quot;folder2&quot;);
+var developerTizen = new tizen.BookmarkItem(&quot;developerTizen&quot;, &quot;https://developer.tizen.org&quot;);
+</pre> </li> 
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> 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 <span style="font-family: Courier New,Courier,monospace">folder1</span> folder contains the <span style="font-family: Courier New,Courier,monospace">developerTizen</span> bookmark and the <span style="font-family: Courier New,Courier,monospace">folder2</span> subfolder.</p></li> 
+    </ol> </li> 
+  </ul> 
+  
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Deleting_Bookmark" name="Deleting_Bookmark" class="items-tit-h2">Deleting Bookmarks</h2>
+               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">  
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">remove()</span> 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);
+</pre> </li> 
+   <li><p>To remove a bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method and specify the bookmark folder:</p> <pre class="prettyprint">
+tizen.bookmark.remove(folder2);</pre> </li> 
+   <li><p>To remove all the bookmark folders and items from the bookmarks list, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method without specifying a parameter:</p> <pre class="prettyprint">tizen.bookmark.remove();
+</pre> </li> 
+  </ol> 
+  
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Retrieving_Bookmark" name="Retrieving_Bookmark" class="items-tit-h2">Retrieving the Bookmark List</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+  <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 <span style="font-family: Courier New,Courier,monospace">get()</span> 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();
+</pre> </li> 
+   <li><p>To retrieve bookmarks from the root bookmark folder and subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and set the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">
+tizen.bookmark.get(null, true);</pre> </li> 
+   <li><p>To retrieve bookmarks only from a specific bookmark folder excluding its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and specify the bookmark folder name:</p> <pre class="prettyprint">tizen.bookmark.get(folder1);
+</pre> </li> 
+   <li><p>To retrieve bookmarks from a specific bookmark folder and its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method, specifying the bookmark folder name and setting the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">tizen.bookmark.get(folder1, true);
+</pre> </li> 
+  </ol>
+                       </div>
+               </li>
+       </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
new file mode 100644 (file)
index 0000000..b30248f
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
@@ -0,0 +1,704 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Calendars and Calendar Events</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+               <li><a href="#Creating_Calendar">Creating a Calendar</a></li>
+               <li>Events
+               <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="#Managing_Event">Managing a Single Calendar Event</a></li>
+                       <li><a href="#Updating_Event">Updating Recurring Calendar Events</a></li>
+                       <li><a href="#Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</a></li>
+                       <li><a href="#Converting_Event">Converting Calendar Event Formats</a></li>
+               </ul></li>
+               <li>Tasks
+               <ul class="toc">
+                       <li><a href="#Adding_Tasks">Adding Tasks to a Calendar</a></li>
+                       <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 Calendar Task</a></li>
+                       <li><a href="#Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</a></li>
+                       <li><a href="#Converting_Task">Converting Calendar Task Formats</a></li>  
+               </ul></li>
+               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a></li>          
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/calendar_w.htm">Calendar Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Calendar: Managing Calendars and Calendar Events</h1>
+<div class="cont"><div class="static-cont">
+        
+      <p>This tutorial demonstrates how you can manage calendars in the device to access, modify, add, and remove calendar items within a specified calendar on the device.</p>
+         
+           <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+      
+  <h2>Warm-up</h2>
+      <p>Become familiar with the Calendar API basics by learning about:</p>
+      <ul>
+           <li><a href="#Creating_Calendar">Creating a Calendar</a> <p>Create a new calendar using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> constructor.</p></li>
+               <li>Events
+               <ul>
+                       <li><a href="#Adding_Events">Adding Events to a Calendar</a> <p>Add events to the default calendar, and define an alarm and recurrence rule for an event.</p> </li> 
+                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a> <p>Add events to the default calendar in the batch mode.</p></li> 
+                       <li><a href="#Managing_Event">Managing a Single Calendar Event</a> <p>Update and delete an existing calendar event.</p> </li>
+                       <li><a href="#Updating_Event">Updating Recurring Calendar Events</a> <p>Update a single instance of a recurring event.</p> </li>
+                       <li><a href="#Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</a> <p>Update and delete calendar events in the batch mode.</p> </li>
+                       <li><a href="#Converting_Event">Converting Calendar Event Formats</a> <p>Convert a calendar event to the iCalendar format and back.</p></li>
+               </ul></li>
+               <li>Tasks
+               <ul>
+                       <li><a href="#Adding_Tasks">Adding Tasks to a Calendar</a> <p>Add tasks to the default calendar, and define an alarm for a task.</p></li>
+                       <li><a href="#Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</a> <p>Add tasks to the default calendar in the batch mode.</p></li>
+                       <li><a href="#Managing_Task">Managing a Single Calendar Task</a> <p>Update and delete an existing calendar task.</p></li>
+                       <li><a href="#Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</a> <p>Update and delete calendar tasks in the batch mode.</p> </li>
+                       <li><a href="#Converting_Task">Converting Calendar Task Formats</a> <p>Convert a calendar task to the iCalendar format and back.</p></li>  
+               </ul></li>
+               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a> <p>Receive notifications when calendar items are added, updated, or deleted.</p></li>
+      </ul>
+  <h2 id="task" name="task">Task</h2>
+        <p>In the <a href="task_eventmanager_w.htm">Event Manager</a> task, we will walk through how to manage calendar events in your application.</p>
+               
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+ <ul class="devicespecifications">
+         <li>
+            <div class="devicespec-tit">
+ <h2 id="Creating_Calendar" name="Creating_Calendar" class="items-tit-h2">Creating a Calendar</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <p>Creating a new calendar is a basic calendar management skill:</p>
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The created calendar is associated with a specified account. Therefore, you must retrieve the account before creating a new calendar.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  <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 <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> 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 <span style="font-family: Courier New,Courier,monospace">addCalendar()</span> 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;}
+}</pre></li>
+   <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above:
+<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
+</pre></li>
+  </ol>
+
+                  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="Adding_Events" name="Adding_Events" class="items-tit-h2">Adding Events to a Calendar</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+ 
+  <p>To create engaging applications with various calendar features, you must learn to add events to calendars:</p>
+  <ol>
+    <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</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;,
+</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})
+});
+</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;);
+
+ev.alarms = [alarm];
+</pre></li>
+     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.</p> <pre class="prettyprint">calendar.add(ev);  /* ev.id attribute is generated */</pre> </li>
+    </ol>
+                  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Adding_Events_Batch" name="Adding_Events_Batch" class="items-tit-h2">Adding Events to a Calendar in the Batch Mode</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various calendar features, you must learn to add events to calendars in the batch mode:</p>
+    <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</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;
+});
+</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To keep the example as simple as possible, the array above includes only 1 event.</td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the events in the array to the calendar:</p> <pre class="prettyprint">
+calendar.addBatch([ev]);
+</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used to react to the success or failure of the operation.</td>
+        </tr>
+       </tbody>
+      </table>
+</li>
+    </ol></div></li>
+       <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Event" name="Managing_Event" class="items-tit-h2">Managing a Single Calendar Event</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+  <p>To create engaging applications with various calendar features, you must learn to manage a single calendar event:</p>
+    <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</pre> </li>
+     <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
+myCalendar.find(eventSearchSuccessCallback);</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To retrieve a specific set of events, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the events are retrieved because no filter is used.</p> </td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">eventSearchSuccessCallback()</span> event handler.</p> <p>In this example, the description parameter of the first event is changed and the event is updated in the calendar using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second event is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* 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]);
+
+&nbsp;&nbsp;&nbsp;/* Delete the second existing event */
+&nbsp;&nbsp;&nbsp;myCalendar.remove(events[1].id);
+}</pre> </li>
+    </ol>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Updating_Event" name="Updating_Event" class="items-tit-h2">Updating Recurring Calendar Events</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+  <p>To create engaging applications with various calendar features, you must learn to update recurring calendar events:</p>
+  <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p>
+<p>Retrieve the calendar event using the <span style="font-family: Courier New,Courier,monospace">get()</span> method by specifying the event ID.</p>     <pre class="prettyprint">
+var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var event = calendar.get(evId);
+</pre> </li>
+     <li>Expand the recurring event to get its instances by using the <span style="font-family: Courier New,Courier,monospace">expandRecurrence()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> 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);</pre> <p>The expanded event instances have their own <span style="font-family: Courier New,Courier,monospace">id.uid</span> and <span style="font-family: Courier New,Courier,monospace">id.rid</span> attributes, where the <span style="font-family: Courier New,Courier,monospace">id.uid</span> 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method to determine whether a single instance or all occurrences of the event are updated. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">true</span>, all instances are updated, while if it is set to <span style="font-family: Courier New,Courier,monospace">false</span>, only the indicated instance of the recurring event is updated (based on the <span style="font-family: Courier New,Courier,monospace">id.rid</span> attribute).</p> <p>In this example, the second instance of the event is updated.</p> <pre class="prettyprint">
+/* Success event handler */
+function eventExpandSuccessCB(events)
+{
+&nbsp;&nbsp;&nbsp;events[1].summary = &#39;updated summary&#39;;
+&nbsp;&nbsp;&nbsp;calendar.update(events[1], false);
+}
+</pre> </li>
+    </ol>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Event_Batch" name="Managing_Event_Batch" class="items-tit-h2">Managing Multiple Calendar Events in the Batch Mode</h2>
+           <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various calendar features, you must learn to manage multiple calendar events in the batch mode:</p>
+  <ol>
+   <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</pre> </li>
+     <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
+myCalendar.find(eventSearchSuccessCallback, errorCallback);</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To retrieve a specific set of events, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the events are retrieved because no filter is used.</p> </td>
+        </tr>
+       </tbody>
+      </table> </li>
+
+     <li>To update events:
+      <ol>
+       <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <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;;
+</pre> </li>
+       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> 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));
+}
+</pre> </li>
+      </ol> </li>
+     <li><p>To delete events, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <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]);
+}
+</pre> </li>
+    </ol>
+              </div>
+        </li>
+ 
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Converting_Event" name="Converting_Event" class="items-tit-h2">Converting Calendar Event Formats</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>The following examples illustrate how to make calendar event exchange more efficient in your application by converting the calendar events to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>
+  <ul class="ul">
+   <li>To convert an iCalendar string to a calendar event:
+    <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);</pre> </li>
+     <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> 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);
+}</pre> </li>
+    </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Events_Batch">add all the events at once in a batch mode</a>.</p> </li>
+   <li>To convert a calendar event to the iCalendar format:
+    <ol>
+     <li>Get the default calendar and find all calendar events which include the &quot;Tizen&quot; string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">
+var myCalendar;
+
+myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+
+/* Define a filter */
+var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);
+
+/* Search for the events */
+myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);
+</pre> </li>
+     <li>Convert a calendar event to an iCalendar string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <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;);
+}
+</pre> </li>
+    </ol>
+<p>To export and convert multiple events from a calendar, find the required events using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found events one by one.</p> </li></ul>
+
+        </div></li>
+         <li>
+            <div class="devicespec-tit">
+ <h2 id="Adding_Tasks" name="Adding_Tasks" class="items-tit-h2">Adding Tasks to a Calendar</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <p>To create engaging applications with various calendar features, you must learn to add tasks to calendars:</p>
+  <ol>
+    <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</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;
+});
+</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;);
+
+task.alarms = [alarm];
+</pre></li>
+     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">calendar.add(task);  /* task.id attribute is generated */</pre> </li>
+    </ol>
+                  </div>
+        </li>  
+         <li>
+            <div class="devicespec-tit">
+ <h2 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch" class="items-tit-h2">Adding Tasks to a Calendar in the Batch Mode</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <p>To create engaging applications with various calendar features, you must learn to add tasks to calendars in the batch mode:</p>
+    <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</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;
+});
+</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To keep the example as simple as possible, the array above includes only 1 task.
+                 </td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the tasks in the array to the calendar:</p> <pre class="prettyprint">
+calendar.addBatch([task]);
+</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used if you want to react to the success or failure of the operation.</td>
+        </tr>
+       </tbody>
+      </table>
+</li>
+    </ol>
+                  </div>
+        </li>
+         <li>
+            <div class="devicespec-tit">
+ <h2 id="Managing_Task" name="Managing_Task" class="items-tit-h2">Managing a Single Calendar Task</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <p>To create engaging applications with various calendar features, you must learn to manage a single calendar task:</p>
+    <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</pre> </li>
+     <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
+myCalendar.find(taskSearchSuccessCallback);</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To retrieve a specific set of tasks, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the tasks are retrieved because no filter is used.</p> </td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">taskSearchSuccessCallback()</span> event handler.</p> <p>In this example, the description parameter of the first task is changed and the task is updated in the calendar using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second task is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* 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]);
+
+&nbsp;&nbsp;&nbsp;/* Delete the second existing task */
+&nbsp;&nbsp;&nbsp;myCalendar.remove(tasks[1].id);
+}</pre> </li>
+    </ol>
+                  </div>
+        </li>
+         <li>
+            <div class="devicespec-tit">
+ <h2 id="Managing_Task_Batch" name="Managing_Task_Batch" class="items-tit-h2">Managing Multiple Calendar Tasks in the Batch Mode</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <p>To create engaging applications with various calendar features, you must learn to manage multiple calendar tasks in the batch mode:</p>
+  <ol>
+   <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);
+</pre> </li>
+     <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
+myCalendar.find(taskSearchSuccessCallback);</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To retrieve a specific set of tasks, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the tasks are retrieved because no filter is used.</p> </td>
+        </tr>
+       </tbody>
+      </table> </li>
+     <li>To update tasks:
+      <ol>
+       <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <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;;
+</pre> </li>
+       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> 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));
+}
+</pre> </li>
+      </ol> </li>
+     <li><p>To delete tasks, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <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]);
+}
+</pre> </li>
+    </ol>             
+ </div>
+        </li>
+         <li>
+            <div class="devicespec-tit">
+ <h2 id="Converting_Task" name="Converting_Task" class="items-tit-h2">Converting Calendar Task Formats</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+  <p>The following examples illustrate how to make calendar task exchange more efficient in your application by converting the calendar task to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>
+  <ul class="ul">
+   <li>To convert an iCalendar string to a calendar task:
+    <ol>
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> 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;);</pre> </li>
+     <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> 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;
+);
+
+calendar.add(task);
+console.log(&#39;Task added with id &#39; + 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 <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Tasks_Batch">add all the tasks at once in a batch mode</a>.</p> </li>
+   <li>To convert a calendar 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 <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">
+var myCalendar;
+
+myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+
+/* Define a filter */
+var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);
+
+/* Search for the tasks */
+myCalendar.find(taskSearchSuccessCallback, null, filter);
+</pre> </li>
+     <li>Convert a calendar item to an iCalendar string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <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;);
+}
+</pre> </li>
+    </ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found tasks one by one.</p> </li>
+  </ul>
+                  </div>
+        </li>          
+       
+       <li>
+            <div class="devicespec-tit">
+  <h2 id="Receiving_Calendar" name="Receiving_Calendar" class="items-tit-h2">Receiving Notifications on Calendar Changes</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various calendar features, you must learn to receive notifications when calendar items are added, updated, or removed:</p>
+  <ol>
+   <li><p>Define the needed variables:</p> <pre class="prettyprint">
+/* Watcher identifier */
+var watcherId = 0;
+
+/* This example assumes that the calendar is initialized */
+var calendar;
+</pre> </li>
+   <li><p>Define the event handlers for different notifications using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> listener interface:</p> <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;}
+};
+</pre> </li>
+   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
+watcherId = calendar.addChangeListener(watcher);
+</pre> </li>
+   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method: </p> <pre class="prettyprint">
+function cancelWatch()
+{
+&nbsp;&nbsp;&nbsp;calendar.removeChangeListener(watcherId);
+}
+</pre> </li>
+  </ol>
+                </div>
+        </li>
+               </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
new file mode 100644 (file)
index 0000000..fac5519
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
@@ -0,0 +1,231 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Call History: Managing the Call History on the Device</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Searching_Call_History">Searching for Call History Items</a></li>
+                       <li><a href="#Removing_Call_History">Removing Call History Items</a></li>
+                       <li><a href="#Monitoring_Call_History">Monitoring the Call History</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/call_history_w.htm">Call History Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Call History: Managing the Call History on the Device</h1>
+ <div class="cont"><div class="static-cont">
+       
+      <p>This tutorial demonstrates how you can manage and monitor the call history.</p>
+         
+            <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+   
+      <h2>Warm-up</h2>
+      <p>Become familiar with the Call History API basics by learning about:</p>
+      <ul>
+       <li><a href="#Searching_Call_History">Searching for Call History Items</a> <p>Retrieve call history items.</p></li>
+       <li><a href="#Removing_Call_History">Removing Call History Items</a> <p>Retrieve and remove call history items.</p></li>
+       <li><a href="#Monitoring_Call_History">Monitoring the Call History</a> <p>Use event handlers to track changes in the call history.</p></li>
+      </ul>
+  <h2 id="task" name="task">Task</h2>
+      <p>In the <a href="task_calllog_w.htm">Call Log</a> task, we will walk through how to manage call logs in your application.</p>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit"> 
+  <h2 id="Searching_Call_History" name="Searching_Call_History" class="items-tit-h2">Searching for Call History Items</h2>
+               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+  <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 <span style="font-family: Courier New,Courier,monospace">find(successCallback, errorCallback, filter, sortMode, limit, offset)</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.<p></p> <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);</pre> </li> 
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define an event handler for the query result set.</p> <p>In the following code snippet, the found call history items are appended to the console log.</p> <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;}
+}</pre> </li> 
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">filter</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define a filter for the query result set. A filter with the <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry </span>attributes is used to limit the results of the call history search.</p> <p>You can define various filters:</p> 
+    <ul class="ul"> 
+     <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> type is used to search based on a single <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> attribute (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#call">CallHistory Filter Attributes</a>).</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;);
+
+/* Second filter example */
+var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, &quot;EXACTLY&quot;, &quot;123456789&quot;)</pre> </li> 
+     <li> <p> The <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> type represents a set of filters. The <span style="font-family: Courier New,Courier,monospace">UNION</span> type composite filter matches any object that is matched by any of its filters; the <span style="font-family: Courier New,Courier,monospace">INTERSECTION</span> 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));
+
+/* 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]);
+
+/* Create a video call filter */
+var tfilter = new tizen.AttributeFilter(&quot;features&quot;, &quot;EXACTLY&quot;, &quot;VIDEOCALL&quot;);
+
+/* Combine the filters into a set */
+var ifilter = new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [numberFilter, dataFilter, tfilter]);</pre> </li> 
+    </ul> </li> 
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameter to order the query result set. If the parameter is undefined or set to <span style="font-family: Courier New,Courier,monospace">null</span>, 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;);</pre> </li> 
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">limit</span> and <span style="font-family: Courier New,Courier,monospace">offset</span> parameters of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <span style="font-family: Courier New,Courier,monospace">limit</span> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <span style="font-family: Courier New,Courier,monospace">offset</span> 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> 
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  
+  <h2 id="Removing_Call_History" name="Removing_Call_History" class="items-tit-h2">Removing Call History Items</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+  <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 <span style="font-family: Courier New,Courier,monospace">remove()</span> 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 <span style="font-family: Courier New,Courier,monospace">find()</span> method, and then handle the removal in the event handler that is called when the <span style="font-family: Courier New,Courier,monospace">find()</span> 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]);
+}
+
+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;); 
+/* Search for the item to be removed */
+tizen.callhistory.find(onSuccess, onError, numberFilter, null, 1);
+</pre> </li> 
+   <li><p> To remove multiple call history items, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method.</p> <p>The <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method functions similarly as the <span style="font-family: Courier New,Courier,monospace">remove()</span> method, except that it removes a list of call history items instead of a single item:</p> <pre class="prettyprint">/* Define success callback */
+function onSuccess(results) 
+{
+&nbsp;&nbsp;&nbsp;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;); 
+tizen.callhistory.find(onSuccess, onError, numberFilter);
+</pre> </li> 
+   <li><p> To remove all call history items, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">tizen.callhistory.removeAll();</pre> </li> 
+  </ol> 
+  
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  
+  <h2 id="Monitoring_Call_History" name="Monitoring_Call_History" class="items-tit-h2">Monitoring the Call History</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+  <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 <span style="font-family: Courier New,Courier,monospace">onadded</span> 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; + newItems[i].startTime);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;},</pre> </li> 
+   <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onchanged</span> 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; + changedItems[i].direction);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;},
+</pre> </li> 
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">onremoved</span> 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; + removedItems[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+};</pre>
+</li>
+<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to register a listener for observing call history changes:</p> <pre class="prettyprint">var callHistoryListener = tizen.callhistory.addChangeListener(onHistoryChange);</pre> </li>
+
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method to unregister a previously registered listener. Use the ID returned by the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span>:</p> <pre class="prettyprint">tizen.callhistory.removeChangeListener(callHistoryListener);</pre> </li> 
+  </ol> 
+                       </div>
+               </li>
+       </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
new file mode 100644 (file)
index 0000000..4d7d714
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
@@ -0,0 +1,616 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Contacts and Handling Contact Information</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                       <li>Address book
+                               <ul class="toc">
+                                       <li><a href="#Adding_Addressbook">Creating an Address Book</a></li>
+                                       <li><a href="#Getting_Address_Books">Getting Address Books</a></li>
+                               </ul>
+                       </li>
+                       <li>Single contacts
+                               <ul class="toc">
+                                       <li><a href="#Adding_Contact">Adding a Contact</a></li>
+                                       <li><a href="#Managing_Contact">Managing a Contact</a></li>
+                                       <li><a href="#Receiving_Contact">Receiving Notifications on Contact Changes</a></li>
+                                       <li><a href="#Importing_Contact">Importing Contacts</a></li>
+                                       <li><a href="#Exporting_Contact">Exporting Contacts</a></li>
+                               </ul>
+                       </li>
+                       <li>Multiple contacts
+                               <ul class="toc">
+                                       <li><a href="#Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</a></li>
+                                       <li><a href="#Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</a></li>
+                                       <li><a href="#Managing_Groups">Managing Contact Groups</a></li>
+                               </ul>
+                       </li>
+            <li>Persons
+                               <ul class="toc">
+                                       <li><a href="#Managing_Persons">Managing Persons</a></li>
+                               </ul>
+                       </li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/contact_w.htm">Contact Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Contact: Managing Contacts and Handling Contact Information</h1>
+ <div class="cont"><div class="static-cont">
+   
+      <p>This tutorial demonstrates how you can manage address books in the device to access, modify, add, and remove contacts within a specified address book on the device.</p>
+         
+           <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h2>Warm-up</h2>
+      <p>Become familiar with the Contact API basics by learning about:</p>
+      <ul>
+               <li>Address book
+                       <ul>
+                          <li><a href="#Adding_Addressbook">Creating an Address Book</a> <p>Create a new address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> constructor.</p> </li>
+                          <li><a href="#Getting_Address_Books">Getting Address Books</a> <p>Access the address books in which contacts are listed.</p> </li>
+                   </ul>
+           </li>
+           <li>Single contacts
+                       <ul>
+                          <li><a href="#Adding_Contact">Adding a Contact</a> <p>Add a contact to an address book.</p> </li>
+                          <li><a href="#Managing_Contact">Managing a Contact</a> <p>Find, update, and delete an existing contact item.</p> </li>
+                          <li><a href="#Receiving_Contact">Receiving Notifications on Contact Changes </a> <p>Receive notifications when contacts are added, updated, or deleted.</p></li>
+                          <li><a href="#Importing_Contact">Importing Contacts</a> <p>Import contacts with the help of the vCard format.</p></li>
+                          <li><a href="#Exporting_Contact">Exporting Contacts</a> <p>Export contacts with the help of the vCard format.</p></li>
+                       </ul>
+          </li>
+          <li>Multiple contacts
+                       <ul>
+                          <li><a href="#Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</a> <p>Add multiple contacts to an address book in the batch mode.</p> </li>
+                          
+                          <li><a href="#Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</a> <p>Find, update, and delete multiple contact items in the batch mode.</p> </li>
+                          <li><a href="#Managing_Groups">Managing Contact Groups</a> <p>Add, get, update, and remove groups.</p> </li>   
+                       </ul>
+               </li>   
+               <li>Persons
+                       <ul>
+                               <li><a href="#Managing_Persons">Managing Persons</a> <p>Find and link existing persons.</p> </li>
+                       </ul>
+               </li>
+      </ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+            <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Adding_Addressbook" name="Adding_Addressbook" class="items-tit-h2">Creating an Address Book</h2>
+                      <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Creating a new address book is a basic contact management skill:</p>
+  
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The created address book is associated with a specified account. Therefore, you must retrieve the account before creating a new address book.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  <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 <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> 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 <span style="font-family: Courier New,Courier,monospace">addAddressBook()</span> 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;}
+}</pre></li>
+   <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above.
+<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
+</pre></li>
+  </ol>
+              </div>
+        </li> 
+ <li>
+            <div class="devicespec-tit">
+  <h2 id="Getting_Address_Books" name="Getting_Address_Books" class="items-tit-h2">Getting Address Books</h2>
+                      <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to access the address books in which the contacts are listed:</p>
+  <ol>
+   <li><p>To get the default address book, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface to retrieve the default address book as an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object:</p> <pre class="prettyprint">
+var myAddressbook;
+
+/* Get the default address book */
+myAddressbook = tizen.contact.getDefaultAddressBook();
+</pre> </li>
+   <li><p>To get all available address books, use the <span style="font-family: Courier New,Courier,monospace">getAddressBooks()</span> method. This method passes an array of <span style="font-family: Courier New,Courier,monospace">AddressBook</span> objects to the success event handler.</p> <pre class="prettyprint">
+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;}
+}
+
+/* Get the list of available address books */
+tizen.contact.getAddressBooks(addressBooksCB);
+</pre>
+   <p>All available address books on the device are retrieved. You can use an <span style="font-family: Courier New,Courier,monospace">AddressBook</span> object ID to select a specific address book with the <span style="font-family: Courier New,Courier,monospace">getAddressBook()</span> method, if you know the ID of the address book in advance.</p>
+ </li>
+
+  </ol>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Adding_Contact" name="Adding_Contact" class="items-tit-h2">Adding a Contact</h2>
+                     <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p>To create engaging applications with various contacts features, you must learn to add a contact to an address book:</p>
+    <ol>
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
+var addressbook = tizen.contact.getDefaultAddressBook();
+</pre> </li>
+     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object and define its properties as a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactInit">ContactInit</a> object (the parameter of the <span style="font-family: Courier New,Courier,monospace">Contact</span> constructor):</p> <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;)]
+});
+</pre> </li>
+     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">Contact</span> object to the default address book with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">addressbook.add(contact);</pre> </li>
+    </ol>
+                </div>
+        </li> 
+               <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Contact" name="Managing_Contact" class="items-tit-h2">Managing a Contact</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to manage a contact in your address book:</p>
+  <ol>
+   <li>To retrieve a single contact, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface with the <span style="font-family: Courier New,Courier,monospace">ContactID</span> as a parameter:
+   <p>The following example uses the object of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactRef">ContactRef</a> interface. The <span style="font-family: Courier New,Courier,monospace">ContactRef</span> object contains both <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> ID and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> ID.</p> <pre class="prettyprint">
+/* contactRef is retrieved by other APIs */
+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);
+}
+</pre> </li>
+   <li>To manage a single contact:
+    <ol>
+     <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
+var addressbook = tizen.contact.getDefaultAddressBook();
+</pre> </li>
+     <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> 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;);
+
+try
+{
+&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);
+}</pre>
+      <table class="note">
+       <tbody>
+        <tr>
+         <th class="note">Note</th>
+        </tr>
+        <tr>
+         <td class="note">To retrieve a specific contact, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#contact">Contact Filter Attributes</a>). <p>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> </td>
+        </tr>
+       </tbody>
+      </table> <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 <span style="font-family: Courier New,Courier,monospace">contactsFoundCB</span> 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 <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second contact is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> 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;}
+}</pre> </li>
+    </ol> </li>
+  </ol>
+                  </div>
+        </li>
+                <li>
+            <div class="devicespec-tit">
+  <h2 id="Receiving_Contact" name="Receiving_Contact" class="items-tit-h2">Receiving Notifications on Contact Changes</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to receive notifications when contacts are added, updated, or removed:</p>
+  <ol>
+   <li><p>Define the needed variables:</p> <pre class="prettyprint">
+/* Watcher identifier */
+var watcherId = 0;
+
+/* This example assumes that the address book is initialized */
+var addressbook;
+</pre> </li>
+   <li><p>Define the event handlers for different notifications about changes in the selected address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBookChangeCallback">AddressBookChangeCallback</a> listener interface:</p> <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;}
+};
+</pre> </li>
+   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
+watcherId = addressbook.addChangeListener(watcher);
+</pre> </li>
+   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">
+addressbook.removeChangeListener(watcherId);
+</pre> </li>
+  </ol>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Importing_Contact" name="Importing_Contact" class="items-tit-h2">Importing Contacts</h2>
+         <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to import contacts with the help of the vCard format:</p>
+
+    <ol>
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
+var addressbook = tizen.contact.getDefaultAddressBook();
+</pre> </li>
+     <li><p>Create a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object from the vCard string and add it to the default address book:</p> <pre class="prettyprint">
+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);
+}</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 <span style="font-family: Courier New,Courier,monospace">addBatch()</span> 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>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Exporting_Contact" name="Exporting_Contact" class="items-tit-h2">Exporting Contacts</h2>
+           <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con"> 
+  
+  <p>To create engaging applications with various contacts features, you must learn to export contacts with the help of the vCard format:</p>
+    <ol>
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> 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> <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;);
+
+/* Search for the contacts */
+addressbook.find(contactsFoundCB, errorCB, filter);
+</pre> </li>
+     <li><p>Convert a contact to a vCard string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method.</p> <p>In the following example, the first found contact is exported by converting it to the vCard version 3.0 format.</p> <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;);
+}</pre></li>
+    </ol>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact" class="items-tit-h2">Adding Multiple Contacts in the Batch Mode</h2>
+                     <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to add multiple contacts to an address book in the batch mode:</p>
+<ol>
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
+addressbook = tizen.contact.getDefaultAddressBook();
+</pre> </li>
+     <li><p>Define the items to be added as an array:</p> <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;)]
+});
+
+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;)]
+});
+</pre> </li>
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> 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> <pre class="prettyprint">
+addressbook.addBatch([c1, c2]);
+</pre>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span>, <span style="font-family: Courier New,Courier,monospace">updateBatch()</span>, and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> methods are asynchronous. Provide success and error callbacks with them.</td>
+      </tr>
+     </tbody>
+    </table>
+</li>
+    </ol>
+              </div>
+        </li>
+       
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact" class="items-tit-h2">Managing Multiple Contacts in the Batch Mode</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to manage multiple contacts in your address books in the batch mode:</p>
+  <ol>
+     <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
+var addressbook = tizen.contact.getDefaultAddressBook();
+</pre> </li>
+     <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> 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;);
+
+try
+{
+&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);
+}</pre> </li>
+     <li>To update contacts:
+      <ol>
+       <li><p>Define the contact changes to be made in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <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;}
+</pre> </li>
+       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple contacts asynchronously:</p> <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;/* Update all found contacts */
+&nbsp;&nbsp;&nbsp;addressbook.updateBatch(contacts);
+}
+</pre> </li>
+      </ol> </li>
+     <li><p>To delete contacts, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple contacts asynchronously:</p> <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]);
+}
+</pre> </li>
+    </ol>
+              </div>
+        </li>
+               
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Groups" name="Managing_Groups" class="items-tit-h2">Managing Contact Groups</h2>
+                      <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con"> 
+  
+  <p>To create engaging applications with various contact features, you must learn to manage contact groups:</p>
+  <ol>
+    <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
+<pre class="prettyprint">
+var addressbook = tizen.contact.getDefaultAddressBook();</pre> </li>
+   <li><p>To create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactGroup">ContactGroup</a> object and add the newly create group to the system, use the constructor and the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> 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 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);
+}
+</pre></li>
+
+<li>To manage groups:
+
+<ul class="ul">   <li><p>To retrieve all the contact groups from the address book, use the <span style="font-family: Courier New,Courier,monospace">getGroups()</span> method
+   of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+<pre class="prettyprint">
+var groups;
+try 
+{
+&nbsp;&nbsp;&nbsp;groups = addressbook.getGroups();
+}
+</pre></li>
+   <li><p>To change the name of the group, assign the <span style="font-family: Courier New,Courier,monospace">name</span> property a new value and use the <span style="font-family: Courier New,Courier,monospace">updateGroup()</span>
+   method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+<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;);
+}
+</pre></li>
+   <li><p>To retrieve a specific group, use the <span style="font-family: Courier New,Courier,monospace">getGroup()</span> method of
+   the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+<pre class="prettyprint">
+try 
+{
+&nbsp;&nbsp;&nbsp;group = addressbook.getGroup(group.id);
+}
+</pre></li>
+   <li><p>To remove a group from the address book, use the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method of
+   the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
+<pre class="prettyprint">
+try 
+{
+&nbsp;&nbsp;&nbsp;addressbook.removeGroup(group.id);
+&nbsp;&nbsp;&nbsp;console.log(&quot;Group was removed&quot;);
+}
+</pre></li></ul></li>
+  </ol>
+              </div>
+        </li>          
+               
+       
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Managing_Persons" name="Managing_Persons" class="items-tit-h2">Managing Persons</h2>
+                   <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>To create engaging applications with various contacts features, you must learn to manage persons in your contact database:</p>
+  <ol>
+   <li>To manage a single person:
+    <ol>
+     <li><p>To retrieve persons, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">tizen.contact.find(personsFoundCB);</pre></li>
+     <li><p>Update or delete the found persons in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second person is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> 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;}
+}</pre></li>
+    </ol> </li>
+   <li>To merge multiple persons into a single person item:
+    <ol>
+     <li>Retrieve the persons as described above.</li>
+     <li><p>Define the persons to be merged in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler:</p> <pre class="prettyprint">function personsFoundCB(persons)
+{
+&nbsp;&nbsp;&nbsp;var sourcePerson = persons[0];
+&nbsp;&nbsp;&nbsp;var targetPerson = persons[1];</pre></li>
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">link()</span> method to link contacts that are linked to the other person:</p> <pre class="prettyprint">&nbsp;&nbsp;&nbsp;/* Link 2 persons, contacts from sourcePerson are added to targetPerson and sourcePerson is removed */
+&nbsp;&nbsp;&nbsp;targetPerson.link(sourcePerson.id);
+}</pre></li>
+    </ol> </li>
+  </ol>
+                 </div>
+        </li>
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
new file mode 100644 (file)
index 0000000..b4beec0
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
@@ -0,0 +1,152 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Synchronization: Creating a Sync Profile and Synchronizing Device Data</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</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">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/data_sync_w.htm">Data Synchronization Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</h1>
+ <div class="cont"><div class="static-cont">
+       
+      <p>This tutorial demonstrates how you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p>
+         
+            <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+    
+  <h2>Warm-up</h2>
+      <p>Become familiar with the Data Synchronization API basics by learning about:</p>
+      <ul>
+       <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</a> <p>Check whether the device has a free slot for a new sync profile and create the profile.</p> </li>
+       <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a> <p>Start the synchronization operation and receive notifications about its progress.</p></li>
+      </ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="Creating_Sync_Profile" name="Creating_Sync_Profile" class="items-tit-h2">Creating a Sync Profile</h2>
+             <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <p>To be able to synchronize your device data, such as contacts and calendar events, with the OMA DS server, you must learn how to create a sync profile:</p>
+  <ol>
+   <li><p>Check whether there are available profile slots on the device:</p> <pre class="prettyprint">
+var numMaxProfiles = tizen.datasync.getMaxProfilesNum();
+var numProfiles = tizen.datasync.getProfilesNum();
+</pre> </li>
+   <li><p>Create a sync profile. Use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a>, <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a>, and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interfaces to provide sync profile and operation information:</p> <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;, &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);
+</pre> </li>
+   <li><p>To be able to use the created profile, add it to your device using the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface:</p> <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;tizen.datasync.add(profile);
+&nbsp;&nbsp;&nbsp;var profileId = profile.profileId;
+}</pre> </li>
+  </ol>
+              </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+  <h2 id="Starting_Sync" name="Starting_Sync" class="items-tit-h2">Starting and Monitoring Data Synchronization</h2>
+            <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+  <p>Learning how to start and monitor the data synchronization process is a basic data management skill:</p>
+  <ol>
+   <li><p>Define the event handlers for the notifications using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> listener interface:</p> <pre class="prettyprint">
+var syncCallback =
+{
+&nbsp;&nbsp;&nbsp;onprogress: function(profileId, serviceType, isFromServer, totalPerType, syncedPerType)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Total: &#39; + totalPerType + &#39;, synced: &#39; + 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;}
+};
+</pre> </li>
+   <li><p>Start the sync operation using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method, with the corresponding listener as a parameter:</p> <pre class="prettyprint">
+tizen.datasync.startSync(profileId, syncCallback);
+</pre> </li>
+  </ol>
+                  </div>
+        </li>
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
new file mode 100644 (file)
index 0000000..6d042bc
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Social: Managing Personal Data</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/social_guide_w.htm">Social Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Social: Managing Personal Data</h1>
+
+     <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Social API domain is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+ <p>The social data tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="account_tutorial_w.htm">Account: Managing Accounts and Account Information</a> <p>Demonstrates how you can manage accounts and retrieve account information.</p></li>
+   <li><a href="bookmark_tutorial_w.htm">Bookmark: Managing Web Browser Bookmarks</a> <p>Demonstrates how you can manage Tizen Web browser bookmarks on the device.</p></li>   
+   <li><a href="calendar_tutorial_w.htm">Calendar: Managing Calendars and Calendar Events</a> <p>Demonstrates how you can manage and monitor calendar items, and convert them to the iCalender format.</p></li> 
+   <li><a href="call_history_tutorial_w.htm">Call History: Managing the Call History on the Device</a> <p>Demonstrates how you can manage the call history.</p></li>
+   <li><a href="contact_tutorial_w.htm">Contact: Managing Contacts and Handling Contact Information</a> <p>Demonstrates how you can manage and monitor contacts, and convert them to the vCard format.</p></li>  
+   <li><a href="data_sync_tutorial_w.htm">Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</a> <p>Demonstrates how you can create a sync profile and manage data synchronization operations.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm b/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm
new file mode 100644 (file)
index 0000000..5e5cb30
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm
@@ -0,0 +1,344 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Defining">Defining the Application Layout</a></li>
+            <li><a href="#Initializing">Initializing the Application</a></li>
+                       <li><a href="#Browsing">Browsing a Call Log</a></li>
+                       <li><a href="#Managing">Managing Caller History</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/call_history_w.htm">Call History Guide</a></li> 
+            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History API for Mobile Web</a></li> 
+               </ul>
+       </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 SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">CallLog</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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 class="figure">Figure: CallLog screens</p> 
+  <p style="text-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 class="tutorstep"> 
+   <li>app.ui.templateManager.js Source File 
+    <ol> 
+     <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;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;tplName = [fileName, app.config.get(&#39;templateExtension&#39;)].join(&#39;&#39;);
+&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;$.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;url: tplPath,
+&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;dataType: &#39;html&#39;,
+&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;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;cachedTemplates += 1;
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;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;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;else
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;}
+}
+</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;}
+
+&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+}
+</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;
+}</pre> </li> 
+    </ol> </li> 
+  </ol>
+  
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+  <ol class="tutorstep"> 
+   <li>callView.tpl Source File 
+    <ol> 
+     <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 <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;
+</pre> </li> 
+     <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the main screen contains a list component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications) displaying the elements listed in the <span style="font-family: Courier New,Courier,monospace;">templates/callItemRow.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/dateRow.tpl</span> files. To display the search bar, the <span style="font-family: Courier New,Courier,monospace;">data-filter</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">true</span>.</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;/div&gt;
+</pre> </li> 
+    </ol> </li> 
+   <li>dateRow.tpl Source File 
+<p>The <span style="font-family: Courier New,Courier,monospace;">dateRow.tpl</span> 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;</pre> </li> 
+     <li>callItemRow.tpl Source File
+        <p>The <span style="font-family: Courier New,Courier,monospace;">callItemRow.tpl</span> 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="checkbox" /&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>
+</pre> </li> 
+  </ol> 
+
+  <h2 id="Initializing" name="Browsing">Initializing the Application</h2>
+   <ol class="tutorstep"> 
+   <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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;/widget&gt;</pre></li> 
+  </ol> 
+
+  <h2 id="Browsing" name="Browsing">Browsing a Call Log</h2> 
+  <p>This section builds upon the elements described in <a href="call_history_tutorial_w.htm#Searching_Call_History">Searching for Call History Items</a>.</p> 
+  <p>The call log retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> file.</p>
+  <ol class="tutorstep"> 
+   <li>Retrieving the Complete Call History 
+   <ol>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace;">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> 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, new tizen.SortMode(&#39;startTime&#39;, &#39;DESC&#39;));
+}
+</pre></li>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace;">showCallHistory()</span> method, placed in the <span style="font-family: Courier New,Courier,monospace;">app.js</span> file, calls the <span style="font-family: Courier New,Courier,monospace;">getCallHistory()</span> method from <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> 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));
+}
+</pre></li></ol>
+   </li> 
+   <li>Retrieving the Call History for a Specific Caller 
+   <ol><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 <span style="font-family: Courier New,Courier,monospace;">find()</span> method.</p> 
+<pre class="prettyprint">getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber, 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;));
+}
+
+</pre></li>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace;">showHistoryForCaller()</span> method calls the <span style="font-family: Courier New,Courier,monospace;">getCallHistoryForCaller()</span> 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, 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_tutorial_w.htm#Removing_Call_History">Removing Call History Items</a>.</p> 
+
+  <h3 id="listen" name="listen">Listening to Call History Changes</h3> 
+  <ol class="tutorstep"> 
+   <li>app.model.js Source File 
+   <p>The <span style="font-family: Courier New,Courier,monospace;">addChangeListener()</span> 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;};
+
+&nbsp;&nbsp;&nbsp;tizen.callhistory.addChangeListener(callHistoryListener);
+}
+</pre> </li>
+<li>app.js Source File<p>The <span style="font-family: Courier New,Courier,monospace;">registerChangeListener()</span> method is called during the application initialization to register the defined event handlers.</p>
+   <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));
+
+&nbsp;&nbsp;&nbsp;this.ui = new Ui();
+
+&nbsp;&nbsp;&nbsp;return this;
+}
+</pre> </li></ol>
+  <h3 id="delete" name="delete">Deleting the Call History for a Caller</h3> 
+  <ol class="tutorstep"> 
+   <li>app.model.js Source File <p>The <span style="font-family: Courier New,Courier,monospace;">remove()</span> method of the <span style="font-family: Courier New,Courier,monospace;">CallHistory</span> 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;}
+}
+</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 <span style="font-family: Courier New,Courier,monospace;">app.js</span> file.</p> 
+  <ol class="tutorstep"> 
+   <li>Calling <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="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#launch">launch other applications</a>. To respond to the call log by calling, specify the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/appcontrol/operation/dial</span> operation and the contact number as parameters.</p> <pre class="prettyprint">makeCall: function App_makeCall(phoneNumber)
+{
+&nbsp;&nbsp;&nbsp;var self = this, appControl = 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;&nbsp;&nbsp;&nbsp;&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);
+
+&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function() {}, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onsuccess: function() {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onfailure: function(er)
+&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;}
+},
+</pre> </li> 
+   <li>Sending a Message <p>To respond to the call log by sending a message, specify the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/appcontrol/operation/compose</span> operation and the contact number as parameters.</p>
+   <pre class="prettyprint">sendSms: function App_sendSms(phoneNumber)
+{
+&nbsp;&nbsp;&nbsp;var self = this, appControl = 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;&nbsp;&nbsp;&nbsp;&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);
+
+&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function() {}, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onsuccess: function() {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onfailure: function(er)
+&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;});
+}
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm b/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
new file mode 100644 (file)
index 0000000..f8b74e7
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
@@ -0,0 +1,460 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Event Manager</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#Defining">Defining the Application Layout</a></li>
+            <li><a href="#Initializing">Initializing the Application</a></li>
+            <li><a href="#Managing">Managing Calendar Events</a></li>
+            <li><a href="#Filtering">Filtering Calendar Events</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/calendar_w.htm">Calendar Guide</a></li>
+            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+
+  <h1>Task: Event Manager</h1>
+  <p>This task, based on the EventManager sample delivered with the Tizen SDK, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API to manage calendar events. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">EventManager</a>.</p>
+
+  <p>This task consists of the following parts:</p>
+  <ul class="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="#Managing">Managing Calendar Events</a> defines how to add, modify, delete, and set alarms for calendar events.</li>
+   <li><a href="#Filtering">Filtering Calendar Events</a> defines how to retrieve specific events.</li>
+  </ul>
+  <p>This sample is a fully functional application for managing the device calendar. The user can add, modify, retrieve, and remove events, set the event type and duration, and set alarms for the events.</p>
+
+  <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 class="figure">Figure: EventManager screens</p>
+  <p style="text-align: center;"><img alt="EventManager screens" src="../../../images/eventmanager.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 class="tutorstep">
+   <li>app.ui.templateManager.js Source File
+    <ol>
+     <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;&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;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;tplName = [fileName, app.config.get(&#39;templateExtension&#39;)].join(&#39;&#39;);
+&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;$.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;url: tplPath,
+&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;dataType: &#39;html&#39;,
+&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;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;cachedTemplates += 1;
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;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;/* 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;else
+&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;if (cachedTemplates &gt;= tplNames.length &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;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;}
+}
+</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;}
+
+&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+}
+</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;
+}
+</pre> </li>
+    </ol> </li>
+  </ol>
+
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep">
+   <li>templates/home.tpl Source File
+   <ol><li>
+<p>The main screen displays a list of calendar events. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;
+</pre> </li>
+<li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the main screen contains a list component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications) displaying the elements as defined in the <span style="font-family: Courier New,Courier,monospace;">templates/event.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/all_day_event.tpl</span> 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;</pre></li>
+<li><p>The footer section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">footer</span>. The footer section contains a tab bar (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">mobile</a> applications) 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;/div&gt;
+</pre> </li></ol>
+</li>
+<li>templates/event.tpl Source File
+<p>Each event is displayed in the list showing a summary text, and a start and end date, and 2 buttons (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications).</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; 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&gt;
+</pre>
+</li></ol>
+  <h3 id="new" name="new">Defining the New Event Screen</h3>
+  <ol class="tutorstep">
+<li>templates/new_event.tpl Source File
+<p>The New event screen contains UI widgets 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&gt;
+</pre>
+</li></ol>
+  <h3 id="set" name="set">Defining the Set Alarm Screen</h3>
+  <ol class="tutorstep">
+<li>templates/alarm.tpl Source File
+<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&gt;
+</pre>
+</li>
+  </ol>
+
+  <h2 id="Initializing" name="Initializing">Initializing the Application</h2>
+  <ol class="tutorstep">
+  <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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/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;/widget&gt;</pre> </li>
+  </ol>
+
+  <h2 id="Managing" name="Managing">Managing Calendar Events</h2>
+  <p>This section builds upon the elements described in <a href="calendar_tutorial_w.htm#Adding_Events">Adding Events to a Calendar</a> and <a href="calendar_tutorial_w.htm#Managing_Event">Managing a Single Calendar Event</a>.</p>
+  <p>The calendar event management functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">js/app.model.js</span> file.</p>
+  <ol class="tutorstep">
+   <li>Accessing Events
+<p>To access events, retrieve the default calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method.</p>
+<pre class="prettyprint">
+getCalendar: function Model_getCalendar()
+{
+&nbsp;&nbsp;&nbsp;return tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+},
+</pre>
+</li>
+<li>Creating a New Calendar Event
+<p>Use the <span style="font-family: Courier New,Courier,monospace">addEventToDefaultCalendar()</span> method to add a new event to the calendar.</p>
+<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);
+},
+</pre>
+</li>
+<li>Modifying a Calendar Event
+<p>Use the <span style="font-family: Courier New,Courier,monospace">get()</span> method to get the calendar, and use the <span style="font-family: Courier New,Courier,monospace">update()</span> method to save the changed values to the calendar.</p>
+<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);
+},
+</pre>
+</li>
+
+<li>Deleting Calendar Event
+<p>Use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method to delete an event, and update the event list using the  <span style="font-family: Courier New,Courier,monospace">loadEvents()</span> method.</p>
+<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();
+},
+</pre>
+</li>
+</ol>
+
+<h2 id="Filtering" name="Filtering">Filtering Calendar Events</h2>
+  <p>The calendar event filtering functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">js/app.model.js</span> file.</p>
+  <ol class="tutorstep">
+   <li>Creating a Filter
+<p>Use the <span style="font-family: Courier New,Courier,monospace">getStartDateFilter()</span> method to create a filter for a given date. The filter includes events starting on the specified date or before, and ending on the specified date or later. It also includes all-day events for the specified date.</p>
+
+<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 = 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;]);
+},
+</pre>
+</li>
+<li>Retrieving Filtered Events
+<p>Use the <span style="font-family: Courier New,Courier,monospace">find()</span> method with the composite filter created above to retrieve filtered events from the calendar.</p>
+<pre class="prettyprint">getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date, 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);
+},
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
new file mode 100644 (file)
index 0000000..2ed2844
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
@@ -0,0 +1,269 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>FM Radio: Listening to the FM Radio</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#manage">Managing the FM Radio</a></li>
+            <li><a href="#scan">Scanning the FM Radio Frequency</a></li>
+            <li><a href="#get_info">Getting Information about Interruptions</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/fm_radio_w.htm">FM Radio Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html">FM Radio API for Mobile Web</a></li>                  
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>FM Radio: Listening to the FM Radio</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how to manage a FM radio on the device.</p>
+
+   <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the FM Radio API basics by learning about:</p>
+<ul>
+<li><a href="#manage">Managing the FM Radio</a><p>Learn how to start and stop FM radio play.</p></li>
+<li><a href="#scan">Scanning the FM Radio Frequency</a><p>Scan for the next radio station while playing, or perform a full frequency range scan.</p></li>
+<li><a href="#get_info">Getting Information about Interruptions</a><p>Set an event handler to retrieve information about radio playback interruptions and restart the playback.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <!-- Folds -->
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing the FM Radio</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">       
+
+<p>Starting and stopping an FM radio and changing the frequency is a basic FM radio management skill:</p>
+
+<ol>
+<li>To start the FM radio, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface:
+
+<table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">Always check the current state before using any state-dependent functions.</td>
+     </tr>
+    </tbody>
+</table>
+
+<pre class="prettyprint">
+var radioState = tizen.fmradio.state;
+var frequencyToPlay = 99.0;
+
+if (radioState == &quot;READY&quot; || radioState == &quot;PLAYING&quot;)
+{
+&nbsp;&nbsp;&nbsp;tizen.fmradio.start(frequencyToPlay);
+}
+</pre>
+<p>
+Pass the <span style="font-family: Courier New,Courier,monospace">frequencyToPlay</span> double value. This value represents the radio frequency. If this value is not passed, the radio module tunes to the lowest frequency available.</p>
+</li>
+
+<li>The FM radio can play any frequency between the <span style="font-family: Courier New,Courier,monospace">frequencyLowerBound</span> and <span style="font-family: Courier New,Courier,monospace">requencyUpperBound</span> values. To change the current frequency, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method:
+<pre class="prettyprint">
+var frequencyLowerBound = tizen.fmradio.frequencyLowerBound;
+var frequencyUpperBound = tizen.fmradio.frequencyUpperBound;
+var newFrequency = frequencyLowerBound + 5.0;
+
+tizen.fmradio.start(newFrequency);
+</pre>
+</li>
+
+<li>To stop FM Radio, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method:
+<pre class="prettyprint">
+var radioState = tizen.fmradio.state;
+
+if (radioState == &quot;PLAYING&quot;)
+{
+&nbsp;&nbsp;&nbsp;tizen.fmradio.stop();
+}
+</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="scan" name="scan" class="items-tit-h2">Scanning the FM Radio Frequency</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                               
+
+<p>To create an application with FM radio features, you must provide a scanning capability:</p>
+
+<ol>
+<li>
+<p>To find a radio channel at a higher frequency than the current one, use the <span style="font-family: Courier New,Courier,monospace">seekUp()</span>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 <span style="font-family: Courier New,Courier,monospace">PLAYING</span> radio state.</p>
+
+<pre class="prettyprint">if (tizen.fmradio.state === &quot;PLAYING&quot;)
+{
+&nbsp;&nbsp;&nbsp;tizen.fmradio.seekUp(successCallback, errorCallback);
+}</pre>
+</li>
+
+<li>
+<p>To find a radio channel at a lower frequency than the current one, use the <span style="font-family: Courier New,Courier,monospace">seekDown()</span>method of the <span style="font-family: Courier New,Courier,monospace">FMRadioManager</span> interface. This function is available only in <span style="font-family: Courier New,Courier,monospace">PLAYING</span> radio state.</p>
+
+<pre class="prettyprint">if (tizen.fmradio.state === &quot;PLAYING&quot;)
+{
+&nbsp;&nbsp;&nbsp;tizen.fmradio.seekDown(successCallback, errorCallback);
+}</pre>
+</li>
+
+<li>To scan all available radio channels, use the <span style="font-family: Courier New,Courier,monospace">scanStart()</span> method of the <span style="font-family: Courier New,Courier,monospace">FMRadioManager</span> interface. This function is available only in the <span style="font-family: Courier New,Courier,monospace">READY</span> state. During scanning, the state is changed to <span style="font-family: Courier New,Courier,monospace">SCANNING</span>.
+<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;}
+};
+
+if (tizen.fmradio.state === &quot;READY&quot;)
+{
+&nbsp;&nbsp;&nbsp;tizen.fmradio.scanStart(radioScanCallback, errorCallback);
+}</pre>
+
+<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">scanStart()</span> method must be an object implementing the <span style="font-family: Courier New,Courier,monospace">FMRadioScanCallback</span> interface.</p></li>
+
+<li>To stop scanning before all stations are found, use the <span style="font-family: Courier New,Courier,monospace">scanStop()</span> method:
+
+<pre class="prettyprint">function successCallback()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The scanning stops&quot;);
+}
+
+if (tizen.fmradio.state === &quot;SCANNING&quot;)
+{
+&nbsp;&nbsp;&nbsp;tizen.fmradio.scanStop(successCallback, errorCallback);
+}
+</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="get_info" name="get_info" class="items-tit-h2">Getting Information about Interruptions</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Retrieving information about FM radio interruptions is a useful FM radio management skill:</p>
+
+<ol>
+<li>
+<p>Set the <span style="font-family: Courier New,Courier,monospace">oninterrupted</span> listener to receive notifications when the radio is interrupted. The event handler receives the reason of the interruption (such as an incoming call or notification tone). You can also use the event handler to restart the playback.</p>
+<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;}
+};
+
+tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);</pre>
+</li>
+
+<li>
+<p>To stop receiving information about interruptions, use the <span style="font-family: Courier New,Courier,monospace">unsetFMRadioInterruptedListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface.</p>
+</li>
+
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
new file mode 100644 (file)
index 0000000..a3b1d36
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
@@ -0,0 +1,193 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Human Activity Monitor: Retrieving User Activity Data from the Various Device Sensors</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#retrieve">Retrieving Data</a></li>
+            <li><a href="#receive">Receiving Notifications on Pedometer Data Changes</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/ham_w.htm">Human Activity Monitor Guide</a></li>
+                       <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>                           
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Human Activity Monitor: Retrieving User Activity Data from the Various Device Sensors</h1>
+<div class="cont"><div class="static-cont">
+
+
+<p>This tutorial demonstrates how to monitor user activity.</p>
+
+   <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Human Activity Monitor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+               <p>The Human Activity Monitor API is partly supported on the Tizen Emulators (only heart-rate monitoring).</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Human Activity Monitor API basics by learning about:</p>
+<ul>
+    <li><a href="#retrieve">Retrieving Data</a> <p>Start the data collection and get monitor data.</p></li>
+    <li><a href="#receive">Receiving Notifications on Pedometer Data Changes</a> <p>Track the changes in the step count.</p></li>
+</ul>
+
+    <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <!-- Folds -->
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Data</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Enabling the monitor and retrieving data is a basic Human Activity Monitor (HAM) management skill:</p>
+
+<ol>
+<li>Check whether a sensor is supported using the <span style="font-family: Courier New,Courier,monospace">tizen.systeminfo.getCapability()</span> method to get the <a href="../../../../../org.tizen.guides/html/web/tizen/system/ham_w.htm#ham_capabilities">appropriate capability</a>.</li>
+
+<li>To enable the monitor and start collecting data, use the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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">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;}
+}
+
+tizen.humanactivitymonitor.start(&quot;HRM&quot;, onchangedCB);</pre>
+
+<p>You can also detect the wrist up gesture using the <span style="font-family: Courier New,Courier,monospace">start()</span> method:</p>
+
+ <pre class="prettyprint">function onchangedCB()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;You are looking at your smartwatch&quot;);
+}
+
+tizen.humanactivitymonitor.start(&quot;WRIST_UP&quot;, onchangedCB)</pre>
+</li>
+
+<li>When the a heart-rate monitor (HRM) is enabled, you can get the current data using the <span style="font-family: Courier New,Courier,monospace">getHumanActivityData()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<pre class="prettyprint">function onsuccessCB(hrmInfo)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Heart rate: &quot; + hrmInfo.heartRate);
+}
+function onerrorCB(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.message);
+}
+tizen.humanactivitymonitor.getHumanActivityData(&quot;HRM&quot;, onsuccessCB, onerrorCB);</pre>
+</li>
+
+<li>To disable HAM when it is no longer required, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+<pre class="prettyprint">tizen.humanactivitymonitor.stop(&quot;HRM&quot;);</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Pedometer Data Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">PEDOMETER</span> monitor:</p>
+<ol>
+<li>To register an event handler for accumulative pedometer changes, use the <span style="font-family: Courier New,Courier,monospace">setAccumulativePedometerListener()</span>  method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> 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(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;/* Unregisters a previously registered listener */
+&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
+}
+
+tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);</pre>
+</li>
+
+<li>To stop receiving notifications about the accumulative pedometer changes, use the <span style="font-family: Courier New,Courier,monospace">unsetAccumulativePedometerListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">HumanActivityMonitorManager</span> interface:
+
+<pre class="prettyprint">tizen.humanactivitymonitor.unsetAccumulativePedometerListener()
+</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
new file mode 100644 (file)
index 0000000..3a325df
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
@@ -0,0 +1,182 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Power: Controlling Power Resources</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage">Managing the Power Resource</a></li>
+                       <li><a href="#brightness">Managing the Screen Brightness</a></li>
+                       <li><a href="#screen">Managing the Screen State</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/power_w.htm">Power Guide</a></li>
+                       <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>                           
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Power: Controlling Power Resources</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can access the device power state.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Power API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Power API basics by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#manage">Managing the Power Resource</a> <p>Request and release a specific power state.</p></li>
+   <li><a class="opensection" href="#brightness">Managing the Screen Brightness</a> <p>Get, set, and restore the screen brightness.</p></li>
+   <li><a class="opensection" href="#screen">Managing the Screen State</a> <p>Switch the screen on and off, and check whether the screen is on.</p></li></ul>
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="manage" name="manage" class="items-tit-h2">Managing the Power Resource</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+                               <p>Learning how to request and release the power state is a basic power management skill:</p> 
+  <ol> 
+   <li><p>To set the power state, call the <span style="font-family: Courier New,Courier,monospace">request()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> 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 <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span> state is requested for the screen resource:</p> <pre class="prettyprint">
+tizen.power.request(&quot;SCREEN&quot;, &quot;SCREEN_NORMAL&quot;);</pre> </li> 
+   <li><p>To release a power state, call the <span style="font-family: Courier New,Courier,monospace">release()</span> method with the intended resource:</p> <pre class="prettyprint">
+tizen.power.release(&quot;SCREEN&quot;);
+</pre> </li> 
+   <li><p>To listen to the screen state changes, use the <span style="font-family: Courier New,Courier,monospace">setScreenStateChangeListener()</span> 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);
+}
+tizen.power.setScreenStateChangeListener(onScreenStateChanged);</pre> </li> 
+
+<li><p>To unset the screen state change callback and stop monitoring it, use the <span style="font-family: Courier New,Courier,monospace">unsetScreenStateChangeListener()</span> method:</p> 
+       <pre class="prettyprint">tizen.power.unsetScreenStateChangeListener();</pre> </li>
+
+  </ol>  
+                       </div>
+               </li>
+
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="brightness" name="brightness" class="items-tit-h2">Managing the Screen Brightness</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+  <p>Learning how to manage the screen brightness is a basic power management skill:</p>
+  <ul class="ul">
+   <li><p>To get the screen brightness, call the <span style="font-family: Courier New,Courier,monospace">getScreenBrightness()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> 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):</p>
+<pre class="prettyprint">
+var screenBrightness = tizen.power.getScreenBrightness();
+</pre> </li>
+   <li><p>To set the screen brightness, call the <span style="font-family: Courier New,Courier,monospace"> setScreenBrightness()</span> method of
+   the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface with the value from 0 to 1.</p>
+<p>In this example, the screen brightness is set to <span style="font-family: Courier New,Courier,monospace">1</span> (the brightest setting).</p>
+<pre class="prettyprint">
+tizen.power.setScreenBrightness(1);</pre> </li>
+   <li><p>To restore the default screen brightness, use the <span style="font-family: Courier New,Courier,monospace">restoreScreenBrightness()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface:</p>
+<pre class="prettyprint">
+tizen.power.restoreScreenBrightness();
+</pre> </li>
+  </ul>
+                       </div>
+               </li>
+               
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="screen" name="screen" class="items-tit-h2">Managing the Screen State</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+  <p>Learning how to manage the screen state is a basic power management skill:</p>
+  <ul class="ul">
+   <li><p>To check whether the screen is on, call the <span style="font-family: Courier New,Courier,monospace">isScreenOn()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> 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):</p>
+<pre class="prettyprint">
+var isScreenOn = tizen.power.isScreenOn();
+</pre> </li>
+   <li><p>To switch on the screen, call the <span style="font-family: Courier New,Courier,monospace">turnScreenOn()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface:</p>
+<pre class="prettyprint">
+tizen.power.turnScreenOn();
+</pre> </li>
+   <li><p>To switch off the screen, call the <span style="font-family: Courier New,Courier,monospace">turnScreenOff()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface:</p>
+<pre class="prettyprint">
+tizen.power.turnScreenOff();
+</pre> </li>
+
+  </ul>
+                       </div>
+               </li>           
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
new file mode 100644 (file)
index 0000000..0ea60fe
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
@@ -0,0 +1,215 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Sensor: Getting Sensor Data from the Various Device Sensors</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+                <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#manage">Managing Sensors</a></li>
+            <li><a href="#receive">Receiving Notifications on Sensor Data Changes</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm">Sensor Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor API for Wearable Web</a></li>                         
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Sensor: Getting Sensor Data from the Various Device Sensors</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how to use device sensors.</p>
+
+   <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Sensor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+               <p>The Sensor API is supported on all Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Sensor API basics by learning about:</p>
+<ul>
+ <li><a class="opensection" href="#manage">Managing Sensors</a><p>Check, whether the sensor is supported, enable the sensor, read sensor data, and disable the sensor.</p></li>
+ <li><a class="opensection" href="#receive">Receiving Notifications on Sensor Data Changes</a><p>Register an event handler to receive notifications on sensor data changes.</p></li>
+</ul>
+ <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <!-- Folds -->
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing Sensors</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+<p>Learning how to start, read and stop a sensor is a basic sensor management skill:</p>
+
+<ol>
+<li><p>Check that the sensor is supported by the device using the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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) for the proper <a href="../../../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm#capability">capability</a> related to the sensor:</p>
+
+<pre class="prettyprint">var proximityCapability = tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/sensor.proximity&quot;);
+
+if (proximityCapability === true)
+{
+&nbsp;&nbsp;&nbsp;/* The device supports the proximity sensor */
+&nbsp;&nbsp;&nbsp;var proximitySensor = tizen.sensorservice.getDefaultSensor(&quot;PROXIMITY&quot;);
+}
+</pre>
+</li>
+
+<li><p>To get all available sensor types, use the <span style="font-family: Courier New,Courier,monospace">getAvailableSensors()</span> method:</p>
+
+<pre class="prettyprint">var sensors = tizen.sensorservice.getAvailableSensors();
+console.log(&quot;Available sensor: &quot; + sensors.toString());
+</pre>
+</li>
+
+<li><p>Obtain the <span style="font-family: Courier New,Courier,monospace">Sensor</span> 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 <span style="font-family: Courier New,Courier,monospace">getDefaultSensor()</span> method of the <span style="font-family: Courier New,Courier,monospace">SensorService</span> 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 <span style="font-family: Courier New,Courier,monospace">start()</span> method:</p>
+
+<pre class="prettyprint">var proximitySensor = tizen.sensorservice.getDefaultSensor(&quot;PROXIMITY&quot;);
+
+function onsuccessCB()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The proximity sensor started successfully.&quot;);
+}
+
+proximitySensor.start(onsuccessCB);</pre>
+</li>
+
+<li><p>To get data from the sensor, use the appropriate method of the sensor object. For example, for the <span style="font-family: Courier New,Courier,monospace">LightSensor</span> (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 <span style="font-family: Courier New,Courier,monospace">getLightSensorData()</span> method:</p>
+
+<pre class="prettyprint">var lightSensor = tizen.sensorservice.getDefaultSensor(&quot;LIGHT&quot;);
+
+function onGetSuccessCB(sensorData)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;light level: &quot; + sensorData.lightLevel);
+}
+
+function onsuccessCB()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;sensor started&quot;);
+&nbsp;&nbsp;&nbsp;lightSensor.getLightSensorData(onGetSuccessCB);
+&nbsp;&nbsp;&nbsp;lightSensor.stop();
+}
+
+lightSensor.start(onsuccessCB);
+</pre>
+</li>
+
+<li><p>To disable the sensor when it is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">stop()</span> method of the <span style="font-family: Courier New,Courier,monospace">Sensor</span> interface:</p>
+<pre class="prettyprint">proximitySensor.stop(); </pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Sensor Data Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<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>
+
+<ol>
+
+<li>Define an event handler for sensor data changes by implementing the <span style="font-family: Courier New,Courier,monospace">SensorDataSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#SensorDataSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#SensorDataSuccessCallback">wearable</a> applications):
+<pre class="prettyprint">function onchangedCB(sensorData)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;value of pressure is : &quot; + sensorData.pressure);
+}
+</pre>
+</li>
+
+<li>Register a change listener to be called when the sensor data changes.
+<p>To register a  change listener, use the <span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">Sensor</span> interface (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).</p>
+<p>Whenever the sensor readout changes, the registered event handler is called and a <span style="font-family: Courier New,Courier,monospace">SensorData</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#SensorData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#SensorData">wearable</a> applications) is passed to the listener.</p>
+<pre class="prettyprint">var proximitySensor = tizen.sensorservice.getDefaultSensor(&quot;PROXIMITY&quot;);
+
+function onsuccessCB()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;proximity sensor start&quot;);
+}
+
+function onchangedCB(sensorData)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;proximity distance : &quot; + sensorData.proximityState);
+}
+
+proximitySensor.setChangeListener(onchangedCB);
+proximitySensor.start(onsuccessCB);</pre>
+</li>
+
+<li>To stop receiving notifications on sensor data changes, use the <span style="font-family: Courier New,Courier,monospace">unsetChangeListener()</span> method of the Sensor interface.
+
+<pre class="prettyprint">proximitySensor.unsetChangeListener();</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
new file mode 100644 (file)
index 0000000..991fcf7
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
@@ -0,0 +1,283 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Providing Information about the Device Display, Network, Storage, and Other Capabilities</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
+               <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+                  <p class="toc-title">Content</p>
+        <ul class="toc">
+            <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>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li>
+                       <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>                         
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>System Information: Providing Information about the Device Display, Network, Storage, and Other Capabilities</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can obtain information about the device properties.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">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. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <h2>Warm-up</h2>
+  <p>Become familiar with the System Information API basics by learning about:</p>
+  <ul>
+   <li><a href="#retrieve">Retrieving a Device Capability</a> <p>Get the entire capability of the device.</p></li>
+   <li><a href="#state">Retrieving the Current State of a Property</a> <p>Get the current value of the power and cellular network properties and use the values.</p></li>
+   <li><a href="#memory">Retrieving the Memory State</a> <p>Get the total and available amount of memory on the device.</p></li>
+   <li><a href="#orientation">Retrieving and Monitoring the Device Orientation</a> <p>Check the current device orientation and monitor its changes.</p></li>    
+   <li><a href="#receive">Receiving Notifications on Property Value Changes</a> <p>Receive notifications when the power property value changes.</p></li>
+  </ul>
+  <h2>Task</h2>
+  <p>In the <a href="task_systeminfo_w.htm">System Information</a> task, we will walk through how to access and use system information in your application.</p>
+   
+ <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+    <!-- Folds -->
+    <ul class="devicespecifications">
+
+    <li>
+            <div class="devicespec-tit">
+                <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving a Device Capability</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+            <p>Learning how to get a capability of the device is a basic application development skill:</p>
+  <ol>
+   <li>
+    <p>To get a specific capability of the device, use the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method:</p>
+    <pre class="prettyprint">var barometer = tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/sensor.barometer&quot;);
+console.log(&quot; Barometer = &quot; + barometer);</pre>
+   </li>
+  </ol>
+
+   <table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">The <span style="font-family: Courier New,Courier,monospace">getCapabilities()</span> method has been deprecated since Tizen 2.3. Use the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method instead.</td>
+     </tr>
+    </tbody>
+   </table>
+
+  <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>
+
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="state" name="state" class="items-tit-h2">Retrieving the Current State of a Property</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">       
+                               
+            <p>Learning how to retrieve information about the property states is a basic application development skill:</p>
+  <ol>
+   <li> <p>To check the current state of the property, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method. </p> <p>The first method parameter must be of the <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertyId</span> type (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertyId">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertyId">wearable</a> applications). For the available values, see the <a href="../../../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm#property">Available properties</a> table.</p> <pre class="prettyprint">
+/* Retrieve the battery property */
+tizen.systeminfo.getPropertyValue(&quot;BATTERY&quot;, onPowerSuccessCallback);
+
+/* Retrieve the cellular network property */
+tizen.systeminfo.getPropertyValue(&quot;CELLULAR_NETWORK&quot;, 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);
+
+&nbsp;&nbsp;&nbsp;/* Check whether the device is charging */
+&nbsp;&nbsp;&nbsp;var charging = battery.isCharging;
+}
+</pre> </li>
+   <li> <p>Retrieve the current states of a specific device property using the <span style="font-family: Courier New,Courier,monospace">getPropertyValueArray()</span> method. For example, you can check the state of SIM cards, which are mounted in the Tizen device.</p>
+
+   <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;}
+}
+
+tizen.systeminfo.getPropertyValueArray(&quot;SIM&quot;, successCallback);
+</pre> </li>
+
+<li> <p>Retrieve the number of system property information using the <span style="font-family: Courier New,Courier,monospace">getCount()</span> 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; + tizen.systeminfo.getCount(&quot;SIM&quot;));</pre> </li>
+  </ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="memory" name="memory" class="items-tit-h2">Retrieving the Memory State</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p>Learning how to get the memory status of the device is a basic application development skill:</p>
+  <ul class="ul">
+   <li><p>To get the total amount of system memory, use the <span style="font-family: Courier New,Courier,monospace">getTotalMemory()</span> method:</p>
+
+   <pre class="prettyprint">console.log(&quot;The total memory size is &quot; + tizen.systeminfo.getTotalMemory() + &quot; bytes.&quot;);</pre></li>
+
+   <li><p>To get the available amount of system memory, use the <span style="font-family: Courier New,Courier,monospace">getAvailableMemory()</span> method:</p>
+
+   <pre class="prettyprint">console.log(&quot;The available memory size is &quot; + tizen.systeminfo.getAvailableMemory() + &quot; bytes.&quot;);</pre></li>
+  </ul>
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="orientation" name="orientation" class="items-tit-h2">Retrieving and Monitoring the Device Orientation</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+  <p>Learning how to retrieve information about the device orientation is a basic mobile application development skill:</p> 
+  
+
+  <ol> 
+   <li> <p>To retrieve the current orientation of the device, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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) and query the <span style="font-family: Courier New,Courier,monospace">DEVICE_ORIENTATION</span> property:</p>
+<pre class="prettyprint">
+function onDeviceOrientation(deviceOrientation)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The device orientation is now: &quot; + deviceOrientation.status);
+}
+tizen.systeminfo.getPropertyValue(&quot;DEVICE_ORIENTATION&quot;, onDeviceOrientation);
+</pre> </li> 
+
+   <li>The user can rotate the device and change its orientation. To receive notifications about the orientation changes, use the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface:
+<pre class="prettyprint">
+var orientationListenerId;
+orientationListenerId = tizen.systeminfo.addPropertyValueChangeListener(&quot;DEVICE_ORIENTATION&quot;, onDeviceOrientation);
+</pre> </li> 
+
+   <li> <p>To stop receiving change notifications, use the <span style="font-family: Courier New,Courier,monospace">removePropertyValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface:</p> 
+<pre class="prettyprint">
+tizen.systeminfo.removePropertyValueChangeListener(orientationListenerId);
+</pre> </li> 
+  </ol> 
+            </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Property Value Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+            <p>Learning how to receive notifications on property value changes is a basic application development skill:</p>
+  <ol>
+   <li> <p>Register a <span style="font-family: Courier New,Courier,monospace">SystemInfoPropertySuccessCallback</span> event handler (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">wearable</a> applications) for the property value changes using the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> 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).</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);
+}
+
+tizen.systeminfo.addPropertyValueChangeListener(&quot;MEMORY&quot;, successCallback);</pre>
+<p>The method returns a watch identifier, which can be used to unregister the event handler.</p> </li>
+   <li> <p>In the success event handler of the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method, define the notification event actions. </p> <p>In the following example, a warning about the low battery is logged to the console.</p> <pre class="prettyprint">
+/* Trigger a notification */
+function onSuccessCallback(battery)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Low battery: &quot; + battery.level);
+}
+
+tizen.systeminfo.addPropertyValueChangeListener(&quot;BATTERY&quot;, onSuccessCallback);
+</pre> </li>
+   <li> <p>To unregister the event handler, use <span style="font-family: Courier New,Courier,monospace">removePropertyValueChangeListener()</span> method with the watch identifier returned from the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method.</p> <p>In the following example, the event handler is unregistered 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);
+}
+
+var id = tizen.systeminfo.addPropertyValueArrayChangeListener(&quot;SIM&quot;, successCallback);
+</pre> </li>
+  </ol>
+              </div>
+        </li>
+
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
new file mode 100644 (file)
index 0000000..18eadca
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
@@ -0,0 +1,194 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Setting: Providing System Setting Functionality</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#wall">Managing the Device Wallpapers</a></li>
+                       <li><a href="#tone">Managing Ringtones and Notification Tones</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/system_setting_w.htm">System Setting Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">System Setting API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">System Setting API for Wearable Web</a></li>                          
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>System Setting: Providing System Setting Functionality</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can access the device&#39;s settings for the home screen and lock screen wallpaper, incoming call ringtone, and email notification tone.</p>
+
+           <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The System Setting API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>The System Setting API is supported on the Tizen mobile Emulator and partly supported on the Tizen wearable Emulator (only the home screen and incoming call features).</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<h2>Warm-up</h2>
+<p>Become familiar with the System Setting API basics by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#wall">Managing the Device Wallpapers</a> <p>Set the wallpaper of the home screen and the lock screen.</p></li>
+   <li><a class="opensection" href="#tone">Managing Ringtones and Notification Tones</a> <p>Set the ringtone for incoming calls and the tone for email notifications.</p></li>
+ </ul>
+ 
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="wall" name="wall" class="items-tit-h2">Managing the Device Wallpapers</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<p>Learning how to set the device wallpaper and get information about it is a basic application development skill:</p> 
+  <ol> 
+   <li><p>To set the specified image as the lock screen wallpaper, use the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> 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;try 
+&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;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;successCB, errorCB);
+&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;});
+}
+</pre> </li> 
+   <li><p>To get the current system setting information for the home screen wallpaper, use the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> 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;}
+}
+</pre> </li> 
+  </ol> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="tone" name="tone" class="items-tit-h2">Managing Ringtones and Notification Tones</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">                    
+                               
+  <p>Learning how to set ringtones and notification tones is a basic application development skill:</p> 
+  <ol> 
+  <li><p>To set the specified audio file as the notification tone for emails, use the <span style="font-family: Courier New,Courier,monospace">setProperty()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemSettingManager</span> 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):</p>
+<pre class="prettyprint">
+function onSet()
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;It&#39;s set&quot;);
+}
+
+tizen.filesystem.resolve(&quot;music/Favorite track.mp3&quot;, function(musicFile) 
+{
+&nbsp;&nbsp;&nbsp;try 
+&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;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;onSet);
+&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;}
+});
+</pre> </li> 
+       <li><p>To get the current system setting information for the incoming call ringtone, use the <span style="font-family: Courier New,Courier,monospace">getProperty()</span> method:</p>
+<pre class="prettyprint">
+function onGet(value)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Current setting option value is: &quot; + value);
+}
+
+try 
+{
+&nbsp;&nbsp;&nbsp;tizen.systemsetting.getProperty(&quot;INCOMING_CALL&quot;, onGet);
+}
+catch (error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Error: &quot; + error);
+}
+</pre> </li> 
+  </ol> 
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
new file mode 100644 (file)
index 0000000..9976b27
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Getting System Information and Managing Devices</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#System">System API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#System">System API for Wearable Web</a></li>                         
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>System: Getting System Information and Managing Devices</h1>
+
+  <p>The system tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>  
+   <li><a href="ham_tutorial_w.htm">Human Activity Monitor: Retrieving User Activity Data from the Various Device Sensors</a> <p>Demonstrates how you can monitor user activity.</p></li>
+   <li><a href="power_tutorial_w.htm">Power: Controlling Power Resources</a> <p>Demonstrates how you can manage the minimum power state of a power resource.</p></li>
+   <li><a href="sensor_tutorial_w.htm">Sensor: Getting Sensor Data from the Various Device Sensors</a> <p>Demonstrates how you can use the data from the device sensors.</p></li>
+   <li><a href="system_info_tutorial_w.htm">System Information: Providing Information about the Device Display, Network, Storage, and Other Capabilities</a> <p>Demonstrates how you can retrieve and monitor device information and state.</p></li>
+   <li><a href="system_setting_tutorial_w.htm">System Setting: Providing System Setting Functionality</a> <p>Demonstrates how you can manage ringtone and wallpaper settings.</p></li>
+   <li><a href="time_tutorial_w.htm">Time: Exposing Information about Date, Time, and Time Zones</a> <p>Demonstrates how you can manage date and time information.</p></li>   
+  </ul>
+
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+   <li><a href="fm_radio_tutorial_w.htm">FM Radio: Listening to the FM Radio</a> <p>Demonstrates how you can manage a FM radio on the device.</p></li>  
+   <li><a href="web_setting_tutorial_w.htm">Web Setting: Managing the Setting States of the Web View</a> <p>Demonstrates how you can manage Web view properties.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm b/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
new file mode 100644 (file)
index 0000000..e6b511a
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
@@ -0,0 +1,203 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#info">Displaying Device-specific Information</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li> 
+                       <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>                         
+               </ul>
+       </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 SDK, demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">System Information</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">SystemInfo</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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 class="figure">Figure: Systeminfo screens</p> 
+  <p style="text-align: center;"><img alt="Systeminfo screens" src="../../../images/systeminfo_sd.png" /></p> 
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep"> 
+   <li>index.html Source File 
+    <ol> 
+     <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 <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;
+</pre> </li> 
+     <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the main screen contains a list component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_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;
+</pre> </li> 
+ 
+    </ol> </li> 
+  </ol> 
+  <h3 id="information" name="information">Defining the Information Screen</h3>
+  <ol class="tutorstep"> 
+   <li>index.html Source File 
+    <ol> 
+     <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 <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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;
+</pre> </li> 
+     <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the information screen contains a list widget 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;/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_info_tutorial_w.htm#state">Retrieving the Current State of a Property</a>.</p> 
+  
+
+  
+  <h3 id="list" name="list">Defining the List Item Types</h3>
+  <ol class="tutorstep"> 
+   <li>main.js Source File <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 class="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;;
+}</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;;
+}</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;;
+}</pre> </li> 
+    </ul> </li> 
+  </ol> 
+  <h3 id="display" name="display">Displaying System Property Details</h3>
+  <p>The system property retrieval is implemented in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p> 
+  <p>If the user clicks a system property on the main screen, the <span style="font-family: Courier New,Courier,monospace;">getSystemProperty()</span> 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 class="tutorstep"> 
+   <li>Displaying the Battery Property Values <p>The <span style="font-family: Courier New,Courier,monospace;">onBatterySuccess()</span> 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 <span style="font-family: Courier New,Courier,monospace;">changePage()</span> 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;;
+
+&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;));
+
+&nbsp;&nbsp;&nbsp;/* Screen change */
+&nbsp;&nbsp;&nbsp;$.mobile.changePage(&quot;#info&quot;);
+}</pre> </li> 
+   <li>Displaying the Storage Property Values <p>The <span style="font-family: Courier New,Courier,monospace;">onStorageSuccess()</span> event handler determines the screen title for the storage property information screen, and defines a list. The list contains the total, available, and removable storage space, and the storage type (all using list items with a 2-line format) for each storage found in the device, and a divider list item to identify each storage.</p> <p>The <span style="font-family: Courier New,Courier,monospace;">changePage()</span> method moves the application from the main screen to the information screen containing the defined list.</p> <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;, 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;, Math.floor(storages[i].availableCapacity / 1000000) + &quot; MB&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Removable&quot;, (storages[i].isRemoveable == true ? &quot;Yes&quot; : &quot;No&quot;));
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;$.mobile.changePage(&quot;#info&quot;);
+}</pre> </li> 
+   <li>Displaying the Display Property Values <p>The <span style="font-family: Courier New,Courier,monospace;">onDisplaySuccess()</span> event handler determines the screen title for the display property information screen, and defines a list containing the display details (using list items with 1- and 2-line formats). In addition, the details are divided into 4 sections by adding divider list items to the list.</p> <p>The <span style="font-family: Courier New,Courier,monospace;">changePage()</span> method moves the application from the main screen to the information screen containing the defined list.</p> <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;);
+}</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
new file mode 100644 (file)
index 0000000..02ae6d3
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
@@ -0,0 +1,287 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Exposing Information about Date, Time, and Time Zones</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
+               <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Retrieving_Date">Retrieving Date and Time</a></li>
+                       <li><a href="#Retrieving_Local_Date">Retrieving the Local Date and Time Format</a></li>
+                       <li><a href="#Calculating_Date">Calculating Date and Time Information</a></li>
+                       <li><a href="#Monitoring_Changes">Retrieving Time Change Notifications</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/time_w.htm">Time Guide</a></li>
+                       <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>                             
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Time: Exposing Information about Date, Time, and Time Zones</h1>
+<div class="cont"><div class="static-cont">
+       
+         <p>This tutorial demonstrates how you can manage date and time information and perform different calculations and other tasks related to date and time.</p> 
+         
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <h2>Warm-up</h2> 
+  <p>Become familiar with the Time API basics by learning about:</p> 
+  <ul> 
+   <li><a class="opensection" href="#Retrieving_Date">Retrieving Date and Time</a> <p>Retrieve the current date and time or all available time zones, and check whether a specific year is a leap year.</p></li> 
+   <li><a class="opensection" href="#Retrieving_Local_Date">Retrieving the Local Date and Time Format</a> <p>Get the currently used time and date formats.</p></li> 
+   <li><a class="opensection" href="#Calculating_Date">Calculating Date and Time Information</a> <p>Perform calculations and comparisons with date and time data.</p></li> 
+   <li><a class="opensection" href="#Monitoring_Changes">Retrieving Time Change Notifications</a> <p>Monitor the time and time zone changes performed by the user.</p></li>
+
+  </ul> 
+            
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Retrieving_Date" name="Retrieving_Date" class="items-tit-h2">Retrieving Date and Time</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">            
+                               
+                       <p>Learning how to handle date and time in your application is a basic locale management skill:</p> 
+  <ol> 
+   <li> <p>To get the current date and time, use the <span style="font-family: Courier New,Courier,monospace">getCurrentDateTime()</span> method, which returns a <span style="font-family: Courier New,Courier,monospace">TZDate</span> object:</p> <pre class="prettyprint">
+var current_dt = tizen.time.getCurrentDateTime();
+console.log(&quot;Current time / date is &quot; + current_dt.toLocaleString());
+</pre> 
+   </li> 
+   <li>To handle time zone information: 
+    <ol> 
+     <li> <p>To retrieve the current time zone, use the <span style="font-family: Courier New,Courier,monospace">getLocalTimezone()</span> method:</p> <pre class="prettyprint">
+console.log(&quot;The current time zone is &quot; + 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> 
+     <li> <p>To get the number of available time zones, use the <span style="font-family: Courier New,Courier,monospace">getAvailableTimezones()</span> method:</p> <pre class="prettyprint">
+var tzids = tizen.time.getAvailableTimezones();
+console.log(&quot;The device supports &quot; + tzids.length + &quot; time zones.&quot;);
+</pre> </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 <span style="font-family: Courier New,Courier,monospace">isLeapYear()</span> 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;);
+</pre> 
+   <p> The <span style="font-family: Courier New,Courier,monospace">getFullYear()</span> method returns the year (4 digits) of the <span style="font-family: Courier New,Courier,monospace">TZDate</span> object. </p> 
+   </li> 
+
+  </ol>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Retrieving_Local_Date" name="Retrieving_Local_Date" class="items-tit-h2">Retrieving the Local Date and Time Format</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">    
+                               
+                       <p>Learning how to handle date and time formats in your application is a basic locale management skill:</p> 
+  <ol> 
+   <li> <p>To check the date format, use the <span style="font-family: Courier New,Courier,monospace">getDateFormat()</span> method:</p> <pre class="prettyprint">
+var dateFormat = tizen.time.getDateFormat();
+console.log(&quot;Date format is &quot; + dateFormat);
+</pre> </li> 
+   <li> <p>To check the time format, use the <span style="font-family: Courier New,Courier,monospace">getTimeFormat()</span> method:</p> <pre class="prettyprint">
+var timeFormat = tizen.time.getTimeFormat();
+console.log(&quot;Time format is &quot; + timeFormat);
+</pre> </li> 
+  </ol>  
+                       </div>
+               </li>
+       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Calculating_Date" name="Calculating_Date" class="items-tit-h2">Calculating Date and Time Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">    
+                               
+                       <p>Learning how to calculate and compare time and date information is a basic time management skill:</p> 
+  <ol> 
+   <li> <p>To calculate the duration difference between 2 date or time events, use the <span style="font-family: Courier New,Courier,monospace">difference()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeDuration">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeDuration">wearable</a> applications):</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;);
+else if (diff.length == 0)
+&nbsp;&nbsp;&nbsp;console.log(&quot;Event1 is as long as Event2.&quot;);
+else
+&nbsp;&nbsp;&nbsp;console.log(&quot;Event1 is shorter than Event2.&quot;);
+</pre> 
+    <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The unit of the returned <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> 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.</td> 
+      </tr> 
+     </tbody> 
+    </table> </li> 
+   <li> <p> To compare 2 <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> objects for equality, use the <span style="font-family: Courier New,Courier,monospace">equalsTo()</span> method: </p> <pre class="prettyprint">
+var d1 = new tizen.TimeDuration(60, &quot;MINS&quot;);
+var d2 = new tizen.TimeDuration(1, &quot;HOURS&quot;);
+var ret = d1.equalsTo(d2); /* Returns true */
+</pre> </li> 
+   <li> <p> To check whether 1 <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object is shorter than another, use the <span style="font-family: Courier New,Courier,monospace">lessThan()</span> 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 ret = d1.lessThan(d2); /* Returns true */
+</pre> </li> 
+   <li> <p> To check whether 1 <span style="font-family: Courier New,Courier,monospace">TimeDuration</span> object is longer than another, use the <span style="font-family: Courier New,Courier,monospace">greaterThan()</span> 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 ret = d1.greaterThan(d2); /* Returns true */
+</pre> </li> 
+   <li> <p>To add a predefined time to the current date, use the <span style="font-family: Courier New,Courier,monospace">addDuration()</span> 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;);
+</pre> <p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li> 
+  </ol>  
+                       </div>
+               </li>
+
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Monitoring_Changes" name="Monitoring_Changes" class="items-tit-h2">Retrieving Time Change Notifications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+  <p>Learning how to get notifications when the user changes the time or time zone allows you to react to those changes in your application:</p>
+  <ol>
+   <li> <p>To monitor time or time zone changes, define the event handlers:</p>
+    <ul class="ul">
+     <li> <p>The time change event handler is called when the user adjusts the clock:</p>
+<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; + current_dt.toLocaleString());
+&nbsp;&nbsp;&nbsp;}
+}
+</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;// New time zone can be retrieved through tizen.time.getLocalTimezone()
+&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;}
+}
+</pre> </li>
+    </ul> </li>
+   <li><p>When the event handlers are defined, register them as listeners:</p>
+       <ul class="ul">
+     <li> <p>Register the time change listener using the <span style="font-family: Courier New,Courier,monospace">setDateTimeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a> applications):</p>
+<pre class="prettyprint">
+tizen.time.setDateTimeChangeListener(timeChangedCallback);
+</pre></li>
+    <li> <p>Register the time zone change listener using the <span style="font-family: Courier New,Courier,monospace">setTimezoneChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
+<pre class="prettyprint">
+tizen.time.setTimezoneChangeListener(timezoneChangedCallback);
+</pre> </li>
+    </ul>
+   </li>
+
+   <li><p>To stop receiving the notifications, unregister the listeners:</p>
+       <ul class="ul">
+     <li> <p>To unregister the time change listener, use the <span style="font-family: Courier New,Courier,monospace">unsetDateTimeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
+<pre class="prettyprint">
+tizen.time.unsetDateTimeChangeListener();
+</pre></li>
+    <li> <p>To unregister the time zone change listener, use the <span style="font-family: Courier New,Courier,monospace">unsetTimezoneChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
+<pre class="prettyprint">
+tizen.time.unsetTimezoneChangeListener();
+</pre> </li>
+    </ul>
+   </li>
+
+  </ol>
+                       </div>
+               </li>
+               
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
new file mode 100644 (file)
index 0000000..ce9f341
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
@@ -0,0 +1,142 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Setting: Managing the Setting States of the Web View</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#set">Setting a User Agent for a Running Application</a></li>
+                       <li><a href="#delete">Deleting Web View Cookies</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/system/web_setting_w.htm">Web Setting Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html">Web Setting API for Mobile Web</a></li>                    
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Web Setting: Managing the Setting States of the Web View</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage Web view properties.</p>
+
+           <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Web Setting API basics by learning about:</p>
+  <ul>
+   <li><a href="#set">Setting a User Agent for a Running Application</a> <p>Set a Web view user agent string.</p></li>
+   <li><a href="#delete">Deleting Web View Cookies</a> <p>Delete Web view cookies.</p></li>
+  </ul>
+           
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="set" name="set" class="items-tit-h2">Setting a User Agent for a Running Application</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+                       <p>Learning how to set a user agent string to perform tasks is a basic Web setting management skill:</p> 
+  <ol> 
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">setUserAgentString()</span> 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; + navigator.userAgent);
+}
+
+/* Set a user agent string */
+var userAgent = &quot;CUSTOM_USER_AGENT_STRING&quot;;
+tizen.websetting.setUserAgentString(userAgent, successCallback);
+</pre> </li> 
+  </ol>
+  </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="delete" name="delete" class="items-tit-h2">Deleting Web View Cookies</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+                       <p>Learning how to delete Web view cookies is a basic Web setting management skill:</p> 
+  <ol> 
+   <li><p>Use the <span style="font-family: Courier New,Courier,monospace">removeAllCookies()</span> 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;);
+}
+
+tizen.websetting.removeAllCookies(CookiesRemovedSuccessCallback);
+</pre> </li> 
+  </ol> 
+  </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
new file mode 100644 (file)
index 0000000..b837403
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
@@ -0,0 +1,246 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing the Basic Tizen Features</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#filter">Creating Attribute Filters</a>
+            </li>
+            <li><a href="#range">Creating Attribute Range Filters</a>
+            </li>
+            <li><a href="#composite">Creating Composite Filters</a>
+            </li>
+            <li><a href="#use_modes">Using Sorting Modes</a>
+            </li>
+                       <li><a href="#use_handlers">Using the Generic Event Handlers</a>
+                       </li>
+            <li><a href="#make">Making Complex Queries Using Filters</a>
+            </li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen Guide</a></li>
+                       <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>                            
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tizen: Managing the Basic Tizen Features</h1>
+ <div class="cont"><div class="static-cont">
+ 
+<p>This tutorial demonstrates how you can utilize generic Tizen Device API features, such as filters, sorting modes, and generic event handlers.</p>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Tizen API basics by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#filter">Creating Attribute Filters</a> <p>Create attribute filters to limit data query results.</p></li>
+   <li><a class="opensection" href="#range">Creating Attribute Range Filters</a> <p>Create attribute range filters to limit data query results.</p></li>
+   <li><a class="opensection" href="#composite">Creating Composite Filters</a> <p>Create composite filters to limit data query results.</p></li>
+   <li><a class="opensection" href="#use_modes">Using Sorting Modes</a> <p>Use sorting modes to organize data query results.</p></li>
+   <li><a class="opensection" href="#use_handlers">Using the Generic Event Handlers</a> <p>Utilize generic event handlers to make application creation easier.</p></li>    
+   <li><a class="opensection" href="#make">Making Complex Queries Using Filters</a> <p>Create complex queries by combining filters.</p></li>
+  </ul>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="filter" name="filter" class="items-tit-h2">Creating Attribute Filters</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p> Learning how to create attribute filters allows you effectively incorporate query methods in your application:</p>
+  <ol>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> filter (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a> applications) is used to filter the search results based on an attribute value. In this example, the filter finds contacts, with the first name Chris, from the default address book.</p>
+
+   <p>Create the filter with the <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> 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;);</pre> </li>
+     <li><p>Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 (<span style="font-family: Courier New,Courier,monospace">firstNameFilter</span>) you created is included as a parameter.</p> <pre class="prettyprint">
+tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter);</pre> </li>
+    </ol>
+       
+</div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="range" name="range" class="items-tit-h2">Creating Attribute Range Filters</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p> Learning how to use attribute range filters allows you effectively incorporate query methods in your application:</p>
+  <ol>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeRangeFilter</span> filter (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a> applications)is used to search for results based on a range of attribute values. In this example, the filter finds all events starting on a defined day from the calendar.</p>
+<p>Create the filter with the <span style="font-family: Courier New,Courier,monospace">AttributeRangeFilter</span> constructor. Specify the attribute, and the start and end points of the value range.</p> <pre class="prettyprint">/* Use the startDate attribute with a range that starts today and ends in 1 day */
+/* (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 dateRangeFilter = new tizen.AttributeRangeFilter(&quot;startDate&quot;, today_begin, today_end);</pre> </li>
+     <li> <p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 (<span style="font-family: Courier New,Courier,monospace">dateRangeFilter</span>) you created is included as a parameter. </p> <pre class="prettyprint">
+tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;).find(successCB, errorCB, dateRangeFilter);</pre> </li>
+    </ol>
+ </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="composite" name="composite" class="items-tit-h2">Creating Composite Filters</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p> Learning how to use composite filters allows you effectively incorporate query methods in your application:</p>
+  <ol>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> filter (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a> applications) is used to search for results based on a set of filters. In this example, the filter finds contacts, whose first name contains Chris and last name is Smith, from the default address book.</p>
+<p>Create the filter with the <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> 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;);
+
+/* Create an attribute filter based on the lastName attribute */
+var lastNameFilter = new tizen.AttributeFilter(&quot;name.lastName&quot;, &quot;EXACTLY&quot;, &quot;Smith&quot;);
+
+/* Create a composite filter based on the intersection of these 2 filters */
+/* (intersection means that both filters must match for the contact to be included in the results) */
+var nameCompositeFilter = new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [firstNameFilter, lastNameFilter]);</pre> </li>
+     <li><p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 (<span style="font-family: Courier New,Courier,monospace">nameCompositeFilter</span>) you created is included as a parameter.</p> <pre class="prettyprint">
+tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilter);</pre> </li>
+    </ol>
+  </div>
+        </li>
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="use_modes" name="use_modes" class="items-tit-h2">Using Sorting Modes</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+  <p> Learning how to use sorting modes allows you effectively incorporate query methods in your application:</p>
+  <ol>
+   <li><p>The <span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a> applications) is created to sort the search results. In this example, it is used to sort contacts in the device address book in ascending order, based on their first name.</p>
+<p>Create the sort order with the <span style="font-family: Courier New,Courier,monospace">SortMode()</span> 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;);</pre> </li>
+     <li><p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> 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 <span style="font-family: Courier New,Courier,monospace">find()</span> method is defined as <span style="font-family: Courier New,Courier,monospace">null</span>, which means that the method retrieves all contacts in the address book.</p> <pre class="prettyprint">
+tizen.contact.getDefaultAddressBook().find(successCB, errorCB, null, sortMode);</pre> </li>
+    </ol>
+ </div>
+        </li>
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="use_handlers" name="use_handlers" class="items-tit-h2">Using the Generic Event Handlers</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+<p>Learning how to use generic, predefined event handlers allows you handle application operations and errors efficiently:</p> 
+  <ol> 
+   <li> <p>The generic <span style="font-family: Courier New,Courier,monospace;">onSuccess()</span> event handler of the <span style="font-family: Courier New,Courier,monospace">SuccessCallBack</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</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 <span style="font-family: Courier New,Courier,monospace;">kill()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a> applications).</p> <pre class="prettyprint">function onSuccess() 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Application terminated successfully&quot;);
+}
+
+tizen.application.kill(ctxIDToKill, onSuccess);</pre> </li> 
+   <li> <p> The generic <span style="font-family: Courier New,Courier,monospace;">onError()</span> event handler of the <span style="font-family: Courier New,Courier,monospace">ErrorCallBack</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a> applications) can be used with methods that only require an error as an input parameter in the error callback.</p> <p>In this example, the event handler is used to handle possible errors with the <span style="font-family: Courier New,Courier,monospace;">getCalendars()</span> 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 errorCallback(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;The following error occurred: &quot; + error.name);
+}
+
+tizen.calendar.getCalendars(&quot;EVENT&quot;, calendarListCallback, errorCallback); 
+</pre> </li> 
+  </ol> 
+               </div>
+               </li>           
+        <li>
+            <div class="devicespec-tit">
+ <h2 id="make" name="make" class="items-tit-h2">Making Complex Queries Using Filters</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+ 
+  <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><span style="font-family: Courier New,Courier,monospace">&quot;where ((type=&#39;VIDEO&#39; OR type=&#39;IMAGE&#39;) AND title like &#39;%special%&#39;)&quot;</span></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>
+  <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;);
+
+&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;);</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 = new tizen.CompositeFilter(&quot;UNION&quot;, [typeVideoFilter, typeImageFilter]);</pre> </li>
+   <li> <p>Create another attribute filter that includes content containing the word &quot;special&quot; in its title:</p> <pre class="prettyprint">&nbsp;&nbsp;&nbsp;var titleFilter = new tizen.AttributeFilter(&quot;title&quot;, &quot;CONTAINS&quot;, &quot;special&quot;);</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 = new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [typeFilter, titleFilter]);</pre> </li>
+   <li> <p>Call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the Content API&#39;s <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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) to retrieve the media items that match the final filter:</p> 
+   <pre class="prettyprint">&nbsp;&nbsp;&nbsp;tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
+}</pre> <p>The <span style="font-family: Courier New,Courier,monospace;">findMediaContentsCallback()</span> event handler returns the query result.</p> </li>
+  </ol>
+    </div>
+        </li>
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
new file mode 100644 (file)
index 0000000..acdff01
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Exploiting Tizen Features</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/web/tizen/guides_tizen_w.htm">Guide to Tizen Features</a></li> 
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Exploiting Tizen Features</h1>
+
+<p>Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials cover detailed code snippets to help you see how to write the required code in practice.</p>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"> 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 <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">System Information</span> 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></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>Select the feature you are interested in and see how you can implement its various functionalities into your application.</p>
+<p>The following tutorials demonstrate features provided by the Tizen Web Device API: </p>
+
+<ul>
+       <li><a href="tizen/tizen_tutorials_w.htm">Tizen: Managing the Basic Tizen Features</a>
+       <p>Demonstrates how you can filter data and use generic event handlers.</p></li>
+       <li><a href="application/app_tutorials_w.htm">Application: Controlling Your Applications</a>
+       <p>Demonstrates how you can configure application properties, and manage application data, packages, and alarms.</p></li>
+       <li><a href="content/content_tutorials_w.htm">Content: Getting and Handling Content</a>
+       <p>Demonstrates how you can manage files, playlists, and downloads, and view file details.</p></li>
+       <li><a href="input_output/io_tutorials_w.htm">Input/Output: Processing Input and Output</a>
+       <p>Demonstrates how you can manage input and output data in your applications.</p></li>
+       <li><a href="multimedia/multimedia_tutorials_w.htm">Multimedia: Controlling and Playing Multimedia</a>
+       <p>Demonstrates how you can manage the device sound levels and media keys.</p></li>
+       <li><a href="system/system_tutorials_w.htm">System: Getting System Information and Managing Devices</a>
+       <p>Demonstrates how you can manage and retrieve information from the device and its sensors.</p></li>
+       <li><a href="ui/ui_tutorials_w.htm">User Interface: Notifying Users of New Application Information</a>
+       <p>Demonstrates how you can manage badges and notifications on the screen.</p></li>
+       <li><a href="communication/comm_tutorials_w.htm">Communication: Connecting to the Network and Communicating with Messages</a> <span style="color: red">in mobile applications only</span>
+       <p>Demonstrates how you can send data to networks and other applications, and receive data back from them.</p></li>     
+       <li><a href="social/social_tutorials_w.htm">Social: Managing Personal Data</a> <span style="color: red">in mobile applications only</span>
+       <p>Demonstrates how you can manage the user&#39;s personal data, such as contacts, calendars, location data, and call and browsing history, on the device.</p></li>             
+</ul>
+
+<p>In addition to the Tizen Web Device API tutorials above, you can implement the following features:</p>
+<ul>
+       <li><a href="dynamic/dynamic_tutorial_w.htm">Dynamic Box: Taking Advantage of the Dynamic Box</a> <p>Demonstrates how you can create a Dynamic Box of your Web application.</p></li>
+       <li><a href="uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW): Creating UI Components</a>
+       <p>Demonstrates how you can create and manage various kinds of UI components.</p></li>  
+       <li><a href="service/service_tutorial_w.htm">Service Application: Creating a Service Application</a> <span style="color: red">in wearable applications only</span> <p>Demonstrates how you can create a wearable Web service 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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
new file mode 100644 (file)
index 0000000..5e7eea3
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
@@ -0,0 +1,179 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Badge: Displaying the Notification (Badge) Count on the Home Screen</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#manage">Managing Badges</a></li>
+            <li><a href="#receive">Receiving Notifications on Badge Changes</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/ui/badge_w.htm">Badge Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html">Badge API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">Badge API for Wearable Web</a></li>                           
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Badge: Displaying the Notification (Badge) Count on the Home Screen</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can manage home screen badges.</p>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<h2>Warm-up</h2>
+<p>Become familiar with the Badge API basics by learning about:</p>
+<ul>
+ <li><a class="opensection" href="#manage">Managing Badges</a> <p>Get and set the badge number of the application.</p></li>
+ <li><a class="opensection" href="#receive">Receiving Notifications on Badge Changes</a> <p>Register an event handler for badge changes.</p></li>
+</ul>
+
+ <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+    <!-- Folds -->
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="manage" name="manage" class="items-tit-h2">Managing Badges</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Getting and setting the badge number is a useful UI management skill:</p>
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To perform these operations, your application must have the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</td>
+      </tr>
+     </tbody>
+</table>
+<ol>
+<li><p>Retrieve application identifier using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method:</p>
+<pre class="prettyprint">
+var appId = tizen.application.getCurrentApplication().appInfo.id;</pre> </li>
+<li><p>To check the badge number of the current application, use the <span style="font-family: Courier New,Courier,monospace">getBadgeCount()</span> method of the <span style="font-family: Courier New,Courier,monospace">BadgeManager</span> 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);
+</pre> </li>
+<li><p>To change the badge of the current application, use the <span style="font-family: Courier New,Courier,monospace">setBadgeCount()</span> method:</p>
+<pre class="prettyprint">
+var appId = tizen.application.getCurrentApplication().appInfo.id;
+tizen.badge.setBadgeCount(appId, 82);</pre> </li>
+<li><p>To hide the badge of the current application, use the <span style="font-family: Courier New,Courier,monospace">setBadgeCount()</span> method to set the number to 0:</p>
+<pre class="prettyprint">
+tizen.badge.setBadgeCount(appId, 0);
+</pre>
+</li>
+</ol>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Badge Changes</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+
+<p>Registering a listener for badge count changes to react to new badges and display your badges is a useful UI management skill:</p>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To perform these operations, your application must have the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</td>
+      </tr>
+     </tbody>
+</table>
+
+<ol>
+<li><p>To register an event handler for receiving a notification about badge changes, use the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BadgeManager</span> 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), specifying a list of application IDs:</p>
+<pre class="prettyprint">
+function watcher(appId, count)
+{
+&nbsp;&nbsp;&nbsp;console.log(appId + &#39; badge number were updated : &#39; + count);
+}
+
+tizen.badge.addChangeListener([&quot;BDb5tZJe47.TestSample&quot;], watcher);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">BDb5tZJe47.TestSample</span> is the application ID of the application to monitor. The first argument of the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> 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 <span style="font-family: Courier New,Courier,monospace">removeChangeListener ()</span> method:</p>
+<pre class="prettyprint">
+tizen.badge.removeChangeListener([&quot;BDb5tZJe47.TestSample&quot;]);</pre> </li>
+</ol>
+            </div>
+        </li>
+
+    </ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
new file mode 100644 (file)
index 0000000..cc2e5a4
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
@@ -0,0 +1,232 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Notification: Notifying Users of Application Events</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create">Creating Simple Notifications</a></li>
+                       <li><a href="#progress">Creating Progress Notifications</a></li>
+                       <li><a href="#manage">Managing Notifications</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/tizen/ui/noti_w.htm">Notification Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>                         
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Notification: Notifying Users of Application Events</h1>
+<div class="cont"><div class="static-cont">            
+
+<p>This tutorial demonstrates how you can manage notifications created based on application events.</p>
+
+           <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Notification API basics by learning about:</p>
+  <ul>
+   <li><a href="#create">Creating Simple Notifications</a> <p>Create a simple notification.</p></li>
+   <li><a href="#progress">Creating Progress Notifications</a> <p>Create a progress notification.</p></li>
+   <li><a href="#manage">Managing Notifications</a> <p>Retrieve, update, and remove posted notifications.</p></li>
+  </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating Simple Notifications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+                       <p>Learning how to create status notifications allows you to design interactive applications that provide the user information about their events:</p> 
+  <ol> 
+   <li><p>Define the status notification properties of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">StatusNotificationInit</a> interface:</p> <pre class="prettyprint">
+/* Application control */
+var appControl = 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/jpg&quot;, 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
+};
+</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> parameters means a relative file location defined in the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API. The path is not an absolute file location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (such as <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li> 
+   <li><p>To be able to display the notification, create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">StatusNotification</a> object 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;, notificationDict);
+</pre> </li> 
+   <li><p>To post the notification, use the <span style="font-family: Courier New,Courier,monospace">post()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">NotificationManager</a> interface:</p> <pre class="prettyprint">
+tizen.notification.post(notification);  
+</pre> </li> 
+  </ol>  
+                       </div>
+               </li>   
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="progress" name="progress" class="items-tit-h2">Creating Progress Notifications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+  <p>Learning how to create progress notifications allows you to design interactive applications that inform the user about the progress of an activity:</p>
+  <ol>
+   <li><p>Define the status notification properties of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">StatusNotificationInit</a> dictionary:</p> <pre class="prettyprint">
+/* Application control */
+var appControl = 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/jpg&quot;, 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
+};
+</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> parameters means a file location defined in the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API. The path is not an absolute file location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (such as <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
+   <li><p>To be able to display the notification, create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">StatusNotification</a> object 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;PROGRESS&quot;, &quot;Progress notification&quot;, notificationDict);
+</pre> </li>
+   <li><p>Define a function which uses the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">NotificationManager</a> interface 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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;}
+}
+</pre> </li>
+   <li><p>To post the notification, use the <span style="font-family: Courier New,Courier,monospace">post()</span> method of the <span style="font-family: Courier New,Courier,monospace">NotificationManager</span> 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><pre class="prettyprint">
+tizen.notification.post(notification);
+updateProgressNotification(0);
+</pre> </li>
+  </ol>
+       
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="manage" name="manage" class="items-tit-h2">Managing Notifications</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               
+                       <p>Learning how to manage notifications allows you to design interactive applications that provide the user information about their events:</p> 
+  <ol> 
+   <li><p>To retrieve notifications: </p> 
+    <ol> 
+     <li>To retrieve a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">NotificationManager</a> interface with the notification ID as a parameter:<p></p> <pre class="prettyprint">
+var myId = notification.id;
+var myNotification = tizen.notification.get(myId);    
+</pre> </li> 
+     <li><p>To retrieve all previously posted notifications, use the <span style="font-family: Courier New,Courier,monospace">getAll()</span> method, which returns all the notifications as an array:</p> <pre class="prettyprint">
+var notifications = tizen.notification.getAll();
+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); 
+}</pre> </li> 
+    </ol></li> 
+   <li><p>To update a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method by specifying the updated notification object:</p> <pre class="prettyprint">
+myNotification.content = &quot;My notification&quot;;
+tizen.notification.update(myNotification);    
+</pre> </li> 
+   <li>To remove notifications: 
+    <ol> 
+     <li><p>To remove a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method with the notification ID as a parameter:</p> <pre class="prettyprint">
+tizen.notification.remove(myNotification.id);
+</pre> </li> 
+     <li><p>To remove all notifications previously posted by the current application, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">
+tizen.notification.removeAll();</pre> </li> 
+    </ol></li> 
+  </ol>
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm
new file mode 100644 (file)
index 0000000..d8a20a5
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Notifying Users of New Application Information</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#User Interface">User Interface API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#User Interface">User Interface API for Wearable Web</a></li>                         
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>User Interface: Notifying Users of New Application Information</h1>
+
+       <p>The user interface (UI) tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen Web applications:</p> 
+  <ul> 
+   <li><a href="badge_tutorial_w.htm">Badge: Displaying the Notification (Badge) Count on the Home Screen</a> <p>Demonstrates how you can manage home screen badges.</p></li>
+  </ul>
+  
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+   <li><a href="noti_tutorial_w.htm">Notification: Notifying Users of Application Events</a> <p>Demonstrates how you can manage notifications created based on application events.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm
new file mode 100644 (file)
index 0000000..3d7817a
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm
@@ -0,0 +1,911 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 UI Framework (UIFW): Creating UI Components 
+</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+       <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+                                               <li><a href="#intro">Creating a Simple Application</a></li>
+                                               <li><a href="#application_visual_layout">Managing Pages</a></li>
+                                               <li><a href="#basic_page_routing">Managing Page Routing</a></li>
+                                               <li><a href="#introduction_to_widgets">Managing UI Components</a></li>
+                                               <li><a href="#notes">Creating a Notepad Application</a></li>
+                       </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc"> 
+                       <li><a href="../../../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW) Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Tizen Web UI Framework API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Web UI Framework API for Wearable Web</a></li>                          
+               </ul>
+        </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1 id="tau-introduction">Web UI Framework (UIFW): Creating UI Components</h1>
+<div class="cont"><div class="static-cont">            
+               
+<p>This tutorial demonstrates how you can use the Web UI Framework (UIFW), which provides TAU (Tizen
+Advanced UI Library). TAU is the standard Web UI library for the Tizen platform. It is a collection of UI components that simplify application coding.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Tizen Web UI Framework API basics by learning about:</p>
+<ul>
+       <li><a class="opensection" href="#intro">Creating a Simple Application</a>
+       <p>Create an application with a header and a footer button.</p></li>
+       <li><a class="opensection" href="#application_visual_layout">Managing Pages</a>
+       <p>Use pages to organize your application screens.</p></li>
+       <li><a class="opensection" href="#basic_page_routing">Managing Page Routing</a>
+       <p>Change between multiple application pages.</p></li>
+       <li><a class="opensection" href="#introduction_to_widgets">Managing UI Components</a>
+       <p>Use UI components in your application, and modify their behavior and appearance.</p></li>
+       <li><a class="opensection" href="#notes">Creating a Notepad Application</a>
+       <p>Create an application that allows the user to create and manage notes, and displays the notes on the main page.</p></li>
+</ul>
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note"><p>Some of the functionality shown in the use cases may not work properly in a desktop browser. To fully get the TAU experience, use a real Tizen device or the Emulator from the Tizen SDK.</p>
+</td>
+    </tr>
+   </tbody>
+  </table>
+
+<div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="intro" name="intro" class="items-tit-h2">Creating a Simple Application</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+  
+<p>To create a simple application in a Web browser:</p>
+<ul class="ul">
+<li><p>To create a wearable application with a header and a footer button for closing the application, use the following code:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page ui-page-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;MyApplication&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;Hello world&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;closeBtn&quot; class=&quot;ui-btn&quot;&gt;Close&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var closeBtn = document.getElementById(&quot;closeBtn&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;closeBtn.addEventListener(&quot;click&quot;, function () 
+&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;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li><p>To create a similar mobile application:</p>
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;MyApplication&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;Hello world&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button data-role=&quot;button&quot;&gt;Close&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+</ul>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>For more information on the standalone Web application concept, see <a class="opensection" href="#application_visual_layout">Managing Pages</a>.</p>
+
+                       </div>
+               </li>
+               <li>
+            <div class="devicespec-tit">
+                <h2 id="application_visual_layout" name="application_visual_layout" class="items-tit-h2">Managing Pages</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">                       
+                       
+<p>The basic building block of an application UI in the TAU library is the <span style="font-family: Courier New,Courier,monospace">Page</span> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
+
+<p>The page consist of:</p>
+<ul class="ul">
+       <li>Header area
+               <p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
+       <li>Content area
+               <p>Contains the main application content. The content area has an optional scroll bar.</p></li>
+       <li>Footer area
+               <p>Contains a status line or buttons. The footer is optional.</p></li>
+</ul>
+<p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
+
+<p class="figure">Figure: Page content</p> 
+<p><img src="../../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
+
+<p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
+<pre class="prettyprint">&lt;span&gt;I have no page&lt;/span&gt;
+</pre>
+<p>TAU creates it and moves the content to it:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;Simple page
+&lt;/div&gt;
+</pre>
+
+<p>To create a page on your own, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value for wearable applications. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript widget implementation.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>To create a page:</p>
+<ol>
+<li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-header&quot;</span> 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&gt;
+</pre></li>
+<li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-footer&quot;</span> 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&gt;
+</pre></li>
+
+<li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-content&quot;</span> 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&gt;
+</pre></li>
+<li><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>
+<p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title ui-icon&quot; style=&quot;background-image: url(image.png);&quot;&gt;Title&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;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;MyApplication content&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<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&gt;
+</pre>
+<p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a class="opensection" href="#basic_page_routing">Managing Page Routing</a>.</p>
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note"><p>Not all profiles contain same UI components, for example, the popup component is only implemented in wearable applications.</p></td>
+    </tr>
+   </tbody>
+  </table>
+  </li>
+</ol>
+                       </div>
+                       </li>
+                       <li>
+            <div class="devicespec-tit">
+                <h2 id="basic_page_routing" name="basic_page_routing" class="items-tit-h2">Managing Page Routing</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+<p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-screen applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. If necessary, you can use the API to get more powerful page routing functionalities.</p>
+
+<p>To manage page routing:</p>
+<ul class="ul">
+<li id="routing-without-javascript">To route without JavaScript:
+<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
+<p>TAU uses every <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> 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 <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has an <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> 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&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&gt;
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  </li>
+
+<li id="routing-api">To route using the API:
+<p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
+<pre class="prettyprint">&lt;--! pageTwo.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;tau.changePage(&quot;pageTwo.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&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;tau.changePage(&quot;pageOne.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li id="external-resources">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 <span style="font-family: Courier New,Courier,monospace">base</span> element&#39;s <span style="font-family: Courier New,Courier,monospace">href</span> 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 <span style="font-family: Courier New,Courier,monospace">href</span> 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&gt;
+</pre>
+<p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel=&quot;external&quot;</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax=&quot;false&quot;</span>, or <span style="font-family: Courier New,Courier,monospace">target=&quot;_self&quot;</span> 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&gt;
+</pre>
+</li>
+</ul>
+                       </div>
+                       </li>
+                       <li>
+            <div class="devicespec-tit">
+                <h2 id="introduction_to_widgets" name="introduction_to_widgets" class="items-tit-h2">Managing UI Components</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                       
+<p>A UI component is basically a UI control with specific functionality, such as an input text box, a drop-down menu, or a touch slider. UI components build your application interface, and can be used anywhere in the application. They speed up application development, since much of the work for handling the UI is implemented in them. Some UI components are directly visible, while others are not (for example, the layout UI component).</p>
+<p>A &quot;UI component&quot;:</p>
+<ul class="ul">
+       <li>Is a graphical element.</li>
+       <li>Displays data and modifies other elements.</li>
+       <li>Allows data modification.</li>
+       <li>Offers easy development.</li>
+</ul>
+
+<p>The TAU UI components have high performance. The previous <span style="font-family: Courier New,Courier,monospace">web-ui-fw</span> framework, based on jQuery Mobile, was actually an extension. The framework was redefined, conforming to the Tizen platform. The UI components and the look were also redefined. TAU goes a step further still, breaking the dependence on jQuery and jQuery Mobile, while still being compatible with the latter.</p>
+<p>The TAU components were rewritten from scratch, with a different architecture in half of them. Simply put, the building phase (which means creating, modifying, and removing elements and properties), which ensures the &quot;look&quot; of the UI component and its structure, and the control logic were separated. This allows pre-building the markup for faster application runtime and startup.</p>
+<p>The key features of the TAU components are:</p>
+<ul class="ul">
+       <li>Performance</li>
+       <li>Pre-building</li>
+       <li>Easy to use API</li>
+       <li>Compatibility with jQuery Mobile</li>
+       <li>Look and feel</li>
+</ul>
+
+<p>A basic UI component implements 5 protected methods:</p>
+<ul class="ul">
+       <li><span style="font-family: Courier New,Courier,monospace">build</span> is responsible for the UI component creation.
+       <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">build</span> method is not executed every time the UI component is created, and it does not run when the markup is already built.</p></td>
+    </tr>
+   </tbody>
+  </table></li>
+       <li><span style="font-family: Courier New,Courier,monospace">configure</span> is expected to configure all the options for the UI component.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">init</span> handles the initialization, like searching for UI component sub-elements.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">bindEvents</span> handles all event binding (from user interaction).</li>
+       <li><span style="font-family: Courier New,Courier,monospace">destroy</span> removes all listeners, and cleans up after the UI component.</li>
+</ul>
+
+<p>The UI component is registered in the core engine by the <span style="font-family: Courier New,Courier,monospace">tau.engine.defineWidget</span> method, with its name, selector, and public methods list for jQuery Mobile compatibility (as needed).</p>
+<p>A given document element can have multiple UI components created from it, which really means that one element is 2 or more UI components at the same time. This behavior prevents much of the code duplication and can be used to create UI components which are complementary, such as input with a drop-down list.</p>
+
+<p>To create UI components:</p>
+<ol>
+<li id="basic-usage">Create a basic UI component.
+<p>A UI component can be created through multiple ways, the first and recommended one is to create a specific markup which conforms to the UI component selector. For example, to create a <span style="font-family: Courier New,Courier,monospace">Button</span> UI component:</p>
+<pre class="prettyprint">&lt;button type=&quot;myButton&quot; class=&quot;ui-btn&quot;&gt;This is a button&lt;/button&gt;
+</pre>
+<p>The above code causes TAU to create a <span style="font-family: Courier New,Courier,monospace">Button</span>, because the <span style="font-family: Courier New,Courier,monospace">ui-btn</span> class matches the UI component&#39;s selector. Some UI components have multiple selectors:</p>
+<pre class="prettyprint">>&lt;a href=&quot;#hashtag&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
+</pre>
+<p>The above code also creates a button, since the <span style="font-family: Courier New,Courier,monospace">ui-btn</span> class is  matches the <span style="font-family: Courier New,Courier,monospace">Button</span> UI component selector.</p>
+
+<p>UI components can also be created on ambiguous elements, that do not match specific selectors, using JavaScript code:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;IndexScrollbar&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;IndexScrollbar&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.IndexScrollbar(element);
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+
+
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note"><p>Creating UI components dynamically from JavaScript code is not recommended as this prevents pre-building the markup.</p></td>
+    </tr>
+   </tbody>
+  </table>
+  
+  </li>
+
+<li id="widget-flavours">Customize the UI components.
+<p>Almost all UI components support options which change their look and behavior. The options can be changed either on UI component creation or sometimes at runtime. To specify the options, you can use 2 methods:</p>
+<ul class="ul"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">data-\*</span> attributes, where <span style="font-family: Courier New,Courier,monospace">\*</span> stands for the option name.</p>
+<pre class="prettyprint">&lt;a href=&quot;popup.html&quot; data-rel=&quot;popup&quot; data-transition=&quot;slideup&quot;&gt;I'll slide up&lt;/a&gt;
+</pre></li>
+<li><p>When your UI component is created dynamically, pass the options to the
+<span style="font-family: Courier New,Courier,monospace">tau.widget</span> UI component method:</p>
+
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;IndexScrollbar&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;IndexScrollbar&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.IndexScrollbar(element,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index: &quot;A,B,C,D&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre></li></ul>
+</li>
+
+<li id="fetching-data-and-modifying-behaviour">Fetch data and modify behavior.
+<p>You want to  be able to fetch and store information in a UI component, not just modify its look and feel. For this purpose, all UI components expose their API, with only one rule: protected methods (marked with <span style="font-family: Courier New,Courier,monospace">&quot;_&quot;</span> underscore) must not be run directly.</p>
+<p>Some methods are getters and setters, and some modify the UI component behavior. For example, the <span style="font-family: Courier New,Courier,monospace">value</span> method is a setter method:</p>
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; checked /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pageshow&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var inputElement = document.querySelector(&quot;input&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input = tau.engine.instanceWidget(inputElement, &quot;Checkboxradio&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.setTimeout(function () 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input.value(false); // toggle checkbox
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 2500);
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+                       </div>
+                       </li>
+                       <li>
+            <div class="devicespec-tit">
+                <h2 id="notes" name="notes" class="items-tit-h2">Creating a Notepad Application</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                               
+<p>The notepad application shows all the notes in the main page, and allows the user to add new notes, edit existing notes, and delete notes by swiping them. The notes on the main page can be scrolled and edited, and a button is provided for adding a new note. After you click a note, it is displayed in the edit page for editing.</p>
+
+<p>To create a simple notepad application using the TAU library:</p>
+
+<ol>
+<li>Generate an application from the Tizen SDK.
+<p>Create a simple basic application that can be used for further development:</p>
+<ol><li>In the IDE menu, go to
+<strong>File &gt; New &gt; Tizen Web Project &gt; WEARABLE-2.3 &gt; Wearable UI &gt; Basic Application</strong>.</li>
+<li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
+<p>The IDE creates the application with a default file structure.</p></li>
+
+<li>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
+<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
+<ul class="ul"><li>Mobile: 
+<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.min.css&quot;/&gt;</pre></li>
+<li>Wearable:
+<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&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;
+</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; 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;
+
+&nbsp;&nbsp;&nbsp;&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;/head&gt;</pre></li>
+
+<li>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
+<ol><li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id. 
+<ol><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&gt;
+</pre></li>
+<li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
+the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
+<p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll=&quot;y&quot;</span> and <span style="font-family: Courier New,Courier,monospace">data-handler=&quot;true&quot;</span> attributes.</p>
+<p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> 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&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 <span style="font-family: Courier New,Courier,monospace">a</span> element,
+which has the <span style="font-family: Courier New,Courier,monospace">id=&quot;newBtn&quot;</span> attribute.
+<pre class="prettyprint">
+&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&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 href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+</li>
+<li>On the editing page, the header and footer are similar to main page. 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 <span style="font-family: Courier New,Courier,monospace">div</span> block with
+the <span style="font-family: Courier New,Courier,monospace">id=&quot;editor&quot;</span> and <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-page&quot;</span> attributes.
+<p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&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&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;js/jquery.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;js/lib/tau/mobile/js/tau.js&quot; data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
+</li>
+
+<li>Add styles for the content:
+<pre class="prettyprint">
+a 
+{
+&nbsp;&nbsp;&nbsp;color: #FFF;
+}
+
+#notesList.ui-listview 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+
+#notesList.ui-listview li 
+{
+&nbsp;&nbsp;&nbsp;margin: 0;
+&nbsp;&nbsp;&nbsp;white-space: nowrap;
+}
+
+#notesList.ui-listview li .ui-inline
+{
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;right: 5px;
+&nbsp;&nbsp;&nbsp;top: 5px;
+}
+
+#notesList.ui-listview li .ui-swipe-item-cover-inner 
+{
+&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+}
+
+#editor .ui-scrollview-view 
+{
+&nbsp;&nbsp;&nbsp;height: 100%;
+}
+
+#editor textarea 
+{
+&nbsp;&nbsp;&nbsp;height: 95%;
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+</pre></li>
+
+<li>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;(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;[data-role=&quot;page&quot;]:visible&#39;)[0].id;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Refresh current page
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Clear list with notes
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Delete note from storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Show all notes extracted from local storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;div&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.setAttribute(&#39;data-role&#39;, &#39;button&#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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Clear editor textarea
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Save note to storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* New note button handler
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* On editor page show handler
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Attach events
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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).on(&#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;if (e.originalEvent.keyName === &quot;back&quot;
+&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;&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;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;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;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;break;
+&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;window.history.back();
+&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;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;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Initialize
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&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;}());
+&lt;/script&gt;
+</pre>
+<p>Now the application is ready and you can deploy it to a device or Emulator.</p>     </li></ol>      
+                       </div>
+                       </li>
+</ul>
+
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/tutorials_w.htm b/org.tizen.tutorials/html/web/tutorials_w.htm
new file mode 100644 (file)
index 0000000..11c76af
--- /dev/null
+++ b/org.tizen.tutorials/html/web/tutorials_w.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 Tutorials</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.guides/html/web/guides_w.htm">Tizen Web Guides</a></li> 
+                       <li><a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Web API References</a></li>
+               </ul>
+       </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">Web Tutorials</font></h1>
+
+<p>Tizen Web tutorials teach you how to incorporate Tizen features into your application. The tutorials cover detailed code snippets to help you see how to write the required code in practice.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The API support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>,  <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>, and <a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Web UI Framework Reference</a>.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>Select the feature you are interested in and see how you can implement its various functionalities into your application:</p>
+
+<ul>
+       <li><a href="tizen/tutorials_tizen_w.htm">Exploiting Tizen Features</a>
+       <p>Demonstrates how you can use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
+               <li><a href="w3c/tutorials_w3c_w.htm">Exploiting W3C/HTML5 and Some Supplementary Features</a>
+       <p>Demonstrates how you can use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</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>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
new file mode 100644 (file)
index 0000000..3966e88
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Communication: Sending Messages and Exchanging Information over Servers</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">Communication API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">Communication API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Communication: Sending Messages and Exchanging Information over Servers</h1>
+
+<p>The communication tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="web_messaging_tutorial_w.htm">HTML5 Web Messaging: Accessing Device-specific Information</a> <p>Demonstrates how you can send messages between documents and through the message channel ports.</p></li>
+
+   <li><a href="websocket_tutorial_w.htm">WebSocket: Exchanging Data Using a Socket Server</a> <p>Demonstrates how you can manage the client-server communication.</p></li>
+   <li><a href="xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2: Communicating with the Server</a> <p>Demonstrates how you can communicate with a Web server using HTTP requests.</p></li>
+  </ul>
+
+  <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+   <li><a href="server_sent_tutorial_w.htm">Server-Sent Events: Using Server Push in Web Environment</a> <p>Demonstrates how you can implement server push messaging.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
new file mode 100644 (file)
index 0000000..a9bbf1f
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
@@ -0,0 +1,204 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Server-Sent Events: Using Server Push in Web Environment</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Triggering" class="opensection">Triggering Server Push Requests</a></li>
+                       <li><a href="#Receiving" class="opensection">Receiving Server Push Data</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/communication/server_sent_w.htm">Server-Sent Events Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Server-Sent Events: Using Server Push in Web Environment</h1>
+  <div class="cont"><div class="static-cont">
+  
+      <p>This tutorial demonstrates how you can implement server push messaging.</p>
+ 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+  <h2>Warm-up</h2>
+        <p>Become familiar with the Server-Sent Events API basics by learning about:</p>
+        <ul>
+            <li><a href="#Triggering">Triggering Server Push Requests</a><p>Create an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> interface instance.</p></li>
+            <li><a href="#Receiving">Receiving Server Push Data</a><p>Define the data server and the push data receiving event.</p></li>
+        </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Triggering" name="Triggering" class="items-tit-h2">Triggering Server Push Requests</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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);   
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For the server push to work, the <span style="font-family: Courier New,Courier,monospace">serverPage</span> parameter must contain the actual push server URL.</td> 
+      </tr> 
+     </tbody>
+</table>
+</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;)
+
+&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;}; 
+&lt;/script&gt;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">open</span> event is triggered repeatedly based on the <span style="font-family: Courier New,Courier,monospace">retry</span> 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 <span style="font-family: Courier New,Courier,monospace">open</span> event is fired every 2 seconds.</p>
+<p class="figure">Figure: Push request event</p> 
+<p style="text-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>
+ <ul class="ul">
+       <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>
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Receiving" name="Receiving" class="items-tit-h2">Receiving Server Push Data</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 <span style="font-family: Courier New,Courier,monospace">text/event-stream</span> 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;);
+
+&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;;
+    
+&nbsp;&nbsp;&nbsp;flush();
+?&gt;
+</pre>
+</li>
+<li>
+<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;};
+&lt;/script&gt; 
+</pre>
+</li>
+</ol>
+<p>In the following figure, the <span style="font-family: Courier New,Courier,monospace">open</span> event is fired every 2 seconds and the <span style="font-family: Courier New,Courier,monospace">message</span> event shows that push data is received.</p>
+<p class="figure">Figure: Push message event</p> 
+<p style="text-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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_client2.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>
+     </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
new file mode 100644 (file)
index 0000000..1d1f774
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
@@ -0,0 +1,209 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Web Messaging: Accessing Device-specific Information</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Cross-document_Messaging" class="opensection">Using Cross-document Messaging</a>
+                       </li>
+                       <li><a href="#Channel_Messaging" class="opensection">Using Channel Messaging</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm">HTML5 Web Messaging Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">HTML5 Web Messaging API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">HTML5 Web Messaging API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Web Messaging: Accessing Device-specific Information</h1>
+  <div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can send messages between documents and through the message channel ports.</p>
+       
+  <h2>Warm-up</h2>
+        <p>Become familiar with the HTML5 Web Messaging API basics by learning about:</p>
+        <ul>
+            <li><a href="#Cross-document_Messaging">Using Cross-document Messaging</a><p>Send a message from document A to document B using the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method.</p></li>
+            <li><a href="#Channel_Messaging">Using Channel Messaging</a><p>Send a message from document A to document B using the message channel ports.</p></li>
+        </ul>
+
+ <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Cross-document_Messaging" name="Cross-document_Messaging" class="items-tit-h2">Using Cross-document Messaging</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 <span style="font-family: Courier New,Courier,monospace">iframe</span> into document A:
+<pre class="prettyprint">
+&lt;iframe id=&quot;frame1&quot; src=&quot;./web_messaging_cross_document_messaging_iframe.htm&quot;&gt;&lt;/iframe&gt;
+</pre>
+</li>
+<li>In document A, use the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method to send a message to document B.
+<p>Use the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the <span style="font-family: Courier New,Courier,monospace">iframe</span> window, which sends the message from the method content, to deliver the message to the <span style="font-family: Courier New,Courier,monospace">iframe</span>.</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;}
+&lt;/script&gt;
+</pre>
+</li>
+<li>Register the <span style="font-family: Courier New,Courier,monospace">message</span> 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;
+&lt;/script&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 class="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>
+  
+  </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Channel_Messaging" name="Channel_Messaging" class="items-tit-h2">Using Channel Messaging</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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: <span style="font-family: Courier New,Courier,monospace">port1</span> and <span style="font-family: Courier New,Courier,monospace">port2</span>. 
+<p>The <span style="font-family: Courier New,Courier,monospace">port2</span> attribute of the <span style="font-family: Courier New,Courier,monospace">MessageChannel</span> instance is delivered to document B through the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> 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;};
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method can have 3 parameters: <span style="font-family: Courier New,Courier,monospace">message</span>, <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#security-postmsg" target="_blank">origin</a>, and <span style="font-family: Courier New,Courier,monospace">ports</span>.</p>
+               <p>According to the W3C specifications, the arguments are ordered as <span style="font-family: Courier New,Courier,monospace">message</span>, <span style="font-family: Courier New,Courier,monospace">origin</span>, and <span style="font-family: Courier New,Courier,monospace">ports</span>. However, in Tizen, the order used is actually <span style="font-family: Courier New,Courier,monospace">message</span>, <span style="font-family: Courier New,Courier,monospace">ports</span>, and <span style="font-family: Courier New,Courier,monospace">origin</span>. This approach is used in all browsers that currently support the <span style="font-family: Courier New,Courier,monospace">MessageChannel</span> interface.</p></td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+<li>Define a <span style="font-family: Courier New,Courier,monospace">message</span> event in the <span style="font-family: Courier New,Courier,monospace">window</span> object of document B, and register the event handler in the <span style="font-family: Courier New,Courier,monospace">port</span> 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;
+&lt;/script&gt;
+</pre><p>A message sent through the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of <span style="font-family: Courier New,Courier,monospace">port1</span> from document A is received through the <span style="font-family: Courier New,Courier,monospace">message</span> event of <span style="font-family: Courier New,Courier,monospace">port2</span> in document B, and the message sent through the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of <span style="font-family: Courier New,Courier,monospace">port2</span> from document B is received through the <span style="font-family: Courier New,Courier,monospace">message</span> event of <span style="font-family: Courier New,Courier,monospace">port1</span> in document A.</p>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_web_messaging" target="_blank">web_messaging_channel_messaging.htm</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_web_messaging" target="_blank">web_messaging_channel_messaging_iframe.htm</a></li>
+ </ul>
+     </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
new file mode 100644 (file)
index 0000000..c9938d8
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
@@ -0,0 +1,247 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>WebSocket: Exchanging Data Using a Socket Server</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Connecting_Socket_Server" class="opensection">Connecting to the Socket Server</a>
+                       </li>
+                       <li><a href="#Sending_Data" class="opensection">Sending Data to the Server</a>
+                       </li>
+                       <li><a href="#Receiving_Data" class="opensection">Receiving Data from the Server</a>
+                       </li>
+                       <li><a href="#Closing_Socket_Connection" class="opensection">Closing the Socket Connection</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/communication/websocket_w.htm">WebSocket Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>WebSocket: Exchanging Data Using a Socket Server</h1>
+  <div class="cont"><div class="static-cont">
+
+ <p>This tutorial demonstrates how you can manage the client-server communication.</p>
+   
+    <h2>Warm-up</h2>
+        <p>Become familiar with the WebSocket API basics by learning about:</p>
+        <ul>
+            <li><a class="opensection" href="#Connecting_Socket_Server">Connecting to the Socket Server</a>
+            <p>Open a connection to the socket server and track the connection status.</p></li>
+            <li><a class="opensection" href="#Sending_Data">Sending Data to the Server</a>
+            <p>Send data to the socket server.</p></li>
+            <li><a class="opensection" href="#Receiving_Data">Receiving Data from the Server</a>
+            <p>Receive data from the socket server.</p></li>
+            <li><a class="opensection" href="#Closing_Socket_Connection">Closing the Socket Connection</a>
+            <p>Close the connection to the socket server, and track the closing status.</p></li>
+        </ul>
+
+ <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+  
+  <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Connecting_Socket_Server" name="Connecting_Socket_Server" class="items-tit-h2">Connecting to the Socket Server</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 webSocket = new WebSocket(webSocketURL);
+</pre>
+<p>If the socket server URL is valid, the connection is created automatically. When the instance is created, the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute of the <span style="font-family: Courier New,Courier,monospace">WebSocket</span> instance must be set to <span style="font-family: Courier New,Courier,monospace">0</span> (CONNECTING). </p>
+</li>
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">open</span> and <span style="font-family: Courier New,Courier,monospace">error</span> events to track the connection status:</p>
+<pre class="prettyprint">
+/* If the connection is established */
+webSocket.onopen = function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;connection open, readyState: &#39; + e.target.readyState);
+};
+
+/* If the connection fails or is closed with prejudice */
+webSocket.onerror = function(e) 
+{
+&nbsp;&nbsp;&nbsp;/* Error handling */
+};
+</pre>
+<p>If the connection is established, the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute is changed to <span style="font-family: Courier New,Courier,monospace">1</span> and the <span style="font-family: Courier New,Courier,monospace">open</span> event is triggered.</p>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Sending_Data" name="Sending_Data" class="items-tit-h2">Sending Data to the Server</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 webSocket = new WebSocket(webSocketURL);
+</pre>
+</li>
+<li><p>Check the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value, which is <span style="font-family: Courier New,Courier,monospace">1</span> (OPEN), if the socket is connected. </p>
+<p>If the socket is connected, use the <span style="font-family: Courier New,Courier,monospace">send()</span> method to send the data.</p>
+<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;}
+};
+</pre>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Receiving_Data" name="Receiving_Data" class="items-tit-h2">Receiving Data from the Server</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 webSocket = new WebSocket(webSocketURL);
+</pre>
+</li>
+<li><p>Register the <span style="font-family: Courier New,Courier,monospace">message</span> event in the <span style="font-family: Courier New,Courier,monospace">WebSocket</span> instance. The event is triggered when data is received from the server.</p>
+<pre class="prettyprint">
+webSocket.onmessage = function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;server message: &#39; + e.data);
+};
+</pre>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Closing_Socket_Connection" name="Closing_Socket_Connection" class="items-tit-h2">Closing the Socket Connection</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 webSocket = new WebSocket(webSocketURL);
+</pre>
+</li>
+<li><p>Register a <span style="font-family: Courier New,Courier,monospace">close</span> event in the <span style="font-family: Courier New,Courier,monospace">WebSocket</span> instance to be notified when the connection closes:</p>
+<pre class="prettyprint">
+webSocket.onclose = function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&#39;connection close, readyState: &#39; + e.target.readyState);
+};
+</pre>
+</li>
+<li><p>Check the <span style="font-family: Courier New,Courier,monospace">readyState</span> attribute value, which is <span style="font-family: Courier New,Courier,monospace">1</span> (OPEN), if the socket is connected.</p>
+<p>If the socket is connected, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method to close the connection between the client and the server.</p>
+<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;}
+};
+</pre>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
+ </ul>
+       </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
new file mode 100644 (file)
index 0000000..3cd8e62
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
@@ -0,0 +1,358 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>XMLHttpRequest Level 1 and 2: Communicating with the Server</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Sending_Request" class="opensection">Sending a Cross-origin Request</a>
+                       </li>
+                       <li><a href="#Uploading_Files" class="opensection">Uploading Files with Ajax</a>
+                       </li>
+                       <li><a href="#Handling_Requests" class="opensection">Handling Request Events</a>
+                       </li>
+                       <li><a href="#Tracking_Download" class="opensection">Tracking Download Progress State</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest Level 1 and 2 Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>XMLHttpRequest Level 1 and 2: Communicating with the Server</h1>
+  <div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how you can communicate with a Web server using HTTP requests.</p>
+      
+    <h2>Warm-up</h2>
+        <p>Become familiar with the XMLHttpRequest Level 1 and 2 API basics by learning about:</p>
+        <ul>
+            <li><a class="opensection" href="#Sending_Request">Sending a Cross-origin Request</a>
+            <p>Send a cross-domain request to the Web server.</p></li>
+            <li><a class="opensection" href="#Uploading_Files">Uploading Files with Ajax</a>
+            <p>Upload files on the background using Ajax.</p></li>
+            <li><a class="opensection" href="#Handling_Requests">Handling Request Events</a>
+            <p>Track requests through various events. </p></li>
+            <li><a class="opensection" href="#Tracking_Download">Tracking Download Progress State</a>
+            <p>Start and cancel a download and track the download status.</p></li>
+        </ul>
+
+               
+                 <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+  
+  <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="Sending_Request" name="Sending_Request" class="items-tit-h2" >Sending a Cross-origin Request</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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();
+</pre>
+</li>
+<li><p>Open the connection with the <span style="font-family: Courier New,Courier,monospace">open()</span> method using the cross-domain URL as a parameter. Send the request with the <span style="font-family: Courier New,Courier,monospace">send()</span> method.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;client.open(&quot;GET&quot;, &quot;video_sample.mp4&quot;);
+&nbsp;&nbsp;&nbsp;client.send();
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Cross-domain access only works if <a href="../security/cors_tutorial_w.htm#Using_Simple_Requests">the server allows the domain access of the client</a>. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+</ol>
+ <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr3.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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+<h2 id="Uploading_Files" name="Uploading_Files" class="items-tit-h2">Uploading Files with Ajax</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 <span style="font-family: Courier New,Courier,monospace">upload()</span> 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;
+</pre>
+</li>
+<li><p>In the <span style="font-family: Courier New,Courier,monospace">upload()</span> 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 <span style="font-family: Courier New,Courier,monospace">send()</span> method to send the <span style="font-family: Courier New,Courier,monospace">FormData</span> 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;}
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr1.html</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+<h2 id="Handling_Requests" name="Handling_Requests" class="items-tit-h2">Handling Request Events</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+ <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;
+</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();
+</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;}
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+ <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+<h2 id="Tracking_Download" name="Tracking_Download" class="items-tit-h2">Tracking Download Progress State</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 <span style="font-family: Courier New,Courier,monospace">sendRequest()</span> and <span style="font-family: Courier New,Courier,monospace">abortRequest()</span> 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;
+</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 <span style="font-family: Courier New,Courier,monospace">onprogress</span> and <span style="font-family: Courier New,Courier,monospace">onabort</span> events to track the download progress and cancellation events:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var client = new XMLHttpRequest();
+ 
+&nbsp;&nbsp;&nbsp;client.onprogress = onprogresshandler;
+&nbsp;&nbsp;&nbsp;client.onabort = onaborthandler;
+&lt;/script&gt;
+</pre>
+</li>
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">send()</span> 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 <span style="font-family: Courier New,Courier,monospace">abort()</span> 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;}
+</pre>
+</li>
+<li><p>During the download, use the <span style="font-family: Courier New,Courier,monospace">onprogresshandler</span> event handler to track the current and total download size, and calculate the download status. With the <span style="font-family: Courier New,Courier,monospace">onaborthandler</span> 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;}
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr3.html</a></li>
+ </ul>
+        </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm
new file mode 100644 (file)
index 0000000..136609e
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm
@@ -0,0 +1,276 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Checking the Battery Status</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#retrieve" class="opensection">Retrieving Battery Status Information</a></li>
+                       <li><a href="#detect" class="opensection">Detecting Battery Status Changes</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/battery_w.htm">Battery Status Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#battery">Battery Status API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#battery">Battery Status API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Battery Status: Checking the Battery Status</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can retrieve and detect the battery status information of the device.</p>
+
+
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Battery Status API by learning about:</p>
+  <ul>
+   <li><a class="opensection" href="#retrieve">Retrieving Battery Status Information</a> <p>Get and display the battery status information. </p></li>
+   <li><a class="opensection" href="#detect">Detecting Battery Status Changes</a> <p>Set event listeners to detect various battery status changes.</p></li></ul>
+   
+   
+  <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Battery Status Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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;chargingTime: &lt;span id=&quot;chargingTime&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;div&gt;dischargingTime: &lt;span id=&quot;dischargingTime&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;
+</pre> 
+</li> 
+<li>
+<p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <span style="font-family: Courier New,Courier,monospace">battery</span> 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 || navigator.mozBattery;
+&lt;/script&gt; 
+</pre>
+</li>
+
+<li>
+<p>Use the attributes of the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface to display the battery charging status, remaining charging time, remaining battery life, and battery level:</p>
+
+
+<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;/* Charging status: true or false */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#charging&#39;).textContent = battery.charging ? &#39;charging&#39; : &#39;not charging&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Battery charging time: seconds (for example, 3600) or Infinity */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#chargingTime&#39;).textContent = battery.chargingTime / 60;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Battery life: seconds (for example, 3600) or Infinity */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#dischargingTime&#39;).textContent = battery.dischargingTime / 60;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Battery.level: between 0 and 1 (for example, 0.50) */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#level&#39;).textContent = Math.floor(battery.level * 100) + &#39;%&#39;;   
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt; 
+</pre></li>
+  </ol> 
+
+<p class="figure">Figure: Displaying battery status (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Displaying battery status (in mobile applications only)" src="../../../images/charging_battery.png" /></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="detect" name="detect" class="items-tit-h2">Detecting Battery Status Changes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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&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;/div&gt;
+&lt;div id=&quot;message&quot;&gt;&lt;/div&gt;
+</pre> 
+</li> 
+<li><p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <span style="font-family: Courier New,Courier,monospace">battery</span> 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 || navigator.webkitBattery;
+&lt;/script&gt;
+
+</pre>
+</li>
+
+<li>Set event listeners with the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface attributes to detect changes in the battery status:
+
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;load&#39;, 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 charging time */
+&nbsp;&nbsp;&nbsp;battery.addEventListener(&#39;chargingtimechange&#39;, getBatteryState);
+&nbsp;&nbsp;&nbsp;/* Detects changes in the battery discharging time */
+&nbsp;&nbsp;&nbsp;battery.addEventListener(&#39;dischargingtimechange&#39;, getBatteryState);
+&nbsp;&nbsp;&nbsp;/* Detects changes in the battery level */
+&nbsp;&nbsp;&nbsp;battery.addEventListener(&#39;levelchange&#39;, getBatteryState);
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>Display the battery state information when a change occurs:</p>
+
+<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 chargingTime = getTimeFormat(battery.chargingTime);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var dischargingTime = getTimeFormat(battery.dischargingTime);
+&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;message = dischargingTime.hour + &quot;:&quot; + dischargingTime.minute + &quot; remained.&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (battery.dischargingTime == &quot;Infinity&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (charging &amp;&amp; level &lt; 100) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Charging */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = &quot;Charging is complete after &quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ chargingTime.hour + &quot;:&quot; + chargingTime.minute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (battery.chargingTime == &quot;Infinity&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&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 = 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;}
+
+&nbsp;&nbsp;&nbsp;/* Time is received in seconds, converted to hours and minutes, and returned */
+&nbsp;&nbsp;&nbsp;function getTimeFormat(time) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Time parameter is second */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tempMinute = time / 60;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hour = parseInt(tempMinute / 60, 10);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var minute = parseInt(tempMinute % 60, 10);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute = minute &lt; 10 ? &quot;0&quot; + minute : minute;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {&quot;hour&quot;: hour, &quot;minute&quot;: minute};
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+<p>If the battery is not charging, a message is displayed telling you to charge the battery. You can see how much time remains until the battery runs out. In the battery is charging, you can see the time left until it is fully charged.</p>
+<p>
+You can use a progress bar to display the battery charging level.
+</p>
+</li>
+  </ol> 
+
+<p class="figure">Figure: Battery status (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Battery status (in mobile applications only)" src="../../../images/changing_batterystatus.png" /></p> 
+
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/battery_status_api" target="_blank">battery_event.htm</a></li>
+ </ul>
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm
new file mode 100644 (file)
index 0000000..85d556c
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm
@@ -0,0 +1,138 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Browser state: Monitoring Browser Network Connection</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Retrieving_Browser_State" class="opensection">Retrieving the Browser State</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/device/browser_state_w.htm">HTML5 Browser state Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#browserstate">HTML5 Browser state API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>HTML5 Browser state: Monitoring Browser Network Connection</h1>
+<div class="cont"><div class="static-cont">    
+
+ <p>This tutorial demonstrates how you can access the browser connection state.</p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+        
+<h2>Warm-up</h2>
+        <p>Become familiar with the HTML5 Browser state API basics by learning about:</p>
+        <ul>
+        <li><a href="#Retrieving_Browser_State">Retrieving the Browser State</a>
+        <p>Retrieve the current browser state and track changes in the state.</p></li>
+        </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Retrieving_Browser_State" name="Retrieving_Browser_State" class="items-tit-h2">Retrieving the Browser State</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To enhance the user interaction with the device, you must learn to retrieve the browser state:</p>
+
+<ol>
+<li>The <span style="font-family: Courier New,Courier,monospace">updateIndicator()</span> method updates the browser connection state information on the screen to reflect the current state.
+<p>To retrieve the current state, use the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute of the <span style="font-family: Courier New,Courier,monospace">navigator</span> interface:</p>
+<pre><pre class="prettyprint lang-html" style="border:0px">
+&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;</pre><pre class="prettyprint lang-js" style="border:0px">
+&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;}
+</pre></pre> </li>
+<li><p>Subscribe to event listeners to be informed when the connection state changes:</p>
+<pre><pre class="prettyprint lang-js" style="border:0px">
+&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;</pre><pre class="prettyprint lang-html" style="border:0px">&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;/html&gt;
+</pre></pre></li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/html5_browser_state" target="_blank">browser_state.htm</a></li>
+ </ul>
+ 
+ </div></li></ul>
+ </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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm
new file mode 100644 (file)
index 0000000..5c29e20
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm
@@ -0,0 +1,198 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Detecting Device Motion</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#rotate" class="opensection">Detecting Device Rotation</a></li>
+                       <li><a href="#accelerate" class="opensection">Detecting Device Acceleration</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>DeviceOrientation Event Specification: Detecting Device Motion</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can detect device motions in Tizen.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the DeviceOrientation Event Specification API basics by learning about:</p>
+
+<ul>
+<li><a href="#rotate">Detecting Device Rotation</a>
+<p>Use the device orientation event to detect when the user rotates the device.</p></li>
+
+<li><a href="#accelerate">Detecting Device Acceleration</a>
+<p>Use the device motion event to detect when the user accelerates the device.</p> </li>
+</ul>
+
+<h2>Task in Mobile Applications</h2>
+<p>This tutorial comprises the following tasks:</p>
+
+<ul>
+<li>In the <a href="task_compass_w.htm">Compass</a> task, we will walk through using the magnetic sensor data to orient a compass needle.</li>
+<li>In the <a href="task_sensorball_w.htm">Sensor Ball</a> task, we will walk through using the gyro sensor data to create a game.</li></ul>
+    
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="rotate" name="rotate" class="items-tit-h2">Detecting Device Rotation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>Learning how to detect device rotation is a basic device motion handling skill:</p>
+<ol>
+<li>Display the device rotation details on the screen:
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+&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;/div&gt;
+
+&lt;script&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+&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;);
+</pre></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"><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;deviceorientation&quot;, function(e) 
+&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;betaElem.innerHTML = &#39;beta value &#39; + Math.round(e.beta);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gammaElem.innerHTML = &#39;gamma value &#39; + Math.round(e.gamma);
+&nbsp;&nbsp;&nbsp;}, true);</pre><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+&lt;/script&gt;
+</pre></pre>
+</li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="accelerate" name="accelerate" class="items-tit-h2">Detecting Device Acceleration</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>Learning how to detect device acceleration is a basic device motion handling skill:</p>
+<ol>
+<li>Display the device acceleration details on the screen:
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+&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;/div&gt;
+
+&lt;script&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+&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;);
+</pre></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">
+<pre class="prettyprint lang-js" style="border:0px; margin:0px">
+&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);</pre><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+&lt;/script&gt;
+</pre></pre></li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>  
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
new file mode 100644 (file)
index 0000000..ddf0634
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Getting Information about the Device, and Managing Device Events</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Device: Getting Information about the Device, and Managing Device Events</h1>
+
+  <p>The device tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="battery_tutorial_w.htm">Battery Status: Checking the Battery Status</a> <p>Demonstrates how you can retrieve and detect the battery status information of the device.</p></li>
+   <li><a href="device_orientation_tutorial_w.htm">DeviceOrientation Event Specification: Detecting Device Motion</a> <p>Demonstrates how you can detect rotation and acceleration motions on the device.</p></li>
+   <li><a href="touch_tutorial_w.htm">Touch Events version 1: Controlling Touch Events</a> <p>Demonstrates how you can use touch events.</p></li>  
+   <li><a href="vibration_tutorial_w.htm">Vibration: Managing the Vibration Mechanism</a> <p>Demonstrates how you can launch and stop vibration on Tizen devices.</p></li>
+  </ul>
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+  <ul>
+   <li><a href="browser_state_tutorial_w.htm">HTML5 Browser state: Monitoring Browser Network Connection</a> <p>Demonstrates how you can access the browser connection state.</p></li>   
+   <li><a href="screen_orientation_tutorial_w.htm">Screen Orientation: Managing Screen Orientation State</a> <p>Demonstrates how you can detect rotation and acceleration motions 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm
new file mode 100644 (file)
index 0000000..92cac52
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm
@@ -0,0 +1,197 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+    <title>Screen Orientation: Managing Screen Orientation State</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage" class="opensection">Managing the Screen Orientation</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm">Screen Orientation Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Screen Orientation: Managing Screen Orientation State</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage the screen orientation state.</p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+                               
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Screen Orientation API basics by learning about:</p>
+<ul>
+<li><a href="#manage">Managing the Screen Orientation</a> 
+<p>Lock the screen to a specific orientation and release the lock.</p></li>
+</ul> 
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="manage" name="manage" class="items-tit-h2">Managing the Screen Orientation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user interaction with the device, you must learn to manage the screen orientation. The application implemented below consists of buttons used to either lock the screen orientation to a specific state or release the lock. The current orientation state is also displayed on the screen.</p>
+
+<p class="figure">Figure: Screen orientation application</p> 
+<p style="text-align:center;"><img alt="Screen orientation application" src="../../../images/screen_orientation.png" /></p>
+
+<ol><li>Define the text and button elements for the screen (the body of the HTML page):
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Current orientation is:&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;currentOrientation&quot; class=&quot;current-orientation&quot;&gt;&lt;/p&gt;
+    
+&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;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;landscape-secondary&quot; class=&quot;button&quot;&gt;Landscape secondary&lt;/button&gt;&lt;br&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;portrait-secondary&quot; class=&quot;button&quot;&gt;Portrait secondary&lt;/button&gt;&lt;br&gt;
+&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;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;unlock-orientation&quot; class=&quot;button&quot;&gt;Unlock orientation&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre></li>
+
+<li>When the screen is loaded, the <span style="font-family: Courier New,Courier,monospace">onload()</span> method is called. Within the method, add an event listener to the <span style="font-family: Courier New,Courier,monospace">screen</span> object, and define the <span style="font-family: Courier New,Courier,monospace">updateCurrOrrTxt()</span> event handler to be called whenever the screen orientation changes. The event handler updates the text element containing the current screen orientation information on the screen.
+
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;function updateCurrOrrTxt() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;currentOrientation&quot;).innerHTML = screen.orientation;
+&nbsp;&nbsp;&nbsp;}
+       
+&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;currentOrientation&quot;).innerHTML = screen.orientation;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;screen.addEventListener(&quot;orientationchange&quot;, updateCurrOrrTxt, false);
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">onclick</span> event handlers to react to the button clicks. For the first 4 buttons, use the <span style="font-family: Courier New,Courier,monospace">lockOrientation()</span> method to lock the screen orientation in place, and for the final button, use the <span style="font-family: Courier New,Courier,monospace">unlockOrientation()</span> method to release the orientation lock.
+</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;portrait-primary&quot;).onclick = function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;screen.lockOrientation(&#39;portrait-primary&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* The other 3 orientation buttons are handled similarly */
+  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;unlock-orientation&quot;).onclick = function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;screen.unlockOrientation();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre></li>
+
+<li>Define CSS styles in the &lt;head&gt; section of the document to make the application more eye-catching.
+<pre class="prettyprint">
+&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;* 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Lucida Sans, Arial, Helvetica, sans-serif;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.main 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 32px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top: auto;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left: auto;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right: auto;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: auto;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;.button 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: x-large;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 25px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 80%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 50px;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;.current-orientation 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: xx-large;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bolder;
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/the_screen_orientation_api" target="_blank">screen_orientation.html</a></li>
+ </ul>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
new file mode 100644 (file)
index 0000000..7e30da1
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
@@ -0,0 +1,188 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#configure">Initializing the Application</a></li>
+            <li><a href="#needle">Managing the Needle Movement</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API for Mobile Web</a></li>
+               </ul>
+       </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 SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">Compass</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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> 
+   
+   <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 class="figure">Figure: Compass screen</p> 
+  <p style="text-align: center;"><img alt="Compass screen" src="../../../images/compass.png" /></p> 
+  
+<h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep"> 
+   <li>index.html Source File
+ <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&gt;
+</pre> </li>
+ </ol>
+
+  <h2 id="configure" name="configure">Initializing the Application</h2>
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+       <ol>  
+ <li><p>The application uses the <span style="font-family: Courier New,Courier,monospace">ready</span> event to determine when it has been initialized, and to call the <span style="font-family: Courier New,Courier,monospace">init()</span> method.</p> 
+  <pre class="prettyprint">$(document).ready(init);</pre> </li>
+  
+ <li><p>The <span style="font-family: Courier New,Courier,monospace">init()</span> 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();
+}
+
+function startSensor() 
+{
+&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
+&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;deviceorientation&quot;, onDeviceOrientation, false);
+}
+</pre></li></ol></li></ol>
+
+<h2 id="needle" name="needle">Managing the Needle Movement</h2> 
+ <p>The orientation data interpretation and needle movement functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
+  <ol class="tutorstep">
+<li>Determining the Cardinal Direction
+<ol>
+<li>The <span style="font-family: Courier New,Courier,monospace">onDeviceOrientation()</span> event handler is called each time the device orientation changes. The new orientation details are received in the <span style="font-family: Courier New,Courier,monospace">dataEvent</span> parameter, and the <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute is used to determine the current cardinal direction to be displayed at the top of the compass screen.
+<p>The <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute values range from 0 to 360, where 0 means the cardinal direction points to north, 90 to west, 180 to south, 270 to east.</p>
+  <pre class="prettyprint">function onDeviceOrientation(dataEvent) 
+{
+&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
+&nbsp;&nbsp;&nbsp;var angle = dataEvent.alpha,
+}
+</pre></li>
+
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute value range is divided into 8 parts to identify also the intercardinal values of northwest, southwest, southeast, and northeast.</p>
+<p>This means that each cardinal or intercardinal direction is represented by 45 degrees (for example, north is 338 – 22 and northwest is 292 – 337). </p>
+
+
+<pre class="prettyprint">if (angle &lt; 68 || angle &gt; 292) 
+{
+&nbsp;&nbsp;&nbsp;text += &#39;NORTH&#39;;
+} 
+else if (angle &gt; 112 &amp;&amp; angle &lt; 248) 
+{
+&nbsp;&nbsp;&nbsp;text += &#39;SOUTH&#39;;,
+}
+
+if (angle &gt; 22 &amp;&amp; angle &lt; 158) 
+{
+&nbsp;&nbsp;&nbsp;text += &#39;EAST&#39;;
+} 
+else if (angle &gt; 202 &amp;&amp; angle &lt; 338) 
+{
+&nbsp;&nbsp;&nbsp;text += &#39;WEST&#39;;
+}
+</pre>
+
+</li></ol></li>
+<li>Updating the Compass Needle Position
+<ol> 
+<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;}
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;rotation += deltaAngle;
+}
+angleMemory = angle;
+</pre></li>
+
+<li><p>The needle position is updated by rotating the needle with the <span style="font-family: Courier New,Courier,monospace">rotate()</span> method of the <a href="../../../../../org.tizen.guides/html/web/w3c/dom/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
+
+
+<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;);
+</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>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm b/org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm
new file mode 100644 (file)
index 0000000..493d13b
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm
@@ -0,0 +1,275 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Sensor Ball</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#configure">Initializing the Application</a></li>
+            <li><a href="#data">Managing the Gyro Sensor Data</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification Guide</a></li> 
+            <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API for Mobile Web</a></li>
+               </ul>
+       </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 SDK, 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 read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see the <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">SensorBall</a>.</p> 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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 class="figure">Figure: SensorBall screen</p> 
+  <p style="text-align: center;"><img alt="SensorBall screen" src="../../../images/sensorball.png" /></p> 
+  
+<h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep"> 
+   <li>index.html Source File
+   <ol><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">header</span>. 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;
+</pre></li>
+<li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">content</span>. The content section of the main screen contains a background image (defined in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file based on the <span style="font-family: Courier New,Courier,monospace">background</span> class), and the image of the game ball.
+</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;
+</pre></li>
+<li> <p>The footer section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">footer</span>. The footer section contains a <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">tab bar</a> 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;/body&gt;
+</pre></li>
+</ol>
+ </li>
+<li>css/style.css Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">
+style.css</span> file defines the background image for each animation mode and the size and location of the game ball.</p>
+<pre class="prettyprint">
+.background1 
+{
+&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/background1.jpg&#39;);
+}
+
+.background2 
+{
+&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/background2.jpg&#39;);
+}
+
+.background3 
+{
+&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/background3.jpg&#39;);
+&nbsp;&nbsp;&nbsp;background-color: #000;
+&nbsp;&nbsp;&nbsp;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;
+}
+</pre>
+</li>
+ </ol>
+
+ <h2 id="configure" name="configure">Initializing the Application</h2>
+ <ol class="tutorstep"> 
+  <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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;/widget&gt;</pre>
+  </li> 
+ </ol>
+
+ <h2 id="data" name="data">Managing the Gyro Sensor Data</h2> 
+ <p>This section builds upon the elements described in <a href="device_orientation_tutorial_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 <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
+  <ol class="tutorstep"> 
+  <li>Creating the Application Object
+<p>The application object is initialized when the document <span style="font-family: Courier New,Courier,monospace">ready()</span> 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;if (e.originalEvent.keyName === &quot;back&quot;) 
+&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;/* Button events */
+&nbsp;&nbsp;&nbsp;$(&#39;#btnBall&#39;).bind(&#39;click&#39;, function(event) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#sun&#39;).remove();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startBall();
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;$(&#39;#btnSky&#39;).bind(&#39;click&#39;, function(event) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#sun&#39;).remove();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startSky();
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;$(&#39;#btnSpace&#39;).bind(&#39;click&#39;, function(event) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#sun&#39;).remove();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startSpace();
+&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;app.startBall();
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;webkitvisibilitychange&#39;, function(event) 
+&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;app.fun();
+&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;);
+});
+</pre></li>
+<li>Resizing the Window
+<p>The application handles the window resize events and sets the display accordingly.</p>
+  <pre class="prettyprint">
+$(window).resize(function() 
+{
+&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+&nbsp;&nbsp;&nbsp;app.gameWidth = screen.availWidth;
+&nbsp;&nbsp;&nbsp;app.gameHeight = $(&#39;.background&#39;).outerHeight();
+});
+</pre></li>
+</ol>
+        
+  
+<h3 id="access" name="access">Accessing Gyro Sensor Data</h3>
+
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+ <ol>
+ <li>The <span style="font-family: Courier New,Courier,monospace">
+devicemotion</span> event listener calls the <span style="font-family: Courier New,Courier,monospace">
+saveSensorData()</span> 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);
+</pre> </li>
+<li>The <span style="font-family: Courier New,Courier,monospace">
+saveSensorData()</span> 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;
+}
+</pre></li>
+<li>The stored event is used by the <span style="font-family: Courier New,Courier,monospace">
+ballEvents()</span> and <span style="font-family: Courier New,Courier,monospace">
+earthEvents()</span> methods, which control the game ball and the animation of the different game modes. These methods are called repeatedly with the <span style="font-family: Courier New,Courier,monospace">
+setTimeout()</span> method.</li></ol></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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
new file mode 100644 (file)
index 0000000..d5e306e
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
@@ -0,0 +1,324 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#draw">Drawing on Canvas</a></li>
+            <li><a href="#feature">Using Drawing Features</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/touch_w.htm">Touch Events version 1 Guide</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>                       
+               </ul>
+       </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 SDK, 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="../../../../../org.tizen.guides/html/web/w3c/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/downloads/sample-applications/sample-mobile-applications" target="blank">TouchPaint</a>.</p> 
+
+<p>This task consists of the following parts:</p> 
+  <ul class="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> 
+
+
+<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 following figure shows the main screen of the application.</p> 
+ 
+<p class="figure">Figure: TouchPaint screen</p> 
+<p style="text-align:center;"><img alt="TouchPaint screen" src="../../../images/touchpaint_sd.png" /></p> 
+
+<h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep"> 
+
+   <li>index.html Source File 
+<p>The main screen displays a <a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <span style="font-family: Courier New,Courier,monospace;">&lt;input&gt;</span> 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/ns_widget_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; 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;/body&gt;
+</pre>
+
+</li>
+  </ol> 
+
+
+<h2 id="draw" name="draw">Drawing on Canvas</h2>
+
+  <p>This section builds upon the elements described in <a href="touch_tutorial_w.htm#handle">Handling Touch Events</a> and <a href="touch_tutorial_w.htm#control">Controlling Multi-point Touches</a>.</p> 
+
+
+<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+<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;);
+
+&nbsp;&nbsp;&nbsp;/* Canvas size setting */
+&nbsp;&nbsp;&nbsp;canvas.width = document.width;
+&nbsp;&nbsp;&nbsp;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);
+}    
+</pre>
+</li></ol>
+
+ <h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
+<p>The line drawing functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p> 
+  <ol class="tutorstep"> 
+<li>Drawing based on Retrieved Event Coordinates
+<p>To draw an image with fingers, you must find out the coordinates of the triggered touch events.  
+Retrieve the coordinates in the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handler.</p> 
+<pre class="prettyprint">
+function touchMoveHandler(e) 
+{
+&nbsp;&nbsp;&nbsp;touches = e.touches.item(0);
+    
+&nbsp;&nbsp;&nbsp;log.innerHTML =&#39;&lt;strong&gt;pageX:&lt;/strong&gt; &#39; + touches.pageX + 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br&gt;&lt;strong&gt;pageY:&lt;/strong&gt; &#39; + touches.pageY;
+    
+&nbsp;&nbsp;&nbsp;context.fillStyle = &quot;#f00&quot;;
+    
+&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);
+}
+</pre>
+<p>Every time a <span style="font-family: Courier New,Courier,monospace">touchmove</span> 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 <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attribute instead, as shown below.</p> 
+</li>
+
+<li>Drawing based on Stored Event Coordinates
+<p>Create a <span style="font-family: Courier New,Courier,monospace">drawPath</span> array that remembers the order of the triggered touch events, and edit the <span style="font-family: Courier New,Courier,monospace">touchStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handlers to define the lines the user is drawing.</p>
+<ol>
+<li>
+<p>When a <span style="font-family: Courier New,Courier,monospace">touchstart</span> event is triggered, the event handler stores the initial position.</p>
+<pre class="prettyprint">
+var touches;
+/* Remember the order of the touch events */ 
+var drawPath = new Array();
+/* Flag for displaying the touching point */
+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]);  
+}
+</pre>
+</li>
+<li>
+<p>When a <span style="font-family: Courier New,Courier,monospace">touchmove</span> event is triggered, the coordinates of the previously triggered <span style="font-family: Courier New,Courier,monospace">touchmove</span> event stored in the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attribute are saved in the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array and assigned as a parameter value of the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. The coordinates of the current <span style="font-family: Courier New,Courier,monospace">touchmove</span> event are assigned as a parameter value of the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method, and thus the connected line is indicated.</p>
+<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();
+}
+</pre>
+</li>
+<li>
+<p>When a <span style="font-family: Courier New,Courier,monospace">touchend</span> event is triggered, it deletes the stored position.</p>
+<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, 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 */ 
+}
+</pre>
+</li>
+</ol></li>
+<li>Drawing based on Multi-point Touches
+<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 <span style="font-family: Courier New,Courier,monospace">touches[index]</span> array is used.</p> 
+<p>The <span style="font-family: Courier New,Courier,monospace">drawPathSetting()</span> 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 <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handler uses the <span style="font-family: Courier New,Courier,monospace">drawPathSetting()</span> method to return the index of the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array (which contains the touch event details saved so far). Since the information is similar to the <span style="font-family: Courier New,Courier,monospace">identifier</span> 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;
+}    
+</pre>
+
+
+</li>
+</ol>
+
+
+<h2 id="feature" name="feature">Using Drawing Features</h2>
+
+ 
+ <h3 id="initialize2" name="initialize2">Initializing Drawing</h3>
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+<p>Variables are declared to store and display the color and line width selection of the user.</p>
+<pre class="prettyprint">var strokeColorSel, strokeWidthSel;
+var strokeColor;
+var strokeWidth = 5;
+</pre>
+</li></ol>
+
+<h3 id="stroke" name="stroke">Applying the Stroke Styles</h3>
+  <ol class="tutorstep"> 
+   <li>main.js Source File
+<ol>
+<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;);
+    
+&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);
+</pre>
+</li>
+<li>If the user changes the color or line width, the event handlers call the <span style="font-family: Courier New,Courier,monospace">changeStrokeColor()</span> or <span style="font-family: Courier New,Courier,monospace">changeStrokeWidth()</span> 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;}
+}
+</pre>
+</li>
+<li>To use the style values, apply them in the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handler, which draws the user&#39;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 */ 
+
+&nbsp;&nbsp;&nbsp;/* Draw the strokes */
+} 
+</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>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
new file mode 100644 (file)
index 0000000..0eb5730
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
@@ -0,0 +1,312 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#draw">Drawing on Canvas</a></li>
+            <li><a href="#feature">Using Drawing Features</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/touch_w.htm">Touch Events version 1 Guide</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>
+               </ul>
+       </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 SDK, 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="../../../../../org.tizen.guides/html/web/w3c/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/downloads/sample-applications/sample-wearable-applications" target="blank">TouchPaint</a>.</p> 
+
+<p>This task consists of the following parts:</p> 
+  <ul class="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> 
+
+
+<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 class="figure">Figure: TouchPaint screens</p> 
+<p style="text-align:center;"><img alt="TouchPaint screens" src="../../../images/touchpaint_sd_ww.png" /></p> 
+
+<h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep"> 
+
+   <li>index.html Source File 
+<p>The main screen displays a <a href="../../../../../org.tizen.guides/html/web/w3c/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&gt;
+</pre>
+
+<p>The above code snippet does not contain the canvas element, which is added to the <span style="font-family: Courier New,Courier,monospace;">&lt;div id=&quot;main-content&quot;&gt;</span> element by the JavaScript code after the application start.</p>
+</li>
+  </ol> 
+
+  <h3 id="option" name="option">Defining the Options Screen</h3> 
+  <ol class="tutorstep"> 
+
+   <li>index.html Source File 
+<p>The Options screen displays a slider element, line preview, four-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&gt;
+</pre>
+
+</li>
+  </ol>   
+
+  
+
+<h2 id="draw" name="draw">Drawing on Canvas</h2>
+
+  <p>This section builds upon the elements described in <a href="touch_tutorial_w.htm#handle">Handling Touch Events</a> and <a href="touch_tutorial_w.htm#control">Controlling Multi-point Touches</a>.</p> 
+ 
+
+<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
+  <ol class="tutorstep"> 
+   <li>main.js Source File 
+<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;);
+}
+</pre>
+</li></ol>
+
+ <h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
+<p>The line drawing functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p> 
+  <ol class="tutorstep"> 
+<li>main.js Source File 
+<ol><li>
+<p>Define event listeners and handlers to manage the <span style="font-family: Courier New,Courier,monospace">touchstart</span>, <span style="font-family: Courier New,Courier,monospace">touchmove</span>, and <span style="font-family: Courier New,Courier,monospace">touchend</span> 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);
+}
+</pre>
+</li>
+
+<li>
+<p>Handle the events:</p>
+<ul><li>At touch start, an arc is drawn in case of a single tap performed by the user.</li>
+<li>On touch move, a line is drawn trough the touch path with a given width and color.
+<p>The <span style="font-family: Courier New,Courier,monospace">drawPath</span> array stores the order of the triggered touch events, which are used to draw a line that follows the finger.</p></li>
+<li>At touch end, the touch event is removed from the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array, stopping the line drawing.</li></ul>
+
+<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 - header.offsetHeight,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strokeWidth / 2,
+&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;Math.PI * 2,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true);
+&nbsp;&nbsp;&nbsp;context.closePath();
+&nbsp;&nbsp;&nbsp;context.fill();
+}
+
+function onCanvasTouchEnd(ev) 
+{
+&nbsp;&nbsp;&nbsp;var touch = ev.changedTouches[0];
+
+&nbsp;&nbsp;&nbsp;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 + 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 + 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();
+}
+</pre>
+</li>
+</ol></li></ol>
+
+
+
+<h2 id="feature" name="feature">Using Drawing Features</h2>
+
+
+  <h3 id="thick" name="thick">Changing the Line Thickness</h3> 
+  <ol class="tutorstep"> 
+   <li>options.js Source File 
+<p>The user changes the line thickness using a slider. The new slider value is set as the width of the <span style="font-family: Courier New,Courier,monospace">preview</span> element, as well as a value in the <span style="font-family: Courier New,Courier,monospace">options</span> object.</p>
+<pre class="prettyprint">function onRangeChange(ev) 
+{
+&nbsp;&nbsp;&nbsp;setPreviewHeight(ev.target.value);
+}
+function setPreviewHeight(value) 
+{
+&nbsp;&nbsp;&nbsp;preview.style.height = value + 'px';
+}
+function setOptionValues() 
+{
+&nbsp;&nbsp;&nbsp;options.setStrokeWidth(range.value);
+}
+</pre>
+</li>
+<li>main.js Source File   
+<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();
+}
+
+context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
+</pre>
+</li></ol>
+
+<h3 id="color" name="color">Changing the Line Color</h3> 
+  <ol class="tutorstep"> 
+   <li>options.js Source File
+<p>The user changes the line color by selecting it from the color picker. The new color is set as the <span style="font-family: Courier New,Courier,monospace">preview</span> element background, as well as a value in the <span style="font-family: Courier New,Courier,monospace">options</span> object.</p>
+<pre class="prettyprint">
+function onWhiteTap() 
+{
+&nbsp;&nbsp;&nbsp;preview.style.backgroundColor = &#39;#fff&#39;;
+}
+
+function setOptionValues() 
+{
+&nbsp;&nbsp;&nbsp;o.setStrokeColor(preview.style.backgroundColor);
+}
+</pre>
+</li>
+<li>main.js Source File
+<p>During drawing, the selected color is applied to the line being drawn.</p>
+<pre class="prettyprint">
+function getOptionValues() 
+{
+&nbsp;&nbsp;&nbsp;strokeColor = o.getStrokeColor();
+}
+
+context.strokeStyle = strokeColor;
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
new file mode 100644 (file)
index 0000000..d704753
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
@@ -0,0 +1,392 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Controlling Touch Events</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#handle" class="opensection">Handling Touch Events</a></li>
+                       <li><a href="#retrieve" class="opensection">Retrieving the Event Point Occurrence</a></li>
+                       <li><a href="#control" class="opensection">Controlling Multi-point Touches</a></li>
+                       <li><a href="#enhance" class="opensection">Enhancing Touch Responsiveness</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/touch_w.htm">Touch Events version 1 Guide</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>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Touch Events version 1: Controlling Touch Events</h1>
+<div class="cont"><div class="static-cont">    
+
+ <p>This tutorial demonstrates how you can use touch events in Tizen.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Touch Events version 1 API basics by learning about:</p>
+
+<ul>
+<li><a class="opensection" href="#handle">Handling Touch Events</a>
+<p>Define an element for triggering touch events and the event handlers for reacting to the events.</p></li>
+
+<li><a class="opensection" href="#retrieve">Retrieving the Event Point Occurrence</a>
+<p>Retrieve the position of the move touch events.</p></li>
+
+<li><a class="opensection" href="#control">Controlling Multi-point Touches</a>
+<p>Handle multiple concurrent touch events.</p></li>
+</ul>
+
+<h2>Task in Mobile Applications</h2>
+<p>In the <a href="task_touch_paint_mw.htm">Touch Paint</a> task, we will walk through drawing a simple image by using touch events and canvas elements.</p>
+
+<h2>Task in Wearable Applications</h2>
+<p>In the <a href="task_touch_paint_ww.htm">Touch Paint</a> task, we will walk through drawing a simple image by using touch events and canvas elements.</p>
+
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of Touch Events version 1 API, we can now move on to more advanced tasks, including:</p>
+<ul>
+<li><a class="opensection" href="#enhance">Enhancing Touch Responsiveness</a>
+<p>Enhance touch responsiveness to improve performance.</p></li>
+  </ul>
+           
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="handle" name="handle" class="items-tit-h2">Handling Touch Events</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <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; alt=&quot;Tizen logo&quot;&gt;
+&lt;/div&gt;
+&lt;div id=&quot;log&quot;&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;log.innerHTML = &quot;&lt;p&gt;Touch Event: touchstart&lt;/p&gt;&quot;;
+&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;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchend&lt;/p&gt;&quot;;
+&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;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchmove&lt;/p&gt;&quot;;
+&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;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchcancel&lt;/p&gt;&quot;;
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre>
+</li></ol>
+
+<p>Depending on the touch type, different touch events occur:</p>
+<ul class="ul">
+<li>When the user touches the element, 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 class="figure">Figure: Simple touch (in mobile applications only)</p> 
+<p style="text-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 <span style="font-family: Courier New,Courier,monospace">touchstart</span>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <span style="font-family: Courier New,Courier,monospace">touchend</span> events occur. 
+
+<p class="figure">Figure: Moving touch (in mobile applications only)</p> 
+<p style="text-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 <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
+
+<p class="figure">Figure: Cancelling touch with long press (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Cancelling touch with long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
+</li>
+</ul>
+
+<table class="note">
+                       <tbody>
+                               <tr>
+                                       <th class="note">Note</th>
+                               </tr>
+                               <tr>
+                                       <td class="note">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 <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> 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;if (event.touches.length &gt;= 1) 
+&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;e.preventDefault(); /* Prevent default scroll action */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre></td>
+</tr>
+</tbody>
+</table>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving the Event Point Occurrence</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <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&gt;
+&lt;div id=&quot;log&quot;&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;}
+&lt;/script&gt;
+</pre>
+
+<p>Each time the <span style="font-family: Courier New,Courier,monospace">touchmove</span> 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 <span style="font-family: Courier New,Courier,monospace">touchmove</span> events to determine the movement direction.  
+</p>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="control" name="control" class="items-tit-h2">Controlling Multi-point Touches</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <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;
+</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 = (e.touches.item(0).pageX + e.touches.item(1).pageX - width) / 2 + &quot;px&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.style.top = (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;}    
+&lt;/script&gt;
+</pre>
+
+<p>When a touch events is triggered, its details, such as the event coordinates, identification number, and the subject of the touch, are stored in the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface instance. To access the details, the <span style="font-family: Courier New,Courier,monospace">touches.item()</span> method can be used in an array format.</p>
+<p>A multi-point touch event refers to additional instances being pushed to the <span style="font-family: Courier New,Courier,monospace">touches.item(index)</span> array. For example, the first touch event is pushed to <span style="font-family: Courier New,Courier,monospace">touches.item(0)</span>, and if a second touch event is triggered without removing the first finger from the screen, the second event is pushed to <span style="font-family: Courier New,Courier,monospace">touches.item(1)</span>.
+</p>
+</li>
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="enhance" name="enhance" class="items-tit-h2">Enhancing Touch Responsiveness</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <p>To avoid having a delay in the single tap gesture, you can make the page unscalable, or modify touch responses:</p>
+
+<ul class="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 <span style="font-family: Courier New,Courier,monospace">viewport</span> 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;</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 class="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 <span style="font-family: Courier New,Courier,monospace">touchmove()</span> 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;script&gt;
+&nbsp;&nbsp;&nbsp;var moved = false;
+
+&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;touchstart&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moved = false;
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;touchmove&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moved = true;
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;touchend&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!moved)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#log&#39;).innerHTML = &quot;Test link is clicked!&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;</pre>
+<p>To avoid activating the click event after the touch event, set the return type to <span style="font-family: Courier New,Courier,monospace">false</span>.</p></li>
+<li> You can also use the <span style="font-family: Courier New,Courier,monospace">vclick</span> event provided by jQuery Mobile. The <span style="font-family: Courier New,Courier,monospace">vclick</span> 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;script&gt;
+&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;vclick&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#log&#39;).html(&quot;Test link is clicked!&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;</pre>
+</li>
+</ul></li></ul> 
+                       </div>
+               </li>
+               
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm
new file mode 100644 (file)
index 0000000..3d371a0
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm
@@ -0,0 +1,173 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing the Vibration Mechanism</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#manage" class="opensection">Managing Vibrations</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/vibration_w.htm">Vibration Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#vibration">Vibration API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#vibration">Vibration API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Vibration: Managing the Vibration Mechanism</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage the vibration mechanism on a device.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Vibration API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#manage">Managing Vibrations</a>
+<p>Launch and stop vibrations with or without patterns.</p></li></ul>
+   
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="manage" name="manage" class="items-tit-h2">Managing Vibrations</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+                       <p>To enhance the user interaction with the device, you must learn to manage vibrations:</p>
+
+<ol>
+<li>To launch a vibration for a given length of time, call the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method, which is implemented by all <span style="font-family: Courier New,Courier,monospace">Navigator</span> instances:
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+&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;
+    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+&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;}
+</pre></pre>
+</li>
+<li>To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> 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;} 
+</pre>
+</li>
+<li>To stop the vibration before it ends naturally, use the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method with <span style="font-family: Courier New,Courier,monospace">0</span> or <span style="font-family: Courier New,Courier,monospace">[]</span> 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;} 
+</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;/html&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/vibration_api" target="_blank">vibration_tutorial.html</a></li>
+ </ul>
+       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm
new file mode 100644 (file)
index 0000000..d78ed0c
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm
@@ -0,0 +1,238 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Animations Module Level 3: Creating Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create" class="opensection">Creating a Logo Animation</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/animation_w.htm">CSS Animations Module Level 3 Guide</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Animations Module Level 3: Creating Animations</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can create animations in your application.</p>
+
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Animations Module Level 3 API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#create">Creating a Logo Animation</a> 
+<p>Animate the Tizen logo on the screen.</p></li>
+</ul>   
+
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating a Logo Animation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <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 Emulator) is switched on:</p>
+
+<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>
+</ol>
+<p class="figure">Figure: Logo animation (in mobile applications only)</p> 
+<p style="text-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&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;}
+.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;} 
+
+.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%}
+.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);}
+.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
+.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%;}
+</pre>
+</li>
+<li>Create the animation:
+<ol>
+<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.
+<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>
+<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;
+}
+</pre>
+</li>
+<li>Create the keyframes to implement the flow for the Tizen logo:
+<ul class="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> 
+<p></p>
+<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;}
+}
+</pre>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">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.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li>Create the keyframes to implement the flow for each letter in the word &quot;TIZEN&quot;:
+<ul class="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>
+<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
+</ul>
+
+<p>To show the letters one at a time, the timing is pushed back a bit more for each consecutive letter:</p>
+<pre class="prettyprint">
+&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;}
+}
+
+&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;}
+}
+
+&lt;!--Remaining letters--&gt;
+</pre></li>
+
+<li><p>After creating all the keyframes, define the <span style="font-family: Courier New,Courier,monospace">animation-name</span> property for each element:</p>
+<pre class="prettyprint">
+.tizen-txt.t 
+{
+&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-t;
+}
+.tizen-txt.i 
+{
+&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-i;
+}
+</pre></li>
+
+</ol></li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_practical.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_e.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_i.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_n.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_t.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_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_animations_module_level_3/images/" target="_blank">txt_z.png</a></li>
+ </ul>
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm
new file mode 100644 (file)
index 0000000..c449556
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm
@@ -0,0 +1,152 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create" class="opensection">Creating Backgrounds</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/background_w.htm">CSS Backgrounds and Borders Module Level 3 Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can create a background for your application.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Backgrounds and Borders Module Level 3 API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#create">Creating Backgrounds</a> 
+<p>Create a multilayer background with the parallax effect.</p></li>
+</ul>   
+
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating Backgrounds</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 class="figure">Figure: Background with the parallax effect</p> 
+<p style="text-align:center;"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p> 
+
+<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.
+
+<p style="text-align:center;"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../../images/css_bg_tutorial2.png" /></p> </li>
+
+<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id=&quot;parallelexample&quot;</span> 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;
+</pre></li>
+
+<li>Define the needed styles for the  <span style="font-family: Courier New,Courier,monospace">div</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section using the <span style="font-family: Courier New,Courier,monospace">parallelexample</span> ID.
+<p>Define a background using the prepared images in the correct order. The images are shown in the order they have been added, with the first image on the topmost layer. Use the same order when defining the background position for each image.</p>
+<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;
+}
+</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 <span style="font-family: Courier New,Courier,monospace">div</span> element. To determine the position value change, add an <span style="font-family: Courier New,Courier,monospace">onchange</span> 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 = layer1 +&#39;em 8em, &#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;+ layer2 + &#39;em 4em, center top&#39;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">css_background.html</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">dot.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">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>
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm
new file mode 100644 (file)
index 0000000..5451059
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm
@@ -0,0 +1,217 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#selector" class="opensection">Using Pseudo-element Selectors</a></li>
+                       <li><a href="#boxmodel" class="opensection">Using Box Model Properties</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI) Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can change the Web form UI and control the box model in HTML documents.</p>
+
+<h2 id="warm-up" name="warm-up">Warm-up</h2>
+<p>Become familiar with the CSS Basic User Interface Module Level 3 (CSS3 UI) API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#selector">Using Pseudo-element Selectors</a><p>Change the Web Form UI using a CSS3 pseudo-class based on the user actions.</p></li>
+<li><a class="opensection" href="#boxmodel">Using Box Model Properties</a><p>Use the box model properties to control the box model.</p></li>
+</ul>  
+
+
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="selector" name="selector" class="items-tit-h2">Using Pseudo-element Selectors</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>
+<pre class="prettyprint">input: enabled {border: 1px solid blue}
+input: disabled {border: 1px solid red}</pre>
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In the versions prior to CSS3, pseudo-elements, such as <span style="font-family: Courier New,Courier,monospace">:hover</span>, <span style="font-family: Courier New,Courier,monospace">:active</span>, and <span style="font-family: Courier New,Courier,monospace">:focus</span>, were used, and required an attribute selector. Since the <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span> classes are not influenced by the <span style="font-family: Courier New,Courier,monospace">display</span> and <span style="font-family: Courier New,Courier,monospace">visibility</span> attributes, they improve the accessibility.</td> 
+      </tr> 
+     </tbody> 
+   </table></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 <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes. 
+<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
+<pre><pre class="prettyprint" style="border:0px">
+&lt;!-- HTML --&gt;
+&lt;input type=&quot;number&quot; step=&quot;10&quot; min=&quot;10&quot; max=&quot;100&quot;&gt;
+</pre>
+<pre class="prettyprint lang-js" style="border:0px">
+/* css */
+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%}
+</pre></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 <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)
+<pre><pre class="prettyprint" style="border:0px">
+&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: &lt;input type=&quot;Password&quot; placeholder=&quot;required area&quot; required&gt;&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;/fieldset&gt;</pre>
+<pre class="prettyprint lang-js" style="border:0px">
+/* css */
+input: required, textarea: required {border: 1px solid red}
+input: optional, textarea: optional {border: 1px solid #777}
+</pre></pre>
+<p align="center"><img alt="Required and optional elements (in mobile applications only)" src="../../../images/pseudo_elements_selector_required.png"/></p></li></ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <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>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="boxmodel" name="boxmodel" class="items-tit-h2">Using Box Model Properties</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application, you must learn how to use box model properties:</p> 
+<table>
+<tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The properties dependent on mouse and keyboard functions are not discussed in this tutorial.</td> 
+      </tr> 
+     </tbody> 
+   </table>
+<ol>
+<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.
+<pre class="prettyprint">
+div.content-box {box-sizing: content-box} /* width (height) = content */
+div.border-box {box-sizing: border-box} /* width (height) = content + padding + border */
+div.border-box: before {height: 40px}
+</pre></li>
+
+<li>To draw an outline without using up the area, use the <span style="font-family: Courier New,Courier,monospace">outline</span> property:
+<pre class="prettyprint">
+.Test-Box {outline: 5px dashed red}
+.outline: before {outline: 2px dashed red}
+.outline-offset: before {outline-offset: 35px}
+</pre></li>
+
+<li>To handle text that exceeds the area of the box model, use the <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property. The <span style="font-family: Courier New,Courier,monospace">text-overflow: ellipsis</span> property is used to indicate the text exceeded the padding area as &#39;...&#39;.
+<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;
+}
+
+.clip {text-overflow: clip}
+.ellipsis {text-overflow: ellipsis}</pre></li>
+</ol>
+
+<p>The following figure illustrates the box model properties; from left to right, it shows the effects of the box sizing, outline, and text overflow properties.</p>
+<p class="figure">Figure: Box model properties (in mobile applications only)</p>
+<p align="center"><img alt="Box model properties (in mobile applications only)" src="../../../images/box_model_properties.png"/></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">box_sizing_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">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>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm
new file mode 100644 (file)
index 0000000..cc1e5b7
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm
@@ -0,0 +1,168 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Color Module Level 3: Specifying Color and Opacity</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create" class="opensection">Creating a Color Generator</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/dom/color_w.htm">CSS Color Module Level 3 Guide</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Color Module Level 3: Specifying Color and Opacity</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can manage colors in your application.</p>
+ 
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Color Module Level 3 API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#create">Creating a Color Generator</a> 
+<p>Create a HSLA color generator to set the color value for an element in the HSLA format.</p></li>
+</ul>   
+
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating a Color Generator</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 class="figure">Figure: HSLA color generator</p> 
+<p style="text-align:center;"><img alt="HSLA color generator" src="../../../images/css_color_tutorial1.png" /></p>
+
+
+
+<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
+<ul class="ul">
+<li>The first input has a range of 0 - 360 and represents hue.</li>
+<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>
+<li>The last input has a range of 0 - 10 and represents alpha transparency.
+<p>The range should be 0.1 - 1, but the minimum value of the <span style="font-family: Courier New,Courier,monospace">min</span> 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;
+
+&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;
+
+&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;
+
+&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;
+
+&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;/div&gt;
+</pre></li>
+<li>Obtain the values from the slider inputs with the <span style="font-family: Courier New,Courier,monospace">getElementById</span> 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;
+</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;;
+
+/* Set the color of the box */
+cBox = document.querySelector(&#39;#color-box&#39;),
+
+/* Set the text */
+tBox = document.querySelector(&#39;#text-box&#39;);
+</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;);
+                       
+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;}
+}
+</pre></li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>   
+ </ul>
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm
new file mode 100644 (file)
index 0000000..fa5d21a
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>DOM, Forms and Styles: Managing CSS Styles and HTML Forms</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DOM, Forms and Styles: Managing CSS Styles and HTML Forms</h1>
+
+       <p>The DOM, forms and styles tutorials demonstrate how you can manage CSS style and HTML5 form features in all Tizen Web applications:</p> 
+  <ul> 
+   <li><a href="animation_tutorial_w.htm">CSS Animations Module Level 3: Creating Animations</a> <p>Demonstrates how you can create animations.</p></li>  
+   <li><a href="background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</a> <p>Demonstrates how you can create multilayer backgrounds.</p></li> 
+   <li><a href="basic_ui_tutorial_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</a> <p>Demonstrates how you can apply styles to HTML documents.</p></li>
+   <li><a href="color_tutorial_w.htm">CSS Color Module Level 3: Specifying Color and Opacity</a> <p>Demonstrates how you can use colors on the screen.</p></li> 
+   <li><a href="flexible_tutorial_w.htm">CSS Flexible Box Layout Module: Adjusting the Layout</a> <p>Demonstrates how you can create flexible box layouts.</p></li> 
+   <li><a href="transform_tutorial_w.htm">CSS Transforms: Manipulating Elements</a> <p>Demonstrates how you can create animations with transforms.</p></li> 
+   <li><a href="transition_tutorial_w.htm">CSS Transitions Module Level 3: Changing Element Styles</a> <p>Demonstrates how you can use transitions.</p></li>
+   <li><a href="font_tutorial_w.htm">CSS Fonts Module Level 3: Manipulating Fonts</a> <p>Demonstrates how you can modify fonts.</p></li> 
+   <li><a href="text_module_tutorial_w.htm">CSS Text Module Level 3: Manipulating Text</a> <p>Demonstrates how you can manipulate and transform text.</p></li> 
+   <li><a href="woff_tutorial_w.htm">WOFF File Format 1.0: Changing Fonts Using WOFF</a> <p>Demonstrates how you can modify fonts with WOFF.</p></li> 
+   <li><a href="html5forms_tutorial_w.htm">HTML5 Forms: Managing User Input</a> <p>Demonstrates how you can use Web forms in HTML5.</p></li>
+   <li><a href="media_query_tutorial_w.htm">Media Queries: Labeling Output Devices in Style Sheets</a> <p>Demonstrates how you can define media queries to determine the styles to be used in the Web document.</p></li> 
+   <li><a href="selector_tutorial_w.htm">Selectors API Level 1 and Level 2: Selecting DOM Elements</a> <p>Demonstrates how you can select elements on an HTML page.</p></li>
+   <li><a href="session_history_tutorial_w.htm">HTML5 session history of browsing contexts: Managing Browsing Contexts</a><p>Demonstrates how you can store and use session history details.</p></li>   
+   </ul>       
+
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="multi_tutorial_w.htm">CSS Multi-column Layout Module: Creating Multi-column Layouts</a> <p>Demonstrates how you can create multi-column layouts.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm
new file mode 100644 (file)
index 0000000..f39ac9d
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm
@@ -0,0 +1,398 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Adjusting the Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#usecont" class="opensection">Using the Flex Container</a></li>
+                       <li><a href="#item" class="opensection">Using the Flex Items</a></li>
+                       <li><a href="#create" class="opensection">Creating a Flexible Layout with CSS3</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/flexible_w.htm">CSS Flexible Box Layout Module Guide</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Flexible Box Layout Module: Adjusting the Layout</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can create a flexible box layout.</p>
+  
+
+<h2 id="warm-up" name="warm-up">Warm-up</h2>
+<p>Become familiar with the CSS Flexible Box Layout Module API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#usecont">Using the Flex Container</a><p>Assign a flexible area and align flex items within the area.</p></li>
+<li><a class="opensection" href="#item">Using the Flex Items</a><p>Set the properties of the flex items included in the flexible area.</p></li>
+</ul>
+
+<h2 id="follow-up" name="follow-up">Follow-up</h2>
+<p>Once we have learned the basics of the CSS Flexible Box Layout Module API, we can now move on to more advanced tasks, including:</p>
+<ul>
+<li><a class="opensection" href="#create">Creating a Flexible Layout with CSS3</a><p>Use CSS3 to create a flexible box layout for your application.</p></li>
+</ul>
+                       
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="usecont" name="usecont" class="items-tit-h2">Using the Flex Container</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
+
+<ol>
+<li>Assign the area (flex container) where the flexible box layout is applied by using the <span style="font-family: Courier New,Courier,monospace">display: flex</span> property:
+<pre class="prettyprint">&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.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&gt;</pre>
+
+<p>The child nodes within the assigned flex container become flex items.</p>
+</li>
+<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>
+<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>
+<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>
+<li><span style="font-family: Courier New,Courier,monospace">column-reverse</span>: Align from bottom to top.</li>
+</ul></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>
+</ul></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>
+<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>
+<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>
+<li><span style="font-family: Courier New,Courier,monospace">space-between</span>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>
+<li><span style="font-family: Courier New,Courier,monospace">space-around</span>: Creates equal gaps between all items.</li>
+</ul>
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">This property is similar to <span style="font-family: Courier New,Courier,monospace">text-align</span>, but the alignment direction and the starting point are based on the <span style="font-family: Courier New,Courier,monospace">flex-direction</span> and <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> properties.</td> 
+      </tr> 
+     </tbody> 
+   </table></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>
+</ul></li>
+<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>
+<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>
+<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>
+<li><span style="font-family: Courier New,Courier,monospace">baseline</span>: Aligns the items vertically to the baseline.</li>
+<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the height of the flex items and aligns them without gaps.</li>
+</ul>
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property is set to <span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>, the start and end points of the alignment are reversed.</td> 
+      </tr> 
+     </tbody> 
+   </table></li></ul></li></ol>
+<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
+<p class="figure">Figure: Flex container properties (in mobile applications only)</p> 
+<p style="text-align: center;"><img alt="Flex container properties (in mobile applications only)" src="../../../images/flexcontainer_properties.png"/></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <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_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_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>  
+ </ul>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="item" name="item" class="items-tit-h2">Using the Flex Items</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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}
+&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&gt;</pre>
+</li>
+
+<li><p>Define the necessary properties for the flex items:</p>
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If both the <span style="font-family: Courier New,Courier,monospace">align-self</span> and <span style="font-family: Courier New,Courier,monospace">align-items</span> properties are used simultaneously, the <span style="font-family: Courier New,Courier,monospace">align-items</span> property is ignored.</td> 
+      </tr> 
+     </tbody> 
+   </table></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li> 
+<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
+<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>
+</ul></li></ul></li></ol>
+<p>The following figure shows examples of how flex items can be placed and sized within a flex container.</p>
+<p class="figure">Figure: Flex items (in mobile applications only)</p>
+<p align="center"><img alt="Flex items (in mobile applications only)" src="../../../images/flexitem_properties.png"/></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="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>           
+ </ul>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating a Flexible Layout with CSS3</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 &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&gt;</pre></li>
+
+<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)
+<pre class="prettyprint">/* Border for the article areas */
+.container article &gt; * {border: 1px solid #ccc;}
+
+/* Font style for the article area titles */
+.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;
+}
+
+/* List styles */
+.container .events &gt; ul, .container .schedule .img_list  
+{
+&nbsp;&nbsp;&nbsp;height: 100%; 
+&nbsp;&nbsp;&nbsp;padding: 10px;
+}
+
+/* Text style for the text list item title */
+.container .events &gt; ul &gt; li .title 
+{
+&nbsp;&nbsp;&nbsp;color: #51809e;
+&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #000;
+}
+
+/* Text style for the text list item location info */
+.container .events &gt; ul &gt; li .title .local 
+{
+&nbsp;&nbsp;&nbsp;text-indent: 10px;
+&nbsp;&nbsp;&nbsp;text-shadow: 0 0 0 #fff;
+}
+
+/* Styles for the text list item date box */
+.container .events &gt; ul &gt; li .date 
+{
+&nbsp;&nbsp;&nbsp;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);
+}
+.container .events &gt; ul &gt; li .date &gt; span 
+{
+&nbsp;&nbsp;&nbsp;background-color: #fff;
+&nbsp;&nbsp;&nbsp;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>
+
+
+<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:
+<ol>
+<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:
+<ul class="ul">
+<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>
+<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>
+<p>(The following figure applies to mobile applications only.)</p>
+<pre class="prettyprint">/* Flexible alignment of text list */
+.container .events &gt; ul &gt; li 
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
+}
+.container .events &gt; ul &gt; li: first-child 
+{
+&nbsp;&nbsp;&nbsp;margin-top: 0;
+}
+
+.container .events &gt; ul &gt; li .date 
+{
+&nbsp;&nbsp;&nbsp;-webkit-flex: 0 0 20%;
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+
+/* Flexible alignment of icon list */
+.container .schedule .img_list 
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;-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_allignment.png"/></p></li>
+
+
+<li>Special consideration can be given for some screen sizes. The following example defines a specific layout for small screens (where the screen width is less than 390 pixels). (The following figure applies to mobile applications only.)
+<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;}
+}</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>
+<p>For more information on defining screen-size-specific rules, see <a href="../../../../../org.tizen.guides/html/web/w3c/dom/media_query_w.htm">Media Queries</a>.</p>
+</li></ol></li></ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <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>        
+ </ul>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm
new file mode 100644 (file)
index 0000000..493f559
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm
@@ -0,0 +1,243 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Fonts Module Level 3: Manipulating Fonts</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#font" class="opensection">Manipulating Fonts</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/font_w.htm">CSS Fonts Module Level 3 Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Fonts Module Level 3: Manipulating Fonts</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can modify fonts.</p>
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Fonts Module Level 3 API basics by learning about:</p>
+<ul>
+<li><a href="#font" class="opensection" >Manipulating Fonts</a> 
+<p>Control the appearance of text using the CSS font properties.</p></li>
+</ul>  
+       
+   <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+    <!-- Folds -->
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="font" name="font" class="items-tit-h2">Manipulating Fonts</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+            <p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
+
+<ol>
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-style</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to apply different font styles:</p>
+
+<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;/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;/body&gt;
+</pre>
+
+</li>
+
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-weight</span> property,
+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;/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;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-variant</span> property to
+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;/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;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-size</span> 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;/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;/body&gt;
+&lt;/html&gt;
+</pre>
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">line-height</span> 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;/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;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-family</span> property, which assigns a specific font or its representative to an element. The list order within the <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element determines the property priority.
+<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;/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;/body&gt;
+&lt;/html&gt;
+</pre>
+</li>
+</ol>
+
+
+<p>The following figure shows examples of manipulating the text font properties.</p>
+<p class="figure">Figure: Font properties (in mobile applications only)</p>
+<p style="text-align: center;"><img alt="Font properties (in mobile applications only)" src="../../../images/font_properties.png"/></p>
+
+   <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">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>.</td>
+    </tr>
+   </tbody>
+  </table>
+            </div>
+        </li>
+
+          
+
+
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm
new file mode 100644 (file)
index 0000000..efeaf7f
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm
@@ -0,0 +1,235 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Managing User Input</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#basic" class="opensection">Creating a Basic Login Form</a></li>
+                       <li><a href="#advanced" class="opensection">Creating an Advanced Login Form</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/html5forms_w.htm">HTML5 Forms Guide</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>HTML5 Forms: Managing User Input</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can implement Web forms with HTML5.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML5 Forms API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#basic">Creating a Basic Login Form</a>
+<p>Create a login form with mandatory fields, validity checks, and hint texts.</p></li>
+
+<li><a class="opensection" href="#advanced">Creating an Advanced Login Form</a>
+<p>Create a login form with autofocus, autocompletion, password security, and specific input value patterns.</p></li>
+</ul>
+    
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="basic" name="basic" class="items-tit-h2">Creating a Basic Login Form</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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;
+    
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
+&lt;/form&gt;
+</pre></li>
+<li><p>To check the validity of the entered email address automatically, add the <span style="font-family: Courier New,Courier,monospace">required</span> attribute to the <span style="font-family: Courier New,Courier,monospace">input</span> element with the <span style="font-family: Courier New,Courier,monospace">email</span> type:</p>
+<pre class="prettyprint">
+&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;
+</pre></li>
+<li><p>Define the password field as mandatory by using the <span style="font-family: Courier New,Courier,monospace">required</span> attribute in that <span style="font-family: Courier New,Courier,monospace">input</span> element too:</p>
+<pre class="prettyprint">
+&lt;label&gt;password: &lt;input type=&quot;password&quot; 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 <span style="font-family: Courier New,Courier,monospace">placeholder</span> 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;
+</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&gt;
+</pre>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="advanced" name="advanced" class="items-tit-h2">Creating an Advanced Login Form</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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&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 <span style="font-family: Courier New,Courier,monospace">autofocus</span> attribute:</p>
+<pre class="prettyprint">
+&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus&gt;
+</pre></li>
+
+<li>
+<p>To spare the user from filling in information that they have given previously, use the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute, which shows the previously successfully inserted entries in a <span style="font-family: Courier New,Courier,monospace">datalist</span>, from which the user can select and use them.</p>
+<p>You can apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to  a specific field by adding it to the appropriate <span style="font-family: Courier New,Courier,monospace">input</span> element. If you add it to the <span style="font-family: Courier New,Courier,monospace">form</span> 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;
+</pre>
+</li>
+<li><p>In general, apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to the <span style="font-family: Courier New,Courier,monospace">form</span> element, and then separately set it to <span style="font-family: Courier New,Courier,monospace">off</span> 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;
+</pre>
+</li>
+<li><p>Protect the password with private and public key pair using the <span style="font-family: Courier New,Courier,monospace">keygen</span> 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> 
+
+<pre class="prettyprint">
+&lt;keygen name=&quot;keyvalue&quot;&gt;
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute to perform a validity check that ensures that the password field value matches the given regular expression. The <span style="font-family: Courier New,Courier,monospace">required</span> 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> 
+
+<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;
+</pre></li>
+<li><p>Define the required length of the password within the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute. </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;
+</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&gt;
+</pre>
+                       </div>
+               </li>
+               
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm
new file mode 100644 (file)
index 0000000..0a9a25b
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm
@@ -0,0 +1,191 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Labeling Output Devices in Style Sheets</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create" class="opensection">Creating a Liquid Layout</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/media_query_w.htm">Media Queries Guide</a></li>
+                       <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>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Queries: Labeling Output Devices in Style Sheets</h1>
+<div class="cont"><div class="static-cont">    
+  
+<p>This tutorial demonstrates how you can define media queries to determine the styles to be used in the Web document.</p>
+ 
+ 
+ <h2>Warm-up</h2>
+<p>Become familiar with the Media Queries API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#create">Creating a Liquid Layout</a> 
+<p>Create a liquid document layout that organically changes according to the device resolution.</p></li>
+</ul>   
+                       
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating a Liquid Layout</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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>
+
+
+<ol>
+<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;/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&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;
+}
+.container aside 
+{
+&nbsp;&nbsp;&nbsp;-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;
+}
+.contents h2 
+{
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+}
+</pre>
+
+<p style="text-align:center;"><img alt="Fixed layout example (in mobile applications only)" src="../../../images/media_queries1.png" /></p>
+<p>The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the <strong>Aside</strong> area at the bottom of the screen, but those changes then decrease legibility on a wider screen.</p>
+
+</li>
+<li>
+<p>To solve the problem, use a media query to define a liquid layout that changes according to the screen resolution:</p>
+
+<pre class="prettyprint">
+@media all and (max-width: 480px) and (orientation: portrait) 
+{
+&nbsp;&nbsp;&nbsp;.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;}
+}
+</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 style="text-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.
+</p>
+
+<p>The following conditions are generally used and cover all possibilities up to a Web browser in a PC:</p>
+<pre class="prettyprint">
+&lt;!--Portrait mode of a smart phone--&gt;
+@media screen and (max-width: 480px) 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;}
+
+&lt;!--Tablet and a small laptop--&gt;
+@media screen and (min-width: 768px) and (max-width: 1024px) {&lt;!--Specific layout--&gt;}
+
+&lt;!--PC browser--&gt;
+@media screen and (min-width: 1024px) {&lt;!--Specific layout--&gt;}
+@media print {&lt;!--Specific layout--&gt;}
+</pre></li>
+
+</ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <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>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm
new file mode 100644 (file)
index 0000000..43e6761
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm
@@ -0,0 +1,516 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Creating Multi-column Layouts</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#basic" class="opensection">Creating a Basic Layout</a></li>
+                       <li><a href="#dynamic" class="opensection">Creating a Layout with Dynamic Content</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module Guide</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Multi-column Layout Module: Creating Multi-column Layouts</h1>
+<div class="cont"><div class="static-cont">    
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>This tutorial demonstrates how you can create a layout with multiple columns in your application.</p>
+
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Multi-column Layout API basics by learning about:</p>
+<ul>
+<li><a href="#basic">Creating a Basic Layout</a> 
+<p>Build a basic graphic user interface (GUI) that uses the CSS column properties.</p></li>
+</ul>
+
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of CSS Multi-column Layout API, we can now move on to more advanced tasks, including:</p>
+<ul>
+<li><a href="#dynamic">Creating a Layout with Dynamic Content</a> 
+<p>Build a GUI with a changing amount of data displayed in multiple columns.</p></li>
+</ul>  
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="basic" name="basic" class="items-tit-h2">Creating a Basic Layout</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 basic layout using CSS:</p>
+
+<ol>
+<li>
+<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;/body&gt;
+</pre></li>
+
+<li>Set the CSS column properties:
+<ol>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>
+
+<pre class="prettyprint">
+article 
+{
+&nbsp;&nbsp;&nbsp;width: 80vw;
+&nbsp;&nbsp;&nbsp;column-width: 119px;
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 119px;
+
+&nbsp;&nbsp;&nbsp;margin: 2vh 5vw;
+&nbsp;&nbsp;&nbsp;padding: 2vh 5vw;
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> 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>
+<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <span style="font-family: Courier New,Courier,monospace">width</span> attribute value reduced by <span style="font-family: Courier New,Courier,monospace">padding</span>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property to set the distance between columns:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;column-gap: 10px;
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 10px;
+</pre>
+</li>
+<li>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) 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;
+}</pre>
+
+<p>The rule width does not increase the distance between columns. It is drawn under the column gap and can be even wider than the gap.</p>
+
+</li></ol>
+
+ <p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>
+
+<p class="figure">Figure: Column settings</p> 
+<p style="text-align:center;"><img alt="Column settings" src="../../../images/column_settings.png" /></p>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> 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);
+}
+</pre>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">section</span> elements setting the <span style="font-family: Courier New,Courier,monospace">border-bottom</span> and vertical <span style="font-family: Courier New,Courier,monospace">padding</span> values. It is not necessary to define horizontal padding, as it has been defined for the <span style="font-family: Courier New,Courier,monospace">article</span> element.</p>
+
+<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;
+}
+</pre>
+</li>
+<li>
+<p>Set image elements to have an automatic <span style="font-family: Courier New,Courier,monospace">margin</span> to center them within the column.</p>
+<p>In case of the image whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">figure</span>, set it to be a floating element with text drawn around it.</p>
+
+<pre class="prettyprint">
+img{
+&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;margin: 4px auto;
+}
+
+#figure
+{
+&nbsp;&nbsp;&nbsp;float: right;        
+&nbsp;&nbsp;&nbsp;margin: 4px;
+}
+</pre>
+</li></ol>
+
+<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
+
+<p class="figure">Figure: Basic layout on a 480 x 800 display</p> 
+<p style="text-align:center;"><img alt="Basic layout on a 480 x 800 display" src="../../../images/basic_layout_480x800.png" /></p>
+
+<p class="figure">Figure: Basic layout on a 720 x 1280 display</p> 
+<p style="text-align:center;"><img alt="Basic layout on a 720 x 1280 display" src="../../../images/basic_layout_720x1280.png" /></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up" target="_blank">renamed_index.html</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/css" target="_blank">style.css</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">pinwheel_green.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">pinwheel_yellow.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_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>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="dynamic" name="dynamic" class="items-tit-h2">Creating a Layout with Dynamic Content</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 <span style="font-family: Courier New,Courier,monospace">article</span> element displays the columns, and the <span style="font-family: Courier New,Courier,monospace">nav</span> 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;/body&gt;
+</pre>
+</li>
+<li>Set the CSS properties:
+<ol>
+<li>
+<p>Define the CSS display and column properties:</p>
+<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;
+}
+</pre>
+</li>
+<li>
+<p>Set the <span style="font-family: Courier New,Courier,monospace">article</span>, <span style="font-family: Courier New,Courier,monospace">nav</span> and <span style="font-family: Courier New,Courier,monospace">footer</span> elements in one column using the flexible box layout.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">nav</span> element is also a flexible box layout container to set UI elements in.</p>
+<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%;
+}
+</pre>
+</li>
+<li>
+<p>Define the styles for the <span style="font-family: Courier New,Courier,monospace">a</span> elements within the <span style="font-family: Courier New,Courier,monospace">nav</span> element to make them appear as buttons:</p>
+<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;
+}
+</pre>
+<p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">input</span> element (with the property type set to <span style="font-family: Courier New,Courier,monospace">number</span>) style with an increased height to match the buttons around it:</p>
+<pre class="prettyprint">
+nav input
+{
+&nbsp;&nbsp;&nbsp;width: 50px;
+&nbsp;&nbsp;&nbsp;height: 2em;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element contains the column properties. Use the <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span> property to set the column width. The real width is calculated based on available space.</p>
+<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;
+}
+</pre>
+</li>
+<li>
+<p>Set the images within the <span style="font-family: Courier New,Courier,monospace">article</span> element with a block display to separate them from text:</p>
+<pre class="prettyprint">
+article img 
+{
+&nbsp;&nbsp;&nbsp;margin: 0 auto;
+&nbsp;&nbsp;&nbsp;display: block;
+}
+</pre>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">column-span</span> property as <span style="font-family: Courier New,Courier,monospace">all</span> for the <span style="font-family: Courier New,Courier,monospace">h1</span> elements:</p>
+<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;
+}
+</pre>
+<p> As a result, the <span style="font-family: Courier New,Courier,monospace">h1</span> elements are spread across the columns. When the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">break-inside</span> property as <span style="font-family: Courier New,Courier,monospace">avoid</span> to avoid breaking elements between columns:</p>
+<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;
+}
+</pre>
+</li>
+<li>
+<p>Set the <span style="font-family: Courier New,Courier,monospace">footer</span> size:</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);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Add the JavaScript code to make the content dynamic:
+<ol>
+<li>
+<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 = [&quot;images/pinwheel_green.png&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_WhiteFold_4.png&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/pinwheel_yellow.png&quot;];
+</pre>
+</li>
+<li>
+<p>Declare a variable for the input element for selecting the number of images added to the content:</p>
+<pre class="prettyprint">
+var howManyInput;
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method with the input parameter value to add random images to the column layout and initialize the button events:</p>
+
+<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;};
+};
+</pre>
+</li>
+<li>
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">h1No</span> variable containing the number of <span style="font-family: Courier New,Courier,monospace">h1</span> elements included in the <span style="font-family: Courier New,Courier,monospace">article</span> elements, and one added to next lines.</p>
+
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">newHTML</span> variable to add new content to the column layout. Each added element contains an <span style="font-family: Courier New,Courier,monospace">h1</span> element as a header, and <span style="font-family: Courier New,Courier,monospace">section</span> elements. Include an <span style="font-family: Courier New,Courier,monospace">img</span> element with a text description in each <span style="font-family: Courier New,Courier,monospace">section</span> element to display a random image. The <span style="font-family: Courier New,Courier,monospace">art</span> variable is initialized, and new HTML code (<span style="font-family: Courier New,Courier,monospace">newHTML</span>) is concatenated with the existing one (<span style="font-family: Courier New,Courier,monospace">innerHTML</span>):</p>
+<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;
+}
+</pre>
+</li>
+<li>
+<p>When the user taps the <strong>Remove last Group</strong> button, the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method is called to remove the group of images that was added last. Use the <span style="font-family: Courier New,Courier,monospace">all</span> variable to select all  <span style="font-family: Courier New,Courier,monospace">h1</span> elements in the content using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method. If the <span style="font-family: Courier New,Courier,monospace">last</span> value is less than 0, there is no element to remove. Use the <span style="font-family: Courier New,Courier,monospace">removeNextSibling()</span> method to recursively delete the next sibling element, and the  <span style="font-family: Courier New,Courier,monospace">removeChild()</span> method to remove the <span style="font-family: Courier New,Courier,monospace">h1</span> elements from its parent.</p>
+<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]);
+}
+</pre>
+</li>
+</ol>
+</li></ol>
+<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
+
+<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p> 
+<p style="text-align:center;"><img alt="Dynamic layout on a 480 x 800 display" src="../../../images/dynamic_layout_480x800.png" /></p>
+
+<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p> 
+<p style="text-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>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up" target="_blank">renamed_index.html</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/css" target="_blank">style.css</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/js" target="_blank">main.js</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">pinwheel_green.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">pinwheel_yellow.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">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_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>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm
new file mode 100644 (file)
index 0000000..260c85d
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm
@@ -0,0 +1,256 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Selectors API Level 1 and Level 2: Selecting DOM Elements</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#single" class="opensection">Selecting a Single Node</a></li>
+                       <li><a href="#multi" class="opensection">Selecting Multiple Nodes</a></li>
+                       <li><a href="#create" class="opensection">Creating an Accordion Menu</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/selector_w.htm">Selectors API Level 1 and Level 2 Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors1">Selectors API Level 1 for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors2">Selectors API Level 2 for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors1">Selectors API Level 1 for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors2">Selectors API Level 2 for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Selectors API Level 1 and Level 2: Selecting DOM Elements</h1>
+<div class="cont"><div class="static-cont">    
+
+ <p>This tutorial demonstrates how you can retrieve desired elements from a page and modify them.</p>
+
+  <h2 id="warm-up" name="warm-up">Warm-up</h2>
+  <p>Become familiar with the Selectors API Level 1 and Level 2 basics by learning about:</p>
+  <ul>
+  <li><a class="opensection" href="#single">Selecting a Single Node</a> <p>Select a single element using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method.</p></li>
+  <li><a class="opensection" href="#multi">Selecting Multiple Nodes</a> <p>Select multiple elements using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
+  </ul>
+  <h2 id="follow-up" name="follow-up">Follow-up</h2>
+  <p>Once we have learned the basics of the Selectors API Level 1 and Level 2, we can now move on to more advanced tasks, including:</p>
+  <ul>
+  <li><a class="opensection" href="#create">Creating an Accordion Menu</a> <p>Create a simple accordion menu.</p></li>
+  </ul>
+ 
+ 
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="single" name="single" class="items-tit-h2">Selecting a Single Node</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:</p>
+  <ol>
+  <li>To select the first matching element found in the child nodes, use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> 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 <span style="font-family: Courier New,Courier,monospace">getElementById()</span>, <span style="font-family: Courier New,Courier,monospace">getElementsByTagName()</span>, and <span style="font-family: Courier New,Courier,monospace">getElementsByClassName()</span> methods.
+  <pre class="prettyprint">var obj1 = document.getElementsByTagName(&#39;td&#39;)[0]; /* First &lt;td&gt; element in the document */
+var obj2 = document.getElementById(&#39;foo&#39;); /* Element with the ID #foo */
+var obj3 = document.getElementsByClassName(&#39;bar&#39;)[0]; /* First element in the bar class */
+  
+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 */</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>.</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 <span style="font-family: Courier New,Courier,monospace">&lt;tr&gt;</span> element, which is a child of the <span style="font-family: Courier New,Courier,monospace">&lt;tbody&gt;</span> element in the second <span style="font-family: Courier New,Courier,monospace">&lt;table&gt;</span> element of the document.</p>
+  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2) tbody &gt; tr:nth-child(2) :last-child&#39;);</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;)</pre></li>
+</ol>
+
+<p class="figure">Figure: Single node selection (in mobile applications only)</p> 
+<p style="text-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 class="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>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="multi" name="multi" class="items-tit-h2">Selecting Multiple Nodes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method:
+  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2)&#39;);</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>. The query above selects the second <span style="font-family: Courier New,Courier,monospace">&lt;table&gt;</span> element in the document as a single element.</p>
+</li>
+
+<li>Select multiple elements in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method, and define a variable to represent the length of the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
+<pre class="prettyprint">var targetObj = obj.querySelectorAll(&#39;thead th, tbody td&#39;);
+var i = targetObj.length;</pre>
+<p> The <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> 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 <span style="font-family: Courier New,Courier,monospace">&lt;th&gt;</span> elements in the table head and the <span style="font-family: Courier New,Courier,monospace">&lt;td&gt;</span> elements in the table body.</p>
+ </li> 
+<li>Apply a defined style to all elements stored in the <span style="font-family: Courier New,Courier,monospace">targetObj</span> 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;
+}</pre></li></ol>
+
+  <p class="figure">Figure: Multiple node selection (in mobile applications only)</p> 
+  <p style="text-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 class="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>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="create" name="create" class="items-tit-h2">Creating an Accordion Menu</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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: 
+  <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&gt;</pre></li>
+
+<li>Use <a href="../../../../../org.tizen.guides/html/web/w3c/dom/transition_w.htm">CSS transitions</a> to add sliding effects when content appears:
+<pre class="prettyprint">.accordion  &gt; li  &gt; div 
+{
+&nbsp;&nbsp;&nbsp;padding: 0 15px;
+
+&nbsp;&nbsp;&nbsp;/* Assign time for CSS transformation */
+&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;
+}
+/* Assign styles to be applied in case the current class is added to p.title */
+.accordion  &gt; li  &gt; p.current 
+{
+&nbsp;&nbsp;&nbsp;background: -webkit-linear-gradient(top, #666, #000);
+&nbsp;&nbsp;&nbsp;color: #fff;
+}
+.accordion &gt; li &gt; p.current + div 
+{
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;height: 200px;
+}</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> 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;)) 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;/* Change all classes of the &#39;li p&#39; elements at the bottom of .accordion to title */
+&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;}
+}</pre>
+</li>
+<li>Define the elements that use the accordion menu:
+<pre class="prettyprint">testAccordion(&#39;.accordion&#39;);</pre></li></ol>
+
+ <p class="figure">Figure: Accordion menu (in mobile applications only)</p> 
+  <p style="text-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>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">selector_sample.html</a></li>
+ </ul>
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm
new file mode 100644 (file)
index 0000000..34afe46
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm
@@ -0,0 +1,229 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 session history of browsing contexts: Managing Browsing Contexts</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#Managing_Session_History">Managing Session History Entries</a></li>
+                       <li><a class="opensection" href="#Detecting_Session_History">Detecting Session History Changes</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/session_history_w.htm">HTML5 session history of browsing contexts Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#history">HTML5 session history of browsing contexts API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#history">HTML5 session history of browsing contexts API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 session history of browsing contexts: Managing Browsing Contexts</h1>
+  <div class="cont"><div class="static-cont">
+     <p>This tutorial demonstrates how you can store and use session history details.</p>
+   
+
+    <h2 id="warmup" name="warmup">Warm-up</h2>
+    <p>Become familiar with the HTML5 session history of browsing contexts API basics by learning about:</p>
+    <ul>
+        <li><a class="opensection" href="#Managing_Session_History">Managing Session History Entries</a>
+        <p>Add a new entry to the session history and update its details.</p></li>
+        <li><a class="opensection" href="#Detecting_Session_History">Detecting Session History Changes</a>
+        <p>Register a change event handler and use the event to take advantage of the stored history information.</p></li>
+    </ul>
+         
+ <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+ 
+<ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit"> 
+ <h2 id="Managing_Session_History" name="Managing_Session_History" class="items-tit-h2">Managing Session History Entries</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       
+<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 <span style="font-family: Courier New,Courier,monospace">pushState()</span> 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);
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">pushState()</span> method accepts the <span style="font-family: Courier New,Courier,monospace">data</span>, <span style="font-family: Courier New,Courier,monospace">title</span>, and <span style="font-family: Courier New,Courier,monospace">url</span> (optional) parameters. The <span style="font-family: Courier New,Courier,monospace">title</span> parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+
+<li>To update the entry details, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title, &#39;#page&#39; + currentIndex);
+&lt;/script&gt;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method uses the same parameters as the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method. The <span style="font-family: Courier New,Courier,monospace">history_sample.html</span> is the <span style="font-family: Courier New,Courier,monospace">url</span> parameter, which refers to the address of the page that is to be changed.</p>
+</li>
+
+<li>To use the session history information:
+<ol>
+<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&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;
+</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 <span style="font-family: Courier New,Courier,monospace">history</span> 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;);
+
+/* Prev button click event */ 
+prev.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;currentIndex -= 1;   
+&nbsp;&nbsp;&nbsp;setState(currentIndex);
+    
+&nbsp;&nbsp;&nbsp;return false;
+};
+    
+/* Next button click event */ 
+next.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;currentIndex += 1;  
+&nbsp;&nbsp;&nbsp;setState(currentIndex);
+    
+&nbsp;&nbsp;&nbsp;return false;
+};
+</pre>
+</li>
+
+<li>If the <span style="font-family: Courier New,Courier,monospace">state</span> object has data in it, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method to change the previously stored information. Otherwise, add new info with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method.
+<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, &#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;
+}
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+ <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>
+
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+<h2 id="Detecting_Session_History" name="Detecting_Session_History" class="items-tit-h2">Detecting Session History Changes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+ 
+<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);
+</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;);
+
+window.onpopstate = function() 
+{
+&nbsp;&nbsp;&nbsp;currentIndex = history.state.index;
+&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
+}
+</pre>
+<p>In the snippet above, when a <span style="font-family: Courier New,Courier,monospace">popstate</span> event is fired, it saves the index value stored in the <span style="font-family: Courier New,Courier,monospace">state</span> object to the <span style="font-family: Courier New,Courier,monospace">currentIndex</span> variable, and outputs the <span style="font-family: Courier New,Courier,monospace">&lt;output&gt;</span> element from the correct index location.
+</p>
+
+</li></ol>
+ <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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> 
+                       </div>
+               </li>
+       </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm
new file mode 100644 (file)
index 0000000..c37d657
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm
@@ -0,0 +1,275 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Text Module Level 3: Manipulating Text</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#text" class="opensection">Manipulating Text</a>
+            </li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/text_module_w.htm">CSS Text Module Level 3 Guide</a></li>
+       
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Text Module Level 3: Manipulating Text</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can manipulate and transform text.</p>
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Text Module Level 3 API basics by learning about:</p>
+<ul>
+<li><a href="#text" class="opensection" >Manipulating Text</a> 
+<p>Control the appearance of text using the CSS text properties.</p></li>
+</ul>  
+       
+   <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+    <!-- Folds -->
+    <ul class="devicespecifications">
+        
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="text" name="text" class="items-tit-h2">Manipulating Text</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                <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>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-transform</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to control the text capitalization:
+
+<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;/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;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-align</span> property, which controls the text alignment:
+
+<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;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-indent</span> property, which controls the text indentation:
+
+<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;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">letter-spacing</span> 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;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-spacing</span> 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;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-break</span> 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;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">white-space</span> 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;/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;/body&gt;
+&lt;/html&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-shadow</span> 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;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-wrap</span> and  <span style="font-family: Courier New,Courier,monospace">overflow-wrap</span> 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;/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;/body&gt;
+</pre>
+
+</li>
+
+</ol>
+
+
+<p>The following figure shows examples of manipulating the text properties.</p>
+<p class="figure">Figure: Text properties (in mobile applications only)</p>
+<p style="text-align: center;"><img alt="Text properties (in mobile applications only)" src="../../../images/text_properties.png"/></p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.</td>
+    </tr>
+   </tbody>
+  </table>
+            </div>
+        </li>
+
+
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm
new file mode 100644 (file)
index 0000000..6d97473
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm
@@ -0,0 +1,623 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Transforms: Manipulating Elements</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#animation" class="opensection">Creating an Animation with Transforms</a></li>
+                       <li><a href="#effect" class="opensection">Creating Fade Animation Effect</a></li>
+                       <li><a href="#hw" class="opensection">Using Hardware Acceleration</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/transform_w.htm">CSS Transforms Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transforms">CSS Transforms API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Transforms: Manipulating Elements</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can use transforms with animations. </p>
+   
+
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Transforms API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#animation">Creating an Animation with Transforms</a> 
+<p>Create a logo animation where the animation parts rotate and are translated in the 3D space.</p></li>
+</ul>  
+
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of CSS Transforms API, we can now move on to more advanced tasks, including:</p>
+<ul>
+<li><a class="opensection" href="#effect">Creating Fade Animation Effects</a> 
+<p>Create a fade animation effect using JavaScript and CSS3.</p>
+</li>
+<li><a class="opensection" href="#hw">Using Hardware Acceleration</a> 
+<p>Use hardware acceleration to enhance performance.</p></li>
+</ul>  
+
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="animation" name="animation" class="items-tit-h2">Creating an Animation with Transforms</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_tutorial_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>
+
+<ul class="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 <span style="font-family: Courier New,Courier,monospace">transform</span> 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 <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
+</ul>
+
+<p class="figure">Figure: Tizen logo to be transformed</p> 
+<p style="text-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&gt;
+</pre>
+</li>
+<li>Define the basic style of the animation elements. Add the <span style="font-family: Courier New,Courier,monospace">perspective</span> property to increase the Z axis effect of the 3D transform.
+<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;
+}
+.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;
+}
+.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;
+}
+</pre>
+</li>
+<li>Create the animation:
+<ol>
+<li>
+<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> function, 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;}
+}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">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 <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property to adjust the rotation location.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li>Create the keyframes for the first letter in the word &quot;TIZEN&quot;. In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.
+
+<p style="text-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% {}
+}
+</pre></li>
+<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> 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%;
+}
+</pre></li>
+
+<li><p>Create the keyframes for the other letters similarly:</p>
+<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% {}
+}
+</pre></li></ol>
+
+</li>
+</ol>
+
+<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>
+<p class="figure">Figure: Full Tizen logo animation</p> 
+<p style="text-align:center;"><img alt="Full Tizen logo animation" src="../../../images/css_transforms5.png" /></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">transform_practical.html</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">logo_tizen.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_e.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_i.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_n.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_t.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_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>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="effect" name="effect" class="items-tit-h2">Creating Fade Animation Effects</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 class="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>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
+</ul>
+
+<p class="figure">Figure: Fade effect</p> 
+<p style="text-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 class="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> 
+</ul>
+
+<p>To create fade effects:</p>
+
+<ul class="ul">
+<li>Create a modal layer pop-up using jQuery:
+
+<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() - $(url).height()/2) + &#39;px&#39;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;left&#39;: ($(window).width()/2 + $(document).scrollLeft() - $(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;var targetUrl = $(this).attr(&#39;href&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showModalPopup(targetUrl);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&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;if (e.target.className === &#39;mask&#39;) 
+&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;$(&#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;$(&#39;.mask&#39;).remove();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;});
+})(jQuery);</pre>
+
+<p>If the animation effect is created by using JavaScript, the browser executes the following tasks:</p>
+<ol>
+       <li>A structure layer is created and added to the document. This is a CPU task.</li>
+       <li>The added layer is painted as a default value. This is a GPU task.</li>
+       <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>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>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.</td> 
+      </tr> 
+     </tbody> 
+</table>
+
+<p>To avoid such a situation to the maximum possible extent, CPU tasks must be reduced to the minimum, and it is better to use transition or animation that uses the internal timer of the browser.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In case of using 3D effects, <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translateZ(0);</span> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android&trade; 2.1, iOS&trade;3.X and below, note that transition and animation may not be realized.</td> 
+      </tr> 
+     </tbody> 
+</table>
+</li>
+<li>Create a modal layer pop-up using CSS3:
+<pre class="prettyprint">
+/* CSS */
+.mask 
+{
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;z-index: -1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 400ms ease-in-out;
+}
+
+.mask.active 
+{
+&nbsp;&nbsp;&nbsp;opacity: .7;
+&nbsp;&nbsp;&nbsp;z-index: 498;
+}
+
+/* Layer pop-up public styles */
+.layerpop 
+{
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;z-index: -1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 300ms ease-in-out;
+}
+
+.layerpop.active 
+{
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;z-index: 499;
+}
+/* JavaScript */
+function showModalPopup(url) 
+{
+&nbsp;&nbsp;&nbsp;url.className += &#39;active&#39;;
+}</pre>
+</li>
+</ul>
+<h3>Performance Differences</h3>
+
+<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 class="figure">Figure: Event performance using JavaScript</p> 
+<p style="text-align:center;"><img alt="Events using JavaScript" src="../../../images/events_using_javascript.png" /></p>
+
+<p class="figure">Figure: Event performance using CSS3</p> 
+<p style="text-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 class="figure">Figure: Memory performance using JavaScript</p> 
+<p style="text-align:center;"><img alt="Memory when using JavaScript" src="../../../images/memory_using_javascript.png" /></p>
+
+<p class="figure">Figure: Memory performance using CSS3</p> 
+<p style="text-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>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Tizen provides remote debugging through the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">JavaScript Debugger tool</a>.</td> 
+      </tr> 
+     </tbody> 
+</table>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android&trade; 2.3 and for versions above iOS&trade; 4.3, which are still widely used, so attention is needed when distributing it to various devices.</p></td> 
+      </tr> 
+     </tbody> 
+</table>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="hw" name="hw" class="items-tit-h2">Using Hardware Acceleration</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> 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 class="figure">Figure: Blue box</p> 
+ <p style="text-align:center;"><img alt="Blue box" src="../../../images/blue_box.png" /></p> 
+
+ <ul class="ul">
+ <li>Use CPU painting:
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <ol>
+       <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;</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 <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> 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;/html&gt;</pre></li></ol></li>
+       <li>Use CSS transition:
+       <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> 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 = &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&gt;</pre>
+</li>
+               <li>Use 3D transform:
+               <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 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 = &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&gt;</pre>
+</li>
+       </ul>
+ <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
+ <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
+ <pre class="prettyprint">#scroll_area 
+{
+&nbsp;&nbsp;&nbsp;overflow: scroll;
+&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
+}</pre>  
+                       </div>
+               </li>
+               
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm
new file mode 100644 (file)
index 0000000..f171d74
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm
@@ -0,0 +1,349 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Transitions Module Level 3: Changing Element Styles</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#modify" class="opensection">Modifying Element Properties</a></li>
+                       <li><a href="#hw" class="opensection">Using Hardware Acceleration</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/transition_w.htm">CSS Transitions Module Level 3 Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>CSS Transitions Module Level 3: Changing Element Styles</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can use transitions to change element property values naturally.</p>   
+
+<h2>Warm-up</h2>
+<p>Become familiar with the CSS Transitions Module Level 3 API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#modify">Modifying Element Properties</a> 
+<p>Modify element properties by adding a background color and transition effects, and changing the font color and size.</p></li>
+</ul> 
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of CSS Transitions Module Level 3 API, we can now move on to more advanced tasks, including:</p>
+<ul>
+<li><a class="opensection" href="#hw">Using Hardware Acceleration</a> 
+<p>Use hardware acceleration to enhance performance.</p>
+</li>
+</ul>  
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="modify" name="modify" class="items-tit-h2">Modifying Element Properties</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <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 <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current &quot;UPCOMING EVENTS&quot; area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>
+
+
+<p class="figure">Figure: Tizen site section to be transitioned</p> 
+<p style="text-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 <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>
+
+<ol><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;
+</pre>
+
+
+<p>Additionally, a <span style="font-family: Courier New,Courier,monospace">transition</span> property is declared in the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:</p>
+
+<pre class="prettyprint">
+.block-title 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 2s ease;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">all</span> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">mouseover</span> state for the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:
+
+<pre class="prettyprint">
+.block-title: hover {background: #eaeaea;}
+</pre>
+
+<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 style="text-align:center;"><img alt="Background color change" src="../../../images/transitions2.png" /></p> </li>
+
+<li>
+
+<p>Apply the transition effect in other elements:</p>
+
+<ol><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
+
+<pre class="prettyprint">
+.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
+}
+</pre></li>
+
+<li><p>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <span style="font-family: Courier New,Courier,monospace">span</span> group. When the mouse hovers over the title element, change the color of all elements tied into the <span style="font-family: Courier New,Courier,monospace">a</span> group.</p>
+<pre class="prettyprint">
+.date: hover {background: #d2ecff !important;}
+.date: hover .day &gt; span {font-size: 1.9em;}
+
+.event-info: hover h3 &gt; a {color: #ec4986;}
+</pre></li></ol>
+
+<p style="text-align:center;"><img alt="Before mouseover" src="../../../images/transitions3.png" />
+</p> </li>
+<li>
+
+<p>Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.</p>
+<ol>
+<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;
+</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;
+}
+</pre>
+
+<p>The effect is defined by using the <span style="font-family: Courier New,Courier,monospace">position</span> property. The location element position is declared <span style="font-family: Courier New,Courier,monospace">relative</span>, while the <span style="font-family: Courier New,Courier,monospace">anibg</span> child element position is declared as <span style="font-family: Courier New,Courier,monospace">absolute</span>. The width of the child element basic state is set as 0. Since the child element layer covers the location text, the child element has been defined to come out from the back of the text in the <span style="font-family: Courier New,Courier,monospace">z-index</span> value of the child.</p></li>
+<li><p>Define the state to be changed:</p>
+<pre class="prettyprint">
+.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
+}
+
+.event-info: hover .location {color: #fff;}
+.event-info: hover .location .anibg {width: 100%; color: #fff;}
+</pre>
+
+<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that  the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.
+</p></li>
+
+ </ol><p style="text-align:center;"><img alt="Location phrase emphasis" src="../../../images/transitions5.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 class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="hw" name="hw" class="items-tit-h2">Using Hardware Acceleration</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> 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 class="figure">Figure: Blue box</p> 
+ <p style="text-align:center;"><img alt="Blue box" src="../../../images/blue_box.png" /></p> 
+
+ <ul class="ul">
+ <li>Use CPU painting:
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <ol>
+       <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;</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 <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> 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;/html&gt;</pre></li></ol></li>
+       <li>Use CSS transition:
+       <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> 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 = &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&gt;</pre>
+</li>
+               <li>Use 3D transform:
+               <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 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 = &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&gt;</pre>
+</li>
+       </ul>
+ <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
+ <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
+ <pre class="prettyprint">#scroll_area 
+{
+&nbsp;&nbsp;&nbsp;overflow: scroll;
+&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
+}</pre>
+                       </div>
+               </li>
+               
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm
new file mode 100644 (file)
index 0000000..c53f7d5
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm
@@ -0,0 +1,161 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>WOFF File Format 1.0: Changing Fonts Using WOFF</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#woff" class="opensection">Using the WOFF File Format</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/woff_w.htm">WOFF File Format 1.0 Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>WOFF File Format 1.0: Changing Fonts Using WOFF</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can modify fonts with WOFF.</p>
+ 
+<h2>Warm-up</h2>
+<p>Become familiar with the WOFF File Format 1.0 API basics by learning about:</p>
+<ul>
+<li><a href="#woff" class="opensection" >Using the WOFF File Format</a> 
+<p>Change fonts using the WOFF (Web Open Font Format) packaging format.</p></li>
+</ul>  
+       
+   <!-- Show / Hide all links -->
+    <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+    <!-- Folds -->
+    <ul class="devicespecifications">
+     
+            <li>
+            <div class="devicespec-tit">
+                <h2 id="woff" name="woff" class="items-tit-h2">Using the WOFF File Format</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+                <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>
+<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:
+<ul class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">font-family</span>
+<p>Defines a name for the font. This property is mandatory.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">src</span>
+<p>Defines the URL of the font file on the server. This property is mandatory. If the <span style="font-family: Courier New,Courier,monospace">local</span> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>
+<li><span style="font-family: Courier New,Courier,monospace">font-stretch</span>
+<p>Defines the way the font is stretched. This property is optional.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">font-style</span>
+<p>Defines the font style. This property is optional.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">font-weight</span>
+<p>Defines the font weight. This property is optional.</p></li>
+</ul>
+<p>Define the rules with in a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> 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;/head&gt;</pre>
+</li>
+<li>In the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> section, create <span style="font-family: Courier New,Courier,monospace">&lt;p&gt;</span> 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;/body&gt;
+&lt;/html&gt;
+</pre>
+</li>
+</ol>
+<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>
+<p style="text-align:center;"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../../images/font_face.png" /></p>
+            </div>
+        </li>
+
+  
+
+    </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm
new file mode 100644 (file)
index 0000000..b14b125
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm
@@ -0,0 +1,544 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Creating Shapes and Text</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#canvas" class="opensection">Using a Canvas</a></li>
+                       <li><a href="#image" class="opensection">Using Images on the Canvas</a></li>
+                       <li><a href="#shape" class="opensection">Drawing Shapes to the Canvas</a></li>
+                       <li><a href="#mask" class="opensection">Drawing Masks to the Canvas</a></li>
+                       <li><a href="#text" class="opensection">Creating Text and Lines on the Canvas</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">HTML5 Canvas Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas">HTML5 canvas element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas2d">HTML Canvas 2D Context API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">HTML5 canvas element API for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context API for Wearable Web</a></li>
+
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Canvas: Creating Shapes and Text</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can create images, shapes, text, and lines on a canvas.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML5 Canvas Element and HTML Canvas 2D Context API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#canvas">Using a Canvas</a>
+<p>Create and manage a canvas.</p></li>
+
+<li><a class="opensection" href="#image">Using Images on the Canvas</a>
+<p>Connect an image to  the canvas and transform it.</p></li>
+
+<li><a class="opensection" href="#shape">Drawing Shapes to the Canvas</a>
+<p>Draw shapes to the canvas and transform them.</p></li>
+
+<li><a class="opensection" href="#mask">Drawing Masks to the Canvas</a>
+<p>Replace a background image by drawing a mask on it with a brush.</p></li>
+
+<li><a class="opensection" href="#text">Creating Text and Lines on the Canvas</a>
+<p>Draw text and line on the canvas and assigning styles for them.</p></li> 
+</ul>
+
+<h2>Task in Wearable Applications</h2>
+<p>In the <a href="task_clockwidget_w.htm">Clock Widget</a> task, we will walk through using canvas contexts to create and display a clock on the canvas.</p>
+
+
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="canvas" name="canvas" class="items-tit-h2">Using a Canvas</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To draw images with JavaScript, you must learn to use a canvas in your application:</p>
+ 
+<ol>
+<li>Create a <span style="font-family: Courier New,Courier,monospace">&lt;canvas&gt;</span> 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&gt;
+</pre>
+
+<p>If no <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> attributes are inserted, the default value is <span style="font-family: Courier New,Courier,monospace">width: 300px, height: 150px</span>.</p>
+</li>
+
+<li>To check the information of the image connected to the canvas, use the <span style="font-family: Courier New,Courier,monospace">toDataURL([Optional], [Variadic])</span> method to restore the URL of the image used in the canvas. To create a blob object of the image file, use the <span style="font-family: Courier New,Courier,monospace">getContext(contextId)</span> method.
+</li>
+
+<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;);
+</pre>
+<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 class="ul">
+<li><span style="font-family: Courier New,Courier,monospace">save()</span>: Pushes the current state onto the stack.</li>
+<li><span style="font-family: Courier New,Courier,monospace">restore()</span>: Pops the top state on the stack, restoring the context to that state.</li>
+</ul>
+</li>
+</ol>
+
+<p>There is a need to separately check whether the canvas 2D context can be used by using the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method:</p>
+
+<pre class="prettyprint">
+if (!(canvas.getContext)) 
+{
+&nbsp;&nbsp;&nbsp;alert(&quot;This browser is not supported&quot;);
+}
+</pre>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="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_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>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="image" name="image" class="items-tit-h2">Using Images on the Canvas</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use a canvas in your application, you must learn to use images on it:</p>
+ 
+ <ol><li>
+ <p>Use the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> 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>
+
+<pre class="prettyprint">/* Draw the image by setting its size */
+context.drawImage(image, 30, 130, 130, 30);
+context.drawImage(image, 200, 100, 80, 60);
+
+/* Draw the image by setting the image area */
+context.drawImage(image, 193, 0, 30, 30, 80, 220, 50, 50);
+context.drawImage(image, 0, 10, 40, 60, 190, 205, 40, 60);
+</pre></li>
+
+<li><p>When the image is connected to the canvas, extract the color value through the <span style="font-family: Courier New,Courier,monospace">getImageData()</span> method. Re-input the transformed values with the <span style="font-family: Courier New,Courier,monospace">putImageData()</span> method.</p>
+
+<pre class="prettyprint">
+/* Import the image with the required coordinates */
+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];
+}
+
+/* Insert the converted image back to the canvas */ 
+context.putImageData(transImage, 30, 20);
+</pre></li>
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">CanvasTransformation</span> 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">
+context.beginPath();
+context.scale(1.7, 1.3);
+context.drawImage(image, 30, 20);
+context.restore();
+
+/* Move the (0, 0) reference axis coordinates of the canvas */ 
+context.beginPath();
+context.translate(50, 100);
+context.drawImage(image, 30, 20);
+context.restore();
+
+/* Rotate using the (0, 0) coordinates as reference */
+context.beginPath();
+context.rotate(45 * Math.PI/180);
+context.drawImage(image, 70, 20);
+context.restore();</pre>
+<p style="text-align:center;"><img alt="Using images on the canvas (in mobile applications only)" src="../../../images/canvas_using_images.png" /></p>
+</li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="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_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>
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="shape" name="shape" class="items-tit-h2">Drawing Shapes to the Canvas</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use a canvas in your application, you must learn to create draw shapes on it:</p> 
+
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">rect()</span> method to create a rectangle.
+<p>Use the canvas context to assign the rectangle attributes, such as position and size. (The following figure applies to mobile applications only.)</p>
+
+<pre class="prettyprint">
+/* Rectangle fill style */
+context.fillStyle = &#39;#333&#39;;
+context.fillRect(10, 10, 300, 300);
+
+/* Rectangle stroke style */
+context.strokeStyle = &#39;#ff0&#39;;
+context.strokeRect(100, 100, 100, 100);
+
+/* Rectangle clear style */
+context.clearRect(50, 50, 100, 100);
+</pre>
+<p style="text-align:center;"><img alt="Assign rectangle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes1.png" /></p> 
+</li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">arc()</span> method to create a circle.
+<p>Use the canvas context to assign the circle attributes, such as position and radius. (The following figure applies to mobile applications only.)</p>
+
+<pre class="prettyprint">
+/* Create a circle */ 
+context.beginPath();
+context.arc(80, 80, 50, 0, 1.5 * Math.PI);
+context.fill();
+
+context.beginPath();
+context.arc(230, 80, 50, 0, 1 * Math.PI);
+context.stroke();
+
+/* Create line A */ 
+context.moveTo(20, 300);
+context.lineTo(100, 200);
+
+/* Connect the line A end coordinates to the line B start coordinates */
+context.arcTo(150, 50, 100, 100, 50);
+
+/* Draw line B */ 
+context.lineTo(300, 200);
+context.stroke();</pre>
+<p style="text-align:center;"><img alt="Assign circle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes2.png" /></p> 
+</li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">CanvasTransformation</span> 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>
+
+<pre class="prettyprint">
+/* Display the relevant area */ 
+context.rect(50, 20, 100, 120);
+context.stroke();
+context.clip();
+
+context.beginPath();
+context.arc(150, 150, 100, 0, 2 * Math.PI);
+
+/* Fill the shape */ 
+context.fillStyle = &#39;tomato&#39;;
+</pre>
+<p style="text-align:center;"><img alt="Transform shapes (in mobile applications only)" src="../../../images/canvas_drawing_shapes3.png" /></p> 
+</li>
+</ol>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For a canvas, the rendering occurs in the order from the back of the input source.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="mask" name="mask" class="items-tit-h2">Drawing Masks to the Canvas</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use a canvas in your application, you must learn to draw masks on it:</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;</pre> 
+</li>
+
+<li>Define the CSS style for the background image:
+
+<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;}
+&lt;/style&gt;
+</pre>
+</li>
+
+<li>Declare the JavaScript variables needed in the application. The <span style="font-family: Courier New,Courier,monospace">lastX</span> and <span style="font-family: Courier New,Courier,monospace">lastX</span> variables indicate the last position of a user event. The <span style="font-family: Courier New,Courier,monospace">mouseBtn</span> variable indicates whether a button or touch event has occurred, and the <span style="font-family: Courier New,Courier,monospace">brushSize</span> variable indicates the current brush size.
+
+<pre class="prettyprint">
+var lastX = 0, 
+&nbsp;&nbsp;&nbsp;&nbsp;lastX = 0, 
+&nbsp;&nbsp;&nbsp;&nbsp;mouseBtn = false, 
+&nbsp;&nbsp;&nbsp;&nbsp;brushSize = 4;
+var canvas, context;
+</pre>
+</li>
+
+<li>Initialize the canvas:
+<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;}
+}</pre>
+</li>
+
+<li>Draw an image on the canvas using the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> method. The user is able to replace the image with another using a brush. 
+<p>Create a new <span style="font-family: Courier New,Courier,monospace">Image</span> 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;context.drawImage(img, 0, 0);
+});
+img.src = &quot;images/TizenPinwheelArrows.png&quot;;
+context.lineWidth = brushSize;
+context.lineCap = &#39;round&#39;;</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);
+
+function smallBrush(e)
+{
+&nbsp;&nbsp;&nbsp;context.beginPath();
+&nbsp;&nbsp;&nbsp;brushSize = 4;
+&nbsp;&nbsp;&nbsp;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);
+/* Event listeners for mouse events */
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <span style="font-family: Courier New,Courier,monospace">mousedown</span> events only store the event coordinates, the <span style="font-family: Courier New,Courier,monospace">touchmove</span> and <span style="font-family: Courier New,Courier,monospace">mousemove</span> events define the position and direction of the drawing, and the <span style="font-family: Courier New,Courier,monospace">touchend</span> and <span style="font-family: Courier New,Courier,monospace">mouseup</span> events indicate that the user event ends, as illustrated in the following figure.</p>
+ <p style="text-align:center;"><img alt="Drawing events" src="../../../images/drawing_line_sequence.png" /></p>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">updateLastPos()</span> method to update the <span style="font-family: Courier New,Courier,monospace">lastX</span> and <span style="font-family: Courier New,Courier,monospace">lastY</span> variable values. The real coordinates can be calculated by reducing the offset position of the canvas element from the touch position coordinates. The <span style="font-family: Courier New,Courier,monospace">&#39;touch&#39;</span> 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;}
+}
+</pre>
+</li>
+
+<li>When the user starts drawing, the <span style="font-family: Courier New,Courier,monospace">touchstart</span> or <span style="font-family: Courier New,Courier,monospace">mousedown</span> event calls the <span style="font-family: Courier New,Courier,monospace">startDraw()</span> method, which updates the event position, sets the composite operations property to make the drawing a mask, begins to draw a new path, moves the drawing point to the selected coordinates, and sets the button or touch event state to <span style="font-family: Courier New,Courier,monospace">true</span>.
+<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;
+}
+</pre>
+</li>
+
+<li>While the user is drawing, the <span style="font-family: Courier New,Courier,monospace">touchmove</span> and <span style="font-family: Courier New,Courier,monospace">mousemove</span> events are handled with the <span style="font-family: Courier New,Courier,monospace">drawStep()</span> method based on the button state retrieved from the <span style="font-family: Courier New,Courier,monospace">mouseBtn</span> variable. The <span style="font-family: Courier New,Courier,monospace">drawStep()</span> method calls the <span style="font-family: Courier New,Courier,monospace">updateLastPos()</span> method only when the mouse or finger is being moved. Use the <span style="font-family: Courier New,Courier,monospace">stroke()</span> method to make the drawn line visible.
+<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;}
+}
+</pre>
+</li>
+<li>When the touch event ends or the mouse button is released, use the <span style="font-family: Courier New,Courier,monospace">stopDraw()</span> method to stop drawing:
+<pre class="prettyprint">function stopDraw(e)
+{                      
+&nbsp;&nbsp;&nbsp;context.globalCompositeOperation = &#39;source-over&#39;;
+&nbsp;&nbsp;&nbsp;mouseBtn = false;
+}
+</pre>
+<p style="text-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 class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="text" name="text" class="items-tit-h2">Creating Text and Lines on the Canvas</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use a canvas in your application, you must learn to create text and lines:</p>
+ 
+<ol>
+
+<li><p>To draw a line, use the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method to assign the beginning point of the line, and the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method to assign the end point of the line. The <span style="font-family: Courier New,Courier,monospace">stroke()</span> method draws the full line. </p>
+
+<pre class="prettyprint">
+context.lineJoin = &quot;bevel&quot;;
+context.lineWidth = 20;
+
+context.beginPath();
+context.lineJoin = &quot;round&quot;;
+context.moveTo(20, 20);
+context.lineTo(100, 40);
+context.stroke();
+</pre></li>
+<li>
+<p>When adding text on the canvas, use various attributes and methods to define how the text looks and where it is located. </p>
+<p>The <span style="font-family: Courier New,Courier,monospace">font</span> attribute defines the font style, and the <span style="font-family: Courier New,Courier,monospace">textBaseline</span> 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.moveTo(150, 20);
+context.lineTo(150, 170);
+context.stroke();
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">textAlign</span> attribute and the <span style="font-family: Courier New,Courier,monospace">fillText()</span> 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);
+</pre></li>
+</ol>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">When drawing multiple images in a canvas, indicate the starting point with the <span style="font-family: Courier New,Courier,monospace">beginPath()</span> method to prevent unforeseen errors.  </td> 
+      </tr> 
+     </tbody> 
+    </table>
+       
+       <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="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> 
+                       </div>
+               </li>
+       
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm
new file mode 100644 (file)
index 0000000..03ff8db
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Creating Graphics with HTML5 Features</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>Graphics: Creating Graphics with HTML5 Features</h1>
+       <p>The graphics tutorials demonstrate how to use the following features in creating Tizen Web applications:</p> 
+  <ul> 
+       <li><a href="canvas_tutorial_w.htm">HTML5 Canvas: Creating Shapes and Text</a> <p>Demonstrates how you can express images, shapes, text, and lines using HTML5.</p></li> 
+    <li><a href="svg_tutorial_w.htm">HTML5 SVG: Using SVG Elements</a> <p>Demonstrates how you can use inline SVG.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm
new file mode 100644 (file)
index 0000000..2b6044d
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm
@@ -0,0 +1,325 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Using SVG Elements</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#make" class="opensection">Making Shapes</a></li>
+                       <li><a href="#group" class="opensection">Grouping SVG Elements</a></li>
+                       <li><a href="#animate" class="opensection">Animating SVG Elements</a></li>
+                       <li><a href="#control" class="opensection">Controlling SVG Elements through Scripting</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/graphics/svg_w.htm">HTML5 SVG Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">HTML5 SVG API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">HTML5 SVG API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 SVG: Using SVG Elements</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can use SVG as inline elements in HTML.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML5 SVG API basics by learning about:</p>
+
+<ul>
+<li><a class="opensection" href="#make">Making Shapes</a>
+<p>Create various vector graphic shapes in SVG.</p></li>
+<li><a class="opensection" href="#group">Grouping SVG Elements</a>
+<p>Group various SVG elements together for easier element management.</p></li>
+<li><a class="opensection" href="#animate">Animating SVG Elements</a>
+<p>Animate SVG elements.</p></li> 
+<li><a class="opensection" href="#control">Controlling SVG Elements through Scripting</a>
+<p>Control SVG elements using scripts.</p></li>
+</ul>  
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="make" name="make" class="items-tit-h2">Making Shapes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use inline SVG elements in your application, you must learn to create shapes:</p>  
+ 
+<ol>
+<li>Create the SVG with the <span style="font-family: Courier New,Courier,monospace">svg</span> tag.</li>
+<li>Use the graphic elements to create various shapes. The absolute coordinates of the graphics element determine the size of the SVG.
+
+<ul class="ul">
+<li><p>To create a line between 2 assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace">&lt;line&gt;</span> 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&gt;
+</pre></li>
+
+<li><p>To create a rectangle at the assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace">&lt;rect&gt;</span> 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&gt;
+</pre></li>
+
+<li><p>To create a circle with the assigned barycentric coordinate and radius, use the <span style="font-family: Courier New,Courier,monospace">&lt;circle&gt;</span> 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&gt;
+</pre></li>
+
+<li><p>To create an ellipse with the assigned barycentric coordinate and the X and Y axis radius, use the <span style="font-family: Courier New,Courier,monospace">&lt;ellipse&gt;</span> 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&gt;
+</pre></li>
+
+<li><p>To create a polygon comprised of a set of assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace">&lt;polygon&gt;</span> 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&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_shape.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="group" name="group" class="items-tit-h2">Grouping SVG Elements</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use inline SVG elements in your application, you must learn to group elements:</p> 
+ 
+<ol>
+<li><p>Combine various SVG elements in a group using the <span style="font-family: Courier New,Courier,monospace">&lt;g&gt;</span> container element, whose <span style="font-family: Courier New,Courier,monospace">id</span> 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;
+</pre></li>
+<li>
+<p>You can reference the group using the <span style="font-family: Courier New,Courier,monospace">id</span> 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;/svg&gt;
+</pre></li>
+
+<li><p>If you have multiple groups, use the <span style="font-family: Courier New,Courier,monospace">&lt;defs&gt;</span> 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&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_group.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="animate" name="animate" class="items-tit-h2">Animating SVG Elements</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use inline SVG elements in your application, you must learn to animate elements:</p> 
+ 
+<ol>
+<li>
+<p>To animate a specific element attribute based on time, use the <span style="font-family: Courier New,Courier,monospace">&lt;animate&gt;</span> 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; 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; 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; 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; repeatCount=&quot;1&quot; fill=&quot;freeze&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/rect&gt;
+&lt;/svg&gt;
+</pre></li>
+
+<li><p>To change the (fill or line) color of the element, use the <span style="font-family: Courier New,Courier,monospace">&lt;animateColor&gt;</span> 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; 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; repeatCount=&quot;indefinite&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&lt;/rect&gt;
+&lt;/svg&gt;
+</pre></li>
+
+<li><p>To create a motion animation, use the <span style="font-family: Courier New,Courier,monospace">&lt;animateMotion&gt;</span> element. The element assigns the parent element to the <span style="font-family: Courier New,Courier,monospace">&lt;mpath&gt;</span> as reference element, and animates according to the shape of the <span style="font-family: Courier New,Courier,monospace">&lt;mpath&gt;</span> 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&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_animation.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="control" name="control" class="items-tit-h2">Controlling SVG Elements through Scripting</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To use inline SVG elements in your application, you must learn to use scripting:</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&gt;
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> 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 <span style="font-family: Courier New,Courier,monospace">width</span> 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;};
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_script.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/task_clockwidget_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/task_clockwidget_w.htm
new file mode 100644 (file)
index 0000000..40e37d6
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/graphics/task_clockwidget_w.htm
@@ -0,0 +1,316 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Clock Widget</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#initialize">Initializing the Application</a></li>
+            <li><a href="#time">Displaying the Time</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">HTML5 Canvas Guide</a></li>
+            <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Task: Clock Widget</h1>
+  
+<p>This task, based on the ClockWidget sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-wearable-applications" target="blank">ClockWidget</a>.</p> 
+ 
+  <p>This task consists of the following parts:</p> 
+  <ul class="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> 
+
+<h2 id="layout" name="layout">Defining the Application Layout</h2>
+ 
+ <p>The ClockWidget 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 class="figure">Figure: ClockWidget screen</p> 
+  <p style="text-align: center;"><img alt="ClockWidget screen" src="../../../images/clockwidget_sd.png" /></p>
+ 
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+  <ol class="tutorstep"> 
+   <li>index.html Source File 
+ <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 clock 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;/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;/body&gt;
+</pre> </li>
+<li>main.js Source File
+<ol>
+ <li>   
+<p>Create the clock in the middle of the canvas. Define the clock face style.</p>  
+<pre class="prettyprint">
+function renderDots() 
+{
+&nbsp;&nbsp;&nbsp;'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;
+
+&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 = '#999999';       
+</pre></li>
+<li><p>Create 4 dots on the sides of the clock face and use the <span style="font-family: Courier New,Courier,monospace">fill()</span> 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();
+</pre></li>
+ 
+<li>
+<p>Create the center point.</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;context.beginPath();
+
+&nbsp;&nbsp;&nbsp;context.fillStyle = &#39;#ff9000&#39;;
+&nbsp;&nbsp;&nbsp;context.strokeStyle = &#39;#fff&#39;;
+&nbsp;&nbsp;&nbsp;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();
+}
+</pre></li></ol></li></ol>
+
+<h2 id="initialize" name="initialize">Initializing the Application</h2>
+ <ol class="tutorstep">
+  <li>config.xml Source File
+   <p>Define the application category.</p>
+   <pre class="prettyprint">
+&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;
+</pre>
+
+         <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To run your application on Samsung Gear devices, use <span style="font-family: Courier New,Courier,monospace">&lt;tizen:category name=&quot;com.samsung.wmanager.WATCH_CLOCK&quot; /&gt;</span> instead of <span style="font-family: Courier New,Courier,monospace">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</span>.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+  </li>  
+  <li>main.js Source File
+   <ol>
+    <li>
+     <p>Modify the <span style="font-family: Courier New,Courier,monospace">window.requestAnimationFrame()</span> 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>
+    </li>
+    <li>
+     <p>Initialize the canvas context and define the canvas area.</p>
+     <pre class="prettyprint">
+window.onload = function () 
+{
+&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+
+&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;
+
+&nbsp;&nbsp;&nbsp;canvas.width = document.width;
+&nbsp;&nbsp;&nbsp;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;if (e.keyName == &#39;back&#39;) 
+&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;window.requestAnimationFrame(watch);
+};</pre>
+    </li>
+   </ol>
+  </li>
+ </ol>
+
+<h2 id="time" name="time">Displaying the Time</h2>
+ 
+<p>This section builds upon the elements described in <a href="canvas_tutorial_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 <span style="font-family: Courier New,Courier,monospace">main.js</span> file.
+  <ol class="tutorstep"> 
+   <li>Rendering the Clock Needles
+<p>The needles can be created using the <span style="font-family: Courier New,Courier,monospace">renderNeedle()</span> method.</p>
+   <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. To assign the rest of the points of the triangle or polygon, use the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> 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();
+}
+</pre></li>
+   <li>Creating the Hour Needle
+<p>To create the hour needle, use the <span style="font-family: Courier New,Courier,monospace">renderHourNeedle()</span> method.</p>
+<pre class="prettyprint">
+function renderHourNeedle(hour) 
+{
+&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+
+&nbsp;&nbsp;&nbsp;var angle = null,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
+}
+</pre></li>
+   <li>Creating the Minute Needle
+<p>To create the minute needle, use the <span style="font-family: Courier New,Courier,monospace">renderMinuteNeedle()</span> method.</p>
+<pre class="prettyprint">
+function renderMinuteNeedle(minute)
+{
+&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+
+&nbsp;&nbsp;&nbsp;var angle = null,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
+}
+</pre></li>
+</ol>
+
+<h3 id="current" name="current">Indicating the Current Time</h3>
+<p>The time displaying functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
+  <ol class="tutorstep"> 
+   <li>Determining the Time     
+<p>Use the <span style="font-family: Courier New,Courier,monospace">new Date()</span> 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();
+</pre></li>
+<li>Erasing the Previous Time
+<p>Use the <span style="font-family: Courier New,Courier,monospace">clearRect()</span> 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);
+</pre></li>
+<li>Pointing the Clock Needles
+<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;window.requestAnimationFrame(watch);
+&nbsp;&nbsp;&nbsp;}, nextMove);
+}</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
new file mode 100644 (file)
index 0000000..977a2dc
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
@@ -0,0 +1,186 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+  <title>Geolocation API Specification: Managing Location Information</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Retrieving_Location_Info">Retrieving Location Information</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/location/geolocation_w.htm">Geolocation API Specification Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation API Specification for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation API Specification for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Geolocation API Specification: Managing Location Information</h1>
+<div class="cont"><div class="static-cont">    
+ 
+     <p>This tutorial demonstrates how you can retrieve location information.</p>
+
+  <h2>Warm-up</h2>
+   <p>Become familiar with the Geolocation API Specification basics by learning about:</p>
+   <ul>
+    <li><a class="opensection" href="#Retrieving_Location_Info">Retrieving Location Information</a><p>Create a mobile GPS application to retrieve location information.</p></li>
+   </ul>
+      
+         
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Retrieving_Location_Info" name="Retrieving_Location_Info" class="items-tit-h2">Retrieving Location Information</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+   <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 <span style="font-family: Courier New,Courier,monospace">position</span> parameter that hold the actual position information.</p>
+
+               <pre class="prettyprint">
+function successCallback(position) 
+{
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Latitude: &quot; +   
+&nbsp;&nbsp;&nbsp;position.coords.latitude + &quot;&lt;br&gt;Longitude: &quot; + 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;}
+}</pre>
+       </li>
+       <li>Create a &quot;one-shot&quot; position request with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method.
+               <p>The <span style="font-family: Courier New,Courier,monospace">maximumAge</span> 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 = &quot;Geolocation is not supported.&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</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 <span style="font-family: Courier New,Courier,monospace">maximumAge</span> and <span style="font-family: Courier New,Courier,monospace">timeout</span> parameters together (<span style="font-family: Courier New,Courier,monospace">{maximumAge: Infinity, timeout: 0}</span>). In this case, if the user agent has no position information cached, it automatically invokes the error event handler.</p>
+
+       </li>
+       <li>Create a repeated position update request with the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method:
+               <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 = &quot;Geolocation is not supported.&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+       </li>
+       <li>The repeated position update request continues until the <span style="font-family: Courier New,Courier,monospace">clearWatch()</span> method is called with the corresponding identifier:
+               <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 = &quot;Geolocation is not supported.&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+       </li>
+   </ol>
+
+   <p>The following figure illustrates the GPS application.</p>
+   <p class="figure">Figure: GPS application (in mobile applications only)</p> 
+   <p style="text-align:center;"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>
+
+  <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+       <ul class="ul">
+               <li><a href="http://download.tizen.org/misc/examples/w3c_html5/location/geolocation_api_specification" target="_blank">geolocation tutorial.html</a></li>
+       </ul>
+       
+                               </div>
+               </li>
+                                       
+       </ul>   
+       </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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
new file mode 100644 (file)
index 0000000..41b62fe
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Using Location Features</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Location: Using Location Features</h1>
+
+ <p>The location tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+    <li><a href="geolocation_tutorial_w.htm">Geolocation API Specification: Managing Location Information</a> <p>Demonstrates how you can determine the geographical position of the device and handle location information.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm
new file mode 100644 (file)
index 0000000..8c79bdc
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm
@@ -0,0 +1,212 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>getUserMedia: Accessing Media Streams</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#access">Accessing a Video Stream</a>
+                       </li>
+                       <li><a class="opensection" href="#capture">Capturing a Media Frame</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/getusermedia_w.htm">getUserMedia Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUsermedia API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUsermedia API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>getUserMedia: Accessing Media Streams</h1>
+    <div class="cont"><div class="static-cont">        
+
+ <p>This tutorial demonstrates how you can access media streams and use them to capture media.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the getUserMedia API basics by learning about: </p>
+<ul>
+<li><a href="#access" class="opensection">Accessing a Video Stream</a>
+<p>Access a video stream on a device.</p></li>
+<li><a href="#capture" class="opensection">Capturing a Media Frame</a>
+<p>Capture a frame and display it in a video element.</p></li>
+</ul>
+
+<h2>Task in Mobile Applications</h2>
+<p>In the <a href="task_selfcamera_w.htm">Self Camera</a> task, we will walk through displaying a camera video stream and capturing images from it.</p>
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+                       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="access" name="access" class="items-tit-h2">Accessing a Video Stream</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+ <p>Learning how to access a video stream is a basic user media management skill:</p>
+<ol>
+<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:
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;videoPlay&quot; src=&quot;&quot; autoplay controls&gt;&lt;/video&gt;&lt;br/&gt;
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;START&quot; onclick=&quot;getVideoStream();&quot; id=&quot;btnStart&quot;&gt;
+&lt;/body&gt;
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">navigator.webkitGetUserMedia()</span> method to derive audio streams:
+<pre class="prettyprint">
+&lt;script&gt;  
+&nbsp;&nbsp;&nbsp;function getVideoStream() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);                     
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+
+<p>The first parameter is mandatory and assigns a JSON object to determine which media element (audio or video) to use.</p>
+ </li>
+ 
+ <li>Retrieve audio stream information and create stream URL: 
+ <pre class="prettyprint">
+&lt;script>
+&nbsp;&nbsp;&nbsp;function SuccessCallback(stream) 
+&nbsp;&nbsp;&nbsp;{   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var URL = window.webkitURL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;videoPlay&quot;).src =  URL.createObjectURL(stream);                     
+&nbsp;&nbsp;&nbsp;}    
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/get_user_media" target="_blank">video_stream.html</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="capture" name="capture" class="items-tit-h2">Capturing a Media Frame</h2> 
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>Learning how to capture a frame and display it in a video element is a basic user media management skill:</p>
+<ol>
+<li><p>Create a <a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">canvas</a> element and use the <span style="font-family: Courier New,Courier,monospace">getCapture()</span> method to capture a frame:</p>
+
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;videoView&quot; src=&quot;&quot; autoplay&gt;&lt;/video&gt;&lt;br/&gt;
+&nbsp;&nbsp;&nbsp;&lt;img id=&quot;imgView&quot; src=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;canvas id=&quot;canvasView&quot; style=&quot;display: none;&quot; width=&quot;300&quot; height=&quot;225&quot;&gt;&lt;/canvas&gt;&lt;br&gt;
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;WebCamStart&quot; onclick=&quot;getVideoStream();&quot; id=&quot;btnPlay&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;Capture&quot; onclick=&quot;getCapture();&quot; id=&quot;btnCapture&quot;&gt;
+&lt;/body&gt;
+</pre>
+</li>
+
+<li><p>Enable rendering of the retrieved media stream by calling the <span style="font-family: Courier New,Courier,monospace">webkitGetUserMedia()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;function getVideoStream() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;function SuccessCallBack(stream) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var URL = window.webkitURL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;videoView&quot;).src = URL.createObjectURL(stream);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localStream = stream;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;function ErrorCallBack(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+&nbsp;&nbsp;&nbsp;}   
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>Display the captured frame in a <a href="../../../../../org.tizen.guides/html/web/w3c/media/video_audio_w.htm">video</a>  element using the <span style="font-family: Courier New,Courier,monospace">drawImage()</span> method: </p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var localStream = &quot;&quot;;    
+&nbsp;&nbsp;&nbsp;function getCapture() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (localStream) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(&quot;canvasView&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var context = canvas.getContext(&#39;2d&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.drawImage(document.getElementById(&quot;videoView&quot;), 0, 0, 300, 225);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;imgView&quot;).src = canvas.toDataURL(&#39;image/web&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/get_user_media" target="_blank">capturing_webcam.html</a></li>
+ </ul>
+                               </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm
new file mode 100644 (file)
index 0000000..135d3c4
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm
@@ -0,0 +1,154 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Media Capture: Activating Media Capture Capabilities</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#activate" class="opensection">Activating the Media Capture</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/media/media_capture_w.htm">HTML Media Capture Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML Media Capture: Activating Media Capture Capabilities</h1>
+<div class="cont"><div class="static-cont">    
+
+ <p>This tutorial demonstrates how you can use the HTML media capture feature.</p>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML Media Capture API basics by learning about:</p>
+<ul>
+<li><a href="#activate">Activating the Media Capture</a>
+<p>Activate the media capture feature by selecting the file type during file upload.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div> 
+ 
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="activate" name="Creating_Web_Worker" class="items-tit-h2">Activating the Media Capture</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+ <p>To provide users with the HTML media capture feature, you must learn to activate the media capture feature by selecting the file type during file upload:</p>
+
+<ol>
+<li><p>Activate the media capture feature by
+adding the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute to the <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element: 
+</p>
+
+<pre class="prettyprint">
+&lt;input type=&quot;file&quot; capture=&quot;filesystem&quot;&gt;
+</pre>
+
+<p style="text-align:center;"><img alt="File types" src="../../../images/media_capture_file_types.png" /></p> 
+</li>
+<li>
+<p>Assign format, such as <span style="font-family: Courier New,Courier,monospace">filesystem</span>, <span style="font-family: Courier New,Courier,monospace">camera</span>, or <span style="font-family: Courier New,Courier,monospace">camcorder</span>:</p>
+
+<pre class="prettyprint">
+&lt;input type=&quot;file&quot; accept=&quot;audio/*&quot; capture=&quot;camera&quot;&gt;
+&lt;input type=&quot;file&quot; accept=&quot;image/*&quot; capture=&quot;camcorder&quot;&gt;
+&lt;input type=&quot;file&quot; accept=&quot;video/*&quot; capture=&quot;microphone&quot;&gt;
+</pre>
+
+<p>
+ If the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute does not exist or the value has not been entered, the <span style="font-family: Courier New,Courier,monospace">filesystem</span> format is activated. If the <span style="font-family: Courier New,Courier,monospace">camera</span> or <span style="font-family: Courier New,Courier,monospace">camcorder</span> format is selected, the device camera is activated.</p>
+  <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In the current version of the Tizen SDK, the <span style="font-family: Courier New,Courier,monospace">microphone</span> format for the capture attribute is not available as the voice recorder application is not included.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#attr-input-accept" target="_blank">accept</a> attribute indicates which file types are appropriate. If used with a device that has a camera, it activates the device camera. With a device without a camera, it activates the My photo folder.</p>
+<p style="text-align:center;"><img alt="Activating media features" src="../../../images/media_capture_activating_features.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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html_media_capture" target="_blank">media_capture.html</a></li>
+ </ul>
+ 
+ </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
new file mode 100644 (file)
index 0000000..360be96
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Accessing Media Streams, and Playing and Capturing Multimedia </title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media: Accessing Media Streams, and Playing and Capturing Multimedia </h1>
+
+    <p>The media tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="getusermedia_tutorial_w.htm">getUserMedia: Accessing Media Streams</a> <p>Demonstrates how you can access a local device to generate a multimedia stream.</p></li>  
+   <li><a href="video_audio_tutorial_w.htm">HTML5 video and audio element: Playing and Managing Multimedia Content</a> <p>Demonstrates how you can create a player using video and audio elements.</p></li>
+  </ul>
+
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+    <ul>
+   <li><a href="media_capture_tutorial_w.htm">HTML Media Capture: Activating Media Capture Capabilities</a> <p>Demonstrates how you can activate the media capture feature during file upload.</p></li>
+   <li><a href="webaudio_tutorial_w.htm">Web Audio: Playing Audio Content</a> <p>Demonstrates how you can play audio content using the HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> element.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm b/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm
new file mode 100644 (file)
index 0000000..d6e0ed4
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm
@@ -0,0 +1,336 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#initialize">Initializing the Application</a></li>
+            <li><a href="#handle">Handling the Keys</a></li>
+            <li><a href="#play">Playing Sounds</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/video_audio_w.htm">HTML5 video and audio element Guide</a></li> 
+            <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API for Mobile Web</a></li> 
+               </ul>
+       </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 SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">Piano</a>.</p> 
+  
+  <p>This task consists of the following parts:</p> 
+  <ul class="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 <span style="font-family: Courier New,Courier,monospace;">audio</span> 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 class="figure">Figure: Piano screen</p> 
+  <p style="text-align: center;"><img alt="Piano screen" src="../../../images/piano.png" /></p> 
+ 
+  <h3 id="main" name="main">Defining the Main Screen</h3> 
+  <ol class="tutorstep"> 
+   <li>index.html Source File
+<p>The main screen displays a piano keyboard. The keys are defined as <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> elements whose <span style="font-family: Courier New,Courier,monospace;">class</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">button</span>.</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&gt;
+</pre> </li>
+<li>style.css Source File
+<p>The appearance of the key buttons is defined in the CSS file.</p>
+
+<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;
+}
+
+.white_btn.pressed 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;background-image: url(&#39;../white_pressed.png&#39;);
+}
+
+.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;
+}
+
+.black_btn.pressed 
+{
+&nbsp;&nbsp;&nbsp;background-image: url(&#39;../black_pressed.png&#39;);
+}
+
+</pre> </li>
+</ol>   
+
+  <h2 id="initialize" name="initialize">Initializing the Application</h2>
+  <ol class="tutorstep"> 
+   <li>main.js Source File
+    <ol>
+     <li>
+      <p>The <span style="font-family: Courier New,Courier,monospace;">piano</span> variable is declared to create the <span style="font-family: Courier New,Courier,monospace;">Piano</span> object. A keyword is determined for optimizing browser performance and validating JavaScript. Elements are defined for storing the piano key element object IDs and corresponding <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> elements.</p>
+      <pre class="prettyprint">
+var piano;
+
+function Piano() 
+{
+&nbsp;&nbsp;&nbsp;&quot;use strict&quot;; 
+}
+
+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;}
+};
+      </pre>
+     </li>
+     <li>
+      <p>The <span style="font-family: Courier New,Courier,monospace;">audioInit()</span> method is used to create and initialize the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> element for each keyboard button. The element contains an event listener to detect button events.</p>
+      <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;}
+};
+      </pre>
+     </li>
+    </ol>
+   </li>
+  </ol>
+
+  <h2 id="handle" name="handle">Handling the Keys</h2> 
+  <p>The event handling functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>   
+  <ol class="tutorstep"> 
+   <li>Creating Event Listeners
+   <ol><li>
+<p>The <span style="font-family: Courier New,Courier,monospace;">onPianoKeyTouchDown()</span> event listener is created to detect the touch event, when the user presses a piano key.</p>
+
+<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; + 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;}
+};
+</pre> </li>
+   <li>
+<p>The <span style="font-family: Courier New,Courier,monospace;">onPianoKeyTouchUp()</span> event listener is created to detect the touch event, when the user releases a piano key.</p>
+
+<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;(function(id) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + id).removeClass(&#39;pressed&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(buttonId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 100);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.touchPianoKey[touchId] = undefined;
+&nbsp;&nbsp;&nbsp;}
+};
+</pre> </li>
+</ol>
+</li>
+   <li>Binding Events
+<p>The <span style="font-family: Courier New,Courier,monospace;">bindEvents()</span> method is used to register event handlers to the corresponding events.</p>
+
+<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;self.onPianoKeyTouchDown(e); 
+&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;$(&quot;.button&quot;).bind(&#39;touchend&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.onPianoKeyTouchUp(e); 
+&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;$(&#39;#back&#39;).bind(&#39;touchstart&#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;/* Apply CSS style dynamically */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass(&#39;active&#39;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;$(&#39;#back&#39;).bind(&#39;touchend&#39;, function(event) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel the applied CSS style */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).removeClass(&#39;active&#39;);      
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;webkitvisibilitychange&#39;, function() 
+&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;self.audioInit()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;})
+};
+</pre> </li>
+</ol> 
+  
+  
+  <h2 id="play" name="play">Playing Sounds</h2> 
+  
+  <p>This section builds upon the elements described in <a href="video_audio_tutorial_w.htm#play">Playing Media Files</a>.</p> 
+  <ol class="tutorstep"> 
+   <li>main.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace;">playAudioByElement()</span> method is used to play the sound determined in the <span style="font-family: Courier New,Courier,monospace;">audio</span> element, when a given key button is pressed.</p>
+
+<pre class="prettyprint">
+Piano.prototype.playAudioByElement = 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;}
+};
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm b/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm
new file mode 100644 (file)
index 0000000..ea04aaa
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm
@@ -0,0 +1,406 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Self Camera</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#configure">Initializing the Application</a></li>
+            <li><a href="#stream">Accessing the Camera Stream</a></li>
+            <li><a href="#capture">Capturing Pictures from Video</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/getusermedia_w.htm">getUserMedia Guide</a></li>
+            <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Task: Self Camera</h1>
+  <p>This task, based on the SelfCamera sample delivered with the Tizen SDK, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> API to access and display the camera video stream, and capture a single photo. For more information on the sample functionality and creating the sample with the full source code, see the <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">SelfCamera</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul class="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="#stream">Accessing the Camera Stream</a> defines how to access the front camera video stream.</li>
+   <li><a href="#capture">Capturing Pictures from Video</a> defines how to capture a single frame from the video tag.</li>
+  </ul>
+
+ <p>This sample is a fully functional camera application for taking photos with the device front camera. The user can set the timer delay and access photos by clicking on the photo previews.</p>
+
+<h2 id="layout" name="layout">Defining the Application Layout</h2>
+  <p>The SelfCamera sample application layout contains only 1 screen: the main screen that displays the camera view and application control elements (buttons).</p>
+
+
+   <p>The following figure shows the main screen of the application.</p>
+  <p class="figure">Figure: SelfCamera screen</p>
+  <p style="text-align: center;"><img alt="SelfCamera screen" src="../../../images/selfcamera.png" /></p>
+
+<h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol class="tutorstep">
+   <li>index.html Source File
+ <p>The <span style="font-family: Courier New,Courier,monospace">
+&lt;div&gt;</span> 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;
+
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;countdown&quot;&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;
+
+&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;
+
+&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;/body&gt;</pre> </li>
+<li> css/style.css Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">
+style.css</span> file defines the positions and styles of the camera elements.</p>
+<pre class="prettyprint">
+#camera
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 100%;
+&nbsp;&nbsp;&nbsp;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;
+}
+
+.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;
+}
+
+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;
+}
+
+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
+}
+</pre></li></ol>
+
+<h2 id="configure" name="configure">Initializing the Application</h2>
+  <ol class="tutorstep">
+   <li>config.xml Source File <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> 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/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;/widget&gt;</pre> </li>
+  </ol>
+
+<h2 id="stream" name="stream">Accessing the Camera Stream</h2>
+
+  <p>This section builds upon the elements described in <a href="getusermedia_tutorial_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 <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
+  <ol class="tutorstep">
+  <li>Creating and Initializing the Application Object
+        <ol>
+<li>The <span style="font-family: Courier New,Courier,monospace">SelfCamera</span> object represents the entire application entity, and by using the prototype, the member methods are registered in the object.
+
+  <pre class="prettyprint">
+var selfCamera;
+function SelfCamera()
+{
+&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
+}
+
+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;};
+}</pre></li>
+
+ <li>The <span style="font-family: Courier New,Courier,monospace">SelfCamera</span> object is created and initialized.
+
+  <pre class="prettyprint">
+selfCamera = new SelfCamera();
+$(document).ready(function()
+{
+&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
+&nbsp;&nbsp;&nbsp;selfCamera.init();
+}); </pre></li>
+</ol></li>
+<li>Binding Events to the Application Object
+<ol>
+
+<li><p>To bind video events to the application object, call the <span style="font-family: Courier New,Courier,monospace">bindVideoEvents()</span> method, which registers the event handlers to the corresponding events using the <span style="font-family: Courier New,Courier,monospace">bind()</span> method.</p>
+  <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();});
+};
+</pre></li>
+
+<li><p>To bind button and hardware key events to the application object, call the <span style="font-family: Courier New,Courier,monospace">bindEvents()</span> method, which register the event handlers to the corresponding events using the <span style="font-family: Courier New,Courier,monospace">bind()</span> method.</p>
+  <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;, 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;, 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));
+};</pre>
+
+</li></ol></li></ol>
+
+<h3 id="access" name="access">Accessing the Camera Stream</h3>
+  <ol class="tutorstep">
+   <li>main.js Source File
+ <ol>
+ <li> The <span style="font-family: Courier New,Courier,monospace">startPreview()</span> method requests the video stream using the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> 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));
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">onCaptureVideoSuccess()</span> 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 <span style="font-family: Courier New,Courier,monospace">createVideoElement()</span> 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;this.createVideoElement(urlStream); /* Create video element with stream handler */
+&nbsp;&nbsp;&nbsp;this.setTimer(DELAY_2_SECOND); /* Initialize timer button options */
+};
+</pre></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">createVideoElement()</span> method defines the video element, except for the <span style="font-family: Courier New,Courier,monospace">
+src</span> attribute, which is already defined by the <span style="font-family: Courier New,Courier,monospace">onCaptureVideoSuccess()</span> event handler.</p>
+  <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();
+};</pre>
+</li>
+
+ </ol></li> </ol>
+
+<h2 id="capture" name="capture">Capturing Pictures from Video</h2>
+  <ol class="tutorstep">
+   <li>main.js Source File
+ <ol>
+ <li>Capture a video frame with canvas.
+  <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;/* 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); */
+};
+</pre> </li>
+
+<li>Extract the image data from the canvas.
+ <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;).replace(&#39;data:,&#39;, &#39;&#39;);
+
+&nbsp;&nbsp;&nbsp;this.systemIO.saveFileContent(fileName, data, onSuccess, &#39;base64&#39;);
+};</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)
+{
+&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, 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);
+};</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>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm
new file mode 100644 (file)
index 0000000..f74c588
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm
@@ -0,0 +1,698 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 video and audio element: Playing and Managing Multimedia Content</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create">Creating an Audio and Video Player</a>
+                       </li>
+                       <li>Playback management
+                               <ul class="toc">
+                                       <li><a class="opensection" href="#play">Playing Media Files</a>
+                                       </li>
+                                       <li><a class="opensection" href="#retrieve">Retrieving Media Information</a>
+                                       </li>
+                                       <li><a class="opensection" href="#move">Moving the Timeline Position</a>
+                                       </li>
+                                       <li><a class="opensection" href="#display">Displaying the Progress State</a>
+                                       </li>
+                               </ul>
+                       </li>
+                       <li><a class="opensection" href="#resize">Resizing the Video Screen</a>
+                       </li>
+                       <li><a class="opensection" href="#check">Checking Supported Media Formats</a>
+                       </li>
+                       <li><a class="opensection" href="#handle">Handling Errors</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/video_audio_w.htm">HTML5 video and audio element Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#audio">HTML5 audio element API for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#video">HTML5 video element API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 video and audio element: Playing and Managing Multimedia Content</h1>
+  <div class="cont"><div class="static-cont">  
+
+ <p>This tutorial demonstrates how you can use HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements with JavaScript in Tizen.</p>
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML5 video and audio element API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#create">Creating an Audio and Video Player</a>
+<p>Create a simple player using the <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements&#39; attributes.</p></li>
+<li>Playback management
+  <ul>
+       <li><a class="opensection" href="#play">Playing Media Files</a>
+       <p>Provide custom control for play and pause events.</p></li>
+
+       <li><a class="opensection" href="#retrieve">Retrieving Media Information</a>
+       <p>Retrieve duration and playing time.</p></li>
+
+       <li><a class="opensection" href="#move">Moving the Timeline Position</a>
+       <p>Change the play position forward or backward in the timeline.</p></li>
+
+       <li><a class="opensection" href="#display">Displaying the Progress State</a>
+       <p>Display the download progress state of a media file.</p></li>
+  </ul>
+</li>
+
+<li><a class="opensection" href="#resize">Resizing the Video Screen</a>
+<p>Resize the video screen. This usage can only be applied to the <span style="font-family: Courier New,Courier,monospace">video</span> element.</p></li>
+
+<li><a class="opensection" href="#check">Checking Supported Media Formats</a>
+<p>Check whether the media data has an acceptable MIME type, and if not, handle the exceptions.</p></li>
+
+<li><a class="opensection" href="#handle">Handling Errors</a>
+<p>Handle errors that can occur during playback.</p></li>
+</ul>
+
+<h2>Task in Mobile Applications</h2>
+<p>In the <a href="task_piano_w.htm">Piano</a> task, we will walk through creating a piano in your application and playing sounds.</p>
+
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       
+<ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Creating an Audio and Video Player</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+<p>To provide users with HTML5 audio and video features, you must learn to create a simple player for streaming playback:
+</p>
+<ol>
+<li>
+<p>To create an audio player, create an <span style="font-family: Courier New,Courier,monospace">audio</span> element including the necessary attributes:</p>
+<pre class="prettyprint">
+&lt;audio id=&quot;audio&quot; src=&quot;media/audio_sample.mp3&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preload=&quot;auto&quot; controls muted loop autoplay&gt;
+&lt;/audio&gt;
+</pre>
+<p style="text-align:center;"><img alt="Audio player" src="../../../images/video_audio3.png" /></p>
+</li>
+<li>
+<p>To create a video player, create a <span style="font-family: Courier New,Courier,monospace">video</span> element including the necessary attributes. In addition to the attributes available for the <span style="font-family: Courier New,Courier,monospace">audio</span> element, you can also use the <span style="font-family: Courier New,Courier,monospace">width</span>, <span style="font-family: Courier New,Courier,monospace">height</span>, and <span style="font-family: Courier New,Courier,monospace">poster</span> attributes.</p>
+<pre class="prettyprint">
+&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;400&quot; height=&quot;220&quot; poster=&quot;media/poster_sample.png&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preload=&quot;auto&quot; controls muted loop&gt;
+&lt;/video&gt;
+</pre>
+<p>A player with a play control (built-in control provided in the 
+browser) is created. The control is visible only when the <span style="font-family: Courier New,Courier,monospace">controls</span> attribute is added. If the <span style="font-family: Courier New,Courier,monospace">poster</span> 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.
+</p>
+<p style="text-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>
+</li>
+</ol>  
+
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">preload</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">auto</span> by default, meaning that the media metadata is automatically loaded. If you do not want to load the metadata, set the attribute value as <span style="font-family: Courier New,Courier,monospace">metadata</span> or <span style="font-family: Courier New,Courier,monospace">none</span>.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Carefully consider before using the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-media-autoplay" target="_blank">autoplay</a> feature, which plays content automatically in the mobile environment without user interaction. The user can face unintended Internet packet fees or interfering factors, such as playback being stopped unintentionally.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">mini_code_audio.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">mini_code_video.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">audio_sample.mp3</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">poster_sample.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="play" name="play" class="items-tit-h2">Playing Media Files</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+
+<p>To provide users with HTML5 audio and video features, you must learn to play and pause media files using custom controls:</p>
+
+<ol>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and buttons used to control the play and pause:
+<pre class="prettyprint lang-html">
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot;&gt;&lt;/video&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-play&quot; type=&quot;button&quot;&gt;play&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-pause&quot; type=&quot;button&quot; disabled&gt;pause&lt;/button&gt;        
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>The <strong>Pause</strong> button is disabled until the play event occurs.</p>
+</li>
+<li>Define the button functions. Play and pause the media file using the <span style="font-family: Courier New,Courier,monospace">play()</span> and <span style="font-family: Courier New,Courier,monospace">pause()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.
+
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var play_button = document.getElementById(&quot;v-play&quot;);
+&nbsp;&nbsp;&nbsp;var pause_button = document.getElementById(&quot;v-pause&quot;);
+    
+&nbsp;&nbsp;&nbsp;play_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.play();  /* Play movie */
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;pause_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.pause(); /* Pause movie */
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+</li>
+
+<li>
+ <p>Apply event listeners to detect button events an react to them:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;);
+    
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;play&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = true;    /* Play button disabled */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = false;  /* Pause button enabled */
+&nbsp;&nbsp;&nbsp;}, false); 
+     
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;pause&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = false;   /* Play button enabled */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = true;   /* Pause button disabled */
+&nbsp;&nbsp;&nbsp;}, false);   
+    
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;ended&quot;, function() 
+&nbsp;&nbsp;&nbsp;{   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = false;   /* Play button enabled */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = true;  /* Pause button disabled */
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre>
+
+<p class="figure">Figure: Playing files (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Playing files (in mobile applications only)" src="../../../images/video_audio4.png" /></p> 
+</li>
+</ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">play_pause.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Media Information</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+
+<p>To provide users with HTML5 audio and video features, you must learn to retrieve the total duration and playing time of a media file:</p>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The media file metadata can only be retrieved, if it is loaded in the application. The <span style="font-family: Courier New,Courier,monospace">preload</span> attribute is must be set to <span style="font-family: Courier New,Courier,monospace">auto</span>, or the <span style="font-family: Courier New,Courier,monospace">autoplay</span> attribute be set as <span style="font-family: Courier New,Courier,monospace">true</span>.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<ol>
+<li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and the elements to display the total duration and playing time of the file:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Play Time Example&lt;/h1&gt;
+&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;
+&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;
+&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;
+&lt;/div&gt;</pre>
+</li>
+<li>
+<p>Apply the <span style="font-family: Courier New,Courier,monospace">loadedmetadata</span> <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media event</a> to the <span style="font-family: Courier New,Courier,monospace">video</span> object to get the total duration of the file:</p>
+
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;);
+&nbsp;&nbsp;&nbsp;var currentTime = document.getElementById(&quot;currentTime&quot;);
+&nbsp;&nbsp;&nbsp;var totalTime = document.getElementById(&quot;totalTime&quot;);
+    
+&nbsp;&nbsp;&nbsp;/* Indicate the total duration */
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;loadedmetadata&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Total video duration */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var totalSec = video.duration;         
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Import method to change seconds to time (HH:MM:SS) format */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var time = secondsToTime(totalSec);   
+          
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the calculated time on screen */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;totalTime.innerHTML = parseInt(totalSec) 
+&nbsp;&nbsp;&nbsp;&nbsp;&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;sec (&quot; + time.h + &quot;:&quot; + time.m + &quot;:&quot; + time.s + &quot;)&quot;;
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+</li>
+<li>
+<p>Apply the <span style="font-family: Courier New,Courier,monospace">timeupdate</span> media event to the <span style="font-family: Courier New,Courier,monospace">video</span> object to get the playing time:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;/* Indicate play time status */
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;timeupdate&quot;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Current play time */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var currSec = video.currentTime;           
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var c_time = secondsToTime(currSec
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the current play time */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentTime.innerHTML = parseInt(currSec) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;sec (&quot; + c_time.h + &quot;:&quot; + c_time.m + &quot;:&quot; + c_time.s + &quot;)&quot;;
+&nbsp;&nbsp;&nbsp;}, false); 
+&lt;/script&gt;
+</pre>
+</li>
+<li><p>To manage the data more efficiently, convert the time units to JSON parser objects:</p>
+
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Change seconds to time (HH:MM:SS) format */ 
+&nbsp;&nbsp;&nbsp;function secondsToTime(secs) 
+&nbsp;&nbsp;&nbsp;{            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hours = Math.floor(secs / (60 * 60));
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var divisor_for_minutes = secs % (60 * 60);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var minutes = Math.floor(divisor_for_minutes / 60);
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var divisor_for_seconds = divisor_for_minutes % 60;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var seconds = Math.ceil(divisor_for_seconds);
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set as JSON object */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var obj = 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;h&quot;: intToString(hours), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;m&quot;: intToString(minutes), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;s&quot;: intToString(seconds) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return obj;
+&nbsp;&nbsp;&nbsp;}
+        
+&nbsp;&nbsp;&nbsp;/* Ensure that each time is set in 2 characters according to the time format */
+&nbsp;&nbsp;&nbsp;function intToString(time) 
+&nbsp;&nbsp;&nbsp;{                    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (parseInt(time) &lt; 10 ? (&quot;0&quot; + time) : time);           
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+<p class="figure">Figure: Displaying the duration and play time (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Displaying the duration and play time (in mobile applications only)" src="../../../images/video_audio5.png" /></p> 
+</li>
+</ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">play_time_view.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="move" name="move" class="items-tit-h2">Moving the Timeline Position</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+
+<p>To provide users with HTML5 audio and video features, you must learn to move the play position on the timeline:</p>
+
+<ol>
+<li>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and buttons used to control the timeline:</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls&gt;&lt;/video&gt;    
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-back&quot;&gt;5 Sec Backward&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-forw&quot;&gt;5 Sec Forward&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;&lt;button id=&quot;v-goto&quot;&gt;Go to 40 Sec&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li><p>Add event listeners to change the <span style="font-family: Courier New,Courier,monospace">currentTime</span> value when a <span style="font-family: Courier New,Courier,monospace">click</span> event occurs in the button elements:</p>
+
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;); /* Video object */
+&nbsp;&nbsp;&nbsp;var back_button = document.getElementById(&quot;v-back&quot;); /* Back button */
+&nbsp;&nbsp;&nbsp;var forw_button = document.getElementById(&quot;v-forw&quot;); /* Forward button */
+&nbsp;&nbsp;&nbsp;var go_button = document.getElementById(&quot;v-goto&quot;); /* Jump button */
+                
+&nbsp;&nbsp;&nbsp;/* Move 5 seconds back */ 
+&nbsp;&nbsp;&nbsp;back_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{                    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.currentTime -= 5     
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;/* Move 5 seconds forward */ 
+&nbsp;&nbsp;&nbsp;forw_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{                    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.currentTime += 5     
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;/* Move timeline to 40 seconds */ 
+&nbsp;&nbsp;&nbsp;go_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.currentTime = 40
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre>
+<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>
+
+<p class="figure">Figure: Moving the timeline position (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Moving the timeline position (in mobile applications only)" src="../../../images/video_audio6.png" /></p> 
+</li>
+</ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">time_jumping.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="display" name="display" class="items-tit-h2">Displaying the Progress State</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+ <p>To provide users with HTML5 audio and video features, you must learn to check the download progress status of media content:</p>
+
+<ol>
+<li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and the elements to display the download progress status of the media file:</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls poster=&quot;media/poster_sample.png&quot;&gt;&lt;/video&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Progress: &lt;span id=&quot;state&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt; 
+</pre>
+<p>While the download is in progress, the <span style="font-family: Courier New,Courier,monospace">poster1.png</span> image is shown.</p>
+</li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">buffered</span> attribute of the <span style="font-family: Courier New,Courier,monospace">video</span> object returns a <a href="http://www.w3.org/TR/html5/embedded-content-0.html#timeranges" target="_blank">TimeRanges</a> object that represents the downloaded buffering range. Use the <span style="font-family: Courier New,Courier,monospace">end</span> property of the <span style="font-family: Courier New,Courier,monospace">TimeRanges</span> object to find out the end time (in seconds) of the buffered range:  
+
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;)
+    
+&nbsp;&nbsp;&nbsp;/* Progress event */
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;progress&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Returns a TimeRanges object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var buffered = video.buffered;
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Returns time in seconds */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var buffered_end = buffered.end();
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">progress</span> <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>
+<pre class="prettyprint lang-js">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change to progress rate percent */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var progress = (buffered_end / video.duration) * 100;
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the progress state */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;state&quot;).innerHTML = parseInt(progress) + &quot;%&quot;  
+&nbsp;&nbsp;&nbsp;}, false); 
+&lt;/script&gt;
+</pre>
+ <p class="figure">Figure: Displaying the progress state (in mobile applications only)</p>
+<p style="text-align:center;"><img alt="Displaying progress state (in mobile applications only)" src="../../../images/video_audio7.png" /></p> 
+</li>
+</ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">progress.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">poster_sample.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="resize" name="resize" class="items-tit-h2">Resizing the Video Screen</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>To provide users with HTML5 audio and video features, you must learn to resize the video screen:</p>
+ 
+ <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the screen size is reduced, the basic <span style="font-family: Courier New,Courier,monospace">play</span> control can be wrongly positioned. Therefore, do not use the <span style="font-family: Courier New,Courier,monospace">controls</span> attribute when providing the resizing custom control.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+ <ol>
+ <li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and buttons used to control the screen size:</p>
+ 
+ <pre class="prettyprint">&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls&gt;&lt;/video&gt;
+&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;size_big&quot;&gt;600 * 410&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;size_middle&quot;&gt;320 * 220&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;size_small&quot;&gt;150 * 150&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+ </li>
+ 
+ <li><p>Add event listeners to change the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">height</span> values when a <span style="font-family: Courier New,Courier,monospace">click</span> event occurs in the button elements:</p>
+ 
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;)
+    
+&nbsp;&nbsp;&nbsp;/* Resize to big size */
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;size_big&quot;).addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.width = 600;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.height = 410;
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;/* Resize to middle size */
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;size_middle&quot;).addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.width = 320;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.height = 220;
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;/* Resize to small size */
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;size_small&quot;).addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.width = 150;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.height = 150;
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;</pre>
+ <p class="figure">Figure: Resizing the video screen (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Resizing the video screen (in mobile applications only)" src="../../../images/video_audio8.png" /></p> 
+ </li>
+ 
+ </ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">resize.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="check" name="check" class="items-tit-h2">Checking Supported Media Formats</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+ <p>To provide users with HTML5 audio and video features, you must learn to check whether the media data of the assigned MIME type can be played:</p>
+
+<ol>
+<li><p>Create the <span style="font-family: Courier New,Courier,monospace">video</span> element and determine the media files you want to check:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video1&quot; src=&quot;media/video_sample_001.ogv&quot; controls &gt;&lt;/video&gt;
+&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;
+&lt;/div&gt;
+
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video2&quot; src=&quot;media/video_sample_002.webm&quot; controls &gt;&lt;/video&gt;
+&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;
+&lt;/div&gt;
+</pre>
+</li>
+<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>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var video1 = document.getElementById(&quot;video1&quot;);
+&nbsp;&nbsp;&nbsp;var video2 = document.getElementById(&quot;video2&quot;);
+&nbsp;&nbsp;&nbsp;var videoElem03 = document.getElementById(&quot;video3&quot;);
+    
+&nbsp;&nbsp;&nbsp;/* Check the ogg format */
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;vlog1&quot;).innerHTML = video1.canPlayType(&#39;video/ogg&#39;);
+    
+&nbsp;&nbsp;&nbsp;/* Check the webm format */
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;vlog2&quot;).innerHTML = video2.canPlayType(&#39;audio/acc&#39;);     
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+<p>For more information about the media formats supported in Tizen, see the <a href="../../../../../org.tizen.guides/html/web/w3c/media/video_audio_w.htm">HTML5 video and audio element</a> guide.</p>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">can_play_type.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample_001.ogv</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample_002.webm</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="handle" name="handle" class="items-tit-h2">Handling Errors</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">   
+<p>To provide users with HTML5 audio and video features, you must learn to handle errors that can occur during playback:</p>
+
+<ol>
+<li><p>Create the video and button elements, which can induce errors:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;media&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls &gt;&lt;/video&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;btn01&quot;&gt;src Null&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li><p>Add an event listener to detect errors and trigger error messages:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;)
+
+&nbsp;&nbsp;&nbsp;/* Button event: induce error */ 
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;btn01&quot;).addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.src = &quot;&quot;; /* Set value as null value */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;error&quot;, function() 
+&nbsp;&nbsp;&nbsp;{    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Video playback failed: show a message saying why */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (video.error.code) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1:
+&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;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2:
+&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;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 3:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;MEDIA_ERR_DECODE = 3 Media data decoding failure &quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 4:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;MEDIA_ERR_SRC_NOT_SUPPORTED = 4 Format not supported&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+ <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">error.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
+ </ul>
+               </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm
new file mode 100644 (file)
index 0000000..2109757
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm
@@ -0,0 +1,354 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Audio: Playing Audio Content</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#load">Loading Data and Creating Audio Context</a></li>
+                       <li><a href="#use">Using Modular Routing</a></li>
+                       <li><a href="#play">Playing Sound</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/media/webaudio_w.htm">Web Audio Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webaudio">Web Audio API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web Audio: Playing Audio Content</h1>
+  <div class="cont"><div class="static-cont">
+  
+ <p>This tutorial demonstrates how to play audio content using the Web audio.</p>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Web Audio API basics by learning about: </p>
+<ul>
+<li><a href="#load">Loading Source Data and Creating Audio Context</a>
+<p>Modulate the source data into decoded audio data using <a href="../../../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest</a>, and create an instance of <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a>.</p></li>
+<li><a href="#use">Using Modular Routing</a>
+<p>Connect to a modular routing node after creating other nodes, such as source node, filter node, and gain node.</p></li>
+<li><a href="#play">Playing Sound</a>
+<p>Play sound by using the <span style="font-family: Courier New,Courier,monospace">noteOn()</span> method.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+               <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="load" name="load" class="items-tit-h2">Loading Data and Creating Audio Context</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To provide users with sophisticated audio features, you must learn to modulate source data into decoded audio data using <a href="../../../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest</a>, and create an instance of the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface:</p>
+
+<ol>
+<li>To load source audio data:
+<ol>
+<li><p>Load a source audio file using XMLHttpRequest. Set the <span style="font-family: Courier New,Courier,monospace">responseType</span> to <span style="font-family: Courier New,Courier,monospace">arraybuffer</span> to receive binary response:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var url = &quot;sample.mp3&quot;;
+&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.send();
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">onload</span> event is triggered. Retrieve the decoded audio data:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Asynchronous event handling */
+&nbsp;&nbsp;&nbsp;request.onload = function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Put the modulated audio data into the audioData variable */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var audioData = request.response;
+&nbsp;&nbsp;&nbsp;};
+&lt;/script&gt;
+</pre>
+<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>
+</li>
+</ol>
+</li>
+<li>To create an audio context:
+<p>Create a WebKit-based <span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance, which plays and manages the audio data:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var context;
+&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();
+&lt;/script&gt;
+</pre>
+<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>
+<p>The majority of the Web Audio API features, such as creating audio file data, decoding it, and creating <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> are managed using the methods of the <span style="font-family: Courier New,Courier,monospace">AudioContext</span> interface.</p>
+</li>
+
+<li>To create an audio buffer:
+<p>Create an <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a> interface using the array buffer of audio data response attributes of the <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest()</span> method. Select from the following options:</p>
+<ul class="ul">
+<li><p>Create the audio buffer using the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var context = new webkitAudioContext();
+&nbsp;&nbsp;&nbsp;function setSound()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var url = &quot;sample_audio.mp3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var request = new XMLHttpRequest();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.open(&quot;GET&quot;, url, true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.responseType = &quot;arraybuffer&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Asynchronous callback */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onload = function()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the sound source */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundBuffer = context.createBuffer(request.response, true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.send();
+&nbsp;&nbsp;&nbsp;}    
+&lt;/script&gt;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method is used as a synchronous decoding method to create an audio buffer of the required size.</p>
+</li>
+
+<li><p>Create the audio buffer using the <span style="font-family: Courier New,Courier,monospace">decodeAudioData()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var context = new webkitAudioContext();
+&nbsp;&nbsp;&nbsp;function setSound()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var url = &quot;sample_audio.mp3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var request = new XMLHttpRequest();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.open(&quot;GET&quot;, url, true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.responseType = &quot;arraybuffer&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Asynchronous callback */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onload = function()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the sound source */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();
+            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Import callback function that provides PCM audio data decoded as an audio buffer */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.decodeAudioData(request.response, function(buffer)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bufferData = buffer;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = bufferData;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, this.onDecodeError);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.send();
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">decodeAudioData()</span> method asynchronously decodes audio data from the <a href="../../../../../org.tizen.guides/html/web/w3c/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 <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method.</p>
+</li>
+</ul>
+<p>To use an audio buffer created with the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> or <span style="font-family: Courier New,Courier,monospace">decodeAudioData()</span> method, the buffer must be allocated to the <span style="font-family: Courier New,Courier,monospace">audioBufferSourceNode</span> buffer.</p>
+</li>
+</ol>
+
+ <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/web_audio_api" target="_blank">web_audio_basic_playback.html</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="use" name="use" class="items-tit-h2">Using Modular Routing</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+
+<p>To provide users with sophisticated audio features, you must learn to enable routing audio source data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNode</a> objects:</p>
+
+<ol>
+<li>To route to speaker output in a direct sound destination:
+<ol>
+<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>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var context;
+&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();
+</pre>
+</li>
+<li><p>Route a single audio source directly to the output:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;var soundSource;
+
+&nbsp;&nbsp;&nbsp;function startSound(audioData) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Direct routing to speaker */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.connect(volumeNode);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volumeNode.connect(context.destination);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+<p>All routing occurs within an <span style="font-family: Courier New,Courier,monospace">AudioContext</span> containing a single <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioDestinationNode-section" target="_blank">AudioDestinationNode</a>.</p>
+ 
+<p style="text-align:center;"><img alt="Direct routing" src="../../../images/web_audio1.png" /></p>
+</li>
+</ol>
+</li>
+
+<li><p>To route to the sound destination using <span style="font-family: Courier New,Courier,monospace">AudioNodes</span>:</p>
+<ol>
+<li><p>Create an <span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var context;
+&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();
+</pre>
+</li>
+<li><p>Create the sound source:</p>
+<pre class="prettyprint lang-js">
+&nbsp;&nbsp;&nbsp;function startSound(audioData) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundBuffer = context.createBuffer(audioData, true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volumeNode = context.createGainNode();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter = context.createBiquadFilter();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audioAnalyser = context.createAnalyser();
+
+</pre>
+</li>
+<li><p>Create the node to manage the output, for example, adjusting volume and applying filters:</p>
+<pre class="prettyprint lang-js">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.connect(volumeNode);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volumeNode.connect(filter);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter.connect(audioAnalyser);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audioAnalyser.connect(context.destination);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+
+<p>The figure below illustrates using 3 sources and a convolution reverb sent with a dynamics compressor at the final output stage.</p>
+
+<p style="text-align:center;"><img alt="Routing from multiple sources" src="../../../images/web_audio2.png" /></p> 
+</li>
+</ol>
+</li>
+</ol>
+<p><span style="font-family: Courier New,Courier,monospace">AudioNodes</span> can be used to activate sound effects, and create tweaks, audio parameters, and audio graphs using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#GainNode-section" target="_blank">GainNode</a> interface, or filter sounds using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#BiquadFilterNode" target="_blank">BiquadFilterNode</a> interface.</p>
+ 
+  <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/web_audio_api" target="_blank">web_audio_basic_playback.html</a></li>
+ </ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="play" name="play" class="items-tit-h2">Playing Sound</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+ <p>To provide users with sophisticated audio features, you must learn to play sound:</p>
+<ol>
+<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>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var context;
+&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();</pre>
+</li>
+<li><p>Play audio through direct sound destination using the <span style="font-family: Courier New,Courier,monospace">noteOn()</span> method:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;function playSound() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var soundSource = context.createBufferSource();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.connect(context.destination); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.noteOn(context.currentTime);
+&nbsp;&nbsp;&nbsp;} 
+&lt;/script&gt;
+</pre>
+<p>Use time as parameter of the <span style="font-family: Courier New,Courier,monospace">noteOn()</span> method. Time is based on the <span style="font-family: Courier New,Courier,monospace">currentTime</span> property of the <span style="font-family: Courier New,Courier,monospace">AudioContext</span>, and expressed in seconds. If you set the value as &#39;0&#39;, the playback begins immediately.</p>
+
+<p>You can also use time as parameter of the <span style="font-family: Courier New,Courier,monospace">noteOff()</span> method. If you set the value as &#39;0&#39;, the playback stops immediately.</p>
+</li>
+</ol>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance digitally modulates the audio source file into audio data. After creating the sound source, playback is implemented by processing audio data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> either directly to the speaker, or in the middle.</p>
+
+ <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/web_audio_api" target="_blank">web_audio_basic_playback.html</a></li>
+ </ul>
+                       </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
new file mode 100644 (file)
index 0000000..2d7e064
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
@@ -0,0 +1,243 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Page Visibility: Managing Hidden and Visible Pages</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#Retrieving_Page_Visibility">Retrieving the Page Visibility Status</a></li>
+                       <li><a class="opensection" href="#Retrieving_Notifications_Visibility">Receiving Notifications on Visibility Status Changes</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                        <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/page_w.htm">Page Visibility Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#visibility">Page Visibility API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#visibility">Page Visibility API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Page Visibility: Managing Hidden and Visible Pages</h1>
+<div class="cont"><div class="static-cont">
+
+                                 <p>This tutorial demonstrates how you can use page visibility in your application.</p>
+
+  <h2>Warm-up</h2> 
+  <p>Become familiar with the Page Visibility API basics by learning about:</p> 
+  <ul> 
+   <li><a href="#Retrieving_Page_Visibility">Retrieving the Page Visibility Status</a> 
+   <p>Retrieve the page visibility status using the <span style="font-family: Courier New,Courier,monospace">hidden</span> or <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property.</p></li> 
+  </ul> 
+  
+  <h2>Follow-up</h2>
+  <p>Once we have learned the basics of the Page Visibility API, we can now move on to more advanced tasks, including:</p>
+  <ul>
+   <li><a href="#Retrieving_Notifications_Visibility">Receiving Notifications on Visibility Status Changes</a> <p>Control the video playback based on the page visibility status change events.</p></li> 
+  </ul>  
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div> 
+ 
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Retrieving_Page_Visibility" name="Retrieving_Page_Visibility" class="items-tit-h2">Retrieving the Page Visibility Status</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To optimize the performance of your application, you must learn to retrieve the page visibility status:</p>
+
+  <ol>
+    <li><p>Retrieve the page visibility status with the <span style="font-family: Courier New,Courier,monospace">hidden</span> property:  </p>
+    <pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);
+   
+&nbsp;&nbsp;&nbsp;function pageVisibilityHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;p&gt;Hidden: &lt;span&gt;&#39; + document.webkitHidden; +
+&nbsp;&nbsp;&nbsp;&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;&lt;/span&gt;&lt;/p&gt;&#39;;
+    </pre>
+    <p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns <span style="font-family: Courier New,Courier,monospace">true</span> 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 <span style="font-family: Courier New,Courier,monospace">false</span>.</p> 
+    </li>
+    <li><p>Retrieve the page visibility status with the <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property:</p>  
+       <pre class="prettyprint lang-js">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;p&gt;VisibilityState: &lt;span&gt;&#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;+ document.webkitVisibilityState; + &#39;&lt;/span&gt;&lt;/p&gt;&#39;;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+       </pre>
+       <p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns one of the following DOMString types:</p>
+               <ul class="ul">
+                       <li><p><span style="font-family: Courier New,Courier,monospace">hidden</span>: Document cannot be seen at all</p></li>
+                       <li><p><span style="font-family: Courier New,Courier,monospace">visible</span>: Document can be at least partly seen</p></li>
+                       <li><p><span style="font-family: Courier New,Courier,monospace">prerender</span>: Document is loaded, but cannot be seen on the screen</p></li>
+                       <li><p><span style="font-family: Courier New,Courier,monospace">unloaded</span>: Document is not loaded</p></li>
+               </ul>
+       <p>Tizen does not currently support the <span style="font-family: Courier New,Courier,monospace">prerender</span> and <span style="font-family: Courier New,Courier,monospace">unloaded</span> types.</p>
+       </li>
+  </ol>
+  <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Since Tizen supports the WebKit-based page visibility, you must include the webkit prefix in the attributes.</td> 
+      </tr> 
+     </tbody>
+  </table>
+
+  <p class="figure">Figure: Page visibility (in mobile applications only)</p> 
+  <p style="text-align:center;"><img alt="Page visibility (in mobile applications only)" src="../../../images/page_visibility_get.png" /></p> 
+
+  <h3>Source Code</h3>
+   <p>For the complete source code related to this use case, see the following file:</p>
+   <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/page_visibility" target="_blank">page_1.html</a></li>
+   </ul> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Retrieving_Notifications_Visibility" name="Retrieving_Notifications_Visibility" class="items-tit-h2">Receiving Notifications on Visibility Status Changes</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To optimize the performance of your application, you must learn to track changes in the page visibility status, and respond to them appropriately:</p>
+  
+       <ol>
+       <li><p>Define the elements used to play video on the screen:</p>
+       <pre class="prettyprint">
+&lt;!--video control--&gt;
+&lt;div class=&quot;media&quot;&gt;
+&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;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--video control buttons--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-play&quot; type=&quot;button&quot;&gt;play&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-pause&quot; type=&quot;button&quot; disabled&gt;pause&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+       </pre>
+       </li>
+       <li><p>Add event listeners to play and pause the video based on the button clicks:</p>
+       <pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var play_button = document.getElementById(&quot;v-play&quot;);
+&nbsp;&nbsp;&nbsp;var pause_button = document.getElementById(&quot;v-pause&quot;);
+&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;);
+
+&nbsp;&nbsp;&nbsp;play_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.play();  /* Play video */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;pause_button.addEventListener(&quot;click&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.pause(); /* Pause video */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;/* Enable and disable buttons based on the playback status */
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;play&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = true;    /* Disable play button */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = false;  /* Enable pause button */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;pause&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = false;   /* Enable play button */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = true;   /* Disable pause button */
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+       </pre>
+       </li>
+       <li><p>Add an event listener to track the page visibility status changes. When the status changes and the <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> event is triggered, use the <span style="font-family: Courier New,Courier,monospace">hidden</span> property to check whether the page is hidden or visible, and to play or pause the video accordingly.</p>
+       <pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Add visibility status event listener */
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;webkitvisibilitychange&quot;, pageVisibilityHandler, false);
+
+&nbsp;&nbsp;&nbsp;/* When the visibility status changes */
+&nbsp;&nbsp;&nbsp;function pageVisibilityHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether the page is hidden */ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(document.webkitHidden)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.play();  /* Play video */
+&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;video.pause(); /* Pause video */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+       </pre>
+       </li>
+       </ol>
+       <p>If the video page becomes hidden with a tab screen transition, the playback is paused. When the video page is visible again, the playback resumes.</p>
+       <p class="figure">Figure: Video player (in mobile applications only)</p> 
+       <p style="text-align:center;"><img alt="Video player (in mobile applications only)" src="../../../images/page_visibility_change.png" /></p> 
+       
+  <h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+       <ul class="ul">
+               <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/page_visibility" target="_blank">visibility_sample.html</a></li>
+               <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/page_visibility" target="_blank">video_sample.mp4</a></li>
+       </ul> 
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
new file mode 100644 (file)
index 0000000..40e9d94
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Optimization: Optimizing Application Execution</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                        <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization Guides</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Performance and Optimization: Optimizing Application Execution</h1>
+
+       <p>The performance and optimization tutorials demonstrate how to use the following features in creating Tizen Web applications:</p> 
+       <ul> 
+               <li><a href="page_tutorial_w.htm">Page Visibility: Managing Hidden and Visible Pages</a> <p>Demonstrates how you can use page visibility in your application.</p></li>
+               <li><a href="timing_control_tutorial_w.htm">Timing control for script-based animations: Controlling Animation Frame Rate</a> <p>Demonstrates how you can use animation control in your application.</p></li>
+               <li><a href="web_workers_tutorial_w.htm">Web Workers: Running JavaScript on the Background</a> <p>Demonstrates how you can manage workers.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
new file mode 100644 (file)
index 0000000..7a77675
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
@@ -0,0 +1,231 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Timing control for script-based animations: Controlling Animation Frame Rate</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#Creating_App">Creating an Application with a Controllable Animation</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                        <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm">Timing control for script-based animations Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">Timing control for script-based animations API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Timing control for script-based animations: Controlling Animation Frame Rate</h1>
+<div class="cont"><div class="static-cont">     
+
+<p>This tutorial demonstrates how you can use animation control in your application.</p>
+  
+ 
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Timing control for script-based animations API basics by learning about:</p>
+  <ul>
+   <li><a href="#Creating_App">Creating an Application with a Controllable Animation</a> 
+   <p>Create an application whose speed you can control.</p></li>
+  </ul>   
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div> 
+ 
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Creating_App" name="Creating_App" class="items-tit-h2">Creating an Application with a Controllable Animation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To optimize the performance of your application, you must learn to create a simple controllable DOM animation.</p>
+       <p>This example creates a screen with a Tizen pinwheel rotating on it, and buttons to increase or decrease the rotation speed and start or stop the animation.</p>
+       <p class="figure">Figure: Controllable animation (in mobile applications only)</p> 
+       <p style="text-align:center;"><img alt="Controllable animation (in mobile applications only)" src="../../../images/timing.png" /></p>
+       <ol>
+               <li><p>Create the HTML layout, including a <span style="font-family: Courier New,Courier,monospace">&lt;nav&gt;</span> element with 3 buttons and <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> elements for the pinwheel image and text:</p>
+               <pre class="prettyprint">
+&lt;nav&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;leftBtn&quot; class=&quot;btn&quot;&gt;Left&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;playstopBtn&quot; class=&quot;btn&quot;&gt;Stop&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;rightBtn&quot; class=&quot;btn&quot;&gt;Right&lt;/a&gt;
+&lt;/nav&gt;
+
+&lt;div id=&quot;pinwheel&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rotateBackground&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;TIZEN OS
+&lt;/div&gt;
+               </pre>
+               </li>
+               <li>Set the CSS properties: 
+                       <ol>
+                               <li><p>Define properties for a flexible vertical layout for the content area, and the <span style="font-family: Courier New,Courier,monospace">nav</span> container:</p>
+                               <pre class="prettyprint">
+body
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;
+}
+
+nav
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;-webkit-flex-direction: row;
+&nbsp;&nbsp;&nbsp;-webkit-align-content: stretch;
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+                               </pre></li>
+                               <li><p>To enable the rotation of the background, define the <span style="font-family: Courier New,Courier,monospace">pinwheel</span> element in relation to its children, and set its size to change according to the display size. Define the <span style="font-family: Courier New,Courier,monospace">rotateBackground</span> element to have a fixed size depending on the display size:</p>
+                               <pre class="prettyprint">
+#pinwheel 
+{
+&nbsp;&nbsp;&nbsp;width: 90vw;
+&nbsp;&nbsp;&nbsp;height: 80vh;
+&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+&nbsp;&nbsp;&nbsp;line-height: 80vh;
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+
+#rotateBackground 
+{
+&nbsp;&nbsp;&nbsp;background: url(images/Tizen-Pinwheel-On-Dark-RGB.png) no-repeat center;
+&nbsp;&nbsp;&nbsp;background-size: 90vw;
+&nbsp;&nbsp;&nbsp;content: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;width: 90vw;
+&nbsp;&nbsp;&nbsp;height: 90vh;
+&nbsp;&nbsp;&nbsp;z-index: -1;
+}
+                               </pre></li>
+                       </ol>
+               </li>
+               <li><p>Declare the variables used in the application:</p>
+               <pre class="prettyprint lang-js">
+&lt;script type=&quot;text/javascript&quot;&gt;
+&nbsp;&nbsp;&nbsp;var leftDiv, rightDiv, playstopDiv, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerRequest, rotateBackgroundDiv, rotation = 0, speed = -1;
+&lt;/script&gt;
+               </pre>
+               <p>The <span style="font-family: Courier New,Courier,monospace">leftDiv</span>, <span style="font-family: Courier New,Courier,monospace">rightDiv</span>, <span style="font-family: Courier New,Courier,monospace">playstopDiv</span>, and <span style="font-family: Courier New,Courier,monospace">rotateBackgroundDiv</span> variables contain DOM elements from the application UI. The <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> variable handles the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> requests. The <span style="font-family: Courier New,Courier,monospace">rotation</span> variable is the current angle of the pinwheel, and the <span style="font-family: Courier New,Courier,monospace">speed</span> variable is the rotation speed in degrees per frame.</p>
+               </li>
+               <li><p>Create a DOM object for the <strong>Play</strong> or <strong>Stop</strong> button and define button events:</p>
+               <pre class="prettyprint">
+playstopDiv = document.getElementById(&quot;playstopBtn&quot;);
+
+playstopDiv.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;if (handlerRequest) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.webkitCancelRequestAnimationFrame(handlerRequest);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerRequest = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;playstopDiv.innerHTML = &quot;Play&quot;;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerRequest = window.webkitRequestAnimationFrame(nextFrame);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;playstopDiv.innerHTML = &quot;Stop&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+               </pre>
+               <p>When the <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> variable returns <span style="font-family: Courier New,Courier,monospace">true</span>, the animation is played. Clicking the button calls the <span style="font-family: Courier New,Courier,monospace">cancelRequestAnimationFrame()</span> method to stop the animation. The <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> is reset to value 0, and the button text changes from <strong>Stop</strong> to <strong>Play</strong>.</p>  
+               <p>If the <span style="font-family: Courier New,Courier,monospace">handlerRequest</span> value is undefined or 0, the animation is not played. Clicking the button calls the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method to play the animation, and the button text changes from <strong>Play</strong> to <strong>Stop</strong>. The parameter of the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method defines the callback.</p>
+               </li>
+               <li><p>In the callback of the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method, to avoid rotation value overflow, define the rotation value to be decreased when the absolute value is greater than the round angle (360 degrees). Set the background rotation using the <span style="font-family: Courier New,Courier,monospace">rotate()</span> method, and use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method to update the next frame of the animation:</p>
+               <pre class="prettyprint">
+function nextFrame(arg)
+{
+&nbsp;&nbsp;&nbsp;rotation += speed;
+
+&nbsp;&nbsp;&nbsp;if (rotation &gt; 360) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation -= 360;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (rotation &lt; -360) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation += 360;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;rotateBackgroundDiv.style.webkitTransform = &quot;rotate(&quot; + rotation + &quot;deg)&quot;;
+&nbsp;&nbsp;&nbsp;handlerRequest = window.webkitRequestAnimationFrame(nextFrame);  
+}
+               </pre>
+               <p>The callback method is automatically called before the screen is updated. To keep the animation going, the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> 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>
+               </li>
+               <li><p>Set events for the <strong>Left</strong> and <strong>Right</strong> buttons. Tapping the buttons increases or decreases the animation speed.</p>
+               <pre class="prettyprint">
+leftDiv = document.getElementById(&quot;leftBtn&quot;);
+leftDiv.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;speed -= 0.5;
+}
+rightDiv = document.getElementById(&quot;rightBtn&quot;);
+rightDiv.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;speed += 0.5;
+}
+handlerRequest = window.webkitRequestAnimationFrame(nextFrame);
+               </pre>
+               </li>
+       </ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/timing_control_for_script_based_animations/animation_timing_warm_up" target="_blank">renamed_index.html</a></li>
+ </ul> 
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
new file mode 100644 (file)
index 0000000..1c8bf9e
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
@@ -0,0 +1,249 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Workers: Running JavaScript on the Background</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#Creating_Web_Worker">Creating a Web Worker and Handling Errors</a></li>
+                       <li><a class="opensection" href="#Sending_Messages">Sending Messages between Web Workers</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                        <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm">Web Workers Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#web_workers">Web Workers API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#web_workers">Web Workers API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web Workers: Running JavaScript on the Background</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can create and terminate a Web worker, handle errors, and send messages between workers.</p>
+  
+
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Web Workers API basics by learning about:</p>
+  <ul>
+   <li><a href="#Creating_Web_Worker">Creating a Web Worker and Handling Errors</a>
+   <p>Create and execute a Web worker and a subworker, and handle worker-related errors.</p></li>
+   <li><a href="#Sending_Messages">Sending Messages between Web Workers</a>
+   <p>Send messages between host workers and subworkers.</p></li>
+  </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div> 
+ 
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Creating_Web_Worker" name="Creating_Web_Worker" class="items-tit-h2">Creating a Web Worker and Handling Errors</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>Learning how to create Web workers is a useful resource management skill:</p>
+       <ol>
+               <li>To create and execute a Web worker:
+               <ol>
+                       <li><p>Create JavaScript code for a simple Boolean operation:</p>
+                       <pre class="prettyprint">
+var n = 1;
+index: while (true) 
+{
+&nbsp;&nbsp;&nbsp;n += 1;
+&nbsp;&nbsp;&nbsp;for (var i = 2; i &lt;= Math.sqrt(n); i += 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (n % i == 0) continue index;
+&nbsp;&nbsp;&nbsp;postMessage(n);
+}</pre>
+                       <p>This JavaScript operation delivers the calculated value of the <span style="font-family: Courier New,Courier,monospace">Math.sqrt(n)</span> function to the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method. It cannot be used for continuous posting of the Boolean operation.</p>
+                       </li>
+                       <li>
+                       <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>
+                       <pre><pre class="prettyprint lang-html" style="border:0px">
+&lt;button type=&quot;button&quot; onclick=&quot;workerStart()&quot;&gt;Start&lt;/button&gt;
+&lt;button type=&quot;button&quot; onclick=&quot;worker.terminate()&quot;&gt;Stop&lt;/button&gt;
+&lt;output&gt;&lt;/output&gt;
+                       </pre><pre class="prettyprint lang-js" style="border:0px">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var worker = new Worker(&quot;worker3.js&quot;);
+
+&nbsp;&nbsp;&nbsp;function workerStart() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage = function(e) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;output&quot;).textContent = e.data;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></pre>
+                       <p>When the <strong>Start</strong> button is clicked, message data is received from the worker and displayed in the <span style="font-family: Courier New,Courier,monospace">&lt;output&gt;</span> element. When the <strong>Stop</strong> button is clicked, the worker is terminated.</p>
+                       <p>Simple operations can be sufficiently handled with a single worker, however, in order to execute a more complex operations, more workers are needed.</p>
+                       </li>
+               </ol>
+               </li>
+               <li>To create a subworker, use the <span style="font-family: Courier New,Courier,monospace">importScripts()</span> method:
+               <pre class="prettyprint">
+importScripts(&#39;worker1.js&#39;);
+importScripts(&#39;worker1.js&#39;, &#39;worker2.js&#39;);</pre>
+               <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>
+               </li>
+               <li>To handle errors:
+                       <ul class="ul">
+                               <li><p>If an error occurs when the worker is being executed, the <span style="font-family: Courier New,Courier,monospace">onerror()</span> event is triggered. It takes <span style="font-family: Courier New,Courier,monospace">filename</span>, <span style="font-family: Courier New,Courier,monospace">lineno</span>, and <span style="font-family: Courier New,Courier,monospace">message</span> attributes, and displays an error message:</p>
+                               <pre class="prettyprint">
+worker.onerror = function(e) 
+{
+&nbsp;&nbsp;&nbsp;document.querySelectorAll(&quot;output&quot;)[1].textContent = [&#39;filename: &#39;, e.filename, &#39; lineno: &#39;, e.lineno, &#39; error: &#39;, e.message].join(&#39; &#39;);
+};</pre>
+                               </li>
+                               <li><p>The <span style="font-family: Courier New,Courier,monospace">addEventListener</span> can be used instead of the <span style="font-family: Courier New,Courier,monospace">onerror</span> event to detect errors and display an error message:</p>
+                               <pre class="prettyprint">
+function errorMessage(e) 
+{
+&nbsp;&nbsp;&nbsp;document.querySelectorAll(&quot;output&quot;)[1].textContent = [&#39;filename: &#39;, e.filename, &#39; lineno: &#39;, e.lineno, &#39; error: &#39;, e.message].join(&#39; &#39;);
+}
+
+worker.addEventListener(&#39;error&#39;, errorMessage, false);</pre></li>
+                       </ul>
+               </li>
+       </ol>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Sending_Messages" name="Sending_Messages" class="items-tit-h2">Sending Messages between Web Workers</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>Learning how to send messages between Web workers is a useful resource management skill:</p>
+
+       <ol>
+       <li>Send a message in one of the following ways:
+               <ul class="ul">
+                       <li>
+                       <p>Use the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method to send a &quot;Hello&quot; message to a Web worker:</p>
+<pre class="prettyprint">var worker = new Worker(&#39;worker1.js&#39;);
+worker.postMessage(&quot;Hello&quot;);
+</pre>
+                       </li>
+                       <li>
+                       <p>Use the JSON format to send the message:</p>
+<pre class="prettyprint">
+var worker = new Worker(&#39;worker2.js&#39;);
+worker.postMessage(
+{
+&nbsp;&nbsp;&nbsp;a: &quot;Hello&quot;, b: &quot;Tizen&quot;
+});
+</pre>
+                       </li>
+               </ul></li>
+       <li><p>Receive a message in one of the following ways:</p>
+               <ul class="ul">
+                       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">onMessage</span> event handler to respond to receiving a message:</p>
+<pre class="prettyprint">worker.onmessage = function(e) 
+{
+&nbsp;&nbsp;&nbsp;alert(e.data);
+};</pre>
+                       </li>
+                       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addEventListener()</span> method to listen to the event of receiving a message:</p>
+<pre class="prettyprint">
+worker.addEventListener(&quot;message&quot;, function(e) 
+{
+&nbsp;&nbsp;&nbsp;alert(e.data);
+}, false);</pre>
+                       </li>
+               </ul>
+       </li>
+       <li><p>Use the workers to execute threads:</p>
+               <ul class="ul">
+                       <li><p>Use <span style="font-family: Courier New,Courier,monospace">worker1.js</span>:</p>
+<pre class="prettyprint">self.onmessage = function(e)
+{
+&nbsp;&nbsp;&nbsp;self.postMessage(&quot;You say: &quot; + e.data);
+};</pre>
+                       </li>
+                       <li><p>Use <span style="font-family: Courier New,Courier,monospace">worker2.js</span>:</p>
+<pre class="prettyprint">
+self.onmessage = function(e)
+{
+&nbsp;&nbsp;&nbsp;var b = e.data.b;
+&nbsp;&nbsp;&nbsp;if (b === &quot;Tizen&quot;) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.postMessage(e.data.b + &quot; say: &quot; + e.data.a);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.postMessage(&quot;You say: &quot; + e.data.a);
+&nbsp;&nbsp;&nbsp;}
+};</pre>
+                       </li>
+                       
+               </ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method can also execute the worker and respond to a message simultaneously.</p>           
+       </li>
+       </ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">web_worker_1.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">web_worker_2.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">worker_1.js</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">worker_2.js</a></li>
+ </ul>
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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> 
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
new file mode 100644 (file)
index 0000000..cae36c7
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
@@ -0,0 +1,278 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+       <title>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a class="opensection" href="#Using_Simple_Requests">Using Simple Requests</a></li>
+            <li><a class="opensection" href="#Using_Preflight_Requests">Using Preflight Requests</a></li>
+        </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/cors_w.htm">Cross-Origin Resource Sharing Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</h1>
+<div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p>
+
+
+       <h2>Warm-up</h2>
+       <p>Become familiar with the Cross-Origin Resource Sharing API basics by learning about:</p>
+       <ul>
+       <li><a class="opensection" href="#Using_Simple_Requests">Using Simple Requests</a>
+       <p>Create a simple request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response.</p></li>
+       
+       <li><a class="opensection" href="#Using_Preflight_Requests">Using Preflight Requests</a>
+       <p>Create a preflight request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response. After a successful authorization, send the actual data request and receive a response.</p></li>
+       </ul>  
+       
+        <div class="devicespecs-util mt5 clfix">
+        <ul class="dutil">
+            <li><a href="#" class="showA">Show All</a></li>
+            <li class="none"><a href="#" class="hideA">Hide All</a></li>
+        </ul>
+    </div>
+
+    <ul class="devicespecifications">
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="Using_Simple_Requests" name="Using_Simple_Requests" class="items-tit-h2">Using Simple Requests</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:</p>
+
+<ol>
+<li>Create an <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var method = &quot;GET&quot;;
+&nbsp;&nbsp;&nbsp;var url = &quot;http://another-domain.com/CORS/&quot;;
+&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();
+
+&nbsp;&nbsp;&nbsp;xhr.open(method, url);
+&nbsp;&nbsp;&nbsp;xhr.send();
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://origin-domain.com</span> domain has the required authority.
+<pre class="prettyprint">
+&lt;?php
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://origin-domain.com&quot;);
+?&gt;
+</pre>
+<p>If all sites are allowed to send requests, use the wildcard (*):</p>
+<pre class="prettyprint">
+&lt;?php
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: *&quot;);
+?&gt;
+</pre>
+</li>
+
+<li>Check the request header.
+<p>If you check the request header through the network log, you find that an additional <span style="font-family: Courier New,Courier,monospace">Origin</span> header has been added. This header informs the relevant server of the sender side domain. The <span style="font-family: Courier New,Courier,monospace">Origin</span> header is protected in the browser side, and cannot be changed by the user.</p>
+<pre class="prettyprint">
+GET http://origin-domain.com/CORS/simple_reqeust.html HTTP/1.1
+Host: origin-domain.com
+Origin: http://origin-domain.com
+</pre>
+</li>
+
+<li>Check the response header:
+<ul class="ul">
+<li><p>If the request is received from a domain with access authority, the server allows a response.
+The response header includes the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header set in the server side.</p>
+<pre class="prettyprint">
+HTTP/1/1 200 OK
+Access-Control-Allow-Origin: http://origin-domain.com
+</pre></li>
+<li>If the request is received from a domain without access authority, the server sends no response, and the following error occurs:
+<pre class="prettyprint">
+XMLHttpRequest cannot load http://another-domain.com/CORS.
+Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Origin.
+</pre></li></ul>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>
+      </tr>
+     </tbody>
+</table>
+</li>
+</ol>
+ <h3>Source Code</h3>
+    <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/cross_origin_resource_sharing" target="_blank">simple_request.html</a></li>
+ </ul>
+            </div>
+        </li>
+
+        <li>
+            <div class="devicespec-tit">
+                <h2 id="Using_Preflight_Requests" name="Using_Preflight_Requests" class="items-tit-h2">Using Preflight Requests</h2>
+                <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+            </div>
+            <div class="devicespec-con">
+<p>Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.</p>
+
+<ol>
+<li>Create an <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication. In addition, define the request <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and add a custom header.
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();
+&nbsp;&nbsp;&nbsp;xhr.open(&quot;PUT&quot;, &quot;http://another-domain.com/CORS/&quot;);
+
+&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/json&quot;);
+
+&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Header-Custom-TizenCORS&quot;, &quot;OK&quot;);
+&nbsp;&nbsp;&nbsp;xhr.send(data);
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://110.0.0.160:8081</span> domain has the required authority. In addition, define various server settings.</p>
+<pre class="prettyprint">
+&lt;?php
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://110.0.0.160:8081&quot;);
+
+&nbsp;&nbsp;&nbsp;/* Allowed request method */
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Methods: PUT&quot;);
+
+&nbsp;&nbsp;&nbsp;/* Allowed custom header */
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Headers: Content-Type&quot;);
+
+&nbsp;&nbsp;&nbsp;/* Age set to 1 day to improve speed caching */
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Max-Age: 86400&quot;);
+
+&nbsp;&nbsp;&nbsp;/* Options request exits before the page is completely loaded */
+&nbsp;&nbsp;&nbsp;if (strtolower($_SERVER[&#39;REQUEST_METHOD&#39;]) == &#39;options&#39;)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exit();
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;/* Response data */
+&nbsp;&nbsp;&nbsp;$arr = array(&quot;user_name&quot; => &quot;tizen&quot;, &quot;phone_number&quot; => &quot;12312334234&quot;);
+
+&nbsp;&nbsp;&nbsp;/* Response data returned in JSON format */
+&nbsp;&nbsp;&nbsp;echo json_encode($arr);
+?&gt;
+</pre>
+</li>
+
+<li>Check the request and response headers.
+<p>If you check the network log, you find that 2 communications between the browser and server occur consecutively: first the preflight request and response, and then the actual request and response.</p>
+<ul class="ul">
+<li><p>The preflight request checks the access authority before sending the actual data. The <span style="font-family: Courier New,Courier,monospace">Origin</span> and <span style="font-family: Courier New,Courier,monospace">Access-Control-Request-Headers</span> headers have been added to the request, because the request has a user-defined custom header, and the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> set to <span style="font-family: Courier New,Courier,monospace">application/json</span>:</p>
+<pre>
+OPTION http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
+Host: origin-domain.com
+Origin: http://origin-domain.com
+Access-Control-Request-Headers: Header-Custom-Tizen, origin, content-type
+</pre></li>
+<li><p>If the request is sent from the browser side, a preflight response is sent for it from the server side. The browser determines from the response whether the actual data is sent. In the following preflight response example, the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and <span style="font-family: Courier New,Courier,monospace">Header-Custom-Tizen</span> are included in the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Headers</span> header:</p>
+<pre>
+HTTP/1/1 200 OK
+Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
+Access-Control-Allow-Methods:PUT
+Access-Control-Allow-Origin:http://origin-domain.com
+Access-Control-Max-Age:86400
+</pre></li>
+<li><p>Once the access authority is checked, the browser sends the actual data request to the server side. This request includes the actual data:</p>
+<pre>
+PUT http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
+Content-Type: application/json
+Host: origin-domain.com
+Origin: http://origin-domain.com
+Header-Custom-TizenCOURSTest: OK
+</pre></li>
+<li><p>The response to the actual data request contains the actual handled result:</p>
+<pre>
+HTTP/1/1 200 OK
+Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
+Access-Control-Allow-Methods: PUT
+Access-Control-Allow-Origin: http://origin-domain.com
+Access-Control-Max-Age:86400
+</pre></li></ul>
+
+<p>If the access authority fails, the browser does not send the actual data request. Instead, the following error occurs in the browser side:</p>
+<pre>
+XMLHttpRequest cannot load http://another-domain.com/CORS.
+Request header field Header-Custom-Tizen is not allowed by Access-Control-Allow-Headers.
+</pre>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>
+      </tr>
+     </tbody>
+</table>
+</li>
+</ol>
+
+            </div>
+        </li>
+
+ </ul>
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+ 
+ </body>
+ </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
new file mode 100644 (file)
index 0000000..e88f443
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
@@ -0,0 +1,469 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 iframe element: Controlling HTML Elements</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Sandboxed_Cookies" class="opensection">Accessing Sandboxed Cookies</a></li>
+                       <li><a href="#Sandboxed_Page" class="opensection">Redirecting a Sandboxed Page</a></li>
+                       <li><a href="#Sandboxed_Form" class="opensection">Submitting a Sandboxed Form</a></li>
+                       <li><a href="#Sandboxed_Popups" class="opensection">Managing Sandboxed Pop-ups</a></li>
+                       <li><a href="#Parent_Document" class="opensection">Including Rendered Content in the Parent Document</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/iframe_w.htm">HTML5 iframe element Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#iframe">HTML5 iframe element API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#iframe">HTML5 iframe element API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 iframe element: Controlling HTML Elements</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</p>
+
+
+       <h2 id="warm-up" name="warm-up">Warm-up</h2>
+       <p>Become familiar with the HTML5 iframe element API basics by learning about:</p>
+       <ul>
+       <li><a class="opensection" href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a> <p>Allow or block access to cookies within the same domain.</p></li>
+       <li><a class="opensection" href="#Sandboxed_Page">Redirecting a Sandboxed Page</a> <p>Allow or block external links from the <span style="font-family: Courier New,Courier,monospace">iframe</span> element.</p></li>
+       <li><a class="opensection" href="#Sandboxed_Form">Submitting a Sandboxed Form</a> <p>Allow or block form submission.</p></li>
+       <li><a class="opensection" href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a> <p>Allow or block pop-up alarm within the <span style="font-family: Courier New,Courier,monospace">iframe</span> content.</p></li>
+       <li><a class="opensection" href="#Parent_Document">Including Rendered Content in the Parent Document</a> <p>Include rendered content seamlessly in the parent document.</p></li>
+       </ul>  
+                       
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies" class="items-tit-h2">Accessing Sandboxed Cookies</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when accessing the cookies of the parent document enhances the security features of your application:</p>
+<ol>
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> 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 <span style="font-family: Courier New,Courier,monospace">iframe</span> element content and cookie access, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>:
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox
+&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;
+
+&lt;iframe src=&quot;iframe_cookie_stolen.html&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;350px&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;</pre></li>
+<li>Create a test cookie:
+<pre class="prettyprint">&lt;script&gt; 
+&nbsp;&nbsp;&nbsp;SetCookie(&#39;userid&#39;, &#39;example@tizen.org&#39;, 7);
+       
+&nbsp;&nbsp;&nbsp;function SetCookie(name, value, expiredays) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var today = new Date();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;today.setDate(today.getDate() + expiredays);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.cookie = name + &quot;=&quot; + escape(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;&quot;; path=/; expires=&quot; + today.toGMTString() + &quot;;&quot;;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+
+<li>To block cookie access, remove the <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;function setSandbox() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is not allowed */                    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&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;/* Access to cookies within the same domain is allowed */                   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_cookie_stolen.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+<li>Display the result:
+<pre class="prettyprint">&lt;div id=&quot;message&quot;&gt;&lt;/div&gt;</pre></li>
+<li>If the sandboxing functionality is active, a message is displayed. If the sandboxing functionality is inactive, the imported cookie is displayed:
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var message = document.getElementById(&quot;message&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = &quot;&lt;h3&gt;stole parent window&#39;s cookie&lt;/h3&gt; userid: &quot; + GetCookie(&quot;userid&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (e) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&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;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;function GetCookie(Name) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var search = Name + &quot;=&quot;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.cookie.length &gt; 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset = document.cookie.indexOf(search)
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (offset != -1) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset += search.length
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end = document.cookie.indexOf(&quot;;&quot;, offset)
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (end == -1) end = document.cookie.length
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return unescape(document.cookie.substring(offset, end))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;&quot;;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+</ol>
+<p class="figure">Figure: Sandbox cookie access (in mobile applications only)</p>
+<p align="center"><img alt="Sandbox cookie access (in mobile applications only)" src="../../../images/sandbox_cookie_access.png"/></p>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">cookie_stolen.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_cookie_stolen.html</a></li>
+ </ul>
+ </div>
+ </li>
+ 
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Sandboxed_Page" name="Sandboxed_Page" class="items-tit-h2">Redirecting a Sandboxed Page</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+  
+<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when redirecting a page enhances the security features of your application:</p>
+<ol>
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that disables the sandbox. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> 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:
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Disable Sandbox
+&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;
+
+&lt;iframe src=&quot;iframe_page_redirection.html&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless&gt;&lt;/iframe&gt;</pre></li>
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, set the <span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span> attribute to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
+<pre class="prettyprint">&lt;script&gt; 
+&nbsp;&nbsp;&nbsp;function setSandbox() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&quot;#chkSandbox&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&quot;#iframe&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-top-navigation&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-top-navigation&quot;&gt;&lt;/iframe&gt;&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;flag = &quot;allow-scripts&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_page_redirection.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+
+
+<li>Include the image displayed on the page:
+<pre class="prettyprint">&lt;img id=&quot;img&quot; alt=&quot;Tizen Lockup on Dark&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;http://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-dark.png&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;alert(&#39;fake advertisement!&#39;);&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;240&quot; height=&quot;103&quot; /&gt;</pre></li>
+<li>If the page redirection is blocked, a message is displayed. If not, the user is redirected to the <span style="font-family: Courier New,Courier,monospace">warning.html</span> page:
+<pre class="prettyprint">&lt;script&gt; 
+&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location = &quot;warning.html&quot;;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;catch (e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;HTML5 Sandbox prevented top level navigation.&quot;);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+</ol>
+
+<p class="figure">Figure: Sandbox page redirection (in mobile applications only)</p>
+<p align="center"><img alt="Sandbox page redirection (in mobile applications only)" src="../../../images/sandbox_page_redirection.png"/></p>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_page_redirection.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">page_redirection.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">warning.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+       
+                       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Sandboxed_Form" name="Sandboxed_Form" class="items-tit-h2">Submitting a Sandboxed Form</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when submitting a form enhances the security features of your application:</p>
+<ol>
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> 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 <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-forms</span>:
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox
+&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;
+
+&lt;iframe src=&quot;iframe_form_submission.html&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-forms&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;200px&quot;&gt;&lt;/iframe&gt;</pre></li>
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-forms</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
+<pre class="prettyprint">&lt;script&gt; 
+&nbsp;&nbsp;&nbsp;function setSandbox() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin allow-forms&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&#39;allow-scripts allow-same-origin allow-forms&#39;&gt;&lt;/iframe&gt;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_form_submission.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+<li>Create a form for the login screen with <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> elements to enter an email and password, and submit them:
+<pre class="prettyprint">&lt;form method=&quot;get&quot; action=&quot;iframe_form_submission.html&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Advertisement, SNS&lt;/h3&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;text&quot; id=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&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&gt;</pre></li>
+
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, the imported login information is displayed:
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var html;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (location.href.indexOf(&quot;?&quot;) &gt;= 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html = [&#39;&lt;div id=&quot;message&quot;&gt;&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&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;,
+&nbsp;&nbsp;&nbsp;&nbsp;&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;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;/div&gt;&#39;].join(&#39;&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.innerHTML = html;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+</ol>
+<p class="figure">Figure: Sandbox form submission (in mobile applications only)</p>
+<p align="center"><img alt="Sandbox form submission (in mobile applications only)" src="../../../images/sandbox_form_submission.png"/></p>
+
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">form_submission.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_form_submission.html</a></li>
+ </ul> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Sandboxed_Popups" name="Sandboxed_Popups" class="items-tit-h2">Managing Sandboxed Pop-ups</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <p>Learning how to control the opening of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content enhances the security features of your application:</p>
+<ol>
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> 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 <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-popups</span>:
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox
+&lt;div id=&quot;description&quot; style=&quot;padding:10 px; margin:10 px;&quot;&gt;&lt;/div&gt;
+
+&lt;iframe src=&quot;iframe_popup.html&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;
+</pre></li>
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-popups</span> flag from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
+<pre class="prettyprint">&lt;script&gt; 
+&nbsp;&nbsp;&nbsp;function setSandbox() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag =&quot;&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&#39;;
+&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;flag = &#39;allow-scripts allow-same-origin allow-popups&#39;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;&gt;&lt;/iframe&gt;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_popup.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;</pre></li>
+<li>Create an external link in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element:
+<pre class="prettyprint">&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;</pre></li>
+</ol>
+
+<p class="figure">Figure: Sandbox pop-up (in mobile applications only)</p>
+<p align="center"><img alt="Sandbox pop-up (in mobile applications only)" src="../../../images/sandbox_popup.png"/></p>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_popup.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">popup.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="Parent_Document" name="Parent_Document" class="items-tit-h2">Including Rendered Content in the Parent Document</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                               <p>Learning how to include rendered content seamlessly in the parent document using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element enhances the security features of your application:</p>
+<ol>
+<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <span style="font-family: Courier New,Courier,monospace">iframe</span> 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 <span style="font-family: Courier New,Courier,monospace">iframe</span> element without the setting:
+<pre class="prettyprint">&lt;head&gt; 
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body, html 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; padding: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt; 
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h2&gt;HTML5 iframe&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;iframe seamless src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;
+&nbsp;&nbsp;&nbsp;&lt;iframe src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;
+&lt;/body&gt;</pre></li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content. The <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute set displays the content with the inherited CSS style:
+<pre class="prettyprint">&lt;body&gt; 
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;iframe! h3 Content&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul&gt;
+&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;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot; target=&quot;_self&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.org target=&quot;_self&quot;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/body&gt;</pre></li>
+</ol>
+<p class="figure">Figure: Seamless content appending (in mobile applications only)</p>
+<p align="center"><img alt="Seamless content appending (in mobile applications only)" src="../../../images/execution_screen.png"/></p>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_seamless.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">seamless.html</a></li>
+ </ul>
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+ 
+ </body>
+ </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
new file mode 100644 (file)
index 0000000..8ebe5d6
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Enhancing Application and User Security</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Security: Enhancing Application and User Security</h1>
+
+       <p>The security tutorials demonstrate how to use the following features in creating Tizen Web applications:</p> 
+       <ul> 
+               <li><a href="cors_tutorial_w.htm">Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</a> <p>Demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p></li>
+               <li><a href="iframe_tutorial_w.htm">HTML5 iframe element: Controlling HTML Elements</a> <p>Demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+ 
+ </body>
+ </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm
new file mode 100644 (file)
index 0000000..dd15a26
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm
@@ -0,0 +1,332 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Application caches: Storing Application Resources</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#set">Setting the Cache Manifest</a></li>
+                       <li><a class="opensection" href="#update">Updating the Cache</a></li>
+                       <li><a class="opensection" href="#manage">Managing the Cache Events</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/storage/appcache_w.htm">HTML5 Application caches Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Application caches: Storing Application Resources</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can use HTML5 application caches.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML5 Application caches API basics by learning about:</p>
+<ul>
+<li><a href="#set">Setting the Cache Manifest</a>
+<p>Compose the manifest file to activate application caching.</p></li>
+
+<li><a href="#update">Updating the Cache</a>
+<p>Control application cache updates.</p></li>
+
+<li><a href="#manage">Managing the Cache Events</a>
+<p>Check the cache status and manage events based on it.</p></li>
+</ul>
+            
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="set" name="set" class="items-tit-h2">Setting the Cache Manifest</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To enable application caches, you must learn to set the cache manifest file:</p>
+
+<ol>
+<li>
+<p>Begin the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#writing-cache-manifests" target="_blank">manifest file</a> with CACHE MANIFEST content:</p>
+<pre class="prettyprint">
+CACHE MANIFEST
+# 2013-03-18 v2.0.0
+images/sound-icon.png 
+images/background.png
+/tizen_application_cache.html
+/main.js</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace"># 2013-03-18 v2.0.0</span> line is used for searching. When the content in an image or file list is changed, it does not automatically update the cache. It is updated if the manifest file is changed. Even if the content in the description is changed, cache update is possible.  </td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+<li><p>Define the files to be cached in the <span style="font-family: Courier New,Courier,monospace">CACHE</span> section:</p>
+<pre class="prettyprint">CACHE:
+style/default.css</pre>
+<p>This is the default section for entries. Files listed under this header are explicitly cached after they are downloaded for the first time.</p>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><span style="font-family: Courier New,Courier,monospace">CACHE</span> section can be omitted, if automatic cache save is used. </td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+<li><p>Define the online white list in the <span style="font-family: Courier New,Courier,monospace">NETWORK</span> section:</p>
+<pre class="prettyprint">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> 
+<li>
+<p>Define the fallback pages in the <span style="font-family: Courier New,Courier,monospace">FALLBACK</span> section:</p>
+<pre class="prettyprint">FALLBACK:
+/ tizen  /tizen_offline.html
+</pre>
+<p>This section is optional and used to specify fallback pages in case a resource is inaccessible. In the example above, if the file in the <span style="font-family: Courier New,Courier,monospace">/tizen</span> folder cannot be loaded in an offline state, it is replaced with the <span style="font-family: Courier New,Courier,monospace">tizen_offline.html</span> file.</p>
+</li>
+</ol>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The cached version of the file is displayed to the user even when an updated file is uploaded to the server. If the file is updated, the manifest file must be changed accordingly. The cache size in a mobile or desktop Web browser is normally set as 5 MB per domain.  
+</td> 
+      </tr> 
+     </tbody>
+</table>
+
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="update" name="update" class="items-tit-h2">Updating the Cache</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To enable application caches in your application, you must learn to update the cache:</p>
+<ol>
+<li>
+<p>Include the <span style="font-family: Courier New,Courier,monospace">manifest</span> property in  the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> 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;
+</pre>
+</li>
+<li>
+<p>If the content of the <span style="font-family: Courier New,Courier,monospace">cache_test.js</span> file is changed and updating the cache is necessary, edit the manifest file accordingly:</p>
+<pre class="prettyprint">
+CACHE MANIFEST
+#VERSION 1.0.0
+CACHE:
+cache_test.js
+</pre>
+</li>
+<li>
+<p>Reconnect and check whether there are edited items in the manifest file using the <span style="font-family: Courier New,Courier,monospace">update()</span> 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();
+</pre>
+</li>
+<li>
+<p>If there are changes in the manifest file, use the <span style="font-family: Courier New,Courier,monospace">swapCache()</span> and <span style="font-family: Courier New,Courier,monospace">handleCacheEvent()</span> 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; 
+</pre>
+</li>
+</ol>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The files used in this example are Web server source files. A change in the client cache occurs when the server file changes.  </td> 
+      </tr> 
+     </tbody>
+</table>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/html5_application_caches" target="_blank">appcache_update.html</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing the Cache Events</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To enable application caches in your application, you must learn to check the current status of the cache:</p>
+<ol>
+<li>
+<p>Check the <span style="font-family: Courier New,Courier,monospace">window.applicationCache.status</span> 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;}
+&lt;/script&gt;
+</pre>
+</li>
+<li>
+<p>Different events can occur based on the cache status. Use the <span style="font-family: Courier New,Courier,monospace">addEventListener</span> 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;/* Cached resource is downloaded */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;checking&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Manifest file is downloaded for the first time or if there is an update in the manifest */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;downloading&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Content is being updated */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;error&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */ 
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;noupdate&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* No update is available */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;obsolete&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Manifest file cannot be found */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;progress&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cache file is being downloaded */
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;updateready&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* All resources for update are downloaded */ 
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+    </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm
new file mode 100644 (file)
index 0000000..a178ce6
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm
@@ -0,0 +1,642 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Files</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Local files
+                       <ul class="toc">
+                       <li><a class="opensection" href="#read_info">Reading Local File Information</a>
+                       </li>
+                       <li><a class="opensection" href="#read_content">Reading Local File Content</a>
+                       </li>
+                       <li><a class="opensection" href="#slice">Slicing Blob</a>
+                       </li></ul></li>
+                       <li>Sandboxed file system
+                       <ul class="toc">
+                       <li><a class="opensection" href="#access">Accessing a Sandboxed File System</a>
+                       </li>
+                       <li><a class="opensection" href="#display">Displaying Files in a Sandboxed File System</a>
+                       </li>
+                       <li><a class="opensection" href="#create_dir">Creating a Directory or File</a>
+                       </li>
+                       <li><a class="opensection" href="#remove">Removing a Directory or File</a>
+                       </li></ul></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/file_w.htm">File Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#file">File API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#file">File API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>File: Managing Files</h1>
+  <div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can control files and directories on the device, and access the sandboxed sections of a local file system to search, create, or delete a directory or file.
+</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the File API basics by learning about:</p>
+
+<ul>
+<li>Local files
+<ul>
+<li><a class="opensection" href="#read_info">Reading Local File Information</a>
+<p>Access and read local file information.</p></li>
+<li><a class="opensection" href="#read_content">Reading Local File Content</a>
+<p>Access, read, and display a local image file.</p></li>
+<li><a class="opensection" href="#slice">Slicing Blob</a>
+<p>Read a local file as a binary string and slice it.</p></li>
+</ul>
+</li>
+<li>Sandboxed file system in mobile applications
+<ul>
+<li><a class="opensection" href="#access">Accessing a Sandboxed File System</a>
+<p>Request access to sandboxed sections of a local file system.</p></li>
+<li><a class="opensection" href="#display">Displaying Files in a Sandboxed File System</a>
+<p>Display entries (directories or files) in sandboxed sections of a local file system.</p></li>
+<li><a class="opensection" href="#create_dir">Creating a Directory or File</a>
+<p>Create a directory or file in a sandboxed section of a local file system. </p></li>
+<li><a class="opensection" href="#remove">Removing a Directory or File</a>
+<p>Delete the directory or file in a sandboxed section of a local file system.</p></li>
+</ul>
+</li>
+</ul>
+   
+   
+ 
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="read_info" name="read_info" class="items-tit-h2">Reading Local File Information</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;file&quot;&gt;</span> 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;
+</pre>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">To enable multiple upload, use the <span style="font-family: Courier New,Courier,monospace">multiple</span> attribute. </td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+
+<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;
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">readSelectedFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace">FileList</span> 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 ? 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;}
+&lt;/script&gt;
+</pre>
+<p class="figure">Figure: Displaying file information (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Displaying file information (in mobile applications only)" src="../../../images/file1.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 class="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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="read_content" name="read_content" class="items-tit-h2">Reading Local File Content</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;file&quot;&gt;</span> 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;
+</pre>
+</li>
+
+<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> instance to read the content of the local image file. Use the <span style="font-family: Courier New,Courier,monospace">readAsDataURL()</span> method to read data in the <span style="font-family: Courier New,Courier,monospace">dataURL</span> format.
+<p>If the data is loaded, an <span style="font-family: Courier New,Courier,monospace">onload</span> event is fired. Create an <span style="font-family: Courier New,Courier,monospace">img</span> 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; 
+</pre>
+
+<p class="figure">Figure: Displaying an image file (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Displaying an image file (in mobile applications only)" src="../../../images/file2.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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_reading_local_files.html</a></li>
+ </ul>
+
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="slice" name="slice" class="items-tit-h2">Slicing Blob</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;file&quot;&gt;</span> 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; onchange=&quot;setFileSize();&quot; /&gt; &lt;br /&gt;
+start byte: &lt;input type=&quot;text&quot; id=&quot;startByte&quot; 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;
+</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();
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Slice the defined byte range (from <span style="font-family: Courier New,Courier,monospace">startByte</span> to <span style="font-family: Courier New,Courier,monospace">endByte</span>) using the <span style="font-family: Courier New,Courier,monospace">slice()</span> method of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> interface:
+
+<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;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&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;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var blob = file.slice(startByte, endByte);
+</pre>
+<p>A new <span style="font-family: Courier New,Courier,monospace">Blob</span> object is created. </p> 
+</li>
+<li>
+<p>Read the data as a binary string using the <span style="font-family: Courier New,Courier,monospace">readAsBinaryString()</span> method:</p>
+<pre class="prettyprint lang-html">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsBinaryString(blob);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+</li>
+<li>If the data loading is complete, the read data is displayed. Check the status using the <span style="font-family: Courier New,Courier,monospace">onloadend</span> 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;};
+&lt;/script&gt;
+</pre>
+
+<p class="figure">Figure: Slicing a file (in mobile applications only)</p> 
+<p style="text-align:center;"><img alt="Slicing a file (in mobile applications only)" src="../../../images/file3.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 class="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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="access" name="access" class="items-tit-h2">Accessing a Sandboxed File System</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>Requesting access to sandboxed sections of a local file system is a useful file management skill:</p>
+
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">requestFileSystem()</span> 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;} 
+&lt;/script&gt;
+</pre>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">requestFileSystem()</span> method is created in the Web application program when it is initially called.  </td> 
+      </tr> 
+     </tbody>
+</table>
+
+<p>The directory file in the file system root can be searched, created and deleted by accessing local file system. 
+</p>
+</li>
+
+</ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
+ </ul>
+
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="display" name="display" class="items-tit-h2">Displaying Files in a Sandboxed File System</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;button&quot;&gt;</span> 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;
+</pre>
+</li>
+
+<li>To read the entry within the file system, use the <span style="font-family: Courier New,Courier,monospace">createReader()</span> 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;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objResultSection = document.querySelector(&#39;#resultSection&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var root = fs.root;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var dirReader = root.createReader();
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">readEntries()</span> 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;{
+</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 = 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;&#39;&lt;img class=&quot;icon-img&quot; 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;&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;}
+&lt;/script&gt;
+</pre>
+</li></ol>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.</td> 
+      </tr> 
+     </tbody>
+</table>
+<p class="figure">Figure: Displaying files</p> 
+<p style="text-align:center;"><img alt="Displaying files" src="../../../images/file4.png" /></p> 
+
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api/img" target="_blank">icon_file.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api/img" target="_blank">icon_folder.png</a></li>
+ </ul>
+
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+<h2 id="create_dir" name="create_dir" class="items-tit-h2">Creating a Directory or File</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">select</span> element for selecting the type of entry to be added, <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;text&quot;&gt;</span> element for entering the entry name, and <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;button&gt;&quot;</span> 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&gt;
+&lt;input type=&quot;text&quot; id=&quot;txtName&quot; name=&quot;txtName&quot; 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;
+</pre>
+</li>
+
+<li>To create a directory, use the <span style="font-family: Courier New,Courier,monospace">getDirectory()</span> method. To create a file, use the <span style="font-family: Courier New,Courier,monospace">getFile()</span> 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;}
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.</td> 
+      </tr> 
+     </tbody>
+</table>
+
+<p class="figure">Figure: Adding a file</p> 
+<p style="text-align:center;"><img alt="Adding a file" src="../../../images/file5.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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="remove" name="remove" class="items-tit-h2">Removing a Directory or File</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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 <span style="font-family: Courier New,Courier,monospace">&lt;input type=&quot;button&quot;&gt;</span> 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;
+</pre>
+</li>
+
+<li>To delete a directory and all the files in it, use the <span style="font-family: Courier New,Courier,monospace">removeRecursively()</span> method. To delete an individual file, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> 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;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;entry = entries[i];
+&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;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;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;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;document.querySelector(&#39;#resultSection&#39;).innerHTML = &#39;Directory emptied.&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, errorHandler);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.</td> 
+      </tr> 
+     </tbody>
+</table>
+<p class="figure">Figure: Deleting files</p> 
+<p style="text-align:center;"><img alt="Deleting files" src="../../../images/file6.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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
+ </ul>
+  </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm
new file mode 100644 (file)
index 0000000..702b7ee
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm
@@ -0,0 +1,321 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Indexed Database: Managing an Object Store</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#db">Creating a Database</a>
+                       </li>
+                       <li><a class="opensection" href="#store">Creating an Object Store</a>
+                       </li>
+                       <li><a class="opensection" href="#manage">Managing Data</a>
+                       </li>
+                       <li><a class="opensection" href="#index">Creating an Index</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/storage/indexdb_w.htm">Indexed Database Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#database">Indexed Database API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Indexed Database: Managing an Object Store</h1>
+    <div class="cont"><div class="static-cont">
+
+<p>This tutorial demonstrates how you can create an indexed database and manage the data in it.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Indexed Database API basics by learning about: </p>
+<ul>
+<li><a class="opensection" href="#db">Creating a Database</a>
+<p>Create a database which can contain an object store for data storage.</p></li>
+<li><a class="opensection" href="#store">Creating an Object Store</a>
+<p>Create and delete and object store, which is the core mechanism in a database.</p></li>
+<li><a class="opensection" href="#manage">Managing Data</a>
+<p>Store, call, and delete data.</p></li>
+<li><a class="opensection" href="#index">Creating an Index</a>
+<p>Create an index to search for a list of records.</p></li>
+</ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="db" name="db" class="items-tit-h2">Creating a Database</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>Creating and deleting a database is a useful data management skill:</p>
+
+<ol>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">window.webkitIndexedDB.open()</span> method to generate a database named <span style="font-family: Courier New,Courier,monospace">TizenIndexedDB</span> in order to create an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> for storage:</p>
+
+<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;} 
+&lt;/script&gt;
+</pre>
+
+<p>Check whether an indexed database is supported in the <span style="font-family: Courier New,Courier,monospace">window</span> object. If the database is generated properly, the <span style="font-family: Courier New,Courier,monospace">onsuccess</span> event handler is called. </p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The name of the database can be any string type, including an empty string. To change the version of the database, use the <span style="font-family: Courier New,Courier,monospace">VERSION_CHANGE</span> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction-concept" target="_blank">transaction</a>.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+<li>
+<p>Delete the generated database using the <span style="font-family: Courier New,Courier,monospace">window.webkitIndexedDB.deleteDatabase()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;window.webkitIndexedDB.deleteDatabase(&#39;TizenIndexedDB&#39;)
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_opening_database.html</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="store" name="store" class="items-tit-h2">Creating an Object Store</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>Creating and deleting an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> is a useful data management skill:</p>
+<ol>
+<li>
+<p>To generate an object store for data storage, use the <span style="font-family: Courier New,Courier,monospace">createObjectStore()</span> method:</p>
+
+<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;};
+&lt;/script&gt;
+</pre>
+<p>The name and key path of an independent object are defined in the object store.  
+The <span style="font-family: Courier New,Courier,monospace">keyPath</span> property makes the object store unique and must contain the <span style="font-family: Courier New,Courier,monospace">key</span> attribute to store data in the object store.</p>
+</li>
+<li>
+<p>To delete the object store, use the <span style="font-family: Courier New,Courier,monospace">deleteObjectStore()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;window.webkitIndexedDB.deleteObjectStore (&#39;tizenStore&#39;)
+&lt;/script&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 class="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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="manage" name="manage" class="items-tit-h2">Managing Data</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>Saving, accessing, and deleting data in an object store is a useful data management skill:</p>
+
+<ol>
+<li>
+<p>Access the object store using the <span style="font-family: Courier New,Courier,monospace">readwrite</span> transaction and save data using the <span style="font-family: Courier New,Courier,monospace">put()</span> method:</p>
+
+<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;} 
+&lt;/script&gt;
+</pre>
+
+</li><li>
+<p>Request data in the <span style="font-family: Courier New,Courier,monospace">tizenStore</span> object store by calling data relevant to the key value in the storage with the <span style="font-family: Courier New,Courier,monospace">get()</span> method:
+</p>
+
+<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;};
+&lt;/script&gt;
+</pre>
+</li><li>
+
+<p>Delete the data in the object store using the <span style="font-family: Courier New,Courier,monospace">delete()</span> method:</p>
+
+<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;};
+&lt;/script&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 class="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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="index" name="index" class="items-tit-h2">Creating an Index</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>Creating, accessing, and deleting an index is a useful data management skill:</p>
+
+<ol>
+<li>
+<p>Create an index named <span style="font-family: Courier New,Courier,monospace">tizen01</span> to search for stored data in records based on its property (<span style="font-family: Courier New,Courier,monospace">text</span>):</p>
+
+<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;);
+</pre>
+</li>
+<li>
+<p>Access the index using the <span style="font-family: Courier New,Courier,monospace">objStore.index()</span> method:</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;var dbIndex = objStore.index(&quot;tizen01&quot;);
+</pre>
+</li>
+<li>
+<p>Delete the index using the <span style="font-family: Courier New,Courier,monospace">objStore.deleteIndex()</span> method:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;tizenDB.index = objStore.deleteIndex(&quot;tizen01&quot;);
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_creating_index.html</a></li>
+ </ul>
+  </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
new file mode 100644 (file)
index 0000000..bf3f414
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Storage: Storing Information and Managing Databases</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage Guides</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Storage: Storing Information and Managing Databases</h1>
+
+ <p>The storage tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+    <li><a href="file_tutorial_w.htm">File: Managing Files</a> <p>Demonstrates how you can control local files and file operations, retrieve and monitor storage information, and access the sandboxed sections of the local file system (in mobile applications only) to search, create, and delete a directory or file.</p></li>
+    <li><a href="indexdb_tutorial_w.htm">Indexed Database: Managing an Object Store</a> <p>Demonstrates how you can use the indexed database.</p></li>
+    <li><a href="webstorage_tutorial_w.htm">Web Storage: Saving Structured Data on the Client Side</a> <p>Demonstrates how you can use the Web storage.</p></li>
+  </ul>
+
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+    <li><a href="appcache_tutorial_w.htm">HTML5 Application caches: Storing Application Resources</a> <p>Demonstrates how you can use HTML5 application cache.</p></li>
+    <li><a href="websql_tutorial_w.htm">Web SQL Database: Creating and Querying Databases</a> <p>Demonstrates how you can use SQL databases.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm
new file mode 100644 (file)
index 0000000..659d165
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm
@@ -0,0 +1,519 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 SQL Database: Creating and Querying Databases</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+               <li>Asynchronous operations
+                       <ul class="toc">
+                       <li><a class="opensection" href="#create_a">Opening a Database Asynchronously</a></li>
+                       <li><a class="opensection" href="#execute_a">Executing SQL Statements Asynchronously</a></li>
+                       <li><a class="opensection" href="#access_a">Accessing SQL Results Asynchronously</a></li>
+                       <li><a class="opensection" href="#handle_a">Handling a Syntax Error Asynchronously</a></li>
+                       </ul>
+               </li>
+               <li>Synchronous operations
+                       <ul class="toc">
+                       <li><a class="opensection" href="#create">Opening a Database Synchronously</a></li>
+                       <li><a class="opensection" href="#execute">Executing SQL Statements Synchronously</a></li>
+                       <li><a class="opensection" href="#access">Accessing SQL Results Synchronously</a></li>
+                       <li><a class="opensection" href="#handle">Handling a Syntax Error Synchronously</a></li>
+                       </ul>
+               </li>   
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/websql_w.htm">Web SQL Database Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web SQL Database: Creating and Querying Databases</h1>
+  <div class="cont"><div class="static-cont">
+  
+<p>This tutorial demonstrates how you can use SQL databases in Tizen applications.</p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>                             
+                       
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Web SQL Database API features by learning about:</p>
+<ul>
+<li>Asynchronous operations
+<ul>
+<li><a href="#create_a">Opening a Database Asynchronously</a>
+<p>Learn how to create and open a database asynchronously.</p></li>
+<li><a href="#execute_a">Executing SQL Statements Asynchronously</a>
+<p>Learn how to execute SQL statements asynchronously.</p></li>
+<li><a href="#access_a">Accessing SQL Results Asynchronously</a>
+<p>Learn how to access SQL statement results asynchronously.</p></li>
+<li><a href="#handle_a">Handling a Syntax Error Asynchronously</a>
+<p>Learn how handle SQL database-related syntax errors asynchronously.</p></li>
+</ul>
+</li>
+<li>Synchronous operations
+<ul>
+<li><a href="#create">Opening a Database Synchronously</a>
+<p>Learn how to create and open a database synchronously.</p></li>
+<li><a href="#execute">Executing SQL Statements Synchronously</a>
+<p>Learn how to execute SQL statements synchronously.</p></li>
+<li><a href="#access">Accessing SQL Results Synchronously</a>
+<p>Learn how to access SQL statement results synchronously.</p></li>
+<li><a href="#handle">Handling Errors Synchronously</a>
+<p>Learn how handle SQL database-related errors synchronously.</p></li>
+</ul>
+</li></ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create_a" name="create_a" class="items-tit-h2">Opening a Database Asynchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to create and open an SQL database asynchronously:</p>
+<ol>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">openDatabase()</span> method to access a database. If the database does not exist, the method first creates it and then opens it:</p>
+<pre class="prettyprint">
+var db;
+var version = 1.0;
+var dbName = &quot;tizendb&quot;;
+var dbDisplayName = &quot;tizen_test_db&quot;;
+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;alert(&quot;database creation callback&quot;);
+&nbsp;&nbsp;&nbsp;});
+}
+</pre>
+</li>
+<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>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The creation event handler is invoked only once if the database does not exist. There is no event handler for the database <span style="font-family: Courier New,Courier,monospace">opened</span> event.</td> 
+      </tr> 
+     </tbody>
+</table>
+</ol>
+
+       <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
+ </ul>
+
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="execute_a" name="execute_a" class="items-tit-h2">Executing SQL Statements Asynchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to execute SQL statements asynchronously:</p>
+<ol>
+<li>
+<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <span style="font-family: Courier New,Courier,monospace">transaction()</span> or  <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> method returned by the <span style="font-family: Courier New,Courier,monospace">openDatabase()</span> method:</p>
+
+<pre class="prettyprint">
+db.transaction(function(t)
+{
+&nbsp;&nbsp;&nbsp;/* Place SQL statements here */
+}, function() 
+{
+&nbsp;&nbsp;&nbsp;alert(&quot;SQL statements were executed successfully.&quot;);
+});
+</pre>
+
+<p>The difference between the <span style="font-family: Courier New,Courier,monospace">transaction()</span> and <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> methods is that the latter cannot be used with SQL statements that change the database (such as <span style="font-family: Courier New,Courier,monospace">INSERT</span>, <span style="font-family: Courier New,Courier,monospace">UPDATE</span>, <span style="font-family: Courier New,Courier,monospace">DELETE</span>,  or <span style="font-family: Courier New,Courier,monospace">CREATE</span>).</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">When possible, use the <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> to obtain better execution performance of SQL statements.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+<li>
+<p>To execute a SQL statement, use the <span style="font-family: Courier New,Courier,monospace">executeSql()</span> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <span style="font-family: Courier New,Courier,monospace">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace">END</span>, or <span style="font-family: Courier New,Courier,monospace">ROLLBACK</span>):</p>
+<pre class="prettyprint">
+t.executeSql(&quot;CREATE TABLE tizenTable (id INTEGER PRIMARY KEY, title TEXT, content TEXT, insertDay DATETIME)&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;alert(&quot;Table has been created.&quot;);
+}, function(sqlTransaction, sqlError) 
+{
+&nbsp;&nbsp;&nbsp;/* 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]);
+</pre>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Use an array to pass the arguments to secure SQL statements from SQL injection attacks.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+</ol>
+
+       <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="access_a" name="access_a" class="items-tit-h2">Accessing SQL Results Asynchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to access SQL statement results asynchronously:</p>
+<ol>
+<li>
+<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <span style="font-family: Courier New,Courier,monospace">sqlResultSet</span> object:</p>
+<ul class="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) VALUES (?, ?, ?)&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;[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;alert(&quot;The &#39;id&#39; of the new record  is &quot; + sqlResultSet.insertId);
+});
+</pre>
+
+</li>
+<li>The result object of the SELECT statement stores also the number of records that were inserted, changed, or deleted.
+It contains the number of selected rows (length field) and the <span style="font-family: Courier New,Courier,monospace">item()</span> method. Use the method with the index argument (integer value from 0 to <span style="font-family: Courier New,Courier,monospace">rows.length</span> - 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;var book, i, booksNumber = sqllResultSet.rows.length;
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; booksNumber; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;book = sqlResultSet.rows.item(i);
+&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;+ &quot;, author: &quot; + book.author);
+&nbsp;&nbsp;&nbsp;}
+});
+</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 class="ul">
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
+ </ul>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="handle_a" name="handle_a" class="items-tit-h2">Handling a Syntax Error Asynchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to handle SQL database-related errors asynchronously:</p>
+<ol>
+<li>
+
+<p>Handle a syntax error in the <span style="font-family: Courier New,Courier,monospace">sqlError</span> 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;switch (sqlError.code) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case sqlError.SYNTAX_ERR:
+&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;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(&quot;Other error&quot;);
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+<p>Other types of errors that can occur are exceptions. The <span style="font-family: Courier New,Courier,monospace">sqlException</span> object has the same fields as the <span style="font-family: Courier New,Courier,monospace">sqlError</span> object but it must be handled in the <span style="font-family: Courier New,Courier,monospace">try - catch</span> block.</p>
+</li>
+
+</ol>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="create" name="create" class="items-tit-h2">Opening a Database Synchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to create and open an SQL database synchronously:</p>
+
+<ol>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">openDatabaseSync()</span> method to access a database. The method can only be used in the <a href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm#js_performance">Web Worker</a> context. If the database does not exist, the method first creates it and then opens it:</p>
+<pre class="prettyprint">
+var databaseSync = null;
+try 
+{
+&nbsp;&nbsp;&nbsp;databaseSync = openDatabaseSync(&quot;dbName&quot;, &quot;1.0&quot;, &quot;display database name&quot;, 1024 * 1024, function(databaseSync) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;database creation callback&quot;);
+&nbsp;&nbsp;&nbsp;});
+}
+</pre>
+</li>
+<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>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The creation event handler is invoked only once if the database does not exist. There is no event handle for the database opened event but, in the synchronous database API, no other code is run until the database creation operation is completed.</td> 
+      </tr> 
+     </tbody>
+</table>
+</ol>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="execute" name="execute" class="items-tit-h2">Executing SQL Statements Synchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to execute SQL statements synchronously:</p>
+<ol>
+<li>
+<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <span style="font-family: Courier New,Courier,monospace">transaction()</span> or  <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> method returned by the <span style="font-family: Courier New,Courier,monospace">openDatabaseSync()</span> method:</p>
+
+<pre class="prettyprint">
+database.transaction(function(sqlTransactionSync) 
+{
+&nbsp;&nbsp;&nbsp;/* Place SQL statements here */
+}, function() 
+{
+&nbsp;&nbsp;&nbsp;alert(&quot;SQL statements were executed successfully.&quot;);
+});
+</pre>
+
+<p>The difference between the <span style="font-family: Courier New,Courier,monospace">transaction()</span> and <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> methods is that the latter cannot be used with SQL statements that change the database (such as <span style="font-family: Courier New,Courier,monospace">INSERT</span>, <span style="font-family: Courier New,Courier,monospace">UPDATE</span>, <span style="font-family: Courier New,Courier,monospace">DELETE</span>,  or <span style="font-family: Courier New,Courier,monospace">CREATE</span>).</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">When possible, use the <span style="font-family: Courier New,Courier,monospace">readTransaction()</span> to obtain better execution performance of SQL statements.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+<li>
+<p>To execute a SQL statement, use the <span style="font-family: Courier New,Courier,monospace">executeSql()</span> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <span style="font-family: Courier New,Courier,monospace">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace">END</span>, or <span style="font-family: Courier New,Courier,monospace">ROLLBACK</span>):</p>
+<pre class="prettyprint">
+var sqlResultSet = sqlTransactionSync.executeSql(
+&nbsp;&nbsp;&nbsp;&quot;CREATE TABLE IF NOT EXISTS books(id INTEGER PRIMARY KEY, title TEXT, author TEXT)&quot;, []);
+</pre>
+</li>
+<li>
+<p>Pass arguments to the SQL statement:</p>
+<pre class="prettyprint">
+var sqlResultSet = sqlTransactionSync.executeSql(
+&nbsp;&nbsp;&nbsp;&quot;SELECT id FROM books WHERE title=? AND author=?&quot;, [&quot;Ulysses&quot;, &quot;James Joyce&quot;]);
+</pre>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Use an array to pass the arguments to secure SQL statements from SQL injection attacks.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+</ol>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="access" name="access" class="items-tit-h2">Accessing SQL Results Synchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to access SQL statement results synchronously:</p>
+<ol>
+<li>
+<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <span style="font-family: Courier New,Courier,monospace">sqlResultSet</span> object:</p>
+<ul class="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">
+var sqlResultSet = sqlTransactionSync.executeSql(&quot;INSERT INTO books (id, title, author) 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;&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);
+</pre>
+
+</li>
+<li>The result object of the SELECT statement stores also the number of records that were inserted, changed, or deleted.
+It contains the number of selected rows (length field) and the <span style="font-family: Courier New,Courier,monospace">item()</span> method. Use the method with the index argument (integer value from 0 to <span style="font-family: Courier New,Courier,monospace">rows.length</span> - 1) to get individual records:
+
+<pre class="prettyprint">
+var sqlResultSet = sqlTransactionSync.executeSql(&quot;SELECT id, title, author FROM books&quot;);
+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; + book.title + &quot;, author: &quot; + book.author);
+}
+</pre>
+</li>
+</ul>
+</li>
+</ol>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="handle" name="handle" class="items-tit-h2">Handling Errors Synchronously</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To provide users with SQL database features, you must learn to handle SQL database-related errors synchronously:</p>
+<ol>
+<li>Handle errors in the <span style="font-family: Courier New,Courier,monospace">sqlException</span> object:
+
+<pre class="prettyprint">
+try 
+{
+&nbsp;&nbsp;&nbsp;databaseSync.transaction(function(sqlTransactionSync) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sqlResultSet = sqlTransactionSync.executeSql(&quot;DELETE FROM books WHERE id=?&quot;, [id]);
+&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;/* 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;Error code: &quot; + sqlException.code + &quot; (&quot; + sqlException.message + &quot;).&quot;);
+}
+</pre>
+</li>
+</ol>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In the synchronous database API, the script execution is stopped until the transaction is completed.</td> 
+      </tr> 
+     </tbody>
+</table>
+  </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm
new file mode 100644 (file)
index 0000000..96199df
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm
@@ -0,0 +1,268 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Storage: Saving Structured Data on the Client Side</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#use">Using a Local Storage</a>
+                       </li>
+                       <li><a class="opensection" href="#save">Saving Data in Local and Session Storage</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/web_storage_w.htm">Web Storage Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webstorage">Web Storage API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webstorage">Web Storage API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Web Storage: Saving Structured Data on the Client Side</h1>
+  <div class="cont"><div class="static-cont">
+    <p>This tutorial demonstrates how you can use the Web storage to create and save data locally or temporarily.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Web Storage API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#use">Using a Local Storage</a>
+<p>Create, import, and delete data in a local Web storage. </p></li>
+
+<li><a class="opensection" href="#save">Saving Data in Local Storage and Session Storage</a>
+<p>Save the same data in a local storage and session storage, and check whether the data exists after the browser is closed and reopened.</p>
+</li>
+</ul>
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="use" name="use" class="items-tit-h2">Using a Local Storage</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+<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 <span style="font-family: Courier New,Courier,monospace">setItem()</span> 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); 
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the size of the data exceeds 5 MB, an error occurs.  </td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+
+<li>
+<p>To get the saved data, use the <span style="font-family: Courier New,Courier,monospace">getItem()</span> 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 += &quot;&lt;li&gt;&quot; + localStorage.key(i) + &quot; : &quot; + localStorage.getItem(localStorage.key(i)) + &quot;&lt;/li&gt;&quot;;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>
+<p>To delete the saved data: </p>
+<ul class="ul">
+<li>To delete a specific item, use the <span style="font-family: Courier New,Courier,monospace">removeItem()</span> method with the data key:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;localStorage.removeItem(key.value); 
+&lt;/script&gt;
+</pre>
+</li>
+<li>
+<p>To delete all the data stored in the local storage, use the <span style="font-family: Courier New,Courier,monospace">clear()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;localStorage.clear(); 
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">clear()</span> method deletes all data within the same domain.</td> 
+      </tr> 
+     </tbody>
+</table>
+</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 class="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>
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="save" name="save" class="items-tit-h2">Saving Data in Local and Session Storage</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<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>
+
+<ol>
+<li><p>Create the storage key and define a <span style="font-family: Courier New,Courier,monospace">button</span> 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; onclick=&quot;addStorage(); return false;&quot; &#47;&gt;
+&lt;/body&gt;
+</pre>
+</li>
+<li>
+<p>Get the key-value pair to be stored in the local storage and session storage using the <span style="font-family: Courier New,Courier,monospace">getElementById()</span> method. Store the input key-value pair received using the <span style="font-family: Courier New,Courier,monospace">setItem()</span> method:</p>
+
+<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;}
+&lt;/script&gt;
+</pre>
+</li>
+<li>
+<p>Retrieve and display the stored data using the <span style="font-family: Courier New,Courier,monospace">getItem()</span> method:</p>
+
+<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 += &quot;&lt;li&gt;&quot; + localStorage.key(i) + &quot; : &quot; + 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 += &quot;&lt;li&gt;&quot; + sessionStorage.key(j) + &quot; : &quot; + 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;}
+&lt;/script&gt;
+</pre>
+
+<p class="figure">Figure: Displaying local and session storage data (in mobile applications only)</p> 
+<p style="text-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 figure below.</p>
+ 
+<p class="figure">Figure: Displaying data after reopening the browser (in mobile applications only)</p> 
+<p style="text-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>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="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>
+  </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm
new file mode 100644 (file)
index 0000000..23aeb44
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm
@@ -0,0 +1,223 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Camera API (Tizen Extension): Using the Camera</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#access">Accessing the Camera Device</a></li>
+                       <li><a href="#manage">Managing the Camera</a></li>
+                       <li><a href="#deallocate">Deallocating the Camera Preview Stream</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/camera_w.htm">Camera API (Tizen Extension) Guide</a></li> 
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Camera API (Tizen Extension): Using the Camera</h1>
+   <div class="cont"><div class="static-cont">
+   
+<p>This tutorial demonstrates how you can control the camera on a wearable device.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>                             
+
+   <h2>Warm-up</h2>
+  <p>Become familiar with the Camera API (Tizen Extension) API basics by learning about:</p>
+  <ul>
+   <li><a href="#access">Accessing the Camera Device</a>
+   <p>Access the media stream from the camera.</p>
+   </li>
+   <li><a href="#manage">Managing the Camera</a>
+   <p>Record videos and capture images with the camera, and set the camera settings.</p>
+   </li>
+   <li><a href="#deallocate">Deallocating the Camera Preview Stream</a>
+   <p>Deallocate the camera preview stream resources when the application is invisible.</p>
+   </li>
+  </ul>
+  <h2>Task</h2>
+  <p>In the <a href="task_camera_w.htm">Camera</a> task, we will walk through launching and controlling the camera on the Tizen wearable device.</p>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="access" name="access" class="items-tit-h2">Accessing the Camera Device</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con"> 
+  <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 <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> 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);
+function gotStream(rStream) 
+{
+&nbsp;&nbsp;&nbsp;stream = rStream;
+}
+</pre>
+</li>
+<li>Use the received stream as the first parameter for the <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method, which returns the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object. The <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method is a member object of <span style="font-family: Courier New,Courier,monospace">tizCamera</span> from the navigator.
+<pre class="prettyprint">
+navigator.tizCamera.createCameraControl(stream, gotCameraCallback, noCameraCallback); 
+</pre>
+</li>
+<li>You can use the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> in the success event handler of the <span style="font-family: Courier New,Courier,monospace">createCameraControl()</span> method, where it is provided as a parameter:
+<pre class="prettyprint">
+function gotCameraCallback(cameraControl)
+</pre>
+</li>  
+  </ol> 
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="manage" name="manage" class="items-tit-h2">Managing the Camera</h2>
+<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">  
+
+  <p>To take advantage of the camera features, you must learn to manage the camera:</p> 
+  <ul class="ul"> 
+   <li>You can record videos with the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object. 
+   <p>Use the <span style="font-family: Courier New,Courier,monospace">start()</span> to start the recording, and the <span style="font-family: Courier New,Courier,monospace">stop()</span> method to stop the recording:</p>
+<pre  class="prettyprint">
+cameraControl.recorder.start(recordingStartSuccess, recordingStartError);
+cameraControl.recorder.stop(recordingStopSuccess, recordingStopError);    
+</pre></li>
+    
+       <li>Use the <span style="font-family: Courier New,Courier,monospace">takePicture()</span> method to capture an image and write it in a file:
+<pre  class="prettyprint">
+cameraControl.image.takePicture(takePictureSuccess, takePictureError);    
+</pre></li>
+       
+    <li>Use the <span style="font-family: Courier New,Courier,monospace">applySettings()</span> method to modify the camera settings (to set the file name of the recorded video or captured image):
+<pre  class="prettyprint">
+var recordingSetting = 
+{
+&nbsp;&nbsp;&nbsp;fileName: &quot;sample.3gp&quot;;
+}   
+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);
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If a setting cannot be set, the error callback is called to resolve the issue.</td> 
+      </tr>
+     </tbody> 
+    </table></li>  
+</ul>
+                       </div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+  <h2 id="deallocate" name="deallocate" class="items-tit-h2">Deallocating the Camera Preview Stream</h2>
+  <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+  </div>
+                       <div class="devicespec-con">
+
+<p>To take advantage of the camera features, you must learn to deallocate the camera preview stream resources when the application is invisible, so that the preview stream can be assigned to another application:</p>
+
+<ol>
+<li>Access the camera preview stream using the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method:
+<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);
+}
+
+function onPreviewStream(stream) 
+{
+&nbsp;&nbsp;&nbsp;cameraStream = stream;
+}</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">onVisibilityChange()</span> event listener to detect changes in the visibility state of the application. When the application becomes invisible, the <span style="font-family: Courier New,Courier,monospace">cameraStream.stop()</span> method is called to release the preview stream. When the application becomes visible again, the preview stream is re-initialized.
+<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;}
+}
+</pre>
+</li>
+</ol>    
+               </div>
+               </li>                                   
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm
new file mode 100644 (file)
index 0000000..0016040
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm
@@ -0,0 +1,190 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>FullScreen API - Mozilla: Using Fullscreen Display</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#use" class="opensection">Using the Fullscreen Mode</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm">FullScreen API - Mozilla Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>FullScreen API - Mozilla: Using Fullscreen Display</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>This tutorial demonstrates how you can display an element in the fullscreen mode.</p> 
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <h2>Warm-up</h2> 
+  <p>Become familiar with the FullScreen API - Mozilla API basics by learning about:</p> 
+  <ul> 
+   <li><a href="#use">Using the FullScreen Mode</a> <p>Activate and cancel the fullscreen mode for an element.</p></li> 
+  </ul>   
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="use" name="use" class="items-tit-h2">Using the Fullscreen Mode</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To display and element on full screen, you must learn to use the fullscreen mode:</p> 
+  <ol> 
+   <li><p>Define the element to be shown in the fullscreen mode.</p>
+   <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 (<span style="font-family: Courier New,Courier,monospace">fs-image</span>). The video playback area (<span style="font-family: Courier New,Courier,monospace">video</span>) is another element.</p>
+   <pre class="prettyprint">
+&lt;h1&gt;FullScreen&lt;/h1&gt;
+&lt;div class=&quot;example_body&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&#39;fs-image&#39;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/tizen_logo_light.png&quot; alt=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;log&quot;&gt;&lt;/p&gt;
+&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;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; controls preload=&quot;none&quot; 
+&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;
+&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; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;video/mp4&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/video&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;toggleVideo&quot;&gt;Toggle Video fullscreen&lt;/button&gt;
+&lt;/div&gt;
+</pre> 
+</li> 
+
+   <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 (<span style="font-family: Courier New,Courier,monospace">-webkit-full-screen</span>):</p>
+   <pre class="prettyprint">
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;#fs-image: -webkit-full-screen 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #39c;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;#fs-image: full-screen 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #39c;
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&gt;
+</pre> </li> 
+
+<li><p>Toggle between the normal and fullscreen mode by using the <span style="font-family: Courier New,Courier,monospace">webkitCancelFullScreen()</span> and <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> methods:</p>
+
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;function toggleFullScreenHandler(e, target) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = document.getElementById(target);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether in fullscreen mode */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.webkitIsFullScreen) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel the fullscreen mode */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.webkitCancelFullScreen(); 
+&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;/* Switch on the fullscreen mode */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.webkitRequestFullScreen(); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+    
+&nbsp;&nbsp;&nbsp;document.getElementById(&#39;toggleImage&#39;).addEventListener(&#39;click&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleFullScreenHandler(e, &#39;fs-image&#39;)
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;document.getElementById(&#39;toggleVideo&#39;).addEventListener(&#39;click&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleFullScreenHandler(e, &#39;video&#39;)
+&nbsp;&nbsp;&nbsp;}, false);
+    
+&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;click&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleFullScreenHandler(e)
+&nbsp;&nbsp;&nbsp;}, false);
+&lt;/script&gt;
+</pre>
+</li>
+  </ol> 
+  
+<p class="figure">Figure: Normal and fullscreen modes</p> 
+<p style="text-align:center;"><img alt="Normal and fullscreen modes" src="../../../images/fullscreen.png" /></p> 
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/mozilla_fullscreen" target="_blank">fullscreen.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/mozilla_fullscreen/images" target="_blank">tizen_logo_light.png</a></li>      
+ </ul>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
new file mode 100644 (file)
index 0000000..1039f4b
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Managing Supplementary Features</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features Guides</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary API for Mobile Web</a></li>
+                       <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 id="container"><div id="contents"><div class="content">
+<h1>Supplementary Features: Managing Supplementary Features</h1>
+
+ <p>The supplementary features tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="typedarray_tutorial_w.htm">Typed Array - Khronos: Handling Binary Data</a> <p>Demonstrates how you can access binary data in JavaScript.</p></li>
+   <li><a href="webgl_tutorial_w.htm">WebGL - Khronos: Creating 3D Graphics</a> <p>Demonstrates how you can create 3D visual elements and display them on the screen.</p></li> 
+  </ul>
+
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>  
+   <ul>
+   <li><a href="fullscreen_tutorial_w.htm">FullScreen API - Mozilla: Using Fullscreen Display</a> <p>Demonstrates how you can convert an element into fullscreen mode.</p></li>        
+  </ul>
+<p>The following tutorials apply in <span style="color: red">wearable applications only</span>:</p> 
+  <ul>
+   <li><a href="camera_tutorial_w.htm">Camera API (Tizen Extension): Using the Camera</a> <p>Demonstrates how you can control the camera on a wearable 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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm
new file mode 100644 (file)
index 0000000..5966038
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm
@@ -0,0 +1,1064 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+            <li><a href="#layout">Defining the Application Layout</a></li>
+            <li><a href="#preview">Defining the Preview</a></li>
+            <li><a href="#photo">Capturing Images</a></li>
+            <li><a href="#video">Recording Videos</a></li>
+            <li><a href="#settings">Changing Settings</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/supplement/camera_w.htm">Camera API (Tizen Extension) Guide</a></li>
+            <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Task: Camera</h1>
+<p>This task, based on the Camera sample delivered with the Tizen SDK, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension)</a> API to control the camera on the Tizen wearable device.  For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/downloads/sample-applications/sample-wearable-applications" target="blank">Camera</a>.</p>
+
+<p>This task consists of the following parts:</p>
+ <ul class="ul">
+ <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
+ <li><a href="#preview">Defining the Preview</a> defines how to set the camera preview on the screen.</li>
+ <li><a href="#photo">Capturing Images</a> defines how to capture an image with auto-focus and save it on the Tizen wearable device.</li>
+ <li><a href="#video">Recording Videos</a> defines how to record a video and save it on the Tizen wearable device.</li>
+ <li><a href="#settings">Changing Settings</a> defines how to change the camera settings.</li>
+ </ul>
+ <p>This sample is a fully functional application for launching and controlling the camera on the Tizen wearable device.</p>
+
+<h2 id="layout" name="layout">Defining the Application Layout</h2>
+ <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 <span style="font-family: Courier New,Courier,monospace;">js/core</span> 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 class="tutorstep"> 
+
+   <li>index.html Source File
+<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 <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> 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 <span style="font-family: Courier New,Courier,monospace;">js/views/main.js</span> 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; 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;/&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&gt;
+</pre>
+</li>
+</ol>
+
+  <h3 id="preview_screen" name="preview_screen">Defining the Preview Screen</h3>
+  <ol class="tutorstep"> 
+
+   <li>index.html Source File
+<p>The preview screen displays the image and video preview. </p>
+<p>The screen is styled with the <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> 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 <span style="font-family: Courier New,Courier,monospace;">js/views/preview.js</span> 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&gt;
+</pre>
+</li>
+</ol>
+
+  <h3 id="settings_screen" name="settings_screen">Defining the Settings Screen</h3> 
+  <ol class="tutorstep"> 
+
+   <li>index.html Source File
+<p>The Settings screen displays the picture and video size and format settings.</p>
+<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;">&lt;div&gt;</span> element whose <span style="font-family: Courier New,Courier,monospace;">class</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">ui-header</span>. The header section determines the title of the screen. The content section contains a list view widget with links to different settings.</p>
+<p>Each individual setting has its own sub-screen with a screen title and a list view widget displaying the available settings values.</p>
+<p>The screen is styled with the <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> 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 <span style="font-family: Courier New,Courier,monospace;">js/views/settings.js</span> 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&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&gt;
+&lt;!--Picture and recording format have similar screens--&gt;
+</pre>
+</li>
+</ol>
+
+
+<h2 id="preview" name="preview">Defining the Preview</h2>
+ 
+    <p>This section builds upon the elements described in <a href="camera_tutorial_w.htm#access">Accessing the Camera Device</a>.</p>
+
+
+   <h3 id="initialize" name="initialize">Initializing the Preview</h3> 
+<ol class="tutorstep"> 
+
+
+<li>js/views/main.js Source File
+<ol><li>
+<p>After launching the application, set the variables for the camera preview, call the <span style="font-family: Courier New,Courier,monospace;">initCameraPreview()</span> 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;
+/* 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();
+}
+e.listeners({&#39;camera.ready&#39;: onCameraReady});
+</pre>
+</li>
+<li><p>In the <span style="font-family: Courier New,Courier,monospace;">initCameraPreview()</span> method, call the <span style="font-family: Courier New,Courier,monospace;">requestForCameraStream()</span> 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);
+}
+</pre>
+</li>
+</ol></li></ol>
+
+   <h3 id="callback" name="callback">Displaying the Preview</h3>
+<ol class="tutorstep"> 
+   <li>js/views/main.js Source File 
+   <p>If you successfully retrieve the media stream from the camera, use the <span style="font-family: Courier New,Courier,monospace;">onPreviewStream()</span> event handler to first call the <span style="font-family: Courier New,Courier,monospace;">registerStream()</span> method and then play the preview with the <span style="font-family: Courier New,Courier,monospace;">play()</span> 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;}
+}
+</pre>
+</li>
+   <li>js/models/camera.js Source File 
+<ol><li><p>In the <span style="font-family: Courier New,Courier,monospace;">registerStream()</span> 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);
+}
+</pre>
+</li>
+
+   <li>
+<p>When the camera control (the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object) is created, initialize the camera settings and fire the <span style="font-family: Courier New,Courier,monospace">camera.ready</span> event.</p>
+
+<pre class="prettyprint">
+function onCameraControlCreated(control) 
+{
+&nbsp;&nbsp;&nbsp;cameraControl = control;
+&nbsp;&nbsp;&nbsp;initCameraSettings();
+&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.ready&#39;);
+}
+</pre>
+</li>
+   <li>When initializing the camera settings, read and saves them.
+<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;}
+}
+</pre></li></ol></li>
+
+<li>js/views/main.js Source File
+<p>When the camera is ready to display the preview and the <span style="font-family: Courier New,Courier,monospace">camera.ready</span> event is fired, the <span style="font-family: Courier New,Courier,monospace;">onCameraReady()</span> event handler is called.</p>
+<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;}
+}
+</pre>
+</li>
+</ol>
+
+
+ <h2 id="photo" name="photo">Capturing Images</h2>
+ 
+  <p>This section builds upon the elements described in <a href="camera_tutorial_w.htm#manage">Managing the Camera</a>.</p>
+
+  
+   <h3 id="initialize2" name="initialize2">Initializing the Image Capture</h3>
+<ol class="tutorstep"> 
+  <li>js/views/main.js Source File
+<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,
+
+/* 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();
+}
+
+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
+});
+</pre>
+</li>
+
+<li>js/views/main.js Source File
+<p>When the user taps the preview, the <span style="font-family: Courier New,Courier,monospace">onCameraPreviewClick()</span> event handler is called. If the photo mode is on, the image is captured with the <span style="font-family: Courier New,Courier,monospace">takePicture()</span> method.</p>
+<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;}
+}
+
+function takePhoto() 
+{
+&nbsp;&nbsp;&nbsp;camera.takePicture();
+}
+</pre>
+</li></ol>
+   <h3 id="focus" name="focus">Auto-focusing an Image</h3> 
+<ol class="tutorstep"> 
+<li>js/models/camera.js Source File
+<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;;
+
+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;
+}
+</pre>
+</li>
+<li>js/views/main.js Source File
+<p>When the <span style="font-family: Courier New,Courier,monospace">camera.autofocus.start</span> event is fired, the <span style="font-family: Courier New,Courier,monospace">onAutoFocusStart()</span> event handler calls the <span style="font-family: Courier New,Courier,monospace">showAutoFocus()</span> method to add styles to the animated focus frame on the preview.</p>
+<pre class="prettyprint">
+function onAutoFocusStart() 
+{
+&nbsp;&nbsp;&nbsp;showAutoFocus();
+}
+
+function showAutoFocus() 
+{
+&nbsp;&nbsp;&nbsp;focusContainer.classList.remove(&#39;hidden&#39;);
+&nbsp;&nbsp;&nbsp;focusFrame.classList.add(&#39;autofocus-animation&#39;);
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>If the auto-focus succeeds, the <span style="font-family: Courier New,Courier,monospace">onAutoFocusSuccess</span> event handler calls the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method to start the image capture. The event handler also fires the <span style="font-family: Courier New,Courier,monospace">camera.autofocus.success</span> event.</p>
+<pre class="prettyprint">
+function onAutoFocusSuccess() 
+{
+&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.autofocus.success&#39;);
+&nbsp;&nbsp;&nbsp;setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
+}
+</pre>
+</li>
+
+<li>js/views/main.js Source File
+<p>Based on the <span style="font-family: Courier New,Courier,monospace">camera.autofocus.success</span> event, the focus frame style is changed on the screen.</p>
+<pre class="prettyprint">
+function onAutoFocusSuccess() 
+{
+&nbsp;&nbsp;&nbsp;focusFrame.classList.add(&#39;autofocus-success&#39;);
+}
+</pre>
+</li></ol>
+   <h3 id="capture" name="capture">Capturing an Image</h3>
+<ol class="tutorstep"> 
+<li>js/models/camera.js Source File
+<p>In the <span style="font-family: Courier New,Courier,monospace">startTakingPicture()</span> 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();
+
+&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);
+}
+</pre>
+</li>
+
+<li>js/models/camera.js Source File
+<p>When the image settings have been successfully applied and the picture is ready, the <span style="font-family: Courier New,Courier,monospace">onImageSettingsApplied()</span> and <span style="font-family: Courier New,Courier,monospace">onPictureDone()</span> event handlers are called.</p>
+<pre class="prettyprint">
+function onImageSettingsApplied() 
+{
+&nbsp;&nbsp;&nbsp;cameraControl.image.takePicture(onPictureDone, onPictureError);
+}
+
+function onPictureDone() 
+{
+&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.picture.done&#39;, {path: picturePath});
+}
+</pre>
+</li>
+
+<li>js/views/main.js Source File
+<p>When the picture is done, the auto-focus frame is hidden and the <span style="font-family: Courier New,Courier,monospace">views.preview.show</span> event is fired to show the image preview.</p>
+<pre class="prettyprint">
+/* 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});
+}
+
+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;);
+}
+</pre>
+</li>
+<li>js/views/preview.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">views.preview.show</span> event calls the <span style="font-family: Courier New,Courier,monospace">show()</span> method, which displays the image preview on the screen.</p>
+<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;}
+}
+
+e.listeners({&#39;views.preview.show&#39;: show});
+</pre>
+</li>
+</ol>
+
+
+
+<h2 id="video" name="video">Recording Videos</h2>
+ 
+  <p>This section builds upon the elements described in <a href="camera_tutorial_w.htm#manage">Managing the Camera</a>.</p>
+ 
+  
+   <h3 id="initialize3" name="initialize3">Initializing Video Recording</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/main.js Source File
+ <ol>
+<li>
+<p>Set the needed variables for the image capture.</p>
+<p>The maximum recording time is set for 10 seconds (<span style="font-family: Courier New,Courier,monospace;">maxRecordingTimeSeconds</span>). Set the <span style="font-family: Courier New,Courier,monospace;">RECORDING_INTERVAL_STEP</span> variable in milliseconds for checking the length of the recording.</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;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);
+
+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 = document.getElementById(&#39;record-progress-label-val&#39;);
+&nbsp;&nbsp;&nbsp;recordProgressLabelMax = document.getElementById(&#39;record-progress-label-max&#39;);
+&nbsp;&nbsp;&nbsp;bindEvents();
+&nbsp;&nbsp;&nbsp;initCameraPreview();
+}
+</pre></li>
+<li>
+<p>When the user taps the preview, the <span style="font-family: Courier New,Courier,monospace">onCameraPreviewClick()</span> event handler is called. If the photo mode is not on, the video recording is set with the <span style="font-family: Courier New,Courier,monospace">toggleRecording()</span> and <span style="font-family: Courier New,Courier,monospace">setRecording()</span> methods.</p>
+<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;}
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">toggleRecording()</span> method defines the recording state (on or off).</p>
+<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;}
+}
+</pre></li>
+<li>The <span style="font-family: Courier New,Courier,monospace">setRecording()</span> 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;}
+}
+</pre></li></ol></li></ol>
+
+   <h3 id="record" name="record">Starting Video Recording</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/main.js Source File
+  <ol><li>
+<p>The <span style="font-family: Courier New,Courier,monospace">startRecording()</span> method starts the recording process, and the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method stops it.</p>
+<pre class="prettyprint">
+function startRecording() 
+{
+&nbsp;&nbsp;&nbsp;camera.startRecording();
+&nbsp;&nbsp;&nbsp;resetRecordingProgress();
+&nbsp;&nbsp;&nbsp;showRecordingView();
+}
+
+function stopRecording() 
+{
+&nbsp;&nbsp;&nbsp;camera.stopRecording();
+}
+</pre>
+</li>
+
+<li>
+<p>To start the recording process, first reset the time and progress bar values.</p>
+<pre class="prettyprint">
+function resetRecordingProgress() 
+{
+&nbsp;&nbsp;&nbsp;recordingTime = 0;
+&nbsp;&nbsp;&nbsp;renderRecordingProgressBar();
+}
+
+function renderRecordingProgressBarValue(value) 
+{
+&nbsp;&nbsp;&nbsp;recordProgressVal.style.width = value + &#39;px&#39;;
+}
+
+function renderRecordingProgressBarLabel() 
+{
+&nbsp;&nbsp;&nbsp;recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
+&nbsp;&nbsp;&nbsp;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();
+}
+</pre>
+</li>
+
+<li>
+<p>While recording, you want to show the recording view and progress bar, but hide the navigation buttons.</p>
+<pre class="prettyprint">
+function showRecordingView() 
+{
+&nbsp;&nbsp;&nbsp;hideNavigationBtns();
+&nbsp;&nbsp;&nbsp;showRecordProgress();
+}
+
+function hideNavigationBtns() 
+{
+&nbsp;&nbsp;&nbsp;modeBtn.classList.add(&#39;hidden&#39;);
+&nbsp;&nbsp;&nbsp;settingsBtn.classList.add(&#39;hidden&#39;);
+}
+
+function showRecordProgress() 
+{
+&nbsp;&nbsp;&nbsp;recordProgress.classList.remove(&#39;hidden&#39;);
+}
+</pre>
+</li></ol></li>
+
+<li>js/models/camera.js Source File
+<ol><li>
+<p>Start video recording by applying video file parameters.</p>
+<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);
+                               
+&nbsp;&nbsp;&nbsp;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;;
+
+&nbsp;&nbsp;&nbsp;fileName = dateHelper.format(currentDate, &#39;yyyymmdd_HHMMSS&#39;) + &#39;.&#39; + extension;
+
+&nbsp;&nbsp;&nbsp;return fileName;
+}
+</pre></li>
+<li>When the video file parameters have been applied successfully, the <span style="font-family: Courier New,Courier,monospace">onVideoSettingsApplied()</span> event handler starts the actual recording.
+<pre class="prettyprint">
+function onVideoSettingsApplied() 
+{
+&nbsp;&nbsp;&nbsp;cameraControl.recorder.start(onRecordingStartSuccess, onRecordingStartError);
+}
+</pre>
+</li>
+
+<li>
+<p>Trace the length of the recording. If the recording lasts longer than 10 seconds, stop recording.</p>
+
+<pre class="prettyprint">
+function onRecordingStartSuccess() 
+{
+&nbsp;&nbsp;&nbsp;startTracingVideoLength();
+&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.recording.start&#39;);
+}
+
+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);
+}
+
+function checkVideoLength() 
+{
+&nbsp;&nbsp;&nbsp;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;}
+}
+</pre></li></ol></li>
+<li>js/views/main.js Source File
+<p>Based on the <span style="font-family: Courier New,Courier,monospace">camera.recording.start</span> event, call the <span style="font-family: Courier New,Courier,monospace">setRecordingInterval()</span> method to set the recording interval and update the recording process.</p>
+<pre class="prettyprint">
+function onRecordingStart() 
+{
+&nbsp;&nbsp;&nbsp;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);
+}
+
+function updateRecordingProgress() 
+{
+&nbsp;&nbsp;&nbsp;recordingTime = camera.getRecordingTime();
+
+&nbsp;&nbsp;&nbsp;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();
+}
+
+function renderRecordingProgressBarValue(value) 
+{
+&nbsp;&nbsp;&nbsp;recordProgressVal.style.width = value + &#39;px&#39;;
+}
+
+function renderRecordingProgressBarLabel() 
+{
+&nbsp;&nbsp;&nbsp;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);
+}
+</pre>
+</li></ol>
+
+   <h3 id="stop" name="stop">Stopping Video Recording</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/main.js Source File
+<p>When the user taps the screen to stop the recording, the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method calls the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method.</p>
+<pre class="prettyprint">
+function stopRecording() 
+{
+&nbsp;&nbsp;&nbsp;camera.stopRecording();
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>After the recording stops successfully, the <span style="font-family: Courier New,Courier,monospace">onVideoRecordingStopSuccess()</span> event handler fires the <span style="font-family: Courier New,Courier,monospace">camera.recording.done</span> event.</p>
+<pre class="prettyprint">
+function onVideoRecordingStopSuccess() 
+{
+&nbsp;&nbsp;&nbsp;busy = false;
+&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.recording.done&#39;, {path: videoPath});
+}
+</pre></li>
+<li>js/views/main.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">camera.recording.done</span> event calls the <span style="font-family: Courier New,Courier,monospace">onRecordingDone</span> event handler.</p>
+<pre class="prettyprint">
+function onRecordingDone(ev) 
+{
+&nbsp;&nbsp;&nbsp;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;}
+}
+</pre></li>
+<li>js/views/preview.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace">onRecordingDone</span> event handler fires the <span style="font-family: Courier New,Courier,monospace">views.preview.show</span> event, which calls the <span style="font-family: Courier New,Courier,monospace">show()</span> method to displays the video preview on the screen.</p>
+<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;}
+}
+</pre>
+ </li>
+ </ol>
+
+
+<h2 id="settings" name="settings">Changing Settings</h2>
+ 
+ <p>This section builds upon the elements described in <a href="camera_tutorial_w.htm#manage">Managing the Camera</a>.</p>
+
+  
+   <h3 id="initialize4" name="initialize4">Initializing the Settings</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/main.js Source File
+<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});
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>When the settings are selected, the <span style="font-family: Courier New,Courier,monospace;">saveCameraSettings()</span> method is used to save them.</p>
+<pre class="prettyprint">
+function saveCameraSettings()
+{
+&nbsp;&nbsp;&nbsp;storage.add(STORAGE_SETTINGS_KEY, cameraSettings);
+}</pre>
+</li></ol>
+
+   <h3 id="imageformat" name="imageformat">Setting the Image Format</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/pictureFormat.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace;">renderView()</span> 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;);
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>The available formats are retrieved from the model.</p>
+<pre class="prettyprint">
+function getAvailablePictureFormats() 
+{
+&nbsp;&nbsp;&nbsp;return cameraControl.capabilities.pictureFormats;
+}
+</pre>
+</li>
+<li>js/views/pictureFormat.js Source File
+<p>After the user selects the format they want, the selected format is passed to the model.</p>
+<pre class="prettyprint">
+function bindEvents() 
+{
+&nbsp;&nbsp;&nbsp;page.addEventListener(&#39;pagebeforeshow&#39;, onPageBeforeShow);
+&nbsp;&nbsp;&nbsp;formatList.addEventListener(&#39;click&#39;, onFormatListClick);
+}
+
+function onFormatListClick() 
+{
+&nbsp;&nbsp;&nbsp;var input = formatList.querySelectorAll(&#39;input:checked&#39;)[0];
+
+&nbsp;&nbsp;&nbsp;camera.setPictureFormat(input.getAttribute(&#39;data-format&#39;));
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>The selected format is used and saved in the model.</p>
+<pre class="prettyprint">
+function setPictureFormat(format) 
+{
+&nbsp;&nbsp;&nbsp;cameraSettings.pictureFormat = format;
+&nbsp;&nbsp;&nbsp;saveCameraSettings();
+}
+</pre>
+</li>
+</ol>
+
+   <h3 id="size" name="size">Setting the Image File Size</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/pictureSize.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace;">renderView()</span> 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;);
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>The available sizes are retrieved from the model.</p>
+<pre class="prettyprint">
+function getAvailablePictureSizes() 
+{
+&nbsp;&nbsp;&nbsp;return cameraControl.capabilities.pictureSizes;
+}
+</pre>
+</li>
+<li>js/views/pictureSize.js Source File
+<p>After the user selects the size they want, the selected size is passed to the model.</p>
+<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);
+
+&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;});
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>The selected size is used and saved in the model.</p>
+<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();
+}
+</pre>
+</li>
+</ol>
+
+ <h3 id="videoformat" name="videoformat">Setting the Video Format</h3> 
+<ol class="tutorstep"> 
+  <li>js/views/recordingFormat.js Source File
+<p>The <span style="font-family: Courier New,Courier,monospace;">renderView()</span> 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;);
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>The available formats are retrieved from the model.</p>
+<pre class="prettyprint">
+function getAvailableRecordingFormats() 
+{
+&nbsp;&nbsp;&nbsp;return cameraControl.capabilities.recordingFormats;
+}
+</pre>
+</li>
+<li>js/views/recordingFormat.js Source File
+<p>After the user selects the format they want, the selected format is passed to the model.</p>
+<pre class="prettyprint">
+function onFormatListClick() 
+{
+&nbsp;&nbsp;&nbsp;var input = formatList.querySelectorAll(&#39;input:checked&#39;)[0];
+
+&nbsp;&nbsp;&nbsp;camera.setRecordingFormat(input.getAttribute(&#39;data-format&#39;));
+}
+</pre>
+</li>
+<li>js/models/camera.js Source File
+<p>The selected format is used and saved in the model.</p>
+<pre class="prettyprint">
+function setRecordingFormat(format) 
+{
+&nbsp;&nbsp;&nbsp;cameraSettings.recordingFormat = format;
+&nbsp;&nbsp;&nbsp;saveCameraSettings();
+}
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm
new file mode 100644 (file)
index 0000000..bda4367
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm
@@ -0,0 +1,329 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Typed Array - Khronos: Handling Binary Data</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a class="opensection" href="#array">Creating an Array Buffer</a>
+                       </li>
+                       <li><a class="opensection" href="#view">Creating Typed Array Views</a>
+                       </li>
+                       <li><a class="opensection" href="#use">Using Typed Arrays</a>
+                       </li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm">Typed Array - Khronos Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#typed_array">Typed Array - Khronos API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#typed_array">Typed Array - Khronos API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Typed Array - Khronos: Handling Binary Data</h1>
+  <div class="cont"><div class="static-cont">
+
+ <p>This tutorial demonstrates how you can access binary data in JavaScript.</p>
+
+<h2 id="warm-up" name="warm-up">Warm-up</h2>
+<p>Become familiar with the Typed Array - Khronos API basics by learning about:</p>
+<ul>
+<li><a class="opensection" href="#array">Creating an Array Buffer</a>
+<p>Create a buffer to save data on the array buffer view.</p></li>
+<li><a class="opensection" href="#view">Creating Typed Array Views</a>
+<p>Create a typed array view of the array buffer and provide access to read and write binary data.</p></li>
+<li><a class="opensection" href="#use">Using Typed Arrays</a>
+<p>Deliver binary data in other HTML5 APIs that use a typed array.</p></li>
+</ul>
+
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="array" name="array" class="items-tit-h2">Creating an Array Buffer</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To handle binary data in your application with JavaScript, you must learn to create array buffers:</p>
+<ol>
+<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;);
+
+&nbsp;&nbsp;&nbsp;/* Create a 12-byte buffer */
+&nbsp;&nbsp;&nbsp;var buffer = new ArrayBuffer(12);
+&nbsp;&nbsp;&nbsp;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;;</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;;
+&lt;/script&gt;</pre></li>
+</ol>
+<p class="figure">Figure: Creating and slicing array buffers (in mobile applications only)</p>
+<p style="text-align:center;"><img alt="Creating and slicing array buffers (in mobile applications only)" src="../../../images/arraybuffer.png"/></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_1.html</a></li>     
+ </ul>  
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="view" name="view" class="items-tit-h2">Creating Typed Array Views</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To handle binary data in your application with JavaScript, you must learn to access the binary data for reading and writing:</p>
+<ol>
+<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);
+&lt;/script&gt;
+</pre>
+
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">In the above code, to access a buffer with an array of 16-bit signed integers, use the <span style="font-family: Courier New,Courier,monospace">Int16Array</span> instance that references an array buffer.</td>
+       </tr>   
+   </tbody> 
+  </table></li>
+<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);
+               
+&nbsp;&nbsp;&nbsp;/* Create a typed array view that points to the array buffer */
+&nbsp;&nbsp;&nbsp;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;;
+               
+&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;; 
+&lt;/script&gt;</pre>
+
+<p style="text-align:center;"><img alt="Typed Array implementation" src="../../../images/typed_array_implementation.png"/></p></li>
+
+<li>Replace the <span style="font-family: Courier New,Courier,monospace">CanvasPixelArray</span> instance with the <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> 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;;       
+&lt;/script&gt;</pre>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> behavior is identical to the other typed array views. The only notable exception is that the setters and constructors use clamping rather than modulo arithmetic while converting incoming number values.</p>
+
+<p style="text-align:center;"><img alt="Clamped Array implementation" src="../../../images/clamped_array.png"/></p></li>
+
+<li>When an <span style="font-family: Courier New,Courier,monospace">ArrayBuffer</span> with heterogeneous type of data is used, you can take advantage of the <span style="font-family: Courier New,Courier,monospace">DataView</span> of the buffer:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;);
+    
+&nbsp;&nbsp;&nbsp;/* Create DataView */
+&nbsp;&nbsp;&nbsp;var x = new DataView(new ArrayBuffer(12), 0);
+
+&nbsp;&nbsp;&nbsp;/* 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;; 
+&lt;/script&gt;</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">DataView</span> 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 <span style="font-family: Courier New,Courier,monospace">littleEndian</span> argument indicates that the value can be stored in a big-endian or little-endian byte order. If the argument is set to <span style="font-family: Courier New,Courier,monospace">false</span> or is undefined, the value gets stored in the big-endian byte order.</p>
+<p style="text-align:center;"><img alt="DataView" src="../../../images/data_view.png"/></p></li>
+</ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="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> 
+</div>
+               </li>
+               <li>
+                       <div class="devicespec-tit">
+ <h2 id="use" name="use" class="items-tit-h2">Using Typed Arrays</h2>
+ <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+
+<p>To handle binary data in your application with JavaScript, you must learn to deliver binary data effectively in other HTML5 APIs that employ a typed array:</p>
+
+<ol>
+<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 <span style="font-family: Courier New,Courier,monospace">gl.bufferData()</span> method to set the buffer object to deliver texture data:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var textureCoords = [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;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&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;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;
+&lt;/script&gt;</pre></li>
+
+<li>For the HTML5 canvas element API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">wearable</a> applications), use the typed array with the following steps:
+<ol>
+<li>Create an <span style="font-family: Courier New,Courier,monospace">ImageData</span> object of the canvas internally.</li>
+<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 = tempContext.getImageData(0, 0, canvas.width, canvas.height);
+&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;
+&lt;/script&gt;</pre></li></ol>
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The pixel array of canvas can be created and edited without direct manipulation of the canvas element.</td>
+       </tr>           
+   </tbody> 
+  </table></li>
+
+<li>For the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API</a>, set the response type of the <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest</span> object as <span style="font-family: Courier New,Courier,monospace">arraybuffer</span> to receive a typed array response. This way by delivering data directly in multimedia, you can parse the binary file through the network:
+<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();
+}</pre></li>
+</ol>
+   </div>
+               </li>
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm
new file mode 100644 (file)
index 0000000..606ef6c
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm
@@ -0,0 +1,1631 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Creating 3D Graphics</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#import" class="opensection">Importing the WebGL Context</a></li>
+                       <li><a href="#shader" class="opensection">Initializing Programs and Shaders</a></li>
+                       <li><a href="#buffer" class="opensection">Initializing Buffers</a></li>
+                       <li><a href="#draw" class="opensection">Drawing Shapes on the Screen</a></li>
+                       <li><a href="#color" class="opensection">Setting Colors</a></li>
+                       <li><a href="#texture" class="opensection">Setting Textures</a></li>
+                       <li><a href="#animation" class="opensection">Creating an Animation</a></li>
+                       <li><a href="#threed" class="opensection">Creating a 3D Perspective</a></li>
+                       <li><a href="#touch" class="opensection">Using Touch Events</a></li>
+                       <li><a href="#framework" class="opensection">Using WebGL Frameworks</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+             <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/webgl_w.htm">WebGL - Khronos Guide</a></li>
+                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">WebGL  - Khronos API for Mobile Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">WebGL  - Khronos API for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>WebGL - Khronos: Creating 3D Graphics</h1>
+<div class="cont"><div class="static-cont">    
+
+ <p>This tutorial demonstrates how you can use the WebGL graphics library 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> to create 3D effects, such as texture and animation.</p>  
+
+
+  <h2>Warm-up</h2> 
+  <p>Become familiar with the WebGL - Khronos API basics by learning about:</p> 
+  <ul>
+   <li><a class="opensection" href="#import">Importing the WebGL Context</a>
+   <p>Import the WebGL context to your application.</p>
+   </li>
+   <li><a class="opensection" href="#shader">Initializing Programs and Shaders</a>
+   <p>Bind the shaders and GLSL ES in WebGL by creating and compiling shaders and programs.</p>
+   </li>
+   <li><a class="opensection" href="#buffer">Initializing Buffers</a>
+   <p>Create a buffer, bind it, and store data in it.</p>
+   </li>
+   <li><a class="opensection" href="#draw">Drawing Shapes on the Screen</a>
+   <p>Use attribute array data and a drawing buffer to display shapes on the screen.</p>
+   </li> 
+   <li><a class="opensection" href="#color">Setting Colors</a>
+   <p>Use attribute array data and a drawing buffer to display colors on the screen.</p>
+   </li> 
+   <li><a class="opensection" href="#texture">Setting Textures</a>
+   <p>Use an image texture in your application.</p>
+   </li> 
+   <li><a class="opensection" href="#animation">Creating an Animation</a>
+   <p>Use a moving animation in your application.</p>
+   </li> 
+   <li><a class="opensection" href="#threed">Creating a 3D Perspective</a>
+   <p>Apply a 3D perspective to your application with the Z-index.</p>
+   </li> 
+  </ul> 
+  
+  <h2>Follow-up</h2>
+  <p>Once we have learned the basics of the WebGL - Khronos API, we can now move on to more advanced tasks, including:</p>
+  <ul>
+  <li><a class="opensection" href="#touch">Using Touch Events</a>
+   <p>Create a dice using texture, 3D perspective, animation, and touch events.</p>
+   </li>
+   <li><a class="opensection" href="#framework">Using WebGL Frameworks</a>
+   <p>Use the three.js WebGL framework to apply illumination and camera effects.</p>
+   </li>
+  </ul>  
+                       
+<!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+       
+       <li>
+                       <div class="devicespec-tit">
+                               <h2 id="import" name="import" class="items-tit-h2">Importing the WebGL Context</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;canvas&gt;</span> element:</p> 
+  <ol> 
+   <li><p>Define the <span style="font-family: Courier New,Courier,monospace">&lt;canvas&gt;</span> 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;/body&gt;
+</pre> 
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the width and height are not set, the default size, 300x150 px, is used.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li> 
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">Canvas</span> 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;}
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_camera_effect.html</a></li>        
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="shader" name="shader" class="items-tit-h2">Initializing Programs and Shaders</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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> 
+   <li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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;void main() 
+&nbsp;&nbsp;&nbsp;{
+
+&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;}
+&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;{
+
+&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;}
+&lt;/script&gt;
+</pre> 
+</li> 
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">createShader()</span> 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);
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">shaderSource()</span> 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);
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">compileShader()</span> method and compile the shaders:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;gl.compileShader(vshader);
+&nbsp;&nbsp;&nbsp;gl.compileShader(fshader);
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">After a shader has been used, you can use the <span style="font-family: Courier New,Courier,monospace">deleteShader()</span> method to delete it.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">createProgram()</span> 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();
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">attachShader()</span> 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);
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">linkProgram()</span> method to connect to the program:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;gl.linkProgram(program);
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">useProgram()</span> 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);
+&lt;/script&gt; 
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr>
+       <td class="note">After a  WebGL program has been used, you can use the <span style="font-family: Courier New,Courier,monospace">deleteProgram()</span> method to delete it.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+  </ol> 
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>       
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="buffer" name="buffer" class="items-tit-h2">Initializing Buffers</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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> 
+
+  <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 style="text-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 = [1.0,&nbsp;&nbsp;1.0,&nbsp;&nbsp;&nbsp;/* p2 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;1.0,&nbsp;&nbsp;&nbsp;/* p1 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;-1.0];&nbsp;/* p4 */ 
+&lt;/script&gt;
+
+</pre> 
+</li> 
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method to create the vertex buffer object (VBO):</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;triangleVerticesBuffer = gl.createBuffer();
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">bindBuffer()</span> method to bind the VBO:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">bufferData()</span> 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);
+&lt;/script&gt;
+</pre>
+</li>
+  </ol> 
+
+<p>The following figure shows the final triangle as it is displayed on the screen.</p>
+<p class="figure">Figure: Triangle on the screen</p> 
+<p style="text-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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>     
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="draw" name="draw" class="items-tit-h2">Drawing Shapes on the Screen</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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> 
+
+  <ol> 
+   <li><p>Import the <span style="font-family: Courier New,Courier,monospace">getAttribLocation()</span> 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;);
+</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 <span style="font-family: Courier New,Courier,monospace">vertexPositionAttribute</span> variable.</p>
+</li>
+
+<li><p>Activate the attribute data array:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexPositionAttribute);
+</pre>
+</li>
+
+<li><p>Import the <span style="font-family: Courier New,Courier,monospace">vertexAttribPointer()</span> method that indicates the data format to the shader.</p>
+<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);
+</pre>
+</li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">drawArrays()</span> method to send the shape to the drawing buffer:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLES, 0, 3);
+&lt;/script&gt;
+</pre>
+
+
+<p>The following table describes the arguments that can be used with the <span style="font-family: Courier New,Courier,monospace">drawArrays()</span> method and their results.</p>
+<table>
+<caption>Table: Arguments for drawing shapes</caption>
+   <colgroup> 
+    <col width="25%" /> 
+    <col width="75%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Type</th> 
+     <th>Description</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">POINTS</span></p> </td> 
+     <td rowspan="1" colspan="1"><p>The point type renders 1 point at a time.</p>
+<p style="text-align:center;"><img alt="Points" src="../../../images/drawing_points.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [1.0,&nbsp;&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;-1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;-1.0];
+ 
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); 
+gl.drawArrays(gl.POINTS, 0, 4);
+</pre>
+</td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINES</span></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 style="text-align:center;"><img alt="Lines" src="../../../images/drawing_lines.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [-1.0,&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;1.0,
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;0.0,
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;-1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;-1.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); 
+gl.drawArrays(gl.LINES, 0, 6);
+</pre>
+</td> 
+       </tr>
+       
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINE_STRIP</span></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 style="text-align:center;"><img alt="Lines strip" src="../../../images/drawing_line_strip.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [-1.0,&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;-1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;-1.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);     
+gl.drawArrays(gl. LINE_STRIP, 0, 4);
+</pre>
+</td> 
+       </tr>
+       
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINE_LOOP</span></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 style="text-align:center;"><img alt="Line loop" src="../../../images/drawing_line_loop.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [-1.0,&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;-1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;-1.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0)      
+gl.drawArrays(gl. LINE_LOOP, 0, 4);
+</pre>
+</td> 
+       </tr>
+       
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLES</span></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 style="text-align:center;"><img alt="Triangles" src="../../../images/drawing_triangles.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [-1.0,&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,&nbsp;&nbsp;0.0,
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,&nbsp;&nbsp;0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;-1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;0.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); 
+gl.drawArrays(gl. TRIANGLES, 0, 6);
+</pre>
+</td> 
+       </tr>
+       
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLE_STRIP</span></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 style="text-align:center;"><img alt="Triangle strip" src="../../../images/drawing_triangle_strip.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [1.0, 1.0,&nbsp;&nbsp;&nbsp;/* p1 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 1.0,&nbsp;&nbsp;&nbsp;/* p2 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.0,&nbsp;&nbsp;&nbsp;/* p3 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 0.0,&nbsp;&nbsp;&nbsp;/* p4 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, -1.0,&nbsp;&nbsp;/* p5 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, -1.0];&nbsp;/* p6 */ 
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); 
+gl.drawArrays(gl. TRIANGLE_STRIP, 0, 6);
+</pre>
+</td> 
+       </tr>
+       
+        <tr> 
+     <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLE_FAN</span></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 <span style="font-family: Courier New,Courier,monospace">p0</span> vertex is shared by all triangles, so 4 triangles are created with 6 vertices.
+</p>
+<p style="text-align:center;"><img alt="Triangle fan" src="../../../images/drawing_triangle_fan.png" /></p>
+
+<pre class="prettyprint">
+var vertices = [0.0,&nbsp;&nbsp;0.0,&nbsp;&nbsp;&nbsp;/* p0 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;0.8,&nbsp;&nbsp;&nbsp;/* p1 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.5,&nbsp;1.0,&nbsp;&nbsp;&nbsp;/* p2 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.8,&nbsp;0.2,&nbsp;&nbsp;&nbsp;/* p3 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0,&nbsp;-1.0,&nbsp;&nbsp;/* p4 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,&nbsp;&nbsp;-1.0];&nbsp;/* p5 */
+ 
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); 
+gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
+</pre>
+</td> 
+       </tr>
+</tbody>
+</table>
+</li>
+  </ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="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_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> 
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="color" name="color" class="items-tit-h2">Setting Colors</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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> 
+<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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;
+
+&nbsp;&nbsp;&nbsp;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;}
+&lt;/script&gt;
+       
+&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
+&nbsp;&nbsp;&nbsp;precision mediump float;  
+       
+&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+
+&nbsp;&nbsp;&nbsp;void main() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vColor;
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>Define a rectangular vertex comprised of 2 triangles:</p>
+ <pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var vertices = [1.0,  1.0,   /* p1 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, 1.0,   /* p2 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0,  /* p3 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0]; /* p4 */
+</pre>
+
+<p style="text-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 <span style="font-family: Courier New,Courier,monospace">gl.TRIANGLE_STRIP</span> attribute:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;/* Define the color of each vertex as an array */
+&nbsp;&nbsp;&nbsp;var colors = [1.0, 0.0, 0.0, 1.0,  /* Red */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 1.0, 0.0, 1.0,  /* Green */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 0.0, 1.0, 1.0,  /* Blue */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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);
+&lt;/script&gt;
+</pre>
+
+</li>
+  </ol> 
+<p>The following figure shows the result as it is displayed on the screen.</p>
+<p class="figure">Figure: Color on the screen</p> 
+<p style="text-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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_color.html</a></li>        
+ </ul>    
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="texture" name="texture" class="items-tit-h2">Setting Textures</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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> 
+<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The coordinate range of a vertex is -1 ~ 1, and the coordinate range of a texture is 0 ~ 1.</td> 
+      </tr> 
+     </tbody>
+</table>
+<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&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 */
+       
+&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= texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The texture coordinates uses the <span style="font-family: Courier New,Courier,monospace">s, t</span> pair.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+
+<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">texture</span> instance using the <span style="font-family: Courier New,Courier,monospace">createTexture()</span> method:</p>
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var texture = gl.createTexture();      
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">After a texture has been used, you can use the <span style="font-family: Courier New,Courier,monospace">deleteTexture()</span> method to delete it.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+
+<li><p>Load the image file to be used as texture data, and bind the texture using the <span style="font-family: Courier New,Courier,monospace">bindTexture()</span> 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);</pre>
+<p>The image data loaded in HTML has the opposite y-axis as the webGL direction. Use the <span style="font-family: Courier New,Courier,monospace">gl.UNPACK_FLIP_Y_WEBGL</span> attribute to reverse the data and store it.</p>
+</li>
+
+  <li><p>Use the loaded image file to fill the texture data. The <span style="font-family: Courier New,Courier,monospace">texImage2D()</span> method assigns the image to be used as a texture, and the <span style="font-family: Courier New,Courier,monospace">textParameteri()</span> method assigns a filter.</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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); 
+
+
+&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); 
+</pre>
+</li>
+
+<li>Import the <span style="font-family: Courier New,Courier,monospace">unfSampler</span> 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);</pre> 
+       </li>
+<li>Draw the image using the <span style="font-family: Courier New,Courier,monospace">drawArrays()</span> 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);
+                       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+</li>
+  </ol> 
+<p>The following figure shows the result as it is displayed on the screen.</p>
+<p class="figure">Figure: Texture on the screen</p> 
+<p style="text-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 class="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/images" target="_blank">carp.jpg</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="animation" name="animation" class="items-tit-h2">Creating an Animation</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with WebGL features, you must learn to adjust and move object coordinates to create an animation:</p>
+
+<ol>
+<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;var centerVertices = [cx, cy]; /* Common coordinates for all triangles (the central point of a circle) */
+&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;cy = cx = Math.sin(angle) * 0.9; /* Calculate the coordinate of central point to be moved to */ 
+&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 = [];</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);</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 <span style="font-family: Courier New,Courier,monospace">TRIANGLE_FAN</span> argument that allows all triangles to share a central point to make a circle.
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle += 0.01;    /* Change the angle value to change the central point coordinates */    
+
+&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;}</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">setInterval()</span> method to set the rendering interval of the circle:
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;window.setInterval(function() {draw();}, 10); 
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Instead of the <span style="font-family: Courier New,Courier,monospace">setInterval()</span> method, you can also use the script-based W3C <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method. </td> 
+      </tr> 
+     </tbody>
+</table> 
+</li>
+
+</ol>
+<p>The following figure shows the animation as it is displayed on the screen.</p>
+<p class="figure">Figure: Animation on the screen</p> 
+<p style="text-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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_animation.html</a></li>    
+ </ul>   
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="threed" name="threed" class="items-tit-h2">Creating a 3D Perspective</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with WebGL features, you must learn to create 3D perspective using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
+
+<ol>
+<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 = [1.0, 0.5, 0.5,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&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;&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;&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;&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 = [-0.5, 0.5,  0.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&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;&nbsp;&nbsp;&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;&nbsp;&nbsp;&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;&nbsp;&nbsp;&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;}
+&lt;/script&gt;
+</pre>
+<p style="text-align:center;"><img alt="2 triangles" src="../../../images/3d.png" /></p> 
+</li>
+
+<li><p>Define the vertex shader and fragment shader with using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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;
+       
+&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 */
+       
+&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+       
+&nbsp;&nbsp;&nbsp;void main()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Multiply the model view matrix and projection matrix to the original coordinates */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = uPMatrix * uMVMatrix *  vec4(attVertexPos, 1.0); 
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vColor = vec4(attVertexColor, 1.0);
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+
+&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
+&nbsp;&nbsp;&nbsp;precision mediump float;  
+       
+&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+       
+&nbsp;&nbsp;&nbsp;void main()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vColor;
+&nbsp;&nbsp;&nbsp;}    
+&lt;/script&gt;
+</pre>
+
+
+</li>
+
+<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]);
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>Download the glMatrix library (<span style="font-family: Courier New,Courier,monospace">gl-matrix-min.js</span>) 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;
+</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();
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>Check that the location of the <span style="font-family: Courier New,Courier,monospace">uPMatrix</span> and <span style="font-family: Courier New,Courier,monospace">uMVMatrix</span> 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;}
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+<p>The following figure shows the 3D perspective as it is displayed on the screen.</p>
+<p class="figure">Figure: 3D perspective on the screen</p> 
+<p style="text-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 class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="touch" name="touch" class="items-tit-h2">Using Touch Events</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with WebGL features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
+
+<ol>
+<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> 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;/* Multiply the model-view matrix and projection matrix to the original coordinates to apply the 3D perspective */  
+&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&gt;
+
+&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;/* Use a floating point arithmetic value to define the display precision (highp, mediump, or lowp) */
+&nbsp;&nbsp;&nbsp;precision mediump float; 
+
+&nbsp;&nbsp;&nbsp;varying vec2 vTextureCoord;
+
+&nbsp;&nbsp;&nbsp;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;}
+&lt;/script&gt;
+</pre>
+</li>
+
+<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;
+       
+&nbsp;&nbsp;&nbsp;var diceTexture;
+&nbsp;&nbsp;&nbsp;var mvMatrix = mat4.create();
+&nbsp;&nbsp;&nbsp;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 */ 
+    
+&nbsp;&nbsp;&nbsp;var xRot = 30;
+&nbsp;&nbsp;&nbsp;var yRot = 30;
+
+&nbsp;&nbsp;&nbsp;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);
+
+&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);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initEvent();
+&nbsp;&nbsp;&nbsp;}
+&lt;/script&gt;
+</pre>
+</li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">getContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">canvas</span> 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;);
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return webGLContext
+&nbsp;&nbsp;&nbsp;}
+&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;/body&gt;
+</pre>
+</li>
+
+<li><p>Create the shaders and programs using the <span style="font-family: Courier New,Courier,monospace">createShader()</span> and <span style="font-family: Courier New,Courier,monospace">createProgram()</span> 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 = 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;);</pre>
+</li>
+<li>To send the loaded texture image to the shader program, and add a reference to the shader program <span style="font-family: Courier New,Courier,monospace">unifSampler</span> location: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program.samplerUniform = gl.getUniformLocation(program, &quot;unifSampler&quot;); 
+&nbsp;&nbsp;&nbsp;}
+</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 = [-1.0, -1.0, 1.0,    1.0, -1.0, 1.0,    1.0, 1.0, 1.0,    -1.0, 1.0, 1.0,   /* Front */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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,  /* Back */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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,   /* Top */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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,  /* Bottom */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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,   /* Right */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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]; /* Left */
+&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 = [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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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), 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 = [0,  1,  2,    0,  2,  3,   /* Front */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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), gl.STATIC_DRAW);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexIndexBuffer.itemSize = 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexIndexBuffer.numItems = 36;
+&nbsp;&nbsp;&nbsp;}  
+</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, 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;}     
+</pre>
+<p style="text-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 */</pre>
+</li>
+
+<li>Import the <span style="font-family: Courier New,Courier,monospace">mat4()</span> method module and define it using the utility methods: 
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">perspective()</span> method is not WebGL-embedded, so it must be used directly, or a 3rd party matrix library must be used.</td> 
+      </tr> 
+     </tbody>
+</table> 
+
+<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);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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]);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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, 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);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
+&nbsp;&nbsp;&nbsp;}  
+</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;touches = e.touches.item(0);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startPosX = touches.pageX;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startPosY = touches.pageY;
+
+&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;canvas.addEventListener(&#39;touchend&#39;, function(e)
+&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;canvas.addEventListener(&#39;touchend&#39;, function()
+&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;} 
+&lt;/script&gt;     
+</pre>
+</li></ol>
+<p>The following figure shows the dice as it is displayed on the screen.</p>
+<p class="figure">Figure: Dice on the screen</p> 
+<p style="text-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 class="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>  
+                       </div>
+               </li>
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="framework" name="framework" class="items-tit-h2">Using WebGL Frameworks</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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;/head&gt;
+</pre>
+</li>
+
+<li><p>Set the area to allocate the <span style="font-family: Courier New,Courier,monospace">&lt;canvas&gt;</span> 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;  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;&lt;input id=&quot;slider-lx&quot; type=&quot;range&quot; min=&quot;-1&quot; max=&quot;1&quot; step=&quot;0.01&quot; /&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;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;&lt;input id=&quot;slider-ly&quot; type=&quot;range&quot; min=&quot;-1&quot; max=&quot;1&quot; step=&quot;0.01&quot; /&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;&lt;input id=&quot;slider-lz&quot; type=&quot;range&quot; min=&quot;-1&quot; max=&quot;1&quot; step=&quot;0.01&quot; /&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 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;&lt;input id=&quot;slider-cz&quot; type=&quot;range&quot; type=&quot;range&quot; min=&quot;300&quot; max=&quot;800&quot; step=&quot;10&quot; /&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;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;&lt;input id=&quot;slider-cax&quot; type=&quot;range&quot; min=&quot;-0.5&quot; max=&quot;0.5&quot; step=&quot;0.01&quot;/&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;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;&lt;input id=&quot;slider-cay&quot; type=&quot;range&quot; min=&quot;-0.5&quot; max=&quot;0.5&quot; step=&quot;0.01&quot;/&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;&lt;/table&gt;   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+</li>
+
+<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 <span style="font-family: Courier New,Courier,monospace">startWebGl()</span> 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;var components = {}; /* Object type variable containing, for example, light and mesh information */ 
+
+&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;}
+</pre>
+</li>
+
+<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">WebGLRenderer</span> instance and, after setting the canvas size, add the <span style="font-family: Courier New,Courier,monospace">domElement</span> 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;}
+</pre>
+</li>
+
+<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">PerspectiveCamera</span> 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;}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In WebGL, there is no <span style="font-family: Courier New,Courier,monospace">Camera</span> object.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+
+<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">Scene</span> instance and create the mesh and light elements using the <span style="font-family: Courier New,Courier,monospace">createMeshs()</span> and <span style="font-family: Courier New,Courier,monospace">setupLight();</span> 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;/* Circulate components and add the mesh and light elements to the scene object */ 
+&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 = 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;&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 = 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;&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 = 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;&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;}
+</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 = components.cubeMesh.rotation.z = 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;}
+</pre>
+</li>
+
+<li><p>Adjust the camera and light location using events in the <span style="font-family: Courier New,Courier,monospace">manipulate()</span> method:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;function manipulate()
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Search for the HTML &lt;input type=&#39;range&#39;&gt; element as the ID value and store it in the variable */ 
+&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;/* When a change occurs, a related event is fired, and the axis parameter is handled */
+
+&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;}
+&lt;/script&gt;
+</pre>
+</li></ol>
+<p>The following figure shows the final result as it is displayed on the screen.</p>
+<p class="figure">Figure: Final result</p> 
+<p style="text-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 class="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>   
+                       </div>
+               </li>
+       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm b/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
new file mode 100644 (file)
index 0000000..4ec0c5f
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
@@ -0,0 +1,89 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Exploiting W3C/HTML5 and Some Supplementary Features</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.guides/html/web/w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a></li> 
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Exploiting W3C/HTML5 and Some Supplementary Features</h1>
+
+<p>W3C/HTML5 and some supplementary tutorials teach you how to incorporate W3C, HTML5, and some supplementary features into your application. The tutorials cover detailed code snippets to help you see how to write the required code in practice.</p>
+
+<p>Select the feature you are interested in and see how you can implement its various functionalities into your application:</p>
+
+<ul>
+       <li><a href="dom/dom_tutorials_w.htm">DOM, Forms and Styles: Managing CSS Styles and HTML Forms</a>
+       <p>Demonstrates how you can use various CSS style and HTML5 form features.</p></li>
+       <li><a href="device/device_tutorials_w.htm">Device: Getting Information about the Device, and Managing Device Events</a>
+       <p>Demonstrates how you can manage information about device-specific features, such as vibration and browser state.</p></li>
+       <li><a href="graphics/graphics_tutorials_w.htm">Graphics: Creating Graphics with HTML5 Features</a>
+       <p>Demonstrates how you can use graphics features, such as HTML5 canvas and SVG support.</p></li>
+       <li><a href="media/media_tutorials_w.htm">Media: Accessing Media Streams, and Playing and Capturing Multimedia</a>
+       <p>Demonstrates how you use media features, such as audio and video elements and media capture.</p></li>
+       <li><a href="communication/comm_tutorials_w.htm">Communication: Sending Messages and Exchanging Information over Servers</a>
+       <p>Demonstrates how you can use various communication features, such as bi-directional network connectivity, XML HTTP requests, and Web Messaging.</p></li>
+       <li><a href="storage/storage_tutorials_w.htm">Storage: Storing Information and Managing Databases</a>
+       <p>Demonstrates how you can store data in, for example, files, application caches, and SQL databases.</p></li>
+       <li><a href="security/security_tutorials_w.htm">Security: Enhancing Application and User Security</a>
+       <p>Demonstrates how you can use security features, such as sharing resources across different domains.</p></li>
+       <li><a href="perf_opt/performance_tutorials_w.htm">Performance and Optimization: Optimizing Application Execution</a>
+       <p>Demonstrates how you can use Web workers used to run scripts in the background.</p></li>
+       <li><a href="location/location_tutorials_w.htm">Location: Using Location Features</a>
+       <p>Demonstrates how you can use geolocation features.</p></li>  
+       <li><a href="ui/ui_tutorials_w.htm">UI: Handling User Events on the Screen</a> <span style="color: red">in mobile applications only</span>
+       <p>Demonstrates how you can handle the application UI through the clipboard and drag and drop events.</p></li>  
+       <li><a href="useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</a>
+       <p>Demonstrates how you can use W3C features related to multiple APIs.</p></li>
+       <li><a href="supplement/supplement_tutorials_w.htm">Supplementary Features: Managing Supplementary Features</a>
+       <p>Demonstrates how you can take advantage of supplementary features, such as full screen views, typed arrays, and the WebGL graphics library.</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>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
+
diff --git a/org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm
new file mode 100644 (file)
index 0000000..876a21f
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm
@@ -0,0 +1,343 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+    <title>Clipboard API and events: Transferring Content Between Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#copy" class="opensection">Copying Content</a></li>
+                       <li><a href="#cut" class="opensection">Cutting Content</a></li>
+                       <li><a href="#paste" class="opensection">Pasting Content</a></li>
+                       <li><a href="#target" class="opensection">Copying and Pasting Content into an Editable Element</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/ui/clipboard_w.htm">Clipboard API and events Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Clipboard API and events: Transferring Content Between Applications</h1>
+<div class="cont"><div class="static-cont">    
+
+                  <p>This tutorial demonstrates how you can use clipboard operations in Tizen.</p>
+                                 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+
+  <h2>Warm-up</h2>
+  <p>Become familiar with the Clipboard API and events basics by learning about:</p>
+  <ul>
+   <li><a href="#copy">Copying Content</a> <p>Use the clipboard events to copy content.</p></li>
+   <li><a href="#cut">Cutting Content</a> <p>Use the clipboard events to cut content.</p></li>
+   <li><a href="#paste">Pasting Content</a> <p>Use the clipboard events to paste content.</p></li>
+  </ul>
+
+  <h2>Follow-up</h2>
+  <p>Once we have learned the basics of using clipboard events, we can now move on to more advanced tasks, including:</p>
+  <ul>
+   <li><a href="#target">Copying and Pasting Content into an Editable Element</a> <p>Copy content and paste in a specific editable area.</p></li>
+  </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="copy" name="copy" class="items-tit-h2">Copying Content</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> 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;copyHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+    </li>
+       <li><p>When you start copying, the <span style="font-family: Courier New,Courier,monospace">copy</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">copyHandler()</span> 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();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the current selection is not influenced and there is no selected range, the clipboard imports the <span style="font-family: Courier New,Courier,monospace">setData()</span> 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.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+<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;};
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="cut" name="cut" class="items-tit-h2">Cutting Content</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> 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;cutHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+
+    </li>
+       <li><p>When you start cutting, the <span style="font-family: Courier New,Courier,monospace">cut</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">cutHandler()</span> 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();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+
+</li>
+<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;};   
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Before the <span style="font-family: Courier New,Courier,monospace">setData()</span> method is imported, the basic motion of the system event must be cancelled using the <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+</ol>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul> 
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="paste" name="paste" class="items-tit-h2">Pasting Content</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> 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;pasteHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+</li>
+       <li><p>When you start pasting, the <span style="font-family: Courier New,Courier,monospace">paste</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">pasteHandler()</span> 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();</pre>
+</li>
+       <li>Paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
+&nbsp;&nbsp;&nbsp;};              
+&lt;/script&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 class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="target" name="target" class="items-tit-h2">Copying and Pasting Content into an Editable Element</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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;/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; 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 with existing implementations.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;body&gt;
+</pre>
+</li>
+
+<li><p>Add event listeners to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> and <span style="font-family: Courier New,Courier,monospace">paste</span> 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;copyHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+</li>
+
+<li>When the <span style="font-family: Courier New,Courier,monospace">copy</span> 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();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+</li>
+<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;};</pre>
+</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace">paste</span> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;};  
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+<p class="figure">Figure: Copying and pasting</p> 
+<p style="text-align:center;"><img alt="Copying and pasting" src="../../../images/copy_pasting.png" /></p>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+                       </div>
+               </li>
+                                       
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm
new file mode 100644 (file)
index 0000000..18f6ab4
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm
@@ -0,0 +1,337 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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 Drag and drop: Handling Drag and Drop Events</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#handle" class="opensection">Handling Drag and Drop Events</a></li>
+                       <li><a href="#transfer" class="opensection">Transferring Data over Drag and Drop</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop Guide</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dnd">HTML5 Drag and drop API for Mobile Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Drag and drop: Handling Drag and Drop Events</h1>
+<div class="cont"><div class="static-cont">    
+
+                <p>This tutorial demonstrates how you can use drag and drop in Tizen.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>                             
+                       
+
+<h2>Warm-up</h2>
+<p>Become familiar with the HTML5 Drag and drop API basics by learning about:</p>
+<ul>
+<li><a href="#handle">Handling Drag and Drop Events</a>
+<p>Create draggable elements and event listeners to track drag and drop events.</p></li>
+
+<li><a href="#transfer">Transferring Data over Drag and Drop</a>
+<p>Make a simple puzzle to transfer puzzle pieces with drag and drop.</p></li>
+  </ul>
+
+<div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="handle" name="handle" class="items-tit-h2">Handling Drag and Drop Events</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>Learning how to handle drag and drop events is a basic user interaction skill:</p>
+
+
+<ol>
+<li><p>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> 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&gt;
+</pre>
+</li>
+
+<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;};
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Define event handlers for the events. In this case, each event handler displays a text on the screen.
+<pre class="prettyprint">
+function dragStart(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragStart&quot;
+};
+
+function dragIng(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;drag&quot;
+};
+
+function dragOver(e) 
+{
+&nbsp;&nbsp;&nbsp;e.preventDefault();
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragOver&quot;
+};
+
+function dragEnter(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnter&quot;
+};     
+
+function dragLeave(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragLeave&quot;
+};
+
+function dragDrop(e) 
+{
+&nbsp;&nbsp;&nbsp;e.stopPropagation();
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragDrop&quot; 
+};
+       
+function dragEnd(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnd&quot;
+};
+</pre>
+</li>
+</ol>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop.html</a></li>
+ </ul>
+                       </div>
+               </li>
+               
+               
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="transfer" name="transfer" class="items-tit-h2">Transferring Data over Drag and Drop</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <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 <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> 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&gt;
+</pre>
+</li>
+
+<li>Add event listeners for the <span style="font-family: Courier New,Courier,monospace">dragover</span>, <span style="font-family: Courier New,Courier,monospace">dragleave</span>, <span style="font-family: Courier New,Courier,monospace">dragstart</span>, and <span style="font-family: Courier New,Courier,monospace">drop</span> 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;};
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Transfer data (in this case, image parts):
+<ol>
+<li>Declare the <span style="font-family: Courier New,Courier,monospace">dragElem</span> variable, which is an empty object for the data exchange:
+<pre class="prettyprint">
+var dragElem = null;
+</pre>
+</li>
+
+<li>Use the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface in the <span style="font-family: Courier New,Courier,monospace">dragStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">dragDropHandler()</span> event handlers to exchange image parts:
+<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;};
+};
+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();
+};
+</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 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;};
+};
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+<p class="figure">Figure: Drag and drop puzzle</p> 
+<p style="text-align:center;"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p> 
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul class="ul">
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop_practical.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">logo.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_01.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_02.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_03.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_04.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_05.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_06.png</a></li>
+ </ul>
+                       </div>
+               </li>
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm
new file mode 100644 (file)
index 0000000..40f05d7
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+    <script 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: Handling User Events on the Screen</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI Guides</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI API for Mobile Web</a></li>
+                       
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI: Handling User Events on the Screen</h1>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The UI API domain is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+    <p>The UI tutorials demonstrate how you can manage screen elements and events related to them in creating Tizen Web applications:</p>
+  <ul>
+   <li><a href="clipboard_tutorial_w.htm">Clipboard API and events: Transferring Content Between Applications</a> <p>Demonstrates how you can use clipboard operations.</p></li>
+   <li><a href="drag_drop_tutorial_w.htm">HTML5 Drag and drop: Handling Drag and Drop Events</a> <p>Demonstrates how you can use the drag and drop features.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm
new file mode 100644 (file)
index 0000000..8484f97
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm
@@ -0,0 +1,163 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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: Understanding HTML Behavior</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#use" class="opensection">Using JavaScript Code within HTML</a>
+                       </li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/useful/html_priority_w.htm">HTML Priorities Guide</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML Priorities: Understanding HTML Behavior</h1>
+<div class="cont"><div class="static-cont">    
+
+<p>The HTML behavior tutorial demonstrates how you can use JavaScript methods within HTML code.</p>
+
+ <h2>Warm-up</h2>
+<p>Become familiar with HTML priorities by learning about:</p>
+<ul>
+<li><a class="opensection" href="#use">Using JavaScript Code within HTML</a> 
+<p>Learn how to format and place JavaScript code within HTML code.</p></li>
+</ul>
+
+
+       <!-- Show / Hide all links -->
+       <div class="devicespecs-util mt5 clfix">
+               <ul class="dutil">
+                       <li><a href="#" class="showA">Show All</a></li>
+                       <li class="none"><a href="#" class="hideA">Hide All</a></li>
+               </ul>
+       </div>
+       <!-- Folds -->
+       <ul class="devicespecifications">
+               <li>
+                       <div class="devicespec-tit">
+                               <h2 id="use" name="use" class="items-tit-h2">Using JavaScript Code within HTML</h2>
+                               <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
+                       </div>
+                       <div class="devicespec-con">
+                       <p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
+
+<ul class="ul">
+<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> 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;/head&gt;</pre> 
+
+<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
+</li>
+<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> 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;/body&gt;
+</pre>
+<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <span style="font-family: Courier New,Courier,monospace;">$(document).ready</span> method and in the <span style="font-family: Courier New,Courier,monospace;">onload</span> event are executed in the stored order.</p>
+</li></ul>
+
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">jQuery has to be called from both the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements. The <span style="font-family: Courier New,Courier,monospace;">logText</span> variable has to be called from the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element. The method connected to the <span style="font-family: Courier New,Courier,monospace;">onload</span> event in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is not executed. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+                       </div>
+               </li>
+
+
+       </ul>   
+</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm
new file mode 100644 (file)
index 0000000..f55c327
--- /dev/null
+++ b/org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+       <script 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 Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                   <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Useful Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</h1>
+
+       <p>The useful practices for W3C/HTML5 features tutorials demonstrate how you can manage W3C information related to multiple APIs:</p> 
+  <ul> 
+   <li><a href="html_priority_tutorial_w.htm">HTML Priorities: Understanding HTML Behavior</a> <p>Demonstrates how you can use JavaScript methods within HTML code.</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>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/index.xml b/org.tizen.tutorials/index.xml
new file mode 100644 (file)
index 0000000..97957a1
--- /dev/null
+++ b/org.tizen.tutorials/index.xml
@@ -0,0 +1,286 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="Tutorials" topic="html/cover_page.htm">
+<topic href="html/web/tutorials_w.htm" label="Web Application">
+       <topic href="html/web/tizen/tutorials_tizen_w.htm" label="Tizen Features">
+               <topic href="html/web/tizen/tizen/tizen_tutorials_w.htm" label="Tizen"></topic>
+               <topic href="html/web/tizen/application/app_tutorials_w.htm" label="Application">                       
+                       <topic href="html/web/tizen/application/alarm_tutorial_w.htm" label="Alarm"></topic>
+                       <topic href="html/web/tizen/application/application_tutorial_w.htm" label="Application"></topic>
+                       <topic href="html/web/tizen/application/package_tutorial_w.htm" label="Package"></topic>                        
+                       <topic href="html/web/tizen/application/data_tutorial_w.htm" label="Data Control"></topic>
+               </topic>
+               <topic href="html/web/tizen/content/content_tutorials_w.htm" label="Content">                   
+                       <topic href="html/web/tizen/content/content_tutorial_w.htm" label="Content">                                    
+                               <topic href="html/web/tizen/content/task_mediacontent_w.htm" label="Task: Media Content"></topic>                       
+                       </topic>
+                       <topic href="html/web/tizen/content/download_tutorial_w.htm" label="Download">                                  
+                               <topic href="html/web/tizen/content/task_downloadmanager_w.htm" label="Task: Download Manager"></topic>         
+                       </topic>
+                       <topic href="html/web/tizen/content/exif_tutorial_w.htm" label="Exif"></topic>          
+               </topic>
+               <topic href="html/web/tizen/input_output/io_tutorials_w.htm" label="Input/Output">                      
+                       <topic href="html/web/tizen/input_output/filesystem_tutorial_w.htm" label="Filesystem">                                 
+                               <topic href="html/web/tizen/input_output/task_filemanager_w.htm" label="Task: File Manager"></topic>            
+                       </topic>
+                       <topic href="html/web/tizen/input_output/message_port_tutorial_w.htm" label="Message Port"></topic>                             
+                       <topic href="html/web/tizen/input_output/archive_tutorial_w.htm" label="Archive"></topic>
+               </topic>                
+               <topic href="html/web/tizen/multimedia/multimedia_tutorials_w.htm" label="Multimedia">                  
+                       <topic href="html/web/tizen/multimedia/media_key_tutorial_w.htm" label="Media Key"></topic>
+                       <topic href="html/web/tizen/multimedia/sound_tutorial_w.htm" label="Sound"></topic>                     
+               </topic>
+               <topic href="html/web/tizen/system/system_tutorials_w.htm" label="System">                      
+                       <topic href="html/web/tizen/system/ham_tutorial_w.htm" label="Human Activity Monitor"></topic>
+                       <topic href="html/web/tizen/system/power_tutorial_w.htm" label="Power"></topic>
+                       <topic href="html/web/tizen/system/sensor_tutorial_w.htm" label="Sensor"></topic>       
+                       <topic href="html/web/tizen/system/system_info_tutorial_w.htm" label="System Information">                                      
+                               <topic href="html/web/tizen/system/task_systeminfo_w.htm" label="Task: System Information"></topic>                     
+                       </topic>
+                       <topic href="html/web/tizen/system/system_setting_tutorial_w.htm" label="System Setting"></topic>
+                       <topic href="html/web/tizen/system/time_tutorial_w.htm" label="Time"></topic>
+                       <topic href="html/web/tizen/system/fm_radio_tutorial_w.htm" label="FM Radio"></topic>                   
+                       <topic href="html/web/tizen/system/web_setting_tutorial_w.htm" label="Web Setting"></topic>
+               </topic>
+               <topic href="html/web/tizen/ui/ui_tutorials_w.htm" label="User Interface">                      
+                       <topic href="html/web/tizen/ui/badge_tutorial_w.htm" label="Badge"></topic>
+                       <topic href="html/web/tizen/ui/noti_tutorial_w.htm" label="Notification"></topic>                       
+               </topic>        
+               <topic href="html/web/tizen/communication/comm_tutorials_w.htm" label="Communication">                  
+                       <topic href="html/web/tizen/communication/bluetooth_tutorial_w.htm" label="Bluetooth">                                  
+                               <topic href="html/web/tizen/communication/task_bluetoothchat_w.htm" label="Task: Bluetooth Chat"></topic>                                       
+                       </topic>
+                       <topic href="html/web/tizen/communication/messaging_tutorial_w.htm" label="Messaging">                                  
+                               <topic href="html/web/tizen/communication/task_chatter_w.htm" label="Task: Chatter"></topic>                                    
+                       </topic>        
+                       <topic href="html/web/tizen/communication/nfc_tutorial_w.htm" label="NFC">                                      
+                               <topic href="html/web/tizen/communication/task_contactsexchanger_w.htm" label="Task: Contacts Exchanger"></topic>                                       
+                       </topic>
+                       <topic href="html/web/tizen/communication/push_tutorial_w.htm" label="Push"></topic>
+                       <topic href="html/web/tizen/communication/secure_element_tutorial_w.htm" label="Secure Element"></topic>                
+               </topic>        
+               <topic href="html/web/tizen/social/social_tutorials_w.htm" label="Social">                      
+                       <topic href="html/web/tizen/social/account_tutorial_w.htm" label="Account"></topic>
+                       <topic href="html/web/tizen/social/bookmark_tutorial_w.htm" label="Bookmark"></topic>
+                       <topic href="html/web/tizen/social/calendar_tutorial_w.htm" label="Calendar">                                   
+                               <topic href="html/web/tizen/social/task_eventmanager_w.htm" label="Task: Event Manager"></topic>                        
+                       </topic>                                
+                       <topic href="html/web/tizen/social/call_history_tutorial_w.htm" label="Call History">                                   
+                               <topic href="html/web/tizen/social/task_calllog_w.htm" label="Task: Call Log"></topic>                                  
+                       </topic>
+                       <topic href="html/web/tizen/social/contact_tutorial_w.htm" label="Contact"></topic>
+                       <topic href="html/web/tizen/social/data_sync_tutorial_w.htm" label="Data Synchronization"></topic>                      
+               </topic>                
+               <topic href="html/web/tizen/dynamic/dynamic_tutorial_w.htm" label="Dynamic Box"></topic>
+               <topic href="html/web/tizen/uifw/uifw_tutorial_w.htm" label="Web UIFW"></topic> 
+               <topic href="html/web/tizen/service/service_tutorial_w.htm" label="Service Application"></topic>                
+       </topic>
+       <topic href="html/web/w3c/tutorials_w3c_w.htm" label="W3C/HTML5/Supplementary Features">        
+               <topic href="html/web/w3c/dom/dom_tutorials_w.htm" label="DOM, Forms and Styles">                       
+                       <topic href="html/web/w3c/dom/animation_tutorial_w.htm" label="CSS Animations Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/background_tutorial_w.htm" label="CSS Backgrounds and Borders Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/basic_ui_tutorial_w.htm" label="CSS Basic User Interface Module Level 3 (CSS3 UI)"></topic>
+                       <topic href="html/web/w3c/dom/color_tutorial_w.htm" label="CSS Color Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/flexible_tutorial_w.htm" label="CSS Flexible Box Layout Module"></topic>
+                       <topic href="html/web/w3c/dom/transform_tutorial_w.htm" label="CSS Transforms"></topic>
+                       <topic href="html/web/w3c/dom/transition_tutorial_w.htm" label="CSS Transitions Module Level 3"></topic>
+                       <topic href="html/web/w3c/dom/font_tutorial_w.htm" label="CSS Fonts Module Level 3"></topic> 
+                       <topic href="html/web/w3c/dom/text_module_tutorial_w.htm" label="CSS Text Module Level 3"></topic> 
+                       <topic href="html/web/w3c/dom/woff_tutorial_w.htm" label="WOFF File Format 1.0"></topic>        
+                       <topic href="html/web/w3c/dom/html5forms_tutorial_w.htm" label="HTML5 Forms"></topic>
+                       <topic href="html/web/w3c/dom/media_query_tutorial_w.htm" label="Media Queries"></topic>
+                       <topic href="html/web/w3c/dom/selector_tutorial_w.htm" label="Selectors API Level 1 and Level 2"></topic>
+                       <topic href="html/web/w3c/dom/session_history_tutorial_w.htm" label="HTML5 session history of browsing contexts"></topic>               
+                       <topic href="html/web/w3c/dom/multi_tutorial_w.htm" label="CSS Multi-column Layout Module"></topic>
+               </topic>
+               <topic href="html/web/w3c/device/device_tutorials_w.htm" label="Device">                        
+                       <topic href="html/web/w3c/device/battery_tutorial_w.htm" label="Battery Status"></topic>
+                       <topic href="html/web/w3c/device/device_orientation_tutorial_w.htm" label="DeviceOrientation Event Specification">                                      
+                               <topic href="html/web/w3c/device/task_compass_w.htm" label="Task: Compass"></topic>
+                               <topic href="html/web/w3c/device/task_sensorball_w.htm" label="Task: Sensor Ball"></topic>                                      
+                       </topic>                                
+                       <topic href="html/web/w3c/device/touch_tutorial_w.htm" label="Touch Events version 1">                                  
+                               <topic href="html/web/w3c/device/task_touch_paint_mw.htm" label="Task: Touch Paint in Mobile Applications"></topic>
+                               <topic href="html/web/w3c/device/task_touch_paint_ww.htm" label="Task: Touch Paint in Wearable Applications"></topic>   
+                       </topic>
+                       <topic href="html/web/w3c/device/vibration_tutorial_w.htm" label="Vibration"></topic>           
+                       <topic href="html/web/w3c/device/browser_state_tutorial_w.htm" label="HTML5 Browser state"></topic>     
+                       <topic href="html/web/w3c/device/screen_orientation_tutorial_w.htm" label="Screen Orientation"></topic>         
+               </topic>
+               <topic href="html/web/w3c/graphics/graphics_tutorials_w.htm" label="Graphics">                  
+                       <topic href="html/web/w3c/graphics/canvas_tutorial_w.htm" label="HTML5 Canvas">                                 
+                               <topic href="html/web/w3c/graphics/task_clockwidget_w.htm" label="Task: Clock Widget"></topic>                          
+                       </topic>
+                       <topic href="html/web/w3c/graphics/svg_tutorial_w.htm" label="HTML5 SVG"></topic>                       
+               </topic>
+               <topic href="html/web/w3c/media/media_tutorials_w.htm" label="Media">                   
+                       <topic href="html/web/w3c/media/getusermedia_tutorial_w.htm" label="getUserMedia">                                      
+                               <topic href="html/web/w3c/media/task_selfcamera_w.htm" label="Task: Self Camera"></topic>                                       
+                       </topic>
+                       <topic href="html/web/w3c/media/video_audio_tutorial_w.htm" label="HTML5 video and audio element">                              
+                                       <topic href="html/web/w3c/media/task_piano_w.htm" label="Task: Piano"></topic>                                  
+                       </topic>
+                       <topic href="html/web/w3c/media/media_capture_tutorial_w.htm" label="HTML Media Capture"></topic>       
+                       <topic href="html/web/w3c/media/webaudio_tutorial_w.htm" label="Web Audio"></topic>                     
+               </topic>                
+               <topic href="html/web/w3c/communication/comm_tutorials_w.htm" label="Communication">                    
+                       <topic href="html/web/w3c/communication/web_messaging_tutorial_w.htm" label="HTML5 Web Messaging"></topic>
+                       <topic href="html/web/w3c/communication/websocket_tutorial_w.htm" label="WebSocket"></topic>
+                       <topic href="html/web/w3c/communication/xmlhttprequest_tutorial_w.htm" label="XMLHttpRequest Level 1 and 2"></topic>    
+                       <topic href="html/web/w3c/communication/server_sent_tutorial_w.htm" label="Server-Sent Events"></topic>
+               </topic>
+               <topic href="html/web/w3c/storage/storage_tutorials_w.htm" label="Storage">
+                       <topic href="html/web/w3c/storage/file_tutorial_w.htm" label="File"     ></topic>
+                       <topic href="html/web/w3c/storage/indexdb_tutorial_w.htm" label="Indexed Database"></topic>
+                       <topic href="html/web/w3c/storage/webstorage_tutorial_w.htm" label="Web Storage"></topic>       
+                       <topic href="html/web/w3c/storage/appcache_tutorial_w.htm" label="HTML5 Application caches"></topic>    
+                       <topic href="html/web/w3c/storage/websql_tutorial_w.htm" label="Web SQL Database"></topic>                      
+               </topic>
+               <topic href="html/web/w3c/security/security_tutorials_w.htm" label="Security">                  
+                       <topic href="html/web/w3c/security/cors_tutorial_w.htm" label="Cross-Origin Resource Sharing"></topic>
+                       <topic href="html/web/w3c/security/iframe_tutorial_w.htm" label="HTML5 iframe element"></topic>                 
+               </topic>                        
+               <topic href="html/web/w3c/perf_opt/performance_tutorials_w.htm" label="Performance and Optimization">                   
+                       <topic href="html/web/w3c/perf_opt/page_tutorial_w.htm" label="Page Visibility"></topic>
+                       <topic href="html/web/w3c/perf_opt/timing_control_tutorial_w.htm" label="Timing control for script-based animations"></topic>
+                       <topic href="html/web/w3c/perf_opt/web_workers_tutorial_w.htm" label="Web Workers"></topic>                     
+               </topic>        
+               <topic href="html/web/w3c/location/location_tutorials_w.htm" label="Location">                  
+                       <topic href="html/web/w3c/location/geolocation_tutorial_w.htm" label="Geolocation API Specification"></topic>   
+               </topic>
+               <topic href="html/web/w3c/ui/ui_tutorials_w.htm" label="UI">                    
+                       <topic href="html/web/w3c/ui/clipboard_tutorial_w.htm" label="Clipboard API and events"></topic>
+                       <topic href="html/web/w3c/ui/drag_drop_tutorial_w.htm" label="HTML5 Drag and drop"></topic>                     
+               </topic>                
+               <topic href="html/web/w3c/useful/useful_tutorials_w.htm" label="Useful Practices for W3C/HTML5 Features">                       
+                       <topic href="html/web/w3c/useful/html_priority_tutorial_w.htm" label="HTML Priorities"></topic>                         
+               </topic>
+               <topic href="html/web/w3c/supplement/supplement_tutorials_w.htm" label="Supplementary Features">                        
+                       <topic href="html/web/w3c/supplement/typedarray_tutorial_w.htm" label="Typed Array - Khronos"></topic>
+                       <topic href="html/web/w3c/supplement/webgl_tutorial_w.htm" label="WebGL - Khronos"></topic>     
+                       <topic href="html/web/w3c/supplement/fullscreen_tutorial_w.htm" label="FullScreen API - Mozilla"></topic>
+                       <topic href="html/web/w3c/supplement/camera_tutorial_w.htm" label="Camera API (Tizen Extension)">
+                               <topic href="html/web/w3c/supplement/task_camera_w.htm" label="Task: Camera"></topic>
+                       </topic>                
+               </topic>        
+       </topic>
+</topic>                       
+
+<topic href="html/native/tutorials_n.htm" label="Native Application">
+       <topic href="html/native/app_framework/app_framework_tutorials_n.htm" label="Application Framework">
+               <topic href="html/native/app_framework/application_tutorial_n.htm" label="Application"></topic>
+               <topic href="html/native/app_framework/app_manager_tutorial_n.htm" label="Application Manager"></topic>
+               <topic href="html/native/app_framework/badge_tutorial_n.htm" label="Badge"></topic>
+               <topic href="html/native/app_framework/bundle_tutorial_n.htm" label="Bundle"></topic>
+               <topic href="html/native/app_framework/data_control_tutorial_n.htm" label="Data Control"></topic>
+               <topic href="html/native/app_framework/message_port_tutorial_n.htm" label="Message Port"></topic>
+               <topic href="html/native/app_framework/notification_tutorial_n.htm" label="Notification"></topic>
+               <topic href="html/native/app_framework/package_tutorial_n.htm" label="Package Manager"></topic>
+               <topic href="html/native/app_framework/service_app_tutorial_n.htm" label="Service Application"></topic>
+               <topic href="html/native/app_framework/shortcut_tutorial_n.htm" label="Shortcut"></topic>
+       </topic>
+       <topic href="html/native/base/base_tutorials_n.htm" label="Base">
+               <topic href="html/native/base/sqlite_tutorial_n.htm" label="Sqlite"></topic>
+               <topic href="html/native/base/i18n_tutorial_n.htm" label="i18n"></topic>
+       </topic>
+       <topic href="html/native/content/content_tutorials_n.htm" label="Content">
+               <topic href="html/native/content/download_tutorial_n.htm" label="Download"></topic>
+               <topic href="html/native/content/media_content_tutorial_n.htm" label="Media Content"></topic>
+               <topic href="html/native/content/mime_type_tutorial_n.htm" label="MIME Type"></topic>
+       </topic>
+       <topic href="html/native/context/context_tutorials_n.htm" label="Context">
+               <topic href="html/native/context/activity_tutorial_n.htm" label="Activity Recognition"></topic>
+               <topic href="html/native/context/gesture_tutorial_n.htm" label="Gesture Recognition"></topic>
+       </topic>
+       <topic href="html/native/graphics/graphics_tutorials_n.htm" label="Graphics">
+               <topic href="html/native/graphics/opengl_tutorial_n.htm" label="OpenGL ES"></topic>
+               <topic href="html/native/graphics/tbm_tutorial_n.htm" label="TBM Surface"></topic>
+               <topic href="html/native/graphics/cairo_tutorial_n.htm" label="Cairo Integration"></topic>
+               <topic href="html/native/graphics/widget_tutorial_n.htm" label="Graphic Widget"></topic>
+       </topic>
+       <topic href="html/native/location/location_tutorials_n.htm" label="Location"></topic>
+       <topic href="html/native/messaging/messaging_tutorials_n.htm" label="Messaging">
+               <topic href="html/native/messaging/sms_mms_tutorial_n.htm" label="Messages"></topic>
+               <topic href="html/native/messaging/email_tutorial_n.htm" label="Email"></topic>
+               <topic href="html/native/messaging/push_tutorial_n.htm" label="Push"></topic>
+       </topic>
+       <topic href="html/native/multimedia/multimedia_tutorials_n.htm" label="Multimedia">
+               <topic href="html/native/multimedia/audio_io_tutorial_n.htm" label="Audio I/O"></topic>
+               <topic href="html/native/multimedia/camera_tutorial_n.htm" label="Camera"></topic>
+               <topic href="html/native/multimedia/image_util_tutorial_n.htm" label="Image Util"></topic>
+               <topic href="html/native/multimedia/media_codec_tutorial_n.htm" label="Media Codec"></topic>
+               <topic href="html/native/multimedia/media_tools_tutorial_n.htm" label="Media Tool"></topic>
+               <topic href="html/native/multimedia/metadata_extractor_tutorial_n.htm" label="Metadata Extractor"></topic>
+               <topic href="html/native/multimedia/player_tutorial_n.htm" label="Player"></topic>
+               <topic href="html/native/multimedia/radio_tutorial_n.htm" label="Radio"></topic>
+               <topic href="html/native/multimedia/recorder_tutorial_n.htm" label="Recorder"></topic>
+               <topic href="html/native/multimedia/tone_player_tutorial_n.htm" label="Tone Player"></topic>
+               <topic href="html/native/multimedia/video_util_tutorial_n.htm" label="Video Util"></topic>
+               <topic href="html/native/multimedia/wav_player_tutorial_n.htm" label="WAV Player"></topic>
+               <topic href="html/native/multimedia/sound_manager_tutorial_n.htm" label="Sound Manager"></topic>
+       </topic>
+       <topic href="html/native/network/network_tutorials_n.htm" label="Network">
+               <topic href="html/native/network/connection_tutorial_n.htm" label="Connection"></topic>
+               <topic href="html/native/network/bluetooth_tutorial_n.htm" label="Bluetooth"></topic>
+               <topic href="html/native/network/nfc_tutorial_n.htm" label="NFC"></topic>       
+               <topic href="html/native/network/wifi_tutorial_n.htm" label="Wi-Fi"></topic>
+               <topic href="html/native/network/wifi_direct_tutorial_n.htm" label="Wi-Fi Direct"></topic>      
+       </topic>
+       <topic href="html/native/security/security_tutorials_n.htm" label="Security">
+               <topic href="html/native/security/key_tutorial_n.htm" label="Key Manager"></topic>
+               <topic href="html/native/security/privilege_tutorial_n.htm" label="Privilege Info"></topic>
+       </topic>
+       <topic href="html/native/social/social_tutorials_n.htm" label="Social">
+               <topic href="html/native/social/account_tutorial_n.htm" label="Account Manager"></topic>
+               <topic href="html/native/social/calendar_tutorial_n.htm" label="Calendar"></topic>
+               <topic href="html/native/social/contact_tutorial_n.htm" label="Contacts"></topic>
+       </topic>
+       <topic href="html/native/system/system_tutorials_n.htm" label="System">
+               <topic href="html/native/system/device_tutorial_n.htm" label="Device"></topic>
+               <topic href="html/native/system/dlog_tutorial_n.htm" label="dlog"></topic>
+               <topic href="html/native/system/media_key_tutorial_n.htm" label="Media key"></topic>
+               <topic href="html/native/system/runtime_tutorial_n.htm" label="Runtime information"></topic>
+               <topic href="html/native/system/sensor_tutorial_n.htm" label="Sensor"></topic>
+               <topic href="html/native/system/sysinfo_tutorial_n.htm" label="System Information"></topic>
+               <topic href="html/native/system/system_setting_tutorial_n.htm" label="System Settings"></topic>
+               <topic href="html/native/system/storage_tutorial_n.htm" label="Storage"></topic>
+       </topic>
+       <topic href="html/native/telephony/telephony_tutorials_n.htm" label="Telephony">
+       </topic>
+       <topic href="html/native/ui/ui_tutorials_n.htm" label="UI">
+               <topic href="html/native/ui/efl_tutorial_n.htm" label="EFL"></topic>
+               <topic href="html/native/ui/evas_tutorial_n.htm" label="Evas"></topic>          
+               <topic href="html/native/ui/events_effects_tutorials_n.htm" label="Event and Effect">
+                       <topic href="html/native/ui/animation_event_types_tutorials_n.htm" label="Animation and Effect Types">
+                               <topic href="html/native/ui/ecore_effects_tutorial_n.htm" label="Ecore Animator"></topic>
+                               <topic href="html/native/ui/edje_effects_tutorial_n.htm" label="Edje Animation"></topic>
+                               <topic href="html/native/ui/elm_transit_tutorial_n.htm" label="Elementary Animations">
+                                       <topic href="html/native/ui/transit_effect_tutorial_n.htm" label="Transit"></topic>
+                               </topic>
+                       </topic>
+                       <topic href="html/native/ui/gesture_detector_tutorial_n.htm" label="Gesture Detector"></topic>
+                       <topic href="html/native/ui/multipoint_touch_tutorial_n.htm" label="Multi-point Touch"></topic> 
+               </topic>        
+               <topic href="html/native/ui/ui_control_tutorials_n.htm" label="UI Control">
+                       <topic href="html/native/ui/basic_tutorial_n.htm" label="Basic"></topic>
+                       <topic href="html/native/ui/form_tutorial_n.htm" label="Form"></topic>
+                       <topic href="html/native/ui/naviframe_tutorial_n.htm" label="Naviframe"></topic>
+                       <topic href="html/native/ui/genlist_tutorial_n.htm" label="Genlist"></topic>
+                       <topic href="html/native/ui/menu_tutorial_n.htm" label="Menu"></topic>
+                       <topic href="html/native/ui/panes_tutorial_n.htm" label="Panes"></topic>
+                       <topic href="html/native/ui/ui_layout_tutorial_n.htm" label="UI Layout"></topic>
+               </topic>
+               <topic href="html/native/ui/efl_extension_tutorial_n.htm" label="Efl Extension"></topic>
+               <topic href="html/native/ui/font_settings_tutorial_n.htm" label="Font Setting"></topic>         
+               <topic href="html/native/ui/efl_util_tutorial_n.htm" label="EFL UTIL"></topic>
+               <topic href="html/native/ui/efl_optimization_tutorial_n.htm" label="EFL Optimization"></topic>
+       </topic>
+       <topic href="html/native/uix/uix_tutorials_n.htm" label="UIX">
+               <topic href="html/native/uix/tts_tutorial_n.htm" label="TTS"></topic>
+               <topic href="html/native/uix/stt_tutorial_n.htm" label="STT"></topic>
+       </topic>
+       <topic href="html/native/web/web_tutorials_n.htm" label="Web"></topic>
+</topic>
+</toc>
diff --git a/org.tizen.tutorials/plugin.xml b/org.tizen.tutorials/plugin.xml
new file mode 100644 (file)
index 0000000..90140e5
--- /dev/null
+++ b/org.tizen.tutorials/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+       <extension point="org.eclipse.help.toc">
+               <toc file="index.xml" primary="true" />
+       </extension>
+</plugin>
diff --git a/org.tizen.web.apireference/.project b/org.tizen.web.apireference/.project
new file mode 100644 (file)
index 0000000..375d0a7
--- /dev/null
+++ b/org.tizen.web.apireference/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+       <name>org.tizen.web.apireferences_2.3.0</name>
+       <comment></comment>
+       <projects>
+       </projects>
+       <buildSpec>
+               <buildCommand>
+                       <name>org.eclipse.pde.ManifestBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+               <buildCommand>
+                       <name>org.eclipse.pde.SchemaBuilder</name>
+                       <arguments>
+                       </arguments>
+               </buildCommand>
+       </buildSpec>
+       <natures>
+               <nature>org.eclipse.pde.PluginNature</nature>
+       </natures>
+</projectDescription>
diff --git a/org.tizen.web.apireference/META-INF/MANIFEST.MF b/org.tizen.web.apireference/META-INF/MANIFEST.MF
new file mode 100644 (file)
index 0000000..1db94b8
--- /dev/null
+++ b/org.tizen.web.apireference/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Tizen Web API References
+Bundle-SymbolicName: org.tizen.web.apireference;singleton=true
+Bundle-Version: 2.3.1
+Bundle-Vendor: The Linux Foundation
+
diff --git a/org.tizen.web.apireference/about.html b/org.tizen.web.apireference/about.html
new file mode 100644 (file)
index 0000000..a4c64b7
--- /dev/null
+++ b/org.tizen.web.apireference/about.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head> 
+  <script type="text/javascript" src="html/scripts/snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="html/css/styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>About This Content</title> 
+ </head> 
+ <body onload="prettyPrint()"> 
+ 
+  <h1><a name="Creating2" id="Creating2">About This Content</a></h1> 
+  <p>Tizen 2.3.0</p> 
+
+  <h1>License</h1> 
+   <p>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>
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/build.properties b/org.tizen.web.apireference/build.properties
new file mode 100644 (file)
index 0000000..b84ff38
--- /dev/null
+++ b/org.tizen.web.apireference/build.properties
@@ -0,0 +1,8 @@
+bin.includes = plugin.xml,\
+               META-INF/,\
+               html/,\
+               build.properties,\
+               .project,\
+                          about.html,\
+               index.xml
+
diff --git a/org.tizen.web.apireference/html/cover_page.htm b/org.tizen.web.apireference/html/cover_page.htm
new file mode 100644 (file)
index 0000000..e25ce55
--- /dev/null
+++ b/org.tizen.web.apireference/html/cover_page.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 API References</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+
+ <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+ <font size="11">API References</font></h1>
+
+
+<p>Click the application type you want:</p>
+<p><a href="web_api_reference.htm"><img alt="Web Application" src="images/w_division.png"/></a> <a href="../../org.tizen.native.mobile.apireference/index.html"><img alt="Native Application" src="images/n_division.png"/></a></p> 
+ 
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/css/snippet.css b/org.tizen.web.apireference/html/css/snippet.css
new file mode 100644 (file)
index 0000000..f880409
--- /dev/null
+++ b/org.tizen.web.apireference/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #793AFF }  /* string content */
+  .kwd { color: #7F0055 }  /* a keyword */
+  .com { color: green}  /* a comment */
+  .typ { color: #1C1C1C }  /* a type name */
+  .lit { color: black }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #1C1C1C}
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/org.tizen.web.apireference/html/css/styles.css b/org.tizen.web.apireference/html/css/styles.css
new file mode 100644 (file)
index 0000000..c4eb32b
--- /dev/null
+++ b/org.tizen.web.apireference/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";
+
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+       
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+       
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+       background: white;
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}      
+       
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }       
+       
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+       
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/* Classes for creating collapsible content */
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
+#main {width: 75%; height: 90%;}
+#container {width:100%;}
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
+body.no-toc #container #contents {right: 0;padding-right:30px;}
+body.no-toc #navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+       .devicespecs-util ul.dutil li a:hover { color:#222; }
+       .devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+
+       ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr     {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+       ul.devicespecifications li div.devicespec-tit span a.bt-arr em  {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+       ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+       
+.top {text-align: right;}
+.toc, ul.toc{
+       margin: 10px 0px 0px 0px;
+       padding-left: 13px;
+       list-style: disc;
+       font-size: 9pt;
+       line-height: 115%; 
+       }
+       
+.toc-title {
+       font-size: 12pt;
+       color: #0E437D; 
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+       
+a.top {
+       display:block; 
+       float: right; 
+       position:fixed;
+       width: 28px; 
+       height:89px; 
+       bottom:50px;
+       z-index: 101;
+       right: 19%;
+       }
+
+a img {border: 0;}
+       
+/*     Footer includes space and a gray line above             */
+#footer {
+       position: fixed;
+       /* width: 100%; */
+    bottom: 0px;
+       text-align: center;
+       border-top: 1px solid #CCCCCC;
+       background-color: #FFFFFF;      
+       left: 21px;  right: 21px;
+}
+
+.footer {font-size: 8pt;}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;} 
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+    position: relative;
+}
+#profile p {
+       text-align: right;
+}
+
+div#toc_border {
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
+}
+
+#contents li {
+       padding-top: 3px;
+       margin-top: 5px;
+       /* overflow: auto; */
+}
+
+p {
+       /* overflow: auto; */
+}
+
+div.table {
+       /* overflow: auto; */
+}
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/device_api/device_api_cover.html b/org.tizen.web.apireference/html/device_api/device_api_cover.html
new file mode 100644 (file)
index 0000000..13c843e
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/device_api_cover.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Supplementaries API Reference</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <h1>Tizen Web Device API Reference</h1>
+
+ 
+<p>Click the profile you want:</p>
+<p><a href="mobile/index.html"><img alt="Mobile Web" src="../images/mw_division.png"/></a> <a href="wearable/index.html"><img alt="Wearable Web" src="../images/ww_division.png"/></a></p>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/index.html b/org.tizen.web.apireference/html/device_api/mobile/index.html
new file mode 100644 (file)
index 0000000..1b1ed81
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/index.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <link media="screen" href="./tizen/tizen.css" type="text/css" rel="stylesheet">
+        <title>Tizen Web Device API Reference</title>
+        <style>
+          table.api-list { width: 90%; margin-left: 2%; }
+          table.api-list tr > td:nth-child(1) { width: 13%; }
+          table.api-list tr > td:nth-child(3) { width: 3em; padding-left: 1em; }
+          table.api-list tr > td:nth-child(4) { width: 5em; }
+          table.api-list tr > td:nth-child(5) { width: 9em; text-align: center; }
+          table.api-list tr > td:nth-child(6) { width: 5em; }
+          table.api-list tr > td:nth-child(7) { width: 9em; text-align: center; }
+          table.api-list tr > td:nth-child(4) .optional { font-style: normal; }
+          table.api-list span.emulated, table.api-list span.partially-emulated { font-weight: bold }
+          /*.emulator-partial { background-color: #ffd0d0; }*/
+          table.api-list .partial-support { font-size: 75%; }
+          table.api-list span.mandatory::after { content: "*"; font-weight: normal; }
+        </style>
+    </head>
+    <body id="content">
+        <div id="title" class="api">
+
+            <h1>Tizen Mobile Web Device API Reference</h1>
+                    <div class="brief">
+                            <p>The Tizen Web Device API, based on JavaScript, provides you advanced access to the device&#39;s platform capabilities.</p>
+                            <p>You can develop rich Web applications using the Tizen Web Device APIs. You can, for example, control the application life-cycle, manage your schedules, exchange data, or make payments using NFC.</p>
+                            <p>The APIs listed in this category are created by the Tizen platform to expose device capabilities to Web Applications.</p>
+
+            <h4 id="Tizen">Tizen Common</h4>
+            <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on <br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/tizen.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Tizen </a></td>
+                <td>The base object for accessing the Tizen Web Device API.</td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><h4 id="Application">Application</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/alarm.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Alarm</a></td>
+                <td>This API provides functionality for setting and unsetting alarms.</td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/application.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Application</a></td>
+                <td>This API provides information about running and installed applications and controls them.</td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/datacontrol.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Data Control</a></td>
+                <td>This API provides interfaces and methods for accessing specific data exported by other applications. </td>
+                <td>2.1</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/package.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Package</a></td>
+                <td>This API provides information install/uninstall package and get information about installed packages.</td>
+                <td>2.1</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><h4 id="Communication">Communication</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td>
+                <a href="tizen/bluetooth.html" data-origin="tizen" data-domain="networking" data-category="core" data-status="D" data-version="">
+                        Bluetooth</a></td>
+                <td>This API enables control over Bluetooth.</td>
+                <td>1.0</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr><tr><td>
+                <a href="tizen/messaging.html" data-origin="tizen" data-domain="messaging" data-category="core" data-status="D" data-version="">
+                        Messaging</a></td>
+                <td>This API allows SMS, MMS, and Email message sending and receiving.</td>
+                <td>1.0</td>
+                <td>Optional</td>
+                <td>Yes<div class="partial-support">Only e-mail</div></td>
+
+                </tr><tr><td>
+                <a href="tizen/networkbearerselection.html" data-origin="tizen" data-domain="messaging" data-category="core" data-status="D" data-version="">
+                        Network Bearer Selection</a></td>
+                <td>This API provides interfaces and methods for users to set network bearer for a specific IP address.</td>
+                <td>2.1</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr><tr><td>
+                <a href="tizen/nfc.html" data-origin="tizen" data-domain="networking" data-category="core" data-status="D" data-version="">
+                        NFC</a></td>
+                <td>This API allows access to NFC device(s).</td>
+                <td>1.0</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr><tr><td>
+                <a href="tizen/push.html" data-origin="tizen" data-domain="push" data-category="core" data-status="D" data-version="">
+                        Push</a></td>
+                <td>This API provides the functionality for receiving push notifications. </td>
+                <td>2.1</td>
+                <td>Optional</td>
+                <td>Yes</td>
+
+                </tr><tr><td>
+                <a href="tizen/se.html" data-origin="tizen" data-domain="push" data-category="core" data-status="D" data-version="">
+                        Secure Element</a></td>
+                <td>This API provides interfaces and methods for access to Secure Elements. </td>
+                <td>2.1</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr></tbody></table><h4 id="Contents">Content</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/content.html" data-origin="tizen" data-domain="content" data-category="core" data-status="D" data-version="">
+                        Content</a></td>
+                <td>This API provides functionality to discover multimedia content (such as images, videos or music).</td>
+                <td>2.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/download.html" data-origin="tizen" data-domain="content" data-category="core" data-status="D" data-version="">
+                        Download</a></td>
+                <td>This API provides interfaces and methods for downloading remote objects by HTTP request.</td>
+                <td>2.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/exif.html" data-origin="tizen" data-domain="content" data-category="core" data-status="D" data-version="">
+                        Exif</a></td>
+                <td>This API provides interfaces and methods for manipulating Exif data from JPEG file.</td>
+                <td>2.3</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><h4 id="I/O">Input/Output</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td>
+                <a href="tizen/archive.html" data-origin="tizen" data-domain="filesystem" data-category="core" data-status="D" data-version="">
+                        Archive</a></td>
+                <td>This API provides interfaces and methods to create an archive file as well as various other kinds of manipulation(e.g. extract files, add a file to an archive file).</td>
+                <td>2.3</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/filesystem.html" data-origin="tizen" data-domain="filesystem" data-category="core" data-status="D" data-version="">
+                        Filesystem</a></td>
+                <td>This API provides access to the file system of a device. This API might be obsolete in the future when W3C File APIs are extended to access system-sensitive files by Web applications. </td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/messageport.html" data-origin="tizen" data-domain="filesystem" data-category="core" data-status="D" data-version="">
+                        Message Port</a></td>
+                <td>This API provides the functionality for communication with other applications. </td>
+                <td>2.1</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><h4 id="Multimedia">Multimedia</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/mediakey.html" data-origin="tizen" data-domain="media" data-category="core" data-status="S" data-version="">
+                        Media Key</a></td>
+                <td>This API provides a way to get notified when a media key has been pressed or released.</td>
+                <td>2.3</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr><tr><td><a href="tizen/sound.html" data-origin="tizen" data-domain="media" data-category="core" data-status="S" data-version="">
+                        Sound</a></td>
+                <td>This API provides a way to control sound volume level.</td>
+                <td>2.3</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><h4 id="Social">Social</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/account.html" data-origin="tizen" data-domain="pim" data-category="core" data-status="S" data-version="">
+                        Account</a></td>
+                <td>This API provides interfaces and methods for managing accounts(e.g. create an account, change the account information). </td>
+                <td>2.3</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/bookmark.html" data-origin="tizen" data-domain="pim" data-category="core" data-status="S" data-version="">
+                        Bookmark</a></td>
+                <td>This API provides interfaces and methods for access to Bookmarks. </td>
+                <td>2.1</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/calendar.html" data-origin="tizen" data-domain="pim" data-category="core" data-status="S" data-version="">
+                        Calendar</a></td>
+                <td>This API enables the management of calendar information. </td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/callhistory.html" data-origin="tizen" data-domain="pim" data-category="core" data-status="S" data-version="">
+                        Call History</a></td>
+                <td>This API allows accessing call history for cellular and VoIP calls. </td>
+                <td>2.0</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr><tr><td><a href="tizen/contact.html" data-origin="tizen" data-domain="pim" data-category="core" data-status="S" data-version="">
+                        Contact</a></td>
+                <td>This API enables the management of contact information. </td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/datasync.html" data-origin="tizen" data-domain="pim" data-category="core" data-status="S" data-version="">
+                        Data Synchronization</a></td>
+                <td>This API provides methods to synchronize device data to the server using the OMA DS 1.2 protocol. </td>
+                <td>2.1</td>
+                <td>Optional</td>
+                <td>No</td>
+
+                </tr></tbody></table><h4 id="System">System</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/fmradio.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        FM Radio</a></td>
+                <td>This API provides interfaces and methods for listening to FM radio.</td>
+                <td>2.3</td>
+                <td>Optional</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/humanactivitymonitor.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Human Activity Monitor</a></td>
+                <td>This API provides interfaces and methods for retrieving human activity data from the various sensors on the device.</td>
+                <td>2.3</td>
+                <td>Optional</td>
+                <td>Yes<div class="partial-support">Only HRM</div></td>
+
+                </tr><tr><td><a href="tizen/power.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Power</a></td>
+                <td>This API provides interfaces and methods for controlling power resources.</td>
+                <td>2.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/sensor.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Sensor</a></td>
+                <td>This API provides interfaces and methods for getting sensor data from the various sensors on the device.</td>
+                <td>2.3</td>
+                <td>Optional</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/systeminfo.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        System Information</a></td>
+                <td>This API provides information about the device's display, network, storage and other capabilities.</td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/systemsetting.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        System Setting</a></td>
+                <td>This API provides system setting functionality.</td>
+                <td>2.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/time.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Time</a></td>
+                <td>This API exposes information about date, time and time zones.</td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/websetting.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Web Setting</a></td>
+                <td>This API manages the setting states of the web view in web applications.</td>
+                <td>2.2</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><h4 id="User Interface">User Interface</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Mobile</th><th>Supported on<br>Mobile Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/badge.html" data-origin="tizen" data-domain="ui" data-category="core" data-status="S" data-version="">
+                        Badge</a></td>
+                <td>This API provides a way to display the count of notifications(badge) on home screen.</td>
+                <td>2.3</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr><tr><td><a href="tizen/notification.html" data-origin="tizen" data-domain="ui" data-category="core" data-status="D" data-version="">
+                        Notification</a></td>
+                <td>This API provides a way to notify the user of events that happen in the application.</td>
+                <td>2.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+
+                </tr></tbody></table><div id="footer">
+            <div class="copyright" align="center">
+ 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>.
+            </div>
+
+        <!--start-->
+            <script type="text/javascript">
+            var _gaq = _gaq || [];
+           _gaq.push(['_setAccount', 'UA-25976949-1']);
+               _gaq.push(['_trackPageview']);
+                         (function() {
+                                       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                                       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--></div>
+
+    </div>
+    </div>
+  </body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/account.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/account.html
new file mode 100644 (file)
index 0000000..5079ff7
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/account.html
@@ -0,0 +1,1563 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Account API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Account">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Account API</h1></div>
+<div class="brief">
+  The Account API provides functionality for using existing configured
+online accounts and providers, and for creating accounts of known types.
+        </div>
+<div class="description">
+        <p>
+The basic concepts are:
+        </p>
+        <ul>
+          <li>
+<b>Provider</b> is an online service provider entity, such as
+Google, Vodafone or Facebook. A service provider is identified by its applicationId.
+Account provider will be registered while the application is installed.
+The information will be used in the "Add account" screen in Settings.          </li>
+          <li>
+<b>Account</b> collects all the data (user name, credential, 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,
+account1@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.          </li>
+        </ul>
+        <p>
+To use <em>add(), remove(), and update()</em> methods of AccountManager can be invoked only
+by account provider application. A web application is an account provider when its <em>config.xml </em>contains <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">Account provider section</a>. For example:<br>&lt;tizen:account multiple-account-support="true"&gt;<br>      &lt;tizen:icon section="Account"&gt;icon.png&lt;/tizen:icon&gt;<br>      &lt;tizen:icon section="AccountSmall"&gt;icon.png&lt;/tizen:icon&gt;<br>      &lt;tizen:display-name xml:lang="en-gb"&gt;Test&lt;/tizen:display-name&gt;<br>      &lt;tizen:capability&gt;http://tizen.org/account/capability/contact&lt;/tizen:capability&gt;<br>&lt;/tizen:account&gt;
+        </p>
+        <p>
+For more information about how to use Account API, see <a href="../../../../../org.tizen.guides/html/web/tizen/social/account_w.htm">Account Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#AccountId">AccountId</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#AccountManagerObject">AccountManagerObject</a>
+</li>
+<li>2.2. <a href="#AccountProvider">AccountProvider</a>
+</li>
+<li>2.3. <a href="#AccountInit">AccountInit</a>
+</li>
+<li>2.4. <a href="#Account">Account</a>
+</li>
+<li>2.5. <a href="#AccountManager">AccountManager</a>
+</li>
+<li>2.6. <a href="#AccountExtendedData">AccountExtendedData</a>
+</li>
+<li>2.7. <a href="#AccountArraySuccessCallback">AccountArraySuccessCallback</a>
+</li>
+<li>2.8. <a href="#AccountExtendedDataArraySuccessCallback">AccountExtendedDataArraySuccessCallback</a>
+</li>
+<li>2.9. <a href="#AccountProviderArraySuccessCallback">AccountProviderArraySuccessCallback</a>
+</li>
+<li>2.10. <a href="#AccountChangeCallback">AccountChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#AccountManagerObject">AccountManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AccountProvider">AccountProvider</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AccountInit">AccountInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Account">Account</a></td>
+<td>void <a href="#Account::setExtendedData">setExtendedData</a> (DOMString key, DOMString value)<br>
+    DOMString <a href="#Account::getExtendedData">getExtendedData</a> (DOMString key)<br>
+    void <a href="#Account::getExtendedData-2">getExtendedData</a> (<a href="#AccountExtendedDataArraySuccessCallback">AccountExtendedDataArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#AccountManager">AccountManager</a></td>
+<td>void <a href="#AccountManager::add">add</a> (<a href="#Account">Account</a> account)<br>
+    void <a href="#AccountManager::remove">remove</a> (<a href="#AccountId">AccountId</a> accountId)<br>
+    void <a href="#AccountManager::update">update</a> (<a href="#Account">Account</a> account)<br>
+    <a href="#Account">Account</a>? <a href="#AccountManager::getAccount">getAccount</a> (<a href="#AccountId">AccountId</a> accountId)<br>
+    void <a href="#AccountManager::getAccounts">getAccounts</a> (<a href="#AccountArraySuccessCallback">AccountArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional DOMString? applicationId)<br>
+    <a href="#AccountProvider">AccountProvider</a>? <a href="#AccountManager::getProvider">getProvider</a> (<a href="application.html#ApplicationId">ApplicationId</a> applicationId)<br>
+    void <a href="#AccountManager::getProviders">getProviders</a> (<a href="#AccountProviderArraySuccessCallback">AccountProviderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional DOMString? capability)<br>
+    long <a href="#AccountManager::addAccountListener">addAccountListener</a> (<a href="#AccountChangeCallback">AccountChangeCallback</a> callback)<br>
+    void <a href="#AccountManager::removeAccountListener">removeAccountListener</a> (long accountListenerId)</td>
+</tr>
+<tr>
+<td><a href="#AccountExtendedData">AccountExtendedData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AccountArraySuccessCallback">AccountArraySuccessCallback</a></td>
+<td>void <a href="#AccountArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Account">Account</a>[] accounts)</td>
+</tr>
+<tr>
+<td><a href="#AccountExtendedDataArraySuccessCallback">AccountExtendedDataArraySuccessCallback</a></td>
+<td>void <a href="#AccountExtendedDataArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#AccountExtendedData">AccountExtendedData</a>[] extendedDataArray)</td>
+</tr>
+<tr>
+<td><a href="#AccountProviderArraySuccessCallback">AccountProviderArraySuccessCallback</a></td>
+<td>void <a href="#AccountProviderArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#AccountProvider">AccountProvider</a>[] providers)</td>
+</tr>
+<tr>
+<td><a href="#AccountChangeCallback">AccountChangeCallback</a></td>
+<td>void <a href="#AccountChangeCallback::onadded">onadded</a> (<a href="#Account">Account</a> account)<br>
+    void <a href="#AccountChangeCallback::onremoved">onremoved</a> (<a href="#AccountId">AccountId</a> accountId)<br>
+    void <a href="#AccountChangeCallback::onupdated">onupdated</a> (<a href="#Account">Account</a> account)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="AccountId">
+<a class="backward-compatibility-anchor" name="::Account::AccountId"></a><h3>1.1. AccountId</h3>
+<div class="brief">
+ Account identifier.
+          </div>
+<pre class="webidl prettyprint">    typedef unsigned long AccountId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="AccountManagerObject">
+<a class="backward-compatibility-anchor" name="::Account::AccountManagerObject"></a><h3>2.1. AccountManagerObject</h3>
+<div class="brief">
+ The AccountManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AccountManagerObject {
+        readonly attribute <a href="#AccountManager">AccountManager</a> account;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#AccountManagerObject">AccountManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The tizen.account object allows accessing the functionality of the Account API.
+There is one account manager in one web runtime.
+The Accounts back-end may support multiple account managers.
+          </p>
+         </div>
+</div>
+<div class="interface" id="AccountProvider">
+<a class="backward-compatibility-anchor" name="::Account::AccountProvider"></a><h3>2.2. AccountProvider</h3>
+<div class="brief">
+ The AccountProvider interface represents a service provider, such as Google, Yahoo or Vodafone.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AccountProvider {
+        readonly attribute <a href="application.html#ApplicationId">ApplicationId</a> applicationId;
+
+        readonly attribute DOMString displayName;
+
+        readonly attribute DOMString iconUri;
+
+        readonly attribute DOMString smallIconUri;
+
+        readonly attribute DOMString[] capabilities;
+
+        readonly attribute boolean isMultipleAccountSupported;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AccountProvider::applicationId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">applicationId</span></span><div class="brief">
+ Identifier of the account provider application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="AccountProvider::displayName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">displayName</span></span><div class="brief">
+ Logical (translatable) display name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="AccountProvider::iconUri">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iconUri</span></span><div class="brief">
+ Path to the icon representing the account provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="AccountProvider::smallIconUri">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">smallIconUri</span></span><div class="brief">
+ Path to the small icon representing the account provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="AccountProvider::capabilities">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">capabilities</span></span><div class="brief">
+ Capabilities of the account provider defined in IRI format.
+            </div>
+<div class="description">
+            <p>
+The following predefined capabilities can be used.
+            </p>
+            <ul>
+              <li>
+http://tizen.org/account/capability/contact - Used when the account is related to contacts              </li>
+              <li>
+http://tizen.org/account/capability/calendar - Used when the account is related to calendar              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="AccountProvider::isMultipleAccountSupported">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isMultipleAccountSupported</span></span><div class="brief">
+ Boolean value that indicates whether multiple accounts are supported.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="AccountInit">
+<a class="backward-compatibility-anchor" name="::Account::AccountInit"></a><h3>2.3. AccountInit</h3>
+<div class="brief">
+ The AccountInit dictionary represents options for creating accounts.
+Attributes are not mandatory, and can be added and modified by accessing the
+properties of account after the account is created.
+          </div>
+<pre class="webidl prettyprint">    dictionary AccountInit {
+        DOMString userName;
+        DOMString iconUri;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="Account">
+<a class="backward-compatibility-anchor" name="::Account::Account"></a><h3>2.4. Account</h3>
+<div class="brief">
+ The Account interface is the interface for a single account.
+The implementation should manage authentication, storing eventual user
+credentials, presenting password dialogs, and so on.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(<a href="#AccountProvider">AccountProvider</a> provider, optional <a href="#AccountInit">AccountInit</a>? accountInitDict)]
+    interface Account {
+        readonly attribute <a href="#AccountId">AccountId</a>? id;
+
+        attribute DOMString? userName;
+
+        attribute DOMString? iconUri;
+
+        readonly attribute <a href="#AccountProvider">AccountProvider</a> provider;
+
+        void setExtendedData(DOMString key, DOMString value) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        DOMString getExtendedData(DOMString key) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getExtendedData(
+            <a href="#AccountExtendedDataArraySuccessCallback">AccountExtendedDataArraySuccessCallback</a> successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback
+        ) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The information is hidden from web applications.
+          </p>
+         </div>
+<div class="constructors">
+<h4 id="Account::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">Account(<a href="#AccountProvider">AccountProvider</a> provider, optional <a href="#AccountInit">AccountInit</a>? accountInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Account::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AccountId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Identifier for the account.
+By default, this attribute is set to null.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Account::userName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">userName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Account user name.
+By default, this attribute is set to null.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Account::iconUri">
+<span class="attrName"><span class="type">DOMString </span><span class="name">iconUri</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Name, identifier or URI of the icon.
+By default, this attribute is set to null.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Account::provider">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AccountProvider </span><span class="name">provider</span></span><div class="brief">
+ Reference to the provider.
+There is one provider for each account.
+A given provider can be referenced from many accounts.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Account::setExtendedData">
+<a class="backward-compatibility-anchor" name="::Account::Account::setExtendedData"></a><code><b><span class="methodName">setExtendedData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds the specified key and value to the extended data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setExtendedData(DOMString key, DOMString value);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the specified key already exists, the corresponding value is overwritten with the specified value.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">key</span>: 
+ Key of the extended data
+                </li>
+          <li class="param">
+<span class="name">value</span>: 
+ Value of the extended data
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var key = 'nickname';
+         var value = 'nickname of anonymous user';
+         account.setExtendedData(key, value);
+         console.log(account.getExtendedData(key)); // 'nickname of anonymous user'
+
+         account.setExtendedData(key, 'nickname updated');
+         console.log(account.getExtendedData(key)); // 'nickname updated'
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Account::getExtendedData">
+<a class="backward-compatibility-anchor" name="::Account::Account::getExtendedData"></a><code><b><span class="methodName">getExtendedData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the value for the given key from the extended data.
+Returns null if the given key is not found.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getExtendedData(DOMString key);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">key</span>: 
+ Key of the extended data
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ value Value of the extended data
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var key = 'accessToken';
+         var value = account.getExtendedData(key);
+         console.log(account.userName + "'s accessToken is " + value);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Account::getExtendedData-2">
+<a class="backward-compatibility-anchor" name="::Account::Account::getExtendedData"></a><code><b><span class="methodName">getExtendedData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the extended data for the account as an array, asynchronously.
+Returns an empty array if there is no extended data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getExtendedData(<a href="#AccountExtendedDataArraySuccessCallback">AccountExtendedDataArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         account.getExtendedData(function(extendedData) {
+             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);
+         });
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AccountManager">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager"></a><h3>2.5. AccountManager</h3>
+<div class="brief">
+ The AccountManager interface provides configuration functionality for
+providers and accounts.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AccountManager {
+        void add(<a href="#Account">Account</a> account) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#AccountId">AccountId</a> accountId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void update(<a href="#Account">Account</a> account) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Account">Account</a>? getAccount(<a href="#AccountId">AccountId</a> accountId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void getAccounts(
+            <a href="#AccountArraySuccessCallback">AccountArraySuccessCallback</a> successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+            optional DOMString? applicationId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#AccountProvider">AccountProvider</a>? getProvider(<a href="application.html#ApplicationId">ApplicationId</a> applicationId)
+            raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getProviders(
+            <a href="#AccountProviderArraySuccessCallback">AccountProviderArraySuccessCallback</a> successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+            optional DOMString? capability) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long addAccountListener(<a href="#AccountChangeCallback">AccountChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAccountListener(long accountListenerId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AccountManager::add">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an account to the account database.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Account">Account</a> account);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the account is added successfully, an accountId and provider are newly assigned when the function returns.
+            </p>
+            <p>
+This method can be used only by an account provider application.<br>If the application is registered as provider, it will be launched to authenticate the account.
+You should implement the appcontrol for the account provider.<br>For more details, see
+<a href="https://developer.tizen.org/dev-guide/2.2.0/org.tizen.native.appprogramming/html/guide/social/register_acc_provider.htm">Account Provider</a>            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">account</span>: 
+ Account object to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ var provider = tizen.account.getProvider(appId);
+ var account = new tizen.Account(provider, {userName: 'admin', iconUri: 'path/to/icon.jpg'});
+
+ tizen.account.add(account);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::remove">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes an account from the account database.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#AccountId">AccountId</a> accountId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Removes the account in the database that corresponds to the specified identifier.
+The function will throw an exception if it failed to remove the specified account.
+            </p>
+            <p>
+This method can be used by an account provider application.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">accountId</span>: 
+ identifier of the account to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         tizen.account.remove(account.id);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::update">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates an account.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#Account">Account</a> account);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method can be used only an account provider application.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">account</span>: 
+ Account object to update
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         account.userName = 'abc';
+         tizen.account.update(account);
+     })
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::getAccount">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::getAccount"></a><code><b><span class="methodName">getAccount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the Account object with the given identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Account">Account</a>? getAccount(<a href="#AccountId">AccountId</a> accountId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">accountId</span>: 
+ Account identifier
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Account object with the given identifier, or null
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var account = tizen.account.getAccount(1);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::getAccounts">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::getAccounts"></a><code><b><span class="methodName">getAccounts</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the accounts associated with the provider that has a specified applicationId, asynchronously.
+If you want to get all accounts, omit the applicationId argument.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getAccounts(<a href="#AccountArraySuccessCallback">AccountArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional DOMString? applicationId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">applicationId</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ applicationId of the provider application
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.account.getAccounts(function(accounts) {
+     // accounts is an array whose members are all registered accounts in this device.
+ }, function (e) {
+     console.log("Error : " + e.message);
+ });
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::getProvider">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::getProvider"></a><code><b><span class="methodName">getProvider</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the account provider with the given application identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#AccountProvider">AccountProvider</a>? getProvider(<a href="application.html#ApplicationId">ApplicationId</a> applicationId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+You can register your application as an account provider by writing account related information in <var>config.xml</var>.<br>For more details, see
+<a href="https://developer.tizen.org/dev-guide/2.2.0/org.tizen.native.appprogramming/html/guide/social/register_acc_provider.htm">Account Provider</a>            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">applicationId</span>: 
+ Identifier of the account provider application
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Provider object with the given applicationId, or null
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ var provider = tizen.account.getProvider(appId);
+ if (!provider) {
+     console.log('current application is not account provider.');
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::getProviders">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::getProviders"></a><code><b><span class="methodName">getProviders</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the providers with the given capabilities, asynchronously.
+If you want to get all the providers, omit the capability argument.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getProviders(<a href="#AccountProviderArraySuccessCallback">AccountProviderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional DOMString? capability);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">capability</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Predefined capability or the vendor-specific capability in IRI format
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.account.getProviders(function(providers) {
+     // providers is an array whose members are account providers
+     // which have contact capability.
+ }, function (e) {
+     console.log('Error : ' + e.message);
+ }, "http://tizen.org/account/capability/contact");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::addAccountListener">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::addAccountListener"></a><code><b><span class="methodName">addAccountListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an account listener for watching changes to accounts.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addAccountListener(<a href="#AccountChangeCallback">AccountChangeCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method that is invoked for the events about accounts such as adding or removing an account
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Identifier to clear the watch subscription for account changes
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.account.addAccountListener({
+     onadded: function(account) {
+         // a callback function which will be called when account is added.
+     },
+     onremoved: function(accountId) {
+         // a callback function which will be called when account is removed.
+     },
+     onupdated: function(account) {
+         // a callback function which will be called when account is updated.
+     }
+ });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AccountManager::removeAccountListener">
+<a class="backward-compatibility-anchor" name="::Account::AccountManager::removeAccountListener"></a><code><b><span class="methodName">removeAccountListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes the previously registered listener.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAccountListener(long accountListenerId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/account.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">accountListenerId</span>: 
+ Identifier of the listener for the account changes
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watchId = tizen.account.addAccountListener({
+     onadded: function(account) {
+         // a callback function which will be called when account is added.
+     },
+     onremoved: function(accountId) {
+         // a callback function which will be called when account is removed.
+     },
+     onupdated: function(account) {
+         // a callback function which will be called when account is updated.
+     }
+ });
+ tizen.account.removeAccountListener(watchId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AccountExtendedData">
+<a class="backward-compatibility-anchor" name="::Account::AccountExtendedData"></a><h3>2.6. AccountExtendedData</h3>
+<div class="brief">
+ The AccountExtendedData interface defines the extended data of an account.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AccountExtendedData {
+
+        readonly attribute DOMString key;
+
+        readonly attribute DOMString value;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AccountExtendedData::key">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">key</span></span><div class="brief">
+ Name (key) of the account extended data item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="AccountExtendedData::value">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">value</span></span><div class="brief">
+ Value of the account extended data item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AccountArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Account::AccountArraySuccessCallback"></a><h3>2.7. AccountArraySuccessCallback</h3>
+<div class="brief">
+ The AccountArraySuccessCallback interface provides the success method for <em>AccountManager.getAccounts</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface AccountArraySuccessCallback {
+        void onsuccess(<a href="#Account">Account</a>[] accounts);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AccountArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Account::AccountArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when information of accounts is ready.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Account">Account</a>[] accounts);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">accounts</span>: 
+ Received accounts
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AccountExtendedDataArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Account::AccountExtendedDataArraySuccessCallback"></a><h3>2.8. AccountExtendedDataArraySuccessCallback</h3>
+<div class="brief">
+ The AccountExtendedDataArraySuccessCallback provides the success method for <em>Account.getExtendedData</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface AccountExtendedDataArraySuccessCallback {
+        void onsuccess(<a href="#AccountExtendedData">AccountExtendedData</a>[] extendedDataArray);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AccountExtendedDataArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Account::AccountExtendedDataArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when information of extended data is ready.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#AccountExtendedData">AccountExtendedData</a>[] extendedDataArray);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">extendedDataArray</span>: 
+ Array of extended data
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AccountProviderArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Account::AccountProviderArraySuccessCallback"></a><h3>2.9. AccountProviderArraySuccessCallback</h3>
+<div class="brief">
+ The AccountProviderArraySuccessCallback interface provides the success method for <em>AccountManager.getProviders</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface AccountProviderArraySuccessCallback {
+        void onsuccess(<a href="#AccountProvider">AccountProvider</a>[] providers);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AccountProviderArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Account::AccountProviderArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when information of providers are ready.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#AccountProvider">AccountProvider</a>[] providers);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">providers</span>: 
+ Received providers
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AccountChangeCallback">
+<a class="backward-compatibility-anchor" name="::Account::AccountChangeCallback"></a><h3>2.10. AccountChangeCallback</h3>
+<div class="brief">
+ The AccountChangeCallback interface defines callbacks for getting notified about account changes.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface AccountChangeCallback {
+
+        void onadded(<a href="#Account">Account</a> account);
+
+        void onremoved(<a href="#AccountId">AccountId</a> accountId);
+
+        void onupdated(<a href="#Account">Account</a> account);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AccountChangeCallback::onadded">
+<a class="backward-compatibility-anchor" name="::Account::AccountChangeCallback::onadded"></a><code><b><span class="methodName">onadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an account is added.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onadded(<a href="#Account">Account</a> account);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">account</span>: 
+ Added account information
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="AccountChangeCallback::onremoved">
+<a class="backward-compatibility-anchor" name="::Account::AccountChangeCallback::onremoved"></a><code><b><span class="methodName">onremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an account is removed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onremoved(<a href="#AccountId">AccountId</a> accountId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">accountId</span>: 
+ ID of the removed account
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="AccountChangeCallback::onupdated">
+<a class="backward-compatibility-anchor" name="::Account::AccountChangeCallback::onupdated"></a><code><b><span class="methodName">onupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an account is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onupdated(<a href="#Account">Account</a> account);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">account</span>: 
+ Updated account information
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Account {
+
+    [NoInterfaceObject] interface AccountManagerObject {
+        readonly attribute <a href="#AccountManager">AccountManager</a> account;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#AccountManagerObject">AccountManagerObject</a>;
+
+    typedef unsigned long AccountId;
+
+    [NoInterfaceObject] interface AccountProvider {
+        readonly attribute <a href="application.html#ApplicationId">ApplicationId</a> applicationId;
+
+        readonly attribute DOMString displayName;
+
+        readonly attribute DOMString iconUri;
+
+        readonly attribute DOMString smallIconUri;
+
+        readonly attribute DOMString[] capabilities;
+
+        readonly attribute boolean isMultipleAccountSupported;
+    };
+
+    dictionary AccountInit {
+        DOMString userName;
+        DOMString iconUri;
+    };
+
+    [Constructor(<a href="#AccountProvider">AccountProvider</a> provider, optional <a href="#AccountInit">AccountInit</a>? accountInitDict)]
+    interface Account {
+        readonly attribute <a href="#AccountId">AccountId</a>? id;
+
+        attribute DOMString? userName;
+
+        attribute DOMString? iconUri;
+
+        readonly attribute <a href="#AccountProvider">AccountProvider</a> provider;
+
+        void setExtendedData(DOMString key, DOMString value) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        DOMString getExtendedData(DOMString key) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getExtendedData(
+            <a href="#AccountExtendedDataArraySuccessCallback">AccountExtendedDataArraySuccessCallback</a> successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback
+        ) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface AccountManager {
+        void add(<a href="#Account">Account</a> account) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#AccountId">AccountId</a> accountId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void update(<a href="#Account">Account</a> account) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Account">Account</a>? getAccount(<a href="#AccountId">AccountId</a> accountId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void getAccounts(
+            <a href="#AccountArraySuccessCallback">AccountArraySuccessCallback</a> successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+            optional DOMString? applicationId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#AccountProvider">AccountProvider</a>? getProvider(<a href="application.html#ApplicationId">ApplicationId</a> applicationId)
+            raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getProviders(
+            <a href="#AccountProviderArraySuccessCallback">AccountProviderArraySuccessCallback</a> successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+            optional DOMString? capability) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long addAccountListener(<a href="#AccountChangeCallback">AccountChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAccountListener(long accountListenerId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface AccountExtendedData {
+
+        readonly attribute DOMString key;
+
+        readonly attribute DOMString value;
+    };
+
+    [Callback, NoInterfaceObject] interface AccountArraySuccessCallback {
+        void onsuccess(<a href="#Account">Account</a>[] accounts);
+    };
+
+    [Callback, NoInterfaceObject] interface AccountExtendedDataArraySuccessCallback {
+        void onsuccess(<a href="#AccountExtendedData">AccountExtendedData</a>[] extendedDataArray);
+    };
+
+    [Callback, NoInterfaceObject] interface AccountProviderArraySuccessCallback {
+        void onsuccess(<a href="#AccountProvider">AccountProvider</a>[] providers);
+    };
+
+
+    [Callback, NoInterfaceObject] interface AccountChangeCallback {
+
+        void onadded(<a href="#Account">Account</a> account);
+
+        void onremoved(<a href="#AccountId">AccountId</a> accountId);
+
+        void onupdated(<a href="#Account">Account</a> account);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html
new file mode 100644 (file)
index 0000000..058f5db
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html
@@ -0,0 +1,858 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Alarm API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Alarm">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Alarm API</h1></div>
+<div class="brief">
+ The Alarm API provides functionality for scheduling the system alarm.
+It allows you to run other applications and have them perform operations at a specific time.
+You can schedule an alarm to go off once or to repeat at specific intervals.
+        </div>
+<div class="description">
+        <p>
+Each application has its own individual alarm storage, that is, applications cannot view or edit alarms set by other applications.
+        </p>
+        <p>
+Once an alarm goes off, it will be removed from the alarm storage automatically.
+<em>AlarmManager</em> provides methods to manage alarms such as adding and removing.
+For more information on the Alarm features, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/alarm_w.htm">Alarm Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#AlarmId">AlarmId</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#AlarmManagerObject">AlarmManagerObject</a>
+</li>
+<li>2.2. <a href="#AlarmManager">AlarmManager</a>
+</li>
+<li>2.3. <a href="#Alarm">Alarm</a>
+</li>
+<li>2.4. <a href="#AlarmRelative">AlarmRelative</a>
+</li>
+<li>2.5. <a href="#AlarmAbsolute">AlarmAbsolute</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#AlarmManagerObject">AlarmManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AlarmManager">AlarmManager</a></td>
+<td>void <a href="#AlarmManager::add">add</a> (<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl)<br>
+    void <a href="#AlarmManager::remove">remove</a> (<a href="#AlarmId">AlarmId</a> id)<br>
+    void <a href="#AlarmManager::removeAll">removeAll</a> ()<br>
+    <a href="#Alarm">Alarm</a> <a href="#AlarmManager::get">get</a> (<a href="#AlarmId">AlarmId</a> id)<br>
+    <a href="#Alarm">Alarm</a>[] <a href="#AlarmManager::getAll">getAll</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Alarm">Alarm</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AlarmRelative">AlarmRelative</a></td>
+<td>long? <a href="#AlarmRelative::getRemainingSeconds">getRemainingSeconds</a> ()</td>
+</tr>
+<tr>
+<td><a href="#AlarmAbsolute">AlarmAbsolute</a></td>
+<td>Date? <a href="#AlarmAbsolute::getNextScheduledDate">getNextScheduledDate</a> ()</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="AlarmId">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmId"></a><h3>1.1. AlarmId</h3>
+<div class="brief">
+ An alarm identifier.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString AlarmId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="AlarmManagerObject">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManagerObject"></a><h3>2.1. AlarmManagerObject</h3>
+<div class="brief">
+ The AlarmManagerObject interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+The <em>tizen.alarm </em>object allows access to the functionality of the Alarm API.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AlarmManagerObject {
+        readonly attribute <a href="#AlarmManager">AlarmManager</a> alarm;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#AlarmManagerObject">AlarmManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="AlarmManager">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager"></a><h3>2.2. AlarmManager</h3>
+<div class="brief">
+ The AlarmManager interface provides methods to manage alarms.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AlarmManager {
+        const long PERIOD_MINUTE = 60;
+
+        const long PERIOD_HOUR = 3600;
+
+        const long PERIOD_DAY = 86400;
+
+        const long PERIOD_WEEK = 604800;
+
+        void add(<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a> get(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="AlarmManager::PERIOD_MINUTE">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_MINUTE"></a><span class="name">PERIOD_MINUTE</span><div class="brief">
+ The period of a minute.
+It defines the number of seconds per minute.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="AlarmManager::PERIOD_HOUR">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_HOUR"></a><span class="name">PERIOD_HOUR</span><div class="brief">
+ The period of an hour.
+It defines the number of seconds per hour.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="AlarmManager::PERIOD_DAY">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_DAY"></a><span class="name">PERIOD_DAY</span><div class="brief">
+ The period of a day.
+It defines the number of seconds per day.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="AlarmManager::PERIOD_WEEK">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_WEEK"></a><span class="name">PERIOD_WEEK</span><div class="brief">
+ The period of a week.
+It defines the number of seconds in a week.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AlarmManager::add">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an alarm to the storage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Sets an alarm with the application ID to be run. You should definitely provide the application ID to run
+and the <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">application control</a>information if it is necessary. 
+For more information about the application control, see <a href="application.html">The Application API</a>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/alarm
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">alarm</span>: 
+ An alarm to add. It can be either <em>AlarmRelative </em> or <em>AlarmAbsolute</em>.
+                </li>
+          <li class="param">
+<span class="name">applicationId</span>: 
+ The application ID to run when the alarm is triggered.
+                </li>
+          <li class="param">
+<span class="name">appControl</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The data structure describing application control details.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter does not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Triggers an alarm on a given date/time
+ var alarm = new tizen.AlarmAbsolute(new Date(2014, 10, 4, 8, 0));
+ var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view");
+ tizen.alarm.add(alarm, tizen.application.getCurrentApplication().appInfo.id, appControl);
+ console.log("Alarm added with id: " + alarm.id);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::remove">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes an alarm from the storage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#AlarmId">AlarmId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If an alarm goes off, it will be removed from the storage automatically.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/alarm
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of the alarm to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if this alarm identifier cannot be found in the storage.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter does not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var alarms = tizen.alarm.getAll();
+
+ // Removes the first alarm
+ if (alarms.length &gt; 0) {
+   try {
+     tizen.alarm.remove(alarms[0].id);
+     console.log("Successfully removed the first alarm.");
+   } catch(error) {
+     console.log("Failed to remove the first alarm.");
+   }
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::removeAll">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::removeAll"></a><code><b><span class="methodName">removeAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes all alarms added by an application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Because each application has its own alarm storage, this method removes alarms only added by the calling application.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/alarm
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.alarm.removeAll();
+ console.log("remove all registered alarms in the storage.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::get">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns an alarm as per the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Alarm">Alarm</a> get(<a href="#AlarmId">AlarmId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The alarm ID to retrieve.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Alarm An alarm object with the specified ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if this alarm identifier cannot be found in the storage.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter does not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Sets an alarm
+ var date = new Date();
+ date.setHours(date.getHours()+1);
+ var abs_alarm = new tizen.AlarmAbsolute(date);
+
+ // Adds an alarm
+ tizen.alarm.add(abs_alarm, tizen.application.getCurrentApplication().appInfo.id);
+
+ // Gets an alarm
+ var alarm = tizen.alarm.get(abs_alarm.id);
+ console.log("The alarm will trigger at " + alarm.getNextScheduledDate());
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::getAll">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::getAll"></a><code><b><span class="methodName">getAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Retrieves all alarms in an application storage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Alarm">Alarm</a>[] getAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Alarms that have already been triggered are removed automatically from the storage.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Alarm[] All Alarm objects.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var alarms = tizen.alarm.getAll();
+ console.log(alarms.length + " alarms present in the storage.");
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Alarm">
+<a class="backward-compatibility-anchor" name="::Alarm::Alarm"></a><h3>2.3. Alarm</h3>
+<div class="brief">
+ The Alarm interface is an abstract interface for alarm types.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface Alarm {
+        readonly attribute <a href="#AlarmId">AlarmId</a>? id;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Alarm::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AlarmId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The alarm identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="AlarmRelative">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmRelative"></a><h3>2.4. AlarmRelative</h3>
+<div class="brief">
+ The AlarmRelative interface provides the relative alarm, which occurs at a fixed interval in future.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(long delay, optional long? period)]
+    interface AlarmRelative : <a href="#Alarm">Alarm</a> {
+        readonly attribute long delay;
+
+        readonly attribute long? period;
+
+        long? getRemainingSeconds() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This alarm triggers after a duration mentioned in the <em>delay</em> attribute from the moment the alarm is added.
+If a <em>period</em> is provided, the alarm keeps triggering for the given interval.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm in 3 hours from now
+ var alarm1 = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
+ tizen.alarm.add(alarm1, appId);
+
+ // Sets an alarm in one hour, recurring after every 2 minutes
+ var alarm2 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR, 2 * tizen.alarm.PERIOD_MINUTE);
+ tizen.alarm.add(alarm2, appId);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AlarmRelative::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AlarmRelative(long delay, optional long? period);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AlarmRelative::delay">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">delay</span></span><div class="brief">
+ An attribute to store the difference in time (in seconds) between when an alarm is added and when it is triggered.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AlarmRelative::period">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">period</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the duration in seconds between each trigger of an alarm.
+By default, this attribute is set to <var>null</var>, indicating that this alarm does not repeat.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AlarmRelative::getRemainingSeconds">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmRelative::getRemainingSeconds"></a><code><b><span class="methodName">getRemainingSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns the duration in seconds before the next alarm is triggered.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long? getRemainingSeconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the alarm has expired, this method returns <var>null</var>.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The duration before the next alarm is triggered.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm in 3 hours from now
+ var alarm = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
+ tizen.alarm.add(alarm, appId);
+
+ var sec = alarm.getRemainingSeconds();
+ console.log("remaining time is " + sec);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AlarmAbsolute">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmAbsolute"></a><h3>2.5. AlarmAbsolute</h3>
+<div class="brief">
+ The AlarmAbsolute interface provides an absolute alarm, which triggers at a specified absolute date.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(Date date),
+
+     Constructor(Date date, <a href="calendar.html#ByDayValue">ByDayValue</a>[] daysOfTheWeek),
+
+     Constructor(Date date, long period)]
+    interface AlarmAbsolute : <a href="#Alarm">Alarm</a> {
+        readonly attribute Date date;
+
+        readonly attribute long? period;
+
+        readonly attribute <a href="calendar.html#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+
+        Date? getNextScheduledDate() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+If a <em>period</em> is provided, the alarm keeps triggering for the given interval. If the <em>daysOfTheWeek</em> array is not empty, the alarm triggers every week, for the given days, at the time defined by the <em>date</em> attribute.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm on January 1st 2014 08:00
+ var date = new Date(2014, 0, 1, 8, 0);
+ var alarm1 = new tizen.AlarmAbsolute(date);
+ tizen.alarm.add(alarm1, appId);
+
+ // Sets an alarm on January 1st 2014 08:00, repeating every 2 days
+ var alarm2 = new tizen.AlarmAbsolute(date, 2 * tizen.alarm.PERIOD_DAY);
+ tizen.alarm.add(alarm2, appId);
+
+ // Sets an alarm occurring on every Saturday and Sunday, at 08:00, starting from January 1st 2014
+ var alarm3 = new tizen.AlarmAbsolute(date, ["SA", "SU"]);
+ tizen.alarm.add(alarm3, appId);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AlarmAbsolute::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">AlarmAbsolute(Date date);</pre>
+<pre class="webidl prettyprint">AlarmAbsolute(Date date, <a href="calendar.html#ByDayValue">ByDayValue</a>[] daysOfTheWeek);</pre>
+<pre class="webidl prettyprint">AlarmAbsolute(Date date, long period);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AlarmAbsolute::date">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">date</span></span><div class="brief">
+ An attribute to store the absolute date/time when the alarm is initially triggered.
+            </div>
+<div class="description">
+            <p>
+This attribute is precise to the second. Milliseconds will be ignored.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AlarmAbsolute::period">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">period</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the duration in seconds between each trigger of the alarm.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>, indicating that this alarm does not repeat.
+The <em>period</em> and <em>daysOfTheWeek</em> attributes are mutually exclusive.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AlarmAbsolute::daysOfTheWeek">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ByDayValue[]
+                      </span><span class="name">daysOfTheWeek</span></span><div class="brief">
+ An attribute to store the days of the week associated with the recurrence rule.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+The <em>period</em> and <em>daysOfTheWeek</em> attributes are mutually exclusive.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AlarmAbsolute::getNextScheduledDate">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmAbsolute::getNextScheduledDate"></a><code><b><span class="methodName">getNextScheduledDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns the date / time of the next alarm trigger.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">Date? getNextScheduledDate();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the alarm has expired, this method returns <var>null</var>. The returned date is precise to the second.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Date The date/time of the next alarm trigger.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm on January 1st 2014 08:00
+ var date = new Date(2014, 0, 1, 8, 0);
+ var alarm1 = new tizen.AlarmAbsolute(date);
+ tizen.alarm.add(alarm1, appId);
+
+ var date = alarm1.getNextScheduledDate();
+ console.log("next scheduled time is " + date);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Alarm {
+    typedef DOMString AlarmId;
+
+    [NoInterfaceObject] interface AlarmManagerObject {
+        readonly attribute <a href="#AlarmManager">AlarmManager</a> alarm;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#AlarmManagerObject">AlarmManagerObject</a>;
+
+    [NoInterfaceObject] interface AlarmManager {
+        const long PERIOD_MINUTE = 60;
+
+        const long PERIOD_HOUR = 3600;
+
+        const long PERIOD_DAY = 86400;
+
+        const long PERIOD_WEEK = 604800;
+
+        void add(<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a> get(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface Alarm {
+        readonly attribute <a href="#AlarmId">AlarmId</a>? id;
+    };
+
+    [Constructor(long delay, optional long? period)]
+    interface AlarmRelative : <a href="#Alarm">Alarm</a> {
+        readonly attribute long delay;
+
+        readonly attribute long? period;
+
+        long? getRemainingSeconds() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Constructor(Date date),
+
+     Constructor(Date date, <a href="calendar.html#ByDayValue">ByDayValue</a>[] daysOfTheWeek),
+
+     Constructor(Date date, long period)]
+    interface AlarmAbsolute : <a href="#Alarm">Alarm</a> {
+        readonly attribute Date date;
+
+        readonly attribute long? period;
+
+        readonly attribute <a href="calendar.html#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+
+        Date? getNextScheduledDate() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/application.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/application.html
new file mode 100644 (file)
index 0000000..2bbe3a7
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/application.html
@@ -0,0 +1,2415 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Application API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Application">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Application API</h1></div>
+<div class="brief">
+ This API provides a way to launch other applications and access
+application management.
+        </div>
+<div class="description">
+        <p>
+The <em>ApplicationManager</em> interface also provides methods to launch other applications
+explicitly and implicitly through the <em>ApplicationControl</em> interface.
+The <em>ApplicationControl</em> interface consists of an operation, URI, and MIME type
+and also describes an action to be performed by other
+applications and can carry the result from the subsequent application.
+The <em>ApplicationManager</em> interface also provides methods to handle the application
+lifecycle, to access the installed applications on the device, and to let
+an application be notified of a change in the application list.
+        </p>
+        <p>
+The <em>Application</em> interface defines the current application's information and
+the basic operations for the current application such as exit or hide.
+        </p>
+        <p>
+For more information on the Application features, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#ApplicationId">ApplicationId</a>
+</li>
+<li>1.2. <a href="#ApplicationContextId">ApplicationContextId</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ApplicationManagerObject">ApplicationManagerObject</a>
+</li>
+<li>2.2. <a href="#ApplicationManager">ApplicationManager</a>
+</li>
+<li>2.3. <a href="#Application">Application</a>
+</li>
+<li>2.4. <a href="#ApplicationInformation">ApplicationInformation</a>
+</li>
+<li>2.5. <a href="#ApplicationContext">ApplicationContext</a>
+</li>
+<li>2.6. <a href="#ApplicationControlData">ApplicationControlData</a>
+</li>
+<li>2.7. <a href="#ApplicationControl">ApplicationControl</a>
+</li>
+<li>2.8. <a href="#RequestedApplicationControl">RequestedApplicationControl</a>
+</li>
+<li>2.9. <a href="#ApplicationCertificate">ApplicationCertificate</a>
+</li>
+<li>2.10. <a href="#ApplicationMetaData">ApplicationMetaData</a>
+</li>
+<li>2.11. <a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a>
+</li>
+<li>2.12. <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a>
+</li>
+<li>2.13. <a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a>
+</li>
+<li>2.14. <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>
+</li>
+<li>2.15. <a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ApplicationManagerObject">ApplicationManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationManager">ApplicationManager</a></td>
+<td>
+<a href="#Application">Application</a> <a href="#ApplicationManager::getCurrentApplication">getCurrentApplication</a> ()<br>
+    void <a href="#ApplicationManager::kill">kill</a> (<a href="#ApplicationContextId">ApplicationContextId</a> contextId, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ApplicationManager::launch">launch</a> (<a href="#ApplicationId">ApplicationId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ApplicationManager::launchAppControl">launchAppControl</a> (<a href="#ApplicationControl">ApplicationControl</a> appControl, optional <a href="#ApplicationId">ApplicationId</a>? id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback)<br>
+    void <a href="#ApplicationManager::findAppControl">findAppControl</a> (<a href="#ApplicationControl">ApplicationControl</a> appControl, <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ApplicationManager::getAppsContext">getAppsContext</a> (<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#ApplicationContext">ApplicationContext</a> <a href="#ApplicationManager::getAppContext">getAppContext</a> (optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId)<br>
+    void <a href="#ApplicationManager::getAppsInfo">getAppsInfo</a> (<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#ApplicationInformation">ApplicationInformation</a> <a href="#ApplicationManager::getAppInfo">getAppInfo</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    <a href="#ApplicationCertificate">ApplicationCertificate</a>[] <a href="#ApplicationManager::getAppCerts">getAppCerts</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    DOMString <a href="#ApplicationManager::getAppSharedURI">getAppSharedURI</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    <a href="#ApplicationMetaData">ApplicationMetaData</a>[] <a href="#ApplicationManager::getAppMetaData">getAppMetaData</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    long <a href="#ApplicationManager::addAppInfoEventListener">addAppInfoEventListener</a> (<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback)<br>
+    void <a href="#ApplicationManager::removeAppInfoEventListener">removeAppInfoEventListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#Application">Application</a></td>
+<td>void <a href="#Application::exit">exit</a> ()<br>
+    void <a href="#Application::hide">hide</a> ()<br>
+    <a href="#RequestedApplicationControl">RequestedApplicationControl</a> <a href="#Application::getRequestedAppControl">getRequestedAppControl</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ApplicationInformation">ApplicationInformation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationContext">ApplicationContext</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationControlData">ApplicationControlData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationControl">ApplicationControl</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#RequestedApplicationControl">RequestedApplicationControl</a></td>
+<td>void <a href="#RequestedApplicationControl::replyResult">replyResult</a> (optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)<br>
+    void <a href="#RequestedApplicationControl::replyFailure">replyFailure</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ApplicationCertificate">ApplicationCertificate</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationMetaData">ApplicationMetaData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a></td>
+<td>void <a href="#ApplicationInformationArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray)</td>
+</tr>
+<tr>
+<td><a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a></td>
+<td>void <a href="#FindAppControlSuccessCallback::onsuccess">onsuccess</a> (<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl)</td>
+</tr>
+<tr>
+<td><a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a></td>
+<td>void <a href="#ApplicationContextArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ApplicationContext">ApplicationContext</a>[] contexts)</td>
+</tr>
+<tr>
+<td><a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a></td>
+<td>void <a href="#ApplicationControlDataArrayReplyCallback::onsuccess">onsuccess</a> (optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)<br>
+    void <a href="#ApplicationControlDataArrayReplyCallback::onfailure">onfailure</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a></td>
+<td>void <a href="#ApplicationInformationEventCallback::oninstalled">oninstalled</a> (<a href="#ApplicationInformation">ApplicationInformation</a> info)<br>
+    void <a href="#ApplicationInformationEventCallback::onupdated">onupdated</a> (<a href="#ApplicationInformation">ApplicationInformation</a> info)<br>
+    void <a href="#ApplicationInformationEventCallback::onuninstalled">onuninstalled</a> (<a href="#ApplicationId">ApplicationId</a> id)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="ApplicationId">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationId"></a><h3>1.1. ApplicationId</h3>
+<div class="brief">
+ The unique ID for an installed application.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ApplicationId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="ApplicationContextId">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContextId"></a><h3>1.2. ApplicationContextId</h3>
+<div class="brief">
+ The unique ID for a running application.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ApplicationContextId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ApplicationManagerObject">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManagerObject"></a><h3>2.1. ApplicationManagerObject</h3>
+<div class="brief">
+ This interface defines what is instantiated by the <em>Tizen </em>object on the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationManagerObject {
+    readonly attribute <a href="#ApplicationManager">ApplicationManager</a> application;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ApplicationManagerObject">ApplicationManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.application </em>object allows access to the Application API's functionality.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ApplicationManager">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager"></a><h3>2.2. ApplicationManager</h3>
+<div class="brief">
+ The ApplicationManager interface provides methods to retrieve application information, launch, install application, etc.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationManager {
+
+    <a href="#Application">Application</a> getCurrentApplication() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void kill(<a href="#ApplicationContextId">ApplicationContextId</a> contextId,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launch(<a href="#ApplicationId">ApplicationId</a> id,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launchAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                          optional <a href="#ApplicationId">ApplicationId</a>? id,
+                          optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                          optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                        <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsContext(<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationContext">ApplicationContext</a> getAppContext(optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsInfo(<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationInformation">ApplicationInformation</a> getAppInfo(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationCertificate">ApplicationCertificate</a>[] getAppCerts(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getAppSharedURI(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationMetaData">ApplicationMetaData</a>[] getAppMetaData(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addAppInfoEventListener(<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAppInfoEventListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationManager::getCurrentApplication">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getCurrentApplication"></a><code><b><span class="methodName">getCurrentApplication</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the <em>Application </em>object defining the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Application">Application</a> getCurrentApplication();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Application The data structure that defines the current application.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var app = tizen.application.getCurrentApplication();
+ console.log("Current application's app id is " + app.appInfo.id);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::kill">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::kill"></a><code><b><span class="methodName">kill</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Kills an application with the specified application context ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void kill(<a href="#ApplicationContextId">ApplicationContextId</a> contextId, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the context is not found with the specified context ID.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value
+or if the specified context ID matches the context ID of the calling application.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/appmanager.kill
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contextId</span>: 
+ The identifier of the application to kill
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an application is killed successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onKillSuccess() {
+     console.log("Application terminated successfully");
+ }
+
+ function onRunningAppsContext(contexts) {
+    // let's assume that the application "targetApp0.main" has been installed.
+    var targetId = "targetApp0.main";
+
+    for (var i = 0; i &lt; contexts.length; i++) {
+        if (contexts[i].appId == targetId) {
+            tizen.application.kill(contexts[i].id, onKillSuccess);
+        }
+    }
+ }
+
+ tizen.application.getAppsContext(onRunningAppsContext);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::launch">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::launch"></a><code><b><span class="methodName">launch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Launches an application with the given application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void launch(<a href="#ApplicationId">ApplicationId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the application is not found with the specified ID.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.launch
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ A unique string representing the application ID
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess() {
+     console.log("The application has launched successfully");
+ }
+
+ // let's assume that application "targetApp0.main" has been installed
+ tizen.application.launch("targetApp0.main", onsuccess);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::launchAppControl">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::launchAppControl"></a><code><b><span class="methodName">launchAppControl</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Launches an application with the specified application control.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void launchAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl, optional <a href="#ApplicationId">ApplicationId</a>? id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+An application can launch other applications with the application control,
+and get back the results from the launched applications.
+            </p>
+            <p>
+The application control consists of an operation, URI, and MIME type, and describes
+the request to be performed by the newly launched application. The
+application control is passed to the <em>launchAppControl()</em> method to launch an
+application. The system tries to find the proper application
+to perform the requested application control, then launches the selected application.
+            </p>
+            <p>
+The application control request is passed to the newly launched application
+and it can be accessed by the <em>getRequestedAppControl() </em>method. The passed
+application control contains the reason the application has been launched and
+information about what the application is doing. The launched application
+can send a result to the caller application with the <em>replyResult() </em>method of the
+<em>RequestedApplicationControl</em> interface.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the system cannot find the application that matches the specified application control.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+SecurityError - If the application does not have the privilege to call the specified application control operation.              </li>
+              <li>
+UnknownError: If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.launch
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appControl</span>: 
+ The data structure describing application control details
+                </li>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An identifier of the application to be launched. If the ID is <var>null </var>or not specified, then the system tries to find the application to be launched for the requested application control
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+          <li class="param">
+<span class="name">replyCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the application gets back results from the launched application
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControl = new tizen.ApplicationControl(
+     "http://tizen.org/appcontrol/operation/pick",
+     null,
+     "image/jpeg",
+     null);
+
+ var appControlReplyCallback = {
+     // callee sent a reply
+     onsuccess: function(data) {
+         for (var i = 0; i &lt; data.length; i++) {
+             if (data[i].key == "http://tizen.org/appcontrol/data/selected") {
+                 console.log('Selected image is ' + data[i].value[0]);
+             }
+         }
+     },
+     // callee returned failure
+     onfailure: function() {
+         console.log('The launch application control failed');
+     }
+ }
+
+ 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>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::findAppControl">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::findAppControl"></a><code><b><span class="methodName">findAppControl</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds which applications can be launched with the given application control.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void findAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl, <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+An application can get a list of other applications that can be launched with the application control.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appControl</span>: 
+ A data structure describing application control details
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call that returns a list of application information
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControl = new tizen.ApplicationControl(
+     "http://tizen.org/appcontrol/operation/pick",
+     null,
+     "image/jpeg",
+     null);
+
+ function successCB(appInfos, appControl)
+ {
+     // appControl is same object with the value passed as first parameter to findAppControl()
+     var appControlReplyCallback = {
+         // callee sent a reply
+         onsuccess: function(data) {
+             for (var i = 0; i &lt; data.length; i++) {
+                 if (data[i].key == "http://tizen.org/appcontrol/data/selected") {
+                     console.log('Selected image is ' + data[i].value[0]);
+                 }
+             }
+         },
+         // callee returned failure
+         onfailure: function() {
+             console.log('The launch application control failed');
+         }
+     }
+
+     var appId = appInfos[0].id; // select first app's id
+
+     tizen.application.launchAppControl(
+         appControl,
+         appId,
+         function() {console.log("launch application control succeed"); },
+        function(e) {console.log("launch application control failed. reason: " + e.message); },
+        appControlReplyCallback );
+ }
+
+ tizen.application.findAppControl(appControl, successCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppsContext">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppsContext"></a><code><b><span class="methodName">getAppsContext</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a list of application contexts for applications that are currently running on a device.
+The information contained for each application corresponds to the application state at the time when the list had been generated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getAppsContext(<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError - If an unknown error occurs.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onRunningAppsContext(contexts) {
+     for (var i = 0; i &lt; contexts.length; i++)
+         console.log("ID : " + contexts[i].id);
+ }
+
+ tizen.application.getAppsContext(onRunningAppsContext);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppContext">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppContext"></a><code><b><span class="methodName">getAppContext</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the application context for the specified application context ID.
+If the ID is set to<var> null</var> or is not set at all, the method returns the application context of the current application.
+The list of running applications and their application IDs is obtained with <em>getAppsContext()</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationContext">ApplicationContext</a> getAppContext(optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contextId</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application context ID<br>If the ID is not provided, the application context of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationContext A data structure that lists running application details.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the application context is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application context cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appContext = tizen.application.getAppContext(null);
+ console.log("Application context retrieved for app " + appContext.appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppsInfo">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppsInfo"></a><code><b><span class="methodName">getAppsInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the list of installed applications' information on a device.
+The information contained on each application corresponds to the application state at the time when the list had been generated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getAppsInfo(<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError - If an unknown error occurs.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onListInstalledApps(applications) {
+     for (var i = 0; i &lt; applications.length; i++)
+         console.log("ID : " + applications[i].id);
+ }
+
+ tizen.application.getAppsInfo(onListInstalledApps);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppInfo">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppInfo"></a><code><b><span class="methodName">getAppInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets application information for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationInformation">ApplicationInformation</a> getAppInfo(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns application information for the current application.
+The list of installed applications and their application IDs is obtained with <em>getAppsInfo()</em>.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID<br>If the ID is not provided, the application information of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationInformation The information of an application.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appInfo = tizen.application.getAppInfo(null);
+ console.log("Current application name : " + appInfo.name);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppCerts">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppCerts"></a><code><b><span class="methodName">getAppCerts</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets application certificates for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationCertificate">ApplicationCertificate</a>[] getAppCerts(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns application certificates for the current application.
+            </p>
+            <p>
+The certificate types are listed below:
+            </p>
+            <ul>
+              <li>
+ AUTHOR_ROOT - Author Root Certificate               </li>
+              <li>
+ AUTHOR_INTERMEDIATE - Author Intermediate Certificate               </li>
+              <li>
+ AUTHOR_SIGNER - Author Signer Certificate               </li>
+              <li>
+ DISTRIBUTOR_ROOT - Distributor Root Certificate               </li>
+              <li>
+ DISTRIBUTOR_INTERMEDIATE - Distributor Intermediate Certificate               </li>
+              <li>
+ DISTRIBUTOR_SIGNER - Distributor Signer Certificate               </li>
+              <li>
+ DISTRIBUTOR2_ROOT - Distributor2 Root Certificate               </li>
+              <li>
+ DISTRIBUTOR2_INTERMEDIATE - Distributor2 Intermediate Certificate               </li>
+              <li>
+ DISTRIBUTOR2_SIGNER - Distributor2 Signer Certificate               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/appmanager.certificate
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID. If the ID is not provided, the application certificate of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationCertificate[] Array of certificate information of a specified application
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appCerts = tizen.application.getAppCerts(null);
+
+ for (var i = 0; i &lt; appCerts.length; i++) {
+    console.log("#" + i + " type:" + appCerts[i].type);
+    console.log("#" + i + " value:" + appCerts[i].value);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppSharedURI">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppSharedURI"></a><code><b><span class="methodName">getAppSharedURI</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the URI of the read-only shared directory of an application for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getAppSharedURI(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The shared directory is used to export data to other applications.
+If the ID is set to <var>null</var> or not set at all, it returns the shared directory URI for the current application.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID. If the ID is not provided, the shared directory URI of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The shared directory URI of an application
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var sharedDir = tizen.application.getAppSharedURI(null);
+ console.log("shared directory : " + sharedDir);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppMetaData">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppMetaData"></a><code><b><span class="methodName">getAppMetaData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the application meta data array for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationMetaData">ApplicationMetaData</a>[] getAppMetaData(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns the application meta data array for the current application.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID. If the ID is not provided, the application metadata array of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationMetaData[] Array of meta data of a specified application. If there are no meta data for a specified application,
+an empty array is returned
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var metaDataArray = tizen.application.getAppMetaData(null);
+ console.log("size of metadata : " + metaDataArray.length);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::addAppInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::addAppInfoEventListener"></a><code><b><span class="methodName">addAppInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener for receiving any notification for changes in the list of installed applications
+on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addAppInfoEventListener(<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+It installs a callback that is triggered every time a change occurs on
+the list of installed applications on a device. This change may
+occur due to a new installation, uninstallation, or update of an application.
+            </p>
+            <p>
+When executed, the implementation must immediately return a listener
+ID that identifies the listener. After returning the ID, the change
+detection operation is started asynchronously.
+            </p>
+            <p>
+The <em>ApplicationInformationEventCallback </em>must be invoked every time a new
+application is installed, removed, or updated.
+            </p>
+            <p>
+The change detection must continue until the <em>removeAppInfoEventListener()</em> method is called
+with the corresponding listener identifier.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">eventCallback</span>: 
+ The method to call when a change on the installed applications is made
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long ID of the listener that can be used to remove the listener later.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if it fails to add a listener because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appEventCallback = {
+    oninstalled: function(appInfo) {
+       console.log('The application ' + appInfo.name + ' is installed');
+    },
+    onupdated: function(appInfo) {
+       console.log('The application ' + appInfo.name + ' is updated');
+    },
+    onuninstalled: function(appid) {
+       console.log('The application ' + appid + ' is uninstalled');
+    }
+ };
+ var watchId = tizen.application.addAppInfoEventListener(appEventCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::removeAppInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::removeAppInfoEventListener"></a><code><b><span class="methodName">removeAppInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes the listener to stop receiving notifications for changes on the list of installed
+applications on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAppInfoEventListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ An ID that identifies the listener
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the listener is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if it fails to remove a listener because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.application.removeAppInfoEventListener(watchId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Application">
+<a class="backward-compatibility-anchor" name="::Application::Application"></a><h3>2.3. Application</h3>
+<div class="brief">
+ This interface defines the current application's information and
+the basic operations (such as exit or hide) for the current application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Application {
+
+    readonly attribute <a href="#ApplicationInformation">ApplicationInformation</a> appInfo;
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> contextId;
+
+    void exit() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void hide() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RequestedApplicationControl">RequestedApplicationControl</a> getRequestedAppControl() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Application::appInfo">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationInformation </span><span class="name">appInfo</span></span><div class="brief">
+ An attribute to store the application information for the current application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Application::contextId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationContextId </span><span class="name">contextId</span></span><div class="brief">
+ An attribute to store the ID of a running application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Application::exit">
+<a class="backward-compatibility-anchor" name="::Application::Application::exit"></a><code><b><span class="methodName">exit</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Exits the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void exit();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var app = tizen.application.getCurrentApplication();
+
+ app.exit();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Application::hide">
+<a class="backward-compatibility-anchor" name="::Application::Application::hide"></a><code><b><span class="methodName">hide</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Hides the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void hide();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var app = tizen.application.getCurrentApplication();
+
+ app.hide();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Application::getRequestedAppControl">
+<a class="backward-compatibility-anchor" name="::Application::Application::getRequestedAppControl"></a><code><b><span class="methodName">getRequestedAppControl</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the requested application control passed to the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#RequestedApplicationControl">RequestedApplicationControl</a> getRequestedAppControl();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Gets the requested application control that contains the application control
+passed by the <em>launchAppControl()</em> method from the calling application.
+The requested application control contains the reason the application
+is launched and what it has to perform. For example, an application
+might be launched to display an image on a page by another
+application's request. In all of these cases, the application is
+responsible for checking the contents of the application control and responding
+appropriately when it is launched.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ RequestedApplicationControl The details of a requested application control
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the application control cannot be retrieved because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+
+ if (reqAppControl) {
+     console.log("Requester AppID : " + reqAppControl.callerAppId);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationInformation">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformation"></a><h3>2.4. ApplicationInformation</h3>
+<div class="brief">
+ This interface defines the general information available to an installed application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationInformation {
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString iconPath;
+
+    readonly attribute DOMString version;
+
+    readonly attribute boolean show;
+
+    readonly attribute DOMString[] categories;
+
+    readonly attribute Date installDate;
+
+    readonly attribute long size raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="package.html#PackageId">PackageId</a> packageId;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationInformation::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the identifier of an application for application management.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An attribute to store the name of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::iconPath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iconPath</span></span><div class="brief">
+ An attribute to store the icon path of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::version">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">version</span></span><div class="brief">
+ An attribute to store the version of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::show">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">show</span></span><div class="brief">
+ An attribute that determines whether the application information should
+be shown (such as in menus).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::categories">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">categories</span></span><div class="brief">
+ An array of attributes to store the categories that the app belongs to.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::installDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">installDate</span></span><div class="brief">
+ An attribute to store the application install/update time.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::size">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">size</span></span><div class="brief">
+ An attribute to store the application size (installed space).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.info
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="ApplicationInformation::packageId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PackageId </span><span class="name">packageId</span></span><div class="brief">
+ An attribute to store the package ID of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationContext">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContext"></a><h3>2.5. ApplicationContext</h3>
+<div class="brief">
+ This interface defines the information available about a running
+application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationContext {
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> id;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> appId;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationContext::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationContextId </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the ID of a running application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationContext::appId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">appId</span></span><div class="brief">
+ An attribute to store the ID of an installed application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationControlData">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlData"></a><h3>2.6. ApplicationControlData</h3>
+<div class="brief">
+ This interface defines a key/value pair used to pass data
+between applications through the <em>ApplicationControl </em>interface.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString key, DOMString[] value)]
+  interface ApplicationControlData {
+
+    attribute DOMString key;
+
+    attribute DOMString[] value;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControlData = new tizen.ApplicationControlData("image", [imagedata1]);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ApplicationControlData::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ApplicationControlData(DOMString key, DOMString[] value);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationControlData::key">
+<span class="attrName"><span class="type">DOMString </span><span class="name">key</span></span><div class="brief">
+ An attribute to store the name of a key.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControlData::value">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">value</span></span><div class="brief">
+ An attribute to store the value associated with a key.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationControl">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControl"></a><h3>2.7. ApplicationControl</h3>
+<div class="brief">
+ This interface consists of an operation, URI, MIME type,
+and data. It describes an action to be performed by other applications
+and is passed to launch other applications.
+If the system gets the application control request, it finds
+the corresponding application to be launched with the delivered application control
+and launches the selected application.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString operation, optional DOMString? uri,
+               optional DOMString? mime, optional DOMString? category,
+               optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)]
+  interface ApplicationControl {
+
+    attribute DOMString operation;
+
+    attribute DOMString? uri;
+
+    attribute DOMString? mime;
+
+    attribute DOMString? category;
+
+    attribute <a href="#ApplicationControlData">ApplicationControlData</a>[] data;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControl =
+       new tizen.ApplicationControl(
+                  "http://tizen.org/appcontrol/operation/view",
+                  null,
+                  "image/jpeg",
+                  null,
+                  [new tizen.ApplicationControlData("images",
+                                                    [imagedata1, imagedata2])] );
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ApplicationControl::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ApplicationControl(DOMString operation, optional DOMString? uri, optional DOMString? mime, optional DOMString? category, optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationControl::operation">
+<span class="attrName"><span class="type">DOMString </span><span class="name">operation</span></span><div class="brief">
+ An attribute to store the string that defines the action to be
+performed by an application control.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::uri">
+<span class="attrName"><span class="type">DOMString </span><span class="name">uri</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the URI needed by an application control.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::mime">
+<span class="attrName"><span class="type">DOMString </span><span class="name">mime</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the MIME type of content.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::category">
+<span class="attrName"><span class="type">DOMString </span><span class="name">category</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the category of the application to be launched.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::data">
+<span class="attrName"><span class="type">ApplicationControlData[]
+                      </span><span class="name">data</span></span><div class="brief">
+ An array of attributes to store the data needed for an application control.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="RequestedApplicationControl">
+<a class="backward-compatibility-anchor" name="::Application::RequestedApplicationControl"></a><h3>2.8. RequestedApplicationControl</h3>
+<div class="brief">
+ This interface has an application control information requested and passed
+from another application and is passed to launch other applications. The newly
+launched application can get the requested application control through the <em>getRequestedAppControl()</em> method, and send the results
+to the calling application through the <em>replyResult()</em> method after performing the
+required action requested by the calling application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface RequestedApplicationControl {
+
+    readonly attribute <a href="#ApplicationControl">ApplicationControl</a> appControl;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> callerAppId;
+
+    void replyResult(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void replyFailure() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+ if (reqAppControl) {
+     console.log("Requester AppID : " + reqAppControl.callerAppId);
+
+     var appControl = reqAppControl.appControl;
+     if (appControl.operation == "http://tizen.org/appcontrol/operation/pick") {
+         var data = new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selected", ["Image1.jpg"]);
+         reqAppControl.replyResult([data]);
+     }
+ }
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="RequestedApplicationControl::appControl">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationControl </span><span class="name">appControl</span></span><div class="brief">
+ An attribute to store the application control object that describes the caller application's request.
+It contains the information that the calling application passed to <em>launchAppControl</em>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="RequestedApplicationControl::callerAppId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">callerAppId</span></span><div class="brief">
+ An attribute to store the caller application's ID.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="RequestedApplicationControl::replyResult">
+<a class="backward-compatibility-anchor" name="::Application::RequestedApplicationControl::replyResult"></a><code><b><span class="methodName">replyResult</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends the results to the caller application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void replyResult(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An array of ApplicationControlData objects
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the caller app is not alive or there is no response from the caller app.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the reply request fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="RequestedApplicationControl::replyFailure">
+<a class="backward-compatibility-anchor" name="::Application::RequestedApplicationControl::replyFailure"></a><code><b><span class="methodName">replyFailure</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Notifies the calling application that the application failed
+to perform the requested action.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void replyFailure();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the caller app is not alive or there is no response from the caller app.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the reply request fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationCertificate">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationCertificate"></a><h3>2.9. ApplicationCertificate</h3>
+<div class="brief">
+ This interface defines the certificate information of an installed application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationCertificate {
+
+    readonly attribute DOMString type;
+
+    readonly attribute DOMString value;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationCertificate::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ An attribute to store the type of the application certificate
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationCertificate::value">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">value</span></span><div class="brief">
+ An attribute to store the value of the application certificate
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationMetaData">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationMetaData"></a><h3>2.10. ApplicationMetaData</h3>
+<div class="brief">
+ This interface defines the meta data of an installed application
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationMetaData {
+
+    readonly attribute DOMString key;
+
+    readonly attribute DOMString value;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationMetaData::key">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">key</span></span><div class="brief">
+ An attribute to store the key of the application meta data
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="ApplicationMetaData::value">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">value</span></span><div class="brief">
+ An attribute to store the value of the application meta data
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationInformationArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationArraySuccessCallback"></a><h3>2.11. ApplicationInformationArraySuccessCallback</h3>
+<div class="brief">
+ This callback interface specifies a success callback that is invoked when the installed application list is retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationInformationArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with an array of
+<em>ApplicationInformation </em>objects as an input parameter. It is used in <em>ApplicationManager.getAppsInfo()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationInformationArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">informationArray</span>: 
+ A list of installed applications
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FindAppControlSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Application::FindAppControlSuccessCallback"></a><h3>2.12. FindAppControlSuccessCallback</h3>
+<div class="brief">
+ This callback interface specifies a success callback that is invoked when the system has finished searching applications that match a specific application control .
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FindAppControlSuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with an array of
+<em>ApplicationInformation </em>objects and application control as an input parameter.
+It is used in <em>ApplicationManager.findAppControl()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FindAppControlSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::FindAppControlSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">informationArray</span>: 
+ A list of installed applications
+                </li>
+          <li class="param">
+<span class="name">appControl</span>: 
+ The application control that is passed to <em>ApplicationManager.findAppControl()</em>                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationContextArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContextArraySuccessCallback"></a><h3>2.13. ApplicationContextArraySuccessCallback</h3>
+<div class="brief">
+ This callback interface specifies a success callback that is invoked when the list of running applications is retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationContextArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationContext">ApplicationContext</a>[] contexts);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with
+an array of <em>ApplicationContext </em>objects as an input parameter. It is used in <em>ApplicationManager.getAppsContext()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationContextArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContextArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when <em>ApplicationManager.getAppsContext() </em>completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ApplicationContext">ApplicationContext</a>[] contexts);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contexts</span>: 
+ A list of running applications
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationControlDataArrayReplyCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlDataArrayReplyCallback"></a><h3>2.14. ApplicationControlDataArrayReplyCallback</h3>
+<div class="brief">
+ The ApplicationControlDataArrayReplyCallback callback specifies success callbacks that are invoked as a reply from the requested application control within the application control requester.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface ApplicationControlDataArrayReplyCallback {
+    void onsuccess(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+
+    void onfailure();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies two methods:
+          </p>
+          <ul>
+            <li>
+ <em>onsuccess()</em> - Invoked if the callee application calls <em>RequestedApplicationControl.replyResult()</em>.            </li>
+            <li>
+ <em>onfailure()</em> - Invoked if the callee application calls <em>RequestedApplicationControl.replyFailure()</em>.            </li>
+          </ul>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationControlDataArrayReplyCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlDataArrayReplyCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the callee application calls <em>RequestedApplicationControl.replyResult()</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An array of <em>ApplicationControlData</em> objects
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ApplicationControlDataArrayReplyCallback::onfailure">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlDataArrayReplyCallback::onfailure"></a><code><b><span class="methodName">onfailure</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the callee application calls <em>RequestedApplicationControl.replyFailure()</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfailure();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationInformationEventCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback"></a><h3>2.15. ApplicationInformationEventCallback</h3>
+<div class="brief">
+ The ApplicationInformationEventCallback specifies listener for subscribing for notifications of changes in the list of installed
+applications on a device.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface ApplicationInformationEventCallback {
+    void oninstalled(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onupdated(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onuninstalled(<a href="#ApplicationId">ApplicationId</a> id);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies methods that are invoked when
+an application is installed, updated, or uninstalled.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationInformationEventCallback::oninstalled">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback::oninstalled"></a><code><b><span class="methodName">oninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an application is installed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oninstalled(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The application information of the installed application
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ApplicationInformationEventCallback::onupdated">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback::onupdated"></a><code><b><span class="methodName">onupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an application is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onupdated(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The application information of the updated application
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ApplicationInformationEventCallback::onuninstalled">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback::onuninstalled"></a><code><b><span class="methodName">onuninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an application is uninstalled.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onuninstalled(<a href="#ApplicationId">ApplicationId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of the uninstalled application
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Application {
+
+  typedef DOMString ApplicationId;
+
+  typedef DOMString ApplicationContextId;
+
+  [NoInterfaceObject] interface ApplicationManagerObject {
+    readonly attribute <a href="#ApplicationManager">ApplicationManager</a> application;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ApplicationManagerObject">ApplicationManagerObject</a>;
+
+  [NoInterfaceObject] interface ApplicationManager {
+
+    <a href="#Application">Application</a> getCurrentApplication() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void kill(<a href="#ApplicationContextId">ApplicationContextId</a> contextId,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launch(<a href="#ApplicationId">ApplicationId</a> id,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launchAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                          optional <a href="#ApplicationId">ApplicationId</a>? id,
+                          optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                          optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                        <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsContext(<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationContext">ApplicationContext</a> getAppContext(optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsInfo(<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationInformation">ApplicationInformation</a> getAppInfo(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationCertificate">ApplicationCertificate</a>[] getAppCerts(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getAppSharedURI(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationMetaData">ApplicationMetaData</a>[] getAppMetaData(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addAppInfoEventListener(<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAppInfoEventListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [NoInterfaceObject] interface Application {
+
+    readonly attribute <a href="#ApplicationInformation">ApplicationInformation</a> appInfo;
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> contextId;
+
+    void exit() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void hide() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RequestedApplicationControl">RequestedApplicationControl</a> getRequestedAppControl() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+
+  [NoInterfaceObject] interface ApplicationInformation {
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString iconPath;
+
+    readonly attribute DOMString version;
+
+    readonly attribute boolean show;
+
+    readonly attribute DOMString[] categories;
+
+    readonly attribute Date installDate;
+
+    readonly attribute long size raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="package.html#PackageId">PackageId</a> packageId;
+  };
+
+  [NoInterfaceObject] interface ApplicationContext {
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> id;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> appId;
+
+  };
+
+  [Constructor(DOMString key, DOMString[] value)]
+  interface ApplicationControlData {
+
+    attribute DOMString key;
+
+    attribute DOMString[] value;
+
+  };
+
+  [Constructor(DOMString operation, optional DOMString? uri,
+               optional DOMString? mime, optional DOMString? category,
+               optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)]
+  interface ApplicationControl {
+
+    attribute DOMString operation;
+
+    attribute DOMString? uri;
+
+    attribute DOMString? mime;
+
+    attribute DOMString? category;
+
+    attribute <a href="#ApplicationControlData">ApplicationControlData</a>[] data;
+
+  };
+
+  [NoInterfaceObject] interface RequestedApplicationControl {
+
+    readonly attribute <a href="#ApplicationControl">ApplicationControl</a> appControl;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> callerAppId;
+
+    void replyResult(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void replyFailure() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [NoInterfaceObject] interface ApplicationCertificate {
+
+    readonly attribute DOMString type;
+
+    readonly attribute DOMString value;
+
+  };
+
+  [NoInterfaceObject] interface ApplicationMetaData {
+
+    readonly attribute DOMString key;
+
+    readonly attribute DOMString value;
+
+  };
+
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationInformationArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FindAppControlSuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationContextArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationContext">ApplicationContext</a>[] contexts);
+  };
+
+  [Callback, NoInterfaceObject] interface ApplicationControlDataArrayReplyCallback {
+    void onsuccess(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+
+    void onfailure();
+  };
+
+  [Callback, NoInterfaceObject] interface ApplicationInformationEventCallback {
+    void oninstalled(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onupdated(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onuninstalled(<a href="#ApplicationId">ApplicationId</a> id);
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html
new file mode 100644 (file)
index 0000000..5560580
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html
@@ -0,0 +1,1547 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Archive API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Archive">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Archive API</h1></div>
+<div class="brief">
+ The Archive API provides functions to create and manage archive files.
+You can extract files, add a file to an archive file, and so on.
+        </div>
+<div class="description">
+        <p>
+For more information about how to use Archive API, see <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/archive_w.htm">Archive Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#FileReference">FileReference</a>
+</li>
+<li>1.2. <a href="#ArchiveCompressionLevel">ArchiveCompressionLevel</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ArchiveManagerObject">ArchiveManagerObject</a>
+</li>
+<li>2.2. <a href="#ArchiveFileOptions">ArchiveFileOptions</a>
+</li>
+<li>2.3. <a href="#ArchiveFileEntryOptions">ArchiveFileEntryOptions</a>
+</li>
+<li>2.4. <a href="#ArchiveManager">ArchiveManager</a>
+</li>
+<li>2.5. <a href="#ArchiveFile">ArchiveFile</a>
+</li>
+<li>2.6. <a href="#ArchiveFileEntry">ArchiveFileEntry</a>
+</li>
+<li>2.7. <a href="#ArchiveFileSuccessCallback">ArchiveFileSuccessCallback</a>
+</li>
+<li>2.8. <a href="#ArchiveFileEntrySuccessCallback">ArchiveFileEntrySuccessCallback</a>
+</li>
+<li>2.9. <a href="#ArchiveFileEntryArraySuccessCallback">ArchiveFileEntryArraySuccessCallback</a>
+</li>
+<li>2.10. <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ArchiveManagerObject">ArchiveManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileOptions">ArchiveFileOptions</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileEntryOptions">ArchiveFileEntryOptions</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ArchiveManager">ArchiveManager</a></td>
+<td>long <a href="#ArchiveManager::open">open</a> (<a href="#FileReference">FileReference</a> file, <a href="filesystem.html#FileMode">FileMode</a> mode, <a href="#ArchiveFileSuccessCallback">ArchiveFileSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileOptions">ArchiveFileOptions</a>? options)<br>
+    void <a href="#ArchiveManager::abort">abort</a> (long operationIdentifier)</td>
+</tr>
+<tr>
+<td><a href="#ArchiveFile">ArchiveFile</a></td>
+<td>long <a href="#ArchiveFile::add">add</a> (<a href="#FileReference">FileReference</a> sourceFile, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress, optional <a href="#ArchiveFileEntryOptions">ArchiveFileEntryOptions</a>? options)<br>
+    long <a href="#ArchiveFile::extractAll">extractAll</a> (<a href="#FileReference">FileReference</a> destinationDirectory, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress, optional boolean? overwrite)<br>
+    long <a href="#ArchiveFile::getEntries">getEntries</a> (<a href="#ArchiveFileEntryArraySuccessCallback">ArchiveFileEntryArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    long <a href="#ArchiveFile::getEntryByName">getEntryByName</a> (DOMString name, <a href="#ArchiveFileEntrySuccessCallback">ArchiveFileEntrySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#ArchiveFile::close">close</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileEntry">ArchiveFileEntry</a></td>
+<td>long <a href="#ArchiveFileEntry::extract">extract</a> (<a href="#FileReference">FileReference</a> destinationDirectory, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress, optional boolean? stripName, optional boolean? overwrite)</td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileSuccessCallback">ArchiveFileSuccessCallback</a></td>
+<td>void <a href="#ArchiveFileSuccessCallback::onsuccess">onsuccess</a> (<a href="#ArchiveFile">ArchiveFile</a> archive)</td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileEntrySuccessCallback">ArchiveFileEntrySuccessCallback</a></td>
+<td>void <a href="#ArchiveFileEntrySuccessCallback::onsuccess">onsuccess</a> (<a href="#ArchiveFileEntry">ArchiveFileEntry</a> entry)</td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileEntryArraySuccessCallback">ArchiveFileEntryArraySuccessCallback</a></td>
+<td>void <a href="#ArchiveFileEntryArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ArchiveFileEntry">ArchiveFileEntry</a>[] entries)</td>
+</tr>
+<tr>
+<td><a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a></td>
+<td>void <a href="#ArchiveFileProgressCallback::onprogress">onprogress</a> (long operationIdentifier, double value, DOMString filename)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="FileReference">
+<a class="backward-compatibility-anchor" name="::Archive::FileReference"></a><h3>1.1. FileReference</h3>
+<div class="brief">
+ File reference for an archive file.
+It can be either a <var>File</var> object or a virtual path.
+          </div>
+<pre class="webidl prettyprint">    typedef (DOMString or <a href="filesystem.html#File">File</a>) FileReference;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="enum" id="ArchiveCompressionLevel">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveCompressionLevel"></a><h3>1.2. ArchiveCompressionLevel</h3>
+<div class="brief">
+ Enumeration for the compression level.
+          </div>
+<pre class="webidl prettyprint">    enum ArchiveCompressionLevel {"STORE", "FAST", "NORMAL", "BEST"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+STORE - No compression. The file is stored unchanged.            </li>
+            <li>
+FAST - Choose the fastest compression method, compression savings will be less.            </li>
+            <li>
+NORMAL - Default compression level.            </li>
+            <li>
+BEST - Choose the best compression method, compression may be slow.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ArchiveManagerObject">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveManagerObject"></a><h3>2.1. ArchiveManagerObject</h3>
+<div class="brief">
+ The ArchiveManagerObject interface defines what is instantiated in the <em>Tizen</em> object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface ArchiveManagerObject {
+        readonly attribute <a href="#ArchiveManager">ArchiveManager</a> archive;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ArchiveManagerObject">ArchiveManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.archive</em> object allows access to the Archive API.
+          </p>
+         </div>
+</div>
+<div class="dictionary" id="ArchiveFileOptions">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileOptions"></a><h3>2.2. ArchiveFileOptions</h3>
+<div class="brief">
+ The ArchiveFileOptions dictionary represents the option to decide if an archive file can be overwritten when an archive file is opened.
+          </div>
+<pre class="webidl prettyprint">    dictionary ArchiveFileOptions {
+        boolean overwrite;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="ArchiveFileOptions::overwrite"><span class="attrName">boolean overwrite</span></dt>
+<dd>
+<div class="brief">
+ Indicates whether opening an archive file for writing can overwrite the contents of the existing file.
+            </div>
+<div class="description">
+            <ul>
+              <li>
+true - The archive file is overwritten if an archive file with a same name exists in the same location. The previous contents are lost.              </li>
+              <li>
+false - The archive file is not overwritten if an archive file with a same name exists in the same location.              </li>
+            </ul>
+            <p>
+The default value is <var>false</var>            </p>
+            <p>
+See description of the <em>mode</em> argument of the <em>open()</em> method.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="ArchiveFileEntryOptions">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntryOptions"></a><h3>2.3. ArchiveFileEntryOptions</h3>
+<div class="brief">
+ The ArchiveFileEntryOptions dictionary controls behavior when adding a file to an archive.
+          </div>
+<pre class="webidl prettyprint">    dictionary ArchiveFileEntryOptions {
+        DOMString destination;
+
+        boolean stripSourceDirectory;
+
+        <a href="#ArchiveCompressionLevel">ArchiveCompressionLevel</a> compressionLevel;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="ArchiveFileEntryOptions::destination"><span class="attrName">DOMString destination</span></dt>
+<dd>
+<div class="brief">
+ Path where <em>ArchiveFileEntry</em> should be stored in an archive file.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="remark"> Remark : </span>
+ If destination is not set, then the root directory of archive will be used (equivalent to <var>destination = ""</var>).
+            </p>
+</dd>
+<dt class="member" id="ArchiveFileEntryOptions::stripSourceDirectory"><span class="attrName">boolean stripSourceDirectory</span></dt>
+<dd>
+<div class="brief">
+ Controls whether leading directory information is stripped from the source file name before storing.
+            </div>
+<div class="description">
+            <p>
+The virtual root is always removed.
+To omit all the remaining directory names, set <em>stripSourceDirectory</em> to <var>true</var>.
+            </p>
+            <table>
+              <tr>
+                <th rowspan="2">
+Source file name                </th>
+                <th colspan="2">
+Target file name when <em>destination</em> is "mypackage"                </th>
+              </tr>
+              <tr>
+                <th>
+stripSourceDirectory: <em>true</em>                </th>
+                <th>
+stripSourceDirectory: <em>false</em>                </th>
+              </tr>
+              <tr>
+                <td>
+documents/tizen/archive/example/test.js                </td>
+                <td>
+mypackage/test.js                </td>
+                <td>
+mypackage/tizen/archive/example/test.js                </td>
+              </tr>
+              <tr>
+                <td>
+wgt-private/test/js/main.js                </td>
+                <td>
+mypackage/main.js                </td>
+                <td>
+mypackage/test/js/main.js                </td>
+              </tr>
+              <tr>
+                <td>
+downloads/test.c                </td>
+                <td>
+mypackage/test.c                </td>
+                <td>
+mypackage/test.c                </td>
+              </tr>
+            </table>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="remark"> Remark : </span>
+ The default value is <var>false</var>.
+            </p>
+</dd>
+<dt class="member" id="ArchiveFileEntryOptions::compressionLevel"><span class="attrName"><a href="#ArchiveCompressionLevel">ArchiveCompressionLevel</a> compressionLevel</span></dt>
+<dd>
+<div class="brief">
+ Compression level.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="remark"> Remark : </span>
+ The default compression level is <var>NORMAL</var>.
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveManager">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveManager"></a><h3>2.4. ArchiveManager</h3>
+<div class="brief">
+ The ArchiveManager interface provides methods for global operations related to ArchiveFile.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface ArchiveManager {
+        long open(<a href="#FileReference">FileReference</a> file,
+                  <a href="filesystem.html#FileMode">FileMode</a> mode,
+                  <a href="#ArchiveFileSuccessCallback">ArchiveFileSuccessCallback</a> onsuccess,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                  optional <a href="#ArchiveFileOptions">ArchiveFileOptions</a>? options) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void abort(long operationIdentifier) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveManager::open">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveManager::open"></a><code><b><span class="methodName">open</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Opens the archive file. After this operation, it is possible to add or get files to and from the archive.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long open(<a href="#FileReference">FileReference</a> file, <a href="filesystem.html#FileMode">FileMode</a> mode, <a href="#ArchiveFileSuccessCallback">ArchiveFileSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileOptions">ArchiveFileOptions</a>? options);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If archiveFile format is not recognized              </li>
+              <li>
+NotFoundError: If the <em>mode</em> is "r" and the <em>file</em> does not exist, or the <em>mode</em> is not "r" and the <em>file</em> cannot be created because the path of the file after excluding its file name does not exist              </li>
+              <li>
+IOError: If the access is denied due to insufficient permissions              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+            <p>
+Use <em>mode</em> depending on which operation are intended:
+            </p>
+            <table>
+              <tr>
+                <th>
+Mode                </th>
+                <th>
+Description                </th>
+              </tr>
+              <tr>
+                <td>
+r                </td>
+                <td>
+Use this mode for extracting or getting information about the contents of an archive file. <br><em>file</em> must exist. If the <em>file</em> does not exist, <em>onerror</em> will be invoked (<em>NotFoundError</em>).<br>When an archive file is opened in this mode, <em>add()</em> will not be available. (<em>IOError</em> will be thrown.)                 </td>
+              </tr>
+              <tr>
+                <td>
+w                </td>
+                <td>
+Use this mode to create an archive file and add files to the archive file. <br>If <em>file</em> does not exist, it will be created. <br>If <em>file</em> exists and the <em>overwrite</em> option is <var>true</var>, the existing file will be overwritten with empty archive. <br>If <em>file</em> exists and the <em>overwrite</em> option is <var>false</var>, <em>onerror</em> callback will be invoked (<em>InvalidModificationError</em>). <br>When an archive file is opened in this mode, <em>getEntries()</em>, <em>getEntryByName()</em>, and <em>extractAll()</em> are not available. (<em>IOError</em> will be thrown.)
+                </td>
+              </tr>
+              <tr>
+                <td>
+rw                </td>
+                <td>
+Use this mode for archive zipping/unzipping. <br>If <em>file</em> does not exist, it will be created. <br>If <em>file</em> exists and the <em>overwrite</em> option is <var>true</var>, the existing file will be overwritten with an empty archive. <br>If <em>file</em> exists and the <em>overwrite</em> option is <var>false</var>, the existing contents are preserved.
+Both adding and extracting will be available. <br>                </td>
+              </tr>
+              <tr>
+                <td>
+a                </td>
+                <td>
+Use this mode to add new files to an archive file. <br>If <em>file</em> does not exist, it will be created. <br>If <em>file</em> exists, then the previous contents of the archive file are preserved and new files can be added to the archive file.
+In this mode, <em>getEntries()</em>, <em>getEntryByName()</em>, and <em>extractAll()</em> are not available. (<em>IOError</em> will be thrown.)
+                </td>
+              </tr>
+            </table>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">file</span>: 
+ File to open
+                </li>
+          <li class="param">
+<span class="name">mode</span>: 
+ File mode for the opened archive. Determines which operations are available
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when archive is opened successfully
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">options</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Additional options for initializing the ArchiveFile instance
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Task ID which can be used to cancel the operation with abort()
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if parameter type does not match.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successCallback(archive) {
+     console.log("Success, can now read from archive " + archive);
+ }
+
+ function errorCallback(error) {
+     console.log(error);
+ }
+
+ tizen.archive.open("downloads/some_archive.zip", "r", successCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ArchiveManager::abort">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveManager::abort"></a><code><b><span class="methodName">abort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Cancels an operation with the given identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void abort(long operationIdentifier);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">operationIdentifier</span>: 
+ Task ID returned by an asynchronous function from this module
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function openSuccess(archive) {
+     operationId = archive.extractAll("downloads/extracted");
+     tizen.archive.abort(operationId);
+ }
+
+ tizen.archive.open("downloads/some_archive.zip", "r", openSuccess);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveFile">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFile"></a><h3>2.5. ArchiveFile</h3>
+<div class="brief">
+ The ArchiveFile interface provides access to member files of the archive file.
+          </div>
+<pre class="webidl prettyprint">    interface ArchiveFile {
+        readonly attribute <a href="filesystem.html#FileMode">FileMode</a> mode;
+
+        readonly attribute unsigned long long? decompressedSize;
+
+        long add(<a href="#FileReference">FileReference</a> sourceFile,
+                 optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                 optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                 optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress,
+                 optional <a href="#ArchiveFileEntryOptions">ArchiveFileEntryOptions</a>? options) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long extractAll(<a href="#FileReference">FileReference</a> destinationDirectory,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                        optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress,
+                        optional boolean? overwrite) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getEntries(<a href="#ArchiveFileEntryArraySuccessCallback">ArchiveFileEntryArraySuccessCallback</a> onsuccess,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getEntryByName(DOMString name,
+                            <a href="#ArchiveFileEntrySuccessCallback">ArchiveFileEntrySuccessCallback</a> onsuccess,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ArchiveFile::mode">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">FileMode </span><span class="name">mode</span></span><div class="brief">
+ attribute File mode when it is opened.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ArchiveFile::decompressedSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">decompressedSize</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Size of all the files included in the archive after decompression.
+            </div>
+<div class="description">
+            <p>
+The size is <var>null</var> until the archive is opened.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveFile::add">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFile::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a new member file to <em>ArchiveFile</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long add(<a href="#FileReference">FileReference</a> sourceFile, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress, optional <a href="#ArchiveFileEntryOptions">ArchiveFileEntryOptions</a>? options);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If <em>sourceFile</em> refers to a directory,
+the directory and its content will be added to ArchiveFile.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If the given <em>sourceFile</em> does not exist              </li>
+              <li>
+IOError: If archiveFile can not be written due the lack of access permission              </li>
+              <li>
+InvalidModificationError: If the operation results in a name conflict in the archive<br>i.e. two entries in the archive with the same name (including directory names).              </li>
+              <li>
+UnknownError: In any case of any other error              </li>
+            </ul>
+            <p>
+Name stored for new entries is constructed from <em>sourceFile</em> according to the
+<a href="#ArchiveFileEntryOptions::stripSourceDirectory">stripSourceDirectory</a> and <a href="#ArchiveFileEntryOptions::destination">destination</a> options. Names are constructed as follows:
+            </p>
+            <table>
+              <tr>
+                <th>
+source file                </th>
+                <th>
+destination                </th>
+                <th>
+stripSourceDirectory                </th>
+                <th>
+resulting entry name                </th>
+              </tr>
+              <tr>
+                <td>
+documents/subdir/second/justName.ext                </td>
+                <td>
+<em>(empty)</em>                </td>
+                <td>
+<var>false</var>                </td>
+                <td>
+subdir/second/justName.ext                </td>
+              </tr>
+              <tr>
+                <td>
+documents/subdir/second/justName.ext                </td>
+                <td>
+<em>(empty)</em>                </td>
+                <td>
+<var>true</var>                </td>
+                <td>
+justName.ext                </td>
+              </tr>
+              <tr>
+                <td>
+documents/subdir/justName.ext                </td>
+                <td>
+"report3"                </td>
+                <td>
+<var>false</var>                </td>
+                <td>
+report3/subdir/justName.ext                </td>
+              </tr>
+              <tr>
+                <td>
+documents/subdir/justName.ext                </td>
+                <td>
+"report3"                </td>
+                <td>
+<var>true</var>                </td>
+                <td>
+report3/justName.ext                </td>
+              </tr>
+            </table>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">sourceFile</span>: 
+ File or directory to be added to archive
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when this operation is completed successfully
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">onprogress</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked to notify about operation progress <br>It is called every time a single source file has been completely added.
+If the source file is big then the callback can also be called while the file is being processed.
+                </li>
+          <li class="param">
+<span class="name">options</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Additional options used to control how the sourceFile will be compressed and stored in the archive
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Task ID which can be used to cancel the operation with abort()
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if parameter is of the wrong type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidStateError, if ArchiveFile is not open.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidAccessError, if the file mode is <var>"r"</var>.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function errorCallback(error) {
+     console.log(error);
+ }
+
+ function successCallback() {
+     console.log("done");
+ }
+
+ function progressCallback(opId, val, name) {
+     console.log("opId: " + opId + " with progress val: " + val);
+ }
+
+ function createSuccess(archive) {
+     archive.add("downloads/file.txt", successCallback, errorCallback, progressCallback);
+ }
+
+ tizen.archive.open("downloads/new_archive.zip", "w", createSuccess);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ArchiveFile::extractAll">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFile::extractAll"></a><code><b><span class="methodName">extractAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Extracts every file from this <em>ArchiveFile</em> to a given directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long extractAll(<a href="#FileReference">FileReference</a> destinationDirectory, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress, optional boolean? overwrite);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+All extracted files will be located in the given directory.
+            </p>
+            <p>
+The <var>overwrite</var> attribute determines whether extracted files can overwrite existing files.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If the given <em>destinationDirectory</em> does not exist              </li>
+              <li>
+IOError: If destinationDirectory can not be written to (e.g due to insufficient permissions)              </li>
+              <li>
+InvalidModificationError: If during extracting it is detected that an existing file would
+have to be overwritten and the <em>overwrite</em> argument is <var>false</var>              </li>
+              <li>
+UnknownError: In any other error case              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">destinationDirectory</span>: 
+ Directory where extracted files will be stored <br>Specified as a virtual path or a <em>File</em> object representing a directory.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an archive is extracted successfully
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">onprogress</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked while the extracting is in progress <br>The onprogress callback is called at least once. It will be invoked for every extracted file.
+                </li>
+          <li class="param">
+<span class="name">overwrite</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Flag indicating whether to overwrite or keep the existing files with the same name in the <var>destinationDirectory</var> location when extracting an archive <br>By default, this attribute is set to <var>false</var>.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Task ID which can be used to cancel the operation with abort()
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if parameter is of the wrong type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidStateError, if ArchiveFile is not open.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidAccessError, if the file mode is <var>"w"</var> or <var>"a"</var>.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function errorCallback(error) {
+     console.log(error);
+ }
+
+ function successCallback() {
+     console.log("done");
+ }
+
+ function progressCallback(opId, val, name) {
+     console.log("extracting operation (: " + opId + ") is in progress (" + (val * 100).toFixed(1) + "%)");
+ }
+
+ function openSuccess(archive) {
+     archive.extractAll("music", successCallback, errorCallback, progressCallback);
+ }
+
+ tizen.archive.open("downloads/some_archive.zip", "r", openSuccess);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ArchiveFile::getEntries">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFile::getEntries"></a><code><b><span class="methodName">getEntries</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Retrieves information about the member files in <em>ArchiveFile</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getEntries(<a href="#ArchiveFileEntryArraySuccessCallback">ArchiveFileEntryArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when information about all the files in the archive is successfully retrieved
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Task ID which can be used to cancel the operation with abort()
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if parameter is of the wrong type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidStateError, if ArchiveFile is not open.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidAccessError, if the file mode is <var>"w"</var> or <var>"a"</var>.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function errorCallback(error) {
+     console.log(error);
+ }
+
+ function getEntriesSuccess(entries) {
+     console.log("Entries length: " + entries.length);
+     for (var i=0; i &lt; entries.length; i++) {
+         console.log(entries[i].name);
+     }
+ }
+
+ function openSuccess(archive) {
+     archive.getEntries(getEntriesSuccess, errorCallback);
+ }
+
+ tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ArchiveFile::getEntryByName">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFile::getEntryByName"></a><code><b><span class="methodName">getEntryByName</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Retrieves information about <em>ArchiveFileEntry</em> with the specified name in <em>ArchiveFile</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getEntryByName(DOMString name, <a href="#ArchiveFileEntrySuccessCallback">ArchiveFileEntrySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If <em>ArchiveFileEntry</em> with the specific name does not exist              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">name</span>: 
+ Name of <em>ArchiveFileEntry</em> to extract
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a file matched with the given name is found
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Task ID which can be used to cancel the operation with abort()
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if parameter is of the wrong type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidStateError, if ArchiveFile is not opened.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidAccessError, if the file mode is <var>"w"</var> or <var>"a"</var>.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function errorCallback(error) {
+     console.log(error);
+ }
+
+ function getEntrySuccess(entry) {
+     console.log("Entry: " + entry.name + " size: " + entry.size);
+ }
+
+ function openSuccess(archive) {
+     archive.getEntryByName("arch/my_file.txt", getEntrySuccess, errorCallback);
+ }
+
+ tizen.archive.open("downloads/some_archive.zip", "r", openSuccess);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ArchiveFile::close">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFile::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes the <em>ArchiveFile</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Call this method when the archive file is not used any more. Once you call this method, the archive file object will not be available and any further operation attempt results in an <em>InvalidStateError</em>.<br>Calling <em>close()</em> on an archive file object which is already closed does not raise any exception.
+            </p>
+           </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveFileEntry">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntry"></a><h3>2.6. ArchiveFileEntry</h3>
+<div class="brief">
+ The ArchiveFileEntry interface provides access to ArchiveFile member information and file data.
+          </div>
+<pre class="webidl prettyprint">    interface ArchiveFileEntry {
+        readonly attribute DOMString name;
+
+        readonly attribute unsigned long long size;
+
+        readonly attribute unsigned long long? compressedSize;
+
+        readonly attribute Date modified;
+
+        long extract(<a href="#FileReference">FileReference</a> destinationDirectory,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                     optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress,
+                     optional boolean? stripName,
+                     optional boolean? overwrite) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ArchiveFileEntry::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ Path identifying the member file of ArchiveFile. <br>This is a full path with the directory and base name of the entry.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ArchiveFileEntry::size">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">size</span></span><div class="brief">
+ Original size of the member file [bytes].
+            </div>
+<div class="description">
+            <p>
+If the ArchiveFileEntry member is a folder, the attribute value will be the sum of sizes of all files in this directory.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ArchiveFileEntry::compressedSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">compressedSize</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Amount of storage space used by the member file, which may be compressed, in ArchiveFile [bytes].
+            </div>
+<div class="description">
+            <p>
+If ArchiveFileEntry member is a folder, the attribute will be sum of the sizes of all files in this directory.
+            </p>
+            <p>
+Until a new entry is added to the archive, the compressedSize is <var>null</var>            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ArchiveFileEntry::modified">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modified</span></span><div class="brief">
+ Date and time stored with the member file.
+This is usually the modification date of the file.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveFileEntry::extract">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntry::extract"></a><code><b><span class="methodName">extract</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Extracts ArchiveFileEntry to the given location.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long extract(<a href="#FileReference">FileReference</a> destinationDirectory, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress, optional boolean? stripName, optional boolean? overwrite);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If the given <em>destinationDirectory</em> does not exist              </li>
+              <li>
+InvalidModificationError: If the file already exists and overwriting is not allowed              </li>
+              <li>
+IOError: If destinationDirectory can not be written to              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">destinationDirectory</span>: 
+ Directory where extracted files will be stored <br>Given as a virtual path or a <em>File</em> object representing a directory.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an extract operation is completed
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">onprogress</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked while the extracting is in progress <br>The onprogress callback is called at least once. It will be invoked for every extracted file.
+                </li>
+          <li class="param">
+<span class="name">stripName</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Flag which determines if directory name part of <em>ArchiveFileEntry</em> should be removed or preserved <br>The default value is <var>false</var>. If it is <var>true</var>, use only base name (part after last slash) as a target path.
+                </li>
+          <li class="param">
+<span class="name">overwrite</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Flag which determines if it possible to overwrite files when the decompressed file already exists in this destination location <br>The default value is <var>false</var>.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Task ID which can be used to cancel the operation with abort()
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if parameter is of the wrong type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if directory parameter does not represent a directory.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function errorCallback(error) {
+     console.log(error);
+ }
+
+ function extractSuccessCallback() {
+     console.log("done");
+ }
+
+ function getEntrySuccess(entry) {
+     entry.extract("downloads/extract", extractSuccessCallback, errorCallback);
+ }
+
+ function openSuccess(archive) {
+     archive.getEntryByName("my_file.txt", getEntrySuccess, errorCallback);
+ }
+
+ tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, errorCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveFileSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileSuccessCallback"></a><h3>2.7. ArchiveFileSuccessCallback</h3>
+<div class="brief">
+ The ArchiveFileSuccessCallback interface provides a SuccessCallback for the ArchiveManager::open() method.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileSuccessCallback {
+        void onsuccess(<a href="#ArchiveFile">ArchiveFile</a> archive);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveFileSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the archive file with the given name is ready to use.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ArchiveFile">ArchiveFile</a> archive);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">archive</span>: 
+ Archive file object
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveFileEntrySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntrySuccessCallback"></a><h3>2.8. ArchiveFileEntrySuccessCallback</h3>
+<div class="brief">
+ The ArchiveFileEntrySuccessCallback interface provides a SuccessCallback for the ArchiveFile::getEntryByName() method.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileEntrySuccessCallback {
+        void onsuccess(<a href="#ArchiveFileEntry">ArchiveFileEntry</a> entry);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveFileEntrySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntrySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the file with the given name through getEntryByName() is found successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ArchiveFileEntry">ArchiveFileEntry</a> entry);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">entry</span>: 
+ ArchiveFileEntry object representing the file found in ArchiveFile
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveFileEntryArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntryArraySuccessCallback"></a><h3>2.9. ArchiveFileEntryArraySuccessCallback</h3>
+<div class="brief">
+ The ArchiveFileEntryArraySuccessCallback interface provides a SuccessCallback for the ArchiveFile::getEntries() method.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileEntryArraySuccessCallback {
+        void onsuccess(<a href="#ArchiveFileEntry">ArchiveFileEntry</a>[] entries);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveFileEntryArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileEntryArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when all file entries in the archive file are retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ArchiveFileEntry">ArchiveFileEntry</a>[] entries);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">entries</span>: 
+ List of ArchiveFileEntry objects found in ArchiveFile
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ArchiveFileProgressCallback">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileProgressCallback"></a><h3>2.10. ArchiveFileProgressCallback</h3>
+<div class="brief">
+ The ArchiveFileProgressCallback interface provides a ProgressCallback for ArchiveFile and ArchiveFileEntry methods.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileProgressCallback {
+        void onprogress(long operationIdentifier, double value, DOMString filename);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ArchiveFileProgressCallback::onprogress">
+<a class="backward-compatibility-anchor" name="::Archive::ArchiveFileProgressCallback::onprogress"></a><code><b><span class="methodName">onprogress</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called to signal compressing or extracting operation progress.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onprogress(long operationIdentifier, double value, DOMString filename);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">operationIdentifier</span>: 
+ Operation identifier for which progress is reported
+                </li>
+          <li class="param">
+<span class="name">value</span>: 
+ Progress of the operation, value between 0.0 and 1.0 where 1.0 is 100% progress
+                </li>
+          <li class="param">
+<span class="name">filename</span>: 
+ Name of the compressed or extracted file
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Archive {
+
+    typedef (DOMString or <a href="filesystem.html#File">File</a>) FileReference;
+
+    enum ArchiveCompressionLevel {"STORE", "FAST", "NORMAL", "BEST"};
+
+    [NoInterfaceObject] interface ArchiveManagerObject {
+        readonly attribute <a href="#ArchiveManager">ArchiveManager</a> archive;
+    };
+
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ArchiveManagerObject">ArchiveManagerObject</a>;
+
+    dictionary ArchiveFileOptions {
+        boolean overwrite;
+
+    };
+
+    dictionary ArchiveFileEntryOptions {
+        DOMString destination;
+
+        boolean stripSourceDirectory;
+
+        <a href="#ArchiveCompressionLevel">ArchiveCompressionLevel</a> compressionLevel;
+
+    };
+
+    [NoInterfaceObject] interface ArchiveManager {
+        long open(<a href="#FileReference">FileReference</a> file,
+                  <a href="filesystem.html#FileMode">FileMode</a> mode,
+                  <a href="#ArchiveFileSuccessCallback">ArchiveFileSuccessCallback</a> onsuccess,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                  optional <a href="#ArchiveFileOptions">ArchiveFileOptions</a>? options) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void abort(long operationIdentifier) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    interface ArchiveFile {
+        readonly attribute <a href="filesystem.html#FileMode">FileMode</a> mode;
+
+        readonly attribute unsigned long long? decompressedSize;
+
+        long add(<a href="#FileReference">FileReference</a> sourceFile,
+                 optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                 optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                 optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress,
+                 optional <a href="#ArchiveFileEntryOptions">ArchiveFileEntryOptions</a>? options) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long extractAll(<a href="#FileReference">FileReference</a> destinationDirectory,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                        optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress,
+                        optional boolean? overwrite) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getEntries(<a href="#ArchiveFileEntryArraySuccessCallback">ArchiveFileEntryArraySuccessCallback</a> onsuccess,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getEntryByName(DOMString name,
+                            <a href="#ArchiveFileEntrySuccessCallback">ArchiveFileEntrySuccessCallback</a> onsuccess,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    interface ArchiveFileEntry {
+        readonly attribute DOMString name;
+
+        readonly attribute unsigned long long size;
+
+        readonly attribute unsigned long long? compressedSize;
+
+        readonly attribute Date modified;
+
+        long extract(<a href="#FileReference">FileReference</a> destinationDirectory,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                     optional <a href="#ArchiveFileProgressCallback">ArchiveFileProgressCallback</a>? onprogress,
+                     optional boolean? stripName,
+                     optional boolean? overwrite) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileSuccessCallback {
+        void onsuccess(<a href="#ArchiveFile">ArchiveFile</a> archive);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileEntrySuccessCallback {
+        void onsuccess(<a href="#ArchiveFileEntry">ArchiveFileEntry</a> entry);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileEntryArraySuccessCallback {
+        void onsuccess(<a href="#ArchiveFileEntry">ArchiveFileEntry</a>[] entries);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface ArchiveFileProgressCallback {
+        void onprogress(long operationIdentifier, double value, DOMString filename);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html
new file mode 100644 (file)
index 0000000..e73a349
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html
@@ -0,0 +1,455 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Badge API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Badge">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Badge API</h1></div>
+<div class="brief">
+ The Badge API provides Badge management functionality. It provides functions for creating and updating a badge.
+The application with new unread information has a number in the upper right hand corner of the app icon. This number is called a badge.
+For example, when a new message is received the badge count appears on the app icon. The badge remains until the message is read by the user.
+        </div>
+<div class="description">
+        <p>
+For more information about how to use Badge API, see <a href="../../../../../org.tizen.guides/html/web/tizen/ui/badge_w.htm">Badge Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#BadgeManagerObject">BadgeManagerObject</a>
+</li>
+<li>1.2. <a href="#BadgeManager">BadgeManager</a>
+</li>
+<li>1.3. <a href="#BadgeChangeCallback">BadgeChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#BadgeManagerObject">BadgeManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BadgeManager">BadgeManager</a></td>
+<td>void <a href="#BadgeManager::setBadgeCount">setBadgeCount</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, long count)<br>
+    long <a href="#BadgeManager::getBadgeCount">getBadgeCount</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId)<br>
+    void <a href="#BadgeManager::addChangeListener">addChangeListener</a> (<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback)<br>
+    void <a href="#BadgeManager::removeChangeListener">removeChangeListener</a> (<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList)</td>
+</tr>
+<tr>
+<td><a href="#BadgeChangeCallback">BadgeChangeCallback</a></td>
+<td>void <a href="#BadgeChangeCallback::onsuccess">onsuccess</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, long count)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="BadgeManagerObject">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManagerObject"></a><h3>1.1. BadgeManagerObject</h3>
+<div class="brief">
+ The BadgeManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BadgeManagerObject {
+         readonly attribute <a href="#BadgeManager">BadgeManager</a> badge;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BadgeManagerObject">BadgeManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+There is a tizen.badge object that allows accessing the functionality of the Badge API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="BadgeManager">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager"></a><h3>1.2. BadgeManager</h3>
+<div class="brief">
+ The BadgeManager interface manages Badge functionality. It provides functions for creating and updating a badge, and registering for badge change events.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BadgeManager {
+        readonly attribute long maxBadgeCount;
+
+        void setBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void addChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[]appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="BadgeManager::maxBadgeCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">maxBadgeCount</span></span><div class="brief">
+ Maximum length of a badge number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BadgeManager::setBadgeCount">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::setBadgeCount"></a><code><b><span class="methodName">setBadgeCount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the badge count for the designated application. Only applications with the same author signature can have their badge count modified.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+ ID of the application to update the badge
+                </li>
+          <li class="param">
+<span class="name">count</span>: 
+ Number to display as the badge on the application icon<br>To remove the badge, set the value of this param to 0.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError,  if the application does not have the privilege to call this method or if the author signature does not match that of the designated application.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     tizen.badge.setBadgeCount("AVbg1ZHu6l.BadgeSample", 3);
+ } catch(e) {
+     console.log("Error Exception, error name : " + e.name + ", error message : " + e.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BadgeManager::getBadgeCount">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::getBadgeCount"></a><code><b><span class="methodName">getBadgeCount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the badge count for the designated application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+ ID of the designated application
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Count of the badge
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError,  if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     var count = tizen.badge.getBadgeCount("AVbg1ZHu6l.BadgeSample");
+ } catch(e) {
+     console.log("Error Exception, error name : " + e.name + ", error message : " + e.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BadgeManager::addChangeListener">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::addChangeListener"></a><code><b><span class="methodName">addChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to receive a notification when the badge number for the designated application changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appIdList</span>: 
+ Array of the ID of the designated application
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when a badge number change notification is received
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  function watcher(appId, count) {
+      console.log(appId + ' badge number were updated : ' + count);
+  }
+
+  // Registers to be notified when the badge number changes
+  tizen.badge.addChangeListener(["AVbg1ZHu6l.BadgeSample", "BDb5tZJe47.TestSample"], watcher);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BadgeManager::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notifications for badge number changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appIdList</span>: 
+ Array of the ID of the designated application
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Receives badge number changes
+  function watcher(appId, count) {
+      console.log(appId + ' badge number were updated : ' + count);
+  }
+
+  // Registers to be notified when the badge number changes
+  tizen.badge.addChangeListener(["AVbg1ZHu6l.BadgeSample", "BDb5tZJe47.TestSample"], watcher);
+
+  // Cancels the watch operation
+  tizen.badge.removeChangeListener(["AVbg1ZHu6l.BadgeSample", "BDb5tZJe47.TestSample"]);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BadgeChangeCallback">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeChangeCallback"></a><h3>1.3. BadgeChangeCallback</h3>
+<div class="brief">
+ The BadgeChangeCallback interface specifies a set of methods that are invoked every time a badge number change occurs.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface BadgeChangeCallback {
+        void onsuccess(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BadgeChangeCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeChangeCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the badge number of a specified application is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+ ID of the designated application
+                </li>
+          <li class="param">
+<span class="name">count</span>: 
+ Count of the badge
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">2. Full WebIDL</h2>
+<pre class="webidl prettyprint"> module Badge{
+
+    [NoInterfaceObject] interface BadgeManagerObject {
+         readonly attribute <a href="#BadgeManager">BadgeManager</a> badge;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BadgeManagerObject">BadgeManagerObject</a>;
+
+    [NoInterfaceObject] interface BadgeManager {
+        readonly attribute long maxBadgeCount;
+
+        void setBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void addChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[]appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface BadgeChangeCallback {
+        void onsuccess(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html
new file mode 100644 (file)
index 0000000..a9d84ad
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html
@@ -0,0 +1,4478 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Bluetooth API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Bluetooth">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>Bluetooth API</h1></div>
+<div class="brief">
+ The Bluetooth API defines interfaces and methods to manage Bluetooth.
+        </div>
+<div class="description">
+        <p>
+The following Bluetooth functionalities are provided:
+        </p>
+        <ul>
+          <li>
+Controls local Bluetooth device, that is, turn Bluetooth on/off, etc.          </li>
+          <li>
+Sets visibility          </li>
+          <li>
+Discovers nearby Bluetooth devices (Device discovery)          </li>
+          <li>
+Gets bonded devices information          </li>
+          <li>
+Controls bonding          </li>
+          <li>
+Connects to a service on a remote device and exchanges data          </li>
+          <li>
+Registers a service (RFCOMM) on a local device, which can be consumed by remote devices to exchange data          </li>
+        </ul>
+        <p>
+For more information on the Bluetooth features, see <a href="../../../../../org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm">Bluetooth Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#BluetoothAddress">BluetoothAddress</a>
+</li>
+<li>1.2. <a href="#BluetoothUUID">BluetoothUUID</a>
+</li>
+<li>1.3. <a href="#BluetoothSocketState">BluetoothSocketState</a>
+</li>
+<li>1.4. <a href="#BluetoothProfileType">BluetoothProfileType</a>
+</li>
+<li>1.5. <a href="#BluetoothHealthChannelType">BluetoothHealthChannelType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#BluetoothManagerObject">BluetoothManagerObject</a>
+</li>
+<li>2.2. <a href="#BluetoothManager">BluetoothManager</a>
+</li>
+<li>2.3. <a href="#BluetoothAdapter">BluetoothAdapter</a>
+</li>
+<li>2.4. <a href="#BluetoothDevice">BluetoothDevice</a>
+</li>
+<li>2.5. <a href="#BluetoothSocket">BluetoothSocket</a>
+</li>
+<li>2.6. <a href="#BluetoothClass">BluetoothClass</a>
+</li>
+<li>2.7. <a href="#BluetoothClassDeviceMajor">BluetoothClassDeviceMajor</a>
+</li>
+<li>2.8. <a href="#BluetoothClassDeviceMinor">BluetoothClassDeviceMinor</a>
+</li>
+<li>2.9. <a href="#BluetoothClassDeviceService">BluetoothClassDeviceService</a>
+</li>
+<li>2.10. <a href="#BluetoothServiceHandler">BluetoothServiceHandler</a>
+</li>
+<li>2.11. <a href="#BluetoothProfileHandler">BluetoothProfileHandler</a>
+</li>
+<li>2.12. <a href="#BluetoothHealthProfileHandler">BluetoothHealthProfileHandler</a>
+</li>
+<li>2.13. <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a>
+</li>
+<li>2.14. <a href="#BluetoothHealthChannel">BluetoothHealthChannel</a>
+</li>
+<li>2.15. <a href="#BluetoothAdapterChangeCallback">BluetoothAdapterChangeCallback</a>
+</li>
+<li>2.16. <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a>
+</li>
+<li>2.17. <a href="#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a>
+</li>
+<li>2.18. <a href="#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a>
+</li>
+<li>2.19. <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a>
+</li>
+<li>2.20. <a href="#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a>
+</li>
+<li>2.21. <a href="#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a>
+</li>
+<li>2.22. <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a>
+</li>
+<li>2.23. <a href="#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#BluetoothManagerObject">BluetoothManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BluetoothManager">BluetoothManager</a></td>
+<td>
+<a href="#BluetoothAdapter">BluetoothAdapter</a> <a href="#BluetoothManager::getDefaultAdapter">getDefaultAdapter</a> ()</td>
+</tr>
+<tr>
+<td><a href="#BluetoothAdapter">BluetoothAdapter</a></td>
+<td>void <a href="#BluetoothAdapter::setName">setName</a> (DOMString name, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::setPowered">setPowered</a> (boolean state, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::setVisible">setVisible</a> (boolean mode, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional unsigned short? timeout)<br>
+    void <a href="#BluetoothAdapter::setChangeListener">setChangeListener</a> (<a href="#BluetoothAdapterChangeCallback">BluetoothAdapterChangeCallback</a> listener)<br>
+    void <a href="#BluetoothAdapter::unsetChangeListener">unsetChangeListener</a> ()<br>
+    void <a href="#BluetoothAdapter::discoverDevices">discoverDevices</a> (<a href="#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::stopDiscovery">stopDiscovery</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::getKnownDevices">getKnownDevices</a> (<a href="#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::getDevice">getDevice</a> (<a href="#BluetoothAddress">BluetoothAddress</a> address, <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::createBonding">createBonding</a> (<a href="#BluetoothAddress">BluetoothAddress</a> address, <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::destroyBonding">destroyBonding</a> (<a href="#BluetoothAddress">BluetoothAddress</a> address, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothAdapter::registerRFCOMMServiceByUUID">registerRFCOMMServiceByUUID</a> (<a href="#BluetoothUUID">BluetoothUUID</a> uuid, DOMString name, <a href="#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#BluetoothProfileHandler">BluetoothProfileHandler</a> <a href="#BluetoothAdapter::getBluetoothProfileHandler">getBluetoothProfileHandler</a> (<a href="#BluetoothProfileType">BluetoothProfileType</a> profileType)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothDevice">BluetoothDevice</a></td>
+<td>void <a href="#BluetoothDevice::connectToServiceByUUID">connectToServiceByUUID</a> (<a href="#BluetoothUUID">BluetoothUUID</a> uuid, <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothSocket">BluetoothSocket</a></td>
+<td>unsigned long <a href="#BluetoothSocket::writeData">writeData</a> (byte[] data)<br>
+    byte[] <a href="#BluetoothSocket::readData">readData</a> ()<br>
+    void <a href="#BluetoothSocket::close">close</a> ()</td>
+</tr>
+<tr>
+<td><a href="#BluetoothClass">BluetoothClass</a></td>
+<td>boolean <a href="#BluetoothClass::hasService">hasService</a> (unsigned short service)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothClassDeviceMajor">BluetoothClassDeviceMajor</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BluetoothClassDeviceMinor">BluetoothClassDeviceMinor</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BluetoothClassDeviceService">BluetoothClassDeviceService</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BluetoothServiceHandler">BluetoothServiceHandler</a></td>
+<td>void <a href="#BluetoothServiceHandler::unregister">unregister</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothProfileHandler">BluetoothProfileHandler</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BluetoothHealthProfileHandler">BluetoothHealthProfileHandler</a></td>
+<td>void <a href="#BluetoothHealthProfileHandler::registerSinkApplication">registerSinkApplication</a> (unsigned short dataType, DOMString name, <a href="#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#BluetoothHealthProfileHandler::connectToSource">connectToSource</a> (<a href="#BluetoothDevice">BluetoothDevice</a> peer, <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application, <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothHealthApplication">BluetoothHealthApplication</a></td>
+<td>void <a href="#BluetoothHealthApplication::unregister">unregister</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothHealthChannel">BluetoothHealthChannel</a></td>
+<td>void <a href="#BluetoothHealthChannel::close">close</a> ()<br>
+    unsigned long <a href="#BluetoothHealthChannel::sendData">sendData</a> (byte[] data)<br>
+    void <a href="#BluetoothHealthChannel::setListener">setListener</a> (<a href="#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a> listener)<br>
+    void <a href="#BluetoothHealthChannel::unsetListener">unsetListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#BluetoothAdapterChangeCallback">BluetoothAdapterChangeCallback</a></td>
+<td>void <a href="#BluetoothAdapterChangeCallback::onstatechanged">onstatechanged</a> (boolean powered)<br>
+    void <a href="#BluetoothAdapterChangeCallback::onnamechanged">onnamechanged</a> (DOMString name)<br>
+    void <a href="#BluetoothAdapterChangeCallback::onvisibilitychanged">onvisibilitychanged</a> (boolean visible)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a></td>
+<td>void <a href="#BluetoothDeviceSuccessCallback::onsuccess">onsuccess</a> (<a href="#BluetoothDevice">BluetoothDevice</a> device)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a></td>
+<td>void <a href="#BluetoothDeviceArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#BluetoothDevice">BluetoothDevice</a>[] devices)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a></td>
+<td>void <a href="#BluetoothDiscoverDevicesSuccessCallback::onstarted">onstarted</a> ()<br>
+    void <a href="#BluetoothDiscoverDevicesSuccessCallback::ondevicefound">ondevicefound</a> (<a href="#BluetoothDevice">BluetoothDevice</a> device)<br>
+    void <a href="#BluetoothDiscoverDevicesSuccessCallback::ondevicedisappeared">ondevicedisappeared</a> (<a href="#BluetoothAddress">BluetoothAddress</a> address)<br>
+    void <a href="#BluetoothDiscoverDevicesSuccessCallback::onfinished">onfinished</a> (<a href="#BluetoothDevice">BluetoothDevice</a>[] foundDevices)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a></td>
+<td>void <a href="#BluetoothSocketSuccessCallback::onsuccess">onsuccess</a> (<a href="#BluetoothSocket">BluetoothSocket</a> socket)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a></td>
+<td>void <a href="#BluetoothServiceSuccessCallback::onsuccess">onsuccess</a> (<a href="#BluetoothServiceHandler">BluetoothServiceHandler</a> handler)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a></td>
+<td>void <a href="#BluetoothHealthApplicationSuccessCallback::onsuccess">onsuccess</a> (<a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a></td>
+<td>void <a href="#BluetoothHealthChannelSuccessCallback::onsuccess">onsuccess</a> (<a href="#BluetoothHealthChannel">BluetoothHealthChannel</a> channel)</td>
+</tr>
+<tr>
+<td><a href="#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a></td>
+<td>void <a href="#BluetoothHealthChannelChangeCallback::onmessage">onmessage</a> (byte[] data)<br>
+    void <a href="#BluetoothHealthChannelChangeCallback::onclose">onclose</a> ()</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="BluetoothAddress">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAddress"></a><h3>1.1. BluetoothAddress</h3>
+<div class="brief">
+ The address of a Bluetooth device.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString BluetoothAddress;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="BluetoothUUID">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothUUID"></a><h3>1.2. BluetoothUUID</h3>
+<div class="brief">
+ The UUID of a Bluetooth service.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString BluetoothUUID;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="enum" id="BluetoothSocketState">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocketState"></a><h3>1.3. BluetoothSocketState</h3>
+<div class="brief">
+ Specified the Bluetooth socket state.
+          </div>
+<pre class="webidl prettyprint">    enum BluetoothSocketState { "CLOSED", "OPEN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="enum" id="BluetoothProfileType">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothProfileType"></a><h3>1.4. BluetoothProfileType</h3>
+<div class="brief">
+ Specifies the Bluetooth profile.
+          </div>
+<pre class="webidl prettyprint">    enum BluetoothProfileType { "HEALTH" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+</div>
+<div class="enum" id="BluetoothHealthChannelType">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannelType"></a><h3>1.5. BluetoothHealthChannelType</h3>
+<div class="brief">
+ Specifies the channel type of health device profile.
+          </div>
+<pre class="webidl prettyprint">    enum BluetoothHealthChannelType { "RELIABLE", "STREAMING" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="BluetoothManagerObject">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothManagerObject"></a><h3>2.1. BluetoothManagerObject</h3>
+<div class="brief">
+ The BluetoothManagerObject interface defines what is instantiated by the <em>Tizen</em> object from the Tizen platform.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothManagerObject {
+        readonly attribute <a href="#BluetoothManager">BluetoothManager</a> bluetooth;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BluetoothManagerObject">BluetoothManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.bluetooth</em> object allows access to the Bluetooth API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="BluetoothManager">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothManager"></a><h3>2.2. BluetoothManager</h3>
+<div class="brief">
+ The BluetoothManager interface provides access to the <em>BluetoothAdapter</em> object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothManager {
+        readonly attribute <a href="#BluetoothClassDeviceMajor">BluetoothClassDeviceMajor</a> deviceMajor;
+        readonly attribute <a href="#BluetoothClassDeviceMinor">BluetoothClassDeviceMinor</a> deviceMinor;
+        readonly attribute <a href="#BluetoothClassDeviceService">BluetoothClassDeviceService</a> deviceService;
+        <a href="#BluetoothAdapter">BluetoothAdapter</a> getDefaultAdapter() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothManager::deviceMajor">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothClassDeviceMajor </span><span class="name">deviceMajor</span></span><div class="brief">
+ The major device class identifier of Bluetooth class of device (CoD).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothManager::deviceMinor">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothClassDeviceMinor </span><span class="name">deviceMinor</span></span><div class="brief">
+ The minor device class identifier of Bluetooth class of device (CoD).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothManager::deviceService">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothClassDeviceService </span><span class="name">deviceService</span></span><div class="brief">
+ The major service class identifier of Bluetooth class of device (CoD).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothManager::getDefaultAdapter">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothManager::getDefaultAdapter"></a><code><b><span class="methodName">getDefaultAdapter</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the default local Bluetooth adapter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#BluetoothAdapter">BluetoothAdapter</a> getDefaultAdapter();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ BluetoothAdapter The local <em>BluetoothAdapter </em>object.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     var adapter = tizen.bluetooth.getDefaultAdapter() ;
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothAdapter">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter"></a><h3>2.3. BluetoothAdapter</h3>
+<div class="brief">
+ The BluetoothAdapter interface provides access to control the device's Bluetooth adapter.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothAdapter {
+        readonly attribute DOMString name;
+        readonly attribute <a href="#BluetoothAddress">BluetoothAddress</a> address;
+        readonly attribute boolean powered;
+        readonly attribute boolean visible;
+
+        void setName(DOMString name,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setPowered(boolean state,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVisible(boolean mode,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                        optional unsigned short? timeout) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setChangeListener(<a href="#BluetoothAdapterChangeCallback">BluetoothAdapterChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void discoverDevices(<a href="#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stopDiscovery(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getKnownDevices(<a href="#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getDevice(<a href="#BluetoothAddress">BluetoothAddress</a> address,
+                       <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void createBonding(<a href="#BluetoothAddress">BluetoothAddress</a> address,
+                           <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void destroyBonding(<a href="#BluetoothAddress">BluetoothAddress</a> address,
+                            optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+
+        void registerRFCOMMServiceByUUID(<a href="#BluetoothUUID">BluetoothUUID</a> uuid,
+                                         DOMString name,
+                                         <a href="#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a> successCallback,
+                                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#BluetoothProfileHandler">BluetoothProfileHandler</a> getBluetoothProfileHandler(<a href="#BluetoothProfileType">BluetoothProfileType</a> profileType) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface offers methods to control local Bluetooth behavior, such as:
+          </p>
+          <ul>
+            <li>
+Turning on/off Bluetooth radio            </li>
+            <li>
+Changing device visibility            </li>
+            <li>
+Scanning for remote devices            </li>
+            <li>
+Accessing known devices            </li>
+            <li>
+Registering a service in the device service database            </li>
+          </ul>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothAdapter::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The readable name of the Bluetooth adapter.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Access adapter name
+ var adapter = tizen.bluetooth.getDefaultAdapter();
+ console.log ("Bluetooth adapter name: " + adapter.name);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothAdapter::address">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothAddress </span><span class="name">address</span></span><div class="brief">
+ The unique hardware address of the Bluetooth adapter, also known as the MAC address.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ console.log("Bluetooth device address: " + adapter.address);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothAdapter::powered">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">powered</span></span><div class="brief">
+ The current state of the Bluetooth adapter.
+            </div>
+<div class="description">
+            <p>
+This attribute holds one of the following 2 values:
+            </p>
+            <ul>
+              <li>
+<var>true</var> - If Bluetooth adapter is currently on              </li>
+              <li>
+<var>false</var> - If Bluetooth adapter is currently off              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ console.log("Bluetooth state: " + (adapter.powered ? "On" : "Off"));
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothAdapter::visible">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visible</span></span><div class="brief">
+ The current visibility state of the Bluetooth adapter, that is, whether the local device is discoverable by remote devices.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Queries the current visible state
+ var adapter = tizen.bluetooth.getDefaultAdapter();
+ console.log ("Bluetooth Visibility: " + (adapter.visible ? "On" : "Off"));
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothAdapter::setName">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::setName"></a><code><b><span class="methodName">setName</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the local Bluetooth adapter name.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setName(DOMString name, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Sends a request to Bluetooth hardware to change the name of the local Bluetooth adapter to <em>name</em>.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError: If any of the input parameters contain an invalid value.              </li>
+              <li>
+ ServiceNotAvailableError: If a Bluetooth device is turned off.               </li>
+              <li>
+ UnknownError: In any other error case.               </li>
+              <li>
+ NotSupportedError: If a device doesn't allow a Tizen Web application to change the name of the local Bluetooth adapter.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.admin
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if this method is supported or not, use <var>tizen.systeminfo.getCapability("http://tizen.org/capability/network.bluetooth.always_on")</var>            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">name</span>: 
+            Name to set
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when the asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ var bt_always_on = tizen.systeminfo.getCapability("http://tizen.org/capability/network.bluetooth.always_on");
+
+ function changeName(newName) {
+     if (adapter.name != newName) {
+         // initiate change name
+         adapter.setName(newName, function() {
+             console.log("Adapter name changed to " + adapter.name);
+         },
+         function(e) {
+             console.log("Failed to change name: " + e.message);
+         });
+     }
+ }
+ if (bt_always_on === false) {
+     changeName("myDevice");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::setPowered">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::setPowered"></a><code><b><span class="methodName">setPowered</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the state of a Bluetooth adapter to on or off by sending a request to Bluetooth hardware to change the power state.
+For most Bluetooth actions, the Bluetooth adapter must be powered on.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ It is deprecated since Tizen 2.3 and will be removed in Tizen 3.0. Instead, let the user turn on/off Bluetooth through the Settings application. For more information, see the <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth Tutorial</a>.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint">void setPowered(boolean state, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error names:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is busy              </li>
+              <li>
+ NotSupportedError: If a device does not allow a Tizen Web application to turn on or off the Bluetooth service on a device.
+<br>   Bluetooth must be enabled on the device which the remote Bluetooth devices always work with              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/bluetooth.admin
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if this method is supported or not, use <a href="systeminfo.html#SystemInfo::getCapability">this.systeminfo.getCapability</a>(
+<a href="systeminfo_capability_keys.html#network">"http://tizen.org/capability/network.bluetooth.always_on"</a>).
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">state</span>: 
+           State to set: <var>true</var> to power on Bluetooth, <var>false</var> to power it off
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called on successful Bluetooth activation/deactivation
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called on failure of a Bluetooth activation/deactivation
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function powerOn() {
+      // If adapter is not powered on
+      if (!adapter.powered) {
+           // Initiates power on
+           adapter.setPowered(true, function() {
+               console.log("Bluetooth powered on success.");
+           },
+           function(e) {
+               console.log("Failed to power on Bluetooth: " + e.message);
+           });
+      }
+ }
+
+ function powerOff() {
+      // If powered on
+      if (adapter.powered) {
+           // Initiates power off
+           adapter.setPowered(false, function() {
+               console.log("Bluetooth powered off successfully.");
+           },
+           function(e) {
+               console.log("Failed to power off Bluetooth: " + e.message);
+           });
+      }
+ }
+
+ var bt_always_on = tizen.systeminfo.getCapability("http://tizen.org/capability/network.bluetooth.always_on");
+ if (bt_always_on === true) {
+     console.log("Bluetooth cannot be turn off or on because this device must be always enabled.");
+ } else {
+     powerOn();
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::setVisible">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::setVisible"></a><code><b><span class="methodName">setVisible</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the local device visibility by sending a request to a Bluetooth hardware to change the device visible state to <em>mode</em>.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ It is deprecated since Tizen 2.3 and will be removed in Tizen 3.0. Instead, let the user change the Bluetooth visibility through the Settings application. See the <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth</a> Tutorial.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint">void setVisible(boolean mode, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional unsigned short? timeout);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If <em>mode</em> is <var>true</var>, then the device is visible to other devices, that is, it responds to inquiry calls from remote devices for time period defined (in seconds) by <em>timeout</em>. After the timeout, the device will become invisible.
+            </p>
+            <p>
+If <em>timeout</em> is not passed or an invalid parameter is passed, the <em>timeout </em>defaults to <var>180 </var>seconds (3 minutes). A <em>timeout</em> of <var>0</var> is considered unlimited.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contain an invalid value              </li>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ NotSupportedError: If a device does not allow a Tizen Web application to change the visibility of the local device
+<br>   because some devices must be always discoverable from the remote Bluetooth devices              </li>
+              <li>
+ UnknownError - If any other error case occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetoothmanager
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if this method is supported or not, use <var>tizen.systeminfo.getCapability("http://tizen.org/capability/network.bluetooth.always_on")</var>            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+            The boolean value to set visibility
+It can either be set to: <var>true</var> - to show the device or <var>false</var> - to hide the device.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when changing visibility completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+          <li class="param">
+<span class="name">timeout</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+         The visible timeout in seconds, used only when <em>mode</em> is <var>true</var>                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function showMe() {
+      if (adapter.visible == false) {
+          //Shows device
+          adapter.setVisible(true,
+                             function() { console.log ('Device is visible to other devices for 3 minutes.'); },
+                             function(e) { console.log ('Error: ' + e.message + '(' + e.name + ')'); });
+      } else {
+           console.log("Device is already in discoverable mode.");
+      }
+ }
+
+ function hideMe() {
+     if (adapter.visible) {
+          // Hides device
+          adapter.setVisible(false,
+                             function() { console.log('Device is in-visible now.'); },
+                             function(e) { console.log ('Error: ' + e.message + '(' + e.name + ')'); });
+     } else {
+          console.log("Device is already in invisible mode.");
+     }
+ }
+
+ var bt_always_on = tizen.systeminfo.getCapability("http://tizen.org/capability/network.bluetooth.always_on");
+ if (bt_always_on === true) {
+     console.log("Because Bluetooth must be always discoverable from the remote Bluetooth devices, this method does not work. NotSupportedError would be returned through ErrorCallback.");
+ } else {
+     powerOn();
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::setChangeListener">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::setChangeListener"></a><code><b><span class="methodName">setChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the listener to receive notifications about changes of Bluetooth adapter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setChangeListener(<a href="#BluetoothAdapterChangeCallback">BluetoothAdapterChangeCallback</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ The Bluetooth Adapter event listener to set
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changeListener = {
+      onstatechanged: function(powered) {
+          console.log ("Power state is changed into: " + powered);
+      },
+      onnamechanged: function(name) {
+          console.log("Name is changed to: " + name);
+      },
+      onvisibilitychanged: function(visible) {
+          console.log("Visibility is changed into: " + visible);
+      }
+ };
+
+ var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.setChangeListener(changeListener);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::unsetChangeListener">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::unsetChangeListener"></a><code><b><span class="methodName">unsetChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener, so stop receiving notifications about changes of Bluetooth adapter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ var changeListener = {
+      onstatechanged: function(powered) {
+          console.log ("Power state is changed into: " + powered);
+          if (!powered)
+              adapter.unsetChangeListener();
+      },
+      onnamechanged: function(name) {
+          console.log("Name is changed to: " + name);
+      },
+      onvisibilitychanged: function(visible) {
+          console.log("Visibility is changed into: " + visible);
+      }
+ };
+
+ adapter.setChangeListener(changeListener);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::discoverDevices">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::discoverDevices"></a><code><b><span class="methodName">discoverDevices</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Discovers nearby Bluetooth devices if any, that is, devices within proximity to the local device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void discoverDevices(<a href="#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method initiates the device discovery process. Depending on the progress of this process the following methods are invoked:
+            </p>
+            <ul>
+              <li>
+<em>BluetoothDiscoverDevicesSuccessCallback.onstarted()</em> - when a discovery process starts successfully.              </li>
+              <li>
+<em>BluetoothDiscoverDevicesSuccessCallback.ondevicefound() </em>- when any device is found in the process and this method is invoked with the device information. If no device is found, this method will never be invoked.              </li>
+              <li>
+<em>BluetoothDiscoverDevicesSuccessCallback.ondevicedisappeared()</em> - when a device goes out of proximity and this method is invoked with the address of the device.              </li>
+              <li>
+<em>BluetoothDiscoverDevicesSuccessCallback.onfinished()</em> - when a discovery process is completed.              </li>
+            </ul>
+            <p>
+A discovery process can be canceled anytime, by calling <em>stopDiscovery() </em>on the <em>BluetoothAdapter</em>.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+  Callback function that is called when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+    Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function startDiscovery() {
+
+  var discoverDevicesSuccessCallback = {
+      onstarted: function() {
+          console.log ("Device discovery started...");
+      },
+      ondevicefound: function(device) {
+          console.log("Found device - name: " + device.name + ", Address: "+ device.address);
+      },
+      ondevicedisappeared: function(address) {
+          console.log("Device disappeared: " + address);
+      },
+      onfinished: function(devices) {
+          console.log("Found Devices");
+          for (var i = 0; i &lt; devices.length; i++) {
+              console.log("Name: " + devices[i].name + ", Address: " + devices[i].address);
+          }
+          console.log("Total: " + devices.length);
+      }
+  };
+
+  // Starts searching for nearby devices, for about 12 sec.
+  adapter.discoverDevices(discoverDevicesSuccessCallback, function(e) {
+      console.log ("Failed to search devices: " + e.message + "(" + e.name + ")");
+  });
+ }
+
+ function onSetPoweredError(e) {
+     console.log ("Could not turn on device, reason: " + e.message + "(" + e.name + ")");
+ }
+
+ adapter.setPowered(true, startDiscovery, onSetPoweredError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::stopDiscovery">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::stopDiscovery"></a><code><b><span class="methodName">stopDiscovery</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops an active device discovery session.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stopDiscovery(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Device discovery is a heavyweight procedure, hence we recommend stopping discovery as soon as the required device is found. This method cancels an active discovery session.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function to invoke when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ // Calls this method whenever user finds one of the device.
+ function cancelDiscovery() {
+    adapter.stopDiscovery(function() {
+        console.log("Stop discovery success.");
+    },
+    function (e) {
+        console.log("Error while stopDiscovery:" + e.message);
+    });
+ }
+
+ function startDiscovery() {
+
+  var discoverDevicesSuccessCallback = {
+      onstarted: function() {
+          console.log ("Device discovery started...") ;
+      },
+      ondevicefound: function(device) {
+          console.log("Found device - name: " + device.name + ", Address: "+ device.address);
+          // Shows the device to user to check if this is the device user is looking for.
+          // For example, add this to list view.
+
+          cancelDiscovery();
+      },
+      ondevicedisappeared: function(address) {
+          console.log("Device disappeared: " + address);
+          // Removes from list, as it is no longer valid.
+      },
+      onfinished: function(devices) {
+          console.log("Found Devices");
+          for (var i = 0; i &lt; devices.length; i++) {
+              console.log("Name: " + devices[i].name + ", Address: " + devices[i].address);
+          }
+          console.log("Total: " + devices.length);
+      }
+  };
+
+  // Starts searching for nearby devices, for about 12 sec.
+  adapter.discoverDevices(discoverDevicesSuccessCallback, function(e) {
+      console.log ("Failed to search devices: " + e.message + "(" + e.name + ")");
+  });
+ }
+
+ function onSetPoweredError(e) {
+     console.log ("Could not turn on device, reason: " + e.message + "(" + e.name + ")");
+ }
+
+ adapter.setPowered(true, startDiscovery, onSetPoweredError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::getKnownDevices">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::getKnownDevices"></a><code><b><span class="methodName">getKnownDevices</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets all the known devices that have information stored in the local Bluetooth adapter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getKnownDevices(<a href="#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+A known device is one of the following:
+            </p>
+            <ul>
+              <li>
+a bonded device              </li>
+              <li>
+a device found in last inquiry process              </li>
+            </ul>
+            <p>
+On success, it returns the list of currently known devices through <em>BluetoothDeviceArraySuccessCallback</em>.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function to invoke at retrieval of a list of Bluetooth devices that were bonded (paired) to the local Bluetooth adapter
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function to invoke in case of failure in finding bonded devices
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function onGotDevices(devices) {
+    console.log("Devices");
+    for (var i = 0; i &lt; devices.length; i++) {
+        console.log(" Name: " + devices[i].name + ", Address: " + devices[i].address);
+    }
+    console.log("Total: " + devices.length);
+ }
+
+ function onError(e) {
+   console.log ("Error: " + e.message);
+ }
+
+ function onBluetoothsetPowered() {
+    adapter.getKnownDevices(onGotDevices, onError);
+ }
+
+ // Turns on Bluetooth
+ adapter.setPowered(true, onBluetoothsetPowered);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::getDevice">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::getDevice"></a><code><b><span class="methodName">getDevice</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the <em>BluetoothDevice</em> object for a given device hardware address.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getDevice(<a href="#BluetoothAddress">BluetoothAddress</a> address, <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method returns device information stored in the local Bluetooth adapter for the specified device <em>address</em> through
+BluetoothDeviceSuccessCallback.
+A valid hardware address must be passed, such as "35:F4:59:D1:7A:03".
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ NotFoundError - If there is no device with the given address              </li>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">address</span>: 
+         Address of a remote Bluetooth device to get
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function gotDeviceInfo(device) {
+    console.log("Device Name: " + device.name);
+    console.log("Device Address: " + device.address);
+    console.log("Device Class: " + device.deviceClass.major);
+    console.log("Is Bonded: " + (device.isBonded ? "Yes" : "No"));
+ }
+
+ function onError(e) {
+    console.log ("Could not get device info:" + e.message);
+ }
+
+ var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("35:F4:59:D1:7A:03", gotDeviceInfo, onError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::createBonding">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::createBonding"></a><code><b><span class="methodName">createBonding</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a bond with a remote device by initiating the bonding process with peer device, using the given MAC address. The remote device must be bonded with the local device in order to connect to services of the remote device and then exchange data with each other.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void createBonding(<a href="#BluetoothAddress">BluetoothAddress</a> address, <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the bonding process is successful, the device information is sent in <em>successCallback</em>.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ NotFoundError - If there is no device with the given address              </li>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">address</span>: 
+         MAC address of remote Bluetooth address to bond with
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onBondingSuccess(device) {
+    console.log("Device Name:" + device.name);
+    console.log("Device Address:" + device.address);
+    console.log("Device Service UUIDs:" + device.uuids.join("\n"));
+ }
+
+ function onError(e) {
+    console.log ("Could not create bonding, reason:" + e.message);
+ }
+
+ var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.createBonding("35:F4:59:D1:7A:03", onBondingSuccess, onError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::destroyBonding">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::destroyBonding"></a><code><b><span class="methodName">destroyBonding</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Destroys the bond with a remote device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void destroyBonding(<a href="#BluetoothAddress">BluetoothAddress</a> address, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method initiates the process of removing the specified <em>address</em> from the list of bonded devices.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ NotFoundError - If there is no device with the given address              </li>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">address</span>: 
+         Address of a bonded device
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function gotDevice(device) {
+    if (device.isBonded) {
+      // Initiates destroying bonding
+      adapter.destroyBonding(device.address, function() {
+           console.log("Succeeded to destroy the bond success with:" + device.address);
+       },
+       function(e) {
+           console.log("Failed to destroy the bond with " + device.address + ", reason: " + e.message);
+       });
+    }
+ }
+
+ var deviceAddress = "35:F4:59:D1:7A:03";
+ adapter.getDevice(deviceAddress, gotDevice, function(e) {
+     console.log("Failed to get device info for " + deviceAddress + ", reason: " + e.message);
+ });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::registerRFCOMMServiceByUUID">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::registerRFCOMMServiceByUUID"></a><code><b><span class="methodName">registerRFCOMMServiceByUUID</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a service record in the device service record database with the specified <em>uuid</em>, <em>name</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void registerRFCOMMServiceByUUID(<a href="#BluetoothUUID">BluetoothUUID</a> uuid, DOMString name, <a href="#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+On success of the service registration, it returns a <em>BluetoothServiceHandler</em> object as the first parameter of <em>successCallback</em>, and listens for client connections.
+The service handler can be used to be notified on client connections or to unregister the service.
+User interaction is mandatory to connect to a registered service.
+            </p>
+            <p>
+If any client(remote device) connects to this service, then <em>BluetoothServiceHandler.onconnect()</em> is invoked with <em>BluetoothSocket</em> object.
+            </p>
+            <p>
+<em>BluetoothServiceHandler.unregister()</em> can be used to unregister the service record from the device service database and stop listening for client connections.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contain an invalid value              </li>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.spp
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">uuid</span>: 
+            UUID of the new service, to which clients connect
+                </li>
+          <li class="param">
+<span class="name">name</span>: 
+            Name of a service
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called on successful service registration
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ // Holds currently registered service record
+ var chatServiceHandler = null;
+ // Holds currently open socket
+ var serviceSocket = null;
+
+ function chatServiceSuccessCb(recordHandler) {
+    console.log("Chat service registration succeeds!");
+    chatServiceHandler = recordHandler;
+    recordHandler.onconnect = function(socket) {
+        console.log("Client connected: " + socket.peer.name + "," + socket.peer.address);
+        serviceSocket = socket;
+        // Messages received from remote device
+        socket.onmessage = function() {
+             var data = socket.readData();
+             // Handles message code goes here
+
+        };
+
+        socket.onclose = function() {
+            console.log('The socket is closed.');
+            serviceSocket = null;
+        };
+    };
+ };
+
+ function publishChatService() {
+    var CHAT_SERVICE_UUID = "5BCE9431-6C75-32AB-AFE0-2EC108A30860";
+    adapter.registerRFCOMMServiceByUUID(CHAT_SERVICE_UUID, "Chat service", chatServiceSuccessCb,
+      // Error handler
+      function(e) {
+           console.log( "Could not register service record, Error: " + e.message);
+      });
+ }
+
+ function unregisterChatService() {
+      if (chatServiceHandler != null) {
+          chatServiceHandler.unregister(function() {
+               console.log("Chat service is unregistered");
+               chatServiceHandler = null;
+           }, function(e) {
+               console.log("Failed to unregister service: " + e.message);
+           });
+      }
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapter::getBluetoothProfileHandler">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapter::getBluetoothProfileHandler"></a><code><b><span class="methodName">getBluetoothProfileHandler</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the profile handler for the given type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#BluetoothProfileHandler">BluetoothProfileHandler</a> getBluetoothProfileHandler(<a href="#BluetoothProfileType">BluetoothProfileType</a> profileType);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if <var>HEALTH</var> type is supported or not, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.bluetooth.health")</var>            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileType</span>: 
+ Bluetooth Profile type
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <em>profileType</em> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler;
+ var healthCapability = tizen.systeminfo.getCapability("http://tizen.org/feature/network.bluetooth.health");
+
+ if (healthCapability) {
+     healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+ } else {
+     console.log("Bluetooth Health Profile is not supported on this device.");
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothDevice">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDevice"></a><h3>2.4. BluetoothDevice</h3>
+<div class="brief">
+ The BluetoothDevice interface represents a remote Bluetooth device.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothDevice {
+        readonly attribute DOMString name;
+        readonly attribute <a href="#BluetoothAddress">BluetoothAddress</a> address;
+        readonly attribute <a href="#BluetoothClass">BluetoothClass</a> deviceClass;
+        readonly attribute boolean isBonded;
+        readonly attribute boolean isTrusted;
+        readonly attribute boolean isConnected;
+        readonly attribute <a href="#BluetoothUUID">BluetoothUUID</a>[] uuids;
+
+        void connectToServiceByUUID(<a href="#BluetoothUUID">BluetoothUUID</a> uuid,
+                                    <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a> successCallback,
+                                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+A <em>BluetoothDevice</em> object can be retrieved using one of the following APIs:
+          </p>
+          <ul>
+            <li>
+ BluetoothAdapter.getDevice()            </li>
+            <li>
+ BluetoothAdapter.getKnownDevices()             </li>
+            <li>
+ BluetoothAdapter.discoverDevices()             </li>
+            <li>
+ BluetoothAdapter.createBonding()             </li>
+          </ul>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothDevice::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The readable name of this remote device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    console.log("Device Name: " + device.name);
+ });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothDevice::address">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothAddress </span><span class="name">address</span></span><div class="brief">
+ The hardware address of this remote device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    console.log("Device Address: " + device.address);
+ });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothDevice::deviceClass">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothClass </span><span class="name">deviceClass</span></span><div class="brief">
+ The device class, which represents the type of the device and the services it provides.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    console.log("Device Major Class: " + device.deviceClass.major);
+ });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothDevice::isBonded">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isBonded</span></span><div class="brief">
+ The bond state of this remote device with the local device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    console.log("Is bonded: " + (device.isBonded ? "Yes" : "No"));
+ });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothDevice::isTrusted">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isTrusted</span></span><div class="brief">
+ The flag indicating whether the local device recognizes this remote device as a trusted device or not.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    console.log("Is trusted: " + (device.isTrusted ? "Yes" : "No"));
+ });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothDevice::isConnected">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isConnected</span></span><div class="brief">
+ The flag indicating whether the connection state of this remote device with the local device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    console.log("Is connected: " + (device.isConnected ? "Yes" : "No"));
+ });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothDevice::uuids">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothUUID[]
+                      </span><span class="name">uuids</span></span><div class="brief">
+ The list of 128 bit service UUIDs available on this remote device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var CHAT_SERVICE_UUID = "5BCE9431-6C75-32AB-AFE0-2EC108A30860";
+ adapter.getDevice("11:22:33:44:55:66", function(device) {
+    var uuids = device.uuids;
+    var services = "";
+    for (var i = 0; i &lt; uuids.length; i++) {
+        services += uuids[i] + "\n";
+    }
+    console.log ("Services found: " + services);
+    if (uuids.indexOf(CHAT_SERVICE_UUID) != -1) {
+        // Connects to service
+        device.connectToServiceByUUID(CHAT_SERVICE_UUID, function(socket) {
+            //
+            // Connected to service, handle socket
+            //
+        }, function (e) {
+            console.log("Could not connect to chat service !!!. Error: " + e.message);
+        });
+    }
+ });
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothDevice::connectToServiceByUUID">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDevice::connectToServiceByUUID"></a><code><b><span class="methodName">connectToServiceByUUID</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Connects to a specified service identified by <em>uuid</em> on this remote device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void connectToServiceByUUID(<a href="#BluetoothUUID">BluetoothUUID</a> uuid, <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If opening a connection is successful, then a <em>BluetoothSocket</em> object with open state is sent using <em>successCallback</em>, through which data can be exchanged by both devices.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ NotFoundError - If there is no service with the specified <em>uuid</em>              </li>
+              <li>
+ InvalidValuesError - If any of the input parameters contain an invalid value              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.spp
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">uuid</span>: 
+            128 bit unique identifier, which specifies the service on the remote device
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when an asynchronous call completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when opening of a socket fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var clientSocket = null;
+
+ // Calls a method that is invoked when user wants to send a message to a remote device.
+ function sendMessage(msg) {
+    // Validates socket state, if everything is ok.
+    if (clientSocket != null &amp;&amp; clientSocket.state == "OPEN") {
+        // Sends the message.
+        clientSocket.writeData(msg);
+    }
+ }
+
+ // Calls a method that is invoked when a socket is open.
+ function onSocketConnected(socket) {
+    clientSocket = socket;
+    console.log("Opening a socket successfully!!!");
+    socket.onmessage = function () {
+        var data = socket.readData();
+        var recvmsg = "";
+        for (var i = 0; i &lt; data.length; i++)
+        {
+           recvmsg += String.fromCharCode(data[i]);
+        }
+        console.log("server msg &gt;&gt; " + recvmsg);
+    };
+
+    socket.onclose = function() {
+        console.log("socket disconnected.");
+    };
+ }
+
+ function onDeviceReady(device) {
+    // Validates device and service uuid
+    if (device.uuids.indexOf("5BCE9431-6C75-32AB-AFE0-2EC108A30860") != -1) {
+       // Opens socket
+       device.connectToServiceByUUID("5BCE9431-6C75-32AB-AFE0-2EC108A30860", onSocketConnected, function(e) {
+           console.log ("Error connecting to service. Reason: " + e.message);
+        });
+    }
+    else {
+        console.log ("Chat service is not supported by this device");
+    }
+ }
+
+ function onSetPowered() {
+    // Gets the BluetoothDevice object.
+    adapter.getDevice("35:F4:59:D1:7A:03", onDeviceReady, function(e) { console.log("Error: " + e.message); });
+ }
+
+ adapter.setPowered(true, onSetPowered, function(e) {console.log ("Could not turn on Bluetooth adapter. reason: " + e.message); });
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothSocket">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocket"></a><h3>2.5. BluetoothSocket</h3>
+<div class="brief">
+ The BluetoothSocket interface represents the Bluetooth socket.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothSocket {
+        readonly attribute <a href="#BluetoothUUID">BluetoothUUID</a> uuid;
+        readonly attribute <a href="#BluetoothSocketState">BluetoothSocketState</a> state;
+        readonly attribute <a href="#BluetoothDevice">BluetoothDevice</a> peer;
+        [TreatNonCallableAsNull] attribute <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onmessage raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        [TreatNonCallableAsNull] attribute <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onclose raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        unsigned long writeData(byte[] data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        byte[] readData() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The socket object is created by <em>BluetoothDevice.connectToServiceByUUID()</em> or <em>BluetoothAdapter.registerRFCOMMServiceByUUID()</em>.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothSocket::uuid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothUUID </span><span class="name">uuid</span></span><div class="brief">
+ The service UUID to which this socket is connected.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothSocket::state">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothSocketState </span><span class="name">state</span></span><div class="brief">
+ The socket state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothSocket::peer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothDevice </span><span class="name">peer</span></span><div class="brief">
+ The peer device to which this socket is connected.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothSocket::onmessage">
+<span class="attrName"><span class="type">SuccessCallback </span><span class="name">onmessage</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Called when an incoming message is received successfully from the peer.
+By default, this attribute is set to null.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input attribute is not compatible with the expected type for this attribute.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="BluetoothSocket::onclose">
+<span class="attrName"><span class="type">SuccessCallback </span><span class="name">onclose</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Called when the socket is closed successfully.
+By default, this attribute is set to null.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input attribute is not compatible with the expected type for this attribute.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothSocket::writeData">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocket::writeData"></a><code><b><span class="methodName">writeData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes data as a sequence of bytes onto the socket and returns the number of bytes actually written.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long writeData(byte[] data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.spp
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+ The data to send
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long The number of bytes actually sent
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameters in not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function onSocketConnected(socket) {
+    console.log ("Opened connection to remote device");
+    socket.onmessage = function () {
+      console.log ("Message received: " + socket.readData());
+    };
+
+    socket.onclose = function() {
+       console.log("Socket closed with " + socket.peer.name);
+    };
+
+    // Sends data to peer.
+    var textmsg = "Test";
+    var sendtextmsg = new Array();
+    for (var i = 0; i &lt; textmsg.length; i++)
+    {
+        sendtextmsg[i] = textmsg.charCodeAt(i);
+    }
+    socket.writeData (sendtextmsg);
+ }
+
+ function onSocketError(e) {
+    console.log ("Error connecting to service. Reason: " + e.message);
+ }
+
+ function onDeviceReady(device) {
+    // Validates device and service uuid.
+    if (device.uuids.indexOf("5BCE9431-6C75-32AB-AFE0-2EC108A30860") != -1) {
+       // Opens socket
+       device.connectToServiceByUUID("5BCE9431-6C75-32AB-AFE0-2EC108A30860", onSocketConnected, onSocketError );
+    }
+ }
+ function onSetPowered() {
+    // Gets the BluetoothDevice object.
+    adapter.getDevice("35:F4:59:D1:7A:03", onDeviceReady, function(e) { console.log("Error: " + e.message); });
+ }
+
+ adapter.setPowered(true, onSetPowered, function(e) {console.log ("Could not turn on Bluetooth adapter. reason: " + e.message); });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothSocket::readData">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocket::readData"></a><code><b><span class="methodName">readData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads data from the socket.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">byte[] readData();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method should be called only in the <em>BluetoothSocket.onmessage</em> handler, that is, when data is ready on the socket.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.spp
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ byte[] The sequence of bytes successfully read
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function onError(e) {
+    console.log ("Error connecting to service. Reason: " + e.message);
+ }
+
+ function onSocketConnected(socket) {
+    console.log ("Opening socket success!!!");
+
+    socket.onmessage = function() {
+      //  Gets a message from peer, reads it
+      var data = socket.readData();
+
+      //
+      // Code to evaluate message goes here
+      //
+    };
+
+    socket.onclose = function() {
+       console.log("Socket closed with " + socket.peer.name);
+    };
+ }
+
+ function onDeviceReady(device) {
+    // Validates device and service uuid
+    if (device.uuids.indexOf("5BCE9431-6C75-32AB-AFE0-2EC108A30860") != -1) {
+       // Opens socket
+       device.connectToServiceByUUID("5BCE9431-6C75-32AB-AFE0-2EC108A30860", onSocketConnected, onError);
+    }
+ }
+ function onSetPowered() {
+    // Gets the BluetoothDevice object.
+    adapter.getDevice("35:F4:59:D1:7A:03", onDeviceReady, function(e) { console.log("Error: " + e.message); });
+ }
+
+ adapter.setPowered(true, onSetPowered, function(e) {console.log ("Could not turn on Bluetooth adapter. reason: " + e.message); });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothSocket::close">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocket::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes the socket.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+<b>BluetoothSocket.state</b> changes to <var>CLOSED</var>, and <em>BluetoothSocket.onclose()</em> is invoked on success.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.spp
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothClass">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothClass"></a><h3>2.6. BluetoothClass</h3>
+<div class="brief">
+ The BluetoothClass interface represents Bluetooth Class of Device/Service(CoD).
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothClass {
+        readonly attribute octet major;
+
+        readonly attribute octet minor;
+
+        readonly attribute unsigned short [] services ;
+
+        boolean hasService(unsigned short service) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Bluetooth device class describes the characteristics and capabilities of a device.
+          </p>
+          <p>
+Bluetooth CoD is a 24 bit integer created by the union of three components:
+          </p>
+          <ul>
+            <li>
+Exactly one <b>Major Device Class</b>(bits 8-12 of CoD) - This is the highest level of granularity for defining a Bluetooth Device.            </li>
+            <li>
+Exactly one <b>Minor Device Class</b>(bits 2-7 of CoD) - This is to be interpreted only in the context of the Major Device Class. Thus, the meaning of these bits may change, depending on the value of 'Major Device Class'.             </li>
+            <li>
+Zero or more <b>Major Service Classes</b>(bits 13-23) - Represents the services supported by the device.            </li>
+          </ul>
+          <p>
+The Major and Minor classes are intended to define a general family of devices with which any particular implementation wishes to be associated.
+No assumptions should be made about specific functionality or characteristics of any application, based solely on the assignment of a Major or minor device class.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothClass::major">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">octet </span><span class="name">major</span></span><div class="brief">
+ The major device class.
+            </div>
+<div class="description">
+            <p>
+The <em>BluetoothClassDeviceMajor</em> interface contains the list of known values.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+
+ function evaluateDevice(address) {
+    adapter.getDevice(address, function(device) {
+        if (device.deviceClass.major == tizen.bluetooth.deviceMajor.COMPUTER) {
+            // Shows computer icon for this device
+            console.log("Device is computer");
+        } else if (device.deviceClass.major == tizen.bluetooth.deviceMajor.PHONE) {
+            // Shows phone icon
+            console.log("Device is a Phone");
+        }
+    }, function(e) {
+        console.log("Couldn't get any device with the given address: " + e.message);
+    });
+ }
+
+ evaluateDevice("11:22:33:44:55:66");
+
+ </pre>
+</div>
+</li>
+<li class="attribute" id="BluetoothClass::minor">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">octet </span><span class="name">minor</span></span><div class="brief">
+ The minor device class.
+            </div>
+<div class="description">
+            <p>
+The <em>BluetoothClassDeviceMinor</em> interface contains the list of known values.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothClass::services">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short[]
+                      </span><span class="name">services</span></span><div class="brief">
+ The services provided by this device and it refers to the <em>BluetoothClassDeviceService</em> interface for the list of possible
+values.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothClass::hasService">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothClass::hasService"></a><code><b><span class="methodName">hasService</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the given service exists in the <em>services</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean hasService(unsigned short service);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.gap
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">service</span>: 
+ Service to check
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ adapter.getDevice("12:34:56:78:9A:BC", function(device) {
+    if (device.deviceClass.hasService(tizen.bluetooth.deviceService.POSITIONING)) {
+         console.log("Device supports Positioning service");
+    }
+ }, function(e) {
+    console.log("Couldn't get device for given address: " + e.message);
+ });
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothClassDeviceMajor">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothClassDeviceMajor"></a><h3>2.7. BluetoothClassDeviceMajor</h3>
+<div class="brief">
+ The BluetoothClassDeviceMajor interface holds the identifiers for major device classes of Bluetooth CoD.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothClassDeviceMajor {
+
+        const octet MISC = 0x00;
+        const octet COMPUTER = 0x01;
+        const octet PHONE = 0x02;
+        const octet NETWORK = 0x03;
+        const octet AUDIO_VIDEO = 0x04;
+        const octet PERIPHERAL = 0x05;
+        const octet IMAGING = 0x06;
+        const octet WEARABLE = 0x07;
+        const octet TOY = 0x08;
+        const octet HEALTH = 0x09;
+        const octet UNCATEGORIZED = 0x1F;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="BluetoothClassDeviceMinor">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothClassDeviceMinor"></a><h3>2.8. BluetoothClassDeviceMinor</h3>
+<div class="brief">
+ The BluetoothClassDeviceMinor interface holds the identifiers for minor device classes of Bluetooth CoD.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothClassDeviceMinor {
+        const octet COMPUTER_UNCATEGORIZED = 0x00;
+        const octet COMPUTER_DESKTOP = 0x01;
+        const octet COMPUTER_SERVER = 0x02;
+        const octet COMPUTER_LAPTOP = 0x03;
+        const octet COMPUTER_HANDHELD_PC_OR_PDA = 0x04;
+        const octet COMPUTER_PALM_PC_OR_PDA = 0x05;
+        const octet COMPUTER_WEARABLE = 0x06;
+
+        const octet PHONE_UNCATEGORIZED = 0x00;
+        const octet PHONE_CELLULAR = 0x01;
+        const octet PHONE_CORDLESS = 0x02;
+        const octet PHONE_SMARTPHONE = 0x03;
+        const octet PHONE_MODEM_OR_GATEWAY = 0x04;
+        const octet PHONE_ISDN = 0x05;
+
+        const octet AV_UNRECOGNIZED = 0x00;
+        const octet AV_WEARABLE_HEADSET = 0x01;
+        const octet AV_HANDSFREE = 0x02;
+        const octet AV_MICROPHONE = 0x04;
+        const octet AV_LOUDSPEAKER = 0x05;
+        const octet AV_HEADPHONES = 0x06;
+        const octet AV_PORTABLE_AUDIO = 0x07;
+        const octet AV_CAR_AUDIO = 0x08;
+        const octet AV_SETTOP_BOX = 0x09;
+        const octet AV_HIFI = 0x0a;
+        const octet AV_VCR = 0x0b;
+        const octet AV_VIDEO_CAMERA = 0x0c;
+        const octet AV_CAMCORDER = 0x0d;
+        const octet AV_MONITOR = 0x0e;
+        const octet AV_DISPLAY_AND_LOUDSPEAKER = 0x0f;
+        const octet AV_VIDEO_CONFERENCING = 0x10;
+        const octet AV_GAMING_TOY = 0x12;
+
+        const octet PERIPHERAL_UNCATEGORIZED = 0;
+        const octet PERIPHERAL_KEYBOARD = 0x10;
+        const octet PERIPHERAL_POINTING_DEVICE = 0x20;
+        const octet PERIPHERAL_KEYBOARD_AND_POINTING_DEVICE = 0x30;
+        const octet PERIPHERAL_JOYSTICK = 0x01;
+        const octet PERIPHERAL_GAMEPAD = 0x02;
+        const octet PERIPHERAL_REMOTE_CONTROL = 0x03;
+        const octet PERIPHERAL_SENSING_DEVICE = 0x04;
+        const octet PERIPHERAL_DEGITIZER_TABLET = 0x05;
+        const octet PERIPHERAL_CARD_READER = 0x06;
+        const octet PERIPHERAL_DIGITAL_PEN = 0x07;
+        const octet PERIPHERAL_HANDHELD_SCANNER = 0x08;
+        const octet PERIPHERAL_HANDHELD_INPUT_DEVICE = 0x09;
+
+        const octet IMAGING_UNCATEGORIZED = 0x00;
+        const octet IMAGING_DISPLAY = 0x04;
+        const octet IMAGING_CAMERA = 0x08;
+        const octet IMAGING_SCANNER = 0x10;
+        const octet IMAGING_PRINTER = 0x20;
+
+        const octet WEARABLE_WRITST_WATCH = 0x01;
+        const octet WEARABLE_PAGER = 0x02;
+        const octet WEARABLE_JACKET = 0x03;
+        const octet WEARABLE_HELMET = 0x04;
+        const octet WEARABLE_GLASSES = 0x05;
+
+        const octet TOY_ROBOT = 0x01;
+        const octet TOY_VEHICLE = 0x02;
+        const octet TOY_DOLL = 0x03;
+        const octet TOY_CONTROLLER = 0x04;
+        const octet TOY_GAME = 0x05;
+
+        const octet HEALTH_UNDEFINED = 0x00;
+        const octet HEALTH_BLOOD_PRESSURE_MONITOR = 0x01;
+        const octet HEALTH_THERMOMETER = 0x02;
+        const octet HEALTH_WEIGHING_SCALE = 0x03;
+        const octet HEALTH_GLUCOSE_METER = 0x04;
+        const octet HEALTH_PULSE_OXIMETER = 0x05;
+        const octet HEALTH_PULSE_RATE_MONITOR = 0x06;
+        const octet HEALTH_DATA_DISPLAY = 0x07;
+        const octet HEALTH_STEP_COUNTER = 0x08;
+        const octet HEALTH_BODY_COMPOSITION_ANALYZER = 0x09;
+        const octet HEALTH_PEAK_FLOW_MONITOR = 0x0a;
+        const octet HEALTH_MEDICATION_MONITOR = 0x0b;
+        const octet HEALTH_KNEE_PROSTHESIS = 0x0c;
+        const octet HEALTH_ANKLE_PROSTHESIS = 0x0d;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="BluetoothClassDeviceService">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothClassDeviceService"></a><h3>2.9. BluetoothClassDeviceService</h3>
+<div class="brief">
+ The BluetoothClassDeviceService interface holds identifiers for the major service classes of Bluetooth CoD.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothClassDeviceService {
+        const unsigned short LIMITED_DISCOVERABILITY = 0x0001;
+        const unsigned short POSITIONING = 0x0008;
+        const unsigned short NETWORKING = 0x0010;
+        const unsigned short RENDERING = 0x0020;
+        const unsigned short CAPTURING = 0x0040;
+        const unsigned short OBJECT_TRANSFER = 0x0080;
+        const unsigned short AUDIO = 0x0100;
+        const unsigned short TELEPHONY = 0x0200;
+        const unsigned short INFORMATION = 0x0400;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="BluetoothServiceHandler">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothServiceHandler"></a><h3>2.10. BluetoothServiceHandler</h3>
+<div class="brief">
+ The BluetoothServiceHandler interface provides methods to handle Bluetooth service.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothServiceHandler {
+        readonly attribute <a href="#BluetoothUUID">BluetoothUUID</a> uuid;
+        readonly attribute DOMString name;
+        readonly attribute boolean isConnected;
+        [TreatNonCallableAsNull] attribute <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a>? onconnect raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unregister(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothServiceHandler::uuid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothUUID </span><span class="name">uuid</span></span><div class="brief">
+ The UUID of the service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothServiceHandler::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The name of the service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothServiceHandler::isConnected">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isConnected</span></span><div class="brief">
+ The flag indicating whether any remote devices is using this service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="BluetoothServiceHandler::onconnect">
+<span class="attrName"><span class="type">BluetoothSocketSuccessCallback </span><span class="name">onconnect</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Called when a remote device is connected successfully to this service.
+By default, this attribute is set to null.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input attribute is not compatible with the expected type for this attribute.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothServiceHandler::unregister">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothServiceHandler::unregister"></a><code><b><span class="methodName">unregister</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters a service record from the Bluetooth services record database and stops listening for new connections to this service.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unregister(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.spp
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when the record is removed successfully from the service records database
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called in case of failure (to unregister)
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var chatServiceHandler = null;
+
+ function chatServiceSuccessCb(handler) {
+    console.log("Chat service registration was successful!");
+
+    chatServiceHandler = handler;
+    handler.onconnect = function(socket) {
+       console.log("Client is connected: " + socket.peer.name + "," + socket.peer.address);
+       socket.onmessage = function() {
+           var data = socket.readData();
+           // Handle message code goes here
+           //....
+       };
+
+       // Expected close
+       socket.onclose = function() {
+           console.log('The socket is closed.');
+       };
+    };
+ }
+
+ function publishChatService() {
+    var CHAT_SERVICE_UUID = "5BCE9431-6C75-32AB-AFE0-2EC108A30860";
+    adapter.registerRFCOMMServiceByUUID(CHAT_SERVICE_UUID, "Chat service", chatServiceSuccessCb,
+      // Error handler
+      function(e) {
+           console.log( "Could not register service record, Error: " + e.message);
+      });
+ }
+
+ function unRegisterChatService() {
+      if (chatServiceHandler != null) {
+           chatServiceHandler.unregister(function() {
+               chatServiceHandler = null;
+               console.log("Chat service is unregistered.");
+           },
+           function(e) {
+               console.log ("Error: " + e.message);
+           });
+      }
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothProfileHandler">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothProfileHandler"></a><h3>2.11. BluetoothProfileHandler</h3>
+<div class="brief">
+ The BluetoothProfileHandler interface represents the Bluetooth profile handler.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothProfileHandler {
+
+        readonly attribute <a href="#BluetoothProfileType">BluetoothProfileType</a> profileType;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="BluetoothProfileHandler::profileType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothProfileType </span><span class="name">profileType</span></span><div class="brief">
+ The Bluetooth profile type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="BluetoothHealthProfileHandler">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthProfileHandler"></a><h3>2.12. BluetoothHealthProfileHandler</h3>
+<div class="brief">
+ This interface represents the handler of Bluetooth health device profile.
+The BluetoothHealthProfileHandler object is created by <em>BluetoothAdapter.getBluetoothProfileHandler()</em>.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothHealthProfileHandler : <a href="#BluetoothProfileHandler">BluetoothProfileHandler</a> {
+
+        void registerSinkApplication(unsigned short dataType, DOMString name, <a href="#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void connectToSource(<a href="#BluetoothDevice">BluetoothDevice</a> peer, <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application, <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothHealthProfileHandler::registerSinkApplication">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthProfileHandler::registerSinkApplication"></a><code><b><span class="methodName">registerSinkApplication</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers an application for the Sink role.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void registerSinkApplication(unsigned short dataType, DOMString name, <a href="#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">dataType</span>: 
+        MDEP data type used for communication, which is referenced in the ISO/IEEE 11073-20601 spec
+For example, pulse oximeter is 4100 and blood pressure monitor is 4103.
+                </li>
+          <li class="param">
+<span class="name">name</span>: 
+            Friendly name associated with sink application
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when a sink application is registered successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothHealthProfileHandler::connectToSource">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthProfileHandler::connectToSource"></a><code><b><span class="methodName">connectToSource</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Connects to the health device which acts as the Source role.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void connectToSource(<a href="#BluetoothDevice">BluetoothDevice</a> peer, <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application, <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ InvalidValuesError - If any of the input parameters contain an invalid value              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">peer</span>: 
+            Remote device which acts as the Source role
+                </li>
+          <li class="param">
+<span class="name">application</span>: 
+     Registered application for the Sink role
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when a connection is established successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+ var registerHealthApp = null;
+
+ function healthConnectSuccess(channel) {
+     console.log("Health device is connected");
+ }
+
+ function healthConnectError(e) {
+     console.log("Failed to connect to source: " + e.message);
+ };
+
+ function gotDeviceInfo(device) {
+     healthProfileHandler.connectToSource(device, registerHealthApp, healthConnectSuccess, healthConnectError);
+ }
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+     registerHealthApp = app;
+     adapter.getDevice("35:F4:59:D1:7A:03", gotDeviceInfo);
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothHealthApplication">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthApplication"></a><h3>2.13. BluetoothHealthApplication</h3>
+<div class="brief">
+ The BluetoothHealthApplication interface represents the Bluetooth health application.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothHealthApplication {
+
+        readonly attribute unsigned short dataType;
+
+        readonly attribute DOMString name;
+
+        [TreatNonCallableAsNull] attribute <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a>? onconnect raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unregister(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothHealthApplication::dataType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">dataType</span></span><div class="brief">
+ The MDEP data type used for communication, which is referenced in the ISO/IEEE 11073-20601 spec. 
+            </div>
+<div class="description">
+            <p>
+For example, pulse oximeter is 4100 and blood pressure monitor is 4103.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="BluetoothHealthApplication::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The friendly name associated with sink application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="BluetoothHealthApplication::onconnect">
+<span class="attrName"><span class="type">BluetoothHealthChannelSuccessCallback </span><span class="name">onconnect</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Called when a health device is connected successfully through this application.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to null.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if an input attribute is not compatible with the expected type for this attribute.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothHealthApplication::unregister">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthApplication::unregister"></a><code><b><span class="methodName">unregister</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters this application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unregister(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If a Bluetooth device is turned off              </li>
+              <li>
+ UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when a sink application is registered successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+ var healthApp = null;
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+     healthApp = app;
+     healthApp.onconnect = function(channel) {
+         console.log("Connected!!");
+     };
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ function startSink() {
+     try {
+         healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+     } catch(e) {
+         console.log("Error: " + e.message);
+     }
+ }
+
+ function stopSink() {
+     try {
+         if (healthApp != null) {
+             healthApp.unregister(function() {
+                 healthApp = null;
+                 console.log("Health application is unregistered.");
+             },
+             function(e) {
+                 console.log ("Error: " + e.message);
+             });
+         }
+     } catch(err) {
+         console.log("Error: " + err.message);
+     }
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothHealthChannel">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannel"></a><h3>2.14. BluetoothHealthChannel</h3>
+<div class="brief">
+ The BluetoothHealthChannel interface represents the Bluetooth health channel.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BluetoothHealthChannel {
+
+        readonly attribute <a href="#BluetoothDevice">BluetoothDevice</a> peer;
+
+        readonly attribute <a href="#BluetoothHealthChannelType">BluetoothHealthChannelType</a> channelType;
+
+        readonly attribute <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application;
+
+        readonly attribute boolean isConnected;
+
+        void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        unsigned long sendData(byte[] data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setListener(<a href="#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BluetoothHealthChannel::peer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothDevice </span><span class="name">peer</span></span><div class="brief">
+ The remote device to which this channel is connected.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="BluetoothHealthChannel::channelType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothHealthChannelType </span><span class="name">channelType</span></span><div class="brief">
+ The type of this channel.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="BluetoothHealthChannel::application">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BluetoothHealthApplication </span><span class="name">application</span></span><div class="brief">
+ The health application which is used to communicate with the remote device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="BluetoothHealthChannel::isConnected">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isConnected</span></span><div class="brief">
+ The flag indicating whether any remote device is connected.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothHealthChannel::close">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannel::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes the connected channel.
+<em>BluetoothHealthChannel.isConnected</em> is changed to <var>false</var> and <em>BluetoothHealthChannelChangeCallback.onclose</em> is invoked when this channel is closed successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if a Bluetooth device is turned off.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+     app.onconnect = function(channel) {;
+         console.log("Health device is connected");
+         channel.close();
+     }
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothHealthChannel::sendData">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannel::sendData"></a><code><b><span class="methodName">sendData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends data and returns the number of bytes actually written.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long sendData(byte[] data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+ Data to send
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long Number of bytes actually sent
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if a Bluetooth device is turned off.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+     app.onconnect = function(channel) {
+         console.log("Health device is connected");
+         channel.sendData(dataToSend);
+     }
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothHealthChannel::setListener">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannel::setListener"></a><code><b><span class="methodName">setListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the listener to receive notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setListener(<a href="#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ Event listener of Bluetooth health channel
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+
+ var channelCallback = {
+     onmessage: function(data) {
+         console.log("data is received")
+     },
+     onclose: function() {
+         console.log("channel is closed");
+     }
+ };
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+     app.onconnect = function(channel) {;
+         console.log("Health device is connected");
+         channel.setListener(channelCallback);
+     }
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BluetoothHealthChannel::unsetListener">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannel::unsetListener"></a><code><b><span class="methodName">unsetListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener.
+This stops receiving notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bluetooth.health
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.bluetooth.getDefaultAdapter();
+ var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+ var connectedChannel = null;
+
+ var channelCallback = {
+     onmessage: function(data) {
+         console.log("data is received")
+     },
+     onclose: function() {
+         console.log("channel is closed");
+         connectedChannel.unsetListener();
+     }
+ };
+
+ function healthRegisterSuccess(app) {
+     console.log("Registered application: " + app.name);
+     app.onconnect = function(channel) {;
+         console.log("Health device is connected");
+         connectedChannel = channel;
+         connectedChannel.setListener(channelCallback);
+     }
+ }
+
+ function healthRegisterError(e) {
+     console.log("Failed to register application: " + e.message);
+ };
+
+ healthProfileHandler.registerSinkApplication(4100, "testSinkApp", healthRegisterSuccess, healthRegisterError);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothAdapterChangeCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapterChangeCallback"></a><h3>2.15. BluetoothAdapterChangeCallback</h3>
+<div class="brief">
+ The BluetoothAdapterChangeCallback interface specifies a set of methods to be invoked when the changes of Bluetooth adapter occur.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface BluetoothAdapterChangeCallback {
+        void onstatechanged(boolean powered);
+        void onnamechanged(DOMString name);
+        void onvisibilitychanged(boolean visible);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothAdapterChangeCallback::onstatechanged">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapterChangeCallback::onstatechanged"></a><code><b><span class="methodName">onstatechanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the power state is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onstatechanged(boolean powered);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">powered</span>: 
+ Flag indicating power state of local Bluetooth: <var>true</var> means power-on, <var>false</var> means power-off
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapterChangeCallback::onnamechanged">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapterChangeCallback::onnamechanged"></a><code><b><span class="methodName">onnamechanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the name is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onnamechanged(DOMString name);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">name</span>: 
+ Name of local Bluetooth
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="BluetoothAdapterChangeCallback::onvisibilitychanged">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothAdapterChangeCallback::onvisibilitychanged"></a><code><b><span class="methodName">onvisibilitychanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the visibility is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onvisibilitychanged(boolean visible);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">visible</span>: 
+ Flag indicating visibility of local Bluetooth: <var>true</var> means that local Bluetooth is discoverable, <var>false</var> means that local Bluetooth is hidden from other devices
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothDeviceSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDeviceSuccessCallback"></a><h3>2.16. BluetoothDeviceSuccessCallback</h3>
+<div class="brief">
+ The BluetoothDeviceSuccessCallback interface implements the success callback <em>BluetoothAdapter.getDevice() </em>and <em>BluetoothAdapter.createBonding()</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothDeviceSuccessCallback {
+        void onsuccess(<a href="#BluetoothDevice">BluetoothDevice</a> device);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothDeviceSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDeviceSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on success.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#BluetoothDevice">BluetoothDevice</a> device);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">device</span>: 
+ BluetoothDevice object
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothDeviceArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDeviceArraySuccessCallback"></a><h3>2.17. BluetoothDeviceArraySuccessCallback</h3>
+<div class="brief">
+ The BluetoothDeviceArraySuccessCallback interface that defines the success callback for <em>BluetoothAdapter.getKnownDevices()</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothDeviceArraySuccessCallback {
+        void onsuccess(<a href="#BluetoothDevice">BluetoothDevice</a>[] devices);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothDeviceArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDeviceArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when device information is ready.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#BluetoothDevice">BluetoothDevice</a>[] devices);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">devices</span>: 
+ List of devices known to local Bluetooth adapter
+Each element is a BluetoothDevice.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothDiscoverDevicesSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDiscoverDevicesSuccessCallback"></a><h3>2.18. BluetoothDiscoverDevicesSuccessCallback</h3>
+<div class="brief">
+ The BluetoothDiscoverDevicesSuccessCallback interface that defines the success callback for <em>BluetoothAdapter.discoverDevices()</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface BluetoothDiscoverDevicesSuccessCallback {
+        void onstarted();
+        void ondevicefound(<a href="#BluetoothDevice">BluetoothDevice</a> device);
+        void ondevicedisappeared(<a href="#BluetoothAddress">BluetoothAddress</a> address);
+        void onfinished(<a href="#BluetoothDevice">BluetoothDevice</a>[] foundDevices);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothDiscoverDevicesSuccessCallback::onstarted">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDiscoverDevicesSuccessCallback::onstarted"></a><code><b><span class="methodName">onstarted</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called at the beginning of a device discovery process for finding the nearby Bluetooth device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onstarted();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="method" id="BluetoothDiscoverDevicesSuccessCallback::ondevicefound">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDiscoverDevicesSuccessCallback::ondevicefound"></a><code><b><span class="methodName">ondevicefound</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a new device is discovered in the process of inquiry/discovery.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void ondevicefound(<a href="#BluetoothDevice">BluetoothDevice</a> device);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">device</span>: 
+ Device that is found
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="BluetoothDiscoverDevicesSuccessCallback::ondevicedisappeared">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDiscoverDevicesSuccessCallback::ondevicedisappeared"></a><code><b><span class="methodName">ondevicedisappeared</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a device is lost from proximity.
+After that, this device is no longer visible.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void ondevicedisappeared(<a href="#BluetoothAddress">BluetoothAddress</a> address);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">address</span>: 
+ Address of the device that is no longer in range or visible
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="BluetoothDiscoverDevicesSuccessCallback::onfinished">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothDiscoverDevicesSuccessCallback::onfinished"></a><code><b><span class="methodName">onfinished</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the device discovery process has finished.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfinished(<a href="#BluetoothDevice">BluetoothDevice</a>[] foundDevices);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">foundDevices</span>: 
+ Array of devices found in this discovery session
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothSocketSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocketSuccessCallback"></a><h3>2.19. BluetoothSocketSuccessCallback</h3>
+<div class="brief">
+ The BluetoothSocketSuccessCallback interface that defines the success method for <em>BluetoothDevice.connectToServiceByUUID()</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothSocketSuccessCallback {
+        void onsuccess(<a href="#BluetoothSocket">BluetoothSocket</a> socket);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothSocketSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothSocketSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the connection to a service is ready.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#BluetoothSocket">BluetoothSocket</a> socket);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">socket</span>: 
+ Socket to connect to the specified service on a remote device
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothServiceSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothServiceSuccessCallback"></a><h3>2.20. BluetoothServiceSuccessCallback</h3>
+<div class="brief">
+ The BluetoothServiceSuccessCallback interface implements the success callback for <em>BluetoothAdapter.registerRFCOMMServiceByUUID()</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothServiceSuccessCallback {
+        void onsuccess(<a href="#BluetoothServiceHandler">BluetoothServiceHandler</a> handler);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothServiceSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothServiceSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when registering a service with the local device is successful.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#BluetoothServiceHandler">BluetoothServiceHandler</a> handler);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">handler</span>: 
+ Bluetooth service handler
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothHealthApplicationSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthApplicationSuccessCallback"></a><h3>2.21. BluetoothHealthApplicationSuccessCallback</h3>
+<div class="brief">
+ The BluetoothHealthApplicationSuccessCallback interface that defines the success method for <em>BluetoothHealthProfileHandler.registerSinkApplication()</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothHealthApplicationSuccessCallback {
+        void onsuccess(<a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothHealthApplicationSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthApplicationSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the application is registered successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">application</span>: 
+ Registered health application
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothHealthChannelSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannelSuccessCallback"></a><h3>2.22. BluetoothHealthChannelSuccessCallback</h3>
+<div class="brief">
+ The BluetoothHealthChannelSuccessCallback interface that defines the success method for <em>BluetoothHealthProfileHandler.connectToSource()</em> and the event callback for <em>BluetoothHealthApplication.onconnect</em>.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothHealthChannelSuccessCallback {
+        void onsuccess(<a href="#BluetoothHealthChannel">BluetoothHealthChannel</a> channel);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothHealthChannelSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannelSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a connection is established.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#BluetoothHealthChannel">BluetoothHealthChannel</a> channel);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">channel</span>: 
+ Connected health channel
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BluetoothHealthChannelChangeCallback">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannelChangeCallback"></a><h3>2.23. BluetoothHealthChannelChangeCallback</h3>
+<div class="brief">
+ The BluetoothHealthChannelChangeCallback interface specifies a set of methods to be invoked when the changes of heath channel occur.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface BluetoothHealthChannelChangeCallback {
+        void onmessage(byte[] data);
+
+        void onclose();
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BluetoothHealthChannelChangeCallback::onmessage">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannelChangeCallback::onmessage"></a><code><b><span class="methodName">onmessage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the message is received.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onmessage(byte[] data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+ Received data
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="BluetoothHealthChannelChangeCallback::onclose">
+<a class="backward-compatibility-anchor" name="::Bluetooth::BluetoothHealthChannelChangeCallback::onclose"></a><code><b><span class="methodName">onclose</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the health channel is closed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onclose();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the Bluetooth application runs on a device with Bluetooth feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.bluetooth</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the Bluetooth healthcare application runs on a device with Bluetooth health profile feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.bluetooth.health</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Bluetooth {
+    typedef DOMString BluetoothAddress;
+
+    typedef DOMString BluetoothUUID;
+
+    enum BluetoothSocketState { "CLOSED", "OPEN" };
+
+    enum BluetoothProfileType { "HEALTH" };
+
+    enum BluetoothHealthChannelType { "RELIABLE", "STREAMING" };
+
+    [NoInterfaceObject] interface BluetoothManagerObject {
+        readonly attribute <a href="#BluetoothManager">BluetoothManager</a> bluetooth;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BluetoothManagerObject">BluetoothManagerObject</a>;
+
+    [NoInterfaceObject] interface BluetoothManager {
+        readonly attribute <a href="#BluetoothClassDeviceMajor">BluetoothClassDeviceMajor</a> deviceMajor;
+        readonly attribute <a href="#BluetoothClassDeviceMinor">BluetoothClassDeviceMinor</a> deviceMinor;
+        readonly attribute <a href="#BluetoothClassDeviceService">BluetoothClassDeviceService</a> deviceService;
+        <a href="#BluetoothAdapter">BluetoothAdapter</a> getDefaultAdapter() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+
+    [NoInterfaceObject] interface BluetoothAdapter {
+        readonly attribute DOMString name;
+        readonly attribute <a href="#BluetoothAddress">BluetoothAddress</a> address;
+        readonly attribute boolean powered;
+        readonly attribute boolean visible;
+
+        void setName(DOMString name,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setPowered(boolean state,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVisible(boolean mode,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                        optional unsigned short? timeout) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setChangeListener(<a href="#BluetoothAdapterChangeCallback">BluetoothAdapterChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void discoverDevices(<a href="#BluetoothDiscoverDevicesSuccessCallback">BluetoothDiscoverDevicesSuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stopDiscovery(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getKnownDevices(<a href="#BluetoothDeviceArraySuccessCallback">BluetoothDeviceArraySuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getDevice(<a href="#BluetoothAddress">BluetoothAddress</a> address,
+                       <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void createBonding(<a href="#BluetoothAddress">BluetoothAddress</a> address,
+                           <a href="#BluetoothDeviceSuccessCallback">BluetoothDeviceSuccessCallback</a> successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void destroyBonding(<a href="#BluetoothAddress">BluetoothAddress</a> address,
+                            optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+
+        void registerRFCOMMServiceByUUID(<a href="#BluetoothUUID">BluetoothUUID</a> uuid,
+                                         DOMString name,
+                                         <a href="#BluetoothServiceSuccessCallback">BluetoothServiceSuccessCallback</a> successCallback,
+                                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#BluetoothProfileHandler">BluetoothProfileHandler</a> getBluetoothProfileHandler(<a href="#BluetoothProfileType">BluetoothProfileType</a> profileType) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface BluetoothDevice {
+        readonly attribute DOMString name;
+        readonly attribute <a href="#BluetoothAddress">BluetoothAddress</a> address;
+        readonly attribute <a href="#BluetoothClass">BluetoothClass</a> deviceClass;
+        readonly attribute boolean isBonded;
+        readonly attribute boolean isTrusted;
+        readonly attribute boolean isConnected;
+        readonly attribute <a href="#BluetoothUUID">BluetoothUUID</a>[] uuids;
+
+        void connectToServiceByUUID(<a href="#BluetoothUUID">BluetoothUUID</a> uuid,
+                                    <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a> successCallback,
+                                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+    [NoInterfaceObject] interface BluetoothSocket {
+        readonly attribute <a href="#BluetoothUUID">BluetoothUUID</a> uuid;
+        readonly attribute <a href="#BluetoothSocketState">BluetoothSocketState</a> state;
+        readonly attribute <a href="#BluetoothDevice">BluetoothDevice</a> peer;
+        [TreatNonCallableAsNull] attribute <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onmessage raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        [TreatNonCallableAsNull] attribute <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onclose raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        unsigned long writeData(byte[] data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        byte[] readData() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface BluetoothClass {
+        readonly attribute octet major;
+
+        readonly attribute octet minor;
+
+        readonly attribute unsigned short [] services ;
+
+        boolean hasService(unsigned short service) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface BluetoothClassDeviceMajor {
+
+        const octet MISC = 0x00;
+        const octet COMPUTER = 0x01;
+        const octet PHONE = 0x02;
+        const octet NETWORK = 0x03;
+        const octet AUDIO_VIDEO = 0x04;
+        const octet PERIPHERAL = 0x05;
+        const octet IMAGING = 0x06;
+        const octet WEARABLE = 0x07;
+        const octet TOY = 0x08;
+        const octet HEALTH = 0x09;
+        const octet UNCATEGORIZED = 0x1F;
+    };
+
+    [NoInterfaceObject] interface BluetoothClassDeviceMinor {
+        const octet COMPUTER_UNCATEGORIZED = 0x00;
+        const octet COMPUTER_DESKTOP = 0x01;
+        const octet COMPUTER_SERVER = 0x02;
+        const octet COMPUTER_LAPTOP = 0x03;
+        const octet COMPUTER_HANDHELD_PC_OR_PDA = 0x04;
+        const octet COMPUTER_PALM_PC_OR_PDA = 0x05;
+        const octet COMPUTER_WEARABLE = 0x06;
+
+        const octet PHONE_UNCATEGORIZED = 0x00;
+        const octet PHONE_CELLULAR = 0x01;
+        const octet PHONE_CORDLESS = 0x02;
+        const octet PHONE_SMARTPHONE = 0x03;
+        const octet PHONE_MODEM_OR_GATEWAY = 0x04;
+        const octet PHONE_ISDN = 0x05;
+
+        const octet AV_UNRECOGNIZED = 0x00;
+        const octet AV_WEARABLE_HEADSET = 0x01;
+        const octet AV_HANDSFREE = 0x02;
+        const octet AV_MICROPHONE = 0x04;
+        const octet AV_LOUDSPEAKER = 0x05;
+        const octet AV_HEADPHONES = 0x06;
+        const octet AV_PORTABLE_AUDIO = 0x07;
+        const octet AV_CAR_AUDIO = 0x08;
+        const octet AV_SETTOP_BOX = 0x09;
+        const octet AV_HIFI = 0x0a;
+        const octet AV_VCR = 0x0b;
+        const octet AV_VIDEO_CAMERA = 0x0c;
+        const octet AV_CAMCORDER = 0x0d;
+        const octet AV_MONITOR = 0x0e;
+        const octet AV_DISPLAY_AND_LOUDSPEAKER = 0x0f;
+        const octet AV_VIDEO_CONFERENCING = 0x10;
+        const octet AV_GAMING_TOY = 0x12;
+
+        const octet PERIPHERAL_UNCATEGORIZED = 0;
+        const octet PERIPHERAL_KEYBOARD = 0x10;
+        const octet PERIPHERAL_POINTING_DEVICE = 0x20;
+        const octet PERIPHERAL_KEYBOARD_AND_POINTING_DEVICE = 0x30;
+        const octet PERIPHERAL_JOYSTICK = 0x01;
+        const octet PERIPHERAL_GAMEPAD = 0x02;
+        const octet PERIPHERAL_REMOTE_CONTROL = 0x03;
+        const octet PERIPHERAL_SENSING_DEVICE = 0x04;
+        const octet PERIPHERAL_DEGITIZER_TABLET = 0x05;
+        const octet PERIPHERAL_CARD_READER = 0x06;
+        const octet PERIPHERAL_DIGITAL_PEN = 0x07;
+        const octet PERIPHERAL_HANDHELD_SCANNER = 0x08;
+        const octet PERIPHERAL_HANDHELD_INPUT_DEVICE = 0x09;
+
+        const octet IMAGING_UNCATEGORIZED = 0x00;
+        const octet IMAGING_DISPLAY = 0x04;
+        const octet IMAGING_CAMERA = 0x08;
+        const octet IMAGING_SCANNER = 0x10;
+        const octet IMAGING_PRINTER = 0x20;
+
+        const octet WEARABLE_WRITST_WATCH = 0x01;
+        const octet WEARABLE_PAGER = 0x02;
+        const octet WEARABLE_JACKET = 0x03;
+        const octet WEARABLE_HELMET = 0x04;
+        const octet WEARABLE_GLASSES = 0x05;
+
+        const octet TOY_ROBOT = 0x01;
+        const octet TOY_VEHICLE = 0x02;
+        const octet TOY_DOLL = 0x03;
+        const octet TOY_CONTROLLER = 0x04;
+        const octet TOY_GAME = 0x05;
+
+        const octet HEALTH_UNDEFINED = 0x00;
+        const octet HEALTH_BLOOD_PRESSURE_MONITOR = 0x01;
+        const octet HEALTH_THERMOMETER = 0x02;
+        const octet HEALTH_WEIGHING_SCALE = 0x03;
+        const octet HEALTH_GLUCOSE_METER = 0x04;
+        const octet HEALTH_PULSE_OXIMETER = 0x05;
+        const octet HEALTH_PULSE_RATE_MONITOR = 0x06;
+        const octet HEALTH_DATA_DISPLAY = 0x07;
+        const octet HEALTH_STEP_COUNTER = 0x08;
+        const octet HEALTH_BODY_COMPOSITION_ANALYZER = 0x09;
+        const octet HEALTH_PEAK_FLOW_MONITOR = 0x0a;
+        const octet HEALTH_MEDICATION_MONITOR = 0x0b;
+        const octet HEALTH_KNEE_PROSTHESIS = 0x0c;
+        const octet HEALTH_ANKLE_PROSTHESIS = 0x0d;
+    };
+
+    [NoInterfaceObject] interface BluetoothClassDeviceService {
+        const unsigned short LIMITED_DISCOVERABILITY = 0x0001;
+        const unsigned short POSITIONING = 0x0008;
+        const unsigned short NETWORKING = 0x0010;
+        const unsigned short RENDERING = 0x0020;
+        const unsigned short CAPTURING = 0x0040;
+        const unsigned short OBJECT_TRANSFER = 0x0080;
+        const unsigned short AUDIO = 0x0100;
+        const unsigned short TELEPHONY = 0x0200;
+        const unsigned short INFORMATION = 0x0400;
+    };
+
+    [NoInterfaceObject] interface BluetoothServiceHandler {
+        readonly attribute <a href="#BluetoothUUID">BluetoothUUID</a> uuid;
+        readonly attribute DOMString name;
+        readonly attribute boolean isConnected;
+        [TreatNonCallableAsNull] attribute <a href="#BluetoothSocketSuccessCallback">BluetoothSocketSuccessCallback</a>? onconnect raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unregister(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface BluetoothProfileHandler {
+
+        readonly attribute <a href="#BluetoothProfileType">BluetoothProfileType</a> profileType;
+    };
+
+
+    [NoInterfaceObject] interface BluetoothHealthProfileHandler : <a href="#BluetoothProfileHandler">BluetoothProfileHandler</a> {
+
+        void registerSinkApplication(unsigned short dataType, DOMString name, <a href="#BluetoothHealthApplicationSuccessCallback">BluetoothHealthApplicationSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void connectToSource(<a href="#BluetoothDevice">BluetoothDevice</a> peer, <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application, <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+
+    [NoInterfaceObject] interface BluetoothHealthApplication {
+
+        readonly attribute unsigned short dataType;
+
+        readonly attribute DOMString name;
+
+        [TreatNonCallableAsNull] attribute <a href="#BluetoothHealthChannelSuccessCallback">BluetoothHealthChannelSuccessCallback</a>? onconnect raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unregister(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+    [NoInterfaceObject] interface BluetoothHealthChannel {
+
+        readonly attribute <a href="#BluetoothDevice">BluetoothDevice</a> peer;
+
+        readonly attribute <a href="#BluetoothHealthChannelType">BluetoothHealthChannelType</a> channelType;
+
+        readonly attribute <a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application;
+
+        readonly attribute boolean isConnected;
+
+        void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        unsigned long sendData(byte[] data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setListener(<a href="#BluetoothHealthChannelChangeCallback">BluetoothHealthChannelChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+
+    [Callback, NoInterfaceObject] interface BluetoothAdapterChangeCallback {
+        void onstatechanged(boolean powered);
+        void onnamechanged(DOMString name);
+        void onvisibilitychanged(boolean visible);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothDeviceSuccessCallback {
+        void onsuccess(<a href="#BluetoothDevice">BluetoothDevice</a> device);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothDeviceArraySuccessCallback {
+        void onsuccess(<a href="#BluetoothDevice">BluetoothDevice</a>[] devices);
+    };
+
+    [Callback, NoInterfaceObject] interface BluetoothDiscoverDevicesSuccessCallback {
+        void onstarted();
+        void ondevicefound(<a href="#BluetoothDevice">BluetoothDevice</a> device);
+        void ondevicedisappeared(<a href="#BluetoothAddress">BluetoothAddress</a> address);
+        void onfinished(<a href="#BluetoothDevice">BluetoothDevice</a>[] foundDevices);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothSocketSuccessCallback {
+        void onsuccess(<a href="#BluetoothSocket">BluetoothSocket</a> socket);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothServiceSuccessCallback {
+        void onsuccess(<a href="#BluetoothServiceHandler">BluetoothServiceHandler</a> handler);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothHealthApplicationSuccessCallback {
+        void onsuccess(<a href="#BluetoothHealthApplication">BluetoothHealthApplication</a> application);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface BluetoothHealthChannelSuccessCallback {
+        void onsuccess(<a href="#BluetoothHealthChannel">BluetoothHealthChannel</a> channel);
+    };
+
+    [Callback, NoInterfaceObject] interface BluetoothHealthChannelChangeCallback {
+        void onmessage(byte[] data);
+
+        void onclose();
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html
new file mode 100644 (file)
index 0000000..dd21d14
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html
@@ -0,0 +1,531 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Bookmark API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Bookmark">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Bookmark API</h1></div>
+<div class="brief">
+ The Bookmark API provides interfaces and methods for accessing Bookmark.
+This API provides functionality to get, add, and remove bookmarks.
+        </div>
+<div class="description">
+        <p>
+For more information on the Bookmark features, see <a href="../../../../../org.tizen.guides/html/web/tizen/social/bookmark_w.htm">Bookmark Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#Bookmark">Bookmark</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#BookmarkManagerObject">BookmarkManagerObject</a>
+</li>
+<li>2.2. <a href="#BookmarkManager">BookmarkManager</a>
+</li>
+<li>2.3. <a href="#BookmarkItem">BookmarkItem</a>
+</li>
+<li>2.4. <a href="#BookmarkFolder">BookmarkFolder</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#BookmarkManagerObject">BookmarkManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BookmarkManager">BookmarkManager</a></td>
+<td>
+<a href="#Bookmark">Bookmark</a>[] <a href="#BookmarkManager::get">get</a> (optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder, optional boolean? recursive)<br>
+    void <a href="#BookmarkManager::add">add</a> (<a href="#Bookmark">Bookmark</a> bookmark, optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder)<br>
+    void <a href="#BookmarkManager::remove">remove</a> (optional <a href="#Bookmark">Bookmark</a>? bookmark)</td>
+</tr>
+<tr>
+<td><a href="#BookmarkItem">BookmarkItem</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BookmarkFolder">BookmarkFolder</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="Bookmark">
+<a class="backward-compatibility-anchor" name="::Bookmark::Bookmark"></a><h3>1.1. Bookmark</h3>
+<div class="brief">
+ A bookmark, which could be either a <em>BookmarkItem </em>or a <em>BookmarkFolder</em>.
+          </div>
+<pre class="webidl prettyprint">  typedef (<a href="#BookmarkItem">BookmarkItem</a> or <a href="#BookmarkFolder">BookmarkFolder</a>) Bookmark;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="BookmarkManagerObject">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkManagerObject"></a><h3>2.1. BookmarkManagerObject</h3>
+<div class="brief">
+ The BookmarkManagerObject interface defines what is instantiated by the Tizen object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface BookmarkManagerObject {
+    readonly attribute <a href="#BookmarkManager">BookmarkManager</a> bookmark;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BookmarkManagerObject">BookmarkManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.bookmark </em>object that allows to access the functionality of the Bookmark API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="BookmarkManager">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkManager"></a><h3>2.2. BookmarkManager</h3>
+<div class="brief">
+ The BookmarkManager interface provides access to the bookmark folder and bookmark item.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface BookmarkManager {
+    <a href="#Bookmark">Bookmark</a>[] get(optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder, optional boolean? recursive) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void add(<a href="#Bookmark">Bookmark</a> bookmark, optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void remove(optional <a href="#Bookmark">Bookmark</a>? bookmark) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It provides access to the API functionalities through the <em>tizen.bookmark </em>interface.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BookmarkManager::get">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkManager::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets all bookmark items and bookmark folders.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Bookmark">Bookmark</a>[] get(optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder, optional boolean? recursive);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If no parentFolder is passed, or the parentFolder contains <var>null</var>, it is considered as the default bookmark folder (The root bookmark folder).
+In this case, the return will contain bookmarks under the root bookmark folder.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bookmark.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">parentFolder</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Parent bookmark folder to retrieve the result bookmarks
+                </li>
+          <li class="param">
+<span class="name">recursive</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+    Flag indicating whether sub-bookmarks are also retrieved recursively<br>(The default value is <em>false</em>).
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Bookmark[]  Array of Bookmarks
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the parentFolder parameter isn't found in bookmark database.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  // Retrieves bookmarks from the root bookmark folder recursively.
+  var allBookmarks = tizen.bookmark.get(null, true);
+ } catch (err) {
+  console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BookmarkManager::add">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkManager::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a bookmark item or a bookmark folder.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Bookmark">Bookmark</a> bookmark, optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If no parentFolder is passed, or the parentFolder contains <var>null</var>, it is considered as the default bookmark folder(The root bookmark folder).
+In this case, the bookmark is added under the root bookmark folder.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/bookmark.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">bookmark</span>: 
+     Bookmark to be added
+                </li>
+          <li class="param">
+<span class="name">parentFolder</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Parent folder of a bookmark to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if a parentFolder parameter isn't found in bookmark database.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value, or a bookmark parameter is either a bookmark item whose url has already existed in bookmark database or a bookmark folder whose title has already existed under the same parent folder.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+ // Adds a bookmark item to root bookmark folder.
+  tizen.bookmark.add(new tizen.BookmarkItem("tizen", "https://www.tizen.org"));
+ } catch (err) {
+  console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BookmarkManager::remove">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a bookmark item or a bookmark folder.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(optional <a href="#Bookmark">Bookmark</a>? bookmark);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the bookmark is a BookmarkFolder type, all the bookmark items and bookmark folders under the specified bookmark folder are going to be removed.<br>If no bookmark is passed, or the bookmark contains <var>null</var>, it is considered as the default bookmark folder(The root bookmark folder).
+In this case, all the bookmarks will be removed.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/bookmark.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">bookmark</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Bookmark to be removed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+ // Removes all the bookmark folders and items.
+  tizen.bookmark.remove();
+ } catch (err) {
+  console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BookmarkItem">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkItem"></a><h3>2.3. BookmarkItem</h3>
+<div class="brief">
+ The BookmarkItem interface implements the <em>BookmarkItem </em>object.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString title, DOMString url)]
+  interface BookmarkItem {
+    readonly attribute <a href="#BookmarkFolder">BookmarkFolder</a>? parent;
+    readonly attribute DOMString title;
+    readonly attribute DOMString url;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="constructors">
+<h4 id="BookmarkItem::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">BookmarkItem(DOMString title, DOMString url);</pre>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+ // Creates a bookmark item.
+  var tizen = new tizen.BookmarkItem("tizen", "https://www.tizen.org");
+ } catch (err) {
+  console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BookmarkItem::parent">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BookmarkFolder </span><span class="name">parent</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The parent bookmark folder.
+            </div>
+<div class="description">
+            <p>
+This attribute is meaningful when this object is successfully added or retrieved.
+If this BookmarkItem is not added yet, its value is set to undefined.
+            </p>
+            <p>
+If the parent bookmark folder indicates the root bookmark folder, the value will be <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="BookmarkItem::title">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The title of the bookmark.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="BookmarkItem::url">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">url</span></span><div class="brief">
+ The URL of the bookmark.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="BookmarkFolder">
+<a class="backward-compatibility-anchor" name="::Bookmark::BookmarkFolder"></a><h3>2.4. BookmarkFolder</h3>
+<div class="brief">
+ The BookmarkFolder interface implements the <em>BookmarkFolder </em>object.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString title)]
+  interface BookmarkFolder {
+    readonly attribute <a href="#BookmarkFolder">BookmarkFolder</a>? parent;
+    readonly attribute DOMString title;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="constructors">
+<h4 id="BookmarkFolder::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">BookmarkFolder(DOMString title);</pre>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+ // creates a bookmark folder
+  var folder = new tizen.BookmarkFolder("folder");
+ } catch (err) {
+  console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="BookmarkFolder::parent">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">BookmarkFolder </span><span class="name">parent</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The parent bookmark folder.
+            </div>
+<div class="description">
+            <p>
+This attribute is meaningful when this object is successfully added or retrieved.
+If this BookmarkFolder is not added yet, its value is set to undefined.
+            </p>
+            <p>
+If the parent bookmark folder indicates the root bookmark folder, the value will be <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="BookmarkFolder::title">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The title of the bookmark folder.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Bookmark {
+  typedef (<a href="#BookmarkItem">BookmarkItem</a> or <a href="#BookmarkFolder">BookmarkFolder</a>) Bookmark;
+
+  [NoInterfaceObject] interface BookmarkManagerObject {
+    readonly attribute <a href="#BookmarkManager">BookmarkManager</a> bookmark;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BookmarkManagerObject">BookmarkManagerObject</a>;
+
+  [NoInterfaceObject] interface BookmarkManager {
+    <a href="#Bookmark">Bookmark</a>[] get(optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder, optional boolean? recursive) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void add(<a href="#Bookmark">Bookmark</a> bookmark, optional <a href="#BookmarkFolder">BookmarkFolder</a>? parentFolder) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void remove(optional <a href="#Bookmark">Bookmark</a>? bookmark) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Constructor(DOMString title, DOMString url)]
+  interface BookmarkItem {
+    readonly attribute <a href="#BookmarkFolder">BookmarkFolder</a>? parent;
+    readonly attribute DOMString title;
+    readonly attribute DOMString url;
+
+  };
+  [Constructor(DOMString title)]
+  interface BookmarkFolder {
+    readonly attribute <a href="#BookmarkFolder">BookmarkFolder</a>? parent;
+    readonly attribute DOMString title;
+
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html
new file mode 100644 (file)
index 0000000..6886749
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html
@@ -0,0 +1,4254 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Calendar API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Calendar">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Calendar API</h1></div>
+<div class="brief">
+ The Calendar API provides interfaces and methods for users to manage their schedule.
+Separate calendars can be implemented for group related events or tasks. For example, a user may have a work, personal, and family calendar. A calendar entry is called an event and is composed of a series of attributes, such as purpose, starting time, and duration. A calendar is a collection of events.
+        </div>
+<div class="description">
+        <p>
+The Internet Calendaring and Scheduling Core Object Specification (iCalendar), defines a format for exchanging event items. Mapping to specified event/task attributes in this API is as per this specification. For details, see <a href="http://tools.ietf.org/html/rfc5545">RFC 5545</a>.
+        </p>
+        <p>
+This API provides functionality to read, create, delete, and update items in specific calendars. Calendars can be obtained using the <em>getCalendars() </em>method, which returns an array of Calendar objects.
+        </p>
+        <p>
+For more information on the Calendar features, see <a href="../../../../../org.tizen.guides/html/web/tizen/social/calendar_w.htm">Calendar Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#CalendarId">CalendarId</a>
+</li>
+<li>1.2. <a href="#CalendarTaskId">CalendarTaskId</a>
+</li>
+<li>1.3. <a href="#CalendarItemId">CalendarItemId</a>
+</li>
+<li>1.4. <a href="#CalendarType">CalendarType</a>
+</li>
+<li>1.5. <a href="#CalendarTextFormat">CalendarTextFormat</a>
+</li>
+<li>1.6. <a href="#AlarmMethod">AlarmMethod</a>
+</li>
+<li>1.7. <a href="#RecurrenceRuleFrequency">RecurrenceRuleFrequency</a>
+</li>
+<li>1.8. <a href="#ByDayValue">ByDayValue</a>
+</li>
+<li>1.9. <a href="#EventAvailability">EventAvailability</a>
+</li>
+<li>1.10. <a href="#AttendeeType">AttendeeType</a>
+</li>
+<li>1.11. <a href="#AttendeeStatus">AttendeeStatus</a>
+</li>
+<li>1.12. <a href="#AttendeeRole">AttendeeRole</a>
+</li>
+<li>1.13. <a href="#CalendarItemPriority">CalendarItemPriority</a>
+</li>
+<li>1.14. <a href="#CalendarItemVisibility">CalendarItemVisibility</a>
+</li>
+<li>1.15. <a href="#CalendarItemStatus">CalendarItemStatus</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#CalendarManagerObject">CalendarManagerObject</a>
+</li>
+<li>2.2. <a href="#CalendarManager">CalendarManager</a>
+</li>
+<li>2.3. <a href="#Calendar">Calendar</a>
+</li>
+<li>2.4. <a href="#CalendarItemInit">CalendarItemInit</a>
+</li>
+<li>2.5. <a href="#CalendarTaskInit">CalendarTaskInit</a>
+</li>
+<li>2.6. <a href="#CalendarEventInit">CalendarEventInit</a>
+</li>
+<li>2.7. <a href="#CalendarItem">CalendarItem</a>
+</li>
+<li>2.8. <a href="#CalendarTask">CalendarTask</a>
+</li>
+<li>2.9. <a href="#CalendarEvent">CalendarEvent</a>
+</li>
+<li>2.10. <a href="#CalendarAttendeeInit">CalendarAttendeeInit</a>
+</li>
+<li>2.11. <a href="#CalendarAttendee">CalendarAttendee</a>
+</li>
+<li>2.12. <a href="#CalendarRecurrenceRuleInit">CalendarRecurrenceRuleInit</a>
+</li>
+<li>2.13. <a href="#CalendarRecurrenceRule">CalendarRecurrenceRule</a>
+</li>
+<li>2.14. <a href="#CalendarEventId">CalendarEventId</a>
+</li>
+<li>2.15. <a href="#CalendarAlarm">CalendarAlarm</a>
+</li>
+<li>2.16. <a href="#CalendarEventArraySuccessCallback">CalendarEventArraySuccessCallback</a>
+</li>
+<li>2.17. <a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a>
+</li>
+<li>2.18. <a href="#CalendarArraySuccessCallback">CalendarArraySuccessCallback</a>
+</li>
+<li>2.19. <a href="#CalendarChangeCallback">CalendarChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#CalendarManagerObject">CalendarManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarManager">CalendarManager</a></td>
+<td>void <a href="#CalendarManager::getCalendars">getCalendars</a> (<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarArraySuccessCallback">CalendarArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#Calendar">Calendar</a> <a href="#CalendarManager::getUnifiedCalendar">getUnifiedCalendar</a> (<a href="#CalendarType">CalendarType</a> type)<br>
+    <a href="#Calendar">Calendar</a> <a href="#CalendarManager::getDefaultCalendar">getDefaultCalendar</a> (<a href="#CalendarType">CalendarType</a> type)<br>
+    void <a href="#CalendarManager::addCalendar">addCalendar</a> (<a href="#Calendar">Calendar</a> calendar)<br>
+    void <a href="#CalendarManager::removeCalendar">removeCalendar</a> (<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id)<br>
+    <a href="#Calendar">Calendar</a> <a href="#CalendarManager::getCalendar">getCalendar</a> (<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id)</td>
+</tr>
+<tr>
+<td><a href="#Calendar">Calendar</a></td>
+<td>
+<a href="#CalendarItem">CalendarItem</a> <a href="#Calendar::get">get</a> (<a href="#CalendarItemId">CalendarItemId</a> id)<br>
+    void <a href="#Calendar::add">add</a> (<a href="#CalendarItem">CalendarItem</a> item)<br>
+    void <a href="#Calendar::addBatch">addBatch</a> (<a href="#CalendarItem">CalendarItem</a>[] items, optional <a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Calendar::update">update</a> (<a href="#CalendarItem">CalendarItem</a> item, optional boolean? updateAllInstances)<br>
+    void <a href="#Calendar::updateBatch">updateBatch</a> (<a href="#CalendarItem">CalendarItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional boolean? updateAllInstances)<br>
+    void <a href="#Calendar::remove">remove</a> (<a href="#CalendarItemId">CalendarItemId</a> id)<br>
+    void <a href="#Calendar::removeBatch">removeBatch</a> (<a href="#CalendarItemId">CalendarItemId</a>[] ids, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Calendar::find">find</a> (<a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode)<br>
+    long <a href="#Calendar::addChangeListener">addChangeListener</a> (<a href="#CalendarChangeCallback">CalendarChangeCallback</a> successCallback)<br>
+    void <a href="#Calendar::removeChangeListener">removeChangeListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#CalendarItemInit">CalendarItemInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarTaskInit">CalendarTaskInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarEventInit">CalendarEventInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarItem">CalendarItem</a></td>
+<td>DOMString <a href="#CalendarItem::convertToString">convertToString</a> (<a href="#CalendarTextFormat">CalendarTextFormat</a> format)<br>
+    <a href="#CalendarItem">CalendarItem</a> <a href="#CalendarItem::clone">clone</a> ()</td>
+</tr>
+<tr>
+<td><a href="#CalendarTask">CalendarTask</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarEvent">CalendarEvent</a></td>
+<td>void <a href="#CalendarEvent::expandRecurrence">expandRecurrence</a> (<a href="time.html#TZDate">TZDate</a> startDate, <a href="time.html#TZDate">TZDate</a> endDate, <a href="#CalendarEventArraySuccessCallback">CalendarEventArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#CalendarAttendeeInit">CalendarAttendeeInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarAttendee">CalendarAttendee</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarRecurrenceRuleInit">CalendarRecurrenceRuleInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarRecurrenceRule">CalendarRecurrenceRule</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarEventId">CalendarEventId</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarAlarm">CalendarAlarm</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CalendarEventArraySuccessCallback">CalendarEventArraySuccessCallback</a></td>
+<td>void <a href="#CalendarEventArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#CalendarEvent">CalendarEvent</a>[] events)</td>
+</tr>
+<tr>
+<td><a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a></td>
+<td>void <a href="#CalendarItemArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#CalendarItem">CalendarItem</a>[] items)</td>
+</tr>
+<tr>
+<td><a href="#CalendarArraySuccessCallback">CalendarArraySuccessCallback</a></td>
+<td>void <a href="#CalendarArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Calendar">Calendar</a>[] calendars)</td>
+</tr>
+<tr>
+<td><a href="#CalendarChangeCallback">CalendarChangeCallback</a></td>
+<td>void <a href="#CalendarChangeCallback::onitemsadded">onitemsadded</a> (<a href="#CalendarItem">CalendarItem</a>[] items)<br>
+    void <a href="#CalendarChangeCallback::onitemsupdated">onitemsupdated</a> (<a href="#CalendarItem">CalendarItem</a>[] items)<br>
+    void <a href="#CalendarChangeCallback::onitemsremoved">onitemsremoved</a> (<a href="#CalendarItemId">CalendarItemId</a>[] ids)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="CalendarId">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarId"></a><h3>1.1. CalendarId</h3>
+<div class="brief">
+ The calendar identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString CalendarId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="CalendarTaskId">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarTaskId"></a><h3>1.2. CalendarTaskId</h3>
+<div class="brief">
+ The calendar task identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString CalendarTaskId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="CalendarItemId">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemId"></a><h3>1.3. CalendarItemId</h3>
+<div class="brief">
+ The calendar item identifier, which can either be a <em>CalendarEventId </em>or a <em>CalendarTaskId</em>.
+          </div>
+<pre class="webidl prettyprint">  typedef (<a href="#CalendarEventId">CalendarEventId</a> or <a href="#CalendarTaskId">CalendarTaskId</a>) CalendarItemId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="enum" id="CalendarType">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarType"></a><h3>1.4. CalendarType</h3>
+<div class="brief">
+ Specifies the calendar types.
+          </div>
+<pre class="webidl prettyprint">  enum CalendarType { "EVENT", "TASK" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following types are supported:
+          </p>
+          <ul>
+            <li>
+EVENT - if a calendar contains events (VEVENT objects)            </li>
+            <li>
+TASK - if a calendar contains tasks (VTODO objects)            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CalendarTextFormat">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarTextFormat"></a><h3>1.5. CalendarTextFormat</h3>
+<div class="brief">
+ Specifies the types of textual format of a Calendar.
+          </div>
+<pre class="webidl prettyprint">  enum CalendarTextFormat { "ICALENDAR_20", "VCALENDAR_10" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+ICALENDAR_20 -  if the textual format is iCalendar v2.0            </li>
+            <li>
+VCALENDAR_10 -  if the textual format is vCalendar v1.0            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="AlarmMethod">
+<a class="backward-compatibility-anchor" name="::Calendar::AlarmMethod"></a><h3>1.6. AlarmMethod</h3>
+<div class="brief">
+ Specifies the alarm types.
+          </div>
+<pre class="webidl prettyprint">  enum AlarmMethod { "SOUND", "DISPLAY" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+SOUND - if sound is played to alert the user            </li>
+            <li>
+DISPLAY - if display on screen without any sound is used to alert the user            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="RecurrenceRuleFrequency">
+<a class="backward-compatibility-anchor" name="::Calendar::RecurrenceRuleFrequency"></a><h3>1.7. RecurrenceRuleFrequency</h3>
+<div class="brief">
+ Specifies the types of frequency for the recurrence of an event.
+          </div>
+<pre class="webidl prettyprint">  enum RecurrenceRuleFrequency { "DAILY", "WEEKLY", "MONTHLY", "YEARLY" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Only the following values are valid for this attribute:
+          </p>
+          <ul>
+            <li>
+DAILY - if the event occurs daily            </li>
+            <li>
+WEEKLY - if the event occurs weekly            </li>
+            <li>
+MONTHLY -  if the event occurs monthly            </li>
+            <li>
+YEARLY - if the event occurs yearly            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="ByDayValue">
+<a class="backward-compatibility-anchor" name="::Calendar::ByDayValue"></a><h3>1.8. ByDayValue</h3>
+<div class="brief">
+ Specifies the values for <em>CalendarRecurrenceRule.daysOfWeek</em>.
+          </div>
+<pre class="webidl prettyprint">  enum ByDayValue { "MO", "TU", "WE", "TH", "FR", "SA", "SU" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+"MO" to "SU" correspond to "Monday" to "Sunday".
+          </p>
+         </div>
+</div>
+<div class="enum" id="EventAvailability">
+<a class="backward-compatibility-anchor" name="::Calendar::EventAvailability"></a><h3>1.9. EventAvailability</h3>
+<div class="brief">
+ Specifies the availability types of time for an event.
+          </div>
+<pre class="webidl prettyprint">  enum EventAvailability { "BUSY", "FREE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+FREE - if the specified time slot is vacant            </li>
+            <li>
+BUSY - if the specified time slot is not vacant            </li>
+            <li>
+BUSY-UNAVAILABLE - if the specified time slot is not vacant and can not be scheduled            </li>
+            <li>
+BUSY-TENTATIVE - if the specified time slot is not vacant because one or more events have been tentatively scheduled for that interval            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="AttendeeType">
+<a class="backward-compatibility-anchor" name="::Calendar::AttendeeType"></a><h3>1.10. AttendeeType</h3>
+<div class="brief">
+ Specifies the types of attendee.
+          </div>
+<pre class="webidl prettyprint">  enum AttendeeType { "INDIVIDUAL", "GROUP", "RESOURCE", "ROOM", "UNKNOWN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+At least the following values must be supported:
+          </p>
+          <ul>
+            <li>
+INDIVIDUAL - Individual            </li>
+            <li>
+GROUP - Group of individuals            </li>
+            <li>
+RESOURCE - Physical resource            </li>
+            <li>
+ROOM - Room resource            </li>
+            <li>
+UNKNOWN - Unknown            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="AttendeeStatus">
+<a class="backward-compatibility-anchor" name="::Calendar::AttendeeStatus"></a><h3>1.11. AttendeeStatus</h3>
+<div class="brief">
+ Specifies the attendance status types of a participant.
+          </div>
+<pre class="webidl prettyprint">  enum AttendeeStatus { "PENDING", "ACCEPTED", "DECLINED", "TENTATIVE", "DELEGATED", "COMPLETED", "IN_PROCESS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+At least the following values must be supported:
+          </p>
+          <ul>
+            <li>
+PENDING - if the participant has not yet responded to the event            </li>
+            <li>
+ACCEPTED - if the participant has accepted the event            </li>
+            <li>
+DECLINED - if the participant has declined the event            </li>
+            <li>
+TENTATIVE - if the participant has tentatively accepted the event            </li>
+            <li>
+DELEGATED - if the participant has delegated attendance to another participant            </li>
+            <li>
+COMPLETED - if the participant's event has been completed            </li>
+            <li>
+IN_PROCESS - if the participant's event is currently in process            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="AttendeeRole">
+<a class="backward-compatibility-anchor" name="::Calendar::AttendeeRole"></a><h3>1.12. AttendeeRole</h3>
+<div class="brief">
+ Specifies the role of an attendee.
+          </div>
+<pre class="webidl prettyprint">  enum AttendeeRole { "REQ_PARTICIPANT", "OPT_PARTICIPANT", "NON_PARTICIPANT", "CHAIR" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+At least the following values must be supported:
+          </p>
+          <ul>
+            <li>
+REQ_PARTICIPANT - if the participation of an attendee is mandatory            </li>
+            <li>
+OPT_PARTICIPANT - if the participation of an attendee is optional            </li>
+            <li>
+NON_PARTICIPANT - if the attendee is not a participant but is copied for information purposes            </li>
+            <li>
+CHAIR - if the attendee is the chairperson of the event.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CalendarItemPriority">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemPriority"></a><h3>1.13. CalendarItemPriority</h3>
+<div class="brief">
+ Specifies the priority of a calendar item.
+          </div>
+<pre class="webidl prettyprint">  enum CalendarItemPriority { "HIGH", "MEDIUM", "LOW" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+HIGH - if item priority is high            </li>
+            <li>
+MEDIUM - if item priority is medium            </li>
+            <li>
+LOW - if item priority is low            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CalendarItemVisibility">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemVisibility"></a><h3>1.14. CalendarItemVisibility</h3>
+<div class="brief">
+ Specifies the visibility types of a calendar item.
+          </div>
+<pre class="webidl prettyprint">   enum CalendarItemVisibility { "PUBLIC", "PRIVATE", "CONFIDENTIAL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+PUBLIC - if item visibility is public            </li>
+            <li>
+PRIVATE - if item visibility is private            </li>
+            <li>
+CONFIDENTIAL - if item visibility is confidential            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CalendarItemStatus">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemStatus"></a><h3>1.15. CalendarItemStatus</h3>
+<div class="brief">
+ Specifies the status of a calendar item.
+          </div>
+<pre class="webidl prettyprint">   enum CalendarItemStatus { "TENTATIVE", "CONFIRMED", "CANCELLED", "NEEDS_ACTION", "IN_PROCESS", "COMPLETED" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+For an event, the possible values are:
+          </p>
+          <ul>
+            <li>
+TENTATIVE - if the event is tentative            </li>
+            <li>
+CONFIRMED - if the event is confirmed            </li>
+            <li>
+CANCELLED -  if the event is cancelled            </li>
+          </ul>
+          <p>
+For a task, the possible values are:
+          </p>
+          <ul>
+            <li>
+NEEDS_ACTION - if the task needs action            </li>
+            <li>
+IN_PROCESS -  if the task is in process or being worked on            </li>
+            <li>
+COMPLETED - if the task has been completed            </li>
+            <li>
+CANCELLED -  if the task has been cancelled            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="CalendarManagerObject">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManagerObject"></a><h3>2.1. CalendarManagerObject</h3>
+<div class="brief">
+ The CalendarManagerObject interface gives access to the Calendar API from the <em>tizen.calendar </em>object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface CalendarManagerObject{
+    readonly attribute <a href="#CalendarManager">CalendarManager</a> calendar;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#CalendarManagerObject">CalendarManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="CalendarManager">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager"></a><h3>2.2. CalendarManager</h3>
+<div class="brief">
+ The CalendarManager interface provides methods to access calendars and attributes for calendars.
+Once a calendar object is obtained, it is possible to add, remove, or update the information it contains through the Calendar interface methods.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface CalendarManager {
+    void getCalendars(<a href="#CalendarType">CalendarType</a> type,
+                      <a href="#CalendarArraySuccessCallback">CalendarArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Calendar">Calendar</a> getUnifiedCalendar(<a href="#CalendarType">CalendarType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Calendar">Calendar</a> getDefaultCalendar(<a href="#CalendarType">CalendarType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addCalendar(<a href="#Calendar">Calendar</a> calendar) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeCalendar(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Calendar">Calendar</a> getCalendar(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarManager::getCalendars">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager::getCalendars"></a><code><b><span class="methodName">getCalendars</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets an array of Calendar objects.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getCalendars(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarArraySuccessCallback">CalendarArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the operation completes successfully, the <em>successCallback() </em>must be invoked with all the calendars found and available. The first calendar in the list is always the default calendar.
+            </p>
+            <p>
+If no Calendar object is available, the <em>successCallback()</em> is invoked with an empty array.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - if any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - if any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Type of a calendar
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var calendar;
+
+  function eventFoundCallback(events) {
+    // The event has been successfully found.
+    // Changes the summary.
+    events[0].summary = 'HTML6 Webinar';
+    calendar.update(events[0]);
+    console.log('First event was updated!');
+  }
+
+  // Defines the error callback for all the asynchronous calls.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the success callback for retrieving the list of calendars.
+  function calendarListCallback(calendars) {
+    if(calendars.length &gt; 0) {
+      calendar = calendars[0];
+      console.log('The calendar id is ' + calendar.id + ' and name ' + calendar.name);
+
+      var ev = new tizen.CalendarEvent({description:'HTML5 Introduction',
+                                         summary:'HTML5 Webinar',
+                                         startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+                                         duration: new tizen.TimeDuration(1, "HOURS"),
+                                         location:'Huesca'});
+      calendar.add(ev);
+
+      // The event has been successfully added.
+      // Checks whether the added event can be retrieved from the calendar.
+      // If the calendar was empty, only the item added through add() should be returned.
+      var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'HTML5');
+      calendar.find(eventFoundCallback, errorCallback, filter);
+    }
+  }
+
+  // Gets a list of available calendars.
+  tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CalendarManager::getUnifiedCalendar">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager::getUnifiedCalendar"></a><code><b><span class="methodName">getUnifiedCalendar</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The unified calendar is the aggregation of all calendars that are obtained from <em>getCalendars</em> and contains all events or tasks. It does not have the calendar ID nor name which are set to <var>null</var>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Calendar">Calendar</a> getUnifiedCalendar(<a href="#CalendarType">CalendarType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If an item is added to the unified calendar, it will be saved in the default calendar.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Type of a calendar
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Calendar The unified Calendar object.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var unifiedCalendar;
+
+  // Defines the error callback for all the asynchronous calls.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  function eventFoundCallback(events) {
+    // The event has been successfully found.
+    // Changes the summary.
+    events[0].summary = 'HTML6 Webinar';
+    unifiedCalendar.update(events[0]);
+    console.log('First event was updated!');
+  }
+
+  // Gets the unified calendar.
+  unifiedCalendar = tizen.calendar.getUnifiedCalendar("EVENT");
+
+  var ev = new tizen.CalendarEvent({description:'HTML5 Introduction',
+                                    summary:'HTML5 Webinar ',
+                                    startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+                                    duration: new tizen.TimeDuration(1, "HOURS"),
+                                    location:'Huesca'});
+
+  unifiedCalendar.add(ev);
+
+  // The event has been added.
+  // Checks whether the added event can be retrieved from the calendar.
+  // If the calendar was empty, only the item added through add() should be returned.
+  var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'HTML5');
+  unifiedCalendar.find(eventFoundCallback, errorCallback, filter);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CalendarManager::getDefaultCalendar">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager::getDefaultCalendar"></a><code><b><span class="methodName">getDefaultCalendar</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the default calendar, which is used for new items.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Calendar">Calendar</a> getDefaultCalendar(<a href="#CalendarType">CalendarType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Type of a calendar
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Calendar The default Calendar object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myCalendar;
+
+  // Defines the error callback for all the asynchronous calls.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  function eventFoundCallback(events) {
+    // The event has been successfully found.
+    // Changes the summary.
+    events[0].summary = 'HTML6 Webinar';
+    myCalendar.update(events[0]);
+    console.log('First event was updated!');
+  }
+
+  // Gets the default calendar.
+  myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  var ev = new tizen.CalendarEvent({description:'HTML5 Introduction',
+                                    summary:'HTML5 Webinar ',
+                                    startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+                                    duration: new tizen.TimeDuration(1, "HOURS"),
+                                    location:'Huesca'});
+
+  myCalendar.add(ev);
+
+  // The event has been added.
+  // Checks whether the added event can be retrieved from the calendar.
+  // If the calendar was empty, only the item added through add() should be returned.
+  var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'HTML5');
+  myCalendar.find(eventFoundCallback, errorCallback, filter);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CalendarManager::addCalendar">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager::addCalendar"></a><code><b><span class="methodName">addCalendar</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a calendar to the calendar database synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addCalendar(<a href="#Calendar">Calendar</a> calendar);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the calendar is successfully inserted in the database, the Calendar object
+will have its identifier (id attribute) set when the function returns.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">calendar</span>: 
+ Calendar to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the calendar could not be inserted to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var calendar = new tizen.Calendar(
+             account.id,
+             'remote calendar',
+             'TASK'
+         );
+         tizen.calendar.addCalendar(calendar);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CalendarManager::removeCalendar">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager::removeCalendar"></a><code><b><span class="methodName">removeCalendar</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a calendar from the calendar database synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeCalendar(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Removes the calendar that corresponds to the specified identifier from the database.
+The function will throw an exception if it failed to remove the specified calendar.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Type of a calendar
+                </li>
+          <li class="param">
+<span class="name">id</span>: 
+ Identifier (id attribute) of the calendar object to delete
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no calendar with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the identifier represents default calendar.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the calendar could not be removed to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var calendar = new tizen.Calendar(
+             account.id,
+             'remote calendar',
+             'TASK'
+         );
+         tizen.calendar.addCalendar(calendar);
+         tizen.calendar.removeCalendar('TASK', calendar.id);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CalendarManager::getCalendar">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarManager::getCalendar"></a><code><b><span class="methodName">getCalendar</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the calendar with the specified identifier and type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Calendar">Calendar</a> getCalendar(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Type of a calendar
+                </li>
+          <li class="param">
+<span class="name">id</span>: 
+ Identifier (id attribute) of the calendar object to get
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Calendar The matching Calendar object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no calendar with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var calendarId; // calendarId supposed to be initialized
+  try {
+    var calendar = tizen.calendar.getCalendar("EVENT", calendarId);
+    console.log("Successfully retrieved event calendar with id: " + calendarId);
+  } catch(err) {
+    console.log("Error: " + err.name);
+  }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Calendar">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar"></a><h3>2.3. Calendar</h3>
+<div class="brief">
+ The Calendar interface provides methods to manage events or tasks in a calendar. A Calendar object contains a set of events or tasks, depending on the calendar type.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="account.html#AccountId">AccountId</a> accountId, DOMString name, <a href="#CalendarType">CalendarType</a> type)]
+  interface Calendar {
+
+    readonly attribute <a href="#CalendarId">CalendarId</a> id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute <a href="account.html#AccountId">AccountId</a>? accountId;
+
+    <a href="#CalendarItem">CalendarItem</a> get(<a href="#CalendarItemId">CalendarItemId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#CalendarItem">CalendarItem</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#CalendarItem">CalendarItem</a>[] items,
+                  optional <a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#CalendarItem">CalendarItem</a> item,
+                optional boolean? updateAllInstances) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+     void updateBatch(<a href="#CalendarItem">CalendarItem</a>[] items,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                     optional boolean? updateAllInstances) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#CalendarItemId">CalendarItemId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#CalendarItemId">CalendarItemId</a>[] ids,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addChangeListener(<a href="#CalendarChangeCallback">CalendarChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+This interface offers the following methods to manage events in a calendar:
+          </p>
+          <ul>
+            <li>
+ Finding items using a key-value filter.            </li>
+            <li>
+ Adding items to a specific calendar using <em>add() </em>/ <em>addBatch() </em>methods.            </li>
+            <li>
+ Updating existing items using <em>update() </em>/ <em>updateBatch()</em> methods.            </li>
+            <li>
+ Deleting existing items using <em>remove()</em> / <em>removeBatch() </em>methods.            </li>
+            <li>
+ Tracking calendar changes using <em>addChangeListener()</em> / <em>removeChangeListener() </em>methods.            </li>
+          </ul>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var calendar = new tizen.Calendar(
+             account.id,
+             'remote calendar',
+             'TASK'
+         );
+         // 'calendar' variable is not available until it is inserted into the database.
+         tizen.calendar.addCalendar(calendar);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="Calendar::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">Calendar(<a href="account.html#AccountId">AccountId</a> accountId, DOMString name, <a href="#CalendarType">CalendarType</a> type);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Calendar::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CalendarId </span><span class="name">id</span></span><div class="brief">
+ Calendar identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Calendar::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ Readable (descriptive) name for a calendar, such as work or personal.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Gets the default calendar and show its name.
+  var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+  console.log('The calendar name is ' + calendar.name);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Calendar::accountId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AccountId </span><span class="name">accountId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Account identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Calendar::get">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the calendar item with the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#CalendarItem">CalendarItem</a> get(<a href="#CalendarItemId">CalendarItemId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ Calendar item identifier
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ CalendarItem The matching <em>CalendarItem </em>object.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no calendar item with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myCalendar; // Calendar supposed to be initialized
+  var itemId; // Calendar item identifier
+  try {
+    var item = myCalendar.get(itemId);
+    console.log("Successfully retrieved item with id: " + itemId);
+  } catch(err) {
+    console.log("Error: " + err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::add">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an item to the calendar synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#CalendarItem">CalendarItem</a> item);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the item is successfully inserted in the calendar, the <em>CalendarItem </em>will have its identifier (id attribute) set when the method returns.
+            </p>
+            <p>
+To update an existing item, call the <em>update() </em>method instead. If you wish to add a copy of an existing <em>CalendarItem </em>object, call <em>CalendarItem.clone()</em> method first and pass the clone to the <em>add()</em> method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Calendar item to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Gets the default calendar.
+  var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  var ev = new tizen.CalendarEvent({description:'HTML5 Introduction',
+                                   summary:'HTML5 Webinar ',
+                                   startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+                                   duration: new tizen.TimeDuration(1, "HOURS"),
+                                   location:'Huesca'});
+
+  calendar.add(ev);
+  console.log('Event added with uid ' + ev.id.uid);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::addBatch">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::addBatch"></a><code><b><span class="methodName">addBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an array of items to the calendar asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addBatch(<a href="#CalendarItem">CalendarItem</a>[] items, optional <a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If all the items are successfully added to the calendar, the success callback will be invoked, passing the list of <em>CalendarItem </em>objects that were added, with their identifier set (id attribute).
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - if any of the input parameters contain an invalid value, the item has any invalid value or the calendar has some restrictions that cause the attempted insertion of the calendar items to fail (for example, limitations in the size of text attributes)              </li>
+              <li>
+UnknownError - if any other error occurs.               </li>
+            </ul>
+            <p>
+If you wish to update an existing item, call the <em>update() </em>method instead. If you wish to add a copy of an existing <em>CalendarItem </em>object, call CalendarItem.clone() method first and pass the clone to the add() method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of calendar items to add
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when the request fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  function addEventsSuccess(events) {
+    console.log("Successfully added " + events.length + " events!");
+  }
+
+  // Gets the default calendar.
+  var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  var ev = new tizen.CalendarEvent({description:'HTML5 Introduction',
+                                   summary:'HTML5 Webinar ',
+                                   startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+                                   duration: new tizen.TimeDuration(1, "HOURS"),
+                                   location:'Huesca'});
+
+  calendar.addBatch([ev], addEventsSuccess, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::update">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates an existing item in the calendar synchronously with the one specified in the argument.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#CalendarItem">CalendarItem</a> item, optional boolean? updateAllInstances);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+In case of recurring events, the default behavior is to update all their instances (including their detached ones), as well. If you do not want that, the <em>updateAllInstances</em> flag should be set to <var>false</var>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Item object to update
+                </li>
+          <li class="param">
+<span class="name">updateAllInstances</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Flag indicating whether all the event instances should be updated as well (default value is <var>true</var>) <br>This parameter only applies to calendar events, and does not apply to tasks.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myCalendar;
+
+  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the event success callback.
+  function eventSearchSuccessCallback(events) {
+    events[0].description = 'New Description';
+    // Updates the first existing event.
+    myCalendar.update(events[0]);
+    console.log("The first item description was updated!");
+  }
+
+  // Gets the default calendar.
+  myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  // Finds all events in a Calendar.
+  myCalendar.find(eventSearchSuccessCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::updateBatch">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::updateBatch"></a><code><b><span class="methodName">updateBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates an array of existing items in the calendar asynchronously with the specified values in the argument.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateBatch(<a href="#CalendarItem">CalendarItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional boolean? updateAllInstances);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+In case of recurring events, the default behavior is to update all their instances (including their detached ones) as well. The <em>updateAllInstances</em> flag should be set to <var>false</var> to change the default behavior.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - if parameters such as the calendar item has any invalid value or the calendar has some restrictions that cause the attempted insertion of the calendar items to fail (for example, limitations in the size of text attributes).              </li>
+              <li>
+UnknownError - if any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of calendar item objects to update
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when the <em>updateEvents() </em>request succeeds
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when the <em>updateEvents() </em>request fails
+                </li>
+          <li class="param">
+<span class="name">updateAllInstances</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Flag indicating whether all the event instances should be updated <br>Default value for this flag is <var>true</var>). This parameter applies only to calendar events, and does not apply to tasks.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myCalendar;
+
+  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the success callback.
+  function updateEventsSuccess() {
+    console.log("Successfully updated !" );
+  }
+
+  // Defines the event success callback.
+  function eventSearchSuccessCallback(events) {
+    events[0].description = 'New Description 1';
+    events[1].description = 'New Description 2';
+    // Updates the first two existing events.
+    myCalendar.updateBatch(events.slice(0,2), updateEventsSuccess, errorCallback);
+  }
+
+  // Gets the default calendar.
+  myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  // Finds all events in Calendar.
+  myCalendar.find(eventSearchSuccessCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::remove">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes an item from the calendar that corresponds to the specified identifier. This method will throw an exception if it fails to remove the specified calendar item.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#CalendarItemId">CalendarItemId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ <b>For (recurring) events:</b> In the case of calendar events, if the recurrence ID (<em>rid</em> attribute) is set to <var>null</var>, this method will remove the event identified by <em>uid</em>, and all of its possible detached instances.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The identifier (id attribute) of the item object to delete
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any item in the calendar.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the item could not be removed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myCalendar;
+
+  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the event success callback.
+  function eventSearchSuccessCallback(events) {
+    // Deletes the first existing event.
+    myCalendar.remove(events[0].id);
+    console.log('The first event was removed');
+  }
+
+  // Gets default calendar.
+  myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  // Finds all events in Calendar.
+  myCalendar.find(eventSearchSuccessCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::removeBatch">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::removeBatch"></a><code><b><span class="methodName">removeBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes several items from the calendar asynchronously depending on the specified identifiers.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeBatch(<a href="#CalendarItemId">CalendarItemId</a>[] ids, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - if an identifier in the <em>ids </em>parameter does not correspond to the id attribute of an item in the calendar.              </li>
+              <li>
+InvalidValuesError - if any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - if any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ <b>For (recurring) events:</b> In the case of calendar events, if the recurrence id, <em>rid</em>, is set to <var>null</var>, this method will remove the event identified by <em>uid</em>, as well as all its possible detached instances.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ids</span>: 
+ The identifiers (<em>id </em>attribute) of the items to delete
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when the <em>removeBatch()</em> request succeeds
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when the <em>removeBatch()</em> request fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myCalendar;
+
+  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the removeBatch callback.
+  function removeBatchCallback() {
+    console.log("Requested events were successfully removed.");
+  }
+
+  // Defines the event search success callback.
+  function eventSearchSuccessCallback(events) {
+    // Deletes the first two existing events.
+    myCalendar.removeBatch([events[0].id, events[1].id],
+                           removeBatchCallback,
+                           errorCallback);
+  }
+
+  // Gets the default calendar.
+  myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  // Retrieves all the events in Calendar.
+  myCalendar.find(eventSearchSuccessCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::find">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::find"></a><code><b><span class="methodName">find</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds and fetches an array of <em>CalendarItem </em>objects for items stored in the calendar according to the supplied filter if it is valid else it will return all the items stored.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void find(<a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the filter is passed and contains valid values, only those values in the calendar that match the filter criteria as specified in the <em>AbstractFilter </em>interface will be returned in the <em>successCallback()</em>.
+If no filter is passed, or the filter contains any invalid value which is <var>null </var>or undefined, then the implementation must return the full list of items in the <em>successCallback()</em>.
+If no items are available in the calendar (it is empty) or no item matches the filter criteria, the <em>successCallback() </em>will be invoked with an empty array.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - if any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - if any other error occurs.              </li>
+            </ul>
+            <p>
+<b>Filter specific remarks:</b>            </p>
+            <ul>
+              <li>
+For event filtering based on start or end dates, items that recur during the given time interval will be found, even if the parent item itself is outside the interval.              </li>
+              <li>
+For event filtering based on the identifier, the identifier type should be CalendarEventID (<em>uid</em> and <em>rid</em>).
+If no recurrence ID is given, the filter will match both the parent event and all its detached instances.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Supplied data used to filter the results of the <em>find() </em>method
+                </li>
+          <li class="param">
+<span class="name">sortMode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Sort order in which the items return
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the event search success callback.
+  function eventSearchSuccessCallback(events) {
+    console.log(events.length + ' results found.');
+  }
+
+  // Gets the default calendar.
+  var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  // Finds all events the calendar that contain in the summary the string Tizen.
+  var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'Tizen');
+
+  // The events returned by the find() query will be sorted by ascending summary.
+  var sortingMode = new tizen.SortMode('summary', 'ASC');
+
+  calendar.find(eventSearchSuccessCallback, errorCallback, filter, sortingMode);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::addChangeListener">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::addChangeListener"></a><code><b><span class="methodName">addChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to receive notifications about calendar changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addChangeListener(<a href="#CalendarChangeCallback">CalendarChangeCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+When executed, the implementation must immediately return a subscription identifier that identifies the watch operation. After returning the identifier, the watcher methods are invoked asynchronously.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback methods that is invoked on receiving calendar change notifications
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The identifier used to clear the watch subscription
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var watcherId = 0; // watcher identifier
+  var calendar; // This example assumes calendar is initialized
+
+  var watcher = {
+    onitemsadded: function(items) {
+      console.log(items.length + ' items were added');
+    },
+    onitemsupdated: function(items) {
+      console.log(items.length + ' items were updated');
+    },
+    onitemsremoved: function(ids) {
+      console.log(ids.length + ' items were removed');
+    }
+  };
+
+  // Registers to be notified when the calendar changes.
+  watcherId = calendar.addChangeListener(watcher);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Calendar::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Calendar::Calendar::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification for a calendar item change.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the <em>watchId </em>argument is valid and corresponds to a subscription already in place, the watch process must immediately stop and no further callbacks must be invoked. If the <em>watchId </em>argument is not valid or does not correspond to a valid subscription, the method should return without any further action.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var watcherId = 0; // watcher identifier
+  var calendar; // This example assumes calendar is initialized.
+
+  // Receives calendar changes.
+  var watcher = {
+    onitemsadded: function(items) {
+      console.log(items.length + ' items were added');
+    },
+    onitemsupdated: function(items) {
+      console.log(evitemsents.length + ' items were updated');
+    },
+    onitemsremoved: function(ids) {
+      console.log(ids.length + ' items were removed');
+    }
+  };
+
+  // Registers to be notified when the calendar changes.
+  watcherId = calendar.addChangeListener(watcher);
+
+  // Cancels the watch operation.
+  calendar.removeChangeListener(watcherId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="CalendarItemInit">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemInit"></a><h3>2.4. CalendarItemInit</h3>
+<div class="brief">
+ The CalendarItemInit dictionary is used for creating calendar items.
+          </div>
+<pre class="webidl prettyprint">  dictionary CalendarItemInit {
+    DOMString description;
+    DOMString summary;
+    boolean isAllDay;
+    <a href="time.html#TZDate">TZDate</a> startDate;
+    <a href="time.html#TimeDuration">TimeDuration</a> duration;
+    DOMString location;
+    <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a> geolocation;
+    DOMString organizer;
+    <a href="#CalendarItemVisibility">CalendarItemVisibility</a> visibility;
+    <a href="#CalendarItemStatus">CalendarItemStatus</a> status;
+    <a href="#CalendarItemPriority">CalendarItemPriority</a> priority;
+    <a href="#CalendarAlarm">CalendarAlarm</a>[] alarms;
+    DOMString[] categories;
+    <a href="#CalendarAttendee">CalendarAttendee</a>[] attendees;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+These attributes are shared by both calendar events and tasks.
+          </p>
+         </div>
+</div>
+<div class="dictionary" id="CalendarTaskInit">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarTaskInit"></a><h3>2.5. CalendarTaskInit</h3>
+<div class="brief">
+ The CalendarTaskInit dictionary is used for creating calendar tasks.
+          </div>
+<pre class="webidl prettyprint">  dictionary CalendarTaskInit: <a href="#CalendarItemInit">CalendarItemInit</a> {
+    <a href="time.html#TZDate">TZDate</a> dueDate;
+    <a href="time.html#TZDate">TZDate</a> completedDate;
+    short progress;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It also provides an interface for specifying task attributes upon task creation (in the <em>CalendarTask </em>constructor).
+          </p>
+          <p>
+All the attributes are optional and are undefined by default.
+          </p>
+         </div>
+<p>This dictionary inherits from: <code>CalendarItemInit</code></p>
+</div>
+<div class="dictionary" id="CalendarEventInit">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarEventInit"></a><h3>2.6. CalendarEventInit</h3>
+<div class="brief">
+ The CalendarEventInit dictionary is used for creating calendar events.
+          </div>
+<pre class="webidl prettyprint">  dictionary CalendarEventInit: <a href="#CalendarItemInit">CalendarItemInit</a> {
+    <a href="time.html#TZDate">TZDate</a> endDate;
+    <a href="#EventAvailability">EventAvailability</a> availability;
+    <a href="#CalendarRecurrenceRule">CalendarRecurrenceRule</a> recurrenceRule;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Provides an interface for specifying event attributes upon event creation (in the <em>CalendarEvent </em>constructor).
+          </p>
+          <p>
+All the attributes are optional and are undefined by default.
+          </p>
+         </div>
+<p>This dictionary inherits from: <code>CalendarItemInit</code></p>
+</div>
+<div class="interface" id="CalendarItem">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItem"></a><h3>2.7. CalendarItem</h3>
+<div class="brief">
+ The CalendarItem interface is a parent interface that is used to create Calendar events and tasks.
+These attributes are shared by both events and tasks.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface CalendarItem {
+    readonly attribute <a href="#CalendarItemId">CalendarItemId</a>? id;
+
+    readonly attribute <a href="#CalendarId">CalendarId</a>? calendarId;
+
+    readonly attribute <a href="time.html#TZDate">TZDate</a>? lastModificationDate;
+
+    attribute DOMString? description setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? summary setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute boolean isAllDay setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TZDate">TZDate</a>? startDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TimeDuration">TimeDuration</a>? duration setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? location setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? organizer setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarItemVisibility">CalendarItemVisibility</a> visibility setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarItemStatus">CalendarItemStatus</a> status setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarItemPriority">CalendarItemPriority</a> priority setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarAlarm">CalendarAlarm</a>[] alarms setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] categories setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarAttendee">CalendarAttendee</a>[] attendees setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString convertToString(<a href="#CalendarTextFormat">CalendarTextFormat</a> format) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#CalendarItem">CalendarItem</a> clone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarItem::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CalendarItemId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Calendar item identifier.
+            </div>
+<div class="description">
+            <p>
+Includes a UID and a possible recurrence ID that is needed to identify a particular instance of a recurring event.
+            </p>
+            <p>
+By default, this attribute is set to null.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarItem::calendarId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CalendarId </span><span class="name">calendarId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Identifier of the calendar in which this item is saved.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to null.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="CalendarItem::lastModificationDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">TZDate </span><span class="name">lastModificationDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The last modified date and time of an item.
+            </div>
+<div class="description">
+            <p>
+This attribute is automatically populated and cannot be edited by the client.
+(See RFC 5545 - Section 3.8.7.3).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarItem::description">
+<span class="attrName"><span class="type">DOMString </span><span class="name">description</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The textual descriptions of an item.
+            </div>
+<div class="description">
+            <p>
+It is usually used to provide a more complete description of the item and any supporting information than what is provided in the summary attribute.
+(See RFC 5545 - Section 3.8.1.5).
+            </p>
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.description = 'Tizen Codefest';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::summary">
+<span class="attrName"><span class="type">DOMString </span><span class="name">summary</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The short summary or subject for an item.
+(See RFC 5545 - Section 3.8.1.12)
+            </div>
+<div class="description">
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.summary = 'Launching the Tizen reference implementation';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::isAllDay">
+<span class="attrName"><span class="type">boolean </span><span class="name">isAllDay</span></span><div class="brief">
+ Flag to indicate whether an event is an all-day event.
+            </div>
+<div class="description">
+            <p>
+If set to <var>true</var>, then the time and time zone of the <em>startDate </em>are to be ignored and are not guaranteed to be stored in the database. An all-day event always covers the whole day, regardless of which time zone it was defined in and what the current time zone is. The duration must be <var>n*60*24 </var>minutes for an event lasting <var>n</var> days.
+            </p>
+            <p>
+The default value for this attribute is <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.isAllDay = true; // All-Day event
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::startDate">
+<span class="attrName"><span class="type">TZDate </span><span class="name">startDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The start date or time for an item.
+(see RFC 5545 - Section 3.8.2.4).
+            </div>
+<div class="description">
+            <p>
+The default value for this attribute is <var>null</var>.
+            </p>
+            <p>
+<em>startDate</em> must be specified in the same time zone as <em>endDate / dueDate</em> if provided.
+            </p>
+           </div>
+<div class="description">
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // 2010-04-30 09:00
+  event.startDate = new tizen.TZDate(2010, 3, 30, 9, 0);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::duration">
+<span class="attrName"><span class="type">TimeDuration </span><span class="name">duration</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The duration of the calendar component.
+(See RFC 5545 - Section 3.8.2.5).
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+            <p>
+<em>duration</em> and <em>endDate / dueDate</em> are mutually exclusive, hence, only one of them can be non-null.
+            </p>
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ Note that the implementation may not save the duration itself, rather convert it to the corresponding endDate/dueDate attribute and save it. For example, if you set the startDate and the duration attributes and save the item, you may see that the duration is <var>null</var> while endDate/dueDate is non-null after retrieving it because the implementation has calculated the endDate/dueDate based on the duration and the startDate then saved it, not the duration.
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // 1 hour meeting
+  event.duration = new tizen.TimeDuration(1, "HOURS");
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::location">
+<span class="attrName"><span class="type">DOMString </span><span class="name">location</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The location or the intended venue for the activity defined by the calendar item.
+(See RFC 5545 - Section 3.8.1.7)
+            </div>
+<div class="description">
+            <p>
+The default value for this attribute is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.location = 'Huesca';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::geolocation">
+<span class="attrName"><span class="type">SimpleCoordinates </span><span class="name">geolocation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The global position latitude and longitude of the location where the event is planned to take place.
+(See RFC 5545 - Section 3.8.1.6).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.geolocation = new tizen.SimpleCoordinates(60.175, 24.934);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::organizer">
+<span class="attrName"><span class="type">DOMString </span><span class="name">organizer</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name of the person who organized this event.
+(See RFC 5545 - Section 3.8.4.3).
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.organizer = 'Mr. Jones';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::visibility">
+<span class="attrName"><span class="type">CalendarItemVisibility </span><span class="name">visibility</span></span><div class="brief">
+ The visibility (secrecy) level of the item.
+(See RFC 5545 - Section 3.8.1.3).
+            </div>
+<div class="description">
+            <p>
+The default value is <var>PUBLIC</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarItem::status">
+<span class="attrName"><span class="type">CalendarItemStatus </span><span class="name">status</span></span><div class="brief">
+ The overall confirmation status for a calendar component.
+(See RFC 5545 - Section 3.8.1.11).
+            </div>
+<div class="description">
+            <p>
+For an event, the default value is <var>CONFIRMED</var>. For a task, the default value is <var>NEEDS_ACTION</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.status = "TENTATIVE";
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::priority">
+<span class="attrName"><span class="type">CalendarItemPriority </span><span class="name">priority</span></span><div class="brief">
+ The priority level of an item and may be used to relatively prioritize multiple items during a given period of time.
+(See RFC 5545 - Section 3.8.1.9).
+            </div>
+<div class="description">
+            <p>
+The default value for this attribute is <var>LOW </var>priority.
+            </p>
+            <p>
+If the native item database supports another priority schema (such as a range from 1 to 9), the implementation must convert those values to the supported values. For instance, RFC 5545 suggests the following mapping for a range from 1 to 9:
+            </p>
+            <ul>
+              <li>
+1-4 to HIGH,              </li>
+              <li>
+5 to MEDIUM,              </li>
+              <li>
+6-9 to LOW.              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  task.priority = "HIGH";
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::alarms">
+<span class="attrName"><span class="type">CalendarAlarm[]
+                      </span><span class="name">alarms</span></span><div class="brief">
+ The array of the alarms (or reminders) associated to an item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  ev.startDate = new tizen.TZDate(2011, 2, 11, 8, 0, 0);
+  // Gives a sound notification 30 minutes before the item's start time.
+  var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, "MINS"),
+                                       "SOUND");
+  ev.alarms = [alarm];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::categories">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">categories</span></span><div class="brief">
+ The flag that indicates the item categories or subtypes of a calendar component. The categories are useful in searching for a calendar component of a particular type and category.
+(See RFC 5545 - Section 3.8.1.2).
+            </div>
+<div class="description">
+            <p>
+Examples of categories are personal, work, vacation, travel, and so on.
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  event.categories = ['Personal'];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarItem::attendees">
+<span class="attrName"><span class="type">CalendarAttendee[]
+                      </span><span class="name">attendees</span></span><div class="brief">
+ The array that lists the people attending an event.
+(See RFC 5545 - Section 3.8.4.3).
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var attendee = new tizen.CalendarAttendee('mailto:bob@domain.com',
+                                           {role: "CHAIR", RSVP: true});
+  event.attendees = [attendee];
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarItem::convertToString">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItem::convertToString"></a><code><b><span class="methodName">convertToString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Converts the calendar item to a string format that will be generated and returned synchronously.
+The export format is set using the format parameter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString convertToString(<a href="#CalendarTextFormat">CalendarTextFormat</a> format);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">format</span>: 
+ Format to use for exporting
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The representation of the Calendar item
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the event search success callback.
+  function eventSearchSuccessCallback(events) {
+    // Converts the first event to iCalendar 2.0 format (default).
+    var vevent = events[0].convertToString("ICALENDAR_20");
+    console.log('iCalendar 2.0 representation of the event is: ' + vevent);
+  }
+
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Gets the default calendar.
+  var myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  // Finds all events in the first calendar that contain in the summary the string Tizen.
+  var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'Tizen');
+  myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CalendarItem::clone">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItem::clone"></a><code><b><span class="methodName">clone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Clones the <em>CalendarItem </em>object, detached from any calendar.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#CalendarItem">CalendarItem</a> clone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The <em>CalendarItem </em>object returned by the <em>clone()</em> method will have its identifier set to <var>null </var>and will be detached from any calendar.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ CalendarItem New clone of the <em>CalendarItem </em>object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Gets the default calendar.
+  var calendar = tizen.calendar.getDefaultCalendar();
+
+  var html5seminar = new tizen.CalendarEvent({startDate: new tizen.TZDate(2012, 3, 4),
+                                              duration: new tizen.TimeDuration(3, "DAYS"),
+                                              summary: "HTML5 Seminar"});
+
+  calendar.add(html5seminar);
+  var tizenseminar = html5seminar.clone();
+  tizenseminar.summary = "Tizen Seminar";
+  calendar.add(tizenseminar);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CalendarTask">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarTask"></a><h3>2.8. CalendarTask</h3>
+<div class="brief">
+ This interface implements the <em>CalendarTask </em>object.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional <a href="#CalendarTaskInit">CalendarTaskInit</a>? taskInitDict),
+   Constructor(DOMString stringRepresentation, <a href="#CalendarTextFormat">CalendarTextFormat</a> format)]
+  interface CalendarTask : <a href="#CalendarItem">CalendarItem</a> {
+    attribute <a href="time.html#TZDate">TZDate</a>? dueDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TZDate">TZDate</a>? completedDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute unsigned short progress setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var taskCalendar, task;
+
+  try {
+    var task = new tizen.CalendarTask("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: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");
+
+    taskCalendar = tizen.calendar.getDefaultCalendar("TASK");
+    taskCalendar.add(task);
+    console.log("Task added with ID " + task.id);
+  } catch (err) {
+    console.log("Failed to add VTODO to the calendar, error: " + err.name);
+  }
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="CalendarTask::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">CalendarTask(optional <a href="#CalendarTaskInit">CalendarTaskInit</a>? taskInitDict);</pre>
+<pre class="webidl prettyprint">CalendarTask(DOMString stringRepresentation, <a href="#CalendarTextFormat">CalendarTextFormat</a> format);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarTask::dueDate">
+<span class="attrName"><span class="type">TZDate </span><span class="name">dueDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The due date and time for completing a task. (See RFC 5545 - Section 3.8.2.3).
+            </div>
+<div class="description">
+            <p>
+This <em>dueDate</em> must be in the same time zone as the <em>startDate</em>. The <em>duration</em> and <em>dueDate</em> are mutually exclusive, so only one of them can be non-null.
+            </p>
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+            <p>
+The default value is <var>null</var>. If no value is provided, the task does not have a due date.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  task.dueDate = new tizen.TZDate(2011, 2, 11);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarTask::completedDate">
+<span class="attrName"><span class="type">TZDate </span><span class="name">completedDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The date and time when an task is completed.
+(See RFC 5545 - Section 3.8.2.1).
+            </div>
+<div class="description">
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+            <p>
+The default value is <var>null</var>. If no value is provided, the task is not completed yet.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  task.completedDate = new tizen.TZDate(2011, 2, 11);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarTask::progress">
+<span class="attrName"><span class="type">unsigned short </span><span class="name">progress</span></span><div class="brief">
+ The percent of completion of a task.
+            </div>
+<div class="description">
+            <p>
+The value is a positive integer between <var>0 </var>and <var>100</var>. A value of <var>0 </var>indicates the task has not been started yet. A value of <var>100 </var>indicates that the task has been completed.
+            </p>
+            <p>
+Integer values in between indicate the percent partially complete.
+(See RFC 5545 - Section 3.8.1.8).
+            </p>
+            <p>
+The default value is <var>0</var>, implies that the task has not been started.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  task.progress = 50; // 50% done
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CalendarEvent">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarEvent"></a><h3>2.9. CalendarEvent</h3>
+<div class="brief">
+ This interface implements the <em>calendarEvent </em>object.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional <a href="#CalendarEventInit">CalendarEventInit</a>? eventInitDict),
+   Constructor(DOMString stringRepresentation, <a href="#CalendarTextFormat">CalendarTextFormat</a> format)]
+  interface CalendarEvent : <a href="#CalendarItem">CalendarItem</a> {
+    readonly attribute boolean isDetached;
+
+    attribute <a href="time.html#TZDate">TZDate</a>? endDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#EventAvailability">EventAvailability</a> availability setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarRecurrenceRule">CalendarRecurrenceRule</a>? recurrenceRule setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void expandRecurrence(<a href="time.html#TZDate">TZDate</a> startDate,
+                          <a href="time.html#TZDate">TZDate</a> endDate,
+                          <a href="#CalendarEventArraySuccessCallback">CalendarEventArraySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Gets the default calendar.
+  var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+
+  try {
+    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: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);
+  } catch (err) {
+    console.log("Failed to add VEVENT to the calendar, error: " + err.name);
+  }
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="CalendarEvent::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">CalendarEvent(optional <a href="#CalendarEventInit">CalendarEventInit</a>? eventInitDict);</pre>
+<pre class="webidl prettyprint">CalendarEvent(DOMString stringRepresentation, <a href="#CalendarTextFormat">CalendarTextFormat</a> format);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarEvent::isDetached">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isDetached</span></span><div class="brief">
+ The flag that indicates whether an instance of a recurring event is detached and if it has been modified and saved to the calendar.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarEvent::endDate">
+<span class="attrName"><span class="type">TZDate </span><span class="name">endDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The end date/time of an event.
+            </div>
+<div class="description">
+            <p>
+(see RFC 5545 - Section 3.8.2.2).
+            </p>
+            <p>
+This <em>endDate</em> must be in the same time zone as the <em>startDate</em>.
+Note that <em>duration</em> and <em>endDate</em> are mutually exclusive, only one of them can be non-null.
+            </p>
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+            <p>
+The default value for this attribute is <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // 2010-04-30 09:00
+  event.endDate = new tizen.TZDate(2010, 3, 30, 9, 0);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="CalendarEvent::availability">
+<span class="attrName"><span class="type">EventAvailability </span><span class="name">availability</span></span><div class="brief">
+ The availability of a person for an event.
+(See RFC 5545 - Section 3.2.9).
+            </div>
+<div class="description">
+            <p>
+The default value is <var>BUSY</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarEvent::recurrenceRule">
+<span class="attrName"><span class="type">CalendarRecurrenceRule </span><span class="name">recurrenceRule</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The recurrence rule for the event.
+            </div>
+<div class="description">
+            <p>
+The generated instances of a recurring event will have the same recurrence rule as their parent. This is useful when editing a particular event instance and choosing to update <b>all</b> instances from it.
+            </p>
+            <p>
+The detached instances (specific instances that have been modified as saved to the calendar) of a recurring event will not have any recurrence rule. No recurrence rule can be set on detached instances either. If one tries to set a recurrence rule on a detached event, a NotSupportedError should be thrown. Detached instances can be distinguished by checking their <em>isDetached</em> attribute.
+(See RFC 5545, Section 3.3.10.)
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Repeats daily for 7 days.
+  var rule = new tizen.CalendarRecurrenceRule("DAILY", {occurrenceCount: 7});
+  event.recurrenceRule = rule;
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarEvent::expandRecurrence">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarEvent::expandRecurrence"></a><code><b><span class="methodName">expandRecurrence</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Expands a recurring event and returns asynchronously the list of instances occurring in a given time interval (inclusive).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void expandRecurrence(<a href="time.html#TZDate">TZDate</a> startDate, <a href="time.html#TZDate">TZDate</a> endDate, <a href="#CalendarEventArraySuccessCallback">CalendarEventArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes into consideration all the parameters of the event recurrence rule to generate the instances occurring in a given time interval.
+            </p>
+            <p>
+The call involves retrieving from the database detached instances of an event to replace their corresponding virtual instances in the returned list. The client can then use <em>CalendarEvent.isDetached </em>attribute to identify detached instances. If the event is not saved to a calendar yet, only virtual instances will be returned.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - if the event in operation is not recurring.              </li>
+              <li>
+UnknownError - if any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/calendar.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">startDate</span>: 
+ Start date/ time of an event(inclusive)
+                </li>
+          <li class="param">
+<span class="name">endDate</span>: 
+ End date/ time of an event (inclusive)
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // eventId should be set to ID of event obtained with the find function.
+  var eventId;
+  // Defines the error callback.
+  function errorCallback(response) {
+    console.log( 'The following error occurred: ' +  response.name);
+  }
+
+  // Defines the event expanding success callback.
+  function eventExpandingSuccessCallback(events) {
+    console.log(events.length + ' event instances were returned.');
+  }
+
+  var calendar = tizen.calendar.getDefaultCalendar();
+  var event = calendar.get(eventId);
+
+  if (event.recurrenceRule != null) {
+    // This is a recurring event. Expands all the instances during August 2011.
+    event.expandRecurrence(new tizen.TZDate(2011, 7, 1),
+                          new tizen.TZDate(2011, 7, 31),
+                          eventExpandingSuccessCallback,
+                          errorCallback);
+  }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="CalendarAttendeeInit">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarAttendeeInit"></a><h3>2.10. CalendarAttendeeInit</h3>
+<div class="brief">
+ The CalendarAttendeeInit dictionary defines the properties of a <em>CalendarAttendee</em>, to pass to its constructor.
+          </div>
+<pre class="webidl prettyprint">  dictionary CalendarAttendeeInit {
+    DOMString name;
+    <a href="#AttendeeRole">AttendeeRole</a> role;
+    <a href="#AttendeeStatus">AttendeeStatus</a> status;
+    boolean RSVP;
+    <a href="#AttendeeType">AttendeeType</a> type;
+    DOMString? group;
+    DOMString delegatorURI;
+    DOMString delegateURI;
+    <a href="contact.html#ContactRef">ContactRef</a> contactRef;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+See <em>CalendarAttendee </em>interface for more information about the members.
+          </p>
+         </div>
+</div>
+<div class="interface" id="CalendarAttendee">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarAttendee"></a><h3>2.11. CalendarAttendee</h3>
+<div class="brief">
+ The CalendarAttendee interface implements the <em>CalendarAttendee </em>object that contains information about an event attendee.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString uri, optional <a href="#CalendarAttendeeInit">CalendarAttendeeInit</a>? attendeeInitDict)]
+  interface CalendarAttendee
+  {
+    attribute DOMString uri;
+
+    attribute DOMString? name;
+
+    attribute <a href="#AttendeeRole">AttendeeRole</a> role;
+
+    attribute <a href="#AttendeeStatus">AttendeeStatus</a> status;
+
+    attribute boolean RSVP;
+
+    attribute <a href="#AttendeeType">AttendeeType</a> type;
+
+    attribute DOMString? group;
+
+    attribute DOMString? delegatorURI;
+
+    attribute DOMString? delegateURI;
+
+    attribute <a href="contact.html#ContactRef">ContactRef</a>? contactRef;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+By default, each of the attributes of this interface are undefined.
+          </p>
+          <p>
+(For more details, see RFC 5545, Section 3.8.4.1.)
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var attendee = new tizen.CalendarAttendee('mailto:bob@domain.com',
+                                           {role: "CHAIR", RSVP: true});
+  event.attendees = [attendee];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="CalendarAttendee::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">CalendarAttendee(DOMString uri, optional <a href="#CalendarAttendeeInit">CalendarAttendeeInit</a>? attendeeInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarAttendee::uri">
+<span class="attrName"><span class="type">DOMString </span><span class="name">uri</span></span><div class="brief">
+ The URI for the attendee.
+            </div>
+<div class="description">
+            <p>
+This is often an email in the form 'mailto:name@domain.com'.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name of an attendee.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::role">
+<span class="attrName"><span class="type">AttendeeRole </span><span class="name">role</span></span><div class="brief">
+ The role of the attendee.
+            </div>
+<div class="description">
+            <p>
+(See RFC 5545, Section 3.2.16.)
+            </p>
+            <p>
+The default value is <var>REQ_PARTICIPANT</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::status">
+<span class="attrName"><span class="type">AttendeeStatus </span><span class="name">status</span></span><div class="brief">
+ The participant's attendance status.
+(See RFC 5545, Section 3.2.12.)
+            </div>
+<div class="description">
+            <p>
+The default value is <var>PENDING</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::RSVP">
+<span class="attrName"><span class="type">boolean </span><span class="name">RSVP</span></span><div class="brief">
+ The attendee's participation status reply (RSVP).
+(See RFC 5545, Section 3.2.17.)
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>FALSE</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::type">
+<span class="attrName"><span class="type">AttendeeType </span><span class="name">type</span></span><div class="brief">
+ The type of a participant.
+(See RFC 5545, Section 3.2.3.)
+            </div>
+<div class="description">
+            <p>
+The default value is <var>INDIVIDUAL</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::group">
+<span class="attrName"><span class="type">DOMString </span><span class="name">group</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The participant's group or list membership.
+(See RFC 5545, Section 3.2.11.)
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::delegatorURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">delegatorURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI of the person who has delegated their participation to this attendee.
+(See RFC 5545, Section 3.2.4.)
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::delegateURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">delegateURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI of the attendee to whom the person has delegated his participation.
+(See RFC 5545, Section 3.2.5.)
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAttendee::contactRef">
+<span class="attrName"><span class="type">ContactRef </span><span class="name">contactRef</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The participant's reference in the Contact API.
+            </div>
+<div class="description">
+            <p>
+If the contact is not resolved, this attribute will be set to<var> null</var>.
+For more information, see the <a href="contact.html">Contact API</a>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="CalendarRecurrenceRuleInit">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarRecurrenceRuleInit"></a><h3>2.12. CalendarRecurrenceRuleInit</h3>
+<div class="brief">
+ The CalendarRecurrenceRuleInit dictionary defines the properties of a <em>CalendarRecurrenceRule</em> to pass to its constructor.
+          </div>
+<pre class="webidl prettyprint">  dictionary CalendarRecurrenceRuleInit {
+    short interval;
+    <a href="time.html#TZDate">TZDate</a> untilDate;
+    long occurrenceCount;
+    <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+    short[] setPositions;
+    <a href="time.html#TZDate">TZDate</a>[] exceptions;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+For more information about the members, see <em>CalendarRecurrenceRule </em>interface.
+          </p>
+         </div>
+</div>
+<div class="interface" id="CalendarRecurrenceRule">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarRecurrenceRule"></a><h3>2.13. CalendarRecurrenceRule</h3>
+<div class="brief">
+ The CalendarRecurrenceRule interface implements the<em> CalendarRecurrenceRule </em>object, which contains information about the recurrence of an event.
+(See RFC 5545, Section 3.3.10.)
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="#RecurrenceRuleFrequency">RecurrenceRuleFrequency</a> frequency, optional <a href="#CalendarRecurrenceRuleInit">CalendarRecurrenceRuleInit</a>? ruleInitDict)]
+  interface CalendarRecurrenceRule
+  {
+    attribute <a href="#RecurrenceRuleFrequency">RecurrenceRuleFrequency</a> frequency;
+
+    attribute unsigned short interval;
+
+    attribute <a href="time.html#TZDate">TZDate</a>? untilDate;
+
+    attribute long occurrenceCount;
+
+    attribute <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+
+    attribute short[] setPositions;
+
+    attribute <a href="time.html#TZDate">TZDate</a>[] exceptions;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Repeats daily for 7 days.
+  var rule = new tizen.CalendarRecurrenceRule("DAILY", {occurrenceCount:7});
+  event.recurrenceRule = rule;
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="CalendarRecurrenceRule::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">CalendarRecurrenceRule(<a href="#RecurrenceRuleFrequency">RecurrenceRuleFrequency</a> frequency, optional <a href="#CalendarRecurrenceRuleInit">CalendarRecurrenceRuleInit</a>? ruleInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarRecurrenceRule::frequency">
+<span class="attrName"><span class="type">RecurrenceRuleFrequency </span><span class="name">frequency</span></span><div class="brief">
+ The frequency of a recurrence rule.
+            </div>
+<div class="description">
+            <p>
+This property corresponds to <em>FREQ</em> in RFC 5545.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarRecurrenceRule::interval">
+<span class="attrName"><span class="type">unsigned short </span><span class="name">interval</span></span><div class="brief">
+ The interval for the recurrence rule to repeat over the unit of time indicated by its frequency.
+            </div>
+<div class="description">
+            <p>
+This attribute is linked to the <em>frequency </em>attribute and for an interval of <var>n</var>, the event will recur every <var>n </var>of recurrence attribute.
+            </p>
+            <p>
+For example, if the interval attribute is set to <var>2 </var>and <em>frequency </em>attribute is set to <var>WEEKLY</var>, then the event will recur every 2 weeks.
+            </p>
+            <p>
+The default interval value is <var>1</var>, that is, every day if the <em>CalendarRecurrenceRule frequency</em> attribute is DAILY, every week if frequency is <var>WEEKLY</var>, every month if frequency is <var>MONTHLY </var>or every year if frequency is <var>YEARLY</var>.
+            </p>
+            <p>
+This property corresponds to <em>INTERVAL</em> in RFC 5545.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarRecurrenceRule::untilDate">
+<span class="attrName"><span class="type">TZDate </span><span class="name">untilDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The end date of a recurrence duration of an event using either an end date (<em>untilDate </em>attribute) or a number of occurrences (<em>occurrenceCount </em>attribute).
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>, meaning that the event recurs infinitely, unless <em>occurrenceCount </em>is set.
+            </p>
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+            <p>
+This property corresponds to <em>UNTIL</em> in RFC 5545.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarRecurrenceRule::occurrenceCount">
+<span class="attrName"><span class="type">long </span><span class="name">occurrenceCount</span></span><div class="brief">
+ The number of occurrences of a recurring event.
+            </div>
+<div class="description">
+            <p>
+The recurrence duration of an event can be defined using either an end date (<em>untilDate </em>attribute) or a number of occurrences (<em>occurrenceCount </em>attribute).
+            </p>
+            <p>
+By default, this attribute is set to <var>-1</var>, meaning that the event recurs infinitely, unless <em>untilDate </em>is set.
+            </p>
+            <p>
+This property corresponds to <em>COUNT</em> in RFC 5545.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarRecurrenceRule::daysOfTheWeek">
+<span class="attrName"><span class="type">ByDayValue[]
+                      </span><span class="name">daysOfTheWeek</span></span><div class="brief">
+ The days of the week associated with the recurrence rule.
+            </div>
+<div class="description">
+            <p>
+This property value is valid only for recurrence rules with a frequency type of <em>WEEKLY</em>, <em>MONTHLY</em>, and <em>YEARLY</em>.
+            </p>
+            <p>
+This property corresponds to <em>BYDAY</em> in RFC 5545.
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarRecurrenceRule::setPositions">
+<span class="attrName"><span class="type">short[]
+                      </span><span class="name">setPositions</span></span><div class="brief">
+ The list of ordinal numbers that filters which recurrences to include in the recurrence rule's frequency.
+            </div>
+<div class="description">
+            <p>
+For example, a yearly recurrence rule that has a <em>daysOfTheWeek </em>value that specifies Monday through Friday, and a <em>setPositions </em>array containing <var>2 </var>and <var>-1</var>, occurs only on the second weekday and last weekday of every year.
+            </p>
+            <p>
+Values can be from 1 to 366 or -366 to -1.
+Negative values indicate counting backwards from the end of the recurrence rule's frequency (week, month, or year).
+            </p>
+            <p>
+This attribute must only be used in conjunction with another BYxxx rule part (such as <em>daysOfTheWeek</em>).
+            </p>
+            <p>
+This property corresponds to <em>BYSETPOS</em> in RFC 5545.
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarRecurrenceRule::exceptions">
+<span class="attrName"><span class="type">TZDate[]
+                      </span><span class="name">exceptions</span></span><div class="brief">
+ Array to list date/time exceptions for the recurring event.
+(See RFC 5545, Section 3.8.5.1.)
+            </div>
+<div class="description">
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+            <p>
+This property corresponds to <em>EXDATE</em> in RFC 5545.
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CalendarEventId">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarEventId"></a><h3>2.14. CalendarEventId</h3>
+<div class="brief">
+ The CalendarEventId interface contains a UID and an optional recurrence id attribute to identify calendar events.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString uid, optional DOMString? rid)]
+  interface CalendarEventId {
+    attribute DOMString uid;
+
+    attribute DOMString? rid;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The recurrence identifier (<em>rid</em> attribute) is used to identify a particular instance of a recurring event. All instances of the same recurring event have the same UID but different recurrence IDs.
+          </p>
+         </div>
+<div class="constructors">
+<h4 id="CalendarEventId::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">CalendarEventId(DOMString uid, optional DOMString? rid);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarEventId::uid">
+<span class="attrName"><span class="type">DOMString </span><span class="name">uid</span></span><div class="brief">
+ The calendar event identifier.
+            </div>
+<div class="description">
+            <p>
+This value is assigned by the platform when the event is added to the calendar, it is locally unique and persistent for the life time of the event and it cannot be modified by the developers.
+            </p>
+            <p>
+See RFC 5545 (section 3.8.4.7) for more details about this parameter and algorithms to guarantee assignment of unique values.
+This value is assigned by the platform when the <em>add()</em> method is successfully invoked.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarEventId::rid">
+<span class="attrName"><span class="type">DOMString </span><span class="name">rid</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The recurrence ID of a <em>CalendarEvent </em>instance.
+            </div>
+<div class="description">
+            <p>
+This attribute is used in conjunction with the <em>uid</em> property to identify a specific instance of a recurring event.
+            </p>
+            <p>
+The parent of a recurrence instance has its <em>rid</em> set to <var>null</var>.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+(See RFC 5545 (section 3.8.4.4) for more details about this parameter.)
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CalendarAlarm">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarAlarm"></a><h3>2.15. CalendarAlarm</h3>
+<div class="brief">
+ The information related to an event alarm or reminder.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="time.html#TZDate">TZDate</a> absoluteDate, <a href="#AlarmMethod">AlarmMethod</a> method, optional DOMString? description),
+   Constructor(<a href="time.html#TimeDuration">TimeDuration</a> before, <a href="#AlarmMethod">AlarmMethod</a> method, optional DOMString? description)]
+  interface CalendarAlarm {
+    attribute <a href="time.html#TZDate">TZDate</a>? absoluteDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TimeDuration">TimeDuration</a>? before setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#AlarmMethod">AlarmMethod</a> method setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? description;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Creates a sound alarm 30 minutes before the event's start time.
+  var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, "MINS"), "SOUND");
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="CalendarAlarm::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">CalendarAlarm(<a href="time.html#TZDate">TZDate</a> absoluteDate, <a href="#AlarmMethod">AlarmMethod</a> method, optional DOMString? description);</pre>
+<pre class="webidl prettyprint">CalendarAlarm(<a href="time.html#TimeDuration">TimeDuration</a> before, <a href="#AlarmMethod">AlarmMethod</a> method, optional DOMString? description);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CalendarAlarm::absoluteDate">
+<span class="attrName"><span class="type">TZDate </span><span class="name">absoluteDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The absolute date and time when an alarm should be triggered.
+            </div>
+<div class="description">
+            <p>
+<em>absoluteDate </em>and <em>before </em>are mutually exclusive.
+            </p>
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAlarm::before">
+<span class="attrName"><span class="type">TimeDuration </span><span class="name">before</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The duration before an event starts on which the alarm should be triggered.
+            </div>
+<div class="description">
+            <p>
+The duration should be positive.
+            </p>
+            <p>
+<em>absoluteDate </em>and <em>before </em>are mutually exclusive.
+            </p>
+            <p>
+This attribute is precise to the second. Milliseconds are ignored.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAlarm::method">
+<span class="attrName"><span class="type">AlarmMethod </span><span class="name">method</span></span><div class="brief">
+ The notification method used by an alarm.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CalendarAlarm::description">
+<span class="attrName"><span class="type">DOMString </span><span class="name">description</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The description of an alarm.
+            </div>
+<div class="description">
+            <p>
+When the method is <var>DISPLAY</var>, the alarm must also include a description attribute, which contains the text to be displayed when the alarm is triggered.
+            </p>
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CalendarEventArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarEventArraySuccessCallback"></a><h3>2.16. CalendarEventArraySuccessCallback</h3>
+<div class="brief">
+ The CalendarEventArraySuccessCallback interface that implements the success callback used in the asynchronous operation for retrieving a list of calendar events.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface CalendarEventArraySuccessCallback {
+    void onsuccess(<a href="#CalendarEvent">CalendarEvent</a>[] events);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarEventArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarEventArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the list of calendar events is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#CalendarEvent">CalendarEvent</a>[] events);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">events</span>: 
+ Array of <em>CalendarEvent </em>objects
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CalendarItemArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemArraySuccessCallback"></a><h3>2.17. CalendarItemArraySuccessCallback</h3>
+<div class="brief">
+ The CalendarItemArraySuccessCallback interface implements the success callback used in the asynchronous operation for retrieving a list of calendar items.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface CalendarItemArraySuccessCallback {
+    void onsuccess(<a href="#CalendarItem">CalendarItem</a>[] items);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarItemArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarItemArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the list of calendar items is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#CalendarItem">CalendarItem</a>[] items);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ Array of <em>CalendarItem </em>objects
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CalendarArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarArraySuccessCallback"></a><h3>2.18. CalendarArraySuccessCallback</h3>
+<div class="brief">
+ The CalendarArraySuccessCallback interface implements the success callback used in the asynchronous operation to get a list of calendars using the <em>getCalendars()</em> method.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface CalendarArraySuccessCallback {
+    void onsuccess(<a href="#Calendar">Calendar</a>[] calendars);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the array of <em>Calendar </em>objects is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Calendar">Calendar</a>[] calendars);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">calendars</span>: 
+ Array of <em>Calendar </em>objects
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CalendarChangeCallback">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarChangeCallback"></a><h3>2.19. CalendarChangeCallback</h3>
+<div class="brief">
+ The CalendarChangeCallback interface specifies a set of methods that will be invoked every time a calendar change occurs (calendar item addition/update/removal).
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface CalendarChangeCallback {
+    void onitemsadded(<a href="#CalendarItem">CalendarItem</a>[] items);
+
+    void onitemsupdated(<a href="#CalendarItem">CalendarItem</a>[] items);
+
+    void onitemsremoved(<a href="#CalendarItemId">CalendarItemId</a>[] ids);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CalendarChangeCallback::onitemsadded">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarChangeCallback::onitemsadded"></a><code><b><span class="methodName">onitemsadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when items are added to the calendar.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onitemsadded(<a href="#CalendarItem">CalendarItem</a>[] items);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of items that were added
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="CalendarChangeCallback::onitemsupdated">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarChangeCallback::onitemsupdated"></a><code><b><span class="methodName">onitemsupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when items are updated in the calendar.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onitemsupdated(<a href="#CalendarItem">CalendarItem</a>[] items);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of items that were updated
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="CalendarChangeCallback::onitemsremoved">
+<a class="backward-compatibility-anchor" name="::Calendar::CalendarChangeCallback::onitemsremoved"></a><code><b><span class="methodName">onitemsremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when item are removed from the calendar.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onitemsremoved(<a href="#CalendarItemId">CalendarItemId</a>[] ids);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ids</span>: 
+ List of identifiers for the items that were removed
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Calendar {
+  typedef DOMString CalendarId;
+
+  typedef DOMString CalendarTaskId;
+
+  typedef (<a href="#CalendarEventId">CalendarEventId</a> or <a href="#CalendarTaskId">CalendarTaskId</a>) CalendarItemId;
+
+  enum CalendarType { "EVENT", "TASK" };
+
+  enum CalendarTextFormat { "ICALENDAR_20", "VCALENDAR_10" };
+
+  enum AlarmMethod { "SOUND", "DISPLAY" };
+
+
+  enum RecurrenceRuleFrequency { "DAILY", "WEEKLY", "MONTHLY", "YEARLY" };
+
+  enum ByDayValue { "MO", "TU", "WE", "TH", "FR", "SA", "SU" };
+
+  enum EventAvailability { "BUSY", "FREE" };
+
+  enum AttendeeType { "INDIVIDUAL", "GROUP", "RESOURCE", "ROOM", "UNKNOWN" };
+
+  enum AttendeeStatus { "PENDING", "ACCEPTED", "DECLINED", "TENTATIVE", "DELEGATED", "COMPLETED", "IN_PROCESS" };
+
+  enum AttendeeRole { "REQ_PARTICIPANT", "OPT_PARTICIPANT", "NON_PARTICIPANT", "CHAIR" };
+
+  enum CalendarItemPriority { "HIGH", "MEDIUM", "LOW" };
+
+   enum CalendarItemVisibility { "PUBLIC", "PRIVATE", "CONFIDENTIAL" };
+
+   enum CalendarItemStatus { "TENTATIVE", "CONFIRMED", "CANCELLED", "NEEDS_ACTION", "IN_PROCESS", "COMPLETED" };
+
+  [NoInterfaceObject] interface CalendarManagerObject{
+    readonly attribute <a href="#CalendarManager">CalendarManager</a> calendar;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#CalendarManagerObject">CalendarManagerObject</a>;
+
+  [NoInterfaceObject] interface CalendarManager {
+    void getCalendars(<a href="#CalendarType">CalendarType</a> type,
+                      <a href="#CalendarArraySuccessCallback">CalendarArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Calendar">Calendar</a> getUnifiedCalendar(<a href="#CalendarType">CalendarType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Calendar">Calendar</a> getDefaultCalendar(<a href="#CalendarType">CalendarType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addCalendar(<a href="#Calendar">Calendar</a> calendar) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeCalendar(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Calendar">Calendar</a> getCalendar(<a href="#CalendarType">CalendarType</a> type, <a href="#CalendarId">CalendarId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(<a href="account.html#AccountId">AccountId</a> accountId, DOMString name, <a href="#CalendarType">CalendarType</a> type)]
+  interface Calendar {
+
+    readonly attribute <a href="#CalendarId">CalendarId</a> id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute <a href="account.html#AccountId">AccountId</a>? accountId;
+
+    <a href="#CalendarItem">CalendarItem</a> get(<a href="#CalendarItemId">CalendarItemId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#CalendarItem">CalendarItem</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#CalendarItem">CalendarItem</a>[] items,
+                  optional <a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#CalendarItem">CalendarItem</a> item,
+                optional boolean? updateAllInstances) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+     void updateBatch(<a href="#CalendarItem">CalendarItem</a>[] items,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                     optional boolean? updateAllInstances) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#CalendarItemId">CalendarItemId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#CalendarItemId">CalendarItemId</a>[] ids,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#CalendarItemArraySuccessCallback">CalendarItemArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addChangeListener(<a href="#CalendarChangeCallback">CalendarChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  dictionary CalendarItemInit {
+    DOMString description;
+    DOMString summary;
+    boolean isAllDay;
+    <a href="time.html#TZDate">TZDate</a> startDate;
+    <a href="time.html#TimeDuration">TimeDuration</a> duration;
+    DOMString location;
+    <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a> geolocation;
+    DOMString organizer;
+    <a href="#CalendarItemVisibility">CalendarItemVisibility</a> visibility;
+    <a href="#CalendarItemStatus">CalendarItemStatus</a> status;
+    <a href="#CalendarItemPriority">CalendarItemPriority</a> priority;
+    <a href="#CalendarAlarm">CalendarAlarm</a>[] alarms;
+    DOMString[] categories;
+    <a href="#CalendarAttendee">CalendarAttendee</a>[] attendees;
+  };
+
+  dictionary CalendarTaskInit: <a href="#CalendarItemInit">CalendarItemInit</a> {
+    <a href="time.html#TZDate">TZDate</a> dueDate;
+    <a href="time.html#TZDate">TZDate</a> completedDate;
+    short progress;
+  };
+
+  dictionary CalendarEventInit: <a href="#CalendarItemInit">CalendarItemInit</a> {
+    <a href="time.html#TZDate">TZDate</a> endDate;
+    <a href="#EventAvailability">EventAvailability</a> availability;
+    <a href="#CalendarRecurrenceRule">CalendarRecurrenceRule</a> recurrenceRule;
+  };
+
+  [NoInterfaceObject] interface CalendarItem {
+    readonly attribute <a href="#CalendarItemId">CalendarItemId</a>? id;
+
+    readonly attribute <a href="#CalendarId">CalendarId</a>? calendarId;
+
+    readonly attribute <a href="time.html#TZDate">TZDate</a>? lastModificationDate;
+
+    attribute DOMString? description setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? summary setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute boolean isAllDay setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TZDate">TZDate</a>? startDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TimeDuration">TimeDuration</a>? duration setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? location setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? organizer setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarItemVisibility">CalendarItemVisibility</a> visibility setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarItemStatus">CalendarItemStatus</a> status setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarItemPriority">CalendarItemPriority</a> priority setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarAlarm">CalendarAlarm</a>[] alarms setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] categories setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarAttendee">CalendarAttendee</a>[] attendees setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString convertToString(<a href="#CalendarTextFormat">CalendarTextFormat</a> format) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#CalendarItem">CalendarItem</a> clone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(optional <a href="#CalendarTaskInit">CalendarTaskInit</a>? taskInitDict),
+   Constructor(DOMString stringRepresentation, <a href="#CalendarTextFormat">CalendarTextFormat</a> format)]
+  interface CalendarTask : <a href="#CalendarItem">CalendarItem</a> {
+    attribute <a href="time.html#TZDate">TZDate</a>? dueDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TZDate">TZDate</a>? completedDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute unsigned short progress setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(optional <a href="#CalendarEventInit">CalendarEventInit</a>? eventInitDict),
+   Constructor(DOMString stringRepresentation, <a href="#CalendarTextFormat">CalendarTextFormat</a> format)]
+  interface CalendarEvent : <a href="#CalendarItem">CalendarItem</a> {
+    readonly attribute boolean isDetached;
+
+    attribute <a href="time.html#TZDate">TZDate</a>? endDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#EventAvailability">EventAvailability</a> availability setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#CalendarRecurrenceRule">CalendarRecurrenceRule</a>? recurrenceRule setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void expandRecurrence(<a href="time.html#TZDate">TZDate</a> startDate,
+                          <a href="time.html#TZDate">TZDate</a> endDate,
+                          <a href="#CalendarEventArraySuccessCallback">CalendarEventArraySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  dictionary CalendarAttendeeInit {
+    DOMString name;
+    <a href="#AttendeeRole">AttendeeRole</a> role;
+    <a href="#AttendeeStatus">AttendeeStatus</a> status;
+    boolean RSVP;
+    <a href="#AttendeeType">AttendeeType</a> type;
+    DOMString? group;
+    DOMString delegatorURI;
+    DOMString delegateURI;
+    <a href="contact.html#ContactRef">ContactRef</a> contactRef;
+  };
+
+  [Constructor(DOMString uri, optional <a href="#CalendarAttendeeInit">CalendarAttendeeInit</a>? attendeeInitDict)]
+  interface CalendarAttendee
+  {
+    attribute DOMString uri;
+
+    attribute DOMString? name;
+
+    attribute <a href="#AttendeeRole">AttendeeRole</a> role;
+
+    attribute <a href="#AttendeeStatus">AttendeeStatus</a> status;
+
+    attribute boolean RSVP;
+
+    attribute <a href="#AttendeeType">AttendeeType</a> type;
+
+    attribute DOMString? group;
+
+    attribute DOMString? delegatorURI;
+
+    attribute DOMString? delegateURI;
+
+    attribute <a href="contact.html#ContactRef">ContactRef</a>? contactRef;
+  };
+
+  dictionary CalendarRecurrenceRuleInit {
+    short interval;
+    <a href="time.html#TZDate">TZDate</a> untilDate;
+    long occurrenceCount;
+    <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+    short[] setPositions;
+    <a href="time.html#TZDate">TZDate</a>[] exceptions;
+  };
+
+  [Constructor(<a href="#RecurrenceRuleFrequency">RecurrenceRuleFrequency</a> frequency, optional <a href="#CalendarRecurrenceRuleInit">CalendarRecurrenceRuleInit</a>? ruleInitDict)]
+  interface CalendarRecurrenceRule
+  {
+    attribute <a href="#RecurrenceRuleFrequency">RecurrenceRuleFrequency</a> frequency;
+
+    attribute unsigned short interval;
+
+    attribute <a href="time.html#TZDate">TZDate</a>? untilDate;
+
+    attribute long occurrenceCount;
+
+    attribute <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+
+    attribute short[] setPositions;
+
+    attribute <a href="time.html#TZDate">TZDate</a>[] exceptions;
+  };
+
+  [Constructor(DOMString uid, optional DOMString? rid)]
+  interface CalendarEventId {
+    attribute DOMString uid;
+
+    attribute DOMString? rid;
+  };
+
+  [Constructor(<a href="time.html#TZDate">TZDate</a> absoluteDate, <a href="#AlarmMethod">AlarmMethod</a> method, optional DOMString? description),
+   Constructor(<a href="time.html#TimeDuration">TimeDuration</a> before, <a href="#AlarmMethod">AlarmMethod</a> method, optional DOMString? description)]
+  interface CalendarAlarm {
+    attribute <a href="time.html#TZDate">TZDate</a>? absoluteDate setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="time.html#TimeDuration">TimeDuration</a>? before setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#AlarmMethod">AlarmMethod</a> method setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? description;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface CalendarEventArraySuccessCallback {
+    void onsuccess(<a href="#CalendarEvent">CalendarEvent</a>[] events);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface CalendarItemArraySuccessCallback {
+    void onsuccess(<a href="#CalendarItem">CalendarItem</a>[] items);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface CalendarArraySuccessCallback {
+    void onsuccess(<a href="#Calendar">Calendar</a>[] calendars);
+  };
+
+  [Callback, NoInterfaceObject] interface CalendarChangeCallback {
+    void onitemsadded(<a href="#CalendarItem">CalendarItem</a>[] items);
+
+    void onitemsupdated(<a href="#CalendarItem">CalendarItem</a>[] items);
+
+    void onitemsremoved(<a href="#CalendarItemId">CalendarItemId</a>[] ids);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html
new file mode 100644 (file)
index 0000000..08a20b3
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html
@@ -0,0 +1,1095 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Callhistory API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Callhistory">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>Callhistory API</h1></div>
+<div class="brief">
+ This API provides interfaces and methods for retrieving information from the call history.
+        </div>
+<div class="description">
+        <p>
+For more information on the Callhistory features, see <a href="../../../../../org.tizen.guides/html/web/tizen/social/call_history_w.htm">Call History Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#CallHistoryObject">CallHistoryObject</a>
+</li>
+<li>1.2. <a href="#RemoteParty">RemoteParty</a>
+</li>
+<li>1.3. <a href="#CallHistoryEntry">CallHistoryEntry</a>
+</li>
+<li>1.4. <a href="#CallHistory">CallHistory</a>
+</li>
+<li>1.5. <a href="#CallHistoryEntryArraySuccessCallback">CallHistoryEntryArraySuccessCallback</a>
+</li>
+<li>1.6. <a href="#CallHistoryChangeCallback">CallHistoryChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#api-features">Related Feature</a>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#CallHistoryObject">CallHistoryObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#RemoteParty">RemoteParty</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CallHistoryEntry">CallHistoryEntry</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CallHistory">CallHistory</a></td>
+<td>void <a href="#CallHistory::find">find</a> (<a href="#CallHistoryEntryArraySuccessCallback">CallHistoryEntryArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode, optional unsigned long? limit, optional unsigned long? offset)<br>
+    void <a href="#CallHistory::remove">remove</a> (<a href="#CallHistoryEntry">CallHistoryEntry</a> entry)<br>
+    void <a href="#CallHistory::removeBatch">removeBatch</a> (<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#CallHistory::removeAll">removeAll</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    long <a href="#CallHistory::addChangeListener">addChangeListener</a> (<a href="#CallHistoryChangeCallback">CallHistoryChangeCallback</a> observer)<br>
+    void <a href="#CallHistory::removeChangeListener">removeChangeListener</a> (long handle)</td>
+</tr>
+<tr>
+<td><a href="#CallHistoryEntryArraySuccessCallback">CallHistoryEntryArraySuccessCallback</a></td>
+<td>void <a href="#CallHistoryEntryArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries)</td>
+</tr>
+<tr>
+<td><a href="#CallHistoryChangeCallback">CallHistoryChangeCallback</a></td>
+<td>void <a href="#CallHistoryChangeCallback::onadded">onadded</a> (<a href="#CallHistoryEntry">CallHistoryEntry</a>[] newItems)<br>
+    void <a href="#CallHistoryChangeCallback::onchanged">onchanged</a> (<a href="#CallHistoryEntry">CallHistoryEntry</a>[] changedItems)<br>
+    void <a href="#CallHistoryChangeCallback::onremoved">onremoved</a> (DOMString[] removedItems)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="CallHistoryObject">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryObject"></a><h3>1.1. CallHistoryObject</h3>
+<div class="brief">
+ This interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+The <em>tizen.callhistory<em> object allows access to the CallHistory API.
+</em></em>          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CallHistoryObject {
+        readonly attribute <a href="#CallHistory">CallHistory</a> callhistory;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#CallHistoryObject">CallHistoryObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="interface" id="RemoteParty">
+<a class="backward-compatibility-anchor" name="::Callhistory::RemoteParty"></a><h3>1.2. RemoteParty</h3>
+<div class="brief">
+ This interface represents remote parties.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface RemoteParty {
+        readonly attribute DOMString? remoteParty;
+
+        readonly attribute <a href="contact.html#PersonId">PersonId</a>? personId;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="RemoteParty::remoteParty">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">remoteParty</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the remote party identifier (RPID).
+The RPID is a unique identifier used by a service with call capability. It also includes phone numbers.
+Contacts are also defined per service, so an RPID can be resolved to a Contact.
+A <var>null </var>value means that the remote is hidden (private number).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="RemoteParty::personId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PersonId </span><span class="name">personId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the identifier of the person to whom the raw contact belongs.
+            </div>
+<div class="description">
+            <p>
+If the contact cannot be resolved, the value is <var>null</var>.
+See <a href="contact.html">Contact API</a> for more information.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CallHistoryEntry">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryEntry"></a><h3>1.3. CallHistoryEntry</h3>
+<div class="brief">
+ This interface represents the subset of properties of calls, which become a call record in the call history after the call ends.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CallHistoryEntry {
+
+        readonly attribute DOMString uid;
+
+        readonly attribute DOMString type;
+
+        readonly attribute DOMString[]? features;
+
+        readonly attribute <a href="#RemoteParty">RemoteParty</a>[] remoteParties;
+
+        readonly attribute Date startTime;
+
+        readonly attribute unsigned long duration;
+
+        attribute DOMString direction;
+
+        readonly attribute DOMString? callingParty;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CallHistoryEntry::uid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">uid</span></span><div class="brief">
+ An attribute to store the unique identifier of a call record.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ An attribute to store the service type of the call saved to call history.
+            </div>
+<div class="description">
+            <p>
+The following values are supported:
+            </p>
+            <ul>
+              <li>
+TEL - for all protocols with phone number addressing (PSTN, GSM, CDMA, LTE, etc.)               </li>
+              <li>
+XMPP -  for generic XMPP calls              </li>
+              <li>
+SIP - for generic SIP calls              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::features">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">features</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attributes to store the features associated with the call service saved to call history.
+The following values are supported:
+            </div>
+<div class="description">
+            <ul>
+              <li>
+CALL - for all call types              </li>
+              <li>
+VOICECALL - for voice-only calls               </li>
+              <li>
+VIDEOCALL - for audio and video channel support in a call              </li>
+              <li>
+EMERGENCYCALL - to denote an emergency call              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::remoteParties">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">RemoteParty[]
+                      </span><span class="name">remoteParties</span></span><div class="brief">
+ An attribute to store the remote parties participating in the call.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::startTime">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">startTime</span></span><div class="brief">
+ An attribute to store the start time of the call.
+This attribute is the moment when media channels come up. The exact meaning is defined by the back-end.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::duration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">duration</span></span><div class="brief">
+ An attribute to store the duration of the call in seconds.
+This attribute is the duration from media channels coming up to the moment when media channels tear down on the same call service.
+If the call is migrated to another service, another call history entry is used.
+The exact meaning is defined by the back-end.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::direction">
+<span class="attrName"><span class="type">DOMString </span><span class="name">direction</span></span><div class="brief">
+ An attribute to indicate whether the call had been dialed, received, missed, blocked, or rejected.
+The following values are supported:
+            </div>
+<div class="description">
+            <ul>
+              <li>
+DIALED - for dialed calls              </li>
+              <li>
+RECEIVED - for received calls              </li>
+              <li>
+MISSEDNEW - for missed calls not seen yet              </li>
+              <li>
+MISSED - for missed calls              </li>
+              <li>
+BLOCKED - for blocked calls              </li>
+              <li>
+REJECTED - for rejected calls              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="CallHistoryEntry::callingParty">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">callingParty</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Indicates the phone number of SIM card used for the call.
+            </div>
+<div class="description">
+            <p>
+It is the device's local phone number - the number assigned to the SIM card (see <a href="systeminfo.html#SystemInfoSIM::msisdn">SystemInfoSIM</a>).
+If there is more than one SIM card in the device, this attribute can be used to recognize which SIM card was used to make/receive the call.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="remark"> Remark : </span>
+ A <var>null </var>value means that the phone number of the device cannot be retrieved because the device user might not allow this functionality.
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CallHistory">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory"></a><h3>1.4. CallHistory</h3>
+<div class="brief">
+ This interface manages call history.
+Apps can read or delete call history (depending on permission).
+Modifying call history is allowed for certain attributes, like direction.
+Adding call history is owned by the back-end. Filtering is supported for all fields of <em>CallHistoryEntry</em>.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CallHistory {
+
+        void find(<a href="#CallHistoryEntryArraySuccessCallback">CallHistoryEntryArraySuccessCallback</a> successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                  optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+                  optional <a href="tizen.html#SortMode">SortMode</a>? sortMode,
+                  optional unsigned long? limit,
+                  optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#CallHistoryEntry">CallHistoryEntry</a> entry) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeBatch(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAll(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long addChangeListener(<a href="#CallHistoryChangeCallback">CallHistoryChangeCallback</a> observer) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeChangeListener(long handle) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CallHistory::find">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory::find"></a><code><b><span class="methodName">find</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds and returns call history.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void find(<a href="#CallHistoryEntryArraySuccessCallback">CallHistoryEntryArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode, optional unsigned long? limit, optional unsigned long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>errorCallback()</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/callhistory.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ A handler for a query result set.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs.
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A filter defined on <em>CallHistoryEntry </em>attributes. It can be a composite filter.
+                </li>
+          <li class="param">
+<span class="name">sortMode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The sort order in which call history is returned.
+                </li>
+          <li class="param">
+<span class="name">limit</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The maximum limit of a query result (It has the same meaning as SQL LIMIT).
+If the limit is 0, the query result has no limit.
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The offset in the result set, from where the results are listed (It has the same semantics as SQL OFFSET).<br>The maximum number of results listed is the value of the specified <em>limit</em> parameter. Default value is <var> 0</var>, meaning no offset.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines success callback
+ function onSuccess(results) {
+     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
+     }
+ }
+
+ // Defines error callback
+ function onError(error) {
+     console.log("Query failed" + error.name);
+ }
+
+ // Defines filter: list CS calls, most recent first
+ var filter = new tizen.AttributeFilter("type", "EXACTLY", "TEL");
+
+ // Defines sort mode: descending on call start time.
+ var sortMode = new tizen.SortMode("startTime", "DESC");
+
+ // Makes the query and wires up the callbacks
+ tizen.callhistory.find(onSuccess,
+                         onError,
+                         filter,
+                         sortMode);
+
+ var numberfilter = new tizen.AttributeFilter(
+                                 "remoteParties.remoteParty",
+                                 "EXACTLY",
+                                 "123456789");
+
+ // Creates a composite filter for time constraints
+ 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));
+
+ var datefilter = new tizen.CompositeFilter("UNION", [y2009Filter, y2011Filter]);
+
+ // Creates a filter to find all video calls (including cellular, skype, etc)
+ // The filter matches any features from the "features" array exactly
+ var tfilter = new tizen.AttributeFilter("features", "EXACTLY", "VIDEOCALL");
+
+ // Creates a composite filter
+ var ifilter = new tizen.CompositeFilter("INTERSECTION",
+                                         [numberFilter, dateFilter, tfilter]);
+
+ // Makes the query and wires up the callbacks; reuse sortMode
+ tizen.callhistory.find(onSuccess,
+                         onError,
+                         ifilter,
+                         sortMode);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CallHistory::remove">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes call history synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#CallHistoryEntry">CallHistoryEntry</a> entry);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/callhistory.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">entry</span>: 
+ Call history entry to be deleted.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines success callback
+ function onSuccess(results) {
+     if (results.length &gt; 0)
+         tizen.callhistory.remove(results[0]);
+ }
+
+ // Defines error callback
+ function onError(error) {
+     console.log("Query failed" + error.name);
+ }
+
+ // Makes the query and wires up the callbacks
+ tizen.callhistory.find(onSuccess, onError);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CallHistory::removeBatch">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory::removeBatch"></a><code><b><span class="methodName">removeBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a call history list asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeBatch(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>errorCallback()</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/callhistory.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">entries</span>: 
+ A list of call history entries to delete.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A generic success handler.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An error handler.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines success callback
+ function onSuccess(results) {
+     tizen.callhistory.removeBatch(results);
+ }
+
+ // Defines error callback
+ function onError(error) {
+     console.log("Query failed" + error.name);
+ }
+
+ // Makes the query and wires up the callbacks
+ tizen.callhistory.find(onSuccess, onError);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CallHistory::removeAll">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory::removeAll"></a><code><b><span class="methodName">removeAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes call history asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAll(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>errorCallback()</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/callhistory.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A generic success handler.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An error handler.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="CallHistory::addChangeListener">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory::addChangeListener"></a><code><b><span class="methodName">addChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to register for callback to observe call history changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addChangeListener(<a href="#CallHistoryChangeCallback">CallHistoryChangeCallback</a> observer);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/callhistory.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">observer</span>: 
+ A callback for handling the list of new or changed or <em>CallHistoryEntry </em>objects in the call history.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long A handle which can be used for unregistering.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var onListenerCB = {
+     onadded: function(newItems) {
+         console.log("New Item added");
+         for (var i in newItems) {
+             console.log("Item " + i + " startTime: " + newItems[i].startTime);
+         }
+     },
+     onchanged: function(changedItems) {
+         console.log("Items changed");
+         for (var i in changedItems) {
+             console.log("Item " + i + " direction: " + changedItems[i].direction);
+         }
+     },
+     onremoved: function(removedItems) {
+         console.log("Items removed");
+         for(var i in removedItems)  {
+            console.log("Item " + i + " : " + removedItems[i]);
+         }
+     }};
+
+ try {
+     // Registers a call history callback
+     var handle = tizen.callhistory.addChangeListener(onListenerCB);
+
+     // Unregisters a previously registered listener
+     tizen.callhistory.removeChangeListener(handle);
+ } catch (error) {
+     console.log("Exception - code: " + error.name + " message: " + error.message);
+ }
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="CallHistory::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistory::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a listener to unregister a previously registered listener.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(long handle);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/callhistory.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">handle</span>: 
+ The previously obtained listener handle.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CallHistoryEntryArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryEntryArraySuccessCallback"></a><h3>1.5. CallHistoryEntryArraySuccessCallback</h3>
+<div class="brief">
+ This is a callback interface of <em>CallHistory </em>operations.
+For example code, see <em>CallHistory </em>interface.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface CallHistoryEntryArraySuccessCallback {
+        void onsuccess(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CallHistoryEntryArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryEntryArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the queries on call history have been successfully completed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">entries</span>: 
+ An array of <em>CallHistoryEntry </em>objects, representing the result set of the query over the call history.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CallHistoryChangeCallback">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryChangeCallback"></a><h3>1.6. CallHistoryChangeCallback</h3>
+<div class="brief">
+ This is a callback interface of <em> CallHistory </em>operations.
+For example code, see <em>CallHistory </em>interface.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject]
+    interface CallHistoryChangeCallback {
+        void onadded(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] newItems);
+
+        void onchanged(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] changedItems);
+
+        void onremoved(DOMString[] removedItems);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CallHistoryChangeCallback::onadded">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryChangeCallback::onadded"></a><code><b><span class="methodName">onadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a new call history item is added.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onadded(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] newItems);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">newItems</span>: 
+ An array of <em>CallHistoryEntry </em>objects, representing the new items added to call history.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="CallHistoryChangeCallback::onchanged">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryChangeCallback::onchanged"></a><code><b><span class="methodName">onchanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the call history has been changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onchanged(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] changedItems);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changedItems</span>: 
+ An array of <em>CallHistoryEntry </em>objects, representing the changed items in call history.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="CallHistoryChangeCallback::onremoved">
+<a class="backward-compatibility-anchor" name="::Callhistory::CallHistoryChangeCallback::onremoved"></a><code><b><span class="methodName">onremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the call history has been removed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onremoved(DOMString[] removedItems);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">removedItems</span>: 
+ An array of a UID of <em>CallHistoryEntry </em>objects, representing the removed items in call history.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">2. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the call log application runs on a device with the telephony feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Callhistory {
+    [NoInterfaceObject] interface CallHistoryObject {
+        readonly attribute <a href="#CallHistory">CallHistory</a> callhistory;
+    };
+
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#CallHistoryObject">CallHistoryObject</a>;
+
+    [NoInterfaceObject] interface RemoteParty {
+        readonly attribute DOMString? remoteParty;
+
+        readonly attribute <a href="contact.html#PersonId">PersonId</a>? personId;
+
+    };
+
+    [NoInterfaceObject] interface CallHistoryEntry {
+
+        readonly attribute DOMString uid;
+
+        readonly attribute DOMString type;
+
+        readonly attribute DOMString[]? features;
+
+        readonly attribute <a href="#RemoteParty">RemoteParty</a>[] remoteParties;
+
+        readonly attribute Date startTime;
+
+        readonly attribute unsigned long duration;
+
+        attribute DOMString direction;
+
+        readonly attribute DOMString? callingParty;
+    };
+
+    [NoInterfaceObject] interface CallHistory {
+
+        void find(<a href="#CallHistoryEntryArraySuccessCallback">CallHistoryEntryArraySuccessCallback</a> successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                  optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+                  optional <a href="tizen.html#SortMode">SortMode</a>? sortMode,
+                  optional unsigned long? limit,
+                  optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#CallHistoryEntry">CallHistoryEntry</a> entry) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeBatch(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAll(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long addChangeListener(<a href="#CallHistoryChangeCallback">CallHistoryChangeCallback</a> observer) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeChangeListener(long handle) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface CallHistoryEntryArraySuccessCallback {
+        void onsuccess(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] entries);
+    };
+
+    [Callback, NoInterfaceObject]
+    interface CallHistoryChangeCallback {
+        void onadded(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] newItems);
+
+        void onchanged(<a href="#CallHistoryEntry">CallHistoryEntry</a>[] changedItems);
+
+        void onremoved(DOMString[] removedItems);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html
new file mode 100644 (file)
index 0000000..2ea2567
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html
@@ -0,0 +1,6488 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Contact API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Contact">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Contact API</h1></div>
+<div class="brief">
+ The Contact API provides functionality for managing address books.
+        </div>
+<div class="description">
+        <p>
+A contact is a set of information that describes a contact. The contact contains information, such as phone numbers and
+e-mail addresses.
+        </p>
+        <p>
+<a href="http://www.ietf.org/rfc/rfc2426.txt"> RFC 2426 vCard MIME Directory Profile</a> defines a format for exchanging contacts. The Contact API refers to this specification to provide a mapping of the specified contact attributes.
+        </p>
+        <p>
+A <em>person </em>is a set of information that describes a person. Two different <em>contacts</em> that indicate the same person will have the same person ID. A person has a display contact ID that indicates a contact that represents information of the person. A person is automatically created when a new contact is added.
+        </p>
+        <p>
+This API provides functionality to read, create, remove, and update contacts in specific address books. Address books can be obtained using the <em>getAddressBooks()</em> method, which returns an array of <em>AddressBook</em> objects.
+        </p>
+        <p>
+For more information on the Contact features, see <a href="../../../../../org.tizen.guides/html/web/tizen/social/contact_w.htm">Contact Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#AddressBookId">AddressBookId</a>
+</li>
+<li>1.2. <a href="#ContactId">ContactId</a>
+</li>
+<li>1.3. <a href="#PersonId">PersonId</a>
+</li>
+<li>1.4. <a href="#ContactGroupId">ContactGroupId</a>
+</li>
+<li>1.5. <a href="#ContactTextFormat">ContactTextFormat</a>
+</li>
+<li>1.6. <a href="#ContactRelationshipType">ContactRelationshipType</a>
+</li>
+<li>1.7. <a href="#ContactInstantMessengerType">ContactInstantMessengerType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ContactManagerObject">ContactManagerObject</a>
+</li>
+<li>2.2. <a href="#ContactManager">ContactManager</a>
+</li>
+<li>2.3. <a href="#AddressBook">AddressBook</a>
+</li>
+<li>2.4. <a href="#Person">Person</a>
+</li>
+<li>2.5. <a href="#ContactInit">ContactInit</a>
+</li>
+<li>2.6. <a href="#Contact">Contact</a>
+</li>
+<li>2.7. <a href="#ContactRef">ContactRef</a>
+</li>
+<li>2.8. <a href="#ContactNameInit">ContactNameInit</a>
+</li>
+<li>2.9. <a href="#ContactName">ContactName</a>
+</li>
+<li>2.10. <a href="#ContactOrganizationInit">ContactOrganizationInit</a>
+</li>
+<li>2.11. <a href="#ContactOrganization">ContactOrganization</a>
+</li>
+<li>2.12. <a href="#ContactWebSite">ContactWebSite</a>
+</li>
+<li>2.13. <a href="#ContactAnniversary">ContactAnniversary</a>
+</li>
+<li>2.14. <a href="#ContactAddressInit">ContactAddressInit</a>
+</li>
+<li>2.15. <a href="#ContactAddress">ContactAddress</a>
+</li>
+<li>2.16. <a href="#ContactPhoneNumber">ContactPhoneNumber</a>
+</li>
+<li>2.17. <a href="#ContactEmailAddress">ContactEmailAddress</a>
+</li>
+<li>2.18. <a href="#ContactInstantMessenger">ContactInstantMessenger</a>
+</li>
+<li>2.19. <a href="#ContactGroup">ContactGroup</a>
+</li>
+<li>2.20. <a href="#ContactRelationship">ContactRelationship</a>
+</li>
+<li>2.21. <a href="#PersonArraySuccessCallback">PersonArraySuccessCallback</a>
+</li>
+<li>2.22. <a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a>
+</li>
+<li>2.23. <a href="#AddressBookArraySuccessCallback">AddressBookArraySuccessCallback</a>
+</li>
+<li>2.24. <a href="#AddressBookChangeCallback">AddressBookChangeCallback</a>
+</li>
+<li>2.25. <a href="#PersonsChangeCallback">PersonsChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ContactManagerObject">ContactManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactManager">ContactManager</a></td>
+<td>void <a href="#ContactManager::getAddressBooks">getAddressBooks</a> (<a href="#AddressBookArraySuccessCallback">AddressBookArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#AddressBook">AddressBook</a> <a href="#ContactManager::getUnifiedAddressBook">getUnifiedAddressBook</a> ()<br>
+    <a href="#AddressBook">AddressBook</a> <a href="#ContactManager::getDefaultAddressBook">getDefaultAddressBook</a> ()<br>
+    void <a href="#ContactManager::addAddressBook">addAddressBook</a> (<a href="#AddressBook">AddressBook</a> addressBook)<br>
+    void <a href="#ContactManager::removeAddressBook">removeAddressBook</a> (<a href="#AddressBookId">AddressBookId</a> addressBookId)<br>
+    <a href="#AddressBook">AddressBook</a> <a href="#ContactManager::getAddressBook">getAddressBook</a> (<a href="#AddressBookId">AddressBookId</a> addressBookId)<br>
+    <a href="#Person">Person</a> <a href="#ContactManager::get">get</a> (<a href="#PersonId">PersonId</a> personId)<br>
+    void <a href="#ContactManager::update">update</a> (<a href="#Person">Person</a> person)<br>
+    void <a href="#ContactManager::updateBatch">updateBatch</a> (<a href="#Person">Person</a>[] persons, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContactManager::remove">remove</a> (<a href="#PersonId">PersonId</a> personId)<br>
+    void <a href="#ContactManager::removeBatch">removeBatch</a> (<a href="#PersonId">PersonId</a>[] personIds, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContactManager::find">find</a> (<a href="#PersonArraySuccessCallback">PersonArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode)<br>
+    long <a href="#ContactManager::addChangeListener">addChangeListener</a> (<a href="#PersonsChangeCallback">PersonsChangeCallback</a> successCallback)<br>
+    void <a href="#ContactManager::removeChangeListener">removeChangeListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#AddressBook">AddressBook</a></td>
+<td>
+<a href="#Contact">Contact</a> <a href="#AddressBook::get">get</a> (<a href="#ContactId">ContactId</a> id)<br>
+    void <a href="#AddressBook::add">add</a> (<a href="#Contact">Contact</a> contact)<br>
+    void <a href="#AddressBook::addBatch">addBatch</a> (<a href="#Contact">Contact</a>[] contacts, optional <a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#AddressBook::update">update</a> (<a href="#Contact">Contact</a> contact)<br>
+    void <a href="#AddressBook::updateBatch">updateBatch</a> (<a href="#Contact">Contact</a>[] contacts, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#AddressBook::remove">remove</a> (<a href="#ContactId">ContactId</a> id)<br>
+    void <a href="#AddressBook::removeBatch">removeBatch</a> (<a href="#ContactId">ContactId</a>[] ids, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#AddressBook::find">find</a> (<a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode)<br>
+    long <a href="#AddressBook::addChangeListener">addChangeListener</a> (<a href="#AddressBookChangeCallback">AddressBookChangeCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#AddressBook::removeChangeListener">removeChangeListener</a> (long watchId)<br>
+    <a href="#ContactGroup">ContactGroup</a> <a href="#AddressBook::getGroup">getGroup</a> (<a href="#ContactGroupId">ContactGroupId</a> groupId)<br>
+    void <a href="#AddressBook::addGroup">addGroup</a> (<a href="#ContactGroup">ContactGroup</a> group)<br>
+    void <a href="#AddressBook::updateGroup">updateGroup</a> (<a href="#ContactGroup">ContactGroup</a> group)<br>
+    void <a href="#AddressBook::removeGroup">removeGroup</a> (<a href="#ContactGroupId">ContactGroupId</a> groupId)<br>
+    <a href="#ContactGroup">ContactGroup</a>[] <a href="#AddressBook::getGroups">getGroups</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Person">Person</a></td>
+<td>void <a href="#Person::link">link</a> (<a href="#PersonId">PersonId</a> personId)<br>
+    <a href="#Person">Person</a> <a href="#Person::unlink">unlink</a> (<a href="#ContactId">ContactId</a> contactId)</td>
+</tr>
+<tr>
+<td><a href="#ContactInit">ContactInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Contact">Contact</a></td>
+<td>DOMString <a href="#Contact::convertToString">convertToString</a> (optional <a href="#ContactTextFormat">ContactTextFormat</a>? format)<br>
+    <a href="#Contact">Contact</a> <a href="#Contact::clone">clone</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ContactRef">ContactRef</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactNameInit">ContactNameInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactName">ContactName</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactOrganizationInit">ContactOrganizationInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactOrganization">ContactOrganization</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactWebSite">ContactWebSite</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactAnniversary">ContactAnniversary</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactAddressInit">ContactAddressInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactAddress">ContactAddress</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactPhoneNumber">ContactPhoneNumber</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactEmailAddress">ContactEmailAddress</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactInstantMessenger">ContactInstantMessenger</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactGroup">ContactGroup</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContactRelationship">ContactRelationship</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PersonArraySuccessCallback">PersonArraySuccessCallback</a></td>
+<td>void <a href="#PersonArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Person">Person</a>[] persons)</td>
+</tr>
+<tr>
+<td><a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a></td>
+<td>void <a href="#ContactArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Contact">Contact</a>[] contacts)</td>
+</tr>
+<tr>
+<td><a href="#AddressBookArraySuccessCallback">AddressBookArraySuccessCallback</a></td>
+<td>void <a href="#AddressBookArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#AddressBook">AddressBook</a>[] addressbooks)</td>
+</tr>
+<tr>
+<td><a href="#AddressBookChangeCallback">AddressBookChangeCallback</a></td>
+<td>void <a href="#AddressBookChangeCallback::oncontactsadded">oncontactsadded</a> (<a href="#Contact">Contact</a>[] contacts)<br>
+    void <a href="#AddressBookChangeCallback::oncontactsupdated">oncontactsupdated</a> (<a href="#Contact">Contact</a>[] contacts)<br>
+    void <a href="#AddressBookChangeCallback::oncontactsremoved">oncontactsremoved</a> (<a href="#ContactId">ContactId</a>[] contactIds)</td>
+</tr>
+<tr>
+<td><a href="#PersonsChangeCallback">PersonsChangeCallback</a></td>
+<td>void <a href="#PersonsChangeCallback::onpersonsadded">onpersonsadded</a> (<a href="#Person">Person</a>[] persons)<br>
+    void <a href="#PersonsChangeCallback::onpersonsupdated">onpersonsupdated</a> (<a href="#Person">Person</a>[] persons)<br>
+    void <a href="#PersonsChangeCallback::onpersonsremoved">onpersonsremoved</a> (<a href="#PersonId">PersonId</a>[] personIds)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="AddressBookId">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookId"></a><h3>1.1. AddressBookId</h3>
+<div class="brief">
+ The address book identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString AddressBookId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="ContactId">
+<a class="backward-compatibility-anchor" name="::Contact::ContactId"></a><h3>1.2. ContactId</h3>
+<div class="brief">
+ The contact identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ContactId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="PersonId">
+<a class="backward-compatibility-anchor" name="::Contact::PersonId"></a><h3>1.3. PersonId</h3>
+<div class="brief">
+ The person identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString PersonId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="typedef" id="ContactGroupId">
+<a class="backward-compatibility-anchor" name="::Contact::ContactGroupId"></a><h3>1.4. ContactGroupId</h3>
+<div class="brief">
+ The group identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ContactGroupId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="enum" id="ContactTextFormat">
+<a class="backward-compatibility-anchor" name="::Contact::ContactTextFormat"></a><h3>1.5. ContactTextFormat</h3>
+<div class="brief">
+ Specifies the contact formats used for export.
+The possible values are:
+          </div>
+<pre class="webidl prettyprint">  enum ContactTextFormat {"VCARD_30"};</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <ul>
+            <li>
+VCARD_30 - vCard v3.0 format            </li>
+          </ul>
+          <p>
+Currently, vCard v3.0 is the only format supported by the Tizen platform.
+          </p>
+         </div>
+</div>
+<div class="enum" id="ContactRelationshipType">
+<a class="backward-compatibility-anchor" name="::Contact::ContactRelationshipType"></a><h3>1.6. ContactRelationshipType</h3>
+<div class="brief">
+ Specifies the relationship types.
+The possible values are:
+          </div>
+<pre class="webidl prettyprint">   enum ContactRelationshipType {"OTHER", "ASSISTANT", "BROTHER", "CHILD", "DOMESTIC_PARTNER",
+           "FATHER", "FRIEND", "MANAGER", "MOTHER", "PARENT", "PARTNER", "REFERRED_BY",
+           "RELATIVE", "SISTER", "SPOUSE", "CUSTOM"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ASSISTANT - The relation type for an assistant            </li>
+            <li>
+BROTHER - The relation type for a brother            </li>
+            <li>
+CHILD - The relation type for a child            </li>
+            <li>
+DOMESTIC_PARTNER - The relation type for a domestic partner            </li>
+            <li>
+FATHER - The relation type for a father            </li>
+            <li>
+FRIEND - The relation type for a friend            </li>
+            <li>
+MANAGER - The relation type for a manager            </li>
+            <li>
+MOTHER - The relation type for a mother            </li>
+            <li>
+PARENT - The relation type for a parent            </li>
+            <li>
+PARTNER - The relation type for a partner            </li>
+            <li>
+REFERRED_BY - The relation type for referred-by            </li>
+            <li>
+RELATIVE - The relation type for a relative            </li>
+            <li>
+SISTER - The relation type for a sister            </li>
+            <li>
+SPOUSE - The relation type for a spouse            </li>
+            <li>
+OTHER - Any other relationship            </li>
+            <li>
+CUSTOM - Custom relationship. The actual type can be set in the label.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="ContactInstantMessengerType">
+<a class="backward-compatibility-anchor" name="::Contact::ContactInstantMessengerType"></a><h3>1.7. ContactInstantMessengerType</h3>
+<div class="brief">
+  Specifies instant messenger types.
+The possible values are:
+          </div>
+<pre class="webidl prettyprint">   enum ContactInstantMessengerType {"OTHER", "GOOGLE", "WLM", "YAHOO", "FACEBOOK", "ICQ",
+           "AIM", "QQ", "JABBER", "SKYPE", "IRC", "CUSTOM"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+GOOGLE - The IM service provider name for <a href="http://en.wikipedia.org/wiki/Google_Talk">Google Talk</a>            </li>
+            <li>
+WLM - The IM service provider name for <a href="http://en.wikipedia.org/wiki/Windows_Live_Messenger">Windows Live Messenger</a>            </li>
+            <li>
+YAHOO - The IM service provider name for <a href="http://en.wikipedia.org/wiki/Yahoo!_Messenger">Yahoo! Messenger</a>            </li>
+            <li>
+FACEBOOK - The IM service provider name for <a href="http://en.wikipedia.org/wiki/Facebook_Messenger">Facebook Messenger</a>            </li>
+            <li>
+ICQ - The IM service provider name for <a href="http://en.wikipedia.org/wiki/ICQ">ICQ</a>            </li>
+            <li>
+AIM - The IM service provider name for <a href="http://en.wikipedia.org/wiki/AOL_Instant_Messenger">AOL Instant Messenger</a>            </li>
+            <li>
+QQ - The IM service provider name for <a href="http://en.wikipedia.org/wiki/QQ">QQ</a>            </li>
+            <li>
+JABBER - The IM service provider name for <a href="http://en.wikipedia.org/wiki/XMPP">Jabber</a>            </li>
+            <li>
+SKYPE - The IM service provider name for <a href="http://en.wikipedia.org/wiki/Skype">Skype</a>            </li>
+            <li>
+IRC - The IM service provider name for <a href="http://en.wikipedia.org/wiki/IRC">IRC</a>            </li>
+            <li>
+OTHER - Any other IM service provider            </li>
+            <li>
+CUSTOM - Custom IM service provider. The actual type can be set in the label.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ContactManagerObject">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManagerObject"></a><h3>2.1. ContactManagerObject</h3>
+<div class="brief">
+ The ContactManagerObject interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContactManagerObject {
+    readonly attribute <a href="#ContactManager">ContactManager</a> contact;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ContactManagerObject">ContactManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.contact </em>object allows access to the Contact API functionality.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ContactManager">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager"></a><h3>2.2. ContactManager</h3>
+<div class="brief">
+ The ContactManager interface provides access to the Contact API functionality.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContactManager {
+
+    void getAddressBooks(<a href="#AddressBookArraySuccessCallback">AddressBookArraySuccessCallback</a> successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#AddressBook">AddressBook</a> getUnifiedAddressBook() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#AddressBook">AddressBook</a> getDefaultAddressBook() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addAddressBook(<a href="#AddressBook">AddressBook</a> addressBook) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAddressBook(<a href="#AddressBookId">AddressBookId</a> addressBookId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#AddressBook">AddressBook</a> getAddressBook(<a href="#AddressBookId">AddressBookId</a> addressBookId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Person">Person</a> get(<a href="#PersonId">PersonId</a> personId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#Person">Person</a> person) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Person">Person</a>[] persons,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#PersonId">PersonId</a> personId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#PersonId">PersonId</a>[] personIds,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#PersonArraySuccessCallback">PersonArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addChangeListener(<a href="#PersonsChangeCallback">PersonsChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface offers a method to retrieve the address books objects.
+The address book objects can be manipulated with the provided functionalities to add, remove, and update the contained information.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContactManager::getAddressBooks">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::getAddressBooks"></a><code><b><span class="methodName">getAddressBooks</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the available address books.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getAddressBooks(<a href="#AddressBookArraySuccessCallback">AddressBookArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the operation completes successfully, the successCallback must
+be invoked with the phone address book and the SIM address book (if any).
+Other address books present in the device should also be returned.
+            </p>
+            <p>
+If no address book is present, the <em>successCallback</em> will be invoked with an empty array.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError - If any error occurs while trying to get the address books              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback for all the asynchronous calls.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact is successfully found.
+    // Tries to change the first name.
+    contacts[0].name.firstName = 'Jeffrey Ross';
+    try {
+      addressbook.update(contacts[0]);
+    } catch (err) {
+      console.log( 'The following error occurred while updating: ' +  err.name);
+    }
+    console.log('First contact was updated');
+  }
+
+  // Defines the success callback for retrieving all the
+  // Address Books.
+  function addressBooksCB(addressbooks) {
+    if(addressbooks.length &gt; 0) {
+      addressbook = addressbooks[0];
+      console.log('The addressbook type is ' + addressbook.type +
+            ' and name ' + addressbook.name);
+
+      var contact = new tizen.Contact(
+                         {name: new tizen.ContactName({firstName:'Jeffrey',
+                                 lastName:'Hyman',
+                                 nicknames:['joey ramone']}),
+                          emails:[new tizen.ContactEmailAddress('user@domain.com')],
+                          phoneNumbers:[new tizen.ContactPhoneNumber('123456789')]});
+
+      addressbook.add(contact);
+
+      // The contact has been successfully added.
+      // Checks whether the added contact can be retrieved from the address book or not.
+      // If the address book is empty, only the item added through saveContact
+      // should be returned.
+      var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Jeffrey');
+      try {
+        addressbook.find(contactsFoundCB, errorCB, filter);
+      } catch (err) {
+        console.log( 'The following error occurred while finding: ' +  err.name);
+      }
+    }
+  }
+
+  // Gets a list of available address books.
+  tizen.contact.getAddressBooks(addressBooksCB, errorCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::getUnifiedAddressBook">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::getUnifiedAddressBook"></a><code><b><span class="methodName">getUnifiedAddressBook</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the aggregation of all address books.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#AddressBook">AddressBook</a> getUnifiedAddressBook();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The unified address book is a logical address book that represents an aggregation of all address books
+that are obtained by getAddressBooks() and contains all contacts in the address books.
+Note that the unified address book does not have an address book ID
+and it is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ AddressBook The unified AddressBook object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact has been successfully found.
+    // Tries to change the first name.
+    contacts[0].name.firstName = 'Jeffrey Ross';
+    try {
+      addressbook.update(contacts[0]);
+      console.log('First contact was updated');
+    } catch (err) {
+      console.log( 'The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  // Gets the unified address book.
+  addressbook = tizen.contact.getUnifiedAddressBook();
+
+  // Adds a new contact.
+  var contact = new tizen.Contact(
+                     {name: new tizen.ContactName({firstName:'Jeffrey',
+                             lastName:'Hyman',
+                             nicknames:['joey ramone']}),
+                      emails:[new tizen.ContactEmailAddress('user@domain.com')],
+                      phoneNumbers:[new tizen.ContactPhoneNumber('123456789')]});
+
+  try {
+    addressbook.add(contact);
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+
+  // The contact has been successfully added.
+  // Tries to check whether the added contact can be retrieved from the address book
+  // If the address book is empty, only the item added
+  // through saveContact should be returned.
+  var filter = new tizen.AttributeFiilter('name.firstName', 'CONTAINS', 'Jeffrey');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::getDefaultAddressBook">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::getDefaultAddressBook"></a><code><b><span class="methodName">getDefaultAddressBook</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the default address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#AddressBook">AddressBook</a> getDefaultAddressBook();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The default address book is one of the addressBooks that is the appointed addressbook from platform or operator.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ AddressBook The default AddressBook object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact has been successfully found.
+    // Tries to change the first name.
+    contacts[0].name.firstName = 'Jeffrey Ross';
+    try {
+      addressbook.update(contacts[0]);
+      console.log('First contact was updated');
+    } catch (err) {
+      console.log( 'The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  // Adds a new contact.
+  var contact = new tizen.Contact(
+                     {name: new tizen.ContactName({firstName:'Jeffrey',
+                             lastName:'Hyman',
+                             nicknames:['joey ramone']}),
+                      emails:[new tizen.ContactEmailAddress('user@domain.com')],
+                      phoneNumbers:[new tizen.ContactPhoneNumber('123456789')]});
+
+  try {
+    addressbook.add(contact);
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+
+  // The contact has been successfully added.
+  // Checks whether the added contact can be retrieved from the address book.
+  // If the address book is empty, only the item added
+  // through saveContact should be returned.
+  var filter = new tizen.AttributeFiilter('name.firstName', 'CONTAINS', 'Jeffrey');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::addAddressBook">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::addAddressBook"></a><code><b><span class="methodName">addAddressBook</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an addressbook to the contact database synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addAddressBook(<a href="#AddressBook">AddressBook</a> addressBook);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the addressbook is successfully inserted in the database, the AddressBook object
+will have its identifier (id attribute) set when the function returns.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addressBook</span>: 
+ Address book to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the address book could not be inserted due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var addressbook = new tizen.AddressBook(
+             account.id,
+             'remote addressbook'
+         );
+         tizen.contact.addAddressBook(addressbook);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::removeAddressBook">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::removeAddressBook"></a><code><b><span class="methodName">removeAddressBook</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes an address book from the contact database synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAddressBook(<a href="#AddressBookId">AddressBookId</a> addressBookId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Removes the address book in the database that corresponds to the specified
+identifier. The function will throw an exception if it failed to remove
+the specified addressbook.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addressBookId</span>: 
+ Identifier (id attribute) of the address book object to delete
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any address book.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if specified addressBookId is an id of default address book.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the address book could not be removed due
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var addressbook = new tizen.AddressBook(
+             account.id,
+             'remote addressbook'
+         );
+         tizen.contact.addAddressBook(addressbook);
+         tizen.contact.removeAddressBook(addressbook.id);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::getAddressBook">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::getAddressBook"></a><code><b><span class="methodName">getAddressBook</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the address book with the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#AddressBook">AddressBook</a> getAddressBook(<a href="#AddressBookId">AddressBookId</a> addressBookId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addressBookId</span>: 
+ Address book identifier
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ AddressBook The matching AddressBook object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no address book
+with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in case of any other error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var contactRef; // ContactRef supposed to be initialized
+ try {
+   // Retrieves the Contact corresponding to a given ContactRef.
+   var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
+   var contact = addressBook.get(contactRef.contactId);
+   console.log("Successfully resolved contact with id: " + contactRef.contactId);
+ } catch(err) {
+   console.log("Error: " + err.name);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::get">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the person with the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Person">Person</a> get(<a href="#PersonId">PersonId</a> personId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the operation completes successfully, it must return the
+person with the specified identifier.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">personId</span>: 
+ Person identifier
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Person The matching Person object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no person
+with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var contactRef; // ContactRef supposed to be initialized
+ try {
+   // Retrieves the Person corresponding to a Contact.
+   var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
+   var contact = addressBook.get(contactRef.contactId);
+   var person = tizen.contact.get(contact.personId);
+   console.log("Successfully resolved person with id: " + contact.personId);
+ } catch(err) {
+   console.log("Error: " + err.name);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::update">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates a person in the address book synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#Person">Person</a> person);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">person</span>: 
+ Person object to be updated
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the person could not be updated
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function personsFoundCB(persons) {
+    // The person has been successfully found.
+    // Tries to change the isFavorite attribute.
+    persons[0].isFavorite = true;
+    try {
+      tizen.contact.update(persons[0]);
+      console.log('First person was updated');
+    } catch (err) {
+      console.log( 'The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  try {
+    tizen.contact.find(personsFoundCB, errorCB);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::updateBatch">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::updateBatch"></a><code><b><span class="methodName">updateBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates several existing persons in the contact DB asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateBatch(<a href="#Person">Person</a>[] persons, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If an identifier in the IDs parameter does not correspond to the <em>id</em> attribute of any person in the contact DB.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs, while trying to add the persons.              </li>
+            </ul>
+            <p>
+If the details of any persons cannot be updated, the error callback function that was passed in the invocation will be called.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">persons</span>: 
+ List of Person objects to be saved in the terminal storage
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the request to update the details of a person fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback for all the asynchronous calls.
+  function errorCB(err) {
+    console.log('The following error occurred: ' +  err.name);
+  }
+
+  function personsUpdatedCB() {
+    console.log('Contacts were updated');
+  }
+
+  function personsFoundCB(persons) {
+    // The person has been successfully found.
+    for(var i = 0; i &lt; persons.length; i++) {
+      persons[i].isFavorite = true;
+    }
+    try {
+      tizen.contact.updateBatch(persons, personsUpdatedCB, errorCB);
+    } catch (err) {
+      console.log('The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  try {
+    tizen.contact.find(personsFoundCB, errorCB);
+  } catch (err) {
+    console.log('The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::remove">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a person from the contact DB synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#PersonId">PersonId</a> personId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Removes the person that corresponds to the specified identifier and the contacts related to the person as well. This function will throw an exception if it fails to remove the specified person.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">personId</span>: 
+ Identifier (id attribute) of the Person object to delete
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any persons.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the person could not be removed due
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback.
+  function errorCB(err) {
+    console.log('The following error occurred: ' +  err.name);
+  }
+
+  function personsFoundCB(persons) {
+    // The person has been successfully found.
+    if(persons.length &gt; 0) {
+      try {
+        tizen.contact.remove(persons[0].id);
+        console.log('First person was removed');
+      } catch (err) {
+        console.log('The following error occurred while removing: ' +  err.name);
+      }
+    } else {
+      console.log( 'No persons.');
+    }
+  }
+
+  try {
+    tizen.contact.find(personsFoundCB, errorCB);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::removeBatch">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::removeBatch"></a><code><b><span class="methodName">removeBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes persons from contact DB asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeBatch(<a href="#PersonId">PersonId</a>[] personIds, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Removes the persons that correspond to the specified identifiers as well as the contacts related to them.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If an identifier in the <em>personIds </em>parameter does not correspond to the ID of any person in the contact DB. (Otherwise, the implementation will attempt to remove the contacts corresponding to these identifiers).              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs while trying to remove the persons.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">personIds</span>: 
+ List of identifiers (id attribute) for the Person objects to delete
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the request to delete persons fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function personsRemovedCB() {
+    console.log('Contacts were removed');
+  }
+
+  function personsFoundCB(persons) {
+    // The person has been successfully found.
+    if(persons.length &gt; 2) {
+      try {
+        tizen.contact.removeBatch([persons[0].id, persons[1].id], personsRemovedCB, errorCB);
+      } catch (err) {
+        console.log( 'The following error occurred while removing: ' +  err.name);
+      }
+    } else {
+      console.log( 'Not enough persons.');
+    }
+  }
+
+  try {
+    tizen.contact.find(personsFoundCB, errorCB);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::find">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::find"></a><code><b><span class="methodName">find</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets an array of all <em>Person </em>objects from the contact DB or the ones that match the optionally supplied filter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void find(<a href="#PersonArraySuccessCallback">PersonArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the filter is passed and contains valid values, only those values in the
+address book that match the filter criteria as specified in the AbstractFilter
+interface will be returned in the successCallback. If no filter is passed, the filter
+contains any invalid values, the filter is <var>null </var> or undefined, then
+the implementation must return the full list of contact items
+in the successCallback. If no persons are available in the contact DB or no
+person matches the filter criteria, the successCallback will be invoked
+with an empty array.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs while trying to retrieve the persons.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Filter to select the persons returned
+                </li>
+          <li class="param">
+<span class="name">sortMode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Variable to determine the sort order in which the persons are returned
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  // Defines the person search success callback.
+  function personsFoundCB(persons) {
+    console.log(persons.length + ' results found.');
+  }
+
+  // Finds all the persons in the contact DB that have the word Ramone in their display name.
+  var filter = new tizen.AttributeFilter('displayName', 'CONTAINS', 'Ramone');
+
+  // The persons returned by the find() query will be sorted in the ascending order of their display name.
+  var sortingMode =  new tizen.SortMode('displayName', 'ASC');
+  try {
+    tizen.contact.find(personsFoundCB, errorCB,
+                     filter, sortingMode);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::addChangeListener">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::addChangeListener"></a><code><b><span class="methodName">addChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Subscribes to receive notifications about person changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addChangeListener(<a href="#PersonsChangeCallback">PersonsChangeCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+When executed, the implementation must immediately return a subscription identifier that identifies
+the watch operation. After returning the identifier, the watch operation is started
+asynchronously.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Contains the methods for different types of change notifications
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Identifier used to clear the watch subscription.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters
+contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watcherId = 0; // watcher identifier
+
+ var watcher = {
+   onpersonsadded: function(persons) {
+     console.log(persons.length + ' persons were added');
+   },
+   onpersonsupdated: function(persons) {
+     console.log(persons.length + ' persons were updated');
+   },
+   onpersonsremoved: function(ids) {
+     console.log(ids.length + ' persons were deleted');
+   }
+ };
+
+ // Registers to be notified when the person changes.
+ watcherId = tizen.contact.addChangeListener(watcher);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContactManager::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Contact::ContactManager::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes to person changes watch operation.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the watchId argument is valid and corresponds to a subscription already in
+place, the watch process must immediately stop and no further callbacks MUST be
+invoked. If the watchId argument is not valid or does not correspond to a
+valid subscription, the method should return without any further action.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if there is no listener
+with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watcherId = 0; // watcher identifier
+
+ // Receives person changes.
+ var watcher = {
+   onpersonsadded: function(persons) {
+     console.log(persons.length + ' persons were added');
+   },
+   onpersonsupdated: function(persons) {
+     console.log(persons.length + ' persons were updated');
+   },
+   onpersonsremoved: function(ids) {
+     console.log(ids.length + ' persons were removed');
+   }
+ };
+
+ // Cancels the watch operation.
+ function cancelWatch() {
+    tizen.contact.removeChangeListener(watcherId);
+ }
+
+ // Registers to be notified of person changes.
+ watcherId = tizen.contact.addChangeListener(watcher);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AddressBook">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook"></a><h3>2.3. AddressBook</h3>
+<div class="brief">
+ The AddressBook interface provides methods to manage an address book.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="account.html#AccountId">AccountId</a> accountId, DOMString name)]
+  interface AddressBook {
+
+    readonly attribute <a href="#AddressBookId">AddressBookId</a>? id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute boolean readOnly;
+
+    readonly attribute <a href="account.html#AccountId">AccountId</a>? accountId;
+
+    <a href="#Contact">Contact</a> get(<a href="#ContactId">ContactId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#Contact">Contact</a> contact) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#Contact">Contact</a>[] contacts,
+                  optional <a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#Contact">Contact</a> contact) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Contact">Contact</a>[] contacts,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#ContactId">ContactId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#ContactId">ContactId</a>[] ids,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addChangeListener(<a href="#AddressBookChangeCallback">AddressBookChangeCallback</a> successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ContactGroup">ContactGroup</a> getGroup(<a href="#ContactGroupId">ContactGroupId</a> groupId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addGroup(<a href="#ContactGroup">ContactGroup</a> group) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateGroup(<a href="#ContactGroup">ContactGroup</a> group) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeGroup(<a href="#ContactGroupId">ContactGroupId</a> groupId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ContactGroup">ContactGroup</a>[] getGroups() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+An address book is a collection of contacts and groups. This interface offers the following methods to manage the address book and to manipulate contacts within the address book:
+          </p>
+          <ul>
+            <li>
+ <em>get()</em> - To get contacts that have a specific ID            </li>
+            <li>
+ <em>find()</em> - To find contacts using filters            </li>
+            <li>
+ <em>add() </em>or <em>addBatch()</em> - To add contacts to a specific address book            </li>
+            <li>
+ <em>update() </em>or <em>updateBatch()</em> - To update contacts in a specific address book            </li>
+            <li>
+ <em>remove() </em>or <em>removeBatch() </em> - To remove existing contacts            </li>
+            <li>
+ <em>addChangeListener() </em>or <em>removeChangeListener() </em> - To watch for address book changes            </li>
+          </ul>
+          <p>
+This interface also offers the following methods to manipulate groups within the address book:
+          </p>
+          <ul>
+            <li>
+ <em>getGroup()</em> - To get a group having a specific ID            </li>
+            <li>
+ <em>getGroups()</em> - To get groups in a specific address book            </li>
+            <li>
+ <em>addGroup() </em> - To add groups to a specific address book             </li>
+            <li>
+ <em>updateGroup() </em> - To update groups in a specific address book            </li>
+            <li>
+ <em>removeGroup() </em> - To remove existing groups            </li>
+          </ul>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appId = tizen.application.getCurrentApplication().appInfo.id;
+ tizen.account.getAccounts(function(accounts) {
+     var account = accounts[0];
+     if(account) {
+         var addressbook = new tizen.AddressBook(
+             account.id,
+             'remote addressbook'
+         );
+
+         // 'addressbook' variable is not available until it is inserted into database.
+         tizen.contact.addAddressBook(addressbook);
+     }
+ }, function(e) {
+     console.log('Error: ' + e.message);
+ }, appId);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="AddressBook::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AddressBook(<a href="account.html#AccountId">AccountId</a> accountId, DOMString name);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AddressBook::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AddressBookId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Unique identifier of the address book.
+            </div>
+<div class="description">
+            <p>
+The value of this attribute is <var>null </var> if the address book
+is the unified address book.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AddressBook::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The address book descriptive name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AddressBook::readOnly">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">readOnly</span></span><div class="brief">
+ Indicates whether the address book is read-only.
+            </div>
+<div class="description">
+            <p>
+Some on line address books cannot be edited and will have this
+flag set to <var>true</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AddressBook::accountId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AccountId </span><span class="name">accountId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Account identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AddressBook::get">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the contact with the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Contact">Contact</a> get(<a href="#ContactId">ContactId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ Contact identifier
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Contact The matching Contact object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no contact
+with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var contactRef; // ContactRef supposed to be initialized
+ try {
+   // Retrieves the Contact corresponding to a given ContactRef.
+   var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
+   var contact = addressBook.get(contactRef.contactId);
+   console.log("Successfully resolved contact with id: " + contactRef.contactId);
+ } catch(err) {
+   console.log("Error: " + err.name);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::add">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a contact to the address book synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Contact">Contact</a> contact);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the contact is successfully inserted in the addressbook, the Contact object
+will have its identifier (id attribute) set when the function returns.
+This operation is done successfully, a new person object is also generated automatically.
+            </p>
+            <p>
+If you wish to update an existing contact, call the update() method
+instead. If you wish to add a copy of an existing Contact object,
+call the Contact.clone() method first and pass the clone to the add() method.
+            </p>
+            <p>
+The contact shall be added to default address book if the address book
+is the unified address book.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contact</span>: 
+ Contact to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs while trying to insert the contact.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  try {
+    var contact = new tizen.Contact({name: new tizen.ContactName({firstName:'Jeffrey',
+                                          lastName:'Hyman',
+                                          nicknames:['joey ramone']}),
+                                    emails:[new tizen.ContactEmailAddress('user@domain.com')],
+                                    phoneNumbers:[new tizen.ContactPhoneNumber('123456789')]});
+    addressbook.add(contact);
+    console.log('Contact added with id ' + contact.id);
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::addBatch">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::addBatch"></a><code><b><span class="methodName">addBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds several contacts to the address book asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addBatch(<a href="#Contact">Contact</a>[] contacts, optional <a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If all the contacts are successfully added to the address book,
+the success callback will be invoked, passing the list of Contact objects
+that were added, with their identifier set (id attribute).
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value, the contact has any invalid value or the address book has some restrictions (such as, limitations in the size of text attributes) because of which the contact items were not added.              </li>
+              <li>
+UnknownError - If any other error occurs, while trying to add the contacts.              </li>
+            </ul>
+            <p>
+If you wish to update an existing contact, call the update() method instead.
+If you wish to add a copy of an existing Contact object, call Contact.clone()
+method first and pass the clone to the add() method.
+            </p>
+            <p>
+If any of the contacts cannot be added, the error callback
+function that was passed in the invocation will be called.
+            </p>
+            <p>
+The contacts shall be added to local phone address book if the address book
+is the default address book.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contacts</span>: 
+ List of contacts to add
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the request fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  // Defines the add contact success callback
+  function contactsAddedCB(contacts) {
+    console.log( contacts.length + ' contact(s) were successfully added to an Address Book' );
+  };
+
+  // Gets the default address book
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  var c1 = new tizen.Contact({name: new tizen.ContactName({firstName:'Jeffrey',
+                             lastName:'Hyman',
+                             nicknames:['joey ramone']}),
+                             emails:[new tizen.ContactEmailAddress('user1@domain.com')],
+                             phoneNumbers:[new tizen.ContactPhoneNumber('123456789')]});
+
+  var c2 = new tizen.Contact({name: new tizen.ContactName({firstName:'Elton',
+                             lastName:'John',
+                             nicknames:['El']}),
+                             emails:[new tizen.ContactEmailAddress('user2@domain.com')],
+                             phoneNumbers:[new tizen.ContactPhoneNumber('987654321')]});
+
+  try {
+    addressbook.addBatch([c1, c2], contactsAddedCB, errorCB);
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::update">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates a contact in the address book synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#Contact">Contact</a> contact);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contact</span>: 
+ Contact object to update
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the contact could not be updated
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact has been successfully found.
+    // Tries to change the first name.
+    contacts[0].name.firstName = 'Christopher';
+    try {
+      addressbook.update(contacts[0]);
+      console.log('First contact was updated');
+    } catch (err) {
+      console.log( 'The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::updateBatch">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::updateBatch"></a><code><b><span class="methodName">updateBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates several existing contacts in the address book asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateBatch(<a href="#Contact">Contact</a>[] contacts, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If an identifier in the IDs parameter does not correspond to the <em>id </em>attribute of any contact in the address book.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs, while trying to add the contacts.              </li>
+            </ul>
+            <p>
+If any of the contacts could not be updated, the error callback
+function that was passed in the invocation will be called.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contacts</span>: 
+ List of contact objects to be saved in the terminal storage
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the request to update contacts fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback for all the asynchronous calls.
+  function errorCB(err) {
+    console.log('The following error occurred: ' +  err.name);
+  }
+
+  function contactsUpdatedCB() {
+    console.log('Contacts were updated');
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact has been successfully found.
+    for(var i = 0; i &lt; contacts.length; i++) {
+      contacts[i].name.firstName = 'Christopher';
+    }
+    try {
+      addressbook.updateBatch(contacts, contactsUpdatedCB, errorCB);
+    } catch (err) {
+      console.log('The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log('The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::remove">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a contact from the address book synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#ContactId">ContactId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Removes the contact in the address book that corresponds to the specified
+identifier. This function will throw an exception if it failed to
+remove the specified contact.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ Identifier (id attribute) of the contact object to delete
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any contact in the address book.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the contact could not be removed
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback.
+  function errorCB(err) {
+    console.log('The following error occurred: ' +  err.name);
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact has been successfully found.
+    if(contacts.length &gt; 0) {
+      try {
+        addressbook.remove(contacts[0].id);
+        console.log('First contact was removed');
+      } catch (err) {
+        console.log('The following error occurred while removing: ' +  err.name);
+      }
+    } else {
+      console.log( 'No contacts.');
+    }
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::removeBatch">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::removeBatch"></a><code><b><span class="methodName">removeBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes several contacts from the address book asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeBatch(<a href="#ContactId">ContactId</a>[] ids, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If an identifier in the IDs parameter does not correspond to the <em>id </em>attribute of any contact in the address book (Otherwise, the implementation will attempt to remove the contacts that correspond to these identifiers).              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs while trying to remove the contacts.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ids</span>: 
+ List of identifiers (id attribute) for the contact objects to be deleted
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the request to delete contacts fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function contactsRemovedCB() {
+    console.log('Contacts were removed');
+  }
+
+  function contactsFoundCB(contacts) {
+    // The contact has been successfully found.
+    if(contacts.length &gt; 2) {
+      try {
+        addressbook.removeBatch([contacts[0].id, contacts[1].id], contactsRemovedCB, errorCB);
+      } catch (err) {
+        console.log( 'The following error occurred while removing: ' +  err.name);
+      }
+    } else {
+      console.log( 'Not enough contacts.');
+    }
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::find">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::find"></a><code><b><span class="methodName">find</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds an array of all Contact objects from the specified address book or an array of
+Contact objects that match the optionally supplied filter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void find(<a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the filter is passed and contains valid values, only those values in the
+address book that match the filter criteria as specified in the AbstractFilter
+interface will be returned in the successCallback. If no filter is passed, the filter
+contains any invalid values, the filter is <var>null</var> or undefined, then
+the implementation MUST return the full list of contact items
+in the successCallback. If no contacts are available in the address book or no
+contact matches the filter criteria, the successCallback will be invoked
+with an empty array.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs while trying to retrieve the contacts.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Filter used to select the contacts to be returned
+                </li>
+          <li class="param">
+<span class="name">sortMode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Sort order in which the contacts are returned
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  // Defines the contact search success callback.
+  function contactsFoundCB(contacts) {
+     console.log(contacts.length + ' results found.');
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  // Finds all contacts in the address book that have "Ramone" in the nick name.
+  var filter = new tizen.AttributeFilter('name.nicknames', 'CONTAINS', 'Ramone');
+
+  // The contacts returned by the find() query will be sorted by
+  // ascending last name.
+  var sortingMode =  new tizen.SortMode('name.lastName', 'ASC');
+  try {
+    addressbook.find(contactsFoundCB, errorCB,
+                     filter, sortingModes);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::addChangeListener">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::addChangeListener"></a><code><b><span class="methodName">addChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Subscribes to receive notifications about address book changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addChangeListener(<a href="#AddressBookChangeCallback">AddressBookChangeCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+When executed, the implementation must immediately return a subscription identifier that identifies
+the watch operation. After returning the identifier, the watch operation is started
+asynchronously.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when different types of address book change notifications are received
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked if address book changes cannot be watched
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long An identifier used to clear the watch subscription
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters
+contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watcherId = 0; // watcher identifier
+ var addressbook; // This example assumes addressbook is initialized
+
+ var watcher = {
+   oncontactsadded: function(contacts) {
+     console.log(contacts.length + ' contacts were added');
+   },
+   oncontactsupdated: function(contacts) {
+     console.log(contacts.length + ' contacts were updated');
+   },
+   oncontactsremoved: function(ids) {
+     console.log(ids.length + ' contacts were deleted');
+   }
+ };
+
+ // Registers to be notified when the address book changes.
+ watcherId = addressbook.addChangeListener(watcher);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes an address book change watch operation.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the watchId argument is valid and corresponds to a subscription already in
+place, the watch process MUST immediately stop and no further callbacks MUST be
+invoked. If the watchId argument is not valid or does not correspond to a
+valid subscription, the method should return without any further action.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if there is no listener
+with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watcherId = 0; // watcher identifier
+ var addressbook; // This example assumes addressbook is initialized
+
+ // Receives address book changes.
+ var watcher = {
+   oncontactsadded: function(contacts) {
+     console.log(contacts.length + ' contacts were added');
+   },
+   oncontactsupdated: function(contacts) {
+     console.log(contacts.length + ' contacts were updated');
+   },
+   oncontactsremoved: function(ids) {
+     console.log(ids.length + ' contacts were removed');
+   }
+ };
+
+ // Cancels the watch operation.
+ function cancelWatch() {
+    addressbook.removeChangeListener(watcherId);
+ }
+
+ // Registers to be notified when the address book changes.
+ watcherId = addressbook.addChangeListener(watcher);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::getGroup">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::getGroup"></a><code><b><span class="methodName">getGroup</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the group with the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ContactGroup">ContactGroup</a> getGroup(<a href="#ContactGroupId">ContactGroupId</a> groupId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">groupId</span>: 
+ Group identifier
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ContactGroup The matching ContactGroup object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if there is no contact
+with the given identifier.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   // Retrieves the Person corresponding to a Contact.
+   var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
+   var contact = addressBook.get(contactRef.contactId);
+   var group = addressBook.getGroup(contact.groupIds[0].id);
+   console.log("Successfully resolved group with id: " + contact.groupIds[0].id);
+ } catch(err) {
+   console.log("Error: " + err.name);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::addGroup">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::addGroup"></a><code><b><span class="methodName">addGroup</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a group to the address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addGroup(<a href="#ContactGroup">ContactGroup</a> group);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the group is successfully inserted in the addressbook, the Group object
+will have its identifier (id attribute) set when the function returns.
+            </p>
+            <p>
+The group shall be added to local phone address book if the address book
+is the default address book.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">group</span>: 
+ ContactGroup object to be added
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs while trying to insert the contact.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Gets the address book.
+  var addressbook = tizen.contact.getDefaultAddressBook();
+
+  try {
+    var group = new tizen.ContactGroup('Company');
+    addressbook.addGroup(group);
+    console.log('Group added with id ' + group.id);
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::updateGroup">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::updateGroup"></a><code><b><span class="methodName">updateGroup</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates a group in the address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateGroup(<a href="#ContactGroup">ContactGroup</a> group);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">group</span>: 
+ ContactGroup object to be updated
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the group could not be updated
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Gets the address book.
+        var addressbook = tizen.contact.getDefaultAddressBook();
+
+  try {
+    groups = addressbook.getGroups();
+    groups[0].name = 'Friends';
+    addressbook.updateGroup(groups[0]);
+    console.log('First group was updated');
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::removeGroup">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::removeGroup"></a><code><b><span class="methodName">removeGroup</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a group from the address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeGroup(<a href="#ContactGroupId">ContactGroupId</a> groupId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Removes the group in the address book that corresponds to the specified identifier. This method will throw an exception if it failed to remove the specified group.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">groupId</span>: 
+ Identifier (id attribute) of the ContactGroup object to be deleted
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any contact in the address book.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the group could not be removed
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Gets the default address book.
+  var addressbook = tizen.contact.getDefaultAddressBook();
+
+  try {
+    groups = addressbook.getGroups();
+    addressbook.removeGroup(groups[0].id);
+    console.log('First group was removed');
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AddressBook::getGroups">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBook::getGroups"></a><code><b><span class="methodName">getGroups</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets an array of all ContactGroup objects from the specified address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ContactGroup">ContactGroup</a>[] getGroups();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.read
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ContactGroup[] The array of ContactGroup object from this address book
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any contact in the address book.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the group could not be retrieved due
+to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Gets the default address book.
+  var addressbook = tizen.contact.getDefaultAddressBook();
+
+  try {
+    groups = addressbook.getGroups();
+    console.log('Number of groups is ' + groups.length);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Person">
+<a class="backward-compatibility-anchor" name="::Contact::Person"></a><h3>2.4. Person</h3>
+<div class="brief">
+ The person object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Person {
+    readonly attribute <a href="#PersonId">PersonId</a> id;
+
+    readonly attribute DOMString displayName;
+
+    readonly attribute long contactCount;
+
+    readonly attribute boolean hasPhoneNumber;
+
+    readonly attribute boolean hasEmail;
+
+    attribute boolean isFavorite;
+
+    attribute DOMString? photoURI;
+
+    attribute DOMString? ringtoneURI;
+
+    attribute <a href="#ContactId">ContactId</a> displayContactId;
+
+    void link(<a href="#PersonId">PersonId</a> personId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Person">Person</a> unlink(<a href="#ContactId">ContactId</a> contactId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Person::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PersonId </span><span class="name">id</span></span><div class="brief">
+ The identifier of the person.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::displayName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">displayName</span></span><div class="brief">
+ The person display name as a string.
+It is selected from the contacts' display names.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::contactCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">contactCount</span></span><div class="brief">
+ The count of the contacts of a person.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::hasPhoneNumber">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">hasPhoneNumber</span></span><div class="brief">
+ Indicates whether a person has a phone number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::hasEmail">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">hasEmail</span></span><div class="brief">
+ Indicates whether the person has an email addresses.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::isFavorite">
+<span class="attrName"><span class="type">boolean </span><span class="name">isFavorite</span></span><div class="brief">
+ Indicates whether the contact is a favorite.
+            </div>
+<div class="description">
+            <p>
+Indicates whether the person was marked as <em>Favorite</em>.
+            </p>
+            <p>
+By default, this attribute is set to <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::photoURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">photoURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI of a picture of a person.
+            </div>
+<div class="description">
+            <p>
+This attribute is used to store a URI that points to an image that can represent the
+person object. This attribute only contains a local file URI.
+Person's photoURI is bounded to linked contacts' valid photoURI.
+It means that if photoURI exists, it cannot become <var>null</var> and except the linked contact's photoURI,
+any other file cannot be set as photoURI.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::ringtoneURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">ringtoneURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI of a custom ringtone for a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+This attribute only contains a local file URI.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Person::displayContactId">
+<span class="attrName"><span class="type">ContactId </span><span class="name">displayContactId</span></span><div class="brief">
+ The ID of a contact that represents information of the person.
+            </div>
+<div class="description">
+            <p>
+The contact, this value is indicating, is used to show detailed information of the person.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Person::link">
+<a class="backward-compatibility-anchor" name="::Contact::Person::link"></a><code><b><span class="methodName">link</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Aggregates another person to this person.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void link(<a href="#PersonId">PersonId</a> personId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Person is a meta object which aggregates contacts and to make a person, user should combine related contacts.
+For this operation, link method is provided.
+If "Person A" is linked to "Person B", contacts related to "Person A" are aggregated to "Person B".
+After this function returns, the target "Person A" is removed from DB.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">personId</span>: 
+ ID of person to be merged
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs while trying to insert the contact.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Defines the error callback for all the asynchronous calls.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  function personsFoundCB(persons) {
+    // The persons have been successfully found.
+    try {
+      persons[0].link(persons[1].id);
+      console.log('Second person was merged to the first person.');
+    } catch (err) {
+      console.log( 'The following error occurred while updating: ' +  err.name);
+    }
+  }
+
+  try {
+    tizen.contact.find(personsFoundCB, errorCB);
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Person::unlink">
+<a class="backward-compatibility-anchor" name="::Contact::Person::unlink"></a><code><b><span class="methodName">unlink</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Separates a contact from this person.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Person">Person</a> unlink(<a href="#ContactId">ContactId</a> contactId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Person is aggregated contacts and if a user wants to detach one contact from person, unlink method is provided.
+Unlink is basically detaching a contact object from linked contacts so only a contact ID linked to the person can be used as the input parameter.
+This function returns a newly created Person object that indicates the separated contact.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/contact.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contactId</span>: 
+ ID of contact to unlink
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter
+contains invalid values.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs while trying to insert the contact.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var myPersonId = '1'; //ID of modified
+
+  var addressbook; // Default addressbook
+  var person;    // Existing person obtained from addressbook
+  var newPerson; // New person, which will be created during unlink
+
+  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  // Defines the contact search success callback.
+  function contactsFoundCB(contacts) {
+    if (contacts.length &gt; 1) {
+      try {
+        // Unlinks the first contact.
+        newPerson = person.unlink(contacts[0].id);
+      } catch (err) {
+        console.log( 'The following error occurred while unlink: ' +  err.name);
+      }
+    } else {
+        console.log( 'Not enough contacts ');
+    }
+  }
+
+  try {
+    // Gets the person.
+    person = tizen.contact.get(myPersonId);
+
+    // Gets the default address book.
+    addressbook = tizen.contact.getDefaultAddressBook();
+
+    // Finds all the contacts in the default address book with personId
+    // as exactly myPersonId.
+    var filter = new tizen.AttributeFilter('personId', 'EXACTLY', myPersonId);
+
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while processing: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="ContactInit">
+<a class="backward-compatibility-anchor" name="::Contact::ContactInit"></a><h3>2.5. ContactInit</h3>
+<div class="brief">
+ The ContactInit dictionary specifies contact attributes upon contact creation.
+          </div>
+<pre class="webidl prettyprint">  dictionary ContactInit {
+    <a href="#ContactName">ContactName</a> name;
+    <a href="#ContactAddress">ContactAddress</a>[] addresses;
+    DOMString photoURI;
+    <a href="#ContactPhoneNumber">ContactPhoneNumber</a>[] phoneNumbers;
+    <a href="#ContactEmailAddress">ContactEmailAddress</a>[] emails;
+    <a href="#ContactInstantMessenger">ContactInstantMessenger</a>[] messengers;
+    <a href="#ContactRelationship">ContactRelationship</a>[] relationships;
+    Date birthday;
+    <a href="#ContactAnniversary">ContactAnniversary</a>[] anniversaries;
+    <a href="#ContactOrganization">ContactOrganization</a>[] organizations;
+    DOMString[] notes;
+    <a href="#ContactWebSite">ContactWebSite</a>[] urls;
+    DOMString ringtoneURI;
+    DOMString messageAlertURI;
+    DOMString vibrationURI;
+    <a href="#ContactGroupId">ContactGroupId</a>[] groupIds;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This dictionary is used to input parameters when contacts are created.
+          </p>
+         </div>
+</div>
+<div class="interface" id="Contact">
+<a class="backward-compatibility-anchor" name="::Contact::Contact"></a><h3>2.6. Contact</h3>
+<div class="brief">
+ The Contact interface is used to create a <em>Contact </em>object.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional <a href="#ContactInit">ContactInit</a>? ContactInitDict),
+   Constructor(DOMString stringRepresentation)]
+  interface Contact {
+    readonly attribute <a href="#ContactId">ContactId</a>? id;
+
+    readonly attribute <a href="#PersonId">PersonId</a>? personId;
+
+    readonly attribute <a href="#AddressBookId">AddressBookId</a>? addressBookId;
+
+    readonly attribute Date? lastUpdated;
+
+    readonly attribute boolean isFavorite;
+
+    attribute <a href="#ContactName">ContactName</a>? name setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactAddress">ContactAddress</a>[] addresses setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? photoURI setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactPhoneNumber">ContactPhoneNumber</a>[] phoneNumbers setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactEmailAddress">ContactEmailAddress</a>[] emails setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactInstantMessenger">ContactInstantMessenger</a>[] messengers;
+
+    attribute <a href="#ContactRelationship">ContactRelationship</a>[] relationships;
+
+    attribute Date? birthday setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactAnniversary">ContactAnniversary</a>[] anniversaries setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactOrganization">ContactOrganization</a>[] organizations setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] notes setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactWebSite">ContactWebSite</a>[] urls setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? ringtoneURI setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? messageAlertURI;
+
+    attribute DOMString? vibrationURI;
+
+    attribute <a href="#ContactGroupId">ContactGroupId</a>[] groupIds setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString convertToString(optional <a href="#ContactTextFormat">ContactTextFormat</a>? format) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Contact">Contact</a> clone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Gets the default address book.
+  var addressbook = tizen.contact.getDefaultAddressBook();
+
+  var contact = null;
+
+  try {
+    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");
+  } catch (err) {
+    console.log( 'The following error occurred while converting: ' +  err.name);
+  }
+
+  try {
+    if (contact) {
+      addressbook.add(contact);
+      console.log('Contact was added with ID ' + contact.id);
+    }
+  } catch (err) {
+    console.log( 'The following error occurred while adding: ' +  err.name);
+  }
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="Contact::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">Contact(optional <a href="#ContactInit">ContactInit</a>? ContactInitDict);</pre>
+<pre class="webidl prettyprint">Contact(DOMString stringRepresentation);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Contact::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContactId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of a Raw contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Contact::personId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PersonId </span><span class="name">personId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of the person corresponding to the raw contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Contact::addressBookId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AddressBookId </span><span class="name">addressBookId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of the address book that corresponds to the raw contact.
+By default, this attribute is set to <var>null</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Contact::lastUpdated">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">lastUpdated</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The timestamp for the last update of a contact.
+            </div>
+<div class="description">
+            <p>
+Specifies revision information about the contact.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>. Initially, once a contact is added to an address book, this value is the same as the creation date.
+For more details, see RFC 2426, Section 3.6.4.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Contact::isFavorite">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isFavorite</span></span><div class="brief">
+ Indicates whether a contact is favorite.
+            </div>
+<div class="description">
+            <p>
+This value is associated with the <em>isFavorite</em> attribute of Person that this contact indicates.
+            </p>
+            <p>
+By default, this attribute is set to <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   if (contact.isFavorite) {
+     // ...
+   }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::name">
+<span class="attrName"><span class="type">ContactName </span><span class="name">name</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name of a contact.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Contact::addresses">
+<span class="attrName"><span class="type">ContactAddress[]
+                      </span><span class="name">addresses</span></span><div class="brief">
+ The contact addresses.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var contactInit = {};
+ var contactAddr = new tizen.ContactAddres({streetAddress:'Gran Via, 32',
+                                            postalCode:'50013',
+                                                  city:'Zaragoza',
+                                                  country:'ES'});
+ contactInit.addresses = [contactAddr];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::photoURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">photoURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI to the picture of the contact.
+            </div>
+<div class="description">
+            <p>
+This attribute is used to store a URI that points to an image that can represent the
+contact object. This attribute only contains a local file URI.
+See RFC 2426, Section 3.1.4.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var contactInit = {};
+  tizen.filesystem.resolve('images/mypicture.jpg', function(imageFile) {
+    contactInit.photoURI = imageFile.toURI();
+  });
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::phoneNumbers">
+<span class="attrName"><span class="type">ContactPhoneNumber[]
+                      </span><span class="name">phoneNumbers</span></span><div class="brief">
+ The telephone numbers of the contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   var phoneNumber = new tizen.ContactPhoneNumber('123456789');
+   contactInit.phoneNumbers = [phoneNumber];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::emails">
+<span class="attrName"><span class="type">ContactEmailAddress[]
+                      </span><span class="name">emails</span></span><div class="brief">
+ The email addresses of the contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   var email = new tizen.ContactEmailAddress('deedee@ramones.com');
+   contactInit.emails = [email];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::messengers">
+<span class="attrName"><span class="type">ContactInstantMessenger[]
+                      </span><span class="name">messengers</span></span><div class="brief">
+ The instant messenger addresses of the contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   var messenger = new tizen.ContactInstantMessenger('user@example.com');
+   contactInit.messengers = [messenger];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::relationships">
+<span class="attrName"><span class="type">ContactRelationship[]
+                      </span><span class="name">relationships</span></span><div class="brief">
+ The relationships of the contact.
+            </div>
+<div class="description">
+            <p>
+The direction of relationship is: contact (owner of relationship) is a relationship type to relative name.
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   // Contact is brother of 'Anna'.
+   var relationship = new tizen.ContactRelationship('Anna', "BROTHER");
+   contactInit.relationships = [relationship];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::birthday">
+<span class="attrName"><span class="type">Date </span><span class="name">birthday</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The birthday of the contact.
+            </div>
+<div class="description">
+            <p>
+Date specification of the birthday of the contact (see RFC 2426 Section 3.1.5).
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   contactInit.birthday = new Date(1996, 4, 15);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::anniversaries">
+<span class="attrName"><span class="type">ContactAnniversary[]
+                      </span><span class="name">anniversaries</span></span><div class="brief">
+ The list of anniversaries for the contact.
+            </div>
+<div class="description">
+            <p>
+Defines arbitrary anniversaries for the contact (in addition to the birthday).
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   var marriage_anniv = new tizen.ContactAnniversary(new Date(1976, 11, 2), 'Marriage');
+   contactInit.anniversaries = [marriage_anniv];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="Contact::organizations">
+<span class="attrName"><span class="type">ContactOrganization[]
+                      </span><span class="name">organizations</span></span><div class="brief">
+ The organizations the contact belongs to.
+            </div>
+<div class="description">
+            <p>
+Contains information related to the contact's company or organization.
+            </p>
+            <p>
+For more details, see RFC 2426, Section 3.5.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Contact::notes">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">notes</span></span><div class="brief">
+ The notes associated to the contact.
+            </div>
+<div class="description">
+            <p>
+To specify supplemental information or a comment related to the contact.
+            </p>
+            <p>
+For more details, see RFC 2426, Section 3.6.2.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Contact::urls">
+<span class="attrName"><span class="type">ContactWebSite[]
+                      </span><span class="name">urls</span></span><div class="brief">
+ The URLs associated to the contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to an empty array.
+            </p>
+            <p>
+In case multiple URLs are available, the first one is the default one.
+For more details, see RFC 2426, Section 3.6.8.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Contact::ringtoneURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">ringtoneURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI to the custom ringtone for the contact.
+            </div>
+<div class="description">
+            <p>
+To specify a custom ringtone for the contact.
+            </p>
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+This attribute only contains a local file URI scheme;
+For more details, see RFC 2426, Section 3.6.6.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Contact::messageAlertURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">messageAlertURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI of a custom message alert for a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+This attribute only contains a local file URI.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Contact::vibrationURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">vibrationURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI of a custom vibration alert for a contact.
+            </div>
+<div class="description">
+            <p>
+Vibration patterns in .ivt files are accepted. If an invalid file is set the default vibration alert will be used.
+            </p>
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+This attribute only contains a local file URI.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Contact::groupIds">
+<span class="attrName"><span class="type">ContactGroupId[]
+                      </span><span class="name">groupIds</span></span><div class="brief">
+ The groups the contact belongs to.
+            </div>
+<div class="description">
+            <p>
+To associate groups to the contact.
+            </p>
+            <p>
+By default, this attribute is initialized to an empty array.
+            </p>
+            <p>
+In case multiple categories are available, the first one is the default one.
+See RFC 2426, Section 3.6.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Contact::convertToString">
+<a class="backward-compatibility-anchor" name="::Contact::Contact::convertToString"></a><code><b><span class="methodName">convertToString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Converts the Contact item to a string format.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString convertToString(optional <a href="#ContactTextFormat">ContactTextFormat</a>? format);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+A textual representation for the contact will be generated and returned synchronously.
+The export format is set via the format parameter.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">format</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Format to use for export <br>If this value is <var>null</var> or empty, it converts to platform default format.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string representation of the Contact item
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the functionality is not allowed.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook;
+
+  // Defines the error callback.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  // Defines the contact find success callback.
+  function contactsFoundCB(contacts) {
+    try {
+      // Converts the first contact to vCard 3.0 format.
+      var vcard = contacts[0].convertToString("VCARD_30");
+      console.log('textual representation of the contact is: ' + vcard);
+    } catch (err) {
+      console.log( 'The following error occurred while converting: ' +  err.name);
+    }
+  }
+
+  // Gets the default address book.
+  addressbook = tizen.contact.getDefaultAddressBook();
+
+  // Finds all contacts in the address book whose first name contains the string 'Chris'.
+  var filter = new tizen.AttributeFilter('firstName', 'CONTAINS', 'Chris');
+  try {
+    addressbook.find(contactsFoundCB, errorCB, filter);
+  } catch (err) {
+    console.log( 'The following error occurred while finding: ' +  err.name);
+  }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Contact::clone">
+<a class="backward-compatibility-anchor" name="::Contact::Contact::clone"></a><code><b><span class="methodName">clone</span></b></code>
+</dt>
+<dd>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Contact">Contact</a> clone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Creates a clone of the Contact object, detached from any address book.
+            </p>
+            <p>
+The Contact object returned by the <var>clone()</var> method will have its identifier
+set to <var>null</var> and will be detached from any address book.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Contact A new clone of the Contact object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the functionality is not allowed.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Gets the default address book.
+  var addressbook = tizen.contact.getDefaultAddressBook();
+
+  var bob = new tizen.Contact();
+  bob.name = new tizen.ContactName({firstName:'Bob',
+                                    lastName:'Smith'});
+  addressbook.add(bob);
+  var alice = bob.clone();
+  contact.name.firstName = "Alice"; // Bob's wife
+  addressbook.add(alice);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContactRef">
+<a class="backward-compatibility-anchor" name="::Contact::ContactRef"></a><h3>2.7. ContactRef</h3>
+<div class="brief">
+ The fully-defined contact reference.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="#AddressBookId">AddressBookId</a> addressBookId, <a href="#ContactId">ContactId</a> contactId)]
+  interface ContactRef {
+    attribute <a href="#AddressBookId">AddressBookId</a> addressBookId;
+
+    attribute <a href="#ContactId">ContactId</a> contactId;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It contains both the identifier of the address book which the contact is in, and
+the contact identifier within this address book.
+          </p>
+          <p>
+This interface is used by other APIs to uniquely and globally identify contacts.
+          </p>
+         </div>
+<div class="constructors">
+<h4 id="ContactRef::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactRef(<a href="#AddressBookId">AddressBookId</a> addressBookId, <a href="#ContactId">ContactId</a> contactId);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactRef::addressBookId">
+<span class="attrName"><span class="type">AddressBookId </span><span class="name">addressBookId</span></span><div class="brief">
+ The address book identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactRef::contactId">
+<span class="attrName"><span class="type">ContactId </span><span class="name">contactId</span></span><div class="brief">
+ The contact identifier inside the address book.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="ContactNameInit">
+<a class="backward-compatibility-anchor" name="::Contact::ContactNameInit"></a><h3>2.8. ContactNameInit</h3>
+<div class="brief">
+ The ContactNameInit dictionary defines the properties of a ContactName, to pass to the ContactName constructor.
+          </div>
+<pre class="webidl prettyprint">  dictionary ContactNameInit {
+    DOMString prefix;
+    DOMString suffix;
+    DOMString firstName;
+    DOMString middleName;
+    DOMString lastName;
+    DOMString[] nicknames;
+    DOMString phoneticFirstName;
+    DOMString phoneticMiddleName;
+    DOMString phoneticLastName;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+See the ContactName interface for more information about the members.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ContactName">
+<a class="backward-compatibility-anchor" name="::Contact::ContactName"></a><h3>2.9. ContactName</h3>
+<div class="brief">
+ The ContactName interface contains all information related to a contact name.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional <a href="#ContactNameInit">ContactNameInit</a>? nameInitDict)]
+  interface ContactName {
+    attribute DOMString? prefix;
+
+    attribute DOMString? suffix;
+
+    attribute DOMString? firstName;
+
+    attribute DOMString? middleName;
+
+    attribute DOMString? lastName;
+
+    attribute DOMString[] nicknames;
+
+    attribute DOMString? phoneticFirstName;
+
+    attribute DOMString? phoneticMiddleName;
+
+    attribute DOMString? phoneticLastName;
+
+    readonly attribute DOMString? displayName;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="constructors">
+<h4 id="ContactName::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactName(optional <a href="#ContactNameInit">ContactNameInit</a>? nameInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactName::prefix">
+<span class="attrName"><span class="type">DOMString </span><span class="name">prefix</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name prefix of a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to
+<var>null</var>. See also RFC 2426, Section 3.1.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   contact.name.prefix = "Dr.";
+ </pre>
+</div>
+</li>
+<li class="attribute" id="ContactName::suffix">
+<span class="attrName"><span class="type">DOMString </span><span class="name">suffix</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name suffix of a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to
+<var>null</var>. See also RFC 2426, Section 3.1.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   contact.name.suffix = "Jr.";
+ </pre>
+</div>
+</li>
+<li class="attribute" id="ContactName::firstName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">firstName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The first (given) name of a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to
+<var>null</var>. See also RFC 2426, Section 3.1.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   contact.name.firstName = 'Douglas';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="ContactName::middleName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">middleName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The middle name of a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to
+<var>null</var>. See also RFC 2426, Section 3.1.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   contact.name.middleName = 'Glenn';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="ContactName::lastName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">lastName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The last (family) name of a contact.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to
+<var>null</var>. See also RFC 2426, Section 3.1.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   contact.name.lastName = 'Colvin';
+ </pre>
+</div>
+</li>
+<li class="attribute" id="ContactName::nicknames">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">nicknames</span></span><div class="brief">
+ The nicknames of a contact.
+            </div>
+<div class="description">
+            <p>
+The nickname is a name used instead of, or in addition to, the given name of a contact,
+place, or thing. It can also be used to specify a familiar form of a proper name.
+            </p>
+            <p>
+By default, this attribute is initialized to an empty array.
+            </p>
+            <p>
+In case multiple nicknames are available the first one is the default.
+See RFC 2426, Section 3.1.3.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   contact.name.nickNames = ['Dee Dee'];
+ </pre>
+</div>
+</li>
+<li class="attribute" id="ContactName::phoneticFirstName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">phoneticFirstName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The phonetic first name of a contact.
+            </div>
+<div class="description">
+            <p>
+Describes how the first name should be
+pronounced. This is very important in
+some languages, such as Japanese, because the
+same 'Kanji' may have several pronunciations.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactName::phoneticMiddleName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">phoneticMiddleName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The phonetic middle name of a contact.
+            </div>
+<div class="description">
+            <p>
+Describes how the middle name should be
+pronounced. This is very important in
+some languages, such as Japanese, because the
+same 'Kanji' may have several pronunciations.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ContactName::phoneticLastName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">phoneticLastName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The phonetic last name of a contact.
+            </div>
+<div class="description">
+            <p>
+Describes how the last name should be
+pronounced. This is very important in
+some languages, such as Japanese, because the
+same 'Kanji' may have several pronunciations.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactName::displayName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">displayName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The display name of a contact.
+            </div>
+<div class="description">
+            <p>
+The string which can be displayed to identify the contact. It is composed of the first
+and last names if available, otherwise, it will fall back to the most adequate
+field available to identify the contact (such as nickname).
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>. Initially, once a contact is added to an address book, this value is composed.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="ContactOrganizationInit">
+<a class="backward-compatibility-anchor" name="::Contact::ContactOrganizationInit"></a><h3>2.10. ContactOrganizationInit</h3>
+<div class="brief">
+ The ContactOrganizationInit dictionary defines the properties of a ContactOrganization, to pass to the ContactOrganization constructor.
+          </div>
+<pre class="webidl prettyprint">  dictionary ContactOrganizationInit {
+    DOMString name;
+    DOMString department;
+    DOMString title;
+    DOMString role;
+    DOMString logoURI;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+See ContactOrganization interface for information about members.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ContactOrganization">
+<a class="backward-compatibility-anchor" name="::Contact::ContactOrganization"></a><h3>2.11. ContactOrganization</h3>
+<div class="brief">
+ The ContactOrganization interface contains the information about the organization or
+company that a contact belongs to.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional <a href="#ContactOrganizationInit">ContactOrganizationInit</a>? orgInitDict)]
+  interface ContactOrganization {
+    attribute DOMString? name;
+
+    attribute DOMString? department;
+
+    attribute DOMString? title;
+
+    attribute DOMString? role;
+
+    attribute DOMString? logoURI;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+By default, each of the attributes of this interface are <var>null</var>.
+          </p>
+          <p>
+For more details, see RFC 2426, Section 3.5.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var organization = new tizen.ContactOrganization({name: "Nice Company", role: "SW Engineer"});
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactOrganization::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactOrganization(optional <a href="#ContactOrganizationInit">ContactOrganizationInit</a>? orgInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactOrganization::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name of an organization.
+            </div>
+<div class="description">
+            <p>
+For more details, see RFC 2426, Section 3.5.5.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactOrganization::department">
+<span class="attrName"><span class="type">DOMString </span><span class="name">department</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The organizational unit name.
+            </div>
+<div class="description">
+            <p>
+For more details, see RFC 2426, Section 3.5.5.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactOrganization::title">
+<span class="attrName"><span class="type">DOMString </span><span class="name">title</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The job title.
+            </div>
+<div class="description">
+            <p>
+To specify the job title, functional position or function (such as 'Director,
+Research and Development').
+            </p>
+            <p>
+For more details, see RFC 2426, Section 3.5.1.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactOrganization::role">
+<span class="attrName"><span class="type">DOMString </span><span class="name">role</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the role, occupation, or business category
+(such as 'Programmer').
+            </div>
+<div class="description">
+            <p>
+For more details, see RFC 2426, Section 3.5.2.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactOrganization::logoURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">logoURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI to the logo of a company.
+            </div>
+<div class="description">
+            <p>
+To specify a graphic image of a logo associated with an organization.
+This attribute only contains file URI Scheme;
+remote pictures could be loaded to local with Download API.
+For more details, see RFC 2426, Section 3.5.3.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactWebSite">
+<a class="backward-compatibility-anchor" name="::Contact::ContactWebSite"></a><h3>2.12. ContactWebSite</h3>
+<div class="brief">
+ The ContactWebSite interface contains the URL and the type of web site.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString url, optional DOMString type)]
+  interface ContactWebSite
+  {
+    attribute DOMString url;
+
+    attribute DOMString type;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+For more details, see RFC 2426, Section 3.6.8.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var contactInit = {}
+  var blog = new tizen.ContactWebSite('http://www.domain.com', 'BLOG');
+  contactInit.urls = [blog];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactWebSite::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactWebSite(DOMString url, optional DOMString type);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactWebSite::url">
+<span class="attrName"><span class="type">DOMString </span><span class="name">url</span></span><div class="brief">
+ The URL for the contact's web site.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactWebSite::type">
+<span class="attrName"><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ The type of web site.
+            </div>
+<div class="description">
+            <p>
+At least the following values must be supported:
+            </p>
+            <ul>
+              <li>
+HOMEPAGE - Indicates a home page.              </li>
+              <li>
+BLOG - Indicates a blog.              </li>
+            </ul>
+            <p>
+By default, this attribute is set to HOMEPAGE.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactAnniversary">
+<a class="backward-compatibility-anchor" name="::Contact::ContactAnniversary"></a><h3>2.13. ContactAnniversary</h3>
+<div class="brief">
+ The <em>ContactAnniversary </em>interface contains the date and description of an anniversary.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(Date date, optional DOMString? label)]
+  interface ContactAnniversary
+  {
+    attribute Date date;
+
+    attribute DOMString? label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var contactInit = {}
+  var marriage_anniv = new tizen.ContactAnniversary(new Date(1976, 11, 2), 'Marriage');
+  contactInit.anniversaries = [marriage_anniv];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactAnniversary::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactAnniversary(Date date, optional DOMString? label);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactAnniversary::date">
+<span class="attrName"><span class="type">Date </span><span class="name">date</span></span><div class="brief">
+ The date of an anniversary.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAnniversary::label">
+<span class="attrName"><span class="type">DOMString </span><span class="name">label</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The text describing an anniversary.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="ContactAddressInit">
+<a class="backward-compatibility-anchor" name="::Contact::ContactAddressInit"></a><h3>2.14. ContactAddressInit</h3>
+<div class="brief">
+ The ContactAddressInit dictionary defines the properties of a ContactAddress to pass to the ContactAddress constructor.
+          </div>
+<pre class="webidl prettyprint">  dictionary ContactAddressInit
+  {
+    DOMString country;
+    DOMString region;
+    DOMString city;
+    DOMString streetAddress;
+    DOMString additionalInformation;
+    DOMString postalCode;
+    boolean isDefault;
+    DOMString[] types;
+    DOMString label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+See ContactAddress interface for more information about the members.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ContactAddress">
+<a class="backward-compatibility-anchor" name="::Contact::ContactAddress"></a><h3>2.15. ContactAddress</h3>
+<div class="brief">
+ The ContactAddress interface contains a set of attributes that represent a particular point
+on the Earth's surface.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional <a href="#ContactAddressInit">ContactAddressInit</a>? addressInitDict)]
+  interface ContactAddress
+  {
+    attribute DOMString? country;
+
+    attribute DOMString? region;
+
+    attribute DOMString? city;
+
+    attribute DOMString? streetAddress;
+
+    attribute DOMString? additionalInformation;
+
+    attribute DOMString? postalCode;
+
+    attribute boolean isDefault;
+
+    attribute DOMString[] types;
+
+    attribute DOMString? label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Except isDefault and types attributes, each of the attributes of this interface are set to <var>null</var> by default.
+          </p>
+          <p>
+For more details, see RFC 2426, Section 3.2.1.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   var contactAddress = new tizen.ContactAddress({streetAddress:'Gran Via, 32',
+                                                  postalCode:'50013', city:'Zaragoza',
+                                                 country:'ES', types:['WORK']});
+   contactInit.contactAddress = [contactAddress];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactAddress::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactAddress(optional <a href="#ContactAddressInit">ContactAddressInit</a>? addressInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactAddress::country">
+<span class="attrName"><span class="type">DOMString </span><span class="name">country</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The country of the address.
+            </div>
+<div class="description">
+            <p>
+It is recommended that the country is specified
+using the two-letter [ISO 3166-1] code.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::region">
+<span class="attrName"><span class="type">DOMString </span><span class="name">region</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name of a country subdivision.
+            </div>
+<div class="description">
+            <p>
+For example, State (United States) or Province (Spain).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::city">
+<span class="attrName"><span class="type">DOMString </span><span class="name">city</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The name of the locality.
+For example, the city, county, town, or village.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::streetAddress">
+<span class="attrName"><span class="type">DOMString </span><span class="name">streetAddress</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The street address, for example, building number and street name/number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::additionalInformation">
+<span class="attrName"><span class="type">DOMString </span><span class="name">additionalInformation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Additional address details that are required for an accurate address.
+For example, floor number, apartment number, suite name, the name of an office occupant, and so on.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::postalCode">
+<span class="attrName"><span class="type">DOMString </span><span class="name">postalCode</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The postal code of the location (also known as the zip code in the US).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::isDefault">
+<span class="attrName"><span class="type">boolean </span><span class="name">isDefault</span></span><div class="brief">
+ The default state of an address.
+            </div>
+<div class="description">
+            <p>
+Indicates whether the address was marked as <em>default</em> for the contact.
+The only one among addresses for a person can have default property,
+so that this attribute might be changed without explicit modification
+according to the policy of platform.
+            </p>
+            <p>
+It deals with the 'pref' TYPE on RFC 2426, Section 3.2.1.
+            </p>
+            <p>
+By default, this attribute is set to <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::types">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">types</span></span><div class="brief">
+ The case insensitive list of address types.
+            </div>
+<div class="description">
+            <p>
+For more details, see RFC 2426, Section 3.2.1.
+            </p>
+            <p>
+At least the following values must be supported:
+            </p>
+            <ul>
+              <li>
+WORK - Indicates a work address              </li>
+              <li>
+HOME - Indicates a home address              </li>
+              <li>
+OTHER - Indicates other type of address              </li>
+              <li>
+CUSTOM - Indicates custom type of address. The actual type can be set in the label.              </li>
+            </ul>
+            <p>
+By default, this attribute is set to HOME.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ "OTHER" and "CUSTOM" types are added since Tizen 2.3.
+            </p>
+</li>
+<li class="attribute" id="ContactAddress::label">
+<span class="attrName"><span class="type">DOMString </span><span class="name">label</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The address label, can hold a custom address type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactPhoneNumber">
+<a class="backward-compatibility-anchor" name="::Contact::ContactPhoneNumber"></a><h3>2.16. ContactPhoneNumber</h3>
+<div class="brief">
+ The ContactPhoneNumber interface contains the number and the type of phone number.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString number, optional DOMString[] types, optional boolean isDefault)]
+  interface ContactPhoneNumber
+  {
+    attribute DOMString number;
+
+    attribute boolean isDefault;
+
+    attribute DOMString[] types;
+
+    attribute DOMString? label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface provides the phone number and the type of number such as work, home and car or the device subtype such as fax, fixed and mobile.
+When searching by phoneNumber, matchflag "CONTAINS" provides a result set which is retrieved from normalized phoneNumber as searching value.
+          </p>
+          <p>
+For more details, see RFC 2426, Section 3.3.1
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">   var contactInit = {};
+   var phoneNumber = new tizen.ContactPhoneNumber('123456789', ['WORK','VOICE'], true);
+   contactInit.phoneNumbers = [phoneNumber];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactPhoneNumber::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactPhoneNumber(DOMString number, optional DOMString[] types, optional boolean isDefault);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactPhoneNumber::number">
+<span class="attrName"><span class="type">DOMString </span><span class="name">number</span></span><div class="brief">
+ The full phone number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactPhoneNumber::isDefault">
+<span class="attrName"><span class="type">boolean </span><span class="name">isDefault</span></span><div class="brief">
+ The default state of the phone number.
+            </div>
+<div class="description">
+            <p>
+Indicates whether the phone number was marked as <em>default</em> for the contact.
+Only one phone number for a person can have the default property,
+so that this attribute might be changed without explicit modification
+according to the policy of platform.
+            </p>
+            <p>
+It deals with the 'pref' TYPE on RFC 2426, Section 3.3.1
+            </p>
+            <p>
+By default, this attribute is set to false.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactPhoneNumber::types">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">types</span></span><div class="brief">
+ The case insensitive list of phone types, as defined in RFC 2426.
+            </div>
+<div class="description">
+            <p>
+Specifies the intended use of the phone number.
+            </p>
+            <p>
+At least the following values must be supported:
+            </p>
+            <ul>
+              <li>
+<var>WORK</var> - Indicates a work number              </li>
+              <li>
+<var>HOME</var> - Indicates a home number              </li>
+              <li>
+<var>VOICE</var> - Indicates a voice number (Default)              </li>
+              <li>
+<var>FAX</var> - Indicates a facsimile number              </li>
+              <li>
+<var>MSG</var> - Indicates a messaging service on the number              </li>
+              <li>
+<var>CELL</var> - Indicates a cellular number              </li>
+              <li>
+<var>PAGER</var> - Indicates a pager number              </li>
+              <li>
+<var>BBS</var> - Indicates a bulletin board service number              </li>
+              <li>
+<var>MODEM</var> - Indicates a MODEM number              </li>
+              <li>
+<var>CAR</var> - Indicates a car-phone number              </li>
+              <li>
+<var>ISDN</var> - Indicates an ISDN number              </li>
+              <li>
+<var>VIDEO</var> - Indicates a video-phone number              </li>
+              <li>
+<var>PCS</var> - Personal Communication Standard              </li>
+              <li>
+<var>ASSISTANT</var> - Indicates assistant number              </li>
+              <li>
+<var>OTHER</var> - Indicates other type of number              </li>
+              <li>
+<var>CUSTOM</var> - Indicates custom type of number. The actual type can be set in the label.              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ "ASSISTANT", "OTHER" and "CUSTOM" types are added since Tizen 2.3.
+            </p>
+</li>
+<li class="attribute" id="ContactPhoneNumber::label">
+<span class="attrName"><span class="type">DOMString </span><span class="name">label</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The phone number label, can hold a custom phone number type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactEmailAddress">
+<a class="backward-compatibility-anchor" name="::Contact::ContactEmailAddress"></a><h3>2.17. ContactEmailAddress</h3>
+<div class="brief">
+ The ContactEmailAddress interface contains the email address and the type of email address.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString email, optional DOMString[] types, optional boolean isDefault)]
+  interface ContactEmailAddress
+  {
+    attribute DOMString email;
+
+    attribute boolean isDefault;
+
+    attribute DOMString[] types;
+
+    attribute DOMString? label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+For more details, see RFC 2426, Section 3.3.2.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var contactInit = {};
+  var email = new tizen.ContactEmailAddress('user@domain.com', ['WORK']);
+  contactInit.emails = [email];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactEmailAddress::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactEmailAddress(DOMString email, optional DOMString[] types, optional boolean isDefault);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactEmailAddress::email">
+<span class="attrName"><span class="type">DOMString </span><span class="name">email</span></span><div class="brief">
+ The full email address.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ContactEmailAddress::isDefault">
+<span class="attrName"><span class="type">boolean </span><span class="name">isDefault</span></span><div class="brief">
+ The default state of an email address.
+            </div>
+<div class="description">
+            <p>
+Indicates whether the email address was marked as <em>default</em> for the contact.
+Only one email address for a person can have the default property,
+so that this attribute might be changed without explicit modification
+according to the policy of platform.
+            </p>
+            <p>
+It deals with the 'pref' TYPE on RFC 2426, Section 3.3.2
+            </p>
+            <p>
+By default, this attribute is set to false.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactEmailAddress::types">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">types</span></span><div class="brief">
+ The case insensitive list of email types.
+            </div>
+<div class="description">
+            <p>
+Specifies the intended use of the email address.
+            </p>
+            <p>
+At least the following values must be supported:
+            </p>
+            <ul>
+              <li>
+WORK - Indicates a work email              </li>
+              <li>
+HOME - Indicates a home email              </li>
+              <li>
+MOBILE - Indicates a mobile email              </li>
+              <li>
+OTHER - Indicates other type of email              </li>
+              <li>
+CUSTOM - Indicates custom type of email. The actual type can be set in the label.              </li>
+            </ul>
+            <p>
+By default, this attribute is set to WORK.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ "OTHER" and "CUSTOM" types are added since Tizen 2.3.
+            </p>
+</li>
+<li class="attribute" id="ContactEmailAddress::label">
+<span class="attrName"><span class="type">DOMString </span><span class="name">label</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The email label, can hold a custom email type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactInstantMessenger">
+<a class="backward-compatibility-anchor" name="::Contact::ContactInstantMessenger"></a><h3>2.18. ContactInstantMessenger</h3>
+<div class="brief">
+ The ContactInstantMessenger interface contains the instant messenger (IM) address and the type of IM provider.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString imAddress, optional <a href="#ContactInstantMessengerType">ContactInstantMessengerType</a>? type)]
+  interface ContactInstantMessenger
+  {
+    attribute DOMString imAddress;
+
+    attribute <a href="#ContactInstantMessengerType">ContactInstantMessengerType</a> type;
+
+    attribute DOMString? label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var contactInit = {};
+  var messenger = new tizen.ContactInstantMessenger('user@domain.com', 'GOOGLE');
+  contactInit.messengers = [messenger];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactInstantMessenger::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactInstantMessenger(DOMString imAddress, optional <a href="#ContactInstantMessengerType">ContactInstantMessengerType</a>? type);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactInstantMessenger::imAddress">
+<span class="attrName"><span class="type">DOMString </span><span class="name">imAddress</span></span><div class="brief">
+ The full instant messenger address.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ContactInstantMessenger::type">
+<span class="attrName"><span class="type">ContactInstantMessengerType </span><span class="name">type</span></span><div class="brief">
+ The instant messenger provider type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to "OTHER".
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ContactInstantMessenger::label">
+<span class="attrName"><span class="type">DOMString </span><span class="name">label</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The instant messenger label, can hold a custom messenger type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactGroup">
+<a class="backward-compatibility-anchor" name="::Contact::ContactGroup"></a><h3>2.19. ContactGroup</h3>
+<div class="brief">
+ The ContactGroup interface that defines a group.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString name, optional DOMString? ringtoneURI, optional DOMString? photoURI)]
+  interface ContactGroup
+  {
+    readonly attribute <a href="#ContactGroupId">ContactGroupId</a>? id;
+
+    readonly attribute <a href="#AddressBookId">AddressBookId</a>? addressBookId;
+
+    attribute DOMString name;
+
+    attribute DOMString? ringtoneURI;
+
+    attribute DOMString? photoURI;
+
+    readonly attribute DOMString readOnly;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var addressbook = null;
+  var group = null;
+  var ringtones = null;
+
+  // Defines the error callback for all the asynchronous calls.
+  function errorCB(err) {
+    console.log( 'The following error occurred: ' +  err.name);
+  }
+
+  // Defines the success callback for retrieving all the
+  // Address Books.
+  function addressBooksCB(addressbooks) {
+    addressbook = addressbooks[0];
+    try {
+      group = new tizen.ContactGroup('Family', ringtones.resolve('ring.mp3').toURI());
+    } catch (err) {
+      console.log( 'The following error occurred while converting: ' +  err.name);
+    }
+
+    try {
+      if (group) {
+        addressbook.addGroup(group);
+        console.log('Group was added with ID ' + group.id);
+      }
+    } catch (err) {
+      console.log( 'The following error occurred while adding: ' +  err.name);
+    }
+  }
+
+  tizen.filesystem.resolve("ringtones", function(dir) {
+    ringtones = dir;
+    tizen.contact.getAddressBooks(addressBooksCB, errorCB);
+  });
+
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactGroup::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactGroup(DOMString name, optional DOMString? ringtoneURI, optional DOMString? photoURI);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactGroup::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContactGroupId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of a group.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactGroup::addressBookId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AddressBookId </span><span class="name">addressBookId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of the address book that the group belongs to.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactGroup::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The name of a group.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactGroup::ringtoneURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">ringtoneURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI to the custom ringtone for a group.
+            </div>
+<div class="description">
+            <p>
+To specify a custom ringtone for a group.
+            </p>
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+This attribute only contains a local file URI.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactGroup::photoURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">photoURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The URI that points to an image that can represent the<em> Group </em>object. This attribute only contains a local file URI.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContactGroup::readOnly">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">readOnly</span></span><div class="brief">
+ The flag indicating whether the group can be modified or removed.
+Some groups cannot be edited if this flag is set to <var>true</var>.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to false.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ContactRelationship">
+<a class="backward-compatibility-anchor" name="::Contact::ContactRelationship"></a><h3>2.20. ContactRelationship</h3>
+<div class="brief">
+ The ContactRelationship interface contains the relationship of the contact.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString relativeName, optional <a href="#ContactRelationshipType">ContactRelationshipType</a>? type)]
+  interface ContactRelationship
+  {
+    attribute DOMString relativeName;
+
+    attribute <a href="#ContactRelationshipType">ContactRelationshipType</a> type;
+
+    attribute DOMString? label;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The direction of relationship is: contact (owner of relationship) is a relationship type to relative name.
+See code example below.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  var contactInit = {};
+  // Contact is brother of 'Anna'
+  var relationship = new tizen.ContactRelationship('Anna', 'BROTHER');
+  contactInit.relationships = [relationship];
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ContactRelationship::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ContactRelationship(DOMString relativeName, optional <a href="#ContactRelationshipType">ContactRelationshipType</a>? type);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContactRelationship::relativeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">relativeName</span></span><div class="brief">
+ The name of the person in a particular relationship.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ContactRelationship::type">
+<span class="attrName"><span class="type">ContactRelationshipType </span><span class="name">type</span></span><div class="brief">
+ The relationship type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to "OTHER".
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ContactRelationship::label">
+<span class="attrName"><span class="type">DOMString </span><span class="name">label</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The relationship label, can hold a custom relationship type.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is initialized to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="PersonArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Contact::PersonArraySuccessCallback"></a><h3>2.21. PersonArraySuccessCallback</h3>
+<div class="brief">
+ The PersonArraySuccessCallback interface defines the success callback that is used for retrieving
+a list of persons.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PersonArraySuccessCallback {
+    void onsuccess(<a href="#Person">Person</a>[] persons);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The success callback that takes an array of persons as an input
+argument. It is used in the asynchronous operation to
+get or save a list of persons.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PersonArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Contact::PersonArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a list of persons is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Person">Person</a>[] persons);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">persons</span>: 
+ List of persons
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContactArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Contact::ContactArraySuccessCallback"></a><h3>2.22. ContactArraySuccessCallback</h3>
+<div class="brief">
+ The ContactArraySuccessCallback interface defines the success callback that is used for saving and retrieving
+a list of contacts.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContactArraySuccessCallback {
+    void onsuccess(<a href="#Contact">Contact</a>[] contacts);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The success callback that takes an array of contacts as an input
+argument. It is used in the asynchronous operation to
+get or save a list of contacts.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContactArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Contact::ContactArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a list of contacts is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Contact">Contact</a>[] contacts);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contacts</span>: 
+ List of contacts
+The Contacts that were successfully saved must have their identifiers set.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AddressBookArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookArraySuccessCallback"></a><h3>2.23. AddressBookArraySuccessCallback</h3>
+<div class="brief">
+ The AddressBookArraySuccessCallback interface defines the success callback that is called when retrieving a list of AddressBooks.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface AddressBookArraySuccessCallback {
+    void onsuccess(<a href="#AddressBook">AddressBook</a>[] addressbooks);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The success callback takes an array of AddressBooks as an input
+argument. It is used in the asynchronous operation to
+get address books.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AddressBookArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a list of address books is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#AddressBook">AddressBook</a>[] addressbooks);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addressbooks</span>: 
+ Address books that were successfully retrieved
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AddressBookChangeCallback">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookChangeCallback"></a><h3>2.24. AddressBookChangeCallback</h3>
+<div class="brief">
+ The AddressBookChangeCallback interface provides the methods to be called for address book
+change notifications.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface AddressBookChangeCallback {
+    void oncontactsadded(<a href="#Contact">Contact</a>[] contacts);
+
+    void oncontactsupdated(<a href="#Contact">Contact</a>[] contacts);
+
+    void oncontactsremoved(<a href="#ContactId">ContactId</a>[] contactIds);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface specifies a set of functions that will be invoked every time an address
+book change occurs (contact addition/update/deletion).
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AddressBookChangeCallback::oncontactsadded">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookChangeCallback::oncontactsadded"></a><code><b><span class="methodName">oncontactsadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when contacts are added to the address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontactsadded(<a href="#Contact">Contact</a>[] contacts);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contacts</span>: 
+ List of the added contacts
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="AddressBookChangeCallback::oncontactsupdated">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookChangeCallback::oncontactsupdated"></a><code><b><span class="methodName">oncontactsupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when contacts are updated in the address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontactsupdated(<a href="#Contact">Contact</a>[] contacts);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contacts</span>: 
+ List of the updated contacts
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="AddressBookChangeCallback::oncontactsremoved">
+<a class="backward-compatibility-anchor" name="::Contact::AddressBookChangeCallback::oncontactsremoved"></a><code><b><span class="methodName">oncontactsremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when contacts are deleted from the address book.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontactsremoved(<a href="#ContactId">ContactId</a>[] contactIds);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contactIds</span>: 
+ List of the deleted contacts' identifiers
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PersonsChangeCallback">
+<a class="backward-compatibility-anchor" name="::Contact::PersonsChangeCallback"></a><h3>2.25. PersonsChangeCallback</h3>
+<div class="brief">
+ The PersonsChangeCallback interface provides the methods to be called for change notifications.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface PersonsChangeCallback {
+    void onpersonsadded(<a href="#Person">Person</a>[] persons);
+
+    void onpersonsupdated(<a href="#Person">Person</a>[] persons);
+
+    void onpersonsremoved(<a href="#PersonId">PersonId</a>[] personIds);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This interface specifies a set of functions that will be invoked every time person
+list change occurs (person addition/update/deletion).
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PersonsChangeCallback::onpersonsadded">
+<a class="backward-compatibility-anchor" name="::Contact::PersonsChangeCallback::onpersonsadded"></a><code><b><span class="methodName">onpersonsadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when persons are added to the person list.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpersonsadded(<a href="#Person">Person</a>[] persons);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">persons</span>: 
+ List of the added persons
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PersonsChangeCallback::onpersonsupdated">
+<a class="backward-compatibility-anchor" name="::Contact::PersonsChangeCallback::onpersonsupdated"></a><code><b><span class="methodName">onpersonsupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when persons are updated in the person list.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpersonsupdated(<a href="#Person">Person</a>[] persons);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">persons</span>: 
+ List of the updated persons
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PersonsChangeCallback::onpersonsremoved">
+<a class="backward-compatibility-anchor" name="::Contact::PersonsChangeCallback::onpersonsremoved"></a><code><b><span class="methodName">onpersonsremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when persons are deleted from the person list.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpersonsremoved(<a href="#PersonId">PersonId</a>[] personIds);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">personIds</span>: 
+ List of the deleted persons' identifiers
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Contact {
+
+  typedef DOMString AddressBookId;
+
+  typedef DOMString ContactId;
+
+  typedef DOMString PersonId;
+
+  typedef DOMString ContactGroupId;
+
+  enum ContactTextFormat {"VCARD_30"};
+
+   enum ContactRelationshipType {"OTHER", "ASSISTANT", "BROTHER", "CHILD", "DOMESTIC_PARTNER",
+           "FATHER", "FRIEND", "MANAGER", "MOTHER", "PARENT", "PARTNER", "REFERRED_BY",
+           "RELATIVE", "SISTER", "SPOUSE", "CUSTOM"};
+
+   enum ContactInstantMessengerType {"OTHER", "GOOGLE", "WLM", "YAHOO", "FACEBOOK", "ICQ",
+           "AIM", "QQ", "JABBER", "SKYPE", "IRC", "CUSTOM"};
+
+  [NoInterfaceObject] interface ContactManagerObject {
+    readonly attribute <a href="#ContactManager">ContactManager</a> contact;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ContactManagerObject">ContactManagerObject</a>;
+
+  [NoInterfaceObject] interface ContactManager {
+
+    void getAddressBooks(<a href="#AddressBookArraySuccessCallback">AddressBookArraySuccessCallback</a> successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#AddressBook">AddressBook</a> getUnifiedAddressBook() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#AddressBook">AddressBook</a> getDefaultAddressBook() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addAddressBook(<a href="#AddressBook">AddressBook</a> addressBook) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAddressBook(<a href="#AddressBookId">AddressBookId</a> addressBookId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#AddressBook">AddressBook</a> getAddressBook(<a href="#AddressBookId">AddressBookId</a> addressBookId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Person">Person</a> get(<a href="#PersonId">PersonId</a> personId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#Person">Person</a> person) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Person">Person</a>[] persons,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#PersonId">PersonId</a> personId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#PersonId">PersonId</a>[] personIds,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#PersonArraySuccessCallback">PersonArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addChangeListener(<a href="#PersonsChangeCallback">PersonsChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(<a href="account.html#AccountId">AccountId</a> accountId, DOMString name)]
+  interface AddressBook {
+
+    readonly attribute <a href="#AddressBookId">AddressBookId</a>? id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute boolean readOnly;
+
+    readonly attribute <a href="account.html#AccountId">AccountId</a>? accountId;
+
+    <a href="#Contact">Contact</a> get(<a href="#ContactId">ContactId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#Contact">Contact</a> contact) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#Contact">Contact</a>[] contacts,
+                  optional <a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#Contact">Contact</a> contact) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Contact">Contact</a>[] contacts,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#ContactId">ContactId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#ContactId">ContactId</a>[] ids,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#ContactArraySuccessCallback">ContactArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addChangeListener(<a href="#AddressBookChangeCallback">AddressBookChangeCallback</a> successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ContactGroup">ContactGroup</a> getGroup(<a href="#ContactGroupId">ContactGroupId</a> groupId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addGroup(<a href="#ContactGroup">ContactGroup</a> group) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateGroup(<a href="#ContactGroup">ContactGroup</a> group) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeGroup(<a href="#ContactGroupId">ContactGroupId</a> groupId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ContactGroup">ContactGroup</a>[] getGroups() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface Person {
+    readonly attribute <a href="#PersonId">PersonId</a> id;
+
+    readonly attribute DOMString displayName;
+
+    readonly attribute long contactCount;
+
+    readonly attribute boolean hasPhoneNumber;
+
+    readonly attribute boolean hasEmail;
+
+    attribute boolean isFavorite;
+
+    attribute DOMString? photoURI;
+
+    attribute DOMString? ringtoneURI;
+
+    attribute <a href="#ContactId">ContactId</a> displayContactId;
+
+    void link(<a href="#PersonId">PersonId</a> personId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Person">Person</a> unlink(<a href="#ContactId">ContactId</a> contactId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  dictionary ContactInit {
+    <a href="#ContactName">ContactName</a> name;
+    <a href="#ContactAddress">ContactAddress</a>[] addresses;
+    DOMString photoURI;
+    <a href="#ContactPhoneNumber">ContactPhoneNumber</a>[] phoneNumbers;
+    <a href="#ContactEmailAddress">ContactEmailAddress</a>[] emails;
+    <a href="#ContactInstantMessenger">ContactInstantMessenger</a>[] messengers;
+    <a href="#ContactRelationship">ContactRelationship</a>[] relationships;
+    Date birthday;
+    <a href="#ContactAnniversary">ContactAnniversary</a>[] anniversaries;
+    <a href="#ContactOrganization">ContactOrganization</a>[] organizations;
+    DOMString[] notes;
+    <a href="#ContactWebSite">ContactWebSite</a>[] urls;
+    DOMString ringtoneURI;
+    DOMString messageAlertURI;
+    DOMString vibrationURI;
+    <a href="#ContactGroupId">ContactGroupId</a>[] groupIds;
+  };
+
+  [Constructor(optional <a href="#ContactInit">ContactInit</a>? ContactInitDict),
+   Constructor(DOMString stringRepresentation)]
+  interface Contact {
+    readonly attribute <a href="#ContactId">ContactId</a>? id;
+
+    readonly attribute <a href="#PersonId">PersonId</a>? personId;
+
+    readonly attribute <a href="#AddressBookId">AddressBookId</a>? addressBookId;
+
+    readonly attribute Date? lastUpdated;
+
+    readonly attribute boolean isFavorite;
+
+    attribute <a href="#ContactName">ContactName</a>? name setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactAddress">ContactAddress</a>[] addresses setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? photoURI setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactPhoneNumber">ContactPhoneNumber</a>[] phoneNumbers setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactEmailAddress">ContactEmailAddress</a>[] emails setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactInstantMessenger">ContactInstantMessenger</a>[] messengers;
+
+    attribute <a href="#ContactRelationship">ContactRelationship</a>[] relationships;
+
+    attribute Date? birthday setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactAnniversary">ContactAnniversary</a>[] anniversaries setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactOrganization">ContactOrganization</a>[] organizations setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] notes setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#ContactWebSite">ContactWebSite</a>[] urls setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? ringtoneURI setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString? messageAlertURI;
+
+    attribute DOMString? vibrationURI;
+
+    attribute <a href="#ContactGroupId">ContactGroupId</a>[] groupIds setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString convertToString(optional <a href="#ContactTextFormat">ContactTextFormat</a>? format) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Contact">Contact</a> clone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(<a href="#AddressBookId">AddressBookId</a> addressBookId, <a href="#ContactId">ContactId</a> contactId)]
+  interface ContactRef {
+    attribute <a href="#AddressBookId">AddressBookId</a> addressBookId;
+
+    attribute <a href="#ContactId">ContactId</a> contactId;
+  };
+
+  dictionary ContactNameInit {
+    DOMString prefix;
+    DOMString suffix;
+    DOMString firstName;
+    DOMString middleName;
+    DOMString lastName;
+    DOMString[] nicknames;
+    DOMString phoneticFirstName;
+    DOMString phoneticMiddleName;
+    DOMString phoneticLastName;
+  };
+
+  [Constructor(optional <a href="#ContactNameInit">ContactNameInit</a>? nameInitDict)]
+  interface ContactName {
+    attribute DOMString? prefix;
+
+    attribute DOMString? suffix;
+
+    attribute DOMString? firstName;
+
+    attribute DOMString? middleName;
+
+    attribute DOMString? lastName;
+
+    attribute DOMString[] nicknames;
+
+    attribute DOMString? phoneticFirstName;
+
+    attribute DOMString? phoneticMiddleName;
+
+    attribute DOMString? phoneticLastName;
+
+    readonly attribute DOMString? displayName;
+  };
+
+  dictionary ContactOrganizationInit {
+    DOMString name;
+    DOMString department;
+    DOMString title;
+    DOMString role;
+    DOMString logoURI;
+  };
+
+  [Constructor(optional <a href="#ContactOrganizationInit">ContactOrganizationInit</a>? orgInitDict)]
+  interface ContactOrganization {
+    attribute DOMString? name;
+
+    attribute DOMString? department;
+
+    attribute DOMString? title;
+
+    attribute DOMString? role;
+
+    attribute DOMString? logoURI;
+  };
+
+  [Constructor(DOMString url, optional DOMString type)]
+  interface ContactWebSite
+  {
+    attribute DOMString url;
+
+    attribute DOMString type;
+  };
+
+  [Constructor(Date date, optional DOMString? label)]
+  interface ContactAnniversary
+  {
+    attribute Date date;
+
+    attribute DOMString? label;
+  };
+
+  dictionary ContactAddressInit
+  {
+    DOMString country;
+    DOMString region;
+    DOMString city;
+    DOMString streetAddress;
+    DOMString additionalInformation;
+    DOMString postalCode;
+    boolean isDefault;
+    DOMString[] types;
+    DOMString label;
+  };
+
+  [Constructor(optional <a href="#ContactAddressInit">ContactAddressInit</a>? addressInitDict)]
+  interface ContactAddress
+  {
+    attribute DOMString? country;
+
+    attribute DOMString? region;
+
+    attribute DOMString? city;
+
+    attribute DOMString? streetAddress;
+
+    attribute DOMString? additionalInformation;
+
+    attribute DOMString? postalCode;
+
+    attribute boolean isDefault;
+
+    attribute DOMString[] types;
+
+    attribute DOMString? label;
+  };
+
+  [Constructor(DOMString number, optional DOMString[] types, optional boolean isDefault)]
+  interface ContactPhoneNumber
+  {
+    attribute DOMString number;
+
+    attribute boolean isDefault;
+
+    attribute DOMString[] types;
+
+    attribute DOMString? label;
+  };
+
+  [Constructor(DOMString email, optional DOMString[] types, optional boolean isDefault)]
+  interface ContactEmailAddress
+  {
+    attribute DOMString email;
+
+    attribute boolean isDefault;
+
+    attribute DOMString[] types;
+
+    attribute DOMString? label;
+  };
+
+  [Constructor(DOMString imAddress, optional <a href="#ContactInstantMessengerType">ContactInstantMessengerType</a>? type)]
+  interface ContactInstantMessenger
+  {
+    attribute DOMString imAddress;
+
+    attribute <a href="#ContactInstantMessengerType">ContactInstantMessengerType</a> type;
+
+    attribute DOMString? label;
+  };
+
+  [Constructor(DOMString name, optional DOMString? ringtoneURI, optional DOMString? photoURI)]
+  interface ContactGroup
+  {
+    readonly attribute <a href="#ContactGroupId">ContactGroupId</a>? id;
+
+    readonly attribute <a href="#AddressBookId">AddressBookId</a>? addressBookId;
+
+    attribute DOMString name;
+
+    attribute DOMString? ringtoneURI;
+
+    attribute DOMString? photoURI;
+
+    readonly attribute DOMString readOnly;
+  };
+
+  [Constructor(DOMString relativeName, optional <a href="#ContactRelationshipType">ContactRelationshipType</a>? type)]
+  interface ContactRelationship
+  {
+    attribute DOMString relativeName;
+
+    attribute <a href="#ContactRelationshipType">ContactRelationshipType</a> type;
+
+    attribute DOMString? label;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PersonArraySuccessCallback {
+    void onsuccess(<a href="#Person">Person</a>[] persons);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContactArraySuccessCallback {
+    void onsuccess(<a href="#Contact">Contact</a>[] contacts);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface AddressBookArraySuccessCallback {
+    void onsuccess(<a href="#AddressBook">AddressBook</a>[] addressbooks);
+  };
+
+  [Callback, NoInterfaceObject] interface AddressBookChangeCallback {
+    void oncontactsadded(<a href="#Contact">Contact</a>[] contacts);
+
+    void oncontactsupdated(<a href="#Contact">Contact</a>[] contacts);
+
+    void oncontactsremoved(<a href="#ContactId">ContactId</a>[] contactIds);
+  };
+
+  [Callback, NoInterfaceObject] interface PersonsChangeCallback {
+    void onpersonsadded(<a href="#Person">Person</a>[] persons);
+
+    void onpersonsupdated(<a href="#Person">Person</a>[] persons);
+
+    void onpersonsremoved(<a href="#PersonId">PersonId</a>[] personIds);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/content.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/content.html
new file mode 100644 (file)
index 0000000..cb83f70
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/content.html
@@ -0,0 +1,3278 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Content API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Content">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Content API</h1></div>
+<div class="brief">
+ The Content API provides functionality to discover content such as images, videos, music, or others.
+        </div>
+<div class="description">
+        <p>
+It is possible to search for specific content using filters.
+The API also supports setting the attributes of specific content.
+        </p>
+        <p>
+For more information on the Content features, see <a href="../../../../../org.tizen.guides/html/web/tizen/content/content_w.htm">Content Guide</a>.
+        </p>
+        <p>
+Playlist functionality has been added in Tizen 2.3.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#ContentDirectoryStorageType">ContentDirectoryStorageType</a>
+</li>
+<li>1.2. <a href="#ContentType">ContentType</a>
+</li>
+<li>1.3. <a href="#AudioContentLyricsType">AudioContentLyricsType</a>
+</li>
+<li>1.4. <a href="#ImageContentOrientation">ImageContentOrientation</a>
+</li>
+<li>1.5. <a href="#ContentId">ContentId</a>
+</li>
+<li>1.6. <a href="#ContentDirectoryId">ContentDirectoryId</a>
+</li>
+<li>1.7. <a href="#PlaylistId">PlaylistId</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ContentManagerObject">ContentManagerObject</a>
+</li>
+<li>2.2. <a href="#ContentManager">ContentManager</a>
+</li>
+<li>2.3. <a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a>
+</li>
+<li>2.4. <a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a>
+</li>
+<li>2.5. <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>
+</li>
+<li>2.6. <a href="#ContentChangeCallback">ContentChangeCallback</a>
+</li>
+<li>2.7. <a href="#ContentDirectory">ContentDirectory</a>
+</li>
+<li>2.8. <a href="#Content">Content</a>
+</li>
+<li>2.9. <a href="#VideoContent">VideoContent</a>
+</li>
+<li>2.10. <a href="#AudioContentLyrics">AudioContentLyrics</a>
+</li>
+<li>2.11. <a href="#AudioContent">AudioContent</a>
+</li>
+<li>2.12. <a href="#ImageContent">ImageContent</a>
+</li>
+<li>2.13. <a href="#PlaylistItem">PlaylistItem</a>
+</li>
+<li>2.14. <a href="#Playlist">Playlist</a>
+</li>
+<li>2.15. <a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a>
+</li>
+<li>2.16. <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a>
+</li>
+<li>2.17. <a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ContentManagerObject">ContentManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContentManager">ContentManager</a></td>
+<td>void <a href="#ContentManager::update">update</a> (<a href="#Content">Content</a> content)<br>
+    void <a href="#ContentManager::updateBatch">updateBatch</a> (<a href="#Content">Content</a>[] contents, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::getDirectories">getDirectories</a> (<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::find">find</a> (<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode, optional unsigned long? count, optional unsigned long? offset)<br>
+    void <a href="#ContentManager::scanFile">scanFile</a> (DOMString contentURI, optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::setChangeListener">setChangeListener</a> (<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback)<br>
+    void <a href="#ContentManager::unsetChangeListener">unsetChangeListener</a> ()<br>
+    void <a href="#ContentManager::getPlaylists">getPlaylists</a> (<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::createPlaylist">createPlaylist</a> (DOMString name, <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#Playlist">Playlist</a>? sourcePlaylist)<br>
+    void <a href="#ContentManager::removePlaylist">removePlaylist</a> (<a href="#PlaylistId">PlaylistId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a></td>
+<td>void <a href="#ContentArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Content">Content</a>[] contents)</td>
+</tr>
+<tr>
+<td><a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a></td>
+<td>void <a href="#ContentDirectoryArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ContentDirectory">ContentDirectory</a>[] directories)</td>
+</tr>
+<tr>
+<td><a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a></td>
+<td>void <a href="#ContentScanSuccessCallback::onsuccess">onsuccess</a> (DOMString contentURI)</td>
+</tr>
+<tr>
+<td><a href="#ContentChangeCallback">ContentChangeCallback</a></td>
+<td>void <a href="#ContentChangeCallback::oncontentadded">oncontentadded</a> (<a href="#Content">Content</a> content)<br>
+    void <a href="#ContentChangeCallback::oncontentupdated">oncontentupdated</a> (<a href="#Content">Content</a> content)<br>
+    void <a href="#ContentChangeCallback::oncontentremoved">oncontentremoved</a> (<a href="#ContentId">ContentId</a> id)</td>
+</tr>
+<tr>
+<td><a href="#ContentDirectory">ContentDirectory</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Content">Content</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#VideoContent">VideoContent</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AudioContentLyrics">AudioContentLyrics</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AudioContent">AudioContent</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ImageContent">ImageContent</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PlaylistItem">PlaylistItem</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Playlist">Playlist</a></td>
+<td>void <a href="#Playlist::add">add</a> (<a href="#Content">Content</a> item)<br>
+    void <a href="#Playlist::addBatch">addBatch</a> (<a href="#Content">Content</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Playlist::remove">remove</a> (<a href="#PlaylistItem">PlaylistItem</a> item)<br>
+    void <a href="#Playlist::removeBatch">removeBatch</a> (<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Playlist::get">get</a> (<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional long? count, optional long? offset)<br>
+    void <a href="#Playlist::setOrder">setOrder</a> (<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Playlist::move">move</a> (<a href="#PlaylistItem">PlaylistItem</a> item, long delta, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a></td>
+<td>void <a href="#PlaylistArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Playlist">Playlist</a>[] playlists)</td>
+</tr>
+<tr>
+<td><a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a></td>
+<td>void <a href="#PlaylistSuccessCallback::onsuccess">onsuccess</a> (<a href="#Playlist">Playlist</a> playlist)</td>
+</tr>
+<tr>
+<td><a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a></td>
+<td>void <a href="#PlaylistItemArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#PlaylistItem">PlaylistItem</a>[] items)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="ContentDirectoryStorageType">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryStorageType"></a><h3>1.1. ContentDirectoryStorageType</h3>
+<pre class="webidl prettyprint">  enum ContentDirectoryStorageType { "INTERNAL", "EXTERNAL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines whether a content directory is stored on internal or external storage (such as a removable memory card).
+          </p>
+         </div>
+</div>
+<div class="enum" id="ContentType">
+<a class="backward-compatibility-anchor" name="::Content::ContentType"></a><h3>1.2. ContentType</h3>
+<pre class="webidl prettyprint">  enum ContentType { "IMAGE", "VIDEO", "AUDIO", "OTHER" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines the type of content such as an image, video, audio, or any other.
+          </p>
+         </div>
+<p><span class="remark"> Remark : </span>
+ "OTHER" type is added since Tizen 2.1.
+          </p>
+</div>
+<div class="enum" id="AudioContentLyricsType">
+<a class="backward-compatibility-anchor" name="::Content::AudioContentLyricsType"></a><h3>1.3. AudioContentLyricsType</h3>
+<pre class="webidl prettyprint">  enum AudioContentLyricsType { "SYNCHRONIZED", "UNSYNCHRONIZED" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines whether the lyrics supplied with an audio file is time-synchronized.
+          </p>
+         </div>
+</div>
+<div class="enum" id="ImageContentOrientation">
+<a class="backward-compatibility-anchor" name="::Content::ImageContentOrientation"></a><h3>1.4. ImageContentOrientation</h3>
+<pre class="webidl prettyprint">  enum ImageContentOrientation { "NORMAL", "FLIP_HORIZONTAL", "ROTATE_180", "FLIP_VERTICAL", "TRANSPOSE", "ROTATE_90", "TRANSVERSE", "ROTATE_270" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines the orientation of an image.
+          </p>
+         </div>
+</div>
+<div class="typedef" id="ContentId">
+<a class="backward-compatibility-anchor" name="::Content::ContentId"></a><h3>1.5. ContentId</h3>
+<div class="brief">
+ Content identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ContentId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="typedef" id="ContentDirectoryId">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryId"></a><h3>1.6. ContentDirectoryId</h3>
+<div class="brief">
+ Content directory identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ContentDirectoryId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="typedef" id="PlaylistId">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistId"></a><h3>1.7. PlaylistId</h3>
+<div class="brief">
+ Playlist identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString PlaylistId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ContentManagerObject">
+<a class="backward-compatibility-anchor" name="::Content::ContentManagerObject"></a><h3>2.1. ContentManagerObject</h3>
+<div class="brief">
+ Defines what is instantiated by the Tizen object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContentManagerObject {
+    readonly attribute <a href="#ContentManager">ContentManager</a> content;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ContentManagerObject">ContentManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.content </em>object allows accessing the functionality of the Content module.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ContentManager">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager"></a><h3>2.2. ContentManager</h3>
+<div class="brief">
+ The ContentManager interface provides operations to retrieve and manipulate content.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContentManager {
+
+    void update(<a href="#Content">Content</a> content) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Content">Content</a>[] contents,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getDirectories(<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode,
+              optional unsigned long? count,
+              optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+    void scanFile(DOMString contentURI,
+                  optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setChangeListener(<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPlaylists(<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void createPlaylist(DOMString name,
+                        <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                        optional <a href="#Playlist">Playlist</a>? sourcePlaylist) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePlaylist(<a href="#PlaylistId">PlaylistId</a> id,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentManager::update">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates attributes of content in the content database synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#Content">Content</a> content);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+When an application has changed some attributes of the content, this method allows
+writing it back to the content database.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>editableAttributes</em> in the <em>Content</em> interface indicates
+the attributes that can be changed.
+This API does not support updating the metadata of a file.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">content</span>: 
+ The content to update.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters
+contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Assume the content is a Content object as a result of find method.
+ // Check the description is editable, and then set a description.
+ if (content.editableAttributes.indexOf("description") &gt;= 0) {
+     content.description = "Sample content";
+ }
+ tizen.content.update(content);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::updateBatch">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::updateBatch"></a><code><b><span class="methodName">updateBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates a batch of content attributes in the content database asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateBatch(<a href="#Content">Content</a>[] contents, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+When an application has changed any attributes in the array of content, this method allows writing them
+back to the content database.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError: In any other error case.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>editableAttributes</em> in the <em>Content</em> interface indicates
+the attributes that can be changed.
+This API does not support updating the metadata of a file.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contents</span>: 
+ Array of content to change.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when attributes have been changed.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example increases rating of an content by 1
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function successCB() {
+     console.log('Attributes set successfully');
+ }
+
+ // Assume the content is a Content object as a result of find method.
+ // Check the rating is editable, and then increase by 1.
+ if (content.editableAttributes.indexOf("rating") &gt;= 0) {
+     content.rating++;
+ }
+ tizen.content.updateBatch([content], successCB, errorCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::getDirectories">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::getDirectories"></a><code><b><span class="methodName">getDirectories</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a list of content directories.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getDirectories(<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method returns (via callback) a list of content directory objects. To obtain a list of contents
+in a specific directory, use the find() method with the directory ID.
+            </p>
+            <p>
+The errorCallback is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError: In any other error case.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when content directories have been retrieved successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves content directories in the storage.
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function printDirectory(directory, index, directories) {
+     console.log('directoryURI: ' + directory.directoryURI + ' Title: ' + directory.title);
+ }
+ function getDirectoriesCB(directories) {
+     directories.forEach(printDirectory);
+ }
+
+ tizen.content.getDirectories(getDirectoriesCB, errorCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::find">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::find"></a><code><b><span class="methodName">find</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds contents that satisfy the conditions set by a filter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void find(<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode, optional unsigned long? count, optional unsigned long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method allows searching based on a supplied filter. For more details on AbstractFilter, see the
+<a href="tizen.html#AbstractFilter">Tizen</a> module. The filter allows precise searching such
+as "return all songs by artist U2, ordered by name".
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError: In any other error case.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when content has been retrieved.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+          <li class="param">
+<span class="name">directoryId</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Directory ID that is used to select content to retrieve in a specified directory.
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Filter that is used to select content to retrieve.
+                </li>
+          <li class="param">
+<span class="name">sortMode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Used to determine the sort order in which the contents are returned.
+                </li>
+          <li class="param">
+<span class="name">count</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Maximum amount of content to return. If <em>count</em> is negative, InvalidValuesError is reported through the errorCallback.
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Offset of the result set. If <em>offset</em> is a negative number, InvalidValuesError is reported through the errorCallback.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree", by artist "U2", ordered by the name.
+ var count = 100;
+ var offset = 0;
+ var sortMode = new tizen.SortMode("name", "ASC");
+ var artistFilter = new tizen.AttributeFilter("artists", "EXACTLY", "U2");
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+ var filter = new tizen.CompositeFilter("INTERSECTION", [albumFilter, artistFilter]);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function printContent(content, index, contents) {
+     console.log('Name: ' + content.name + ' Title: ' + content.title + 'URL: ' + content.contentURI + 'MIME: ' + content.mimeType);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree by U2:');
+     contents.forEach(printContent);
+     // Increase the offset as much as the count and then find content again.
+     if (contents.length === count) {
+         offset += count;
+         tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+     }
+ }
+
+ tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::scanFile">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::scanFile"></a><code><b><span class="methodName">scanFile</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Scans a file to create or update content in the content database.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void scanFile(DOMString contentURI, optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+When an application creates or updates content, this method allows to scan it
+and then insert or update the content in the content database.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error detected asynchronously              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contentURI</span>: 
+ URI of content to scan.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when scanning has been completed.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters
+contain an invalid value (e.g. given <em>contentURI</em> is an empty string).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example scan 'tizen.jpg' in media directory
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function successCB(path) {
+     console.log('scanning is completed');
+ }
+
+ tizen.filesystem.resolve("images/tizen.jpg", function(imageFile) {
+     tizen.content.scanFile(imageFile.toURI(), successCB, errorCB);
+ });
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::setChangeListener">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::setChangeListener"></a><code><b><span class="methodName">setChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notifications of content changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setChangeListener(<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ A callback to be invoked for receiving a content change notification.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var listener= {
+    oncontentadded: function(content) {
+        console.log(content.contentURI + ' content is added');
+    },
+    oncontentupdated: function(content) {
+        console.log(content.contentURI + ' content is updated');
+    },
+    oncontentremoved: function(id) {
+        console.log(id + ' is removed');
+    }
+ };
+
+ // Registers to be notified when the content changes
+ tizen.content.setChangeListener(listener);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::unsetChangeListener">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::unsetChangeListener"></a><code><b><span class="methodName">unsetChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to unsubscribe from receiving notifications for content changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.content.unsetChangeListener();
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::getPlaylists">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::getPlaylists"></a><code><b><span class="methodName">getPlaylists</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets all playlists.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPlaylists(<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when retrieving a list of all playlists completes
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists;
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     var cur, i;
+     gPlaylists = playlists;
+     for(i = 0; i &lt; gPlaylists.length; ++i) {
+         cur = gPlaylists[i];
+         console.log("[" + i + "] name:" + cur.name + " num tracks:" +
+                 cur.numberOfTracks);
+     }
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::createPlaylist">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::createPlaylist"></a><code><b><span class="methodName">createPlaylist</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a new playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void createPlaylist(DOMString name, <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#Playlist">Playlist</a>? sourcePlaylist);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If <var>name</var> is empty or is same as the name of an existing playlist              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">name</span>: 
+ Name of the new playlist (case sensitive)
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked to provide a created playlist
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">sourcePlaylist</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Optional existing playlist to clone
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists;
+ var gPlaylist;
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err.message);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     var cur, i;
+     gPlaylists = playlists;
+     for(i = 0; i &lt; gPlaylists.length; ++i) {
+         cur = gPlaylists[i];
+         console.log("[" + i + "] name:" + cur.name + " num tracks:" +
+                 cur.numberOfTracks);
+     }
+ }
+
+ function findSuccess(contents) {
+     if (contents.length &gt; 0) {
+         gPlaylist.add(contents[0]);
+     }
+
+     tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ }
+
+ function findFail(err) {
+     console.log("find FAIL: " + err.message);
+ }
+
+ function createSuccess(playlist) {
+     console.log("create SUCCESS");
+
+     gPlaylist = playlist;
+     tizen.content.find(findSuccess, findFail, null,
+             new tizen.AttributeFilter("type", "EXACTLY", "AUDIO"));
+ }
+
+ function createFail(err) {
+     console.log("create FAIL: " + err.message);
+ }
+
+ tizen.content.createPlaylist("My new playlist", createSuccess, createFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::removePlaylist">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::removePlaylist"></a><code><b><span class="methodName">removePlaylist</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removePlaylist(<a href="#PlaylistId">PlaylistId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ Identifier of a playlist to remove
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when removing a playlist completes
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists;
+
+ function removePlaylistSuccess() {
+     console.log("removePlaylist SUCCESS");
+ }
+
+ function removePlaylistFail(err) {
+     console.log("removePlaylist FAIL: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     var cur, i;
+     gPlaylists = playlists;
+     for(i = 0; i &lt; gPlaylists.length; ++i) {
+         cur = gPlaylists[i];
+         console.log("[" + i + "] name:" + cur.name + " num tracks:" +
+                 cur.numberOfTracks);
+     }
+
+     if(gPlaylists.length &lt; 1) {
+         console.log("Please add at least 1 playlist");
+         return;
+     }
+
+     console.log("will remove playlist at index [0] name:"
+             + gPlaylists[0].name);
+
+     tizen.content.removePlaylist(gPlaylists[0].id, removePlaylistSuccess,
+             removePlaylistFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentArraySuccessCallback"></a><h3>2.3. ContentArraySuccessCallback</h3>
+<div class="brief">
+ The callback function used to return a list of content objects.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContentArraySuccessCallback {
+    void onsuccess(<a href="#Content">Content</a>[] contents);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::ContentArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the list of content is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Content">Content</a>[] contents);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contents</span>: 
+ The array of <em>Content </em>objects.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentDirectoryArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryArraySuccessCallback"></a><h3>2.4. ContentDirectoryArraySuccessCallback</h3>
+<div class="brief">
+ The callback function used to return a list of ContentDirectory objects.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContentDirectoryArraySuccessCallback {
+    void onsuccess(<a href="#ContentDirectory">ContentDirectory</a>[] directories);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentDirectoryArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the directory list is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ContentDirectory">ContentDirectory</a>[] directories);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">directories</span>: 
+ The array of <em>ContentDirectory </em>objects.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentScanSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentScanSuccessCallback"></a><h3>2.5. ContentScanSuccessCallback</h3>
+<div class="brief">
+ The callback function used to return content to scan.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContentScanSuccessCallback {
+    void onsuccess(DOMString contentURI);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentScanSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::ContentScanSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the scanning has been completed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString contentURI);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contentURI</span>: 
+ The URI of the <em>Content </em>objects.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentChangeCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback"></a><h3>2.6. ContentChangeCallback</h3>
+<div class="brief">
+ This interface specifies a set of methods that are invoked every time a content change occurs.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface ContentChangeCallback {
+    void oncontentadded(<a href="#Content">Content</a> content);
+
+    void oncontentupdated(<a href="#Content">Content</a> content);
+
+    void oncontentremoved(<a href="#ContentId">ContentId</a> id);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentChangeCallback::oncontentadded">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback::oncontentadded"></a><code><b><span class="methodName">oncontentadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when content is added.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontentadded(<a href="#Content">Content</a> content);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">content</span>: 
+ The content to add.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ContentChangeCallback::oncontentupdated">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback::oncontentupdated"></a><code><b><span class="methodName">oncontentupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when content is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontentupdated(<a href="#Content">Content</a> content);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">content</span>: 
+ The content to update.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ContentChangeCallback::oncontentremoved">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback::oncontentremoved"></a><code><b><span class="methodName">oncontentremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when content is removed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontentremoved(<a href="#ContentId">ContentId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of removed content.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentDirectory">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectory"></a><h3>2.7. ContentDirectory</h3>
+<div class="brief">
+ The ContentDirectory interface provides access to properties of a content directory.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContentDirectory {
+
+    readonly attribute <a href="#ContentDirectoryId">ContentDirectoryId</a> id;
+
+    readonly attribute DOMString directoryURI;
+
+    readonly attribute DOMString title;
+
+    readonly attribute <a href="#ContentDirectoryStorageType">ContentDirectoryStorageType</a> storageType;
+
+    readonly attribute Date? modifiedDate;
+
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContentDirectory::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentDirectoryId </span><span class="name">id</span></span><div class="brief">
+ The opaque content directory identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::directoryURI">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">directoryURI</span></span><div class="brief">
+ The directory path on the device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::title">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The directory name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::storageType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentDirectoryStorageType </span><span class="name">storageType</span></span><div class="brief">
+ The type of device storage.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::modifiedDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modifiedDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The last modified date for a directory.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="Content">
+<a class="backward-compatibility-anchor" name="::Content::Content"></a><h3>2.8. Content</h3>
+<div class="brief">
+ The Content interface provides access to the properties of a content item.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Content {
+
+    readonly attribute DOMString[] editableAttributes;
+
+    readonly attribute <a href="#ContentId">ContentId</a> id;
+
+    attribute DOMString name;
+
+    readonly attribute <a href="#ContentType">ContentType</a> type;
+
+    readonly attribute DOMString mimeType;
+
+    readonly attribute DOMString title;
+
+    readonly attribute DOMString contentURI;
+
+    readonly attribute DOMString[]? thumbnailURIs;
+
+    readonly attribute Date? releaseDate;
+
+    readonly attribute Date? modifiedDate;
+
+    readonly attribute unsigned long size;
+
+    attribute DOMString? description;
+
+    attribute unsigned long rating;
+
+    attribute boolean isFavorite;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Content::editableAttributes">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">editableAttributes</span></span><div class="brief">
+ The list of attributes that are editable to the local backend using the update() or updateBatch() method.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentId </span><span class="name">id</span></span><div class="brief">
+ The opaque content identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The content name. The initial value is the file name of the content.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="Content::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentType </span><span class="name">type</span></span><div class="brief">
+ The content type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::mimeType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">mimeType</span></span><div class="brief">
+ The content MIME type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::title">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The content title.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::contentURI">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">contentURI</span></span><div class="brief">
+ The URI to access the content.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::thumbnailURIs">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">thumbnailURIs</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The array of content thumbnail URIs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::releaseDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">releaseDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The date when content has been released publicly. If only the release year is known, then the month and date are set to January and 1st respectively.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::modifiedDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modifiedDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The last modified date for a content item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::size">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">size</span></span><div class="brief">
+ The file size of the content in bytes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::description">
+<span class="attrName"><span class="type">DOMString </span><span class="name">description</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The content description.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::rating">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">rating</span></span><div class="brief">
+ The content rating. This value can range from <var>0</var> to <var>10</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::isFavorite">
+<span class="attrName"><span class="type">boolean </span><span class="name">isFavorite</span></span><div class="brief">
+  Boolean value that indicates whether a content item is marked as a favorite.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="VideoContent">
+<a class="backward-compatibility-anchor" name="::Content::VideoContent"></a><h3>2.9. VideoContent</h3>
+<div class="brief">
+ The VideoContent interface extends a basic <em>Content </em>object with video-specific attributes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface VideoContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute unsigned long duration;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="VideoContent::geolocation">
+<span class="attrName"><span class="type">SimpleCoordinates </span><span class="name">geolocation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The geographical location where the video has been made.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::album">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">album</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The album name to which the video belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::artists">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">artists</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of artists who created the video.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::duration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">duration</span></span><div class="brief">
+ The video duration in milliseconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::width">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">width</span></span><div class="brief">
+ The width of a video in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::height">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">height</span></span><div class="brief">
+ The height of the video in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AudioContentLyrics">
+<a class="backward-compatibility-anchor" name="::Content::AudioContentLyrics"></a><h3>2.10. AudioContentLyrics</h3>
+<div class="brief">
+ The AudioContentLyrics interface provides lyrics for music.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface AudioContentLyrics {
+
+    readonly attribute <a href="#AudioContentLyricsType">AudioContentLyricsType</a> type;
+
+    readonly attribute unsigned long[] timestamps;
+
+    readonly attribute DOMString[] texts;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AudioContentLyrics::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AudioContentLyricsType </span><span class="name">type</span></span><div class="brief">
+ The type of lyrics, that is, whether they are synchronized with the music.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContentLyrics::timestamps">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long[]
+                      </span><span class="name">timestamps</span></span><div class="brief">
+ The array of timestamps in milliseconds for lyrics.
+            </div>
+<div class="description">
+            <p>
+If the lyrics are not synchronized (if there is no time information for the lyrics) the array is undefined.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContentLyrics::texts">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">texts</span></span><div class="brief">
+ The array of lyrics snippets.
+            </div>
+<div class="description">
+            <p>
+If the lyrics are not synchronized, the array has only one member with full lyrics.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AudioContent">
+<a class="backward-compatibility-anchor" name="::Content::AudioContent"></a><h3>2.11. AudioContent</h3>
+<div class="brief">
+ The AudioContent interface extends a basic <em>Content </em>object with audio-specific attributes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface AudioContent : <a href="#Content">Content</a> {
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? genres;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute DOMString[]? composers;
+
+    readonly attribute <a href="#AudioContentLyrics">AudioContentLyrics</a>? lyrics;
+
+    readonly attribute DOMString? copyright;
+
+    readonly attribute unsigned long bitrate;
+
+    readonly attribute unsigned short? trackNumber;
+
+    readonly attribute unsigned long duration;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AudioContent::album">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">album</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The album name to which the audio belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::genres">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">genres</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of genres to which the audio belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::artists">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">artists</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of artists who created the audio.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::composers">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">composers</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of composers for the music.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::lyrics">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AudioContentLyrics </span><span class="name">lyrics</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The lyrics of a song in an audio file.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::copyright">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">copyright</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The copyright information.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::bitrate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">bitrate</span></span><div class="brief">
+ The audio bitrate in bits per second. By default, this value is 0.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::trackNumber">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">trackNumber</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The track number if the audio belongs to an album.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::duration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">duration</span></span><div class="brief">
+ The audio duration in milliseconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ImageContent">
+<a class="backward-compatibility-anchor" name="::Content::ImageContent"></a><h3>2.12. ImageContent</h3>
+<div class="brief">
+ The ImageContent interface extends a basic <em>Content </em>object with image-specific attributes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ImageContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+    attribute <a href="#ImageContentOrientation">ImageContentOrientation</a> orientation;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ImageContent::geolocation">
+<span class="attrName"><span class="type">SimpleCoordinates </span><span class="name">geolocation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The geographical location where the image has been made.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ImageContent::width">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">width</span></span><div class="brief">
+ The width of an image in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ImageContent::height">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">height</span></span><div class="brief">
+ The height of an image in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ImageContent::orientation">
+<span class="attrName"><span class="type">ImageContentOrientation </span><span class="name">orientation</span></span><div class="brief">
+ The image orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="PlaylistItem">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistItem"></a><h3>2.13. PlaylistItem</h3>
+<div class="brief">
+ The PlaylistItem interface represents a playlist item.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface PlaylistItem {
+    readonly attribute <a href="#Content">Content</a> content;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="PlaylistItem::content">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Content </span><span class="name">content</span></span><div class="brief">
+ Content contained in this playlist item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="Playlist">
+<a class="backward-compatibility-anchor" name="::Content::Playlist"></a><h3>2.14. Playlist</h3>
+<div class="brief">
+ The Playlist interface represents a playlist.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface Playlist {
+    readonly attribute <a href="#PlaylistId">PlaylistId</a> id;
+
+    attribute DOMString name raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long numberOfTracks;
+
+    attribute DOMString? thumbnailURI raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#Content">Content</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#Content">Content</a>[] items,
+                  optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#PlaylistItem">PlaylistItem</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void get(<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback,
+             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+             optional long? count,
+             optional long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setOrder(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+            optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void move(<a href="#PlaylistItem">PlaylistItem</a> item,
+              long delta,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Playlist::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PlaylistId </span><span class="name">id</span></span><div class="brief">
+ Identifier of a playlist.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Playlist::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ Name of a playlist (case sensitive and unique).
+            </div>
+<div class="description">
+            <p>
+When <var>name</var> is set, the change is recorded in the database.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, when assigning an invalid value (e.g. playlist of the same name already exists).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to change this attribute.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="Playlist::numberOfTracks">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">numberOfTracks</span></span><div class="brief">
+ Number of playlist items in the playlist.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Playlist::thumbnailURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">thumbnailURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Thumbnail URI of a playlist.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>. <br>When <var>thumbnailURI</var> is set, the change is recorded in the database.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, when assigning an invalid value (e.g. if the URI does not start with "file:///").
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to change this attribute.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Playlist::add">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a content item to a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Content">Content</a> item);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+See code example for the <em>createPlaylist()</em> method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Content to add
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="Playlist::addBatch">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::addBatch"></a><code><b><span class="methodName">addBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds tracks to a playlist as a batch, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addBatch(<a href="#Content">Content</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of tracks (Content objects) to add
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when adding a list of content items to a playlist completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="Playlist::remove">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a track from a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#PlaylistItem">PlaylistItem</a> item);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Playlist item to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function get2Fail(err) {
+     console.log("get items (after remove) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist items:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 1) {
+        console.log("Please add at least 1 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original playlist:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    console.log("Will remove item at index [0] name:" + gItems[0].content.name);
+    gCurPlaylist.remove(gItems[0]);
+    gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::removeBatch">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::removeBatch"></a><code><b><span class="methodName">removeBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes tracks from a playlist as a batch, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeBatch(<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of tracks to remove
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when removing a list of content items from a playlist completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function get2Fail(err) {
+     console.log("get items (after remove batch) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist after remove batch:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function removeBatchSuccess() {
+     console.log("removeBatch success");
+     gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function removeBatchFail(err) {
+     console.log("removeBatch failed: " + err);
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 4) {
+        console.log("Please add at least 4 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original playlist:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    console.log("Will remove items at index [0](name:" + gItems[0].content.name
+            + ") and at index [2](name:" + gItems[2].content.name + ")");
+    gCurPlaylist.removeBatch([gItems[2], gItems[0]],
+            removeBatchSuccess, removeBatchFail);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::get">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets playlist items from a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void get(<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional long? count, optional long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If any of the input parameters contain an invalid value (e.g <em>count</em> or <em>offset</em> is a negative number)              </li>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked for a list of tracks in the playlist
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">count</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Number of playlist items to return <br>If the <var>count</var> is not passed, all playlist items are retrieved.
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Offset of the track from the beginning of the playlist <br>The default value is <em>0</em> <br>It means no offset.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function getSuccess(items) {
+     gItems = items;
+     console.log("Playlist items:");
+     for(var i = 0; i &lt; items.length ; ++i) {
+         console.log("[" + i + "]: name:" + items[i].name);
+     }
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     // To retrieves all playlist items of 'gCurPlaylist' playlist.
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::setOrder">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::setOrder"></a><code><b><span class="methodName">setOrder</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Changes the play order of all playlist items in the playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setOrder(<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: In case the item in the passed <em>items</em> array is not inside this playlist, or the <em>items</em> array does not contain all items from the playlist              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of playlist items to set in play order <br>This list must include all playlist items of this playlist <br>If not, InvalidValuesError is thrown.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when changing the positions of items in the playlist is successfully completed
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist, gExpectedOrder;
+
+ function get2Fail(err) {
+     console.log("get items (after set order) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist order after setOrder:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function setOrderSuccess() {
+     console.log("set items order SUCCESS");
+     gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function setOrderFail(err) {
+     console.log("set items order failed: " + err);
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 2) {
+        console.log("Please add at least 2 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original order:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    gExpectedOrder = gItems.slice(0);
+    gExpectedOrder.reverse();
+
+    console.log("New order:");
+    for(var i = 0; i &lt; gExpectedOrder.length ; ++i) {
+        console.log("[" + i + "]: name:" + gExpectedOrder[i].content.name);
+    }
+
+    gCurPlaylist.setOrder(gExpectedOrder, setOrderSuccess, setOrderFail);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::move">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::move"></a><code><b><span class="methodName">move</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Moves the specified item up or down a specified amount in the play order.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void move(<a href="#PlaylistItem">PlaylistItem</a> item, long delta, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If <var>current index + delta</var> is:
+            </p>
+            <ul>
+              <li>
+<var>&lt; 0</var> then the item is moved to the first position in the playlist              </li>
+              <li>
+<var>≥ number of tracks</var> then the item is moved to the last position in the playlist              </li>
+            </ul>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: In case the item in the passed <em>items</em> array is not inside this playlist or some item of this playlist is not included in <em>items</em>              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Playlist item to move
+                </li>
+          <li class="param">
+<span class="name">delta</span>: 
+ How many positions to move the item, negative value means move up, positive means move down
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the playlist item has successfully been moved
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function get2Fail(err) {
+     console.log("get items (after move item) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist order after move:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function moveSuccess() {
+     console.log("move item SUCCESS");
+     gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function moveFail(err) {
+     console.log("move item failed: " + err);
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 2) {
+        console.log("Please add at least 2 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original order:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    console.log("Will move item at index [1] (name: " +
+            gItems[1].content.name + ") up by one place (to [0])");
+
+    gCurPlaylist.move(gItems[1], -1, moveSuccess, moveFail);
+    gItems.unshift(gItems.splice(1, 1)[0]);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PlaylistArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistArraySuccessCallback"></a><h3>2.15. PlaylistArraySuccessCallback</h3>
+<div class="brief">
+ The PlaylistArraySuccessCallback interface specifies a success callback that is invoked when all existing playlists are retrieved successfully.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistArraySuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a>[] playlists);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+It is used in <em>tizen.content.getPlaylists()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PlaylistArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the <em>tizen.content.getPlaylists()</em> method completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Playlist">Playlist</a>[] playlists);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">playlists</span>: 
+ List of all playlists on a device
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PlaylistSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistSuccessCallback"></a><h3>2.16. PlaylistSuccessCallback</h3>
+<div class="brief">
+ The PlaylistSuccessCallback interface specifies a success callback that is invoked when a new playlist is successfully created.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistSuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a> playlist);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+It is used in <em>tizen.content.createPlaylist()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PlaylistSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the <em>tizen.content.createPlaylist()</em> method completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Playlist">Playlist</a> playlist);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">playlist</span>: 
+ Newly created playlist
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PlaylistItemArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistItemArraySuccessCallback"></a><h3>2.17. PlaylistItemArraySuccessCallback</h3>
+<div class="brief">
+ The PlaylistItemArraySuccessCallback interface specifies a success callback that is invoked when a list of playlist items are successfully retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistItemArraySuccessCallback {
+    void onsuccess(<a href="#PlaylistItem">PlaylistItem</a>[] items);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PlaylistItemArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistItemArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the <em>playlist.get()</em> method completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#PlaylistItem">PlaylistItem</a>[] items);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of playlist items
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Content {
+
+  enum ContentDirectoryStorageType { "INTERNAL", "EXTERNAL" };
+
+  enum ContentType { "IMAGE", "VIDEO", "AUDIO", "OTHER" };
+
+  enum AudioContentLyricsType { "SYNCHRONIZED", "UNSYNCHRONIZED" };
+
+  enum ImageContentOrientation { "NORMAL", "FLIP_HORIZONTAL", "ROTATE_180", "FLIP_VERTICAL", "TRANSPOSE", "ROTATE_90", "TRANSVERSE", "ROTATE_270" };
+
+  typedef DOMString ContentId;
+
+  typedef DOMString ContentDirectoryId;
+
+  typedef DOMString PlaylistId;
+
+  [NoInterfaceObject] interface ContentManagerObject {
+    readonly attribute <a href="#ContentManager">ContentManager</a> content;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ContentManagerObject">ContentManagerObject</a>;
+
+  [NoInterfaceObject] interface ContentManager {
+
+    void update(<a href="#Content">Content</a> content) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Content">Content</a>[] contents,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getDirectories(<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode,
+              optional unsigned long? count,
+              optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+    void scanFile(DOMString contentURI,
+                  optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setChangeListener(<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPlaylists(<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void createPlaylist(DOMString name,
+                        <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                        optional <a href="#Playlist">Playlist</a>? sourcePlaylist) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePlaylist(<a href="#PlaylistId">PlaylistId</a> id,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContentArraySuccessCallback {
+    void onsuccess(<a href="#Content">Content</a>[] contents);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContentDirectoryArraySuccessCallback {
+    void onsuccess(<a href="#ContentDirectory">ContentDirectory</a>[] directories);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContentScanSuccessCallback {
+    void onsuccess(DOMString contentURI);
+  };
+
+  [Callback, NoInterfaceObject] interface ContentChangeCallback {
+    void oncontentadded(<a href="#Content">Content</a> content);
+
+    void oncontentupdated(<a href="#Content">Content</a> content);
+
+    void oncontentremoved(<a href="#ContentId">ContentId</a> id);
+  };
+
+
+  [NoInterfaceObject] interface ContentDirectory {
+
+    readonly attribute <a href="#ContentDirectoryId">ContentDirectoryId</a> id;
+
+    readonly attribute DOMString directoryURI;
+
+    readonly attribute DOMString title;
+
+    readonly attribute <a href="#ContentDirectoryStorageType">ContentDirectoryStorageType</a> storageType;
+
+    readonly attribute Date? modifiedDate;
+
+   };
+
+  [NoInterfaceObject] interface Content {
+
+    readonly attribute DOMString[] editableAttributes;
+
+    readonly attribute <a href="#ContentId">ContentId</a> id;
+
+    attribute DOMString name;
+
+    readonly attribute <a href="#ContentType">ContentType</a> type;
+
+    readonly attribute DOMString mimeType;
+
+    readonly attribute DOMString title;
+
+    readonly attribute DOMString contentURI;
+
+    readonly attribute DOMString[]? thumbnailURIs;
+
+    readonly attribute Date? releaseDate;
+
+    readonly attribute Date? modifiedDate;
+
+    readonly attribute unsigned long size;
+
+    attribute DOMString? description;
+
+    attribute unsigned long rating;
+
+    attribute boolean isFavorite;
+  };
+
+  [NoInterfaceObject] interface VideoContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute unsigned long duration;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+  };
+
+
+  [NoInterfaceObject] interface AudioContentLyrics {
+
+    readonly attribute <a href="#AudioContentLyricsType">AudioContentLyricsType</a> type;
+
+    readonly attribute unsigned long[] timestamps;
+
+    readonly attribute DOMString[] texts;
+  };
+
+  [NoInterfaceObject] interface AudioContent : <a href="#Content">Content</a> {
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? genres;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute DOMString[]? composers;
+
+    readonly attribute <a href="#AudioContentLyrics">AudioContentLyrics</a>? lyrics;
+
+    readonly attribute DOMString? copyright;
+
+    readonly attribute unsigned long bitrate;
+
+    readonly attribute unsigned short? trackNumber;
+
+    readonly attribute unsigned long duration;
+
+  };
+
+  [NoInterfaceObject] interface ImageContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+    attribute <a href="#ImageContentOrientation">ImageContentOrientation</a> orientation;
+  };
+
+  [NoInterfaceObject]
+  interface PlaylistItem {
+    readonly attribute <a href="#Content">Content</a> content;
+  };
+
+  [NoInterfaceObject]
+  interface Playlist {
+    readonly attribute <a href="#PlaylistId">PlaylistId</a> id;
+
+    attribute DOMString name raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long numberOfTracks;
+
+    attribute DOMString? thumbnailURI raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#Content">Content</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#Content">Content</a>[] items,
+                  optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#PlaylistItem">PlaylistItem</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void get(<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback,
+             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+             optional long? count,
+             optional long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setOrder(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+            optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void move(<a href="#PlaylistItem">PlaylistItem</a> item,
+              long delta,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistArraySuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a>[] playlists);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistSuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a> playlist);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistItemArraySuccessCallback {
+    void onsuccess(<a href="#PlaylistItem">PlaylistItem</a>[] items);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html
new file mode 100644 (file)
index 0000000..ddbd15b
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html
@@ -0,0 +1,1477 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>DataControl API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::DataControl">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>DataControl API</h1></div>
+<div class="brief">
+ This specification defines a DataControl API for applications.
+        </div>
+<div class="description">
+        <p>
+The DataControl functionality provides a way to access specific data that is exported by other applications.
+        </p>
+        <p>
+Please read the <a href="../../../../../org.tizen.guides/html/web/tizen/application/data_w.htm">Data Control Guide</a> to know how to share own application data with other applications.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#DataType">DataType</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#DataControlManagerObject">DataControlManagerObject</a>
+</li>
+<li>2.2. <a href="#DataControlManager">DataControlManager</a>
+</li>
+<li>2.3. <a href="#DataControlConsumerObject">DataControlConsumerObject</a>
+</li>
+<li>2.4. <a href="#SQLDataControlConsumer">SQLDataControlConsumer</a>
+</li>
+<li>2.5. <a href="#MappedDataControlConsumer">MappedDataControlConsumer</a>
+</li>
+<li>2.6. <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>
+</li>
+<li>2.7. <a href="#DataControlErrorCallback">DataControlErrorCallback</a>
+</li>
+<li>2.8. <a href="#DataControlInsertSuccessCallback">DataControlInsertSuccessCallback</a>
+</li>
+<li>2.9. <a href="#DataControlSelectSuccessCallback">DataControlSelectSuccessCallback</a>
+</li>
+<li>2.10. <a href="#DataControlGetValueSuccessCallback">DataControlGetValueSuccessCallback</a>
+</li>
+<li>2.11. <a href="#RowData">RowData</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#DataControlManagerObject">DataControlManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#DataControlManager">DataControlManager</a></td>
+<td>
+<a href="#DataControlConsumerObject">DataControlConsumerObject</a> <a href="#DataControlManager::getDataControlConsumer">getDataControlConsumer</a> (DOMString providerId, DOMString dataId, <a href="#DataType">DataType</a> type)</td>
+</tr>
+<tr>
+<td><a href="#DataControlConsumerObject">DataControlConsumerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SQLDataControlConsumer">SQLDataControlConsumer</a></td>
+<td>void <a href="#SQLDataControlConsumer::insert">insert</a> (unsigned long reqId, <a href="#RowData">RowData</a> insertionData, optional <a href="#DataControlInsertSuccessCallback">DataControlInsertSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)<br>
+    void <a href="#SQLDataControlConsumer::update">update</a> (unsigned long reqId, <a href="#RowData">RowData</a> updateData, DOMString where, optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)<br>
+    void <a href="#SQLDataControlConsumer::remove">remove</a> (unsigned long reqId, DOMString where, optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)<br>
+    void <a href="#SQLDataControlConsumer::select">select</a> (unsigned long reqId, DOMString[] columns, DOMString where, <a href="#DataControlSelectSuccessCallback">DataControlSelectSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback, optional unsigned long? page, optional unsigned long? maxNumberPerPage)</td>
+</tr>
+<tr>
+<td><a href="#MappedDataControlConsumer">MappedDataControlConsumer</a></td>
+<td>void <a href="#MappedDataControlConsumer::addValue">addValue</a> (unsigned long reqId, DOMString key, DOMString value, optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)<br>
+    void <a href="#MappedDataControlConsumer::removeValue">removeValue</a> (unsigned long reqId, DOMString key, DOMString value, <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)<br>
+    void <a href="#MappedDataControlConsumer::getValue">getValue</a> (unsigned long reqId, DOMString key, <a href="#DataControlGetValueSuccessCallback">DataControlGetValueSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)<br>
+    void <a href="#MappedDataControlConsumer::updateValue">updateValue</a> (unsigned long reqId, DOMString key, DOMString oldValue, DOMString newValue, <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#DataControlSuccessCallback">DataControlSuccessCallback</a></td>
+<td>void <a href="#DataControlSuccessCallback::onsuccess">onsuccess</a> (unsigned long reqId)</td>
+</tr>
+<tr>
+<td><a href="#DataControlErrorCallback">DataControlErrorCallback</a></td>
+<td>void <a href="#DataControlErrorCallback::onerror">onerror</a> (unsigned long reqId, <a href="tizen.html#WebAPIError">WebAPIError</a> error)</td>
+</tr>
+<tr>
+<td><a href="#DataControlInsertSuccessCallback">DataControlInsertSuccessCallback</a></td>
+<td>void <a href="#DataControlInsertSuccessCallback::onsuccess">onsuccess</a> (unsigned long reqId, long insertRowId)</td>
+</tr>
+<tr>
+<td><a href="#DataControlSelectSuccessCallback">DataControlSelectSuccessCallback</a></td>
+<td>void <a href="#DataControlSelectSuccessCallback::onsuccess">onsuccess</a> (<a href="#RowData">RowData</a>[] rows, unsigned long reqId)</td>
+</tr>
+<tr>
+<td><a href="#DataControlGetValueSuccessCallback">DataControlGetValueSuccessCallback</a></td>
+<td>void <a href="#DataControlGetValueSuccessCallback::onsuccess">onsuccess</a> (DOMString[] values, unsigned long reqid)</td>
+</tr>
+<tr>
+<td><a href="#RowData">RowData</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="DataType">
+<a class="backward-compatibility-anchor" name="::DataControl::DataType"></a><h3>1.1. DataType</h3>
+<div class="brief">
+ Data types.
+          </div>
+<pre class="webidl prettyprint">    enum DataType { "MAP", "SQL"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="DataControlManagerObject">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlManagerObject"></a><h3>2.1. DataControlManagerObject</h3>
+<div class="brief">
+ Defines what is instantiated in the <em>Tizen</em> object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface DataControlManagerObject {
+        readonly attribute <a href="#DataControlManager">DataControlManager</a> datacontrol;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DataControlManagerObject">DataControlManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.datacontrol</em> object allows access to the
+DataControl API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="DataControlManager">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlManager"></a><h3>2.2. DataControlManager</h3>
+<div class="brief">
+ This interface provides access to the <em>DataControlManager </em>object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface DataControlManager {
+        <a href="#DataControlConsumerObject">DataControlConsumerObject</a> getDataControlConsumer(DOMString providerId, DOMString dataId, <a href="#DataType">DataType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataControlManager::getDataControlConsumer">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlManager::getDataControlConsumer"></a><code><b><span class="methodName">getDataControlConsumer</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets <em>DataControlConsumerObject</em> with a given DataType.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#DataControlConsumerObject">DataControlConsumerObject</a> getDataControlConsumer(DOMString providerId, DOMString dataId, <a href="#DataType">DataType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">providerId</span>: 
+ A provider ID to use, which should be shared between the DataControl provider and DataControl consumer.
+                </li>
+          <li class="param">
+<span class="name">dataId</span>: 
+ A string for identifying specific data.
+                </li>
+          <li class="param">
+<span class="name">type</span>: 
+ The DataType to use.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DataControlConsumerObject The local <em>DataControlConsumerObject</em>.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> //The data provider, a native application, should be pre-installed and launched.
+ //The same provider ID should be defined for the use of this API between a native application(provider) and a web application(consumer).
+ //In this example, the DictionaryDataControlProvider native sample application is used as a data control provider.
+
+ //Gets SQL type DataControlConsumerObject
+ try {
+     var globalSQLConsumer = tizen.datacontrol.getDataControlConsumer(
+     "http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "SQL");
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ // Gets MAP type DataControlConsumerObject
+ try {
+      globalMappedConsumer = tizen.datacontrol.getDataControlConsumer(
+      "http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "MAP");
+ } catch (err) {
+      console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DataControlConsumerObject">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlConsumerObject"></a><h3>2.3. DataControlConsumerObject</h3>
+<div class="brief">
+ This interface provides common attributes for other derived DataControlConsumerObject.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface DataControlConsumerObject {
+        readonly attribute <a href="#DataType">DataType</a> type;
+        readonly attribute DOMString providerId;
+        readonly attribute DOMString dataId;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="DataControlConsumerObject::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DataType </span><span class="name">type</span></span><div class="brief">
+ An attribute to store the DataType.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="DataControlConsumerObject::providerId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">providerId</span></span><div class="brief">
+ An attribute to hold a provider identifier of the application with whom it shares the DataControl.
+This attribute should be known to users who want to interact with the application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="DataControlConsumerObject::dataId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">dataId</span></span><div class="brief">
+ The dataId identifies specific data, usually a database table to process(insert, delete, update).
+The string consists of one or more components, separated by a slash('/').
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SQLDataControlConsumer">
+<a class="backward-compatibility-anchor" name="::DataControl::SQLDataControlConsumer"></a><h3>2.4. SQLDataControlConsumer</h3>
+<div class="brief">
+ This interface defines SQL data type operators.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SQLDataControlConsumer : <a href="#DataControlConsumerObject">DataControlConsumerObject</a> {
+        void insert(unsigned long reqId, <a href="#RowData">RowData</a> insertionData,
+                    optional <a href="#DataControlInsertSuccessCallback">DataControlInsertSuccessCallback</a>? successCallback,
+                    optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void update(unsigned long reqId, <a href="#RowData">RowData</a> updateData, DOMString where,
+                    optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback,
+                    optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(unsigned long reqId, DOMString where,
+                    optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback,
+                    optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void select(unsigned long reqId, DOMString[] columns, DOMString where,
+                    <a href="#DataControlSelectSuccessCallback">DataControlSelectSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback,
+                    optional unsigned long? page, optional unsigned long? maxNumberPerPage) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SQLDataControlConsumer::insert">
+<a class="backward-compatibility-anchor" name="::DataControl::SQLDataControlConsumer::insert"></a><code><b><span class="methodName">insert</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Inserts new rows into a table owned by an SQL-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void insert(unsigned long reqId, <a href="#RowData">RowData</a> insertionData, optional <a href="#DataControlInsertSuccessCallback">DataControlInsertSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">insertionData</span>: 
+ The data on columns and values to insert.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform or if an SQL query with invalid parameters has been made.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successcb(id, insertRowId)
+ {
+     console.log("ok : reqid " + id);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     var rowData = {
+         columns : ["WORD", "WORD_DESC"] ,
+         values  : ["'tizen1'", "'tizen2'"]
+     };
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalSQLConsumer.insert(globalReqId, rowData, successcb, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SQLDataControlConsumer::update">
+<a class="backward-compatibility-anchor" name="::DataControl::SQLDataControlConsumer::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates values of a table owned by an SQL-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(unsigned long reqId, <a href="#RowData">RowData</a> updateData, DOMString where, optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">updateData</span>: 
+ The data on columns and values to update.
+                </li>
+          <li class="param">
+<span class="name">where</span>: 
+ A filter to select desired rows to update. <br>It is an SQL <var>WHERE</var> clause excluding the <var>WHERE</var> itself such as <var>column1 = 'stringValue' AND column2 = numericValue</var>.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform or if an SQL query with invalid parameters has been made.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successcb(id)
+ {
+     console.log("ok : reqid " + id);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     var rowData = {
+         columns : ["WORD", "WORD_DESC"] ,
+         values  : ["'tizen1'", "'Web apps platform!'"]
+     };
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalSQLConsumer.update(globalReqId, rowData, "WORD='tizen1'", successcb, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SQLDataControlConsumer::remove">
+<a class="backward-compatibility-anchor" name="::DataControl::SQLDataControlConsumer::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Delete rows from a table that is owned by an SQL-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(unsigned long reqId, DOMString where, optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">where</span>: 
+ A filter to select desired rows to remove. <br>It is an SQL <var>WHERE</var> clause excluding the <var>WHERE</var> itself such as <var>column1 = 'stringValue' AND column2 = numericValue</var>.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform or if an SQL query with invalid parameters has been made.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successcb(id)
+ {
+     console.log("ok : reqid " + id);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalSQLConsumer.remove(globalReqId, "WORD='tizen1'", successcb, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SQLDataControlConsumer::select">
+<a class="backward-compatibility-anchor" name="::DataControl::SQLDataControlConsumer::select"></a><code><b><span class="methodName">select</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Selects the specified columns to be queried. The result set of the specified columns is retrieved from a table owned by an SQL-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void select(unsigned long reqId, DOMString[] columns, DOMString where, <a href="#DataControlSelectSuccessCallback">DataControlSelectSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback, optional unsigned long? page, optional unsigned long? maxNumberPerPage);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">columns</span>: 
+ The columns to select.
+                </li>
+          <li class="param">
+<span class="name">where</span>: 
+ A filter to select desired rows. <br>It is an SQL <var>WHERE</var> clause excluding the <var>WHERE</var> itself such as <var>column1 = 'stringValue' AND column2 = numericValue</var>.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+          <li class="param">
+<span class="name">page</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The page number of the result set. <br>It starts from <var>1</var>. If the number is out of page, DataControlSelectSuccessCallback is invoked with no result data.
+                </li>
+          <li class="param">
+<span class="name">maxNumberPerPage</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The maximum number of rows on a page.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform or if an SQL query with invalid parameters has been made.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function getValueSuccessCB(result, id)
+ {
+     var length = result.length;
+     for (var i = 0; i &lt; length; i++)
+     {
+         var j = 0;
+         for (j = 0; j &lt; result[i].columns.length; j++)
+         {
+             console.log("column: " + result[i].columns[j] + ", value: " + result[i].values[j]);
+         }
+     }
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     var array = ["WORD", "WORD_DESC" ];
+     globalReqId++;
+     globalSQLConsumer.select(globalReqId, array, "WORD='tizen1'", getValueSuccessCB, errorcb);
+ }
+ catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MappedDataControlConsumer">
+<a class="backward-compatibility-anchor" name="::DataControl::MappedDataControlConsumer"></a><h3>2.5. MappedDataControlConsumer</h3>
+<div class="brief">
+ This interface defines MAP data type operators.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MappedDataControlConsumer : <a href="#DataControlConsumerObject">DataControlConsumerObject</a> {
+        void addValue(unsigned long reqId, DOMString key, DOMString value,
+                     optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback,
+                     optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+         void removeValue(unsigned long reqId, DOMString key, DOMString value,
+                          <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback,
+                          optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+         void getValue(unsigned long reqId, DOMString key,
+                       <a href="#DataControlGetValueSuccessCallback">DataControlGetValueSuccessCallback</a> successCallback,
+                       optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+         void updateValue(unsigned long reqId, DOMString key, DOMString oldValue, DOMString newValue,
+                          <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback,
+                          optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MappedDataControlConsumer::addValue">
+<a class="backward-compatibility-anchor" name="::DataControl::MappedDataControlConsumer::addValue"></a><code><b><span class="methodName">addValue</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds the value associated with the specified key to a key-values map owned by a MAP-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addValue(unsigned long reqId, DOMString key, DOMString value, optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">key</span>: 
+ The key to search mapped data.
+                </li>
+          <li class="param">
+<span class="name">value</span>: 
+ The value to add into a values array mapped by the key.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successcb(id)
+ {
+     console.log("ok : reqid " + id);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", successcb, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MappedDataControlConsumer::removeValue">
+<a class="backward-compatibility-anchor" name="::DataControl::MappedDataControlConsumer::removeValue"></a><code><b><span class="methodName">removeValue</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes the value associated with the specified key from a key-values map owned by a MAP-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeValue(unsigned long reqId, DOMString key, DOMString value, <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation. <br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">key</span>: 
+ The key to search mapped data.
+                </li>
+          <li class="param">
+<span class="name">value</span>: 
+ The value to remove from a values array mapped by the key.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the key cannot be found.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successcb(id)
+ {
+     console.log("ok : reqid " + id);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalMappedConsumer.removeValue(globalReqId, "tizen", "Foo", successcb, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MappedDataControlConsumer::getValue">
+<a class="backward-compatibility-anchor" name="::DataControl::MappedDataControlConsumer::getValue"></a><code><b><span class="methodName">getValue</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the value associated with the specified key, from a key-values map owned by a MAP-type data control provider.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getValue(unsigned long reqId, DOMString key, <a href="#DataControlGetValueSuccessCallback">DataControlGetValueSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">key</span>: 
+ The key to search mapped data.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the key cannot be found.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function getValueSuccessCB(result, id)
+ {
+     console.log(result.length + ":" + result[0]);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalMappedConsumer.getValue(globalReqId, "tizen", getValueSuccessCB, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MappedDataControlConsumer::updateValue">
+<a class="backward-compatibility-anchor" name="::DataControl::MappedDataControlConsumer::updateValue"></a><code><b><span class="methodName">updateValue</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the value associated with the specified key to a new value.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateValue(unsigned long reqId, DOMString key, DOMString oldValue, DOMString newValue, <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datacontrol.consumer
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So a developer should increase the <em>reqId </em>value to ensure it is unique for each method.
+                </li>
+          <li class="param">
+<span class="name">key</span>: 
+ The key to search mapped data.
+                </li>
+          <li class="param">
+<span class="name">oldValue</span>: 
+ The value to update in a values array mapped by the key.
+                </li>
+          <li class="param">
+<span class="name">newValue</span>: 
+ The new value to replace in a values array mapped by the key.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to invoke when the asynchronous call completes successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the parameter type is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the passed parameter is not available on the data provider side or platform.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if a DB operation has failed.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the key cannot be found.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successcb(id)
+ {
+     console.log("ok : reqid " + id);
+ }
+
+ function errorcb(id, error)
+ {
+     console.log("error id : " + id + ", error msg : " + error.message);
+ }
+
+ try {
+     // Defines globalReqId before
+     // Increases globalReqId for uniqueness
+     globalReqId++;
+     globalMappedConsumer.updateValue(globalReqId, "tizen", "Foo", "Bar", successcb, errorcb);
+ } catch (err) {
+     console.log (err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DataControlSuccessCallback">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlSuccessCallback"></a><h3>2.6. DataControlSuccessCallback</h3>
+<div class="brief">
+ This interface provides a SuccessCallback for DataControlConsumerObject.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlSuccessCallback {
+        void onsuccess(unsigned long reqId);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataControlSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on success.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(unsigned long reqId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier of the successful operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DataControlErrorCallback">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlErrorCallback"></a><h3>2.7. DataControlErrorCallback</h3>
+<div class="brief">
+ This interface provides an ErrorCallback for DataControlConsumerObject.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlErrorCallback {
+        void onerror(unsigned long reqId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataControlErrorCallback::onerror">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlErrorCallback::onerror"></a><code><b><span class="methodName">onerror</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on error.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onerror(unsigned long reqId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier of the failed operation.
+                </li>
+          <li class="param">
+<span class="name">error</span>: 
+ An error message.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DataControlInsertSuccessCallback">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlInsertSuccessCallback"></a><h3>2.8. DataControlInsertSuccessCallback</h3>
+<div class="brief">
+ This interface provides a SuccessCallback for SQLDataControlConsumer.insert().
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlInsertSuccessCallback {
+        void onsuccess(unsigned long reqId, long insertRowId);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataControlInsertSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlInsertSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on success.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(unsigned long reqId, long insertRowId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So it is recommended to increase the <em>reqId</em> value every time to guarantee uniqueness.
+                </li>
+          <li class="param">
+<span class="name">insertRowId</span>: 
+ The inserted row ID set by the data control provider if the specified providerResult is <var>true</var>, else <var>-1</var>.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DataControlSelectSuccessCallback">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlSelectSuccessCallback"></a><h3>2.9. DataControlSelectSuccessCallback</h3>
+<div class="brief">
+ This interface provides a SuccessCallback for SQLDataControlConsumer.select().
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlSelectSuccessCallback {
+        void onsuccess(<a href="#RowData">RowData</a>[] rows, unsigned long reqId);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataControlSelectSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlSelectSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on success.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#RowData">RowData</a>[] rows, unsigned long reqId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">rows</span>: 
+ Rows of SQL selection results from another application.<br>The array operation of rows would be different from general JavaScript array behavior depending on platform implementation. For example, Array.isArray(rows) returns <em>false</em>.
+                </li>
+          <li class="param">
+<span class="name">reqId</span>: 
+ A unique identifier for the current operation.<br>So it is recommended to increase the <em>reqId</em> value every time to guarantee uniqueness.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DataControlGetValueSuccessCallback">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlGetValueSuccessCallback"></a><h3>2.10. DataControlGetValueSuccessCallback</h3>
+<div class="brief">
+ This interface provides a SuccessCallback for MapDataControlConsumer.getValue().
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlGetValueSuccessCallback {
+        void onsuccess(DOMString[] values, unsigned long reqid);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataControlGetValueSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::DataControl::DataControlGetValueSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on success.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString[] values, unsigned long reqid);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">values</span>: 
+ A list of values assigned to the requested key.
+                </li>
+          <li class="param">
+<span class="name">reqid</span>: 
+ A unique identifier of the successful operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="RowData">
+<a class="backward-compatibility-anchor" name="::DataControl::RowData"></a><h3>2.11. RowData</h3>
+<div class="brief">
+ The dictionary represents RowData holding 1 row of SQL selection results from another application.
+          </div>
+<pre class="webidl prettyprint">    dictionary RowData {
+        DOMString[] columns;
+        DOMString[] values;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="RowData::columns"><span class="attrName">DOMString[] columns</span></dt>
+<dd>
+<div class="brief">
+ An attribute to hold column names to select, update, and insert.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</dd>
+<dt class="member" id="RowData::values"><span class="attrName">DOMString[] values</span></dt>
+<dd>
+<div class="brief">
+ An attribute to hold values of columns to select, update, and insert.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module DataControl {
+    enum DataType { "MAP", "SQL"};
+
+    [NoInterfaceObject] interface DataControlManagerObject {
+        readonly attribute <a href="#DataControlManager">DataControlManager</a> datacontrol;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DataControlManagerObject">DataControlManagerObject</a>;
+
+    [NoInterfaceObject] interface DataControlManager {
+        <a href="#DataControlConsumerObject">DataControlConsumerObject</a> getDataControlConsumer(DOMString providerId, DOMString dataId, <a href="#DataType">DataType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+
+    [NoInterfaceObject] interface DataControlConsumerObject {
+        readonly attribute <a href="#DataType">DataType</a> type;
+        readonly attribute DOMString providerId;
+        readonly attribute DOMString dataId;
+    };
+
+    [NoInterfaceObject] interface SQLDataControlConsumer : <a href="#DataControlConsumerObject">DataControlConsumerObject</a> {
+        void insert(unsigned long reqId, <a href="#RowData">RowData</a> insertionData,
+                    optional <a href="#DataControlInsertSuccessCallback">DataControlInsertSuccessCallback</a>? successCallback,
+                    optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void update(unsigned long reqId, <a href="#RowData">RowData</a> updateData, DOMString where,
+                    optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback,
+                    optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(unsigned long reqId, DOMString where,
+                    optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback,
+                    optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void select(unsigned long reqId, DOMString[] columns, DOMString where,
+                    <a href="#DataControlSelectSuccessCallback">DataControlSelectSuccessCallback</a> successCallback, optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback,
+                    optional unsigned long? page, optional unsigned long? maxNumberPerPage) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface MappedDataControlConsumer : <a href="#DataControlConsumerObject">DataControlConsumerObject</a> {
+        void addValue(unsigned long reqId, DOMString key, DOMString value,
+                     optional <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a>? successCallback,
+                     optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+         void removeValue(unsigned long reqId, DOMString key, DOMString value,
+                          <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback,
+                          optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+         void getValue(unsigned long reqId, DOMString key,
+                       <a href="#DataControlGetValueSuccessCallback">DataControlGetValueSuccessCallback</a> successCallback,
+                       optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+         void updateValue(unsigned long reqId, DOMString key, DOMString oldValue, DOMString newValue,
+                          <a href="#DataControlSuccessCallback">DataControlSuccessCallback</a> successCallback,
+                          optional <a href="#DataControlErrorCallback">DataControlErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlSuccessCallback {
+        void onsuccess(unsigned long reqId);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlErrorCallback {
+        void onerror(unsigned long reqId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlInsertSuccessCallback {
+        void onsuccess(unsigned long reqId, long insertRowId);
+    };
+
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlSelectSuccessCallback {
+        void onsuccess(<a href="#RowData">RowData</a>[] rows, unsigned long reqId);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface DataControlGetValueSuccessCallback {
+        void onsuccess(DOMString[] values, unsigned long reqid);
+    };
+
+
+    dictionary RowData {
+        DOMString[] columns;
+        DOMString[] values;
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html
new file mode 100644 (file)
index 0000000..56f7764
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html
@@ -0,0 +1,1598 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>DataSynchronization API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::DataSynchronization">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>DataSynchronization API</h1></div>
+<div class="brief">
+ This API provides methods to synchronize contact and event data to the server using the OMA DS 1.2 protocol.
+To know the details of this specification, visit <a href="http://openmobilealliance.org" target="_blank">OMA web page</a>. And for more information on the DataSync features, see <a href="../../../../../org.tizen.guides/html/web/tizen/social/data_sync_w.htm">Data Synchronization Guide</a>.
+        </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SyncProfileId">SyncProfileId</a>
+</li>
+<li>1.2. <a href="#SyncMode">SyncMode</a>
+</li>
+<li>1.3. <a href="#SyncType">SyncType</a>
+</li>
+<li>1.4. <a href="#SyncInterval">SyncInterval</a>
+</li>
+<li>1.5. <a href="#SyncServiceType">SyncServiceType</a>
+</li>
+<li>1.6. <a href="#SyncStatus">SyncStatus</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#DataSynchronizationManagerObject">DataSynchronizationManagerObject</a>
+</li>
+<li>2.2. <a href="#SyncInfo">SyncInfo</a>
+</li>
+<li>2.3. <a href="#SyncServiceInfo">SyncServiceInfo</a>
+</li>
+<li>2.4. <a href="#SyncProfileInfo">SyncProfileInfo</a>
+</li>
+<li>2.5. <a href="#SyncStatistics">SyncStatistics</a>
+</li>
+<li>2.6. <a href="#DataSynchronizationManager">DataSynchronizationManager</a>
+</li>
+<li>2.7. <a href="#SyncProgressCallback">SyncProgressCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#DataSynchronizationManagerObject">DataSynchronizationManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SyncInfo">SyncInfo</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SyncServiceInfo">SyncServiceInfo</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SyncProfileInfo">SyncProfileInfo</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SyncStatistics">SyncStatistics</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#DataSynchronizationManager">DataSynchronizationManager</a></td>
+<td>void <a href="#DataSynchronizationManager::add">add</a> (<a href="#SyncProfileInfo">SyncProfileInfo</a> profile)<br>
+    void <a href="#DataSynchronizationManager::update">update</a> (<a href="#SyncProfileInfo">SyncProfileInfo</a> profile)<br>
+    void <a href="#DataSynchronizationManager::remove">remove</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId)<br>
+    long <a href="#DataSynchronizationManager::getMaxProfilesNum">getMaxProfilesNum</a> ()<br>
+    unsigned long <a href="#DataSynchronizationManager::getProfilesNum">getProfilesNum</a> ()<br>
+    <a href="#SyncProfileInfo">SyncProfileInfo</a> <a href="#DataSynchronizationManager::get">get</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId)<br>
+    <a href="#SyncProfileInfo">SyncProfileInfo</a>[] <a href="#DataSynchronizationManager::getAll">getAll</a> ()<br>
+    void <a href="#DataSynchronizationManager::startSync">startSync</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId, optional <a href="#SyncProgressCallback">SyncProgressCallback</a>? progressCallback)<br>
+    void <a href="#DataSynchronizationManager::stopSync">stopSync</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId)<br>
+    <a href="#SyncStatistics">SyncStatistics</a>[] <a href="#DataSynchronizationManager::getLastSyncStatistics">getLastSyncStatistics</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId)</td>
+</tr>
+<tr>
+<td><a href="#SyncProgressCallback">SyncProgressCallback</a></td>
+<td>void <a href="#SyncProgressCallback::onprogress">onprogress</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="#SyncServiceType">SyncServiceType</a> serviceType, boolean isFromServer, unsigned long totalPerService, unsigned long syncedPerService)<br>
+    void <a href="#SyncProgressCallback::oncompleted">oncompleted</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId)<br>
+    void <a href="#SyncProgressCallback::onstopped">onstopped</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId)<br>
+    void <a href="#SyncProgressCallback::onfailed">onfailed</a> (<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="tizen.html#WebAPIError">WebAPIError</a> error)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="SyncProfileId">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProfileId"></a><h3>1.1. SyncProfileId</h3>
+<div class="brief">
+ An attribute to uniquely identify a sync profile.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString SyncProfileId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+<div class="enum" id="SyncMode">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncMode"></a><h3>1.2. SyncMode</h3>
+<div class="brief">
+ An enumerator that indicates the supported synchronization modes.
+          </div>
+<pre class="webidl prettyprint">  enum SyncMode { "MANUAL", "PERIODIC", "PUSH" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+MANUAL - Indicates that the synchronization starts by manual trigger. The sync type should be specified. The default value is <em>TWO_WAY</em>.            </li>
+            <li>
+PERIODIC - Indicates that the synchronization starts automatically by a preset period. The sync interval should be provided.            </li>
+            <li>
+PUSH - Indicates that the synchronization starts automatically when changes are made. The sync type is set to <em>TWO_WAY</em>. The synchronization can be triggered by the server based on the standard SAN(Server Alerted Notification) sync type.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SyncType">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncType"></a><h3>1.3. SyncType</h3>
+<div class="brief">
+ An enumerator that indicates the supported synchronization types.
+          </div>
+<pre class="webidl prettyprint">  enum SyncType { "TWO_WAY", "SLOW", "ONE_WAY_FROM_CLIENT", "REFRESH_FROM_CLIENT", "ONE_WAY_FROM_SERVER", "REFRESH_FROM_SERVER" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+TWO_WAY - Indicates a normal sync type in which the client and the server exchange information about modified data in these devices.            </li>
+            <li>
+SLOW - Indicates a form of two-way sync in which the client and the server exchange all the data from their database. This type of sync is used for the first sync, or after a synchronization failure.            </li>
+            <li>
+ONE_WAY_FROM_CLIENT - Indicates a sync type in which the client sends its modifications to the server but the server does not send its modifications back to the client.            </li>
+            <li>
+REFRESH_FROM_CLIENT - Indicates a sync type in which the client sends all its data from a database to the server (backup). The server is then expected to replace all data in the target database with the data received from the client.            </li>
+            <li>
+ONE_WAY_FROM_SERVER - Indicates a sync type in which the client gets all modifications from the server but the client does not send its modifications to the server.            </li>
+            <li>
+REFRESH_FROM_SERVER - Indicates a sync type in which the server sends all its data from a database to the client (restore). The client is then expected to replace all data in the target database with the data received from the server.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SyncInterval">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncInterval"></a><h3>1.4. SyncInterval</h3>
+<div class="brief">
+ An enumerator that indicates the supported synchronization intervals.
+          </div>
+<pre class="webidl prettyprint">  enum SyncInterval { "5_MINUTES", "15_MINUTES", "1_HOUR", "4_HOURS", "12_HOURS", "1_DAY", "1_WEEK", "1_MONTH" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+5_MINUTES - Indicates a time period of 5 minutes.            </li>
+            <li>
+15_MINUTES - Indicates a time period of 15 minutes.            </li>
+            <li>
+1_HOUR - Indicates a time period of 1 hour.            </li>
+            <li>
+4_HOURS - Indicates a time period of 4 hours.            </li>
+            <li>
+12_HOURS - Indicates a time period of 12 hours.            </li>
+            <li>
+1_DAY - Indicates a time period of 1 day.            </li>
+            <li>
+1_WEEK - Indicates a time period of 1 week.            </li>
+            <li>
+1_MONTH - Indicates a time period of 1 month.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SyncServiceType">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncServiceType"></a><h3>1.5. SyncServiceType</h3>
+<div class="brief">
+ An enumerator that indicates the supported synchronization service type of the device.
+          </div>
+<pre class="webidl prettyprint">  enum SyncServiceType { "CONTACT", "EVENT" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+CONTACT - Indicates the device contact records.            </li>
+            <li>
+EVENT - Indicates the device calendar event records.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SyncStatus">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncStatus"></a><h3>1.6. SyncStatus</h3>
+<div class="brief">
+ An enumerator that indicates the last sync status.
+          </div>
+<pre class="webidl prettyprint">  enum SyncStatus { "SUCCESS", "FAIL", "STOP", "NONE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+SUCCESS - Indicates the sync is successful.            </li>
+            <li>
+FAIL - Indicates the sync has failed.            </li>
+            <li>
+STOP - Indicates the sync has been stopped by the user's action.            </li>
+            <li>
+NONE - Indicates the sync had never been performed.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="DataSynchronizationManagerObject">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManagerObject"></a><h3>2.1. DataSynchronizationManagerObject</h3>
+<div class="brief">
+ This interface defines the default data synchronization manager that is instantiated by the <em>Tizen </em>object.
+The <em>tizen.datasync</em> object allows access to the functionality of the DataSynchronization API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface DataSynchronizationManagerObject {
+    readonly attribute <a href="#DataSynchronizationManager">DataSynchronizationManager</a> datasync;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DataSynchronizationManagerObject">DataSynchronizationManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+<div class="interface" id="SyncInfo">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncInfo"></a><h3>2.2. SyncInfo</h3>
+<div class="brief">
+ The SyncInfo interface defines the sync information.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode),
+  Constructor(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode, <a href="#SyncType">SyncType</a> type),
+  Constructor(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode, <a href="#SyncInterval">SyncInterval</a> interval)]
+  interface SyncInfo {
+    attribute DOMString url;
+
+    attribute DOMString id;
+
+    attribute DOMString password;
+
+    attribute <a href="#SyncMode">SyncMode</a> mode;
+
+    attribute <a href="#SyncType">SyncType</a>? type;
+
+    attribute <a href="#SyncInterval">SyncInterval</a>? interval;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<p><span class="remark"> Remark : </span>
+ The <em>MANUAL</em> sync mode accepts the sync type and the <em>PERIODIC</em> mode accepts the sync interval, whereas the <em>PUSH</em> mode does not accept any additional parameters.
+          </p>
+<div class="constructors">
+<h4 id="SyncInfo::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">SyncInfo(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode);</pre>
+<pre class="webidl prettyprint">SyncInfo(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode, <a href="#SyncType">SyncType</a> type);</pre>
+<pre class="webidl prettyprint">SyncInfo(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode, <a href="#SyncInterval">SyncInterval</a> interval);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SyncInfo::url">
+<span class="attrName"><span class="type">DOMString </span><span class="name">url</span></span><div class="brief">
+ An attribute to store the URL of the sync server.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncInfo::id">
+<span class="attrName"><span class="type">DOMString </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the login ID for the sync server.
+            </div>
+<div class="description">
+            <p>
+When an attempt to retrieve the saved value is made, it returns <var>null</var> to prevent any compromise on the privacy of the login ID.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncInfo::password">
+<span class="attrName"><span class="type">DOMString </span><span class="name">password</span></span><div class="brief">
+ An attribute to store the login password to the sync server.
+            </div>
+<div class="description">
+            <p>
+When an attempt to retrieve the saved value is made, it returns <var>null</var> to prevent any compromise on the privacy of the login password.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncInfo::mode">
+<span class="attrName"><span class="type">SyncMode </span><span class="name">mode</span></span><div class="brief">
+ An attribute to store the sync mode.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncInfo::type">
+<span class="attrName"><span class="type">SyncType </span><span class="name">type</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the sync type.
+            </div>
+<div class="description">
+            <p>
+This attribute is used when the sync mode is set to the <em>MANUAL</em> option.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncInfo::interval">
+<span class="attrName"><span class="type">SyncInterval </span><span class="name">interval</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the sync interval.
+            </div>
+<div class="description">
+            <p>
+This attribute is used when the sync mode is set to the <em>PERIODIC</em> option.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SyncServiceInfo">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncServiceInfo"></a><h3>2.3. SyncServiceInfo</h3>
+<div class="brief">
+ The SyncServiceInfo interface defines the sync service information.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(boolean enable, <a href="#SyncServiceType">SyncServiceType</a> serviceType, DOMString serverDatabaseUri, optional DOMString? id, optional DOMString? password)]
+  interface SyncServiceInfo {
+    attribute boolean enable;
+
+    attribute <a href="#SyncServiceType">SyncServiceType</a> serviceType;
+
+    attribute DOMString serverDatabaseUri;
+
+    attribute DOMString? id;
+
+    attribute DOMString? password;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="constructors">
+<h4 id="SyncServiceInfo::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">SyncServiceInfo(boolean enable, <a href="#SyncServiceType">SyncServiceType</a> serviceType, DOMString serverDatabaseUri, optional DOMString? id, optional DOMString? password);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SyncServiceInfo::enable">
+<span class="attrName"><span class="type">boolean </span><span class="name">enable</span></span><div class="brief">
+ An attribute to enable or disable a service category for sync.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncServiceInfo::serviceType">
+<span class="attrName"><span class="type">SyncServiceType </span><span class="name">serviceType</span></span><div class="brief">
+ An attribute to indicate the sync service type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncServiceInfo::serverDatabaseUri">
+<span class="attrName"><span class="type">DOMString </span><span class="name">serverDatabaseUri</span></span><div class="brief">
+ An attribute to store the sync service DB URI of the server.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncServiceInfo::id">
+<span class="attrName"><span class="type">DOMString </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the sync service DB access ID to the server.
+            </div>
+<div class="description">
+            <p>
+This is used only when the server requires a separate access right to each DB.
+When an attempt to retrieve the saved value is made, it returns <var>null</var> to prevent any compromise on the privacy of the ID.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncServiceInfo::password">
+<span class="attrName"><span class="type">DOMString </span><span class="name">password</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the sync service DB access password to the server.
+            </div>
+<div class="description">
+            <p>
+This is used only when the server requires a separate access right to each DB.
+When an attempt to retrieve the saved value is made, it returns <var>null</var> to prevent any compromise on the privacy of the password.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SyncProfileInfo">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProfileInfo"></a><h3>2.4. SyncProfileInfo</h3>
+<div class="brief">
+ The SyncProfileInfo interface defines the sync profile information, based on which synchronization is performed.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString profileName, <a href="#SyncInfo">SyncInfo</a> syncInfo, optional <a href="#SyncServiceInfo">SyncServiceInfo</a>[]? serviceInfo)]
+  interface SyncProfileInfo {
+    readonly attribute <a href="#SyncProfileId">SyncProfileId</a> profileId;
+
+    attribute DOMString profileName;
+
+    attribute <a href="#SyncInfo">SyncInfo</a> syncInfo;
+
+    attribute <a href="#SyncServiceInfo">SyncServiceInfo</a>[]? serviceInfo;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="constructors">
+<h4 id="SyncProfileInfo::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">SyncProfileInfo(DOMString profileName, <a href="#SyncInfo">SyncInfo</a> syncInfo, optional <a href="#SyncServiceInfo">SyncServiceInfo</a>[]? serviceInfo);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SyncProfileInfo::profileId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SyncProfileId </span><span class="name">profileId</span></span><div class="brief">
+ An attribute to store the unique identifier provided by the platform for a profile that has been successfully added.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncProfileInfo::profileName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">profileName</span></span><div class="brief">
+ An attribute to store the profile name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncProfileInfo::syncInfo">
+<span class="attrName"><span class="type">SyncInfo </span><span class="name">syncInfo</span></span><div class="brief">
+ An attribute to store sync info.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncProfileInfo::serviceInfo">
+<span class="attrName"><span class="type">SyncServiceInfo[]
+                      </span><span class="name">serviceInfo</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to indicate service info.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SyncStatistics">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncStatistics"></a><h3>2.5. SyncStatistics</h3>
+<div class="brief">
+ The SyncStatistics interface defines the sync statistics for a profile service.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SyncStatistics {
+    readonly attribute <a href="#SyncStatus">SyncStatus</a> syncStatus;
+
+    readonly attribute <a href="#SyncServiceType">SyncServiceType</a> serviceType;
+
+    readonly attribute Date lastSyncTime;
+
+    readonly attribute unsigned long serverToClientTotal;
+
+    readonly attribute unsigned long serverToClientAdded;
+
+    readonly attribute unsigned long serverToClientUpdated;
+
+    readonly attribute unsigned long serverToClientRemoved;
+
+    readonly attribute unsigned long clientToServerTotal;
+
+    readonly attribute unsigned long clientToServerAdded;
+
+    readonly attribute unsigned long clientToServerUpdated;
+
+    readonly attribute unsigned long clientToServerRemoved;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SyncStatistics::syncStatus">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SyncStatus </span><span class="name">syncStatus</span></span><div class="brief">
+ An attribute to store the last sync status for a corresponding service category.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::serviceType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SyncServiceType </span><span class="name">serviceType</span></span><div class="brief">
+ An attribute to indicate the sync service type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::lastSyncTime">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">lastSyncTime</span></span><div class="brief">
+ An attribute to store the last sync time.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::serverToClientTotal">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">serverToClientTotal</span></span><div class="brief">
+ An attribute to indicate the total number of items sent from the server to the client.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::serverToClientAdded">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">serverToClientAdded</span></span><div class="brief">
+ An attribute to indicate the number of added items from the server to the client.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::serverToClientUpdated">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">serverToClientUpdated</span></span><div class="brief">
+ An attribute to indicate the number of updated items from the server to the client.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::serverToClientRemoved">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">serverToClientRemoved</span></span><div class="brief">
+ An attribute to indicate the number of removed items from the server to the client.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::clientToServerTotal">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">clientToServerTotal</span></span><div class="brief">
+ An attribute to indicate the total number of items from the client to the server.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::clientToServerAdded">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">clientToServerAdded</span></span><div class="brief">
+ An attribute to indicate the number of added items from the client to the server.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::clientToServerUpdated">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">clientToServerUpdated</span></span><div class="brief">
+ An attribute to indicate the number of updated items from the client to the server.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SyncStatistics::clientToServerRemoved">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">clientToServerRemoved</span></span><div class="brief">
+ An attribute to indicate the number of removed items from the client to the server.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="DataSynchronizationManager">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager"></a><h3>2.6. DataSynchronizationManager</h3>
+<div class="brief">
+ The DataSynchronizationManager interface allows managing profiles and synchronizing data between the server and the client device based on stored profile information.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface DataSynchronizationManager {
+    void add(<a href="#SyncProfileInfo">SyncProfileInfo</a> profile) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#SyncProfileInfo">SyncProfileInfo</a> profile) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long getMaxProfilesNum() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long getProfilesNum() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SyncProfileInfo">SyncProfileInfo</a> get(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SyncProfileInfo">SyncProfileInfo</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void startSync(<a href="#SyncProfileId">SyncProfileId</a> profileId, optional <a href="#SyncProgressCallback">SyncProgressCallback</a>? progressCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void stopSync(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SyncStatistics">SyncStatistics</a>[] getLastSyncStatistics(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DataSynchronizationManager::add">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a sync profile.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#SyncProfileInfo">SyncProfileInfo</a> profile);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The profile ID is provided when the profile is successfully added.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profile</span>: 
+ The sync profile information to add.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type QuotaExceededError, if the platform has already reached the maximum number of profiles.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Creates a sync info
+ var syncInfo = new tizen.SyncInfo("http://example.com/sync", "myId", "myPassword", "MANUAL", "TWO_WAY");
+
+ // Syncs both contacts and events
+ var contactInfo = new tizen.SyncServiceInfo(true, "CONTACT", "serverContact");
+ var eventInfo = new tizen.SyncServiceInfo(true, "EVENT", "serverEvent");
+ var serviceInfo = [contactInfo, eventInfo];
+
+ // Adds a profile to sync
+ var profile = new tizen.SyncProfileInfo("MyProfile", syncInfo, serviceInfo);
+ tizen.datasync.add(profile);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::update">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates an existing sync profile.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#SyncProfileInfo">SyncProfileInfo</a> profile);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profile</span>: 
+ The sync profile information to update.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Retrieves and updates a profile
+ var profile = tizen.datasync.get(profileId);
+
+ profile.profileName = "newProfileName";
+
+ tizen.datasync.update(profile);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::remove">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes an existing sync profile.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The sync profile ID to remove.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any saved profile.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Removes a profile
+ tizen.datasync.remove(profileId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::getMaxProfilesNum">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::getMaxProfilesNum"></a><code><b><span class="methodName">getMaxProfilesNum</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the maximum number of supported sync profiles on a platform.
+Normally the platform sets a limitation on the number of supported profiles. It returns <var>0</var> or a negative value if no limitation is set.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMaxProfilesNum();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The number of supported profiles on a platform.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the maximum number of supported profiles on the platform
+ var numMaxProfiles = tizen.datasync.getMaxProfilesNum();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::getProfilesNum">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::getProfilesNum"></a><code><b><span class="methodName">getProfilesNum</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current number of sync profiles on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long getProfilesNum();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long The current number of profiles on a device.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the present number of profiles on the device
+ var numProfiles = tizen.datasync.getProfilesNum();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::get">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the <em>SyncProfileInfo</em> object from a given profile ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SyncProfileInfo">SyncProfileInfo</a> get(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The attempt to retrieve <em>SyncProfileInfo</em> doesn't get any confidential information such as the <em>password</em> of <em>SyncInfo</em> or <em>SyncServiceInfo</em> but instead it returns <var>null</var>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID used to get profile information.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SyncProfileInfo The profile information of the given ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any saved profile.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the profile information with the given ID
+ var profile = tizen.datasync.get(profileId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::getAll">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::getAll"></a><code><b><span class="methodName">getAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the information of all sync profiles saved in a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SyncProfileInfo">SyncProfileInfo</a>[] getAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+An attempt to retrieve <em>SyncProfileInfo</em> doesn't get any confidential information such as the <em>password</em> of <em>SyncInfo</em> or <em>SyncServiceInfo</em> but instead it returns <var>null</var>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SyncProfileInfo[] The profile information array.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets all the profile information
+ var profiles = tizen.datasync.getAll();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::startSync">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::startSync"></a><code><b><span class="methodName">startSync</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts a sync operation with a given profile ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void startSync(<a href="#SyncProfileId">SyncProfileId</a> profileId, optional <a href="#SyncProgressCallback">SyncProgressCallback</a>? progressCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the sync mode is set to <em>MANUAL</em>, the synchronization does not start automatically until this method is called. This method works even in the <em>PUSH</em> or <em>PERIODIC</em> mode.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The profile ID with which to initiate the sync operation.
+                </li>
+          <li class="param">
+<span class="name">progressCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the sync operation progresses or an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any saved profile.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var profileId; //profileId obtained from SyncProfileInfo
+ var syncCallback = {
+   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);
+   }
+ };
+
+ // Starts the sync operation with the corresponding callbacks
+ tizen.datasync.startSync(profileId, syncCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::stopSync">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::stopSync"></a><code><b><span class="methodName">stopSync</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops an ongoing sync operation that is specified by the <em>profileId</em> parameter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stopSync(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID of the ongoing sync operation to stop.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any saved profile.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var profileId; //profileId obtained from SyncProfileInfo
+ // Stops the ongoing sync operation
+ tizen.datasync.stopSync(profileId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DataSynchronizationManager::getLastSyncStatistics">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::DataSynchronizationManager::getLastSyncStatistics"></a><code><b><span class="methodName">getLastSyncStatistics</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the sync statistics of a given profile ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SyncStatistics">SyncStatistics</a>[] getLastSyncStatistics(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/datasync
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID used to get the sync statistics.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SyncStatictics[] The sync statistics information of a given ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any saved profile.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var profileId; //profileId obtained from SyncProfileInfo
+ // Gets the sync statistics information with the given ID
+ var statistics = tizen.datasync.getLastSyncStatistics(profileId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SyncProgressCallback">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProgressCallback"></a><h3>2.7. SyncProgressCallback</h3>
+<div class="brief">
+ The SyncProgressCallback defines progress notification callbacks for the ongoing sync operation.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface SyncProgressCallback {
+    void onprogress(<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="#SyncServiceType">SyncServiceType</a> serviceType, boolean isFromServer, unsigned long totalPerService, unsigned long syncedPerService);
+
+    void oncompleted(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+
+    void onstopped(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+
+    void onfailed(<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SyncProgressCallback::onprogress">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProgressCallback::onprogress"></a><code><b><span class="methodName">onprogress</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a synchronization operation is started and progress is made.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onprogress(<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="#SyncServiceType">SyncServiceType</a> serviceType, boolean isFromServer, unsigned long totalPerService, unsigned long syncedPerService);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The frequency of this callback invocation is dependent on the platform implementation.
+Normally the packet size from a server affects it, that is, if the server sends a bigger packet containing many records in it, the platform processes it at once and invokes this callback less frequently.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID of the corresponding sync operation.
+                </li>
+          <li class="param">
+<span class="name">serviceType</span>: 
+ The sync service category type.
+                </li>
+          <li class="param">
+<span class="name">isFromServer</span>: 
+ The direction of the operation.<br> If the direction of the operation is from the server to the client, then the value is<var> true</var>.
+                </li>
+          <li class="param">
+<span class="name">totalPerService</span>: 
+ The total number of records to synchronize for the current sync service type aggregating all operations.
+                </li>
+          <li class="param">
+<span class="name">syncedPerService</span>: 
+ The number of synchronized records for the current sync service type aggregating all operations.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="SyncProgressCallback::oncompleted">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProgressCallback::oncompleted"></a><code><b><span class="methodName">oncompleted</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sync operation has completed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncompleted(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID of the corresponding sync operation.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="SyncProgressCallback::onstopped">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProgressCallback::onstopped"></a><code><b><span class="methodName">onstopped</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sync operation is stopped by the user.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onstopped(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID of the corresponding sync operation.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="SyncProgressCallback::onfailed">
+<a class="backward-compatibility-anchor" name="::DataSynchronization::SyncProgressCallback::onfailed"></a><code><b><span class="methodName">onfailed</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sync operation fails.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfailed(<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">profileId</span>: 
+ The ID of the corresponding sync operation.
+                </li>
+          <li class="param">
+<span class="name">error</span>: 
+ The reason for sync failure.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that data synch application runs on a device, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/datasync</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module DataSynchronization {
+
+  typedef DOMString SyncProfileId;
+
+  enum SyncMode { "MANUAL", "PERIODIC", "PUSH" };
+
+  enum SyncType { "TWO_WAY", "SLOW", "ONE_WAY_FROM_CLIENT", "REFRESH_FROM_CLIENT", "ONE_WAY_FROM_SERVER", "REFRESH_FROM_SERVER" };
+
+  enum SyncInterval { "5_MINUTES", "15_MINUTES", "1_HOUR", "4_HOURS", "12_HOURS", "1_DAY", "1_WEEK", "1_MONTH" };
+
+  enum SyncServiceType { "CONTACT", "EVENT" };
+
+  enum SyncStatus { "SUCCESS", "FAIL", "STOP", "NONE" };
+
+  [NoInterfaceObject] interface DataSynchronizationManagerObject {
+    readonly attribute <a href="#DataSynchronizationManager">DataSynchronizationManager</a> datasync;
+  };
+
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DataSynchronizationManagerObject">DataSynchronizationManagerObject</a>;
+
+  [Constructor(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode),
+  Constructor(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode, <a href="#SyncType">SyncType</a> type),
+  Constructor(DOMString url, DOMString id, DOMString password, <a href="#SyncMode">SyncMode</a> mode, <a href="#SyncInterval">SyncInterval</a> interval)]
+  interface SyncInfo {
+    attribute DOMString url;
+
+    attribute DOMString id;
+
+    attribute DOMString password;
+
+    attribute <a href="#SyncMode">SyncMode</a> mode;
+
+    attribute <a href="#SyncType">SyncType</a>? type;
+
+    attribute <a href="#SyncInterval">SyncInterval</a>? interval;
+  };
+
+  [Constructor(boolean enable, <a href="#SyncServiceType">SyncServiceType</a> serviceType, DOMString serverDatabaseUri, optional DOMString? id, optional DOMString? password)]
+  interface SyncServiceInfo {
+    attribute boolean enable;
+
+    attribute <a href="#SyncServiceType">SyncServiceType</a> serviceType;
+
+    attribute DOMString serverDatabaseUri;
+
+    attribute DOMString? id;
+
+    attribute DOMString? password;
+  };
+
+  [Constructor(DOMString profileName, <a href="#SyncInfo">SyncInfo</a> syncInfo, optional <a href="#SyncServiceInfo">SyncServiceInfo</a>[]? serviceInfo)]
+  interface SyncProfileInfo {
+    readonly attribute <a href="#SyncProfileId">SyncProfileId</a> profileId;
+
+    attribute DOMString profileName;
+
+    attribute <a href="#SyncInfo">SyncInfo</a> syncInfo;
+
+    attribute <a href="#SyncServiceInfo">SyncServiceInfo</a>[]? serviceInfo;
+  };
+
+  [NoInterfaceObject] interface SyncStatistics {
+    readonly attribute <a href="#SyncStatus">SyncStatus</a> syncStatus;
+
+    readonly attribute <a href="#SyncServiceType">SyncServiceType</a> serviceType;
+
+    readonly attribute Date lastSyncTime;
+
+    readonly attribute unsigned long serverToClientTotal;
+
+    readonly attribute unsigned long serverToClientAdded;
+
+    readonly attribute unsigned long serverToClientUpdated;
+
+    readonly attribute unsigned long serverToClientRemoved;
+
+    readonly attribute unsigned long clientToServerTotal;
+
+    readonly attribute unsigned long clientToServerAdded;
+
+    readonly attribute unsigned long clientToServerUpdated;
+
+    readonly attribute unsigned long clientToServerRemoved;
+  };
+
+  [NoInterfaceObject] interface DataSynchronizationManager {
+    void add(<a href="#SyncProfileInfo">SyncProfileInfo</a> profile) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#SyncProfileInfo">SyncProfileInfo</a> profile) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long getMaxProfilesNum() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long getProfilesNum() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SyncProfileInfo">SyncProfileInfo</a> get(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SyncProfileInfo">SyncProfileInfo</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void startSync(<a href="#SyncProfileId">SyncProfileId</a> profileId, optional <a href="#SyncProgressCallback">SyncProgressCallback</a>? progressCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void stopSync(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SyncStatistics">SyncStatistics</a>[] getLastSyncStatistics(<a href="#SyncProfileId">SyncProfileId</a> profileId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback, NoInterfaceObject] interface SyncProgressCallback {
+    void onprogress(<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="#SyncServiceType">SyncServiceType</a> serviceType, boolean isFromServer, unsigned long totalPerService, unsigned long syncedPerService);
+
+    void oncompleted(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+
+    void onstopped(<a href="#SyncProfileId">SyncProfileId</a> profileId);
+
+    void onfailed(<a href="#SyncProfileId">SyncProfileId</a> profileId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/download.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/download.html
new file mode 100644 (file)
index 0000000..0fe2344
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/download.html
@@ -0,0 +1,1068 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Download API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Download">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Download API</h1></div>
+<div class="brief">
+ This API provides methods to asynchronously download the contents of a URL to a storage.
+        </div>
+<div class="description">
+        <p>
+For more information on the Download features, see <a href="../../../../../org.tizen.guides/html/web/tizen/content/download_w.htm">Download Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>
+</li>
+<li>1.2. <a href="#DownloadState">DownloadState</a>
+</li>
+<li>1.3. <a href="#DownloadNetworkType">DownloadNetworkType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#DownloadManagerObject">DownloadManagerObject</a>
+</li>
+<li>2.2. <a href="#DownloadRequest">DownloadRequest</a>
+</li>
+<li>2.3. <a href="#DownloadManager">DownloadManager</a>
+</li>
+<li>2.4. <a href="#DownloadCallback">DownloadCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#DownloadManagerObject">DownloadManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#DownloadRequest">DownloadRequest</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#DownloadManager">DownloadManager</a></td>
+<td>long <a href="#DownloadManager::start">start</a> (<a href="#DownloadRequest">DownloadRequest</a> downloadRequest, optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback)<br>
+    void <a href="#DownloadManager::cancel">cancel</a> (long downloadId)<br>
+    void <a href="#DownloadManager::pause">pause</a> (long downloadId)<br>
+    void <a href="#DownloadManager::resume">resume</a> (long downloadId)<br>
+    <a href="#DownloadState">DownloadState</a> <a href="#DownloadManager::getState">getState</a> (long downloadId)<br>
+    <a href="#DownloadRequest">DownloadRequest</a> <a href="#DownloadManager::getDownloadRequest">getDownloadRequest</a> (long downloadId)<br>
+    DOMString <a href="#DownloadManager::getMIMEType">getMIMEType</a> (long downloadId)<br>
+    void <a href="#DownloadManager::setListener">setListener</a> (long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback)</td>
+</tr>
+<tr>
+<td><a href="#DownloadCallback">DownloadCallback</a></td>
+<td>void <a href="#DownloadCallback::onprogress">onprogress</a> (long downloadId, unsigned long long receivedSize, unsigned long long totalSize)<br>
+    void <a href="#DownloadCallback::onpaused">onpaused</a> (long downloadId)<br>
+    void <a href="#DownloadCallback::oncanceled">oncanceled</a> (long downloadId)<br>
+    void <a href="#DownloadCallback::oncompleted">oncompleted</a> (long downloadId, DOMString fullPath)<br>
+    void <a href="#DownloadCallback::onfailed">onfailed</a> (long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="DownloadHTTPHeaderFields">
+<a class="backward-compatibility-anchor" name="::Download::DownloadHTTPHeaderFields"></a><h3>1.1. DownloadHTTPHeaderFields</h3>
+<div class="brief">
+ A set of HTTP header fields.
+          </div>
+<pre class="webidl prettyprint">    typedef object DownloadHTTPHeaderFields;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The key / value type of each HTTP header field should be DOMString.
+          </p>
+         </div>
+</div>
+<div class="enum" id="DownloadState">
+<a class="backward-compatibility-anchor" name="::Download::DownloadState"></a><h3>1.2. DownloadState</h3>
+<div class="brief">
+ An enumerator to indicate the state of a download operation.
+          </div>
+<pre class="webidl prettyprint">    enum DownloadState { "QUEUED", "DOWNLOADING", "PAUSED", "CANCELED", "COMPLETED", "FAILED" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+QUEUED - Indicates that the download operation is listed in a queue.            </li>
+            <li>
+DOWNLOADING - Indicates that the download operation is in progress.            </li>
+            <li>
+PAUSED - Indicates that the download operation is in a paused state by user request.            </li>
+            <li>
+CANCELED - Indicates that the download operation is canceled by user request.            </li>
+            <li>
+COMPLETED - Indicates that the download operation is in a completed state.            </li>
+            <li>
+FAILED - Indicates that the download operation has failed due to some reasons.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="DownloadNetworkType">
+<a class="backward-compatibility-anchor" name="::Download::DownloadNetworkType"></a><h3>1.3. DownloadNetworkType</h3>
+<div class="brief">
+ An enumerator to indicate the network type.
+          </div>
+<pre class="webidl prettyprint">    enum DownloadNetworkType { "CELLULAR", "WIFI", "ALL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+CELLULAR - Indicates that the download operation is allowed in the cellular network only.            </li>
+            <li>
+WIFI - Indicates that the download operation is allowed in the Wi-Fi network only.            </li>
+            <li>
+ALL - Indicates that the download operation is allowed in all network types.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="DownloadManagerObject">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManagerObject"></a><h3>2.1. DownloadManagerObject</h3>
+<div class="brief">
+ This interface defines the default download manager that is instantiated by the <em>Tizen </em>object.
+The <em>tizen.download </em>object allows access to the functionality of the Download API.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface DownloadManagerObject {
+        readonly attribute <a href="#DownloadManager">DownloadManager</a> download;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DownloadManagerObject">DownloadManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="interface" id="DownloadRequest">
+<a class="backward-compatibility-anchor" name="::Download::DownloadRequest"></a><h3>2.2. DownloadRequest</h3>
+<div class="brief">
+ The DownloadRequest interface defines the download request object.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(DOMString url, optional DOMString? destination, optional DOMString? fileName, optional <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType, optional <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader)]
+    interface DownloadRequest {
+        attribute DOMString url;
+
+        attribute DOMString? destination;
+
+        attribute DOMString? fileName;
+
+        attribute <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType;
+
+        attribute <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="constructors">
+<h4 id="DownloadRequest::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">DownloadRequest(DOMString url, optional DOMString? destination, optional DOMString? fileName, optional <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType, optional <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="DownloadRequest::url">
+<span class="attrName"><span class="type">DOMString </span><span class="name">url</span></span><div class="brief">
+ An attribute to store the URL of the object to download.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::destination">
+<span class="attrName"><span class="type">DOMString </span><span class="name">destination</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the folder path of the destination folder to which a requested file object will be downloaded.
+            </div>
+<div class="description">
+            <p>
+If the destination is not specified or is an empty string, the file will be downloaded to the default storage: "Downloads". For more information, see <a href="filesystem.html">Filesystem API</a>.
+            </p>
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::fileName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">fileName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the file name for the specified URL.
+            </div>
+<div class="description">
+            <p>
+If the file name is not given or is an empty string, the original file name from the URL is used.
+            </p>
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::networkType">
+<span class="attrName"><span class="type">DownloadNetworkType </span><span class="name">networkType</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the allowed network type.
+            </div>
+<div class="description">
+            <p>
+If the network type is not given, all network types are allowed.
+            </p>
+            <p>
+The default value is <var>ALL</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::httpHeader">
+<span class="attrName"><span class="type">DownloadHTTPHeaderFields </span><span class="name">httpHeader</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store extra HTTP header fields.
+            </div>
+<div class="description">
+            <p>
+For more information about HTTP header fields, see <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html#sec4.2">RFC-2616</a>            </p>
+            <p>
+The default value is an empty object.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var req = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt");
+ req.httpHeader["Pragma"] = "no-cache";
+ req.httpHeader["Cookie"] = "version=1; Skin=new";
+ req.httpHeader["X-Agent"] = "Tizen Sample App";
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="DownloadManager">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager"></a><h3>2.3. DownloadManager</h3>
+<div class="brief">
+ The DownloadManager interface handles requests for downloading. Each step of a download operation is informed through callbacks.
+          </div>
+<pre class="webidl prettyprint">   [NoInterfaceObject] interface DownloadManager {
+       long start(<a href="#DownloadRequest">DownloadRequest</a> downloadRequest,
+                    optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void cancel(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void pause(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void resume(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadState">DownloadState</a> getState(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadRequest">DownloadRequest</a> getDownloadRequest(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       DOMString getMIMEType(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setListener(long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DownloadManager::start">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts a download operation with the specified URL information.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long start(<a href="#DownloadRequest">DownloadRequest</a> downloadRequest, optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/download
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if <var>CELLULAR</var> type is supported, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.telephony")</var>            </p>
+<p><span class="remark"> Remark : </span>
+ To check if <var>WIFI</var> type is supported, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.wifi")</var>            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadRequest</span>: 
+ The URL and destination information of the object to download.
+                </li>
+          <li class="param">
+<span class="name">downloadCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the download state changes or an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long An identifier for each download operation.
+If the network is not available for downloading, the return value is -1 since Tizen 2.3.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the <em>networkType</em> of the given <var>DownloadRequest</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Check if Download API is supported not on a device.
+ var download_api_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/download");
+ if (download_api_capability === false) {
+     console.log("Download API is not supported on this device.");
+     return;
+ }
+
+ var listener = {
+   onprogress: function(id, receivedSize, totalSize) {
+     console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
+   },
+   onpaused: function(id) {
+     console.log('Paused with id: ' + id);
+   },
+   oncanceled: function(id) {
+     console.log('Canceled with id: ' + id);
+   },
+   oncompleted: function(id, fullPath) {
+     console.log('Completed with id: ' + id + ', full path: ' + fullPath);
+   },
+   onfailed: function(id, error) {
+     console.log('Failed with id: ' + id + ', error name: ' + error.name);
+   }
+ };
+
+ // Starts downloading the file from the Web with the corresponding callbacks.
+ var downloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "documents");
+ var downloadId = tizen.download.start(downloadRequest, listener);
+
+ // If you want to download a large file through Wi-Fi,
+ var wifi_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/network.wifi");
+ var wifiDownloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/archive/14.02.2/Ubuntu_12.04/qemu_1.6.0rc3.orig.tar.gz", "downloads", null, "WIFI");
+
+ if (wifi_capability === true) {
+     var downlodId_wifi = tizen.download.start(wifiDownloadRequest, listener);
+ } else {
+     // If you call tizen.download.start(), NotSupportedError will be thrown.
+     console.log("This device doesn't support Download API through Wi-Fi.");
+ }
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::cancel">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::cancel"></a><code><b><span class="methodName">cancel</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Cancels an ongoing download operation that is specified by the <em>downloadId</em> parameter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void cancel(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the ongoing download operation to stop.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Cancels the ongoing download operation with the specified ID.
+ tizen.download.cancel(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::pause">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::pause"></a><code><b><span class="methodName">pause</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Pauses an ongoing download operation that is specified by the <em>downloadId</em> parameter.
+The paused download operation can be resumed later by the <em>resume()</em> method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void pause(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the ongoing download operation to pause.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Pauses the ongoing download operation with the specified ID.
+ tizen.download.pause(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::resume">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::resume"></a><code><b><span class="methodName">resume</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Resumes a paused download operation that is specified by the <em>downloadId</em> parameter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void resume(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the paused download operation to resume.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Resumes the paused download operation with the specified ID.
+ tizen.download.resume(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::getState">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::getState"></a><code><b><span class="methodName">getState</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the download state of an operation synchronously with the specified ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#DownloadState">DownloadState</a> getState(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to get the current state of the download operation.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DownloadState The current download state of the specified ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the state of the download operation with the given ID.
+ var state = tizen.download.getState(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::getDownloadRequest">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::getDownloadRequest"></a><code><b><span class="methodName">getDownloadRequest</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the DownloadRequest object from a given ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#DownloadRequest">DownloadRequest</a> getDownloadRequest(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to get the download request information.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DownloadRequest The download request information of the given ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the download request information with the given ID.
+ var downloadRequest = tizen.download.getDownloadRequest(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::getMIMEType">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::getMIMEType"></a><code><b><span class="methodName">getMIMEType</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the MIME type of the downloaded file.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getMIMEType(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ This function returns a valid MIME type when the download operation has been started
+and successfully retrieves the file header.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to get the MIME type information.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The MIME type of the downloaded file.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Get the MIME type of the download operation with the given ID.
+ var MIMEtype = tizen.download.getMIMEType(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::setListener">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::setListener"></a><code><b><span class="methodName">setListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the download callback to the download operation of the given ID.
+It's possible to change or register the listener of the download operation using the saved ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setListener(long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to set the download callback.
+                </li>
+          <li class="param">
+<span class="name">downloadCallback</span>: 
+ The method to invoke when the download state changes or an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var listener = {
+   onprogress: function(id, receivedSize, totalSize) {
+     console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
+   },
+   onpaused: function(id) {
+     console.log('Paused with id: ' + id);
+   },
+   oncanceled: function(id) {
+     console.log('Canceled with id: ' + id);
+   },
+   oncompleted: function(id, fileName) {
+     console.log('Completed with id: ' + id + ', file name: ' + fileName);
+   },
+   onfailed: function(id, error) {
+     console.log('Failed with id: ' + id + ', error name: ' + error.name);
+   }
+ };
+
+ // Start downloading the html file on the web with the corresponding callbacks.
+ var downloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "documents");
+ downloadId = tizen.download.start(downloadRequest);
+
+ // Add the listener.
+ tizen.download.setListener(downloadId, listener);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DownloadCallback">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback"></a><h3>2.4. DownloadCallback</h3>
+<div class="brief">
+ The DownloadCallback defines notification callbacks for a download state change or progress.
+          </div>
+<pre class="webidl prettyprint">   [Callback, NoInterfaceObject] interface DownloadCallback {
+       void onprogress(long downloadId, unsigned long long receivedSize, unsigned long long totalSize);
+
+       void onpaused(long downloadId);
+
+       void oncanceled(long downloadId);
+
+       void oncompleted(long downloadId, DOMString fullPath);
+
+       void onfailed(long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DownloadCallback::onprogress">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::onprogress"></a><code><b><span class="methodName">onprogress</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a download is successful and it is called multiple times as the download progresses.
+The interval between the <em>onprogress()</em> callback is platform-dependent. When the download is started, the <em>receivedSize </em>can be <var>0</var>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onprogress(long downloadId, unsigned long long receivedSize, unsigned long long totalSize);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+          <li class="param">
+<span class="name">receivedSize</span>: 
+ The size of data received in bytes.
+                </li>
+          <li class="param">
+<span class="name">totalSize</span>: 
+ The total size of data to receive in bytes.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::onpaused">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::onpaused"></a><code><b><span class="methodName">onpaused</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation is paused by the <em>pause() </em>method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpaused(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::oncanceled">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::oncanceled"></a><code><b><span class="methodName">oncanceled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation is canceled by the <em>cancel() </em>method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncanceled(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::oncompleted">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::oncompleted"></a><code><b><span class="methodName">oncompleted</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation is completed with the final full path.
+If the same file name already exists in the destination, it is changed according to the platform policy and delivered in this callback.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncompleted(long downloadId, DOMString fullPath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+          <li class="param">
+<span class="name">fullPath</span>: 
+ The final full path for the downloaded file.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::onfailed">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::onfailed"></a><code><b><span class="methodName">onfailed</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation fails.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfailed(long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+          <li class="param">
+<span class="name">error</span>: 
+ The reason for download failure.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+DownloadNetworkType <em>'WIFI'</em> can be available on a Wi-Fi enabled device. To guarantee that the download application runs on a device with the Wi-Fi feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.wifi</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+DownloadNetworkType <em>'CELLULAR'</em> can be available on a cellular-enabled device. To guarantee that the download application runs on a device with the cellular feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Download {
+    typedef object DownloadHTTPHeaderFields;
+
+    enum DownloadState { "QUEUED", "DOWNLOADING", "PAUSED", "CANCELED", "COMPLETED", "FAILED" };
+
+    enum DownloadNetworkType { "CELLULAR", "WIFI", "ALL" };
+
+    [NoInterfaceObject] interface DownloadManagerObject {
+        readonly attribute <a href="#DownloadManager">DownloadManager</a> download;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DownloadManagerObject">DownloadManagerObject</a>;
+
+    [Constructor(DOMString url, optional DOMString? destination, optional DOMString? fileName, optional <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType, optional <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader)]
+    interface DownloadRequest {
+        attribute DOMString url;
+
+        attribute DOMString? destination;
+
+        attribute DOMString? fileName;
+
+        attribute <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType;
+
+        attribute <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader;
+    };
+
+   [NoInterfaceObject] interface DownloadManager {
+       long start(<a href="#DownloadRequest">DownloadRequest</a> downloadRequest,
+                    optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void cancel(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void pause(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void resume(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadState">DownloadState</a> getState(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadRequest">DownloadRequest</a> getDownloadRequest(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       DOMString getMIMEType(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setListener(long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };
+
+   [Callback, NoInterfaceObject] interface DownloadCallback {
+       void onprogress(long downloadId, unsigned long long receivedSize, unsigned long long totalSize);
+
+       void onpaused(long downloadId);
+
+       void oncanceled(long downloadId);
+
+       void oncompleted(long downloadId, DOMString fullPath);
+
+       void onfailed(long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+   };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html
new file mode 100644 (file)
index 0000000..43e27a2
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html
@@ -0,0 +1,985 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Exif API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Exif">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Exif API</h1></div>
+<div class="brief">
+ The Exif API provides interfaces and methods for manipulating <a href="http://en.wikipedia.org/wiki/Exchangeable_image_file_format">Exif</a> data from a JPEG file.
+The <em>ExifManager</em> object provides methods to retrieve the <em>ExifInformation</em> object from a JPEG file
+and save the Exif data from the <em>ExifInformation</em> object in the JPEG file.
+The <em>ExifInformation</em> object provides functionality to get and set the Exif attributes corresponding to the Exif tag.
+Changing the value of the attribute in the <em>ExifInformation</em> object stores the Exif data in the <em>ExifInformation</em> object. It does not change data in the JPEG file.
+For applying the modified Exif data to the JPEG file,
+the saveExifInfo() method of the <em>ExifManager</em> object should be called with the <em>ExifInformation</em> object that has the modified Exif data.
+        </div>
+<div class="description">
+        <p>
+For more information about how to use Exif API, see <a href="../../../../../org.tizen.guides/html/web/tizen/content/exif_w.htm">Exif Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#WhiteBalanceMode">WhiteBalanceMode</a>
+</li>
+<li>1.2. <a href="#ExposureProgram">ExposureProgram</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ExifManagerObject">ExifManagerObject</a>
+</li>
+<li>2.2. <a href="#ExifManager">ExifManager</a>
+</li>
+<li>2.3. <a href="#ExifInit">ExifInit</a>
+</li>
+<li>2.4. <a href="#ExifInformation">ExifInformation</a>
+</li>
+<li>2.5. <a href="#ExifInformationSuccessCallback">ExifInformationSuccessCallback</a>
+</li>
+<li>2.6. <a href="#ExifThumbnailSuccessCallback">ExifThumbnailSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ExifManagerObject">ExifManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ExifManager">ExifManager</a></td>
+<td>void <a href="#ExifManager::getExifInfo">getExifInfo</a> (DOMString uri, <a href="#ExifInformationSuccessCallback">ExifInformationSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ExifManager::saveExifInfo">saveExifInfo</a> (<a href="#ExifInformation">ExifInformation</a> exifInfo, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ExifManager::getThumbnail">getThumbnail</a> (DOMString uri, <a href="#ExifThumbnailSuccessCallback">ExifThumbnailSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#ExifInit">ExifInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ExifInformation">ExifInformation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ExifInformationSuccessCallback">ExifInformationSuccessCallback</a></td>
+<td>void <a href="#ExifInformationSuccessCallback::onsuccess">onsuccess</a> (<a href="#ExifInformation">ExifInformation</a> exifInfo)</td>
+</tr>
+<tr>
+<td><a href="#ExifThumbnailSuccessCallback">ExifThumbnailSuccessCallback</a></td>
+<td>void <a href="#ExifThumbnailSuccessCallback::onsuccess">onsuccess</a> (DOMString? uri)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="WhiteBalanceMode">
+<a class="backward-compatibility-anchor" name="::Exif::WhiteBalanceMode"></a><h3>1.1. WhiteBalanceMode</h3>
+<div class="brief">
+ Specifies a white balance mode for an image.
+          </div>
+<pre class="webidl prettyprint">    enum WhiteBalanceMode { "AUTO", "MANUAL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+AUTO - Automatic White Balance mode            </li>
+            <li>
+MANUAL - Manual White Balance mode            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="ExposureProgram">
+<a class="backward-compatibility-anchor" name="::Exif::ExposureProgram"></a><h3>1.2. ExposureProgram</h3>
+<div class="brief">
+ Specifies an exposure balance program for an image.
+          </div>
+<pre class="webidl prettyprint">    enum ExposureProgram { "NOT_DEFINED", "MANUAL", "NORMAL", "APERTURE_PRIORITY", "SHUTTER_PRIORITY", "CREATIVE_PROGRAM", "ACTION_PROGRAM", "PORTRAIT_MODE", "LANDSCAPE_MODE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+Some additional information can be found in the <a href="http://en.wikipedia.org/wiki/List_of_digital_camera_modes">List of digital camera modes</a> article.
+          </p>
+          <ul>
+            <li>
+NOT_DEFINED - Exposure program info is not present or is unknown            </li>
+            <li>
+MANUAL - In the manual mode both shutter speed and aperture are independently set manually (with ISO sensitivity also set manually)            </li>
+            <li>
+APERTURE_PRIORITY - aka A, Av(Aperture value) mode enables manual control of the aperture, and shutter speed is calculated by the camera for proper exposure (given an ISO sensitivity)            </li>
+            <li>
+SHUTTER_PRIORITY - aka S, Tv(Time value) mode enables manual control of the shutter speed, and aperture is calculated by the camera for proper exposure (given an ISO sensitivity)            </li>
+            <li>
+CREATIVE_PROGRAM - Program mode makes the camera calculate both shutter speed and aperture (given a manually or automatically selected ISO)            </li>
+            <li>
+ACTION_PROGRAM - Action or sports modes increase ISO and use a faster shutter speed to capture an action            </li>
+            <li>
+PORTRAIT_MODE - Portrait mode widens the aperture to throw the background out of focus. The camera may recognize and focus on a human face            </li>
+            <li>
+LANDSCAPE_MODE - Landscape modes use a small aperture to gain depth of a field            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ExifManagerObject">
+<a class="backward-compatibility-anchor" name="::Exif::ExifManagerObject"></a><h3>2.1. ExifManagerObject</h3>
+<div class="brief">
+ The ExifManagerObject interface defines what is instantiated by the <em>Tizen</em> object from the Tizen Platform.
+The <em>tizen.exif</em> object allows access to the Exif data of a JPEG file.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface ExifManagerObject {
+        readonly attribute <a href="#ExifManager">ExifManager</a> exif;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ExifManagerObject">ExifManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="ExifManager">
+<a class="backward-compatibility-anchor" name="::Exif::ExifManager"></a><h3>2.2. ExifManager</h3>
+<div class="brief">
+ The ExifManager interface provides methods to retrieve the <em>ExifInformation</em> object and save the Exif data of the <em>ExifInformation</em> object in a JPEG file.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface ExifManager {
+
+        void getExifInfo(DOMString uri,
+                         <a href="#ExifInformationSuccessCallback">ExifInformationSuccessCallback</a> successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback ) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void saveExifInfo(<a href="#ExifInformation">ExifInformation</a> exifInfo,
+                          optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getThumbnail(DOMString uri,
+                          <a href="#ExifThumbnailSuccessCallback">ExifThumbnailSuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+It provides access to the API functionalities through the <em>tizen.exif</em> interface.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ExifManager::getExifInfo">
+<a class="backward-compatibility-anchor" name="::Exif::ExifManager::getExifInfo"></a><code><b><span class="methodName">getExifInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the <em>ExifInformation</em> object to manipulate the Exif data in a JPEG file.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getExifInfo(DOMString uri, <a href="#ExifInformationSuccessCallback">ExifInformationSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This function returns (via callback) the <em>ExifInformation</em> object that contains the Exif data in the JPEG file.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If the file of the input parameters is not found or the file does not contain Exif data              </li>
+              <li>
+IOError: If access to the image file is denied due to insufficient permissions              </li>
+              <li>
+InvalidValuesError: If any input parameter contains invalid values              </li>
+              <li>
+UnknownError: In any other error case              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">uri</span>: 
+ URI of the JPEG file, as available in ImageContent::contentURI or returned by File::toURI()
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when Exif information has been retrieved successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> //Preconditions: please provide images/tizen.jpg file with present Exif data
+
+ // Defines success callback
+ function onSuccess(exifInfo) {
+     console.log("success to get Exif information object");
+ }
+
+ // Defines error callback
+ function onError(error) {
+     console.log("error occurred: " + error.name);
+ }
+
+ function resolveSuccess(file) {
+     tizen.exif.getExifInfo(file.toURI(), onSuccess, onError);
+ }
+
+ function resolveFail(error) {
+    console.log("error occurred: " + error.name);
+ }
+ tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ExifManager::saveExifInfo">
+<a class="backward-compatibility-anchor" name="::Exif::ExifManager::saveExifInfo"></a><code><b><span class="methodName">saveExifInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Saves the Exif data of the <em>ExifInformation</em> object into the JPEG file.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void saveExifInfo(<a href="#ExifInformation">ExifInformation</a> exifInfo, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If the file of the input parameters is not found              </li>
+              <li>
+InvalidValuesError: If any input parameter contains invalid values              </li>
+              <li>
+UnknownError: In any other error case              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">exifInfo</span>: 
+ Exif information object that contains the Exif data in the JPEG file
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when Exif data has been saved successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> //Preconditions: please provide images/tizen.jpg file with present Exif data
+
+ // Defines success callback
+ function onSaveSuccess() {
+     console.log("success to save Exif information");
+ }
+
+ // Defines error callback
+ function onSaveError(error) {
+     console.log("error occur" + error.name);
+ }
+
+ // Defines success callback
+ function onSuccess(exifInfo) {
+     console.log("success to get Exif information object");
+     exifInfo.orientation = "ROTATE_90";
+     tizen.exif.saveExifInfo(exifInfo, onSaveSuccess, onSaveError);
+ }
+
+ // Defines error callback
+ function onError(error) {
+     console.log("error occur" + error.name);
+ }
+
+ function resolveSuccess(file) {
+     tizen.exif.getExifInfo(file.toURI(), onSuccess, onError);
+ }
+
+ function resolveFail(error) {
+    console.log("error occurred: " + error.name);
+ }
+
+ tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ExifManager::getThumbnail">
+<a class="backward-compatibility-anchor" name="::Exif::ExifManager::getThumbnail"></a><code><b><span class="methodName">getThumbnail</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the thumbnail of the specified JPEG file. If there is no thumbnail in the JPEG file, <var>null</var> is returned.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getThumbnail(DOMString uri, <a href="#ExifThumbnailSuccessCallback">ExifThumbnailSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+<em>successCallback</em> is invoked with a URI as the first argument.
+This URI is a <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">data URI</a>.
+It can be used as an src attribute value of the img element.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError: If the file of the input parameters is not found              </li>
+              <li>
+IOError: If access to the thumbnail file is denied due to insufficient permissions              </li>
+              <li>
+InvalidValuesError: If any of the input parameters contains an invalid value              </li>
+              <li>
+UnknownError: In any other error case              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">uri</span>: 
+ URI of the JPEG file
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when thumbnail data has been retrieved successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> //Preconditions: please provide images/tizen.jpg file with present Exif data
+
+ // Defines success callback
+ function onSuccess(thumbData) {
+     console.log("got thumbnail data of JPEG file");
+     if (thumbData) {
+         var img = new Image();
+         img.src = thumbData;
+         document.body.appendChild(img);
+     }
+ }
+
+ // Defines error callback
+ function onError(error) {
+     console.log("error occur" + error.name);
+ }
+
+ function resolveSuccess(file) {
+     tizen.exif.getThumbnail(file.toURI(), onSuccess, onError);
+ }
+
+ function resolveFail(error) {
+    console.log("error occurred: " + error.name);
+ }
+
+ tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="ExifInit">
+<a class="backward-compatibility-anchor" name="::Exif::ExifInit"></a><h3>2.3. ExifInit</h3>
+<div class="brief">
+ Dictionary for specifying <em>ExifInformation</em> attributes upon <em>ExifInformation</em> creation.
+          </div>
+<pre class="webidl prettyprint">    dictionary ExifInit {
+        DOMString uri;
+        unsigned long width;
+        unsigned long height;
+        DOMString deviceMaker;
+        DOMString deviceModel;
+        Date originalTime;
+        <a href="content.html#ImageContentOrientation">ImageContentOrientation</a> orientation;
+        double fNumber;
+        unsigned short[] isoSpeedRatings;
+        DOMString exposureTime;
+        <a href="#ExposureProgram">ExposureProgram</a> exposureProgram;
+        boolean flash;
+        double focalLength;
+        <a href="#WhiteBalanceMode">WhiteBalanceMode</a> whiteBalance;
+        <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a> gpsLocation;
+        double gpsAltitude;
+        DOMString gpsProcessingMethod;
+        Date gpsTime;
+        DOMString userComment;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+This dictionary is used to input parameters when <em>ExifInformation</em> is created.
+For description of attributes please see the corresponding attributes in the <em>ExifInformation<em> interface.
+</em></em>          </p>
+         </div>
+</div>
+<div class="interface" id="ExifInformation">
+<a class="backward-compatibility-anchor" name="::Exif::ExifInformation"></a><h3>2.4. ExifInformation</h3>
+<div class="brief">
+ The ExifInformation interface implements the <em>ExifInformation</em> object.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(optional <a href="#ExifInit">ExifInit</a>? ExifInitDict)]
+    interface ExifInformation {
+        attribute DOMString uri;
+
+        attribute unsigned long? width;
+
+        attribute unsigned long? height;
+
+        attribute DOMString? deviceMaker;
+
+        attribute DOMString? deviceModel;
+
+        attribute Date? originalTime;
+
+        attribute <a href="content.html#ImageContentOrientation">ImageContentOrientation</a>? orientation;
+
+        attribute double? fNumber;
+
+        attribute unsigned short[]? isoSpeedRatings;
+
+        attribute DOMString? exposureTime;
+
+        attribute <a href="#ExposureProgram">ExposureProgram</a>? exposureProgram;
+
+        attribute boolean? flash;
+
+        attribute double? focalLength;
+
+        attribute <a href="#WhiteBalanceMode">WhiteBalanceMode</a>? whiteBalance;
+
+        attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? gpsLocation;
+
+        attribute double? gpsAltitude;
+
+        attribute DOMString? gpsProcessingMethod;
+
+        attribute <a href="time.html#TZDate">TZDate</a>? gpsTime;
+
+        attribute DOMString? userComment;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+When the format of a value is given in the attribute description then this format should be followed when updating values.
+          </p>
+          <p>
+Every Exif related attribute is nullable - null means that this information is missing in the file.
+By setting an attribute to null and saving <em>ExifInformation</em> one can remove that Exif tag from the file.
+          </p>
+         </div>
+<div class="constructors">
+<h4 id="ExifInformation::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ExifInformation(optional <a href="#ExifInit">ExifInit</a>? ExifInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ExifInformation::uri">
+<span class="attrName"><span class="type">DOMString </span><span class="name">uri</span></span><div class="brief">
+ URI of the image.
+            </div>
+<div class="description">
+            <p>
+The path to the file from which <em>ExifInformation</em> data is collected.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::width">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">width</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Width of the image i.e. the number of points (pixels) per image line.
+            </div>
+<div class="description">
+            <p>
+Note if the value of this attribute is changed, the new value is not verified against the actual size of the image.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::height">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">height</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Height of the image i.e. the number of lines in the image.
+            </div>
+<div class="description">
+            <p>
+Note if the value of this attribute is changed, the new value is not verified against the actual size of the image.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::deviceMaker">
+<span class="attrName"><span class="type">DOMString </span><span class="name">deviceMaker</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Name of the camera manufacturer.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::deviceModel">
+<span class="attrName"><span class="type">DOMString </span><span class="name">deviceModel</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Model name or model number of the camera or input device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::originalTime">
+<span class="attrName"><span class="type">Date </span><span class="name">originalTime</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Date and time when the picture was taken.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::orientation">
+<span class="attrName"><span class="type">ImageContentOrientation </span><span class="name">orientation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Orientation of the image when displayed.
+            </div>
+<div class="description">
+            <p>
+This attribute shows the relation between the stored image data and the visual content orientation.
+In other words - how a stored image should be oriented when presented to the user.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::fNumber">
+<span class="attrName"><span class="type">double </span><span class="name">fNumber</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The f-number when the image was taken.
+            </div>
+<div class="description">
+            <p>
+Exif specification: "Conversion is not made to the focal length of a 35 mm film".
+            </p>
+            <p>
+The <a href="http://en.wikipedia.org/wiki/F-number">f-number</a> is the ratio of the lens' focal length to the diameter of the entrance pupil.
+F-number is also called focal ratio, f-ratio, f-stop, or relative aperture.
+Example values: 1.4, 2, 2.8, 4, 5.6, 8, 11 ...
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::isoSpeedRatings">
+<span class="attrName"><span class="type">unsigned short[]
+                      </span><span class="name">isoSpeedRatings</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Photo sensitivity (also called ISO speed and ISO latitude) of the camera or input device.
+            </div>
+<div class="description">
+            <p>
+Example values: 80, 100, 200, 400, 800, 1600, 3200 ..
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::exposureTime">
+<span class="attrName"><span class="type">DOMString </span><span class="name">exposureTime</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Exposure time, given in seconds.
+            </div>
+<div class="description">
+            <p>
+If exposure time is below one second it is expressed as 1/x.
+For example: 1 second exposure is "1", 0.25s is "1/4".
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::exposureProgram">
+<span class="attrName"><span class="type">ExposureProgram </span><span class="name">exposureProgram</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Exposure balance program used by the camera to set exposure when the picture was taken.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::flash">
+<span class="attrName"><span class="type">boolean </span><span class="name">flash</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Boolean value that indicates whether flash was fired when the picture was taken (true: flash fired).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::focalLength">
+<span class="attrName"><span class="type">double </span><span class="name">focalLength</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Focal length of the lens, given in mm.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::whiteBalance">
+<span class="attrName"><span class="type">WhiteBalanceMode </span><span class="name">whiteBalance</span><span class="optional"> [nullable]</span></span><div class="brief">
+ White balance mode set when the picture was taken.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::gpsLocation">
+<span class="attrName"><span class="type">SimpleCoordinates </span><span class="name">gpsLocation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Latitude and longitude of the camera (from GPS) when the picture was taken.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::gpsAltitude">
+<span class="attrName"><span class="type">double </span><span class="name">gpsAltitude</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Altitude (from GPS) of the camera when the picture was taken.
+            </div>
+<div class="description">
+            <p>
+This value is expressed in meters above sea level (can be negative).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::gpsProcessingMethod">
+<span class="attrName"><span class="type">DOMString </span><span class="name">gpsProcessingMethod</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Name of the method used for finding the location.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::gpsTime">
+<span class="attrName"><span class="type">TZDate </span><span class="name">gpsTime</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Date and time information relative to UTC (Universal Time Coordinated) provided by GPS when the photo was taken.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="ExifInformation::userComment">
+<span class="attrName"><span class="type">DOMString </span><span class="name">userComment</span><span class="optional"> [nullable]</span></span><div class="brief">
+ User comment.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ExifInformationSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Exif::ExifInformationSuccessCallback"></a><h3>2.5. ExifInformationSuccessCallback</h3>
+<div class="brief">
+ The ExifInformationSuccessCallback interface provides a success callback that is invoked when the Exif information object has been retrieved.
+This callback interface specifies a success method with an <em>ExifInformation</em> object as an input parameter. It is used in exif.getExifInfo().
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface ExifInformationSuccessCallback {
+        void onsuccess(<a href="#ExifInformation">ExifInformation</a> exifInfo);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ExifInformationSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Exif::ExifInformationSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the Exif information object has been successfully retrieved.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ExifInformation">ExifInformation</a> exifInfo);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">exifInfo</span>: 
+ <em>ExifInformation</em> to be retrieved
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ExifThumbnailSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Exif::ExifThumbnailSuccessCallback"></a><h3>2.6. ExifThumbnailSuccessCallback</h3>
+<div class="brief">
+ The ExifThumbnailSuccessCallback interface provides a success callback that is invoked when the Exif thumbnail has been retrieved.
+This callback interface specifies a success method with the URI for the thumbnail as an input parameter. It is used in exif.getThumbnail().
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface ExifThumbnailSuccessCallback {
+        void onsuccess(DOMString? uri);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ExifThumbnailSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Exif::ExifThumbnailSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the thumbnail of the JPEG file has been successfully retrieved.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString? uri);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">uri</span><span class="optional"> [nullable]</span>: 
+ URI for the thumbnail to be retrieved <br>If there is no thumbnail in the JPEG file, <var>null</var> is returned.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Exif {
+
+    enum WhiteBalanceMode { "AUTO", "MANUAL" };
+
+    enum ExposureProgram { "NOT_DEFINED", "MANUAL", "NORMAL", "APERTURE_PRIORITY", "SHUTTER_PRIORITY", "CREATIVE_PROGRAM", "ACTION_PROGRAM", "PORTRAIT_MODE", "LANDSCAPE_MODE" };
+
+    [NoInterfaceObject] interface ExifManagerObject {
+        readonly attribute <a href="#ExifManager">ExifManager</a> exif;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ExifManagerObject">ExifManagerObject</a>;
+
+    [NoInterfaceObject] interface ExifManager {
+
+        void getExifInfo(DOMString uri,
+                         <a href="#ExifInformationSuccessCallback">ExifInformationSuccessCallback</a> successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback ) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void saveExifInfo(<a href="#ExifInformation">ExifInformation</a> exifInfo,
+                          optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void getThumbnail(DOMString uri,
+                          <a href="#ExifThumbnailSuccessCallback">ExifThumbnailSuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    dictionary ExifInit {
+        DOMString uri;
+        unsigned long width;
+        unsigned long height;
+        DOMString deviceMaker;
+        DOMString deviceModel;
+        Date originalTime;
+        <a href="content.html#ImageContentOrientation">ImageContentOrientation</a> orientation;
+        double fNumber;
+        unsigned short[] isoSpeedRatings;
+        DOMString exposureTime;
+        <a href="#ExposureProgram">ExposureProgram</a> exposureProgram;
+        boolean flash;
+        double focalLength;
+        <a href="#WhiteBalanceMode">WhiteBalanceMode</a> whiteBalance;
+        <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a> gpsLocation;
+        double gpsAltitude;
+        DOMString gpsProcessingMethod;
+        Date gpsTime;
+        DOMString userComment;
+    };
+
+    [Constructor(optional <a href="#ExifInit">ExifInit</a>? ExifInitDict)]
+    interface ExifInformation {
+        attribute DOMString uri;
+
+        attribute unsigned long? width;
+
+        attribute unsigned long? height;
+
+        attribute DOMString? deviceMaker;
+
+        attribute DOMString? deviceModel;
+
+        attribute Date? originalTime;
+
+        attribute <a href="content.html#ImageContentOrientation">ImageContentOrientation</a>? orientation;
+
+        attribute double? fNumber;
+
+        attribute unsigned short[]? isoSpeedRatings;
+
+        attribute DOMString? exposureTime;
+
+        attribute <a href="#ExposureProgram">ExposureProgram</a>? exposureProgram;
+
+        attribute boolean? flash;
+
+        attribute double? focalLength;
+
+        attribute <a href="#WhiteBalanceMode">WhiteBalanceMode</a>? whiteBalance;
+
+        attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? gpsLocation;
+
+        attribute double? gpsAltitude;
+
+        attribute DOMString? gpsProcessingMethod;
+
+        attribute <a href="time.html#TZDate">TZDate</a>? gpsTime;
+
+        attribute DOMString? userComment;
+
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface ExifInformationSuccessCallback {
+        void onsuccess(<a href="#ExifInformation">ExifInformation</a> exifInfo);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface ExifThumbnailSuccessCallback {
+        void onsuccess(DOMString? uri);
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html
new file mode 100644 (file)
index 0000000..a3d5654
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html
@@ -0,0 +1,3401 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Filesystem API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Filesystem">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Filesystem API</h1></div>
+<div class="brief">
+ The Filesystem API provides access to a device's filesystem.
+        </div>
+<div class="description">
+        <p>
+The filesystem is represented as an abstract collection of disjointed filesystem virtual
+root locations, each corresponding to a specific location in the device
+filesystem. The filesystem API exposes the hierarchies below these root
+locations as a single virtual filesystem, but provides no access to other
+parts of the device filesystem.
+        </p>
+        <p>
+Each virtual root has a string name. Each file or directory within the virtual
+filesystem is addressed using a fully-qualified path of the form:
+<em>&lt;root name&gt;/&lt;path&gt;</em> where <em>&lt;rootname&gt;</em> is
+the name of the virtual root and <em>&lt;path&gt;</em> is the path to the file or
+directory relative to that root.
+        </p>
+        <p>
+The following virtual roots must be supported:
+        </p>
+        <ul>
+          <li>
+images - the location for images          </li>
+          <li>
+videos - the location for videos          </li>
+          <li>
+music - the location for sounds          </li>
+          <li>
+documents - the location for documents          </li>
+          <li>
+downloads - the location for downloaded items           </li>
+          <li>
+ringtones - the location for ringtones (read-only location)           </li>
+          <li>
+camera - the location for the pictures and videos taken by a device (supported since Tizen 2.3)           </li>
+          <li>
+wgt-package - the location for widget package which is read-only          </li>
+          <li>
+wgt-private - the location for a widget's private storage           </li>
+          <li>
+wgt-private-tmp - the location for a widget's private volatile storage          </li>
+        </ul>
+        <p>
+The file URI path is also supported. To access other paths out of virtual root, for example '/tmp/', 'file:///tmp' can be used as location parameter.
+        </p>
+        <p>
+To access specific locations apart from those specified above, a file handle must be retrieved using the <em>filesystem.resolve() </em>call.
+        </p>
+        <p>
+A file handle represents either a file or a directory:        </p>
+        <ul>
+          <li>
+For a file, the <em>isFile </em>attribute is set to <var>true</var>.          </li>
+          <li>
+For a directory, the <em>isDirectory </em>attribute is set to <var>true</var>.          </li>
+        </ul>
+        <p>
+A file can be opened for both read and write operations, using a
+FileStream handle. A list of files and sub-directories can be obtained from a
+directory and a resolve method exists to resolve files or sub-directories
+more conveniently than processing directory listings.
+        </p>
+        <p>
+The implementation must support the use of the following characters in file names:
+        </p>
+        <ul>
+          <li>
+Letters (a-z, A-Z)          </li>
+          <li>
+Numbers (0-9)          </li>
+          <li>
+Blank space          </li>
+          <li>
+Underscore ("_")          </li>
+          <li>
+Hyphen ("-")          </li>
+          <li>
+Period (".")          </li>
+        </ul>
+        <p>
+The implementation may support additional characters in file names, depending on platform support.
+        </p>
+        <p>
+The implementation may forbid the use of additional characters in file names, depending on the platform. The use of the path (component) separator "/" should not be allowed in file names.
+        </p>
+        <p>
+Some other file name and path characteristics are platform-dependent,
+for example, maximum path length, file name length, case sensitivity, additional
+character support, etc. Therefore, it is recommended to avoid any dependency
+on aspects that cannot be supported across multiple platforms.
+        </p>
+        <p>
+When a path is used to interact with the underlying filesystem, the encoding used for the file path should be the platform default.
+        </p>
+        <p>
+For more information on the Filesystem features, see <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">File System Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#FileMode">FileMode</a>
+</li>
+<li>1.2. <a href="#FileSystemStorageType">FileSystemStorageType</a>
+</li>
+<li>1.3. <a href="#FileSystemStorageState">FileSystemStorageState</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#FileSystemManagerObject">FileSystemManagerObject</a>
+</li>
+<li>2.2. <a href="#FileSystemManager">FileSystemManager</a>
+</li>
+<li>2.3. <a href="#FileSystemStorage">FileSystemStorage</a>
+</li>
+<li>2.4. <a href="#File">File</a>
+</li>
+<li>2.5. <a href="#FileFilter">FileFilter</a>
+</li>
+<li>2.6. <a href="#FileStream">FileStream</a>
+</li>
+<li>2.7. <a href="#FileSuccessCallback">FileSuccessCallback</a>
+</li>
+<li>2.8. <a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a>
+</li>
+<li>2.9. <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a>
+</li>
+<li>2.10. <a href="#FileStringSuccessCallback">FileStringSuccessCallback</a>
+</li>
+<li>2.11. <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a>
+</li>
+<li>2.12. <a href="#FileArraySuccessCallback">FileArraySuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#FileSystemManagerObject">FileSystemManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#FileSystemManager">FileSystemManager</a></td>
+<td>void <a href="#FileSystemManager::resolve">resolve</a> (DOMString location, <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileMode">FileMode</a>? mode)<br>
+    void <a href="#FileSystemManager::getStorage">getStorage</a> (DOMString label, <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#FileSystemManager::listStorages">listStorages</a> (<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    long <a href="#FileSystemManager::addStorageStateChangeListener">addStorageStateChangeListener</a> (<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#FileSystemManager::removeStorageStateChangeListener">removeStorageStateChangeListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#FileSystemStorage">FileSystemStorage</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#File">File</a></td>
+<td>DOMString <a href="#File::toURI">toURI</a> ()<br>
+    void <a href="#File::listFiles">listFiles</a> (<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileFilter">FileFilter</a>? filter)<br>
+    void <a href="#File::openStream">openStream</a> (<a href="#FileMode">FileMode</a> mode, <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding)<br>
+    void <a href="#File::readAsText">readAsText</a> (<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding)<br>
+    void <a href="#File::copyTo">copyTo</a> (DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#File::moveTo">moveTo</a> (DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    <a href="#File">File</a> <a href="#File::createDirectory">createDirectory</a> (DOMString dirPath)<br>
+    <a href="#File">File</a> <a href="#File::createFile">createFile</a> (DOMString relativeFilePath)<br>
+    <a href="#File">File</a> <a href="#File::resolve">resolve</a> (DOMString filePath)<br>
+    void <a href="#File::deleteDirectory">deleteDirectory</a> (DOMString directoryPath, boolean recursive, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#File::deleteFile">deleteFile</a> (DOMString filePath, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)</td>
+</tr>
+<tr>
+<td><a href="#FileFilter">FileFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#FileStream">FileStream</a></td>
+<td>void <a href="#FileStream::close">close</a> ()<br>
+    DOMString <a href="#FileStream::read">read</a> (long charCount)<br>
+    octet[] <a href="#FileStream::readBytes">readBytes</a> (long byteCount)<br>
+    DOMString <a href="#FileStream::readBase64">readBase64</a> (long byteCount)<br>
+    void <a href="#FileStream::write">write</a> (DOMString stringData)<br>
+    void <a href="#FileStream::writeBytes">writeBytes</a> (octet[] byteData)<br>
+    void <a href="#FileStream::writeBase64">writeBase64</a> (DOMString base64Data)</td>
+</tr>
+<tr>
+<td><a href="#FileSuccessCallback">FileSuccessCallback</a></td>
+<td>void <a href="#FileSuccessCallback::onsuccess">onsuccess</a> (<a href="#File">File</a> file)</td>
+</tr>
+<tr>
+<td><a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a></td>
+<td>void <a href="#FileSystemStorageArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#FileSystemStorage">FileSystemStorage</a>[] storages)</td>
+</tr>
+<tr>
+<td><a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a></td>
+<td>void <a href="#FileSystemStorageSuccessCallback::onsuccess">onsuccess</a> (<a href="#FileSystemStorage">FileSystemStorage</a> storage)</td>
+</tr>
+<tr>
+<td><a href="#FileStringSuccessCallback">FileStringSuccessCallback</a></td>
+<td>void <a href="#FileStringSuccessCallback::onsuccess">onsuccess</a> (DOMString fileStr)</td>
+</tr>
+<tr>
+<td><a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a></td>
+<td>void <a href="#FileStreamSuccessCallback::onsuccess">onsuccess</a> (<a href="#FileStream">FileStream</a> filestream)</td>
+</tr>
+<tr>
+<td><a href="#FileArraySuccessCallback">FileArraySuccessCallback</a></td>
+<td>void <a href="#FileArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#File">File</a>[] files)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="FileMode">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileMode"></a><h3>1.1. FileMode</h3>
+<div class="brief">
+ Specifies the file modes when it is opened.
+          </div>
+<pre class="webidl prettyprint">  enum FileMode { "r", "rw", "w", "a" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The file modes defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+r - read-only access            </li>
+            <li>
+rw - read and write access            </li>
+            <li>
+w - write access            </li>
+            <li>
+a - append access            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="FileSystemStorageType">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageType"></a><h3>1.2. FileSystemStorageType</h3>
+<div class="brief">
+ Specifies the type of storage.
+          </div>
+<pre class="webidl prettyprint">  enum FileSystemStorageType { "INTERNAL", "EXTERNAL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <ul>
+            <li>
+INTERNAL - Internal storage is a storage that cannot be removed, such as a flash memory.            </li>
+            <li>
+EXTERNAL - External storage is removable storage, such as a USB drive or memory cards.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="FileSystemStorageState">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageState"></a><h3>1.3. FileSystemStorageState</h3>
+<div class="brief">
+ Specifies the state of the storage.
+          </div>
+<pre class="webidl prettyprint">  enum FileSystemStorageState { "MOUNTED", "REMOVED", "UNMOUNTABLE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <ul>
+            <li>
+MOUNTED - The device is mounted and can be browsed.            </li>
+            <li>
+REMOVED - The device has been removed. This states applies only to external drives.            </li>
+            <li>
+UNMOUNTABLE - The device cannot be mounted due to an error.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="FileSystemManagerObject">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManagerObject"></a><h3>2.1. FileSystemManagerObject</h3>
+<div class="brief">
+ The FileSystemManagerObject interface defines what is instantiated by the Tizen object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileSystemManagerObject {
+    readonly attribute <a href="#FileSystemManager">FileSystemManager</a> filesystem;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#FileSystemManagerObject">FileSystemManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There is a <em>tizen.filesystem </em>object that allows accessing the functionality of the Filesystem API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="FileSystemManager">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager"></a><h3>2.2. FileSystemManager</h3>
+<div class="brief">
+ The FileSystemManager interface provides access to the Filesystem API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileSystemManager {
+    readonly attribute long maxPathLength;
+
+    void resolve(DOMString location,
+                 <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess,
+                 optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                 optional <a href="#FileMode">FileMode</a>? mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getStorage(DOMString label,
+                    <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listStorages(<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addStorageStateChangeListener(<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeStorageStateChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This manager interface exposes the Filesystem base API, and provides functionalities, such
+as determining root and default locations, resolving a given location into a file handle, and registering filesystem listeners for filesystem events.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     console.log("File Name is " + files[i].name); // displays file name
+   }
+
+   var testFile = documentsDir.createFile("test.txt");
+
+   if (testFile != null) {
+     testFile.openStream(
+       "w",
+       function(fs) {
+         fs.write("HelloWorld");
+         fs.close();
+       }, function(e) {
+         console.log("Error " + e.message);
+       }, "UTF-8"
+     );
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+   'documents',
+   function(dir) {
+     documentsDir = dir;
+     dir.listFiles(onsuccess, onerror);
+   }, function(e) {
+     console.log("Error" + e.message);
+   }, "rw"
+ );
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="FileSystemManager::maxPathLength">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">maxPathLength</span></span><div class="brief">
+ The maximum path length limit for the current platform.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log("The maximum path length is " + tizen.filesystem.maxPathLength);
+ </pre>
+</div>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSystemManager::resolve">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::resolve"></a><code><b><span class="methodName">resolve</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Resolves a location to a file handle after validating it.<br>            </div>
+<div class="synopsis"><pre class="signature prettyprint">void resolve(DOMString location, <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileMode">FileMode</a>? mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+A location can contain a virtual path like '<var>documents/some_file.txt</var>'
+or a file's URI '<var>file:///my_strange_path/some_file.png</var>'.
+            </p>
+            <p>
+The list of root locations that must be supported by a compliant implementation are:
+            </p>
+            <ul>
+              <li>
+documents - The default folder in which text documents (such as pdf, doc...) are stored by default in a device. For example, in some platforms it corresponds to the "My Documents" folder.              </li>
+              <li>
+images - The default folder in which still images, like pictures (in formats including jpg, gif, png, etc.), are stored in the device by default. For example, in some platforms it corresponds to the "My Images" folder.              </li>
+              <li>
+music - The default folder in which sound clips (in formats including mp3, aac, etc.) are stored in the device by default. For example, in some platforms it corresponds to the "My Music" folder.              </li>
+              <li>
+videos - The default folder in which video clips (in formats including avi, mp4, etc.) are stored in the device by default. For example, in some platforms it corresponds to the "My Videos" folder.              </li>
+              <li>
+downloads - The default folder in which downloaded files (from sources including browser, e-mail client, etc.) are stored by default in the device. For example, in some platforms it corresponds to the "Downloads" folder.              </li>
+              <li>
+ringtones: The default folder in which ringtones (such as mp3, etc) are stored in the device.              </li>
+              <li>
+camera : The default folder in which pictures and videos taken by a device are stored.              </li>
+              <li>
+wgt-package - The read-only folder to which the content of a widget file is extracted.              </li>
+              <li>
+wgt-private - The private folder in which a widget stores its information. This folder must be accessible only to the same widget and other widgets or applications must not be able to access the stored information.              </li>
+              <li>
+wgt-private-tmp - Temporary, the private folder in which a widget can store data that is available during a widget execution cycle. Content of this folder can be removed from this directory when the widget is closed or the Web Runtime is restarted. This folder must be accessible only to the same widget and other widgets or applications must not be able to access it.              </li>
+            </ul>
+            <p>
+The <em>mode </em>parameter specifies whether the resulting <em>File </em>object has read-only access ("r" access), read and write access ("rw" access), append access ("a" access), or write access ("w" access) to the root location containing directory tree.
+Permission for the requested access is obtained from the security framework. Once the resulting <em>File </em>object has access, access is inherited by any other <em>File </em>objects that are derived from this instance without any further reference to the security framework, as noted in descriptions of certain methods of <em>File</em>.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.
+For example, the mode is "w" for the read-only virtual roots (wgt-package and ringtones).              </li>
+              <li>
+NotFoundError - If the location input argument does not correspond to a valid location.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<p><span class="remark"> Remark : </span>
+ <var>camera</var> location is supported since Tizen 2.3. If a device does not support camera, NotSupportedError will be thrown.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">location</span>: 
+  Location to resolve that can be a virtual path or file URI
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when the location has been successfully resolved, passing the newly created <em>File </em>object
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+          <li class="param">
+<span class="name">mode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+      Optional value to indicate the file access mode on all files and directories that can be reached from the <em>File </em>object passed to onsuccess <br>Default value of this parameter is <var>rw</var> if absent or <var>null</var>.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported (e.g. in the case of 'camera' virtual path if the device does not support camera)
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.filesystem.resolve(
+   'images',
+   function(dir) {
+     console.log("Mount point Name is " +  dir.path);
+   }, function(e) {
+     console.log("Error: " + e.message);
+   }, "r"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::getStorage">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::getStorage"></a><code><b><span class="methodName">getStorage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets information about a storage based on its label.<br>For example: "MyThumbDrive", "InternalFlash".
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getStorage(DOMString label, <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The <em>onsuccess </em>method receives the data structure as an input argument containing additional information about the drive.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If no drive was found with the given label.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">label</span>: 
+     Storage label
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when the list of storage is available, passing the storage list to the callback
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onStorage(storage) {
+     // Do something
+ }
+
+ function onStorageError(e) {
+ console.log("Storage not found!" + e.message);
+ }
+
+ tizen.filesystem.getStorage("music", onStorage, onStorageError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::listStorages">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::listStorages"></a><code><b><span class="methodName">listStorages</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Lists the available storages (both internal and external) on a device.
+The onsuccess method receives a list of the data structures as input argument containing additional information about each drive found.
+It can get storages that would have a label named as 'internal0', virtual roots (images, documents,...), 'removable1', 'removable2'.
+'removable1' label is used to resolve sdcard and 'removable2' label is used to resolve USB host, if supported.
+The vfat filesystem used to sdcard filesystem widely is not case-sensitive.
+If you want to handle the file on sdcard, you need to consider case-sensitive filenames are regarded as same name.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void listStorages(<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Labels can differ depending on platform implementation.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a list of storage is available, and passing the storage list to the callback
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function alertForCorruptedRemovableDrives(storages) {
+     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.");
+     }
+ }
+
+ tizen.filesystem.listStorages(alertForCorruptedRemovableDrives);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::addStorageStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::addStorageStateChangeListener"></a><code><b><span class="methodName">addStorageStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to subscribe to notifications when a change in storage state occurs.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addStorageStateChangeListener(<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The most common usage for this method is to watch for any additions and removals of external storages.
+            </p>
+            <p>
+When executed, it returns a subscription identifier that identifies the watch operation. After returning the identifier, the watch operation is started asynchronously. The onsuccess method will be invoked every time a storage state changes. If the attempt fails, the onerror if present will be invoked with the relevant error type.
+            </p>
+            <p>
+The watch operation must continue until the removeStorageStateChangeListener() method is called with the corresponding subscription identifier.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when any change is made to storage state
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs during the watch process
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watchID;
+ function onStorageStateChanged(storage) {
+     if (storage.state == "MOUNTED")
+         console.log("Storage " + storage.label + " was added!");
+ }
+
+ watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::removeStorageStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::removeStorageStateChangeListener"></a><code><b><span class="methodName">removeStorageStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a listener to unsubscribe from a storage watch operation.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeStorageStateChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the <em>watchId </em>argument is valid and corresponds to a subscription already in place, the watch process will be stopped and no further callbacks will be invoked.
+Otherwise, the method call has no effect.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watchID;
+ function onStorageStateChanged(storage) {
+     if (storage.state == "MOUNTED")
+         console.log("Storage " + storage.label + " was added!");
+     tizen.filesystem.removeStorageStateChangeListener(watchID);
+ }
+
+ watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSystemStorage">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorage"></a><h3>2.3. FileSystemStorage</h3>
+<div class="brief">
+ The FileSystemStorage interface gives additional information about a storage, such as if the device is mounted, if it is a removable drive or not, or the device's name.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileSystemStorage {
+    readonly attribute DOMString label;
+
+    readonly attribute <a href="#FileSystemStorageType">FileSystemStorageType</a> type;
+
+    readonly attribute <a href="#FileSystemStorageState">FileSystemStorageState</a> state;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+To retrieve the mount point, the resolve() method should be used using the label as argument.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="FileSystemStorage::label">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">label</span></span><div class="brief">
+ The storage name.
+            </div>
+<div class="description">
+            <p>
+This attribute is used as an input for methods such as getStorage() and also used as <em>location</em> parameter for File.resolve() and FileSystemManager.resolve().
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="FileSystemStorage::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">FileSystemStorageType </span><span class="name">type</span></span><div class="brief">
+ The storage type as internal or external.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="FileSystemStorage::state">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">FileSystemStorageState </span><span class="name">state</span></span><div class="brief">
+ The storage state as mounted or not.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="File">
+<a class="backward-compatibility-anchor" name="::Filesystem::File"></a><h3>2.4. File</h3>
+<div class="brief">
+ The File interface represents the file abstraction in use.
+A file handle represents a file if the <em>isFile </em>property is <var>true</var>,
+and if the <em>isFile </em>property is <var>false</var>, the file handle represents a directory.
+If a file handle represents a directory, it can address files and directories.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface File {
+    readonly attribute <a href="#File">File</a>? parent;
+
+    readonly attribute boolean readOnly;
+
+    readonly attribute boolean isFile;
+
+    readonly attribute boolean isDirectory;
+
+    readonly attribute Date? created;
+
+    readonly attribute Date? modified;
+
+    readonly attribute DOMString path;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString fullPath;
+
+    readonly attribute unsigned long long fileSize;
+
+    readonly attribute long length;
+
+    DOMString toURI() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listFiles(<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess,
+                   optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                   optional <a href="#FileFilter">FileFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void openStream(<a href="#FileMode">FileMode</a> mode,
+                    <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void readAsText(<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void copyTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void moveTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createDirectory(DOMString dirPath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createFile(DOMString relativeFilePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> resolve(DOMString filePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteDirectory(DOMString directoryPath,
+                         boolean recursive,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteFile(DOMString filePath,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The file object permissions for the file object location and tree rooted
+at that location depends upon the mode defined in the resolve method.
+When a File object creates a child File object,
+the new File object inherits its access rights from
+the parent object without any reference to the security framework, as
+noted in certain methods of File.
+          </p>
+          <p>
+A file handle representing a file can be opened for I/O operations,
+such as reading and writing.
+          </p>
+          <p>
+A file handle representing a directory can be used for listing all
+files and directories rooted as the file handle location.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     // alerts each name of dir's contents
+     console.log(files[i].name);
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred when listing the files in the selected folder");
+ }
+
+ // list directory contents
+ dir.listFiles(onsuccess, onerror);
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="File::parent">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">File </span><span class="name">parent</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The parent directory handle.
+            </div>
+<div class="description">
+            <p>
+This attribute is set to<var>null</var> if there is no parent directory. This also implies that this directory represents a root location.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // list directory contents
+ dir.listFiles(onsuccess, onerror);
+
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     // prints the file parent, should contain the
+     // same value for all the files in the loop
+     console.log("All the files should have the same parent " +
+                 files[i].parent);
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred when listing the files in the selected folder");
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::readOnly">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">readOnly</span></span><div class="brief">
+ The file/directory access state in the filesystem.
+            </div>
+<div class="description">
+            <p>
+This attribute is set to:
+            </p>
+            <ul>
+              <li>
+<var>true</var> - if object has read-only access at its location.              </li>
+              <li>
+<var>false</var> - if object has write access at its location.              </li>
+            </ul>
+            <p>
+This attribute represents the actual state of a file or directory in the filesystem. Its value is not affected by the mode used in FileSystemManager.resolve() that was used to create the <em>File </em>object from which this <em>File </em>object was obtained.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // lists directory contents
+ dir.listFiles(onsuccess, onerror);
+
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].readOnly)
+       console.log("Cannot write to file " + files[i].name);
+     else
+       console.log("Can write to file " + files[i].name);
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::isFile">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isFile</span></span><div class="brief">
+ The flag indicating whether it is a file.
+            </div>
+<div class="description">
+            <p>
+This attribute can have the following values:
+            </p>
+            <ul>
+              <li>
+<var>true</var> if this handle is a file              </li>
+              <li>
+<var>false</var> if this handle is a directory              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="File::isDirectory">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isDirectory</span></span><div class="brief">
+ The flag indicating whether it is a directory.
+            </div>
+<div class="description">
+            <p>
+This attribute can have the following values:
+            </p>
+            <ul>
+              <li>
+<var>true</var> if this handle is a directory              </li>
+              <li>
+<var>false</var> if this handle is a file              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="File::created">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">created</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The timestamp when a file is first created in the filesystem.
+            </div>
+<div class="description">
+            <p>
+This timestamp is equivalent to the timestamp when a call to createFile() succeeds.
+            </p>
+            <p>
+If the platform does not support this attribute, it will
+be <var>null</var>.
+            </p>
+            <p>
+It is unspecified and platform-dependent if the creation
+timestamp changes when a file is moved.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="File::modified">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modified</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The timestamp when the most recent modification is made to a file, usually when the last write operation succeeds.
+            </div>
+<div class="description">
+            <p>
+Opening a file for reading does not change the modification timestamp.
+            </p>
+            <p>
+If the platform does not support this attribute, it will be <em>null</em>.
+            </p>
+            <p>
+It is unspecified and platform-dependent if the modified
+timestamp changes when a file is moved.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(file.modified); // displays the modification timestamp
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::path">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">path</span></span><div class="brief">
+ The path of a file after excluding its file name.
+            </div>
+<div class="description">
+            <p>
+It begins with the name of the root containing the file, followed by the path, including the directory containing the file, but excluding the file name.
+            </p>
+            <p>
+Except in some special cases of the File representing the root itself, the last
+character is always '/'.
+            </p>
+            <p>
+For example, if a file is located at music/ramones/volume1/RockawayBeach.mp3,
+the path is music/ramones/volume1/.
+            </p>
+            <p>
+For example, if a directory is located at music/ramones/volume1, the path is
+music/ramones/.
+            </p>
+            <p>
+For the virtual roots, the path is same as the name of the virtual root.
+For example, if the root is music, then the path is music. If the root is documents, then the path is documents.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(file.path); // should be 'music/' if the file is music/foo.mp3
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The file name after excluding the root name and any path components.
+            </div>
+<div class="description">
+            <p>
+This is the name of this file, excluding the root name and any other path components.
+            </p>
+            <p>
+For example, if a file is located at
+music/ramones/volume1/RockawayBeach.mp3, the <em>name </em> is 'RockawayBeach.mp3'.
+            </p>
+            <p>
+For example, if a directory is located at music/ramones/volume1, the
+<em>name </em> is be 'volume1'.
+            </p>
+            <p>
+For the special case of the root itself, the <em>name </em> is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // should be foo.mp3 if the file path is music/foo.mp3
+ console.log(file.name);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::fullPath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">fullPath</span></span><div class="brief">
+ The full path of a file.
+            </div>
+<div class="description">
+            <p>
+It begins with the name of the root containing the file,
+and including the name of the file or directory itself.
+            </p>
+            <p>
+For instance, if the RockawayBeach.mp3 file is located at music/ramones/volume1/, then the <em>fullPath </em>is music/ramones/volume1/RockawayBeach.mp3.
+            </p>
+            <p>
+For a directory, if the volume1 directory is located at music/ramones/, then the <em>fullPath </em>is music/ramones/volume1.
+            </p>
+            <p>
+For the special case of the root itself, if the root is music, then the <em>fullPath </em>is music.
+            </p>
+            <p>
+The <em>fullPath </em>is always equal to path + name.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // should be music/track1.mp3 if the file is music/track1.mp3
+ console.log(file.fullPath);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::fileSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">fileSize</span></span><div class="brief">
+ The size of this file, in bytes.
+            </div>
+<div class="description">
+            <p>
+If an attempt to read this attribute for a directory is made, <var>undefined</var> is returned. To retrieve the number of files and directories contained in the directory, use the <em>length </em>attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // displays the file size
+ console.log(file.fileSize);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::length">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">length</span></span><div class="brief">
+ The number of files and directories contained in a file handle.
+            </div>
+<div class="description">
+            <p>
+If an attempt to read this attribute for a file is made, <var>undefined</var> is returned. To retrieve the size of a file, use the <em>fileSize </em>attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // '3' if the directory contains two files and one sub-directory
+ console.log(file.length);
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="File::toURI">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::toURI"></a><code><b><span class="methodName">toURI</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns a URI for a file to identify an entry (such as using it as the src attribute on an HTML img element).
+The URI has no specific expiration, it should be valid at least as long as the file exists.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toURI();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If that URI corresponds to any of the public virtual roots (that is
+images, videos, music, documents, and downloads) the URI
+must be globally unique and could be used by any widget.
+            </p>
+            <p>
+If that URI corresponds to a file located in any a widget's private areas (such as wgt-package, wgt-private, wgt-private-tmp),
+the generated URI must be unique for that file and for the widget making the request (such as including some derived from the widget ID in the URI).
+These URIs must not be accessible to other widgets, apart from the one invoking this method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString URI that identifies the file or <var>null </var>if an error occurs
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurred.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.filesystem.resolve('music/ramones/RockawayBeach.mp3', function(file) {
+   var audio = new Audio(file.toURI());
+   audio.play();
+   console.log(file.toURI());
+ });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::listFiles">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::listFiles"></a><code><b><span class="methodName">listFiles</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Lists all files in a directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void listFiles(<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileFilter">FileFilter</a>? filter);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The list of files is passed as a File[] in onsuccess() and contains directories and files. However, the directories "." and ".." must not be returned. Each <em>File </em>object that is part of the array must inherit all the access rights (that is, one of the values in FileMode) from the <em>File </em>object in which this method is invoked.
+            </p>
+            <p>
+If the filter is passed and contains valid values, only those directories and files in the directory that match the filter criteria specified in the <em>FileFilter </em>interface must be returned in the onsuccess() method. If no filter is passed, the filter is <var>null </var>or <var>undefined</var>, or the filter contains invalid values, the implementation must return the full list of files in the directory.
+            </p>
+            <p>
+If the directory does not contain any files or directories, or the filter criteria does not matched with any files or directories, the onsuccess() is invoked with an empty array.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+IOError - If the operation is launched on a file (not a directory).              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when the list operation has been successfully completed
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+    Criteria to restrict the listed files
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   console.log("There are " + files.length  + " in the selected folder");
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     "documents",
+     function(dir) {
+       dir.listFiles(onsuccess, onerror);
+     }, function(e) {
+       console.log("Error " + e.message);
+     }, "r"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::openStream">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::openStream"></a><code><b><span class="methodName">openStream</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Opens the file in the given mode supporting a specified encoding.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void openStream(<a href="#FileMode">FileMode</a> mode, <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This operation is performed asynchronously. If the file is opened successfully, the onsuccess() method is invoked with a <em>FileStream</em> that can be used for reading and writing the file, depending on the mode. The returned <em>FileStream </em>instance includes a file pointer, which represents the current position in the file. The file pointer, by default, is at the start of the file, except in the case of opening a file in append ("a") mode, in which case the file pointer points to the end of the file.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+IOError - The operation is launched on a directory (not a file), the file is not valid or it does not exist.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+      Mode in which the file is opened<br><b>"r"</b> for reading<br><b>"a"</b> for appending<br><b>"w"</b> for [over]writing<br><b>"rw"</b> for reading and writing<br>                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a file has been opened
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+          <li class="param">
+<span class="name">encoding</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+  Encoding to use for read/write operations on the file, at least the following encodings must be supported:<br>"<a href="http://www.ietf.org/rfc/rfc2279.txt">UTF-8</a>" default encoding<br>"<a href="http://en.wikipedia.org/wiki/ISO/IEC_8859-1">ISO-8859-1</a>" latin1 encoding<br>If no encoding is passed by the developer, then the default platform encoding must be used.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     console.log("File Name is " + files[i].name); // displays file name
+   }
+
+   var testFile = documentsDir.createFile("test.txt");
+   if (testFile != null) {
+     testFile.openStream(
+         "w",
+         function(fs) {
+           fs.write("HelloWorld");
+           fs.close();
+         }, function(e) {
+           console.log("Error " + e.message);
+         }, "UTF-8"
+     );
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir; dir.listFiles(onsuccess,onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::readAsText">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::readAsText"></a><code><b><span class="methodName">readAsText</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the content of a file as a DOMString.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void readAsText(<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the operation is successfully executed, the onsuccess() method is invoked and a DOMString is passed as input parameter that represents the file content in the format determined by the <em>encoding </em>parameter.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+IOError - If the operation is launched on a directory (not a file), the file is not valid, or the file does not exist.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a file has been successfully read
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs while reading a file
+                </li>
+          <li class="param">
+<span class="name">encoding</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+  Encoding for read/write operations on a file, at least the following encodings must be supported:<br>"<a href="http://www.ietf.org/rfc/rfc2279.txt">UTF-8</a>" default encoding<br>"<a href="http://en.wikipedia.org/wiki/ISO/IEC_8859-1">ISO-8859-1</a>" latin1 encoding<br>If no encoding is passed by the developer, then the default platform encoding must be used.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     console.log("File Name is " + files[i].name); // displays file name
+     if (files[i].isDirectory == false)
+       files[i].readAsText(
+           function(str) {
+             console.log("The file content " + str);
+           }, function(e) {
+             console.log("Error " + e.message);
+           }, "UTF-8"
+       );
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ var documentsDir;
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess,onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::copyTo">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::copyTo"></a><code><b><span class="methodName">copyTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Copies (and overwrites if possible and specified) a file or a
+directory from a specified location to another specified location.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void copyTo(DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The copy of the file or directory identified by the <em>originFilePath </em>parameter must be created in the path passed in the <em>destinationFilePath </em>parameter.
+            </p>
+            <p>
+The file or directory to copy must be under the Directory from which the method is invoked, otherwise the operation must not be performed.
+            </p>
+            <p>
+If the copy is performed successfully, the onsuccess() method is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError - If the <em>originFilePath </em>does not correspond to a valid file or <em>destinationPath </em>is not a valid path.              </li>
+              <li>
+IOError - If the file in which the copyTo() method is invoked is a file (and not a directory), <em>originFilePath </em>corresponds to a file or directory in use by another process, <em>overwrite </em>parameter is <var>false</var> and <em>destinationFilePath </em>corresponds to an existing file or directory.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">originFilePath</span>: 
+      Origin full virtual file or directory path and it must be under the current directory
+                </li>
+          <li class="param">
+<span class="name">destinationFilePath</span>: 
+ New full virtual file path or directory path
+                </li>
+          <li class="param">
+<span class="name">overwrite</span>: 
+           Attribute to determine whether overwriting is allowed or not <br>If set to <var>true</var>, it enforces overwriting an existing file.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           Callback method to be invoked when the file has been copied
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+             Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].isDirectory == false) {
+       documentsDir.copyTo(files[i].fullPath,
+                           "images/backup/" + files[i].name,
+                           false,
+                           function() {console.log("file copied");});
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess, onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::moveTo">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::moveTo"></a><code><b><span class="methodName">moveTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Moves (and overwrites if possible and specified) a file or a directory from a specified location to another.
+This operation is different from instantiating copyTo() and then deleting the original file, as on certain platforms, this operation does not require extra disk space.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void moveTo(DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The file or directory identified by the <em>originFilePath </em>parameter is moved to the path passed in the <em>destinationFilePath </em>parameter.
+            </p>
+            <p>
+The file to move must be under the directory from which the method is invoked, else the operation can not be performed.
+            </p>
+            <p>
+If the file or directory is moved successfully, the onsuccess() method is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError - If <em>originFilePath </em>does not correspond to a valid file or <em>destinationPath </em>is not a valid path.              </li>
+              <li>
+IOError - If the <em>File </em>in which the moveTo() method is invoked is a file (not a directory), <em>originFilePath </em>corresponds to a file or directory in use by another process, overwrite parameter is <var>false</var> and <em>destinationFilePath </em>corresponds to an existing file or directory.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">originFilePath</span>: 
+      Origin full virtual file or directory path, and it must be under the current directory
+                </li>
+          <li class="param">
+<span class="name">destinationFilePath</span>: 
+ New full virtual file path or directory path
+                </li>
+          <li class="param">
+<span class="name">overwrite</span>: 
+           Flag indicating whether to overwrite an existing file.<br>When set to <var>true</var>, the files can be overwritten.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           Callback method to be invoked when the file has been moved
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+             Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].isDirectory == false) {
+       documentsDir.moveTo(files[i].fullPath,
+                           "images/newFolder/" + files[i].name,
+                           false,
+                           function() {console.log("file moved");});
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred during listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess, onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::createDirectory">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::createDirectory"></a><code><b><span class="methodName">createDirectory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a new directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#File">File</a> createDirectory(DOMString dirPath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+A new directory will be created relative to the current
+directory that this operation is performed on. The implementation will attempt to
+create all necessary sub-directories specified in the dirPath, as well. The use of "."
+or ".." in path components is not supported.
+            </p>
+            <p>
+This operation can only be performed on file handlers that represent a directory (that is, <em>isDirectory</em> == <var>true</var>).
+            </p>
+            <p>
+If the directory is successfully created, it will be returned.
+            </p>
+            <p>
+In case the directory cannot be created, an error must be thrown with the appropriate error type.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">dirPath</span>: 
+ Relative directory path, and it only contains characters supported by the underlying filesystem
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ File File handle of the new directory
+The new <em>File </em>object has "rw" access rights, as it inherits this from the <em>File </em>object on which the createDirectory() method is called.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if the dirPath already exists,  if the file in which the createDirectory() method is invoked is a file (and not a directory).
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the dirPath does not contain a valid path.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var dir; //Directory object obtained from filesystem API
+ var newDir = dir.createDirectory("newDir");
+ var anotherNewDir = dir.createDirectory("newDir1/subNewDir1");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::createFile">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::createFile"></a><code><b><span class="methodName">createFile</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a empty new file in a specified location that is relative to the directory indicated by current <em>File</em> object's <em>path</em> attribute.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#File">File</a> createFile(DOMString relativeFilePath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The use of "." or ".." in path components is not supported. This operation can only be performed on file handlers that represent a directory (that is, <em>isDirectory </em>== <var>true</var>).
+            </p>
+            <p>
+If the file is successfully created, a file handler must be returned by this method.
+            </p>
+            <p>
+In case the file cannot be created, an error must be thrown with the appropriate error type.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">relativeFilePath</span>: 
+ New file path and it should only contain characters supported by the underlying Filesystem
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ File File handle for the new empty file
+The new <em>File </em>object has "rw" access rights, as it inherits this from the <em>File <em>object on which the createFile() method is
+called.
+</em></em>              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if the filePath already exists, if the <em>File </em>in which the createFile() method is invoked is a file (not a directory).
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the filePath contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var newFile = dir.createFile("newFilePath");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::resolve">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::resolve"></a><code><b><span class="methodName">resolve</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Resolves an existing file or directory relative to the current directory this operation is performed on, and returns a file handle for it.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#File">File</a> resolve(DOMString filePath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The filePath is not allowed to contain the "." or ".." directories.
+            </p>
+            <p>
+The encoding of file paths is <a href="http://www.ietf.org/rfc/rfc2279.txt">UTF-8</a>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filePath</span>: 
+ Relative file/directory path/file URI to resolve
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ File File handle of the file
+The new <em>File </em>object inherits its access rights from the <em>File </em>object on which this resolve() method is called.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the file path contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if the method is executed in a <em>File </em>object that does not represent a directory (that is, <em>isDirectory </em>attribute is <var>false</var>).
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if a file does not exist for the passed file path.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var file;
+ // Resolves helloWorld.doc file that is located in the
+ // documents root location
+ tizen.filesystem.resolve(
+   'documents',
+   function(dir) { file = dir.resolve("helloWorld.doc");},
+   function(e) { console.log("Error" + e.message);},
+   "rw");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::deleteDirectory">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::deleteDirectory"></a><code><b><span class="methodName">deleteDirectory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Deletes a specified directory and directory tree if specified.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void deleteDirectory(DOMString directoryPath, boolean recursive, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method attempts to asynchronously delete a directory or directory tree under the current directory.
+            </p>
+            <p>
+If the <em>recursive </em>parameter is set to <var>true</var>, all the directories and files under the specified directory must be deleted. If the <em>recursive </em>parameter is set to <var>false</var>, the directory is only deleted if it is empty, otherwise an IOError error type will be passed in onerror().
+            </p>
+            <p>
+If the deletion is performed successfully, the onsuccess() is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError -If the passed directory does not correspond to a valid directory.              </li>
+              <li>
+IOError - If the <em>File </em>in which the delete method is invoked is a file (and not a directory), the directory is in use by another process or the directory is not empty and <em>recursive </em>argument is <var>false</var>.<br>This code is also used if a recursive deletion partially fails and any data deleted so far cannot be recovered. This may occur due to the lack of filesystem permissions or if any directories or files are already opened by other processes.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">directoryPath</span>: 
+ Full virtual path to the directory to delete (must be under the current one)
+                </li>
+          <li class="param">
+<span class="name">recursive</span>: 
+     Flag indicating whether the deletion is recursive or not <br>When set to <var>true</var> recursive deletion is allowed. Also, this function deletes
+all data in all subdirectories and so needs to be used with caution.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+     Callback method to be invoked when a directory is successfully deleted
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+       Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].isDirectory) {
+       documentsDir.deleteDirectory(
+           files[i].fullPath,
+           false,
+           function() {
+             console.log("Directory Deleted");
+           }, function(e) {
+             console.log("Error" + e.message);
+           });
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess,onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::deleteFile">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::deleteFile"></a><code><b><span class="methodName">deleteFile</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Deletes a specified file.<br>This function attempts to asynchronously delete a file under the current directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void deleteFile(DOMString filePath, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the deletion is performed successfully, the onsuccess() is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError - If the file does not correspond to a valid file.              </li>
+              <li>
+IOError - If the file in which the delete() method is invoked is a file (not a directory), the file is in use by another process, or there is no permission in the file system.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filePath</span>: 
+  Full virtual path to the file to delete (must be under the current directory)
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the file is successfully deleted
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (!files[i].isDirectory) {
+       documentsDir.deleteFile(
+           files[i].fullPath,
+           function() {
+             console.log("File Deleted");
+           }, function(e) {
+             console.log("Error" + e.message);
+           });
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ var documentsDir;
+ tizen.filesystem.resolve(
+   'documents',
+   function(dir) {
+     documentsDir = dir;
+     dir.listFiles(onsuccess,onerror);
+   }, function(e) {
+     console.log("Error" + e.message);
+   }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="FileFilter">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileFilter"></a><h3>2.5. FileFilter</h3>
+<div class="brief">
+ The dictionary that defines attributes to filter the items returned by the listFiles() method.
+          </div>
+<pre class="webidl prettyprint">  dictionary FileFilter {
+    DOMString name;
+
+    Date startModified;
+
+    Date endModified;
+
+    Date startCreated;
+
+    Date endCreated;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+When this dictionary is passed in the listFiles() method, the result-set of the listFiles() method must only contain the file items entries that match the attribute values of the filter.
+          </p>
+          <p>
+A file item only matches the <em>FileFilter </em>object if all the attributes of the file item match all the attribute values of the filter which are defined (that is, only matching values other than <var>undefined </var>or <var>null</var>). This is similar to an SQL "AND" operation.
+          </p>
+          <p>
+An attribute of the file entry matches the <em>FileFilter </em>attribute value in accordance with the
+following rules:
+          </p>
+          <ul>
+            <li>
+For <em>FileFilter </em>attributes of type DOMString, an entry matches this value only if its corresponding attribute is an exact match. If the filter contains U+0025 'PERCENT SIGN' it is interpreted as a wildcard character and '%' matches any string of any length, including no length. If wildcards are used, the behavior is similar to the LIKE condition in SQL. To specify that a 'PERCENT SIGN' character is to be considered literally instead of interpreting it as a wildcard, developers can escape it with the backslash character (\).
+The matching is not case sensitive, such as "FOO" matches a "foo" or an "f%" filter.
+            </li>
+            <li>
+For File entry attributes of type Date, attributes start and end are included to allow filtering of File entries between two supplied dates. If either or both of these attributes are specified, the following rules apply:<br>A) If both start and end dates are specified (that is, other than <var>null</var>), a File entry matches the filter if its corresponding attribute is the same as either start or end or between the two supplied dates (that is, after start and before end).<br>B) If only the start attribute contains a value (other than <var>null</var>), a File entry matches the filter if its corresponding attribute is later than or equal to the start one.<br>C) If only the end date contains a value (other than <var>null</var>), a file matches the filter if its corresponding attribute is earlier than or equal to the end date.
+            </li>
+          </ul>
+         </div>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="FileFilter::name"><span class="attrName">DOMString name</span></dt>
+<dd>
+<div class="brief">
+ The File name attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files that have a name that corresponds with this attribute (either exactly or with the specified wildcards) match this filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::startModified"><span class="attrName">Date startModified</span></dt>
+<dd>
+<div class="brief">
+ The File modified attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with modified date later than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::endModified"><span class="attrName">Date endModified</span></dt>
+<dd>
+<div class="brief">
+ The File modified attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with modified date earlier than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::startCreated"><span class="attrName">Date startCreated</span></dt>
+<dd>
+<div class="brief">
+ The File created attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with created date later than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::endCreated"><span class="attrName">Date endCreated</span></dt>
+<dd>
+<div class="brief">
+ The File created attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with created date earlier than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileStream">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream"></a><h3>2.6. FileStream</h3>
+<div class="brief">
+ The FileStream interface represents a handle to a File opened for read and/or write operations.
+Read and write operations are performed relative to a position attribute, which is a pointer that represents the current position in the file.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileStream {
+    readonly attribute boolean eof;
+
+    attribute long position setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long bytesAvailable;
+
+    void close();
+
+    DOMString read(long charCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    octet[] readBytes(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString readBase64(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void write(DOMString stringData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBytes(octet[] byteData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBase64(DOMString base64Data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+A series of read/write methods are available that permit both binary and text to be processed.
+          </p>
+          <p>
+Once a file stream is closed, any operation attempt made on this stream results in a standard JavaScript error.
+          </p>
+          <p>
+The read/write operations in this interface do not throw any security exceptions as the access rights are expected to be granted through the initial resolve() method or through the openStream() method of the <em>File </em>interface. Therefore, all actions performed on a successfully resolved File and FileStream are expected to succeed. This avoids successive asynchronous calls and may potentially increase application for a user.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="FileStream::eof">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">eof</span></span><div class="brief">
+ The flag indicating whether the current file pointer is at the end of the file.
+            </div>
+<div class="description">
+            <p>
+If set to <var>true</var>, this attribute indicates that the file pointer is at the end of the file.
+            </p>
+            <p>
+If set to <var>false</var>, this attribute indicates that the file pointer is not at the end of the file and so it is anywhere within the file.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> if (stream.eof) {
+   // file has been read completely
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="FileStream::position">
+<span class="attrName"><span class="type">long </span><span class="name">position</span></span><div class="brief">
+ The flag indicating the stream position for reads/writes.
+            </div>
+<div class="description">
+            <p>
+The stream position is an offset of bytes from the start of the file stream. When invoking an operation that reads or writes from the stream, the operation will take place from the byte defined by this <em>position </em>attribute. If the read or write operation is successful, the position of the stream is advanced by the number of bytes read or written. If the read/write operation is not successful, the position of the stream is unchanged.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(stream.position); // displays current stream position
+ // alters current stream position to the begin of the file,
+ // like seek() in C
+ stream.position = 0;
+ </pre>
+</div>
+</li>
+<li class="attribute" id="FileStream::bytesAvailable">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">bytesAvailable</span></span><div class="brief">
+ The number of bytes that are available for reading from the stream.
+            </div>
+<div class="description">
+            <p>
+The number of bytes available for reading is the maximum amount of bytes that can be read in the next read operation.
+It corresponds to the number of bytes available after the file pointer denoted by the <em>position </em>attribute.
+            </p>
+            <p>
+<var>-1 </var>if EOF is <var>true</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(stream.bytesAvailable); // displays the available bytes to be read
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileStream::close">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes this FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Flushes any pending buffered writes and closes the File. Always succeeds.
+Note that pending writes might not succeed.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> stream.close(); // closes this stream, no subsequent access to stream allowed
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::read">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::read"></a><code><b><span class="methodName">read</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the specified number of characters from the position of the file pointer in a FileStream and returns the characters as a string.
+The resulting string length might be shorter than <em>charCount </em>if EOF is <var>true</var>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString read(long charCount);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">charCount</span>: 
+ Number of characters being read
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString Array of read characters as a string
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a read error occurs, such as the bytes in the stream cannot be decoded with the encoding in use.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError,  if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var text = stream.read(file.fileSize);
+ stream.close();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::readBytes">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::readBytes"></a><code><b><span class="methodName">readBytes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the specified number of bytes from a FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">octet[] readBytes(long byteCount);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">byteCount</span>: 
+ Number of bytes to read
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ octet[] Result of read bytes as a byte (or number) array
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a read error occurs.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // reads up to 256 bytes from the stream
+ var raw = stream.readBytes(256);
+ for (var i = 0; i &lt; raw.length; i++) {
+   // raw[i] contains the i-th byte of the current data chunk
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::readBase64">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::readBase64"></a><code><b><span class="methodName">readBase64</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the specified number of bytes from this FileStream, encoding the result in base64.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString readBase64(long byteCount);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param"><span class="name">byteCount</span></li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // reads up to 256 bytes from the stream
+ var base64 = stream.readBase64(256);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::write">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::write"></a><code><b><span class="methodName">write</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the specified DOMString to a FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void write(DOMString stringData);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">stringData</span>: 
+ Actual string to write
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a write error occurs.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var text = "Hello world";
+ stream.write(text);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::writeBytes">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::writeBytes"></a><code><b><span class="methodName">writeBytes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the specified bytes to this FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void writeBytes(octet[] byteData);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">byteData</span>: 
+ Byte data array being written
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a write error occurs.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var bytes = in.readBytes(256);
+ // writes the bytes read from in to out
+ out.writeBytes(bytes);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::writeBase64">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::writeBase64"></a><code><b><span class="methodName">writeBase64</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the result to this FileStream after converting the specified base64 DOMString to bytes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void writeBase64(DOMString base64Data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">base64Data</span>: 
+ The base64 data to written
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if an error occurs during writeBase64.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value
+(e.g. the base64Data input parameter is not a valid Base64 sequence).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var base64 = in.readBase64(256);
+ // writes the base64 data read from in to out
+ out.writeBase64(base64);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSuccessCallback"></a><h3>2.7. FileSuccessCallback</h3>
+<div class="brief">
+ The FileSuccessCallback interface defines file system success callback with a <em>File</em> object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileSuccessCallback {
+    void onsuccess(<a href="#File">File</a> file);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as FileSystemManager.resolve(), copying, moving, and deleting files.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#File">File</a> file);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">file</span>: 
+ File resulting from the asynchronous call
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSystemStorageArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageArraySuccessCallback"></a><h3>2.8. FileSystemStorageArraySuccessCallback</h3>
+<div class="brief">
+ The FileSystemStorageArraySuccessCallback callback interface specifies a success callback with an array of FileSystemStorage objects as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageArraySuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a>[] storages);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as FileSystemManager.listStorages().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSystemStorageArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a>[] storages);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">storages</span>: 
+ List of available storage devices
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSystemStorageSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageSuccessCallback"></a><h3>2.9. FileSystemStorageSuccessCallback</h3>
+<div class="brief">
+ The FileSystemStorageSuccessCallback callback interface specifies a success callback with a <em>FileSystmeStorage </em>object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageSuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a> storage);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as FileSystemManager.getStorage() and FileSystemManager.addStorageStateChangeListener().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSystemStorageSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a> storage);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">storage</span>: 
+ Storage device structure
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileStringSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStringSuccessCallback"></a><h3>2.10. FileStringSuccessCallback</h3>
+<div class="brief">
+ The FileStringSuccessCallback callback interface specifies a success callback with a DOMString object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileStringSuccessCallback {
+    void onsuccess(DOMString fileStr);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as File.readAsText().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileStringSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStringSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString fileStr);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">fileStr</span>: 
+ File represented as a DOMString resulting from the asynchronous call
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileStreamSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStreamSuccessCallback"></a><h3>2.11. FileStreamSuccessCallback</h3>
+<div class="brief">
+ The FileStreamSuccessCallback interface specifies a success callback with a <em>FileStream </em>object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileStreamSuccessCallback {
+    void onsuccess(<a href="#FileStream">FileStream</a> filestream);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used by asynchronous methods, such as File.openStream().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileStreamSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStreamSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the File.openStream asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#FileStream">FileStream</a> filestream);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filestream</span>: 
+ Filestream to access file content
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileArraySuccessCallback"></a><h3>2.12. FileArraySuccessCallback</h3>
+<div class="brief">
+ The FileArraySuccessCallback interface defines file system specific success callback for listing methods.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileArraySuccessCallback {
+    void onsuccess(<a href="#File">File</a>[] files);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback with a function taking an array of <em>File </em>objects as input argument. It is used in asynchronous methods, such as File.listFiles().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#File">File</a>[] files);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">files</span>: 
+ Files resulting from the asynchronous call
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Filesystem {
+  enum FileMode { "r", "rw", "w", "a" };
+
+  enum FileSystemStorageType { "INTERNAL", "EXTERNAL" };
+
+  enum FileSystemStorageState { "MOUNTED", "REMOVED", "UNMOUNTABLE" };
+
+  [NoInterfaceObject] interface FileSystemManagerObject {
+    readonly attribute <a href="#FileSystemManager">FileSystemManager</a> filesystem;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#FileSystemManagerObject">FileSystemManagerObject</a>;
+
+  [NoInterfaceObject] interface FileSystemManager {
+    readonly attribute long maxPathLength;
+
+    void resolve(DOMString location,
+                 <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess,
+                 optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                 optional <a href="#FileMode">FileMode</a>? mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getStorage(DOMString label,
+                    <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listStorages(<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addStorageStateChangeListener(<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeStorageStateChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface FileSystemStorage {
+    readonly attribute DOMString label;
+
+    readonly attribute <a href="#FileSystemStorageType">FileSystemStorageType</a> type;
+
+    readonly attribute <a href="#FileSystemStorageState">FileSystemStorageState</a> state;
+  };
+
+  [NoInterfaceObject] interface File {
+    readonly attribute <a href="#File">File</a>? parent;
+
+    readonly attribute boolean readOnly;
+
+    readonly attribute boolean isFile;
+
+    readonly attribute boolean isDirectory;
+
+    readonly attribute Date? created;
+
+    readonly attribute Date? modified;
+
+    readonly attribute DOMString path;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString fullPath;
+
+    readonly attribute unsigned long long fileSize;
+
+    readonly attribute long length;
+
+    DOMString toURI() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listFiles(<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess,
+                   optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                   optional <a href="#FileFilter">FileFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void openStream(<a href="#FileMode">FileMode</a> mode,
+                    <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void readAsText(<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void copyTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void moveTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createDirectory(DOMString dirPath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createFile(DOMString relativeFilePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> resolve(DOMString filePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteDirectory(DOMString directoryPath,
+                         boolean recursive,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteFile(DOMString filePath,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+
+  dictionary FileFilter {
+    DOMString name;
+
+    Date startModified;
+
+    Date endModified;
+
+    Date startCreated;
+
+    Date endCreated;
+  };
+
+  [NoInterfaceObject] interface FileStream {
+    readonly attribute boolean eof;
+
+    attribute long position setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long bytesAvailable;
+
+    void close();
+
+    DOMString read(long charCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    octet[] readBytes(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString readBase64(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void write(DOMString stringData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBytes(octet[] byteData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBase64(DOMString base64Data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileSuccessCallback {
+    void onsuccess(<a href="#File">File</a> file);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageArraySuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a>[] storages);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageSuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a> storage);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileStringSuccessCallback {
+    void onsuccess(DOMString fileStr);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileStreamSuccessCallback {
+    void onsuccess(<a href="#FileStream">FileStream</a> filestream);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileArraySuccessCallback {
+    void onsuccess(<a href="#File">File</a>[] files);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio-state.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio-state.png
new file mode 100644 (file)
index 0000000..71ad363
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio-state.png differ
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html
new file mode 100644 (file)
index 0000000..761caeb
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html
@@ -0,0 +1,1083 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>FMRadio API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::FMRadio">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>FMRadio API</h1></div>
+<div class="brief">
+ The FMRadio API provides interfaces and methods for accessing FM Radio.
+        </div>
+<div class="description">
+        <p>
+The following functionality is provided:
+        </p>
+        <ul>
+          <li>
+ Start and stop radio          </li>
+          <li>
+ Seek radio frequency          </li>
+        </ul>
+        <p>
+FM Radio works according the following state table:
+        </p>
+        <p>
+<img src="fmradio-state.png">        </p>
+        <p>
+<em>tizen.fmradio.seekUp()</em> and <em>tizen.fmradio.seekDown()</em> work when the radio is in playing state. <em>InvalidStateError</em> is thrown when they are called in other states. <br>        </p>
+        <p>
+For more information about how to use FMRadio API, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/fm_radio_w.htm">FMRadio Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#RadioState">RadioState</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#FMRadioObject">FMRadioObject</a>
+</li>
+<li>2.2. <a href="#FMRadioManager">FMRadioManager</a>
+</li>
+<li>2.3. <a href="#FMRadioScanCallback">FMRadioScanCallback</a>
+</li>
+<li>2.4. <a href="#FMRadioInterruptCallback">FMRadioInterruptCallback</a>
+</li>
+<li>2.5. <a href="#AntennaChangeCallback">AntennaChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#FMRadioObject">FMRadioObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#FMRadioManager">FMRadioManager</a></td>
+<td>void <a href="#FMRadioManager::start">start</a> (optional double? frequency)<br>
+    void <a href="#FMRadioManager::stop">stop</a> ()<br>
+    void <a href="#FMRadioManager::seekUp">seekUp</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#FMRadioManager::seekDown">seekDown</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#FMRadioManager::scanStart">scanStart</a> (<a href="#FMRadioScanCallback">FMRadioScanCallback</a> radioScanCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#FMRadioManager::scanStop">scanStop</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#FMRadioManager::setFMRadioInterruptedListener">setFMRadioInterruptedListener</a> (<a href="#FMRadioInterruptCallback">FMRadioInterruptCallback</a> interruptCallback)<br>
+    void <a href="#FMRadioManager::unsetFMRadioInterruptedListener">unsetFMRadioInterruptedListener</a> ()<br>
+    void <a href="#FMRadioManager::setAntennaChangeListener">setAntennaChangeListener</a> (<a href="#AntennaChangeCallback">AntennaChangeCallback</a> changeCallback)<br>
+    void <a href="#FMRadioManager::unsetAntennaChangeListener">unsetAntennaChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#FMRadioScanCallback">FMRadioScanCallback</a></td>
+<td>void <a href="#FMRadioScanCallback::onfrequencyfound">onfrequencyfound</a> (double frequency)<br>
+    void <a href="#FMRadioScanCallback::onfinished">onfinished</a> (double[] frequencies)</td>
+</tr>
+<tr>
+<td><a href="#FMRadioInterruptCallback">FMRadioInterruptCallback</a></td>
+<td>void <a href="#FMRadioInterruptCallback::oninterrupted">oninterrupted</a> (DOMString reason)<br>
+    void <a href="#FMRadioInterruptCallback::oninterruptfinished">oninterruptfinished</a> ()</td>
+</tr>
+<tr>
+<td><a href="#AntennaChangeCallback">AntennaChangeCallback</a></td>
+<td>void <a href="#AntennaChangeCallback::onchange">onchange</a> (boolean isAntennaConnected)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="RadioState">
+<a class="backward-compatibility-anchor" name="::FMRadio::RadioState"></a><h3>1.1. RadioState</h3>
+<div class="brief">
+ Specifies the state of the radio.
+          </div>
+<pre class="webidl prettyprint">    enum RadioState { "PLAYING", "SCANNING", "READY"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The states defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+READY - Indicates that the radio is ready to play or scan            </li>
+            <li>
+PLAYING - Indicates that the radio is playing            </li>
+            <li>
+SCANNING - Indicates that the radio is scanning radio channels in the range from <em>tizen.fmradio.frequencyLowerBound</em> to <em>tizen.fmradio.frequencyUpperBound</em>            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="FMRadioObject">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioObject"></a><h3>2.1. FMRadioObject</h3>
+<div class="brief">
+ The FMRadioObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface FMRadioObject {
+       readonly attribute <a href="#FMRadioManager">FMRadioManager</a> fmradio;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#FMRadioObject">FMRadioObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The tizen.fmradio object provides access to the functionality of the FM Radio API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="FMRadioManager">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager"></a><h3>2.2. FMRadioManager</h3>
+<div class="brief">
+ The FMRadioManager interface is the top-level interface for the FM Radio API.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface FMRadioManager {
+        readonly attribute double frequency;
+
+        readonly attribute double frequencyUpperBound;
+
+        readonly attribute double frequencyLowerBound;
+
+        readonly attribute long signalStrength;
+
+        readonly attribute <a href="#RadioState">RadioState</a> state;
+
+        readonly attribute boolean isAntennaConnected;
+
+        attribute boolean mute;
+
+        void start(optional double? frequency) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void seekUp(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void seekDown(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void scanStart(<a href="#FMRadioScanCallback">FMRadioScanCallback</a> radioScanCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void scanStop(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setFMRadioInterruptedListener (<a href="#FMRadioInterruptCallback">FMRadioInterruptCallback</a> interruptCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetFMRadioInterruptedListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setAntennaChangeListener(<a href="#AntennaChangeCallback">AntennaChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetAntennaChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="FMRadioManager::frequency">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">frequency</span></span><div class="brief">
+ Current frequency(MHz) of the radio.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="FMRadioManager::frequencyUpperBound">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">frequencyUpperBound</span></span><div class="brief">
+ Maximum frequency(MHz) available on the radio device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="FMRadioManager::frequencyLowerBound">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">frequencyLowerBound</span></span><div class="brief">
+ Minimum frequency(MHz) available on the radio device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="FMRadioManager::signalStrength">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">signalStrength</span></span><div class="brief">
+ Strength of the radio signal ranging between <var>-128</var> and <var>127</var> (dBm).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="FMRadioManager::state">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">RadioState </span><span class="name">state</span></span><div class="brief">
+ State of the radio.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="FMRadioManager::isAntennaConnected">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isAntennaConnected</span></span><div class="brief">
+ Indicates if the FM Radio antenna is connected.
+            </div>
+<div class="description">
+            <p>
+If the system detects that the radio antenna is disconnected then the <em>isAntennaConnected </em>is <var>false</var>.
+            </p>
+            <p>
+For example, an earphone cable is commonly used as a FM antenna in mobile phones. In that case, the <em>isAntennaConnected </em>attribute can be used to check if the FM antenna is connected or not.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> if (!tizen.fmradio.isAntennaConnected) {
+    console.log("Please plug in the earphones to listen to the radio");
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="FMRadioManager::mute">
+<span class="attrName"><span class="type">boolean </span><span class="name">mute</span></span><div class="brief">
+ Mute state of the radio. If the value is <var>true</var>, there is no sound from the radio (muted). If the values is <var>false</var>, sound is playing. The default value is <var>false</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FMRadioManager::start">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts playing the radio. This method is available in the <em>READY</em> or <em>PLAYING</em> state. After <em>start()</em>, the radio state is <em>PLAYING</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void start(optional double? frequency);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method allows the user to set the radio frequency between <em>frequencyUpperBound</em> and <em>frequencyLowerBound</em>.
+If the user calls this method without any frequency value, <em>frequencyLowerBound</em> is set.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">frequency</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Frequency(MHz) of FM radio waves to set
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the radio hardware is not available because another application is using it.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the frequency is out of bounds.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidStateError, if the radio state is not <em>READY</em> or <em>PLAYING</em>.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var radioState = tizen.fmradio.state;
+
+ if(radioState == "READY") {
+   tizen.fmradio.start(87.5);
+ }
+ // jump to your favorite radio station (95.9MHz) and start playing
+ //tizen.fmradio.start(95.9);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::stop">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::stop"></a><code><b><span class="methodName">stop</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops playing the radio. This method is only available in the <em>PLAYING</em> state. After the radio stops, the state is <em>READY</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stop();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidStateError, if the radio state is not <em>PLAYING</em>                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the radio cannot be stopped because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var radioState = tizen.fmradio.state;
+
+ if(radioState == "PLAYING") {
+   tizen.fmradio.stop();
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::seekUp">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::seekUp"></a><code><b><span class="methodName">seekUp</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds a radio channel at a higher frequency than the current one while the radio is playing, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void seekUp(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method is only available in the <em>PLAYING</em> state. There is no change of <var>state</var>. <br>When the next valid frequency is successfully found, <em>successCallback</em> is invoked.
+After the search, the radio begins playing the new channel automatically. <br>If the highest frequency(<em>frequencyUpperBound</em>) has been reached, it finds the lowest frequency(<em>frequencyLowerBound</em>) channel.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidStateError - This error occurs when the radio state is not <em>PLAYING</em>              </li>
+              <li>
+UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ It is not allowed to call a seek method in quick succession (e.g. calling seekUp() or seekDown() twice in one second).
+If a user call seekUp() while the radio is seeking, the errorCallback will be invoked.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the radio successfully finds a radio channel
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var radioState = tizen.fmradio.state;
+
+ function successCallback() {
+    console.log("The radio find a new frequency successfully");
+ }
+ function errorCallback(err) {
+    console.log("The following error occurred : " + err.name);
+ }
+
+ if(radioState == "PLAYING") {
+   tizen.fmradio.seekUp(successCallback, errorCallback);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::seekDown">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::seekDown"></a><code><b><span class="methodName">seekDown</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds a radio channel at a lower frequency than the current one while the radio is playing, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void seekDown(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method is only available in the <em>PLAYING</em> state. There is no change of <var>state</var>. <br>When the next valid frequency is successfully found, <em>successCallback</em> is invoked.
+After the search, the radio begins playing the new channel automatically. <br>If the lowest frequency(<em>frequencyLowerBound</em>) has been reached, it finds the highest frequency(<em>frequencyUpperBound</em>) channel.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidStateError - This error occurs when the radio state is not <em>PLAYING</em>              </li>
+              <li>
+UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ It is not allowed to call a seek method in quick succession (e.g. calling seekUp() or seekDown() twice in one second).
+If a user call seekDown() while the radio is seeking, the errorCallback will be invoked.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the radio successfully finds a radio channel
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var radioState = tizen.fmradio.state;
+
+ function successCallback() {
+    console.log("The radio find a new frequency successfully");
+ }
+ function errorCallback(err) {
+    console.log("The following error occurred : " + err.name);
+ }
+
+ if(radioState == "PLAYING") {
+   tizen.fmradio.seekDown(successCallback, errorCallback);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::scanStart">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::scanStart"></a><code><b><span class="methodName">scanStart</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts scanning all radio channels, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void scanStart(<a href="#FMRadioScanCallback">FMRadioScanCallback</a> radioScanCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method is only available in the <em>READY</em> state. While the radio is scanning the channels, the radio state is <em>SCANNING</em>. After the scanning is completed, the radio state is changed to <em>READY</em>.
+            </p>
+            <p>
+It scans all available channels from <em>frequencyLowerBound</em> to <em>frequencyUpperBound</em>.
+Once the scan has started, it is not possible to call <a href="#FMRadioManager::start">start()</a>, <a href="#FMRadioManager::seekUp">seekUp()</a>,
+or <a href="#FMRadioManager::seekDown">seekDown()</a> until the scan completes.<br>The scan can be cancelled any time, by calling <a href="#FMRadioManager::scanStop">scanStop()</a>. The radio frequency will not be changed by the scan.
+            </p>
+            <p>
+The following methods are invoked depending on the progress of this process :
+            </p>
+            <ul>
+              <li>
+<a href="#FMRadioScanCallback::onfrequencyfound">onfrequencyfound()</a> - This method is invoked with the frequency value when a new frequency is found while scanning radio channels              </li>
+              <li>
+<a href="#FMRadioScanCallback::onfinished">onfinished()</a> - This method is invoked with the array of frequencies found when the scan is completed              </li>
+            </ul>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidStateError - This error occurs when the radio state is not <em>READY</em>              </li>
+              <li>
+UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">radioScanCallback</span>: 
+ Callback method to be invoked when a radio channel is found
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var radioState = tizen.fmradio.state;
+
+ var radioScanCallback = {
+    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]);
+       }
+    }
+ };
+ function errorCallback(err) {
+    console.log("The following error occurred : " + err.name);
+ }
+
+ if(radioState == "READY") {
+   tizen.fmradio.scanStart(radioScanCallback, errorCallback);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::scanStop">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::scanStop"></a><code><b><span class="methodName">scanStop</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops scanning radio channels, asynchronously.
+This method is only available in the <em>SCANNING</em> state. After the scan stops, the radio state is <em>READY</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void scanStop(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method can be used in the middle of scanning. After the scan has stopped, the radio restores the frequency played before the scan.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidStateError - This error occurs when the radio state is not <em>SCANNING</em>              </li>
+              <li>
+UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when scanning radio channels stops successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var radioState = tizen.fmradio.state;
+
+ function successCallback() {
+    console.log("The scanning stops");
+ }
+ function errorCallback(err) {
+    console.log("The following error occurred : " + err.name);
+ }
+
+ if (radioState == "SCANNING") {
+   tizen.fmradio.scanStop(successCallback, errorCallback);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::setFMRadioInterruptedListener">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::setFMRadioInterruptedListener"></a><code><b><span class="methodName">setFMRadioInterruptedListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive a notification when the radio is interrupted.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setFMRadioInterruptedListener(<a href="#FMRadioInterruptCallback">FMRadioInterruptCallback</a> interruptCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+This method sets a <em>FMRadioInterruptCallback</em> type callback that is triggered when the radio is interrupted.
+The callback lasts until the <em>unsetFMRadioInterruptedListener()</em> method is called.
+            </p>
+           </div>
+<p><span class="remark"> Remark : </span>
+ When an audio interrupt occurs, the radio loses an audio focus and stops.
+Interrupts may occur for an incoming call, launching another audio player, or another player which also uses audio.
+To resume playing the radio, user interaction with the device is required. This is to avoid the occurrence of a race condition among applications that try to play without user interaction.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">interruptCallback</span>: 
+ Callback method to be invoked when the radio is interrupted
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var interruptCallback = {
+       oninterrupted: function(reason) {
+           console.log(reason);
+       },
+       oninterruptfinished: function() {
+           console.log("The radio interruption finished.");
+       }
+ };
+ tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::unsetFMRadioInterruptedListener">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::unsetFMRadioInterruptedListener"></a><code><b><span class="methodName">unsetFMRadioInterruptedListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving a notification when the radio is interrupted.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetFMRadioInterruptedListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of a platform error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.fmradio.unsetFMRadioInterruptListener();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::setAntennaChangeListener">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::setAntennaChangeListener"></a><code><b><span class="methodName">setAntennaChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the listener which is called when the status of antenna has been changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setAntennaChangeListener(<a href="#AntennaChangeCallback">AntennaChangeCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param"><span class="name">changeCallback</span></li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function antennaCallback(isAntennaConnected) {
+    alert("Antenna status has been changed. It is now " + (isAntennaConnected ? "connected" : "disconnected"));
+ }
+ tizen.fmradio.setAntennaChangeListener(antennaCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FMRadioManager::unsetAntennaChangeListener">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioManager::unsetAntennaChangeListener"></a><code><b><span class="methodName">unsetAntennaChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener set with the <a href="#FMRadioManager::setAntennaChangeListener">setAntennaChangeListener()</a> method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetAntennaChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of a platform error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // When you don't want to detect a change in the antenna status
+ tizen.fmradio.unsetAntennaChangeListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FMRadioScanCallback">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioScanCallback"></a><h3>2.3. FMRadioScanCallback</h3>
+<div class="brief">
+ The FMRadioScanCallback interface defines notification callbacks for scanning radio channels.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface FMRadioScanCallback {
+       void onfrequencyfound(double frequency);
+
+       void onfinished(double[] frequencies);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FMRadioScanCallback::onfrequencyfound">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioScanCallback::onfrequencyfound"></a><code><b><span class="methodName">onfrequencyfound</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a new radio channel is discovered in the process of scanning.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfrequencyfound(double frequency);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">frequency</span>: 
+ Channel frequency found during the scan
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="FMRadioScanCallback::onfinished">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioScanCallback::onfinished"></a><code><b><span class="methodName">onfinished</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the scan is complete.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfinished(double[] frequencies);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">frequencies</span>: 
+ Array of channel frequencies found during the scan
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FMRadioInterruptCallback">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioInterruptCallback"></a><h3>2.4. FMRadioInterruptCallback</h3>
+<div class="brief">
+ The FMRadioInterruptCallback interface defines notification callback when the radio is interrupted.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface FMRadioInterruptCallback {
+       void oninterrupted(DOMString reason);
+
+       void oninterruptfinished();
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FMRadioInterruptCallback::oninterrupted">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioInterruptCallback::oninterrupted"></a><code><b><span class="methodName">oninterrupted</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the FM radio is interrupted.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oninterrupted(DOMString reason);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reason</span>: 
+ Reason why FM radio is interrupted (e.g. interrupted by an incoming call, alarm, notifications)
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="FMRadioInterruptCallback::oninterruptfinished">
+<a class="backward-compatibility-anchor" name="::FMRadio::FMRadioInterruptCallback::oninterruptfinished"></a><code><b><span class="methodName">oninterruptfinished</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the cause of the interrupt ends.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oninterruptfinished();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that after it is invoked, you can turn on FM radio by invoking <var>tizen.fmradio.start()</var>.
+            </p>
+           </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AntennaChangeCallback">
+<a class="backward-compatibility-anchor" name="::FMRadio::AntennaChangeCallback"></a><h3>2.5. AntennaChangeCallback</h3>
+<div class="brief">
+ The AntennaChangeCallback interface defines notification callback to be called when system detects connecting or disconnecting of FM Radio antenna.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface AntennaChangeCallback {
+       void onchange(boolean isAntennaConnected);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AntennaChangeCallback::onchange">
+<a class="backward-compatibility-anchor" name="::FMRadio::AntennaChangeCallback::onchange"></a><code><b><span class="methodName">onchange</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the antenna is connected or disconnected which causes value of <a href="#FMRadioManager::isAntennaConnected">isAntennaConnected</a> attribute to change.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onchange(boolean isAntennaConnected);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">isAntennaConnected</span>: 
+ New value of the <a href="#FMRadioManager::isAntennaConnected">isAntennaConnected</a> attribute
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the FM radio application runs on a device with FM radio, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/fmradio</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module FMRadio {
+    enum RadioState { "PLAYING", "SCANNING", "READY"};
+
+    [NoInterfaceObject] interface FMRadioObject {
+       readonly attribute <a href="#FMRadioManager">FMRadioManager</a> fmradio;
+    };
+
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#FMRadioObject">FMRadioObject</a>;
+
+    [NoInterfaceObject] interface FMRadioManager {
+        readonly attribute double frequency;
+
+        readonly attribute double frequencyUpperBound;
+
+        readonly attribute double frequencyLowerBound;
+
+        readonly attribute long signalStrength;
+
+        readonly attribute <a href="#RadioState">RadioState</a> state;
+
+        readonly attribute boolean isAntennaConnected;
+
+        attribute boolean mute;
+
+        void start(optional double? frequency) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void seekUp(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void seekDown(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void scanStart(<a href="#FMRadioScanCallback">FMRadioScanCallback</a> radioScanCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void scanStop(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setFMRadioInterruptedListener (<a href="#FMRadioInterruptCallback">FMRadioInterruptCallback</a> interruptCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetFMRadioInterruptedListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setAntennaChangeListener(<a href="#AntennaChangeCallback">AntennaChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetAntennaChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface FMRadioScanCallback {
+       void onfrequencyfound(double frequency);
+
+       void onfinished(double[] frequencies);
+    };
+
+    [Callback, NoInterfaceObject] interface FMRadioInterruptCallback {
+       void oninterrupted(DOMString reason);
+
+       void oninterruptfinished();
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface AntennaChangeCallback {
+       void onchange(boolean isAntennaConnected);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html
new file mode 100644 (file)
index 0000000..8d3f29b
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html
@@ -0,0 +1,1265 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>HumanActivityMonitor API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::HumanActivityMonitor">
+<div class="supported-platforms"><img class="mobile-optional emulator-partial" title="Optional, Supported by Tizen Mobile emulator - Emulator supports only HRM" src="mw_icon_optional.png"></div>
+<div class="title"><h1>HumanActivityMonitor API</h1></div>
+<div class="brief">
+ The HumanActivityMonitor API defines interfaces and methods to manage human activity data from various sensors on the device.
+        </div>
+<div class="description">
+        <p>
+The following human activity monitor functionality is provided:
+        </p>
+        <ul>
+          <li>
+Set up callbacks for data change notification          </li>
+          <li>
+Get current human activity monitor data          </li>
+        </ul>
+        <p>
+For more information about how to use Human Activity Monitor API, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/ham_w.htm">Human Activity Monitor Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#HumanActivityType">HumanActivityType</a>
+</li>
+<li>1.2. <a href="#PedometerStepStatus">PedometerStepStatus</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a>
+</li>
+<li>2.2. <a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a>
+</li>
+<li>2.3. <a href="#StepDifference">StepDifference</a>
+</li>
+<li>2.4. <a href="#HumanActivityData">HumanActivityData</a>
+</li>
+<li>2.5. <a href="#HumanActivityPedometerData">HumanActivityPedometerData</a>
+</li>
+<li>2.6. <a href="#HumanActivityAccumulativePedometerData">HumanActivityAccumulativePedometerData</a>
+</li>
+<li>2.7. <a href="#HumanActivityHRMData">HumanActivityHRMData</a>
+</li>
+<li>2.8. <a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a>
+</li>
+<li>2.9. <a href="#HumanActivityGPSInfoArray">HumanActivityGPSInfoArray</a>
+</li>
+<li>2.10. <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a></td>
+<td>void <a href="#HumanActivityMonitorManager::getHumanActivityData">getHumanActivityData</a> (<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#HumanActivityMonitorManager::start">start</a> (<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback)<br>
+    void <a href="#HumanActivityMonitorManager::stop">stop</a> (<a href="#HumanActivityType">HumanActivityType</a> type)<br>
+    void <a href="#HumanActivityMonitorManager::setAccumulativePedometerListener">setAccumulativePedometerListener</a> (<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback)<br>
+    void <a href="#HumanActivityMonitorManager::unsetAccumulativePedometerListener">unsetAccumulativePedometerListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#StepDifference">StepDifference</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityData">HumanActivityData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityPedometerData">HumanActivityPedometerData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityAccumulativePedometerData">HumanActivityAccumulativePedometerData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityHRMData">HumanActivityHRMData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityGPSInfoArray">HumanActivityGPSInfoArray</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a></td>
+<td>void <a href="#HumanActivityMonitorSuccessCallback::onsuccess">onsuccess</a> (optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="HumanActivityType">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityType"></a><h3>1.1. HumanActivityType</h3>
+<div class="brief">
+ Specifies the supported human activity monitor types.
+          </div>
+<pre class="webidl prettyprint">    enum HumanActivityType { "PEDOMETER", "WRIST_UP", "HRM", "GPS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The human activity monitor types defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+PEDOMETER - Pedometer data            </li>
+            <li>
+WRIST_UP - Wrist up gesture            </li>
+            <li>
+HRM - Heart rate monitor (Heart rate and RR interval)            </li>
+            <li>
+GPS - GPS information (latitude, longitude and speed)            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="PedometerStepStatus">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::PedometerStepStatus"></a><h3>1.2. PedometerStepStatus</h3>
+<div class="brief">
+ Specifies the pedometer user's current movement type.
+          </div>
+<pre class="webidl prettyprint">    enum PedometerStepStatus { "NOT_MOVING", "WALKING", "RUNNING" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+NOT_MOVING - The user remains stationary            </li>
+            <li>
+WALKING - The user is walking            </li>
+            <li>
+RUNNING - The user is running            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="HumanActivityMonitorManagerObject">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManagerObject"></a><h3>2.1. HumanActivityMonitorManagerObject</h3>
+<div class="brief">
+ The HumanActivityMonitorManagerObject interface defines what is instantiated by the <em>Tizen</em> object.
+The <em>tizen.humanactivitymonitor</em> object allows access to the human activity data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityMonitorManagerObject {
+        readonly attribute <a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a> humanactivitymonitor;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="HumanActivityMonitorManager">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager"></a><h3>2.2. HumanActivityMonitorManager</h3>
+<div class="brief">
+ The HumanActivityMonitorManager interface provides methods to access human activity data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityMonitorManager {
+        void getHumanActivityData(<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void start(<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop(<a href="#HumanActivityType">HumanActivityType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setAccumulativePedometerListener(<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetAccumulativePedometerListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="HumanActivityMonitorManager::getHumanActivityData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::getHumanActivityData"></a><code><b><span class="methodName">getHumanActivityData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current human activity data for the requested type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getHumanActivityData(<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the given type is not supported on a device, <var>NotSupportedError</var> is thrown.
+            </p>
+            <p>
+The <em>start()</em> method should be called to turn on the sensor before calling the <em>getHumanActivityData()</em> method. If not, <var>ServiceNotAvailableError</var> occurs.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getHumanActivityData()</em> method is called without previously calling the <em>start()</em> method              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/location
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <b>'http://tizen.org/privilege/location'</b> privilege is required for only <a href="#HumanActivityType">GPS</a> type.
+That means that both <b>'http://tizen.org/privilege/healthinfo'</b> and <b>'http://tizen.org/privilege/location'</b> should be declared in config.xml file for GPS type.
+In other types, only <b>'http://tizen.org/privilege/healthinfo'</b> should be declared.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Human activity data type to read
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the human activity data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the success callback fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to use this function.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccessCB(pedometerInfo) {
+     console.log("Step status : " + pedometerInfo.stepStatus);
+     console.log("Cumulative total step count : " + pedometerInfo.cumulativeTotalStepCount);
+ }
+
+ function onerrorCB(error) {
+     console.log("Error occurs. name:"+error.name + ", message: "+error.message);
+ }
+
+ function onchangedCB(pedometerdata) {
+     console.log("From now on, you will be notified when the pedometer data changes.");
+     // To get the current data information
+     tizen.humanactivitymonitor.getHumanActivityData("PEDOMETER", onsuccessCB, onerrorCB);
+ }
+
+ tizen.humanactivitymonitor.start("PEDOMETER", onchangedCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::start">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts the sensor and registers a change listener to be called when new human activity data for a given human activity type is available.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void start(<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/location
+            </p>
+<p><span class="remark"> Remark : </span>
+ When the CPU is in the power saving mode, WRIST_UP event might not occur even though &lt;tizen:setting background-support="enable" /&gt; is declared in config.xml file.
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <b>'http://tizen.org/privilege/location'</b> privilege is required for only <a href="#HumanActivityType">GPS</a> type.
+That means that both <b>'http://tizen.org/privilege/healthinfo'</b> and <b>'http://tizen.org/privilege/location'</b> should be declared in config.xml file for GPS type.
+In other types, only <b>'http://tizen.org/privilege/healthinfo'</b> should be declared.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Human activity type to register a listener for
+                </li>
+          <li class="param">
+<span class="name">changedCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when new human activity data is available<br>Note that the listener is not called for the successful start of a human activity sensor.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to use this function.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onchangedCB(pedometerInfo) {
+     console.log("Step status : " + pedometerInfo.stepStatus);
+     console.log("Cumulative total step count : " + pedometerInfo.cumulativeTotalStepCount);
+ }
+
+ tizen.humanactivitymonitor.start("PEDOMETER", onchangedCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::stop">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::stop"></a><code><b><span class="methodName">stop</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops the sensor and unregisters a previously registered listener for available human activity data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stop(<a href="#HumanActivityType">HumanActivityType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/location
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <b>'http://tizen.org/privilege/location'</b> privilege is required for only <a href="#HumanActivityType">GPS</a> type.
+That means that both <b>'http://tizen.org/privilege/healthinfo'</b> and <b>'http://tizen.org/privilege/location'</b> should be declared in config.xml file for GPS type.
+In other types, only <b>'http://tizen.org/privilege/healthinfo'</b> should be declared.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Human activity type to unregister the listener for
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if unregistering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to use this function.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.humanactivitymonitor.stop("PEDOMETER");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::setAccumulativePedometerListener">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::setAccumulativePedometerListener"></a><code><b><span class="methodName">setAccumulativePedometerListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts the sensor and registers a listener to be called when new accumulative pedometer data is available.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setAccumulativePedometerListener(<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that the setAccumulativePedometerListener() method does not need to call the sensor's start() method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method to be invoked when new accumulative pedometer data is available<br>Callback is invoked with HumanActivityAccumulativePedometerData as an argument.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the pedometer sensor is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onchangedCB(pedometerInfo) {
+        console.log("Step status : " + pedometerInfo.stepStatus);
+        console.log("Accumulative total step count : " + pedometerInfo.accumulativeTotalStepCount);
+ }
+
+ tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::unsetAccumulativePedometerListener">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::unsetAccumulativePedometerListener"></a><code><b><span class="methodName">unsetAccumulativePedometerListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops the sensor and unregisters a previously registered listener for the accumulative pedometer data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetAccumulativePedometerListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type UnknownError, if unregistering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="StepDifference">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::StepDifference"></a><h3>2.3. StepDifference</h3>
+<div class="brief">
+ The StepDifference interface represents the count difference between steps and timestamp.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface StepDifference {
+
+        readonly attribute long stepCountDifference;
+
+        readonly attribute long timestamp;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="StepDifference::stepCountDifference">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">stepCountDifference</span></span><div class="brief">
+ Count difference between the steps.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="StepDifference::timestamp">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">timestamp</span></span><div class="brief">
+ Timestamp in seconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityData"></a><h3>2.4. HumanActivityData</h3>
+<div class="brief">
+ The HumanActivityData interface is a common abstract interface used by the different types of human activity data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityData {
+     };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="HumanActivityPedometerData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityPedometerData"></a><h3>2.5. HumanActivityPedometerData</h3>
+<div class="brief">
+ The HumanActivityPedometerData interface represents pedometer data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityPedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double cumulativeDistance;
+
+        readonly attribute double cumulativeCalorie;
+
+        readonly attribute double cumulativeTotalStepCount;
+
+        readonly attribute double cumulativeWalkStepCount;
+
+        readonly attribute double cumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityPedometerData::stepStatus">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PedometerStepStatus </span><span class="name">stepStatus</span></span><div class="brief">
+ The current movement type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::speed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">speed</span></span><div class="brief">
+ Current speed in km/h.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::walkingFrequency">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">walkingFrequency</span></span><div class="brief">
+ Step count per second.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeDistance">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeDistance</span></span><div class="brief">
+ Cumulative distance traveled since the last start() method call in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeCalorie">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeCalorie</span></span><div class="brief">
+ Cumulative calories burned since the last start() method call in kcal.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeTotalStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeTotalStepCount</span></span><div class="brief">
+ Cumulative walking and running step count since the last start() method call.
+            </div>
+<div class="description">
+            <p>
+The value is the sum of <em>cumulativeWalkStepCount</em> and <em>cumulativeRunStepCount</em>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeWalkStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeWalkStepCount</span></span><div class="brief">
+ Cumulative walking step count since the last start() method call.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeRunStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeRunStepCount</span></span><div class="brief">
+ Cumulative running step count since the last start() method call.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::stepCountDifferences">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">StepDifference[]
+                      </span><span class="name">stepCountDifferences</span></span><div class="brief">
+ Array of the StepDifference.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityAccumulativePedometerData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityAccumulativePedometerData"></a><h3>2.6. HumanActivityAccumulativePedometerData</h3>
+<div class="brief">
+ The HumanActivityAccumulativePedometerData interface represents pedometer motion data since the device is booted.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityAccumulativePedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double accumulativeDistance;
+
+        readonly attribute double accumulativeCalorie;
+
+        readonly attribute double accumulativeTotalStepCount;
+
+        readonly attribute double accumulativeWalkStepCount;
+
+        readonly attribute double accumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::stepStatus">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PedometerStepStatus </span><span class="name">stepStatus</span></span><div class="brief">
+ Current movement type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::speed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">speed</span></span><div class="brief">
+ Current speed in km/h.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::walkingFrequency">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">walkingFrequency</span></span><div class="brief">
+ Step count per second.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeDistance">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeDistance</span></span><div class="brief">
+ Accumulative distance traveled since the device is booted in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeCalorie">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeCalorie</span></span><div class="brief">
+ Accumulative calories burnt since the device is booted in kcal.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeTotalStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeTotalStepCount</span></span><div class="brief">
+ Accumulative walking and running step count since the device is booted.
+            </div>
+<div class="description">
+            <p>
+The value is the sum of <em>accumulativeWalkStepCount</em> and <em>accumulativeRunStepCount</em>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeWalkStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeWalkStepCount</span></span><div class="brief">
+ Accumulative walking step count since the device is booted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeRunStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeRunStepCount</span></span><div class="brief">
+ Accumulative running step count since the device is booted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::stepCountDifferences">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">StepDifference[]
+                      </span><span class="name">stepCountDifferences</span></span><div class="brief">
+ Array of the StepDifference.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityHRMData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityHRMData"></a><h3>2.7. HumanActivityHRMData</h3>
+<div class="brief">
+ The HumanActivityHRMData interface represents Heart Rate Monitor(HRM) data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityHRMData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute long heartRate;
+
+        readonly attribute long rRInterval;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityHRMData::heartRate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">heartRate</span></span><div class="brief">
+ Heart rate in beats per minute.
+When a user takes off the watch device, the heartRate is set to -3. When a user shakes the watch, the heartRate is set to -2.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityHRMData::rRInterval">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">rRInterval</span></span><div class="brief">
+ Peak-to-peak interval in millisecond(s).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityGPSInfo">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityGPSInfo"></a><h3>2.8. HumanActivityGPSInfo</h3>
+<div class="brief">
+ The HumanActivityGPSInfo interface represents GPS information.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityGPSInfo {
+
+        readonly attribute double latitude;
+
+        readonly attribute double longitude;
+
+        readonly attribute double altitude;
+
+        readonly attribute double speed;
+
+        readonly attribute long errorRange;
+
+        readonly attribute long timestamp;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityGPSInfo::latitude">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">latitude</span></span><div class="brief">
+ An attribute to indicate the user's latitude in degrees.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::longitude">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">longitude</span></span><div class="brief">
+ An attribute to indicate the user's longitude in degrees.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::altitude">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">altitude</span></span><div class="brief">
+ An attribute to indicate the user's altitude in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::speed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">speed</span></span><div class="brief">
+ An attribute to indicate the speed in km/h.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::errorRange">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">errorRange</span></span><div class="brief">
+ An attribute to indicate the error range of the user's position in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::timestamp">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">timestamp</span></span><div class="brief">
+ An attribute to indicate timestamp in seconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityGPSInfoArray">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityGPSInfoArray"></a><h3>2.9. HumanActivityGPSInfoArray</h3>
+<div class="brief">
+ The HumanActivityGPSInfoArray interface represents GPS information array.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityGPSInfoArray : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a>[] gpsInfo;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="HumanActivityGPSInfoArray::gpsInfo">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">HumanActivityGPSInfo[]
+                      </span><span class="name">gpsInfo</span></span><div class="brief">
+ An attribute to indicate the array of GPS information.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityMonitorSuccessCallback">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorSuccessCallback"></a><h3>2.10. HumanActivityMonitorSuccessCallback</h3>
+<div class="brief">
+ The HumanActivityMonitorSuccessCallback interface is a callback interface that is invoked when new human activity data is available.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface HumanActivityMonitorSuccessCallback {
+        void onsuccess(optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="HumanActivityMonitorSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when there is new human activity data available.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">humanactivitydata</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ New human activity data<br>Note that <var>null</var> is passed for the WRIST_UP type.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the Human Activity Monitor application runs on a device which supports this API, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/humanactivitymonitor</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the pedometer application runs on a device with pedometer, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.pedometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the wrist-up gesture recognition application runs on a device with wrist up, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.wrist_up</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the Heart Rate Monitor application runs on a device with heart rate monitor, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.heart_rate_monitor</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the GPS batch information tracking application runs on a device with GPS batch feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/location.batch</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module HumanActivityMonitor {
+
+    enum HumanActivityType { "PEDOMETER", "WRIST_UP", "HRM", "GPS" };
+
+    enum PedometerStepStatus { "NOT_MOVING", "WALKING", "RUNNING" };
+
+    [NoInterfaceObject] interface HumanActivityMonitorManagerObject {
+        readonly attribute <a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a> humanactivitymonitor;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a>;
+
+    [NoInterfaceObject] interface HumanActivityMonitorManager {
+        void getHumanActivityData(<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void start(<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop(<a href="#HumanActivityType">HumanActivityType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setAccumulativePedometerListener(<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetAccumulativePedometerListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+    [NoInterfaceObject] interface StepDifference {
+
+        readonly attribute long stepCountDifference;
+
+        readonly attribute long timestamp;
+    };
+
+    [NoInterfaceObject] interface HumanActivityData {
+     };
+
+    [NoInterfaceObject] interface HumanActivityPedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double cumulativeDistance;
+
+        readonly attribute double cumulativeCalorie;
+
+        readonly attribute double cumulativeTotalStepCount;
+
+        readonly attribute double cumulativeWalkStepCount;
+
+        readonly attribute double cumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };
+
+    [NoInterfaceObject] interface HumanActivityAccumulativePedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double accumulativeDistance;
+
+        readonly attribute double accumulativeCalorie;
+
+        readonly attribute double accumulativeTotalStepCount;
+
+        readonly attribute double accumulativeWalkStepCount;
+
+        readonly attribute double accumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };
+
+    [NoInterfaceObject] interface HumanActivityHRMData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute long heartRate;
+
+        readonly attribute long rRInterval;
+    };
+
+    [NoInterfaceObject] interface HumanActivityGPSInfo {
+
+        readonly attribute double latitude;
+
+        readonly attribute double longitude;
+
+        readonly attribute double altitude;
+
+        readonly attribute double speed;
+
+        readonly attribute long errorRange;
+
+        readonly attribute long timestamp;
+    };
+
+    [NoInterfaceObject] interface HumanActivityGPSInfoArray : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a>[] gpsInfo;
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface HumanActivityMonitorSuccessCallback {
+        void onsuccess(optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata);
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/linux-foundation-color.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/linux-foundation-color.png
new file mode 100644 (file)
index 0000000..344010d
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/linux-foundation-color.png differ
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/logo-tizen.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/logo-tizen.png
new file mode 100644 (file)
index 0000000..afa6006
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/logo-tizen.png differ
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html
new file mode 100644 (file)
index 0000000..1580b6d
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>MediaKey API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::MediaKey">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>MediaKey API</h1></div>
+<div class="brief">
+ The MediaKey API provides functions to get notified when a media key has been pressed or released.
+        </div>
+<div class="description">
+        <p>
+Media keys are the keys of a Bluetooth headset which control multimedia playback.
+        </p>
+        <p>
+For more information on the MediaKey features, see <a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm">MediaKey Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#MediaKeyType">MediaKeyType</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#MediaKeyManagerObject">MediaKeyManagerObject</a>
+</li>
+<li>2.2. <a href="#MediaKeyManager">MediaKeyManager</a>
+</li>
+<li>2.3. <a href="#MediaKeyEventCallback">MediaKeyEventCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#MediaKeyManagerObject">MediaKeyManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MediaKeyManager">MediaKeyManager</a></td>
+<td>void <a href="#MediaKeyManager::setMediaKeyEventListener">setMediaKeyEventListener</a> (<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback)<br>
+    void <a href="#MediaKeyManager::unsetMediaKeyEventListener">unsetMediaKeyEventListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#MediaKeyEventCallback">MediaKeyEventCallback</a></td>
+<td>void <a href="#MediaKeyEventCallback::onpressed">onpressed</a> (<a href="#MediaKeyType">MediaKeyType</a> type)<br>
+    void <a href="#MediaKeyEventCallback::onreleased">onreleased</a> (<a href="#MediaKeyType">MediaKeyType</a> type)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="MediaKeyType">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyType"></a><h3>1.1. MediaKeyType</h3>
+<div class="brief">
+ The available media keys
+          </div>
+<pre class="webidl prettyprint">    enum MediaKeyType {
+        "MEDIA_PLAY",
+        "MEDIA_STOP",
+        "MEDIA_PAUSE",
+        "MEDIA_PREVIOUS",
+        "MEDIA_NEXT",
+        "MEDIA_FAST_FORWARD",
+        "MEDIA_REWIND",
+        "MEDIA_PLAY_PAUSE"
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ MEDIA_PLAY - the Play media key             </li>
+            <li>
+ MEDIA_STOP - the Stop media key            </li>
+            <li>
+ MEDIA_PAUSE - the Pause media key            </li>
+            <li>
+ MEDIA_PREVIOUS - the Previous media key            </li>
+            <li>
+ MEDIA_NEXT - the Next media key            </li>
+            <li>
+ MEDIA_FAST_FORWARD - the Fast Forward media key            </li>
+            <li>
+ MEDIA_REWIND - the Rewind media key            </li>
+            <li>
+ MEDIA_PLAY_PAUSE - the Play/Pause media key            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="MediaKeyManagerObject">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManagerObject"></a><h3>2.1. MediaKeyManagerObject</h3>
+<div class="brief">
+ The MediaKeyManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MediaKeyManagerObject {
+         readonly attribute <a href="#MediaKeyManager">MediaKeyManager</a> mediakey;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MediaKeyManagerObject">MediaKeyManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+There is a tizen.mediakey object that allows accessing the functionality of the MediaKey API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="MediaKeyManager">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManager"></a><h3>2.2. MediaKeyManager</h3>
+<div class="brief">
+ The MediaKeyManager interface provides the functionalities to get information about media key events.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MediaKeyManager {
+
+        void setMediaKeyEventListener(<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetMediaKeyEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MediaKeyManager::setMediaKeyEventListener">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManager::setMediaKeyEventListener"></a><code><b><span class="methodName">setMediaKeyEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a listener to be called when a media key is pressed or released.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMediaKeyEventListener(<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method to be invoked when a media key has been pressed or released.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.mediakey.setMediaKeyEventListener({
+     onpressed: function(key) {
+         console.log("Pressed  key: " + key);
+     },
+     onreleased: function(key) {
+         console.log("Released key: " + key);
+     }
+ });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MediaKeyManager::unsetMediaKeyEventListener">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManager::unsetMediaKeyEventListener"></a><code><b><span class="methodName">unsetMediaKeyEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification for detecting the media key event.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetMediaKeyEventListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.mediakey.unsetMediaKeyEventListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MediaKeyEventCallback">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyEventCallback"></a><h3>2.3. MediaKeyEventCallback</h3>
+<div class="brief">
+ The MediaKeyEventCallback interface specifies a media key event callback for getting notified information about the media key events.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface MediaKeyEventCallback {
+        void onpressed(<a href="#MediaKeyType">MediaKeyType</a> type);
+
+        void onreleased(<a href="#MediaKeyType">MediaKeyType</a> type);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MediaKeyEventCallback::onpressed">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyEventCallback::onpressed"></a><code><b><span class="methodName">onpressed</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a media key has been pressed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpressed(<a href="#MediaKeyType">MediaKeyType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The pressed media key
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MediaKeyEventCallback::onreleased">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyEventCallback::onreleased"></a><code><b><span class="methodName">onreleased</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a media key has been released.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onreleased(<a href="#MediaKeyType">MediaKeyType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The released media key
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the MediaKey application runs on a device with Bluetooth feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.bluetooth.audio.media</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm">Application Filtering.</a>
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module MediaKey {
+    enum MediaKeyType {
+        "MEDIA_PLAY",
+        "MEDIA_STOP",
+        "MEDIA_PAUSE",
+        "MEDIA_PREVIOUS",
+        "MEDIA_NEXT",
+        "MEDIA_FAST_FORWARD",
+        "MEDIA_REWIND",
+        "MEDIA_PLAY_PAUSE"
+    };
+
+    [NoInterfaceObject] interface MediaKeyManagerObject {
+         readonly attribute <a href="#MediaKeyManager">MediaKeyManager</a> mediakey;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MediaKeyManagerObject">MediaKeyManagerObject</a>;
+
+    [NoInterfaceObject] interface MediaKeyManager {
+
+        void setMediaKeyEventListener(<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetMediaKeyEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback, NoInterfaceObject] interface MediaKeyEventCallback {
+        void onpressed(<a href="#MediaKeyType">MediaKeyType</a> type);
+
+        void onreleased(<a href="#MediaKeyType">MediaKeyType</a> type);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html
new file mode 100644 (file)
index 0000000..2008b02
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html
@@ -0,0 +1,761 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>MessagePort API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::MessagePort">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>MessagePort API</h1></div>
+<div class="brief">
+ The MessagePort API provides the functionality for communicating with other applications.
+        </div>
+<div class="description">
+        <p>
+For more information on the MessagePort features, see <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/message_port_w.htm">MessagePort Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#MessagePortManagerObject">MessagePortManagerObject</a>
+</li>
+<li>1.2. <a href="#MessagePortManager">MessagePortManager</a>
+</li>
+<li>1.3. <a href="#LocalMessagePort">LocalMessagePort</a>
+</li>
+<li>1.4. <a href="#RemoteMessagePort">RemoteMessagePort</a>
+</li>
+<li>1.5. <a href="#MessagePortDataItem">MessagePortDataItem</a>
+</li>
+<li>1.6. <a href="#MessagePortCallback">MessagePortCallback</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#MessagePortManagerObject">MessagePortManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessagePortManager">MessagePortManager</a></td>
+<td>
+<a href="#LocalMessagePort">LocalMessagePort</a> <a href="#MessagePortManager::requestLocalMessagePort">requestLocalMessagePort</a> (DOMString localMessagePortName)<br>
+    <a href="#LocalMessagePort">LocalMessagePort</a> <a href="#MessagePortManager::requestTrustedLocalMessagePort">requestTrustedLocalMessagePort</a> (DOMString localMessagePortName)<br>
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> <a href="#MessagePortManager::requestRemoteMessagePort">requestRemoteMessagePort</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName)<br>
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> <a href="#MessagePortManager::requestTrustedRemoteMessagePort">requestTrustedRemoteMessagePort</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName)</td>
+</tr>
+<tr>
+<td><a href="#LocalMessagePort">LocalMessagePort</a></td>
+<td>long <a href="#LocalMessagePort::addMessagePortListener">addMessagePortListener</a> (<a href="#MessagePortCallback">MessagePortCallback</a> listener)<br>
+    void <a href="#LocalMessagePort::removeMessagePortListener">removeMessagePortListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#RemoteMessagePort">RemoteMessagePort</a></td>
+<td>void <a href="#RemoteMessagePort::sendMessage">sendMessage</a> (<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort)</td>
+</tr>
+<tr>
+<td><a href="#MessagePortDataItem">MessagePortDataItem</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessagePortCallback">MessagePortCallback</a></td>
+<td>void <a href="#MessagePortCallback::onreceived">onreceived</a> (<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="MessagePortManagerObject">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManagerObject"></a><h3>1.1. MessagePortManagerObject</h3>
+<div class="brief">
+ The <em>MessagePortManagerObject</em> interface defines what is instantiated by the Tizen object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessagePortManagerObject {
+    readonly attribute <a href="#MessagePortManager">MessagePortManager</a> messageport;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MessagePortManagerObject">MessagePortManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.messageport</em> object allows access to the functionality of the Message Port API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="MessagePortManager">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager"></a><h3>1.2. MessagePortManager</h3>
+<div class="brief">
+ The <em>MessagePortManager</em> interface provides methods to request message port to communicate.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessagePortManager {
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestTrustedLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestTrustedRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessagePortManager::requestLocalMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestLocalMessagePort"></a><code><b><span class="methodName">requestLocalMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a LocalMessage Port instance to start receiving message from another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#LocalMessagePort">LocalMessagePort</a> requestLocalMessagePort(DOMString localMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">localMessagePortName</span>: 
+ Name of the local message port to retrieve <br>The LocalMessagePort instances are identical for the same message port name.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ LocalMessagePort LocalMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the LocalMessagePort instance with the specified message port name
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessagePortManager::requestTrustedLocalMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestTrustedLocalMessagePort"></a><code><b><span class="methodName">requestTrustedLocalMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a trusted LocalMessagePort instance to receive message from another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#LocalMessagePort">LocalMessagePort</a> requestTrustedLocalMessagePort(DOMString localMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+Trusted local message port can communicate with applications that are signed with same certificate.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">localMessagePortName</span>: 
+ Name of local message port <br>The LocalMessagePort instances are identical for the same message port name.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ LocalMessagePort Trusted LocalMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the LocalMessagePort instance with the specified message port name
+ var localMsgPort = tizen.messageport.requestTrustedLocalMessagePort('MessagePortB');
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessagePortManager::requestRemoteMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestRemoteMessagePort"></a><code><b><span class="methodName">requestRemoteMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a RemoteMessagePort instance to send message to another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#RemoteMessagePort">RemoteMessagePort</a> requestRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the message port name and application ID are the same, the platform returns the same RemoteMessagePort instance.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+                 ID of the application to send messages
+                </li>
+          <li class="param">
+<span class="name">remoteMessagePortName</span>: 
+ Name of remote message port
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ RemoteMessagePort RemoteMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if an input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the port of the target application is not found.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the RemoteMessagePort instance with the specified message port name
+ var remoteMsgPort = tizen.messageport.requestRemoteMessagePort('6xaeuflskd.App1', 'MessagePortA');
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessagePortManager::requestTrustedRemoteMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestTrustedRemoteMessagePort"></a><code><b><span class="methodName">requestTrustedRemoteMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a trusted RemoteMessagePort instance to receive message from another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#RemoteMessagePort">RemoteMessagePort</a> requestTrustedRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the message port name and application ID are the same, the platform returns the same RemoteMessagePort instance.
+Trusted remote message port can communicate with applications that are signed with same certificate.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+                 ID of the application to send messages
+                </li>
+          <li class="param">
+<span class="name">remoteMessagePortName</span>: 
+ Name of remote message port
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ RemoteMessagePort Trusted RemoteMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if an input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the port of the target application is not found.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidAccessError, if the target application is not signed with the same certification.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the RemoteMessagePort instance with the specified message port name.
+ var remoteMsgPort = tizen.messageport.requestTrustedRemoteMessagePort('6xauflskd.App1', 'MessagePortB');
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="LocalMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::LocalMessagePort"></a><h3>1.3. LocalMessagePort</h3>
+<div class="brief">
+ The <em>LocalMessagePort</em> interface provides methods to receive data.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface LocalMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute boolean isTrusted;
+
+    long addMessagePortListener(<a href="#MessagePortCallback">MessagePortCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeMessagePortListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="LocalMessagePort::messagePortName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">messagePortName</span></span><div class="brief">
+ The name of the message port name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="LocalMessagePort::isTrusted">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isTrusted</span></span><div class="brief">
+ The flag indicating whether the message port is trusted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="LocalMessagePort::addMessagePortListener">
+<a class="backward-compatibility-anchor" name="::MessagePort::LocalMessagePort::addMessagePortListener"></a><code><b><span class="methodName">addMessagePortListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a message port listener to receive messages from other applications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addMessagePortListener(<a href="#MessagePortCallback">MessagePortCallback</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ Callback function that is called when a message is received
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long ID of the listener that is later used to remove the listener
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onreceived(data, remoteMsgPort) {
+   console.log('Received data to \'' + remoteMsgPort.messagePortName + '\'');
+ }
+
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ var watchId = localMsgPort.addMessagePortListener(onreceived);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="LocalMessagePort::removeMessagePortListener">
+<a class="backward-compatibility-anchor" name="::MessagePort::LocalMessagePort::removeMessagePortListener"></a><code><b><span class="methodName">removeMessagePortListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes the message port listener.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeMessagePortListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ ID to identify the listener
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the watch ID has not been found.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ var watchId = localMsgPort.addMessagePortListener(onreceived);
+ // Communication routines of your app...
+ localMsgPort.removeMessagePortListener(watchId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="RemoteMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::RemoteMessagePort"></a><h3>1.4. RemoteMessagePort</h3>
+<div class="brief">
+ The <em>RemoteMessagePort</em> interface provides methods to send messages.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface RemoteMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute <a href="application.html#ApplicationId">ApplicationId</a> appId;
+
+    readonly attribute boolean isTrusted;
+
+    void sendMessage(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="RemoteMessagePort::messagePortName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">messagePortName</span></span><div class="brief">
+ The message port name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="RemoteMessagePort::appId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">appId</span></span><div class="brief">
+ The application ID to connect with.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="RemoteMessagePort::isTrusted">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isTrusted</span></span><div class="brief">
+ The flag indicating whether the message port is trusted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="RemoteMessagePort::sendMessage">
+<a class="backward-compatibility-anchor" name="::MessagePort::RemoteMessagePort::sendMessage"></a><code><b><span class="methodName">sendMessage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends messages to the specified application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void sendMessage(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The sent messages will be ignored without any notice, unless the target application added one or more listeners to the target local message port.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+             Array of data to send
+                </li>
+          <li class="param">
+<span class="name">localMessagePort</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ <em>LocalMessagePort<em> object that gives local message port of the current application
+It can be used to receive reply messages from the other end of the message port.
+The order of items in this array is not guaranteed to be preserved during data transfer, and values of <em>key</em> within this
+array must not be duplicated or empty.
+</em></em>                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if an input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type QuotaExceededError, if the size of message has exceeded the maximum limit.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Sends message
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ var remoteMsgPort = tizen.messageport.requestRemoteMessagePort('6xaeuflskd.App1', 'MessagePortB');
+ localMsgPort.addMessagePortListener(function(items, remoteport) {
+   // ...
+   if(remoteport !== null) {
+     remoteport.sendMessage([{key:'RESULT', value:'OK'}]);
+   }
+ });
+ remoteMsgPort.sendMessage(
+   [
+     { key:'CMD', value:'openWindow' },
+     { key:'OPTION', value:'bx' }
+   ]
+   , localMsgPort);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="MessagePortDataItem">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortDataItem"></a><h3>1.5. MessagePortDataItem</h3>
+<div class="brief">
+ The dictionary that specifies the data item that is transferred.
+          </div>
+<pre class="webidl prettyprint">  dictionary MessagePortDataItem {
+    DOMString key;
+    DOMString value;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+<div class="interface" id="MessagePortCallback">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortCallback"></a><h3>1.6. MessagePortCallback</h3>
+<div class="brief">
+ The MessagePortCallback interface defines notification callbacks for receiving data from other applications.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessagePortCallback {
+    void onreceived(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessagePortCallback::onreceived">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortCallback::onreceived"></a><code><b><span class="methodName">onreceived</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when data is received from other applications via the specified message port name.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onreceived(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+              Array of data received from another application
+                </li>
+          <li class="param">
+<span class="name">remoteMessagePort</span><span class="optional"> [nullable]</span>: 
+ RemoteMessagePort port that can be used to reply for the received message
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">2. Full WebIDL</h2>
+<pre class="webidl prettyprint">module MessagePort {
+
+  [NoInterfaceObject] interface MessagePortManagerObject {
+    readonly attribute <a href="#MessagePortManager">MessagePortManager</a> messageport;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MessagePortManagerObject">MessagePortManagerObject</a>;
+
+  [NoInterfaceObject] interface MessagePortManager {
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestTrustedLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestTrustedRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface LocalMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute boolean isTrusted;
+
+    long addMessagePortListener(<a href="#MessagePortCallback">MessagePortCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeMessagePortListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface RemoteMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute <a href="application.html#ApplicationId">ApplicationId</a> appId;
+
+    readonly attribute boolean isTrusted;
+
+    void sendMessage(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  dictionary MessagePortDataItem {
+    DOMString key;
+    DOMString value;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessagePortCallback {
+    void onreceived(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html
new file mode 100644 (file)
index 0000000..a1ed5dd
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html
@@ -0,0 +1,4270 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Messaging API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Messaging">
+<div class="supported-platforms"><img class="mobile-optional emulator-partial" title="Optional, Supported by Tizen Mobile emulator - Emulator supports only e-mail" src="mw_icon_optional.png"></div>
+<div class="title"><h1>Messaging API</h1></div>
+<div class="brief">
+ The Messaging API provides interfaces and methods for managing SMS, MMS, and email messages.
+        </div>
+<div class="description">
+        <p>
+The Messaging API provides access to these capabilities:
+        </p>
+        <ul>
+          <li>
+Sending messages through different technologies: SMS, MMS, and email messages          </li>
+          <li>
+Retrieving available message services          </li>
+          <li>
+Searching for messages          </li>
+          <li>
+Managing messages: update, delete, and add          </li>
+          <li>
+Subscribing to receive notifications of message storage modifications          </li>
+          <li>
+Fetching conversations and subscribing to conversation updates          </li>
+        </ul>
+        <p>
+For more information on the Messaging features, see <a href="../../../../../org.tizen.guides/html/web/tizen/communication/messaging_w.htm">Messaging Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#MessageServiceTag">MessageServiceTag</a>
+</li>
+<li>1.2. <a href="#MessageId">MessageId</a>
+</li>
+<li>1.3. <a href="#MessageAttachmentId">MessageAttachmentId</a>
+</li>
+<li>1.4. <a href="#MessageConvId">MessageConvId</a>
+</li>
+<li>1.5. <a href="#MessageFolderId">MessageFolderId</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#MessageManagerObject">MessageManagerObject</a>
+</li>
+<li>2.2. <a href="#Message">Message</a>
+</li>
+<li>2.3. <a href="#MessageInit">MessageInit</a>
+</li>
+<li>2.4. <a href="#MessageBody">MessageBody</a>
+</li>
+<li>2.5. <a href="#MessageAttachment">MessageAttachment</a>
+</li>
+<li>2.6. <a href="#Messaging">Messaging</a>
+</li>
+<li>2.7. <a href="#MessageServiceArraySuccessCallback">MessageServiceArraySuccessCallback</a>
+</li>
+<li>2.8. <a href="#MessageService">MessageService</a>
+</li>
+<li>2.9. <a href="#MessageRecipientsCallback">MessageRecipientsCallback</a>
+</li>
+<li>2.10. <a href="#MessageBodySuccessCallback">MessageBodySuccessCallback</a>
+</li>
+<li>2.11. <a href="#MessageAttachmentSuccessCallback">MessageAttachmentSuccessCallback</a>
+</li>
+<li>2.12. <a href="#MessageStorage">MessageStorage</a>
+</li>
+<li>2.13. <a href="#MessageArraySuccessCallback">MessageArraySuccessCallback</a>
+</li>
+<li>2.14. <a href="#MessageConversationArraySuccessCallback">MessageConversationArraySuccessCallback</a>
+</li>
+<li>2.15. <a href="#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a>
+</li>
+<li>2.16. <a href="#MessagesChangeCallback">MessagesChangeCallback</a>
+</li>
+<li>2.17. <a href="#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a>
+</li>
+<li>2.18. <a href="#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a>
+</li>
+<li>2.19. <a href="#MessageConversation">MessageConversation</a>
+</li>
+<li>2.20. <a href="#MessageFolder">MessageFolder</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#MessageManagerObject">MessageManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Message">Message</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessageInit">MessageInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessageBody">MessageBody</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessageAttachment">MessageAttachment</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Messaging">Messaging</a></td>
+<td>void <a href="#Messaging::getMessageServices">getMessageServices</a> (<a href="#MessageServiceTag">MessageServiceTag</a> messageServiceType, <a href="#MessageServiceArraySuccessCallback">MessageServiceArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#MessageServiceArraySuccessCallback">MessageServiceArraySuccessCallback</a></td>
+<td>void <a href="#MessageServiceArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#MessageService">MessageService</a>[] services)</td>
+</tr>
+<tr>
+<td><a href="#MessageService">MessageService</a></td>
+<td>void <a href="#MessageService::sendMessage">sendMessage</a> (<a href="#Message">Message</a> message, optional <a href="#MessageRecipientsCallback">MessageRecipientsCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional long? simIndex)<br>
+    void <a href="#MessageService::loadMessageBody">loadMessageBody</a> (<a href="#Message">Message</a> message, <a href="#MessageBodySuccessCallback">MessageBodySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#MessageService::loadMessageAttachment">loadMessageAttachment</a> (<a href="#MessageAttachment">MessageAttachment</a> attachment, <a href="#MessageAttachmentSuccessCallback">MessageAttachmentSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    long <a href="#MessageService::sync">sync</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional unsigned long? limit)<br>
+    long <a href="#MessageService::syncFolder">syncFolder</a> (<a href="#MessageFolder">MessageFolder</a> folder, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional unsigned long? limit)<br>
+    void <a href="#MessageService::stopSync">stopSync</a> (long opId)</td>
+</tr>
+<tr>
+<td><a href="#MessageRecipientsCallback">MessageRecipientsCallback</a></td>
+<td>void <a href="#MessageRecipientsCallback::onsuccess">onsuccess</a> (DOMString[] recipients)</td>
+</tr>
+<tr>
+<td><a href="#MessageBodySuccessCallback">MessageBodySuccessCallback</a></td>
+<td>void <a href="#MessageBodySuccessCallback::onsuccess">onsuccess</a> (<a href="#Message">Message</a> message)</td>
+</tr>
+<tr>
+<td><a href="#MessageAttachmentSuccessCallback">MessageAttachmentSuccessCallback</a></td>
+<td>void <a href="#MessageAttachmentSuccessCallback::onsuccess">onsuccess</a> (<a href="#MessageAttachment">MessageAttachment</a> attachment)</td>
+</tr>
+<tr>
+<td><a href="#MessageStorage">MessageStorage</a></td>
+<td>void <a href="#MessageStorage::addDraftMessage">addDraftMessage</a> (<a href="#Message">Message</a> message, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#MessageStorage::findMessages">findMessages</a> (<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter, <a href="#MessageArraySuccessCallback">MessageArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#SortMode">SortMode</a>? sort, optional unsigned long? limit, optional unsigned long? offset)<br>
+    void <a href="#MessageStorage::removeMessages">removeMessages</a> (<a href="#Message">Message</a>[] messages, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#MessageStorage::updateMessages">updateMessages</a> (<a href="#Message">Message</a>[] messages, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#MessageStorage::findConversations">findConversations</a> (<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter, <a href="#MessageConversationArraySuccessCallback">MessageConversationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#SortMode">SortMode</a>? sort, optional unsigned long? limit, optional unsigned long? offset)<br>
+    void <a href="#MessageStorage::removeConversations">removeConversations</a> (<a href="#MessageConversation">MessageConversation</a>[] conversations, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#MessageStorage::findFolders">findFolders</a> (<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter, <a href="#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    long <a href="#MessageStorage::addMessagesChangeListener">addMessagesChangeListener</a> (<a href="#MessagesChangeCallback">MessagesChangeCallback</a> messagesChangeCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter)<br>
+    long <a href="#MessageStorage::addConversationsChangeListener">addConversationsChangeListener</a> (<a href="#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a> conversationsChangeCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter)<br>
+    long <a href="#MessageStorage::addFoldersChangeListener">addFoldersChangeListener</a> (<a href="#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> foldersChangeCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter)<br>
+    void <a href="#MessageStorage::removeChangeListener">removeChangeListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#MessageArraySuccessCallback">MessageArraySuccessCallback</a></td>
+<td>void <a href="#MessageArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Message">Message</a>[] messages)</td>
+</tr>
+<tr>
+<td><a href="#MessageConversationArraySuccessCallback">MessageConversationArraySuccessCallback</a></td>
+<td>void <a href="#MessageConversationArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#MessageConversation">MessageConversation</a>[] conversations)</td>
+</tr>
+<tr>
+<td><a href="#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a></td>
+<td>void <a href="#MessageFolderArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#MessageFolder">MessageFolder</a>[] folders)</td>
+</tr>
+<tr>
+<td><a href="#MessagesChangeCallback">MessagesChangeCallback</a></td>
+<td>void <a href="#MessagesChangeCallback::messagesadded">messagesadded</a> (<a href="#Message">Message</a>[] addedMessages)<br>
+    void <a href="#MessagesChangeCallback::messagesupdated">messagesupdated</a> (<a href="#Message">Message</a>[] updatedMessages)<br>
+    void <a href="#MessagesChangeCallback::messagesremoved">messagesremoved</a> (<a href="#Message">Message</a>[] removedMessages)</td>
+</tr>
+<tr>
+<td><a href="#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a></td>
+<td>void <a href="#MessageConversationsChangeCallback::conversationsadded">conversationsadded</a> (<a href="#MessageConversation">MessageConversation</a>[] addedConversations)<br>
+    void <a href="#MessageConversationsChangeCallback::conversationsupdated">conversationsupdated</a> (<a href="#MessageConversation">MessageConversation</a>[] updatedConversations)<br>
+    void <a href="#MessageConversationsChangeCallback::conversationsremoved">conversationsremoved</a> (<a href="#MessageConversation">MessageConversation</a>[] removedConversations)</td>
+</tr>
+<tr>
+<td><a href="#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a></td>
+<td>void <a href="#MessageFoldersChangeCallback::foldersadded">foldersadded</a> (<a href="#MessageFolder">MessageFolder</a>[] addedFolders)<br>
+    void <a href="#MessageFoldersChangeCallback::foldersupdated">foldersupdated</a> (<a href="#MessageFolder">MessageFolder</a>[] updatedFolders)<br>
+    void <a href="#MessageFoldersChangeCallback::foldersremoved">foldersremoved</a> (<a href="#MessageFolder">MessageFolder</a>[] removedFolders)</td>
+</tr>
+<tr>
+<td><a href="#MessageConversation">MessageConversation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessageFolder">MessageFolder</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="MessageServiceTag">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageServiceTag"></a><h3>1.1. MessageServiceTag</h3>
+<div class="brief">
+ Specifies the Messaging service tags.
+The following values are supported in this release:
+          </div>
+<pre class="webidl prettyprint">  enum MessageServiceTag {"messaging.sms", "messaging.mms", "messaging.email" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <ul>
+            <li>
+messaging.sms, for SMS services            </li>
+            <li>
+messaging.mms, for MMS services            </li>
+            <li>
+messaging.email, for email services            </li>
+          </ul>
+         </div>
+</div>
+<div class="typedef" id="MessageId">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageId"></a><h3>1.2. MessageId</h3>
+<div class="brief">
+ The Message identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString MessageId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="MessageAttachmentId">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageAttachmentId"></a><h3>1.3. MessageAttachmentId</h3>
+<div class="brief">
+ The MessageAttachment identifier within a message.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString MessageAttachmentId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="MessageConvId">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConvId"></a><h3>1.4. MessageConvId</h3>
+<div class="brief">
+ The MessageConversation identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString MessageConvId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="MessageFolderId">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFolderId"></a><h3>1.5. MessageFolderId</h3>
+<div class="brief">
+ The identifier of an email folder.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString MessageFolderId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="MessageManagerObject">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageManagerObject"></a><h3>2.1. MessageManagerObject</h3>
+<div class="brief">
+ The MessageManagerObject interface defines what is instantiated by the Tizen object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessageManagerObject {
+    readonly attribute <a href="#Messaging">Messaging</a> messaging;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MessageManagerObject">MessageManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There is a <em>tizen.messaging </em>object that allows access to the Messaging API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="Message">
+<a class="backward-compatibility-anchor" name="::Messaging::Message"></a><h3>2.2. Message</h3>
+<div class="brief">
+ The Message interface defines the content and attributes of a message.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="#MessageServiceTag">MessageServiceTag</a> type, optional <a href="#MessageInit">MessageInit</a>? messageInitDict)]
+  interface Message {
+
+    readonly attribute <a href="#MessageId">MessageId</a>? id;
+
+    readonly attribute <a href="#MessageConvId">MessageConvId</a>? conversationId;
+
+    readonly attribute <a href="#MessageFolderId">MessageFolderId</a>? folderId;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> type;
+
+    readonly attribute Date? timestamp;
+
+    readonly attribute DOMString? from;
+
+    attribute DOMString[] to setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] cc setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] bcc setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#MessageBody">MessageBody</a> body setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute boolean isRead setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute boolean hasAttachment;
+
+    attribute boolean isHighPriority setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString subject setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="#MessageId">MessageId</a>? inResponseTo setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString messageStatus;
+
+    attribute <a href="#MessageAttachment">MessageAttachment</a>[] attachments setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface allows a web application to define the set of properties
+linked to a message.
+          </p>
+          <p>
+It also allows an application to retrieve the content of a
+message through <em>MessageStorage </em>methods. In these
+cases, the implementation can return, in some situations, only the meta-information
+of a message without the loaded body. In such situations, the method <em>MessageService.loadMessageBody() </em>should be used.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ var messageSentCallback = function(recipients) {
+   console.log("Message sent successfully to " + recipients.length + " recipients.");
+ }
+
+ // Defines the error callback.
+ function errorCallback(err) {
+   console.log(err.name + " error: " + err.message);
+ }
+
+ function serviceListCB(services) {
+   if (services.length &gt; 0) {
+      var msg = new tizen.Message("messaging.sms", {plainBody: "Tizen first SMS message."});
+      services[0].sendMessage(msg, messageSentCallback, errorCallback);
+   }
+ }
+
+ tizen.messaging.getMessageServices("messaging.sms",
+                                    serviceListCB,
+                                    errorCallback);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="Message::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">Message(<a href="#MessageServiceTag">MessageServiceTag</a> type, optional <a href="#MessageInit">MessageInit</a>? messageInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Message::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The message identifier.
+            </div>
+<div class="description">
+            <p>
+The ID is locally unique and persistent property, assigned by the device or the Web runtime (WRT).
+For new messages created using the Message constructor, the ID is assigned on the first occasion when a message is processed by the underlying platform, such as a call to MessageService.send(). Before the ID is assigned, it is set to <var>null</var>.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::conversationId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageConvId </span><span class="name">conversationId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of the conversation to which the message belongs.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::folderId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageFolderId </span><span class="name">folderId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The identifier of the folder to which the message belongs.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to null.
+            </p>
+            <p>
+For SMS and MMS, <em>folderId </em>can be one of these values:
+            </p>
+            <ul>
+              <li>
+INBOX = 1,              </li>
+              <li>
+OUTBOX = 2,              </li>
+              <li>
+DRAFTS = 3,              </li>
+              <li>
+SENTBOX = 4              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageServiceTag </span><span class="name">type</span></span><div class="brief">
+ The type of a given message.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::timestamp">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">timestamp</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The timestamp of a message.
+            </div>
+<div class="description">
+            <p>
+For a received message, the timestamps indicates the time at which a message is received.
+For a sent message, the timestamp indicates the time at which a message is sent.
+For a draft message, the timestamp indicates the time at which a message is added.
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::from">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">from</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The source address (or source phone number) of a message.
+            </div>
+<div class="description">
+            <p>
+This property is set up by the device or the web runtime environment.
+By default, this attribute is set to null.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::to">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">to</span></span><div class="brief">
+ The destination of a message.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::cc">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">cc</span></span><div class="brief">
+ The carbon copy address of a message.
+            </div>
+<div class="description">
+            <p>
+This property is used only for email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::bcc">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">bcc</span></span><div class="brief">
+ The blind carbon copy (bcc) address of a message.
+            </div>
+<div class="description">
+            <p>
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::body">
+<span class="attrName"><span class="type">MessageBody </span><span class="name">body</span></span><div class="brief">
+ The body of a message.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::isRead">
+<span class="attrName"><span class="type">boolean </span><span class="name">isRead</span></span><div class="brief">
+ The flag indicating the read state for a message.
+            </div>
+<div class="description">
+            <p>
+This property is set to <var>true</var> if the message has been read. Else it is set to <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::hasAttachment">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">hasAttachment</span></span><div class="brief">
+ The flag indicating whether an attachment(s) exists.
+            </div>
+<div class="description">
+            <p>
+It is set to <var>true</var> if a message has one or more attachments.
+            </p>
+            <p>
+This property is used only with email and MMS messages.(It is valid when body is loaded)
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::isHighPriority">
+<span class="attrName"><span class="type">boolean </span><span class="name">isHighPriority</span></span><div class="brief">
+ The flag indicating the priority of a message.
+            </div>
+<div class="description">
+            <p>
+It is set to <var>true</var> if the message has a high priority. Else it is set to <var>false</var>, if the message has a normal or low priority.
+            </p>
+            <p>
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::subject">
+<span class="attrName"><span class="type">DOMString </span><span class="name">subject</span></span><div class="brief">
+ The subject of a message.
+            </div>
+<div class="description">
+            <p>
+This property is used only with email and MMS messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::inResponseTo">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageId </span><span class="name">inResponseTo</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The original message.
+            </div>
+<div class="description">
+            <p>
+If the message was replied to or forwarded, this property contains the ID of the original message, otherwise it is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::messageStatus">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">messageStatus</span></span><div class="brief">
+ The status of a given message.
+            </div>
+<div class="description">
+            <p>
+It can be one of these values:
+            </p>
+            <ul>
+              <li>
+SENT              </li>
+              <li>
+SENDING              </li>
+              <li>
+FAILED              </li>
+              <li>
+DRAFT              </li>
+            </ul>
+            <p>
+If the status of the current message does not correspond to any item from
+the list, an empty value is returned.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="Message::attachments">
+<span class="attrName"><span class="type">MessageAttachment[]
+                      </span><span class="name">attachments</span></span><div class="brief">
+ The list of the message attachments.
+            </div>
+<div class="description">
+            <p>
+This array is empty if the message does not have attachments or the message body is not loaded and the attachment info is inaccessible (in this case, the <em>hasAttachment</em> attribute is checked after loading message body).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Define the success callback.
+ function serviceListCB(services) {
+     if (services.length &gt; 0) {
+         var msg = new tizen.Message("messaging.email");
+         msg.attachments = [new tizen.MessageAttachment("images/myimage.png", "image/png"),
+                            new tizen.MessageAttachment("documents/mydoc.pdf", "text/pdf")];
+     }
+ }
+
+ tizen.messaging.getMessageServices("messaging.email", serviceListCB);
+
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="MessageInit">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageInit"></a><h3>2.3. MessageInit</h3>
+<div class="brief">
+ The dictionary providing specific message attributes for message creation.
+          </div>
+<pre class="webidl prettyprint">  dictionary MessageInit
+  {
+
+    DOMString subject;
+
+    DOMString[] to;
+
+    DOMString[] cc;
+
+    DOMString[] bcc;
+
+    DOMString plainBody;
+
+    DOMString htmlBody;
+
+    boolean isHighPriority;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This dictionary is used to input parameters when messages are created using
+the Message constructor.
+          </p>
+          <p>
+All the attributes are optional and are <var>undefined </var>by default, unless otherwise stated in the parameter description.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="MessageInit::subject"><span class="attrName">DOMString subject</span></dt>
+<dd>
+<div class="brief">
+ The subject of a message.
+            </div>
+<div class="description">
+            <p>
+This property is used only with email and MMS messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="MessageInit::to"><span class="attrName">DOMString[] to</span></dt>
+<dd>
+<div class="brief">
+ The destination addresses (or phone numbers) of a message.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="MessageInit::cc"><span class="attrName">DOMString[] cc</span></dt>
+<dd>
+<div class="brief">
+ The carbon copy addresses of a message.
+            </div>
+<div class="description">
+            <p>
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="MessageInit::bcc"><span class="attrName">DOMString[] bcc</span></dt>
+<dd>
+<div class="brief">
+ The blind carbon copy addresses of a message.
+            </div>
+<div class="description">
+            <p>
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="MessageInit::plainBody"><span class="attrName">DOMString plainBody</span></dt>
+<dd>
+<div class="brief">
+ The plain text representation of a message body.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="MessageInit::htmlBody"><span class="attrName">DOMString htmlBody</span></dt>
+<dd>
+<div class="brief">
+ The HTML representation of a message body.
+            </div>
+<div class="description">
+            <p>
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="MessageInit::isHighPriority"><span class="attrName">boolean isHighPriority</span></dt>
+<dd>
+<div class="brief">
+ The priority of a message.
+            </div>
+<div class="description">
+            <p>
+This property is set to <var>true</var> if the message has a high priority. Else it is set to <var>false</var> if the message has a normal or low priority.
+            </p>
+            <p>
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageBody">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageBody"></a><h3>2.4. MessageBody</h3>
+<div class="brief">
+ The MessageBody interface describes a message body.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessageBody {
+
+    readonly attribute <a href="#MessageId">MessageId</a> messageId;
+
+    readonly attribute boolean loaded;
+
+    attribute DOMString plainBody setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString htmlBody setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#MessageAttachment">MessageAttachment</a>[] inlineAttachments setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Message body is comprised of a plain text, an HTML, and inline attachments.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="MessageBody::messageId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageId </span><span class="name">messageId</span></span><div class="brief">
+ The ID of a parent message.
+            </div>
+<div class="description">
+            <p>
+It holds the ID of the message containing this body.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageBody::loaded">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">loaded</span></span><div class="brief">
+ The flag indicating whether the message body has been loaded.
+            </div>
+<div class="description">
+            <p>
+It is set to <var>true </var>if the message body is loaded, else it is set to<var> false </var>if the object is not loaded.
+The default value is <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageBody::plainBody">
+<span class="attrName"><span class="type">DOMString </span><span class="name">plainBody</span></span><div class="brief">
+ The plain text representation of a message body.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageBody::htmlBody">
+<span class="attrName"><span class="type">DOMString </span><span class="name">htmlBody</span></span><div class="brief">
+ The HTML representation of a message body.
+            </div>
+<div class="description">
+            <p>
+This attribute holds an empty string if the message does not have any HTML body content.
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageBody::inlineAttachments">
+<span class="attrName"><span class="type">MessageAttachment[]
+                      </span><span class="name">inlineAttachments</span></span><div class="brief">
+ The list of the inline attachments.
+            </div>
+<div class="description">
+            <p>
+This array is empty, if the message does not have inline attachment or the message body is not loaded and attachments info is inaccessible (in this case the <em>loaded</em> attribute is checked).
+            </p>
+            <p>
+To indicate where to show an inline attachment within the HTML body, a link of the following format should be provided:
+"&lt;img src="The file name of a inline attachment"&gt;"
+This property is used only with email messages.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ function serviceListCB(services) {
+     if (services.length &gt; 0) {
+         var msg = new tizen.Message("messaging.email");
+         msg.body.htmlBody = "&lt;html&gt;&lt;body&gt;&lt;img src='myimage.png'&gt;&lt;/body&gt;&lt;/html&gt;";
+         msg.body.inlineAttachments = [new tizen.MessageAttachment("images/myimage.png")];
+     }
+ }
+
+ tizen.messaging.getMessageServices("messaging.email", serviceListCB);
+
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="MessageAttachment">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageAttachment"></a><h3>2.5. MessageAttachment</h3>
+<div class="brief">
+ The MessageAttachment interface defines the content and attributes of a message attachment.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString filePath, optional DOMString? mimeType)]
+  interface MessageAttachment {
+
+    readonly attribute <a href="#MessageAttachmentId">MessageAttachmentId</a>? id;
+
+    readonly attribute <a href="#MessageId">MessageId</a>? messageId;
+
+    readonly attribute DOMString? mimeType;
+
+    readonly attribute DOMString? filePath;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="constructors">
+<h4 id="MessageAttachment::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">MessageAttachment(DOMString filePath, optional DOMString? mimeType);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="MessageAttachment::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageAttachmentId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The ID of an attachment.
+            </div>
+<div class="description">
+            <p>
+It holds the identifier of the attachment within its parent message.
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageAttachment::messageId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageId </span><span class="name">messageId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The ID of a parent message.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageAttachment::mimeType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">mimeType</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The attachment MIME type.
+            </div>
+<div class="description">
+            <p>
+It describes the MIME type of an attachment, for example; "text/html".
+            </p>
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageAttachment::filePath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">filePath</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The location path to a loaded attachment file.
+            </div>
+<div class="description">
+            <p>
+It holds the location path to a loaded attachment file, appropriate for the Filesystem API. It is set to <var>null</var> if the attachment is not loaded from the remote server.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="Messaging">
+<a class="backward-compatibility-anchor" name="::Messaging::Messaging"></a><h3>2.6. Messaging</h3>
+<div class="brief">
+ The Messaging interface retrieves messaging services.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Messaging {
+
+    void getMessageServices(<a href="#MessageServiceTag">MessageServiceTag</a> messageServiceType,
+                            <a href="#MessageServiceArraySuccessCallback">MessageServiceArraySuccessCallback</a> successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface fetches all existing messaging services by type or a messaging service of a given type
+for concrete account.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ function serviceListCB(services) {
+   if (services.length &gt; 0) {
+     var msg = new tizen.Message("messaging.sms");
+   }
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot get messaging service " + error.message);
+ }
+
+ tizen.messaging.getMessageServices("messaging.sms", serviceListCB,
+                                     errorCallback);
+ </pre>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Messaging::getMessageServices">
+<a class="backward-compatibility-anchor" name="::Messaging::Messaging::getMessageServices"></a><code><b><span class="methodName">getMessageServices</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the messaging service of a given type for a given account, or all existing services supporting the given type, if <em>serviceId </em>is not given.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getMessageServices(<a href="#MessageServiceTag">MessageServiceTag</a> messageServiceType, <a href="#MessageServiceArraySuccessCallback">MessageServiceArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value, the encoding is not valid or onsuccess is null.
+Please note that to allow developers to ignore errors, errorCallback accepts null as a valid value.              </li>
+              <li>
+UnknownError - In any other error case.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">messageServiceType</span>: 
+ Type of the services to be retrieved
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+    Callback function that is called when the services are successfully retrieved
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+      Callback function that is called when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot get messaging service " + error.message);
+ }
+
+ // Defines the success callback.
+ function serviceListCB(services) {
+   console.log("Found " + services.length + "email services");
+ }
+
+ tizen.messaging.getMessageServices("messaging.email", serviceListCB,
+                                      errorCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageServiceArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageServiceArraySuccessCallback"></a><h3>2.7. MessageServiceArraySuccessCallback</h3>
+<div class="brief">
+ The MessageServiceArraySuccessCallback interface defines callback(s) for retrieving message services.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageServiceArraySuccessCallback {
+
+    void onsuccess(<a href="#MessageService">MessageService</a>[] services);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageServiceArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageServiceArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when finding message services is successful.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#MessageService">MessageService</a>[] services);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">services</span>: 
+ Array of available <em>MessageService</em> objects on the device
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageService">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService"></a><h3>2.8. MessageService</h3>
+<div class="brief">
+ The MessageService interface allows a web application to manipulate and send messages and supports the message creating, sending, and fetching capabilities.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessageService {
+
+    readonly attribute DOMString id;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> type;
+
+    readonly attribute DOMString name;
+
+    void sendMessage(<a href="#Message">Message</a> message,
+                     optional <a href="#MessageRecipientsCallback">MessageRecipientsCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                     optional long? simIndex) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void loadMessageBody(<a href="#Message">Message</a> message,
+                         <a href="#MessageBodySuccessCallback">MessageBodySuccessCallback</a> successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void loadMessageAttachment(<a href="#MessageAttachment">MessageAttachment</a> attachment,
+                               <a href="#MessageAttachmentSuccessCallback">MessageAttachmentSuccessCallback</a> successCallback,
+                               optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long sync(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional unsigned long? limit) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long syncFolder(<a href="#MessageFolder">MessageFolder</a> folder,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                    optional unsigned long? limit) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void stopSync(long opId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="#MessageStorage">MessageStorage</a> messageStorage getraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Messages created through this API are not persistent in device memory until the implementation attempts to send the message using the sendMessage() method.
+On performing the sendMessage() method, the message is available in the relevant folder (such as sent and drafts), depending on the result of the operation.
+          </p>
+          <p>
+The interface allows fetching of messages for all folders belonging to one account, with synchronizable flag set, using the sync() method, or for a given folder using the syncFolder() method.
+          </p>
+          <p>
+The interface allows fetching of the message body for a given message using loadMessageBody() method.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ function messageSent(recipients) {
+   console.log("The SMS has been sent");
+ }
+
+ // Defines the error callback.
+ function messageFailed(error) {
+   console.log("The SMS could not be sent " + error.message);
+ }
+
+ // Defines the service error callback.
+ function serviceErrorCB(error) {
+   console.log("Cannot get messaging service " + error.message);
+ }
+
+ // Defines the success callback.
+ function serviceListCB(services) {
+   if (services.length &gt; 0) {
+     // SMS sending example
+     var msg = new tizen.Message("messaging.sms", {plainBody:"I will arrive in 10 minutes.",
+                                  to:["+34666666666"]});
+     // Sends request
+     services[0].sendMessage(msg, messageSent, messageFailed);
+   }
+ }
+
+ tizen.messaging.getMessageServices("messaging.sms",
+                                    serviceListCB,
+                                    serviceErrorCB);
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="MessageService::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">id</span></span><div class="brief">
+ The unique identifier of this Messaging service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0.
+            </p>
+</li>
+<li class="attribute" id="MessageService::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageServiceTag </span><span class="name">type</span></span><div class="brief">
+ The tag supported by this messaging service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageService::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The messaging service name taken from the messaging service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0.
+            </p>
+</li>
+<li class="attribute" id="MessageService::messageStorage">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageStorage </span><span class="name">messageStorage</span></span><div class="brief">
+ The <em>MessageStorage </em>for this messaging service.
+            </div>
+<div class="description">
+            <p>
+If the backend does not support <em>MessageStorage </em>for this messaging service, a WebAPIException is raised with error type NotSupportedError.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageService::sendMessage">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService::sendMessage"></a><code><b><span class="methodName">sendMessage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends a specified message.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void sendMessage(<a href="#Message">Message</a> message, optional <a href="#MessageRecipientsCallback">MessageRecipientsCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional long? simIndex);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+For messaging technologies in which the message is sent individually to every recipient(such as SMS), individual notification must be supported as follows:
+            </p>
+            <p>
+For every individual recipient in the destination list, if the message cannot be sent to that recipient, the onerror() method of the errorCallback argument must be invoked with the corresponding error type as input parameter.
+These error types may be passed, depending on the error conditions:
+            </p>
+            <ul>
+              <li>
+ NetworkError - If the network connection is not accessible.              </li>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+            <p>
+The error message contains the name of the recipient who has failed to receive the sent message.
+            </p>
+            <p>
+When the operation is fully completed (that is, the implementation has the
+result of the send operation for all recipients), the onsuccess()
+method of the successCallback will be invoked with an array of recipients who received
+the sent message, as input parameter.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ <var>simIndex</var> is added for sending the SMS message through the specified SIM since Tizen 2.3.
+            </p>
+<p><span class="remark"> Remark : </span>
+ Regarding the <var>simIndex</var>, you can find more information (e.g. operator name, phone number) about SIM card through <em>tizen.systeminfo.getPropertyValueArray("SIM",..)</em>. <br>The feasible use case would be showing all available SIM information and then the user selects the SIM to send a message.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">message</span>: 
+         Message to be sent
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when the message is successfully sent
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the sending request has failed
+                </li>
+          <li class="param">
+<span class="name">simIndex</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The index of SIM card used to send an SMS message.
+<em>simIndex</em> value of the first SIM card is <var>1</var>.<br>If the given <em>message</em> is not SMS message type, the <em>simIndex</em> is ignored.
+If <var>simIndex</var> is not set, the SMS message is sent through the currently enabled SIM.
+The possible <var>simIndex</var> values should be retrieved through the SystemInfo API. <br>If <var>simIndex</var> value is not valid, <em>InvalidValuesError</em> will be returned through <em>ErrorCallback</em>.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback
+ function messageSent(recipients) {
+   for (var i = 0; i &lt; recipients.length; i++) {
+     console.log("The SMS has been sent to " + recipients[i]);
+   }
+ }
+
+ // Defines the error callback.
+ function messageFailed(error) {
+   console.log("The SMS could not be sent " + error.message);
+ }
+
+ // Defines the success callback.
+ function serviceListCB(services) {
+   if (services.length &gt; 0) {
+     // SMS sending example
+     var msg = new tizen.Message("messaging.sms", {plainBody: "I will arrive in 10 minutes.",
+                                 to: ["+34666666666", "+34888888888"]});
+     // Sends request
+     services[0].sendMessage(msg, messageSent, messageFailed);
+   }
+ }
+ tizen.messaging.getMessageServices("messaging.sms", serviceListCB);
+ </pre>
+</div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // **********************************************************************************
+ // *  This sample code works on a device which supports Tizen 2.3 Web Device API.   *
+ // **********************************************************************************
+
+ // To get how many SIM cards are available in a device
+ var count = tizen.systeminfo.getCount("SIM");
+ console.log("There is(are) " + count + " SIM card(s) available.");
+
+ // To send a message via the last SIM
+ services[0].sendMessage(msg, messageSent, messageFailed, count);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageService::loadMessageBody">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService::loadMessageBody"></a><code><b><span class="methodName">loadMessageBody</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Loads the body for a specified message.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void loadMessageBody(<a href="#Message">Message</a> message, <a href="#MessageBodySuccessCallback">MessageBodySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+It is the back end's responsibility to detect which MIME parts of the message are related to the message body and should be loaded.
+If the message body is already loaded, the onsuccess() method of the successCallback will be invoked immediately.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">message</span>: 
+         Message with the body to be loaded
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the message body is successfully loaded
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the loading request fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Assumes messaging service is initialized.
+ var service;
+ // Defines the success body loaded callback.
+ function successCallback(message) {
+   console.log ("body for message: " + message.subject + "from: " + message.from + "loaded.");
+ }
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot load message body" + error.message);
+ }
+
+ function messageQueryCallback(messages) {
+   for (var i = 0; i &lt; messages.length; i++) {
+     var message = messages[i];
+     if (!message.body.loaded) {
+        service.loadMessageBody(message, successCallback, errorCallback);
+     }
+   }
+ }
+
+ service.messageStorage.findMessages(new tizen.AttributeFilter("type", "EXACTLY", "messaging.email"), messageQueryCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageService::loadMessageAttachment">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService::loadMessageAttachment"></a><code><b><span class="methodName">loadMessageAttachment</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Loads a specified message attachment.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void loadMessageAttachment(<a href="#MessageAttachment">MessageAttachment</a> attachment, <a href="#MessageAttachmentSuccessCallback">MessageAttachmentSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method is used only for email services. If the message attachment is already loaded, the onsuccess() method of the successCallback is invoked immediately.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">attachment</span>: 
+      Message attachment to be loaded
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the message attachment is successfully loaded
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the loading request fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Assumes messaging service is initialized.
+ var service;
+ // Defines the success body loaded callback.
+ function successCallback(attachment) {
+   console.log("attachment" + attachment.id + "is loaded to:" + attachment.filePath);
+ }
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot load message attachment" + error.message);
+ }
+
+ function messagesFoundCB(messages) {
+   for (var i = 0; i &lt; messages.length; i++) {
+     var message = messages[i];
+     if (!message.attachments[0].loaded) {
+        service.loadMessageAttachment(message.attachments[0], successCallback, errorCallback);
+     }
+   }
+ }
+
+ service.messageStorage.findMessages(new tizen.AttributeFilter("hasAttachment", "EXACTLY", true), messagesFoundCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageService::sync">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService::sync"></a><code><b><span class="methodName">sync</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Synchronizes the service content with an external mail server.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long sync(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional unsigned long? limit);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method is used only for email services. This method performs the same actions as syncFolder for every folder with Synchronizable flag set within the current Messaging service.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ AbortError - If the operation has been stopped.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when the operation is completed successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the request fails
+                </li>
+          <li class="param">
+<span class="name">limit</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           Maximum amount of messages retrieved within each folder
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Identifier which can be used to stop initiated sync operation
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ function serviceSynced() {
+   console.log("New messages are fetched!");
+ }
+
+ // Defines the success callback.
+ function servicesListSuccessCB(services) {
+   services[0].sync(serviceSynced, null, 30);
+   // Subscribes to MessageStorage notification
+ }
+ tizen.messaging.getMessageServices("messaging.email", servicesListSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageService::syncFolder">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService::syncFolder"></a><code><b><span class="methodName">syncFolder</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Synchronizes the folder content with an external mail server.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long syncFolder(<a href="#MessageFolder">MessageFolder</a> folder, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional unsigned long? limit);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method is used only for email services. This method performs the following actions:
+            </p>
+            <ul>
+              <li>
+Exports local changes within a given folder from device to server.              </li>
+              <li>
+Retrieves the list of available messages from within the given folder.              </li>
+            </ul>
+            <p>
+Messages that are retrieved from a given folder, even if synchronizable flag for this folder is not set.
+The backend is responsible in deciding which data is retrieved for every message. It can be:
+            </p>
+            <ul>
+              <li>
+Message header details              </li>
+              <li>
+Whole message body              </li>
+            </ul>
+            <p>
+The limit of latest messages for the given folder must be retrieved and put into <em>MessageStorage</em>. If the limit is not set, the entire folder must be retrieved.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ AbortError - If the operation is stopped.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">folder</span>: 
+          Folder to be synchronized
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when the operation is completed successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the request fails
+                </li>
+          <li class="param">
+<span class="name">limit</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           The maximum amount of messages retrieved within a given folder
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Identifier which can be used to stop initiated sync operation
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var emailService; // Assumes email service is initialized
+  // Defines the error callback.
+ function errorCallback(err) {
+   console.log(err.name + " error: " + err.message);
+ }
+ function serviceCallback(services) {
+   emailService = services[0];
+   var filter = new tizen.AttributeFilter("serviceId", "EXACTLY", emailService.id);
+
+   emailService.messageStorage.findFolders(filter, folderQueryCallback);
+ }
+
+ // Defines the success callback.
+ function folderSynced() {
+   console.log("New messages are fetched!");
+ }
+ function folderQueryCallback(folders) {
+   console.log(folders.length + " folders(s) found!");
+   for (var i = 0; i &lt; folders.length; i++) {
+     emailService.syncFolder (folders[i], folderSynced, null, 30);
+   }
+ }
+
+ tizen.messaging.getMessageServices("messaging.email", serviceCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageService::stopSync">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageService::stopSync"></a><code><b><span class="methodName">stopSync</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops sync() and syncFoler() operation.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stopSync(long opId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the <em>operationId </em>argument is valid and corresponds to a service operation already in progress, the operation must be stopped and its error callback must be invoked with error type AbortError.
+            </p>
+            <p>
+If the <em>operationId </em>argument is not valid or does not correspond to a valid service operation, the method will return without any further action.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">opId</span>: 
+  Service operation identifier
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contains an invalid value.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageRecipientsCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageRecipientsCallback"></a><h3>2.9. MessageRecipientsCallback</h3>
+<div class="brief">
+ The MessageRecipientsCallback interface specifies the methods to be called for the sendMessage() operation.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageRecipientsCallback {
+
+    void onsuccess(DOMString[] recipients);
+
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageRecipientsCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageRecipientsCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the message sending is finished.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString[] recipients);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">recipients</span>: 
+ Recipients of the message
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageBodySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageBodySuccessCallback"></a><h3>2.10. MessageBodySuccessCallback</h3>
+<div class="brief">
+ The MessageBodySuccessCallback interface specifies a success callback function that takes a message as the input argument.
+It is used in the loadMessageBody() asynchronous operation.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageBodySuccessCallback {
+
+     void onsuccess(<a href="#Message">Message</a> message);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageBodySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageBodySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous query completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Message">Message</a> message);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">message</span>: 
+ Message containing the loaded body
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageAttachmentSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageAttachmentSuccessCallback"></a><h3>2.11. MessageAttachmentSuccessCallback</h3>
+<div class="brief">
+ The MessageAttachmentSuccessCallback callback interface specifies a success callback function that takes the loaded attachment as the input argument.
+It is used in the loadMessageAttachment() asynchronous operation.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageAttachmentSuccessCallback {
+
+     void onsuccess(<a href="#MessageAttachment">MessageAttachment</a> attachment);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageAttachmentSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageAttachmentSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous query completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#MessageAttachment">MessageAttachment</a> attachment);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">attachment</span>: 
+ Loaded attachment
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageStorage">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage"></a><h3>2.12. MessageStorage</h3>
+<div class="brief">
+ The MessageStorage interface allows management capabilities using a web application to query, update, and delete messages, and subscribe to <em>MessageStorage </em>changes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessageStorage {
+
+    void addDraftMessage(<a href="#Message">Message</a> message,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findMessages(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter,
+                      <a href="#MessageArraySuccessCallback">MessageArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                      optional <a href="tizen.html#SortMode">SortMode</a>? sort,
+                      optional unsigned long? limit,
+                      optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeMessages(<a href="#Message">Message</a>[] messages,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateMessages(<a href="#Message">Message</a>[] messages,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findConversations(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter,
+                           <a href="#MessageConversationArraySuccessCallback">MessageConversationArraySuccessCallback</a> successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                           optional <a href="tizen.html#SortMode">SortMode</a>? sort,
+                           optional unsigned long? limit,
+                           optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeConversations(<a href="#MessageConversation">MessageConversation</a>[] conversations,
+                             optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+    void findFolders(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter,
+                     <a href="#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a> successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addMessagesChangeListener(<a href="#MessagesChangeCallback">MessagesChangeCallback</a> messagesChangeCallback,
+                                   optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addConversationsChangeListener(<a href="#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a> conversationsChangeCallback,
+                                        optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addFoldersChangeListener(<a href="#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> foldersChangeCallback,
+                                  optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+In addition to simple message queries, the <em>MessageStorage </em>interface provides functionality to find conversations and folders.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageStorage::addDraftMessage">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::addDraftMessage"></a><code><b><span class="methodName">addDraftMessage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a draft message to <em>MessageStorage</em> and these messages are stored in the Drafts folder.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addDraftMessage(<a href="#Message">Message</a> message, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">message</span>: 
+         Draft message to add to the storage
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when draft messages are successfully added
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter or if the method is invoked for a received message.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ function successCallback() {
+   console.log("Draft message added");
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot add draft message " + error.message);
+ }
+
+ // Defines the service query success callback.
+ function serviceListCB(services) {
+   if (services.length &gt; 0) {
+     var msg = new tizen.Message("messaging.sms", {plainBody: "Tizen draft SMS message."});
+     services[0].messageStorage.addDraftMessage(msg,
+                                                successCallback,
+                                                errorCallback);
+   }
+ }
+ tizen.messaging.getMessageServices("messaging.sms", serviceListCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::findMessages">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::findMessages"></a><code><b><span class="methodName">findMessages</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds messages from <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void findMessages(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter, <a href="#MessageArraySuccessCallback">MessageArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#SortMode">SortMode</a>? sort, optional unsigned long? limit, optional unsigned long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filter</span>: 
+          Criteria to be used when filtering
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+          <li class="param">
+<span class="name">sort</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+            Sorting mode for the query
+                </li>
+          <li class="param">
+<span class="name">limit</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           The maximum number of messages to retrieve (It has the same meaning as SQL LIMIT)<br>Defaults to <var>0</var>, meaning that there is no limit
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+          Offset in the result set, from where the results are listed (It is the same semantics as SQL OFFSET)<br>Defaults to <var>0</var>, meaning no offset.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ function messageArrayCB(messages) {
+   console.log(messages.length + " message(s) fetched!");
+   for (var i = 0; i &lt; messages.length; i++) {
+     console.log(i + ". message from " + messages[i].from);
+   }
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot query messages" + error.message);
+ }
+
+ var filter = new tizen.AttributeFilter("from", "CONTAINS", "2593");
+ messageStorage.findMessages(filter, messageArrayCB, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::removeMessages">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::removeMessages"></a><code><b><span class="methodName">removeMessages</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes messages from <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeMessages(<a href="#Message">Message</a>[] messages, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">messages</span>: 
+        Array of messages to delete
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when messages are successfully deleted
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback.
+ var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ function successCallback() {
+   console.log("Messages were deleted");
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot delete messages " + error.message);
+ }
+
+ function messageArrayCB(messages) {
+   if (messages.length &gt; 0) {
+     messageStorage.removeMessages(messages, successCallback, errorCallback);
+   } else {
+     console.log("No messages found");
+   }
+ }
+
+ var filter = new tizen.AttributeFilter("from", "CONTAINS", "2593");
+ messageStorage.findMessages(filter, messageArrayCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::updateMessages">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::updateMessages"></a><code><b><span class="methodName">updateMessages</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates messages in <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateMessages(<a href="#Message">Message</a>[] messages, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The backend must check whether the required updates can be applied and invoke the errorCallback, if they cannot be checked.
+Depending on the backend synchronization settings, the local changes in <em>MessageStorage</em> can be rewritten as a result of invoking the sync() or syncFolder() methods of the related message service.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">messages</span>: 
+        Array listing messages to update
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when messages are successfully updated
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+
+ // Defines the success callback.
+ function successCallback() {
+   console.log("Messages were updated");
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot update messages " + error.message);
+ }
+
+ function messageArrayCB(messages) {
+   if (messages.length &gt; 0) {
+     messages[0].isRead = true;
+     messageStorage.updateMessages([messages[0]], successCallback, errorCallback);
+   } else {
+     console.log("No messages found");
+   }
+ }
+
+ var filter = new tizen.AttributeFilter('isRead', 'EXACTLY', false);
+ messageStorage.findMessages(filter, messageArrayCB);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::findConversations">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::findConversations"></a><code><b><span class="methodName">findConversations</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds conversations from <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void findConversations(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter, <a href="#MessageConversationArraySuccessCallback">MessageConversationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="tizen.html#SortMode">SortMode</a>? sort, optional unsigned long? limit, optional unsigned long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filter</span>: 
+          Criteria to be used when filtering
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+          <li class="param">
+<span class="name">sort</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+            Sorting mode for the query
+                </li>
+          <li class="param">
+<span class="name">limit</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           The maximum number of messages to retrieve (It has the same meaning as SQL LIMIT)<br>If set to <var>0</var> or omitted, then the number of records is not limited.
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+          Offset in the result set, from where the results are listed (It is the same semantics as SQL OFFSET) <br>Defaults to<var> 0</var>, meaning no offset.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ function conversationsArrayCB(conversations) {
+   console.log(conversations.length + " conversation(s) found!");
+   for (var i = 0; i &lt; conversations.length; i++) {
+     console.log(i + ". conversation preview " + conversations[i].preview);
+   }
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot query conversations" + error.message);
+ }
+
+ var filter = new tizen.AttributeFilter('from', 'CONTAINS', '2593');
+ messageStorage.findConversations(filter, conversationsArrayCB, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::removeConversations">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::removeConversations"></a><code><b><span class="methodName">removeConversations</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes conversations from <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeConversations(<a href="#MessageConversation">MessageConversation</a>[] conversations, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">conversations</span>: 
+   Array of conversations to delete
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback function that is called when conversations are successfully deleted
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ // Defines the success callback.
+ function successCallback() {
+   console.log("Conversations deleted");
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Cannot delete conversations " + error.message);
+ }
+
+ function conversationsArrayCB(conversations) {
+   if (conversations.length &gt; 0) {
+     messageStorage.removeConversations(conversations, successCallback,
+                                                       errorCallback);
+   } else {
+     console.log("No conversations found");
+   }
+   console.log("Deleted " + conversations.length + " conversation(s)");
+ }
+
+ // Defines the error callback.
+ function queryErrorCB(error) {
+   console.log("Cannot query conversations" + error.message);
+ }
+
+ var filter = new tizen.AttributeFilter('from', 'CONTAINS', '2593');
+ messageStorage.findConversations(filter, conversationsArrayCB,
+                                          queryErrorCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::findFolders">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::findFolders"></a><code><b><span class="methodName">findFolders</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Queries folders from MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void findFolders(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter, <a href="#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError: If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError: In any other error case.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filter</span>: 
+          Criteria used when filtering
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ function folderArrayCB(folders) {
+   console.log(folders.length + " folders(s) found!");
+   for (var i = 0; i &lt; folders.length; i++) {
+     console.log(i + ", folder: " + folders[i].name);
+   }
+ }
+ var filter = new tizen.AttributeFilter("serviceId", "EXACTLY", service.id);
+ messageStorage.findFolders(filter, folderArrayCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::addMessagesChangeListener">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::addMessagesChangeListener"></a><code><b><span class="methodName">addMessagesChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to subscribe to notification for MessageStorage changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addMessagesChangeListener(<a href="#MessagesChangeCallback">MessagesChangeCallback</a> messagesChangeCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">messagesChangeCallback</span>: 
+ Callback function that is called when the MessageStorage is changed
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+                 Criteria to be used when filtering (Message filter)
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ var messageChangeCallback = {
+       messagesupdated: function(messages) {
+         console.log(messages.length + " message(s) updated");},
+       messagesadded: function(messages) {
+         console.log(messages.length + " message(s) added");},
+       messagesremoved: function(messages) {
+         console.log(messages.length + " message(s) removed");}
+ };
+
+ messageStorage.addMessagesChangeListener(messageChangeCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::addConversationsChangeListener">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::addConversationsChangeListener"></a><code><b><span class="methodName">addConversationsChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to subscribe to notifications for MessageConversation changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addConversationsChangeListener(<a href="#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a> conversationsChangeCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">conversationsChangeCallback</span>: 
+ Callback function that is called when the MessageConversation is changed
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+                      Criteria to be used when filtering (MessageConversation filter)
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ var conversationChangeCB = {
+       conversationsupdated: function(conversations) {
+         console.log(conversations.length + " conversations(s) updated");},
+       conversationsadded: function(conversations) {
+         console.log(conversations.length + " conversations(s) added");},
+       conversationsremoved: function(conversations) {
+         console.log(conversations.length + " conversations(s) removed");}
+ };
+
+ messageStorage.addConversationsChangeListener(conversationChangeCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::addFoldersChangeListener">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::addFoldersChangeListener"></a><code><b><span class="methodName">addFoldersChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to subscribe to notifications for MessageFolder changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addFoldersChangeListener(<a href="#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> foldersChangeCallback, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">foldersChangeCallback</span>: 
+ Callback function that is called when the MessageFolder is changed
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+                Criteria to be used when filtering (MessageFolder filter)
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ var folderChangeCB = {
+       foldersupdated: function(folders) {
+         console.log(folders.length + " folders(s) updated");},
+       foldersadded: function(folders) {
+         console.log(folders.length + " folders(s) added");},
+       foldersremoved: function(folders) {
+         console.log(folders.length + " folders(s) removed");}
+ };
+
+ messageStorage.addFoldersChangeListener(folderChangeCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessageStorage::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageStorage::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a listener to unsubscribe from receiving message notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+            <p>
+If the <em>subscriptionId </em>argument is valid and corresponds to a subscription already in place, the subscription process must stop immediately and further <em>MessagingStorage </em>change notifications must not be invoked.
+If the <em>subscriptionId argument does not correspond to a valid subscription, the method will return without any further action.
+</em>            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/messaging.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Identifier of the subscription returned by addMessagesChangeListener(), addConversationsChangeListener() or
+addFoldersChangeListener() methods
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watchId;
+ var service; // Assumes messaging service is initialized
+ var messageStorage = service.messageStorage;
+ var folderChangeCB = {
+       foldersupdated: function(folders) {
+         console.log(folders.length + " folders(s) updated. Cancel watching.");
+         messageStorage.removeChangeListener(watchId); },
+       foldersadded: function(folders) {
+         console.log(folders.length + " folders(s) added. Cancel watching.");
+         messageStorage.removeChangeListener(watchId); },
+       foldersremoved: function(folders) {
+         console.log(folders.length + " folders(s) removed. Cancel watching.");
+         messageStorage.removeChangeListener(watchId);}
+ };
+
+ watchId = messageStorage.addFoldersChangeListener(folderChangeCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageArraySuccessCallback"></a><h3>2.13. MessageArraySuccessCallback</h3>
+<div class="brief">
+ The MessageArraySuccessCallback defines findMessages specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageArraySuccessCallback {
+
+    void onsuccess(<a href="#Message">Message</a>[] messages);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback function,
+taking a list of messages that satisfy the filtering criteria as the input argument.
+It is used in the findMessages asynchronous operation.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous query completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Message">Message</a>[] messages);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">messages</span>: 
+ Array of messages that satisfy the query
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageConversationArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversationArraySuccessCallback"></a><h3>2.14. MessageConversationArraySuccessCallback</h3>
+<div class="brief">
+ The MessageConversationArraySuccessCallback interface defines findConversations specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageConversationArraySuccessCallback {
+
+    void onsuccess(<a href="#MessageConversation">MessageConversation</a>[] conversations);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback function,
+taking a list of conversations that satisfy the filtering criteria as the input argument.
+It is used in the findConversations asynchronous operation.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageConversationArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversationArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous query completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#MessageConversation">MessageConversation</a>[] conversations);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">conversations</span>: 
+ Array of conversations that satisfy the query
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageFolderArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFolderArraySuccessCallback"></a><h3>2.15. MessageFolderArraySuccessCallback</h3>
+<div class="brief">
+ The MessageFolderArraySuccessCallback interface defines findFolders specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessageFolderArraySuccessCallback {
+
+    void onsuccess(<a href="#MessageFolder">MessageFolder</a>[] folders);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback function,
+taking a list of folders that satisfy the filtering criteria as the input argument.
+It is used in the findFolders asynchronous operation.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageFolderArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFolderArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous query completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#MessageFolder">MessageFolder</a>[] folders);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">folders</span>: 
+ Array of folders that satisfy the query
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessagesChangeCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessagesChangeCallback"></a><h3>2.16. MessagesChangeCallback</h3>
+<div class="brief">
+ The MessagesChangeCallback defines addMessagesChangeListener callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface MessagesChangeCallback {
+
+    void messagesadded(<a href="#Message">Message</a>[] addedMessages);
+
+    void messagesupdated(<a href="#Message">Message</a>[] updatedMessages);
+
+    void messagesremoved(<a href="#Message">Message</a>[] removedMessages);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a callback as a set of functions that will be
+invoked when messages from MessageStorage change. Each function takes a list of messages as the input argument.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessagesChangeCallback::messagesadded">
+<a class="backward-compatibility-anchor" name="::Messaging::MessagesChangeCallback::messagesadded"></a><code><b><span class="methodName">messagesadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when messages are added to the MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void messagesadded(<a href="#Message">Message</a>[] addedMessages);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addedMessages</span>: 
+ Array of added messages
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MessagesChangeCallback::messagesupdated">
+<a class="backward-compatibility-anchor" name="::Messaging::MessagesChangeCallback::messagesupdated"></a><code><b><span class="methodName">messagesupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when messages are updated in MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void messagesupdated(<a href="#Message">Message</a>[] updatedMessages);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">updatedMessages</span>: 
+ Array of updated messages
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MessagesChangeCallback::messagesremoved">
+<a class="backward-compatibility-anchor" name="::Messaging::MessagesChangeCallback::messagesremoved"></a><code><b><span class="methodName">messagesremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when messages are removed from MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void messagesremoved(<a href="#Message">Message</a>[] removedMessages);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">removedMessages</span>: 
+ Array of removed messages
+It contains only MessageId attribute.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageConversationsChangeCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversationsChangeCallback"></a><h3>2.17. MessageConversationsChangeCallback</h3>
+<div class="brief">
+ The MessageConversationsChangeCallback interface defines addConversationsChangeListener callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface MessageConversationsChangeCallback {
+
+    void conversationsadded(<a href="#MessageConversation">MessageConversation</a>[] addedConversations);
+
+    void conversationsupdated(<a href="#MessageConversation">MessageConversation</a>[] updatedConversations);
+
+    void conversationsremoved(<a href="#MessageConversation">MessageConversation</a>[] removedConversations);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a callback as a set of functions that will be
+invoked when conversations from MessageStorage change. Each function takes a list of conversations as the input argument.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageConversationsChangeCallback::conversationsadded">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversationsChangeCallback::conversationsadded"></a><code><b><span class="methodName">conversationsadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when conversations are added to MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void conversationsadded(<a href="#MessageConversation">MessageConversation</a>[] addedConversations);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addedConversations</span>: 
+ Array of added conversations
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MessageConversationsChangeCallback::conversationsupdated">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversationsChangeCallback::conversationsupdated"></a><code><b><span class="methodName">conversationsupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when conversations are updated in MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void conversationsupdated(<a href="#MessageConversation">MessageConversation</a>[] updatedConversations);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">updatedConversations</span>: 
+ Array of updated conversations
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MessageConversationsChangeCallback::conversationsremoved">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversationsChangeCallback::conversationsremoved"></a><code><b><span class="methodName">conversationsremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when conversations are removed from MessageStorage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void conversationsremoved(<a href="#MessageConversation">MessageConversation</a>[] removedConversations);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">removedConversations</span>: 
+ Array of removed conversations.
+Every element contains only MessageConvId attribute.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageFoldersChangeCallback">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFoldersChangeCallback"></a><h3>2.18. MessageFoldersChangeCallback</h3>
+<div class="brief">
+ The MessageFoldersChangeCallback callback interface specifies a callback as a set of functions that are invoked when message folders from <em>MessageStorage </em>change.
+Each function takes a list of folders as the input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface MessageFoldersChangeCallback {
+
+    void foldersadded(<a href="#MessageFolder">MessageFolder</a>[] addedFolders);
+
+    void foldersupdated(<a href="#MessageFolder">MessageFolder</a>[] updatedFolders);
+
+    void foldersremoved(<a href="#MessageFolder">MessageFolder</a>[] removedFolders);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessageFoldersChangeCallback::foldersadded">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFoldersChangeCallback::foldersadded"></a><code><b><span class="methodName">foldersadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when folders are added to <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void foldersadded(<a href="#MessageFolder">MessageFolder</a>[] addedFolders);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">addedFolders</span>: 
+ Array of added folders
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MessageFoldersChangeCallback::foldersupdated">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFoldersChangeCallback::foldersupdated"></a><code><b><span class="methodName">foldersupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when folders are updated in <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void foldersupdated(<a href="#MessageFolder">MessageFolder</a>[] updatedFolders);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">updatedFolders</span>: 
+ Array of updated folders
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MessageFoldersChangeCallback::foldersremoved">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFoldersChangeCallback::foldersremoved"></a><code><b><span class="methodName">foldersremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when folders are removed from <em>MessageStorage</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void foldersremoved(<a href="#MessageFolder">MessageFolder</a>[] removedFolders);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">removedFolders</span>: 
+ Array of removed folders
+Each element contains only MessageFolderId attribute.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MessageConversation">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageConversation"></a><h3>2.19. MessageConversation</h3>
+<div class="brief">
+ The MessageConversation interface defines the message conversation (also known as the thread of messages).
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessageConversation {
+
+    readonly attribute <a href="#MessageConvId">MessageConvId</a> id;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> type;
+
+    readonly attribute Date timestamp;
+
+    readonly attribute unsigned long messageCount;
+
+    readonly attribute unsigned long unreadMessages;
+
+    readonly attribute DOMString preview;
+
+    readonly attribute DOMString subject;
+
+    readonly attribute boolean isRead;
+
+    readonly attribute DOMString from;
+
+    readonly attribute DOMString[] to;
+
+    readonly attribute DOMString[] cc;
+
+    readonly attribute DOMString[] bcc;
+
+    readonly attribute <a href="#MessageId">MessageId</a> lastMessageId;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface allows a web application to get the set of properties linked to a conversation.
+This interface provides only read-only attributes.
+          </p>
+          <p>
+The conversation object represents a group of messages combined by the set of message fields. Email conversations are grouped by subject, while chat messages are grouped by sender and recipient fields.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="MessageConversation::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageConvId </span><span class="name">id</span></span><div class="brief">
+ The conversation identifier.
+            </div>
+<div class="description">
+            <p>
+The ID is locally unique and persistent property, assigned by the device or the Web runtime (WRT).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageServiceTag </span><span class="name">type</span></span><div class="brief">
+ The type of a given conversation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::timestamp">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">timestamp</span></span><div class="brief">
+ The timestamp of the latest message in a conversation.
+            </div>
+<div class="description">
+            <p>
+This property is set up by the device or the Web runtime environment.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::messageCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">messageCount</span></span><div class="brief">
+ The count of messages in a conversation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::unreadMessages">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">unreadMessages</span></span><div class="brief">
+ The count of unread messages in a conversation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::preview">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">preview</span></span><div class="brief">
+ A preview of the latest message in a conversation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::subject">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">subject</span></span><div class="brief">
+ The subject of a conversation (applicable for group chats, MMS, email).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::isRead">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRead</span></span><div class="brief">
+ The flag indicating whether the latest message in a conversation has been read.
+            </div>
+<div class="description">
+            <p>
+This property is set to <var>true</var> if the message has been read, else it is set to <var>false</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::from">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">from</span></span><div class="brief">
+ The source address (or source phone number) of the latest message in the conversation.
+            </div>
+<div class="description">
+            <p>
+This property is set up by the device or the Web runtime environment.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::to">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">to</span></span><div class="brief">
+ The destination of the latest message in a conversation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::cc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">cc</span></span><div class="brief">
+ The carbon copy (cc) address of the latest message in a conversation.
+            </div>
+<div class="description">
+            <p>
+This property is used only for email.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::bcc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">bcc</span></span><div class="brief">
+ The blind carbon copy (bcc) address of the latest message in a conversation.
+            </div>
+<div class="description">
+            <p>
+This property is used only for email.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageConversation::lastMessageId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageId </span><span class="name">lastMessageId</span></span><div class="brief">
+ The identifier of a latest message in a conversation.
+            </div>
+<div class="description">
+            <p>
+This property is set up by the device or the Web runtime environment.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="MessageFolder">
+<a class="backward-compatibility-anchor" name="::Messaging::MessageFolder"></a><h3>2.20. MessageFolder</h3>
+<div class="brief">
+ The MessageFolder interface defines the email folder.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessageFolder {
+
+    readonly attribute <a href="#MessageFolderId">MessageFolderId</a> id;
+
+    readonly attribute <a href="#MessageFolderId">MessageFolderId</a> parentId;
+
+    readonly attribute DOMString serviceId;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> contentType;
+
+    attribute DOMString name setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString path;
+
+    readonly attribute DOMString type;
+
+    attribute boolean synchronizable setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface allows a web application to get the set of properties that are linked to an email folder.
+          </p>
+          <p>
+The concept of folders is present in several email protocols, such as IMAP, Mail For Exchange.
+          </p>
+          <p>
+If the Messaging service does not represent email or an email protocol supporting the concept of folders on a server, this service has one folder which is the standard INBOX folder.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="MessageFolder::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageFolderId </span><span class="name">id</span></span><div class="brief">
+ The folder identifier.
+The ID is locally unique and persistent property, assigned by the device or the Web runtime (WRT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::parentId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageFolderId </span><span class="name">parentId</span></span><div class="brief">
+ The identifier for the parent folder of  a specified folder.
+            </div>
+<div class="description">
+            <p>
+If this folder is a root folder, the parent folder ID is <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::serviceId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">serviceId</span></span><div class="brief">
+ The identifier of the service to which a specified folder belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0.
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::contentType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MessageServiceTag </span><span class="name">contentType</span></span><div class="brief">
+ The type of the messages contained within a folder.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The visible name of a folder.
+            </div>
+<div class="description">
+            <p>
+Can be modified. By default, it contains the folder name from the server.
+            </p>
+            <p>
+In case the current Messaging service does not support remote folders on the server (and this folder is the only one that the current service has), this attribute contains the service name, by default.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::path">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">path</span></span><div class="brief">
+ The whole path of a remote folder on the server.
+            </div>
+<div class="description">
+            <p>
+If the current Messaging service does not support remote folders on the server,
+this attribute will be empty.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ The standard type of a folder.
+            </div>
+<div class="description">
+            <p>
+It can be one of the following values:
+            </p>
+            <ul>
+              <li>
+INBOX              </li>
+              <li>
+OUTBOX              </li>
+              <li>
+DRAFTS              </li>
+              <li>
+SENTBOX              </li>
+            </ul>
+            <p>
+If this folder is not a standard folder, an empty value must be returned.
+            </p>
+            <p>
+This property is unique for each type within one Messaging service.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="MessageFolder::synchronizable">
+<span class="attrName"><span class="type">boolean </span><span class="name">synchronizable</span></span><div class="brief">
+ The flag indicating whether this folder should be synchronized.
+            </div>
+<div class="description">
+            <p>
+This attribute affects the behavior of the MessageService.sync() method.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the sms application runs on a device with telephony(SMS) feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the mms application runs on a device with MMS feature, define below in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony.mms</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Messaging {
+
+  [NoInterfaceObject] interface MessageManagerObject {
+    readonly attribute <a href="#Messaging">Messaging</a> messaging;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MessageManagerObject">MessageManagerObject</a>;
+
+  enum MessageServiceTag {"messaging.sms", "messaging.mms", "messaging.email" };
+
+  typedef DOMString MessageId;
+
+  typedef DOMString MessageAttachmentId;
+
+  typedef DOMString MessageConvId;
+
+  typedef DOMString MessageFolderId;
+
+  [Constructor(<a href="#MessageServiceTag">MessageServiceTag</a> type, optional <a href="#MessageInit">MessageInit</a>? messageInitDict)]
+  interface Message {
+
+    readonly attribute <a href="#MessageId">MessageId</a>? id;
+
+    readonly attribute <a href="#MessageConvId">MessageConvId</a>? conversationId;
+
+    readonly attribute <a href="#MessageFolderId">MessageFolderId</a>? folderId;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> type;
+
+    readonly attribute Date? timestamp;
+
+    readonly attribute DOMString? from;
+
+    attribute DOMString[] to setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] cc setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString[] bcc setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#MessageBody">MessageBody</a> body setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute boolean isRead setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute boolean hasAttachment;
+
+    attribute boolean isHighPriority setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString subject setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="#MessageId">MessageId</a>? inResponseTo setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString messageStatus;
+
+    attribute <a href="#MessageAttachment">MessageAttachment</a>[] attachments setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+  dictionary MessageInit
+  {
+
+    DOMString subject;
+
+    DOMString[] to;
+
+    DOMString[] cc;
+
+    DOMString[] bcc;
+
+    DOMString plainBody;
+
+    DOMString htmlBody;
+
+    boolean isHighPriority;
+  };
+
+  [NoInterfaceObject] interface MessageBody {
+
+    readonly attribute <a href="#MessageId">MessageId</a> messageId;
+
+    readonly attribute boolean loaded;
+
+    attribute DOMString plainBody setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute DOMString htmlBody setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#MessageAttachment">MessageAttachment</a>[] inlineAttachments setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(DOMString filePath, optional DOMString? mimeType)]
+  interface MessageAttachment {
+
+    readonly attribute <a href="#MessageAttachmentId">MessageAttachmentId</a>? id;
+
+    readonly attribute <a href="#MessageId">MessageId</a>? messageId;
+
+    readonly attribute DOMString? mimeType;
+
+    readonly attribute DOMString? filePath;
+  };
+
+  [NoInterfaceObject] interface Messaging {
+
+    void getMessageServices(<a href="#MessageServiceTag">MessageServiceTag</a> messageServiceType,
+                            <a href="#MessageServiceArraySuccessCallback">MessageServiceArraySuccessCallback</a> successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageServiceArraySuccessCallback {
+
+    void onsuccess(<a href="#MessageService">MessageService</a>[] services);
+
+  };
+
+
+  [NoInterfaceObject] interface MessageService {
+
+    readonly attribute DOMString id;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> type;
+
+    readonly attribute DOMString name;
+
+    void sendMessage(<a href="#Message">Message</a> message,
+                     optional <a href="#MessageRecipientsCallback">MessageRecipientsCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                     optional long? simIndex) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void loadMessageBody(<a href="#Message">Message</a> message,
+                         <a href="#MessageBodySuccessCallback">MessageBodySuccessCallback</a> successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void loadMessageAttachment(<a href="#MessageAttachment">MessageAttachment</a> attachment,
+                               <a href="#MessageAttachmentSuccessCallback">MessageAttachmentSuccessCallback</a> successCallback,
+                               optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long sync(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional unsigned long? limit) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long syncFolder(<a href="#MessageFolder">MessageFolder</a> folder,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                    optional unsigned long? limit) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void stopSync(long opId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="#MessageStorage">MessageStorage</a> messageStorage getraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageRecipientsCallback {
+
+    void onsuccess(DOMString[] recipients);
+
+   };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageBodySuccessCallback {
+
+     void onsuccess(<a href="#Message">Message</a> message);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageAttachmentSuccessCallback {
+
+     void onsuccess(<a href="#MessageAttachment">MessageAttachment</a> attachment);
+   };
+
+  [NoInterfaceObject] interface MessageStorage {
+
+    void addDraftMessage(<a href="#Message">Message</a> message,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findMessages(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter,
+                      <a href="#MessageArraySuccessCallback">MessageArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                      optional <a href="tizen.html#SortMode">SortMode</a>? sort,
+                      optional unsigned long? limit,
+                      optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeMessages(<a href="#Message">Message</a>[] messages,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateMessages(<a href="#Message">Message</a>[] messages,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findConversations(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter,
+                           <a href="#MessageConversationArraySuccessCallback">MessageConversationArraySuccessCallback</a> successCallback,
+                           optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                           optional <a href="tizen.html#SortMode">SortMode</a>? sort,
+                           optional unsigned long? limit,
+                           optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeConversations(<a href="#MessageConversation">MessageConversation</a>[] conversations,
+                             optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+    void findFolders(<a href="tizen.html#AbstractFilter">AbstractFilter</a> filter,
+                     <a href="#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a> successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addMessagesChangeListener(<a href="#MessagesChangeCallback">MessagesChangeCallback</a> messagesChangeCallback,
+                                   optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addConversationsChangeListener(<a href="#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a> conversationsChangeCallback,
+                                        optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addFoldersChangeListener(<a href="#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> foldersChangeCallback,
+                                  optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageArraySuccessCallback {
+
+    void onsuccess(<a href="#Message">Message</a>[] messages);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageConversationArraySuccessCallback {
+
+    void onsuccess(<a href="#MessageConversation">MessageConversation</a>[] conversations);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessageFolderArraySuccessCallback {
+
+    void onsuccess(<a href="#MessageFolder">MessageFolder</a>[] folders);
+  };
+
+  [Callback, NoInterfaceObject] interface MessagesChangeCallback {
+
+    void messagesadded(<a href="#Message">Message</a>[] addedMessages);
+
+    void messagesupdated(<a href="#Message">Message</a>[] updatedMessages);
+
+    void messagesremoved(<a href="#Message">Message</a>[] removedMessages);
+  };
+
+  [Callback, NoInterfaceObject] interface MessageConversationsChangeCallback {
+
+    void conversationsadded(<a href="#MessageConversation">MessageConversation</a>[] addedConversations);
+
+    void conversationsupdated(<a href="#MessageConversation">MessageConversation</a>[] updatedConversations);
+
+    void conversationsremoved(<a href="#MessageConversation">MessageConversation</a>[] removedConversations);
+  };
+
+  [Callback, NoInterfaceObject] interface MessageFoldersChangeCallback {
+
+    void foldersadded(<a href="#MessageFolder">MessageFolder</a>[] addedFolders);
+
+    void foldersupdated(<a href="#MessageFolder">MessageFolder</a>[] updatedFolders);
+
+    void foldersremoved(<a href="#MessageFolder">MessageFolder</a>[] removedFolders);
+  };
+
+  [NoInterfaceObject] interface MessageConversation {
+
+    readonly attribute <a href="#MessageConvId">MessageConvId</a> id;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> type;
+
+    readonly attribute Date timestamp;
+
+    readonly attribute unsigned long messageCount;
+
+    readonly attribute unsigned long unreadMessages;
+
+    readonly attribute DOMString preview;
+
+    readonly attribute DOMString subject;
+
+    readonly attribute boolean isRead;
+
+    readonly attribute DOMString from;
+
+    readonly attribute DOMString[] to;
+
+    readonly attribute DOMString[] cc;
+
+    readonly attribute DOMString[] bcc;
+
+    readonly attribute <a href="#MessageId">MessageId</a> lastMessageId;
+  };
+
+  [NoInterfaceObject] interface MessageFolder {
+
+    readonly attribute <a href="#MessageFolderId">MessageFolderId</a> id;
+
+    readonly attribute <a href="#MessageFolderId">MessageFolderId</a> parentId;
+
+    readonly attribute DOMString serviceId;
+
+    readonly attribute <a href="#MessageServiceTag">MessageServiceTag</a> contentType;
+
+    attribute DOMString name setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString path;
+
+    readonly attribute DOMString type;
+
+    attribute boolean synchronizable setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon.png differ
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon_optional.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon_optional.png
new file mode 100644 (file)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/mw_icon_optional.png differ
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html
new file mode 100644 (file)
index 0000000..ef6b219
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html
@@ -0,0 +1,458 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>NetworkBearerSelection API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::NetworkBearerSelection">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>NetworkBearerSelection API</h1></div>
+<div class="brief">
+ The NetworkBearerSelection(NBS) API defines interfaces and methods providing Web applications to access the devices.
+        </div>
+<div class="description">
+        <p>
+This API provides interfaces and methods for users to set network bearer selection.
+Since Tizen 2.3, the "http://tizen.org/privilege/internet" privilege is additionally required.        </p>
+        <p>
+If not declared in config.xml of wgt file, <em>UnknownError</em> occurs.
+
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#NetworkType">NetworkType</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#NetworkBearerSelectionObject">NetworkBearerSelectionObject</a>
+</li>
+<li>2.2. <a href="#NetworkBearerSelection">NetworkBearerSelection</a>
+</li>
+<li>2.3. <a href="#NetworkSuccessCallback">NetworkSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#NetworkBearerSelectionObject">NetworkBearerSelectionObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NetworkBearerSelection">NetworkBearerSelection</a></td>
+<td>void <a href="#NetworkBearerSelection::requestRouteToHost">requestRouteToHost</a> (<a href="#NetworkType">NetworkType</a> networkType, DOMString domainName, <a href="#NetworkSuccessCallback">NetworkSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#NetworkBearerSelection::releaseRouteToHost">releaseRouteToHost</a> (<a href="#NetworkType">NetworkType</a> networkType, DOMString domainName, <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#NetworkSuccessCallback">NetworkSuccessCallback</a></td>
+<td>void <a href="#NetworkSuccessCallback::onsuccess">onsuccess</a> ()<br>
+    void <a href="#NetworkSuccessCallback::ondisconnected">ondisconnected</a> ()</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="NetworkType">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkType"></a><h3>1.1. NetworkType</h3>
+<div class="brief">
+ Specifies the type of a network.
+          </div>
+<pre class="webidl prettyprint">  enum NetworkType { "CELLULAR", "UNKNOWN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="NetworkBearerSelectionObject">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkBearerSelectionObject"></a><h3>2.1. NetworkBearerSelectionObject</h3>
+<div class="brief">
+ Specifies what is instantiated the Tizen object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NetworkBearerSelectionObject {
+    readonly attribute <a href="#NetworkBearerSelection">NetworkBearerSelection</a> networkbearerselection;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#NetworkBearerSelectionObject">NetworkBearerSelectionObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+There is a <em>tizen.networkbearerselection </em>object that allows accessing the functionality of the Networkbearerselection API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="NetworkBearerSelection">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkBearerSelection"></a><h3>2.2. NetworkBearerSelection</h3>
+<div class="brief">
+ The NetworkBearerSelection entry interface provides methods to query the network bearer selection.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NetworkBearerSelection {
+
+    void requestRouteToHost(<a href="#NetworkType">NetworkType</a> networkType,
+                            DOMString domainName,
+                            <a href="#NetworkSuccessCallback">NetworkSuccessCallback</a> successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void releaseRouteToHost(<a href="#NetworkType">NetworkType</a> networkType,
+                            DOMString domainName,
+                            <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This API offers methods for network bearer selection.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NetworkBearerSelection::requestRouteToHost">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkBearerSelection::requestRouteToHost"></a><code><b><span class="methodName">requestRouteToHost</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a specific network connection.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void requestRouteToHost(<a href="#NetworkType">NetworkType</a> networkType, DOMString domainName, <a href="#NetworkSuccessCallback">NetworkSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The function must asynchronously acquire success or fail.
+            </p>
+            <p>
+When called, it starts a request process defined with these set of steps:
+            </p>
+            <ul>
+              <li>
+1. Open "networkType" network connection.              </li>
+              <li>
+2. Resolve "domainName" to IP.              </li>
+              <li>
+3. Change the routing path bound to domainName's IP to use the specific network type.              </li>
+              <li>
+4. If previous steps have been successfully accomplished, call the onsuccess() callback function.<br>If previous steps have failed, call the ondisconnected() callback function.<br>If network is disconnected, the routing path will be deleted and ondisconnected() is called.              </li>
+            </ul>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ UnknownError : If the 'http://tizen.org/privilege/internet' privilege is not declared in config.xml or any other platform error occurs.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/networkbearerselection
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/internet
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>'http://tizen.org/privilege/internet'</em> privilege is required since Tizen 2.3.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">networkType</span>: 
+     The network type
+                </li>
+          <li class="param">
+<span class="name">domainName</span>: 
+      The domain name
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when data network connection is connected
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the request is failed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var statuscb = {
+   onsuccess: function() { console.log("onsuccess func is called"); },
+   ondisconnected: function() { console.log("ondisconnected func is called"); }
+ };
+ function ecb(e) { console.log("error callback is called : " + e.message + " : " + e.code); }
+ tizen.networkbearerselection.requestRouteToHost("CELLULAR", "www.tizen.org", statuscb, ecb);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NetworkBearerSelection::releaseRouteToHost">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkBearerSelection::releaseRouteToHost"></a><code><b><span class="methodName">releaseRouteToHost</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Releases a specific network connection.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void releaseRouteToHost(<a href="#NetworkType">NetworkType</a> networkType, DOMString domainName, <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The function must asynchronously acquire success or fail.
+            </p>
+            <p>
+When called, it closes a network connection.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ UnknownError : If the 'http://tizen.org/privilege/internet' privilege is not declared in config.xml or any other platform error occurs.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/networkbearerselection
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/internet
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>'http://tizen.org/privilege/internet'</em> privilege is required since Tizen 2.3.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">networkType</span>: 
+     Network type
+                </li>
+          <li class="param">
+<span class="name">domainName</span>: 
+      Domain name
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when data network connection is released
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the releasing fails
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function scb() { console.log("success callback is called"); }
+ function ecb(e) { console.log("error callback is called : " + e.message + " : " + e.code); }
+ var statuscb = {
+   onsuccess: function() {
+     console.log("onsuccess func is called");
+     tizen.networkbearerselection.releaseRouteToHost("CELLULAR", "www.google.com", scb, ecb);
+   },
+   ondisconnected: function() { console.log("ondisconnected func is called"); }
+ };
+ tizen.networkbearerselection.requestRouteToHost("CELLULAR", "www.google.com", statuscb, ecb);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NetworkSuccessCallback">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkSuccessCallback"></a><h3>2.3. NetworkSuccessCallback</h3>
+<div class="brief">
+ The NetworkSuccessCallback interface provides a success callback specific to NetworkBearerSelection.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface NetworkSuccessCallback {
+    void onsuccess();
+
+    void ondisconnected();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations with requestRouteToHost().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NetworkSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a network is connected successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</dd>
+<dt class="method" id="NetworkSuccessCallback::ondisconnected">
+<a class="backward-compatibility-anchor" name="::NetworkBearerSelection::NetworkSuccessCallback::ondisconnected"></a><code><b><span class="methodName">ondisconnected</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a network is disconnected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void ondisconnected();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the NBS application runs on a device with telephony feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module NetworkBearerSelection {
+
+  enum NetworkType { "CELLULAR", "UNKNOWN" };
+
+  [NoInterfaceObject] interface NetworkBearerSelectionObject {
+    readonly attribute <a href="#NetworkBearerSelection">NetworkBearerSelection</a> networkbearerselection;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#NetworkBearerSelectionObject">NetworkBearerSelectionObject</a>;
+
+  [NoInterfaceObject] interface NetworkBearerSelection {
+
+    void requestRouteToHost(<a href="#NetworkType">NetworkType</a> networkType,
+                            DOMString domainName,
+                            <a href="#NetworkSuccessCallback">NetworkSuccessCallback</a> successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void releaseRouteToHost(<a href="#NetworkType">NetworkType</a> networkType,
+                            DOMString domainName,
+                            <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+                            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback, NoInterfaceObject] interface NetworkSuccessCallback {
+    void onsuccess();
+
+    void ondisconnected();
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html
new file mode 100644 (file)
index 0000000..790bcda
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html
@@ -0,0 +1,3014 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>NFC API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::NFC">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>NFC API</h1></div>
+<div class="brief">
+  The NFC API provides a protocol for simple wireless interconnection of
+closely coupled devices operating at 13.56 MHz using Near Field Communication (NFC),
+which is an international standard (ISO/IEC 18092).
+To know more, see <a href="http://www.nfc-forum.org/specs/spec_list/">Technical Specifications</a>.
+        </div>
+<div class="description">
+        <p>
+There are three groups of application scenarios for NFC:
+        </p>
+        <ul>
+          <li>
+Exchanging some digital information or data by holding a device close to a wireless tag.          </li>
+          <li>
+Exchanging some information or data between two devices by holding them close to each other.          </li>
+          <li>
+Making payments by holding mobile phones close to point of sales terminals instead of swiping smart cards.          </li>
+        </ul>
+        <p>
+For more information on the NFC features, see <a href="../../../../../org.tizen.guides/html/web/tizen/communication/nfc_w.htm">NFC Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#NDEFRecordTextEncoding">NDEFRecordTextEncoding</a>
+</li>
+<li>1.2. <a href="#NFCTagType">NFCTagType</a>
+</li>
+<li>1.3. <a href="#CardEmulationMode">CardEmulationMode</a>
+</li>
+<li>1.4. <a href="#SecureElementType">SecureElementType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#NFCManagerObject">NFCManagerObject</a>
+</li>
+<li>2.2. <a href="#NFCManager">NFCManager</a>
+</li>
+<li>2.3. <a href="#NFCAdapter">NFCAdapter</a>
+</li>
+<li>2.4. <a href="#NFCTag">NFCTag</a>
+</li>
+<li>2.5. <a href="#NFCPeer">NFCPeer</a>
+</li>
+<li>2.6. <a href="#NDEFMessage">NDEFMessage</a>
+</li>
+<li>2.7. <a href="#NDEFRecord">NDEFRecord</a>
+</li>
+<li>2.8. <a href="#NDEFRecordText">NDEFRecordText</a>
+</li>
+<li>2.9. <a href="#NDEFRecordURI">NDEFRecordURI</a>
+</li>
+<li>2.10. <a href="#NDEFRecordMedia">NDEFRecordMedia</a>
+</li>
+<li>2.11. <a href="#NFCTagDetectCallback">NFCTagDetectCallback</a>
+</li>
+<li>2.12. <a href="#NFCPeerDetectCallback">NFCPeerDetectCallback</a>
+</li>
+<li>2.13. <a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a>
+</li>
+<li>2.14. <a href="#ByteArraySuccessCallback">ByteArraySuccessCallback</a>
+</li>
+<li>2.15. <a href="#CardEmulationModeChangeCallback">CardEmulationModeChangeCallback</a>
+</li>
+<li>2.16. <a href="#TransactionEventCallback">TransactionEventCallback</a>
+</li>
+<li>2.17. <a href="#ActiveSecureElementChangeCallback">ActiveSecureElementChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#NFCManagerObject">NFCManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NFCManager">NFCManager</a></td>
+<td>
+<a href="#NFCAdapter">NFCAdapter</a> <a href="#NFCManager::getDefaultAdapter">getDefaultAdapter</a> ()<br>
+    void <a href="#NFCManager::setExclusiveMode">setExclusiveMode</a> (boolean mode)</td>
+</tr>
+<tr>
+<td><a href="#NFCAdapter">NFCAdapter</a></td>
+<td>void <a href="#NFCAdapter::setPowered">setPowered</a> (boolean state, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#NFCAdapter::setTagListener">setTagListener</a> (<a href="#NFCTagDetectCallback">NFCTagDetectCallback</a> detectCallback, optional <a href="#NFCTagType">NFCTagType</a>[]? tagFilter)<br>
+    void <a href="#NFCAdapter::setPeerListener">setPeerListener</a> (<a href="#NFCPeerDetectCallback">NFCPeerDetectCallback</a> detectCallback)<br>
+    void <a href="#NFCAdapter::unsetTagListener">unsetTagListener</a> ()<br>
+    void <a href="#NFCAdapter::unsetPeerListener">unsetPeerListener</a> ()<br>
+    long <a href="#NFCAdapter::addCardEmulationModeChangeListener">addCardEmulationModeChangeListener</a> (<a href="#CardEmulationModeChangeCallback">CardEmulationModeChangeCallback</a> changeCallback)<br>
+    void <a href="#NFCAdapter::removeCardEmulationModeChangeListener">removeCardEmulationModeChangeListener</a> (long watchId)<br>
+    long <a href="#NFCAdapter::addTransactionEventListener">addTransactionEventListener</a> (<a href="#SecureElementType">SecureElementType</a> type, <a href="#TransactionEventCallback">TransactionEventCallback</a> eventCallback)<br>
+    void <a href="#NFCAdapter::removeTransactionEventListener">removeTransactionEventListener</a> (long watchId)<br>
+    long <a href="#NFCAdapter::addActiveSecureElementChangeListener">addActiveSecureElementChangeListener</a> (<a href="#ActiveSecureElementChangeCallback">ActiveSecureElementChangeCallback</a> changeCallback)<br>
+    void <a href="#NFCAdapter::removeActiveSecureElementChangeListener">removeActiveSecureElementChangeListener</a> (long watchId)<br>
+    <a href="#NDEFMessage">NDEFMessage</a>? <a href="#NFCAdapter::getCachedMessage">getCachedMessage</a> ()<br>
+    void <a href="#NFCAdapter::setExclusiveModeForTransaction">setExclusiveModeForTransaction</a> (boolean mode)</td>
+</tr>
+<tr>
+<td><a href="#NFCTag">NFCTag</a></td>
+<td>void <a href="#NFCTag::readNDEF">readNDEF</a> (<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> readCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#NFCTag::writeNDEF">writeNDEF</a> (<a href="#NDEFMessage">NDEFMessage</a> ndefMessage, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#NFCTag::transceive">transceive</a> (byte[] data, <a href="#ByteArraySuccessCallback">ByteArraySuccessCallback</a> dataCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#NFCPeer">NFCPeer</a></td>
+<td>void <a href="#NFCPeer::setReceiveNDEFListener">setReceiveNDEFListener</a> (<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> successCallback)<br>
+    void <a href="#NFCPeer::unsetReceiveNDEFListener">unsetReceiveNDEFListener</a> ()<br>
+    void <a href="#NFCPeer::sendNDEF">sendNDEF</a> (<a href="#NDEFMessage">NDEFMessage</a> ndefMessage, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#NDEFMessage">NDEFMessage</a></td>
+<td>byte[] <a href="#NDEFMessage::toByte">toByte</a> ()</td>
+</tr>
+<tr>
+<td><a href="#NDEFRecord">NDEFRecord</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NDEFRecordText">NDEFRecordText</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NDEFRecordURI">NDEFRecordURI</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NDEFRecordMedia">NDEFRecordMedia</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NFCTagDetectCallback">NFCTagDetectCallback</a></td>
+<td>void <a href="#NFCTagDetectCallback::onattach">onattach</a> (<a href="#NFCTag">NFCTag</a> nfcTag)<br>
+    void <a href="#NFCTagDetectCallback::ondetach">ondetach</a> ()</td>
+</tr>
+<tr>
+<td><a href="#NFCPeerDetectCallback">NFCPeerDetectCallback</a></td>
+<td>void <a href="#NFCPeerDetectCallback::onattach">onattach</a> (<a href="#NFCPeer">NFCPeer</a> nfcPeer)<br>
+    void <a href="#NFCPeerDetectCallback::ondetach">ondetach</a> ()</td>
+</tr>
+<tr>
+<td><a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a></td>
+<td>void <a href="#NDEFMessageReadCallback::onsuccess">onsuccess</a> (<a href="#NDEFMessage">NDEFMessage</a> ndefMessage)</td>
+</tr>
+<tr>
+<td><a href="#ByteArraySuccessCallback">ByteArraySuccessCallback</a></td>
+<td>void <a href="#ByteArraySuccessCallback::onsuccess">onsuccess</a> (byte[] data)</td>
+</tr>
+<tr>
+<td><a href="#CardEmulationModeChangeCallback">CardEmulationModeChangeCallback</a></td>
+<td>void <a href="#CardEmulationModeChangeCallback::onchanged">onchanged</a> (<a href="#CardEmulationMode">CardEmulationMode</a> mode)</td>
+</tr>
+<tr>
+<td><a href="#TransactionEventCallback">TransactionEventCallback</a></td>
+<td>void <a href="#TransactionEventCallback::ondetected">ondetected</a> (octet[] appletId, octet[] data)</td>
+</tr>
+<tr>
+<td><a href="#ActiveSecureElementChangeCallback">ActiveSecureElementChangeCallback</a></td>
+<td>void <a href="#ActiveSecureElementChangeCallback::onchanged">onchanged</a> (<a href="#SecureElementType">SecureElementType</a> type)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="NDEFRecordTextEncoding">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFRecordTextEncoding"></a><h3>1.1. NDEFRecordTextEncoding</h3>
+<div class="brief">
+ Specifies the encoding format for NDEF record text.
+          </div>
+<pre class="webidl prettyprint">  enum NDEFRecordTextEncoding { "UTF8", "UTF16" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="enum" id="NFCTagType">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTagType"></a><h3>1.2. NFCTagType</h3>
+<div class="brief">
+ Specifies the type of an NFC tag.
+          </div>
+<pre class="webidl prettyprint">  enum NFCTagType { "GENERIC_TARGET", "ISO14443_A", "ISO14443_4A", "ISO14443_3A",
+  "MIFARE_MINI", "MIFARE_1K", "MIFARE_4K", "MIFARE_ULTRA", "MIFARE_DESFIRE",
+  "ISO14443_B", "ISO14443_4B", "ISO14443_BPRIME", "FELICA", "JEWEL", "ISO15693",
+  "UNKNOWN_TARGET" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+GENERIC_TARGET            </li>
+            <li>
+ISO14443_A            </li>
+            <li>
+ISO14443_4A            </li>
+            <li>
+ISO14443_3A            </li>
+            <li>
+MIFARE_MINI            </li>
+            <li>
+MIFARE_1K            </li>
+            <li>
+MIFARE_4K            </li>
+            <li>
+MIFARE_ULTRA            </li>
+            <li>
+MIFARE_DESFIRE            </li>
+            <li>
+ISO14443_B            </li>
+            <li>
+ISO14443_4B            </li>
+            <li>
+ISO14443_BPRIME            </li>
+            <li>
+FELICA            </li>
+            <li>
+JEWEL            </li>
+            <li>
+ISO15693            </li>
+            <li>
+UNKNOWN_TARGET            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CardEmulationMode">
+<a class="backward-compatibility-anchor" name="::NFC::CardEmulationMode"></a><h3>1.3. CardEmulationMode</h3>
+<div class="brief">
+ Specifies the card emulation mode.
+          </div>
+<pre class="webidl prettyprint">  enum CardEmulationMode { "ALWAYS_ON", "OFF" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+ALWAYS_ON - Card emulation mode on            </li>
+            <li>
+OFF - Card emulation mode off            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SecureElementType">
+<a class="backward-compatibility-anchor" name="::NFC::SecureElementType"></a><h3>1.4. SecureElementType</h3>
+<div class="brief">
+ Specifies the secure element types.
+          </div>
+<pre class="webidl prettyprint">  enum SecureElementType { "ESE", "UICC" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+ESE - The eSE (Embedded Secure Element) secure element type             </li>
+            <li>
+UICC - The UICC (Universal Integrated Circuit Card) secure element type             </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="NFCManagerObject">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManagerObject"></a><h3>2.1. NFCManagerObject</h3>
+<div class="brief">
+ The NFCManagerObject interface defines what is instantiated by the <em>Tizen</em> object from the Tizen Platform.
+The <em>tizen.nfc </em>object allows access to the functionality of the NFC API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NFCManagerObject {
+    readonly attribute <a href="#NFCManager">NFCManager</a> nfc;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#NFCManagerObject">NFCManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="NFCManager">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager"></a><h3>2.2. NFCManager</h3>
+<div class="brief">
+ The NFCManager interface provides access to the NFC tag/target.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NFCManager {
+    const short NFC_RECORD_TNF_EMPTY = 0;
+    const short NFC_RECORD_TNF_WELL_KNOWN = 1;
+    const short NFC_RECORD_TNF_MIME_MEDIA = 2;
+    const short NFC_RECORD_TNF_URI = 3;
+    const short NFC_RECORD_TNF_EXTERNAL_RTD = 4;
+    const short NFC_RECORD_TNF_UNKNOWN = 5;
+    const short NFC_RECORD_TNF_UNCHANGED = 6;
+
+    <a href="#NFCAdapter">NFCAdapter</a> getDefaultAdapter() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setExclusiveMode(boolean mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It provides access to the API functionalities through the tizen.nfc interface.
+          </p>
+         </div>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_EMPTY">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_EMPTY"></a><span class="name">NFC_RECORD_TNF_EMPTY</span><div class="brief">
+ A constant to indicate the empty format of an NDEF record's type field.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_WELL_KNOWN">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_WELL_KNOWN"></a><span class="name">NFC_RECORD_TNF_WELL_KNOWN</span><div class="brief">
+ A constant to indicate the Record Type Definition (RTD) format of an NDEF record's type field.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_MIME_MEDIA">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_MIME_MEDIA"></a><span class="name">NFC_RECORD_TNF_MIME_MEDIA</span><div class="brief">
+ A constant to indicate the MIME media types format in RFC 2046 [RFC 2046] of an NDEF record's type field.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_URI">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_URI"></a><span class="name">NFC_RECORD_TNF_URI</span><div class="brief">
+ A constant to indicate the absolute URI, as defined in the RFC 3986 [RFC 3986] format in RFC 2046 [RFC 2046] of an NDEF record's type field.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_EXTERNAL_RTD">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_EXTERNAL_RTD"></a><span class="name">NFC_RECORD_TNF_EXTERNAL_RTD</span><div class="brief">
+ A constant to indicate the NFC forum external type [NFC RTD] format in RFC 2046 [RFC 2046] of an NDEF record's type field.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_UNKNOWN">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_UNKNOWN"></a><span class="name">NFC_RECORD_TNF_UNKNOWN</span><div class="brief">
+ A constant to indicate the unknown type format in RFC 2046 [RFC 2046] of an NDEF record's type field.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="NFCManager::NFC_RECORD_TNF_UNCHANGED">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::NFC_RECORD_TNF_UNCHANGED"></a><span class="name">NFC_RECORD_TNF_UNCHANGED</span><div class="brief">
+ A constant to indicate whether the payload is an intermediate or final chunk of a chunked NDEF record.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NFCManager::getDefaultAdapter">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::getDefaultAdapter"></a><code><b><span class="methodName">getDefaultAdapter</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the default NFC adapter of the device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#NFCAdapter">NFCAdapter</a> getDefaultAdapter();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.common
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ NFCAdapter The default NFCAdapter object.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     var adapter = tizen.nfc.getDefaultAdapter();
+ } catch (err) {
+     console.log(err.name +": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCManager::setExclusiveMode">
+<a class="backward-compatibility-anchor" name="::NFC::NFCManager::setExclusiveMode"></a><code><b><span class="methodName">setExclusiveMode</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gives priority to the current application for NFC operations.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setExclusiveMode(boolean mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the current application has priority, and is in the foreground, the system will not generate
+application control requests to pick an application to handle NFC requests.
+Such a request is usually generated, for example, when detecting an NFC tag or receiving an NDEF message
+from a connected NFC peer-to-peer target.
+            </p>
+            <p>
+When the current application moves to the background, it loses the priority.
+            </p>
+            <p>
+The exclusive mode can only be set when NFC is on. If NFC is off, the mode is ignored.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.common
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+ The value of the exclusive mode.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   tizen.nfc.setExclusiveMode(true) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NFCAdapter">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter"></a><h3>2.3. NFCAdapter</h3>
+<div class="brief">
+ The NFCAdapter interface provides access to control the adapter by offering methods to control local NFC behaviors, such as turning on/off an adapter.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NFCAdapter {
+    readonly attribute boolean powered;
+
+    attribute <a href="#CardEmulationMode">CardEmulationMode</a> cardEmulationMode raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#SecureElementType">SecureElementType</a>? activeSecureElement raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setPowered(boolean state,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setTagListener(<a href="#NFCTagDetectCallback">NFCTagDetectCallback</a> detectCallback,
+                        optional <a href="#NFCTagType">NFCTagType</a>[]? tagFilter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setPeerListener(<a href="#NFCPeerDetectCallback">NFCPeerDetectCallback</a> detectCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetTagListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetPeerListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addCardEmulationModeChangeListener(<a href="#CardEmulationModeChangeCallback">CardEmulationModeChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeCardEmulationModeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addTransactionEventListener(<a href="#SecureElementType">SecureElementType</a> type,
+                                     <a href="#TransactionEventCallback">TransactionEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeTransactionEventListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addActiveSecureElementChangeListener(<a href="#ActiveSecureElementChangeCallback">ActiveSecureElementChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeActiveSecureElementChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#NDEFMessage">NDEFMessage</a>? getCachedMessage() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setExclusiveModeForTransaction(boolean mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="NFCAdapter::powered">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">powered</span></span><div class="brief">
+ The state of the NFC adapter.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NFCAdapter::cardEmulationMode">
+<span class="attrName"><span class="type">CardEmulationMode </span><span class="name">cardEmulationMode</span></span><div class="brief">
+ Card emulation mode of the NFC adapter.
+            </div>
+<div class="description">
+            <p>
+To be allowed to change <var>cardEmulationMode</var>, the following privilege must be declared in the application's <em>config.xml</em> file.
+            </p>
+            <ul>
+              <li>
+<b>ALWAYS_ON</b> - NFC card emulation feature is enabled. NFC card emulation related methods are available for use.              </li>
+              <li>
+<b>OFF</b> - NFC card emulation related methods cannot be used              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if NFC card emulation is supported on this device, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.nfc.card_emulation")</var>.
+<br>If it is not supported, <var>NotSupportedError</var> is thrown.
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege or a valid certificate to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported in a device.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="NFCAdapter::activeSecureElement">
+<span class="attrName"><span class="type">SecureElementType </span><span class="name">activeSecureElement</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Active secure element type.
+            </div>
+<div class="description">
+            <p>
+To be allowed to change <var>activeSecureElement</var>, the following privilege must be declared in the application's <em>config.xml</em> file.
+            </p>
+            <p>
+If the NFC service is not available, it returns <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if NFC card emulation is supported on this device, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.nfc.card_emulation")</var>.
+<br>If it is not supported, <var>NotSupportedError</var> is thrown.
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege or a valid certificate to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported in a device.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NFCAdapter::setPowered">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::setPowered"></a><code><b><span class="methodName">setPowered</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the power of an NFC adapter to either an on state or an off state.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ It is deprecated since Tizen 2.3 and will be removed in Tizen 3.0. Instead, let the user turn NFC on/off through the Settings application. See the <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm">NFC Tutorial</a>.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint">void setPowered(boolean state, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If the NFC device is busy.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.admin
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">state</span>: 
+ The state of the NFC adapter, <var>true</var> means on, <var>false</var> means off
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the NFC adapter is
+enabled or disabled successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gNfcAdapter;
+ var onPowerOn = function(){ // Called when NFC adapter is powered on
+   try {
+     console.log("Power on succeed");
+     // Implement NFC communication routines ...
+     gNfcAdapter.setPowered(
+         false, // Disable NFC adapter
+         function () {console.log("Power off succeed"); }, // Handle success
+         function () {console.log("Power off failed"); }); // Handle failure
+   } catch (err) {
+     console.log(err.name + ": " + err.message);
+   }
+ };
+ try {
+   gNfcAdapter = tizen.nfc.getDefaultAdapter();
+   if (!gNfcAdapter.powered) {
+     gNfcAdapter.setPowered(
+         true, // Enable NFC adapter
+         onPowerOn,                                     // Handle success
+         function () {console.log("Power on failed")}); // Handle failure
+   } else {
+     onPowerOn();
+   }
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::setTagListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::setTagListener"></a><code><b><span class="methodName">setTagListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function to invoke when an NFC tag is detected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setTagListener(<a href="#NFCTagDetectCallback">NFCTagDetectCallback</a> detectCallback, optional <a href="#NFCTagType">NFCTagType</a>[]? tagFilter);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the registration completes successfully, detectCallback must be
+invoked when the NFC tag is detected.
+            </p>
+            <p>
+If no tagFilter is passed, it shall consider the default tagFilter, that is to set all tag types.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.tag
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">detectCallback</span>: 
+ Callback method to be invoked when an NFC tag is successfully detected.
+                </li>
+          <li class="param">
+<span class="name">tagFilter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A filter to be used when a specific NFC tag is detected.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+ var onSuccessCB = {onattach : function(nfcTag) {
+     console.log("NFC Tag's type is " + nfcTag.type);
+   }, ondetach : function() {
+     console.log("NFC Tag is detached");
+   }};
+ adapter.setTagListener(onSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::setPeerListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::setPeerListener"></a><code><b><span class="methodName">setPeerListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function to be invoked when an NFC peer-to-peer target is detected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setPeerListener(<a href="#NFCPeerDetectCallback">NFCPeerDetectCallback</a> detectCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the registration completes successfully, the detectCallback must be
+invoked when an NFC peer-to-peer target is detected.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.p2p
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">detectCallback</span>: 
+ Callback method to be invoked when an NFC peer-to-peer target is successfully detected.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+ var onSuccessCB = {onattach : function(nfcPeer) {
+     console.log("NFC Target is detected");
+   }, ondetach : function() {
+     console.log("NFC Target is detached");
+   }};
+ adapter.setPeerListener(onSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::unsetTagListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::unsetTagListener"></a><code><b><span class="methodName">unsetTagListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters the listener for detecting an NFC tag.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetTagListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.tag
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+
+ // Receives NFCTag
+ var onSuccessCB = {
+     onattach : function(nfcTag) {
+         console.log("The attached NFC tag's type is " + nfcTag.type);
+     },
+     ondetach : function() {
+         console.log("NFC tag is detached.");
+
+         // Unregister the listener when the NFC tag is detached.
+         adapter.unsetTagListener();
+     }
+ };
+
+ // Registers to be notified when NFC tag is detected.
+ adapter.setTagListener(onSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::unsetPeerListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::unsetPeerListener"></a><code><b><span class="methodName">unsetPeerListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters the listener for detecting an NFC peer-to-peer target.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetPeerListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.p2p
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+
+ // Receives an NFC peer.
+ var onSuccessCB = {
+     onattach : function(nfcPeer) {
+         console.log("NFC peer target is attached.");
+     },
+     ondetach : function() {
+         console.log("NFC peer target is detached.");
+
+         // Unregisters the listener when NFC peer target is detached.
+         adapter.unsetPeerListener();
+     }
+ };
+
+ // Registers to be notified when NFC peer target is detected.
+ adapter.setPeerListener(onSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::addCardEmulationModeChangeListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::addCardEmulationModeChangeListener"></a><code><b><span class="methodName">addCardEmulationModeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function to invoke when the card emulation mode is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addCardEmulationModeChangeListener(<a href="#CardEmulationModeChangeCallback">CardEmulationModeChangeCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method to be invoked when the card emulation mode is changed
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   var onSuccessCB = function(mode) {
+      console.log("The card emulation mode is " + mode);
+   };
+   var listenerId = adapter.addCardEmulationModeChangeListener(onSuccessCB) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::removeCardEmulationModeChangeListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::removeCardEmulationModeChangeListener"></a><code><b><span class="methodName">removeCardEmulationModeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification of card emulation mode changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeCardEmulationModeChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   adapter.removeCardEmulationModeChangeListener(listenerId) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::addTransactionEventListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::addTransactionEventListener"></a><code><b><span class="methodName">addTransactionEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function to invoke when an external reader tries to access a secure element.
+Such an event may indicate initiating a financial transaction using the device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addTransactionEventListener(<a href="#SecureElementType">SecureElementType</a> type, <a href="#TransactionEventCallback">TransactionEventCallback</a> eventCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Secure element type to listen
+                </li>
+          <li class="param">
+<span class="name">eventCallback</span>: 
+ Callback method to be invoked when an external reader tries to access a secure element
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   var listenerId = adapter.addTransactionEventListener("UICC", function(aid, data){console.log("transaction event occurs");}) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::removeTransactionEventListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::removeTransactionEventListener"></a><code><b><span class="methodName">removeTransactionEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification of transaction events.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeTransactionEventListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   adapter.removeTransactionEventListener(listenerId) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::addActiveSecureElementChangeListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::addActiveSecureElementChangeListener"></a><code><b><span class="methodName">addActiveSecureElementChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function to invoke when an active secure element is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addActiveSecureElementChangeListener(<a href="#ActiveSecureElementChangeCallback">ActiveSecureElementChangeCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method to be invoked when an active secure element is changed
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   var onSuccessCB = function(seType) {
+      console.log("Active secure element is " + seType);
+   };
+   var listenerId = adapter.addActiveSecureElementChangeListener(onSuccessCB) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::removeActiveSecureElementChangeListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::removeActiveSecureElementChangeListener"></a><code><b><span class="methodName">removeActiveSecureElementChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification of active secure element changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeActiveSecureElementChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   adapter.removeActiveSecureElementChangeListener(listenerId) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::getCachedMessage">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::getCachedMessage"></a><code><b><span class="methodName">getCachedMessage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the NDEF message cached when the tag is detected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#NDEFMessage">NDEFMessage</a>? getCachedMessage();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the operation completes successfully, the NDEF Message that is last read
+should be returned.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.common
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ NDEFMessage The NDEF Message that was last read.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the cached message
+ var cachedMessage = tizen.nfc.getDefaultAdapter().getCachedMessage();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCAdapter::setExclusiveModeForTransaction">
+<a class="backward-compatibility-anchor" name="::NFC::NFCAdapter::setExclusiveModeForTransaction"></a><code><b><span class="methodName">setExclusiveModeForTransaction</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gives priority to the current application for NFC transaction events.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setExclusiveModeForTransaction(boolean mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the current application has priority, and is in the foreground, the system will not generate
+application control requests to pick an application to handle a transaction event request.
+            </p>
+            <p>
+When the current application moves to the background, it loses priority.
+            </p>
+            <p>
+An application is allowed to get priority only when it is in the foreground.
+Losing priority is always allowed regardless of an application's status.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.cardemulation
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+ Value of the exclusive mode
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method or a valid certificate to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the application is not in the foreground and is trying to get priority.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if NFC card emulation is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+   adapter.setExclusiveModeForTransaction(true) ;
+ } catch (err) {
+   console.log(err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NFCTag">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTag"></a><h3>2.4. NFCTag</h3>
+<div class="brief">
+ The NFCTag interface provides access to the NFC tag.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NFCTag {
+    readonly attribute <a href="#NFCTagType">NFCTagType</a> type;
+
+    readonly attribute boolean isSupportedNDEF;
+
+    readonly attribute long ndefSize;
+
+    readonly attribute object properties;
+
+    readonly attribute boolean isConnected;
+
+
+     void readNDEF(<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> readCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeNDEF(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage,
+                   optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                   optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void transceive(byte[] data,
+                    <a href="#ByteArraySuccessCallback">ByteArraySuccessCallback</a> dataCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="NFCTag::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">NFCTagType </span><span class="name">type</span></span><div class="brief">
+ The type of the NFC tag.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NFCTag::isSupportedNDEF">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isSupportedNDEF</span></span><div class="brief">
+ An attribute to check if the NFC Tag supports the NDEF format.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NFCTag::ndefSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">ndefSize</span></span><div class="brief">
+ The size of an NDEF message stored in the tag.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NFCTag::properties">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">object </span><span class="name">properties</span></span><div class="brief">
+ The value is all tag information.
+            </div>
+<div class="description">
+            <p>
+It is pairs of key and value.
+The array's index is the pair's key and value is its value.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+ var onSuccessCB = {onattach : function(nfcTag) {
+     console.log("NFC Tag's type is " + nfcTag.type);
+     for(var i in nfcTag.properties) {
+       console.log("key:" + i + " value:" + nfcTag.properties[i]);
+     }
+   }, ondetach : function() {
+     console.log("NFC Tag is detached");
+   }};
+ adapter.setTagListener(onSuccessCB);
+
+ </pre>
+</div>
+</li>
+<li class="attribute" id="NFCTag::isConnected">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isConnected</span></span><div class="brief">
+ The value is necessary to check if this tag is connected.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NFCTag::readNDEF">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTag::readNDEF"></a><code><b><span class="methodName">readNDEF</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the NDEF data from the NFC tag.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void readNDEF(<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> readCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError - If the NFC service is not available.              </li>
+              <li>
+ InvalidValuesError - If the current Tag doesn't support the NDEF standard.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.tag
+            </p>
+<p><span class="remark"> Remark : </span>
+ If an NFC tag does not support the NDEF standard, <var>InvalidValuesError</var> would be returned instead of <var>NotSupportedError</var> since <em>Tizen 2.3</em>.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">readCallback</span>: 
+ Callback method to be invoked in case reading the NDEF Data is completed successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked in case any error occurs while reading the NDEF Data.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="NFCTag::writeNDEF">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTag::writeNDEF"></a><code><b><span class="methodName">writeNDEF</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the NDEF data to the NFC tag.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void writeNDEF(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError: If any of the input parameters contain an invalid value or the current Tag does not support the NDEF standard.              </li>
+              <li>
+ ServiceNotAvailableError: If the NFC service is not available.               </li>
+              <li>
+ UnknownError: In any other error case.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.tag
+            </p>
+<p><span class="remark"> Remark : </span>
+ If an NFC tag does not support the NDEF standard, <var>InvalidValuesError</var> would be returned instead of <var>NotSupportedError</var> since <em>Tizen 2.3</em>.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ndefMessage</span>: 
+ The NDEF message to write to an NFC tag.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked in case writing the NDEF Data is completed successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked in case any error occurs while writing the NDEF Data.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="NFCTag::transceive">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTag::transceive"></a><code><b><span class="methodName">transceive</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Accesses the raw format card. The transceive function is the only way to access the raw format card (not formatted).
+Each tag type requires its own command to access tags.
+This API provides low level access of the tag operation. (Note that you must know each tag technology.)
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void transceive(byte[] data, <a href="#ByteArraySuccessCallback">ByteArraySuccessCallback</a> dataCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+ ServiceNotAvailableError - If the NFC service is not available.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.tag
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+ The raw data to transceive with the NFC tag.
+                </li>
+          <li class="param">
+<span class="name">dataCallback</span>: 
+ Invoked in case transceiving the raw data is completed successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Invoked in case any error occurs while transceiving the NDEF Data.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NFCPeer">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeer"></a><h3>2.5. NFCPeer</h3>
+<div class="brief">
+ The NFCPeer interface provides access to the NFC peer-to-peer target.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface NFCPeer {
+    readonly attribute boolean isConnected;
+
+    void setReceiveNDEFListener(<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetReceiveNDEFListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void sendNDEF(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage,
+                  optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="NFCPeer::isConnected">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isConnected</span></span><div class="brief">
+ The value is necessary to check if this NFC peer-to-peer target is connected.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NFCPeer::setReceiveNDEFListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeer::setReceiveNDEFListener"></a><code><b><span class="methodName">setReceiveNDEFListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function to be invoked when an NDEF message is received from the connected NFC peer-to-peer target.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setReceiveNDEFListener(<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.p2p
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Invoked in case receiving the message is completed successfully.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+
+ // Receives NFCPeer
+ var onSuccessCB = {onattach : function(nfcPeer) {
+     console.log("NFC Target is detected");
+     nfcPeer.setReceiveNDEFListener(
+         function(message){
+            console.log("Receive message");
+         });
+   }, ondetach : function() {
+     console.log("NFC Target is detached");
+   }};
+
+ adapter.setPeerListener(onSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCPeer::unsetReceiveNDEFListener">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeer::unsetReceiveNDEFListener"></a><code><b><span class="methodName">unsetReceiveNDEFListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters the listener for receiving NDEF messages from the NFC peer-to-peer target connected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetReceiveNDEFListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.p2p
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the NFC service is not available.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var adapter = tizen.nfc.getDefaultAdapter();
+ var onSuccessCB = {onattach : function(nfcPeer) {
+     console.log("NFC Target is detected");
+     nfcPeer.setReceiveNDEFListener(
+         function(message){
+            console.log("Receive message");
+            nfcPeer.unsetReceiveNDEFListener();
+         });
+   }, ondetach : function() {
+     console.log("NFC Target is detached");
+   }};
+ }
+
+ adapter.setPeerListener(onSuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NFCPeer::sendNDEF">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeer::sendNDEF"></a><code><b><span class="methodName">sendNDEF</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends data to the NFC peer-to-peer target.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void sendNDEF(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError: If any of the input parameters contain an invalid value.              </li>
+              <li>
+ ServiceNotAvailableError: If the NFC service is not available.               </li>
+              <li>
+ UnknownError: In any other error case.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/nfc.p2p
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ndefMessage</span>: 
+ The NDEF message to send to the NFC peer-to-peer target.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Invoked in case sending data to the NFC peer-to-peer target is completed successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Invoked in case any error occurs while sending.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NDEFMessage">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFMessage"></a><h3>2.6. NDEFMessage</h3>
+<div class="brief">
+ The NDEFMessage interface. An NDEFmessage is composed of multiple NDEFRecords.
+The NDEFMessage must have at least one NDEFRecord.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(),
+   Constructor(<a href="#NDEFRecord">NDEFRecord</a>[] ndefRecords),
+   Constructor(byte[] rawData)]
+  interface NDEFMessage {
+    readonly attribute long recordCount;
+
+    attribute <a href="#NDEFRecord">NDEFRecord</a>[] records;
+
+    byte[] toByte() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="constructors">
+<h4 id="NDEFMessage::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">NDEFMessage();</pre>
+<pre class="webidl prettyprint">NDEFMessage(<a href="#NDEFRecord">NDEFRecord</a>[] ndefRecords);</pre>
+<pre class="webidl prettyprint">NDEFMessage(byte[] rawData);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="NDEFMessage::recordCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">recordCount</span></span><div class="brief">
+ The number of records in the NDEFMessage.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NDEFMessage::records">
+<span class="attrName"><span class="type">NDEFRecord[]
+                      </span><span class="name">records</span></span><div class="brief">
+ The array of NDEFRecord objects in the NDEFMessage.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NDEFMessage::toByte">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFMessage::toByte"></a><code><b><span class="methodName">toByte</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the serial byte array of the NDEF message.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">byte[] toByte();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the operation completes successfully, it returns the serial byte array of the NDEF message.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ byte[] The raw data in the NDEFMessage.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the records whose type is not NDEFRecord are included in the NDEFMessage.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the cached message.
+ var cachedMessage = tizen.nfc.getDefaultAdapter().getCachedMessage();
+ var raw = cachedMessage.toByte();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NDEFRecord">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFRecord"></a><h3>2.7. NDEFRecord</h3>
+<div class="brief">
+ The NDEFRecord interface.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(short tnf, byte[] type, byte[] payload, optional byte[]? id),
+   Constructor(byte[] raw_data)]
+  interface NDEFRecord {
+    readonly attribute short tnf;
+
+    readonly attribute byte[] type;
+
+    readonly attribute byte[] id;
+
+    readonly attribute byte[] payload;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="constructors">
+<h4 id="NDEFRecord::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">NDEFRecord(short tnf, byte[] type, byte[] payload, optional byte[]? id);</pre>
+<pre class="webidl prettyprint">NDEFRecord(byte[] raw_data);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="NDEFRecord::tnf">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">short </span><span class="name">tnf</span></span><div class="brief">
+ The value of the record type (TNF value).
+            </div>
+<div class="description">
+            <p>
+At least the following values must be supported:
+            </p>
+            <ul>
+              <li>
+NFC_RECORD_TNF_EMPTY - The record type is empty              </li>
+              <li>
+NFC_RECORD_TNF_WELL_KNOWN - Record Type Definition (RTD) format [NFC RTD]              </li>
+              <li>
+NFC_RECORD_TNF_MIME_MEDIA - MIME media types in RFC 2046 [RFC 2046]              </li>
+              <li>
+NFC_RECORD_TNF_URI - Absolute URI as defined in RFC 3986 [RFC 3986]              </li>
+              <li>
+NFC_RECORD_TNF_EXTERNAL_RTD - NFC forum external type [NFC RTD]              </li>
+              <li>
+NFC_RECORD_TNF_UNKNOWN - The payload type is unknown              </li>
+              <li>
+NFC_RECORD_TNF_UNCHANGED - It means the payload is an intermediate or final chunk of a chunked NDEF record              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NDEFRecord::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">byte[]
+                      </span><span class="name">type</span></span><div class="brief">
+ The specified type in byte array.
+            </div>
+<div class="description">
+            <p>
+The byte array contains <var>0</var> to <var>255</var> bytes.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NDEFRecord::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">byte[]
+                      </span><span class="name">id</span></span><div class="brief">
+ The record ID.
+            </div>
+<div class="description">
+            <p>
+The byte array contains <var>0</var> to <var>255</var> bytes.
+            </p>
+            <p>
+By default, this attribute is set to an empty array.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NDEFRecord::payload">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">byte[]
+                      </span><span class="name">payload</span></span><div class="brief">
+ The record payload.
+            </div>
+<div class="description">
+            <p>
+The byte array contains <var>0</var> to <var>(2 ** 32 - 1)</var> bytes.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Creates a new NDEF record.
+ var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");
+ var payload = newRecord.payload;
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="NDEFRecordText">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFRecordText"></a><h3>2.8. NDEFRecordText</h3>
+<div class="brief">
+ The NDEFRecord that has text type payload.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString text, DOMString languageCode, optional DOMString? encoding)]
+  interface NDEFRecordText : <a href="#NDEFRecord">NDEFRecord</a> {
+    readonly attribute DOMString text;
+
+    readonly attribute DOMString languageCode;
+
+    readonly attribute <a href="#NDEFRecordTextEncoding">NDEFRecordTextEncoding</a> encoding;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="constructors">
+<h4 id="NDEFRecordText::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">NDEFRecordText(DOMString text, DOMString languageCode, optional DOMString? encoding);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="NDEFRecordText::text">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">text</span></span><div class="brief">
+ The encoded text.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NDEFRecordText::languageCode">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">languageCode</span></span><div class="brief">
+ The language code string value, followed by IANA[RFC 3066] (for example, en-US, ko-KR).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="NDEFRecordText::encoding">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">NDEFRecordTextEncoding </span><span class="name">encoding</span></span><div class="brief">
+ The encoding type. By default, this attribute is set to UTF8.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="NDEFRecordURI">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFRecordURI"></a><h3>2.9. NDEFRecordURI</h3>
+<div class="brief">
+ The NDEFRecord that has URI type payload.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString uri)]
+  interface NDEFRecordURI : <a href="#NDEFRecord">NDEFRecord</a> {
+    readonly attribute DOMString uri;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="constructors">
+<h4 id="NDEFRecordURI::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">NDEFRecordURI(DOMString uri);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="NDEFRecordURI::uri">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">uri</span></span><div class="brief">
+ The URI string that is stored in the payload.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="NDEFRecordMedia">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFRecordMedia"></a><h3>2.10. NDEFRecordMedia</h3>
+<div class="brief">
+ The NDEFRecord that has mime type payload.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString mimeType, byte[] data)]
+  interface NDEFRecordMedia : <a href="#NDEFRecord">NDEFRecord</a> {
+    readonly attribute DOMString mimeType;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="constructors">
+<h4 id="NDEFRecordMedia::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">NDEFRecordMedia(DOMString mimeType, byte[] data);</pre>
+<div class="description">
+              <ul>
+                <li>
+<b>data</b> : Mime type payload. The byte array contains <var>0</var> to <var>(2 ** 32 - 1)</var> bytes.                </li>
+              </ul>
+             </div>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="NDEFRecordMedia::mimeType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">mimeType</span></span><div class="brief">
+ The mime type [RFC 2046] (for example, text/plain, image/jpeg ).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="NFCTagDetectCallback">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTagDetectCallback"></a><h3>2.11. NFCTagDetectCallback</h3>
+<div class="brief">
+ The NFCTagDetectCallback interface specifies a success callback to be invoked when an NFC tag is detected or lost.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface NFCTagDetectCallback {
+    void onattach(<a href="#NFCTag">NFCTag</a> nfcTag);
+    void ondetach();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies two methods:
+          </p>
+          <ul>
+            <li>
+ onattach: Invoked when an NFC tag is detected            </li>
+            <li>
+ ondetach: Invoked when an NFC tag is lost            </li>
+          </ul>
+          <p>
+It is used in NFCAdapter.setTagListener().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NFCTagDetectCallback::onattach">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTagDetectCallback::onattach"></a><code><b><span class="methodName">onattach</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The method invoked when a tag is attached.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onattach(<a href="#NFCTag">NFCTag</a> nfcTag);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">nfcTag</span>: 
+ The attached NFC tag.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="NFCTagDetectCallback::ondetach">
+<a class="backward-compatibility-anchor" name="::NFC::NFCTagDetectCallback::ondetach"></a><code><b><span class="methodName">ondetach</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The method invoked when the connected tag is detached.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void ondetach();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NFCPeerDetectCallback">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeerDetectCallback"></a><h3>2.12. NFCPeerDetectCallback</h3>
+<div class="brief">
+ The NFCPeerDetectCallback interface specifies a success callback to be invoked when an NFC peer-to-peer target is detected or lost.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface NFCPeerDetectCallback {
+    void onattach(<a href="#NFCPeer">NFCPeer</a> nfcPeer);
+    void ondetach();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies two methods:
+          </p>
+          <ul>
+            <li>
+ onattach: Invoked when an NFC peer-to-peer target is detected            </li>
+            <li>
+ ondetach: Invoked when an NFC peer-to-peer target is lost            </li>
+          </ul>
+          <p>
+It is used in NFCAdapter.setPeerListener().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NFCPeerDetectCallback::onattach">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeerDetectCallback::onattach"></a><code><b><span class="methodName">onattach</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The method invoked when the NFC peer-to-peer target is attached.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onattach(<a href="#NFCPeer">NFCPeer</a> nfcPeer);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">nfcPeer</span>: 
+ The attached NFC peer-to-peer target.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="NFCPeerDetectCallback::ondetach">
+<a class="backward-compatibility-anchor" name="::NFC::NFCPeerDetectCallback::ondetach"></a><code><b><span class="methodName">ondetach</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The method invoked when the connected NFC peer-to-peer target is detached.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void ondetach();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="NDEFMessageReadCallback">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFMessageReadCallback"></a><h3>2.13. NDEFMessageReadCallback</h3>
+<div class="brief">
+ The NDEFMessageReadCallback interface specifies a success callback to be invoked when data has been read successfully from the NFC tag or target.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface NDEFMessageReadCallback {
+    void onsuccess(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with
+an NDEF message as an input parameter.
+It is used in asynchronous
+operations, such as NFCTag.readNDEF() or NFCPeer.setReceiveNDEFListener().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NDEFMessageReadCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::NFC::NDEFMessageReadCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ndefMessage</span>: 
+ NDEF message that is read from the NFC tag or target.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ByteArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::NFC::ByteArraySuccessCallback"></a><h3>2.14. ByteArraySuccessCallback</h3>
+<div class="brief">
+ The ByteArraySuccessCallback interface specifies a success callback to be invoked when NFCTag.transceive() completes successfully.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ByteArraySuccessCallback {
+    void onsuccess(byte[] data);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method, with
+raw data as an input parameter. It is used in NFCTag.transceive().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ByteArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::NFC::ByteArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ The method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(byte[] data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+ The raw data that is read from the NFC tag or response of a transceive operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="CardEmulationModeChangeCallback">
+<a class="backward-compatibility-anchor" name="::NFC::CardEmulationModeChangeCallback"></a><h3>2.15. CardEmulationModeChangeCallback</h3>
+<div class="brief">
+ The CardEmulationModeChangeCallback interface specifies a success callback to be invoked when the card emulation mode is changed.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface CardEmulationModeChangeCallback {
+    void onchanged(<a href="#CardEmulationMode">CardEmulationMode</a> mode);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="CardEmulationModeChangeCallback::onchanged">
+<a class="backward-compatibility-anchor" name="::NFC::CardEmulationModeChangeCallback::onchanged"></a><code><b><span class="methodName">onchanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the card emulation mode is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onchanged(<a href="#CardEmulationMode">CardEmulationMode</a> mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+ Changed card emulation mode
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="TransactionEventCallback">
+<a class="backward-compatibility-anchor" name="::NFC::TransactionEventCallback"></a><h3>2.16. TransactionEventCallback</h3>
+<div class="brief">
+ The TransactionEventCallback interface specifies a success callback to be invoked when an external reader tries to access a secure element.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface TransactionEventCallback {
+    void ondetected(octet[] appletId, octet[] data);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TransactionEventCallback::ondetected">
+<a class="backward-compatibility-anchor" name="::NFC::TransactionEventCallback::ondetected"></a><code><b><span class="methodName">ondetected</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void ondetected(octet[] appletId, octet[] data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appletId</span>: 
+ ID of the applet in which the transaction has happened
+                </li>
+          <li class="param">
+<span class="name">data</span>: 
+ Transaction data
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ActiveSecureElementChangeCallback">
+<a class="backward-compatibility-anchor" name="::NFC::ActiveSecureElementChangeCallback"></a><h3>2.17. ActiveSecureElementChangeCallback</h3>
+<div class="brief">
+ The ActiveSecureElementChangeCallback interface specifies a success callback to be invoked when an active secure element is changed.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ActiveSecureElementChangeCallback {
+    void onchanged(<a href="#SecureElementType">SecureElementType</a> type);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ActiveSecureElementChangeCallback::onchanged">
+<a class="backward-compatibility-anchor" name="::NFC::ActiveSecureElementChangeCallback::onchanged"></a><code><b><span class="methodName">onchanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the type of an active secure element is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onchanged(<a href="#SecureElementType">SecureElementType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Type of a newly changed active secure element
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the NFC application runs on a device with the NFC feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.nfc</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the NFC card emulation application runs on a device with the NFC card emulation feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.nfc.card_emulation</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module NFC {
+  enum NDEFRecordTextEncoding { "UTF8", "UTF16" };
+
+  enum NFCTagType { "GENERIC_TARGET", "ISO14443_A", "ISO14443_4A", "ISO14443_3A",
+  "MIFARE_MINI", "MIFARE_1K", "MIFARE_4K", "MIFARE_ULTRA", "MIFARE_DESFIRE",
+  "ISO14443_B", "ISO14443_4B", "ISO14443_BPRIME", "FELICA", "JEWEL", "ISO15693",
+  "UNKNOWN_TARGET" };
+
+  enum CardEmulationMode { "ALWAYS_ON", "OFF" };
+
+  enum SecureElementType { "ESE", "UICC" };
+
+  [NoInterfaceObject] interface NFCManagerObject {
+    readonly attribute <a href="#NFCManager">NFCManager</a> nfc;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#NFCManagerObject">NFCManagerObject</a>;
+
+  [NoInterfaceObject] interface NFCManager {
+    const short NFC_RECORD_TNF_EMPTY = 0;
+    const short NFC_RECORD_TNF_WELL_KNOWN = 1;
+    const short NFC_RECORD_TNF_MIME_MEDIA = 2;
+    const short NFC_RECORD_TNF_URI = 3;
+    const short NFC_RECORD_TNF_EXTERNAL_RTD = 4;
+    const short NFC_RECORD_TNF_UNKNOWN = 5;
+    const short NFC_RECORD_TNF_UNCHANGED = 6;
+
+    <a href="#NFCAdapter">NFCAdapter</a> getDefaultAdapter() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setExclusiveMode(boolean mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+
+  [NoInterfaceObject] interface NFCAdapter {
+    readonly attribute boolean powered;
+
+    attribute <a href="#CardEmulationMode">CardEmulationMode</a> cardEmulationMode raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    attribute <a href="#SecureElementType">SecureElementType</a>? activeSecureElement raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setPowered(boolean state,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setTagListener(<a href="#NFCTagDetectCallback">NFCTagDetectCallback</a> detectCallback,
+                        optional <a href="#NFCTagType">NFCTagType</a>[]? tagFilter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setPeerListener(<a href="#NFCPeerDetectCallback">NFCPeerDetectCallback</a> detectCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetTagListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetPeerListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addCardEmulationModeChangeListener(<a href="#CardEmulationModeChangeCallback">CardEmulationModeChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeCardEmulationModeChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addTransactionEventListener(<a href="#SecureElementType">SecureElementType</a> type,
+                                     <a href="#TransactionEventCallback">TransactionEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeTransactionEventListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addActiveSecureElementChangeListener(<a href="#ActiveSecureElementChangeCallback">ActiveSecureElementChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeActiveSecureElementChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#NDEFMessage">NDEFMessage</a>? getCachedMessage() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setExclusiveModeForTransaction(boolean mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+
+  [NoInterfaceObject] interface NFCTag {
+    readonly attribute <a href="#NFCTagType">NFCTagType</a> type;
+
+    readonly attribute boolean isSupportedNDEF;
+
+    readonly attribute long ndefSize;
+
+    readonly attribute object properties;
+
+    readonly attribute boolean isConnected;
+
+
+     void readNDEF(<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> readCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeNDEF(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage,
+                   optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                   optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void transceive(byte[] data,
+                    <a href="#ByteArraySuccessCallback">ByteArraySuccessCallback</a> dataCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+
+  [NoInterfaceObject] interface NFCPeer {
+    readonly attribute boolean isConnected;
+
+    void setReceiveNDEFListener(<a href="#NDEFMessageReadCallback">NDEFMessageReadCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetReceiveNDEFListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void sendNDEF(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage,
+                  optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Constructor(),
+   Constructor(<a href="#NDEFRecord">NDEFRecord</a>[] ndefRecords),
+   Constructor(byte[] rawData)]
+  interface NDEFMessage {
+    readonly attribute long recordCount;
+
+    attribute <a href="#NDEFRecord">NDEFRecord</a>[] records;
+
+    byte[] toByte() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(short tnf, byte[] type, byte[] payload, optional byte[]? id),
+   Constructor(byte[] raw_data)]
+  interface NDEFRecord {
+    readonly attribute short tnf;
+
+    readonly attribute byte[] type;
+
+    readonly attribute byte[] id;
+
+    readonly attribute byte[] payload;
+  };
+
+  [Constructor(DOMString text, DOMString languageCode, optional DOMString? encoding)]
+  interface NDEFRecordText : <a href="#NDEFRecord">NDEFRecord</a> {
+    readonly attribute DOMString text;
+
+    readonly attribute DOMString languageCode;
+
+    readonly attribute <a href="#NDEFRecordTextEncoding">NDEFRecordTextEncoding</a> encoding;
+  };
+
+  [Constructor(DOMString uri)]
+  interface NDEFRecordURI : <a href="#NDEFRecord">NDEFRecord</a> {
+    readonly attribute DOMString uri;
+  };
+  [Constructor(DOMString mimeType, byte[] data)]
+  interface NDEFRecordMedia : <a href="#NDEFRecord">NDEFRecord</a> {
+    readonly attribute DOMString mimeType;
+  };
+
+
+  [Callback, NoInterfaceObject] interface NFCTagDetectCallback {
+    void onattach(<a href="#NFCTag">NFCTag</a> nfcTag);
+    void ondetach();
+  };
+
+  [Callback, NoInterfaceObject] interface NFCPeerDetectCallback {
+    void onattach(<a href="#NFCPeer">NFCPeer</a> nfcPeer);
+    void ondetach();
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface NDEFMessageReadCallback {
+    void onsuccess(<a href="#NDEFMessage">NDEFMessage</a> ndefMessage);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ByteArraySuccessCallback {
+    void onsuccess(byte[] data);
+  };
+
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface CardEmulationModeChangeCallback {
+    void onchanged(<a href="#CardEmulationMode">CardEmulationMode</a> mode);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface TransactionEventCallback {
+    void ondetected(octet[] appletId, octet[] data);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ActiveSecureElementChangeCallback {
+    void onchanged(<a href="#SecureElementType">SecureElementType</a> type);
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html
new file mode 100644 (file)
index 0000000..3feff76
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html
@@ -0,0 +1,1164 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Notification API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Notification">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Notification API</h1></div>
+<div class="brief">
+ The Notification API provides a way to notify users of events that happen in an application.
+        </div>
+<div class="description">
+        <p>
+For more information on the Notification features, see <a href="../../../../../org.tizen.guides/html/web/tizen/ui/noti_w.htm">Notification Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#NotificationId">NotificationId</a>
+</li>
+<li>1.2. <a href="#NotificationType">NotificationType</a>
+</li>
+<li>1.3. <a href="#StatusNotificationType">StatusNotificationType</a>
+</li>
+<li>1.4. <a href="#NotificationProgressType">NotificationProgressType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#NotificationObject">NotificationObject</a>
+</li>
+<li>2.2. <a href="#NotificationManager">NotificationManager</a>
+</li>
+<li>2.3. <a href="#Notification">Notification</a>
+</li>
+<li>2.4. <a href="#StatusNotificationInit">StatusNotificationInit</a>
+</li>
+<li>2.5. <a href="#StatusNotification">StatusNotification</a>
+</li>
+<li>2.6. <a href="#NotificationDetailInfo">NotificationDetailInfo</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#NotificationObject">NotificationObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NotificationManager">NotificationManager</a></td>
+<td>void <a href="#NotificationManager::post">post</a> (<a href="#Notification">Notification</a> notification)<br>
+    void <a href="#NotificationManager::update">update</a> (<a href="#Notification">Notification</a> notification)<br>
+    void <a href="#NotificationManager::remove">remove</a> (<a href="#NotificationId">NotificationId</a> id)<br>
+    void <a href="#NotificationManager::removeAll">removeAll</a> ()<br>
+    <a href="#Notification">Notification</a> <a href="#NotificationManager::get">get</a> (<a href="#NotificationId">NotificationId</a> id)<br>
+    <a href="#Notification">Notification</a>[] <a href="#NotificationManager::getAll">getAll</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Notification">Notification</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#StatusNotificationInit">StatusNotificationInit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#StatusNotification">StatusNotification</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#NotificationDetailInfo">NotificationDetailInfo</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="NotificationId">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationId"></a><h3>1.1. NotificationId</h3>
+<div class="brief">
+ A notification ID.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString NotificationId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="enum" id="NotificationType">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationType"></a><h3>1.2. NotificationType</h3>
+<div class="brief">
+ A notification type.
+          </div>
+<pre class="webidl prettyprint">    enum NotificationType { "STATUS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The following notification type is supported:
+          </p>
+          <ul>
+            <li>
+STATUS - The posted status notification is displayed on the status bar and the notification tray.
+The status notification consists of an icon, title, content, and time. The status notification can have an application control to launch the specific application when selected by the user.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="StatusNotificationType">
+<a class="backward-compatibility-anchor" name="::Notification::StatusNotificationType"></a><h3>1.3. StatusNotificationType</h3>
+<div class="brief">
+ A status notification type.
+          </div>
+<pre class="webidl prettyprint">    enum StatusNotificationType { "SIMPLE", "THUMBNAIL", "ONGOING", "PROGRESS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The following status notification types are supported:
+          </p>
+          <ul>
+            <li>
+SIMPLE - A basic status notification type that is removed automatically when selected by the user. All simple status notifications can be removed by user interaction.            </li>
+            <li>
+THUMBNAIL - The thumbnail status notification posts a thumbnail-format notification which includes several thumbnail image paths.
+The thumbnail status notification is also removed by user selection.
+            </li>
+            <li>
+ONGOING - A status notification type that informs the user whether an application is running or not. However, an ongoing status notification should be removed by the application that posted the notification.            </li>
+            <li>
+PROGRESS - A status notification that displays information on the progress of a job. However, this status notification should be removed by the application that posted the notification.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="NotificationProgressType">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationProgressType"></a><h3>1.4. NotificationProgressType</h3>
+<div class="brief">
+ A notification progress type.
+          </div>
+<pre class="webidl prettyprint">    enum NotificationProgressType { "PERCENTAGE",  "BYTE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following notification progress types are supported:
+          </p>
+          <ul>
+            <li>
+ "BYTE" - The progress is indicated in bytes.            </li>
+            <li>
+ "PERCENTAGE" -The progress is indicated in percentage.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="NotificationObject">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationObject"></a><h3>2.1. NotificationObject</h3>
+<div class="brief">
+ Defines what is instantiated by the <em>Tizen</em> object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface NotificationObject {
+        readonly attribute <a href="#NotificationManager">NotificationManager</a> notification;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#NotificationObject">NotificationObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.notification</em> object allows access to the
+Notification API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="NotificationManager">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager"></a><h3>2.2. NotificationManager</h3>
+<div class="brief">
+ Notification manager interface that provides access to the API.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface NotificationManager {
+
+    void post(<a href="#Notification">Notification</a> notification) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#Notification">Notification</a> notification) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#NotificationId">NotificationId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Notification">Notification</a> get(<a href="#NotificationId">NotificationId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Notification">Notification</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The NotificationManager interface provides access to the notification object.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="NotificationManager::post">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager::post"></a><code><b><span class="methodName">post</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Posts a notification to display.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void post(<a href="#Notification">Notification</a> notification);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">notification</span>: 
+ A notification to post.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      var appControl = new tizen.ApplicationControl(
+                       "http://tizen.org/appcontrol/operation/create_content",
+                       null,
+                       "image/jpg",
+                       null);
+      var notificationDict = {
+                  content : "This is a simple notification.",
+                  iconPath : "images/image1.jpg",
+                  soundPath : "music/Over the horizon.mp3",
+                  vibration : true,
+                  appControl : appControl};
+
+      var notification = new tizen.StatusNotification("SIMPLE",
+                  "Simple notification", notificationDict);
+
+      tizen.notification.post(notification);
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NotificationManager::update">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates a previously posted notification.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#Notification">Notification</a> notification);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">notification</span>: 
+ A notification to update.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      // Uses a variable for the previously posted notification.
+      notification.content = "My notification";
+      tizen.notification.update(notification);
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NotificationManager::remove">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a previously posted notification.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#NotificationId">NotificationId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ A previously posted notification ID to remove.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if NotificationId is not found in the previously posted notification.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      // Uses a variable for the previously posted notification.
+      tizen.notification.remove(notification.id);
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NotificationManager::removeAll">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager::removeAll"></a><code><b><span class="methodName">removeAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes all notifications that have been posted by the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      tizen.notification.removeAll();
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NotificationManager::get">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a notification that has previously been posted by the current application. Note that the obtained notification's progressType is <em>PERCENTAGE</em>            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Notification">Notification</a> get(<a href="#NotificationId">NotificationId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ A previously posted notification ID.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if NotificationId is not found in the previously posted notifications.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      // Uses a variable for the previously posted notification
+      // Saves the notification ID for future use
+      var myId = notification.id;
+
+      var myNotification = tizen.notification.get(myId);
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="NotificationManager::getAll">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationManager::getAll"></a><code><b><span class="methodName">getAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets all notifications that have previously been posted by the current application. Note that the obtained notification's progressType is <em>PERCENTAGE</em>            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Notification">Notification</a>[] getAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     var notifications = tizen.notification.getAll();
+     var index = 0;
+
+     for ( index = 0; index &lt; notifications.length; index++ )
+     {
+         console.log(notifications[index].id);
+         console.log(notifications[index].title);
+         console.log(notifications[index].statusType);
+         console.log(notifications[index].type);
+         console.log(notifications[index].content);
+         console.log(notifications[index].postedTime);
+         console.log(notifications[index].iconPath);
+         console.log(notifications[index].soundPath);
+         console.log(notifications[index].vibration);
+         console.log(notifications[index].appControl);
+     }
+ } catch (err) {
+     console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Notification">
+<a class="backward-compatibility-anchor" name="::Notification::Notification"></a><h3>2.3. Notification</h3>
+<div class="brief">
+ The Notification interface offers common attributes to represent the <em>Notification</em> object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface Notification {
+
+
+    readonly attribute <a href="#NotificationId">NotificationId</a> id;
+
+    readonly attribute <a href="#NotificationType">NotificationType</a> type;
+
+    readonly attribute Date postedTime;
+
+    attribute DOMString title;
+
+    attribute DOMString? content;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Notification::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">NotificationId </span><span class="name">id</span></span><div class="brief">
+ The Notification identifier. Before the notification is posted, this value is undefined.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Notification::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">NotificationType </span><span class="name">type</span></span><div class="brief">
+ The Notification type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Notification::postedTime">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">postedTime</span></span><div class="brief">
+ The time when the notification is posted. Before the notification is posted, this value is undefined.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Notification::title">
+<span class="attrName"><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The title to display in a notification.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Notification::content">
+<span class="attrName"><span class="type">DOMString </span><span class="name">content</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The content to display in a notification.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="StatusNotificationInit">
+<a class="backward-compatibility-anchor" name="::Notification::StatusNotificationInit"></a><h3>2.4. StatusNotificationInit</h3>
+<div class="brief">
+ The properties of StatusNotification, to pass a constructor.
+          </div>
+<pre class="webidl prettyprint">    dictionary StatusNotificationInit {
+        DOMString? content;
+        DOMString? iconPath;
+        DOMString? soundPath;
+        boolean? vibration;
+        <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl;
+        <a href="application.html#ApplicationId">ApplicationId</a>? appId;
+        <a href="#NotificationProgressType">NotificationProgressType</a>? progressType;
+        unsigned long? progressValue;
+        long? number;
+        DOMString? subIconPath;
+        <a href="#NotificationDetailInfo">NotificationDetailInfo</a>[]? detailInfo;
+        DOMString? ledColor;
+        unsigned long ledOnPeriod;
+        unsigned long ledOffPeriod;
+        DOMString? backgroundImagePath;
+        DOMString[]? thumbnails;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="interface" id="StatusNotification">
+<a class="backward-compatibility-anchor" name="::Notification::StatusNotification"></a><h3>2.5. StatusNotification</h3>
+<div class="brief">
+ The StatusNotification interface represents a status notification and offers additional attributes to represent a notification displayed in the notification tray.
+          </div>
+<pre class="webidl prettyprint">   [Constructor(<a href="#StatusNotificationType">StatusNotificationType</a> statusType, DOMString title, optional <a href="#StatusNotificationInit">StatusNotificationInit</a>? notificationInitDict)]
+
+
+    interface StatusNotification : <a href="#Notification">Notification</a> {
+
+    readonly attribute <a href="#StatusNotificationType">StatusNotificationType</a> statusType;
+
+    attribute DOMString? iconPath;
+
+    attribute DOMString? subIconPath;
+
+    attribute long? number;
+
+    attribute <a href="#NotificationDetailInfo">NotificationDetailInfo</a>[]? detailInfo;
+
+    attribute DOMString? ledColor;
+
+    attribute unsigned long ledOnPeriod;
+
+    attribute unsigned long ledOffPeriod;
+
+     attribute DOMString? backgroundImagePath;
+
+     attribute DOMString[]? thumbnails;
+
+     attribute DOMString? soundPath;
+
+     attribute boolean vibration;
+
+     attribute <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl;
+
+     attribute <a href="application.html#ApplicationId">ApplicationId</a>? appId;
+
+     attribute <a href="#NotificationProgressType">NotificationProgressType</a> progressType;
+
+     attribute unsigned long? progressValue;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+All notifications must have a title attribute.
+          </p>
+         </div>
+        
+      <div class="constructors">
+<h4 id="StatusNotification::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">StatusNotification(<a href="#StatusNotificationType">StatusNotificationType</a> statusType, DOMString title, optional <a href="#StatusNotificationInit">StatusNotificationInit</a>? notificationInitDict);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="StatusNotification::statusType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">StatusNotificationType </span><span class="name">statusType</span></span><div class="brief">
+ The status notification type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::iconPath">
+<span class="attrName"><span class="type">DOMString </span><span class="name">iconPath</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The icon path to display in the notification.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::subIconPath">
+<span class="attrName"><span class="type">DOMString </span><span class="name">subIconPath</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The sub icon path to display in the notification.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::number">
+<span class="attrName"><span class="type">long </span><span class="name">number</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The number of events to display in the notification.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::detailInfo">
+<span class="attrName"><span class="type">NotificationDetailInfo[]
+                      </span><span class="name">detailInfo</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Appends lines of the detail information to the notification.
+This attribute is available in a simple status notification.
+By default, this attribute is initialized with an empty array.
+The maximum number of detail information elements in the array is 2.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::ledColor">
+<span class="attrName"><span class="type">DOMString </span><span class="name">ledColor</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Sets the notification LED indicator color property.
+The color is a numerical RGB value(#rrggbb). The format of an RGB value in hexadecimal notation is a "#" immediately followed by exactly six hexadecimal characters(0-9, A-F). The color format is case-insensitive.
+The LED indicator color will show that it's a close approximation.
+LED will only light on when the screen is off. To turn the LED off, set "#000000" or null to ledColor.
+This method has effects when the device has notification LED.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      var notificationDict = {
+                  content : "This is a simple notification.",
+                  iconPath : "images/image1.jpg",
+                  soundPath : "music/Over the horizon.mp3",
+                  vibration : true,
+                  ledColor : "#FFFF00",
+                  ledOnPeriod: 1000,
+                  ledOffPeriod : 500 };
+
+      var notification = new tizen.StatusNotification("SIMPLE",
+                  "Simple notification", notificationDict);
+
+      tizen.notification.post(notification);
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="StatusNotification::ledOnPeriod">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">ledOnPeriod</span></span><div class="brief">
+ The milliseconds for which the light is on.
+The light continuously toggles on (ledOnPeriod) and off (ledOffPeriod).
+By default, this attribute is set to 0
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::ledOffPeriod">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">ledOffPeriod</span></span><div class="brief">
+ The milliseconds for which the light is off.
+By default, this attribute is set to 0.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::backgroundImagePath">
+<span class="attrName"><span class="type">DOMString </span><span class="name">backgroundImagePath</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The image path to use as the background of the notification.
+This attribute is available on simple or thumbnail status notifications.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::thumbnails">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">thumbnails</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The image paths associated with the thumbnail status notification.
+By default, this attribute is initialized with an empty array.
+The maximum number of thumbnail path elements in the array is 4.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::soundPath">
+<span class="attrName"><span class="type">DOMString </span><span class="name">soundPath</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The path of a sound file to play when the notification is shown.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::vibration">
+<span class="attrName"><span class="type">boolean </span><span class="name">vibration</span></span><div class="brief">
+ Checks whether to vibrate when the notification is shown. By default, this attribute is set to false.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::appControl">
+<span class="attrName"><span class="type">ApplicationControl </span><span class="name">appControl</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Holds the application control to launch an application when the notification is selected from the notification tray.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::appId">
+<span class="attrName"><span class="type">ApplicationId </span><span class="name">appId</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Holds the application ID to launch when the notification is selected from the notification tray.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+
+      // Gets the current application information with tizen.application.getAppInfo
+      var myappInfo = tizen.application.getAppInfo();
+
+      var notificationDict = {
+                  content : "This is a simple notification.",
+                  iconPath : "images/image1.jpg",
+                  soundPath : "music/Over the horizon.mp3",
+                  vibration : true,
+                  appId : myappInfo.id };
+
+      var notification = new tizen.StatusNotification("SIMPLE",
+                  "Simple notification", notificationDict);
+
+      tizen.notification.post(notification);
+ } catch (err) {
+      console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="StatusNotification::progressType">
+<span class="attrName"><span class="type">NotificationProgressType </span><span class="name">progressType</span></span><div class="brief">
+ Defines the type for an ongoing notification's progress.
+By default, this attribute is set to PERCENTAGE.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="StatusNotification::progressValue">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">progressValue</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Defines the current notification progress value (<em>PERCENTAGE</em> or <em>BYTE</em>), depending on the <em>progressType</em>            </div>
+<div class="description">
+            <p>
+If progressValue is set, the progressbar will be displayed in the notification. The progressValue can change the amount of progress as it moves forward or backward. It gets the progress value of the current notification.
+If 0, the indeterminate progressbar will be shown.
+This attribute is only available for StatusNotification of type <em>PROGRESS</em>.
+            </p>
+            <p>
+Applications should keep the progress value for its job because
+the saved value in the notification status tray would be different from
+the exact progress value.
+            </p>
+            <p>
+Range of <em>progressValue</em>: percent (0 to 100).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+      var appControl = new tizen.ApplicationControl(
+      "http://tizen.org/appcontrol/operation/create_content",
+      null,
+      "image/jpg",
+      null);
+
+      var notificationDict = {
+                  content : "This is a progress notification.",
+                  iconPath : "images/image2.jpg",
+                  soundPath : "music/Over the horizon.mp3",
+                  vibration : true,
+                  appControl : appControl,
+                  progressValue : 20};
+      // Constructs the progress notification
+      var notification = new tizen.StatusNotification("PROGRESS",
+                         "Progress notification", notificationDict);
+      // Posts the notification
+      tizen.notification.post(notification);
+
+      // Updates the progress value of the notification
+      notification.progressValue = 59;
+      tizen.notification.update(notification);
+
+
+ } catch (err) {
+     console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="NotificationDetailInfo">
+<a class="backward-compatibility-anchor" name="::Notification::NotificationDetailInfo"></a><h3>2.6. NotificationDetailInfo</h3>
+<div class="brief">
+ The NotificationDetailInfo object that contains the detail information of the notification.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(DOMString mainText, optional DOMString? subText)]
+    interface NotificationDetailInfo {
+    attribute DOMString mainText;
+
+    attribute DOMString? subText;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var detailInfo1 = new tizen.NotificationDetailInfo('Missed Call from James', 'Feb 11 2013');
+ notification.detailInfo = [detailInfo1];
+</pre>
+</div>
+<div class="constructors">
+<h4 id="NotificationDetailInfo::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">NotificationDetailInfo(DOMString mainText, optional DOMString? subText);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="NotificationDetailInfo::mainText">
+<span class="attrName"><span class="type">DOMString </span><span class="name">mainText</span></span><div class="brief">
+ The main content of the detail information.
+This attribute is available on simple status notifications.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="NotificationDetailInfo::subText">
+<span class="attrName"><span class="type">DOMString </span><span class="name">subText</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The secondary content of the detail information.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Notification {
+
+    typedef DOMString NotificationId;
+
+    enum NotificationType { "STATUS" };
+
+    enum StatusNotificationType { "SIMPLE", "THUMBNAIL", "ONGOING", "PROGRESS" };
+
+    enum NotificationProgressType { "PERCENTAGE",  "BYTE" };
+
+
+    [NoInterfaceObject] interface NotificationObject {
+        readonly attribute <a href="#NotificationManager">NotificationManager</a> notification;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#NotificationObject">NotificationObject</a>;
+
+    [NoInterfaceObject] interface NotificationManager {
+
+    void post(<a href="#Notification">Notification</a> notification) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void update(<a href="#Notification">Notification</a> notification) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#NotificationId">NotificationId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Notification">Notification</a> get(<a href="#NotificationId">NotificationId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#Notification">Notification</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+
+    [NoInterfaceObject] interface Notification {
+
+
+    readonly attribute <a href="#NotificationId">NotificationId</a> id;
+
+    readonly attribute <a href="#NotificationType">NotificationType</a> type;
+
+    readonly attribute Date postedTime;
+
+    attribute DOMString title;
+
+    attribute DOMString? content;
+
+    };
+
+
+    dictionary StatusNotificationInit {
+        DOMString? content;
+        DOMString? iconPath;
+        DOMString? soundPath;
+        boolean? vibration;
+        <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl;
+        <a href="application.html#ApplicationId">ApplicationId</a>? appId;
+        <a href="#NotificationProgressType">NotificationProgressType</a>? progressType;
+        unsigned long? progressValue;
+        long? number;
+        DOMString? subIconPath;
+        <a href="#NotificationDetailInfo">NotificationDetailInfo</a>[]? detailInfo;
+        DOMString? ledColor;
+        unsigned long ledOnPeriod;
+        unsigned long ledOffPeriod;
+        DOMString? backgroundImagePath;
+        DOMString[]? thumbnails;
+    };
+
+   [Constructor(<a href="#StatusNotificationType">StatusNotificationType</a> statusType, DOMString title, optional <a href="#StatusNotificationInit">StatusNotificationInit</a>? notificationInitDict)]
+
+
+    interface StatusNotification : <a href="#Notification">Notification</a> {
+
+    readonly attribute <a href="#StatusNotificationType">StatusNotificationType</a> statusType;
+
+    attribute DOMString? iconPath;
+
+    attribute DOMString? subIconPath;
+
+    attribute long? number;
+
+    attribute <a href="#NotificationDetailInfo">NotificationDetailInfo</a>[]? detailInfo;
+
+    attribute DOMString? ledColor;
+
+    attribute unsigned long ledOnPeriod;
+
+    attribute unsigned long ledOffPeriod;
+
+     attribute DOMString? backgroundImagePath;
+
+     attribute DOMString[]? thumbnails;
+
+     attribute DOMString? soundPath;
+
+     attribute boolean vibration;
+
+     attribute <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl;
+
+     attribute <a href="application.html#ApplicationId">ApplicationId</a>? appId;
+
+     attribute <a href="#NotificationProgressType">NotificationProgressType</a> progressType;
+
+     attribute unsigned long? progressValue;
+    };
+
+    [Constructor(DOMString mainText, optional DOMString? subText)]
+    interface NotificationDetailInfo {
+    attribute DOMString mainText;
+
+    attribute DOMString? subText;
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/package.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/package.html
new file mode 100644 (file)
index 0000000..d1c2ce3
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/package.html
@@ -0,0 +1,1093 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Package API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Package">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Package API</h1></div>
+<div class="brief">
+ This API provides functionalities to install or uninstall packages, and retrieve information about installed packages.<br>It also provides a listener method so that an application can be notified when there is a change on the installed packages.
+For more information on the Package features, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/package_w.htm">Package Guide</a>.
+        </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#PackageId">PackageId</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#PackageManagerObject">PackageManagerObject</a>
+</li>
+<li>2.2. <a href="#PackageManager">PackageManager</a>
+</li>
+<li>2.3. <a href="#PackageInformation">PackageInformation</a>
+</li>
+<li>2.4. <a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a>
+</li>
+<li>2.5. <a href="#PackageProgressCallback">PackageProgressCallback</a>
+</li>
+<li>2.6. <a href="#PackageInformationEventCallback">PackageInformationEventCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#PackageManagerObject">PackageManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PackageManager">PackageManager</a></td>
+<td>void <a href="#PackageManager::install">install</a> (DOMString packageFileURI, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#PackageManager::uninstall">uninstall</a> (<a href="#PackageId">PackageId</a> id, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#PackageManager::getPackagesInfo">getPackagesInfo</a> (<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#PackageInformation">PackageInformation</a> <a href="#PackageManager::getPackageInfo">getPackageInfo</a> (optional <a href="#PackageId">PackageId</a>? id)<br>
+    void <a href="#PackageManager::setPackageInfoEventListener">setPackageInfoEventListener</a> (<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback)<br>
+    void <a href="#PackageManager::unsetPackageInfoEventListener">unsetPackageInfoEventListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#PackageInformation">PackageInformation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a></td>
+<td>void <a href="#PackageInformationArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#PackageInformation">PackageInformation</a>[] informationArray)</td>
+</tr>
+<tr>
+<td><a href="#PackageProgressCallback">PackageProgressCallback</a></td>
+<td>void <a href="#PackageProgressCallback::onprogress">onprogress</a> (<a href="#PackageId">PackageId</a> id, short progress)<br>
+    void <a href="#PackageProgressCallback::oncomplete">oncomplete</a> (<a href="#PackageId">PackageId</a> id)</td>
+</tr>
+<tr>
+<td><a href="#PackageInformationEventCallback">PackageInformationEventCallback</a></td>
+<td>void <a href="#PackageInformationEventCallback::oninstalled">oninstalled</a> (<a href="#PackageInformation">PackageInformation</a> info)<br>
+    void <a href="#PackageInformationEventCallback::onupdated">onupdated</a> (<a href="#PackageInformation">PackageInformation</a> info)<br>
+    void <a href="#PackageInformationEventCallback::onuninstalled">onuninstalled</a> (<a href="#PackageId">PackageId</a> id)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="PackageId">
+<a class="backward-compatibility-anchor" name="::Package::PackageId"></a><h3>1.1. PackageId</h3>
+<div class="brief">
+ A unique ID for an installed package.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString PackageId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="PackageManagerObject">
+<a class="backward-compatibility-anchor" name="::Package::PackageManagerObject"></a><h3>2.1. PackageManagerObject</h3>
+<div class="brief">
+ This interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PackageManagerObject {
+        readonly attribute <a href="#PackageManager">PackageManager</a> package;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PackageManagerObject">PackageManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.package </em>object allows access to Package API functionality.
+          </p>
+         </div>
+</div>
+<div class="interface" id="PackageManager">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager"></a><h3>2.2. PackageManager</h3>
+<div class="brief">
+ This interface defines the package manager.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PackageManager {
+
+
+        void install(DOMString packageFileURI,
+                     <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void uninstall(<a href="#PackageId">PackageId</a> id, 
+                       <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+
+
+        void getPackagesInfo(<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        <a href="#PackageInformation">PackageInformation</a> getPackageInfo(optional <a href="#PackageId">PackageId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setPackageInfoEventListener(<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        
+
+        void unsetPackageInfoEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageManager::install">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::install"></a><code><b><span class="methodName">install</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Installs a package with a specified file on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void install(DOMString packageFileURI, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+This API provides a way to notify the progress and completion of an installation request through PackageProgressCallback.
+            </p>
+            <p>
+The <em>ErrorCallback() </em>is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the package is not found at the specified location.              </li>
+              <li>
+UnknownError - If it is not allowed to install the package by the platform or any other platform error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/packagemanager.install
+            </p>
+<p><span class="remark"> Remark : </span>
+ Virtual path cannot be used for the parameter. First, you need to convert any virtual path to a file URI path using the resolve function in the Filesystem API before passing it to the function.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">packageFileURI</span>: 
+ The location of the package to install
+                </li>
+          <li class="param">
+<span class="name">progressCallback</span>: 
+ The method to invoke when the installation is in progress or has been completed
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var onInstallation = {
+      onprogress: function(packageId, percentage) {
+         console.log("On installation(" + packageId + ") : progress(" + percentage + ")");
+      },
+      oncomplete: function(packageId) {
+         console.log("Installation(" + packageId + ") Complete");
+      }
+ }
+
+ var onError = function (err) {
+      console.log("Error occurred on installation : " + err.name);
+ }
+
+ // Let's assume that the "test.wgt" file exists in the downloads directory
+ tizen.filesystem.resolve("downloads/test.wgt",
+     function (file) {
+         console.log("file URI : " + file.toURI());
+         tizen.package.install(file.toURI(), onInstallation, onError);
+     },
+     function (err) {
+         console.log("Error occurred on resolve : " + err.name);
+     },
+     "r");
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::uninstall">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::uninstall"></a><code><b><span class="methodName">uninstall</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Uninstalls the package with a specified package ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void uninstall(<a href="#PackageId">PackageId</a> id, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+This API provides a way to notify about the progress and completion of an uninstallation request through PackageProgressCallback.
+            </p>
+            <p>
+The <em>ErrorCallback() </em>is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the package is not found with the specified ID.              </li>
+              <li>
+UnknownError - If it is not allowed to uninstall the package from the platform or any other platform error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/packagemanager.install
+            </p>
+<p><span class="remark"> Remark : </span>
+ Some preloaded packages cannot be uninstalled. In this case, ErrorCallback with the UnKnownError type is launched.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The package ID to uninstall
+                </li>
+          <li class="param">
+<span class="name">progressCallback</span>: 
+ The method to invoke when uninstallation is in progress or has been completed
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var onUninstallation = {
+      onprogress: function(packageId, percentage) {
+         console.log("On Uninstallation(" + packageId + ") : progress(" + percentage + ")");
+      },
+      oncomplete: function(packageId) {
+         console.log("Uninstallation(" + packageId + ") Complete");
+      }
+ };
+
+ var onError = function (err) {
+      console.log("Error occurred on installation : " + err.name);
+ };
+
+ // Let's assume that the package ID to uninstall is "testapp001"
+ tizen.package.uninstall("testapp001", onUninstallation, onError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::getPackagesInfo">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::getPackagesInfo"></a><code><b><span class="methodName">getPackagesInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets information of the installed packages.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPackagesInfo(<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The result contains the snapshots of the installed packages information.
+            </p>
+            <p>
+The <em>errorCallback()</em> is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError - If any other platform error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call when an invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onListInstalledPackages(packages) {
+     for (var i = 0; i &lt; packages.length; i++) {
+         console.log("Package id["+i+"] : " +packages[i].id);
+     }
+ }
+
+ tizen.package.getPackagesInfo(
+     onListInstalledPackages,
+     function (err) {console.log("Can't obtain packages list" + err.name);});
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::getPackageInfo">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::getPackageInfo"></a><code><b><span class="methodName">getPackageInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets information of an installed package.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#PackageInformation">PackageInformation</a> getPackageInfo(optional <a href="#PackageId">PackageId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns the package information of the current application.
+The list of installed packages and their package IDs is obtained using <em>getPackagesInfo()</em>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing the package ID. If the ID is not provided, the package information of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ PackageInformation The information of a package
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the package with the specified ID is not found.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the package information cannot be retrieved because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var packageInfo = tizen.package.getPackageInfo(null);
+
+ console.log("Current Package ID : " + packageInfo.id);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::setPackageInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::setPackageInfoEventListener"></a><code><b><span class="methodName">setPackageInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notifications for any changes made to the list of installed packages.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setPackageInfoEventListener(<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+This method sets a <em>PackageInformationEventCallback</em> type callback that is triggered when a package is installed, removed, or updated.
+            </p>
+            <p>
+The callback lasts until the <em>unsetPackageInfoEventListener()</em> method is called.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">eventCallback</span>: 
+ The method to be called when any change is made to the list of installed packages.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the package list change event cannot be generated because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var packageEventCallback = {
+    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>
+</div>
+</dd>
+<dt class="method" id="PackageManager::unsetPackageInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::unsetPackageInfoEventListener"></a><code><b><span class="methodName">unsetPackageInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving package notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetPackageInfoEventListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the listener removal request fails because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.package.unsetPackageInfoEventListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PackageInformation">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformation"></a><h3>2.3. PackageInformation</h3>
+<div class="brief">
+ This interface defines the general information available to an installed package.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PackageInformation {
+
+        readonly attribute <a href="#PackageId">PackageId</a> id;
+
+
+        readonly attribute DOMString name;
+
+
+        readonly attribute DOMString iconPath;
+
+
+        readonly attribute DOMString version;
+
+
+        readonly attribute long totalSize;
+
+
+        readonly attribute long dataSize;
+
+
+        readonly attribute Date lastModified;
+
+
+        readonly attribute DOMString author;
+
+
+        readonly attribute DOMString description;
+
+
+        readonly attribute <a href="application.html#ApplicationId">ApplicationId</a>[] appIds;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="PackageInformation::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PackageId </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the identifier of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An attribute to store the package name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::iconPath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iconPath</span></span><div class="brief">
+ An attribute to store the icon path of a package.
+            </div>
+<div class="description">
+            <p>
+The icon path of the package is the same as the icon path of the relevant application
+(see the <a href="application.html#ApplicationInformation::iconPath">iconPath</a> attribute of
+the <a href="application.html#ApplicationInformation">ApplicationInformation</a> interface).
+            </p>
+            <p>
+The relevant application is the one with the same
+<a href="application.html#ApplicationInformation::packageId">packageId</a> as the
+<a href="#PackageInformation::id">id</a> of this package.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::version">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">version</span></span><div class="brief">
+ An attribute to store the package version.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::totalSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">totalSize</span></span><div class="brief">
+ An attribute to store the total installed size(package + data) of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::dataSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">dataSize</span></span><div class="brief">
+ An attribute to store the current data size of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::lastModified">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">lastModified</span></span><div class="brief">
+ An attribute to store the latest installed or updated time of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::author">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">author</span></span><div class="brief">
+ An attribute to store the author of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::description">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">description</span></span><div class="brief">
+ An attribute to store the package description.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::appIds">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId[]
+                      </span><span class="name">appIds</span></span><div class="brief">
+ An attribute to store the application ID list of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="PackageInformationArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationArraySuccessCallback"></a><h3>2.4. PackageInformationArraySuccessCallback</h3>
+<div class="brief">
+ This interface invokes the success callback with an array of <em>PackageInformation </em>objects as an input parameter when the installed package list is retrieved.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface PackageInformationArraySuccessCallback {
+
+
+        void onsuccess(<a href="#PackageInformation">PackageInformation</a>[] informationArray);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It is used in <em>tizen.package.getPackagesInfo()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageInformationArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#PackageInformation">PackageInformation</a>[] informationArray);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">informationArray</span>: 
+ A list of installed packages' information.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PackageProgressCallback">
+<a class="backward-compatibility-anchor" name="::Package::PackageProgressCallback"></a><h3>2.5. PackageProgressCallback</h3>
+<div class="brief">
+ This callback interface specifies subscriptions for any notification on the progress or completion of requests.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface PackageProgressCallback {
+
+
+        void onprogress(<a href="#PackageId">PackageId</a> id, short progress);
+
+
+        void oncomplete(<a href="#PackageId">PackageId</a> id);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageProgressCallback::onprogress">
+<a class="backward-compatibility-anchor" name="::Package::PackageProgressCallback::onprogress"></a><code><b><span class="methodName">onprogress</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called while the request is in progress.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onprogress(<a href="#PackageId">PackageId</a> id, short progress);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The package ID
+                </li>
+          <li class="param">
+<span class="name">progress</span>: 
+ The progress in percentage.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PackageProgressCallback::oncomplete">
+<a class="backward-compatibility-anchor" name="::Package::PackageProgressCallback::oncomplete"></a><code><b><span class="methodName">oncomplete</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the request is completed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncomplete(<a href="#PackageId">PackageId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The package ID
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PackageInformationEventCallback">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback"></a><h3>2.6. PackageInformationEventCallback</h3>
+<div class="brief">
+ This callback interface specifies methods that are invoked when a package is installed, updated, or uninstalled.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface PackageInformationEventCallback {
+
+
+        void oninstalled(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onupdated(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onuninstalled(<a href="#PackageId">PackageId</a> id);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageInformationEventCallback::oninstalled">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback::oninstalled"></a><code><b><span class="methodName">oninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a package is installed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oninstalled(<a href="#PackageInformation">PackageInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The information of the installed package
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PackageInformationEventCallback::onupdated">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback::onupdated"></a><code><b><span class="methodName">onupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a package is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onupdated(<a href="#PackageInformation">PackageInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The information of the updated package
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PackageInformationEventCallback::onuninstalled">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback::onuninstalled"></a><code><b><span class="methodName">onuninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a package is uninstalled.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onuninstalled(<a href="#PackageId">PackageId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of the uninstalled package
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Package {
+
+
+    typedef DOMString PackageId;
+
+
+    [NoInterfaceObject] interface PackageManagerObject {
+        readonly attribute <a href="#PackageManager">PackageManager</a> package;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PackageManagerObject">PackageManagerObject</a>;
+
+
+    [NoInterfaceObject] interface PackageManager {
+
+
+        void install(DOMString packageFileURI,
+                     <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void uninstall(<a href="#PackageId">PackageId</a> id, 
+                       <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+
+
+        void getPackagesInfo(<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        <a href="#PackageInformation">PackageInformation</a> getPackageInfo(optional <a href="#PackageId">PackageId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setPackageInfoEventListener(<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        
+
+        void unsetPackageInfoEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    
+    };
+
+
+    [NoInterfaceObject] interface PackageInformation {
+
+        readonly attribute <a href="#PackageId">PackageId</a> id;
+
+
+        readonly attribute DOMString name;
+
+
+        readonly attribute DOMString iconPath;
+
+
+        readonly attribute DOMString version;
+
+
+        readonly attribute long totalSize;
+
+
+        readonly attribute long dataSize;
+
+
+        readonly attribute Date lastModified;
+
+
+        readonly attribute DOMString author;
+
+
+        readonly attribute DOMString description;
+
+
+        readonly attribute <a href="application.html#ApplicationId">ApplicationId</a>[] appIds;
+
+    };
+
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface PackageInformationArraySuccessCallback {
+
+
+        void onsuccess(<a href="#PackageInformation">PackageInformation</a>[] informationArray);
+    };
+
+
+    [Callback, NoInterfaceObject] interface PackageProgressCallback {
+
+
+        void onprogress(<a href="#PackageId">PackageId</a> id, short progress);
+
+
+        void oncomplete(<a href="#PackageId">PackageId</a> id);
+    };
+
+
+    [Callback, NoInterfaceObject] interface PackageInformationEventCallback {
+
+
+        void oninstalled(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onupdated(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onuninstalled(<a href="#PackageId">PackageId</a> id);
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/power.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/power.html
new file mode 100644 (file)
index 0000000..fe3de43
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/power.html
@@ -0,0 +1,792 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Power API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Power">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Power API</h1></div>
+<div class="brief">
+ The Power API provides support for requesting power management related resource states.
+        </div>
+<div class="description">
+        <p>
+For more information on the Power features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/power_w.htm">Power Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#PowerResource">PowerResource</a>
+</li>
+<li>1.2. <a href="#PowerScreenState">PowerScreenState</a>
+</li>
+<li>1.3. <a href="#PowerCpuState">PowerCpuState</a>
+</li>
+<li>1.4. <a href="#PowerState">PowerState</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#PowerManagerObject">PowerManagerObject</a>
+</li>
+<li>2.2. <a href="#PowerManager">PowerManager</a>
+</li>
+<li>2.3. <a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#PowerManagerObject">PowerManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PowerManager">PowerManager</a></td>
+<td>void <a href="#PowerManager::request">request</a> (<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state)<br>
+    void <a href="#PowerManager::release">release</a> (<a href="#PowerResource">PowerResource</a> resource)<br>
+    void <a href="#PowerManager::setScreenStateChangeListener">setScreenStateChangeListener</a> (<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener)<br>
+    void <a href="#PowerManager::unsetScreenStateChangeListener">unsetScreenStateChangeListener</a> ()<br>
+    double <a href="#PowerManager::getScreenBrightness">getScreenBrightness</a> ()<br>
+    void <a href="#PowerManager::setScreenBrightness">setScreenBrightness</a> (double brightness)<br>
+    boolean <a href="#PowerManager::isScreenOn">isScreenOn</a> ()<br>
+    void <a href="#PowerManager::restoreScreenBrightness">restoreScreenBrightness</a> ()<br>
+    void <a href="#PowerManager::turnScreenOn">turnScreenOn</a> ()<br>
+    void <a href="#PowerManager::turnScreenOff">turnScreenOff</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a></td>
+<td>void <a href="#ScreenStateChangeCallback::onchanged">onchanged</a> (<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="PowerResource">
+<a class="backward-compatibility-anchor" name="::Power::PowerResource"></a><h3>1.1. PowerResource</h3>
+<div class="brief">
+ Specifies power resources with values aligned with <em>SystemInfo </em>property values.
+          </div>
+<pre class="webidl prettyprint">    enum PowerResource    { "SCREEN", "CPU" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Screen and CPU resources are supported at present.
+Supported power resource states are provided in PowerScreenState and PowerCpuState enums respectively prefixed by the corresponding resource type.
+          </p>
+         </div>
+</div>
+<div class="enum" id="PowerScreenState">
+<a class="backward-compatibility-anchor" name="::Power::PowerScreenState"></a><h3>1.2. PowerScreenState</h3>
+<div class="brief">
+ Specifies the power state for screen resource.
+          </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ SCREEN_BRIGHT is deprecated.
+          </i></font></p></div>
+<pre class="webidl prettyprint">    enum PowerScreenState { "SCREEN_OFF", "SCREEN_DIM", "SCREEN_NORMAL", "SCREEN_BRIGHT" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The supported values are:
+          </p>
+          <ul>
+            <li>
+SCREEN_OFF - This screen state cannot be requested but can only be used in the state change callback.            </li>
+            <li>
+SCREEN_DIM - The minimal screen state is set to <em>DIM</em> and device does not change to <em>OFF</em> state automatically.            </li>
+            <li>
+SCREEN_NORMAL - The minimal screen state is set to <em>NORMAL</em> and device does not change to <em>DIM</em> state automatically.            </li>
+            <li>
+SCREEN_BRIGHT (Deprecated) - The minimal screen state is set to <em>BRIGHT</em> and device does not change to <em>NORMAL</em> state automatically.            </li>
+          </ul>
+          <p>
+<em>DIM</em> state refers to the screen that the backlight is turned off.
+<em>NORMAL</em> state refers to the default screen brightness that a user has configured for the device.
+<em>BRIGHT(Deprecated)</em> state refers to the maximum screen brightness that the device provides.
+Note that the change in brightness does not affect the system brightness setting, i.e., the system brightness value is automatically restored when the resource is released or the process is completed.
+          </p>
+         </div>
+</div>
+<div class="enum" id="PowerCpuState">
+<a class="backward-compatibility-anchor" name="::Power::PowerCpuState"></a><h3>1.3. PowerCpuState</h3>
+<div class="brief">
+ Specifies the power state for the CPU resource.
+          </div>
+<pre class="webidl prettyprint">    enum PowerCpuState { "CPU_AWAKE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The supported values are:
+          </p>
+          <ul>
+            <li>
+CPU_AWAKE - The CPU state is set to awake and it does not go to <em>SLEEP</em> state automatically.            </li>
+          </ul>
+         </div>
+</div>
+<div class="typedef" id="PowerState">
+<a class="backward-compatibility-anchor" name="::Power::PowerState"></a><h3>1.4. PowerState</h3>
+<div class="brief">
+ The supported power states in general.
+It can be either a PowerScreenState or a PowerCpuState.
+          </div>
+<pre class="webidl prettyprint">    typedef (<a href="#PowerScreenState">PowerScreenState</a> or <a href="#PowerCpuState">PowerCpuState</a>) PowerState;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="PowerManagerObject">
+<a class="backward-compatibility-anchor" name="::Power::PowerManagerObject"></a><h3>2.1. PowerManagerObject</h3>
+<div class="brief">
+ The PowerManagerObject interface defines what is instantiated by the <em>Tizen</em> object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PowerManagerObject {
+        readonly attribute <a href="#PowerManager">PowerManager</a> power;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PowerManagerObject">PowerManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.power </em>object that allows accessing of a functionality of the Power API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="PowerManager">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager"></a><h3>2.2. PowerManager</h3>
+<div class="brief">
+ The PowerManager interface is used to request resource states.
+          </div>
+<pre class="webidl prettyprint">   [NoInterfaceObject] interface PowerManager {
+       void request(<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void release(<a href="#PowerResource">PowerResource</a> resource) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenStateChangeListener(<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void unsetScreenStateChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       double getScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenBrightness(double brightness) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       boolean isScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void restoreScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOff() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+However, these requests can be overridden by the system. If the requests are overridden, the application is notified with the provided listener callback.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PowerManager::request">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::request"></a><code><b><span class="methodName">request</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests the minimum-state for a power resource.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void request(<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">resource</span>: 
+ Power resource for which the request is made
+                </li>
+          <li class="param">
+<span class="name">state</span>: 
+    Minimal power state in which the power resource is desired to be
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.power.request("SCREEN", "SCREEN_NORMAL");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::release">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::release"></a><code><b><span class="methodName">release</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Releases the power state request for the given resource.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void release(<a href="#PowerResource">PowerResource</a> resource);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">resource</span>: 
+ Resource for which requests are to be removed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Release SCREEN resource.
+ tizen.power.release("SCREEN");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::setScreenStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::setScreenStateChangeListener"></a><code><b><span class="methodName">setScreenStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the screen state change callback and monitors its state changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setScreenStateChangeListener(<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ Screen state change callback
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onScreenStateChanged(previousState, changedState) {
+   console.log("Screen state changed from " + previousState + " to " + changedState);
+ }
+
+ // Sets the screen state change listener.
+ tizen.power.setScreenStateChangeListener(onScreenStateChanged);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::unsetScreenStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::unsetScreenStateChangeListener"></a><code><b><span class="methodName">unsetScreenStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the screen state change callback and stop monitoring it.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetScreenStateChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Unsets the screen state change listener.
+ tizen.power.unsetScreenStateChangeListener();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::getScreenBrightness">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::getScreenBrightness"></a><code><b><span class="methodName">getScreenBrightness</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the screen brightness level of an application, from 0 to 1.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">double getScreenBrightness();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ double Current screen brightness value
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current screen brightness value.
+ var screenBrightness = tizen.power.getScreenBrightness();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::setScreenBrightness">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::setScreenBrightness"></a><code><b><span class="methodName">setScreenBrightness</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the screen brightness level, from 0 to 1.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setScreenBrightness(double brightness);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+An approximation is made for best effort when the given value is not exactly applicable by the hardware or system.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">brightness</span>: 
+ The screen brightness value to set
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Sets the screen brightness value for the application.
+ tizen.power.setScreenBrightness(1);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::isScreenOn">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::isScreenOn"></a><code><b><span class="methodName">isScreenOn</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the screen is on.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean isScreenOn();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean true if screen is on, otherwise false if the screen is off
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Checks whether the screen is on or off.
+ var isScreenOn = tizen.power.isScreenOn();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::restoreScreenBrightness">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::restoreScreenBrightness"></a><code><b><span class="methodName">restoreScreenBrightness</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Restores the screen brightness to the system default setting value.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void restoreScreenBrightness();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Restores the screen brightness value to the system default setting value.
+ tizen.power.restoreScreenBrightness();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::turnScreenOn">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::turnScreenOn"></a><code><b><span class="methodName">turnScreenOn</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Turns on the screen.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void turnScreenOn();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This API triggers turn-on process and then updates the status when it completes. While the operation is on-going, the isScreenOn() method returns false.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Turns the screen on.
+ tizen.power.turnScreenOn();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::turnScreenOff">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::turnScreenOff"></a><code><b><span class="methodName">turnScreenOff</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Turns off the screen.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void turnScreenOff();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This API triggers turn-off process and then updates the status when it completes.
+While the operation is on-going, the isScreenOn() method returns true.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Turns the screen off.
+ tizen.power.turnScreenOff();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ScreenStateChangeCallback">
+<a class="backward-compatibility-anchor" name="::Power::ScreenStateChangeCallback"></a><h3>2.3. ScreenStateChangeCallback</h3>
+<div class="brief">
+ The ScreenStateChangeCallback callback interface defines notification for the screen state changes.
+          </div>
+<pre class="webidl prettyprint">   [Callback=FunctionOnly, NoInterfaceObject] interface ScreenStateChangeCallback {
+       void onchanged(<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ScreenStateChangeCallback::onchanged">
+<a class="backward-compatibility-anchor" name="::Power::ScreenStateChangeCallback::onchanged"></a><code><b><span class="methodName">onchanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on screen state change.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onchanged(<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">previousState</span>: 
+ Previous screen state
+                </li>
+          <li class="param">
+<span class="name">changedState</span>: 
+  Changed screen state
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Power {
+
+    enum PowerResource    { "SCREEN", "CPU" };
+
+    enum PowerScreenState { "SCREEN_OFF", "SCREEN_DIM", "SCREEN_NORMAL", "SCREEN_BRIGHT" };
+
+    enum PowerCpuState { "CPU_AWAKE" };
+
+    typedef (<a href="#PowerScreenState">PowerScreenState</a> or <a href="#PowerCpuState">PowerCpuState</a>) PowerState;
+
+    [NoInterfaceObject] interface PowerManagerObject {
+        readonly attribute <a href="#PowerManager">PowerManager</a> power;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PowerManagerObject">PowerManagerObject</a>;
+
+   [NoInterfaceObject] interface PowerManager {
+       void request(<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void release(<a href="#PowerResource">PowerResource</a> resource) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenStateChangeListener(<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void unsetScreenStateChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       double getScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenBrightness(double brightness) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       boolean isScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void restoreScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOff() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };
+
+   [Callback=FunctionOnly, NoInterfaceObject] interface ScreenStateChangeCallback {
+       void onchanged(<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState);
+   };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/push.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/push.html
new file mode 100644 (file)
index 0000000..4ed19da
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/push.html
@@ -0,0 +1,776 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Push API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Push">
+<div class="supported-platforms"><img class="mobile-optional emulator" title="Optional, Supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>Push API</h1></div>
+<div class="brief">
+ The Push API provides functionality for receiving push notifications
+from the Tizen push server.
+The push service is a client daemon that maintains a permanent connection
+between your device and the Tizen push server in order to process your registration
+and deregistration requests and deliver push notifications to applications on a device.
+        </div>
+<div class="description">
+        <p>
+If the application is connected, the push service passes the notification data over
+the connection. Otherwise, the push service posts a UI notification with the data.
+It will be delivered when a user launches the application by selecting the posting.
+        </p>
+        <p>
+To receive push notifications, follow the steps below:
+        </p>
+        <ul>
+          <li>
+Get administrative permission for an application on your device          </li>
+          <li>
+Register the application          </li>
+          <li>
+Connect to the push service          </li>
+          <li>
+Get notification data          </li>
+        </ul>
+        <p>
+To use Push features, you must <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Registering">register to the Push service</a>.
+        </p>
+        <p>
+For more information on the Push features, see <a href="../../../../../org.tizen.guides/html/web/tizen/communication/push_w.htm">Push Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#PushRegistrationId">PushRegistrationId</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#PushManagerObject">PushManagerObject</a>
+</li>
+<li>2.2. <a href="#PushManager">PushManager</a>
+</li>
+<li>2.3. <a href="#PushMessage">PushMessage</a>
+</li>
+<li>2.4. <a href="#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a>
+</li>
+<li>2.5. <a href="#PushNotificationCallback">PushNotificationCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#PushManagerObject">PushManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PushManager">PushManager</a></td>
+<td>void <a href="#PushManager::registerService">registerService</a> (<a href="application.html#ApplicationControl">ApplicationControl</a> appControl, <a href="#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#PushManager::unregisterService">unregisterService</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#PushManager::connectService">connectService</a> (<a href="#PushNotificationCallback">PushNotificationCallback</a> notificationCallback)<br>
+    void <a href="#PushManager::disconnectService">disconnectService</a> ()<br>
+    <a href="#PushRegistrationId">PushRegistrationId</a> <a href="#PushManager::getRegistrationId">getRegistrationId</a> ()<br>
+    void <a href="#PushManager::getUnreadNotifications">getUnreadNotifications</a> ()</td>
+</tr>
+<tr>
+<td><a href="#PushMessage">PushMessage</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a></td>
+<td>void <a href="#PushRegisterSuccessCallback::onsuccess">onsuccess</a> (<a href="#PushRegistrationId">PushRegistrationId</a> id)</td>
+</tr>
+<tr>
+<td><a href="#PushNotificationCallback">PushNotificationCallback</a></td>
+<td>void <a href="#PushNotificationCallback::onsuccess">onsuccess</a> (<a href="#PushMessage">PushMessage</a> message)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="PushRegistrationId">
+<a class="backward-compatibility-anchor" name="::Push::PushRegistrationId"></a><h3>1.1. PushRegistrationId</h3>
+<div class="brief">
+ A push service registration identifier.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString PushRegistrationId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="PushManagerObject">
+<a class="backward-compatibility-anchor" name="::Push::PushManagerObject"></a><h3>2.1. PushManagerObject</h3>
+<div class="brief">
+ The PushManagerObject interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PushManagerObject {
+        readonly attribute <a href="#PushManager">PushManager</a> push;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PushManagerObject">PushManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.push </em>object allows access to the functionality of the Push API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="PushManager">
+<a class="backward-compatibility-anchor" name="::Push::PushManager"></a><h3>2.2. PushManager</h3>
+<div class="brief">
+ The PushManager interface provides methods to manage push registration and notification.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PushManager {
+      void registerService(<a href="application.html#ApplicationControl">ApplicationControl</a> appControl, <a href="#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a> successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void unregisterService(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void connectService(<a href="#PushNotificationCallback">PushNotificationCallback</a> notificationCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void disconnectService() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      <a href="#PushRegistrationId">PushRegistrationId</a> getRegistrationId() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void getUnreadNotifications() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PushManager::registerService">
+<a class="backward-compatibility-anchor" name="::Push::PushManager::registerService"></a><code><b><span class="methodName">registerService</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers an application to the Tizen push server.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void registerService(<a href="application.html#ApplicationControl">ApplicationControl</a> appControl, <a href="#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback()</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/push
+            </p>
+<p><span class="remark"> Remark : </span>
+ In order to use the push messaging service, see the native <a href="../../../../../org.tizen.guides/html/native/messaging/push_n.htm">Push Messaging Guide</a>.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appControl</span>: 
+ The data to deliver via notification service when the process is not running.<br> For more information, see <a href="application.html">Application API</a>.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to be called when the registration request succeeds.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to be called when the registration request fails.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameters
+do not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the data to be used when this process is launched by notification service.
+ var service = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/push_test");
+
+ // Defines the error callback.
+ function errorCallback(response) {
+   console.log( 'The following error occurred: ' +  response.name);
+ }
+
+ // Defines the registration success callback
+ function registerSuccessCallback(id) {
+   console.log("Registration succeeded with id: " + id);
+ }
+
+ // Requests registration.
+ tizen.push.registerService(service, registerSuccessCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PushManager::unregisterService">
+<a class="backward-compatibility-anchor" name="::Push::PushManager::unregisterService"></a><code><b><span class="methodName">unregisterService</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters an application from the Tizen push server.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unregisterService(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback()</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError - If an unknown error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/push
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to be called when the request is successfully unregistered.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to be called when the unregistration request fails.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameters do not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the error callback
+ function errorCallback(response) {
+   console.log( 'The following error occurred: ' +  response.name);
+ }
+
+ // Defines the unregistration success callback
+ function unregisterSuccessCallback() {
+   console.log("Unregistration succeeded.");
+ }
+
+ // Requests unregistration
+ tizen.push.unregisterService(unregisterSuccessCallback, errorCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PushManager::connectService">
+<a class="backward-compatibility-anchor" name="::Push::PushManager::connectService"></a><code><b><span class="methodName">connectService</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Connects to the push service and receives push notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void connectService(<a href="#PushNotificationCallback">PushNotificationCallback</a> notificationCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/push
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>connectService()</em> method must be called after the <em>registerService()</em> method.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">notificationCallback</span>: 
+ The method to be called when the notification message arrives.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameters do not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the connect success callback
+ function notificationCallback(noti) {
+   console.log("Notification received with alert message: " + noti.alertMessage);
+ }
+
+ // Requests for push service connection
+ tizen.push.connectService(notificationCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PushManager::disconnectService">
+<a class="backward-compatibility-anchor" name="::Push::PushManager::disconnectService"></a><code><b><span class="methodName">disconnectService</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Disconnects the push service and stops receiving push notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void disconnectService();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/push
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests disconnection
+ tizen.push.disconnectService();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PushManager::getRegistrationId">
+<a class="backward-compatibility-anchor" name="::Push::PushManager::getRegistrationId"></a><code><b><span class="methodName">getRegistrationId</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the push service registration ID for this application if the registration process is successful. <var>null </var>is returned if the application has not been registered yet.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#PushRegistrationId">PushRegistrationId</a> getRegistrationId();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/push
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var registrationId = tizen.push.getRegistrationId();
+ if ( registrationId != null ) {
+   console.log("The registration id: " + registrationId);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PushManager::getUnreadNotifications">
+<a class="backward-compatibility-anchor" name="::Push::PushManager::getUnreadNotifications"></a><code><b><span class="methodName">getUnreadNotifications</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests to get unread push notifications. As a consequence, the PushNotificationCallback which was set using the connectService() method will be invoked to retrieve the notifications..
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getUnreadNotifications();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The connectService() method must be called to connect to Tizen push server and receive push notifications before calling the getUnreadNotifications() method.
+If connectService is not called, <var>ServiceNotAvailableError</var> occurs.<br>If any unread message exists, you will get unread push notification message through <var>PushNotificationCallback</var> of connectService().
+For instance, if there are 10 unread messages, the <var>PushNotificationCallback</var> will be invoked 10 times.<br><br>If an application receives unread messages, the messages are removed from the system.
+            </p>
+            <p>
+When an application registers with the push server to receive push notifications,
+the push server stores messages for the application until they are delivered.
+While the application is not running, messages cannot be delivered.
+This method allows retrieving such missed push messages.
+Once a missed push notification is retrieved the server deletes it from its database.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/push
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type ServiceNotAvailableError, if the network is unreachable for some reason(e.g disconnected to the Tizen push server)
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the connect success callback
+ function notificationCallback(message) {
+     console.log("New push message : " + message.alertMessage + ", date : " + message.date + ", data : " + message.appData);
+   }
+ }
+
+ // Requests for push service connection
+ tizen.push.connectService(notificationCallback);
+ tizen.push.getUnreadNotifications();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PushMessage">
+<a class="backward-compatibility-anchor" name="::Push::PushMessage"></a><h3>2.3. PushMessage</h3>
+<div class="brief">
+ The PushMessage interface specifies the push message that is delivered from the push service.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PushMessage {
+        readonly attribute DOMString appData;
+
+        readonly attribute DOMString alertMessage;
+
+        readonly attribute Date date;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="PushMessage::appData">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">appData</span></span><div class="brief">
+ An attribute to store the push notification data.
+            </div>
+<div class="description">
+            <p>
+This data is the message that the sender wants to send and its length must be less than 1 KB.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PushMessage::alertMessage">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">alertMessage</span></span><div class="brief">
+ An attribute to store the push notification message that is displayed as an alert message to the user.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PushMessage::date">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">date</span></span><div class="brief">
+ An attribute to store the date/time when a push notification message is received.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="PushRegisterSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Push::PushRegisterSuccessCallback"></a><h3>2.4. PushRegisterSuccessCallback</h3>
+<div class="brief">
+ The PushRegisterSuccessCallback interface specifies the success callback for a push service registration request.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface PushRegisterSuccessCallback {
+        void onsuccess(<a href="#PushRegistrationId">PushRegistrationId</a> id);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This success callback is invoked when a push service registration request is successful.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PushRegisterSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Push::PushRegisterSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a push service registration request is successful.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#PushRegistrationId">PushRegistrationId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The registration ID.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PushNotificationCallback">
+<a class="backward-compatibility-anchor" name="::Push::PushNotificationCallback"></a><h3>2.5. PushNotificationCallback</h3>
+<div class="brief">
+ The PushNotificationCallback interface specifies the notification callback for the received push notification message.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface PushNotificationCallback {
+        void onsuccess(<a href="#PushMessage">PushMessage</a> message);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This notification callback is invoked when the push notification message arrives.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PushNotificationCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Push::PushNotificationCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the push notification message arrives.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#PushMessage">PushMessage</a> message);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">message</span>: 
+ The received push notification message.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the push application runs on a device with the push feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.push</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Push {
+    typedef DOMString PushRegistrationId;
+
+    [NoInterfaceObject] interface PushManagerObject {
+        readonly attribute <a href="#PushManager">PushManager</a> push;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PushManagerObject">PushManagerObject</a>;
+
+    [NoInterfaceObject] interface PushManager {
+      void registerService(<a href="application.html#ApplicationControl">ApplicationControl</a> appControl, <a href="#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a> successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void unregisterService(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void connectService(<a href="#PushNotificationCallback">PushNotificationCallback</a> notificationCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void disconnectService() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      <a href="#PushRegistrationId">PushRegistrationId</a> getRegistrationId() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+      void getUnreadNotifications() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface PushMessage {
+        readonly attribute DOMString appData;
+
+        readonly attribute DOMString alertMessage;
+
+        readonly attribute Date date;
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface PushRegisterSuccessCallback {
+        void onsuccess(<a href="#PushRegistrationId">PushRegistrationId</a> id);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface PushNotificationCallback {
+        void onsuccess(<a href="#PushMessage">PushMessage</a> message);
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/se.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/se.html
new file mode 100644 (file)
index 0000000..f443eda
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/se.html
@@ -0,0 +1,1549 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>SecureElement API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::SecureElement">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Not supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>SecureElement API</h1></div>
+<div class="brief">
+ The SecureElement API provides functionality to communicate with applications in several Secure Elements.
+A Secure Element is a secure smart card chip. It can be a UICC/SIM, an embedded Secure Element, or a Secure SD card that is inserted in a device.
+        </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#SEServiceManagerObject">SEServiceManagerObject</a>
+</li>
+<li>1.2. <a href="#SEService">SEService</a>
+</li>
+<li>1.3. <a href="#Reader">Reader</a>
+</li>
+<li>1.4. <a href="#Session">Session</a>
+</li>
+<li>1.5. <a href="#Channel">Channel</a>
+</li>
+<li>1.6. <a href="#SEChangeListener">SEChangeListener</a>
+</li>
+<li>1.7. <a href="#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a>
+</li>
+<li>1.8. <a href="#SessionSuccessCallback">SessionSuccessCallback</a>
+</li>
+<li>1.9. <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a>
+</li>
+<li>1.10. <a href="#TransmitSuccessCallback">TransmitSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#api-features">Related Feature</a>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SEServiceManagerObject">SEServiceManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SEService">SEService</a></td>
+<td>void <a href="#SEService::getReaders">getReaders</a> (<a href="#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    unsigned long <a href="#SEService::registerSEListener">registerSEListener</a> (<a href="#SEChangeListener">SEChangeListener</a> listener)<br>
+    void <a href="#SEService::unregisterSEListener">unregisterSEListener</a> (unsigned long id)<br>
+    void <a href="#SEService::shutdown">shutdown</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Reader">Reader</a></td>
+<td>DOMString <a href="#Reader::getName">getName</a> ()<br>
+    void <a href="#Reader::openSession">openSession</a> (<a href="#SessionSuccessCallback">SessionSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Reader::closeSessions">closeSessions</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Session">Session</a></td>
+<td>void <a href="#Session::openBasicChannel">openBasicChannel</a> (byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Session::openLogicalChannel">openLogicalChannel</a> (byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    byte[] <a href="#Session::getATR">getATR</a> ()<br>
+    void <a href="#Session::close">close</a> ()<br>
+    void <a href="#Session::closeChannels">closeChannels</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Channel">Channel</a></td>
+<td>void <a href="#Channel::close">close</a> ()<br>
+    void <a href="#Channel::transmit">transmit</a> (byte[] command, <a href="#TransmitSuccessCallback">TransmitSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    byte[] <a href="#Channel::getSelectResponse">getSelectResponse</a> ()</td>
+</tr>
+<tr>
+<td><a href="#SEChangeListener">SEChangeListener</a></td>
+<td>void <a href="#SEChangeListener::onSEReady">onSEReady</a> (<a href="#Reader">Reader</a> reader)<br>
+    void <a href="#SEChangeListener::onSENotReady">onSENotReady</a> (<a href="#Reader">Reader</a> reader)</td>
+</tr>
+<tr>
+<td><a href="#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a></td>
+<td>void <a href="#ReaderArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Reader">Reader</a>[] readers)</td>
+</tr>
+<tr>
+<td><a href="#SessionSuccessCallback">SessionSuccessCallback</a></td>
+<td>void <a href="#SessionSuccessCallback::onsuccess">onsuccess</a> (<a href="#Session">Session</a> session)</td>
+</tr>
+<tr>
+<td><a href="#ChannelSuccessCallback">ChannelSuccessCallback</a></td>
+<td>void <a href="#ChannelSuccessCallback::onsuccess">onsuccess</a> (<a href="#Channel">Channel</a> channel)</td>
+</tr>
+<tr>
+<td><a href="#TransmitSuccessCallback">TransmitSuccessCallback</a></td>
+<td>void <a href="#TransmitSuccessCallback::onsuccess">onsuccess</a> (byte[] response)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="SEServiceManagerObject">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEServiceManagerObject"></a><h3>1.1. SEServiceManagerObject</h3>
+<div class="brief">
+ The SEServiceManagerObject interface defines what is instantiated by the Tizen object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SEServiceManagerObject {
+    readonly attribute <a href="#SEService">SEService</a> seService;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SEServiceManagerObject">SEServiceManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.seService</em> object allows access to the functionality of the SecureElement API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SEService">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEService"></a><h3>1.2. SEService</h3>
+<div class="brief">
+ The SEService interface provides access to the available Secure Element readers.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SEService
+  {
+    void getReaders(<a href="#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    unsigned long registerSEListener(<a href="#SEChangeListener">SEChangeListener</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void unregisterSEListener(unsigned long id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void shutdown() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It provides access to the API functionalities through the <em>tizen.seService</em> interface.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SEService::getReaders">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEService::getReaders"></a><code><b><span class="methodName">getReaders</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets all the available Secure Element readers.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getReaders(<a href="#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ UnknownError - If any error occurs during retrieval.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when the list of available Secure Element readers has been successfully retrieved
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  function success(readers) {
+   for (var i = 0; i &lt; readers.length; i++) {
+    if (readers[i].isPresent) {
+     console.log ("Reader Name : " + readers[i].getName());
+    }
+   }
+  }
+  function error(err) {
+   console.log (err.name + ": " + err.message);
+  }
+  tizen.seService.getReaders(success, error);
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SEService::registerSEListener">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEService::registerSEListener"></a><code><b><span class="methodName">registerSEListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a callback function that is invoked when an available Secure Element reader is detected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long registerSEListener(<a href="#SEChangeListener">SEChangeListener</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ Listener to be called for successful detection of available Secure Element readers
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long An identifier used to clear the watch subscription
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  var seListener = tizen.seService.registerSEListener({
+   onSEReady:function(reader) {
+     console.log (reader.getName() + "is ready.");
+    }, onSENotReady:function(reader) {
+     console.log (reader.getName() + "is not ready.");
+    }});
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SEService::unregisterSEListener">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEService::unregisterSEListener"></a><code><b><span class="methodName">unregisterSEListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters the listener from notifying any detection of an available Secure Element reader.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unregisterSEListener(unsigned long id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ A subscription identifier that is returned by the <em>registerSEListener()</em> method
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var seListener; //seListener obtained from registerSEListener
+ try {
+  tizen.seService.unregisterSEListener(seListener);
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SEService::shutdown">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEService::shutdown"></a><code><b><span class="methodName">shutdown</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Shuts down Secure Elements after releasing all resources.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void shutdown();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  tizen.seService.shutdown();
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Reader">
+<a class="backward-compatibility-anchor" name="::SecureElement::Reader"></a><h3>1.3. Reader</h3>
+<div class="brief">
+ The Reader interface that is connected to this device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Reader
+  {
+    readonly attribute boolean isPresent;
+    DOMString getName() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void openSession(<a href="#SessionSuccessCallback">SessionSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void closeSessions() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This interface offers methods to control sessions on the reader.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Reader::isPresent">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isPresent</span></span><div class="brief">
+ Boolean value that indicates whether a Secure Element is present on a reader.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Reader::getName">
+<a class="backward-compatibility-anchor" name="::SecureElement::Reader::getName"></a><code><b><span class="methodName">getName</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the reader's name.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getName();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The name of the reader
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  function success(readers) {
+   for (var i = 0; i &lt; readers.length; i++) {
+    if (readers[i].isPresent) {
+     console.log ("Reader Name : " + readers[i].getName());
+    }
+   }
+  }
+  function error(err) {
+   console.log (err.name + ": " + err.message);
+  }
+  tizen.seService.getReaders(success, error);
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Reader::openSession">
+<a class="backward-compatibility-anchor" name="::SecureElement::Reader::openSession"></a><code><b><span class="methodName">openSession</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Opens a session on a reader.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void openSession(<a href="#SessionSuccessCallback">SessionSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ IOError - An error occurred in communication with the Secure Element in this reader.              </li>
+              <li>
+ InvalidStateError - If a Secure Element is not present on this reader.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when a session has been successfully opened
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  function success(session) {
+   console.log ("Open Session Success : " + !session.isClosed);
+  }
+  function error(err) {
+   console.log (err.name + ": " + err.message);
+  }
+  reader.openSession(success, error);
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Reader::closeSessions">
+<a class="backward-compatibility-anchor" name="::SecureElement::Reader::closeSessions"></a><code><b><span class="methodName">closeSessions</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes all sessions opened on a reader.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void closeSessions();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  reader.closeSessions();
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Session">
+<a class="backward-compatibility-anchor" name="::SecureElement::Session"></a><h3>1.4. Session</h3>
+<div class="brief">
+ The Session interface is connected to one of the readers and offers methods to control channels in a session.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Session
+  {
+    readonly attribute boolean isClosed;
+    void openBasicChannel(byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void openLogicalChannel(byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    byte[] getATR() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void closeChannels() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Session::isClosed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isClosed</span></span><div class="brief">
+ Boolean value that indicates whether a session is closed.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Session::openBasicChannel">
+<a class="backward-compatibility-anchor" name="::SecureElement::Session::openBasicChannel"></a><code><b><span class="methodName">openBasicChannel</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Opens a basic channel in a session.
+The basic channel (defined in the ISO7816-4 specification) is opened by default and its channel ID is <var>0</var>.
+Once this channel has been opened by an application, it is considered to be "locked" to other applications, and they cannot open any channel, until the basic channel is closed.
+Some Secure Elements might always deny opening a basic channel.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void openBasicChannel(byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The optional select response data of an applet can be retrieved with byte[] getSelectResponse().
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ IOError - If an error occurs while communicating with the Secure Element in the reader.              </li>
+              <li>
+ SecurityError - If access to this AID or the default application on this session is not allowed .              </li>
+              <li>
+ InvalidStateError - If this session is closed.               </li>
+              <li>
+ NotFoundError - If the application of the AID does not exist in the Secure Element.              </li>
+              <li>
+ NoChannelError - If basic channel is unavailable.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">aid</span>: 
+ ID of the applet to select on this channel<br>If the array is empty, the default applet is selected in this session.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when a basic channel has been successfully opened
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the AID's length is not within the limit: 5 to 16(inclusive).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+  function successChannel(channel) {
+   if (channel.isBasicChannel) {
+    console.log ("Basic channel is opened.");
+   } else {
+    console.log ("Logical channel is opened.");
+   }
+  }
+  function errorChannel(err) {
+   console.log ("openBasicChannel Error :" + err.name +": " + err.message);
+  }
+
+  function successSession(session) {
+   console.log ("Open Session Success : " + !session.isClosed);
+   // This aid is for test. Use aid for your applet in secure element.
+   session.openBasicChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successChannel, errorChannel);
+  }
+  function errorSession(err) {
+   console.log ("openSession Error : " + err.name + ": " + err.message);
+  }
+  reader.openSession(successSession, errorSession);
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Session::openLogicalChannel">
+<a class="backward-compatibility-anchor" name="::SecureElement::Session::openLogicalChannel"></a><code><b><span class="methodName">openLogicalChannel</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Opens a logical channel in a session by the specified applet ID.
+The logical channel is defined in the ISO7816-4 specification.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void openLogicalChannel(byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The optional select response data of an applet can be retrieved with byte[] getSelectResponse().
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ IOError - If an error occurs while communicating with the Secure Element in the reader.              </li>
+              <li>
+ SecurityError - If access to this AID or the default application in this session is not allowed.              </li>
+              <li>
+ InvalidStateError - If this session is closed.              </li>
+              <li>
+ NotFoundError - If the application of the AID does not exist in the Secure Element.              </li>
+              <li>
+ NoChannelError - If logical channel is unavailable.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">aid</span>: 
+ ID of the applet to select on this channel<br>If the array is empty, the default application is selected in this session.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when a logical channel has been successfully opened
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the AID's length is not within the limit: 5 to 16(inclusive).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var session; //Session obtained from openSession callback
+ try {
+  function successChannel(channel) {
+   if (channel.isBasicChannel) {
+    console.log ("Basic channel is opened.");
+   } else {
+    console.log ("Logical channel is opened.");
+   }
+  }
+  function errorChannel(err) {
+   console.log ("openLogicalChannel Error :" + err.name + ": " + err.message);
+  }
+
+   // This aid is for test. Use aid for your applet in secure element.
+  session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successChannel, errorChannel);
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Session::getATR">
+<a class="backward-compatibility-anchor" name="::SecureElement::Session::getATR"></a><code><b><span class="methodName">getATR</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the answer to reset(ATR) of a Secure Element.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">byte[] getATR();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ byte[] The ATR of a Secure Element
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var session; //Session obtained from openSession callback
+ try {
+  var atr = session.getATR();
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Session::close">
+<a class="backward-compatibility-anchor" name="::SecureElement::Session::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes a session.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var session; //Session obtained from openSession callback
+ try {
+  session.close();
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Session::closeChannels">
+<a class="backward-compatibility-anchor" name="::SecureElement::Session::closeChannels"></a><code><b><span class="methodName">closeChannels</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes all channels on this session.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void closeChannels();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var session; //Session obtained from openSession callback
+ try {
+  session.closeChannels();
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Channel">
+<a class="backward-compatibility-anchor" name="::SecureElement::Channel"></a><h3>1.5. Channel</h3>
+<div class="brief">
+ The Channel interface is open to a Secure Element and offers methods to send Application Protocol Data Units(APDU) to the Secure Element.
+The channel is defined in the ISO7816-4.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Channel {
+    readonly attribute boolean isBasicChannel;
+    void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void transmit(byte[] command, <a href="#TransmitSuccessCallback">TransmitSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    byte[] getSelectResponse() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Channel::isBasicChannel">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isBasicChannel</span></span><div class="brief">
+ Boolean value that indicates whether it is a basic channel.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Channel::close">
+<a class="backward-compatibility-anchor" name="::SecureElement::Channel::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes a channel.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var channel; //Obtained from openLogicalChannel or openBasicChannel
+ try {
+  channel.close();
+ } catch (err) {
+  console.log (err.name + ": " + err.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Channel::transmit">
+<a class="backward-compatibility-anchor" name="::SecureElement::Channel::transmit"></a><code><b><span class="methodName">transmit</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Transmits an APDU command to a Secure Element. The APDU command is defined in ISO7816-4.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void transmit(byte[] command, <a href="#TransmitSuccessCallback">TransmitSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+Some commands that are not allowed to be sent are:
+            </p>
+            <ul>
+              <li>
+ MANAGE_CHANNEL commands.               </li>
+              <li>
+ SELECT by DF Name (p1=04).               </li>
+              <li>
+ The commands that CLA bytes with channel numbers are de-masked.               </li>
+            </ul>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ InvalidValuesError - If the command contain an invalid value.              </li>
+              <li>
+ IOError - An error occurred while communicating with the Secure Element in the reader.              </li>
+              <li>
+ SecurityError - If the command is not allowed.              </li>
+              <li>
+ InvalidStateError - If this channel is closed.              </li>
+              <li>
+ UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">command</span>: 
+ APDU command to transmit through this channel
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when a command has been successfully transmitted
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="Channel::getSelectResponse">
+<a class="backward-compatibility-anchor" name="::SecureElement::Channel::getSelectResponse"></a><code><b><span class="methodName">getSelectResponse</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the data as received from the application select command including the status words.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">byte[] getSelectResponse();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+When opening a channel, when an applet ID of secure element is selected,
+a response is generated to the select command. This method retrieves the response.
+            </p>
+            <p>
+The return value is a byte array containing the data bytes in the following order:
+            </p>
+            <p>
+[&lt;first data byte&gt;, ..., &lt;last data byte&gt;, &lt;status word1&gt;, &lt;status word2&gt;]
+            </p>
+            <ul>
+              <li>
+Only the status words are returned if the application select command has no returned data.              </li>
+              <li>
+Null if an application select command has not been performed or
+the selection response can not be retrieved by the reader implementation.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/secureelement
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ bytes[] The data as returned by the application select command including the status words
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SEChangeListener">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEChangeListener"></a><h3>1.6. SEChangeListener</h3>
+<div class="brief">
+ The SEChangeListener interface provides the success callback that is invoked when a Secure Element reader is detected or lost.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface SEChangeListener {
+    void onSEReady(<a href="#Reader">Reader</a> reader);
+    void onSENotReady(<a href="#Reader">Reader</a> reader);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It is used in <em>SEService.registerSEListener()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SEChangeListener::onSEReady">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEChangeListener::onSEReady"></a><code><b><span class="methodName">onSEReady</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a Secure Element reader is detected.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onSEReady(<a href="#Reader">Reader</a> reader);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reader</span>: 
+ Newly detected Secure Element reader
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="SEChangeListener::onSENotReady">
+<a class="backward-compatibility-anchor" name="::SecureElement::SEChangeListener::onSENotReady"></a><code><b><span class="methodName">onSENotReady</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a Secure Element reader is lost.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onSENotReady(<a href="#Reader">Reader</a> reader);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">reader</span>: 
+ Lost Secure Element reader
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ReaderArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::SecureElement::ReaderArraySuccessCallback"></a><h3>1.7. ReaderArraySuccessCallback</h3>
+<div class="brief">
+ The ReaderArraySuccessCallback callback interface provides a success callback that is invoked when a list of available Secure Element readers is retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ReaderArraySuccessCallback {
+    void onsuccess(<a href="#Reader">Reader</a>[] readers);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It specifies a success method with an array of <em>Reader</em> objects as an input parameter.
+It is used in asynchronous operations such as <em>SEService.getReaders()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ReaderArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SecureElement::ReaderArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Reader">Reader</a>[] readers);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">readers</span>: 
+ List of available Secure Element readers
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SessionSuccessCallback">
+<a class="backward-compatibility-anchor" name="::SecureElement::SessionSuccessCallback"></a><h3>1.8. SessionSuccessCallback</h3>
+<div class="brief">
+ The SessionSuccessCallback interface specifies the success callback that is invoked when a session on a specific reader is open.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SessionSuccessCallback {
+    void onsuccess(<a href="#Session">Session</a> session);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with a <em>Session</em> object as an input parameter.
+It is used in asynchronous operations such as <em>Reader.openSession()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SessionSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SecureElement::SessionSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Session">Session</a> session);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">session</span>: 
+ Open session
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ChannelSuccessCallback">
+<a class="backward-compatibility-anchor" name="::SecureElement::ChannelSuccessCallback"></a><h3>1.9. ChannelSuccessCallback</h3>
+<div class="brief">
+ The ChannelSuccessCallback interface specifies the success callback that is invoked when a channel is open to communicate with a specific applet.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ChannelSuccessCallback {
+    void onsuccess(<a href="#Channel">Channel</a> channel);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with a <em>Channel</em> object as an input parameter.
+It is used in asynchronous operations such as <em>Session.openBasicChannel() </em>or <em>Session.openLogicalChannel()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ChannelSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SecureElement::ChannelSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Channel">Channel</a> channel);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">channel</span>: 
+ Open channel
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="TransmitSuccessCallback">
+<a class="backward-compatibility-anchor" name="::SecureElement::TransmitSuccessCallback"></a><h3>1.10. TransmitSuccessCallback</h3>
+<div class="brief">
+ The TransmitSuccessCallback interface specifies the success callback that is invoked when <em>Channel.transmit() </em>completes successfully.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface TransmitSuccessCallback {
+    void onsuccess(byte[] response);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with an array of bytes as an input parameter. It is used in <em>Channel.transmit()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TransmitSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SecureElement::TransmitSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(byte[] response);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">response</span>: 
+ APDU command response that is transmitted on a channel
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">2. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee this application will run on a device with a Secure Element, add the below feature declaration to the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.secure_element</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module SecureElement {
+  [NoInterfaceObject] interface SEServiceManagerObject {
+    readonly attribute <a href="#SEService">SEService</a> seService;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SEServiceManagerObject">SEServiceManagerObject</a>;
+
+  [NoInterfaceObject] interface SEService
+  {
+    void getReaders(<a href="#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    unsigned long registerSEListener(<a href="#SEChangeListener">SEChangeListener</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void unregisterSEListener(unsigned long id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void shutdown() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface Reader
+  {
+    readonly attribute boolean isPresent;
+    DOMString getName() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void openSession(<a href="#SessionSuccessCallback">SessionSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void closeSessions() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+  [NoInterfaceObject] interface Session
+  {
+    readonly attribute boolean isClosed;
+    void openBasicChannel(byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void openLogicalChannel(byte[] aid, <a href="#ChannelSuccessCallback">ChannelSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    byte[] getATR() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    void closeChannels() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface Channel {
+    readonly attribute boolean isBasicChannel;
+    void close() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void transmit(byte[] command, <a href="#TransmitSuccessCallback">TransmitSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    byte[] getSelectResponse() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback, NoInterfaceObject] interface SEChangeListener {
+    void onSEReady(<a href="#Reader">Reader</a> reader);
+    void onSENotReady(<a href="#Reader">Reader</a> reader);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ReaderArraySuccessCallback {
+    void onsuccess(<a href="#Reader">Reader</a>[] readers);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SessionSuccessCallback {
+    void onsuccess(<a href="#Session">Session</a> session);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ChannelSuccessCallback {
+    void onsuccess(<a href="#Channel">Channel</a> channel);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface TransmitSuccessCallback {
+    void onsuccess(byte[] response);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html
new file mode 100644 (file)
index 0000000..dfcd9a5
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html
@@ -0,0 +1,1425 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Sensor API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Sensor">
+<div class="supported-platforms"><img class="mobile-optional" title="Optional, Supported by Tizen Mobile emulator" src="mw_icon_optional.png"></div>
+<div class="title"><h1>Sensor API</h1></div>
+<div class="brief">
+ The Sensor API defines interfaces and methods to manage sensor data from various sensors on the device.
+        </div>
+<div class="description">
+        <p>
+The following sensor functionality is provided:
+        </p>
+        <ul>
+          <li>
+Start and stop sensor          </li>
+          <li>
+Set and unset notification of the sensor data change          </li>
+          <li>
+Get current sensor data          </li>
+        </ul>
+        <p>
+For more information about how to use Sensor API, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm">Sensor Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SensorType">SensorType</a>
+</li>
+<li>1.2. <a href="#ProximityState">ProximityState</a>
+</li>
+<li>1.3. <a href="#MagneticSensorAccuracy">MagneticSensorAccuracy</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SensorServiceManagerObject">SensorServiceManagerObject</a>
+</li>
+<li>2.2. <a href="#SensorService">SensorService</a>
+</li>
+<li>2.3. <a href="#Sensor">Sensor</a>
+</li>
+<li>2.4. <a href="#LightSensor">LightSensor</a>
+</li>
+<li>2.5. <a href="#MagneticSensor">MagneticSensor</a>
+</li>
+<li>2.6. <a href="#PressureSensor">PressureSensor</a>
+</li>
+<li>2.7. <a href="#ProximitySensor">ProximitySensor</a>
+</li>
+<li>2.8. <a href="#UltravioletSensor">UltravioletSensor</a>
+</li>
+<li>2.9. <a href="#SensorData">SensorData</a>
+</li>
+<li>2.10. <a href="#SensorLightData">SensorLightData</a>
+</li>
+<li>2.11. <a href="#SensorMagneticData">SensorMagneticData</a>
+</li>
+<li>2.12. <a href="#SensorPressureData">SensorPressureData</a>
+</li>
+<li>2.13. <a href="#SensorProximityData">SensorProximityData</a>
+</li>
+<li>2.14. <a href="#SensorUltravioletData">SensorUltravioletData</a>
+</li>
+<li>2.15. <a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SensorServiceManagerObject">SensorServiceManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorService">SensorService</a></td>
+<td>
+<a href="#Sensor">Sensor</a> <a href="#SensorService::getDefaultSensor">getDefaultSensor</a> (<a href="#SensorType">SensorType</a> type)<br>
+    <a href="#SensorType">SensorType</a>[] <a href="#SensorService::getAvailableSensors">getAvailableSensors</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Sensor">Sensor</a></td>
+<td>void <a href="#Sensor::start">start</a> (<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Sensor::stop">stop</a> ()<br>
+    void <a href="#Sensor::setChangeListener">setChangeListener</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback)<br>
+    void <a href="#Sensor::unsetChangeListener">unsetChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#LightSensor">LightSensor</a></td>
+<td>void <a href="#LightSensor::getLightSensorData">getLightSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#MagneticSensor">MagneticSensor</a></td>
+<td>void <a href="#MagneticSensor::getMagneticSensorData">getMagneticSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#PressureSensor">PressureSensor</a></td>
+<td>void <a href="#PressureSensor::getPressureSensorData">getPressureSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#ProximitySensor">ProximitySensor</a></td>
+<td>void <a href="#ProximitySensor::getProximitySensorData">getProximitySensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#UltravioletSensor">UltravioletSensor</a></td>
+<td>void <a href="#UltravioletSensor::getUltravioletSensorData">getUltravioletSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#SensorData">SensorData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorLightData">SensorLightData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorMagneticData">SensorMagneticData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorPressureData">SensorPressureData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorProximityData">SensorProximityData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorUltravioletData">SensorUltravioletData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a></td>
+<td>void <a href="#SensorDataSuccessCallback::onsuccess">onsuccess</a> (optional <a href="#SensorData">SensorData</a>? sensorData)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SensorType">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorType"></a><h3>1.1. SensorType</h3>
+<div class="brief">
+ Specifies the sensor type available to the API.
+          </div>
+<pre class="webidl prettyprint">    enum SensorType { "LIGHT", "MAGNETIC", "PRESSURE",  "PROXIMITY", "ULTRAVIOLET" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The sensor types defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+LIGHT - Light sensor            </li>
+            <li>
+MAGNETIC - Magnetic sensor            </li>
+            <li>
+PRESSURE - Pressure sensor            </li>
+            <li>
+PROXIMITY - Proximity sensor            </li>
+            <li>
+ULTRAVIOLET - Ultraviolet sensor            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="ProximityState">
+<a class="backward-compatibility-anchor" name="::Sensor::ProximityState"></a><h3>1.2. ProximityState</h3>
+<div class="brief">
+ Specifies the proximity state.
+          </div>
+<pre class="webidl prettyprint">    enum ProximityState { "FAR", "NEAR" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="enum" id="MagneticSensorAccuracy">
+<a class="backward-compatibility-anchor" name="::Sensor::MagneticSensorAccuracy"></a><h3>1.3. MagneticSensorAccuracy</h3>
+<div class="brief">
+ Specifies the accuracy of magnetic sensor data.
+          </div>
+<pre class="webidl prettyprint">    enum MagneticSensorAccuracy { "ACCURACY_UNDEFINED", "ACCURACY_BAD", "ACCURACY_NORMAL", "ACCURACY_GOOD", "ACCURACY_VERYGOOD" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SensorServiceManagerObject">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorServiceManagerObject"></a><h3>2.1. SensorServiceManagerObject</h3>
+<div class="brief">
+ The SensorServiceManagerObject interface defines what is instantiated by the <em>Tizen</em> object.
+The <em>tizen.sensorservice</em> object allows access to various sensors of the Tizen device.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorServiceManagerObject {
+        readonly attribute <a href="#SensorService">SensorService</a> sensorservice;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SensorServiceManagerObject">SensorServiceManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="SensorService">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorService"></a><h3>2.2. SensorService</h3>
+<div class="brief">
+ The SensorService interface provides methods to access the sensor.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorService {
+
+        <a href="#Sensor">Sensor</a> getDefaultSensor(<a href="#SensorType">SensorType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#SensorType">SensorType</a>[] getAvailableSensors() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SensorService::getDefaultSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorService::getDefaultSensor"></a><code><b><span class="methodName">getDefaultSensor</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the default sensor of the device for the given sensor type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Sensor">Sensor</a> getDefaultSensor(<a href="#SensorType">SensorType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The supported sensor types are hardware-dependent. <br><br>To check if the given <var>type</var> is supported or not, SystemInfo API can be used.
+            </p>
+            <ul>
+              <li>
+ LIGHT       - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.photometer"</em>)               </li>
+              <li>
+ MAGNETIC    - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.magnetometer"</em>)               </li>
+              <li>
+ PRESSURE    - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.barometer"</em>)               </li>
+              <li>
+ PROXIMITY   - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.proximity"</em>)               </li>
+              <li>
+ ULTRAVIOLET - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.ultraviolet"</em>)               </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Sensor type to access
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Sensor Default sensor object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if accessing a given sensor type fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on the device.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximityCapability = tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.proximity");
+
+ if (proximityCapability === true) {
+     // the device supports proximity sensor and you can get proximity sensor's data
+     var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+ } else {
+     // If tizen.sensorservice.getDefaultSensor("PROXIMITY") is used, NotSupportedError would be thrown.
+     console.log("Proximity sensor is not supported on this device.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SensorService::getAvailableSensors">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorService::getAvailableSensors"></a><code><b><span class="methodName">getAvailableSensors</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the available sensor types.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SensorType">SensorType</a>[] getAvailableSensors();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SensorType[] All available sensor types
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if getting available sensor type fails because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var sensorCapabilities = tizen.sensorservice.getAvailableSensors();
+
+ console.log("capable sensor : " + sensorCapabilities[0]);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Sensor">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor"></a><h3>2.3. Sensor</h3>
+<div class="brief">
+ The Sensor interface is a base interface for specific sensor interfaces. It provides methods common to all sensor types.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface Sensor {
+
+        readonly attribute <a href="#SensorType">SensorType</a> sensorType;
+
+        void start(<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setChangeListener(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Sensor::sensorType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SensorType </span><span class="name">sensorType</span></span><div class="brief">
+ Sensor type to monitor the changes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Sensor::start">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts the sensor.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void start(<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when sensor has been successfully started
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if starting the sensor fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onsuccessCB() {
+     console.log("The proximity sensor started successfully.");
+ }
+
+ proximitySensor.start(onsuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Sensor::stop">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::stop"></a><code><b><span class="methodName">stop</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops the sensor.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stop();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if stopping the sensor fails because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onsuccessCB() {
+     console.log("proximity sensor start");
+     proximitySensor.stop();
+ }
+
+ proximitySensor.start(onsuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Sensor::setChangeListener">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::setChangeListener"></a><code><b><span class="methodName">setChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a change listener to be called when sensor data of the given type changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setChangeListener(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that the setChangeListener() method only registers the listener.
+The start() method must be called to turn on the sensor, or the sensor data will not change.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data changes
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the listener fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onsuccessCB() {
+     console.log("proximity sensor start");
+ }
+
+ function onchangedCB(sensorData) {
+     console.log("proximity distance : " + sensorData.proximityState);
+ }
+
+ proximitySensor.setChangeListener(onchangedCB);
+
+ proximitySensor.start(onsuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Sensor::unsetChangeListener">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::unsetChangeListener"></a><code><b><span class="methodName">unsetChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters the sensor data change listener.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if unregistering the listener fails because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onchangedCB(sensorData) {
+     console.log("proximity distance : " + sensorData.proximityState);
+ }
+
+ proximitySensor.setChangeListener(onchangedCB);
+
+ proximitySensor.unsetChangeListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="LightSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::LightSensor"></a><h3>2.4. LightSensor</h3>
+<div class="brief">
+ The LightSensor interface provides methods to access light sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface LightSensor : <a href="#Sensor">Sensor</a> {
+
+        void getLightSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="LightSensor::getLightSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::LightSensor::getLightSensorData"></a><code><b><span class="methodName">getLightSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getLightSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getLightSensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getLightSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("light level : " + sensorData.lightLevel);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("sensor start");
+     lightSensor.getLightSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ lightSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MagneticSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::MagneticSensor"></a><h3>2.5. MagneticSensor</h3>
+<div class="brief">
+ The MagneticSensor interface provides methods to access magnetic sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MagneticSensor : <a href="#Sensor">Sensor</a> {
+
+        void getMagneticSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MagneticSensor::getMagneticSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::MagneticSensor::getMagneticSensorData"></a><code><b><span class="methodName">getMagneticSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getMagneticSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getMagneticSensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getMagneticSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var magneticSensor = tizen.sensorservice.getDefaultSensor("MAGNETIC");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("magnetic field of the X axis : " + sensorData.x);
+     console.log("magnetic field of the Y axis : " + sensorData.y);
+     console.log("magnetic field of the Z axis : " + sensorData.z);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("sensor start");
+     magneticSensor.getMagneticSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ magneticSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PressureSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::PressureSensor"></a><h3>2.6. PressureSensor</h3>
+<div class="brief">
+ The PressureSensor interface provides methods to access pressure sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PressureSensor : <a href="#Sensor">Sensor</a> {
+
+        void getPressureSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PressureSensor::getPressureSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::PressureSensor::getPressureSensorData"></a><code><b><span class="methodName">getPressureSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPressureSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that the start() method should be called before calling the getPressureSensorData() method to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getPressureSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var pressureSensor = tizen.sensorservice.getDefaultSensor("PRESSURE");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("pressure : " + sensorData.pressure);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("sensor start");
+     pressureSensor.getPressureSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ pressureSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ProximitySensor">
+<a class="backward-compatibility-anchor" name="::Sensor::ProximitySensor"></a><h3>2.7. ProximitySensor</h3>
+<div class="brief">
+ The ProximitySensor interface provides methods to access proximity sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface ProximitySensor : <a href="#Sensor">Sensor</a> {
+
+        void getProximitySensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ProximitySensor::getProximitySensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::ProximitySensor::getProximitySensorData"></a><code><b><span class="methodName">getProximitySensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getProximitySensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getProximitySensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getProximitySensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("proximity state : " + sensorData.proximityState);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("proximity sensor start");
+     proximitySensor.getProximitySensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ proximitySensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="UltravioletSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::UltravioletSensor"></a><h3>2.8. UltravioletSensor</h3>
+<div class="brief">
+ The UltravioletSensor interface provides methods to access ultraviolet sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface UltravioletSensor : <a href="#Sensor">Sensor</a> {
+
+        void getUltravioletSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="UltravioletSensor::getUltravioletSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::UltravioletSensor::getUltravioletSensorData"></a><code><b><span class="methodName">getUltravioletSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getUltravioletSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getUltravioletSensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getUltravioletSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var ultravioletSensor = tizen.sensorservice.getDefaultSensor("ULTRAVIOLET");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("ultraviolet level : " + sensorData.ultravioletLevel);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("ultraviolet sensor start");
+     ultravioletSensor.getUltravioletSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ ultravioletSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorData"></a><h3>2.9. SensorData</h3>
+<div class="brief">
+ The SensorData interface is a common abstract interface used by different types of sensor data objects.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorData {
+     };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="SensorLightData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorLightData"></a><h3>2.10. SensorLightData</h3>
+<div class="brief">
+ The SensorLightData interface represents light sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorLightData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double lightLevel;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorLightData::lightLevel">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">lightLevel</span></span><div class="brief">
+ Ambient light level in lux.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorMagneticData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorMagneticData"></a><h3>2.11. SensorMagneticData</h3>
+<div class="brief">
+ The SensorMagneticData interface represents magnetic sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorMagneticData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double x;
+
+        readonly attribute double y;
+
+        readonly attribute double z;
+
+        readonly attribute <a href="#MagneticSensorAccuracy">MagneticSensorAccuracy</a> accuracy;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SensorMagneticData::x">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">x</span></span><div class="brief">
+ Ambient magnetic field of the X axis in micro-Tesla (µT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SensorMagneticData::y">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">y</span></span><div class="brief">
+ Ambient magnetic field of the Y axis in micro-Tesla (µT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SensorMagneticData::z">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">z</span></span><div class="brief">
+ Ambient magnetic field of the Z axis in micro-Tesla (µT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SensorMagneticData::accuracy">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MagneticSensorAccuracy </span><span class="name">accuracy</span></span><div class="brief">
+ Accuracy of magnetic sensor data.
+            </div>
+<div class="description">
+            <p>
+For increasing the accuracy, wave the device around in the air in figure-eight patterns.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SensorPressureData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorPressureData"></a><h3>2.12. SensorPressureData</h3>
+<div class="brief">
+ The SensorPressureData interface represents pressure sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorPressureData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double pressure;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorPressureData::pressure">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">pressure</span></span><div class="brief">
+ Pressure in millibar (hPa).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorProximityData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorProximityData"></a><h3>2.13. SensorProximityData</h3>
+<div class="brief">
+ The SensorProximityData interface represents proximity sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorProximityData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute <a href="#ProximityState">ProximityState</a> proximityState;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorProximityData::proximityState">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ProximityState </span><span class="name">proximityState</span></span><div class="brief">
+ Proximity state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorUltravioletData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorUltravioletData"></a><h3>2.14. SensorUltravioletData</h3>
+<div class="brief">
+ The SensorUltravioletData interface represents ultraviolet sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorUltravioletData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute long ultravioletLevel;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorUltravioletData::ultravioletLevel">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">ultravioletLevel</span></span><div class="brief">
+ Ultraviolet index.
+            </div>
+<div class="description">
+            <p>
+The ultraviolet index is an international standard measurement of the strength of ultraviolet radiation from the sun. The <em>ultravioletLevel</em> ranges from 0 to 15.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorDataSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorDataSuccessCallback"></a><h3>2.15. SensorDataSuccessCallback</h3>
+<div class="brief">
+ The SensorDataSuccessCallback interface is a callback interface that is invoked when the sensor data has changed. For example, see the Sensor interface.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface SensorDataSuccessCallback {
+        void onsuccess(optional <a href="#SensorData">SensorData</a>? sensorData);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SensorDataSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorDataSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sensor data has changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(optional <a href="#SensorData">SensorData</a>? sensorData);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">sensorData</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Current sensor data
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the light sensor application runs on a device with a photometer (light) sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.photometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the magnetic sensor application runs on a device with a magnetic sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.magnetometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the barometer(pressure) sensor application runs on a device with a barometric (pressure) sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.barometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the proximity sensor application runs on a device with a proximity sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.proximity</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the UV sensor application runs on a device with a UV sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.ultraviolet</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Sensor {
+
+    enum SensorType { "LIGHT", "MAGNETIC", "PRESSURE",  "PROXIMITY", "ULTRAVIOLET" };
+
+    enum ProximityState { "FAR", "NEAR" };
+
+    enum MagneticSensorAccuracy { "ACCURACY_UNDEFINED", "ACCURACY_BAD", "ACCURACY_NORMAL", "ACCURACY_GOOD", "ACCURACY_VERYGOOD" };
+
+    [NoInterfaceObject] interface SensorServiceManagerObject {
+        readonly attribute <a href="#SensorService">SensorService</a> sensorservice;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SensorServiceManagerObject">SensorServiceManagerObject</a>;
+
+    [NoInterfaceObject] interface SensorService {
+
+        <a href="#Sensor">Sensor</a> getDefaultSensor(<a href="#SensorType">SensorType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#SensorType">SensorType</a>[] getAvailableSensors() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+    [NoInterfaceObject] interface Sensor {
+
+        readonly attribute <a href="#SensorType">SensorType</a> sensorType;
+
+        void start(<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setChangeListener(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface LightSensor : <a href="#Sensor">Sensor</a> {
+
+        void getLightSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface MagneticSensor : <a href="#Sensor">Sensor</a> {
+
+        void getMagneticSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface PressureSensor : <a href="#Sensor">Sensor</a> {
+
+        void getPressureSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface ProximitySensor : <a href="#Sensor">Sensor</a> {
+
+        void getProximitySensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface UltravioletSensor : <a href="#Sensor">Sensor</a> {
+
+        void getUltravioletSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface SensorData {
+     };
+
+    [NoInterfaceObject] interface SensorLightData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double lightLevel;
+    };
+
+    [NoInterfaceObject] interface SensorMagneticData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double x;
+
+        readonly attribute double y;
+
+        readonly attribute double z;
+
+        readonly attribute <a href="#MagneticSensorAccuracy">MagneticSensorAccuracy</a> accuracy;
+    };
+
+    [NoInterfaceObject] interface SensorPressureData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double pressure;
+    };
+
+    [NoInterfaceObject] interface SensorProximityData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute <a href="#ProximityState">ProximityState</a> proximityState;
+    };
+
+    [NoInterfaceObject] interface SensorUltravioletData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute long ultravioletLevel;
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface SensorDataSuccessCallback {
+        void onsuccess(optional <a href="#SensorData">SensorData</a>? sensorData);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/snippet.js b/org.tizen.web.apireference/html/device_api/mobile/tizen/snippet.js
new file mode 100644 (file)
index 0000000..ed1ac43
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,uint,ulong,unchecked,unsafe,ushort,var,byte,"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,null,undefined,var," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html
new file mode 100644 (file)
index 0000000..48008fe
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html
@@ -0,0 +1,594 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Sound API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Sound">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Sound API</h1></div>
+<div class="brief">
+ The Sound API provides functions to control volume level for several sound types.
+        </div>
+<div class="description">
+        <p>
+You can get the maximum volume level for system, notifications, alarm, media and so on.
+Also, you can change or get the current volume level.
+        </p>
+        <p>
+For more information on the Sound features, see <a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/sound_w.htm">Sound Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SoundType">SoundType</a>
+</li>
+<li>1.2. <a href="#SoundModeType">SoundModeType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SoundManagerObject">SoundManagerObject</a>
+</li>
+<li>2.2. <a href="#SoundManager">SoundManager</a>
+</li>
+<li>2.3. <a href="#SoundModeChangeCallback">SoundModeChangeCallback</a>
+</li>
+<li>2.4. <a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SoundManagerObject">SoundManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SoundManager">SoundManager</a></td>
+<td>
+<a href="#SoundModeType">SoundModeType</a> <a href="#SoundManager::getSoundMode">getSoundMode</a> ()<br>
+    void <a href="#SoundManager::setVolume">setVolume</a> (<a href="#SoundType">SoundType</a> type, double volume)<br>
+    double <a href="#SoundManager::getVolume">getVolume</a> (<a href="#SoundType">SoundType</a> type)<br>
+    void <a href="#SoundManager::setSoundModeChangeListener">setSoundModeChangeListener</a> (<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback)<br>
+    void <a href="#SoundManager::unsetSoundModeChangeListener">unsetSoundModeChangeListener</a> ()<br>
+    void <a href="#SoundManager::setVolumeChangeListener">setVolumeChangeListener</a> (<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback)<br>
+    void <a href="#SoundManager::unsetVolumeChangeListener">unsetVolumeChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#SoundModeChangeCallback">SoundModeChangeCallback</a></td>
+<td>void <a href="#SoundModeChangeCallback::onsuccess">onsuccess</a> (<a href="#SoundModeType">SoundModeType</a> mode)</td>
+</tr>
+<tr>
+<td><a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a></td>
+<td>void <a href="#SoundVolumeChangeCallback::onsuccess">onsuccess</a> (<a href="#SoundType">SoundType</a> type, double volume)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SoundType">
+<a class="backward-compatibility-anchor" name="::Sound::SoundType"></a><h3>1.1. SoundType</h3>
+<div class="brief">
+ Sound type to control
+          </div>
+<pre class="webidl prettyprint">    enum SoundType {
+        "SYSTEM",
+        "NOTIFICATION",
+        "ALARM",
+        "MEDIA",
+        "VOICE",
+        "RINGTONE"
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ SYSTEM - for system sounds            </li>
+            <li>
+ NOTIFICATION - for notifications            </li>
+            <li>
+ ALARM - for alarm            </li>
+            <li>
+ MEDIA - for media playback            </li>
+            <li>
+ VOICE - for voice            </li>
+            <li>
+ RINGTONE - for the phone ring            </li>
+          </ul>
+         </div>
+<p><span class="remark"> Remark : </span>
+ <em>VOICE</em> type might not be supported on a device which does not support voice recognition.
+          </p>
+</div>
+<div class="enum" id="SoundModeType">
+<a class="backward-compatibility-anchor" name="::Sound::SoundModeType"></a><h3>1.2. SoundModeType</h3>
+<div class="brief">
+ Sound mode type
+          </div>
+<pre class="webidl prettyprint">    enum SoundModeType {
+        "SOUND",
+        "VIBRATE",
+        "MUTE"
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ SOUND - the sound mode            </li>
+            <li>
+ VIBRATE - the vibrate mode            </li>
+            <li>
+ MUTE - the mute mode            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SoundManagerObject">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManagerObject"></a><h3>2.1. SoundManagerObject</h3>
+<div class="brief">
+ The SoundManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SoundManagerObject {
+         readonly attribute <a href="#SoundManager">SoundManager</a> sound;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SoundManagerObject">SoundManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+There is a tizen.sound object that allows accessing the functionality of the Sound API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SoundManager">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager"></a><h3>2.2. SoundManager</h3>
+<div class="brief">
+ The SoundManager interface provides the functionalities to control the volume level.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SoundManager {
+
+        <a href="#SoundModeType">SoundModeType</a> getSoundMode() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolume(<a href="#SoundType">SoundType</a> type, double volume) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        double getVolume(<a href="#SoundType">SoundType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setSoundModeChangeListener(<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetSoundModeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolumeChangeListener(<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetVolumeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SoundManager::getSoundMode">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::getSoundMode"></a><code><b><span class="methodName">getSoundMode</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sound mode.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SoundModeType">SoundModeType</a> getSoundMode();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SoundModeType The current sound mode
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::setVolume">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::setVolume"></a><code><b><span class="methodName">setVolume</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the volume level for a specified sound type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setVolume(<a href="#SoundType">SoundType</a> type, double volume);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/volume.set
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The sound type
+                </li>
+          <li class="param">
+<span class="name">volume</span>: 
+ The volume level to set <br>The level ranges from 0 to 1.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported. (e.g. when <em>VOICE</em> type is given on a Tizen wearable device).
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::getVolume">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::getVolume"></a><code><b><span class="methodName">getVolume</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current volume level for a specified sound type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">double getVolume(<a href="#SoundType">SoundType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The sound type
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ double The current volume level
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::setSoundModeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::setSoundModeChangeListener"></a><code><b><span class="methodName">setSoundModeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a listener to be called when the sound mode is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setSoundModeChangeListener(<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method to be invoked when the sound mode is changed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::unsetSoundModeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::unsetSoundModeChangeListener"></a><code><b><span class="methodName">unsetSoundModeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification about the sound mode change.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetSoundModeChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::setVolumeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::setVolumeChangeListener"></a><code><b><span class="methodName">setVolumeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a listener to be called when the volume level is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setVolumeChangeListener(<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method to be invoked when the volume level is changed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::unsetVolumeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::unsetVolumeChangeListener"></a><code><b><span class="methodName">unsetVolumeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification when the volume level is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetVolumeChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SoundModeChangeCallback">
+<a class="backward-compatibility-anchor" name="::Sound::SoundModeChangeCallback"></a><h3>2.3. SoundModeChangeCallback</h3>
+<div class="brief">
+ The SoundModeChangeCallback interface specifies a mode change callback for getting notified about the sound mode changes.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundModeChangeCallback {
+        void onsuccess(<a href="#SoundModeType">SoundModeType</a> mode);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SoundModeChangeCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Sound::SoundModeChangeCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sound mode has changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SoundModeType">SoundModeType</a> mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+ Sound mode
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SoundVolumeChangeCallback">
+<a class="backward-compatibility-anchor" name="::Sound::SoundVolumeChangeCallback"></a><h3>2.4. SoundVolumeChangeCallback</h3>
+<div class="brief">
+ The SoundVolumeChangeCallback interface specifies a volume change callback for getting notified about the volume changes.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundVolumeChangeCallback {
+        void onsuccess(<a href="#SoundType">SoundType</a> type, double volume);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SoundVolumeChangeCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Sound::SoundVolumeChangeCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the volume level has changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SoundType">SoundType</a> type, double volume);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Sound type
+                </li>
+          <li class="param">
+<span class="name">volume</span>: 
+ New volume level
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Sound {
+    enum SoundType {
+        "SYSTEM",
+        "NOTIFICATION",
+        "ALARM",
+        "MEDIA",
+        "VOICE",
+        "RINGTONE"
+    };
+
+    enum SoundModeType {
+        "SOUND",
+        "VIBRATE",
+        "MUTE"
+    };
+
+    [NoInterfaceObject] interface SoundManagerObject {
+         readonly attribute <a href="#SoundManager">SoundManager</a> sound;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SoundManagerObject">SoundManagerObject</a>;
+
+    [NoInterfaceObject] interface SoundManager {
+
+        <a href="#SoundModeType">SoundModeType</a> getSoundMode() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolume(<a href="#SoundType">SoundType</a> type, double volume) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        double getVolume(<a href="#SoundType">SoundType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setSoundModeChangeListener(<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetSoundModeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolumeChangeListener(<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetVolumeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundModeChangeCallback {
+        void onsuccess(<a href="#SoundModeType">SoundModeType</a> mode);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundVolumeChangeCallback {
+        void onsuccess(<a href="#SoundType">SoundType</a> type, double volume);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/styles-systeminfo.css b/org.tizen.web.apireference/html/device_api/mobile/tizen/styles-systeminfo.css
new file mode 100644 (file)
index 0000000..e06a2c2
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/styles-systeminfo.css
@@ -0,0 +1,637 @@
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table  {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}
+
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }
+
+
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+
+
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/*     Footer includes space and a gray line above             */
+#footer {
+       font-size: 9pt;
+       padding-top:10px;
+       margin-top:20px;
+       text-align: center;
+/*     border-top:1px solid #EEEEEE; */
+       }
+       
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+div.banner {
+       padding: 8px 4px 0px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+div.footer {
+       font-size: 9pt;
+       padding-top:10px;
+       margin-top:20px;
+       text-align: center;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html
new file mode 100644 (file)
index 0000000..39525c6
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html
@@ -0,0 +1,3519 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>SystemInfo API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::SystemInfo">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>SystemInfo API</h1></div>
+<div class="brief">
+ This specification defines interfaces and methods that provide web applications with access to various properties of a system.
+        </div>
+<div class="description">
+        <p>
+This API also provides interfaces and methods that can retrieve statuses of hardware devices, get the value of selected properties, and subscribe to asynchronous notifications of changes for selected values.
+        </p>
+        <p>
+The following provides an overview of the tree data structure:
+        </p>
+        <ul>
+          <li>
+BATTERY          </li>
+          <li>
+CPU          </li>
+          <li>
+STORAGE          </li>
+          <li>
+DISPLAY          </li>
+          <li>
+DEVICE_ORIENTATION          </li>
+          <li>
+BUILD          </li>
+          <li>
+LOCALE          </li>
+          <li>
+NETWORK          </li>
+          <li>
+WIFI_NETWORK          </li>
+          <li>
+CELLULAR_NETWORK          </li>
+          <li>
+SIM          </li>
+          <li>
+PERIPHERAL          </li>
+          <li>
+MEMORY          </li>
+        </ul>
+        <p>
+Not all above properties may be available on every Tizen device. For instance, a device may not support the telephony feature. In that case, <var>CELLULAR_NETWORK</var> and <var>SIM</var> are not available.<br><br>To check the available <var>SystemInfoPropertyId</var>, <em>tizen.systeminfo.getCapability()</em> can be used.
+        </p>
+        <ul>
+          <li>
+ BATTERY          - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/battery"</em>)          </li>
+          <li>
+ DISPLAY          - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/screen"</em>)          </li>
+          <li>
+ WIFI_NETWORK     - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/network.wifi"</em>)          </li>
+          <li>
+ CELLULAR_NETWORK - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/network.telephony"</em>)          </li>
+          <li>
+ SIM              - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/network.telephony"</em>)          </li>
+        </ul>
+        <p>
+For more information on the SystemInfo features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SystemInfoPropertyId">SystemInfoPropertyId</a>
+</li>
+<li>1.2. <a href="#SystemInfoNetworkType">SystemInfoNetworkType</a>
+</li>
+<li>1.3. <a href="#SystemInfoDeviceOrientationStatus">SystemInfoDeviceOrientationStatus</a>
+</li>
+<li>1.4. <a href="#SystemInfoSimState">SystemInfoSimState</a>
+</li>
+<li>1.5. <a href="#SystemInfoProfile">SystemInfoProfile</a>
+</li>
+<li>1.6. <a href="#SystemInfoLowMemoryStatus">SystemInfoLowMemoryStatus</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SystemInfoObject">SystemInfoObject</a>
+</li>
+<li>2.2. <a href="#SystemInfo">SystemInfo</a>
+</li>
+<li>2.3. <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a>
+</li>
+<li>2.4. <a href="#SystemInfoOptions">SystemInfoOptions</a>
+</li>
+<li>2.5. <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a>
+</li>
+<li>2.6. <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a>
+</li>
+<li>2.7. <a href="#SystemInfoProperty">SystemInfoProperty</a>
+</li>
+<li>2.8. <a href="#SystemInfoBattery">SystemInfoBattery</a>
+</li>
+<li>2.9. <a href="#SystemInfoCpu">SystemInfoCpu</a>
+</li>
+<li>2.10. <a href="#SystemInfoStorage">SystemInfoStorage</a>
+</li>
+<li>2.11. <a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a>
+</li>
+<li>2.12. <a href="#SystemInfoDisplay">SystemInfoDisplay</a>
+</li>
+<li>2.13. <a href="#SystemInfoDeviceOrientation">SystemInfoDeviceOrientation</a>
+</li>
+<li>2.14. <a href="#SystemInfoBuild">SystemInfoBuild</a>
+</li>
+<li>2.15. <a href="#SystemInfoLocale">SystemInfoLocale</a>
+</li>
+<li>2.16. <a href="#SystemInfoNetwork">SystemInfoNetwork</a>
+</li>
+<li>2.17. <a href="#SystemInfoWifiNetwork">SystemInfoWifiNetwork</a>
+</li>
+<li>2.18. <a href="#SystemInfoCellularNetwork">SystemInfoCellularNetwork</a>
+</li>
+<li>2.19. <a href="#SystemInfoSIM">SystemInfoSIM</a>
+</li>
+<li>2.20. <a href="#SystemInfoPeripheral">SystemInfoPeripheral</a>
+</li>
+<li>2.21. <a href="#SystemInfoMemory">SystemInfoMemory</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SystemInfoObject">SystemInfoObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfo">SystemInfo</a></td>
+<td>long long <a href="#SystemInfo::getTotalMemory">getTotalMemory</a> ()<br>
+    long long <a href="#SystemInfo::getAvailableMemory">getAvailableMemory</a> ()<br>
+    <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> <a href="#SystemInfo::getCapabilities">getCapabilities</a> ()<br>
+    any <a href="#SystemInfo::getCapability">getCapability</a> (DOMString key)<br>
+    long <a href="#SystemInfo::getCount">getCount</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property)<br>
+    void <a href="#SystemInfo::getPropertyValue">getPropertyValue</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#SystemInfo::getPropertyValueArray">getPropertyValueArray</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    unsigned long <a href="#SystemInfo::addPropertyValueChangeListener">addPropertyValueChangeListener</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    unsigned long <a href="#SystemInfo::addPropertyValueArrayChangeListener">addPropertyValueArrayChangeListener</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#SystemInfo::removePropertyValueChangeListener">removePropertyValueChangeListener</a> (unsigned long listenerId)</td>
+</tr>
+<tr>
+<td><a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoOptions">SystemInfoOptions</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a></td>
+<td>void <a href="#SystemInfoPropertySuccessCallback::onsuccess">onsuccess</a> (<a href="#SystemInfoProperty">SystemInfoProperty</a> property)</td>
+</tr>
+<tr>
+<td><a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a></td>
+<td>void <a href="#SystemInfoPropertyArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties)</td>
+</tr>
+<tr>
+<td><a href="#SystemInfoProperty">SystemInfoProperty</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoBattery">SystemInfoBattery</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoCpu">SystemInfoCpu</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoStorage">SystemInfoStorage</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoDisplay">SystemInfoDisplay</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoDeviceOrientation">SystemInfoDeviceOrientation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoBuild">SystemInfoBuild</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoLocale">SystemInfoLocale</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoNetwork">SystemInfoNetwork</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoWifiNetwork">SystemInfoWifiNetwork</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoCellularNetwork">SystemInfoCellularNetwork</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoSIM">SystemInfoSIM</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoPeripheral">SystemInfoPeripheral</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoMemory">SystemInfoMemory</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SystemInfoPropertyId">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertyId"></a><h3>1.1. SystemInfoPropertyId</h3>
+<div class="brief">
+ The device property identifier.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoPropertyId { "BATTERY", "CPU", "STORAGE", "DISPLAY", "DEVICE_ORIENTATION", "BUILD", "LOCALE", "NETWORK", "WIFI_NETWORK", "CELLULAR_NETWORK", "SIM", "PERIPHERAL", "MEMORY" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<p><span class="remark"> Remark : </span>
+ <em>LOCALE</em> and <em>PERIPHERAL</em> are supported since Tizen 2.1
+          </p>
+<p><span class="remark"> Remark : </span>
+ <em>MEMORY</em> is supported since Tizen 2.3
+          </p>
+</div>
+<div class="enum" id="SystemInfoNetworkType">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoNetworkType"></a><h3>1.2. SystemInfoNetworkType</h3>
+<div class="brief">
+ Data Network Type.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoNetworkType { "NONE", "2G", "2.5G", "3G", "4G", "WIFI", "ETHERNET", "UNKNOWN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="enum" id="SystemInfoDeviceOrientationStatus">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDeviceOrientationStatus"></a><h3>1.3. SystemInfoDeviceOrientationStatus</h3>
+<div class="brief">
+ Device Orientation Status.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoDeviceOrientationStatus { "PORTRAIT_PRIMARY", "PORTRAIT_SECONDARY", "LANDSCAPE_PRIMARY", "LANDSCAPE_SECONDARY" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+SystemInfo reports the orientation of the device depending on the type of the device and physical position of the device relative to vertical direction.
+A "phone type device" is a device for which the portrait position is the natural orientation.
+A "tab type device" is a device for which the landscape position is basic working orientation.
+          </p>
+          <table>
+            <tr>
+              <th>
+SystemInfoDeviceOrientationStatus              </th>
+              <th>
+phone type device              </th>
+              <th>
+tablet type device              </th>
+            </tr>
+            <tr>
+              <td>
+PORTRAIT_PRIMARY              </td>
+              <td>
+natural position              </td>
+              <td>
+rotated 90 degrees right (clockwise)              </td>
+            </tr>
+            <tr>
+              <td>
+PORTRAIT_SECONDARY              </td>
+              <td>
+upside down, in other words rotated 180 degrees              </td>
+              <td>
+rotated 90 degrees left (anticlockwise)              </td>
+            </tr>
+            <tr>
+              <td>
+LANDSCAPE_PRIMARY              </td>
+              <td>
+rotated 90 degrees left (anticlockwise)              </td>
+              <td>
+natural position              </td>
+            </tr>
+            <tr>
+              <td>
+LANDSCAPE_SECONDARY              </td>
+              <td>
+rotated 90 degrees right (clockwise)              </td>
+              <td>
+upside down, in other words rotated 180 degrees              </td>
+            </tr>
+          </table>
+         </div>
+</div>
+<div class="enum" id="SystemInfoSimState">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoSimState"></a><h3>1.4. SystemInfoSimState</h3>
+<div class="brief">
+ Sim State.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoSimState { "ABSENT", "INITIALIZING", "READY", "PIN_REQUIRED", "PUK_REQUIRED", "NETWORK_LOCKED", "SIM_LOCKED", "UNKNOWN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+<div class="enum" id="SystemInfoProfile">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoProfile"></a><h3>1.5. SystemInfoProfile</h3>
+<div class="brief">
+ Device Profile.
+          </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ <em>"MOBILE_FULL"</em> and <em>"MOBILE_WEB"</em> are deprecated since Tizen 2.3 and will be removed in Tizen 3.0. <br>Beginning with Tizen 2.3, <em>"MOBILE"</em> is returned instead of <em>"MOBILE_FULL"</em>.
+          </i></font></p></div>
+<pre class="webidl prettyprint">  enum SystemInfoProfile { "MOBILE_FULL", "MOBILE_WEB", "MOBILE", "WEARABLE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<p><span class="remark"> Remark : </span>
+ <em>"MOBILE"</em> and <em>"WEARABLE"</em> are supported since Tizen 2.3
+          </p>
+</div>
+<div class="enum" id="SystemInfoLowMemoryStatus">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoLowMemoryStatus"></a><h3>1.6. SystemInfoLowMemoryStatus</h3>
+<div class="brief">
+ The low memory state of a device.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoLowMemoryStatus { "NORMAL", "WARNING" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+NORMAL - indicating the remaining memory is sufficient for an application to run             </li>
+            <li>
+WARNING - indicating the remaining memory is insufficient. Low memory warnings may happen differently according to the system.             </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SystemInfoObject">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoObject"></a><h3>2.1. SystemInfoObject</h3>
+<div class="brief">
+ Defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoObject {
+    readonly attribute <a href="#SystemInfo">SystemInfo</a> systeminfo;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemInfoObject">SystemInfoObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There will be a tizen.systeminfo object that allows accessing the
+functionality of the SystemInfo API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SystemInfo">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo"></a><h3>2.2. SystemInfo</h3>
+<div class="brief">
+ This entry interface queries the information of a system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfo {
+    long long getTotalMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long long getAvailableMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> getCapabilities() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    any getCapability(DOMString key) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long getCount(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValue(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValueArray(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueArrayChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePropertyValueChangeListener(unsigned long listenerId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<div class="description">
+          <p>
+This API offers methods for retrieving system information
+and for subscribing notifications of system information changes.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemInfo::getTotalMemory">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getTotalMemory"></a><code><b><span class="methodName">getTotalMemory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the total amount of system memory (in bytes).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long long getTotalMemory();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // To get total amount of system memory
+ console.log("The total memory size is " + tizen.systeminfo.getTotalMemory() + " bytes.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getAvailableMemory">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getAvailableMemory"></a><code><b><span class="methodName">getAvailableMemory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the amount of memory that is not in use (in bytes).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long long getAvailableMemory();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // To get total amount of system memory
+ console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory() + " bytes.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getCapabilities">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getCapabilities"></a><code><b><span class="methodName">getCapabilities</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the capabilities of the device.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ getCapabilities() is deprecated since Tizen 2.3.
+It is recommended to use the getCapability() method (since Tizen 2.3) instead.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> getCapabilities();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The function must synchronously acquire the capabilities of the device.
+            </p>
+           </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var deviceCapabilities;
+ deviceCapabilities = tizen.systeminfo.getCapabilities();
+ if (deviceCapabilities.bluetooth) {
+     console.log("Bluetooth is supported");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getCapability">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getCapability"></a><code><b><span class="methodName">getCapability</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a device capability related to a given key.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">any getCapability(DOMString key);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+See the available <a href="./systeminfo_capability_keys.html">device capability keys</a>.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">key</span>: 
+ The device capability key for the device
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ any The value of the specified device capability
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     // Checks if a device supports bluetooth API or not
+     var bluetooth = tizen.systeminfo.getCapability("http://tizen.org/feature/network.bluetooth");
+     console.log(" Bluetooth = " + bluetooth);
+ } catch (error) {
+     console.log("Error name: " + error.name + ", message: " + error.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getCount">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getCount"></a><code><b><span class="methodName">getCount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the number of system property information provided for a particular system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getCount(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+That is the length of array retrieved by the getPropertyValueArray() method for the given property.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the system property
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The number of property values for the given property. If the property is not supported, 0 is returned.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var count = tizen.systeminfo.getCount("SIM");
+ if (count === 0) {
+     console.log("There is no available SIM card.");
+ } else {
+     console.log("There is(are) " + count + " SIM card(s) available.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getPropertyValue">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getPropertyValue"></a><code><b><span class="methodName">getPropertyValue</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current value of a specified system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPropertyValue(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The function must asynchronously acquire the current value of the requested property. If it is successful,
+the successCallback must be invoked with an object containing the information provided by the property.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method can be launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported. (since Tizen 2.3)              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ If the given <var>property</var> is not supported, <em>NotSupportedError</em> would be passed through a <em>ErrorCallback()</em> since Tizen 2.3.
+            </p>
+<p><span class="remark"> Remark : </span>
+ If system provides more than one value for the system property, the primary(first) system property is returned through SystemInfoSuccessCallback.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Function called when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Function called when an error occurred while retrieving the properties.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onSuccessCallback(cpu) {
+     console.log("The cpu load is " + cpu.load);
+ }
+
+ function onErrorCallback(error) {
+     console.log("An error occurred " + error.message);
+ }
+
+ tizen.systeminfo.getPropertyValue("CPU", onSuccessCallback, onErrorCallback);
+ </pre>
+</div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onSuccessCallback(cellular) {
+     console.log("The status of the cellular network is " + cellular.status);
+ }
+
+ function onErrorCallback(error) {
+     console.log("An error occurred " + error.message);
+     // if telephony_capability is false but getPropertyValue("CELLULAR_NETWORK, ..) is called, NotSupportedError would be passed.
+ }
+
+ var telephony_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/network.telephony");
+
+ if (telephony_capability === true) {
+     // onSuccessCallback will be invoked.
+     tizen.systeminfo.getPropertyValue("CELLULAR_NETWORK", onSuccessCallback, onErrorCallback);
+ } else {
+     console.log("Telephony feature is not supported. Cellular network related information cannot be retrieved.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getPropertyValueArray">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getPropertyValueArray"></a><code><b><span class="methodName">getPropertyValueArray</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current values of a specified system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPropertyValueArray(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+It is recommended that you check if a device provides one or more than one value for a particular system property via getCount().
+            </p>
+            <p>
+If one particular system property is provided on a device, it returns an array containing one SystemInfoProperty object through <em>SystemInfoPropertyArraySuccessCallback</em> method.<br>If more than one particular system property is provided, multiple SystemInfoProperty objects are returned.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method can be launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported.              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ see getCount().
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs while retrieving the properties.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successCB(property) {
+     console.log("The SIM's current state is " + property.state);
+ }
+
+ function successArrayCB(properties) {
+     console.log("The number of the returned system properties is " + properties.length);
+     for (var i = 0; i &lt; properties.length; i++) {
+         console.log("[" + i + "] SIM's state is " + properties[i].state);
+     }
+ }
+
+ var count = tizen.systeminfo.getCount("SIM");
+ if (count === 0) {
+     console.log("This device does not provide SIM card.");
+ } else if (count &gt; 1) {
+     tizen.systeminfo.getPropertyValueArray("SIM", successArrayCB);
+ } else {
+     tizen.systeminfo.getPropertyValue("SIM", successCB);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::addPropertyValueChangeListener">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::addPropertyValueChangeListener"></a><code><b><span class="methodName">addPropertyValueChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to allow tracking of changes in one or more system properties.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long addPropertyValueChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+When called, it immediately returns and then asynchronously starts a watch process defined by the following steps:
+            </p>
+            <p>
+1. Register the successCallback to receive system events that the status of the requested properties may have changed.
+            </p>
+            <p>
+2. When a system event is successfully received invoke the associated successCallback with an object containing the property
+values.
+            </p>
+            <p>
+3. Repeat step 2 until removePropertyValueChangeListener function is called.
+            </p>
+            <p>
+There are device properties which are never changed (e.g. "BUILD") and properties which are not changed on some devices
+(e.g. "DEVICE_ORIENTATION" in Tizen TV device). The <em>addPropertyValueChangeListener()</em> method accepts
+any identifier of these properties, but the listener added for them will not be invoked.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The <em>errorCallback</em> can be launched with any of these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported. (since Tizen 2.3)<br>For example, monitoring <var>CELLULAR_NETWORK</var> changes is not supported on a device which does not support the telephony feature.
+              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ The <em>errorCallback()</em> is newly added as an optional parameter since Tizen 2.3.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Function called when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">options</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An object containing the various options for fetching the properties requested. See <a href="#SystemInfoOptions">details</a>.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Function called when an error occurred.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long An identifier used to clear the watch subscription.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value (e.g. the invalid value for <em>options</em>).
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onSuccessCallback(cpu) {
+     console.log("The cpu load : " + cpu.load);
+ }
+
+ tizen.systeminfo.addPropertyValueChangeListener("CPU", onSuccessCallback, {lowThreshold : 0.2});
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::addPropertyValueArrayChangeListener">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::addPropertyValueArrayChangeListener"></a><code><b><span class="methodName">addPropertyValueArrayChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to allow tracking of changes in one or more values of a system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long addPropertyValueArrayChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method can be launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported. (since Tizen 2.3)<br>For example, monitoring <var>CELLULAR_NETWORK</var> changes is not supported on a device which does not support the telephony feature.
+              </li>
+            </ul>
+            <p>
+There are device properties which never change (for example "BUILD") and properties which do not change on the current platform
+(for example "DEVICE_ORIENTATION" for some platforms). The <em>addPropertyValueChangeListener()</em> method accepts
+any identifier of these properties, but the listener added for them will not be invoked.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Function called when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">options</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An object containing the various options for fetching the properties requested.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Function called when an error occurred.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long An identifier used to clear the watch subscription.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value (e.g. the invalid value for <em>options</em>).
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SystemInfo::removePropertyValueChangeListener">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::removePropertyValueChangeListener"></a><code><b><span class="methodName">removePropertyValueChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes notifications for property changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removePropertyValueChangeListener(unsigned long listenerId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If a valid listenerId argument is passed that corresponds to a subscription
+already place, then the watch process MUST immediately terminate and no further
+callback is invoked. If the listenerId argument does not correspond to a valid subscription,
+the method should return without any further action.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listenerId</span>: 
+ An identifier of the subscription returned by the addPropertyValueChangeListener()/addPropertyValueArrayChangeListener() method.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var id = null;
+ function onSuccessCallback(cpu) {
+    console.log("New value for CPU load is " + cpu.load);
+    if (id != null) { // After receiving the first notification, we clear it
+        tizen.systeminfo.removePropertyValueChangeListener(id);
+    }
+ }
+
+ id = tizen.systeminfo.addPropertyValueChangeListener("CPU", onSuccessCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoDeviceCapability">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDeviceCapability"></a><h3>2.3. SystemInfoDeviceCapability</h3>
+<div class="brief">
+ SystemInfoDeviceCapability object.
+          </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ SystemInfoDeviceCapability is deprecated since Tizen 2.3 and will be removed in Tizen 3.0.
+It is recommended to use the getCapability() method (since Tizen 2.3) instead to query device capabilities.
+          </i></font></p></div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoDeviceCapability {
+    readonly attribute boolean bluetooth;
+
+    readonly attribute boolean nfc;
+
+    readonly attribute boolean nfcReservedPush ;
+
+    readonly attribute unsigned short multiTouchCount;
+
+    readonly attribute boolean inputKeyboard;
+
+    readonly attribute boolean inputKeyboardLayout;
+
+    readonly attribute boolean wifi;
+
+    readonly attribute boolean wifiDirect;
+
+    readonly attribute boolean opengles;
+
+    readonly attribute DOMString openglestextureFormat;
+
+    readonly attribute boolean openglesVersion1_1;
+
+    readonly attribute boolean openglesVersion2_0;
+
+    readonly attribute boolean fmRadio;
+
+    readonly attribute DOMString platformVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString webApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString nativeApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString platformName;
+
+    readonly attribute boolean camera;
+
+    readonly attribute boolean cameraFront;
+
+    readonly attribute boolean cameraFrontFlash;
+
+    readonly attribute boolean cameraBack;
+
+    readonly attribute boolean cameraBackFlash;
+
+    readonly attribute boolean location;
+
+    readonly attribute boolean locationGps;
+
+    readonly attribute boolean locationWps;
+
+    readonly attribute boolean microphone;
+
+    readonly attribute boolean usbHost;
+
+    readonly attribute boolean usbAccessory;
+
+    readonly attribute boolean screenOutputRca;
+
+    readonly attribute boolean screenOutputHdmi;
+
+    readonly attribute DOMString platformCoreCpuArch;
+
+    readonly attribute DOMString platformCoreFpuArch;
+
+    readonly attribute boolean sipVoip;
+
+    readonly attribute DOMString duid;
+
+    readonly attribute boolean speechRecognition;
+
+    readonly attribute boolean speechSynthesis;
+
+    readonly attribute boolean accelerometer;
+
+    readonly attribute boolean accelerometerWakeup;
+
+    readonly attribute boolean barometer;
+
+    readonly attribute boolean barometerWakeup;
+
+    readonly attribute boolean gyroscope;
+
+    readonly attribute boolean gyroscopeWakeup;
+
+    readonly attribute boolean magnetometer;
+
+    readonly attribute boolean magnetometerWakeup;
+
+    readonly attribute boolean photometer;
+
+    readonly attribute boolean photometerWakeup;
+
+    readonly attribute boolean proximity;
+
+    readonly attribute boolean proximityWakeup;
+
+    readonly attribute boolean tiltmeter;
+
+    readonly attribute boolean tiltmeterWakeup;
+
+    readonly attribute boolean dataEncryption;
+
+    readonly attribute boolean graphicsAcceleration;
+
+    readonly attribute boolean push;
+
+    readonly attribute boolean telephony;
+
+    readonly attribute boolean telephonyMms;
+
+    readonly attribute boolean telephonySms;
+
+    readonly attribute boolean screenSizeNormal;
+
+    readonly attribute boolean screenSize480_800;
+
+    readonly attribute boolean screenSize720_1280;
+
+    readonly attribute boolean autoRotation;
+
+    readonly attribute boolean shellAppWidget;
+
+    readonly attribute boolean visionImageRecognition;
+
+    readonly attribute boolean visionQrcodeGeneration;
+
+    readonly attribute boolean visionQrcodeRecognition;
+
+    readonly attribute boolean visionFaceRecognition;
+
+    readonly attribute boolean secureElement;
+
+    readonly attribute boolean nativeOspCompatible;
+
+    readonly attribute <a href="#SystemInfoProfile">SystemInfoProfile</a> profile;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoDeviceCapability::bluetooth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">bluetooth</span></span><div class="brief">
+ Indicates whether the device supports Bluetooth.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nfc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">nfc</span></span><div class="brief">
+ Indicates whether the device supports NFC.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nfcReservedPush">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">nfcReservedPush</span></span><div class="brief">
+ Indicates whether the device supports NFC reserved push.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::multiTouchCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">multiTouchCount</span></span><div class="brief">
+ The number of point in Multi-point touch.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::inputKeyboard">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">inputKeyboard</span></span><div class="brief">
+ Indicates whether the device supports the built-in Keyboard.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::inputKeyboardLayout">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">inputKeyboardLayout</span></span><div class="brief">
+ Indicates whether the device supports the built-in keyboard layout.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::wifi">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">wifi</span></span><div class="brief">
+ Indicates whether the device supports Wi-Fi.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::wifiDirect">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">wifiDirect</span></span><div class="brief">
+ Indicates whether the device supports Wi-Fi direct.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::opengles">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">opengles</span></span><div class="brief">
+ Indicates whether the device supports OpenGL-ES.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::openglestextureFormat">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">openglestextureFormat</span></span><div class="brief">
+ The device 3DC texture format for OpenGL-ES.
+One example of possible output is as follows: "3dc/atc/etc/ptc/pvrtc/utc"
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::openglesVersion1_1">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">openglesVersion1_1</span></span><div class="brief">
+ Indicates whether the device supports OpenGL-ES version 1.1.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::openglesVersion2_0">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">openglesVersion2_0</span></span><div class="brief">
+ Indicates whether the device supports OpenGL-ES version 2.0.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::fmRadio">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">fmRadio</span></span><div class="brief">
+ Indicates whether the device supports FM radio.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformVersion</span></span><div class="brief">
+ The version of the platform in the <em>[Major].[Minor].[Patch Version] </em> format. <br>For example, <var>1.0.0 </var> represents a platform version where the major version is <var>1 </var>and the minor and build versions are <var>0</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::webApiVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">webApiVersion</span></span><div class="brief">
+ The version of the Web API in the <em>[Major].[Minor] </em> format. <br>For example, <var>1.0 </var>represents a web api version where the major version is <var>1 </var> and the minor version is <var>0</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nativeApiVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">nativeApiVersion</span></span><div class="brief">
+ The version of the native API in the <em>[Major].[Minor] </em>format.<br>            </div>
+<div class="description">
+            <p>
+For example, <var>1.0</var> represents a native api version where the major version is <var>1 </var>and the minor version is <var>0</var>.
+If a device doesn't provide Tizen native API, nativeApiVersion will be a empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformName</span></span><div class="brief">
+ The name of the platform.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::camera">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">camera</span></span><div class="brief">
+ Indicates whether the device supports camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraFront">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraFront</span></span><div class="brief">
+ Indicates whether the device supports front camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraFrontFlash">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraFrontFlash</span></span><div class="brief">
+ Indicates whether the device supports flash on the front camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraBack">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraBack</span></span><div class="brief">
+ Indicates whether the device supports back-side camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraBackFlash">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraBackFlash</span></span><div class="brief">
+ Indicates whether the device supports flash on the back-side camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::location">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">location</span></span><div class="brief">
+ Indicates whether the device supports GPS or not.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::locationGps">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">locationGps</span></span><div class="brief">
+ Indicates whether the device supports GPS based location feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::locationWps">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">locationWps</span></span><div class="brief">
+ Indicates whether the device supports WPS based location feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::microphone">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">microphone</span></span><div class="brief">
+ Indicates whether the device supports microphone.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::usbHost">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">usbHost</span></span><div class="brief">
+ Indicates whether the device supports USB host.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::usbAccessory">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">usbAccessory</span></span><div class="brief">
+ Indicates whether the device supports USB accessory.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenOutputRca">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenOutputRca</span></span><div class="brief">
+ Indicates whether the device supports RCA output.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenOutputHdmi">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenOutputHdmi</span></span><div class="brief">
+ Indicates whether the device supports HDMI output.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformCoreCpuArch">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformCoreCpuArch</span></span><div class="brief">
+ The device CPU architecture.
+The possible values for this attribute are: armv6, armv7, x86.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformCoreFpuArch">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformCoreFpuArch</span></span><div class="brief">
+ The device FPU architecture.
+The possible values for this attribute are: vfpv3 / sse2 / sse3 / ssse3.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::sipVoip">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">sipVoip</span></span><div class="brief">
+ Indicates whether the device supports VOIP.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::duid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">duid</span></span><div class="brief">
+ Indicates the Tizen ID, not device's unique ID since Tizen 2.3.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ Tizen ID is a randomly generated value based on the model name. <br>It is recommended to use tizen.systeminfo.getCapability("http://tizen.org/system/tizenid") since Tizen 2.3 instead.
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::speechRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">speechRecognition</span></span><div class="brief">
+ Indicates whether the device supports speech recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::speechSynthesis">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">speechSynthesis</span></span><div class="brief">
+ Indicates whether the device supports speech synthesis.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::accelerometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">accelerometer</span></span><div class="brief">
+ Indicates whether the device supports Accelerometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::accelerometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">accelerometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Accelerometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::barometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">barometer</span></span><div class="brief">
+ Indicates whether the device supports Barometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::barometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">barometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Barometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::gyroscope">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">gyroscope</span></span><div class="brief">
+ Indicates whether the device supports Gyroscope sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::gyroscopeWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">gyroscopeWakeup</span></span><div class="brief">
+ Indicates whether the device supports Gyroscope sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::magnetometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">magnetometer</span></span><div class="brief">
+ Indicates whether the device supports Magnetometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::magnetometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">magnetometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Magnetometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::photometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">photometer</span></span><div class="brief">
+ Indicates whether the device supports Photometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::photometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">photometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Photometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::proximity">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">proximity</span></span><div class="brief">
+ Indicates whether the device supports Proximity sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::proximityWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">proximityWakeup</span></span><div class="brief">
+ Indicates whether the device supports Proximity sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::tiltmeter">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">tiltmeter</span></span><div class="brief">
+ Indicates whether the device supports Tiltmeter sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::tiltmeterWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">tiltmeterWakeup</span></span><div class="brief">
+ Indicates whether the device supports Tiltmeter sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::dataEncryption">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">dataEncryption</span></span><div class="brief">
+ Indicates whether the device supports data encryption.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::graphicsAcceleration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">graphicsAcceleration</span></span><div class="brief">
+ Indicates whether the device supports hardware acceleration for 2D/3D graphics.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::push">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">push</span></span><div class="brief">
+ Indicates whether the device supports push service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::telephony">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">telephony</span></span><div class="brief">
+ Indicates whether the device supports the telephony feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::telephonyMms">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">telephonyMms</span></span><div class="brief">
+ Indicates whether the device supports the mms feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::telephonySms">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">telephonySms</span></span><div class="brief">
+ Indicates whether the device supports the sms feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenSizeNormal">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenSizeNormal</span></span><div class="brief">
+ Indicates whether the device supports the screen normal size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenSize480_800">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenSize480_800</span></span><div class="brief">
+ Indicates whether the device supports the 480 * 800 screen size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenSize720_1280">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenSize720_1280</span></span><div class="brief">
+ Indicates whether the device supports the 720 * 1280 screen size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::autoRotation">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">autoRotation</span></span><div class="brief">
+ Indicates whether the device supports auto rotation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::shellAppWidget">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">shellAppWidget</span></span><div class="brief">
+ Indicates whether the device supports shell app widget(dynamic box).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionImageRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionImageRecognition</span></span><div class="brief">
+ Indicates whether the device supports vision image recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionQrcodeGeneration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionQrcodeGeneration</span></span><div class="brief">
+ Indicates whether the device supports vision qrcode generation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionQrcodeRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionQrcodeRecognition</span></span><div class="brief">
+ Indicates whether the device supports vision qrcode recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionFaceRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionFaceRecognition</span></span><div class="brief">
+ Indicates whether the device supports vision face recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::secureElement">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">secureElement</span></span><div class="brief">
+ Indicates whether the device supports secure element.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nativeOspCompatible">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">nativeOspCompatible</span></span><div class="brief">
+ Indicates whether the device supports native osp API.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::profile">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoProfile </span><span class="name">profile</span></span><div class="brief">
+ Represents the profile of the current device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="SystemInfoOptions">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoOptions"></a><h3>2.4. SystemInfoOptions</h3>
+<div class="brief">
+ An object containing the various options for fetching the properties requested.
+          </div>
+<pre class="webidl prettyprint">  dictionary SystemInfoOptions {
+    unsigned long timeout;
+
+    double highThreshold;
+
+    double lowThreshold;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The <var>highThreshold</var> and <var>lowThreshold</var> values are only applicable to the following <em>SystemInfoPropertyId</em>.
+          </p>
+          <ul>
+            <li>
+ SystemInfoBattery - level : <em>from 0 to 1</em>             </li>
+            <li>
+ SystemInfoCpu - load : <em>from 0 to 1</em>             </li>
+            <li>
+ SystemInfoDisplay - brightness : <em>from 0 to 1</em>             </li>
+          </ul>
+          <p>
+For other cases, it is ignored.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="SystemInfoOptions::timeout"><span class="attrName">unsigned long timeout</span></dt>
+<dd>
+<div class="brief">
+ The number of milliseconds beyond which the operation must be interrupted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="SystemInfoOptions::highThreshold"><span class="attrName">double highThreshold</span></dt>
+<dd>
+<div class="brief">
+ An attribute to indicate that the <em>successCallback()</em> method in the watch
+operation will be triggered only if the device property is a number and its value is greater than or equal to this number.
+This attribute has no effect on the <em>get()</em> method.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="SystemInfoOptions::lowThreshold"><span class="attrName">double lowThreshold</span></dt>
+<dd>
+<div class="brief">
+ An attribute to indicate that the <em>successCallback()</em> method in the watch operation must be triggered only if the property is a number and its value is lower than or equal to this number.
+If both <em>highThreshold </em>and <em>lowThreshold </em>parameters are specified, the <em>successCallback()</em> is triggered if and only if the property value is either lower than the value of <em>lowThreshold</em> or higher than the value of <em>highThreshold</em>.
+This attribute has no effect on the get method.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoPropertySuccessCallback">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertySuccessCallback"></a><h3>2.5. SystemInfoPropertySuccessCallback</h3>
+<div class="brief">
+ Systeminfo specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a> property);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback with SystemInfoProperty as input argument.
+It is used in asynchronous
+operations, such as getPropertyValue() or addPropertyValueChangeListener()
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemInfoPropertySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a> property);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The property returned from a successful asynchronous operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoPropertyArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertyArraySuccessCallback"></a><h3>2.6. SystemInfoPropertyArraySuccessCallback</h3>
+<div class="brief">
+ Systeminfo specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertyArraySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback with SystemInfoProperty as input argument.
+It is used in asynchronous operations, such as getPropertyValueArray() or addPropertyValueArrayChangeListener()
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemInfoPropertyArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertyArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">properties</span>: 
+ The array of SystemInfoProperty objects returned from a successful asynchronous operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoProperty">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoProperty"></a><h3>2.7. SystemInfoProperty</h3>
+<div class="brief">
+ This is a common abstract interface used by different types of system information objects.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoProperty {
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="SystemInfoBattery">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoBattery"></a><h3>2.8. SystemInfoBattery</h3>
+<div class="brief">
+ This property reflects the general state of the system's battery
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoBattery : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double level;
+
+    readonly attribute boolean isCharging;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoBattery::level">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">level</span></span><div class="brief">
+ An attribute to specify the remaining level of an internal battery, scaled from <var>0 </var>to <var>1</var>:
+            </div>
+<div class="description">
+            <ul>
+              <li>
+<var>0 </var>indicates that the battery level is the lowest and the system is about to enter shutdown mode.              </li>
+              <li>
+<var>1 </var>indicates that the system's charge is maximum.              </li>
+            </ul>
+            <p>
+Any threshold parameter used in a watch operation to monitor this property applies to this attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoBattery::isCharging">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isCharging</span></span><div class="brief">
+ Indicates whether the battery source is currently charging.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoCpu">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoCpu"></a><h3>2.9. SystemInfoCpu</h3>
+<div class="brief">
+ This property reflects the state of the CPUs available to this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoCpu : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double load;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoCpu::load">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">load</span></span><div class="brief">
+  An attribute to indicate the current CPU load, as a number between <var>0.0 </var>and <var>1.0</var>, representing the minimum and maximum values allowed on this system.
+Any threshold parameter used in a watch function to monitor this property applies to this attribute.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoStorage">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoStorage"></a><h3>2.10. SystemInfoStorage</h3>
+<div class="brief">
+ This property exposes the data storage devices connected to this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoStorage : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a>[] units;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoStorage::units">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoStorageUnit[]
+                      </span><span class="name">units</span></span><div class="brief">
+ The array of storage units connected to this device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoStorageUnit">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoStorageUnit"></a><h3>2.11. SystemInfoStorageUnit</h3>
+<div class="brief">
+ This property exposes a single storage device connected to this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoStorageUnit : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString type;
+
+    readonly attribute unsigned long long capacity;
+
+    readonly attribute unsigned long long availableCapacity;
+
+    readonly attribute boolean isRemovable;
+
+    readonly attribute boolean isRemoveable;
+  };</pre>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoStorageUnit::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ The type of a storage device. The value is one of the constants defined for this type.
+            </div>
+<div class="description">
+            <p>
+The supported storage unit types are:
+            </p>
+            <ul>
+              <li>
+UNKNOWN              </li>
+              <li>
+INTERNAL               </li>
+              <li>
+USB_DEVICE              </li>
+              <li>
+USB_HOST              </li>
+              <li>
+MMC              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::capacity">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">capacity</span></span><div class="brief">
+ The amount of data that this device can hold, in bytes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::availableCapacity">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">availableCapacity</span></span><div class="brief">
+ The amount of available data that this device can hold, in bytes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::isRemovable">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRemovable</span></span><div class="brief">
+ An attribute to indicate whether a device can be removed or not.
+            </div>
+<div class="description">
+            <p>
+The following values are supported:
+            </p>
+            <ul>
+              <li>
+<var>true </var> - If this storage unit can be removed from the system (such as an sdcard unplugged)              </li>
+              <li>
+<var>false</var> - If this storage unit cannot be removed from the system              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::isRemoveable">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRemoveable</span></span><div class="brief">
+ true if this unit can be removed from the system (such as an sdcard unplugged), false otherwise.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ A typographic error.
+            </i></font></p></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoDisplay">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDisplay"></a><h3>2.12. SystemInfoDisplay</h3>
+<div class="brief">
+ This property reflects the information of the Display.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoDisplay : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute unsigned long resolutionWidth;
+
+    readonly attribute unsigned long resolutionHeight;
+
+    readonly attribute unsigned long dotsPerInchWidth;
+
+    readonly attribute unsigned long dotsPerInchHeight;
+
+    readonly attribute double physicalWidth;
+
+    readonly attribute double physicalHeight;
+
+    readonly attribute double brightness;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoDisplay::resolutionWidth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">resolutionWidth</span></span><div class="brief">
+ The total number of addressable pixels in the horizontal direction of a rectangular entity
+(such as Camera, Display, Image, Video, ...) when held in its default orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::resolutionHeight">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">resolutionHeight</span></span><div class="brief">
+ The total number of addressable pixels in the vertical direction of a rectangular element
+(such as Camera, Display, Image, Video, ...) when held in its default orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::dotsPerInchWidth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">dotsPerInchWidth</span></span><div class="brief">
+ Resolution of this device, along its width, in dots per inch.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::dotsPerInchHeight">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">dotsPerInchHeight</span></span><div class="brief">
+ Resolution of this device, along its height, in dots per inch.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::physicalWidth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">physicalWidth</span></span><div class="brief">
+ The display's physical width in millimeters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::physicalHeight">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">physicalHeight</span></span><div class="brief">
+ The display's physical height in millimeters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::brightness">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">brightness</span></span><div class="brief">
+ The current brightness of a display ranging between <var>0 </var>to <var>1</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoDeviceOrientation">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDeviceOrientation"></a><h3>2.13. SystemInfoDeviceOrientation</h3>
+<div class="brief">
+ This property reflects the information of the device orientation in this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoDeviceOrientation : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoDeviceOrientationStatus">SystemInfoDeviceOrientationStatus</a> status;
+
+    readonly attribute boolean isAutoRotation;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoDeviceOrientation::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoDeviceOrientationStatus </span><span class="name">status</span></span><div class="brief">
+ Represents the status of the current device orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceOrientation::isAutoRotation">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isAutoRotation</span></span><div class="brief">
+ whether the device is in autorotation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoBuild">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoBuild"></a><h3>2.14. SystemInfoBuild</h3>
+<div class="brief">
+ This property reflects the information of the current device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoBuild : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString model;
+
+    readonly attribute DOMString manufacturer;
+
+    readonly attribute DOMString buildVersion;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoBuild::model">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">model</span></span><div class="brief">
+ Represents the model name of the current device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoBuild::manufacturer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">manufacturer</span></span><div class="brief">
+ Represents the manufacturer of the device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoBuild::buildVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">buildVersion</span></span><div class="brief">
+ Represents the build version information of the device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoLocale">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoLocale"></a><h3>2.15. SystemInfoLocale</h3>
+<div class="brief">
+ This property reflects the locale information of the current device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoLocale : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString language;
+
+    readonly attribute DOMString country;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoLocale::language">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">language</span></span><div class="brief">
+ Indicates the current language setting in the (LANGUAGE)_(REGION) syntax.
+The language setting is in the ISO 630-2 format and the region setting is in the ISO 3166-1 format.
+The language setting is case-sensitive.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoLocale::country">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">country</span></span><div class="brief">
+ Indicates the current country setting in the (LANGUAGE)_(REGION) syntax.
+The language setting is in the ISO 630-2 format and the region setting is in the ISO 3166-1 format.
+The country setting is case-sensitive.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoNetwork">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoNetwork"></a><h3>2.16. SystemInfoNetwork</h3>
+<div class="brief">
+ This property reflects the information of the data network in this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoNetworkType">SystemInfoNetworkType</a> networkType;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoNetwork::networkType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoNetworkType </span><span class="name">networkType</span></span><div class="brief">
+ Represents the network type of the current data network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoWifiNetwork">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoWifiNetwork"></a><h3>2.17. SystemInfoWifiNetwork</h3>
+<div class="brief">
+ This property reflects the information of the Wi-Fi network in this system.
+          </div>
+<pre class="webidl prettyprint">   [NoInterfaceObject] interface SystemInfoWifiNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString ssid;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute DOMString macAddress;
+
+    readonly attribute double signalStrength;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoWifiNetwork::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">status</span></span><div class="brief">
+ Represents the status (ON or OFF) of the Wi-Fi interface.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::ssid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ssid</span></span><div class="brief">
+ Represents the SSID of the Wi-Fi network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::ipAddress">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipAddress</span></span><div class="brief">
+ Represents the IPv4 address of the Wi-Fi network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::ipv6Address">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipv6Address</span></span><div class="brief">
+ Represents the IPv6 address of the Wi-Fi network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::macAddress">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">macAddress</span></span><div class="brief">
+ Represents the MAC address of the Wi-Fi interface.
+            </div>
+<div class="description">
+            <p>
+It is written in MM:MM:MM:SS:SS:SS format.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::signalStrength">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">signalStrength</span></span><div class="brief">
+ This connection's signal strength, as a normalized value between 0 (no signal detected) and 1 (the level is at its maximum value).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoCellularNetwork">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoCellularNetwork"></a><h3>2.18. SystemInfoCellularNetwork</h3>
+<div class="brief">
+ This property reflects the information of the Cellular network in this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoCellularNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString apn;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute unsigned short mcc;
+
+    readonly attribute unsigned short mnc;
+
+    readonly attribute unsigned short cellId;
+
+    readonly attribute unsigned short lac;
+
+    readonly attribute boolean isRoaming;
+
+    readonly attribute boolean isFlightMode;
+
+    readonly attribute DOMString imei raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoCellularNetwork::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">status</span></span><div class="brief">
+ Represents the status (ON or OFF) of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::apn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">apn</span></span><div class="brief">
+ Represents an Access Point Name of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::ipAddress">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipAddress</span></span><div class="brief">
+ Represents the IPv4 address of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::ipv6Address">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipv6Address</span></span><div class="brief">
+ Represents the IPv6 address of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::mcc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mcc</span></span><div class="brief">
+ Represents Mobile Country Code (MCC) of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::mnc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mnc</span></span><div class="brief">
+ Represents Mobile Network Code (MNC) of the cellular network. MNC is used in combination with MCC (also known as a "MCC / MNC tuple") to uniquely
+identify a mobile phone operator/carrier using the GSM, CDMA, iDEN, TETRA and UMTS public land mobile networks and some satellite mobile networks.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::cellId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">cellId</span></span><div class="brief">
+ Represents Cell Id.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::lac">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">lac</span></span><div class="brief">
+ Represents Location Area Code.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::isRoaming">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRoaming</span></span><div class="brief">
+ Whether the connection is set up while the device is roaming.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::isFlightMode">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isFlightMode</span></span><div class="brief">
+ Indicates whether the device is in flight mode.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::imei">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">imei</span></span><div class="brief">
+ Represents the International Mobile Equipment Identity (IMEI).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/systemmanager
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoSIM">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoSIM"></a><h3>2.19. SystemInfoSIM</h3>
+<div class="brief">
+ This property reflects the information of the SIM card information.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoSIM : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoSimState">SystemInfoSimState</a> state raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString operatorName raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msisdn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString iccid raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mcc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mnc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msin raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString spn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoSIM::state">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoSimState </span><span class="name">state</span></span><div class="brief">
+ Represents the SIM card state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::operatorName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">operatorName</span></span><div class="brief">
+ Represents the Operator Name String (ONS) of Common PCN Handset Specification (CPHS) in SIM card.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::msisdn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">msisdn</span></span><div class="brief">
+ Represents the SIM card subscriber number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/systemmanager
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::iccid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iccid</span></span><div class="brief">
+ Represents the Integrated Circuit Card ID.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::mcc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mcc</span></span><div class="brief">
+ Represents the Mobile Country Code (MCC) of SIM provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::mnc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mnc</span></span><div class="brief">
+ Represents the Mobile Network Code (MNC) of SIM provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::msin">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">msin</span></span><div class="brief">
+ Represents the Mobile Subscription Identification Number (MSIN) of SIM provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/systemmanager
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::spn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">spn</span></span><div class="brief">
+ Represents the Service Provider Name (SPN) of SIM card.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoPeripheral">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPeripheral"></a><h3>2.20. SystemInfoPeripheral</h3>
+<div class="brief">
+ This property reflects the peripheral information of the current device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoPeripheral : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute boolean isVideoOutputOn;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoPeripheral::isVideoOutputOn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isVideoOutputOn</span></span><div class="brief">
+ Represents the video out status.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoMemory">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoMemory"></a><h3>2.21. SystemInfoMemory</h3>
+<div class="brief">
+ This property represents information about the memory state on the device system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoMemory : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoLowMemoryStatus">SystemInfoLowMemoryStatus</a> status;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoMemory::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoLowMemoryStatus </span><span class="name">status</span></span><div class="brief">
+ Represents the low memory state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device which supports Wi-Fi, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.wifi</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device which supports telephony feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module SystemInfo {
+
+  enum SystemInfoPropertyId { "BATTERY", "CPU", "STORAGE", "DISPLAY", "DEVICE_ORIENTATION", "BUILD", "LOCALE", "NETWORK", "WIFI_NETWORK", "CELLULAR_NETWORK", "SIM", "PERIPHERAL", "MEMORY" };
+
+  enum SystemInfoNetworkType { "NONE", "2G", "2.5G", "3G", "4G", "WIFI", "ETHERNET", "UNKNOWN" };
+
+  enum SystemInfoDeviceOrientationStatus { "PORTRAIT_PRIMARY", "PORTRAIT_SECONDARY", "LANDSCAPE_PRIMARY", "LANDSCAPE_SECONDARY" };
+
+  enum SystemInfoSimState { "ABSENT", "INITIALIZING", "READY", "PIN_REQUIRED", "PUK_REQUIRED", "NETWORK_LOCKED", "SIM_LOCKED", "UNKNOWN" };
+
+  enum SystemInfoProfile { "MOBILE_FULL", "MOBILE_WEB", "MOBILE", "WEARABLE" };
+
+  enum SystemInfoLowMemoryStatus { "NORMAL", "WARNING" };
+
+  [NoInterfaceObject] interface SystemInfoObject {
+    readonly attribute <a href="#SystemInfo">SystemInfo</a> systeminfo;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemInfoObject">SystemInfoObject</a>;
+
+  [NoInterfaceObject] interface SystemInfo {
+    long long getTotalMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long long getAvailableMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> getCapabilities() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    any getCapability(DOMString key) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long getCount(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValue(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValueArray(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueArrayChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePropertyValueChangeListener(unsigned long listenerId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface SystemInfoDeviceCapability {
+    readonly attribute boolean bluetooth;
+
+    readonly attribute boolean nfc;
+
+    readonly attribute boolean nfcReservedPush ;
+
+    readonly attribute unsigned short multiTouchCount;
+
+    readonly attribute boolean inputKeyboard;
+
+    readonly attribute boolean inputKeyboardLayout;
+
+    readonly attribute boolean wifi;
+
+    readonly attribute boolean wifiDirect;
+
+    readonly attribute boolean opengles;
+
+    readonly attribute DOMString openglestextureFormat;
+
+    readonly attribute boolean openglesVersion1_1;
+
+    readonly attribute boolean openglesVersion2_0;
+
+    readonly attribute boolean fmRadio;
+
+    readonly attribute DOMString platformVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString webApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString nativeApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString platformName;
+
+    readonly attribute boolean camera;
+
+    readonly attribute boolean cameraFront;
+
+    readonly attribute boolean cameraFrontFlash;
+
+    readonly attribute boolean cameraBack;
+
+    readonly attribute boolean cameraBackFlash;
+
+    readonly attribute boolean location;
+
+    readonly attribute boolean locationGps;
+
+    readonly attribute boolean locationWps;
+
+    readonly attribute boolean microphone;
+
+    readonly attribute boolean usbHost;
+
+    readonly attribute boolean usbAccessory;
+
+    readonly attribute boolean screenOutputRca;
+
+    readonly attribute boolean screenOutputHdmi;
+
+    readonly attribute DOMString platformCoreCpuArch;
+
+    readonly attribute DOMString platformCoreFpuArch;
+
+    readonly attribute boolean sipVoip;
+
+    readonly attribute DOMString duid;
+
+    readonly attribute boolean speechRecognition;
+
+    readonly attribute boolean speechSynthesis;
+
+    readonly attribute boolean accelerometer;
+
+    readonly attribute boolean accelerometerWakeup;
+
+    readonly attribute boolean barometer;
+
+    readonly attribute boolean barometerWakeup;
+
+    readonly attribute boolean gyroscope;
+
+    readonly attribute boolean gyroscopeWakeup;
+
+    readonly attribute boolean magnetometer;
+
+    readonly attribute boolean magnetometerWakeup;
+
+    readonly attribute boolean photometer;
+
+    readonly attribute boolean photometerWakeup;
+
+    readonly attribute boolean proximity;
+
+    readonly attribute boolean proximityWakeup;
+
+    readonly attribute boolean tiltmeter;
+
+    readonly attribute boolean tiltmeterWakeup;
+
+    readonly attribute boolean dataEncryption;
+
+    readonly attribute boolean graphicsAcceleration;
+
+    readonly attribute boolean push;
+
+    readonly attribute boolean telephony;
+
+    readonly attribute boolean telephonyMms;
+
+    readonly attribute boolean telephonySms;
+
+    readonly attribute boolean screenSizeNormal;
+
+    readonly attribute boolean screenSize480_800;
+
+    readonly attribute boolean screenSize720_1280;
+
+    readonly attribute boolean autoRotation;
+
+    readonly attribute boolean shellAppWidget;
+
+    readonly attribute boolean visionImageRecognition;
+
+    readonly attribute boolean visionQrcodeGeneration;
+
+    readonly attribute boolean visionQrcodeRecognition;
+
+    readonly attribute boolean visionFaceRecognition;
+
+    readonly attribute boolean secureElement;
+
+    readonly attribute boolean nativeOspCompatible;
+
+    readonly attribute <a href="#SystemInfoProfile">SystemInfoProfile</a> profile;
+  };
+
+  dictionary SystemInfoOptions {
+    unsigned long timeout;
+
+    double highThreshold;
+
+    double lowThreshold;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a> property);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertyArraySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties);
+  };
+
+  [NoInterfaceObject] interface SystemInfoProperty {
+  };
+
+  [NoInterfaceObject] interface SystemInfoBattery : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double level;
+
+    readonly attribute boolean isCharging;
+  };
+
+  [NoInterfaceObject] interface SystemInfoCpu : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double load;
+  };
+
+  [NoInterfaceObject] interface SystemInfoStorage : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a>[] units;
+  };
+
+  [NoInterfaceObject] interface SystemInfoStorageUnit : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString type;
+
+    readonly attribute unsigned long long capacity;
+
+    readonly attribute unsigned long long availableCapacity;
+
+    readonly attribute boolean isRemovable;
+
+    readonly attribute boolean isRemoveable;
+  };
+
+  [NoInterfaceObject] interface SystemInfoDisplay : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute unsigned long resolutionWidth;
+
+    readonly attribute unsigned long resolutionHeight;
+
+    readonly attribute unsigned long dotsPerInchWidth;
+
+    readonly attribute unsigned long dotsPerInchHeight;
+
+    readonly attribute double physicalWidth;
+
+    readonly attribute double physicalHeight;
+
+    readonly attribute double brightness;
+  };
+
+  [NoInterfaceObject] interface SystemInfoDeviceOrientation : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoDeviceOrientationStatus">SystemInfoDeviceOrientationStatus</a> status;
+
+    readonly attribute boolean isAutoRotation;
+  };
+
+  [NoInterfaceObject] interface SystemInfoBuild : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString model;
+
+    readonly attribute DOMString manufacturer;
+
+    readonly attribute DOMString buildVersion;
+  };
+
+  [NoInterfaceObject] interface SystemInfoLocale : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString language;
+
+    readonly attribute DOMString country;
+  };
+
+  [NoInterfaceObject] interface SystemInfoNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoNetworkType">SystemInfoNetworkType</a> networkType;
+  };
+
+   [NoInterfaceObject] interface SystemInfoWifiNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString ssid;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute DOMString macAddress;
+
+    readonly attribute double signalStrength;
+  };
+
+  [NoInterfaceObject] interface SystemInfoCellularNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString apn;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute unsigned short mcc;
+
+    readonly attribute unsigned short mnc;
+
+    readonly attribute unsigned short cellId;
+
+    readonly attribute unsigned short lac;
+
+    readonly attribute boolean isRoaming;
+
+    readonly attribute boolean isFlightMode;
+
+    readonly attribute DOMString imei raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface SystemInfoSIM : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoSimState">SystemInfoSimState</a> state raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString operatorName raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msisdn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString iccid raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mcc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mnc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msin raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString spn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface SystemInfoPeripheral : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute boolean isVideoOutputOn;
+  };
+
+  [NoInterfaceObject] interface SystemInfoMemory : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoLowMemoryStatus">SystemInfoLowMemoryStatus</a> status;
+
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html
new file mode 100644 (file)
index 0000000..1b96ba7
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html
@@ -0,0 +1,1756 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<script type="text/javascript" src="snippet.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link href="styles-systeminfo.css" rel="StyleSheet" type="text/css">
+<link href="tizen.css" rel="StyleSheet" type="text/css">
+<title>System Information</title>
+<style>
+  table { width: auto }
+  table td:nth-child(1) { min-width: 32em; }
+  table td:nth-child(2) { min-width: 4em; }
+  table td:nth-child(3) { width: 40em; }
+  table td:nth-child(4) { min-width: 2em; }
+</style>
+</head>
+<body onload="prettyPrint()">
+  <!--<div id="banner">
+Tizen</div>-->
+  <h1>Getting the Device Capabilities through System Information API</h1>
+  <p>The following keys are available to obtain the device capability information using  <a href="./systeminfo.html">SystemInfo API</a>.</p>
+  <ul>
+
+<li>Device Capability keys for Optional APIs:
+  <ul>
+  <li><a href="#account">Account API</a></li>
+  <li><a href="#archive">Archive API</a></li>
+  <li><a href="#badge">Badge API</a></li>
+  <li><a href="#network">Bluetooth API</a></li>
+  <li><a href="#bookmark">Bookmark API</a></li>
+  <li><a href="#calendar">Calendar API</a></li>
+  <li><a href="#network">CallHistory API</a></li>
+  <li><a href="#contact">Contact API</a></li>
+  <li><a href="#datacontrol">DataControl API</a></li>
+  <li><a href="#datasync">DataSynchronization API</a></li>
+  <li><a href="#download">Download API</a></li>
+  <li><a href="#exif">Exif API</a></li>
+  <li><a href="#fmradio">FM Radio API</a></li>
+  <li><a href="#ham">HumanActivityMonitor API</a></li>
+  <li><a href="#sensor">HumanActivityMonitor API - PEDOMETER, WRIST_UP, HRM</a></li>
+  <li><a href="#location">HumanActivityMonitor API - GPS</a></li>
+  <li><a href="#mediakey">MediaKey API</a></li>
+  <li><a href="#messaging">Messaging Email API</a></li>
+  <li><a href="#messaging">Messaging SMS API</a></li>
+  <li><a href="#messaging">Messaging MMS API</a></li>
+  <li><a href="#network">NFC API</a></li>
+  <li><a href="#network">NFC Card Emulation API</a></li>
+  <li><a href="#network">NetworkBearerSelection API</a></li>
+  <li><a href="#notification">Notification API</a></li>
+  <li><a href="#battery">Power API</a></li>
+  <li><a href="#network">Push API</a></li>
+  <li><a href="#network">Secure Element API</a></li>
+  <li><a href="#sensor">Sensor API</a></li>
+  <li><a href="#systemsetting">SystemSetting API</a></li>
+  <li><a href="#websetting">WebSetting API</a></li>
+  </ul>
+</li>
+
+<li>Device Capability keys:
+  <ul>
+  <li><a href="#battery">Battery</a></li>
+  <li><a href="#camera">Camera</a></li>
+  <li><a href="#database">Database</a></li>
+  <li><a href="#graphics">Graphics</a></li>
+  <li><a href="#input">Input</a></li>
+  <li><a href="#led">Led</a></li>
+  <li><a href="#location">Location</a></li>
+  <li><a href="#mediatranscoder">Multimedia transcoder</a></li>
+  <li><a href="#microphone">Microphone</a></li>
+  <li><a href="#multipoint">Multi-point touch</a></li>
+  <li><a href="#network">Network</a></li>
+  <li><a href="#opengl">OpenGL&reg; ES</a></li>
+  <li><a href="#platformfeat">Platform</a></li>
+  <li><a href="#profile">Profile</a></li>
+  <li><a href="#screen">Screen</a></li>
+  <li><a href="#shell">Shell (Dynamic Box)</a></li>
+  <li><a href="#sip">Sip</a></li>
+  <li><a href="#speech">Speech</a></li>
+  <li><a href="#usb">USB</a></li>
+  <li><a href="#webservice">Web service</a></li>
+  </ul>
+</li>
+
+<li>System keys:
+  <ul>
+  <li><a href="#buildinfo">Build Information</a></li>
+  <li><a href="#tizenid">Tizen ID</a></li>
+  <li><a href="#modelname">Model name</a></li>
+  <li><a href="#platformsys">Platform name</a></li>
+  </ul>
+</li>
+
+<p>The following table lists the keys to check if Account API is supported on a Tizen device.</p>
+ <table id="account" border="1" style="width:95%">
+<caption>
+     Table: Account API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/account</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="account.html">Account API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the keys to check if Archive API is supported on a Tizen device.</p>
+ <table id="archive" border="1" style="width:95%">
+<caption>
+     Table: Archive API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/archive</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="archive.html">Archive API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Badge API is supported on a Tizen device.</p>
+ <table id="badge" border="1" style="width:95%">
+<caption>
+     Table: Badge API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/badge</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="badge.html">Badge API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Bookmark API is supported on a Tizen device.</p>
+ <table id="bookmark" border="1" style="width:95%">
+<caption>
+     Table: Bookmark API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/bookmark</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="bookmark.html">Bookmark API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Calendar API is supported on a Tizen device.</p>
+ <table id="calendar" border="1" style="width:95%">
+<caption>
+     Table: Calendar API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/calendar</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="calendar.html">Calendar API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the keys to check if Contact API is supported on a Tizen device.</p>
+ <table id="contact" border="1" style="width:95%">
+<caption>
+     Table: Contact API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/contact</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="contact.html">Contact API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the keys to check if DataControl API is supported on a Tizen device.</p>
+ <table id="datacontrol" border="1" style="width:95%">
+<caption>
+     Table: DataControl API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datacontrol</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="datacontrol.html">DataControl API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if DataSync API is supported on a Tizen device.</p>
+ <table id="datasync" border="1" style="width:95%">
+<caption>
+     Table: DataSynchronization API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="datasync.html">DataSynchronization API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Download API is supported on a Tizen device.</p>
+ <table id="download" border="1" style="width:95%">
+<caption>
+     Table: Download API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="download.html">Download API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require telephony feature. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-weight: bold; font-style: italic;">"CELLULAR"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="download.html#DownloadNetworkType">DownloadNetworkType</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Wi-Fi. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-weight: bold; font-style: italic;">"WIFI"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="download.html#DownloadNetworkType">DownloadNetworkType</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Exif API is supported on a Tizen device.</p>
+ <table id="exif" border="1" style="width:95%">
+<caption>
+     Table: Exif API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/exif</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="exif.html">Exif API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the keys to check if SystemSetting API is supported on a Tizen device.</p>
+ <table id="systemsetting" border="1" style="width:95%">
+<caption>
+     Table: SystemSetting API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html">SystemSetting API</a></span>.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.home_screen</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get the picture on home screen. That means that <span style="font-weight: bold; font-style: italic;">"HOME_SCREEN"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.lock_screen</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get lock screen wallpaper. That means that <span style="font-weight: bold; font-style: italic;">"LOCK_SCREEN"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.incoming_call</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get a ringtone for all incoming calls. That means that <span style="font-weight: bold; font-style: italic;">"INCOMING_CALL"</span> type in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.notification_email</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get a ringtone for all email notifications. That means that <span style="font-weight: bold; font-style: italic;">"NOTIFICATION_EMAIL"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if WebSetting API is supported on a Tizen device.</p>
+ <table id="websetting" border="1" style="width:95%">
+<caption>
+     Table: WebSetting API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/websetting</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="websetting.html">WebSetting API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if MediaKey API is supported on a Tizen device.</p>
+ <table id="mediakey" border="1" style="width:95%">
+<caption>
+     Table: MediaKey API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="mediakey.html">MediaKey API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Messaging API is supported on a Tizen device.</p>
+ <table id="messaging" border="1" style="width:95%">
+<caption>
+     Table: Messaging API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/email</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Messaging Email API.</td>
+     <td>2.3</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Messaging SMS API.</td>
+     <td>2.2.1</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Messaging MMS API.</td>
+     <td>2.2.1</td>
+    </tr>
+
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Notification API is supported on a Tizen device.</p>
+ <table id="notification" border="1" style="width:95%">
+<caption>
+     Table: Notification API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/notification</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="notification.html">Notification API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the keys to check if a device has a battery.</p>
+ <table id="battery" border="1" style="width:95%">
+<caption>
+     Table: battery capability key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/battery</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device has a battery. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/?cp=2_6_3_1_2">W3C Battery Status API</a></span>, <span style="font-family: Courier New,Courier,monospace"><a href="systeminfo.html#SystemInfoBattery">BATTERY</a></span> property in SystemInfo API, and <span style="font-family: Courier New,Courier,monospace"><a href="power.html">Power API</a></span> must be supported.</td>
+    <td>2.3</td>
+</tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the camera feature keys.</p>
+<table id="camera" border="1" style="width:95%">
+<caption>
+     Table: Camera feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides any kind of a camera. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <a href="../../../w3c_api/w3c_api_m.html#getusermedia">W3C getUserMedia</a> and <a href="../../../w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> APIs are supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a back-facing camera.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span> key, if the device provides a back-facing camera with a flash.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a front-facing camera.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span> key, if the device provides a front-facing camera with a flash.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the database feature keys.</p>
+  <table id="database" border="1" style="width:95%">
+<caption>
+     Table: Database feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports database encryption.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the FM radio feature keys.</p>
+ <table id="fmradio" border="1" style="width:95%">
+<caption>
+     Table: FM radio feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports an FM radio. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="./fmradio.html">FM Radio API</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the Human Activity Monitor feature keys.</p>
+ <table id="ham" border="1" style="width:95%">
+<caption>
+     Table: Human Activity Monitor keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any of the Human Activity Monitor sensors (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor, http://tizen.org/feature/sensor.pedometer, http://tizen.org/feature/sensor.wrist_up, http://tizen.org/feature/location.batch</span>). If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html">Human Activity Monitor API</a></span> is supported.</td>
+     <td>2.3.0</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the graphics feature keys.</p>
+   <table id="graphics" border="1" style="width:95%">
+<caption>
+     Table: Graphics feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports graphics hardware acceleration.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the led feature key.</p>
+   <table id="led" border="1" style="width:95%">
+<caption>
+     Table: led feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports led.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the input feature keys.</p>
+  <table id="input" border="1" style="width:95%">
+<caption>
+     Table: Input feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device  provides a built-in keyboard supporting any keyboard layout.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the keyboard layout (such as <span style="font-family: Courier New,Courier,monospace">qwerty</span>) supported by the built-in keyboard for this key and returns <span style="font-family: Courier New,Courier,monospace">true</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.
+        <p>If the device does not provide a built-in keyboard, the platform returns an empty string for this key and returns <span style="font-family: Courier New,Courier,monospace">false</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the location feature keys.</p>
+<table id="location" border="1" style="width:95%">
+<caption>
+     Table: Location feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports location positioning.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">
+         http://tizen.org/feature/location</span> key, if the device supports GPS batch feature.
+         If it is <span style="font-family: Courier New,Courier,monospace">true</span>,
+         <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - GPS</a> API is supported.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>,
+         if the device supports the Global Positioning System(GPS). If it is <span style="font-family: Courier New,Courier,monospace">true</span>,
+         <a href="../../../w3c_api/w3c_api_m.html#geo">W3C GeoLocation</a> API is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports  the Wi-Fi-based Positioning System (WPS).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the multimedia transcoder feature key.</p>
+   <table id="mediatranscoder" border="1" style="width:95%">
+<caption>
+     Table: multimedia transcoder feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports multimedia transcoder.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the microphone feature keys.</p>
+<table id="microphone" border="1" style="width:95%">
+<caption>
+     Table: Microphone feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a microphone.
+     If it is <span style="font-family: Courier New,Courier,monospace">true</span>,
+     <a href="../../../w3c_api/w3c_api_m.html#getusermedia">W3C getUserMedia</a> and <a href="../../../w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> APIs are supported.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the multi-point touch feature keys.</p>
+  <table id="multipoint" border="1" style="width:95%">
+<caption>
+     Table: Multi-point touch feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports pinch zoom gestures.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></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>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the network feature keys.</p>
+  <table id="network" border="1" style="width:95%">
+<caption>
+     Table: Network feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/capability/network.bluetooth.always_on</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device must always enable Bluetooth. It means that an application cannot change the Bluetooth's state (visibility, connectivity, device name).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="./bluetooth.html">Bluetooth API</a></span> which requires Bluetooth.</td>
+    <td>2.2.1</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Handsfree Profile (HFP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Advanced Audio Distribute Profile (A2DP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Health Device Profile (HDP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Human Input Device (HID).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Low Energy related methods in Bluetooth API.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Object Push Profile (OPP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="./nfc.html">NFC API</a></span> which requires Near Field Communication (NFC).</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device is recognized by the NFC card readers.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the http://tizen.org/feature/network.nfc key, if the device supports the NFC reserved push feature.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="./push.html">Push API</a></span> which requires the IP push service provided by
+the Tizen reference implementation.</td>
+    <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports secure elements. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="./se.html">Secure Element API</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports  the telephony related APIs (<span style="font-family: Courier New,Courier,monospace"><a href="./callhistory.html">CallHistory</a></span>, <span style="font-family: Courier New,Courier,monospace"><a href="messaging.html#MessageServiceTag">Messaging SMS</a></span>, <span style="font-family: Courier New,Courier,monospace"><a href="./networkbearerselection.html">NetworkBearerSelection</a></span> APIs).</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports MMS. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="messaging.html#MessageServiceTag">Messaging MMS</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Wi-Fi.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct&trade;.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the OpenGL&reg; ES feature keys.</p>
+<table id="opengl" border="1" style="width:95%">
+<caption>
+     Table: OpenGL&reg; ES feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any OpenGL&reg; ES version and any texture format.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The supported texture formats for the OpenGL&reg; ES. (e.g. "3dc/atc/etc/ptc").<br>
+         The platform returns an empty string for this key if OpenGL&reg; ES or compressed texture formats are not supported.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the 3DC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ATC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ETC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PTC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PVRTC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the UTC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL&reg; ES version 1.1.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL&reg; ES version 2.0.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the platform feature keys.</p>
+  <table id="platformfeat" border="1" style="width:95%">
+<caption>
+     Table: Platform feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the Tizen Core API in the [Major].[Minor] format. For example, "1.0" represents a web api version where the major version is 1 and the minor version is 0.
+     If a device doesn't provide Tizen Core API, it returns an empty string("").</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the CPU architecture (e.g. "armv7", "x86") of a device. </td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv6</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv6 CPU architecture. </td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv7 CPU architecture. </td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the x86 CPU architecture. </td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.frequency</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the frequency at which a core CPU is running. (unit: MHz)</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the FPU architecture (e.g. "vfpv3", "ssse3" of a device.) If there is no FPU on a device, it returns an empty string("").</td>
+     <td>2.3</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE2 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE3 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSSE3 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv2</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV2 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV3 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the Native API in the [Major].[Minor] format. For example, 1.0 represents a native api version where the major version is 1 and the minor version is 0.
+     If a device doesn't provide Tizen Native API, it returns an empty string("").</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.osp_compatible</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the bada compatibility mode.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the platform in the [Major].[Minor].[Patch Version] format.
+     For example, 1.0.0 represents a platform version where the major version is 1 and the minor and build versions are 0.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.web.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the Web API in the [Major].[Minor] format. For example, 1.0 represents a web api version where the major version is 1 and the minor version is 0.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version.name</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform return the platform version name. (e.g. Tizen 2.0: magnolia, Tizen 2.1: Nectarine)</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the profile feature keys.</p>
+<table id="profile" border="1" style="width:95%">
+<caption>
+     Table: Profile feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/profile</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoProfile</span></td>
+     <td>The platform returns a compliant device profile (such as <span style="font-family: Courier New,Courier,monospace">"MOBILE", "WEARABLE"</span>) for this key.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the screen feature keys.</p>
+<table id="screen" border="1" style="width:95%">
+<caption>
+     Table: Screen feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device has a display screen.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports screen auto-rotation.</td>
+    <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.bpp</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></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>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.large</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size for the coordinate system.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.normal</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the normal screen size for the coordinate system.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.dpi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the number of dots per inch supported by the device for this key.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.height</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.hdmi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports HDMI output.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.rca</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports RCA output.</td>
+     <td>2.2.1</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> if the device supports any of screen sizes and resolutions. (If the device has a display screen, it returns <span style="font-family: Courier New,Courier,monospace">true</span>.)</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.large</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> if the device supports the large screen size.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> the device supports the normal screen size.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 240 x 400 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 320 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 480 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 360 x 480 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 480 x 800 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 540 x 960 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 600 x 1024 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 720 x 1280 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 1080 x 1920 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+</tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.width</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the width of the screen in pixels supported by the device for this key.</td>
+     <td>2.2.1</td>
+</tr>
+</tbody>
+</table>
+<p>The following table lists the sensor feature keys.</p>
+<table id="sensor" border="1" style="width:95%">
+<caption>
+     Table: Sensor feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+</tr>
+<tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the acceleration sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span> key, if the device supports the wake-up operation by the acceleration sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the activity recognition.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the barometer (Pressure) sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Pressure Sensor API</a></span> is supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span> key, if the device supports the wake-up operation by the barometer sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gesture recognition.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gravity sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gyro sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span> key, if the device supports the wake-up operation by the gyro sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - HRM</a></span>.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the humidity sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the linear acceleration sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the magnetic sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Magnetic Sensor API</a></span> and <a href="../../../w3c_api/w3c_api_m.html#sceenori">W3C Screen Orientation</a> are supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span> key, if the device supports the wake-up operation by the magnetic sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - PEDOMETER</a></span>.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the photometer sensor.  If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Light Sensor API</a></span> is supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span> key, if the device supports the wake-up operation by the photo sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the proximity sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Proximity Sensor API</a></span> is supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span> key, if the device supports the wake-up operation by the proximity sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotation vector sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the temperature sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the tilt sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span> key, if the device supports the wake-up operation by the tilt sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key if the device supports ultraviolet sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">UV Sensor API</a></span> is supported.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - WRIST_UP</a></span>.</td>
+    <td>2.3</td>
+</tr>
+
+
+</tbody>
+</table>
+<p>The following table lists the shell(Dynamic Box) feature keys.</p>
+<table id="shell" border="1" style="width:95%">
+<caption>
+     Table: Shell(Dynamic Box) feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the AppWidget (Dynamic Box).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the sip feature keys.</p>
+  <table id="sip" border="1" style="width:95%">
+<caption>
+     Table: Sip feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Voice over Internet Protocol (VoIP).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the speech feature keys.</p>
+   <table id="speech" border="1" style="width:95%">
+<caption>
+     Table: Speech feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech recognition (STT).</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech synthesis (TTS).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the USB feature keys.</p>
+     <table id="usb" border="1" style="width:95%">
+<caption>
+     Table: USB feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB client or accessory mode.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB host mode.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the web service model feature keys.</p>
+     <table id="webservice" border="1" style="width:95%">
+<caption>
+     Table: Web Service feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.service</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the web service model.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the vision feature keys.</p>
+       <table id="vision" border="1" style="width:95%">
+<caption>
+     Table: Vision feature keys
+   </caption>
+<tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports face recognition.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports image recognition.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code generation.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code recognition.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the build information key.</p>
+  <table id="buildinfo" border="1" style="width:95%">
+<caption>
+     Table: build information system key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.date</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the build date.(the format : YYYY.MM.DD)</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.string</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the build string including build date and time.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.time</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the build time. (the format : HH.MM.SS)</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/manufacturer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the device manufacturer's name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the Tizen ID system key.</p>
+  <table id="tizenid" border="1" style="width:95%">
+<caption>
+     Table: Tizen ID system keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/tizenid</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the Tizen ID. It is a randomly generated value based on the model name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the model name key.</p>
+  <table id="modelname" border="1" style="width:95%">
+<caption>
+     Table: model name key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/model_name</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the model name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the platform system keys.</p>
+  <table id="platformsys" border="1" style="width:95%">
+<caption>
+     Table: platform system keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.communication_processor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the device communication processor name.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.name</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the platform name. It must be <q>Tizen</q></td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.processor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the device processor name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<div id="footer">
+   <hr size="1">
+<font size="1">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>.</font>
+  </div>
+  <!--start-->
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->
+</body>
+</html>
+
+
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html
new file mode 100644 (file)
index 0000000..5aa4817
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>SystemSetting API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::SystemSetting">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>SystemSetting API</h1></div>
+<div class="brief">
+ The SystemSetting API provides interfaces and methods providing web applications with access to various values of the system.
+        </div>
+<div class="description">
+        <p>
+This API provides an interface and methods through features such as:
+        </p>
+        <ul>
+          <li>
+ HOME_SCREEN          </li>
+          <li>
+ LOCK_SCREEN          </li>
+          <li>
+ INCOMING_CALL          </li>
+          <li>
+ NOTIFICATION_EMAIL          </li>
+        </ul>
+        <p>
+SystemSetting API may not be provided in some devices.
+The API capability can be checked by tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting"</em>).
+        </p>
+        <p>
+In addition, not all the above properties may be available even though a device supports SystemSetting API. For instance, a watch device may provide the home screen image but may not support the lock screen wallpaper. <br><br>To check if <var>SystemSettingType</var>(e.g. HOME_SCREEN, LOCK_SCREEN and so on) is supported or not, use SystemInformation API.
+        </p>
+        <ul>
+          <li>
+ HOME_SCREEN        - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.home_screen"</em>)          </li>
+          <li>
+ LOCK_SCREEN        - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.lock_screen"</em>)          </li>
+          <li>
+ INCOMING_CALL      - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.incoming_call"</em>)          </li>
+          <li>
+ NOTIFICATION_EMAIL - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.notification_email"</em>)          </li>
+        </ul>
+        <p>
+For more information on the SystemSetting features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/system_setting_w.htm">System Setting Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#SystemSettingType">SystemSettingType</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SystemSettingObject">SystemSettingObject</a>
+</li>
+<li>2.2. <a href="#SystemSettingManager">SystemSettingManager</a>
+</li>
+<li>2.3. <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SystemSettingObject">SystemSettingObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemSettingManager">SystemSettingManager</a></td>
+<td>void <a href="#SystemSettingManager::setProperty">setProperty</a> (<a href="#SystemSettingType">SystemSettingType</a> type, DOMString value, <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#SystemSettingManager::getProperty">getProperty</a> (<a href="#SystemSettingType">SystemSettingType</a> type, <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a></td>
+<td>void <a href="#SystemSettingSuccessCallback::onsuccess">onsuccess</a> (DOMString value)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SystemSettingType">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingType"></a><h3>1.1. SystemSettingType</h3>
+<div class="brief">
+ Specifies the type of supported system setting.
+          </div>
+<pre class="webidl prettyprint">  enum SystemSettingType {"HOME_SCREEN", "LOCK_SCREEN", "INCOMING_CALL", "NOTIFICATION_EMAIL"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported in this release:
+          </p>
+          <ul>
+            <li>
+HOME_SCREEN - For homescreen background image.            </li>
+            <li>
+LOCK_SCREEN - For lockscreen background image.            </li>
+            <li>
+INCOMING_CALL - For incoming call ringtone.            </li>
+            <li>
+NOTIFICATION_EMAIL - For email notification alert tone.            </li>
+          </ul>
+          <p>
+Defines supporting setting types.
+The HOME_SCREEN and LOCK_SCREEN are supported for images files.
+The INCOMING_CALL and NOTIFICATION_EMAIL are supported for sound files.
+          </p>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SystemSettingObject">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingObject"></a><h3>2.1. SystemSettingObject</h3>
+<div class="brief">
+ The SystemSettingObject interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemSettingObject {
+    readonly attribute <a href="#SystemSettingManager">SystemSettingManager</a> systemsetting;
+  };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemSettingObject">SystemSettingObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.systemsetting </em>object that allows accessing the functionality of the SystemSetting API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SystemSettingManager">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingManager"></a><h3>2.2. SystemSettingManager</h3>
+<div class="brief">
+ The SystemSettingManager interface is the top-level interface for the SystemSetting API that provides
+access to the module functionalities.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemSettingManager {
+
+     void setProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              DOMString value,
+              <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+     void getProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemSettingManager::setProperty">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingManager::setProperty"></a><code><b><span class="methodName">setProperty</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the property of a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setProperty(<a href="#SystemSettingType">SystemSettingType</a> type, DOMString value, <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method allows the user to set the image or sound file specified as an input parameter as the wallpaper or ringtone of a device.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value              </li>
+              <li>
+NotSupportedError - If the given <var>type</var> is not supported on the device               </li>
+              <li>
+UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/setting
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+            Setting type to set
+                </li>
+          <li class="param">
+<span class="name">value</span>: 
+           Location path of a wallpaper or ringtone file
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the setting value is successfully set
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the setting value cannot be set
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Checks whether SystemSetting API is supported.
+ var systemsetting_api_supported = tizen.systeminfo.getCapability("http://tizen.org/feature/systemsetting");
+
+ // Checks whether the picture on home screen can be changed or retrieved through SystemSetting API.
+ var home_screen_system_setting = tizen.systeminfo.getCapability("http://tizen.org/feature/systemsetting.home_screen");
+
+ // Defines the success callback.
+ function successCallback() {
+     console.log("Succeeded in changing the property");
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Failed to change the property. Error : " + error.message);
+ }
+
+ if (systemsetting_api_supported === true) {
+     // tizen.systemsetting will be available.
+     if (home_screen_system_setting === true) {
+         // Sets the home screen image.
+         // The newHomeScreenImagePath variable should hold the path of the image to be set as home screen background
+         tizen.systemsetting.setProperty("HOME_SCREEN", newHomeScreenImagePath, successCallback, errorCallback);
+     } else {
+         // if tizen.systemsetting.setProperty("HOME_SCREEN", ..) is invoked, NotSupportedError would be returned through ErrorCallback.
+     }
+ } else {
+     // tizen.systemsetting will be 'undefined'.
+     console.log("SystemSetting API is not supported on the device.");
+ }
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemSettingManager::getProperty">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingManager::getProperty"></a><code><b><span class="methodName">getProperty</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the value of the property of a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getProperty(<a href="#SystemSettingType">SystemSettingType</a> type, <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method allows the user to get the value of the specified system property as wallpaper or ringtone of a device.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+TypeMismatchError - If any input parameter is not compatible with the expected type for that parameter               </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value               </li>
+              <li>
+NotSupportedError - If the given <var>type</var> is not supported on the device               </li>
+              <li>
+UnknownError - If any other error occurs               </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+            Type of the property to get
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the setting value is successfully retrieved
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the setting value cannot be retrieved
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback
+ function getPropertySuccessCallback(value) {
+     // the case : tizen.systeminfo.getCapability("http://tizen.org/feature/systemsetting.home_screen") returns 'true'.
+     console.log("Succeeded in retrieving the property. The value is " + value);
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+     console.log("Failed to get the property. Error : " + error.message);
+     // If the device does not support to get the image on home screen, NotSupportedError would be thrown.
+ }
+
+ tizen.systemsetting.getProperty("HOME_SCREEN", getPropertySuccessCallback, errorCallback);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemSettingSuccessCallback">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingSuccessCallback"></a><h3>2.3. SystemSettingSuccessCallback</h3>
+<div class="brief">
+ The SystemSettingSuccessCallback interface defines the success callback for getProperty().
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SystemSettingSuccessCallback {
+    void onsuccess(DOMString value);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemSettingSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the value of the system setting property is successfully retrieved.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString value);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">value</span>: 
+ The value of the requested property.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module SystemSetting {
+
+  [NoInterfaceObject] interface SystemSettingObject {
+    readonly attribute <a href="#SystemSettingManager">SystemSettingManager</a> systemsetting;
+  };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemSettingObject">SystemSettingObject</a>;
+
+  enum SystemSettingType {"HOME_SCREEN", "LOCK_SCREEN", "INCOMING_CALL", "NOTIFICATION_EMAIL"};
+
+  [NoInterfaceObject] interface SystemSettingManager {
+
+     void setProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              DOMString value,
+              <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+     void getProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SystemSettingSuccessCallback {
+    void onsuccess(DOMString value);
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/time.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/time.html
new file mode 100644 (file)
index 0000000..bd6e486
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/time.html
@@ -0,0 +1,2602 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Time API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Time">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Time API</h1></div>
+<div class="brief">
+  The Time API provides information regarding date/time and time zones.
+        </div>
+<div class="description">
+        <p>
+The JavaScript Date object does not have full timezone support.
+Date objects allow only simple representations to denote a particular location's
+offset from Universal Coordinated Time (UTC). This is typically provided as a +/-
+offset from UTC-0 (also known as Greenwich Mean Time, or GMT) for example, +05:30 denotes
+that a location is 5 hours and 30 minutes ahead of UTC +00:00.
+The issue with this method is not getting the correct
+local time for a given date. The existing methods are sufficient for this purpose.
+The issue is correctly converting to and from local time and UTC for all points in
+time - in any of the past, present, and future - based on an initial time provided.
+This is important for defining relative dates, where a time in a given location may
+observe different UTC offsets, according to any Daylight Savings Rules (DST) in effect
+or any other changes that may occur to a location's time zone over time.
+Without the communication of the explicit time zone rules governing a given date and
+time, the ability to effectively calculate the offset of the local time to UTC or to
+any other time zone at any point in the past or future is lost.
+        </p>
+        <p>
+This API can be used to get TZDate objects with full time zone support, convert them
+between timezones, retrieve available timezones.
+        </p>
+        <p>
+For more information on the Time features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/time_w.htm">Time Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#TimeDurationUnit">TimeDurationUnit</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#TimeManagerObject">TimeManagerObject</a>
+</li>
+<li>2.2. <a href="#TimeUtil">TimeUtil</a>
+</li>
+<li>2.3. <a href="#TZDate">TZDate</a>
+</li>
+<li>2.4. <a href="#TimeDuration">TimeDuration</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#TimeManagerObject">TimeManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#TimeUtil">TimeUtil</a></td>
+<td>
+<a href="#TZDate">TZDate</a> <a href="#TimeUtil::getCurrentDateTime">getCurrentDateTime</a> ()<br>
+    DOMString <a href="#TimeUtil::getLocalTimezone">getLocalTimezone</a> ()<br>
+    DOMString[] <a href="#TimeUtil::getAvailableTimezones">getAvailableTimezones</a> ()<br>
+    DOMString <a href="#TimeUtil::getDateFormat">getDateFormat</a> (optional boolean? shortformat)<br>
+    DOMString <a href="#TimeUtil::getTimeFormat">getTimeFormat</a> ()<br>
+    boolean <a href="#TimeUtil::isLeapYear">isLeapYear</a> (long year)<br>
+    void <a href="#TimeUtil::setDateTimeChangeListener">setDateTimeChangeListener</a> (<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback)<br>
+    void <a href="#TimeUtil::unsetDateTimeChangeListener">unsetDateTimeChangeListener</a> ()<br>
+    void <a href="#TimeUtil::setTimezoneChangeListener">setTimezoneChangeListener</a> (<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback)<br>
+    void <a href="#TimeUtil::unsetTimezoneChangeListener">unsetTimezoneChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#TZDate">TZDate</a></td>
+<td>long <a href="#TZDate::getDate">getDate</a> ()<br>
+    void <a href="#TZDate::setDate">setDate</a> (long date)<br>
+    long <a href="#TZDate::getDay">getDay</a> ()<br>
+    long <a href="#TZDate::getFullYear">getFullYear</a> ()<br>
+    void <a href="#TZDate::setFullYear">setFullYear</a> (long year)<br>
+    long <a href="#TZDate::getHours">getHours</a> ()<br>
+    void <a href="#TZDate::setHours">setHours</a> (long hours)<br>
+    long <a href="#TZDate::getMilliseconds">getMilliseconds</a> ()<br>
+    void <a href="#TZDate::setMilliseconds">setMilliseconds</a> (long ms)<br>
+    long <a href="#TZDate::getMinutes">getMinutes</a> ()<br>
+    void <a href="#TZDate::setMinutes">setMinutes</a> (long minutes)<br>
+    long <a href="#TZDate::getMonth">getMonth</a> ()<br>
+    void <a href="#TZDate::setMonth">setMonth</a> (long month)<br>
+    long <a href="#TZDate::getSeconds">getSeconds</a> ()<br>
+    void <a href="#TZDate::setSeconds">setSeconds</a> (long seconds)<br>
+    long <a href="#TZDate::getUTCDate">getUTCDate</a> ()<br>
+    void <a href="#TZDate::setUTCDate">setUTCDate</a> (long date)<br>
+    long <a href="#TZDate::getUTCDay">getUTCDay</a> ()<br>
+    long <a href="#TZDate::getUTCFullYear">getUTCFullYear</a> ()<br>
+    void <a href="#TZDate::setUTCFullYear">setUTCFullYear</a> (long year)<br>
+    long <a href="#TZDate::getUTCHours">getUTCHours</a> ()<br>
+    void <a href="#TZDate::setUTCHours">setUTCHours</a> (long hours)<br>
+    long <a href="#TZDate::getUTCMilliseconds">getUTCMilliseconds</a> ()<br>
+    void <a href="#TZDate::setUTCMilliseconds">setUTCMilliseconds</a> (long ms)<br>
+    long <a href="#TZDate::getUTCMinutes">getUTCMinutes</a> ()<br>
+    void <a href="#TZDate::setUTCMinutes">setUTCMinutes</a> (long minutes)<br>
+    long <a href="#TZDate::getUTCMonth">getUTCMonth</a> ()<br>
+    void <a href="#TZDate::setUTCMonth">setUTCMonth</a> (long month)<br>
+    long <a href="#TZDate::getUTCSeconds">getUTCSeconds</a> ()<br>
+    void <a href="#TZDate::setUTCSeconds">setUTCSeconds</a> (long seconds)<br>
+    DOMString <a href="#TZDate::getTimezone">getTimezone</a> ()<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::toTimezone">toTimezone</a> (DOMString tzid)<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::toLocalTimezone">toLocalTimezone</a> ()<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::toUTC">toUTC</a> ()<br>
+    <a href="#TimeDuration">TimeDuration</a> <a href="#TZDate::difference">difference</a> (<a href="#TZDate">TZDate</a> other)<br>
+    boolean <a href="#TZDate::equalsTo">equalsTo</a> (<a href="#TZDate">TZDate</a> other)<br>
+    boolean <a href="#TZDate::earlierThan">earlierThan</a> (<a href="#TZDate">TZDate</a> other)<br>
+    boolean <a href="#TZDate::laterThan">laterThan</a> (<a href="#TZDate">TZDate</a> other)<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::addDuration">addDuration</a> (<a href="#TimeDuration">TimeDuration</a> duration)<br>
+    DOMString <a href="#TZDate::toLocaleDateString">toLocaleDateString</a> ()<br>
+    DOMString <a href="#TZDate::toLocaleTimeString">toLocaleTimeString</a> ()<br>
+    DOMString <a href="#TZDate::toLocaleString">toLocaleString</a> ()<br>
+    DOMString <a href="#TZDate::toDateString">toDateString</a> ()<br>
+    DOMString <a href="#TZDate::toTimeString">toTimeString</a> ()<br>
+    DOMString <a href="#TZDate::toString">toString</a> ()<br>
+    DOMString <a href="#TZDate::getTimezoneAbbreviation">getTimezoneAbbreviation</a> ()<br>
+    long <a href="#TZDate::secondsFromUTC">secondsFromUTC</a> ()<br>
+    boolean <a href="#TZDate::isDST">isDST</a> ()<br>
+    <a href="#TZDate">TZDate</a>? <a href="#TZDate::getPreviousDSTTransition">getPreviousDSTTransition</a> ()<br>
+    <a href="#TZDate">TZDate</a>? <a href="#TZDate::getNextDSTTransition">getNextDSTTransition</a> ()</td>
+</tr>
+<tr>
+<td><a href="#TimeDuration">TimeDuration</a></td>
+<td>
+<a href="#TimeDuration">TimeDuration</a> <a href="#TimeDuration::difference">difference</a> (<a href="#TimeDuration">TimeDuration</a> other)<br>
+    boolean <a href="#TimeDuration::equalsTo">equalsTo</a> (<a href="#TimeDuration">TimeDuration</a> other)<br>
+    boolean <a href="#TimeDuration::lessThan">lessThan</a> (<a href="#TimeDuration">TimeDuration</a> other)<br>
+    boolean <a href="#TimeDuration::greaterThan">greaterThan</a> (<a href="#TimeDuration">TimeDuration</a> other)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="TimeDurationUnit">
+<a class="backward-compatibility-anchor" name="::Time::TimeDurationUnit"></a><h3>1.1. TimeDurationUnit</h3>
+<div class="brief">
+ Specifies the TimeDuration unit (milliseconds, seconds, minutes, hours or days).
+          </div>
+<pre class="webidl prettyprint">  enum TimeDurationUnit { "MSECS", "SECS", "MINS", "HOURS", "DAYS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+At least the following values must be supported:
+          </p>
+          <ul>
+            <li>
+MSECS - Indicates a duration in milliseconds            </li>
+            <li>
+SECS - Indicates a duration in seconds             </li>
+            <li>
+MINS - Indicates a duration in minutes             </li>
+            <li>
+HOURS - Indicates a duration in hours             </li>
+            <li>
+DAYS - Indicates a duration in days            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="TimeManagerObject">
+<a class="backward-compatibility-anchor" name="::Time::TimeManagerObject"></a><h3>2.1. TimeManagerObject</h3>
+<div class="brief">
+ The TimeManagerObject interface defines what is instantiated in the tizen object by the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface TimeManagerObject {
+    readonly attribute <a href="#TimeUtil">TimeUtil</a> time;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#TimeManagerObject">TimeManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.time</em> object that allows accessing the
+functionality of the Time API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="TimeUtil">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil"></a><h3>2.2. TimeUtil</h3>
+<div class="brief">
+ The TimeUtil interface that provides access to the time API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface TimeUtil {
+    <a href="#TZDate">TZDate</a> getCurrentDateTime() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString[] getAvailableTimezones() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getDateFormat(optional boolean? shortformat) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getTimeFormat() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isLeapYear(long year) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setDateTimeChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetDateTimeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setTimezoneChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetTimezoneChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface offers methods to manage date/time as well as timezones such as:
+          </p>
+          <ul>
+            <li>
+Get the current date/time using getCurrentDateTime().            </li>
+            <li>
+Get timezones using getLocalTimezone() and getAvailableTimezones().            </li>
+          </ul>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TimeUtil::getCurrentDateTime">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getCurrentDateTime"></a><code><b><span class="methodName">getCurrentDateTime</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current date/time.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> getCurrentDateTime();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The current TZDate object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var current_dt = tizen.time.getCurrentDateTime();
+ console.log("current date/time is " + current_dt.toLocaleString());
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::getLocalTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getLocalTimezone"></a><code><b><span class="methodName">getLocalTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the identifier of the local system timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getLocalTimezone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Timezone The local timezone
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log("The local time zone is " + tizen.time.getLocalTimezone());
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::getAvailableTimezones">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getAvailableTimezones"></a><code><b><span class="methodName">getAvailableTimezones</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets synchronously the identifiers of the timezones supported by the device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString[] getAvailableTimezones();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Zero or more slashes separate different components of a timezone identifier,
+with the most general descriptor first and the most specific one last. For example,
+'Europe/Berlin', 'America/Argentina/Buenos_Aires'.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ The array of time zone identifiers
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var tzids = tizen.time.getAvailableTimezones();
+ console.log("The device supports " + tzids.length + " time zones.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::getDateFormat">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getDateFormat"></a><code><b><span class="methodName">getDateFormat</span></b></code>
+</dt>
+<dd>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getDateFormat(optional boolean? shortformat);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Gets the date format according to the system's locale settings.
+            </p>
+            <p>
+These expressions may be used in the returned string:
+            </p>
+            <ul>
+              <li>
+"d" = day number (1 to 31)              </li>
+              <li>
+"D" = day name              </li>
+              <li>
+"m" = month number (1 to 12)              </li>
+              <li>
+"M" = month name              </li>
+              <li>
+"y" = year              </li>
+            </ul>
+            <p>
+Examples of string formats include: "d/m/y", "y-d-m", "D, M d y".
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">shortformat</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The flag indicating whether the user is interested in the short
+date format (23/10/2011) instead of a long date format ("Monday, October 23 2011") <br>By default, this attribute is set to false.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The date format according to the system's locale settings
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TimeUtil::getTimeFormat">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getTimeFormat"></a><code><b><span class="methodName">getTimeFormat</span></b></code>
+</dt>
+<dd>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getTimeFormat();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Gets the time format according to the system's locale settings.
+            </p>
+            <p>
+These expressions may be used in the returned string:
+            </p>
+            <ul>
+              <li>
+"h" = hours (0 to 23 or 1 to 12 if AM/PM display)              </li>
+              <li>
+"m" = minutes (0 to 59)              </li>
+              <li>
+"s" = seconds (0 to 59)              </li>
+              <li>
+"ap" = AM/PM display              </li>
+            </ul>
+            <p>
+Examples of string formats include: "h:m:s ap", "h:m:s".
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The time format according to the system's locale settings
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TimeUtil::isLeapYear">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::isLeapYear"></a><code><b><span class="methodName">isLeapYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the given year is a leap year.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean isLeapYear(long year);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">year</span>: 
+ The year to check
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em>, if the year is a leap year
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var current_dt = tizen.time.getCurrentDateTime();
+ var is_leap = tizen.time.isLeapYear(current_dt.getFullYear());
+ if (is_leap) {
+   console.log("This year is a leap year.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::setDateTimeChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::setDateTimeChangeListener"></a><code><b><span class="methodName">setDateTimeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notification of changes to the time/date on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setDateTimeChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Listener set with <em>setTimezoneChangeListener()</em> method is called when device time was set by the user. <br>            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method to be invoked when device time was set <br>It is not invoked when time passes naturally.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         var current_dt = tizen.time.getCurrentDateTime();
+         console.log("current date/time is " + current_dt.toLocaleString());
+
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setDateTimeChangeListener(changedCallback);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::unsetDateTimeChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::unsetDateTimeChangeListener"></a><code><b><span class="methodName">unsetDateTimeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving notification of changes to the time/date on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetDateTimeChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         var current_dt = tizen.time.getCurrentDateTime();
+         console.log("current date/time is " + current_dt.toLocaleString());
+         tizen.time.unsetDateTimeChangeListener();
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setDateTimeChangeListener(changedCallback);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::setTimezoneChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::setTimezoneChangeListener"></a><code><b><span class="methodName">setTimezoneChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notification of changes to the time zone on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setTimezoneChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Listener set with <em>setTimezoneChangeListener()</em> method is called when device time zone has changed.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method that is invoked when the time zone has changed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         // The new time zone can be retrieved through tizen.time.getLocalTimezone()
+         var zone = tizen.time.getLocalTimezone();
+         console.log("current time zone is " + zone);
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setTimezoneChangeListener(changedCallback);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::unsetTimezoneChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::unsetTimezoneChangeListener"></a><code><b><span class="methodName">unsetTimezoneChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving notification of changes to the time zone on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetTimezoneChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         var zone = tizen.time.getLocalTimezone();
+         console.log("current time zone is " + zone);
+         tizen.time.unsetTimezoneChangeListener();
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setTimezoneChangeListener(changedCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="TZDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate"></a><h3>2.3. TZDate</h3>
+<div class="brief">
+ The TZDate interface represents information regarding a given
+date/time in a predefined timezone.
+If its date/time exceeds the platform limit, TZDate will be invalid.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional Date? datetime, optional DOMString? timezone),
+   Constructor(long year, long month, long day, optional long? hours, optional long? minutes, optional long? seconds, optional long? milliseconds, optional DOMString? timezone)]
+
+  interface TZDate {
+    long getDate();
+
+    void setDate(long date);
+
+    long getDay();
+
+    long getFullYear();
+
+    void setFullYear(long year);
+
+    long getHours();
+
+    void setHours(long hours);
+
+    long getMilliseconds();
+
+    void setMilliseconds(long ms);
+
+    long getMinutes();
+
+    void setMinutes(long minutes);
+
+    long getMonth();
+
+    void setMonth(long month);
+
+    long getSeconds();
+
+    void setSeconds(long seconds);
+
+    long getUTCDate();
+
+    void setUTCDate(long date);
+
+    long getUTCDay();
+
+    long getUTCFullYear();
+
+    void setUTCFullYear(long year);
+
+    long getUTCHours();
+
+    void setUTCHours(long hours);
+
+    long getUTCMilliseconds();
+
+    void setUTCMilliseconds(long ms);
+
+    long getUTCMinutes();
+
+    void setUTCMinutes(long minutes);
+
+    long getUTCMonth();
+
+    void setUTCMonth(long month);
+
+    long getUTCSeconds();
+
+    void setUTCSeconds(long seconds);
+
+    DOMString getTimezone();
+
+    <a href="#TZDate">TZDate</a> toTimezone(DOMString tzid) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean earlierThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean laterThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> addDuration(<a href="#TimeDuration">TimeDuration</a> duration) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString toLocaleDateString();
+
+    DOMString toLocaleTimeString();
+
+    DOMString toLocaleString();
+
+    DOMString toDateString();
+
+    DOMString toTimeString();
+
+    DOMString toString();
+
+    DOMString getTimezoneAbbreviation() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long secondsFromUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isDST() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getPreviousDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getNextDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="constructors">
+<h4 id="TZDate::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">TZDate(optional Date? datetime, optional DOMString? timezone);</pre>
+<pre class="webidl prettyprint">TZDate(long year, long month, long day, optional long? hours, optional long? minutes, optional long? seconds, optional long? milliseconds, optional DOMString? timezone);</pre>
+<div class="description">
+              <ul>
+                <li>
+<b>year</b> : The year of TZDate. If it is between 0 and 99, 1900 will be added to it like Javascript Date object.                </li>
+              </ul>
+             </div>
+</dl>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TZDate::getDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getDate"></a><code><b><span class="methodName">getDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the month (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getDate();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the month.
+              </div>
+</dd>
+<dt class="method" id="TZDate::setDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setDate"></a><code><b><span class="methodName">setDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the day of the month (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setDate(long date);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the day bigger than the last day of the month or smaller than 1, it will be calculated automatically.
+For example, if TZDate's month is May and parameter is 32, it will be June 1.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">date</span>: 
+ Date to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getDay">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getDay"></a><code><b><span class="methodName">getDay</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the week (from 0-6).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getDay();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the week
+              </div>
+</dd>
+<dt class="method" id="TZDate::getFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getFullYear"></a><code><b><span class="methodName">getFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the year.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getFullYear();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Positive values indicate AD(Anno Domini) years. 0 and negative values indicate BC(Before Christ) years.
+For example, 1 = AD 1, 0 = BC 1, -1 = BC 2.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The year
+              </div>
+</dd>
+<dt class="method" id="TZDate::setFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setFullYear"></a><code><b><span class="methodName">setFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the year.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setFullYear(long year);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">year</span>: 
+ Year to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getHours"></a><code><b><span class="methodName">getHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the hour (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getHours();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The hour
+              </div>
+</dd>
+<dt class="method" id="TZDate::setHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setHours"></a><code><b><span class="methodName">setHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the hour (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setHours(long hours);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the hour bigger than 23 or smaller than 0, it will be calculated automatically.
+For example, if hours is 24, it will set 0 and add to a date.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">hours</span>: 
+ Hours to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getMilliseconds"></a><code><b><span class="methodName">getMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the milliseconds (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMilliseconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The milliseconds
+              </div>
+</dd>
+<dt class="method" id="TZDate::setMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setMilliseconds"></a><code><b><span class="methodName">setMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the milliseconds (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMilliseconds(long ms);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the millisecond bigger than 999 or smaller than 0, it will be calculated automatically.
+For example, if ms is 1000, it will set 0 and add to a second.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ms</span>: 
+ Milliseconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getMinutes"></a><code><b><span class="methodName">getMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the minutes (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMinutes();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The minutes
+              </div>
+</dd>
+<dt class="method" id="TZDate::setMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setMinutes"></a><code><b><span class="methodName">setMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the minutes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMinutes(long minutes);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the minute bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if minutes is 60, it will set 0 and add to an hour.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">minutes</span>: 
+ Minutes to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getMonth"></a><code><b><span class="methodName">getMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the month (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMonth();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The month
+              </div>
+</dd>
+<dt class="method" id="TZDate::setMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setMonth"></a><code><b><span class="methodName">setMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the month (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMonth(long month);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the month bigger than 11 or smaller than 0, it will be calculated automatically.
+For example, if month is 12, it will set 0 and add to a year.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">month</span>: 
+ Month to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getSeconds"></a><code><b><span class="methodName">getSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the seconds (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getSeconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The seconds
+              </div>
+</dd>
+<dt class="method" id="TZDate::setSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setSeconds"></a><code><b><span class="methodName">setSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the seconds (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setSeconds(long seconds);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the second bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if seconds is 60, it will set 0 and add to a minute.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">seconds</span>: 
+ Seconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCDate"></a><code><b><span class="methodName">getUTCDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the month, according to universal time (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCDate();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the month, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCDate"></a><code><b><span class="methodName">setUTCDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the day of the month, according to universal time (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCDate(long date);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the day bigger than the last day of the month or smaller than 1, it will be calculated automatically.
+For example, if TZDate's month is May and date is 32, it will be June 1.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">date</span>: 
+ Date to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCDay">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCDay"></a><code><b><span class="methodName">getUTCDay</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the week, according to universal time (from 0-6).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCDay();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the week, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::getUTCFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCFullYear"></a><code><b><span class="methodName">getUTCFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the year, according to universal time.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCFullYear();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Positive values indicate AD(Anno Domini) years. 0 and negative values indicate BC(Before Christ) years.
+For example, 1 = AD 1, 0 = BC 1, -1 = BC 2.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The year, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCFullYear"></a><code><b><span class="methodName">setUTCFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the year, according to universal time.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCFullYear(long year);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">year</span>: 
+ Year to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCHours"></a><code><b><span class="methodName">getUTCHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the hour, according to universal time (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCHours();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The hour, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCHours"></a><code><b><span class="methodName">setUTCHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the hour, according to universal time (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCHours(long hours);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the hour bigger than 23 or smaller than 0, it will be calculated automatically.
+For example, if hours is 24, it will set 0 and add to a date.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">hours</span>: 
+ Hours to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCMilliseconds"></a><code><b><span class="methodName">getUTCMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the milliseconds, according to universal time (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCMilliseconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The milliseconds, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCMilliseconds"></a><code><b><span class="methodName">setUTCMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the milliseconds, according to universal time (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCMilliseconds(long ms);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the millisecond bigger than 999 or smaller than 0, it will be calculated automatically.
+For example, if ms is 1000, it will set 0 and add to a second.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ms</span>: 
+ Milliseconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCMinutes"></a><code><b><span class="methodName">getUTCMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the minutes, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCMinutes();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The minutes, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCMinutes"></a><code><b><span class="methodName">setUTCMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the minutes, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCMinutes(long minutes);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the minute bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if minutes is 60, it will set 0 and add to an hour.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">minutes</span>: 
+ Minutes to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCMonth"></a><code><b><span class="methodName">getUTCMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the month, according to universal time (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCMonth();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The month, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCMonth"></a><code><b><span class="methodName">setUTCMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the month, according to universal time (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCMonth(long month);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the month bigger than 11 or smaller than 0, it will be calculated automatically.
+For example, if month is 12, it will set 0 and add to a year.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">month</span>: 
+ Month to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCSeconds"></a><code><b><span class="methodName">getUTCSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the seconds, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCSeconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The seconds, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCSeconds"></a><code><b><span class="methodName">setUTCSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the seconds, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCSeconds(long seconds);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the second bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if seconds is 60, it will set 0 and add to a minute.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">seconds</span>: 
+ Seconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getTimezone"></a><code><b><span class="methodName">getTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the timezone identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getTimezone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Zero or more slashes separate different components, with the most general
+descriptor first and the most specific one last. For example,
+'Europe/Berlin', 'America/Argentina/Buenos_Aires'.
+            </p>
+            <p>
+This attribute uniquely identifies the timezone.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string timezone identifier <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toTimezone"></a><code><b><span class="methodName">toTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a copy of the TZDate converted to a given time zone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> toTimezone(DOMString tzid);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">tzid</span>: 
+ Timezone identifier to set
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The new TZDate in given Timezone
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the provided TZID
+is not recognized as a valid timezone identifier.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::toLocalTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocalTimezone"></a><code><b><span class="methodName">toLocalTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a copy of the TZDate converted to the local time zone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> toLocalTimezone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The new TZDate in local Timezone
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::toUTC">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toUTC"></a><code><b><span class="methodName">toUTC</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a copy of the TZDate converted to Coordinated Universal Time (UTC).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> toUTC();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The Date/Time in UTC
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::difference">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::difference"></a><code><b><span class="methodName">difference</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Calculates the difference with another TZDate object.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TimeDuration">TimeDuration</a> difference(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Calculates the difference in time between <em>this</em> and the other object.
+This comparison method takes timezones into consideration for the comparison.
+            </p>
+            <p>
+The TimeDuration that is returned is effectively <em>this</em> - other.
+The return value is a duration in milliseconds both TZDate objects have a time component, in days, otherwise.
+The result value will be:
+            </p>
+            <ul>
+              <li>
+Negative, if other is in the future              </li>
+              <li>
+0 if the two date/times are equal              </li>
+              <li>
+Positive, if other is in the past              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ The other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TimeDuration The duration in milliseconds between the two date/time objects
+(or in days for comparison between dates with no time component)
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::equalsTo">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::equalsTo"></a><code><b><span class="methodName">equalsTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TZDate is equal to another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean equalsTo(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the timezones into consideration and will return <em>true</em> if the two TZDate objects represent the same instant in different timezones.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the 2 date/times are the same
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::earlierThan">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::earlierThan"></a><code><b><span class="methodName">earlierThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TZDate is earlier than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean earlierThan(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the timezones into consideration.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ The other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em>, if the Date/Time is earlier than the one passed in argument
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::laterThan">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::laterThan"></a><code><b><span class="methodName">laterThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TZDate is later than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean laterThan(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the timezones into consideration.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ The other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em>, if the Date/Time is later than the one passed in argument
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::addDuration">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::addDuration"></a><code><b><span class="methodName">addDuration</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a new date by adding a duration to the current TZDate object.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> addDuration(<a href="#TimeDuration">TimeDuration</a> duration);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the length of duration is negative, the new date/time will be
+earlier than it used to.
+            </p>
+            <p>
+Note that calling this method does not alter the current object.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">duration</span>: 
+ TimeDuration to add
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The new TZDate by adding a duration
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var now = tizen.time.getCurrentDateTime();
+ var in_one_week = now.addDuration(new tizen.TimeDuration(7, "DAYS"));
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TZDate::toLocaleDateString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocaleDateString"></a><code><b><span class="methodName">toLocaleDateString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date portion of a TZDate object as a string, using locale conventions.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toLocaleDateString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The date portion of the TZDate object as a string, using locale conventions <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toLocaleTimeString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocaleTimeString"></a><code><b><span class="methodName">toLocaleTimeString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the time portion of a TZDate object as a string, using locale conventions.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toLocaleTimeString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The time portion of the TZDate object as a string, using locale conventions <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toLocaleString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocaleString"></a><code><b><span class="methodName">toLocaleString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Converts a TZDate object to a string, using locale conventions.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toLocaleString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string representation of the TZDate object, using locale conventions <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toDateString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toDateString"></a><code><b><span class="methodName">toDateString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date portion of a TZDate object as a string.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toDateString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The date portion of the TZDate object as a string <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toTimeString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toTimeString"></a><code><b><span class="methodName">toTimeString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the time portion of a TZDate object as a string.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toTimeString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The time portion of the TZDate object as a string <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toString"></a><code><b><span class="methodName">toString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Converts a TZDate object to a string.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string representation of the TZDate object <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::getTimezoneAbbreviation">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getTimezoneAbbreviation"></a><code><b><span class="methodName">getTimezoneAbbreviation</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Determines the time zone abbreviation to be used at a particular date in the time zone.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ Some timezones return "GMT[+-]hh:mm". It is inconsistent.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getTimezoneAbbreviation();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+For example, in Toronto this is currently "EST" during the winter months and "EDT" during the
+summer months when daylight savings time is in effect.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The abbreviation of the time zone (such as "EST") <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::secondsFromUTC">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::secondsFromUTC"></a><code><b><span class="methodName">secondsFromUTC</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the number of seconds from Coordinated Universal Time (UTC) offset for the timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long secondsFromUTC();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Returns the offset (in seconds) from UTC of the timezone, accounting for daylight
+savings if it is in the timezone. For example, if time zone is GMT+8, it will return -32,400.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The offset from UTC in seconds
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var offset = tizen.time.getCurrentDateTime().secondsFromUTC();
+ var myDate = new Date();
+ var exp_offset = myDate.getTimezoneOffset()*60;
+ //offset is equals to exp_offset.
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TZDate::isDST">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::isDST"></a><code><b><span class="methodName">isDST</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether Daylight Saving Time(DST) is active for this TZDate.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean isDST();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Indicates if daylight savings are in effect for the time zone and instant
+identified by the TZDate object.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean The flag indicating whether the daylight saving are in effect
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::getPreviousDSTTransition">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getPreviousDSTTransition"></a><code><b><span class="methodName">getPreviousDSTTransition</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date of the previous daylight saving time transition for the timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a>? getPreviousDSTTransition();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The date of the previous daylight saving transition (before the instant identified by the TZDate)
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::getNextDSTTransition">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getNextDSTTransition"></a><code><b><span class="methodName">getNextDSTTransition</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date of the next daylight saving time transition for the timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a>? getNextDSTTransition();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The date of the next daylight saving transition (after the instant identified by the TZDate)
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="TimeDuration">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration"></a><h3>2.4. TimeDuration</h3>
+<div class="brief">
+ The TimeDuration interface that contains the length and its associated time unit.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(long long length, optional <a href="#TimeDurationUnit">TimeDurationUnit</a>? unit)]
+  interface TimeDuration
+  {
+    attribute long long length;
+
+    attribute <a href="#TimeDurationUnit">TimeDurationUnit</a> unit;
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean lessThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean greaterThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var now = tizen.time.getCurrentDateTime();
+ var tomorrow = now.addDuration(new tizen.TimeDuration(1, "DAYS")); // Becomes tomorrow, same time.
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="TimeDuration::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">TimeDuration(long long length, optional <a href="#TimeDurationUnit">TimeDurationUnit</a>? unit);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="TimeDuration::length">
+<span class="attrName"><span class="type">long long </span><span class="name">length</span></span><div class="brief">
+ The duration length.
+            </div>
+<div class="description">
+            <p>
+The unit of the duration length (milliseconds, seconds, minutes, hours, or days)
+is determined by the duration unit attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="TimeDuration::unit">
+<span class="attrName"><span class="type">TimeDurationUnit </span><span class="name">unit</span></span><div class="brief">
+ The duration unit (milliseconds, seconds, minutes, hours, or days).
+            </div>
+<div class="description">
+            <p>
+The default value is "MSECS" (milliseconds unit).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TimeDuration::difference">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::difference"></a><code><b><span class="methodName">difference</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Calculates the difference between two TimeDuration objects.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TimeDuration">TimeDuration</a> difference(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Calculates the difference in time between <em>this</em> and <em>other</em>.
+The TimeDuration that is returned is effectively <em>first</em> - <em>other</em> (that is: positive if the first parameter is larger).
+            </p>
+            <p>
+The returned TimeDuration is the biggest possible unit without losing the precision.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ The new TimeDuration object corresponding to the result of <em>this</em> - <em>other</em>.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Assume that event1 and event2 are tizen.CalendarEvent objects.
+ // Computes event1.duration - event2.duration
+ var diff = event1.duration.difference(event2.duration);
+ if (diff.length &gt; 0)
+   console.log("The event1 is longer than event2.");
+ else if (diff.length == 0)
+   console.log("The duration of two events is same.");
+ else
+   console.log("The event1 is shorter than the event2.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeDuration::equalsTo">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::equalsTo"></a><code><b><span class="methodName">equalsTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TimeDuration is equal to another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean equalsTo(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the units into consideration and will return true
+if the two TimeDuration objects represent the same duration in different units.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the two TimeDuration object represent the same duration
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var d1 = new tizen.TimeDuration(60, "MINS"); // 60 minutes
+ var d2 = new tizen.TimeDuration(1, "HOURS"); // 1 hour
+ var ret = d1.equalsTo(d2); // Returns true
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeDuration::lessThan">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::lessThan"></a><code><b><span class="methodName">lessThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TimeDuration is lower than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean lessThan(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the units into consideration when doing the comparison.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the TimeDuration is less than <em>other</em>              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var d1 = new tizen.TimeDuration(1, "HOURS"); // 1 hour
+ var d2 = new tizen.TimeDuration(120, "MINS"); // 120 minutes
+ var ret = d1.lessThan(d2); // Returns true
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeDuration::greaterThan">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::greaterThan"></a><code><b><span class="methodName">greaterThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TimeDuration is greater than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean greaterThan(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the units into consideration when doing the comparison.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the TimeDuration is greater than <em>other</em>              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var d1 = new tizen.TimeDuration(120, "MINS"); // 120 minutes
+ var d2 = new tizen.TimeDuration(1, "HOURS"); // 1 hour
+ var ret = d1.greaterThan(d2); // Returns true
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Time {
+
+  enum TimeDurationUnit { "MSECS", "SECS", "MINS", "HOURS", "DAYS" };
+
+  [NoInterfaceObject] interface TimeManagerObject {
+    readonly attribute <a href="#TimeUtil">TimeUtil</a> time;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#TimeManagerObject">TimeManagerObject</a>;
+
+  [NoInterfaceObject] interface TimeUtil {
+    <a href="#TZDate">TZDate</a> getCurrentDateTime() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString[] getAvailableTimezones() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getDateFormat(optional boolean? shortformat) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getTimeFormat() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isLeapYear(long year) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setDateTimeChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetDateTimeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setTimezoneChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetTimezoneChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Constructor(optional Date? datetime, optional DOMString? timezone),
+   Constructor(long year, long month, long day, optional long? hours, optional long? minutes, optional long? seconds, optional long? milliseconds, optional DOMString? timezone)]
+
+  interface TZDate {
+    long getDate();
+
+    void setDate(long date);
+
+    long getDay();
+
+    long getFullYear();
+
+    void setFullYear(long year);
+
+    long getHours();
+
+    void setHours(long hours);
+
+    long getMilliseconds();
+
+    void setMilliseconds(long ms);
+
+    long getMinutes();
+
+    void setMinutes(long minutes);
+
+    long getMonth();
+
+    void setMonth(long month);
+
+    long getSeconds();
+
+    void setSeconds(long seconds);
+
+    long getUTCDate();
+
+    void setUTCDate(long date);
+
+    long getUTCDay();
+
+    long getUTCFullYear();
+
+    void setUTCFullYear(long year);
+
+    long getUTCHours();
+
+    void setUTCHours(long hours);
+
+    long getUTCMilliseconds();
+
+    void setUTCMilliseconds(long ms);
+
+    long getUTCMinutes();
+
+    void setUTCMinutes(long minutes);
+
+    long getUTCMonth();
+
+    void setUTCMonth(long month);
+
+    long getUTCSeconds();
+
+    void setUTCSeconds(long seconds);
+
+    DOMString getTimezone();
+
+    <a href="#TZDate">TZDate</a> toTimezone(DOMString tzid) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean earlierThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean laterThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> addDuration(<a href="#TimeDuration">TimeDuration</a> duration) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString toLocaleDateString();
+
+    DOMString toLocaleTimeString();
+
+    DOMString toLocaleString();
+
+    DOMString toDateString();
+
+    DOMString toTimeString();
+
+    DOMString toString();
+
+    DOMString getTimezoneAbbreviation() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long secondsFromUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isDST() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getPreviousDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getNextDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(long long length, optional <a href="#TimeDurationUnit">TimeDurationUnit</a>? unit)]
+  interface TimeDuration
+  {
+    attribute long long length;
+
+    attribute <a href="#TimeDurationUnit">TimeDurationUnit</a> unit;
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean lessThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean greaterThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.css b/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.css
new file mode 100644 (file)
index 0000000..baac199
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.css
@@ -0,0 +1,929 @@
+.attribute
+{
+    padding-bottom:15px;
+}
+pre
+{
+    /*text-align: left;            -webkit-border-radius: 8px;     -khtml-border-radius: 8px;     -moz-border-radius: 8px;     border-radius: 8px;     border: 1px solid rgba(255, 255, 255, 0.2);     display:block;     color:#2c3123;     margin:15px 0px 15px -8px;     padding:12px 20px 12px 35px;     font-size: 14px;     /*overflow:hidden;*/ /*word-wrap:break-word;*/ /*white-space: normal;*/
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+pre code
+{
+    font-size: 1em;
+    margin: 0px;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+pre webidl
+{
+    font-size: 1em;
+    margin: 0px;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+.prettyprint
+{
+}
+
+
+.signature
+{
+    background-color: #FCE6B9;
+    word-wrap:break-word;
+}
+
+.examplecode
+{
+    background-color: #D5F1FD;
+    word-wrap:break-word;
+}
+
+.webidl
+{
+    background-color: #D9F0C4;
+    word-wrap:break-word;
+}
+
+.prettyprint b
+{
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+
+
+pre select
+{
+    border: 1px solid #c61800;
+}
+
+input
+{
+    font-size: 16px;
+    margin-right: 10px;
+    font-family: Helvetica;
+    padding: 3px;
+}
+input[type="range"]
+{
+    width: 100%;
+}
+
+button
+{
+    margin: 20px 10px 0 0;
+    font-family: Verdana;
+}
+
+button.large
+{
+    font-size: 32px;
+}
+
+pre b
+{
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+pre em
+{
+    font-weight: normal;
+    font-style: normal;
+    color: #18a600;
+}
+pre input[type="range"]
+{
+    height: 6px;
+    cursor: pointer;
+    width: auto;
+}
+
+
+
+
+.product, .product-ua, .product-cc
+{
+}
+
+dfn.external
+{
+    font-weight: normal;
+    font-style: italic;
+}
+
+pre.idl
+{
+    border: solid thin;
+    background: #eee;
+    color: #000;
+    padding: 0.5em;
+}
+
+pre.idl :link, pre.idl :visited
+{
+    color: inherit;
+    background: transparent;
+}
+
+dfn
+{
+    font-style: normal;
+    font-weight: bolder;
+}
+em.ct, em.ct-samp
+{
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: normal;
+}
+
+.issue
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #ffc;
+}
+
+.issue::before
+{
+    content: "Issue";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.comment
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #fff;
+}
+
+.comment::before
+{
+    content: "Comment";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.ws3
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+.ws3::before
+{
+    content: "For WS3 Review";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.ws4
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+.ws4::before
+{
+    content: "Under discussion";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.note
+{
+    margin-left: 2em;
+    border: 2px solid #CFF6D9;
+    padding: .5em;
+    padding-top: 0px;
+    padding-bottom: 1em;
+    color: #444;
+    background-color: #E2FFF0;
+    font-size: 0.8em;
+}
+
+dd > dl
+{
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 15px;
+}
+
+code
+{
+    font-size: 1.1em;
+    text-decoration: none;
+    color: #002108;
+}
+
+
+.dir_listing li
+{
+    list-style-type: none;
+    font-family: Tahoma, Arial, Helvetica, sans-serif;
+}
+
+span span
+{
+    /*background-color: yellow;*/
+}
+
+li.folder
+{
+    list-style-image: url(images/expanded_folder.png);
+}
+
+.authorguide
+{
+    border: 1px solid #67BBB5;
+    background: #E8EBFC;
+    padding: 1em;
+    font-size: .9em;
+    color: #003;
+}
+
+.authorguide strong
+{
+    padding: .2em;
+    color: #003;
+    border: none;
+    position: relative;
+    display: block;
+    width: 200px;
+    left: -1.5em;
+    top: -1.5em;
+    background: #C6D8E6;
+    text-align: center;
+}
+
+span.notetitle
+{
+    padding: .2em;
+    color: #066;
+    border: none;
+    position: relative;
+    display: block;
+    width: 40px;
+    left: -1.5em;
+    top: -.7em;
+    background: #F2FFF1;
+    padding-left: .2em;
+    text-align: center;
+}
+
+var
+{
+    font-family: "Lucida Console" , Monaco, monospace;
+}
+
+li.folder li
+{
+    list-style-image: none;
+}
+
+.dir_listing .comment
+{
+    border: none;
+    font-family: "Courier New" , Courier, monospace;
+    color: #669933;
+}
+
+.dir_listing img
+{
+    vertical-align: middle;
+}
+
+.redNote
+{
+    color: red;
+}
+
+dl.procedure dt
+{
+    font-weight: normal;
+}
+
+.editorialNote
+{
+    padding: 5px;
+    background-color: #F3B9B7;
+    border: 3px dashed #FFEEB8;
+    color: #444;
+    font-size: 0.8em;
+}
+
+li > ol
+{
+    list-style-type: upper-alpha;
+}
+
+p[id]:after
+{
+    font-size: .8em;
+}
+
+table.wac
+{
+    border-width: 1px;
+    border-spacing: 2px;
+    border-style: outset;
+    border-color: #808080;
+    border-collapse: collapse;
+    background-color: #ffffff;
+}
+
+table.wac th
+{
+    border-width: 1px;
+    padding: 1px;
+    border-style: inset;
+    border-color: #808080;
+    background-color: #ffffff;
+}
+
+table.wac td
+{
+    vertical-align: top;
+    border-width: 1px;
+    padding: 1px;
+    border-style: inset;
+    border-color: #808080;
+    background-color: #ffffff;
+}
+
+.wacreqid
+{
+    font-weight: bold;
+}
+
+.wacreqid_ext
+{
+    font-weight: bold;
+}
+
+wacreqtext
+{
+    font-style: normal;
+}
+
+/* Table styles */
+table
+{
+    border-spacing: 0;
+    border-collapse: collapse;
+    border-bottom: 3px solid #005a9c;
+    margin-bottom: 1em;
+}
+
+th
+{
+    border-top: 2px solid #719cc7;
+    border-right: 1px solid #c6d9f1;
+    border-left: 1px solid #c6d9f1;
+    background-color: #3D9EC9;
+    padding: 4px;
+    color: White;
+    font-size: 9pt;
+    font-weight: bold;
+}
+
+th[scope="row"]
+{
+    background: inherit;
+    color: inherit;
+    border-top: 1px solid #ddd;
+}
+
+td
+{
+    padding: 3px 10px;
+    border-top: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+}
+/*
+th:last-of-type, td:last-of-type
+{
+    border-right: none;
+}
+
+tr:nth-child(even)
+{
+    background: #f0f6ff;
+}
+*/
+.attrName
+{
+    font-size: 10pt;
+    font-weight: bold;
+}
+
+.methodName
+{
+    font-size: 13pt;
+    font-weight: bold;
+}
+
+body
+{
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+:link
+{
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+:visited
+{
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+a:active
+{
+    color: #C00;
+    background: transparent;
+}
+
+a:link img, a:visited img
+{
+    border-style: none;
+}
+/* no border on img links */
+
+a img
+{
+    color: white;
+}
+/* trick to hide the border in Netscape 4 */
+@media all
+{
+    /* hide the next rule from Netscape 4 */
+    a img
+    {
+        color: inherit;
+    }
+    /* undo the color change above */
+}
+
+th, td
+{
+    /* ns 4 */ /*font-family: sans-serif;*/
+    font-size: 10pt;
+}
+
+h1, h2, h3, h4, h5, h6
+{
+    text-align: left;
+    font-family: Arial, Verdana, Helvetica, sans-serif;
+}
+/* background should be transparent, but WebTV has a bug */
+h1, h2, h3, h4
+{
+    color: #005A9C;
+    background: white;
+    padding-top: 0.2em;
+}
+h1
+{
+    font-size: 24pt;
+    color: #0E437D;
+}
+h2
+{
+    font-size: 18pt;
+    color: #0E437D;
+}
+h3
+{
+    font-size: 14pt;
+    color: #1C1C1C;
+}
+h4
+{
+    font-size: 12pt;
+    color: #1C1C1C;
+    font-weight: bold;
+}
+h5
+{
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-style: italic;
+    font-weight: bold;
+}
+h6
+{
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-weight: bold;
+    font-variant: small-caps;
+}
+
+
+.hide
+{
+    display: none;
+}
+
+div.head
+{
+    margin-bottom: 1em;
+}
+div.head h1
+{
+    margin-top: 2em;
+    clear: both;
+}
+div.head table
+{
+    margin-left: 2em;
+    margin-top: 2em;
+}
+
+p.copyright
+{
+    font-size: small;
+}
+p.copyright small
+{
+    font-size: small;
+}
+
+
+a[href] img:hover
+{
+    background: white;
+}
+
+@media screen
+{
+    /* hide from IE3 */
+    a[href]:hover
+    {
+        background: #ffa;
+    }
+}
+
+pre
+{
+    margin-left: 2em;
+}
+/*
+    p {
+      margin-top: 0.6em;
+      margin-bottom: 0.6em;
+    }
+    */
+
+/* opera 3.50 */
+dt, dd
+{
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+pre, code
+{
+    font-family: monospace;
+}
+/* navigator 4 requires this */
+
+ul.toc, ol.toc
+{
+    list-style: disc; /* Mac NS has problem with 'none' */
+    list-style: none;
+}
+
+ul.xmlconfig
+{
+    display: inline-block;
+    padding-right: 3%;
+    border-style: dotted;
+    border-width: 1px;
+}
+
+@media aural
+{
+    h1, h2, h3
+    {
+        stress: 20;
+        richness: 90;
+    }
+    .hide
+    {
+        speak: none;
+    }
+    p.copyright
+    {
+        volume: x-soft;
+        speech-rate: x-fast;
+    }
+    dt
+    {
+        pause-before: 20%;
+    }
+    pre
+    {
+        speak-punctuation: code;
+    }
+}
+
+.toc
+{
+    list-style-type: none;
+}
+
+div.exampleInner pre
+{
+    margin-left: 1em;
+    margin-top: 0em;
+    margin-bottom: 0em;
+}
+div.exampleOuter
+{
+    border: 4px double gray;
+    margin: 0em;
+    padding: 0em;
+}
+div.exampleInner
+{
+    background-color: #d5dee3;
+    border-top-width: 4px;
+    border-top-style: double;
+    border-top-color: #d3d3d3;
+    border-bottom-width: 4px;
+    border-bottom-style: double;
+    border-bottom-color: #d3d3d3;
+    padding: 4px;
+    margin: 0em;
+}
+div.exampleWrapper
+{
+    margin: 4px;
+}
+div.exampleHeader
+{
+    font-weight: bold;
+    margin: 4px;
+}
+
+
+
+.def-api-feature dt, dt .def-device-cap, dt.const code
+{
+    font: bold 100% sans-serif;
+}
+dt.attribute code, dt.method code
+{
+    font: italic 100% sans-serif;
+}
+
+.def-device-caps dd
+{
+    margin-bottom: 2em;
+}
+
+dt.method
+{
+    margin-top: 2em;
+}
+
+.summary td
+{
+    text-align: left;
+    background-color: white;
+    color: inherit;
+    font-family: monospace;
+    white-space: pre;
+    padding: .3em 1em .3em 1em;
+}
+/* Pretty printing styles. Used with prettify.js. */
+
+.str
+{
+    color: #080;
+}
+.kwd
+{
+    color: #008;
+}
+.com
+{
+    color: #800;
+}
+.typ
+{
+    color: #606;
+}
+.lit
+{
+    color: #066;
+}
+.pun
+{
+    color: #660;
+}
+.pln
+{
+    color: #000;
+}
+.tag
+{
+    color: #008;
+}
+.atn
+{
+    color: #606;
+}
+.atv
+{
+    color: #080;
+}
+.dec
+{
+    color: #606;
+}
+.readonly
+{
+    color: red;
+}
+.type
+{
+    color: #F0ACF0;
+}
+.optional
+{
+    font-style: italic;
+}
+
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums
+{
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8
+{
+    list-style-type: none;
+}
+/* Alternate shading for lines */
+li.L1, li.L3, li.L5, li.L7, li.L9
+{
+    background: #eee;
+}
+/*@media print {*/
+.str
+{
+    color: #060;
+}
+.kwd
+{
+    color: #006;
+    font-weight: bold;
+}
+.com
+{
+    color: #600;
+    font-style: italic;
+}
+.typ
+{
+    color: #404;
+    font-weight: bold;
+}
+.lit
+{
+    color: #044;
+}
+.pun
+{
+    color: #440;
+}
+.pln
+{
+    color: #000;
+}
+.tag
+{
+    color: #006;
+    font-weight: bold;
+}
+.atn
+{
+    color: #404;
+}
+.atv
+{
+    color: #060;
+}
+/*}*/
+
+/* div.status Styles */
+a[href].status:link{
+    color: #ffffff;
+    text-decoration: none;
+}
+
+a[href].status:visited{
+    color: #ffffff;
+}
+
+a[href].status:hover{
+    color: #3D9EC9;
+}
+
+/* Footer Styles */
+#footer
+{
+    background-color: #DDDDDD;
+    margin-top: 20px;
+    font-size: .8em;
+    padding: 20px;
+    color: #666;
+}
+
+#footer .sponsor
+{
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    float: right;
+}
+
+#footer .trademark
+{
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    clear: both;
+}
+
+
+#footer ul
+{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#footer li
+{
+    margin-bottom: 2px;
+}
+.version, span.param, .except, .example, .return, .privilege, .remark, .privilegelevel
+{
+    font-weight: bold;
+}
+span.name
+{
+    font-weight: bold;
+}
+
+li.feature
+{
+    margin-left:30px;
+    font-weight: bold;
+}
+
+div.api > div.supported-platforms {
+    float: right;
+}
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html
new file mode 100644 (file)
index 0000000..47e1f75
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html
@@ -0,0 +1,1383 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Tizen API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Tizen">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>Tizen API</h1></div>
+<div class="brief">
+ This API provides common Tizen functionality.
+        </div>
+<div class="description">
+        <p>
+The API provides the basic definitions that are used in the Tizen Web Device API.
+These include generic callbacks that are invoked when the operations succeed or fail,
+WebAPIError and WebAPIException that give information of the platform's error and
+filter interfaces that are used to make query statements for searching.
+        </p>
+        <p>
+Additionally, this API specifies the location in the ECMAScript hierarchy in which
+the Tizen Web Device API is instantiated (<em>window.tizen</em>).
+        </p>
+        <p>
+For more information on the Tizen features, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen Guide</a>.  
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#FilterMatchFlag">FilterMatchFlag</a>
+</li>
+<li>1.2. <a href="#SortModeOrder">SortModeOrder</a>
+</li>
+<li>1.3. <a href="#CompositeFilterType">CompositeFilterType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#TizenObject">TizenObject</a>
+</li>
+<li>2.2. <a href="#Tizen">Tizen</a>
+</li>
+<li>2.3. <a href="#AbstractFilter">AbstractFilter</a>
+</li>
+<li>2.4. <a href="#AttributeFilter">AttributeFilter</a>
+</li>
+<li>2.5. <a href="#AttributeRangeFilter">AttributeRangeFilter</a>
+</li>
+<li>2.6. <a href="#CompositeFilter">CompositeFilter</a>
+</li>
+<li>2.7. <a href="#SortMode">SortMode</a>
+</li>
+<li>2.8. <a href="#SimpleCoordinates">SimpleCoordinates</a>
+</li>
+<li>2.9. <a href="#WebAPIException">WebAPIException</a>
+</li>
+<li>2.10. <a href="#WebAPIError">WebAPIError</a>
+</li>
+<li>2.11. <a href="#SuccessCallback">SuccessCallback</a>
+</li>
+<li>2.12. <a href="#ErrorCallback">ErrorCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#TizenObject">TizenObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Tizen">Tizen</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AbstractFilter">AbstractFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AttributeFilter">AttributeFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AttributeRangeFilter">AttributeRangeFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CompositeFilter">CompositeFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SortMode">SortMode</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SimpleCoordinates">SimpleCoordinates</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#WebAPIException">WebAPIException</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#WebAPIError">WebAPIError</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SuccessCallback">SuccessCallback</a></td>
+<td>void <a href="#SuccessCallback::onsuccess">onsuccess</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ErrorCallback">ErrorCallback</a></td>
+<td>void <a href="#ErrorCallback::onerror">onerror</a> (<a href="#WebAPIError">WebAPIError</a> error)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="FilterMatchFlag">
+<a class="backward-compatibility-anchor" name="::Tizen::FilterMatchFlag"></a><h3>1.1. FilterMatchFlag</h3>
+<div class="brief">
+ Filter match flags.
+          </div>
+<pre class="webidl prettyprint">  enum FilterMatchFlag { "EXACTLY", "FULLSTRING", "CONTAINS", "STARTSWITH", "ENDSWITH", "EXISTS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+These values are supported:
+          </p>
+          <ul>
+            <li>
+EXACTLY - Indicates that an attribute value should match exactly with the specified default value.
+For strings, this type of comparison is case-sensitive.            </li>
+            <li>
+FULLSTRING - Indicates String-based comparison and that the attribute value should match the whole string (case insensitive).            </li>
+            <li>
+CONTAINS - Indicates that an attribute value should contain the specified string. This type of comparison works only on strings and is case insensitive.            </li>
+            <li>
+STARTSWITH - Indicates that an attribute value should start with the specified string.
+This type of comparison works only on strings and is case insensitive.            </li>
+            <li>
+ENDSWITH - Indicates that an attribute value should end with the specified string. This type of comparison works only on strings and is case insensitive.            </li>
+            <li>
+EXISTS - Indicates that a filter comparison should match if the specified attribute exists.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SortModeOrder">
+<a class="backward-compatibility-anchor" name="::Tizen::SortModeOrder"></a><h3>1.2. SortModeOrder</h3>
+<div class="brief">
+ An enumerator that indicates the sorting order.
+          </div>
+<pre class="webidl prettyprint">  enum SortModeOrder { "ASC", "DESC" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+ASC - Indicates that the sorting order is ascending            </li>
+            <li>
+DESC - Indicates that the sorting order is descending            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CompositeFilterType">
+<a class="backward-compatibility-anchor" name="::Tizen::CompositeFilterType"></a><h3>1.3. CompositeFilterType</h3>
+<div class="brief">
+ An enumerator that indicates the type of composite filter.
+          </div>
+<pre class="webidl prettyprint">  enum CompositeFilterType { "UNION", "INTERSECTION" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+UNION - Indicates that the composite is a union of filters ("OR" operator)            </li>
+            <li>
+INTERSECTION - Indicates that the composite is an intersection of filters ("AND" operator)            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="TizenObject">
+<a class="backward-compatibility-anchor" name="::Tizen::TizenObject"></a><h3>2.1. TizenObject</h3>
+<div class="brief">
+ Defines the tizen interface as a part of the window global object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface TizenObject {
+    readonly attribute <a href="#Tizen">Tizen</a> tizen;
+  };</pre>
+<pre class="webidl prettyprint">  Window implements <a href="#TizenObject">TizenObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The <em>Tizen</em> interface is always available within the <em>Window </em>object in the ECMAScript hierarchy.
+          </p>
+         </div>
+</div>
+<div class="interface" id="Tizen">
+<a class="backward-compatibility-anchor" name="::Tizen::Tizen"></a><h3>2.2. Tizen</h3>
+<div class="brief">
+ The root of the Tizen Web Device API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Tizen {
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This is the Tizen root interface.
+It is a property of the ECMAScript global object, as specified by the <em>TizenObject</em> interface.
+          </p>
+         </div>
+</div>
+<div class="interface" id="AbstractFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::AbstractFilter"></a><h3>2.3. AbstractFilter</h3>
+<div class="brief">
+ This is a common interface used by different types of
+object filters.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface AbstractFilter {
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Never use this base interface directly, instead use <em>AbstractFilter</em> subtypes,
+such as <em>AttributeFilter</em>, <em>AttributeRangeFilter</em>, and <em>CompositeFilter</em>.
+          </p>
+         </div>
+</div>
+<div class="interface" id="AttributeFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::AttributeFilter"></a><h3>2.4. AttributeFilter</h3>
+<div class="brief">
+ This interface represents a set of filters.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString attributeName, optional <a href="#FilterMatchFlag">FilterMatchFlag</a>? matchFlag, optional any matchValue)]
+  interface AttributeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute <a href="#FilterMatchFlag">FilterMatchFlag</a> matchFlag setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute any matchValue;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It represents the query statement for the specified value of <em>matchValue</em> by the rule of <em>matchFlag</em>.
+          </p>
+          <p>
+If no <em>matchValue</em> is defined, the filter matches all objects that have the attribute
+defined (same as the "EXISTS" filter works), otherwise, it only matches objects which have an attribute that match
+the specified value.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree".
+ var count = 100;
+ var offset = 0;
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree :' + contents.length);
+ }
+
+ tizen.content.find(findCB, errorCB, null, albumFilter, null, count, offset);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AttributeFilter::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AttributeFilter(DOMString attributeName, optional <a href="#FilterMatchFlag">FilterMatchFlag</a>? matchFlag, optional any matchValue);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AttributeFilter::attributeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">attributeName</span></span><div class="brief">
+ The name of the object attribute used for filtering.
+            </div>
+<div class="description">
+            <p>
+This is the name of the object attribute exactly as it is defined in
+the object's interface. For attributes of complex type, use fully-qualified names
+(such as 'geolocation.latitude' to filter a video or image content's latitude in a geolocation).
+            </p>
+            <p>
+For attributes of an array type, the filter will match if any value in the array
+matches.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeFilter::matchFlag">
+<span class="attrName"><span class="type">FilterMatchFlag </span><span class="name">matchFlag</span></span><div class="brief">
+ The match flag used for attribute-based filtering.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to "EXACTLY".
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeFilter::matchValue">
+<span class="attrName"><span class="type">any </span><span class="name">matchValue</span></span><div class="brief">
+ The value used for matching.
+            </div>
+<div class="description">
+            <p>
+The filter will match if the attribute value matches the given matchValue.
+            </p>
+            <p>
+This value is not used if the <em>matchFlag</em> is set to "EXISTS".
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AttributeRangeFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::AttributeRangeFilter"></a><h3>2.5. AttributeRangeFilter</h3>
+<div class="brief">
+ <em>AttributeRangeFilter</em> represents a filter based on an object attribute
+which has values that are within a particular range.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString attributeName, optional any initialValue, optional any endValue)]
+  interface AttributeRangeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute any initialValue;
+
+    attribute any endValue;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Range filters, where only one boundary is set, are available.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var count = 100;
+ var offset = 0;
+ // Use the modifiedDate attribute with a range that starts today and ends in 1 day
+ // (meaning that you search for all contents modified today)
+ var today = new Date();
+ var today_begin = new Date(today.getFullYear(), today.getMonth(),today.getDate());
+ var today_end = new Date(today.getFullYear(), today.getMonth(),today.getDate()+1);
+ var dateRangeFilter = new tizen.AttributeRangeFilter("modifiedDate", today_begin, today_end);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function findCB(contents) {
+     console.log('The contents modified today :' + contents.length);
+ }
+
+ tizen.content.find(findCB, errorCB, null, dateRangeFilter, null, count, offset);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AttributeRangeFilter::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AttributeRangeFilter(DOMString attributeName, optional any initialValue, optional any endValue);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AttributeRangeFilter::attributeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">attributeName</span></span><div class="brief">
+ The name of the object attribute used for filtering.
+            </div>
+<div class="description">
+            <p>
+The value of this attribute is exactly as it is defined in the object's interface. For attributes of complex type, use fully-qualified names
+(such as 'geolocation.latitude' to filter a video or image content's latitude in a geolocation).
+            </p>
+            <p>
+For attributes of array type, the filter will match if any value in the array
+matches.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeRangeFilter::initialValue">
+<span class="attrName"><span class="type">any </span><span class="name">initialValue</span></span><div class="brief">
+ Objects with an attribute that is greater than or equal to <em>initialValue</em> will match.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeRangeFilter::endValue">
+<span class="attrName"><span class="type">any </span><span class="name">endValue</span></span><div class="brief">
+ Objects with an attribute that is strictly lower than or equal to <em>endValue</em> will match.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CompositeFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::CompositeFilter"></a><h3>2.6. CompositeFilter</h3>
+<div class="brief">
+ <em>CompositeFilter</em> represents a set of filters.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="#CompositeFilterType">CompositeFilterType</a> type, optional <a href="#AbstractFilter">AbstractFilter</a>[]? filters)]
+  interface CompositeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+
+    attribute <a href="#CompositeFilterType">CompositeFilterType</a> type;
+
+    attribute <a href="#AbstractFilter">AbstractFilter</a>[] filters;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The composite filters can be one of the following 2 types:
+          </p>
+          <ul>
+            <li>
+The union - used to filter objects that match any of the filters it includes.            </li>
+            <li>
+The intersection - used to filter objects that match all the filters it includes.            </li>
+          </ul>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree", by artist "U2".
+ var count = 100;
+ var offset = 0;
+ var artistFilter = new tizen.AttributeFilter("artists", "EXACTLY", "U2");
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+ var filter = new tizen.CompositeFilter("INTERSECTION", [albumFilter, artistFilter]);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree by U2:' + contents.length);
+ }
+
+ tizen.content.find(findCB, errorCB, null, filter, null, count, offset);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="CompositeFilter::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">CompositeFilter(<a href="#CompositeFilterType">CompositeFilterType</a> type, optional <a href="#AbstractFilter">AbstractFilter</a>[]? filters);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CompositeFilter::type">
+<span class="attrName"><span class="type">CompositeFilterType </span><span class="name">type</span></span><div class="brief">
+ The composite filter type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CompositeFilter::filters">
+<span class="attrName"><span class="type">AbstractFilter[]
+                      </span><span class="name">filters</span></span><div class="brief">
+ The list of filters in the composite filter.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SortMode">
+<a class="backward-compatibility-anchor" name="::Tizen::SortMode"></a><h3>2.7. SortMode</h3>
+<div class="brief">
+ <em>SortMode</em> is a common interface used for sorting of queried data.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString attributeName, optional <a href="#SortModeOrder">SortModeOrder</a>? order)]
+  interface SortMode {
+    attribute DOMString attributeName;
+
+    attribute <a href="#SortModeOrder">SortModeOrder</a> order setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Note that the sorting result of list type attributes is not determined.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree", by artist "U2", ordered by the track number.
+ var count = 100;
+ var offset = 0;
+ var sortMode = new tizen.SortMode("trackNumber", "ASC");
+ var artistFilter = new tizen.AttributeFilter("artists", "EXACTLY", "U2");
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+ var filter = new tizen.CompositeFilter("INTERSECTION", [albumFilter, artistFilter]);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function printContent(content, index, contents) {
+     console.log('Track: ' + content.trackNumber + ' Title: ' + content.title + 'Duration: ' + content.duration + 'URL: ' + content.contentURI + 'MIME: ' + content.mimeType);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree by U2:');
+     contents.forEach(printContent);
+     // Increase the offset as much as the count and then find content again.
+     if (contents.length == count) {
+         offset += count;
+         tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+     }
+ }
+
+ tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="SortMode::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">SortMode(DOMString attributeName, optional <a href="#SortModeOrder">SortModeOrder</a>? order);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SortMode::attributeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">attributeName</span></span><div class="brief">
+ The name of the object attribute used for sorting.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SortMode::order">
+<span class="attrName"><span class="type">SortModeOrder </span><span class="name">order</span></span><div class="brief">
+ The type of the sorting.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>ASC</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SimpleCoordinates">
+<a class="backward-compatibility-anchor" name="::Tizen::SimpleCoordinates"></a><h3>2.8. SimpleCoordinates</h3>
+<div class="brief">
+ <em>SimpleCoordinates</em> represents a point (latitude and longitude) in the map coordinate system.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(double latitude, double longitude)]
+  interface SimpleCoordinates {
+    attribute double latitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute double longitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Latitude and longitude are of the WGS84 datum.
+          </p>
+         </div>
+<div class="constructors">
+<h4 id="SimpleCoordinates::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">SimpleCoordinates(double latitude, double longitude);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SimpleCoordinates::latitude">
+<span class="attrName"><span class="type">double </span><span class="name">latitude</span></span><div class="brief">
+ Latitude.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SimpleCoordinates::longitude">
+<span class="attrName"><span class="type">double </span><span class="name">longitude</span></span><div class="brief">
+ Longitude.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="WebAPIException">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException"></a><h3>2.9. WebAPIException</h3>
+<div class="brief">
+ Generic exception interface.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface WebAPIException {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+
+    const unsigned short INDEX_SIZE_ERR = 1;
+    const unsigned short DOMSTRING_SIZE_ERR = 2; 
+    const unsigned short HIERARCHY_REQUEST_ERR = 3;
+    const unsigned short WRONG_DOCUMENT_ERR = 4;
+    const unsigned short INVALID_CHARACTER_ERR = 5;
+    const unsigned short NO_DATA_ALLOWED_ERR = 6; 
+    const unsigned short NO_MODIFICATION_ALLOWED_ERR = 7;
+    const unsigned short NOT_FOUND_ERR = 8;
+    const unsigned short NOT_SUPPORTED_ERR = 9;
+    const unsigned short INUSE_ATTRIBUTE_ERR = 10; 
+    const unsigned short INVALID_STATE_ERR = 11;
+    const unsigned short SYNTAX_ERR = 12;
+    const unsigned short INVALID_MODIFICATION_ERR = 13;
+    const unsigned short NAMESPACE_ERR = 14;
+    const unsigned short INVALID_ACCESS_ERR = 15;
+    const unsigned short VALIDATION_ERR = 16; 
+    const unsigned short TYPE_MISMATCH_ERR = 17;
+    const unsigned short SECURITY_ERR = 18;
+    const unsigned short NETWORK_ERR = 19;
+    const unsigned short ABORT_ERR = 20;
+    const unsigned short URL_MISMATCH_ERR = 21;
+    const unsigned short QUOTA_EXCEEDED_ERR = 22;
+    const unsigned short TIMEOUT_ERR = 23;
+    const unsigned short INVALID_NODE_TYPE_ERR = 24;
+    const unsigned short DATA_CLONE_ERR = 25;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This interface will be used by the APIs to throw errors synchronously.
+          </p>
+          <p>
+The attempt to set an attribute value may or may not raise WebAPIException synchronously with error type TypeMismatchError or InvalidValuesError.
+          </p>
+         </div>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="WebAPIException::INDEX_SIZE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INDEX_SIZE_ERR"></a><span class="name">INDEX_SIZE_ERR</span><div class="brief">
+ The index is not in the allowed range.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::DOMSTRING_SIZE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::DOMSTRING_SIZE_ERR"></a><span class="name">DOMSTRING_SIZE_ERR</span><div class="brief">
+ The specified range of text is too large.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::HIERARCHY_REQUEST_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::HIERARCHY_REQUEST_ERR"></a><span class="name">HIERARCHY_REQUEST_ERR</span><div class="brief">
+ The operation would yield an incorrect node tree.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::WRONG_DOCUMENT_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::WRONG_DOCUMENT_ERR"></a><span class="name">WRONG_DOCUMENT_ERR</span><div class="brief">
+ The object is in the wrong document.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_CHARACTER_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_CHARACTER_ERR"></a><span class="name">INVALID_CHARACTER_ERR</span><div class="brief">
+ The string contains invalid characters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NO_DATA_ALLOWED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NO_DATA_ALLOWED_ERR"></a><span class="name">NO_DATA_ALLOWED_ERR</span><div class="brief">
+ Data is specified for a node that does not support data.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NO_MODIFICATION_ALLOWED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NO_MODIFICATION_ALLOWED_ERR"></a><span class="name">NO_MODIFICATION_ALLOWED_ERR</span><div class="brief">
+ The object cannot be modified.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NOT_FOUND_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NOT_FOUND_ERR"></a><span class="name">NOT_FOUND_ERR</span><div class="brief">
+ The object cannot be found here.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NOT_SUPPORTED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NOT_SUPPORTED_ERR"></a><span class="name">NOT_SUPPORTED_ERR</span><div class="brief">
+ The operation is not supported.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INUSE_ATTRIBUTE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INUSE_ATTRIBUTE_ERR"></a><span class="name">INUSE_ATTRIBUTE_ERR</span><div class="brief">
+ The specified attribute is already in use elsewhere.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_STATE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_STATE_ERR"></a><span class="name">INVALID_STATE_ERR</span><div class="brief">
+ The object is in an invalid state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::SYNTAX_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::SYNTAX_ERR"></a><span class="name">SYNTAX_ERR</span><div class="brief">
+ The string did not match the expected pattern.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_MODIFICATION_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_MODIFICATION_ERR"></a><span class="name">INVALID_MODIFICATION_ERR</span><div class="brief">
+ The object cannot be modified in this way.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NAMESPACE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NAMESPACE_ERR"></a><span class="name">NAMESPACE_ERR</span><div class="brief">
+ The operation is not allowed by Namespaces in XML.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_ACCESS_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_ACCESS_ERR"></a><span class="name">INVALID_ACCESS_ERR</span><div class="brief">
+ The object does not support the operation or argument.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::VALIDATION_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::VALIDATION_ERR"></a><span class="name">VALIDATION_ERR</span><div class="brief">
+ The operation would cause the node to fail validation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::TYPE_MISMATCH_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::TYPE_MISMATCH_ERR"></a><span class="name">TYPE_MISMATCH_ERR</span><div class="brief">
+ The type of the object does not match the expected type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::SECURITY_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::SECURITY_ERR"></a><span class="name">SECURITY_ERR</span><div class="brief">
+ The operation is insecure.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NETWORK_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NETWORK_ERR"></a><span class="name">NETWORK_ERR</span><div class="brief">
+ A network error occurred.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::ABORT_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::ABORT_ERR"></a><span class="name">ABORT_ERR</span><div class="brief">
+ The operation has been aborted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::URL_MISMATCH_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::URL_MISMATCH_ERR"></a><span class="name">URL_MISMATCH_ERR</span><div class="brief">
+ The given URL does not match another URL.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::QUOTA_EXCEEDED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::QUOTA_EXCEEDED_ERR"></a><span class="name">QUOTA_EXCEEDED_ERR</span><div class="brief">
+ The quota has been exceeded.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::TIMEOUT_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::TIMEOUT_ERR"></a><span class="name">TIMEOUT_ERR</span><div class="brief">
+ The operation has timed out.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_NODE_TYPE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_NODE_TYPE_ERR"></a><span class="name">INVALID_NODE_TYPE_ERR</span><div class="brief">
+ The supplied node is incorrect or has an incorrect ancestor for this operation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::DATA_CLONE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::DATA_CLONE_ERR"></a><span class="name">DATA_CLONE_ERR</span><div class="brief">
+ The object cannot be cloned.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="WebAPIException::code">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">code</span></span><div class="brief">
+ 16-bit error code.
+            </div>
+<div class="description">
+            <p>
+For the possible values of this attribute, see <a href="http://www.w3.org/TR/dom/#domexception">DOMException</a>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIException::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An error type. The name attribute must return the value it had been initialized with.
+            </div>
+<div class="description">
+            <p>
+This attribute can have one of the following values:
+            </p>
+            <ul>
+              <li>
+UnknownError - An unknown error has occurred.              </li>
+              <li>
+InvalidValuesError - The content of an object does not contain valid values.              </li>
+              <li>
+IOError - An error occurred in communication with the underlying implementation and so the requested method cannot be completed.              </li>
+              <li>
+ServiceNotAvailableError - The requested service is not available.              </li>
+            </ul>
+            <p>
+For other possible values of this attribute, see the values defined in <a href="http://www.w3.org/TR/dom/#error-names-0">DOM error names</a>            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIException::message">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">message</span></span><div class="brief">
+ An error message that describes the details of an encountered error.
+            </div>
+<div class="description">
+            <p>
+This attribute is mainly intended to be used for developers rather than end users, so it should not be used directly in the user interfaces as it is.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="WebAPIError">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIError"></a><h3>2.10. WebAPIError</h3>
+<div class="brief">
+ Generic error interface.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface WebAPIError {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This interface will be used by the APIs in order to return them in the error callback of asynchronous methods.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="WebAPIError::code">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">code</span></span><div class="brief">
+ 16-bit error code.
+            </div>
+<div class="description">
+            <p>
+Possible values are defined in <a href="http://www.w3.org/TR/dom/#domexception">DOMException</a>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIError::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An error type. The name attribute must return the value it had been initialized with.
+            </div>
+<div class="description">
+            <p>
+This attribute can have one of the following values:
+            </p>
+            <ul>
+              <li>
+UnknownError - An unknown error has occurred.              </li>
+              <li>
+InvalidValuesError - The content of an object does not contain valid values.              </li>
+              <li>
+IOError - An error occurred in communication with the underlying implementation and so the requested method cannot be completed.              </li>
+              <li>
+ServiceNotAvailableError - The requested service is not available.              </li>
+            </ul>
+            <p>
+For other possible values of this attribute, see the values defined in <a href="http://www.w3.org/TR/dom/#error-names-0">DOM error names</a>            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIError::message">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">message</span></span><div class="brief">
+ An error message that describes the details of the error encountered.
+            </div>
+<div class="description">
+            <p>
+This attribute is not intended to be used directly in the user interfaces
+as it is mainly intended to be useful for developers rather than end users.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SuccessCallback">
+<a class="backward-compatibility-anchor" name="::Tizen::SuccessCallback"></a><h3>2.11. SuccessCallback</h3>
+<div class="brief">
+ This interface is used in methods that do not require any return value in the success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface SuccessCallback {
+    void onsuccess ();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+In case of successful execution of an asynchronous call, <em>SuccessCallback</em> or an API defined callback must be called immediately to notify the user.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">     function onSuccess() {
+         console.log("Application launched successfully");
+     }
+     tizen.application.launch('0pnxz8hbsr.MyFiles', onSuccess);
+ </pre>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Tizen::SuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ErrorCallback">
+<a class="backward-compatibility-anchor" name="::Tizen::ErrorCallback"></a><h3>2.12. ErrorCallback</h3>
+<div class="brief">
+ This interface is used in methods that require only an error as an input parameter in the error callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface ErrorCallback {
+
+    void onerror (<a href="#WebAPIError">WebAPIError</a> error);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+If an invalid function (such as null) is passed to the API that accepts ErrorCallback,
+it silently fails and there is no further action.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Define the error callback.
+  function onerror(error) {
+    console.log(error.message);
+  }
+  function onsuccess() {
+      console.log("The application has launched successfully");
+  }
+
+  tizen.application.launch("targetApp0.main", onsuccess, onerror);
+ </pre>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ErrorCallback::onerror">
+<a class="backward-compatibility-anchor" name="::Tizen::ErrorCallback::onerror"></a><code><b><span class="methodName">onerror</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method that is invoked when an error occurs.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onerror(<a href="#WebAPIError">WebAPIError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">error</span>: 
+ Generic error.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Tizen {
+  enum FilterMatchFlag { "EXACTLY", "FULLSTRING", "CONTAINS", "STARTSWITH", "ENDSWITH", "EXISTS" };
+
+  enum SortModeOrder { "ASC", "DESC" };
+
+  enum CompositeFilterType { "UNION", "INTERSECTION" };
+
+  [NoInterfaceObject] interface TizenObject {
+    readonly attribute <a href="#Tizen">Tizen</a> tizen;
+  };
+  Window implements <a href="#TizenObject">TizenObject</a>;
+
+  [NoInterfaceObject] interface Tizen {
+  };
+
+  [NoInterfaceObject] interface AbstractFilter {
+  };
+
+  [Constructor(DOMString attributeName, optional <a href="#FilterMatchFlag">FilterMatchFlag</a>? matchFlag, optional any matchValue)]
+  interface AttributeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute <a href="#FilterMatchFlag">FilterMatchFlag</a> matchFlag setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute any matchValue;
+  };
+
+  [Constructor(DOMString attributeName, optional any initialValue, optional any endValue)]
+  interface AttributeRangeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute any initialValue;
+
+    attribute any endValue;
+  };
+
+  [Constructor(<a href="#CompositeFilterType">CompositeFilterType</a> type, optional <a href="#AbstractFilter">AbstractFilter</a>[]? filters)]
+  interface CompositeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+
+    attribute <a href="#CompositeFilterType">CompositeFilterType</a> type;
+
+    attribute <a href="#AbstractFilter">AbstractFilter</a>[] filters;
+  };
+
+  [Constructor(DOMString attributeName, optional <a href="#SortModeOrder">SortModeOrder</a>? order)]
+  interface SortMode {
+    attribute DOMString attributeName;
+
+    attribute <a href="#SortModeOrder">SortModeOrder</a> order setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(double latitude, double longitude)]
+  interface SimpleCoordinates {
+    attribute double latitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute double longitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject]
+  interface WebAPIException {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+
+    const unsigned short INDEX_SIZE_ERR = 1;
+    const unsigned short DOMSTRING_SIZE_ERR = 2; 
+    const unsigned short HIERARCHY_REQUEST_ERR = 3;
+    const unsigned short WRONG_DOCUMENT_ERR = 4;
+    const unsigned short INVALID_CHARACTER_ERR = 5;
+    const unsigned short NO_DATA_ALLOWED_ERR = 6; 
+    const unsigned short NO_MODIFICATION_ALLOWED_ERR = 7;
+    const unsigned short NOT_FOUND_ERR = 8;
+    const unsigned short NOT_SUPPORTED_ERR = 9;
+    const unsigned short INUSE_ATTRIBUTE_ERR = 10; 
+    const unsigned short INVALID_STATE_ERR = 11;
+    const unsigned short SYNTAX_ERR = 12;
+    const unsigned short INVALID_MODIFICATION_ERR = 13;
+    const unsigned short NAMESPACE_ERR = 14;
+    const unsigned short INVALID_ACCESS_ERR = 15;
+    const unsigned short VALIDATION_ERR = 16; 
+    const unsigned short TYPE_MISMATCH_ERR = 17;
+    const unsigned short SECURITY_ERR = 18;
+    const unsigned short NETWORK_ERR = 19;
+    const unsigned short ABORT_ERR = 20;
+    const unsigned short URL_MISMATCH_ERR = 21;
+    const unsigned short QUOTA_EXCEEDED_ERR = 22;
+    const unsigned short TIMEOUT_ERR = 23;
+    const unsigned short INVALID_NODE_TYPE_ERR = 24;
+    const unsigned short DATA_CLONE_ERR = 25;
+  };
+
+  [NoInterfaceObject]
+  interface WebAPIError {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface SuccessCallback {
+    void onsuccess ();
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface ErrorCallback {
+
+    void onerror (<a href="#WebAPIError">WebAPIError</a> error);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.js b/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.js
new file mode 100644 (file)
index 0000000..5d036c4
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.js
@@ -0,0 +1,1529 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ * <p>
+ *
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Walks the DOM returning a properly escaped version of innerHTML.
+  * @param {Node} node
+  * @param {Array.<string>} out output buffer that receives chunks of HTML.
+  */
+window['PR_normalizedHtml']
+
+/** Contains functions for creating and registering new language handlers.
+  * @type {Object}
+  */
+  = window['PR']
+
+/** Pretty print a chunk of code.
+  *
+  * @param {string} sourceCodeHtml code as html
+  * @return {string} code as html, but prettier
+  */
+  = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+  * {@code class=prettyprint} and prettify them.
+  * @param {Function?} opt_whenDone if specified, called when the last entry
+  *     has been finished.
+  */
+  = window['prettyPrint'] = void 0;
+
+/** browser detection. @extern @returns false if not IE, otherwise the major version. */
+window['_pr_isIE6'] = function () {
+  var ieVersion = navigator && navigator.userAgent &&
+      navigator.userAgent.match(/\bMSIE ([678])\./);
+  ieVersion = ieVersion ? +ieVersion[1] : false;
+  window['_pr_isIE6'] = function () { return ieVersion; };
+  return ieVersion;
+};
+
+
+(function () {
+  // Keyword lists for various languages.
+  var FLOW_CONTROL_KEYWORDS =
+      "break continue do else for if return while ";
+  var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+      "double enum extern float goto int long register short signed sizeof " +
+      "static struct switch typedef union unsigned void volatile ";
+  var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+      "new operator private protected public this throw true try typeof ";
+  var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+      "concept concept_map const_cast constexpr decltype " +
+      "dynamic_cast explicit export friend inline late_check " +
+      "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+      "template typeid typename using virtual wchar_t where ";
+  var JAVA_KEYWORDS = COMMON_KEYWORDS +
+      "abstract boolean byte extends final finally implements import " +
+      "instanceof null native package strictfp super synchronized throws " +
+      "transient ";
+  var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+      "as base by checked decimal delegate descending event " +
+      "fixed foreach from group implicit in interface internal into is lock " +
+      "object out override orderby params partial readonly ref sbyte sealed " +
+      "stackalloc string select uint ulong unchecked unsafe ushort var ";
+  var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+      "debugger eval export function get null set undefined var with " +
+      "Infinity NaN ";
+  var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+      "goto if import last local my next no our print package redo require " +
+      "sub undef unless until use wantarray while BEGIN END ";
+  var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+      "elif except exec finally from global import in is lambda " +
+      "nonlocal not or pass print raise try with yield " +
+      "False True None ";
+  var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+      " defined elsif end ensure false in module next nil not or redo rescue " +
+      "retry self super then true undef unless until when yield BEGIN END ";
+  var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+      "function in local set then until ";
+  var ALL_KEYWORDS = (
+      CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+      PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+  // token style names.  correspond to css classes
+  /** token style for a string literal */
+  var PR_STRING = 'str';
+  /** token style for a keyword */
+  var PR_KEYWORD = 'kwd';
+  /** token style for a comment */
+  var PR_COMMENT = 'com';
+  /** token style for a type */
+  var PR_TYPE = 'typ';
+  /** token style for a literal value.  e.g. 1, null, true. */
+  var PR_LITERAL = 'lit';
+  /** token style for a punctuation string. */
+  var PR_PUNCTUATION = 'pun';
+  /** token style for a punctuation string. */
+  var PR_PLAIN = 'pln';
+
+  /** token style for an sgml tag. */
+  var PR_TAG = 'tag';
+  /** token style for a markup declaration such as a DOCTYPE. */
+  var PR_DECLARATION = 'dec';
+  /** token style for embedded source. */
+  var PR_SOURCE = 'src';
+  /** token style for an sgml attribute name. */
+  var PR_ATTRIB_NAME = 'atn';
+  /** token style for an sgml attribute value. */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   */
+  var PR_NOCODE = 'nocode';
+
+  /** A set of tokens that can precede a regular expression literal in
+    * javascript.
+    * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+    * list, but I've removed ones that might be problematic when seen in
+    * languages that don't support regular expression literals.
+    *
+    * <p>Specifically, I've removed any keywords that can't precede a regexp
+    * literal in a syntactically legal javascript program, and I've removed the
+    * "in" keyword since it's not a keyword in many languages, and might be used
+    * as a count of inches.
+    *
+    * <p>The link a above does not accurately describe EcmaScript rules since
+    * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+    * very well in practice.
+    *
+    * @private
+    */
+  var REGEXP_PRECEDER_PATTERN = function () {
+      var preceders = [
+          "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+          "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+          "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+          "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+          ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+          "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+          "||=", "~" /* handles =~ and !~ */,
+          "break", "case", "continue", "delete",
+          "do", "else", "finally", "instanceof",
+          "return", "throw", "try", "typeof"
+          ];
+      var pattern = '(?:^^|[+-]';
+      for (var i = 0; i < preceders.length; ++i) {
+        pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+      }
+      pattern += ')\\s*';  // matches at end, and matches empty string
+      return pattern;
+      // CAVEAT: this does not properly handle the case where a regular
+      // expression immediately follows another since a regular expression may
+      // have flags for case-sensitivity and the like.  Having regexp tokens
+      // adjacent is not valid in any language I'm aware of, so I'm punting.
+      // TODO: maybe style special characters inside a regexp as punctuation.
+    }();
+
+  // Define regexps here so that the interpreter doesn't have to create an
+  // object each time the function containing them is called.
+  // The language spec requires a new object created even if you don't access
+  // the $1 members.
+  var pr_amp = /&/g;
+  var pr_lt = /</g;
+  var pr_gt = />/g;
+  var pr_quot = /\"/g;
+  /** like textToHtml but escapes double quotes to be attribute safe. */
+  function attribToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;')
+        .replace(pr_quot, '&quot;');
+  }
+
+  /** escapest html special characters to html. */
+  function textToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;');
+  }
+
+
+  var pr_ltEnt = /&lt;/g;
+  var pr_gtEnt = /&gt;/g;
+  var pr_aposEnt = /&apos;/g;
+  var pr_quotEnt = /&quot;/g;
+  var pr_ampEnt = /&amp;/g;
+  var pr_nbspEnt = /&nbsp;/g;
+  /** unescapes html to plain text. */
+  function htmlToText(html) {
+    var pos = html.indexOf('&');
+    if (pos < 0) { return html; }
+    // Handle numeric entities specially.  We can't use functional substitution
+    // since that doesn't work in older versions of Safari.
+    // These should be rare since most browsers convert them to normal chars.
+    for (--pos; (pos = html.indexOf('&#', pos + 1)) >= 0;) {
+      var end = html.indexOf(';', pos);
+      if (end >= 0) {
+        var num = html.substring(pos + 3, end);
+        var radix = 10;
+        if (num && num.charAt(0) === 'x') {
+          num = num.substring(1);
+          radix = 16;
+        }
+        var codePoint = parseInt(num, radix);
+        if (!isNaN(codePoint)) {
+          html = (html.substring(0, pos) + String.fromCharCode(codePoint) +
+                  html.substring(end + 1));
+        }
+      }
+    }
+
+    return html.replace(pr_ltEnt, '<')
+        .replace(pr_gtEnt, '>')
+        .replace(pr_aposEnt, "'")
+        .replace(pr_quotEnt, '"')
+        .replace(pr_nbspEnt, ' ')
+        .replace(pr_ampEnt, '&');
+  }
+
+  /** is the given node's innerHTML normally unescaped? */
+  function isRawContent(node) {
+    return 'XMP' === node.tagName;
+  }
+
+  var newlineRe = /[\r\n]/g;
+  /**
+   * Are newlines and adjacent spaces significant in the given node's innerHTML?
+   */
+  function isPreformatted(node, content) {
+    // PRE means preformatted, and is a very common case, so don't create
+    // unnecessary computed style objects.
+    if ('PRE' === node.tagName) { return true; }
+    if (!newlineRe.test(content)) { return true; }  // Don't care
+    var whitespace = '';
+    // For disconnected nodes, IE has no currentStyle.
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      // Firefox makes a best guess if node is disconnected whereas Safari
+      // returns the empty string.
+      whitespace = window.getComputedStyle(node, null).whiteSpace;
+    }
+    return !whitespace || whitespace === 'pre';
+  }
+
+  function normalizedHtml(node, out, opt_sortAttrs) {
+    switch (node.nodeType) {
+      case 1:  // an element
+        var name = node.tagName.toLowerCase();
+
+        out.push('<', name);
+        var attrs = node.attributes;
+        var n = attrs.length;
+        if (n) {
+          if (opt_sortAttrs) {
+            var sortedAttrs = [];
+            for (var i = n; --i >= 0;) { sortedAttrs[i] = attrs[i]; }
+            sortedAttrs.sort(function (a, b) {
+                return (a.name < b.name) ? -1 : a.name === b.name ? 0 : 1;
+              });
+            attrs = sortedAttrs;
+          }
+          for (var i = 0; i < n; ++i) {
+            var attr = attrs[i];
+            if (!attr.specified) { continue; }
+            out.push(' ', attr.name.toLowerCase(),
+                     '="', attribToHtml(attr.value), '"');
+          }
+        }
+        out.push('>');
+        for (var child = node.firstChild; child; child = child.nextSibling) {
+          normalizedHtml(child, out, opt_sortAttrs);
+        }
+        if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
+          out.push('<\/', name, '>');
+        }
+        break;
+      case 3: case 4: // text
+        out.push(textToHtml(node.nodeValue));
+        break;
+    }
+  }
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union o the sets o strings matched d by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+
+    function decodeEscape(charsetPart) {
+      if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); }
+      switch (charsetPart.charAt(1)) {
+        case 'b': return 8;
+        case 't': return 9;
+        case 'n': return 0xa;
+        case 'v': return 0xb;
+        case 'f': return 0xc;
+        case 'r': return 0xd;
+        case 'u': case 'x':
+          return parseInt(charsetPart.substring(2), 16)
+              || charsetPart.charCodeAt(1);
+        case '0': case '1': case '2': case '3': case '4':
+        case '5': case '6': case '7':
+          return parseInt(charsetPart.substring(1), 8);
+        default: return charsetPart.charCodeAt(1);
+      }
+    }
+
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        switch (p) {
+          case '\\B': case '\\b':
+          case '\\D': case '\\d':
+          case '\\S': case '\\s':
+          case '\\W': case '\\w':
+            groups.push(p);
+            continue;
+        }
+        var start = decodeEscape(p);
+        var end;
+        if (i + 2 < n && '-' === charsetParts[i + 1]) {
+          end = decodeEscape(charsetParts[i + 2]);
+          i += 2;
+        } else {
+          end = start;
+        }
+        ranges.push([start, end]);
+        // If the range might intersect letters, then expand it.
+        if (!(end < 65 || start > 122)) {
+          if (!(end < 65 || start > 90)) {
+            ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+          }
+          if (!(end < 97 || start > 122)) {
+            ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+          }
+        }
+      }
+
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+
+      // Expand letters to groupts to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+
+      return parts.join('');
+    }
+
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+  var PR_innerHtmlWorks = null;
+  function getInnerHtml(node) {
+    // inner html is hopelessly broken in Safari 2.0.4 when the content is
+    // an html description of well formed XML and the containing tag is a PRE
+    // tag, so we detect that case and emulate innerHTML.
+    if (null === PR_innerHtmlWorks) {
+      var testNode = document.createElement('PRE');
+      testNode.appendChild(
+          document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));
+      PR_innerHtmlWorks = !/</.test(testNode.innerHTML);
+    }
+
+    if (PR_innerHtmlWorks) {
+      var content = node.innerHTML;
+      // XMP tags contain unescaped entities so require special handling.
+      if (isRawContent(node)) {
+        content = textToHtml(content);
+      } else if (!isPreformatted(node, content)) {
+        content = content.replace(/(<br\s*\/?>)[\r\n]+/g, '$1')
+            .replace(/(?:[\r\n]+[ \t]*)+/g, ' ');
+      }
+      return content;
+    }
+
+    var out = [];
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      normalizedHtml(child, out);
+    }
+    return out.join('');
+  }
+
+  /** returns a function that expand tabs to spaces.  This function can be fed
+    * successive chunks of text, and will maintain its own internal state to
+    * keep track of how tabs are expanded.
+    * @return {function (string) : string} a function that takes
+    *   plain text and return the text with tabs expanded.
+    * @private
+    */
+  function makeTabExpander(tabWidth) {
+    var SPACES = '                ';
+    var charInLine = 0;
+
+    return function (plainText) {
+      // walk over each character looking for tabs and newlines.
+      // On tabs, expand them.  On newlines, reset charInLine.
+      // Otherwise increment charInLine
+      var out = null;
+      var pos = 0;
+      for (var i = 0, n = plainText.length; i < n; ++i) {
+        var ch = plainText.charAt(i);
+
+        switch (ch) {
+          case '\t':
+            if (!out) { out = []; }
+            out.push(plainText.substring(pos, i));
+            // calculate how much space we need in front of this part
+            // nSpaces is the amount of padding -- the number of spaces needed
+            // to move us to the next column, where columns occur at factors of
+            // tabWidth.
+            var nSpaces = tabWidth - (charInLine % tabWidth);
+            charInLine += nSpaces;
+            for (; nSpaces >= 0; nSpaces -= SPACES.length) {
+              out.push(SPACES.substring(0, nSpaces));
+            }
+            pos = i + 1;
+            break;
+          case '\n':
+            charInLine = 0;
+            break;
+          default:
+            ++charInLine;
+        }
+      }
+      if (!out) { return plainText; }
+      out.push(plainText.substring(pos));
+      return out.join('');
+    };
+  }
+
+  var pr_chunkPattern = new RegExp(
+      '[^<]+'  // A run of characters other than '<'
+      + '|<\!--[\\s\\S]*?--\>'  // an HTML comment
+      + '|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>'  // a CDATA section
+      // a probable tag that should not be highlighted
+      + '|<\/?[a-zA-Z](?:[^>\"\']|\'[^\']*\'|\"[^\"]*\")*>'
+      + '|<',  // A '<' that does not begin a larger chunk
+      'g');
+  var pr_commentPrefix = /^<\!--/;
+  var pr_cdataPrefix = /^<!\[CDATA\[/;
+  var pr_brPrefix = /^<br\b/i;
+  var pr_tagNameRe = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/;
+
+  /** split markup into chunks of html tags (style null) and
+    * plain text (style {@link #PR_PLAIN}), converting tags which are
+    * significant for tokenization (<br>) into their textual equivalent.
+    *
+    * @param {string} s html where whitespace is considered significant.
+    * @return {Object} source code and extracted tags.
+    * @private
+    */
+  function extractTags(s) {
+    // since the pattern has the 'g' modifier and defines no capturing groups,
+    // this will return a list of all chunks which we then classify and wrap as
+    // PR_Tokens
+    var matches = s.match(pr_chunkPattern);
+    var sourceBuf = [];
+    var sourceBufLen = 0;
+    var extractedTags = [];
+    if (matches) {
+      for (var i = 0, n = matches.length; i < n; ++i) {
+        var match = matches[i];
+        if (match.length > 1 && match.charAt(0) === '<') {
+          if (pr_commentPrefix.test(match)) { continue; }
+          if (pr_cdataPrefix.test(match)) {
+            // strip CDATA prefix and suffix.  Don't unescape since it's CDATA
+            sourceBuf.push(match.substring(9, match.length - 3));
+            sourceBufLen += match.length - 12;
+          } else if (pr_brPrefix.test(match)) {
+            // <br> tags are lexically significant so convert them to text.
+            // This is undone later.
+            sourceBuf.push('\n');
+            ++sourceBufLen;
+          } else {
+            if (match.indexOf(PR_NOCODE) >= 0 && isNoCodeTag(match)) {
+              // A <span class="nocode"> will start a section that should be
+              // ignored.  Continue walking the list until we see a matching end
+              // tag.
+              var name = match.match(pr_tagNameRe)[2];
+              var depth = 1;
+              var j;
+              end_tag_loop:
+              for (j = i + 1; j < n; ++j) {
+                var name2 = matches[j].match(pr_tagNameRe);
+                if (name2 && name2[2] === name) {
+                  if (name2[1] === '/') {
+                    if (--depth === 0) { break end_tag_loop; }
+                  } else {
+                    ++depth;
+                  }
+                }
+              }
+              if (j < n) {
+                extractedTags.push(
+                    sourceBufLen, matches.slice(i, j + 1).join(''));
+                i = j;
+              } else {  // Ignore unclosed sections.
+                extractedTags.push(sourceBufLen, match);
+              }
+            } else {
+              extractedTags.push(sourceBufLen, match);
+            }
+          }
+        } else {
+          var literalText = htmlToText(match);
+          sourceBuf.push(literalText);
+          sourceBufLen += literalText.length;
+        }
+      }
+    }
+    return { source: sourceBuf.join(''), tags: extractedTags };
+  }
+
+  /** True if the given tag contains a class attribute with the nocode class. */
+  function isNoCodeTag(tag) {
+    return !!tag
+        // First canonicalize the representation of attributes
+        .replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,
+                 ' $1="$2$3$4"')
+        // Then look for the attribute we want.
+        .match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/);
+  }
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      source: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+    var notWs = /\S/;
+
+    /**
+     * Lexes job.source and produces an output array job.decorations of style
+     * classes preceded by the position at which they start in job.source in
+     * order.
+     *
+     * @param {Object} job an object like {@code
+     *    source: {string} sourceText plain text,
+     *    basePos: {int} position of job.source in the larger chunk of
+     *        sourceCode.
+     * }
+     */
+    var decorate = function (job) {
+      var sourceCode = job.source, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    if (options['hashComments']) {
+      if (options['cStyleComments']) {
+        // Stop C preprocessor declarations at an unclosed open comment
+        shortcutStylePatterns.push(
+            [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+             null, '#']);
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var keywords = options['keywords'].replace(/^\s+|\s+$/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /** Breaks {@code job.source} around style boundaries in
+    * {@code job.decorations} while re-interleaving {@code job.extractedTags},
+    * and leaves the result in {@code job.prettyPrintedHtml}.
+    * @param {Object} job like {
+    *    source: {string} source as plain text,
+    *    extractedTags: {Array.<number|string>} extractedTags chunks of raw
+    *                   html preceded by their position in {@code job.source}
+    *                   in order
+    *    decorations: {Array.<number|string} an array of style classes preceded
+    *                 by the position at which they start in job.source in order
+    * }
+    * @private
+    */
+  function recombineTagsAndDecorations(job) {
+    var sourceText = job.source;
+    var extractedTags = job.extractedTags;
+    var decorations = job.decorations;
+
+    var html = [];
+    // index past the last char in sourceText written to html
+    var outputIdx = 0;
+
+    var openDecoration = null;
+    var currentDecoration = null;
+    var tagPos = 0;  // index into extractedTags
+    var decPos = 0;  // index into decorations
+    var tabExpander = makeTabExpander(window['PR_TAB_WIDTH']);
+
+    var adjacentSpaceRe = /([\r\n ]) /g;
+    var startOrSpaceRe = /(^| ) /gm;
+    var newlineRe = /\r\n?|\n/g;
+    var trailingSpaceRe = /[ \r\n]$/;
+    var lastWasSpace = true;  // the last text chunk emitted ended with a space.
+
+    // See bug 71 and http://stackoverflow.com/questions/136443/why-doesnt-ie7-
+    var isIE678 = window['_pr_isIE6']();
+    var lineBreakHtml = (
+        isIE678
+        ? (job.sourceNode.tagName === 'PRE'
+           // Use line feeds instead of <br>s so that copying and pasting works
+           // on IE.
+           // Doing this on other browsers breaks lots of stuff since \r\n is
+           // treated as two newlines on Firefox.
+           ? (isIE678 === 6 ? '&#160;\r\n' :
+              isIE678 === 7 ? '&#160;<br>\r' : '&#160;\r')
+           // IE collapses multiple adjacent <br>s into 1 line break.
+           // Prefix every newline with '&#160;' to prevent such behavior.
+           // &nbsp; is the same as &#160; but works in XML as well as HTML.
+           : '&#160;<br />')
+        : '<br />');
+
+    // Look for a class like linenums or linenums:<n> where <n> is the 1-indexed
+    // number of the first line.
+    var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
+    var lineBreaker;
+    if (numberLines) {
+      var lineBreaks = [];
+      for (var i = 0; i < 10; ++i) {
+        lineBreaks[i] = lineBreakHtml + '</li><li class="L' + i + '">';
+      }
+      var lineNum = numberLines[1] && numberLines[1].length 
+          ? numberLines[1] - 1 : 0;  // Lines are 1-indexed
+      html.push('<ol class="linenums"><li class="L', (lineNum) % 10, '"');
+      if (lineNum) {
+        html.push(' value="', lineNum + 1, '"');
+      }
+      html.push('>');
+      lineBreaker = function () {
+        var lb = lineBreaks[++lineNum % 10];
+        // If a decoration is open, we need to close it before closing a list-item
+        // and reopen it on the other side of the list item.
+        return openDecoration
+            ? ('</span>' + lb + '<span class="' + openDecoration + '">') : lb;
+      };
+    } else {
+      lineBreaker = lineBreakHtml;
+    }
+
+    // A helper function that is responsible for opening sections of decoration
+    // and outputing properly escaped chunks of source
+    function emitTextUpTo(sourceIdx) {
+      if (sourceIdx > outputIdx) {
+        if (openDecoration && openDecoration !== currentDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        if (!openDecoration && currentDecoration) {
+          openDecoration = currentDecoration;
+          html.push('<span class="', openDecoration, '">');
+        }
+        // This interacts badly with some wikis which introduces paragraph tags
+        // into pre blocks for some strange reason.
+        // It's necessary for IE though which seems to lose the preformattedness
+        // of <pre> tags when their innerHTML is assigned.
+        // http://stud3.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+        // and it serves to undo the conversion of <br>s to newlines done in
+        // chunkify.
+        var htmlChunk = textToHtml(
+            tabExpander(sourceText.substring(outputIdx, sourceIdx)))
+            .replace(lastWasSpace
+                     ? startOrSpaceRe
+                     : adjacentSpaceRe, '$1&#160;');
+        // Keep track of whether we need to escape space at the beginning of the
+        // next chunk.
+        lastWasSpace = trailingSpaceRe.test(htmlChunk);
+        html.push(htmlChunk.replace(newlineRe, lineBreaker));
+        outputIdx = sourceIdx;
+      }
+    }
+
+    while (true) {
+      // Determine if we're going to consume a tag this time around.  Otherwise
+      // we consume a decoration or exit.
+      var outputTag;
+      if (tagPos < extractedTags.length) {
+        if (decPos < decorations.length) {
+          // Pick one giving preference to extractedTags since we shouldn't open
+          // a new style that we're going to have to immediately close in order
+          // to output a tag.
+          outputTag = extractedTags[tagPos] <= decorations[decPos];
+        } else {
+          outputTag = true;
+        }
+      } else {
+        outputTag = false;
+      }
+      // Consume either a decoration or a tag or exit.
+      if (outputTag) {
+        emitTextUpTo(extractedTags[tagPos]);
+        if (openDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        html.push(extractedTags[tagPos + 1]);
+        tagPos += 2;
+      } else if (decPos < decorations.length) {
+        emitTextUpTo(decorations[decPos]);
+        currentDecoration = decorations[decPos + 1];
+        decPos += 2;
+      } else {
+        break;
+      }
+    }
+    emitTextUpTo(sourceText.length);
+    if (openDecoration) {
+      html.push('</span>');
+    }
+    if (numberLines) { html.push('</li></ol>'); }
+    job.prettyPrintedHtml = html.join('');
+  }
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        source: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.source in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if ('console' in window) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null true false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var sourceCodeHtml = job.sourceCodeHtml;
+    var opt_langExtension = job.langExtension;
+
+    // Prepopulate output in case processing fails with an exception.
+    job.prettyPrintedHtml = sourceCodeHtml;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndExtractedTags = extractTags(sourceCodeHtml);
+      /** Plain text. @type {string} */
+      var source = sourceAndExtractedTags.source;
+      job.source = source;
+      job.basePos = 0;
+
+      /** Even entries are positions in source in ascending order.  Odd entries
+        * are tags that were extracted at that position.
+        * @type {Array.<number|string>}
+        */
+      job.extractedTags = sourceAndExtractedTags.tags;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+      // Integrate the decorations and tags back into the source code to produce
+      // a decorated html string which is left in job.prettyPrintedHtml.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension) {
+    var job = {
+      sourceCodeHtml: sourceCodeHtml,
+      langExtension: opt_langExtension
+    };
+    applyDecorator(job);
+    return job.prettyPrintedHtml;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return (new Date).getTime(); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock.now() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock.now() < endTime; k++) {
+        var cs = elements[k];
+        if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR_registerLangHandler.
+          var langExtension = cs.className.match(/\blang-(\w+)\b/);
+          if (langExtension) { langExtension = langExtension[1]; }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // fetch the content as a snippet of properly escaped HTML.
+            // Firefox adds newlines at the end.
+            var content = getInnerHtml(cs);
+            content = content.replace(/(?:\r\n?|\n)$/, '');
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              sourceCodeHtml: content,
+              langExtension: langExtension,
+              sourceNode: cs
+            };
+            applyDecorator(prettyPrintingJob);
+            replaceWithPrettyPrintedHtml();
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    function replaceWithPrettyPrintedHtml() {
+      var newContent = prettyPrintingJob.prettyPrintedHtml;
+      if (!newContent) { return; }
+      var cs = prettyPrintingJob.sourceNode;
+
+      // push the prettified html back into the tag.
+      if (!isRawContent(cs)) {
+        // just replace the old html with the new
+        cs.innerHTML = newContent;
+      } else {
+        // we need to change the tag to a <pre> since <xmp>s do not allow
+        // embedded tags such as the span tags used to attach styles to
+        // sections of source code.
+        var pre = document.createElement('PRE');
+        for (var i = 0; i < cs.attributes.length; ++i) {
+          var a = cs.attributes[i];
+          if (a.specified) {
+            var aname = a.name.toLowerCase();
+            if (aname === 'class') {
+              pre.className = a.value;  // For IE 6
+            } else {
+              pre.setAttribute(a.name, a.value);
+            }
+          }
+        }
+        pre.innerHTML = newContent;
+
+        // remove the old
+        cs.parentNode.replaceChild(pre, cs);
+        cs = pre;
+      }
+    }
+
+    doWork();
+    content = document.getElementById('content');
+    highlight(content, 'MUST NOT');
+    highlight(content, 'SHALL NOT');
+    highlight(content, 'MAY NOT');
+    highlight(content, 'SHOULD NOT');
+    highlight(content, 'MUST');
+    highlight(content, 'SHALL');
+    highlight(content, 'MAY');
+    highlight(content, 'SHOULD');
+
+  }
+
+function highlight(container,what) {
+    var content = container.innerHTML;
+    pattern = new RegExp(what,'g');
+    replaceWith = '<b>'+what+'</b>',
+    container.innerHTML = content.replace(pattern,replaceWith);
+}
+
+  window['PR_normalizedHtml'] = normalizedHtml;
+  window['prettyPrintOne'] = prettyPrintOne;
+  window['prettyPrint'] = prettyPrint;
+  window['PR'] = {
+        'combinePrefixPatterns': combinePrefixPatterns,
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
+
+window.onload= function() { 
+       prettyPrint();
+};
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html b/org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html
new file mode 100644 (file)
index 0000000..3fb6d9d
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>WebSetting API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::WebSetting">
+<div class="supported-platforms"><img class="mobile-mandatory emulator" title="Mandatory, Supported by Tizen Mobile emulator" src="mw_icon.png"></div>
+<div class="title"><h1>WebSetting API</h1></div>
+<div class="brief">
+ This Web setting API defines a set of APIs that manages the setting states of the Web view in your Web application.
+        </div>
+<div class="description">
+        <p>
+A Tizen Web application includes a web view and the properties below of the web view can be managed via the Web setting API:
+        </p>
+        <ul>
+          <li>
+ Delete all the cookies saved for the web view in the Web application.           </li>
+          <li>
+ Set a custom user agent string of the web view in the Web application.          </li>
+        </ul>
+        <p>
+Note that all the settings using the Web setting API is bound to your application; thus, no other applications are affected via the Web setting API calls within your application.
+        </p>
+        <p>
+For more information on the Web setting features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/web_setting_w.htm">Web Setting Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#WebSettingObject">WebSettingObject</a>
+</li>
+<li>1.2. <a href="#WebSettingManager">WebSettingManager</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#WebSettingObject">WebSettingObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#WebSettingManager">WebSettingManager</a></td>
+<td>void <a href="#WebSettingManager::setUserAgentString">setUserAgentString</a> (DOMString userAgent, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#WebSettingManager::removeAllCookies">removeAllCookies</a> (optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="WebSettingObject">
+<a class="backward-compatibility-anchor" name="::WebSetting::WebSettingObject"></a><h3>1.1. WebSettingObject</h3>
+<div class="brief">
+ This interface defines what is instantiated for the Web setting API by the <em>Tizen</em> object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface WebSettingObject {
+    readonly attribute <a href="#WebSettingManager">WebSettingManager</a> websetting;
+  };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#WebSettingObject">WebSettingObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="description">
+          <p>
+<em>tizen.websetting</em> object is available to manage the settings of the Web view in your Web application.
+          </p>
+         </div>
+</div>
+<div class="interface" id="WebSettingManager">
+<a class="backward-compatibility-anchor" name="::WebSetting::WebSettingManager"></a><h3>1.2. WebSettingManager</h3>
+<div class="brief">
+ This is the top-level interface for the WebSetting API that managed the settings of the Web view in your Web application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface WebSettingManager {
+
+   void setUserAgentString(DOMString userAgent,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+   void removeAllCookies(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+   };</pre>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="WebSettingManager::setUserAgentString">
+<a class="backward-compatibility-anchor" name="::WebSetting::WebSettingManager::setUserAgentString"></a><code><b><span class="methodName">setUserAgentString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the custom user agent string for your Web application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUserAgentString(DOMString userAgent, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+This method allows the user to set the user agent string of the Web view in the Web application.  By default, the Web view in your application
+has the same user agent string as the Tizen browser on the device.
+            </p>
+            <p>
+The <em>ErrorCallback</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError - If any error occurs while setting the user agent string.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">userAgent</span>: 
+ User agent to set for the Web view in your Web application.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ To be invoked if the requested setting operation succeeds.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ To be invoked if the requested setting operation fails.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successCallback() {
+     console.log("The requested user agent string has just been set successfully.");
+ }
+
+ tizen.websetting.setUserAgentString("the new user agent string to set", successCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="WebSettingManager::removeAllCookies">
+<a class="backward-compatibility-anchor" name="::WebSetting::WebSettingManager::removeAllCookies"></a><code><b><span class="methodName">removeAllCookies</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes all the cookies saved for the Web view in your Web application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAllCookies(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+The Web view in your Web application can store cookies like a browser. This method allows the user to remove all the cookies saved for the Web application.
+            </p>
+            <p>
+The <em>ErrorCallback</em> is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError - If any error occurs while deleting the cookies.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/websetting
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ To be invoked if the requested delete operation succeeds.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ To be invoked if the requested delete operation fails.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successCallback() {
+     console.log("The cookies saved for your application have just been removed.");
+ }
+
+ tizen.websetting.removeAllCookies(successCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">2. Full WebIDL</h2>
+<pre class="webidl prettyprint">module WebSetting {
+
+  [NoInterfaceObject] interface WebSettingObject {
+    readonly attribute <a href="#WebSettingManager">WebSettingManager</a> websetting;
+  };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#WebSettingObject">WebSettingObject</a>;
+
+  [NoInterfaceObject] interface WebSettingManager {
+
+   void setUserAgentString(DOMString userAgent,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+   void removeAllCookies(optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+   };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon.png differ
diff --git a/org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon_optional.png b/org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon_optional.png
new file mode 100644 (file)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/mobile/tizen/ww_icon_optional.png differ
diff --git a/org.tizen.web.apireference/html/device_api/wearable/index.html b/org.tizen.web.apireference/html/device_api/wearable/index.html
new file mode 100644 (file)
index 0000000..19c100c
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/index.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <link media="screen" href="./tizen/tizen.css" type="text/css" rel="stylesheet">
+        <title>Tizen Web Device API Reference</title>
+        <style>
+          table.api-list { width: 90%; margin-left: 2%; }
+          table.api-list tr > td:nth-child(1) { width: 13%; }
+          table.api-list tr > td:nth-child(3) { width: 3em; padding-left: 1em; }
+          table.api-list tr > td:nth-child(4) { width: 5em; }
+          table.api-list tr > td:nth-child(5) { width: 9em; text-align: center; }
+          table.api-list tr > td:nth-child(6) { width: 5em; }
+          table.api-list tr > td:nth-child(7) { width: 9em; text-align: center; }
+          table.api-list tr > td:nth-child(4) .optional { font-style: normal; }
+          table.api-list span.emulated, table.api-list span.partially-emulated { font-weight: bold }
+          /*.emulator-partial { background-color: #ffd0d0; }*/
+          table.api-list .partial-support { font-size: 75%; }
+          table.api-list span.mandatory::after { content: "*"; font-weight: normal; }
+        </style>
+    </head>
+    <body id="content">
+        <div id="title" class="api">
+
+            <h1>Tizen Wearable Web Device API Reference</h1>
+                    <div class="brief">
+                            <p>The Tizen Web Device API, based on JavaScript, provides you advanced access to the device&#39;s platform capabilities.</p>
+                            <p>You can develop rich Web applications using the Tizen Web Device APIs. You can, for example, control the application life-cycle, manage your schedules, exchange data, or make payments using NFC.</p>
+                            <p>The APIs listed in this category are created by the Tizen platform to expose device capabilities to Web Applications.</p>
+
+            <h4 id="Tizen">Tizen Common</h4>
+            <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/tizen.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Tizen </a></td>
+                <td>The base object for accessing the Tizen Web Device API.</td>
+                <td>1.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr></tbody></table><h4 id="Application">Application</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/alarm.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Alarm</a></td>
+                <td>This API provides functionality for setting and unsetting alarms.</td>
+                <td>1.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/application.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Application</a></td>
+                <td>This API provides information about running and installed applications and controls them.</td>
+                <td>1.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/package.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Package</a></td>
+                <td>This API provides information install/uninstall package and get information about installed packages.</td>
+                <td>2.1</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr></tbody></table><h4 id="Contents">Content</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/content.html" data-origin="tizen" data-domain="content" data-category="core" data-status="D" data-version="">
+                        Content</a></td>
+                <td>This API provides functionality to discover multimedia content (such as images, videos or music).</td>
+                <td>2.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/download.html" data-origin="tizen" data-domain="content" data-category="core" data-status="D" data-version="">
+                        Download</a></td>
+                <td>This API provides interfaces and methods for downloading remote objects by HTTP request.</td>
+                <td>2.0</td>
+
+                <td>Optional</td>
+                <td>Yes</td>
+                </tr></tbody></table><h4 id="I/O">Input/Output</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/filesystem.html" data-origin="tizen" data-domain="filesystem" data-category="core" data-status="D" data-version="">
+                        Filesystem</a></td>
+                <td>This API provides access to the file system of a device. This API might be obsolete in the future when W3C File APIs are extended to access system-sensitive files by Web applications. </td>
+                <td>1.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/messageport.html" data-origin="tizen" data-domain="filesystem" data-category="core" data-status="D" data-version="">
+                        Message Port</a></td>
+                <td>This API provides the functionality for communication with other applications. </td>
+                <td>2.1</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr></tbody></table><h4 id="Multimedia">Multimedia</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/mediakey.html" data-origin="tizen" data-domain="media" data-category="core" data-status="S" data-version="">
+                        Media Key</a></td>
+                <td>This API provides a way to get notified when a media key has been pressed or released.</td>
+                <td>2.3</td>
+
+                <td>Optional</td>
+                <td>No</td>
+                </tr><tr><td><a href="tizen/sound.html" data-origin="tizen" data-domain="media" data-category="core" data-status="S" data-version="">
+                        Sound</a></td>
+                <td>This API provides a way to control sound volume level.</td>
+                <td>2.3</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr></tbody></table><h4 id="System">System</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/humanactivitymonitor.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Human Activity Monitor</a></td>
+                <td>This API provides interfaces and methods for retrieving human activity data from the various sensors on the device.</td>
+                <td>2.3</td>
+
+                <td>Optional</td>
+                <td>Yes<div class="partial-support">Only HRM</div></td>
+                </tr><tr><td><a href="tizen/power.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Power</a></td>
+                <td>This API provides interfaces and methods for controlling power resources.</td>
+                <td>2.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/sensor.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        Sensor</a></td>
+                <td>This API provides interfaces and methods for getting sensor data from the various sensors on the device.</td>
+                <td>2.3</td>
+
+                <td>Optional</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/systeminfo.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        System Information</a></td>
+                <td>This API provides information about the device's display, network, storage and other capabilities.</td>
+                <td>1.0</td>
+
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr><tr><td><a href="tizen/systemsetting.html" data-origin="tizen" data-domain="system" data-category="core" data-status="D" data-version="">
+                        System Setting</a></td>
+                <td>This API provides system setting functionality.</td>
+                <td>2.0</td>
+                <td>Mandatory</td>
+                <td>Yes<div class="partial-support">Only HOME_SCREEN, INCOMING_CALL</div></td>
+                </tr><tr><td><a href="tizen/time.html" data-origin="tizen" data-domain="system" data-category="core" data-status="S" data-version="">
+                        Time</a></td>
+                <td>This API exposes information about date, time and time zones.</td>
+                <td>1.0</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr></tbody></table><h4 id="User Interface">User Interface</h4>
+             <table class="api-list"><thead><tr><th>API</th><th>Description</th><th>Version (Since)</th><th>Wearable</th><th>Supported on<br>Wearable Emulator</th></tr>
+       </thead><tbody><tr><td><a href="tizen/badge.html" data-origin="tizen" data-domain="ui" data-category="core" data-status="S" data-version="">
+                        Badge</a></td>
+                <td>This API provides a way to display the count of notifications(badge) on home screen.</td>
+                <td>2.3</td>
+                <td>Mandatory</td>
+                <td>Yes</td>
+                </tr></tbody></table><div id="footer">
+            <div class="copyright" align="center">
+ 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>.
+            </div>
+
+        <!--start-->
+            <script type="text/javascript">
+            var _gaq = _gaq || [];
+           _gaq.push(['_setAccount', 'UA-25976949-1']);
+               _gaq.push(['_trackPageview']);
+                         (function() {
+                                       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                                       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--></div>
+
+    </div>
+    </div>
+  </body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html
new file mode 100644 (file)
index 0000000..d8ed81f
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html
@@ -0,0 +1,880 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Alarm API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Alarm">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Alarm API</h1></div>
+<div class="brief">
+ The Alarm API provides functionality for scheduling the system alarm.
+It allows you to run other applications and have them perform operations at a specific time.
+You can schedule an alarm to go off once or to repeat at specific intervals.
+        </div>
+<div class="description">
+        <p>
+Each application has its own individual alarm storage, that is, applications cannot view or edit alarms set by other applications.
+        </p>
+        <p>
+Once an alarm goes off, it will be removed from the alarm storage automatically.
+<em>AlarmManager</em> provides methods to manage alarms such as adding and removing.
+For more information on the Alarm features, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/alarm_w.htm">Alarm Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#AlarmId">AlarmId</a>
+</li>
+<li>1.2. <a href="#ByDayValue">ByDayValue</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#AlarmManagerObject">AlarmManagerObject</a>
+</li>
+<li>2.2. <a href="#AlarmManager">AlarmManager</a>
+</li>
+<li>2.3. <a href="#Alarm">Alarm</a>
+</li>
+<li>2.4. <a href="#AlarmRelative">AlarmRelative</a>
+</li>
+<li>2.5. <a href="#AlarmAbsolute">AlarmAbsolute</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#AlarmManagerObject">AlarmManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AlarmManager">AlarmManager</a></td>
+<td>void <a href="#AlarmManager::add">add</a> (<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl)<br>
+    void <a href="#AlarmManager::remove">remove</a> (<a href="#AlarmId">AlarmId</a> id)<br>
+    void <a href="#AlarmManager::removeAll">removeAll</a> ()<br>
+    <a href="#Alarm">Alarm</a> <a href="#AlarmManager::get">get</a> (<a href="#AlarmId">AlarmId</a> id)<br>
+    <a href="#Alarm">Alarm</a>[] <a href="#AlarmManager::getAll">getAll</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Alarm">Alarm</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AlarmRelative">AlarmRelative</a></td>
+<td>long? <a href="#AlarmRelative::getRemainingSeconds">getRemainingSeconds</a> ()</td>
+</tr>
+<tr>
+<td><a href="#AlarmAbsolute">AlarmAbsolute</a></td>
+<td>Date? <a href="#AlarmAbsolute::getNextScheduledDate">getNextScheduledDate</a> ()</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="AlarmId">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmId"></a><h3>1.1. AlarmId</h3>
+<div class="brief">
+ An alarm identifier.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString AlarmId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="enum" id="ByDayValue">
+<a class="backward-compatibility-anchor" name="::Alarm::ByDayValue"></a><h3>1.2. ByDayValue</h3>
+<div class="brief">
+ Specifies the values for the <a href="#AlarmAbsolute::daysOfTheWeek">daysOfTheWeek</a> attribute.
+          </div>
+<pre class="webidl prettyprint">    enum ByDayValue { "MO", "TU", "WE", "TH", "FR", "SA", "SU" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+"MO" to "SU" correspond to "Monday" to "Sunday".
+          </p>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="AlarmManagerObject">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManagerObject"></a><h3>2.1. AlarmManagerObject</h3>
+<div class="brief">
+ The AlarmManagerObject interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+The <em>tizen.alarm </em>object allows access to the functionality of the Alarm API.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AlarmManagerObject {
+        readonly attribute <a href="#AlarmManager">AlarmManager</a> alarm;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#AlarmManagerObject">AlarmManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="AlarmManager">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager"></a><h3>2.2. AlarmManager</h3>
+<div class="brief">
+ The AlarmManager interface provides methods to manage alarms.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface AlarmManager {
+        const long PERIOD_MINUTE = 60;
+
+        const long PERIOD_HOUR = 3600;
+
+        const long PERIOD_DAY = 86400;
+
+        const long PERIOD_WEEK = 604800;
+
+        void add(<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a> get(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="AlarmManager::PERIOD_MINUTE">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_MINUTE"></a><span class="name">PERIOD_MINUTE</span><div class="brief">
+ The period of a minute.
+It defines the number of seconds per minute.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="AlarmManager::PERIOD_HOUR">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_HOUR"></a><span class="name">PERIOD_HOUR</span><div class="brief">
+ The period of an hour.
+It defines the number of seconds per hour.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="AlarmManager::PERIOD_DAY">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_DAY"></a><span class="name">PERIOD_DAY</span><div class="brief">
+ The period of a day.
+It defines the number of seconds per day.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="AlarmManager::PERIOD_WEEK">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::PERIOD_WEEK"></a><span class="name">PERIOD_WEEK</span><div class="brief">
+ The period of a week.
+It defines the number of seconds in a week.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AlarmManager::add">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds an alarm to the storage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Sets an alarm with the application ID to be run. You should definitely provide the application ID to run
+and the <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">application control</a>information if it is necessary. 
+For more information about the application control, see <a href="application.html">The Application API</a>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/alarm
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">alarm</span>: 
+ An alarm to add. It can be either <em>AlarmRelative </em> or <em>AlarmAbsolute</em>.
+                </li>
+          <li class="param">
+<span class="name">applicationId</span>: 
+ The application ID to run when the alarm is triggered.
+                </li>
+          <li class="param">
+<span class="name">appControl</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The data structure describing application control details.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter does not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Triggers an alarm on a given date/time
+ var alarm = new tizen.AlarmAbsolute(new Date(2014, 10, 4, 8, 0));
+ var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view");
+ tizen.alarm.add(alarm, tizen.application.getCurrentApplication().appInfo.id, appControl);
+ console.log("Alarm added with id: " + alarm.id);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::remove">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes an alarm from the storage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#AlarmId">AlarmId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If an alarm goes off, it will be removed from the storage automatically.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/alarm
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of the alarm to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if this alarm identifier cannot be found in the storage.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter does not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var alarms = tizen.alarm.getAll();
+
+ // Removes the first alarm
+ if (alarms.length &gt; 0) {
+   try {
+     tizen.alarm.remove(alarms[0].id);
+     console.log("Successfully removed the first alarm.");
+   } catch(error) {
+     console.log("Failed to remove the first alarm.");
+   }
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::removeAll">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::removeAll"></a><code><b><span class="methodName">removeAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes all alarms added by an application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Because each application has its own alarm storage, this method removes alarms only added by the calling application.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/alarm
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.alarm.removeAll();
+ console.log("remove all registered alarms in the storage.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::get">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns an alarm as per the specified identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Alarm">Alarm</a> get(<a href="#AlarmId">AlarmId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The alarm ID to retrieve.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Alarm An alarm object with the specified ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if this alarm identifier cannot be found in the storage.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any input parameter does not contain a valid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Sets an alarm
+ var date = new Date();
+ date.setHours(date.getHours()+1);
+ var abs_alarm = new tizen.AlarmAbsolute(date);
+
+ // Adds an alarm
+ tizen.alarm.add(abs_alarm, tizen.application.getCurrentApplication().appInfo.id);
+
+ // Gets an alarm
+ var alarm = tizen.alarm.get(abs_alarm.id);
+ console.log("The alarm will trigger at " + alarm.getNextScheduledDate());
+ </pre>
+</div>
+</dd>
+<dt class="method" id="AlarmManager::getAll">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmManager::getAll"></a><code><b><span class="methodName">getAll</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Retrieves all alarms in an application storage.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Alarm">Alarm</a>[] getAll();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Alarms that have already been triggered are removed automatically from the storage.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Alarm[] All Alarm objects.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var alarms = tizen.alarm.getAll();
+ console.log(alarms.length + " alarms present in the storage.");
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Alarm">
+<a class="backward-compatibility-anchor" name="::Alarm::Alarm"></a><h3>2.3. Alarm</h3>
+<div class="brief">
+ The Alarm interface is an abstract interface for alarm types.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface Alarm {
+        readonly attribute <a href="#AlarmId">AlarmId</a>? id;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Alarm::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AlarmId </span><span class="name">id</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The alarm identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="AlarmRelative">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmRelative"></a><h3>2.4. AlarmRelative</h3>
+<div class="brief">
+ The AlarmRelative interface provides the relative alarm, which occurs at a fixed interval in future.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(long delay, optional long? period)]
+    interface AlarmRelative : <a href="#Alarm">Alarm</a> {
+        readonly attribute long delay;
+
+        readonly attribute long? period;
+
+        long? getRemainingSeconds() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This alarm triggers after a duration mentioned in the <em>delay</em> attribute from the moment the alarm is added.
+If a <em>period</em> is provided, the alarm keeps triggering for the given interval.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm in 3 hours from now
+ var alarm1 = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
+ tizen.alarm.add(alarm1, appId);
+
+ // Sets an alarm in one hour, recurring after every 2 minutes
+ var alarm2 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR, 2 * tizen.alarm.PERIOD_MINUTE);
+ tizen.alarm.add(alarm2, appId);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AlarmRelative::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AlarmRelative(long delay, optional long? period);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AlarmRelative::delay">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">delay</span></span><div class="brief">
+ An attribute to store the difference in time (in seconds) between when an alarm is added and when it is triggered.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AlarmRelative::period">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">period</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the duration in seconds between each trigger of an alarm.
+By default, this attribute is set to <var>null</var>, indicating that this alarm does not repeat.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AlarmRelative::getRemainingSeconds">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmRelative::getRemainingSeconds"></a><code><b><span class="methodName">getRemainingSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns the duration in seconds before the next alarm is triggered.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long? getRemainingSeconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the alarm has expired, this method returns <var>null</var>.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The duration before the next alarm is triggered.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm in 3 hours from now
+ var alarm = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
+ tizen.alarm.add(alarm, appId);
+
+ var sec = alarm.getRemainingSeconds();
+ console.log("remaining time is " + sec);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="AlarmAbsolute">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmAbsolute"></a><h3>2.5. AlarmAbsolute</h3>
+<div class="brief">
+ The AlarmAbsolute interface provides an absolute alarm, which triggers at a specified absolute date.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(Date date),
+
+     Constructor(Date date, <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek),
+
+     Constructor(Date date, long period)]
+    interface AlarmAbsolute : <a href="#Alarm">Alarm</a> {
+        readonly attribute Date date;
+
+        readonly attribute long? period;
+
+        readonly attribute <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+
+        Date? getNextScheduledDate() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+If a <em>period</em> is provided, the alarm keeps triggering for the given interval. If the <em>daysOfTheWeek</em> array is not empty, the alarm triggers every week, for the given days, at the time defined by the <em>date</em> attribute.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm on January 1st 2014 08:00
+ var date = new Date(2014, 0, 1, 8, 0);
+ var alarm1 = new tizen.AlarmAbsolute(date);
+ tizen.alarm.add(alarm1, appId);
+
+ // Sets an alarm on January 1st 2014 08:00, repeating every 2 days
+ var alarm2 = new tizen.AlarmAbsolute(date, 2 * tizen.alarm.PERIOD_DAY);
+ tizen.alarm.add(alarm2, appId);
+
+ // Sets an alarm occurring on every Saturday and Sunday, at 08:00, starting from January 1st 2014
+ var alarm3 = new tizen.AlarmAbsolute(date, ["SA", "SU"]);
+ tizen.alarm.add(alarm3, appId);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AlarmAbsolute::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">AlarmAbsolute(Date date);</pre>
+<pre class="webidl prettyprint">AlarmAbsolute(Date date, <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek);</pre>
+<pre class="webidl prettyprint">AlarmAbsolute(Date date, long period);</pre>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AlarmAbsolute::date">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">date</span></span><div class="brief">
+ An attribute to store the absolute date/time when the alarm is initially triggered.
+            </div>
+<div class="description">
+            <p>
+This attribute is precise to the second. Milliseconds will be ignored.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AlarmAbsolute::period">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">period</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the duration in seconds between each trigger of the alarm.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>, indicating that this alarm does not repeat.
+The <em>period</em> and <em>daysOfTheWeek</em> attributes are mutually exclusive.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AlarmAbsolute::daysOfTheWeek">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ByDayValue[]
+                      </span><span class="name">daysOfTheWeek</span></span><div class="brief">
+ An attribute to store the days of the week associated with the recurrence rule.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to an empty array.
+The <em>period</em> and <em>daysOfTheWeek</em> attributes are mutually exclusive.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="AlarmAbsolute::getNextScheduledDate">
+<a class="backward-compatibility-anchor" name="::Alarm::AlarmAbsolute::getNextScheduledDate"></a><code><b><span class="methodName">getNextScheduledDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns the date / time of the next alarm trigger.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">Date? getNextScheduledDate();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the alarm has expired, this method returns <var>null</var>. The returned date is precise to the second.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Date The date/time of the next alarm trigger.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current application ID.
+ var appId = tizen.application.getCurrentApplication().appInfo.id;
+
+ // Sets an alarm on January 1st 2014 08:00
+ var date = new Date(2014, 0, 1, 8, 0);
+ var alarm1 = new tizen.AlarmAbsolute(date);
+ tizen.alarm.add(alarm1, appId);
+
+ var date = alarm1.getNextScheduledDate();
+ console.log("next scheduled time is " + date);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Alarm {
+    typedef DOMString AlarmId;
+
+    enum ByDayValue { "MO", "TU", "WE", "TH", "FR", "SA", "SU" };
+
+    [NoInterfaceObject] interface AlarmManagerObject {
+        readonly attribute <a href="#AlarmManager">AlarmManager</a> alarm;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#AlarmManagerObject">AlarmManagerObject</a>;
+
+    [NoInterfaceObject] interface AlarmManager {
+        const long PERIOD_MINUTE = 60;
+
+        const long PERIOD_HOUR = 3600;
+
+        const long PERIOD_DAY = 86400;
+
+        const long PERIOD_WEEK = 604800;
+
+        void add(<a href="#Alarm">Alarm</a> alarm, <a href="application.html#ApplicationId">ApplicationId</a> applicationId, optional <a href="application.html#ApplicationControl">ApplicationControl</a>? appControl) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void remove(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a> get(<a href="#AlarmId">AlarmId</a> id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#Alarm">Alarm</a>[] getAll() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface Alarm {
+        readonly attribute <a href="#AlarmId">AlarmId</a>? id;
+    };
+
+    [Constructor(long delay, optional long? period)]
+    interface AlarmRelative : <a href="#Alarm">Alarm</a> {
+        readonly attribute long delay;
+
+        readonly attribute long? period;
+
+        long? getRemainingSeconds() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Constructor(Date date),
+
+     Constructor(Date date, <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek),
+
+     Constructor(Date date, long period)]
+    interface AlarmAbsolute : <a href="#Alarm">Alarm</a> {
+        readonly attribute Date date;
+
+        readonly attribute long? period;
+
+        readonly attribute <a href="#ByDayValue">ByDayValue</a>[] daysOfTheWeek;
+
+        Date? getNextScheduledDate() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/application.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/application.html
new file mode 100644 (file)
index 0000000..a6f0b63
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/application.html
@@ -0,0 +1,2415 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Application API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Application">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Application API</h1></div>
+<div class="brief">
+ This API provides a way to launch other applications and access
+application management.
+        </div>
+<div class="description">
+        <p>
+The <em>ApplicationManager</em> interface also provides methods to launch other applications
+explicitly and implicitly through the <em>ApplicationControl</em> interface.
+The <em>ApplicationControl</em> interface consists of an operation, URI, and MIME type
+and also describes an action to be performed by other
+applications and can carry the result from the subsequent application.
+The <em>ApplicationManager</em> interface also provides methods to handle the application
+lifecycle, to access the installed applications on the device, and to let
+an application be notified of a change in the application list.
+        </p>
+        <p>
+The <em>Application</em> interface defines the current application's information and
+the basic operations for the current application such as exit or hide.
+        </p>
+        <p>
+For more information on the Application features, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#ApplicationId">ApplicationId</a>
+</li>
+<li>1.2. <a href="#ApplicationContextId">ApplicationContextId</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ApplicationManagerObject">ApplicationManagerObject</a>
+</li>
+<li>2.2. <a href="#ApplicationManager">ApplicationManager</a>
+</li>
+<li>2.3. <a href="#Application">Application</a>
+</li>
+<li>2.4. <a href="#ApplicationInformation">ApplicationInformation</a>
+</li>
+<li>2.5. <a href="#ApplicationContext">ApplicationContext</a>
+</li>
+<li>2.6. <a href="#ApplicationControlData">ApplicationControlData</a>
+</li>
+<li>2.7. <a href="#ApplicationControl">ApplicationControl</a>
+</li>
+<li>2.8. <a href="#RequestedApplicationControl">RequestedApplicationControl</a>
+</li>
+<li>2.9. <a href="#ApplicationCertificate">ApplicationCertificate</a>
+</li>
+<li>2.10. <a href="#ApplicationMetaData">ApplicationMetaData</a>
+</li>
+<li>2.11. <a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a>
+</li>
+<li>2.12. <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a>
+</li>
+<li>2.13. <a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a>
+</li>
+<li>2.14. <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>
+</li>
+<li>2.15. <a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ApplicationManagerObject">ApplicationManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationManager">ApplicationManager</a></td>
+<td>
+<a href="#Application">Application</a> <a href="#ApplicationManager::getCurrentApplication">getCurrentApplication</a> ()<br>
+    void <a href="#ApplicationManager::kill">kill</a> (<a href="#ApplicationContextId">ApplicationContextId</a> contextId, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ApplicationManager::launch">launch</a> (<a href="#ApplicationId">ApplicationId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ApplicationManager::launchAppControl">launchAppControl</a> (<a href="#ApplicationControl">ApplicationControl</a> appControl, optional <a href="#ApplicationId">ApplicationId</a>? id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback)<br>
+    void <a href="#ApplicationManager::findAppControl">findAppControl</a> (<a href="#ApplicationControl">ApplicationControl</a> appControl, <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ApplicationManager::getAppsContext">getAppsContext</a> (<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#ApplicationContext">ApplicationContext</a> <a href="#ApplicationManager::getAppContext">getAppContext</a> (optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId)<br>
+    void <a href="#ApplicationManager::getAppsInfo">getAppsInfo</a> (<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#ApplicationInformation">ApplicationInformation</a> <a href="#ApplicationManager::getAppInfo">getAppInfo</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    <a href="#ApplicationCertificate">ApplicationCertificate</a>[] <a href="#ApplicationManager::getAppCerts">getAppCerts</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    DOMString <a href="#ApplicationManager::getAppSharedURI">getAppSharedURI</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    <a href="#ApplicationMetaData">ApplicationMetaData</a>[] <a href="#ApplicationManager::getAppMetaData">getAppMetaData</a> (optional <a href="#ApplicationId">ApplicationId</a>? id)<br>
+    long <a href="#ApplicationManager::addAppInfoEventListener">addAppInfoEventListener</a> (<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback)<br>
+    void <a href="#ApplicationManager::removeAppInfoEventListener">removeAppInfoEventListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#Application">Application</a></td>
+<td>void <a href="#Application::exit">exit</a> ()<br>
+    void <a href="#Application::hide">hide</a> ()<br>
+    <a href="#RequestedApplicationControl">RequestedApplicationControl</a> <a href="#Application::getRequestedAppControl">getRequestedAppControl</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ApplicationInformation">ApplicationInformation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationContext">ApplicationContext</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationControlData">ApplicationControlData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationControl">ApplicationControl</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#RequestedApplicationControl">RequestedApplicationControl</a></td>
+<td>void <a href="#RequestedApplicationControl::replyResult">replyResult</a> (optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)<br>
+    void <a href="#RequestedApplicationControl::replyFailure">replyFailure</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ApplicationCertificate">ApplicationCertificate</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationMetaData">ApplicationMetaData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a></td>
+<td>void <a href="#ApplicationInformationArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray)</td>
+</tr>
+<tr>
+<td><a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a></td>
+<td>void <a href="#FindAppControlSuccessCallback::onsuccess">onsuccess</a> (<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl)</td>
+</tr>
+<tr>
+<td><a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a></td>
+<td>void <a href="#ApplicationContextArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ApplicationContext">ApplicationContext</a>[] contexts)</td>
+</tr>
+<tr>
+<td><a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a></td>
+<td>void <a href="#ApplicationControlDataArrayReplyCallback::onsuccess">onsuccess</a> (optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)<br>
+    void <a href="#ApplicationControlDataArrayReplyCallback::onfailure">onfailure</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a></td>
+<td>void <a href="#ApplicationInformationEventCallback::oninstalled">oninstalled</a> (<a href="#ApplicationInformation">ApplicationInformation</a> info)<br>
+    void <a href="#ApplicationInformationEventCallback::onupdated">onupdated</a> (<a href="#ApplicationInformation">ApplicationInformation</a> info)<br>
+    void <a href="#ApplicationInformationEventCallback::onuninstalled">onuninstalled</a> (<a href="#ApplicationId">ApplicationId</a> id)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="ApplicationId">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationId"></a><h3>1.1. ApplicationId</h3>
+<div class="brief">
+ The unique ID for an installed application.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ApplicationId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="typedef" id="ApplicationContextId">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContextId"></a><h3>1.2. ApplicationContextId</h3>
+<div class="brief">
+ The unique ID for a running application.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ApplicationContextId;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ApplicationManagerObject">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManagerObject"></a><h3>2.1. ApplicationManagerObject</h3>
+<div class="brief">
+ This interface defines what is instantiated by the <em>Tizen </em>object on the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationManagerObject {
+    readonly attribute <a href="#ApplicationManager">ApplicationManager</a> application;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ApplicationManagerObject">ApplicationManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.application </em>object allows access to the Application API's functionality.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ApplicationManager">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager"></a><h3>2.2. ApplicationManager</h3>
+<div class="brief">
+ The ApplicationManager interface provides methods to retrieve application information, launch, install application, etc.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationManager {
+
+    <a href="#Application">Application</a> getCurrentApplication() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void kill(<a href="#ApplicationContextId">ApplicationContextId</a> contextId,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launch(<a href="#ApplicationId">ApplicationId</a> id,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launchAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                          optional <a href="#ApplicationId">ApplicationId</a>? id,
+                          optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                          optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                        <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsContext(<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationContext">ApplicationContext</a> getAppContext(optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsInfo(<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationInformation">ApplicationInformation</a> getAppInfo(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationCertificate">ApplicationCertificate</a>[] getAppCerts(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getAppSharedURI(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationMetaData">ApplicationMetaData</a>[] getAppMetaData(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addAppInfoEventListener(<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAppInfoEventListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationManager::getCurrentApplication">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getCurrentApplication"></a><code><b><span class="methodName">getCurrentApplication</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the <em>Application </em>object defining the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Application">Application</a> getCurrentApplication();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Application The data structure that defines the current application.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var app = tizen.application.getCurrentApplication();
+ console.log("Current application's app id is " + app.appInfo.id);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::kill">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::kill"></a><code><b><span class="methodName">kill</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Kills an application with the specified application context ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void kill(<a href="#ApplicationContextId">ApplicationContextId</a> contextId, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the context is not found with the specified context ID.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value
+or if the specified context ID matches the context ID of the calling application.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/appmanager.kill
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contextId</span>: 
+ The identifier of the application to kill
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an application is killed successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onKillSuccess() {
+     console.log("Application terminated successfully");
+ }
+
+ function onRunningAppsContext(contexts) {
+    // let's assume that the application "targetApp0.main" has been installed.
+    var targetId = "targetApp0.main";
+
+    for (var i = 0; i &lt; contexts.length; i++) {
+        if (contexts[i].appId == targetId) {
+            tizen.application.kill(contexts[i].id, onKillSuccess);
+        }
+    }
+ }
+
+ tizen.application.getAppsContext(onRunningAppsContext);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::launch">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::launch"></a><code><b><span class="methodName">launch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Launches an application with the given application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void launch(<a href="#ApplicationId">ApplicationId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the application is not found with the specified ID.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.launch
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ A unique string representing the application ID
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess() {
+     console.log("The application has launched successfully");
+ }
+
+ // let's assume that application "targetApp0.main" has been installed
+ tizen.application.launch("targetApp0.main", onsuccess);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::launchAppControl">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::launchAppControl"></a><code><b><span class="methodName">launchAppControl</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Launches an application with the specified application control.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void launchAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl, optional <a href="#ApplicationId">ApplicationId</a>? id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+An application can launch other applications with the application control,
+and get back the results from the launched applications.
+            </p>
+            <p>
+The application control consists of an operation, URI, and MIME type, and describes
+the request to be performed by the newly launched application. The
+application control is passed to the <em>launchAppControl()</em> method to launch an
+application. The system tries to find the proper application
+to perform the requested application control, then launches the selected application.
+            </p>
+            <p>
+The application control request is passed to the newly launched application
+and it can be accessed by the <em>getRequestedAppControl() </em>method. The passed
+application control contains the reason the application has been launched and
+information about what the application is doing. The launched application
+can send a result to the caller application with the <em>replyResult() </em>method of the
+<em>RequestedApplicationControl</em> interface.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the system cannot find the application that matches the specified application control.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+SecurityError - If the application does not have the privilege to call the specified application control operation.              </li>
+              <li>
+UnknownError: If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.launch
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appControl</span>: 
+ The data structure describing application control details
+                </li>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An identifier of the application to be launched. If the ID is <var>null </var>or not specified, then the system tries to find the application to be launched for the requested application control
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+          <li class="param">
+<span class="name">replyCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the application gets back results from the launched application
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControl = new tizen.ApplicationControl(
+     "http://tizen.org/appcontrol/operation/pick",
+     null,
+     "image/jpeg",
+     null);
+
+ var appControlReplyCallback = {
+     // callee sent a reply
+     onsuccess: function(data) {
+         for (var i = 0; i &lt; data.length; i++) {
+             if (data[i].key == "http://tizen.org/appcontrol/data/selected") {
+                 console.log('Selected image is ' + data[i].value[0]);
+             }
+         }
+     },
+     // callee returned failure
+     onfailure: function() {
+         console.log('The launch application control failed');
+     }
+ }
+
+ 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>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::findAppControl">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::findAppControl"></a><code><b><span class="methodName">findAppControl</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds which applications can be launched with the given application control.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void findAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl, <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+An application can get a list of other applications that can be launched with the application control.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appControl</span>: 
+ A data structure describing application control details
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call that returns a list of application information
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControl = new tizen.ApplicationControl(
+     "http://tizen.org/appcontrol/operation/pick",
+     null,
+     "image/jpeg",
+     null);
+
+ function successCB(appInfos, appControl)
+ {
+     // appControl is same object with the value passed as first parameter to findAppControl()
+     var appControlReplyCallback = {
+         // callee sent a reply
+         onsuccess: function(data) {
+             for (var i = 0; i &lt; data.length; i++) {
+                 if (data[i].key == "http://tizen.org/appcontrol/data/selected") {
+                     console.log('Selected image is ' + data[i].value[0]);
+                 }
+             }
+         },
+         // callee returned failure
+         onfailure: function() {
+             console.log('The launch application control failed');
+         }
+     }
+
+     var appId = appInfos[0].id; // select first app's id
+
+     tizen.application.launchAppControl(
+         appControl,
+         appId,
+         function() {console.log("launch application control succeed"); },
+        function(e) {console.log("launch application control failed. reason: " + e.message); },
+        appControlReplyCallback );
+ }
+
+ tizen.application.findAppControl(appControl, successCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppsContext">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppsContext"></a><code><b><span class="methodName">getAppsContext</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a list of application contexts for applications that are currently running on a device.
+The information contained for each application corresponds to the application state at the time when the list had been generated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getAppsContext(<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError - If an unknown error occurs.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onRunningAppsContext(contexts) {
+     for (var i = 0; i &lt; contexts.length; i++)
+         console.log("ID : " + contexts[i].id);
+ }
+
+ tizen.application.getAppsContext(onRunningAppsContext);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppContext">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppContext"></a><code><b><span class="methodName">getAppContext</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the application context for the specified application context ID.
+If the ID is set to<var> null</var> or is not set at all, the method returns the application context of the current application.
+The list of running applications and their application IDs is obtained with <em>getAppsContext()</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationContext">ApplicationContext</a> getAppContext(optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contextId</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application context ID<br>If the ID is not provided, the application context of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationContext A data structure that lists running application details.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the application context is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application context cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appContext = tizen.application.getAppContext(null);
+ console.log("Application context retrieved for app " + appContext.appId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppsInfo">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppsInfo"></a><code><b><span class="methodName">getAppsInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the list of installed applications' information on a device.
+The information contained on each application corresponds to the application state at the time when the list had been generated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getAppsInfo(<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError - If an unknown error occurs.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call when the invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onListInstalledApps(applications) {
+     for (var i = 0; i &lt; applications.length; i++)
+         console.log("ID : " + applications[i].id);
+ }
+
+ tizen.application.getAppsInfo(onListInstalledApps);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppInfo">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppInfo"></a><code><b><span class="methodName">getAppInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets application information for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationInformation">ApplicationInformation</a> getAppInfo(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns application information for the current application.
+The list of installed applications and their application IDs is obtained with <em>getAppsInfo()</em>.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID<br>If the ID is not provided, the application information of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationInformation The information of an application.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appInfo = tizen.application.getAppInfo(null);
+ console.log("Current application name : " + appInfo.name);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppCerts">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppCerts"></a><code><b><span class="methodName">getAppCerts</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets application certificates for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationCertificate">ApplicationCertificate</a>[] getAppCerts(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns application certificates for the current application.
+            </p>
+            <p>
+The certificate types are listed below:
+            </p>
+            <ul>
+              <li>
+ AUTHOR_ROOT - Author Root Certificate               </li>
+              <li>
+ AUTHOR_INTERMEDIATE - Author Intermediate Certificate               </li>
+              <li>
+ AUTHOR_SIGNER - Author Signer Certificate               </li>
+              <li>
+ DISTRIBUTOR_ROOT - Distributor Root Certificate               </li>
+              <li>
+ DISTRIBUTOR_INTERMEDIATE - Distributor Intermediate Certificate               </li>
+              <li>
+ DISTRIBUTOR_SIGNER - Distributor Signer Certificate               </li>
+              <li>
+ DISTRIBUTOR2_ROOT - Distributor2 Root Certificate               </li>
+              <li>
+ DISTRIBUTOR2_INTERMEDIATE - Distributor2 Intermediate Certificate               </li>
+              <li>
+ DISTRIBUTOR2_SIGNER - Distributor2 Signer Certificate               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/appmanager.certificate
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID. If the ID is not provided, the application certificate of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationCertificate[] Array of certificate information of a specified application
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appCerts = tizen.application.getAppCerts(null);
+
+ for (var i = 0; i &lt; appCerts.length; i++) {
+    console.log("#" + i + " type:" + appCerts[i].type);
+    console.log("#" + i + " value:" + appCerts[i].value);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppSharedURI">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppSharedURI"></a><code><b><span class="methodName">getAppSharedURI</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the URI of the read-only shared directory of an application for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getAppSharedURI(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The shared directory is used to export data to other applications.
+If the ID is set to <var>null</var> or not set at all, it returns the shared directory URI for the current application.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID. If the ID is not provided, the shared directory URI of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The shared directory URI of an application
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var sharedDir = tizen.application.getAppSharedURI(null);
+ console.log("shared directory : " + sharedDir);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::getAppMetaData">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::getAppMetaData"></a><code><b><span class="methodName">getAppMetaData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the application meta data array for a specified application ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#ApplicationMetaData">ApplicationMetaData</a>[] getAppMetaData(optional <a href="#ApplicationId">ApplicationId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns the application meta data array for the current application.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing an application ID. If the ID is not provided, the application metadata array of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ ApplicationMetaData[] Array of meta data of a specified application. If there are no meta data for a specified application,
+an empty array is returned
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the application is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the application cannot be retrieved because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var metaDataArray = tizen.application.getAppMetaData(null);
+ console.log("size of metadata : " + metaDataArray.length);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::addAppInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::addAppInfoEventListener"></a><code><b><span class="methodName">addAppInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener for receiving any notification for changes in the list of installed applications
+on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addAppInfoEventListener(<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+It installs a callback that is triggered every time a change occurs on
+the list of installed applications on a device. This change may
+occur due to a new installation, uninstallation, or update of an application.
+            </p>
+            <p>
+When executed, the implementation must immediately return a listener
+ID that identifies the listener. After returning the ID, the change
+detection operation is started asynchronously.
+            </p>
+            <p>
+The <em>ApplicationInformationEventCallback </em>must be invoked every time a new
+application is installed, removed, or updated.
+            </p>
+            <p>
+The change detection must continue until the <em>removeAppInfoEventListener()</em> method is called
+with the corresponding listener identifier.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">eventCallback</span>: 
+ The method to call when a change on the installed applications is made
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long ID of the listener that can be used to remove the listener later.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if it fails to add a listener because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appEventCallback = {
+    oninstalled: function(appInfo) {
+       console.log('The application ' + appInfo.name + ' is installed');
+    },
+    onupdated: function(appInfo) {
+       console.log('The application ' + appInfo.name + ' is updated');
+    },
+    onuninstalled: function(appid) {
+       console.log('The application ' + appid + ' is uninstalled');
+    }
+ };
+ var watchId = tizen.application.addAppInfoEventListener(appEventCallback);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ApplicationManager::removeAppInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationManager::removeAppInfoEventListener"></a><code><b><span class="methodName">removeAppInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes the listener to stop receiving notifications for changes on the list of installed
+applications on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeAppInfoEventListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ An ID that identifies the listener
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the listener is not found with the specified ID.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if it fails to remove a listener because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.application.removeAppInfoEventListener(watchId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Application">
+<a class="backward-compatibility-anchor" name="::Application::Application"></a><h3>2.3. Application</h3>
+<div class="brief">
+ This interface defines the current application's information and
+the basic operations (such as exit or hide) for the current application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Application {
+
+    readonly attribute <a href="#ApplicationInformation">ApplicationInformation</a> appInfo;
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> contextId;
+
+    void exit() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void hide() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RequestedApplicationControl">RequestedApplicationControl</a> getRequestedAppControl() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Application::appInfo">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationInformation </span><span class="name">appInfo</span></span><div class="brief">
+ An attribute to store the application information for the current application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Application::contextId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationContextId </span><span class="name">contextId</span></span><div class="brief">
+ An attribute to store the ID of a running application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Application::exit">
+<a class="backward-compatibility-anchor" name="::Application::Application::exit"></a><code><b><span class="methodName">exit</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Exits the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void exit();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var app = tizen.application.getCurrentApplication();
+
+ app.exit();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Application::hide">
+<a class="backward-compatibility-anchor" name="::Application::Application::hide"></a><code><b><span class="methodName">hide</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Hides the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void hide();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var app = tizen.application.getCurrentApplication();
+
+ app.hide();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Application::getRequestedAppControl">
+<a class="backward-compatibility-anchor" name="::Application::Application::getRequestedAppControl"></a><code><b><span class="methodName">getRequestedAppControl</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the requested application control passed to the current application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#RequestedApplicationControl">RequestedApplicationControl</a> getRequestedAppControl();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+Gets the requested application control that contains the application control
+passed by the <em>launchAppControl()</em> method from the calling application.
+The requested application control contains the reason the application
+is launched and what it has to perform. For example, an application
+might be launched to display an image on a page by another
+application's request. In all of these cases, the application is
+responsible for checking the contents of the application control and responding
+appropriately when it is launched.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ RequestedApplicationControl The details of a requested application control
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the application control cannot be retrieved because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+
+ if (reqAppControl) {
+     console.log("Requester AppID : " + reqAppControl.callerAppId);
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationInformation">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformation"></a><h3>2.4. ApplicationInformation</h3>
+<div class="brief">
+ This interface defines the general information available to an installed application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationInformation {
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString iconPath;
+
+    readonly attribute DOMString version;
+
+    readonly attribute boolean show;
+
+    readonly attribute DOMString[] categories;
+
+    readonly attribute Date installDate;
+
+    readonly attribute long size raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="package.html#PackageId">PackageId</a> packageId;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationInformation::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the identifier of an application for application management.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An attribute to store the name of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::iconPath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iconPath</span></span><div class="brief">
+ An attribute to store the icon path of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::version">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">version</span></span><div class="brief">
+ An attribute to store the version of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::show">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">show</span></span><div class="brief">
+ An attribute that determines whether the application information should
+be shown (such as in menus).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::categories">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">categories</span></span><div class="brief">
+ An array of attributes to store the categories that the app belongs to.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::installDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">installDate</span></span><div class="brief">
+ An attribute to store the application install/update time.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationInformation::size">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">size</span></span><div class="brief">
+ An attribute to store the application size (installed space).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/application.info
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="ApplicationInformation::packageId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PackageId </span><span class="name">packageId</span></span><div class="brief">
+ An attribute to store the package ID of an application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationContext">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContext"></a><h3>2.5. ApplicationContext</h3>
+<div class="brief">
+ This interface defines the information available about a running
+application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationContext {
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> id;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> appId;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationContext::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationContextId </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the ID of a running application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationContext::appId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">appId</span></span><div class="brief">
+ An attribute to store the ID of an installed application.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationControlData">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlData"></a><h3>2.6. ApplicationControlData</h3>
+<div class="brief">
+ This interface defines a key/value pair used to pass data
+between applications through the <em>ApplicationControl </em>interface.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString key, DOMString[] value)]
+  interface ApplicationControlData {
+
+    attribute DOMString key;
+
+    attribute DOMString[] value;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControlData = new tizen.ApplicationControlData("image", [imagedata1]);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ApplicationControlData::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ApplicationControlData(DOMString key, DOMString[] value);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationControlData::key">
+<span class="attrName"><span class="type">DOMString </span><span class="name">key</span></span><div class="brief">
+ An attribute to store the name of a key.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControlData::value">
+<span class="attrName"><span class="type">DOMString[]
+                      </span><span class="name">value</span></span><div class="brief">
+ An attribute to store the value associated with a key.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationControl">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControl"></a><h3>2.7. ApplicationControl</h3>
+<div class="brief">
+ This interface consists of an operation, URI, MIME type,
+and data. It describes an action to be performed by other applications
+and is passed to launch other applications.
+If the system gets the application control request, it finds
+the corresponding application to be launched with the delivered application control
+and launches the selected application.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString operation, optional DOMString? uri,
+               optional DOMString? mime, optional DOMString? category,
+               optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)]
+  interface ApplicationControl {
+
+    attribute DOMString operation;
+
+    attribute DOMString? uri;
+
+    attribute DOMString? mime;
+
+    attribute DOMString? category;
+
+    attribute <a href="#ApplicationControlData">ApplicationControlData</a>[] data;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var appControl =
+       new tizen.ApplicationControl(
+                  "http://tizen.org/appcontrol/operation/view",
+                  null,
+                  "image/jpeg",
+                  null,
+                  [new tizen.ApplicationControlData("images",
+                                                    [imagedata1, imagedata2])] );
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="ApplicationControl::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">ApplicationControl(DOMString operation, optional DOMString? uri, optional DOMString? mime, optional DOMString? category, optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationControl::operation">
+<span class="attrName"><span class="type">DOMString </span><span class="name">operation</span></span><div class="brief">
+ An attribute to store the string that defines the action to be
+performed by an application control.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::uri">
+<span class="attrName"><span class="type">DOMString </span><span class="name">uri</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the URI needed by an application control.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::mime">
+<span class="attrName"><span class="type">DOMString </span><span class="name">mime</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the MIME type of content.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::category">
+<span class="attrName"><span class="type">DOMString </span><span class="name">category</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the category of the application to be launched.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationControl::data">
+<span class="attrName"><span class="type">ApplicationControlData[]
+                      </span><span class="name">data</span></span><div class="brief">
+ An array of attributes to store the data needed for an application control.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="RequestedApplicationControl">
+<a class="backward-compatibility-anchor" name="::Application::RequestedApplicationControl"></a><h3>2.8. RequestedApplicationControl</h3>
+<div class="brief">
+ This interface has an application control information requested and passed
+from another application and is passed to launch other applications. The newly
+launched application can get the requested application control through the <em>getRequestedAppControl()</em> method, and send the results
+to the calling application through the <em>replyResult()</em> method after performing the
+required action requested by the calling application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface RequestedApplicationControl {
+
+    readonly attribute <a href="#ApplicationControl">ApplicationControl</a> appControl;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> callerAppId;
+
+    void replyResult(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void replyFailure() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+ if (reqAppControl) {
+     console.log("Requester AppID : " + reqAppControl.callerAppId);
+
+     var appControl = reqAppControl.appControl;
+     if (appControl.operation == "http://tizen.org/appcontrol/operation/pick") {
+         var data = new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selected", ["Image1.jpg"]);
+         reqAppControl.replyResult([data]);
+     }
+ }
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="RequestedApplicationControl::appControl">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationControl </span><span class="name">appControl</span></span><div class="brief">
+ An attribute to store the application control object that describes the caller application's request.
+It contains the information that the calling application passed to <em>launchAppControl</em>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="RequestedApplicationControl::callerAppId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">callerAppId</span></span><div class="brief">
+ An attribute to store the caller application's ID.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="RequestedApplicationControl::replyResult">
+<a class="backward-compatibility-anchor" name="::Application::RequestedApplicationControl::replyResult"></a><code><b><span class="methodName">replyResult</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends the results to the caller application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void replyResult(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An array of ApplicationControlData objects
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the caller app is not alive or there is no response from the caller app.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the reply request fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="RequestedApplicationControl::replyFailure">
+<a class="backward-compatibility-anchor" name="::Application::RequestedApplicationControl::replyFailure"></a><code><b><span class="methodName">replyFailure</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Notifies the calling application that the application failed
+to perform the requested action.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void replyFailure();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the caller app is not alive or there is no response from the caller app.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the reply request fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationCertificate">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationCertificate"></a><h3>2.9. ApplicationCertificate</h3>
+<div class="brief">
+ This interface defines the certificate information of an installed application.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationCertificate {
+
+    readonly attribute DOMString type;
+
+    readonly attribute DOMString value;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationCertificate::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ An attribute to store the type of the application certificate
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ApplicationCertificate::value">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">value</span></span><div class="brief">
+ An attribute to store the value of the application certificate
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationMetaData">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationMetaData"></a><h3>2.10. ApplicationMetaData</h3>
+<div class="brief">
+ This interface defines the meta data of an installed application
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ApplicationMetaData {
+
+    readonly attribute DOMString key;
+
+    readonly attribute DOMString value;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ApplicationMetaData::key">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">key</span></span><div class="brief">
+ An attribute to store the key of the application meta data
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="ApplicationMetaData::value">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">value</span></span><div class="brief">
+ An attribute to store the value of the application meta data
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ApplicationInformationArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationArraySuccessCallback"></a><h3>2.11. ApplicationInformationArraySuccessCallback</h3>
+<div class="brief">
+ This callback interface specifies a success callback that is invoked when the installed application list is retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationInformationArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with an array of
+<em>ApplicationInformation </em>objects as an input parameter. It is used in <em>ApplicationManager.getAppsInfo()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationInformationArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">informationArray</span>: 
+ A list of installed applications
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FindAppControlSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Application::FindAppControlSuccessCallback"></a><h3>2.12. FindAppControlSuccessCallback</h3>
+<div class="brief">
+ This callback interface specifies a success callback that is invoked when the system has finished searching applications that match a specific application control .
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FindAppControlSuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with an array of
+<em>ApplicationInformation </em>objects and application control as an input parameter.
+It is used in <em>ApplicationManager.findAppControl()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FindAppControlSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::FindAppControlSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">informationArray</span>: 
+ A list of installed applications
+                </li>
+          <li class="param">
+<span class="name">appControl</span>: 
+ The application control that is passed to <em>ApplicationManager.findAppControl()</em>                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationContextArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContextArraySuccessCallback"></a><h3>2.13. ApplicationContextArraySuccessCallback</h3>
+<div class="brief">
+ This callback interface specifies a success callback that is invoked when the list of running applications is retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationContextArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationContext">ApplicationContext</a>[] contexts);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success method with
+an array of <em>ApplicationContext </em>objects as an input parameter. It is used in <em>ApplicationManager.getAppsContext()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationContextArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationContextArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when <em>ApplicationManager.getAppsContext() </em>completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ApplicationContext">ApplicationContext</a>[] contexts);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contexts</span>: 
+ A list of running applications
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationControlDataArrayReplyCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlDataArrayReplyCallback"></a><h3>2.14. ApplicationControlDataArrayReplyCallback</h3>
+<div class="brief">
+ The ApplicationControlDataArrayReplyCallback callback specifies success callbacks that are invoked as a reply from the requested application control within the application control requester.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface ApplicationControlDataArrayReplyCallback {
+    void onsuccess(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+
+    void onfailure();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies two methods:
+          </p>
+          <ul>
+            <li>
+ <em>onsuccess()</em> - Invoked if the callee application calls <em>RequestedApplicationControl.replyResult()</em>.            </li>
+            <li>
+ <em>onfailure()</em> - Invoked if the callee application calls <em>RequestedApplicationControl.replyFailure()</em>.            </li>
+          </ul>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationControlDataArrayReplyCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlDataArrayReplyCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the callee application calls <em>RequestedApplicationControl.replyResult()</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An array of <em>ApplicationControlData</em> objects
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ApplicationControlDataArrayReplyCallback::onfailure">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationControlDataArrayReplyCallback::onfailure"></a><code><b><span class="methodName">onfailure</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the callee application calls <em>RequestedApplicationControl.replyFailure()</em>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfailure();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ApplicationInformationEventCallback">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback"></a><h3>2.15. ApplicationInformationEventCallback</h3>
+<div class="brief">
+ The ApplicationInformationEventCallback specifies listener for subscribing for notifications of changes in the list of installed
+applications on a device.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface ApplicationInformationEventCallback {
+    void oninstalled(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onupdated(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onuninstalled(<a href="#ApplicationId">ApplicationId</a> id);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies methods that are invoked when
+an application is installed, updated, or uninstalled.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ApplicationInformationEventCallback::oninstalled">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback::oninstalled"></a><code><b><span class="methodName">oninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an application is installed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oninstalled(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The application information of the installed application
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ApplicationInformationEventCallback::onupdated">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback::onupdated"></a><code><b><span class="methodName">onupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an application is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onupdated(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The application information of the updated application
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ApplicationInformationEventCallback::onuninstalled">
+<a class="backward-compatibility-anchor" name="::Application::ApplicationInformationEventCallback::onuninstalled"></a><code><b><span class="methodName">onuninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when an application is uninstalled.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onuninstalled(<a href="#ApplicationId">ApplicationId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of the uninstalled application
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Application {
+
+  typedef DOMString ApplicationId;
+
+  typedef DOMString ApplicationContextId;
+
+  [NoInterfaceObject] interface ApplicationManagerObject {
+    readonly attribute <a href="#ApplicationManager">ApplicationManager</a> application;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ApplicationManagerObject">ApplicationManagerObject</a>;
+
+  [NoInterfaceObject] interface ApplicationManager {
+
+    <a href="#Application">Application</a> getCurrentApplication() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void kill(<a href="#ApplicationContextId">ApplicationContextId</a> contextId,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launch(<a href="#ApplicationId">ApplicationId</a> id,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void launchAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                          optional <a href="#ApplicationId">ApplicationId</a>? id,
+                          optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                          optional <a href="#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a>? replyCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void findAppControl(<a href="#ApplicationControl">ApplicationControl</a> appControl,
+                        <a href="#FindAppControlSuccessCallback">FindAppControlSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsContext(<a href="#ApplicationContextArraySuccessCallback">ApplicationContextArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationContext">ApplicationContext</a> getAppContext(optional <a href="#ApplicationContextId">ApplicationContextId</a>? contextId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getAppsInfo(<a href="#ApplicationInformationArraySuccessCallback">ApplicationInformationArraySuccessCallback</a> successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationInformation">ApplicationInformation</a> getAppInfo(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationCertificate">ApplicationCertificate</a>[] getAppCerts(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getAppSharedURI(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#ApplicationMetaData">ApplicationMetaData</a>[] getAppMetaData(optional <a href="#ApplicationId">ApplicationId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addAppInfoEventListener(<a href="#ApplicationInformationEventCallback">ApplicationInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeAppInfoEventListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [NoInterfaceObject] interface Application {
+
+    readonly attribute <a href="#ApplicationInformation">ApplicationInformation</a> appInfo;
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> contextId;
+
+    void exit() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void hide() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RequestedApplicationControl">RequestedApplicationControl</a> getRequestedAppControl() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+
+  [NoInterfaceObject] interface ApplicationInformation {
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> id;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString iconPath;
+
+    readonly attribute DOMString version;
+
+    readonly attribute boolean show;
+
+    readonly attribute DOMString[] categories;
+
+    readonly attribute Date installDate;
+
+    readonly attribute long size raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute <a href="package.html#PackageId">PackageId</a> packageId;
+  };
+
+  [NoInterfaceObject] interface ApplicationContext {
+
+    readonly attribute <a href="#ApplicationContextId">ApplicationContextId</a> id;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> appId;
+
+  };
+
+  [Constructor(DOMString key, DOMString[] value)]
+  interface ApplicationControlData {
+
+    attribute DOMString key;
+
+    attribute DOMString[] value;
+
+  };
+
+  [Constructor(DOMString operation, optional DOMString? uri,
+               optional DOMString? mime, optional DOMString? category,
+               optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data)]
+  interface ApplicationControl {
+
+    attribute DOMString operation;
+
+    attribute DOMString? uri;
+
+    attribute DOMString? mime;
+
+    attribute DOMString? category;
+
+    attribute <a href="#ApplicationControlData">ApplicationControlData</a>[] data;
+
+  };
+
+  [NoInterfaceObject] interface RequestedApplicationControl {
+
+    readonly attribute <a href="#ApplicationControl">ApplicationControl</a> appControl;
+
+    readonly attribute <a href="#ApplicationId">ApplicationId</a> callerAppId;
+
+    void replyResult(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void replyFailure() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [NoInterfaceObject] interface ApplicationCertificate {
+
+    readonly attribute DOMString type;
+
+    readonly attribute DOMString value;
+
+  };
+
+  [NoInterfaceObject] interface ApplicationMetaData {
+
+    readonly attribute DOMString key;
+
+    readonly attribute DOMString value;
+
+  };
+
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationInformationArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FindAppControlSuccessCallback {
+    void onsuccess(<a href="#ApplicationInformation">ApplicationInformation</a>[] informationArray, <a href="#ApplicationControl">ApplicationControl</a> appControl);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ApplicationContextArraySuccessCallback {
+    void onsuccess(<a href="#ApplicationContext">ApplicationContext</a>[] contexts);
+  };
+
+  [Callback, NoInterfaceObject] interface ApplicationControlDataArrayReplyCallback {
+    void onsuccess(optional <a href="#ApplicationControlData">ApplicationControlData</a>[]? data);
+
+    void onfailure();
+  };
+
+  [Callback, NoInterfaceObject] interface ApplicationInformationEventCallback {
+    void oninstalled(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onupdated(<a href="#ApplicationInformation">ApplicationInformation</a> info);
+
+    void onuninstalled(<a href="#ApplicationId">ApplicationId</a> id);
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html
new file mode 100644 (file)
index 0000000..8d89e09
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html
@@ -0,0 +1,455 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Badge API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Badge">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Badge API</h1></div>
+<div class="brief">
+ The Badge API provides Badge management functionality. It provides functions for creating and updating a badge.
+The application with new unread information has a number in the upper right hand corner of the app icon. This number is called a badge.
+For example, when a new message is received the badge count appears on the app icon. The badge remains until the message is read by the user.
+        </div>
+<div class="description">
+        <p>
+For more information about how to use Badge API, see <a href="../../../../../org.tizen.guides/html/web/tizen/ui/badge_w.htm">Badge Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#BadgeManagerObject">BadgeManagerObject</a>
+</li>
+<li>1.2. <a href="#BadgeManager">BadgeManager</a>
+</li>
+<li>1.3. <a href="#BadgeChangeCallback">BadgeChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#BadgeManagerObject">BadgeManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#BadgeManager">BadgeManager</a></td>
+<td>void <a href="#BadgeManager::setBadgeCount">setBadgeCount</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, long count)<br>
+    long <a href="#BadgeManager::getBadgeCount">getBadgeCount</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId)<br>
+    void <a href="#BadgeManager::addChangeListener">addChangeListener</a> (<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback)<br>
+    void <a href="#BadgeManager::removeChangeListener">removeChangeListener</a> (<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList)</td>
+</tr>
+<tr>
+<td><a href="#BadgeChangeCallback">BadgeChangeCallback</a></td>
+<td>void <a href="#BadgeChangeCallback::onsuccess">onsuccess</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, long count)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="BadgeManagerObject">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManagerObject"></a><h3>1.1. BadgeManagerObject</h3>
+<div class="brief">
+ The BadgeManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BadgeManagerObject {
+         readonly attribute <a href="#BadgeManager">BadgeManager</a> badge;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BadgeManagerObject">BadgeManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+There is a tizen.badge object that allows accessing the functionality of the Badge API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="BadgeManager">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager"></a><h3>1.2. BadgeManager</h3>
+<div class="brief">
+ The BadgeManager interface manages Badge functionality. It provides functions for creating and updating a badge, and registering for badge change events.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface BadgeManager {
+        readonly attribute long maxBadgeCount;
+
+        void setBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void addChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[]appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="BadgeManager::maxBadgeCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">maxBadgeCount</span></span><div class="brief">
+ Maximum length of a badge number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BadgeManager::setBadgeCount">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::setBadgeCount"></a><code><b><span class="methodName">setBadgeCount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the badge count for the designated application. Only applications with the same author signature can have their badge count modified.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+ ID of the application to update the badge
+                </li>
+          <li class="param">
+<span class="name">count</span>: 
+ Number to display as the badge on the application icon<br>To remove the badge, set the value of this param to 0.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError,  if the application does not have the privilege to call this method or if the author signature does not match that of the designated application.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     tizen.badge.setBadgeCount("AVbg1ZHu6l.BadgeSample", 3);
+ } catch(e) {
+     console.log("Error Exception, error name : " + e.name + ", error message : " + e.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BadgeManager::getBadgeCount">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::getBadgeCount"></a><code><b><span class="methodName">getBadgeCount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the badge count for the designated application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+ ID of the designated application
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Count of the badge
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError,  if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the method cannot be completed because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     var count = tizen.badge.getBadgeCount("AVbg1ZHu6l.BadgeSample");
+ } catch(e) {
+     console.log("Error Exception, error name : " + e.name + ", error message : " + e.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BadgeManager::addChangeListener">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::addChangeListener"></a><code><b><span class="methodName">addChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to receive a notification when the badge number for the designated application changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appIdList</span>: 
+ Array of the ID of the designated application
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when a badge number change notification is received
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not of the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  function watcher(appId, count) {
+      console.log(appId + ' badge number were updated : ' + count);
+  }
+
+  // Registers to be notified when the badge number changes
+  tizen.badge.addChangeListener(["AVbg1ZHu6l.BadgeSample", "BDb5tZJe47.TestSample"], watcher);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="BadgeManager::removeChangeListener">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeManager::removeChangeListener"></a><code><b><span class="methodName">removeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notifications for badge number changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/notification
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appIdList</span>: 
+ Array of the ID of the designated application
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Receives badge number changes
+  function watcher(appId, count) {
+      console.log(appId + ' badge number were updated : ' + count);
+  }
+
+  // Registers to be notified when the badge number changes
+  tizen.badge.addChangeListener(["AVbg1ZHu6l.BadgeSample", "BDb5tZJe47.TestSample"], watcher);
+
+  // Cancels the watch operation
+  tizen.badge.removeChangeListener(["AVbg1ZHu6l.BadgeSample", "BDb5tZJe47.TestSample"]);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="BadgeChangeCallback">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeChangeCallback"></a><h3>1.3. BadgeChangeCallback</h3>
+<div class="brief">
+ The BadgeChangeCallback interface specifies a set of methods that are invoked every time a badge number change occurs.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface BadgeChangeCallback {
+        void onsuccess(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="BadgeChangeCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Badge::BadgeChangeCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the badge number of a specified application is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+ ID of the designated application
+                </li>
+          <li class="param">
+<span class="name">count</span>: 
+ Count of the badge
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">2. Full WebIDL</h2>
+<pre class="webidl prettyprint"> module Badge{
+
+    [NoInterfaceObject] interface BadgeManagerObject {
+         readonly attribute <a href="#BadgeManager">BadgeManager</a> badge;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#BadgeManagerObject">BadgeManagerObject</a>;
+
+    [NoInterfaceObject] interface BadgeManager {
+        readonly attribute long maxBadgeCount;
+
+        void setBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        long getBadgeCount(<a href="application.html#ApplicationId">ApplicationId</a> appId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void addChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[]appIdList, <a href="#BadgeChangeCallback">BadgeChangeCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void removeChangeListener(<a href="application.html#ApplicationId">ApplicationId</a>[] appIdList) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface BadgeChangeCallback {
+        void onsuccess(<a href="application.html#ApplicationId">ApplicationId</a> appId, long count);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/content.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/content.html
new file mode 100644 (file)
index 0000000..9181b12
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/content.html
@@ -0,0 +1,3278 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Content API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Content">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Content API</h1></div>
+<div class="brief">
+ The Content API provides functionality to discover content such as images, videos, music, or others.
+        </div>
+<div class="description">
+        <p>
+It is possible to search for specific content using filters.
+The API also supports setting the attributes of specific content.
+        </p>
+        <p>
+For more information on the Content features, see <a href="../../../../../org.tizen.guides/html/web/tizen/content/content_w.htm">Content Guide</a>.
+        </p>
+        <p>
+Playlist functionality has been added in Tizen 2.3.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#ContentDirectoryStorageType">ContentDirectoryStorageType</a>
+</li>
+<li>1.2. <a href="#ContentType">ContentType</a>
+</li>
+<li>1.3. <a href="#AudioContentLyricsType">AudioContentLyricsType</a>
+</li>
+<li>1.4. <a href="#ImageContentOrientation">ImageContentOrientation</a>
+</li>
+<li>1.5. <a href="#ContentId">ContentId</a>
+</li>
+<li>1.6. <a href="#ContentDirectoryId">ContentDirectoryId</a>
+</li>
+<li>1.7. <a href="#PlaylistId">PlaylistId</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#ContentManagerObject">ContentManagerObject</a>
+</li>
+<li>2.2. <a href="#ContentManager">ContentManager</a>
+</li>
+<li>2.3. <a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a>
+</li>
+<li>2.4. <a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a>
+</li>
+<li>2.5. <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>
+</li>
+<li>2.6. <a href="#ContentChangeCallback">ContentChangeCallback</a>
+</li>
+<li>2.7. <a href="#ContentDirectory">ContentDirectory</a>
+</li>
+<li>2.8. <a href="#Content">Content</a>
+</li>
+<li>2.9. <a href="#VideoContent">VideoContent</a>
+</li>
+<li>2.10. <a href="#AudioContentLyrics">AudioContentLyrics</a>
+</li>
+<li>2.11. <a href="#AudioContent">AudioContent</a>
+</li>
+<li>2.12. <a href="#ImageContent">ImageContent</a>
+</li>
+<li>2.13. <a href="#PlaylistItem">PlaylistItem</a>
+</li>
+<li>2.14. <a href="#Playlist">Playlist</a>
+</li>
+<li>2.15. <a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a>
+</li>
+<li>2.16. <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a>
+</li>
+<li>2.17. <a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#ContentManagerObject">ContentManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ContentManager">ContentManager</a></td>
+<td>void <a href="#ContentManager::update">update</a> (<a href="#Content">Content</a> content)<br>
+    void <a href="#ContentManager::updateBatch">updateBatch</a> (<a href="#Content">Content</a>[] contents, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::getDirectories">getDirectories</a> (<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::find">find</a> (<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode, optional unsigned long? count, optional unsigned long? offset)<br>
+    void <a href="#ContentManager::scanFile">scanFile</a> (DOMString contentURI, optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::setChangeListener">setChangeListener</a> (<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback)<br>
+    void <a href="#ContentManager::unsetChangeListener">unsetChangeListener</a> ()<br>
+    void <a href="#ContentManager::getPlaylists">getPlaylists</a> (<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#ContentManager::createPlaylist">createPlaylist</a> (DOMString name, <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#Playlist">Playlist</a>? sourcePlaylist)<br>
+    void <a href="#ContentManager::removePlaylist">removePlaylist</a> (<a href="#PlaylistId">PlaylistId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a></td>
+<td>void <a href="#ContentArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Content">Content</a>[] contents)</td>
+</tr>
+<tr>
+<td><a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a></td>
+<td>void <a href="#ContentDirectoryArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#ContentDirectory">ContentDirectory</a>[] directories)</td>
+</tr>
+<tr>
+<td><a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a></td>
+<td>void <a href="#ContentScanSuccessCallback::onsuccess">onsuccess</a> (DOMString contentURI)</td>
+</tr>
+<tr>
+<td><a href="#ContentChangeCallback">ContentChangeCallback</a></td>
+<td>void <a href="#ContentChangeCallback::oncontentadded">oncontentadded</a> (<a href="#Content">Content</a> content)<br>
+    void <a href="#ContentChangeCallback::oncontentupdated">oncontentupdated</a> (<a href="#Content">Content</a> content)<br>
+    void <a href="#ContentChangeCallback::oncontentremoved">oncontentremoved</a> (<a href="#ContentId">ContentId</a> id)</td>
+</tr>
+<tr>
+<td><a href="#ContentDirectory">ContentDirectory</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Content">Content</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#VideoContent">VideoContent</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AudioContentLyrics">AudioContentLyrics</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AudioContent">AudioContent</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#ImageContent">ImageContent</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PlaylistItem">PlaylistItem</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Playlist">Playlist</a></td>
+<td>void <a href="#Playlist::add">add</a> (<a href="#Content">Content</a> item)<br>
+    void <a href="#Playlist::addBatch">addBatch</a> (<a href="#Content">Content</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Playlist::remove">remove</a> (<a href="#PlaylistItem">PlaylistItem</a> item)<br>
+    void <a href="#Playlist::removeBatch">removeBatch</a> (<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Playlist::get">get</a> (<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional long? count, optional long? offset)<br>
+    void <a href="#Playlist::setOrder">setOrder</a> (<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Playlist::move">move</a> (<a href="#PlaylistItem">PlaylistItem</a> item, long delta, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a></td>
+<td>void <a href="#PlaylistArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#Playlist">Playlist</a>[] playlists)</td>
+</tr>
+<tr>
+<td><a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a></td>
+<td>void <a href="#PlaylistSuccessCallback::onsuccess">onsuccess</a> (<a href="#Playlist">Playlist</a> playlist)</td>
+</tr>
+<tr>
+<td><a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a></td>
+<td>void <a href="#PlaylistItemArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#PlaylistItem">PlaylistItem</a>[] items)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="ContentDirectoryStorageType">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryStorageType"></a><h3>1.1. ContentDirectoryStorageType</h3>
+<pre class="webidl prettyprint">  enum ContentDirectoryStorageType { "INTERNAL", "EXTERNAL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines whether a content directory is stored on internal or external storage (such as a removable memory card).
+          </p>
+         </div>
+</div>
+<div class="enum" id="ContentType">
+<a class="backward-compatibility-anchor" name="::Content::ContentType"></a><h3>1.2. ContentType</h3>
+<pre class="webidl prettyprint">  enum ContentType { "IMAGE", "VIDEO", "AUDIO", "OTHER" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines the type of content such as an image, video, audio, or any other.
+          </p>
+         </div>
+<p><span class="remark"> Remark : </span>
+ "OTHER" type is added since Tizen 2.1.
+          </p>
+</div>
+<div class="enum" id="AudioContentLyricsType">
+<a class="backward-compatibility-anchor" name="::Content::AudioContentLyricsType"></a><h3>1.3. AudioContentLyricsType</h3>
+<pre class="webidl prettyprint">  enum AudioContentLyricsType { "SYNCHRONIZED", "UNSYNCHRONIZED" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines whether the lyrics supplied with an audio file is time-synchronized.
+          </p>
+         </div>
+</div>
+<div class="enum" id="ImageContentOrientation">
+<a class="backward-compatibility-anchor" name="::Content::ImageContentOrientation"></a><h3>1.4. ImageContentOrientation</h3>
+<pre class="webidl prettyprint">  enum ImageContentOrientation { "NORMAL", "FLIP_HORIZONTAL", "ROTATE_180", "FLIP_VERTICAL", "TRANSPOSE", "ROTATE_90", "TRANSVERSE", "ROTATE_270" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Defines the orientation of an image.
+          </p>
+         </div>
+</div>
+<div class="typedef" id="ContentId">
+<a class="backward-compatibility-anchor" name="::Content::ContentId"></a><h3>1.5. ContentId</h3>
+<div class="brief">
+ Content identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ContentId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="typedef" id="ContentDirectoryId">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryId"></a><h3>1.6. ContentDirectoryId</h3>
+<div class="brief">
+ Content directory identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString ContentDirectoryId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="typedef" id="PlaylistId">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistId"></a><h3>1.7. PlaylistId</h3>
+<div class="brief">
+ Playlist identifier.
+          </div>
+<pre class="webidl prettyprint">  typedef DOMString PlaylistId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="ContentManagerObject">
+<a class="backward-compatibility-anchor" name="::Content::ContentManagerObject"></a><h3>2.1. ContentManagerObject</h3>
+<div class="brief">
+ Defines what is instantiated by the Tizen object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContentManagerObject {
+    readonly attribute <a href="#ContentManager">ContentManager</a> content;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ContentManagerObject">ContentManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.content </em>object allows accessing the functionality of the Content module.
+          </p>
+         </div>
+</div>
+<div class="interface" id="ContentManager">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager"></a><h3>2.2. ContentManager</h3>
+<div class="brief">
+ The ContentManager interface provides operations to retrieve and manipulate content.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContentManager {
+
+    void update(<a href="#Content">Content</a> content) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Content">Content</a>[] contents,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getDirectories(<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode,
+              optional unsigned long? count,
+              optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+    void scanFile(DOMString contentURI,
+                  optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setChangeListener(<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPlaylists(<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void createPlaylist(DOMString name,
+                        <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                        optional <a href="#Playlist">Playlist</a>? sourcePlaylist) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePlaylist(<a href="#PlaylistId">PlaylistId</a> id,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentManager::update">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::update"></a><code><b><span class="methodName">update</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates attributes of content in the content database synchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void update(<a href="#Content">Content</a> content);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+When an application has changed some attributes of the content, this method allows
+writing it back to the content database.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>editableAttributes</em> in the <em>Content</em> interface indicates
+the attributes that can be changed.
+This API does not support updating the metadata of a file.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">content</span>: 
+ The content to update.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters
+contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Assume the content is a Content object as a result of find method.
+ // Check the description is editable, and then set a description.
+ if (content.editableAttributes.indexOf("description") &gt;= 0) {
+     content.description = "Sample content";
+ }
+ tizen.content.update(content);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::updateBatch">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::updateBatch"></a><code><b><span class="methodName">updateBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Updates a batch of content attributes in the content database asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void updateBatch(<a href="#Content">Content</a>[] contents, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+When an application has changed any attributes in the array of content, this method allows writing them
+back to the content database.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError: In any other error case.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <em>editableAttributes</em> in the <em>Content</em> interface indicates
+the attributes that can be changed.
+This API does not support updating the metadata of a file.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contents</span>: 
+ Array of content to change.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when attributes have been changed.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example increases rating of an content by 1
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function successCB() {
+     console.log('Attributes set successfully');
+ }
+
+ // Assume the content is a Content object as a result of find method.
+ // Check the rating is editable, and then increase by 1.
+ if (content.editableAttributes.indexOf("rating") &gt;= 0) {
+     content.rating++;
+ }
+ tizen.content.updateBatch([content], successCB, errorCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::getDirectories">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::getDirectories"></a><code><b><span class="methodName">getDirectories</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a list of content directories.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getDirectories(<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method returns (via callback) a list of content directory objects. To obtain a list of contents
+in a specific directory, use the find() method with the directory ID.
+            </p>
+            <p>
+The errorCallback is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError: In any other error case.              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when content directories have been retrieved successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves content directories in the storage.
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function printDirectory(directory, index, directories) {
+     console.log('directoryURI: ' + directory.directoryURI + ' Title: ' + directory.title);
+ }
+ function getDirectoriesCB(directories) {
+     directories.forEach(printDirectory);
+ }
+
+ tizen.content.getDirectories(getDirectoriesCB, errorCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::find">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::find"></a><code><b><span class="methodName">find</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Finds contents that satisfy the conditions set by a filter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void find(<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId, optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter, optional <a href="tizen.html#SortMode">SortMode</a>? sortMode, optional unsigned long? count, optional unsigned long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method allows searching based on a supplied filter. For more details on AbstractFilter, see the
+<a href="tizen.html#AbstractFilter">Tizen</a> module. The filter allows precise searching such
+as "return all songs by artist U2, ordered by name".
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError: In any other error case.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when content has been retrieved.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+          <li class="param">
+<span class="name">directoryId</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Directory ID that is used to select content to retrieve in a specified directory.
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Filter that is used to select content to retrieve.
+                </li>
+          <li class="param">
+<span class="name">sortMode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Used to determine the sort order in which the contents are returned.
+                </li>
+          <li class="param">
+<span class="name">count</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Maximum amount of content to return. If <em>count</em> is negative, InvalidValuesError is reported through the errorCallback.
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Offset of the result set. If <em>offset</em> is a negative number, InvalidValuesError is reported through the errorCallback.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree", by artist "U2", ordered by the name.
+ var count = 100;
+ var offset = 0;
+ var sortMode = new tizen.SortMode("name", "ASC");
+ var artistFilter = new tizen.AttributeFilter("artists", "EXACTLY", "U2");
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+ var filter = new tizen.CompositeFilter("INTERSECTION", [albumFilter, artistFilter]);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function printContent(content, index, contents) {
+     console.log('Name: ' + content.name + ' Title: ' + content.title + 'URL: ' + content.contentURI + 'MIME: ' + content.mimeType);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree by U2:');
+     contents.forEach(printContent);
+     // Increase the offset as much as the count and then find content again.
+     if (contents.length === count) {
+         offset += count;
+         tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+     }
+ }
+
+ tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::scanFile">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::scanFile"></a><code><b><span class="methodName">scanFile</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Scans a file to create or update content in the content database.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void scanFile(DOMString contentURI, optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+When an application creates or updates content, this method allows to scan it
+and then insert or update the content in the content database.
+            </p>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error detected asynchronously              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contentURI</span>: 
+ URI of content to scan.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when scanning has been completed.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error has occurred.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters
+contain an invalid value (e.g. given <em>contentURI</em> is an empty string).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example scan 'tizen.jpg' in media directory
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function successCB(path) {
+     console.log('scanning is completed');
+ }
+
+ tizen.filesystem.resolve("images/tizen.jpg", function(imageFile) {
+     tizen.content.scanFile(imageFile.toURI(), successCB, errorCB);
+ });
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::setChangeListener">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::setChangeListener"></a><code><b><span class="methodName">setChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notifications of content changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setChangeListener(<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ A callback to be invoked for receiving a content change notification.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var listener= {
+    oncontentadded: function(content) {
+        console.log(content.contentURI + ' content is added');
+    },
+    oncontentupdated: function(content) {
+        console.log(content.contentURI + ' content is updated');
+    },
+    oncontentremoved: function(id) {
+        console.log(id + ' is removed');
+    }
+ };
+
+ // Registers to be notified when the content changes
+ tizen.content.setChangeListener(listener);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::unsetChangeListener">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::unsetChangeListener"></a><code><b><span class="methodName">unsetChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to unsubscribe from receiving notifications for content changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.content.unsetChangeListener();
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::getPlaylists">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::getPlaylists"></a><code><b><span class="methodName">getPlaylists</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets all playlists.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPlaylists(<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when retrieving a list of all playlists completes
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists;
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     var cur, i;
+     gPlaylists = playlists;
+     for(i = 0; i &lt; gPlaylists.length; ++i) {
+         cur = gPlaylists[i];
+         console.log("[" + i + "] name:" + cur.name + " num tracks:" +
+                 cur.numberOfTracks);
+     }
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::createPlaylist">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::createPlaylist"></a><code><b><span class="methodName">createPlaylist</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a new playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void createPlaylist(DOMString name, <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional <a href="#Playlist">Playlist</a>? sourcePlaylist);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If <var>name</var> is empty or is same as the name of an existing playlist              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">name</span>: 
+ Name of the new playlist (case sensitive)
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked to provide a created playlist
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">sourcePlaylist</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Optional existing playlist to clone
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists;
+ var gPlaylist;
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err.message);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     var cur, i;
+     gPlaylists = playlists;
+     for(i = 0; i &lt; gPlaylists.length; ++i) {
+         cur = gPlaylists[i];
+         console.log("[" + i + "] name:" + cur.name + " num tracks:" +
+                 cur.numberOfTracks);
+     }
+ }
+
+ function findSuccess(contents) {
+     if (contents.length &gt; 0) {
+         gPlaylist.add(contents[0]);
+     }
+
+     tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ }
+
+ function findFail(err) {
+     console.log("find FAIL: " + err.message);
+ }
+
+ function createSuccess(playlist) {
+     console.log("create SUCCESS");
+
+     gPlaylist = playlist;
+     tizen.content.find(findSuccess, findFail, null,
+             new tizen.AttributeFilter("type", "EXACTLY", "AUDIO"));
+ }
+
+ function createFail(err) {
+     console.log("create FAIL: " + err.message);
+ }
+
+ tizen.content.createPlaylist("My new playlist", createSuccess, createFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="ContentManager::removePlaylist">
+<a class="backward-compatibility-anchor" name="::Content::ContentManager::removePlaylist"></a><code><b><span class="methodName">removePlaylist</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removePlaylist(<a href="#PlaylistId">PlaylistId</a> id, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ Identifier of a playlist to remove
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when removing a playlist completes
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists;
+
+ function removePlaylistSuccess() {
+     console.log("removePlaylist SUCCESS");
+ }
+
+ function removePlaylistFail(err) {
+     console.log("removePlaylist FAIL: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     var cur, i;
+     gPlaylists = playlists;
+     for(i = 0; i &lt; gPlaylists.length; ++i) {
+         cur = gPlaylists[i];
+         console.log("[" + i + "] name:" + cur.name + " num tracks:" +
+                 cur.numberOfTracks);
+     }
+
+     if(gPlaylists.length &lt; 1) {
+         console.log("Please add at least 1 playlist");
+         return;
+     }
+
+     console.log("will remove playlist at index [0] name:"
+             + gPlaylists[0].name);
+
+     tizen.content.removePlaylist(gPlaylists[0].id, removePlaylistSuccess,
+             removePlaylistFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentArraySuccessCallback"></a><h3>2.3. ContentArraySuccessCallback</h3>
+<div class="brief">
+ The callback function used to return a list of content objects.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContentArraySuccessCallback {
+    void onsuccess(<a href="#Content">Content</a>[] contents);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::ContentArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the list of content is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Content">Content</a>[] contents);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contents</span>: 
+ The array of <em>Content </em>objects.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentDirectoryArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryArraySuccessCallback"></a><h3>2.4. ContentDirectoryArraySuccessCallback</h3>
+<div class="brief">
+ The callback function used to return a list of ContentDirectory objects.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContentDirectoryArraySuccessCallback {
+    void onsuccess(<a href="#ContentDirectory">ContentDirectory</a>[] directories);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentDirectoryArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectoryArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the directory list is retrieved successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#ContentDirectory">ContentDirectory</a>[] directories);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">directories</span>: 
+ The array of <em>ContentDirectory </em>objects.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentScanSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentScanSuccessCallback"></a><h3>2.5. ContentScanSuccessCallback</h3>
+<div class="brief">
+ The callback function used to return content to scan.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface ContentScanSuccessCallback {
+    void onsuccess(DOMString contentURI);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentScanSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::ContentScanSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the scanning has been completed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString contentURI);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">contentURI</span>: 
+ The URI of the <em>Content </em>objects.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentChangeCallback">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback"></a><h3>2.6. ContentChangeCallback</h3>
+<div class="brief">
+ This interface specifies a set of methods that are invoked every time a content change occurs.
+          </div>
+<pre class="webidl prettyprint">  [Callback, NoInterfaceObject] interface ContentChangeCallback {
+    void oncontentadded(<a href="#Content">Content</a> content);
+
+    void oncontentupdated(<a href="#Content">Content</a> content);
+
+    void oncontentremoved(<a href="#ContentId">ContentId</a> id);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ContentChangeCallback::oncontentadded">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback::oncontentadded"></a><code><b><span class="methodName">oncontentadded</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when content is added.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontentadded(<a href="#Content">Content</a> content);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">content</span>: 
+ The content to add.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ContentChangeCallback::oncontentupdated">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback::oncontentupdated"></a><code><b><span class="methodName">oncontentupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when content is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontentupdated(<a href="#Content">Content</a> content);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">content</span>: 
+ The content to update.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="ContentChangeCallback::oncontentremoved">
+<a class="backward-compatibility-anchor" name="::Content::ContentChangeCallback::oncontentremoved"></a><code><b><span class="methodName">oncontentremoved</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when content is removed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncontentremoved(<a href="#ContentId">ContentId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of removed content.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ContentDirectory">
+<a class="backward-compatibility-anchor" name="::Content::ContentDirectory"></a><h3>2.7. ContentDirectory</h3>
+<div class="brief">
+ The ContentDirectory interface provides access to properties of a content directory.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ContentDirectory {
+
+    readonly attribute <a href="#ContentDirectoryId">ContentDirectoryId</a> id;
+
+    readonly attribute DOMString directoryURI;
+
+    readonly attribute DOMString title;
+
+    readonly attribute <a href="#ContentDirectoryStorageType">ContentDirectoryStorageType</a> storageType;
+
+    readonly attribute Date? modifiedDate;
+
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ContentDirectory::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentDirectoryId </span><span class="name">id</span></span><div class="brief">
+ The opaque content directory identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::directoryURI">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">directoryURI</span></span><div class="brief">
+ The directory path on the device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::title">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The directory name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::storageType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentDirectoryStorageType </span><span class="name">storageType</span></span><div class="brief">
+ The type of device storage.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ContentDirectory::modifiedDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modifiedDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The last modified date for a directory.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="Content">
+<a class="backward-compatibility-anchor" name="::Content::Content"></a><h3>2.8. Content</h3>
+<div class="brief">
+ The Content interface provides access to the properties of a content item.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Content {
+
+    readonly attribute DOMString[] editableAttributes;
+
+    readonly attribute <a href="#ContentId">ContentId</a> id;
+
+    attribute DOMString name;
+
+    readonly attribute <a href="#ContentType">ContentType</a> type;
+
+    readonly attribute DOMString mimeType;
+
+    readonly attribute DOMString title;
+
+    readonly attribute DOMString contentURI;
+
+    readonly attribute DOMString[]? thumbnailURIs;
+
+    readonly attribute Date? releaseDate;
+
+    readonly attribute Date? modifiedDate;
+
+    readonly attribute unsigned long size;
+
+    attribute DOMString? description;
+
+    attribute unsigned long rating;
+
+    attribute boolean isFavorite;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Content::editableAttributes">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">editableAttributes</span></span><div class="brief">
+ The list of attributes that are editable to the local backend using the update() or updateBatch() method.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentId </span><span class="name">id</span></span><div class="brief">
+ The opaque content identifier.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The content name. The initial value is the file name of the content.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="Content::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ContentType </span><span class="name">type</span></span><div class="brief">
+ The content type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::mimeType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">mimeType</span></span><div class="brief">
+ The content MIME type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::title">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">title</span></span><div class="brief">
+ The content title.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::contentURI">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">contentURI</span></span><div class="brief">
+ The URI to access the content.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::thumbnailURIs">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">thumbnailURIs</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The array of content thumbnail URIs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::releaseDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">releaseDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The date when content has been released publicly. If only the release year is known, then the month and date are set to January and 1st respectively.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::modifiedDate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modifiedDate</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The last modified date for a content item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::size">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">size</span></span><div class="brief">
+ The file size of the content in bytes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::description">
+<span class="attrName"><span class="type">DOMString </span><span class="name">description</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The content description.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::rating">
+<span class="attrName"><span class="type">unsigned long </span><span class="name">rating</span></span><div class="brief">
+ The content rating. This value can range from <var>0</var> to <var>10</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="Content::isFavorite">
+<span class="attrName"><span class="type">boolean </span><span class="name">isFavorite</span></span><div class="brief">
+  Boolean value that indicates whether a content item is marked as a favorite.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="VideoContent">
+<a class="backward-compatibility-anchor" name="::Content::VideoContent"></a><h3>2.9. VideoContent</h3>
+<div class="brief">
+ The VideoContent interface extends a basic <em>Content </em>object with video-specific attributes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface VideoContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute unsigned long duration;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="VideoContent::geolocation">
+<span class="attrName"><span class="type">SimpleCoordinates </span><span class="name">geolocation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The geographical location where the video has been made.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::album">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">album</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The album name to which the video belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::artists">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">artists</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of artists who created the video.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::duration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">duration</span></span><div class="brief">
+ The video duration in milliseconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::width">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">width</span></span><div class="brief">
+ The width of a video in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="VideoContent::height">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">height</span></span><div class="brief">
+ The height of the video in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AudioContentLyrics">
+<a class="backward-compatibility-anchor" name="::Content::AudioContentLyrics"></a><h3>2.10. AudioContentLyrics</h3>
+<div class="brief">
+ The AudioContentLyrics interface provides lyrics for music.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface AudioContentLyrics {
+
+    readonly attribute <a href="#AudioContentLyricsType">AudioContentLyricsType</a> type;
+
+    readonly attribute unsigned long[] timestamps;
+
+    readonly attribute DOMString[] texts;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AudioContentLyrics::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AudioContentLyricsType </span><span class="name">type</span></span><div class="brief">
+ The type of lyrics, that is, whether they are synchronized with the music.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContentLyrics::timestamps">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long[]
+                      </span><span class="name">timestamps</span></span><div class="brief">
+ The array of timestamps in milliseconds for lyrics.
+            </div>
+<div class="description">
+            <p>
+If the lyrics are not synchronized (if there is no time information for the lyrics) the array is undefined.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContentLyrics::texts">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">texts</span></span><div class="brief">
+ The array of lyrics snippets.
+            </div>
+<div class="description">
+            <p>
+If the lyrics are not synchronized, the array has only one member with full lyrics.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AudioContent">
+<a class="backward-compatibility-anchor" name="::Content::AudioContent"></a><h3>2.11. AudioContent</h3>
+<div class="brief">
+ The AudioContent interface extends a basic <em>Content </em>object with audio-specific attributes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface AudioContent : <a href="#Content">Content</a> {
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? genres;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute DOMString[]? composers;
+
+    readonly attribute <a href="#AudioContentLyrics">AudioContentLyrics</a>? lyrics;
+
+    readonly attribute DOMString? copyright;
+
+    readonly attribute unsigned long bitrate;
+
+    readonly attribute unsigned short? trackNumber;
+
+    readonly attribute unsigned long duration;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AudioContent::album">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">album</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The album name to which the audio belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::genres">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">genres</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of genres to which the audio belongs.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::artists">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">artists</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of artists who created the audio.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::composers">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]
+                      </span><span class="name">composers</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The list of composers for the music.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::lyrics">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">AudioContentLyrics </span><span class="name">lyrics</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The lyrics of a song in an audio file.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::copyright">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">copyright</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The copyright information.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::bitrate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">bitrate</span></span><div class="brief">
+ The audio bitrate in bits per second. By default, this value is 0.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::trackNumber">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">trackNumber</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The track number if the audio belongs to an album.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="AudioContent::duration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">duration</span></span><div class="brief">
+ The audio duration in milliseconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="ImageContent">
+<a class="backward-compatibility-anchor" name="::Content::ImageContent"></a><h3>2.12. ImageContent</h3>
+<div class="brief">
+ The ImageContent interface extends a basic <em>Content </em>object with image-specific attributes.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface ImageContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+    attribute <a href="#ImageContentOrientation">ImageContentOrientation</a> orientation;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="ImageContent::geolocation">
+<span class="attrName"><span class="type">SimpleCoordinates </span><span class="name">geolocation</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The geographical location where the image has been made.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ImageContent::width">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">width</span></span><div class="brief">
+ The width of an image in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ImageContent::height">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">height</span></span><div class="brief">
+ The height of an image in pixels.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="ImageContent::orientation">
+<span class="attrName"><span class="type">ImageContentOrientation </span><span class="name">orientation</span></span><div class="brief">
+ The image orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="PlaylistItem">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistItem"></a><h3>2.13. PlaylistItem</h3>
+<div class="brief">
+ The PlaylistItem interface represents a playlist item.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface PlaylistItem {
+    readonly attribute <a href="#Content">Content</a> content;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="PlaylistItem::content">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Content </span><span class="name">content</span></span><div class="brief">
+ Content contained in this playlist item.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="Playlist">
+<a class="backward-compatibility-anchor" name="::Content::Playlist"></a><h3>2.14. Playlist</h3>
+<div class="brief">
+ The Playlist interface represents a playlist.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface Playlist {
+    readonly attribute <a href="#PlaylistId">PlaylistId</a> id;
+
+    attribute DOMString name raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long numberOfTracks;
+
+    attribute DOMString? thumbnailURI raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#Content">Content</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#Content">Content</a>[] items,
+                  optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#PlaylistItem">PlaylistItem</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void get(<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback,
+             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+             optional long? count,
+             optional long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setOrder(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+            optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void move(<a href="#PlaylistItem">PlaylistItem</a> item,
+              long delta,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="Playlist::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PlaylistId </span><span class="name">id</span></span><div class="brief">
+ Identifier of a playlist.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Playlist::name">
+<span class="attrName"><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ Name of a playlist (case sensitive and unique).
+            </div>
+<div class="description">
+            <p>
+When <var>name</var> is set, the change is recorded in the database.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, when assigning an invalid value (e.g. playlist of the same name already exists).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to change this attribute.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="Playlist::numberOfTracks">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">numberOfTracks</span></span><div class="brief">
+ Number of playlist items in the playlist.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="Playlist::thumbnailURI">
+<span class="attrName"><span class="type">DOMString </span><span class="name">thumbnailURI</span><span class="optional"> [nullable]</span></span><div class="brief">
+ Thumbnail URI of a playlist.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>. <br>When <var>thumbnailURI</var> is set, the change is recorded in the database.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, when assigning an invalid value (e.g. if the URI does not start with "file:///").
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to change this attribute.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Playlist::add">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::add"></a><code><b><span class="methodName">add</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a content item to a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void add(<a href="#Content">Content</a> item);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+See code example for the <em>createPlaylist()</em> method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Content to add
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="Playlist::addBatch">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::addBatch"></a><code><b><span class="methodName">addBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds tracks to a playlist as a batch, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void addBatch(<a href="#Content">Content</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of tracks (Content objects) to add
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when adding a list of content items to a playlist completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="Playlist::remove">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::remove"></a><code><b><span class="methodName">remove</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a track from a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void remove(<a href="#PlaylistItem">PlaylistItem</a> item);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Playlist item to remove
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function get2Fail(err) {
+     console.log("get items (after remove) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist items:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 1) {
+        console.log("Please add at least 1 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original playlist:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    console.log("Will remove item at index [0] name:" + gItems[0].content.name);
+    gCurPlaylist.remove(gItems[0]);
+    gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::removeBatch">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::removeBatch"></a><code><b><span class="methodName">removeBatch</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes tracks from a playlist as a batch, asynchronously.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeBatch(<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of tracks to remove
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when removing a list of content items from a playlist completes successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function get2Fail(err) {
+     console.log("get items (after remove batch) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist after remove batch:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function removeBatchSuccess() {
+     console.log("removeBatch success");
+     gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function removeBatchFail(err) {
+     console.log("removeBatch failed: " + err);
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 4) {
+        console.log("Please add at least 4 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original playlist:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    console.log("Will remove items at index [0](name:" + gItems[0].content.name
+            + ") and at index [2](name:" + gItems[2].content.name + ")");
+    gCurPlaylist.removeBatch([gItems[2], gItems[0]],
+            removeBatchSuccess, removeBatchFail);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::get">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::get"></a><code><b><span class="methodName">get</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets playlist items from a playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void get(<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback, optional long? count, optional long? offset);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: If any of the input parameters contain an invalid value (e.g <em>count</em> or <em>offset</em> is a negative number)              </li>
+              <li>
+UnknownError: In case of any error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked for a list of tracks in the playlist
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+          <li class="param">
+<span class="name">count</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Number of playlist items to return <br>If the <var>count</var> is not passed, all playlist items are retrieved.
+                </li>
+          <li class="param">
+<span class="name">offset</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Offset of the track from the beginning of the playlist <br>The default value is <em>0</em> <br>It means no offset.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function getSuccess(items) {
+     gItems = items;
+     console.log("Playlist items:");
+     for(var i = 0; i &lt; items.length ; ++i) {
+         console.log("[" + i + "]: name:" + items[i].name);
+     }
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     // To retrieves all playlist items of 'gCurPlaylist' playlist.
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::setOrder">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::setOrder"></a><code><b><span class="methodName">setOrder</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Changes the play order of all playlist items in the playlist.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setOrder(<a href="#PlaylistItem">PlaylistItem</a>[] items, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: In case the item in the passed <em>items</em> array is not inside this playlist, or the <em>items</em> array does not contain all items from the playlist              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of playlist items to set in play order <br>This list must include all playlist items of this playlist <br>If not, InvalidValuesError is thrown.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when changing the positions of items in the playlist is successfully completed
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist, gExpectedOrder;
+
+ function get2Fail(err) {
+     console.log("get items (after set order) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist order after setOrder:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function setOrderSuccess() {
+     console.log("set items order SUCCESS");
+     gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function setOrderFail(err) {
+     console.log("set items order failed: " + err);
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 2) {
+        console.log("Please add at least 2 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original order:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    gExpectedOrder = gItems.slice(0);
+    gExpectedOrder.reverse();
+
+    console.log("New order:");
+    for(var i = 0; i &lt; gExpectedOrder.length ; ++i) {
+        console.log("[" + i + "]: name:" + gExpectedOrder[i].content.name);
+    }
+
+    gCurPlaylist.setOrder(gExpectedOrder, setOrderSuccess, setOrderFail);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Playlist::move">
+<a class="backward-compatibility-anchor" name="::Content::Playlist::move"></a><code><b><span class="methodName">move</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Moves the specified item up or down a specified amount in the play order.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void move(<a href="#PlaylistItem">PlaylistItem</a> item, long delta, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If <var>current index + delta</var> is:
+            </p>
+            <ul>
+              <li>
+<var>&lt; 0</var> then the item is moved to the first position in the playlist              </li>
+              <li>
+<var>≥ number of tracks</var> then the item is moved to the last position in the playlist              </li>
+            </ul>
+            <p>
+The errorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError: In case the item in the passed <em>items</em> array is not inside this playlist or some item of this playlist is not included in <em>items</em>              </li>
+              <li>
+UnknownError: In case of any other error              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/content.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">item</span>: 
+ Playlist item to move
+                </li>
+          <li class="param">
+<span class="name">delta</span>: 
+ How many positions to move the item, negative value means move up, positive means move down
+                </li>
+          <li class="param">
+<span class="name">successCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the playlist item has successfully been moved
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var gPlaylists, gItems, gCurPlaylist;
+
+ function get2Fail(err) {
+     console.log("get items (after move item) failed: " + err);
+ }
+
+ function get2Success(items) {
+    console.log("Playlist order after move:");
+    for(var i = 0; i &lt; items.length ; ++i) {
+        console.log("[" + i + "]: name:" + items[i].content.name);
+    }
+ }
+
+ function moveSuccess() {
+     console.log("move item SUCCESS");
+     gCurPlaylist.get(get2Success, get2Fail);
+ }
+
+ function moveFail(err) {
+     console.log("move item failed: " + err);
+ }
+
+ function getSuccess(items) {
+    gItems = items;
+
+    if(gItems.length &lt; 2) {
+        console.log("Please add at least 2 tracks to playlist!");
+        return;
+    }
+
+    console.log("Original order:");
+    for(var i = 0; i &lt; gItems.length ; ++i) {
+        console.log("[" + i + "]: name:" + gItems[i].content.name);
+    }
+
+    console.log("Will move item at index [1] (name: " +
+            gItems[1].content.name + ") up by one place (to [0])");
+
+    gCurPlaylist.move(gItems[1], -1, moveSuccess, moveFail);
+    gItems.unshift(gItems.splice(1, 1)[0]);
+ }
+
+ function getFail(err) {
+     console.log("get items failed: " + err);
+ }
+
+ function getPlaylistsFail(err) {
+     console.log("getPlaylists failed: " + err);
+ }
+
+ function getPlaylistsSuccess(playlists) {
+     gPlaylists = playlists;
+     if(gPlaylists.length === 0) {
+         console.log("Please create at least 1 playlist!");
+         return;
+     }
+
+     gCurPlaylist = gPlaylists[0];
+     gCurPlaylist.get(getSuccess, getFail);
+ }
+
+ tizen.content.getPlaylists(getPlaylistsSuccess, getPlaylistsFail);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PlaylistArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistArraySuccessCallback"></a><h3>2.15. PlaylistArraySuccessCallback</h3>
+<div class="brief">
+ The PlaylistArraySuccessCallback interface specifies a success callback that is invoked when all existing playlists are retrieved successfully.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistArraySuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a>[] playlists);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+It is used in <em>tizen.content.getPlaylists()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PlaylistArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the <em>tizen.content.getPlaylists()</em> method completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Playlist">Playlist</a>[] playlists);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">playlists</span>: 
+ List of all playlists on a device
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PlaylistSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistSuccessCallback"></a><h3>2.16. PlaylistSuccessCallback</h3>
+<div class="brief">
+ The PlaylistSuccessCallback interface specifies a success callback that is invoked when a new playlist is successfully created.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistSuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a> playlist);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+It is used in <em>tizen.content.createPlaylist()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PlaylistSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the <em>tizen.content.createPlaylist()</em> method completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#Playlist">Playlist</a> playlist);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">playlist</span>: 
+ Newly created playlist
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PlaylistItemArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistItemArraySuccessCallback"></a><h3>2.17. PlaylistItemArraySuccessCallback</h3>
+<div class="brief">
+ The PlaylistItemArraySuccessCallback interface specifies a success callback that is invoked when a list of playlist items are successfully retrieved.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistItemArraySuccessCallback {
+    void onsuccess(<a href="#PlaylistItem">PlaylistItem</a>[] items);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PlaylistItemArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Content::PlaylistItemArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the <em>playlist.get()</em> method completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#PlaylistItem">PlaylistItem</a>[] items);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">items</span>: 
+ List of playlist items
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Content {
+
+  enum ContentDirectoryStorageType { "INTERNAL", "EXTERNAL" };
+
+  enum ContentType { "IMAGE", "VIDEO", "AUDIO", "OTHER" };
+
+  enum AudioContentLyricsType { "SYNCHRONIZED", "UNSYNCHRONIZED" };
+
+  enum ImageContentOrientation { "NORMAL", "FLIP_HORIZONTAL", "ROTATE_180", "FLIP_VERTICAL", "TRANSPOSE", "ROTATE_90", "TRANSVERSE", "ROTATE_270" };
+
+  typedef DOMString ContentId;
+
+  typedef DOMString ContentDirectoryId;
+
+  typedef DOMString PlaylistId;
+
+  [NoInterfaceObject] interface ContentManagerObject {
+    readonly attribute <a href="#ContentManager">ContentManager</a> content;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#ContentManagerObject">ContentManagerObject</a>;
+
+  [NoInterfaceObject] interface ContentManager {
+
+    void update(<a href="#Content">Content</a> content) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void updateBatch(<a href="#Content">Content</a>[] contents,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getDirectories(<a href="#ContentDirectoryArraySuccessCallback">ContentDirectoryArraySuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void find(<a href="#ContentArraySuccessCallback">ContentArraySuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+              optional <a href="#ContentDirectoryId">ContentDirectoryId</a>? directoryId,
+              optional <a href="tizen.html#AbstractFilter">AbstractFilter</a>? filter,
+              optional <a href="tizen.html#SortMode">SortMode</a>? sortMode,
+              optional unsigned long? count,
+              optional unsigned long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+    void scanFile(DOMString contentURI,
+                  optional <a href="#ContentScanSuccessCallback">ContentScanSuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setChangeListener(<a href="#ContentChangeCallback">ContentChangeCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPlaylists(<a href="#PlaylistArraySuccessCallback">PlaylistArraySuccessCallback</a> successCallback,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void createPlaylist(DOMString name,
+                        <a href="#PlaylistSuccessCallback">PlaylistSuccessCallback</a> successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+                        optional <a href="#Playlist">Playlist</a>? sourcePlaylist) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePlaylist(<a href="#PlaylistId">PlaylistId</a> id,
+                        optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContentArraySuccessCallback {
+    void onsuccess(<a href="#Content">Content</a>[] contents);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContentDirectoryArraySuccessCallback {
+    void onsuccess(<a href="#ContentDirectory">ContentDirectory</a>[] directories);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface ContentScanSuccessCallback {
+    void onsuccess(DOMString contentURI);
+  };
+
+  [Callback, NoInterfaceObject] interface ContentChangeCallback {
+    void oncontentadded(<a href="#Content">Content</a> content);
+
+    void oncontentupdated(<a href="#Content">Content</a> content);
+
+    void oncontentremoved(<a href="#ContentId">ContentId</a> id);
+  };
+
+
+  [NoInterfaceObject] interface ContentDirectory {
+
+    readonly attribute <a href="#ContentDirectoryId">ContentDirectoryId</a> id;
+
+    readonly attribute DOMString directoryURI;
+
+    readonly attribute DOMString title;
+
+    readonly attribute <a href="#ContentDirectoryStorageType">ContentDirectoryStorageType</a> storageType;
+
+    readonly attribute Date? modifiedDate;
+
+   };
+
+  [NoInterfaceObject] interface Content {
+
+    readonly attribute DOMString[] editableAttributes;
+
+    readonly attribute <a href="#ContentId">ContentId</a> id;
+
+    attribute DOMString name;
+
+    readonly attribute <a href="#ContentType">ContentType</a> type;
+
+    readonly attribute DOMString mimeType;
+
+    readonly attribute DOMString title;
+
+    readonly attribute DOMString contentURI;
+
+    readonly attribute DOMString[]? thumbnailURIs;
+
+    readonly attribute Date? releaseDate;
+
+    readonly attribute Date? modifiedDate;
+
+    readonly attribute unsigned long size;
+
+    attribute DOMString? description;
+
+    attribute unsigned long rating;
+
+    attribute boolean isFavorite;
+  };
+
+  [NoInterfaceObject] interface VideoContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute unsigned long duration;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+  };
+
+
+  [NoInterfaceObject] interface AudioContentLyrics {
+
+    readonly attribute <a href="#AudioContentLyricsType">AudioContentLyricsType</a> type;
+
+    readonly attribute unsigned long[] timestamps;
+
+    readonly attribute DOMString[] texts;
+  };
+
+  [NoInterfaceObject] interface AudioContent : <a href="#Content">Content</a> {
+
+    readonly attribute DOMString? album;
+
+    readonly attribute DOMString[]? genres;
+
+    readonly attribute DOMString[]? artists;
+
+    readonly attribute DOMString[]? composers;
+
+    readonly attribute <a href="#AudioContentLyrics">AudioContentLyrics</a>? lyrics;
+
+    readonly attribute DOMString? copyright;
+
+    readonly attribute unsigned long bitrate;
+
+    readonly attribute unsigned short? trackNumber;
+
+    readonly attribute unsigned long duration;
+
+  };
+
+  [NoInterfaceObject] interface ImageContent : <a href="#Content">Content</a> {
+
+    attribute <a href="tizen.html#SimpleCoordinates">SimpleCoordinates</a>? geolocation;
+
+    readonly attribute unsigned long width;
+
+    readonly attribute unsigned long height;
+
+    attribute <a href="#ImageContentOrientation">ImageContentOrientation</a> orientation;
+  };
+
+  [NoInterfaceObject]
+  interface PlaylistItem {
+    readonly attribute <a href="#Content">Content</a> content;
+  };
+
+  [NoInterfaceObject]
+  interface Playlist {
+    readonly attribute <a href="#PlaylistId">PlaylistId</a> id;
+
+    attribute DOMString name raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long numberOfTracks;
+
+    attribute DOMString? thumbnailURI raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void add(<a href="#Content">Content</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void addBatch(<a href="#Content">Content</a>[] items,
+                  optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                  optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void remove(<a href="#PlaylistItem">PlaylistItem</a> item) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeBatch(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+                     optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void get(<a href="#PlaylistItemArraySuccessCallback">PlaylistItemArraySuccessCallback</a> successCallback,
+             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback,
+             optional long? count,
+             optional long? offset) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setOrder(<a href="#PlaylistItem">PlaylistItem</a>[] items,
+            optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+            optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void move(<a href="#PlaylistItem">PlaylistItem</a> item,
+              long delta,
+              optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistArraySuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a>[] playlists);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistSuccessCallback {
+    void onsuccess(<a href="#Playlist">Playlist</a> playlist);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface PlaylistItemArraySuccessCallback {
+    void onsuccess(<a href="#PlaylistItem">PlaylistItem</a>[] items);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/download.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/download.html
new file mode 100644 (file)
index 0000000..5c21702
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/download.html
@@ -0,0 +1,1076 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Download API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Download">
+<div class="supported-platforms"><img class="wearable-optional emulator" title="Optional, Supported by Tizen Wearable emulator" src="ww_icon_optional.png"></div>
+<div class="title"><h1>Download API</h1></div>
+<div class="brief">
+ This API provides methods to asynchronously download the contents of a URL to a storage.
+        </div>
+<div class="description">
+        <p>
+For more information on the Download features, see <a href="../../../../../org.tizen.guides/html/web/tizen/content/download_w.htm">Download Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>
+</li>
+<li>1.2. <a href="#DownloadState">DownloadState</a>
+</li>
+<li>1.3. <a href="#DownloadNetworkType">DownloadNetworkType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#DownloadManagerObject">DownloadManagerObject</a>
+</li>
+<li>2.2. <a href="#DownloadRequest">DownloadRequest</a>
+</li>
+<li>2.3. <a href="#DownloadManager">DownloadManager</a>
+</li>
+<li>2.4. <a href="#DownloadCallback">DownloadCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#DownloadManagerObject">DownloadManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#DownloadRequest">DownloadRequest</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#DownloadManager">DownloadManager</a></td>
+<td>long <a href="#DownloadManager::start">start</a> (<a href="#DownloadRequest">DownloadRequest</a> downloadRequest, optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback)<br>
+    void <a href="#DownloadManager::cancel">cancel</a> (long downloadId)<br>
+    void <a href="#DownloadManager::pause">pause</a> (long downloadId)<br>
+    void <a href="#DownloadManager::resume">resume</a> (long downloadId)<br>
+    <a href="#DownloadState">DownloadState</a> <a href="#DownloadManager::getState">getState</a> (long downloadId)<br>
+    <a href="#DownloadRequest">DownloadRequest</a> <a href="#DownloadManager::getDownloadRequest">getDownloadRequest</a> (long downloadId)<br>
+    DOMString <a href="#DownloadManager::getMIMEType">getMIMEType</a> (long downloadId)<br>
+    void <a href="#DownloadManager::setListener">setListener</a> (long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback)</td>
+</tr>
+<tr>
+<td><a href="#DownloadCallback">DownloadCallback</a></td>
+<td>void <a href="#DownloadCallback::onprogress">onprogress</a> (long downloadId, unsigned long long receivedSize, unsigned long long totalSize)<br>
+    void <a href="#DownloadCallback::onpaused">onpaused</a> (long downloadId)<br>
+    void <a href="#DownloadCallback::oncanceled">oncanceled</a> (long downloadId)<br>
+    void <a href="#DownloadCallback::oncompleted">oncompleted</a> (long downloadId, DOMString fullPath)<br>
+    void <a href="#DownloadCallback::onfailed">onfailed</a> (long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="DownloadHTTPHeaderFields">
+<a class="backward-compatibility-anchor" name="::Download::DownloadHTTPHeaderFields"></a><h3>1.1. DownloadHTTPHeaderFields</h3>
+<div class="brief">
+ A set of HTTP header fields.
+          </div>
+<pre class="webidl prettyprint">    typedef object DownloadHTTPHeaderFields;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The key / value type of each HTTP header field should be DOMString.
+          </p>
+         </div>
+</div>
+<div class="enum" id="DownloadState">
+<a class="backward-compatibility-anchor" name="::Download::DownloadState"></a><h3>1.2. DownloadState</h3>
+<div class="brief">
+ An enumerator to indicate the state of a download operation.
+          </div>
+<pre class="webidl prettyprint">    enum DownloadState { "QUEUED", "DOWNLOADING", "PAUSED", "CANCELED", "COMPLETED", "FAILED" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+QUEUED - Indicates that the download operation is listed in a queue.            </li>
+            <li>
+DOWNLOADING - Indicates that the download operation is in progress.            </li>
+            <li>
+PAUSED - Indicates that the download operation is in a paused state by user request.            </li>
+            <li>
+CANCELED - Indicates that the download operation is canceled by user request.            </li>
+            <li>
+COMPLETED - Indicates that the download operation is in a completed state.            </li>
+            <li>
+FAILED - Indicates that the download operation has failed due to some reasons.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="DownloadNetworkType">
+<a class="backward-compatibility-anchor" name="::Download::DownloadNetworkType"></a><h3>1.3. DownloadNetworkType</h3>
+<div class="brief">
+ An enumerator to indicate the network type.
+          </div>
+<pre class="webidl prettyprint">    enum DownloadNetworkType { "CELLULAR", "WIFI", "ALL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+CELLULAR - Indicates that the download operation is allowed in the cellular network only.            </li>
+            <li>
+WIFI - Indicates that the download operation is allowed in the Wi-Fi network only.            </li>
+            <li>
+ALL - Indicates that the download operation is allowed in all network types.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="DownloadManagerObject">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManagerObject"></a><h3>2.1. DownloadManagerObject</h3>
+<div class="brief">
+ This interface defines the default download manager that is instantiated by the <em>Tizen </em>object.
+The <em>tizen.download </em>object allows access to the functionality of the Download API.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface DownloadManagerObject {
+        readonly attribute <a href="#DownloadManager">DownloadManager</a> download;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DownloadManagerObject">DownloadManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="interface" id="DownloadRequest">
+<a class="backward-compatibility-anchor" name="::Download::DownloadRequest"></a><h3>2.2. DownloadRequest</h3>
+<div class="brief">
+ The DownloadRequest interface defines the download request object.
+          </div>
+<pre class="webidl prettyprint">    [Constructor(DOMString url, optional DOMString? destination, optional DOMString? fileName, optional <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType, optional <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader)]
+    interface DownloadRequest {
+        attribute DOMString url;
+
+        attribute DOMString? destination;
+
+        attribute DOMString? fileName;
+
+        attribute <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType;
+
+        attribute <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="constructors">
+<h4 id="DownloadRequest::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">DownloadRequest(DOMString url, optional DOMString? destination, optional DOMString? fileName, optional <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType, optional <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="DownloadRequest::url">
+<span class="attrName"><span class="type">DOMString </span><span class="name">url</span></span><div class="brief">
+ An attribute to store the URL of the object to download.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::destination">
+<span class="attrName"><span class="type">DOMString </span><span class="name">destination</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the folder path of the destination folder to which a requested file object will be downloaded.
+            </div>
+<div class="description">
+            <p>
+If the destination is not specified or is an empty string, the file will be downloaded to the default storage: "Downloads". For more information, see <a href="filesystem.html">Filesystem API</a>.
+            </p>
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::fileName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">fileName</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the file name for the specified URL.
+            </div>
+<div class="description">
+            <p>
+If the file name is not given or is an empty string, the original file name from the URL is used.
+            </p>
+            <p>
+The default value is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::networkType">
+<span class="attrName"><span class="type">DownloadNetworkType </span><span class="name">networkType</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store the allowed network type.
+            </div>
+<div class="description">
+            <p>
+If the network type is not given, all network types are allowed.
+            </p>
+            <p>
+The default value is <var>ALL</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="DownloadRequest::httpHeader">
+<span class="attrName"><span class="type">DownloadHTTPHeaderFields </span><span class="name">httpHeader</span><span class="optional"> [nullable]</span></span><div class="brief">
+ An attribute to store extra HTTP header fields.
+            </div>
+<div class="description">
+            <p>
+For more information about HTTP header fields, see <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html#sec4.2">RFC-2616</a>            </p>
+            <p>
+The default value is an empty object.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var req = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt");
+ req.httpHeader["Pragma"] = "no-cache";
+ req.httpHeader["Cookie"] = "version=1; Skin=new";
+ req.httpHeader["X-Agent"] = "Tizen Sample App";
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="DownloadManager">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager"></a><h3>2.3. DownloadManager</h3>
+<div class="brief">
+ The DownloadManager interface handles requests for downloading. Each step of a download operation is informed through callbacks.
+          </div>
+<pre class="webidl prettyprint">   [NoInterfaceObject] interface DownloadManager {
+       long start(<a href="#DownloadRequest">DownloadRequest</a> downloadRequest,
+                    optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void cancel(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void pause(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void resume(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadState">DownloadState</a> getState(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadRequest">DownloadRequest</a> getDownloadRequest(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       DOMString getMIMEType(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setListener(long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DownloadManager::start">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts a download operation with the specified URL information.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long start(<a href="#DownloadRequest">DownloadRequest</a> downloadRequest, optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/download
+            </p>
+<p><span class="remark"> Remark : </span>
+ To check if <var>CELLULAR</var> type is supported, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.telephony")</var>            </p>
+<p><span class="remark"> Remark : </span>
+ To check if <var>WIFI</var> type is supported, use <var>tizen.systeminfo.getCapability("http://tizen.org/feature/network.wifi")</var>            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadRequest</span>: 
+ The URL and destination information of the object to download.
+                </li>
+          <li class="param">
+<span class="name">downloadCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when the download state changes or an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long An identifier for each download operation.
+If the network is not available for downloading, the return value is -1 since Tizen 2.3.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the <em>networkType</em> of the given <var>DownloadRequest</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Check if Download API is supported not on a device.
+ var download_api_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/download");
+ if (download_api_capability === false) {
+     console.log("Download API is not supported on this device.");
+     return;
+ }
+
+ var listener = {
+   onprogress: function(id, receivedSize, totalSize) {
+     console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
+   },
+   onpaused: function(id) {
+     console.log('Paused with id: ' + id);
+   },
+   oncanceled: function(id) {
+     console.log('Canceled with id: ' + id);
+   },
+   oncompleted: function(id, fullPath) {
+     console.log('Completed with id: ' + id + ', full path: ' + fullPath);
+   },
+   onfailed: function(id, error) {
+     console.log('Failed with id: ' + id + ', error name: ' + error.name);
+   }
+ };
+
+ // Starts downloading the file from the Web with the corresponding callbacks.
+ var downloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "documents");
+ var downloadId = tizen.download.start(downloadRequest, listener);
+
+ // If you want to download a large file through Wi-Fi,
+ var wifi_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/network.wifi");
+ var wifiDownloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/archive/14.02.2/Ubuntu_12.04/qemu_1.6.0rc3.orig.tar.gz", "downloads", null, "WIFI");
+
+ if (wifi_capability === true) {
+     var downlodId_wifi = tizen.download.start(wifiDownloadRequest, listener);
+ } else {
+     // If you call tizen.download.start(), NotSupportedError will be thrown.
+     console.log("This device doesn't support Download API through Wi-Fi.");
+ }
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::cancel">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::cancel"></a><code><b><span class="methodName">cancel</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Cancels an ongoing download operation that is specified by the <em>downloadId</em> parameter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void cancel(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the ongoing download operation to stop.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Cancels the ongoing download operation with the specified ID.
+ tizen.download.cancel(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::pause">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::pause"></a><code><b><span class="methodName">pause</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Pauses an ongoing download operation that is specified by the <em>downloadId</em> parameter.
+The paused download operation can be resumed later by the <em>resume()</em> method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void pause(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the ongoing download operation to pause.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Pauses the ongoing download operation with the specified ID.
+ tizen.download.pause(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::resume">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::resume"></a><code><b><span class="methodName">resume</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Resumes a paused download operation that is specified by the <em>downloadId</em> parameter.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void resume(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the paused download operation to resume.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Resumes the paused download operation with the specified ID.
+ tizen.download.resume(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::getState">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::getState"></a><code><b><span class="methodName">getState</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the download state of an operation synchronously with the specified ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#DownloadState">DownloadState</a> getState(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to get the current state of the download operation.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DownloadState The current download state of the specified ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the state of the download operation with the given ID.
+ var state = tizen.download.getState(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::getDownloadRequest">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::getDownloadRequest"></a><code><b><span class="methodName">getDownloadRequest</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the DownloadRequest object from a given ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#DownloadRequest">DownloadRequest</a> getDownloadRequest(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to get the download request information.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DownloadRequest The download request information of the given ID.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the download request information with the given ID.
+ var downloadRequest = tizen.download.getDownloadRequest(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::getMIMEType">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::getMIMEType"></a><code><b><span class="methodName">getMIMEType</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the MIME type of the downloaded file.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getMIMEType(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ This function returns a valid MIME type when the download operation has been started
+and successfully retrieves the file header.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to get the MIME type information.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The MIME type of the downloaded file.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Get the MIME type of the download operation with the given ID.
+ var MIMEtype = tizen.download.getMIMEType(downloadId);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="DownloadManager::setListener">
+<a class="backward-compatibility-anchor" name="::Download::DownloadManager::setListener"></a><code><b><span class="methodName">setListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the download callback to the download operation of the given ID.
+It's possible to change or register the listener of the download operation using the saved ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setListener(long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID to set the download callback.
+                </li>
+          <li class="param">
+<span class="name">downloadCallback</span>: 
+ The method to invoke when the download state changes or an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotFoundError, if the identifier does not match
+any download operation in progress.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var listener = {
+   onprogress: function(id, receivedSize, totalSize) {
+     console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
+   },
+   onpaused: function(id) {
+     console.log('Paused with id: ' + id);
+   },
+   oncanceled: function(id) {
+     console.log('Canceled with id: ' + id);
+   },
+   oncompleted: function(id, fileName) {
+     console.log('Completed with id: ' + id + ', file name: ' + fileName);
+   },
+   onfailed: function(id, error) {
+     console.log('Failed with id: ' + id + ', error name: ' + error.name);
+   }
+ };
+
+ // Start downloading the html file on the web with the corresponding callbacks.
+ var downloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "documents");
+ downloadId = tizen.download.start(downloadRequest);
+
+ // Add the listener.
+ tizen.download.setListener(downloadId, listener);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="DownloadCallback">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback"></a><h3>2.4. DownloadCallback</h3>
+<div class="brief">
+ The DownloadCallback defines notification callbacks for a download state change or progress.
+          </div>
+<pre class="webidl prettyprint">   [Callback, NoInterfaceObject] interface DownloadCallback {
+       void onprogress(long downloadId, unsigned long long receivedSize, unsigned long long totalSize);
+
+       void onpaused(long downloadId);
+
+       void oncanceled(long downloadId);
+
+       void oncompleted(long downloadId, DOMString fullPath);
+
+       void onfailed(long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="DownloadCallback::onprogress">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::onprogress"></a><code><b><span class="methodName">onprogress</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a download is successful and it is called multiple times as the download progresses.
+The interval between the <em>onprogress()</em> callback is platform-dependent. When the download is started, the <em>receivedSize </em>can be <var>0</var>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onprogress(long downloadId, unsigned long long receivedSize, unsigned long long totalSize);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+          <li class="param">
+<span class="name">receivedSize</span>: 
+ The size of data received in bytes.
+                </li>
+          <li class="param">
+<span class="name">totalSize</span>: 
+ The total size of data to receive in bytes.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::onpaused">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::onpaused"></a><code><b><span class="methodName">onpaused</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation is paused by the <em>pause() </em>method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpaused(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::oncanceled">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::oncanceled"></a><code><b><span class="methodName">oncanceled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation is canceled by the <em>cancel() </em>method.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncanceled(long downloadId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::oncompleted">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::oncompleted"></a><code><b><span class="methodName">oncompleted</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation is completed with the final full path.
+If the same file name already exists in the destination, it is changed according to the platform policy and delivered in this callback.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncompleted(long downloadId, DOMString fullPath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+          <li class="param">
+<span class="name">fullPath</span>: 
+ The final full path for the downloaded file.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="DownloadCallback::onfailed">
+<a class="backward-compatibility-anchor" name="::Download::DownloadCallback::onfailed"></a><code><b><span class="methodName">onfailed</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the download operation fails.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onfailed(long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">downloadId</span>: 
+ The ID of the corresponding download operation.
+                </li>
+          <li class="param">
+<span class="name">error</span>: 
+ The reason for download failure.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the download application runs on a device with the capability of accessing the Internet, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/download</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+DownloadNetworkType <em>'WIFI'</em> can be available on a Wi-Fi enabled device. To guarantee that the download application runs on a device with the Wi-Fi feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.wifi</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+DownloadNetworkType <em>'CELLULAR'</em> can be available on a cellular-enabled device. To guarantee that the download application runs on a device with the cellular feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Download {
+    typedef object DownloadHTTPHeaderFields;
+
+    enum DownloadState { "QUEUED", "DOWNLOADING", "PAUSED", "CANCELED", "COMPLETED", "FAILED" };
+
+    enum DownloadNetworkType { "CELLULAR", "WIFI", "ALL" };
+
+    [NoInterfaceObject] interface DownloadManagerObject {
+        readonly attribute <a href="#DownloadManager">DownloadManager</a> download;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#DownloadManagerObject">DownloadManagerObject</a>;
+
+    [Constructor(DOMString url, optional DOMString? destination, optional DOMString? fileName, optional <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType, optional <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader)]
+    interface DownloadRequest {
+        attribute DOMString url;
+
+        attribute DOMString? destination;
+
+        attribute DOMString? fileName;
+
+        attribute <a href="#DownloadNetworkType">DownloadNetworkType</a>? networkType;
+
+        attribute <a href="#DownloadHTTPHeaderFields">DownloadHTTPHeaderFields</a>? httpHeader;
+    };
+
+   [NoInterfaceObject] interface DownloadManager {
+       long start(<a href="#DownloadRequest">DownloadRequest</a> downloadRequest,
+                    optional <a href="#DownloadCallback">DownloadCallback</a>? downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void cancel(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void pause(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void resume(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadState">DownloadState</a> getState(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       <a href="#DownloadRequest">DownloadRequest</a> getDownloadRequest(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       DOMString getMIMEType(long downloadId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setListener(long downloadId, <a href="#DownloadCallback">DownloadCallback</a> downloadCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };
+
+   [Callback, NoInterfaceObject] interface DownloadCallback {
+       void onprogress(long downloadId, unsigned long long receivedSize, unsigned long long totalSize);
+
+       void onpaused(long downloadId);
+
+       void oncanceled(long downloadId);
+
+       void oncompleted(long downloadId, DOMString fullPath);
+
+       void onfailed(long downloadId, <a href="tizen.html#WebAPIError">WebAPIError</a> error);
+   };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html
new file mode 100644 (file)
index 0000000..57cc8ad
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html
@@ -0,0 +1,3401 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Filesystem API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Filesystem">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Filesystem API</h1></div>
+<div class="brief">
+ The Filesystem API provides access to a device's filesystem.
+        </div>
+<div class="description">
+        <p>
+The filesystem is represented as an abstract collection of disjointed filesystem virtual
+root locations, each corresponding to a specific location in the device
+filesystem. The filesystem API exposes the hierarchies below these root
+locations as a single virtual filesystem, but provides no access to other
+parts of the device filesystem.
+        </p>
+        <p>
+Each virtual root has a string name. Each file or directory within the virtual
+filesystem is addressed using a fully-qualified path of the form:
+<em>&lt;root name&gt;/&lt;path&gt;</em> where <em>&lt;rootname&gt;</em> is
+the name of the virtual root and <em>&lt;path&gt;</em> is the path to the file or
+directory relative to that root.
+        </p>
+        <p>
+The following virtual roots must be supported:
+        </p>
+        <ul>
+          <li>
+images - the location for images          </li>
+          <li>
+videos - the location for videos          </li>
+          <li>
+music - the location for sounds          </li>
+          <li>
+documents - the location for documents          </li>
+          <li>
+downloads - the location for downloaded items           </li>
+          <li>
+ringtones - the location for ringtones (read-only location)           </li>
+          <li>
+camera - the location for the pictures and videos taken by a device (supported since Tizen 2.3)           </li>
+          <li>
+wgt-package - the location for widget package which is read-only          </li>
+          <li>
+wgt-private - the location for a widget's private storage           </li>
+          <li>
+wgt-private-tmp - the location for a widget's private volatile storage          </li>
+        </ul>
+        <p>
+The file URI path is also supported. To access other paths out of virtual root, for example '/tmp/', 'file:///tmp' can be used as location parameter.
+        </p>
+        <p>
+To access specific locations apart from those specified above, a file handle must be retrieved using the <em>filesystem.resolve() </em>call.
+        </p>
+        <p>
+A file handle represents either a file or a directory:        </p>
+        <ul>
+          <li>
+For a file, the <em>isFile </em>attribute is set to <var>true</var>.          </li>
+          <li>
+For a directory, the <em>isDirectory </em>attribute is set to <var>true</var>.          </li>
+        </ul>
+        <p>
+A file can be opened for both read and write operations, using a
+FileStream handle. A list of files and sub-directories can be obtained from a
+directory and a resolve method exists to resolve files or sub-directories
+more conveniently than processing directory listings.
+        </p>
+        <p>
+The implementation must support the use of the following characters in file names:
+        </p>
+        <ul>
+          <li>
+Letters (a-z, A-Z)          </li>
+          <li>
+Numbers (0-9)          </li>
+          <li>
+Blank space          </li>
+          <li>
+Underscore ("_")          </li>
+          <li>
+Hyphen ("-")          </li>
+          <li>
+Period (".")          </li>
+        </ul>
+        <p>
+The implementation may support additional characters in file names, depending on platform support.
+        </p>
+        <p>
+The implementation may forbid the use of additional characters in file names, depending on the platform. The use of the path (component) separator "/" should not be allowed in file names.
+        </p>
+        <p>
+Some other file name and path characteristics are platform-dependent,
+for example, maximum path length, file name length, case sensitivity, additional
+character support, etc. Therefore, it is recommended to avoid any dependency
+on aspects that cannot be supported across multiple platforms.
+        </p>
+        <p>
+When a path is used to interact with the underlying filesystem, the encoding used for the file path should be the platform default.
+        </p>
+        <p>
+For more information on the Filesystem features, see <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">File System Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#FileMode">FileMode</a>
+</li>
+<li>1.2. <a href="#FileSystemStorageType">FileSystemStorageType</a>
+</li>
+<li>1.3. <a href="#FileSystemStorageState">FileSystemStorageState</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#FileSystemManagerObject">FileSystemManagerObject</a>
+</li>
+<li>2.2. <a href="#FileSystemManager">FileSystemManager</a>
+</li>
+<li>2.3. <a href="#FileSystemStorage">FileSystemStorage</a>
+</li>
+<li>2.4. <a href="#File">File</a>
+</li>
+<li>2.5. <a href="#FileFilter">FileFilter</a>
+</li>
+<li>2.6. <a href="#FileStream">FileStream</a>
+</li>
+<li>2.7. <a href="#FileSuccessCallback">FileSuccessCallback</a>
+</li>
+<li>2.8. <a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a>
+</li>
+<li>2.9. <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a>
+</li>
+<li>2.10. <a href="#FileStringSuccessCallback">FileStringSuccessCallback</a>
+</li>
+<li>2.11. <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a>
+</li>
+<li>2.12. <a href="#FileArraySuccessCallback">FileArraySuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#FileSystemManagerObject">FileSystemManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#FileSystemManager">FileSystemManager</a></td>
+<td>void <a href="#FileSystemManager::resolve">resolve</a> (DOMString location, <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileMode">FileMode</a>? mode)<br>
+    void <a href="#FileSystemManager::getStorage">getStorage</a> (DOMString label, <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#FileSystemManager::listStorages">listStorages</a> (<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    long <a href="#FileSystemManager::addStorageStateChangeListener">addStorageStateChangeListener</a> (<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#FileSystemManager::removeStorageStateChangeListener">removeStorageStateChangeListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#FileSystemStorage">FileSystemStorage</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#File">File</a></td>
+<td>DOMString <a href="#File::toURI">toURI</a> ()<br>
+    void <a href="#File::listFiles">listFiles</a> (<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileFilter">FileFilter</a>? filter)<br>
+    void <a href="#File::openStream">openStream</a> (<a href="#FileMode">FileMode</a> mode, <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding)<br>
+    void <a href="#File::readAsText">readAsText</a> (<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding)<br>
+    void <a href="#File::copyTo">copyTo</a> (DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#File::moveTo">moveTo</a> (DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    <a href="#File">File</a> <a href="#File::createDirectory">createDirectory</a> (DOMString dirPath)<br>
+    <a href="#File">File</a> <a href="#File::createFile">createFile</a> (DOMString relativeFilePath)<br>
+    <a href="#File">File</a> <a href="#File::resolve">resolve</a> (DOMString filePath)<br>
+    void <a href="#File::deleteDirectory">deleteDirectory</a> (DOMString directoryPath, boolean recursive, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)<br>
+    void <a href="#File::deleteFile">deleteFile</a> (DOMString filePath, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror)</td>
+</tr>
+<tr>
+<td><a href="#FileFilter">FileFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#FileStream">FileStream</a></td>
+<td>void <a href="#FileStream::close">close</a> ()<br>
+    DOMString <a href="#FileStream::read">read</a> (long charCount)<br>
+    octet[] <a href="#FileStream::readBytes">readBytes</a> (long byteCount)<br>
+    DOMString <a href="#FileStream::readBase64">readBase64</a> (long byteCount)<br>
+    void <a href="#FileStream::write">write</a> (DOMString stringData)<br>
+    void <a href="#FileStream::writeBytes">writeBytes</a> (octet[] byteData)<br>
+    void <a href="#FileStream::writeBase64">writeBase64</a> (DOMString base64Data)</td>
+</tr>
+<tr>
+<td><a href="#FileSuccessCallback">FileSuccessCallback</a></td>
+<td>void <a href="#FileSuccessCallback::onsuccess">onsuccess</a> (<a href="#File">File</a> file)</td>
+</tr>
+<tr>
+<td><a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a></td>
+<td>void <a href="#FileSystemStorageArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#FileSystemStorage">FileSystemStorage</a>[] storages)</td>
+</tr>
+<tr>
+<td><a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a></td>
+<td>void <a href="#FileSystemStorageSuccessCallback::onsuccess">onsuccess</a> (<a href="#FileSystemStorage">FileSystemStorage</a> storage)</td>
+</tr>
+<tr>
+<td><a href="#FileStringSuccessCallback">FileStringSuccessCallback</a></td>
+<td>void <a href="#FileStringSuccessCallback::onsuccess">onsuccess</a> (DOMString fileStr)</td>
+</tr>
+<tr>
+<td><a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a></td>
+<td>void <a href="#FileStreamSuccessCallback::onsuccess">onsuccess</a> (<a href="#FileStream">FileStream</a> filestream)</td>
+</tr>
+<tr>
+<td><a href="#FileArraySuccessCallback">FileArraySuccessCallback</a></td>
+<td>void <a href="#FileArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#File">File</a>[] files)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="FileMode">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileMode"></a><h3>1.1. FileMode</h3>
+<div class="brief">
+ Specifies the file modes when it is opened.
+          </div>
+<pre class="webidl prettyprint">  enum FileMode { "r", "rw", "w", "a" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The file modes defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+r - read-only access            </li>
+            <li>
+rw - read and write access            </li>
+            <li>
+w - write access            </li>
+            <li>
+a - append access            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="FileSystemStorageType">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageType"></a><h3>1.2. FileSystemStorageType</h3>
+<div class="brief">
+ Specifies the type of storage.
+          </div>
+<pre class="webidl prettyprint">  enum FileSystemStorageType { "INTERNAL", "EXTERNAL" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <ul>
+            <li>
+INTERNAL - Internal storage is a storage that cannot be removed, such as a flash memory.            </li>
+            <li>
+EXTERNAL - External storage is removable storage, such as a USB drive or memory cards.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="FileSystemStorageState">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageState"></a><h3>1.3. FileSystemStorageState</h3>
+<div class="brief">
+ Specifies the state of the storage.
+          </div>
+<pre class="webidl prettyprint">  enum FileSystemStorageState { "MOUNTED", "REMOVED", "UNMOUNTABLE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <ul>
+            <li>
+MOUNTED - The device is mounted and can be browsed.            </li>
+            <li>
+REMOVED - The device has been removed. This states applies only to external drives.            </li>
+            <li>
+UNMOUNTABLE - The device cannot be mounted due to an error.            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="FileSystemManagerObject">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManagerObject"></a><h3>2.1. FileSystemManagerObject</h3>
+<div class="brief">
+ The FileSystemManagerObject interface defines what is instantiated by the Tizen object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileSystemManagerObject {
+    readonly attribute <a href="#FileSystemManager">FileSystemManager</a> filesystem;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#FileSystemManagerObject">FileSystemManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There is a <em>tizen.filesystem </em>object that allows accessing the functionality of the Filesystem API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="FileSystemManager">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager"></a><h3>2.2. FileSystemManager</h3>
+<div class="brief">
+ The FileSystemManager interface provides access to the Filesystem API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileSystemManager {
+    readonly attribute long maxPathLength;
+
+    void resolve(DOMString location,
+                 <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess,
+                 optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                 optional <a href="#FileMode">FileMode</a>? mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getStorage(DOMString label,
+                    <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listStorages(<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addStorageStateChangeListener(<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeStorageStateChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This manager interface exposes the Filesystem base API, and provides functionalities, such
+as determining root and default locations, resolving a given location into a file handle, and registering filesystem listeners for filesystem events.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     console.log("File Name is " + files[i].name); // displays file name
+   }
+
+   var testFile = documentsDir.createFile("test.txt");
+
+   if (testFile != null) {
+     testFile.openStream(
+       "w",
+       function(fs) {
+         fs.write("HelloWorld");
+         fs.close();
+       }, function(e) {
+         console.log("Error " + e.message);
+       }, "UTF-8"
+     );
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+   'documents',
+   function(dir) {
+     documentsDir = dir;
+     dir.listFiles(onsuccess, onerror);
+   }, function(e) {
+     console.log("Error" + e.message);
+   }, "rw"
+ );
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="FileSystemManager::maxPathLength">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">maxPathLength</span></span><div class="brief">
+ The maximum path length limit for the current platform.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log("The maximum path length is " + tizen.filesystem.maxPathLength);
+ </pre>
+</div>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSystemManager::resolve">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::resolve"></a><code><b><span class="methodName">resolve</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Resolves a location to a file handle after validating it.<br>            </div>
+<div class="synopsis"><pre class="signature prettyprint">void resolve(DOMString location, <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileMode">FileMode</a>? mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+A location can contain a virtual path like '<var>documents/some_file.txt</var>'
+or a file's URI '<var>file:///my_strange_path/some_file.png</var>'.
+            </p>
+            <p>
+The list of root locations that must be supported by a compliant implementation are:
+            </p>
+            <ul>
+              <li>
+documents - The default folder in which text documents (such as pdf, doc...) are stored by default in a device. For example, in some platforms it corresponds to the "My Documents" folder.              </li>
+              <li>
+images - The default folder in which still images, like pictures (in formats including jpg, gif, png, etc.), are stored in the device by default. For example, in some platforms it corresponds to the "My Images" folder.              </li>
+              <li>
+music - The default folder in which sound clips (in formats including mp3, aac, etc.) are stored in the device by default. For example, in some platforms it corresponds to the "My Music" folder.              </li>
+              <li>
+videos - The default folder in which video clips (in formats including avi, mp4, etc.) are stored in the device by default. For example, in some platforms it corresponds to the "My Videos" folder.              </li>
+              <li>
+downloads - The default folder in which downloaded files (from sources including browser, e-mail client, etc.) are stored by default in the device. For example, in some platforms it corresponds to the "Downloads" folder.              </li>
+              <li>
+ringtones: The default folder in which ringtones (such as mp3, etc) are stored in the device.              </li>
+              <li>
+camera : The default folder in which pictures and videos taken by a device are stored.              </li>
+              <li>
+wgt-package - The read-only folder to which the content of a widget file is extracted.              </li>
+              <li>
+wgt-private - The private folder in which a widget stores its information. This folder must be accessible only to the same widget and other widgets or applications must not be able to access the stored information.              </li>
+              <li>
+wgt-private-tmp - Temporary, the private folder in which a widget can store data that is available during a widget execution cycle. Content of this folder can be removed from this directory when the widget is closed or the Web Runtime is restarted. This folder must be accessible only to the same widget and other widgets or applications must not be able to access it.              </li>
+            </ul>
+            <p>
+The <em>mode </em>parameter specifies whether the resulting <em>File </em>object has read-only access ("r" access), read and write access ("rw" access), append access ("a" access), or write access ("w" access) to the root location containing directory tree.
+Permission for the requested access is obtained from the security framework. Once the resulting <em>File </em>object has access, access is inherited by any other <em>File </em>objects that are derived from this instance without any further reference to the security framework, as noted in descriptions of certain methods of <em>File</em>.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.
+For example, the mode is "w" for the read-only virtual roots (wgt-package and ringtones).              </li>
+              <li>
+NotFoundError - If the location input argument does not correspond to a valid location.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<p><span class="remark"> Remark : </span>
+ <var>camera</var> location is supported since Tizen 2.3. If a device does not support camera, NotSupportedError will be thrown.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">location</span>: 
+  Location to resolve that can be a virtual path or file URI
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when the location has been successfully resolved, passing the newly created <em>File </em>object
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+          <li class="param">
+<span class="name">mode</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+      Optional value to indicate the file access mode on all files and directories that can be reached from the <em>File </em>object passed to onsuccess <br>Default value of this parameter is <var>rw</var> if absent or <var>null</var>.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any of the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported (e.g. in the case of 'camera' virtual path if the device does not support camera)
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.filesystem.resolve(
+   'images',
+   function(dir) {
+     console.log("Mount point Name is " +  dir.path);
+   }, function(e) {
+     console.log("Error: " + e.message);
+   }, "r"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::getStorage">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::getStorage"></a><code><b><span class="methodName">getStorage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets information about a storage based on its label.<br>For example: "MyThumbDrive", "InternalFlash".
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getStorage(DOMString label, <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The <em>onsuccess </em>method receives the data structure as an input argument containing additional information about the drive.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If no drive was found with the given label.              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.               </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">label</span>: 
+     Storage label
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when the list of storage is available, passing the storage list to the callback
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onStorage(storage) {
+     // Do something
+ }
+
+ function onStorageError(e) {
+ console.log("Storage not found!" + e.message);
+ }
+
+ tizen.filesystem.getStorage("music", onStorage, onStorageError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::listStorages">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::listStorages"></a><code><b><span class="methodName">listStorages</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Lists the available storages (both internal and external) on a device.
+The onsuccess method receives a list of the data structures as input argument containing additional information about each drive found.
+It can get storages that would have a label named as 'internal0', virtual roots (images, documents,...), 'removable1', 'removable2'.
+'removable1' label is used to resolve sdcard and 'removable2' label is used to resolve USB host, if supported.
+The vfat filesystem used to sdcard filesystem widely is not case-sensitive.
+If you want to handle the file on sdcard, you need to consider case-sensitive filenames are regarded as same name.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void listStorages(<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Labels can differ depending on platform implementation.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a list of storage is available, and passing the storage list to the callback
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function alertForCorruptedRemovableDrives(storages) {
+     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.");
+     }
+ }
+
+ tizen.filesystem.listStorages(alertForCorruptedRemovableDrives);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::addStorageStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::addStorageStateChangeListener"></a><code><b><span class="methodName">addStorageStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to subscribe to notifications when a change in storage state occurs.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addStorageStateChangeListener(<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The most common usage for this method is to watch for any additions and removals of external storages.
+            </p>
+            <p>
+When executed, it returns a subscription identifier that identifies the watch operation. After returning the identifier, the watch operation is started asynchronously. The onsuccess method will be invoked every time a storage state changes. If the attempt fails, the onerror if present will be invoked with the relevant error type.
+            </p>
+            <p>
+The watch operation must continue until the removeStorageStateChangeListener() method is called with the corresponding subscription identifier.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when any change is made to storage state
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs during the watch process
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long Subscription identifier
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watchID;
+ function onStorageStateChanged(storage) {
+     if (storage.state == "MOUNTED")
+         console.log("Storage " + storage.label + " was added!");
+ }
+
+ watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileSystemManager::removeStorageStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemManager::removeStorageStateChangeListener"></a><code><b><span class="methodName">removeStorageStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes a listener to unsubscribe from a storage watch operation.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeStorageStateChangeListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the <em>watchId </em>argument is valid and corresponds to a subscription already in place, the watch process will be stopped and no further callbacks will be invoked.
+Otherwise, the method call has no effect.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ Subscription identifier
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var watchID;
+ function onStorageStateChanged(storage) {
+     if (storage.state == "MOUNTED")
+         console.log("Storage " + storage.label + " was added!");
+     tizen.filesystem.removeStorageStateChangeListener(watchID);
+ }
+
+ watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSystemStorage">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorage"></a><h3>2.3. FileSystemStorage</h3>
+<div class="brief">
+ The FileSystemStorage interface gives additional information about a storage, such as if the device is mounted, if it is a removable drive or not, or the device's name.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileSystemStorage {
+    readonly attribute DOMString label;
+
+    readonly attribute <a href="#FileSystemStorageType">FileSystemStorageType</a> type;
+
+    readonly attribute <a href="#FileSystemStorageState">FileSystemStorageState</a> state;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+To retrieve the mount point, the resolve() method should be used using the label as argument.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="FileSystemStorage::label">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">label</span></span><div class="brief">
+ The storage name.
+            </div>
+<div class="description">
+            <p>
+This attribute is used as an input for methods such as getStorage() and also used as <em>location</em> parameter for File.resolve() and FileSystemManager.resolve().
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="FileSystemStorage::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">FileSystemStorageType </span><span class="name">type</span></span><div class="brief">
+ The storage type as internal or external.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="FileSystemStorage::state">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">FileSystemStorageState </span><span class="name">state</span></span><div class="brief">
+ The storage state as mounted or not.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="File">
+<a class="backward-compatibility-anchor" name="::Filesystem::File"></a><h3>2.4. File</h3>
+<div class="brief">
+ The File interface represents the file abstraction in use.
+A file handle represents a file if the <em>isFile </em>property is <var>true</var>,
+and if the <em>isFile </em>property is <var>false</var>, the file handle represents a directory.
+If a file handle represents a directory, it can address files and directories.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface File {
+    readonly attribute <a href="#File">File</a>? parent;
+
+    readonly attribute boolean readOnly;
+
+    readonly attribute boolean isFile;
+
+    readonly attribute boolean isDirectory;
+
+    readonly attribute Date? created;
+
+    readonly attribute Date? modified;
+
+    readonly attribute DOMString path;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString fullPath;
+
+    readonly attribute unsigned long long fileSize;
+
+    readonly attribute long length;
+
+    DOMString toURI() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listFiles(<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess,
+                   optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                   optional <a href="#FileFilter">FileFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void openStream(<a href="#FileMode">FileMode</a> mode,
+                    <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void readAsText(<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void copyTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void moveTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createDirectory(DOMString dirPath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createFile(DOMString relativeFilePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> resolve(DOMString filePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteDirectory(DOMString directoryPath,
+                         boolean recursive,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteFile(DOMString filePath,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The file object permissions for the file object location and tree rooted
+at that location depends upon the mode defined in the resolve method.
+When a File object creates a child File object,
+the new File object inherits its access rights from
+the parent object without any reference to the security framework, as
+noted in certain methods of File.
+          </p>
+          <p>
+A file handle representing a file can be opened for I/O operations,
+such as reading and writing.
+          </p>
+          <p>
+A file handle representing a directory can be used for listing all
+files and directories rooted as the file handle location.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     // alerts each name of dir's contents
+     console.log(files[i].name);
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred when listing the files in the selected folder");
+ }
+
+ // list directory contents
+ dir.listFiles(onsuccess, onerror);
+ </pre>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="File::parent">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">File </span><span class="name">parent</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The parent directory handle.
+            </div>
+<div class="description">
+            <p>
+This attribute is set to<var>null</var> if there is no parent directory. This also implies that this directory represents a root location.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // list directory contents
+ dir.listFiles(onsuccess, onerror);
+
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     // prints the file parent, should contain the
+     // same value for all the files in the loop
+     console.log("All the files should have the same parent " +
+                 files[i].parent);
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred when listing the files in the selected folder");
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::readOnly">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">readOnly</span></span><div class="brief">
+ The file/directory access state in the filesystem.
+            </div>
+<div class="description">
+            <p>
+This attribute is set to:
+            </p>
+            <ul>
+              <li>
+<var>true</var> - if object has read-only access at its location.              </li>
+              <li>
+<var>false</var> - if object has write access at its location.              </li>
+            </ul>
+            <p>
+This attribute represents the actual state of a file or directory in the filesystem. Its value is not affected by the mode used in FileSystemManager.resolve() that was used to create the <em>File </em>object from which this <em>File </em>object was obtained.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // lists directory contents
+ dir.listFiles(onsuccess, onerror);
+
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].readOnly)
+       console.log("Cannot write to file " + files[i].name);
+     else
+       console.log("Can write to file " + files[i].name);
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::isFile">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isFile</span></span><div class="brief">
+ The flag indicating whether it is a file.
+            </div>
+<div class="description">
+            <p>
+This attribute can have the following values:
+            </p>
+            <ul>
+              <li>
+<var>true</var> if this handle is a file              </li>
+              <li>
+<var>false</var> if this handle is a directory              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="File::isDirectory">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isDirectory</span></span><div class="brief">
+ The flag indicating whether it is a directory.
+            </div>
+<div class="description">
+            <p>
+This attribute can have the following values:
+            </p>
+            <ul>
+              <li>
+<var>true</var> if this handle is a directory              </li>
+              <li>
+<var>false</var> if this handle is a file              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="File::created">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">created</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The timestamp when a file is first created in the filesystem.
+            </div>
+<div class="description">
+            <p>
+This timestamp is equivalent to the timestamp when a call to createFile() succeeds.
+            </p>
+            <p>
+If the platform does not support this attribute, it will
+be <var>null</var>.
+            </p>
+            <p>
+It is unspecified and platform-dependent if the creation
+timestamp changes when a file is moved.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="File::modified">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">modified</span><span class="optional"> [nullable]</span></span><div class="brief">
+ The timestamp when the most recent modification is made to a file, usually when the last write operation succeeds.
+            </div>
+<div class="description">
+            <p>
+Opening a file for reading does not change the modification timestamp.
+            </p>
+            <p>
+If the platform does not support this attribute, it will be <em>null</em>.
+            </p>
+            <p>
+It is unspecified and platform-dependent if the modified
+timestamp changes when a file is moved.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(file.modified); // displays the modification timestamp
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::path">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">path</span></span><div class="brief">
+ The path of a file after excluding its file name.
+            </div>
+<div class="description">
+            <p>
+It begins with the name of the root containing the file, followed by the path, including the directory containing the file, but excluding the file name.
+            </p>
+            <p>
+Except in some special cases of the File representing the root itself, the last
+character is always '/'.
+            </p>
+            <p>
+For example, if a file is located at music/ramones/volume1/RockawayBeach.mp3,
+the path is music/ramones/volume1/.
+            </p>
+            <p>
+For example, if a directory is located at music/ramones/volume1, the path is
+music/ramones/.
+            </p>
+            <p>
+For the virtual roots, the path is same as the name of the virtual root.
+For example, if the root is music, then the path is music. If the root is documents, then the path is documents.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(file.path); // should be 'music/' if the file is music/foo.mp3
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ The file name after excluding the root name and any path components.
+            </div>
+<div class="description">
+            <p>
+This is the name of this file, excluding the root name and any other path components.
+            </p>
+            <p>
+For example, if a file is located at
+music/ramones/volume1/RockawayBeach.mp3, the <em>name </em> is 'RockawayBeach.mp3'.
+            </p>
+            <p>
+For example, if a directory is located at music/ramones/volume1, the
+<em>name </em> is be 'volume1'.
+            </p>
+            <p>
+For the special case of the root itself, the <em>name </em> is an empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // should be foo.mp3 if the file path is music/foo.mp3
+ console.log(file.name);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::fullPath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">fullPath</span></span><div class="brief">
+ The full path of a file.
+            </div>
+<div class="description">
+            <p>
+It begins with the name of the root containing the file,
+and including the name of the file or directory itself.
+            </p>
+            <p>
+For instance, if the RockawayBeach.mp3 file is located at music/ramones/volume1/, then the <em>fullPath </em>is music/ramones/volume1/RockawayBeach.mp3.
+            </p>
+            <p>
+For a directory, if the volume1 directory is located at music/ramones/, then the <em>fullPath </em>is music/ramones/volume1.
+            </p>
+            <p>
+For the special case of the root itself, if the root is music, then the <em>fullPath </em>is music.
+            </p>
+            <p>
+The <em>fullPath </em>is always equal to path + name.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // should be music/track1.mp3 if the file is music/track1.mp3
+ console.log(file.fullPath);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::fileSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">fileSize</span></span><div class="brief">
+ The size of this file, in bytes.
+            </div>
+<div class="description">
+            <p>
+If an attempt to read this attribute for a directory is made, <var>undefined</var> is returned. To retrieve the number of files and directories contained in the directory, use the <em>length </em>attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // displays the file size
+ console.log(file.fileSize);
+ </pre>
+</div>
+</li>
+<li class="attribute" id="File::length">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">length</span></span><div class="brief">
+ The number of files and directories contained in a file handle.
+            </div>
+<div class="description">
+            <p>
+If an attempt to read this attribute for a file is made, <var>undefined</var> is returned. To retrieve the size of a file, use the <em>fileSize </em>attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // '3' if the directory contains two files and one sub-directory
+ console.log(file.length);
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="File::toURI">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::toURI"></a><code><b><span class="methodName">toURI</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Returns a URI for a file to identify an entry (such as using it as the src attribute on an HTML img element).
+The URI has no specific expiration, it should be valid at least as long as the file exists.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toURI();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If that URI corresponds to any of the public virtual roots (that is
+images, videos, music, documents, and downloads) the URI
+must be globally unique and could be used by any widget.
+            </p>
+            <p>
+If that URI corresponds to a file located in any a widget's private areas (such as wgt-package, wgt-private, wgt-private-tmp),
+the generated URI must be unique for that file and for the widget making the request (such as including some derived from the widget ID in the URI).
+These URIs must not be accessible to other widgets, apart from the one invoking this method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString URI that identifies the file or <var>null </var>if an error occurs
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurred.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.filesystem.resolve('music/ramones/RockawayBeach.mp3', function(file) {
+   var audio = new Audio(file.toURI());
+   audio.play();
+   console.log(file.toURI());
+ });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::listFiles">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::listFiles"></a><code><b><span class="methodName">listFiles</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Lists all files in a directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void listFiles(<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional <a href="#FileFilter">FileFilter</a>? filter);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The list of files is passed as a File[] in onsuccess() and contains directories and files. However, the directories "." and ".." must not be returned. Each <em>File </em>object that is part of the array must inherit all the access rights (that is, one of the values in FileMode) from the <em>File </em>object in which this method is invoked.
+            </p>
+            <p>
+If the filter is passed and contains valid values, only those directories and files in the directory that match the filter criteria specified in the <em>FileFilter </em>interface must be returned in the onsuccess() method. If no filter is passed, the filter is <var>null </var>or <var>undefined</var>, or the filter contains invalid values, the implementation must return the full list of files in the directory.
+            </p>
+            <p>
+If the directory does not contain any files or directories, or the filter criteria does not matched with any files or directories, the onsuccess() is invoked with an empty array.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+IOError - If the operation is launched on a file (not a directory).              </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when the list operation has been successfully completed
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+          <li class="param">
+<span class="name">filter</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+    Criteria to restrict the listed files
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   console.log("There are " + files.length  + " in the selected folder");
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     "documents",
+     function(dir) {
+       dir.listFiles(onsuccess, onerror);
+     }, function(e) {
+       console.log("Error " + e.message);
+     }, "r"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::openStream">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::openStream"></a><code><b><span class="methodName">openStream</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Opens the file in the given mode supporting a specified encoding.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void openStream(<a href="#FileMode">FileMode</a> mode, <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This operation is performed asynchronously. If the file is opened successfully, the onsuccess() method is invoked with a <em>FileStream</em> that can be used for reading and writing the file, depending on the mode. The returned <em>FileStream </em>instance includes a file pointer, which represents the current position in the file. The file pointer, by default, is at the start of the file, except in the case of opening a file in append ("a") mode, in which case the file pointer points to the end of the file.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contains an invalid value.              </li>
+              <li>
+IOError - The operation is launched on a directory (not a file), the file is not valid or it does not exist.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+      Mode in which the file is opened<br><b>"r"</b> for reading<br><b>"a"</b> for appending<br><b>"w"</b> for [over]writing<br><b>"rw"</b> for reading and writing<br>                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a file has been opened
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+          <li class="param">
+<span class="name">encoding</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+  Encoding to use for read/write operations on the file, at least the following encodings must be supported:<br>"<a href="http://www.ietf.org/rfc/rfc2279.txt">UTF-8</a>" default encoding<br>"<a href="http://en.wikipedia.org/wiki/ISO/IEC_8859-1">ISO-8859-1</a>" latin1 encoding<br>If no encoding is passed by the developer, then the default platform encoding must be used.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     console.log("File Name is " + files[i].name); // displays file name
+   }
+
+   var testFile = documentsDir.createFile("test.txt");
+   if (testFile != null) {
+     testFile.openStream(
+         "w",
+         function(fs) {
+           fs.write("HelloWorld");
+           fs.close();
+         }, function(e) {
+           console.log("Error " + e.message);
+         }, "UTF-8"
+     );
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir; dir.listFiles(onsuccess,onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::readAsText">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::readAsText"></a><code><b><span class="methodName">readAsText</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the content of a file as a DOMString.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void readAsText(<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror, optional DOMString? encoding);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the operation is successfully executed, the onsuccess() method is invoked and a DOMString is passed as input parameter that represents the file content in the format determined by the <em>encoding </em>parameter.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+IOError - If the operation is launched on a directory (not a file), the file is not valid, or the file does not exist.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ Callback method to be invoked when a file has been successfully read
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error occurs while reading a file
+                </li>
+          <li class="param">
+<span class="name">encoding</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+  Encoding for read/write operations on a file, at least the following encodings must be supported:<br>"<a href="http://www.ietf.org/rfc/rfc2279.txt">UTF-8</a>" default encoding<br>"<a href="http://en.wikipedia.org/wiki/ISO/IEC_8859-1">ISO-8859-1</a>" latin1 encoding<br>If no encoding is passed by the developer, then the default platform encoding must be used.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     console.log("File Name is " + files[i].name); // displays file name
+     if (files[i].isDirectory == false)
+       files[i].readAsText(
+           function(str) {
+             console.log("The file content " + str);
+           }, function(e) {
+             console.log("Error " + e.message);
+           }, "UTF-8"
+       );
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ var documentsDir;
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess,onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::copyTo">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::copyTo"></a><code><b><span class="methodName">copyTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Copies (and overwrites if possible and specified) a file or a
+directory from a specified location to another specified location.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void copyTo(DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The copy of the file or directory identified by the <em>originFilePath </em>parameter must be created in the path passed in the <em>destinationFilePath </em>parameter.
+            </p>
+            <p>
+The file or directory to copy must be under the Directory from which the method is invoked, otherwise the operation must not be performed.
+            </p>
+            <p>
+If the copy is performed successfully, the onsuccess() method is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError - If the <em>originFilePath </em>does not correspond to a valid file or <em>destinationPath </em>is not a valid path.              </li>
+              <li>
+IOError - If the file in which the copyTo() method is invoked is a file (and not a directory), <em>originFilePath </em>corresponds to a file or directory in use by another process, <em>overwrite </em>parameter is <var>false</var> and <em>destinationFilePath </em>corresponds to an existing file or directory.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">originFilePath</span>: 
+      Origin full virtual file or directory path and it must be under the current directory
+                </li>
+          <li class="param">
+<span class="name">destinationFilePath</span>: 
+ New full virtual file path or directory path
+                </li>
+          <li class="param">
+<span class="name">overwrite</span>: 
+           Attribute to determine whether overwriting is allowed or not <br>If set to <var>true</var>, it enforces overwriting an existing file.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           Callback method to be invoked when the file has been copied
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+             Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].isDirectory == false) {
+       documentsDir.copyTo(files[i].fullPath,
+                           "images/backup/" + files[i].name,
+                           false,
+                           function() {console.log("file copied");});
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess, onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::moveTo">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::moveTo"></a><code><b><span class="methodName">moveTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Moves (and overwrites if possible and specified) a file or a directory from a specified location to another.
+This operation is different from instantiating copyTo() and then deleting the original file, as on certain platforms, this operation does not require extra disk space.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void moveTo(DOMString originFilePath, DOMString destinationFilePath, boolean overwrite, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The file or directory identified by the <em>originFilePath </em>parameter is moved to the path passed in the <em>destinationFilePath </em>parameter.
+            </p>
+            <p>
+The file to move must be under the directory from which the method is invoked, else the operation can not be performed.
+            </p>
+            <p>
+If the file or directory is moved successfully, the onsuccess() method is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError - If <em>originFilePath </em>does not correspond to a valid file or <em>destinationPath </em>is not a valid path.              </li>
+              <li>
+IOError - If the <em>File </em>in which the moveTo() method is invoked is a file (not a directory), <em>originFilePath </em>corresponds to a file or directory in use by another process, overwrite parameter is <var>false</var> and <em>destinationFilePath </em>corresponds to an existing file or directory.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">originFilePath</span>: 
+      Origin full virtual file or directory path, and it must be under the current directory
+                </li>
+          <li class="param">
+<span class="name">destinationFilePath</span>: 
+ New full virtual file path or directory path
+                </li>
+          <li class="param">
+<span class="name">overwrite</span>: 
+           Flag indicating whether to overwrite an existing file.<br>When set to <var>true</var>, the files can be overwritten.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+           Callback method to be invoked when the file has been moved
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+             Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].isDirectory == false) {
+       documentsDir.moveTo(files[i].fullPath,
+                           "images/newFolder/" + files[i].name,
+                           false,
+                           function() {console.log("file moved");});
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message +
+               " occurred during listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess, onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::createDirectory">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::createDirectory"></a><code><b><span class="methodName">createDirectory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a new directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#File">File</a> createDirectory(DOMString dirPath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+A new directory will be created relative to the current
+directory that this operation is performed on. The implementation will attempt to
+create all necessary sub-directories specified in the dirPath, as well. The use of "."
+or ".." in path components is not supported.
+            </p>
+            <p>
+This operation can only be performed on file handlers that represent a directory (that is, <em>isDirectory</em> == <var>true</var>).
+            </p>
+            <p>
+If the directory is successfully created, it will be returned.
+            </p>
+            <p>
+In case the directory cannot be created, an error must be thrown with the appropriate error type.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">dirPath</span>: 
+ Relative directory path, and it only contains characters supported by the underlying filesystem
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ File File handle of the new directory
+The new <em>File </em>object has "rw" access rights, as it inherits this from the <em>File </em>object on which the createDirectory() method is called.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if the dirPath already exists,  if the file in which the createDirectory() method is invoked is a file (and not a directory).
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the dirPath does not contain a valid path.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var dir; //Directory object obtained from filesystem API
+ var newDir = dir.createDirectory("newDir");
+ var anotherNewDir = dir.createDirectory("newDir1/subNewDir1");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::createFile">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::createFile"></a><code><b><span class="methodName">createFile</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Creates a empty new file in a specified location that is relative to the directory indicated by current <em>File</em> object's <em>path</em> attribute.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#File">File</a> createFile(DOMString relativeFilePath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The use of "." or ".." in path components is not supported. This operation can only be performed on file handlers that represent a directory (that is, <em>isDirectory </em>== <var>true</var>).
+            </p>
+            <p>
+If the file is successfully created, a file handler must be returned by this method.
+            </p>
+            <p>
+In case the file cannot be created, an error must be thrown with the appropriate error type.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">relativeFilePath</span>: 
+ New file path and it should only contain characters supported by the underlying Filesystem
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ File File handle for the new empty file
+The new <em>File </em>object has "rw" access rights, as it inherits this from the <em>File <em>object on which the createFile() method is
+called.
+</em></em>              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if the filePath already exists, if the <em>File </em>in which the createFile() method is invoked is a file (not a directory).
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the filePath contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var newFile = dir.createFile("newFilePath");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::resolve">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::resolve"></a><code><b><span class="methodName">resolve</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Resolves an existing file or directory relative to the current directory this operation is performed on, and returns a file handle for it.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#File">File</a> resolve(DOMString filePath);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The filePath is not allowed to contain the "." or ".." directories.
+            </p>
+            <p>
+The encoding of file paths is <a href="http://www.ietf.org/rfc/rfc2279.txt">UTF-8</a>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filePath</span>: 
+ Relative file/directory path/file URI to resolve
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ File File handle of the file
+The new <em>File </em>object inherits its access rights from the <em>File </em>object on which this resolve() method is called.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the file path contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type IOError, if the method is executed in a <em>File </em>object that does not represent a directory (that is, <em>isDirectory </em>attribute is <var>false</var>).
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if a file does not exist for the passed file path.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var file;
+ // Resolves helloWorld.doc file that is located in the
+ // documents root location
+ tizen.filesystem.resolve(
+   'documents',
+   function(dir) { file = dir.resolve("helloWorld.doc");},
+   function(e) { console.log("Error" + e.message);},
+   "rw");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::deleteDirectory">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::deleteDirectory"></a><code><b><span class="methodName">deleteDirectory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Deletes a specified directory and directory tree if specified.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void deleteDirectory(DOMString directoryPath, boolean recursive, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method attempts to asynchronously delete a directory or directory tree under the current directory.
+            </p>
+            <p>
+If the <em>recursive </em>parameter is set to <var>true</var>, all the directories and files under the specified directory must be deleted. If the <em>recursive </em>parameter is set to <var>false</var>, the directory is only deleted if it is empty, otherwise an IOError error type will be passed in onerror().
+            </p>
+            <p>
+If the deletion is performed successfully, the onsuccess() is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError -If the passed directory does not correspond to a valid directory.              </li>
+              <li>
+IOError - If the <em>File </em>in which the delete method is invoked is a file (and not a directory), the directory is in use by another process or the directory is not empty and <em>recursive </em>argument is <var>false</var>.<br>This code is also used if a recursive deletion partially fails and any data deleted so far cannot be recovered. This may occur due to the lack of filesystem permissions or if any directories or files are already opened by other processes.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">directoryPath</span>: 
+ Full virtual path to the directory to delete (must be under the current one)
+                </li>
+          <li class="param">
+<span class="name">recursive</span>: 
+     Flag indicating whether the deletion is recursive or not <br>When set to <var>true</var> recursive deletion is allowed. Also, this function deletes
+all data in all subdirectories and so needs to be used with caution.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+     Callback method to be invoked when a directory is successfully deleted
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+       Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var documentsDir;
+ function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (files[i].isDirectory) {
+       documentsDir.deleteDirectory(
+           files[i].fullPath,
+           false,
+           function() {
+             console.log("Directory Deleted");
+           }, function(e) {
+             console.log("Error" + e.message);
+           });
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ tizen.filesystem.resolve(
+     'documents',
+     function(dir) {
+       documentsDir = dir;
+       dir.listFiles(onsuccess,onerror);
+     }, function(e) {
+       console.log("Error" + e.message);
+     }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+<dt class="method" id="File::deleteFile">
+<a class="backward-compatibility-anchor" name="::Filesystem::File::deleteFile"></a><code><b><span class="methodName">deleteFile</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Deletes a specified file.<br>This function attempts to asynchronously delete a file under the current directory.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void deleteFile(DOMString filePath, optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the deletion is performed successfully, the onsuccess() is invoked.
+            </p>
+            <p>
+The ErrorCallback is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value.              </li>
+              <li>
+NotFoundError - If the file does not correspond to a valid file.              </li>
+              <li>
+IOError - If the file in which the delete() method is invoked is a file (not a directory), the file is in use by another process, or there is no permission in the file system.              </li>
+              <li>
+UnknownError - If any other error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filePath</span>: 
+  Full virtual path to the file to delete (must be under the current directory)
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when the file is successfully deleted
+                </li>
+          <li class="param">
+<span class="name">onerror</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback method to be invoked when an error has occurred
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccess(files) {
+   for (var i = 0; i &lt; files.length; i++) {
+     if (!files[i].isDirectory) {
+       documentsDir.deleteFile(
+           files[i].fullPath,
+           function() {
+             console.log("File Deleted");
+           }, function(e) {
+             console.log("Error" + e.message);
+           });
+     }
+   }
+ }
+
+ function onerror(error) {
+   console.log("The error " + error.message + " occurred when listing the files in the selected folder");
+ }
+
+ var documentsDir;
+ tizen.filesystem.resolve(
+   'documents',
+   function(dir) {
+     documentsDir = dir;
+     dir.listFiles(onsuccess,onerror);
+   }, function(e) {
+     console.log("Error" + e.message);
+   }, "rw"
+ );
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="FileFilter">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileFilter"></a><h3>2.5. FileFilter</h3>
+<div class="brief">
+ The dictionary that defines attributes to filter the items returned by the listFiles() method.
+          </div>
+<pre class="webidl prettyprint">  dictionary FileFilter {
+    DOMString name;
+
+    Date startModified;
+
+    Date endModified;
+
+    Date startCreated;
+
+    Date endCreated;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+When this dictionary is passed in the listFiles() method, the result-set of the listFiles() method must only contain the file items entries that match the attribute values of the filter.
+          </p>
+          <p>
+A file item only matches the <em>FileFilter </em>object if all the attributes of the file item match all the attribute values of the filter which are defined (that is, only matching values other than <var>undefined </var>or <var>null</var>). This is similar to an SQL "AND" operation.
+          </p>
+          <p>
+An attribute of the file entry matches the <em>FileFilter </em>attribute value in accordance with the
+following rules:
+          </p>
+          <ul>
+            <li>
+For <em>FileFilter </em>attributes of type DOMString, an entry matches this value only if its corresponding attribute is an exact match. If the filter contains U+0025 'PERCENT SIGN' it is interpreted as a wildcard character and '%' matches any string of any length, including no length. If wildcards are used, the behavior is similar to the LIKE condition in SQL. To specify that a 'PERCENT SIGN' character is to be considered literally instead of interpreting it as a wildcard, developers can escape it with the backslash character (\).
+The matching is not case sensitive, such as "FOO" matches a "foo" or an "f%" filter.
+            </li>
+            <li>
+For File entry attributes of type Date, attributes start and end are included to allow filtering of File entries between two supplied dates. If either or both of these attributes are specified, the following rules apply:<br>A) If both start and end dates are specified (that is, other than <var>null</var>), a File entry matches the filter if its corresponding attribute is the same as either start or end or between the two supplied dates (that is, after start and before end).<br>B) If only the start attribute contains a value (other than <var>null</var>), a File entry matches the filter if its corresponding attribute is later than or equal to the start one.<br>C) If only the end date contains a value (other than <var>null</var>), a file matches the filter if its corresponding attribute is earlier than or equal to the end date.
+            </li>
+          </ul>
+         </div>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="FileFilter::name"><span class="attrName">DOMString name</span></dt>
+<dd>
+<div class="brief">
+ The File name attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files that have a name that corresponds with this attribute (either exactly or with the specified wildcards) match this filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::startModified"><span class="attrName">Date startModified</span></dt>
+<dd>
+<div class="brief">
+ The File modified attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with modified date later than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::endModified"><span class="attrName">Date endModified</span></dt>
+<dd>
+<div class="brief">
+ The File modified attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with modified date earlier than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::startCreated"><span class="attrName">Date startCreated</span></dt>
+<dd>
+<div class="brief">
+ The File created attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with created date later than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="FileFilter::endCreated"><span class="attrName">Date endCreated</span></dt>
+<dd>
+<div class="brief">
+ The File created attribute filter.
+            </div>
+<div class="description">
+            <p>
+Files with created date earlier than this attribute or equal to it match the filtering criteria.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileStream">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream"></a><h3>2.6. FileStream</h3>
+<div class="brief">
+ The FileStream interface represents a handle to a File opened for read and/or write operations.
+Read and write operations are performed relative to a position attribute, which is a pointer that represents the current position in the file.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface FileStream {
+    readonly attribute boolean eof;
+
+    attribute long position setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long bytesAvailable;
+
+    void close();
+
+    DOMString read(long charCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    octet[] readBytes(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString readBase64(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void write(DOMString stringData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBytes(octet[] byteData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBase64(DOMString base64Data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+A series of read/write methods are available that permit both binary and text to be processed.
+          </p>
+          <p>
+Once a file stream is closed, any operation attempt made on this stream results in a standard JavaScript error.
+          </p>
+          <p>
+The read/write operations in this interface do not throw any security exceptions as the access rights are expected to be granted through the initial resolve() method or through the openStream() method of the <em>File </em>interface. Therefore, all actions performed on a successfully resolved File and FileStream are expected to succeed. This avoids successive asynchronous calls and may potentially increase application for a user.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="FileStream::eof">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">eof</span></span><div class="brief">
+ The flag indicating whether the current file pointer is at the end of the file.
+            </div>
+<div class="description">
+            <p>
+If set to <var>true</var>, this attribute indicates that the file pointer is at the end of the file.
+            </p>
+            <p>
+If set to <var>false</var>, this attribute indicates that the file pointer is not at the end of the file and so it is anywhere within the file.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> if (stream.eof) {
+   // file has been read completely
+ }
+ </pre>
+</div>
+</li>
+<li class="attribute" id="FileStream::position">
+<span class="attrName"><span class="type">long </span><span class="name">position</span></span><div class="brief">
+ The flag indicating the stream position for reads/writes.
+            </div>
+<div class="description">
+            <p>
+The stream position is an offset of bytes from the start of the file stream. When invoking an operation that reads or writes from the stream, the operation will take place from the byte defined by this <em>position </em>attribute. If the read or write operation is successful, the position of the stream is advanced by the number of bytes read or written. If the read/write operation is not successful, the position of the stream is unchanged.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(stream.position); // displays current stream position
+ // alters current stream position to the begin of the file,
+ // like seek() in C
+ stream.position = 0;
+ </pre>
+</div>
+</li>
+<li class="attribute" id="FileStream::bytesAvailable">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">bytesAvailable</span></span><div class="brief">
+ The number of bytes that are available for reading from the stream.
+            </div>
+<div class="description">
+            <p>
+The number of bytes available for reading is the maximum amount of bytes that can be read in the next read operation.
+It corresponds to the number of bytes available after the file pointer denoted by the <em>position </em>attribute.
+            </p>
+            <p>
+<var>-1 </var>if EOF is <var>true</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log(stream.bytesAvailable); // displays the available bytes to be read
+ </pre>
+</div>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileStream::close">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::close"></a><code><b><span class="methodName">close</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Closes this FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void close();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Flushes any pending buffered writes and closes the File. Always succeeds.
+Note that pending writes might not succeed.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> stream.close(); // closes this stream, no subsequent access to stream allowed
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::read">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::read"></a><code><b><span class="methodName">read</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the specified number of characters from the position of the file pointer in a FileStream and returns the characters as a string.
+The resulting string length might be shorter than <em>charCount </em>if EOF is <var>true</var>.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString read(long charCount);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">charCount</span>: 
+ Number of characters being read
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString Array of read characters as a string
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a read error occurs, such as the bytes in the stream cannot be decoded with the encoding in use.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError,  if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var text = stream.read(file.fileSize);
+ stream.close();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::readBytes">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::readBytes"></a><code><b><span class="methodName">readBytes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the specified number of bytes from a FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">octet[] readBytes(long byteCount);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">byteCount</span>: 
+ Number of bytes to read
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ octet[] Result of read bytes as a byte (or number) array
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a read error occurs.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // reads up to 256 bytes from the stream
+ var raw = stream.readBytes(256);
+ for (var i = 0; i &lt; raw.length; i++) {
+   // raw[i] contains the i-th byte of the current data chunk
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::readBase64">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::readBase64"></a><code><b><span class="methodName">readBase64</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Reads the specified number of bytes from this FileStream, encoding the result in base64.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString readBase64(long byteCount);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.read
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param"><span class="name">byteCount</span></li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // reads up to 256 bytes from the stream
+ var base64 = stream.readBase64(256);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::write">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::write"></a><code><b><span class="methodName">write</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the specified DOMString to a FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void write(DOMString stringData);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">stringData</span>: 
+ Actual string to write
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a write error occurs.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var text = "Hello world";
+ stream.write(text);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::writeBytes">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::writeBytes"></a><code><b><span class="methodName">writeBytes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the specified bytes to this FileStream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void writeBytes(octet[] byteData);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">byteData</span>: 
+ Byte data array being written
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if a write error occurs.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var bytes = in.readBytes(256);
+ // writes the bytes read from in to out
+ out.writeBytes(bytes);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="FileStream::writeBase64">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStream::writeBase64"></a><code><b><span class="methodName">writeBase64</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Writes the result to this FileStream after converting the specified base64 DOMString to bytes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void writeBase64(DOMString base64Data);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/filesystem.write
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">base64Data</span>: 
+ The base64 data to written
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type IOError, if an error occurs during writeBase64.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value
+(e.g. the base64Data input parameter is not a valid Base64 sequence).
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var base64 = in.readBase64(256);
+ // writes the base64 data read from in to out
+ out.writeBase64(base64);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSuccessCallback"></a><h3>2.7. FileSuccessCallback</h3>
+<div class="brief">
+ The FileSuccessCallback interface defines file system success callback with a <em>File</em> object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileSuccessCallback {
+    void onsuccess(<a href="#File">File</a> file);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as FileSystemManager.resolve(), copying, moving, and deleting files.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#File">File</a> file);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">file</span>: 
+ File resulting from the asynchronous call
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSystemStorageArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageArraySuccessCallback"></a><h3>2.8. FileSystemStorageArraySuccessCallback</h3>
+<div class="brief">
+ The FileSystemStorageArraySuccessCallback callback interface specifies a success callback with an array of FileSystemStorage objects as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageArraySuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a>[] storages);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as FileSystemManager.listStorages().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSystemStorageArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a>[] storages);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">storages</span>: 
+ List of available storage devices
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileSystemStorageSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageSuccessCallback"></a><h3>2.9. FileSystemStorageSuccessCallback</h3>
+<div class="brief">
+ The FileSystemStorageSuccessCallback callback interface specifies a success callback with a <em>FileSystmeStorage </em>object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageSuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a> storage);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as FileSystemManager.getStorage() and FileSystemManager.addStorageStateChangeListener().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileSystemStorageSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileSystemStorageSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a> storage);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">storage</span>: 
+ Storage device structure
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileStringSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStringSuccessCallback"></a><h3>2.10. FileStringSuccessCallback</h3>
+<div class="brief">
+ The FileStringSuccessCallback callback interface specifies a success callback with a DOMString object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileStringSuccessCallback {
+    void onsuccess(DOMString fileStr);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used in asynchronous operations, such as File.readAsText().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileStringSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStringSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString fileStr);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">fileStr</span>: 
+ File represented as a DOMString resulting from the asynchronous call
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileStreamSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStreamSuccessCallback"></a><h3>2.11. FileStreamSuccessCallback</h3>
+<div class="brief">
+ The FileStreamSuccessCallback interface specifies a success callback with a <em>FileStream </em>object as input argument.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileStreamSuccessCallback {
+    void onsuccess(<a href="#FileStream">FileStream</a> filestream);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It is used by asynchronous methods, such as File.openStream().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileStreamSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileStreamSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the File.openStream asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#FileStream">FileStream</a> filestream);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">filestream</span>: 
+ Filestream to access file content
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="FileArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileArraySuccessCallback"></a><h3>2.12. FileArraySuccessCallback</h3>
+<div class="brief">
+ The FileArraySuccessCallback interface defines file system specific success callback for listing methods.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface FileArraySuccessCallback {
+    void onsuccess(<a href="#File">File</a>[] files);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback with a function taking an array of <em>File </em>objects as input argument. It is used in asynchronous methods, such as File.listFiles().
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="FileArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Filesystem::FileArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#File">File</a>[] files);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">files</span>: 
+ Files resulting from the asynchronous call
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Filesystem {
+  enum FileMode { "r", "rw", "w", "a" };
+
+  enum FileSystemStorageType { "INTERNAL", "EXTERNAL" };
+
+  enum FileSystemStorageState { "MOUNTED", "REMOVED", "UNMOUNTABLE" };
+
+  [NoInterfaceObject] interface FileSystemManagerObject {
+    readonly attribute <a href="#FileSystemManager">FileSystemManager</a> filesystem;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#FileSystemManagerObject">FileSystemManagerObject</a>;
+
+  [NoInterfaceObject] interface FileSystemManager {
+    readonly attribute long maxPathLength;
+
+    void resolve(DOMString location,
+                 <a href="#FileSuccessCallback">FileSuccessCallback</a> onsuccess,
+                 optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                 optional <a href="#FileMode">FileMode</a>? mode) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getStorage(DOMString label,
+                    <a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listStorages(<a href="#FileSystemStorageArraySuccessCallback">FileSystemStorageArraySuccessCallback</a> onsuccess,
+                      optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long addStorageStateChangeListener(<a href="#FileSystemStorageSuccessCallback">FileSystemStorageSuccessCallback</a> onsuccess,
+                                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeStorageStateChangeListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface FileSystemStorage {
+    readonly attribute DOMString label;
+
+    readonly attribute <a href="#FileSystemStorageType">FileSystemStorageType</a> type;
+
+    readonly attribute <a href="#FileSystemStorageState">FileSystemStorageState</a> state;
+  };
+
+  [NoInterfaceObject] interface File {
+    readonly attribute <a href="#File">File</a>? parent;
+
+    readonly attribute boolean readOnly;
+
+    readonly attribute boolean isFile;
+
+    readonly attribute boolean isDirectory;
+
+    readonly attribute Date? created;
+
+    readonly attribute Date? modified;
+
+    readonly attribute DOMString path;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString fullPath;
+
+    readonly attribute unsigned long long fileSize;
+
+    readonly attribute long length;
+
+    DOMString toURI() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void listFiles(<a href="#FileArraySuccessCallback">FileArraySuccessCallback</a> onsuccess,
+                   optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                   optional <a href="#FileFilter">FileFilter</a>? filter) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void openStream(<a href="#FileMode">FileMode</a> mode,
+                    <a href="#FileStreamSuccessCallback">FileStreamSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void readAsText(<a href="#FileStringSuccessCallback">FileStringSuccessCallback</a> onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror,
+                    optional DOMString? encoding) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void copyTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void moveTo(DOMString originFilePath,
+                DOMString destinationFilePath,
+                boolean overwrite,
+                optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createDirectory(DOMString dirPath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> createFile(DOMString relativeFilePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#File">File</a> resolve(DOMString filePath) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteDirectory(DOMString directoryPath,
+                         boolean recursive,
+                         optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                         optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void deleteFile(DOMString filePath,
+                    optional <a href="tizen.html#SuccessCallback">SuccessCallback</a>? onsuccess,
+                    optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? onerror) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+
+  dictionary FileFilter {
+    DOMString name;
+
+    Date startModified;
+
+    Date endModified;
+
+    Date startCreated;
+
+    Date endCreated;
+  };
+
+  [NoInterfaceObject] interface FileStream {
+    readonly attribute boolean eof;
+
+    attribute long position setraises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute long bytesAvailable;
+
+    void close();
+
+    DOMString read(long charCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    octet[] readBytes(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString readBase64(long byteCount) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void write(DOMString stringData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBytes(octet[] byteData) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void writeBase64(DOMString base64Data) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileSuccessCallback {
+    void onsuccess(<a href="#File">File</a> file);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageArraySuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a>[] storages);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileSystemStorageSuccessCallback {
+    void onsuccess(<a href="#FileSystemStorage">FileSystemStorage</a> storage);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileStringSuccessCallback {
+    void onsuccess(DOMString fileStr);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileStreamSuccessCallback {
+    void onsuccess(<a href="#FileStream">FileStream</a> filestream);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface FileArraySuccessCallback {
+    void onsuccess(<a href="#File">File</a>[] files);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html
new file mode 100644 (file)
index 0000000..cfc6876
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html
@@ -0,0 +1,1265 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>HumanActivityMonitor API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::HumanActivityMonitor">
+<div class="supported-platforms"><img class="wearable-optional emulator-partial" title="Optional, Supported by Tizen Wearable emulator - Emulator supports only HRM" src="ww_icon_optional.png"></div>
+<div class="title"><h1>HumanActivityMonitor API</h1></div>
+<div class="brief">
+ The HumanActivityMonitor API defines interfaces and methods to manage human activity data from various sensors on the device.
+        </div>
+<div class="description">
+        <p>
+The following human activity monitor functionality is provided:
+        </p>
+        <ul>
+          <li>
+Set up callbacks for data change notification          </li>
+          <li>
+Get current human activity monitor data          </li>
+        </ul>
+        <p>
+For more information about how to use Human Activity Monitor API, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/ham_w.htm">Human Activity Monitor Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#HumanActivityType">HumanActivityType</a>
+</li>
+<li>1.2. <a href="#PedometerStepStatus">PedometerStepStatus</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a>
+</li>
+<li>2.2. <a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a>
+</li>
+<li>2.3. <a href="#StepDifference">StepDifference</a>
+</li>
+<li>2.4. <a href="#HumanActivityData">HumanActivityData</a>
+</li>
+<li>2.5. <a href="#HumanActivityPedometerData">HumanActivityPedometerData</a>
+</li>
+<li>2.6. <a href="#HumanActivityAccumulativePedometerData">HumanActivityAccumulativePedometerData</a>
+</li>
+<li>2.7. <a href="#HumanActivityHRMData">HumanActivityHRMData</a>
+</li>
+<li>2.8. <a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a>
+</li>
+<li>2.9. <a href="#HumanActivityGPSInfoArray">HumanActivityGPSInfoArray</a>
+</li>
+<li>2.10. <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a></td>
+<td>void <a href="#HumanActivityMonitorManager::getHumanActivityData">getHumanActivityData</a> (<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#HumanActivityMonitorManager::start">start</a> (<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback)<br>
+    void <a href="#HumanActivityMonitorManager::stop">stop</a> (<a href="#HumanActivityType">HumanActivityType</a> type)<br>
+    void <a href="#HumanActivityMonitorManager::setAccumulativePedometerListener">setAccumulativePedometerListener</a> (<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback)<br>
+    void <a href="#HumanActivityMonitorManager::unsetAccumulativePedometerListener">unsetAccumulativePedometerListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#StepDifference">StepDifference</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityData">HumanActivityData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityPedometerData">HumanActivityPedometerData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityAccumulativePedometerData">HumanActivityAccumulativePedometerData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityHRMData">HumanActivityHRMData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityGPSInfoArray">HumanActivityGPSInfoArray</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a></td>
+<td>void <a href="#HumanActivityMonitorSuccessCallback::onsuccess">onsuccess</a> (optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="HumanActivityType">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityType"></a><h3>1.1. HumanActivityType</h3>
+<div class="brief">
+ Specifies the supported human activity monitor types.
+          </div>
+<pre class="webidl prettyprint">    enum HumanActivityType { "PEDOMETER", "WRIST_UP", "HRM", "GPS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The human activity monitor types defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+PEDOMETER - Pedometer data            </li>
+            <li>
+WRIST_UP - Wrist up gesture            </li>
+            <li>
+HRM - Heart rate monitor (Heart rate and RR interval)            </li>
+            <li>
+GPS - GPS information (latitude, longitude and speed)            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="PedometerStepStatus">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::PedometerStepStatus"></a><h3>1.2. PedometerStepStatus</h3>
+<div class="brief">
+ Specifies the pedometer user's current movement type.
+          </div>
+<pre class="webidl prettyprint">    enum PedometerStepStatus { "NOT_MOVING", "WALKING", "RUNNING" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+NOT_MOVING - The user remains stationary            </li>
+            <li>
+WALKING - The user is walking            </li>
+            <li>
+RUNNING - The user is running            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="HumanActivityMonitorManagerObject">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManagerObject"></a><h3>2.1. HumanActivityMonitorManagerObject</h3>
+<div class="brief">
+ The HumanActivityMonitorManagerObject interface defines what is instantiated by the <em>Tizen</em> object.
+The <em>tizen.humanactivitymonitor</em> object allows access to the human activity data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityMonitorManagerObject {
+        readonly attribute <a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a> humanactivitymonitor;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="HumanActivityMonitorManager">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager"></a><h3>2.2. HumanActivityMonitorManager</h3>
+<div class="brief">
+ The HumanActivityMonitorManager interface provides methods to access human activity data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityMonitorManager {
+        void getHumanActivityData(<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void start(<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop(<a href="#HumanActivityType">HumanActivityType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setAccumulativePedometerListener(<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetAccumulativePedometerListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="HumanActivityMonitorManager::getHumanActivityData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::getHumanActivityData"></a><code><b><span class="methodName">getHumanActivityData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current human activity data for the requested type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getHumanActivityData(<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+If the given type is not supported on a device, <var>NotSupportedError</var> is thrown.
+            </p>
+            <p>
+The <em>start()</em> method should be called to turn on the sensor before calling the <em>getHumanActivityData()</em> method. If not, <var>ServiceNotAvailableError</var> occurs.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getHumanActivityData()</em> method is called without previously calling the <em>start()</em> method              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/location
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <b>'http://tizen.org/privilege/location'</b> privilege is required for only <a href="#HumanActivityType">GPS</a> type.
+That means that both <b>'http://tizen.org/privilege/healthinfo'</b> and <b>'http://tizen.org/privilege/location'</b> should be declared in config.xml file for GPS type.
+In other types, only <b>'http://tizen.org/privilege/healthinfo'</b> should be declared.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Human activity data type to read
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the human activity data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the success callback fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to use this function.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onsuccessCB(pedometerInfo) {
+     console.log("Step status : " + pedometerInfo.stepStatus);
+     console.log("Cumulative total step count : " + pedometerInfo.cumulativeTotalStepCount);
+ }
+
+ function onerrorCB(error) {
+     console.log("Error occurs. name:"+error.name + ", message: "+error.message);
+ }
+
+ function onchangedCB(pedometerdata) {
+     console.log("From now on, you will be notified when the pedometer data changes.");
+     // To get the current data information
+     tizen.humanactivitymonitor.getHumanActivityData("PEDOMETER", onsuccessCB, onerrorCB);
+ }
+
+ tizen.humanactivitymonitor.start("PEDOMETER", onchangedCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::start">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts the sensor and registers a change listener to be called when new human activity data for a given human activity type is available.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void start(<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/location
+            </p>
+<p><span class="remark"> Remark : </span>
+ When the CPU is in the power saving mode, WRIST_UP event might not occur even though &lt;tizen:setting background-support="enable" /&gt; is declared in config.xml file.
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <b>'http://tizen.org/privilege/location'</b> privilege is required for only <a href="#HumanActivityType">GPS</a> type.
+That means that both <b>'http://tizen.org/privilege/healthinfo'</b> and <b>'http://tizen.org/privilege/location'</b> should be declared in config.xml file for GPS type.
+In other types, only <b>'http://tizen.org/privilege/healthinfo'</b> should be declared.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Human activity type to register a listener for
+                </li>
+          <li class="param">
+<span class="name">changedCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when new human activity data is available<br>Note that the listener is not called for the successful start of a human activity sensor.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to use this function.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onchangedCB(pedometerInfo) {
+     console.log("Step status : " + pedometerInfo.stepStatus);
+     console.log("Cumulative total step count : " + pedometerInfo.cumulativeTotalStepCount);
+ }
+
+ tizen.humanactivitymonitor.start("PEDOMETER", onchangedCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::stop">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::stop"></a><code><b><span class="methodName">stop</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops the sensor and unregisters a previously registered listener for available human activity data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stop(<a href="#HumanActivityType">HumanActivityType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/location
+            </p>
+<p><span class="remark"> Remark : </span>
+ The <b>'http://tizen.org/privilege/location'</b> privilege is required for only <a href="#HumanActivityType">GPS</a> type.
+That means that both <b>'http://tizen.org/privilege/healthinfo'</b> and <b>'http://tizen.org/privilege/location'</b> should be declared in config.xml file for GPS type.
+In other types, only <b>'http://tizen.org/privilege/healthinfo'</b> should be declared.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Human activity type to unregister the listener for
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if unregistering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to use this function.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.humanactivitymonitor.stop("PEDOMETER");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::setAccumulativePedometerListener">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::setAccumulativePedometerListener"></a><code><b><span class="methodName">setAccumulativePedometerListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts the sensor and registers a listener to be called when new accumulative pedometer data is available.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setAccumulativePedometerListener(<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that the setAccumulativePedometerListener() method does not need to call the sensor's start() method.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method to be invoked when new accumulative pedometer data is available<br>Callback is invoked with HumanActivityAccumulativePedometerData as an argument.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the pedometer sensor is not supported on a device.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onchangedCB(pedometerInfo) {
+        console.log("Step status : " + pedometerInfo.stepStatus);
+        console.log("Accumulative total step count : " + pedometerInfo.accumulativeTotalStepCount);
+ }
+
+ tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="HumanActivityMonitorManager::unsetAccumulativePedometerListener">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorManager::unsetAccumulativePedometerListener"></a><code><b><span class="methodName">unsetAccumulativePedometerListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops the sensor and unregisters a previously registered listener for the accumulative pedometer data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetAccumulativePedometerListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/healthinfo
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type UnknownError, if unregistering the listener fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="StepDifference">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::StepDifference"></a><h3>2.3. StepDifference</h3>
+<div class="brief">
+ The StepDifference interface represents the count difference between steps and timestamp.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface StepDifference {
+
+        readonly attribute long stepCountDifference;
+
+        readonly attribute long timestamp;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="StepDifference::stepCountDifference">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">stepCountDifference</span></span><div class="brief">
+ Count difference between the steps.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="StepDifference::timestamp">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">timestamp</span></span><div class="brief">
+ Timestamp in seconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityData"></a><h3>2.4. HumanActivityData</h3>
+<div class="brief">
+ The HumanActivityData interface is a common abstract interface used by the different types of human activity data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityData {
+     };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="HumanActivityPedometerData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityPedometerData"></a><h3>2.5. HumanActivityPedometerData</h3>
+<div class="brief">
+ The HumanActivityPedometerData interface represents pedometer data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityPedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double cumulativeDistance;
+
+        readonly attribute double cumulativeCalorie;
+
+        readonly attribute double cumulativeTotalStepCount;
+
+        readonly attribute double cumulativeWalkStepCount;
+
+        readonly attribute double cumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityPedometerData::stepStatus">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PedometerStepStatus </span><span class="name">stepStatus</span></span><div class="brief">
+ The current movement type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::speed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">speed</span></span><div class="brief">
+ Current speed in km/h.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::walkingFrequency">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">walkingFrequency</span></span><div class="brief">
+ Step count per second.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeDistance">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeDistance</span></span><div class="brief">
+ Cumulative distance traveled since the last start() method call in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeCalorie">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeCalorie</span></span><div class="brief">
+ Cumulative calories burned since the last start() method call in kcal.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeTotalStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeTotalStepCount</span></span><div class="brief">
+ Cumulative walking and running step count since the last start() method call.
+            </div>
+<div class="description">
+            <p>
+The value is the sum of <em>cumulativeWalkStepCount</em> and <em>cumulativeRunStepCount</em>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeWalkStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeWalkStepCount</span></span><div class="brief">
+ Cumulative walking step count since the last start() method call.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::cumulativeRunStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">cumulativeRunStepCount</span></span><div class="brief">
+ Cumulative running step count since the last start() method call.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityPedometerData::stepCountDifferences">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">StepDifference[]
+                      </span><span class="name">stepCountDifferences</span></span><div class="brief">
+ Array of the StepDifference.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityAccumulativePedometerData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityAccumulativePedometerData"></a><h3>2.6. HumanActivityAccumulativePedometerData</h3>
+<div class="brief">
+ The HumanActivityAccumulativePedometerData interface represents pedometer motion data since the device is booted.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityAccumulativePedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double accumulativeDistance;
+
+        readonly attribute double accumulativeCalorie;
+
+        readonly attribute double accumulativeTotalStepCount;
+
+        readonly attribute double accumulativeWalkStepCount;
+
+        readonly attribute double accumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::stepStatus">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PedometerStepStatus </span><span class="name">stepStatus</span></span><div class="brief">
+ Current movement type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::speed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">speed</span></span><div class="brief">
+ Current speed in km/h.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::walkingFrequency">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">walkingFrequency</span></span><div class="brief">
+ Step count per second.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeDistance">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeDistance</span></span><div class="brief">
+ Accumulative distance traveled since the device is booted in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeCalorie">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeCalorie</span></span><div class="brief">
+ Accumulative calories burnt since the device is booted in kcal.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeTotalStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeTotalStepCount</span></span><div class="brief">
+ Accumulative walking and running step count since the device is booted.
+            </div>
+<div class="description">
+            <p>
+The value is the sum of <em>accumulativeWalkStepCount</em> and <em>accumulativeRunStepCount</em>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeWalkStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeWalkStepCount</span></span><div class="brief">
+ Accumulative walking step count since the device is booted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::accumulativeRunStepCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">accumulativeRunStepCount</span></span><div class="brief">
+ Accumulative running step count since the device is booted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityAccumulativePedometerData::stepCountDifferences">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">StepDifference[]
+                      </span><span class="name">stepCountDifferences</span></span><div class="brief">
+ Array of the StepDifference.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityHRMData">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityHRMData"></a><h3>2.7. HumanActivityHRMData</h3>
+<div class="brief">
+ The HumanActivityHRMData interface represents Heart Rate Monitor(HRM) data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityHRMData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute long heartRate;
+
+        readonly attribute long rRInterval;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityHRMData::heartRate">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">heartRate</span></span><div class="brief">
+ Heart rate in beats per minute.
+When a user takes off the watch device, the heartRate is set to -3. When a user shakes the watch, the heartRate is set to -2.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityHRMData::rRInterval">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">rRInterval</span></span><div class="brief">
+ Peak-to-peak interval in millisecond(s).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityGPSInfo">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityGPSInfo"></a><h3>2.8. HumanActivityGPSInfo</h3>
+<div class="brief">
+ The HumanActivityGPSInfo interface represents GPS information.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityGPSInfo {
+
+        readonly attribute double latitude;
+
+        readonly attribute double longitude;
+
+        readonly attribute double altitude;
+
+        readonly attribute double speed;
+
+        readonly attribute long errorRange;
+
+        readonly attribute long timestamp;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="HumanActivityGPSInfo::latitude">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">latitude</span></span><div class="brief">
+ An attribute to indicate the user's latitude in degrees.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::longitude">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">longitude</span></span><div class="brief">
+ An attribute to indicate the user's longitude in degrees.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::altitude">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">altitude</span></span><div class="brief">
+ An attribute to indicate the user's altitude in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::speed">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">speed</span></span><div class="brief">
+ An attribute to indicate the speed in km/h.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::errorRange">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">errorRange</span></span><div class="brief">
+ An attribute to indicate the error range of the user's position in meters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="HumanActivityGPSInfo::timestamp">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">timestamp</span></span><div class="brief">
+ An attribute to indicate timestamp in seconds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityGPSInfoArray">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityGPSInfoArray"></a><h3>2.9. HumanActivityGPSInfoArray</h3>
+<div class="brief">
+ The HumanActivityGPSInfoArray interface represents GPS information array.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface HumanActivityGPSInfoArray : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a>[] gpsInfo;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="HumanActivityGPSInfoArray::gpsInfo">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">HumanActivityGPSInfo[]
+                      </span><span class="name">gpsInfo</span></span><div class="brief">
+ An attribute to indicate the array of GPS information.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="HumanActivityMonitorSuccessCallback">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorSuccessCallback"></a><h3>2.10. HumanActivityMonitorSuccessCallback</h3>
+<div class="brief">
+ The HumanActivityMonitorSuccessCallback interface is a callback interface that is invoked when new human activity data is available.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface HumanActivityMonitorSuccessCallback {
+        void onsuccess(optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="HumanActivityMonitorSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::HumanActivityMonitor::HumanActivityMonitorSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when there is new human activity data available.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">humanactivitydata</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ New human activity data<br>Note that <var>null</var> is passed for the WRIST_UP type.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the Human Activity Monitor application runs on a device which supports this API, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/humanactivitymonitor</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the pedometer application runs on a device with pedometer, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.pedometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the wrist-up gesture recognition application runs on a device with wrist up, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.wrist_up</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the Heart Rate Monitor application runs on a device with heart rate monitor, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.heart_rate_monitor</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the GPS batch information tracking application runs on a device with GPS batch feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/location.batch</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module HumanActivityMonitor {
+
+    enum HumanActivityType { "PEDOMETER", "WRIST_UP", "HRM", "GPS" };
+
+    enum PedometerStepStatus { "NOT_MOVING", "WALKING", "RUNNING" };
+
+    [NoInterfaceObject] interface HumanActivityMonitorManagerObject {
+        readonly attribute <a href="#HumanActivityMonitorManager">HumanActivityMonitorManager</a> humanactivitymonitor;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#HumanActivityMonitorManagerObject">HumanActivityMonitorManagerObject</a>;
+
+    [NoInterfaceObject] interface HumanActivityMonitorManager {
+        void getHumanActivityData(<a href="#HumanActivityType">HumanActivityType</a> type, <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void start(<a href="#HumanActivityType">HumanActivityType</a> type, optional <a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a>? changedCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop(<a href="#HumanActivityType">HumanActivityType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setAccumulativePedometerListener(<a href="#HumanActivityMonitorSuccessCallback">HumanActivityMonitorSuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetAccumulativePedometerListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+    [NoInterfaceObject] interface StepDifference {
+
+        readonly attribute long stepCountDifference;
+
+        readonly attribute long timestamp;
+    };
+
+    [NoInterfaceObject] interface HumanActivityData {
+     };
+
+    [NoInterfaceObject] interface HumanActivityPedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double cumulativeDistance;
+
+        readonly attribute double cumulativeCalorie;
+
+        readonly attribute double cumulativeTotalStepCount;
+
+        readonly attribute double cumulativeWalkStepCount;
+
+        readonly attribute double cumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };
+
+    [NoInterfaceObject] interface HumanActivityAccumulativePedometerData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#PedometerStepStatus">PedometerStepStatus</a> stepStatus;
+
+        readonly attribute double speed;
+
+        readonly attribute double walkingFrequency;
+
+        readonly attribute double accumulativeDistance;
+
+        readonly attribute double accumulativeCalorie;
+
+        readonly attribute double accumulativeTotalStepCount;
+
+        readonly attribute double accumulativeWalkStepCount;
+
+        readonly attribute double accumulativeRunStepCount;
+
+        readonly attribute <a href="#StepDifference">StepDifference</a>[] stepCountDifferences;
+    };
+
+    [NoInterfaceObject] interface HumanActivityHRMData : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute long heartRate;
+
+        readonly attribute long rRInterval;
+    };
+
+    [NoInterfaceObject] interface HumanActivityGPSInfo {
+
+        readonly attribute double latitude;
+
+        readonly attribute double longitude;
+
+        readonly attribute double altitude;
+
+        readonly attribute double speed;
+
+        readonly attribute long errorRange;
+
+        readonly attribute long timestamp;
+    };
+
+    [NoInterfaceObject] interface HumanActivityGPSInfoArray : <a href="#HumanActivityData">HumanActivityData</a> {
+
+        readonly attribute <a href="#HumanActivityGPSInfo">HumanActivityGPSInfo</a>[] gpsInfo;
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface HumanActivityMonitorSuccessCallback {
+        void onsuccess(optional <a href="#HumanActivityData">HumanActivityData</a>? humanactivitydata);
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/linux-foundation-color.png b/org.tizen.web.apireference/html/device_api/wearable/tizen/linux-foundation-color.png
new file mode 100644 (file)
index 0000000..344010d
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/wearable/tizen/linux-foundation-color.png differ
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/logo-tizen.png b/org.tizen.web.apireference/html/device_api/wearable/tizen/logo-tizen.png
new file mode 100644 (file)
index 0000000..afa6006
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/wearable/tizen/logo-tizen.png differ
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html
new file mode 100644 (file)
index 0000000..4ac08d8
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>MediaKey API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::MediaKey">
+<div class="supported-platforms"><img class="wearable-optional" title="Optional, Not supported by Tizen Wearable emulator" src="ww_icon_optional.png"></div>
+<div class="title"><h1>MediaKey API</h1></div>
+<div class="brief">
+ The MediaKey API provides functions to get notified when a media key has been pressed or released.
+        </div>
+<div class="description">
+        <p>
+Media keys are the keys of a Bluetooth headset which control multimedia playback.
+        </p>
+        <p>
+For more information on the MediaKey features, see <a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm">MediaKey Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#MediaKeyType">MediaKeyType</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#MediaKeyManagerObject">MediaKeyManagerObject</a>
+</li>
+<li>2.2. <a href="#MediaKeyManager">MediaKeyManager</a>
+</li>
+<li>2.3. <a href="#MediaKeyEventCallback">MediaKeyEventCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#MediaKeyManagerObject">MediaKeyManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MediaKeyManager">MediaKeyManager</a></td>
+<td>void <a href="#MediaKeyManager::setMediaKeyEventListener">setMediaKeyEventListener</a> (<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback)<br>
+    void <a href="#MediaKeyManager::unsetMediaKeyEventListener">unsetMediaKeyEventListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#MediaKeyEventCallback">MediaKeyEventCallback</a></td>
+<td>void <a href="#MediaKeyEventCallback::onpressed">onpressed</a> (<a href="#MediaKeyType">MediaKeyType</a> type)<br>
+    void <a href="#MediaKeyEventCallback::onreleased">onreleased</a> (<a href="#MediaKeyType">MediaKeyType</a> type)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="MediaKeyType">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyType"></a><h3>1.1. MediaKeyType</h3>
+<div class="brief">
+ The available media keys
+          </div>
+<pre class="webidl prettyprint">    enum MediaKeyType {
+        "MEDIA_PLAY",
+        "MEDIA_STOP",
+        "MEDIA_PAUSE",
+        "MEDIA_PREVIOUS",
+        "MEDIA_NEXT",
+        "MEDIA_FAST_FORWARD",
+        "MEDIA_REWIND",
+        "MEDIA_PLAY_PAUSE"
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ MEDIA_PLAY - the Play media key             </li>
+            <li>
+ MEDIA_STOP - the Stop media key            </li>
+            <li>
+ MEDIA_PAUSE - the Pause media key            </li>
+            <li>
+ MEDIA_PREVIOUS - the Previous media key            </li>
+            <li>
+ MEDIA_NEXT - the Next media key            </li>
+            <li>
+ MEDIA_FAST_FORWARD - the Fast Forward media key            </li>
+            <li>
+ MEDIA_REWIND - the Rewind media key            </li>
+            <li>
+ MEDIA_PLAY_PAUSE - the Play/Pause media key            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="MediaKeyManagerObject">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManagerObject"></a><h3>2.1. MediaKeyManagerObject</h3>
+<div class="brief">
+ The MediaKeyManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MediaKeyManagerObject {
+         readonly attribute <a href="#MediaKeyManager">MediaKeyManager</a> mediakey;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MediaKeyManagerObject">MediaKeyManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+There is a tizen.mediakey object that allows accessing the functionality of the MediaKey API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="MediaKeyManager">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManager"></a><h3>2.2. MediaKeyManager</h3>
+<div class="brief">
+ The MediaKeyManager interface provides the functionalities to get information about media key events.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MediaKeyManager {
+
+        void setMediaKeyEventListener(<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetMediaKeyEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MediaKeyManager::setMediaKeyEventListener">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManager::setMediaKeyEventListener"></a><code><b><span class="methodName">setMediaKeyEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a listener to be called when a media key is pressed or released.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMediaKeyEventListener(<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method to be invoked when a media key has been pressed or released.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.mediakey.setMediaKeyEventListener({
+     onpressed: function(key) {
+         console.log("Pressed  key: " + key);
+     },
+     onreleased: function(key) {
+         console.log("Released key: " + key);
+     }
+ });
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MediaKeyManager::unsetMediaKeyEventListener">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyManager::unsetMediaKeyEventListener"></a><code><b><span class="methodName">unsetMediaKeyEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification for detecting the media key event.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetMediaKeyEventListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.mediakey.unsetMediaKeyEventListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MediaKeyEventCallback">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyEventCallback"></a><h3>2.3. MediaKeyEventCallback</h3>
+<div class="brief">
+ The MediaKeyEventCallback interface specifies a media key event callback for getting notified information about the media key events.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface MediaKeyEventCallback {
+        void onpressed(<a href="#MediaKeyType">MediaKeyType</a> type);
+
+        void onreleased(<a href="#MediaKeyType">MediaKeyType</a> type);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MediaKeyEventCallback::onpressed">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyEventCallback::onpressed"></a><code><b><span class="methodName">onpressed</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a media key has been pressed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onpressed(<a href="#MediaKeyType">MediaKeyType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The pressed media key
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="MediaKeyEventCallback::onreleased">
+<a class="backward-compatibility-anchor" name="::MediaKey::MediaKeyEventCallback::onreleased"></a><code><b><span class="methodName">onreleased</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a media key has been released.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onreleased(<a href="#MediaKeyType">MediaKeyType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The released media key
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the MediaKey application runs on a device with Bluetooth feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.bluetooth.audio.media</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm">Application Filtering.</a>
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module MediaKey {
+    enum MediaKeyType {
+        "MEDIA_PLAY",
+        "MEDIA_STOP",
+        "MEDIA_PAUSE",
+        "MEDIA_PREVIOUS",
+        "MEDIA_NEXT",
+        "MEDIA_FAST_FORWARD",
+        "MEDIA_REWIND",
+        "MEDIA_PLAY_PAUSE"
+    };
+
+    [NoInterfaceObject] interface MediaKeyManagerObject {
+         readonly attribute <a href="#MediaKeyManager">MediaKeyManager</a> mediakey;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MediaKeyManagerObject">MediaKeyManagerObject</a>;
+
+    [NoInterfaceObject] interface MediaKeyManager {
+
+        void setMediaKeyEventListener(<a href="#MediaKeyEventCallback">MediaKeyEventCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetMediaKeyEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback, NoInterfaceObject] interface MediaKeyEventCallback {
+        void onpressed(<a href="#MediaKeyType">MediaKeyType</a> type);
+
+        void onreleased(<a href="#MediaKeyType">MediaKeyType</a> type);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html
new file mode 100644 (file)
index 0000000..a871f6c
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html
@@ -0,0 +1,761 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>MessagePort API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::MessagePort">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>MessagePort API</h1></div>
+<div class="brief">
+ The MessagePort API provides the functionality for communicating with other applications.
+        </div>
+<div class="description">
+        <p>
+For more information on the MessagePort features, see <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/message_port_w.htm">MessagePort Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#MessagePortManagerObject">MessagePortManagerObject</a>
+</li>
+<li>1.2. <a href="#MessagePortManager">MessagePortManager</a>
+</li>
+<li>1.3. <a href="#LocalMessagePort">LocalMessagePort</a>
+</li>
+<li>1.4. <a href="#RemoteMessagePort">RemoteMessagePort</a>
+</li>
+<li>1.5. <a href="#MessagePortDataItem">MessagePortDataItem</a>
+</li>
+<li>1.6. <a href="#MessagePortCallback">MessagePortCallback</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#MessagePortManagerObject">MessagePortManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessagePortManager">MessagePortManager</a></td>
+<td>
+<a href="#LocalMessagePort">LocalMessagePort</a> <a href="#MessagePortManager::requestLocalMessagePort">requestLocalMessagePort</a> (DOMString localMessagePortName)<br>
+    <a href="#LocalMessagePort">LocalMessagePort</a> <a href="#MessagePortManager::requestTrustedLocalMessagePort">requestTrustedLocalMessagePort</a> (DOMString localMessagePortName)<br>
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> <a href="#MessagePortManager::requestRemoteMessagePort">requestRemoteMessagePort</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName)<br>
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> <a href="#MessagePortManager::requestTrustedRemoteMessagePort">requestTrustedRemoteMessagePort</a> (<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName)</td>
+</tr>
+<tr>
+<td><a href="#LocalMessagePort">LocalMessagePort</a></td>
+<td>long <a href="#LocalMessagePort::addMessagePortListener">addMessagePortListener</a> (<a href="#MessagePortCallback">MessagePortCallback</a> listener)<br>
+    void <a href="#LocalMessagePort::removeMessagePortListener">removeMessagePortListener</a> (long watchId)</td>
+</tr>
+<tr>
+<td><a href="#RemoteMessagePort">RemoteMessagePort</a></td>
+<td>void <a href="#RemoteMessagePort::sendMessage">sendMessage</a> (<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort)</td>
+</tr>
+<tr>
+<td><a href="#MessagePortDataItem">MessagePortDataItem</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#MessagePortCallback">MessagePortCallback</a></td>
+<td>void <a href="#MessagePortCallback::onreceived">onreceived</a> (<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort)</td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces-section">
+<h2>1. Interfaces</h2>
+<div class="interface" id="MessagePortManagerObject">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManagerObject"></a><h3>1.1. MessagePortManagerObject</h3>
+<div class="brief">
+ The <em>MessagePortManagerObject</em> interface defines what is instantiated by the Tizen object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessagePortManagerObject {
+    readonly attribute <a href="#MessagePortManager">MessagePortManager</a> messageport;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MessagePortManagerObject">MessagePortManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.messageport</em> object allows access to the functionality of the Message Port API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="MessagePortManager">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager"></a><h3>1.2. MessagePortManager</h3>
+<div class="brief">
+ The <em>MessagePortManager</em> interface provides methods to request message port to communicate.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface MessagePortManager {
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestTrustedLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestTrustedRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessagePortManager::requestLocalMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestLocalMessagePort"></a><code><b><span class="methodName">requestLocalMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a LocalMessage Port instance to start receiving message from another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#LocalMessagePort">LocalMessagePort</a> requestLocalMessagePort(DOMString localMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">localMessagePortName</span>: 
+ Name of the local message port to retrieve <br>The LocalMessagePort instances are identical for the same message port name.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ LocalMessagePort LocalMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the LocalMessagePort instance with the specified message port name
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessagePortManager::requestTrustedLocalMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestTrustedLocalMessagePort"></a><code><b><span class="methodName">requestTrustedLocalMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a trusted LocalMessagePort instance to receive message from another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#LocalMessagePort">LocalMessagePort</a> requestTrustedLocalMessagePort(DOMString localMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+Trusted local message port can communicate with applications that are signed with same certificate.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">localMessagePortName</span>: 
+ Name of local message port <br>The LocalMessagePort instances are identical for the same message port name.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ LocalMessagePort Trusted LocalMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the LocalMessagePort instance with the specified message port name
+ var localMsgPort = tizen.messageport.requestTrustedLocalMessagePort('MessagePortB');
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessagePortManager::requestRemoteMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestRemoteMessagePort"></a><code><b><span class="methodName">requestRemoteMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a RemoteMessagePort instance to send message to another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#RemoteMessagePort">RemoteMessagePort</a> requestRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the message port name and application ID are the same, the platform returns the same RemoteMessagePort instance.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+                 ID of the application to send messages
+                </li>
+          <li class="param">
+<span class="name">remoteMessagePortName</span>: 
+ Name of remote message port
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ RemoteMessagePort RemoteMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if an input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the port of the target application is not found.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the RemoteMessagePort instance with the specified message port name
+ var remoteMsgPort = tizen.messageport.requestRemoteMessagePort('6xaeuflskd.App1', 'MessagePortA');
+ </pre>
+</div>
+</dd>
+<dt class="method" id="MessagePortManager::requestTrustedRemoteMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortManager::requestTrustedRemoteMessagePort"></a><code><b><span class="methodName">requestTrustedRemoteMessagePort</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests a trusted RemoteMessagePort instance to receive message from another application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#RemoteMessagePort">RemoteMessagePort</a> requestTrustedRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the message port name and application ID are the same, the platform returns the same RemoteMessagePort instance.
+Trusted remote message port can communicate with applications that are signed with same certificate.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">appId</span>: 
+                 ID of the application to send messages
+                </li>
+          <li class="param">
+<span class="name">remoteMessagePortName</span>: 
+ Name of remote message port
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ RemoteMessagePort Trusted RemoteMessagePort instance
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if an input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the port of the target application is not found.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidAccessError, if the target application is not signed with the same certification.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Requests the RemoteMessagePort instance with the specified message port name.
+ var remoteMsgPort = tizen.messageport.requestTrustedRemoteMessagePort('6xauflskd.App1', 'MessagePortB');
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="LocalMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::LocalMessagePort"></a><h3>1.3. LocalMessagePort</h3>
+<div class="brief">
+ The <em>LocalMessagePort</em> interface provides methods to receive data.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface LocalMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute boolean isTrusted;
+
+    long addMessagePortListener(<a href="#MessagePortCallback">MessagePortCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeMessagePortListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="LocalMessagePort::messagePortName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">messagePortName</span></span><div class="brief">
+ The name of the message port name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="LocalMessagePort::isTrusted">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isTrusted</span></span><div class="brief">
+ The flag indicating whether the message port is trusted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="LocalMessagePort::addMessagePortListener">
+<a class="backward-compatibility-anchor" name="::MessagePort::LocalMessagePort::addMessagePortListener"></a><code><b><span class="methodName">addMessagePortListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a message port listener to receive messages from other applications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long addMessagePortListener(<a href="#MessagePortCallback">MessagePortCallback</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ Callback function that is called when a message is received
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long ID of the listener that is later used to remove the listener
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onreceived(data, remoteMsgPort) {
+   console.log('Received data to \'' + remoteMsgPort.messagePortName + '\'');
+ }
+
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ var watchId = localMsgPort.addMessagePortListener(onreceived);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="LocalMessagePort::removeMessagePortListener">
+<a class="backward-compatibility-anchor" name="::MessagePort::LocalMessagePort::removeMessagePortListener"></a><code><b><span class="methodName">removeMessagePortListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Removes the message port listener.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removeMessagePortListener(long watchId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">watchId</span>: 
+ ID to identify the listener
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the watch ID has not been found.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ var watchId = localMsgPort.addMessagePortListener(onreceived);
+ // Communication routines of your app...
+ localMsgPort.removeMessagePortListener(watchId);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="RemoteMessagePort">
+<a class="backward-compatibility-anchor" name="::MessagePort::RemoteMessagePort"></a><h3>1.4. RemoteMessagePort</h3>
+<div class="brief">
+ The <em>RemoteMessagePort</em> interface provides methods to send messages.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface RemoteMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute <a href="application.html#ApplicationId">ApplicationId</a> appId;
+
+    readonly attribute boolean isTrusted;
+
+    void sendMessage(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="RemoteMessagePort::messagePortName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">messagePortName</span></span><div class="brief">
+ The message port name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="RemoteMessagePort::appId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId </span><span class="name">appId</span></span><div class="brief">
+ The application ID to connect with.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="RemoteMessagePort::isTrusted">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isTrusted</span></span><div class="brief">
+ The flag indicating whether the message port is trusted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="RemoteMessagePort::sendMessage">
+<a class="backward-compatibility-anchor" name="::MessagePort::RemoteMessagePort::sendMessage"></a><code><b><span class="methodName">sendMessage</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sends messages to the specified application.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void sendMessage(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The sent messages will be ignored without any notice, unless the target application added one or more listeners to the target local message port.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+             Array of data to send
+                </li>
+          <li class="param">
+<span class="name">localMessagePort</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ <em>LocalMessagePort<em> object that gives local message port of the current application
+It can be used to receive reply messages from the other end of the message port.
+The order of items in this array is not guaranteed to be preserved during data transfer, and values of <em>key</em> within this
+array must not be duplicated or empty.
+</em></em>                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if an input parameter contains an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type QuotaExceededError, if the size of message has exceeded the maximum limit.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if any other error occurs.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Sends message
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('MessagePortA');
+ var remoteMsgPort = tizen.messageport.requestRemoteMessagePort('6xaeuflskd.App1', 'MessagePortB');
+ localMsgPort.addMessagePortListener(function(items, remoteport) {
+   // ...
+   if(remoteport !== null) {
+     remoteport.sendMessage([{key:'RESULT', value:'OK'}]);
+   }
+ });
+ remoteMsgPort.sendMessage(
+   [
+     { key:'CMD', value:'openWindow' },
+     { key:'OPTION', value:'bx' }
+   ]
+   , localMsgPort);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="MessagePortDataItem">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortDataItem"></a><h3>1.5. MessagePortDataItem</h3>
+<div class="brief">
+ The dictionary that specifies the data item that is transferred.
+          </div>
+<pre class="webidl prettyprint">  dictionary MessagePortDataItem {
+    DOMString key;
+    DOMString value;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+<div class="interface" id="MessagePortCallback">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortCallback"></a><h3>1.6. MessagePortCallback</h3>
+<div class="brief">
+ The MessagePortCallback interface defines notification callbacks for receiving data from other applications.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface MessagePortCallback {
+    void onreceived(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MessagePortCallback::onreceived">
+<a class="backward-compatibility-anchor" name="::MessagePort::MessagePortCallback::onreceived"></a><code><b><span class="methodName">onreceived</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when data is received from other applications via the specified message port name.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onreceived(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">data</span>: 
+              Array of data received from another application
+                </li>
+          <li class="param">
+<span class="name">remoteMessagePort</span><span class="optional"> [nullable]</span>: 
+ RemoteMessagePort port that can be used to reply for the received message
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">2. Full WebIDL</h2>
+<pre class="webidl prettyprint">module MessagePort {
+
+  [NoInterfaceObject] interface MessagePortManagerObject {
+    readonly attribute <a href="#MessagePortManager">MessagePortManager</a> messageport;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#MessagePortManagerObject">MessagePortManagerObject</a>;
+
+  [NoInterfaceObject] interface MessagePortManager {
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#LocalMessagePort">LocalMessagePort</a> requestTrustedLocalMessagePort(DOMString localMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#RemoteMessagePort">RemoteMessagePort</a> requestTrustedRemoteMessagePort(<a href="application.html#ApplicationId">ApplicationId</a> appId, DOMString remoteMessagePortName) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface LocalMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute boolean isTrusted;
+
+    long addMessagePortListener(<a href="#MessagePortCallback">MessagePortCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removeMessagePortListener(long watchId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface RemoteMessagePort {
+
+    readonly attribute DOMString messagePortName;
+
+    readonly attribute <a href="application.html#ApplicationId">ApplicationId</a> appId;
+
+    readonly attribute boolean isTrusted;
+
+    void sendMessage(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, optional <a href="#LocalMessagePort">LocalMessagePort</a>? localMessagePort) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  dictionary MessagePortDataItem {
+    DOMString key;
+    DOMString value;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface MessagePortCallback {
+    void onreceived(<a href="#MessagePortDataItem">MessagePortDataItem</a>[] data, <a href="#RemoteMessagePort">RemoteMessagePort</a>? remoteMessagePort);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon.png b/org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon.png differ
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon_optional.png b/org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon_optional.png
new file mode 100644 (file)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/wearable/tizen/mw_icon_optional.png differ
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/package.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/package.html
new file mode 100644 (file)
index 0000000..3a7a2b5
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/package.html
@@ -0,0 +1,1093 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Package API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Package">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Package API</h1></div>
+<div class="brief">
+ This API provides functionalities to install or uninstall packages, and retrieve information about installed packages.<br>It also provides a listener method so that an application can be notified when there is a change on the installed packages.
+For more information on the Package features, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/package_w.htm">Package Guide</a>.
+        </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#PackageId">PackageId</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#PackageManagerObject">PackageManagerObject</a>
+</li>
+<li>2.2. <a href="#PackageManager">PackageManager</a>
+</li>
+<li>2.3. <a href="#PackageInformation">PackageInformation</a>
+</li>
+<li>2.4. <a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a>
+</li>
+<li>2.5. <a href="#PackageProgressCallback">PackageProgressCallback</a>
+</li>
+<li>2.6. <a href="#PackageInformationEventCallback">PackageInformationEventCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#PackageManagerObject">PackageManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PackageManager">PackageManager</a></td>
+<td>void <a href="#PackageManager::install">install</a> (DOMString packageFileURI, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#PackageManager::uninstall">uninstall</a> (<a href="#PackageId">PackageId</a> id, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#PackageManager::getPackagesInfo">getPackagesInfo</a> (<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    <a href="#PackageInformation">PackageInformation</a> <a href="#PackageManager::getPackageInfo">getPackageInfo</a> (optional <a href="#PackageId">PackageId</a>? id)<br>
+    void <a href="#PackageManager::setPackageInfoEventListener">setPackageInfoEventListener</a> (<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback)<br>
+    void <a href="#PackageManager::unsetPackageInfoEventListener">unsetPackageInfoEventListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#PackageInformation">PackageInformation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a></td>
+<td>void <a href="#PackageInformationArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#PackageInformation">PackageInformation</a>[] informationArray)</td>
+</tr>
+<tr>
+<td><a href="#PackageProgressCallback">PackageProgressCallback</a></td>
+<td>void <a href="#PackageProgressCallback::onprogress">onprogress</a> (<a href="#PackageId">PackageId</a> id, short progress)<br>
+    void <a href="#PackageProgressCallback::oncomplete">oncomplete</a> (<a href="#PackageId">PackageId</a> id)</td>
+</tr>
+<tr>
+<td><a href="#PackageInformationEventCallback">PackageInformationEventCallback</a></td>
+<td>void <a href="#PackageInformationEventCallback::oninstalled">oninstalled</a> (<a href="#PackageInformation">PackageInformation</a> info)<br>
+    void <a href="#PackageInformationEventCallback::onupdated">onupdated</a> (<a href="#PackageInformation">PackageInformation</a> info)<br>
+    void <a href="#PackageInformationEventCallback::onuninstalled">onuninstalled</a> (<a href="#PackageId">PackageId</a> id)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="typedef" id="PackageId">
+<a class="backward-compatibility-anchor" name="::Package::PackageId"></a><h3>1.1. PackageId</h3>
+<div class="brief">
+ A unique ID for an installed package.
+          </div>
+<pre class="webidl prettyprint">    typedef DOMString PackageId;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="PackageManagerObject">
+<a class="backward-compatibility-anchor" name="::Package::PackageManagerObject"></a><h3>2.1. PackageManagerObject</h3>
+<div class="brief">
+ This interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PackageManagerObject {
+        readonly attribute <a href="#PackageManager">PackageManager</a> package;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PackageManagerObject">PackageManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+The <em>tizen.package </em>object allows access to Package API functionality.
+          </p>
+         </div>
+</div>
+<div class="interface" id="PackageManager">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager"></a><h3>2.2. PackageManager</h3>
+<div class="brief">
+ This interface defines the package manager.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PackageManager {
+
+
+        void install(DOMString packageFileURI,
+                     <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void uninstall(<a href="#PackageId">PackageId</a> id, 
+                       <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+
+
+        void getPackagesInfo(<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        <a href="#PackageInformation">PackageInformation</a> getPackageInfo(optional <a href="#PackageId">PackageId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setPackageInfoEventListener(<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        
+
+        void unsetPackageInfoEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageManager::install">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::install"></a><code><b><span class="methodName">install</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Installs a package with a specified file on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void install(DOMString packageFileURI, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+This API provides a way to notify the progress and completion of an installation request through PackageProgressCallback.
+            </p>
+            <p>
+The <em>ErrorCallback() </em>is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the package is not found at the specified location.              </li>
+              <li>
+UnknownError - If it is not allowed to install the package by the platform or any other platform error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/packagemanager.install
+            </p>
+<p><span class="remark"> Remark : </span>
+ Virtual path cannot be used for the parameter. First, you need to convert any virtual path to a file URI path using the resolve function in the Filesystem API before passing it to the function.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">packageFileURI</span>: 
+ The location of the package to install
+                </li>
+          <li class="param">
+<span class="name">progressCallback</span>: 
+ The method to invoke when the installation is in progress or has been completed
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var onInstallation = {
+      onprogress: function(packageId, percentage) {
+         console.log("On installation(" + packageId + ") : progress(" + percentage + ")");
+      },
+      oncomplete: function(packageId) {
+         console.log("Installation(" + packageId + ") Complete");
+      }
+ }
+
+ var onError = function (err) {
+      console.log("Error occurred on installation : " + err.name);
+ }
+
+ // Let's assume that the "test.wgt" file exists in the downloads directory
+ tizen.filesystem.resolve("downloads/test.wgt",
+     function (file) {
+         console.log("file URI : " + file.toURI());
+         tizen.package.install(file.toURI(), onInstallation, onError);
+     },
+     function (err) {
+         console.log("Error occurred on resolve : " + err.name);
+     },
+     "r");
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::uninstall">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::uninstall"></a><code><b><span class="methodName">uninstall</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Uninstalls the package with a specified package ID.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void uninstall(<a href="#PackageId">PackageId</a> id, <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+This API provides a way to notify about the progress and completion of an uninstallation request through PackageProgressCallback.
+            </p>
+            <p>
+The <em>ErrorCallback() </em>is launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotFoundError - If the package is not found with the specified ID.              </li>
+              <li>
+UnknownError - If it is not allowed to uninstall the package from the platform or any other platform error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ platform
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/packagemanager.install
+            </p>
+<p><span class="remark"> Remark : </span>
+ Some preloaded packages cannot be uninstalled. In this case, ErrorCallback with the UnKnownError type is launched.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The package ID to uninstall
+                </li>
+          <li class="param">
+<span class="name">progressCallback</span>: 
+ The method to invoke when uninstallation is in progress or has been completed
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to invoke when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var onUninstallation = {
+      onprogress: function(packageId, percentage) {
+         console.log("On Uninstallation(" + packageId + ") : progress(" + percentage + ")");
+      },
+      oncomplete: function(packageId) {
+         console.log("Uninstallation(" + packageId + ") Complete");
+      }
+ };
+
+ var onError = function (err) {
+      console.log("Error occurred on installation : " + err.name);
+ };
+
+ // Let's assume that the package ID to uninstall is "testapp001"
+ tizen.package.uninstall("testapp001", onUninstallation, onError);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::getPackagesInfo">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::getPackagesInfo"></a><code><b><span class="methodName">getPackagesInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets information of the installed packages.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPackagesInfo(<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+The result contains the snapshots of the installed packages information.
+            </p>
+            <p>
+The <em>errorCallback()</em> is launched with this error type:
+            </p>
+            <ul>
+              <li>
+UnknownError - If any other platform error occurs.              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to call when an invocation ends successfully
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The method to call when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onListInstalledPackages(packages) {
+     for (var i = 0; i &lt; packages.length; i++) {
+         console.log("Package id["+i+"] : " +packages[i].id);
+     }
+ }
+
+ tizen.package.getPackagesInfo(
+     onListInstalledPackages,
+     function (err) {console.log("Can't obtain packages list" + err.name);});
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::getPackageInfo">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::getPackageInfo"></a><code><b><span class="methodName">getPackageInfo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets information of an installed package.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#PackageInformation">PackageInformation</a> getPackageInfo(optional <a href="#PackageId">PackageId</a>? id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+If the ID is set to <var>null</var> or not set at all, it returns the package information of the current application.
+The list of installed packages and their package IDs is obtained using <em>getPackagesInfo()</em>.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ A string representing the package ID. If the ID is not provided, the package information of the calling application is returned.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ PackageInformation The information of a package
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type NotFoundError, if the package with the specified ID is not found.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the package information cannot be retrieved because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var packageInfo = tizen.package.getPackageInfo(null);
+
+ console.log("Current Package ID : " + packageInfo.id);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PackageManager::setPackageInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::setPackageInfoEventListener"></a><code><b><span class="methodName">setPackageInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notifications for any changes made to the list of installed packages.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setPackageInfoEventListener(<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="description">
+            <p>
+This method sets a <em>PackageInformationEventCallback</em> type callback that is triggered when a package is installed, removed, or updated.
+            </p>
+            <p>
+The callback lasts until the <em>unsetPackageInfoEventListener()</em> method is called.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">eventCallback</span>: 
+ The method to be called when any change is made to the list of installed packages.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if an input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the package list change event cannot be generated because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var packageEventCallback = {
+    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>
+</div>
+</dd>
+<dt class="method" id="PackageManager::unsetPackageInfoEventListener">
+<a class="backward-compatibility-anchor" name="::Package::PackageManager::unsetPackageInfoEventListener"></a><code><b><span class="methodName">unsetPackageInfoEventListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving package notifications.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetPackageInfoEventListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/package.info
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the listener removal request fails because of a platform error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.package.unsetPackageInfoEventListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PackageInformation">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformation"></a><h3>2.3. PackageInformation</h3>
+<div class="brief">
+ This interface defines the general information available to an installed package.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PackageInformation {
+
+        readonly attribute <a href="#PackageId">PackageId</a> id;
+
+
+        readonly attribute DOMString name;
+
+
+        readonly attribute DOMString iconPath;
+
+
+        readonly attribute DOMString version;
+
+
+        readonly attribute long totalSize;
+
+
+        readonly attribute long dataSize;
+
+
+        readonly attribute Date lastModified;
+
+
+        readonly attribute DOMString author;
+
+
+        readonly attribute DOMString description;
+
+
+        readonly attribute <a href="application.html#ApplicationId">ApplicationId</a>[] appIds;
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="PackageInformation::id">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">PackageId </span><span class="name">id</span></span><div class="brief">
+ An attribute to store the identifier of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An attribute to store the package name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::iconPath">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iconPath</span></span><div class="brief">
+ An attribute to store the icon path of a package.
+            </div>
+<div class="description">
+            <p>
+The icon path of the package is the same as the icon path of the relevant application
+(see the <a href="application.html#ApplicationInformation::iconPath">iconPath</a> attribute of
+the <a href="application.html#ApplicationInformation">ApplicationInformation</a> interface).
+            </p>
+            <p>
+The relevant application is the one with the same
+<a href="application.html#ApplicationInformation::packageId">packageId</a> as the
+<a href="#PackageInformation::id">id</a> of this package.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::version">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">version</span></span><div class="brief">
+ An attribute to store the package version.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::totalSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">totalSize</span></span><div class="brief">
+ An attribute to store the total installed size(package + data) of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::dataSize">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">dataSize</span></span><div class="brief">
+ An attribute to store the current data size of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::lastModified">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">Date </span><span class="name">lastModified</span></span><div class="brief">
+ An attribute to store the latest installed or updated time of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::author">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">author</span></span><div class="brief">
+ An attribute to store the author of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::description">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">description</span></span><div class="brief">
+ An attribute to store the package description.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="PackageInformation::appIds">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ApplicationId[]
+                      </span><span class="name">appIds</span></span><div class="brief">
+ An attribute to store the application ID list of a package.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="PackageInformationArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationArraySuccessCallback"></a><h3>2.4. PackageInformationArraySuccessCallback</h3>
+<div class="brief">
+ This interface invokes the success callback with an array of <em>PackageInformation </em>objects as an input parameter when the installed package list is retrieved.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface PackageInformationArraySuccessCallback {
+
+
+        void onsuccess(<a href="#PackageInformation">PackageInformation</a>[] informationArray);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="description">
+          <p>
+It is used in <em>tizen.package.getPackagesInfo()</em>.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageInformationArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#PackageInformation">PackageInformation</a>[] informationArray);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">informationArray</span>: 
+ A list of installed packages' information.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PackageProgressCallback">
+<a class="backward-compatibility-anchor" name="::Package::PackageProgressCallback"></a><h3>2.5. PackageProgressCallback</h3>
+<div class="brief">
+ This callback interface specifies subscriptions for any notification on the progress or completion of requests.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface PackageProgressCallback {
+
+
+        void onprogress(<a href="#PackageId">PackageId</a> id, short progress);
+
+
+        void oncomplete(<a href="#PackageId">PackageId</a> id);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageProgressCallback::onprogress">
+<a class="backward-compatibility-anchor" name="::Package::PackageProgressCallback::onprogress"></a><code><b><span class="methodName">onprogress</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called while the request is in progress.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onprogress(<a href="#PackageId">PackageId</a> id, short progress);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The package ID
+                </li>
+          <li class="param">
+<span class="name">progress</span>: 
+ The progress in percentage.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PackageProgressCallback::oncomplete">
+<a class="backward-compatibility-anchor" name="::Package::PackageProgressCallback::oncomplete"></a><code><b><span class="methodName">oncomplete</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the request is completed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oncomplete(<a href="#PackageId">PackageId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The package ID
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PackageInformationEventCallback">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback"></a><h3>2.6. PackageInformationEventCallback</h3>
+<div class="brief">
+ This callback interface specifies methods that are invoked when a package is installed, updated, or uninstalled.
+          </div>
+<pre class="webidl prettyprint">    [Callback, NoInterfaceObject] interface PackageInformationEventCallback {
+
+
+        void oninstalled(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onupdated(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onuninstalled(<a href="#PackageId">PackageId</a> id);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PackageInformationEventCallback::oninstalled">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback::oninstalled"></a><code><b><span class="methodName">oninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a package is installed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void oninstalled(<a href="#PackageInformation">PackageInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The information of the installed package
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PackageInformationEventCallback::onupdated">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback::onupdated"></a><code><b><span class="methodName">onupdated</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a package is updated.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onupdated(<a href="#PackageInformation">PackageInformation</a> info);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">info</span>: 
+ The information of the updated package
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="PackageInformationEventCallback::onuninstalled">
+<a class="backward-compatibility-anchor" name="::Package::PackageInformationEventCallback::onuninstalled"></a><code><b><span class="methodName">onuninstalled</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when a package is uninstalled.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onuninstalled(<a href="#PackageId">PackageId</a> id);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">id</span>: 
+ The ID of the uninstalled package
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Package {
+
+
+    typedef DOMString PackageId;
+
+
+    [NoInterfaceObject] interface PackageManagerObject {
+        readonly attribute <a href="#PackageManager">PackageManager</a> package;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PackageManagerObject">PackageManagerObject</a>;
+
+
+    [NoInterfaceObject] interface PackageManager {
+
+
+        void install(DOMString packageFileURI,
+                     <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                     optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void uninstall(<a href="#PackageId">PackageId</a> id, 
+                       <a href="#PackageProgressCallback">PackageProgressCallback</a> progressCallback,
+                       optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+
+
+        void getPackagesInfo(<a href="#PackageInformationArraySuccessCallback">PackageInformationArraySuccessCallback</a> successCallback,
+                             optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        <a href="#PackageInformation">PackageInformation</a> getPackageInfo(optional <a href="#PackageId">PackageId</a>? id) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setPackageInfoEventListener(<a href="#PackageInformationEventCallback">PackageInformationEventCallback</a> eventCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+        
+
+        void unsetPackageInfoEventListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    
+    };
+
+
+    [NoInterfaceObject] interface PackageInformation {
+
+        readonly attribute <a href="#PackageId">PackageId</a> id;
+
+
+        readonly attribute DOMString name;
+
+
+        readonly attribute DOMString iconPath;
+
+
+        readonly attribute DOMString version;
+
+
+        readonly attribute long totalSize;
+
+
+        readonly attribute long dataSize;
+
+
+        readonly attribute Date lastModified;
+
+
+        readonly attribute DOMString author;
+
+
+        readonly attribute DOMString description;
+
+
+        readonly attribute <a href="application.html#ApplicationId">ApplicationId</a>[] appIds;
+
+    };
+
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface PackageInformationArraySuccessCallback {
+
+
+        void onsuccess(<a href="#PackageInformation">PackageInformation</a>[] informationArray);
+    };
+
+
+    [Callback, NoInterfaceObject] interface PackageProgressCallback {
+
+
+        void onprogress(<a href="#PackageId">PackageId</a> id, short progress);
+
+
+        void oncomplete(<a href="#PackageId">PackageId</a> id);
+    };
+
+
+    [Callback, NoInterfaceObject] interface PackageInformationEventCallback {
+
+
+        void oninstalled(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onupdated(<a href="#PackageInformation">PackageInformation</a> info);
+
+
+        void onuninstalled(<a href="#PackageId">PackageId</a> id);
+    };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/power.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/power.html
new file mode 100644 (file)
index 0000000..4cda012
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/power.html
@@ -0,0 +1,792 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Power API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Power">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Power API</h1></div>
+<div class="brief">
+ The Power API provides support for requesting power management related resource states.
+        </div>
+<div class="description">
+        <p>
+For more information on the Power features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/power_w.htm">Power Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#PowerResource">PowerResource</a>
+</li>
+<li>1.2. <a href="#PowerScreenState">PowerScreenState</a>
+</li>
+<li>1.3. <a href="#PowerCpuState">PowerCpuState</a>
+</li>
+<li>1.4. <a href="#PowerState">PowerState</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#PowerManagerObject">PowerManagerObject</a>
+</li>
+<li>2.2. <a href="#PowerManager">PowerManager</a>
+</li>
+<li>2.3. <a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#PowerManagerObject">PowerManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#PowerManager">PowerManager</a></td>
+<td>void <a href="#PowerManager::request">request</a> (<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state)<br>
+    void <a href="#PowerManager::release">release</a> (<a href="#PowerResource">PowerResource</a> resource)<br>
+    void <a href="#PowerManager::setScreenStateChangeListener">setScreenStateChangeListener</a> (<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener)<br>
+    void <a href="#PowerManager::unsetScreenStateChangeListener">unsetScreenStateChangeListener</a> ()<br>
+    double <a href="#PowerManager::getScreenBrightness">getScreenBrightness</a> ()<br>
+    void <a href="#PowerManager::setScreenBrightness">setScreenBrightness</a> (double brightness)<br>
+    boolean <a href="#PowerManager::isScreenOn">isScreenOn</a> ()<br>
+    void <a href="#PowerManager::restoreScreenBrightness">restoreScreenBrightness</a> ()<br>
+    void <a href="#PowerManager::turnScreenOn">turnScreenOn</a> ()<br>
+    void <a href="#PowerManager::turnScreenOff">turnScreenOff</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a></td>
+<td>void <a href="#ScreenStateChangeCallback::onchanged">onchanged</a> (<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="PowerResource">
+<a class="backward-compatibility-anchor" name="::Power::PowerResource"></a><h3>1.1. PowerResource</h3>
+<div class="brief">
+ Specifies power resources with values aligned with <em>SystemInfo </em>property values.
+          </div>
+<pre class="webidl prettyprint">    enum PowerResource    { "SCREEN", "CPU" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+Screen and CPU resources are supported at present.
+Supported power resource states are provided in PowerScreenState and PowerCpuState enums respectively prefixed by the corresponding resource type.
+          </p>
+         </div>
+</div>
+<div class="enum" id="PowerScreenState">
+<a class="backward-compatibility-anchor" name="::Power::PowerScreenState"></a><h3>1.2. PowerScreenState</h3>
+<div class="brief">
+ Specifies the power state for screen resource.
+          </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ SCREEN_BRIGHT is deprecated.
+          </i></font></p></div>
+<pre class="webidl prettyprint">    enum PowerScreenState { "SCREEN_OFF", "SCREEN_DIM", "SCREEN_NORMAL", "SCREEN_BRIGHT" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The supported values are:
+          </p>
+          <ul>
+            <li>
+SCREEN_OFF - This screen state cannot be requested but can only be used in the state change callback.            </li>
+            <li>
+SCREEN_DIM - The minimal screen state is set to <em>DIM</em> and device does not change to <em>OFF</em> state automatically.            </li>
+            <li>
+SCREEN_NORMAL - The minimal screen state is set to <em>NORMAL</em> and device does not change to <em>DIM</em> state automatically.            </li>
+            <li>
+SCREEN_BRIGHT (Deprecated) - The minimal screen state is set to <em>BRIGHT</em> and device does not change to <em>NORMAL</em> state automatically.            </li>
+          </ul>
+          <p>
+<em>DIM</em> state refers to the screen that the backlight is turned off.
+<em>NORMAL</em> state refers to the default screen brightness that a user has configured for the device.
+<em>BRIGHT(Deprecated)</em> state refers to the maximum screen brightness that the device provides.
+Note that the change in brightness does not affect the system brightness setting, i.e., the system brightness value is automatically restored when the resource is released or the process is completed.
+          </p>
+         </div>
+</div>
+<div class="enum" id="PowerCpuState">
+<a class="backward-compatibility-anchor" name="::Power::PowerCpuState"></a><h3>1.3. PowerCpuState</h3>
+<div class="brief">
+ Specifies the power state for the CPU resource.
+          </div>
+<pre class="webidl prettyprint">    enum PowerCpuState { "CPU_AWAKE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The supported values are:
+          </p>
+          <ul>
+            <li>
+CPU_AWAKE - The CPU state is set to awake and it does not go to <em>SLEEP</em> state automatically.            </li>
+          </ul>
+         </div>
+</div>
+<div class="typedef" id="PowerState">
+<a class="backward-compatibility-anchor" name="::Power::PowerState"></a><h3>1.4. PowerState</h3>
+<div class="brief">
+ The supported power states in general.
+It can be either a PowerScreenState or a PowerCpuState.
+          </div>
+<pre class="webidl prettyprint">    typedef (<a href="#PowerScreenState">PowerScreenState</a> or <a href="#PowerCpuState">PowerCpuState</a>) PowerState;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="PowerManagerObject">
+<a class="backward-compatibility-anchor" name="::Power::PowerManagerObject"></a><h3>2.1. PowerManagerObject</h3>
+<div class="brief">
+ The PowerManagerObject interface defines what is instantiated by the <em>Tizen</em> object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PowerManagerObject {
+        readonly attribute <a href="#PowerManager">PowerManager</a> power;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PowerManagerObject">PowerManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.power </em>object that allows accessing of a functionality of the Power API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="PowerManager">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager"></a><h3>2.2. PowerManager</h3>
+<div class="brief">
+ The PowerManager interface is used to request resource states.
+          </div>
+<pre class="webidl prettyprint">   [NoInterfaceObject] interface PowerManager {
+       void request(<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void release(<a href="#PowerResource">PowerResource</a> resource) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenStateChangeListener(<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void unsetScreenStateChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       double getScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenBrightness(double brightness) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       boolean isScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void restoreScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOff() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+However, these requests can be overridden by the system. If the requests are overridden, the application is notified with the provided listener callback.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PowerManager::request">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::request"></a><code><b><span class="methodName">request</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Requests the minimum-state for a power resource.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void request(<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">resource</span>: 
+ Power resource for which the request is made
+                </li>
+          <li class="param">
+<span class="name">state</span>: 
+    Minimal power state in which the power resource is desired to be
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> tizen.power.request("SCREEN", "SCREEN_NORMAL");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::release">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::release"></a><code><b><span class="methodName">release</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Releases the power state request for the given resource.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void release(<a href="#PowerResource">PowerResource</a> resource);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">resource</span>: 
+ Resource for which requests are to be removed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Release SCREEN resource.
+ tizen.power.release("SCREEN");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::setScreenStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::setScreenStateChangeListener"></a><code><b><span class="methodName">setScreenStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the screen state change callback and monitors its state changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setScreenStateChangeListener(<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listener</span>: 
+ Screen state change callback
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onScreenStateChanged(previousState, changedState) {
+   console.log("Screen state changed from " + previousState + " to " + changedState);
+ }
+
+ // Sets the screen state change listener.
+ tizen.power.setScreenStateChangeListener(onScreenStateChanged);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::unsetScreenStateChangeListener">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::unsetScreenStateChangeListener"></a><code><b><span class="methodName">unsetScreenStateChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the screen state change callback and stop monitoring it.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetScreenStateChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Unsets the screen state change listener.
+ tizen.power.unsetScreenStateChangeListener();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::getScreenBrightness">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::getScreenBrightness"></a><code><b><span class="methodName">getScreenBrightness</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the screen brightness level of an application, from 0 to 1.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">double getScreenBrightness();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ double Current screen brightness value
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Gets the current screen brightness value.
+ var screenBrightness = tizen.power.getScreenBrightness();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::setScreenBrightness">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::setScreenBrightness"></a><code><b><span class="methodName">setScreenBrightness</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the screen brightness level, from 0 to 1.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setScreenBrightness(double brightness);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+An approximation is made for best effort when the given value is not exactly applicable by the hardware or system.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">brightness</span>: 
+ The screen brightness value to set
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not
+compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Sets the screen brightness value for the application.
+ tizen.power.setScreenBrightness(1);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::isScreenOn">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::isScreenOn"></a><code><b><span class="methodName">isScreenOn</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the screen is on.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean isScreenOn();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean true if screen is on, otherwise false if the screen is off
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Checks whether the screen is on or off.
+ var isScreenOn = tizen.power.isScreenOn();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::restoreScreenBrightness">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::restoreScreenBrightness"></a><code><b><span class="methodName">restoreScreenBrightness</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Restores the screen brightness to the system default setting value.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void restoreScreenBrightness();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Restores the screen brightness value to the system default setting value.
+ tizen.power.restoreScreenBrightness();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::turnScreenOn">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::turnScreenOn"></a><code><b><span class="methodName">turnScreenOn</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Turns on the screen.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void turnScreenOn();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This API triggers turn-on process and then updates the status when it completes. While the operation is on-going, the isScreenOn() method returns false.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Turns the screen on.
+ tizen.power.turnScreenOn();
+ </pre>
+</div>
+</dd>
+<dt class="method" id="PowerManager::turnScreenOff">
+<a class="backward-compatibility-anchor" name="::Power::PowerManager::turnScreenOff"></a><code><b><span class="methodName">turnScreenOff</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Turns off the screen.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void turnScreenOff();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This API triggers turn-off process and then updates the status when it completes.
+While the operation is on-going, the isScreenOn() method returns true.
+            </p>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/power
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if this feature is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if the application does not have the privilege to call this method.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Turns the screen off.
+ tizen.power.turnScreenOff();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ScreenStateChangeCallback">
+<a class="backward-compatibility-anchor" name="::Power::ScreenStateChangeCallback"></a><h3>2.3. ScreenStateChangeCallback</h3>
+<div class="brief">
+ The ScreenStateChangeCallback callback interface defines notification for the screen state changes.
+          </div>
+<pre class="webidl prettyprint">   [Callback=FunctionOnly, NoInterfaceObject] interface ScreenStateChangeCallback {
+       void onchanged(<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState);
+   };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ScreenStateChangeCallback::onchanged">
+<a class="backward-compatibility-anchor" name="::Power::ScreenStateChangeCallback::onchanged"></a><code><b><span class="methodName">onchanged</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called on screen state change.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onchanged(<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">previousState</span>: 
+ Previous screen state
+                </li>
+          <li class="param">
+<span class="name">changedState</span>: 
+  Changed screen state
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Power {
+
+    enum PowerResource    { "SCREEN", "CPU" };
+
+    enum PowerScreenState { "SCREEN_OFF", "SCREEN_DIM", "SCREEN_NORMAL", "SCREEN_BRIGHT" };
+
+    enum PowerCpuState { "CPU_AWAKE" };
+
+    typedef (<a href="#PowerScreenState">PowerScreenState</a> or <a href="#PowerCpuState">PowerCpuState</a>) PowerState;
+
+    [NoInterfaceObject] interface PowerManagerObject {
+        readonly attribute <a href="#PowerManager">PowerManager</a> power;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#PowerManagerObject">PowerManagerObject</a>;
+
+   [NoInterfaceObject] interface PowerManager {
+       void request(<a href="#PowerResource">PowerResource</a> resource, <a href="#PowerState">PowerState</a> state) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void release(<a href="#PowerResource">PowerResource</a> resource) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenStateChangeListener(<a href="#ScreenStateChangeCallback">ScreenStateChangeCallback</a> listener) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void unsetScreenStateChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       double getScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void setScreenBrightness(double brightness) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       boolean isScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void restoreScreenBrightness() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOn() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+       void turnScreenOff() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+   };
+
+   [Callback=FunctionOnly, NoInterfaceObject] interface ScreenStateChangeCallback {
+       void onchanged(<a href="#PowerScreenState">PowerScreenState</a> previousState, <a href="#PowerScreenState">PowerScreenState</a> changedState);
+   };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html
new file mode 100644 (file)
index 0000000..baabd33
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html
@@ -0,0 +1,1425 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Sensor API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Sensor">
+<div class="supported-platforms"><img class="wearable-optional emulator" title="Optional, Supported by Tizen Wearable emulator" src="ww_icon_optional.png"></div>
+<div class="title"><h1>Sensor API</h1></div>
+<div class="brief">
+ The Sensor API defines interfaces and methods to manage sensor data from various sensors on the device.
+        </div>
+<div class="description">
+        <p>
+The following sensor functionality is provided:
+        </p>
+        <ul>
+          <li>
+Start and stop sensor          </li>
+          <li>
+Set and unset notification of the sensor data change          </li>
+          <li>
+Get current sensor data          </li>
+        </ul>
+        <p>
+For more information about how to use Sensor API, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm">Sensor Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SensorType">SensorType</a>
+</li>
+<li>1.2. <a href="#ProximityState">ProximityState</a>
+</li>
+<li>1.3. <a href="#MagneticSensorAccuracy">MagneticSensorAccuracy</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SensorServiceManagerObject">SensorServiceManagerObject</a>
+</li>
+<li>2.2. <a href="#SensorService">SensorService</a>
+</li>
+<li>2.3. <a href="#Sensor">Sensor</a>
+</li>
+<li>2.4. <a href="#LightSensor">LightSensor</a>
+</li>
+<li>2.5. <a href="#MagneticSensor">MagneticSensor</a>
+</li>
+<li>2.6. <a href="#PressureSensor">PressureSensor</a>
+</li>
+<li>2.7. <a href="#ProximitySensor">ProximitySensor</a>
+</li>
+<li>2.8. <a href="#UltravioletSensor">UltravioletSensor</a>
+</li>
+<li>2.9. <a href="#SensorData">SensorData</a>
+</li>
+<li>2.10. <a href="#SensorLightData">SensorLightData</a>
+</li>
+<li>2.11. <a href="#SensorMagneticData">SensorMagneticData</a>
+</li>
+<li>2.12. <a href="#SensorPressureData">SensorPressureData</a>
+</li>
+<li>2.13. <a href="#SensorProximityData">SensorProximityData</a>
+</li>
+<li>2.14. <a href="#SensorUltravioletData">SensorUltravioletData</a>
+</li>
+<li>2.15. <a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SensorServiceManagerObject">SensorServiceManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorService">SensorService</a></td>
+<td>
+<a href="#Sensor">Sensor</a> <a href="#SensorService::getDefaultSensor">getDefaultSensor</a> (<a href="#SensorType">SensorType</a> type)<br>
+    <a href="#SensorType">SensorType</a>[] <a href="#SensorService::getAvailableSensors">getAvailableSensors</a> ()</td>
+</tr>
+<tr>
+<td><a href="#Sensor">Sensor</a></td>
+<td>void <a href="#Sensor::start">start</a> (<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#Sensor::stop">stop</a> ()<br>
+    void <a href="#Sensor::setChangeListener">setChangeListener</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback)<br>
+    void <a href="#Sensor::unsetChangeListener">unsetChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#LightSensor">LightSensor</a></td>
+<td>void <a href="#LightSensor::getLightSensorData">getLightSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#MagneticSensor">MagneticSensor</a></td>
+<td>void <a href="#MagneticSensor::getMagneticSensorData">getMagneticSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#PressureSensor">PressureSensor</a></td>
+<td>void <a href="#PressureSensor::getPressureSensorData">getPressureSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#ProximitySensor">ProximitySensor</a></td>
+<td>void <a href="#ProximitySensor::getProximitySensorData">getProximitySensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#UltravioletSensor">UltravioletSensor</a></td>
+<td>void <a href="#UltravioletSensor::getUltravioletSensorData">getUltravioletSensorData</a> (<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#SensorData">SensorData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorLightData">SensorLightData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorMagneticData">SensorMagneticData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorPressureData">SensorPressureData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorProximityData">SensorProximityData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorUltravioletData">SensorUltravioletData</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a></td>
+<td>void <a href="#SensorDataSuccessCallback::onsuccess">onsuccess</a> (optional <a href="#SensorData">SensorData</a>? sensorData)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SensorType">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorType"></a><h3>1.1. SensorType</h3>
+<div class="brief">
+ Specifies the sensor type available to the API.
+          </div>
+<pre class="webidl prettyprint">    enum SensorType { "LIGHT", "MAGNETIC", "PRESSURE",  "PROXIMITY", "ULTRAVIOLET" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+The sensor types defined by this enumerator are:
+          </p>
+          <ul>
+            <li>
+LIGHT - Light sensor            </li>
+            <li>
+MAGNETIC - Magnetic sensor            </li>
+            <li>
+PRESSURE - Pressure sensor            </li>
+            <li>
+PROXIMITY - Proximity sensor            </li>
+            <li>
+ULTRAVIOLET - Ultraviolet sensor            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="ProximityState">
+<a class="backward-compatibility-anchor" name="::Sensor::ProximityState"></a><h3>1.2. ProximityState</h3>
+<div class="brief">
+ Specifies the proximity state.
+          </div>
+<pre class="webidl prettyprint">    enum ProximityState { "FAR", "NEAR" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="enum" id="MagneticSensorAccuracy">
+<a class="backward-compatibility-anchor" name="::Sensor::MagneticSensorAccuracy"></a><h3>1.3. MagneticSensorAccuracy</h3>
+<div class="brief">
+ Specifies the accuracy of magnetic sensor data.
+          </div>
+<pre class="webidl prettyprint">    enum MagneticSensorAccuracy { "ACCURACY_UNDEFINED", "ACCURACY_BAD", "ACCURACY_NORMAL", "ACCURACY_GOOD", "ACCURACY_VERYGOOD" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SensorServiceManagerObject">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorServiceManagerObject"></a><h3>2.1. SensorServiceManagerObject</h3>
+<div class="brief">
+ The SensorServiceManagerObject interface defines what is instantiated by the <em>Tizen</em> object.
+The <em>tizen.sensorservice</em> object allows access to various sensors of the Tizen device.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorServiceManagerObject {
+        readonly attribute <a href="#SensorService">SensorService</a> sensorservice;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SensorServiceManagerObject">SensorServiceManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="SensorService">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorService"></a><h3>2.2. SensorService</h3>
+<div class="brief">
+ The SensorService interface provides methods to access the sensor.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorService {
+
+        <a href="#Sensor">Sensor</a> getDefaultSensor(<a href="#SensorType">SensorType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#SensorType">SensorType</a>[] getAvailableSensors() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SensorService::getDefaultSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorService::getDefaultSensor"></a><code><b><span class="methodName">getDefaultSensor</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the default sensor of the device for the given sensor type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#Sensor">Sensor</a> getDefaultSensor(<a href="#SensorType">SensorType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The supported sensor types are hardware-dependent. <br><br>To check if the given <var>type</var> is supported or not, SystemInfo API can be used.
+            </p>
+            <ul>
+              <li>
+ LIGHT       - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.photometer"</em>)               </li>
+              <li>
+ MAGNETIC    - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.magnetometer"</em>)               </li>
+              <li>
+ PRESSURE    - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.barometer"</em>)               </li>
+              <li>
+ PROXIMITY   - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.proximity"</em>)               </li>
+              <li>
+ ULTRAVIOLET - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/sensor.ultraviolet"</em>)               </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Sensor type to access
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Sensor Default sensor object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if accessing a given sensor type fails because of an unknown error.
+                </p></li>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported on the device.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximityCapability = tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.proximity");
+
+ if (proximityCapability === true) {
+     // the device supports proximity sensor and you can get proximity sensor's data
+     var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+ } else {
+     // If tizen.sensorservice.getDefaultSensor("PROXIMITY") is used, NotSupportedError would be thrown.
+     console.log("Proximity sensor is not supported on this device.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SensorService::getAvailableSensors">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorService::getAvailableSensors"></a><code><b><span class="methodName">getAvailableSensors</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the available sensor types.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SensorType">SensorType</a>[] getAvailableSensors();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SensorType[] All available sensor types
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if getting available sensor type fails because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var sensorCapabilities = tizen.sensorservice.getAvailableSensors();
+
+ console.log("capable sensor : " + sensorCapabilities[0]);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="Sensor">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor"></a><h3>2.3. Sensor</h3>
+<div class="brief">
+ The Sensor interface is a base interface for specific sensor interfaces. It provides methods common to all sensor types.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface Sensor {
+
+        readonly attribute <a href="#SensorType">SensorType</a> sensorType;
+
+        void start(<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setChangeListener(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="Sensor::sensorType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SensorType </span><span class="name">sensorType</span></span><div class="brief">
+ Sensor type to monitor the changes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="Sensor::start">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::start"></a><code><b><span class="methodName">start</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Starts the sensor.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void start(<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when sensor has been successfully started
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if starting the sensor fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onsuccessCB() {
+     console.log("The proximity sensor started successfully.");
+ }
+
+ proximitySensor.start(onsuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Sensor::stop">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::stop"></a><code><b><span class="methodName">stop</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Stops the sensor.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stop();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if stopping the sensor fails because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onsuccessCB() {
+     console.log("proximity sensor start");
+     proximitySensor.stop();
+ }
+
+ proximitySensor.start(onsuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Sensor::setChangeListener">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::setChangeListener"></a><code><b><span class="methodName">setChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a change listener to be called when sensor data of the given type changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setChangeListener(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that the setChangeListener() method only registers the listener.
+The start() method must be called to turn on the sensor, or the sensor data will not change.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data changes
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if registering the listener fails because of an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onsuccessCB() {
+     console.log("proximity sensor start");
+ }
+
+ function onchangedCB(sensorData) {
+     console.log("proximity distance : " + sensorData.proximityState);
+ }
+
+ proximitySensor.setChangeListener(onchangedCB);
+
+ proximitySensor.start(onsuccessCB);
+ </pre>
+</div>
+</dd>
+<dt class="method" id="Sensor::unsetChangeListener">
+<a class="backward-compatibility-anchor" name="::Sensor::Sensor::unsetChangeListener"></a><code><b><span class="methodName">unsetChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unregisters the sensor data change listener.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if unregistering the listener fails because of an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onchangedCB(sensorData) {
+     console.log("proximity distance : " + sensorData.proximityState);
+ }
+
+ proximitySensor.setChangeListener(onchangedCB);
+
+ proximitySensor.unsetChangeListener();
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="LightSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::LightSensor"></a><h3>2.4. LightSensor</h3>
+<div class="brief">
+ The LightSensor interface provides methods to access light sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface LightSensor : <a href="#Sensor">Sensor</a> {
+
+        void getLightSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="LightSensor::getLightSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::LightSensor::getLightSensorData"></a><code><b><span class="methodName">getLightSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getLightSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getLightSensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getLightSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("light level : " + sensorData.lightLevel);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("sensor start");
+     lightSensor.getLightSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ lightSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="MagneticSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::MagneticSensor"></a><h3>2.5. MagneticSensor</h3>
+<div class="brief">
+ The MagneticSensor interface provides methods to access magnetic sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface MagneticSensor : <a href="#Sensor">Sensor</a> {
+
+        void getMagneticSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="MagneticSensor::getMagneticSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::MagneticSensor::getMagneticSensorData"></a><code><b><span class="methodName">getMagneticSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getMagneticSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getMagneticSensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getMagneticSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var magneticSensor = tizen.sensorservice.getDefaultSensor("MAGNETIC");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("magnetic field of the X axis : " + sensorData.x);
+     console.log("magnetic field of the Y axis : " + sensorData.y);
+     console.log("magnetic field of the Z axis : " + sensorData.z);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("sensor start");
+     magneticSensor.getMagneticSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ magneticSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="PressureSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::PressureSensor"></a><h3>2.6. PressureSensor</h3>
+<div class="brief">
+ The PressureSensor interface provides methods to access pressure sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface PressureSensor : <a href="#Sensor">Sensor</a> {
+
+        void getPressureSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="PressureSensor::getPressureSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::PressureSensor::getPressureSensorData"></a><code><b><span class="methodName">getPressureSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPressureSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that the start() method should be called before calling the getPressureSensorData() method to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getPressureSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var pressureSensor = tizen.sensorservice.getDefaultSensor("PRESSURE");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("pressure : " + sensorData.pressure);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("sensor start");
+     pressureSensor.getPressureSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ pressureSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ProximitySensor">
+<a class="backward-compatibility-anchor" name="::Sensor::ProximitySensor"></a><h3>2.7. ProximitySensor</h3>
+<div class="brief">
+ The ProximitySensor interface provides methods to access proximity sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface ProximitySensor : <a href="#Sensor">Sensor</a> {
+
+        void getProximitySensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ProximitySensor::getProximitySensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::ProximitySensor::getProximitySensorData"></a><code><b><span class="methodName">getProximitySensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getProximitySensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getProximitySensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getProximitySensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("proximity state : " + sensorData.proximityState);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("proximity sensor start");
+     proximitySensor.getProximitySensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ proximitySensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="UltravioletSensor">
+<a class="backward-compatibility-anchor" name="::Sensor::UltravioletSensor"></a><h3>2.8. UltravioletSensor</h3>
+<div class="brief">
+ The UltravioletSensor interface provides methods to access ultraviolet sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface UltravioletSensor : <a href="#Sensor">Sensor</a> {
+
+        void getUltravioletSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="UltravioletSensor::getUltravioletSensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::UltravioletSensor::getUltravioletSensorData"></a><code><b><span class="methodName">getUltravioletSensorData</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sensor data.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getUltravioletSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Note that before calling the getUltravioletSensorData() method, the start() method should be called to turn on the sensor.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+ ServiceNotAvailableError : If the <em>getUltravioletSensorData()</em> method is called without first calling the <em>start()</em> method              </li>
+              <li>
+ UnknownError  : An unknown error has occurred              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method to be invoked when the sensor data has been read
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method to be invoked when an error occurs
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var ultravioletSensor = tizen.sensorservice.getDefaultSensor("ULTRAVIOLET");
+
+ function onGetSuccessCB(sensorData) {
+     console.log("ultraviolet level : " + sensorData.ultravioletLevel);
+ }
+
+ function onerrorCB(error) {
+     console.log("error occurs");
+ }
+
+ function onsuccessCB() {
+     console.log("ultraviolet sensor start");
+     ultravioletSensor.getUltravioletSensorData(onGetSuccessCB, onerrorCB);
+ }
+
+ ultravioletSensor.start(onsuccessCB);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SensorData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorData"></a><h3>2.9. SensorData</h3>
+<div class="brief">
+ The SensorData interface is a common abstract interface used by different types of sensor data objects.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorData {
+     };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+</div>
+<div class="interface" id="SensorLightData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorLightData"></a><h3>2.10. SensorLightData</h3>
+<div class="brief">
+ The SensorLightData interface represents light sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorLightData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double lightLevel;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorLightData::lightLevel">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">lightLevel</span></span><div class="brief">
+ Ambient light level in lux.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorMagneticData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorMagneticData"></a><h3>2.11. SensorMagneticData</h3>
+<div class="brief">
+ The SensorMagneticData interface represents magnetic sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorMagneticData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double x;
+
+        readonly attribute double y;
+
+        readonly attribute double z;
+
+        readonly attribute <a href="#MagneticSensorAccuracy">MagneticSensorAccuracy</a> accuracy;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SensorMagneticData::x">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">x</span></span><div class="brief">
+ Ambient magnetic field of the X axis in micro-Tesla (µT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SensorMagneticData::y">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">y</span></span><div class="brief">
+ Ambient magnetic field of the Y axis in micro-Tesla (µT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SensorMagneticData::z">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">z</span></span><div class="brief">
+ Ambient magnetic field of the Z axis in micro-Tesla (µT).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SensorMagneticData::accuracy">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">MagneticSensorAccuracy </span><span class="name">accuracy</span></span><div class="brief">
+ Accuracy of magnetic sensor data.
+            </div>
+<div class="description">
+            <p>
+For increasing the accuracy, wave the device around in the air in figure-eight patterns.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SensorPressureData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorPressureData"></a><h3>2.12. SensorPressureData</h3>
+<div class="brief">
+ The SensorPressureData interface represents pressure sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorPressureData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double pressure;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorPressureData::pressure">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">pressure</span></span><div class="brief">
+ Pressure in millibar (hPa).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorProximityData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorProximityData"></a><h3>2.13. SensorProximityData</h3>
+<div class="brief">
+ The SensorProximityData interface represents proximity sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorProximityData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute <a href="#ProximityState">ProximityState</a> proximityState;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorProximityData::proximityState">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">ProximityState </span><span class="name">proximityState</span></span><div class="brief">
+ Proximity state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorUltravioletData">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorUltravioletData"></a><h3>2.14. SensorUltravioletData</h3>
+<div class="brief">
+ The SensorUltravioletData interface represents ultraviolet sensor data.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SensorUltravioletData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute long ultravioletLevel;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SensorUltravioletData::ultravioletLevel">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">long </span><span class="name">ultravioletLevel</span></span><div class="brief">
+ Ultraviolet index.
+            </div>
+<div class="description">
+            <p>
+The ultraviolet index is an international standard measurement of the strength of ultraviolet radiation from the sun. The <em>ultravioletLevel</em> ranges from 0 to 15.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SensorDataSuccessCallback">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorDataSuccessCallback"></a><h3>2.15. SensorDataSuccessCallback</h3>
+<div class="brief">
+ The SensorDataSuccessCallback interface is a callback interface that is invoked when the sensor data has changed. For example, see the Sensor interface.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject] interface SensorDataSuccessCallback {
+        void onsuccess(optional <a href="#SensorData">SensorData</a>? sensorData);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SensorDataSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Sensor::SensorDataSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sensor data has changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(optional <a href="#SensorData">SensorData</a>? sensorData);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">sensorData</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Current sensor data
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the light sensor application runs on a device with a photometer (light) sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.photometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the magnetic sensor application runs on a device with a magnetic sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.magnetometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the barometer(pressure) sensor application runs on a device with a barometric (pressure) sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.barometer</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the proximity sensor application runs on a device with a proximity sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.proximity</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee that the UV sensor application runs on a device with a UV sensor, declare the following feature requirement in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/sensor.ultraviolet</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Sensor {
+
+    enum SensorType { "LIGHT", "MAGNETIC", "PRESSURE",  "PROXIMITY", "ULTRAVIOLET" };
+
+    enum ProximityState { "FAR", "NEAR" };
+
+    enum MagneticSensorAccuracy { "ACCURACY_UNDEFINED", "ACCURACY_BAD", "ACCURACY_NORMAL", "ACCURACY_GOOD", "ACCURACY_VERYGOOD" };
+
+    [NoInterfaceObject] interface SensorServiceManagerObject {
+        readonly attribute <a href="#SensorService">SensorService</a> sensorservice;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SensorServiceManagerObject">SensorServiceManagerObject</a>;
+
+    [NoInterfaceObject] interface SensorService {
+
+        <a href="#Sensor">Sensor</a> getDefaultSensor(<a href="#SensorType">SensorType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        <a href="#SensorType">SensorType</a>[] getAvailableSensors() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    };
+
+    [NoInterfaceObject] interface Sensor {
+
+        readonly attribute <a href="#SensorType">SensorType</a> sensorType;
+
+        void start(<a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void stop() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setChangeListener(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface LightSensor : <a href="#Sensor">Sensor</a> {
+
+        void getLightSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface MagneticSensor : <a href="#Sensor">Sensor</a> {
+
+        void getMagneticSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface PressureSensor : <a href="#Sensor">Sensor</a> {
+
+        void getPressureSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface ProximitySensor : <a href="#Sensor">Sensor</a> {
+
+        void getProximitySensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface UltravioletSensor : <a href="#Sensor">Sensor</a> {
+
+        void getUltravioletSensorData(<a href="#SensorDataSuccessCallback">SensorDataSuccessCallback</a> successCallback,
+                                optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [NoInterfaceObject] interface SensorData {
+     };
+
+    [NoInterfaceObject] interface SensorLightData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double lightLevel;
+    };
+
+    [NoInterfaceObject] interface SensorMagneticData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double x;
+
+        readonly attribute double y;
+
+        readonly attribute double z;
+
+        readonly attribute <a href="#MagneticSensorAccuracy">MagneticSensorAccuracy</a> accuracy;
+    };
+
+    [NoInterfaceObject] interface SensorPressureData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute double pressure;
+    };
+
+    [NoInterfaceObject] interface SensorProximityData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute <a href="#ProximityState">ProximityState</a> proximityState;
+    };
+
+    [NoInterfaceObject] interface SensorUltravioletData : <a href="#SensorData">SensorData</a> {
+
+        readonly attribute long ultravioletLevel;
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject] interface SensorDataSuccessCallback {
+        void onsuccess(optional <a href="#SensorData">SensorData</a>? sensorData);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/snippet.js b/org.tizen.web.apireference/html/device_api/wearable/tizen/snippet.js
new file mode 100644 (file)
index 0000000..ed1ac43
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,uint,ulong,unchecked,unsafe,ushort,var,byte,"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,null,undefined,var," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html
new file mode 100644 (file)
index 0000000..798dc67
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html
@@ -0,0 +1,594 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Sound API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Sound">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Sound API</h1></div>
+<div class="brief">
+ The Sound API provides functions to control volume level for several sound types.
+        </div>
+<div class="description">
+        <p>
+You can get the maximum volume level for system, notifications, alarm, media and so on.
+Also, you can change or get the current volume level.
+        </p>
+        <p>
+For more information on the Sound features, see <a href="../../../../../org.tizen.guides/html/web/tizen/multimedia/sound_w.htm">Sound Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SoundType">SoundType</a>
+</li>
+<li>1.2. <a href="#SoundModeType">SoundModeType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SoundManagerObject">SoundManagerObject</a>
+</li>
+<li>2.2. <a href="#SoundManager">SoundManager</a>
+</li>
+<li>2.3. <a href="#SoundModeChangeCallback">SoundModeChangeCallback</a>
+</li>
+<li>2.4. <a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SoundManagerObject">SoundManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SoundManager">SoundManager</a></td>
+<td>
+<a href="#SoundModeType">SoundModeType</a> <a href="#SoundManager::getSoundMode">getSoundMode</a> ()<br>
+    void <a href="#SoundManager::setVolume">setVolume</a> (<a href="#SoundType">SoundType</a> type, double volume)<br>
+    double <a href="#SoundManager::getVolume">getVolume</a> (<a href="#SoundType">SoundType</a> type)<br>
+    void <a href="#SoundManager::setSoundModeChangeListener">setSoundModeChangeListener</a> (<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback)<br>
+    void <a href="#SoundManager::unsetSoundModeChangeListener">unsetSoundModeChangeListener</a> ()<br>
+    void <a href="#SoundManager::setVolumeChangeListener">setVolumeChangeListener</a> (<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback)<br>
+    void <a href="#SoundManager::unsetVolumeChangeListener">unsetVolumeChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#SoundModeChangeCallback">SoundModeChangeCallback</a></td>
+<td>void <a href="#SoundModeChangeCallback::onsuccess">onsuccess</a> (<a href="#SoundModeType">SoundModeType</a> mode)</td>
+</tr>
+<tr>
+<td><a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a></td>
+<td>void <a href="#SoundVolumeChangeCallback::onsuccess">onsuccess</a> (<a href="#SoundType">SoundType</a> type, double volume)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SoundType">
+<a class="backward-compatibility-anchor" name="::Sound::SoundType"></a><h3>1.1. SoundType</h3>
+<div class="brief">
+ Sound type to control
+          </div>
+<pre class="webidl prettyprint">    enum SoundType {
+        "SYSTEM",
+        "NOTIFICATION",
+        "ALARM",
+        "MEDIA",
+        "VOICE",
+        "RINGTONE"
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ SYSTEM - for system sounds            </li>
+            <li>
+ NOTIFICATION - for notifications            </li>
+            <li>
+ ALARM - for alarm            </li>
+            <li>
+ MEDIA - for media playback            </li>
+            <li>
+ VOICE - for voice            </li>
+            <li>
+ RINGTONE - for the phone ring            </li>
+          </ul>
+         </div>
+<p><span class="remark"> Remark : </span>
+ <em>VOICE</em> type might not be supported on a device which does not support voice recognition.
+          </p>
+</div>
+<div class="enum" id="SoundModeType">
+<a class="backward-compatibility-anchor" name="::Sound::SoundModeType"></a><h3>1.2. SoundModeType</h3>
+<div class="brief">
+ Sound mode type
+          </div>
+<pre class="webidl prettyprint">    enum SoundModeType {
+        "SOUND",
+        "VIBRATE",
+        "MUTE"
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+ SOUND - the sound mode            </li>
+            <li>
+ VIBRATE - the vibrate mode            </li>
+            <li>
+ MUTE - the mute mode            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SoundManagerObject">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManagerObject"></a><h3>2.1. SoundManagerObject</h3>
+<div class="brief">
+ The SoundManagerObject interface defines what is instantiated in the tizen object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SoundManagerObject {
+         readonly attribute <a href="#SoundManager">SoundManager</a> sound;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SoundManagerObject">SoundManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+There is a tizen.sound object that allows accessing the functionality of the Sound API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SoundManager">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager"></a><h3>2.2. SoundManager</h3>
+<div class="brief">
+ The SoundManager interface provides the functionalities to control the volume level.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface SoundManager {
+
+        <a href="#SoundModeType">SoundModeType</a> getSoundMode() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolume(<a href="#SoundType">SoundType</a> type, double volume) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        double getVolume(<a href="#SoundType">SoundType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setSoundModeChangeListener(<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetSoundModeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolumeChangeListener(<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetVolumeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SoundManager::getSoundMode">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::getSoundMode"></a><code><b><span class="methodName">getSoundMode</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current sound mode.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SoundModeType">SoundModeType</a> getSoundMode();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ SoundModeType The current sound mode
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::setVolume">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::setVolume"></a><code><b><span class="methodName">setVolume</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the volume level for a specified sound type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setVolume(<a href="#SoundType">SoundType</a> type, double volume);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/volume.set
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The sound type
+                </li>
+          <li class="param">
+<span class="name">volume</span>: 
+ The volume level to set <br>The level ranges from 0 to 1.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported. (e.g. when <em>VOICE</em> type is given on a Tizen wearable device).
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::getVolume">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::getVolume"></a><code><b><span class="methodName">getVolume</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current volume level for a specified sound type.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">double getVolume(<a href="#SoundType">SoundType</a> type);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ The sound type
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ double The current volume level
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type NotSupportedError, if the given <var>type</var> is not supported.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::setSoundModeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::setSoundModeChangeListener"></a><code><b><span class="methodName">setSoundModeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a listener to be called when the sound mode is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setSoundModeChangeListener(<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method to be invoked when the sound mode is changed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::unsetSoundModeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::unsetSoundModeChangeListener"></a><code><b><span class="methodName">unsetSoundModeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification about the sound mode change.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetSoundModeChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::setVolumeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::setVolumeChangeListener"></a><code><b><span class="methodName">setVolumeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Registers a listener to be called when the volume level is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setVolumeChangeListener(<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">callback</span>: 
+ Callback method to be invoked when the volume level is changed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SoundManager::unsetVolumeChangeListener">
+<a class="backward-compatibility-anchor" name="::Sound::SoundManager::unsetVolumeChangeListener"></a><code><b><span class="methodName">unsetVolumeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes from receiving notification when the volume level is changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetVolumeChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SoundModeChangeCallback">
+<a class="backward-compatibility-anchor" name="::Sound::SoundModeChangeCallback"></a><h3>2.3. SoundModeChangeCallback</h3>
+<div class="brief">
+ The SoundModeChangeCallback interface specifies a mode change callback for getting notified about the sound mode changes.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundModeChangeCallback {
+        void onsuccess(<a href="#SoundModeType">SoundModeType</a> mode);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SoundModeChangeCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Sound::SoundModeChangeCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the sound mode has changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SoundModeType">SoundModeType</a> mode);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">mode</span>: 
+ Sound mode
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SoundVolumeChangeCallback">
+<a class="backward-compatibility-anchor" name="::Sound::SoundVolumeChangeCallback"></a><h3>2.4. SoundVolumeChangeCallback</h3>
+<div class="brief">
+ The SoundVolumeChangeCallback interface specifies a volume change callback for getting notified about the volume changes.
+          </div>
+<pre class="webidl prettyprint">    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundVolumeChangeCallback {
+        void onsuccess(<a href="#SoundType">SoundType</a> type, double volume);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SoundVolumeChangeCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Sound::SoundVolumeChangeCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the volume level has changed.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SoundType">SoundType</a> type, double volume);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+ Sound type
+                </li>
+          <li class="param">
+<span class="name">volume</span>: 
+ New volume level
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Sound {
+    enum SoundType {
+        "SYSTEM",
+        "NOTIFICATION",
+        "ALARM",
+        "MEDIA",
+        "VOICE",
+        "RINGTONE"
+    };
+
+    enum SoundModeType {
+        "SOUND",
+        "VIBRATE",
+        "MUTE"
+    };
+
+    [NoInterfaceObject] interface SoundManagerObject {
+         readonly attribute <a href="#SoundManager">SoundManager</a> sound;
+    };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SoundManagerObject">SoundManagerObject</a>;
+
+    [NoInterfaceObject] interface SoundManager {
+
+        <a href="#SoundModeType">SoundModeType</a> getSoundMode() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolume(<a href="#SoundType">SoundType</a> type, double volume) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        double getVolume(<a href="#SoundType">SoundType</a> type) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+
+        void setSoundModeChangeListener(<a href="#SoundModeChangeCallback">SoundModeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetSoundModeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void setVolumeChangeListener(<a href="#SoundVolumeChangeCallback">SoundVolumeChangeCallback</a> callback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+        void unsetVolumeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundModeChangeCallback {
+        void onsuccess(<a href="#SoundModeType">SoundModeType</a> mode);
+    };
+
+    [Callback=FunctionOnly, NoInterfaceObject]
+    interface SoundVolumeChangeCallback {
+        void onsuccess(<a href="#SoundType">SoundType</a> type, double volume);
+    };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/styles-systeminfo.css b/org.tizen.web.apireference/html/device_api/wearable/tizen/styles-systeminfo.css
new file mode 100644 (file)
index 0000000..e06a2c2
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/styles-systeminfo.css
@@ -0,0 +1,637 @@
+body {
+       background: white;
+       color: #1C1C1C;
+       margin-right: 20px;
+       margin-left: 20px;
+       font-size: 9pt;
+       font-weight: normal;
+       font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+       font-family: Arial, Verdana, Helvetica, sans-serif
+       }
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+       font-size: 9pt;
+}
+
+pre, code { 
+       font-family: "Courier New", Courier, monospace;
+       border: 1px solid #719cc7;
+       margin: 6px 1.5px;
+       padding: 1px 1px 1px 1px;
+       font-weight: normal;
+       font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+
+h1, h2, h3, h4, h5 {
+       font-weight: bold;
+       font-style: normal; 
+       line-height: normal; 
+       margin-top: 16pt;
+}
+
+caption, p.caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: left;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+ol  {
+       margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+       margin-top: 10px;
+}
+
+ul li, ol li {
+       margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+       border-top: 2px solid #719cc7;
+       list-style-position: inside;
+       font-weight: bold;
+       margin-top: 30px;
+       margin-left: -20px;
+       padding-top: 3px;
+       font-size: 12pt;
+}
+
+ol.tutorstep li p{
+       font-size: 9pt;
+       font-weight: normal;
+       margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+       font-size: 9pt;
+       list-style-position: outside; 
+       margin-left: 0px;
+       font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+       font-size: 9pt;
+       font-weight: normal; 
+       margin-top: 5px;
+}
+
+ol li p, ul li p {
+       font-size: 9pt;
+       font-weight: normal;
+       margin-bottom: 2px;
+       margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+       font-size: 9pt;
+       font-weight: normal;
+       list-style-type: lower-alpha;
+       color: #1C1C1C; 
+       border-style: none;
+       margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+       margin-top: 10px;
+       font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+       border-style: none;
+       margin-top: 5px;
+       font-size: 9pt;
+}
+
+ul {
+       font-size: 9pt;
+       font-weight: normal;
+       color: #1C1C1C;
+}
+
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table  {
+       border: 0px;
+       border-collapse: collapse;
+       width: 100%;
+       margin-top: 20px;
+       margin-bottom: 20px;
+
+}
+
+th {
+       border-top: 2px solid #719cc7;
+       border-right: 1px solid #c6d9f1;
+       border-left: 1px solid #c6d9f1;
+       background-color: #f3f7fb;
+       padding: 4px;
+       color: #719cc7;
+       font-size: 9pt;
+       font-weight: bold;
+}
+
+td {
+       border: 1px solid #c6d9f1;
+       vertical-align:top;
+       padding: 3px 20px 5px 20px;
+       }
+
+td.middle {
+       border: 1px solid #c6d9f1;
+       vertical-align:middle;
+       padding: 3px 20px 5px 20px;
+       }
+
+
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+       border-top: 2px solid #719cc7;
+       border-left: 0px;
+       border-right: 0px;
+       width: 100%;
+}
+
+tr.note {
+       text-align: left;
+}
+
+th.note {
+       text-align: left;
+       background-color: #ddd9c3;
+       background-image: note.gif;
+       border-top: 2px solid #719cc7;
+       border-bottom:1px solid #719cc7;
+       border-right: none;
+
+}
+
+td.note, p.note {
+       background-color: #eeece1;
+       color: #1C1C1C;
+       padding: 5px;
+       margin-top:12px;
+       margin-bottom:12px;
+       border: none;
+}
+
+
+/*     Figure titles are centered and bolded   */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+       text-align: center;
+       font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix   {
+       background-color: red;
+       font-weight: bold;
+       color: white;
+       }
+
+/*     Footer includes space and a gray line above             */
+#footer {
+       font-size: 9pt;
+       padding-top:10px;
+       margin-top:20px;
+       text-align: center;
+/*     border-top:1px solid #EEEEEE; */
+       }
+       
+#banner {
+       padding: 8px 4px 8px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+       
+caption { 
+       font-size: 9pt;
+       color: #1C1C1C;
+       font-weight: bold;
+       text-align: center;
+       margin-top: 20px;
+       margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+       background-color: #e8eef2;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       padding: 2px;
+}
+
+div.qindex, div.navpath {
+       width: 100%;
+       line-height: 140%;
+}
+
+div.navtab {
+       margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+       color: #719cc7;
+       text-decoration: underline;
+       font-weight: bold;
+}
+
+a:hover { 
+       color: #0e437d;
+}
+
+a:visited {
+       text-decoration: underline;
+       color: #719cc7;
+       font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+       text-decoration: underline;
+       color: #0e437d;
+       padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+       text-decoration: underline;
+       font-weight: bold;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+       border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+       text-decoration: none;
+       background-color: #6666cc;
+       color: #ffffff;
+       padding: 2px 6px;
+}
+
+div.banner {
+       padding: 8px 4px 0px 4px;
+       /* top right bottom left */
+       border: 1px solid #7f7f7f;
+       width: 100%;
+       background-image: url("banner.png");
+       text-align: left;
+       font-weight: bold;
+       font-size: 9pt;
+       color: #ffffff;
+}
+
+div.footer {
+       font-size: 9pt;
+       padding-top:10px;
+       margin-top:20px;
+       text-align: center;
+}
+
+dl.el { 
+       margin-left: -1cm 
+}
+
+.fragment {
+       font-family: monospace, fixed;
+       font-size: 105%;
+}
+
+pre.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 4px 6px;
+       margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+       border: 1px solid #CCCCCC;
+       background-color: #f5f5f5;
+       padding: 6px;
+}
+
+div.ah { 
+       background-color: black; 
+       font-weight: bold; 
+       color: #ffffff; 
+       margin-bottom: 3px; 
+       margin-top: 3px 
+}
+
+td.md { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+}
+
+td.mdname1 { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+}
+
+td.mdname { 
+       background-color: #f5f5f5; 
+       font-weight: bold; 
+       color: #602020; 
+       width: 600px; 
+}
+
+div.groupHeader {
+       margin-left: 16px;
+       margin-top: 12px;
+       margin-bottom: 6px;
+       font-weight: bold;
+}
+
+div.groupText { 
+       margin-left: 16px; 
+       font-style: italic; 
+}
+
+td.indexkey {
+       background-color: #eeeeff;
+       font-weight: bold;
+       border: 1px solid #CCCCCC;
+       margin: 2px 0px 2px 0;
+       padding: 2px 10px;
+}
+
+td.indexvalue {
+       background-color: #eeeeff;
+       border: 1px solid #CCCCCC;
+       padding: 2px 10px;
+       margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+       text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+       vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+       border: 1px solid #868686;
+       background-color: #F4F4FB;
+}
+
+.mdRow {
+       padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+       background-color: #F4F4F4A;
+       border: none;
+       margin: 4px;
+       padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+       padding: 0px 8px 4px 8px;
+       color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+       border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+       color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+       font-size: 80%;
+       color: #606060;
+       font-weight: normal;
+       margin-left: 3px;
+}
+
+.memnav {
+       background-color: #eeeeff;
+       border: 1px solid #84b0c7;
+       text-align: center;
+       margin: 2px;
+       margin-right: 15px;
+       padding: 2px;
+}
+
+.memitem {
+       padding: 0;
+}
+
+.memname {
+       white-space: nowrap;
+       font-weight: bold;
+}
+
+.memproto, .memdoc {
+       border: 1px solid #9BBCDD;      
+}
+
+.memproto {
+       padding: 0;
+       background-color: #D5E2EF;
+       font-weight: bold;
+       -webkit-border-top-left-radius: 8px;
+       -webkit-border-top-right-radius: 8px;
+       -moz-border-radius-topleft: 8px;
+       -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+       padding: 2px 5px;
+       background-color: #eef3f5;
+       border-top-width: 0;
+       -webkit-border-bottom-left-radius: 8px;
+       -webkit-border-bottom-right-radius: 8px;
+       -moz-border-radius-bottomleft: 8px;
+       -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+       margin: 6px 0;
+}
+
+.paramkey {
+       text-align: right;
+}
+
+.paramtype {
+       white-space: nowrap;
+}
+
+.paramname {
+       color: #853E0E;
+       white-space: nowrap;
+}
+.paramname em {
+       font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+       font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+       margin: 0px 0px;
+       padding: -30px -30px -30px -30px;
+       font-weight: normal;
+       font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html
new file mode 100644 (file)
index 0000000..488c68f
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html
@@ -0,0 +1,3519 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>SystemInfo API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::SystemInfo">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>SystemInfo API</h1></div>
+<div class="brief">
+ This specification defines interfaces and methods that provide web applications with access to various properties of a system.
+        </div>
+<div class="description">
+        <p>
+This API also provides interfaces and methods that can retrieve statuses of hardware devices, get the value of selected properties, and subscribe to asynchronous notifications of changes for selected values.
+        </p>
+        <p>
+The following provides an overview of the tree data structure:
+        </p>
+        <ul>
+          <li>
+BATTERY          </li>
+          <li>
+CPU          </li>
+          <li>
+STORAGE          </li>
+          <li>
+DISPLAY          </li>
+          <li>
+DEVICE_ORIENTATION          </li>
+          <li>
+BUILD          </li>
+          <li>
+LOCALE          </li>
+          <li>
+NETWORK          </li>
+          <li>
+WIFI_NETWORK          </li>
+          <li>
+CELLULAR_NETWORK          </li>
+          <li>
+SIM          </li>
+          <li>
+PERIPHERAL          </li>
+          <li>
+MEMORY          </li>
+        </ul>
+        <p>
+Not all above properties may be available on every Tizen device. For instance, a device may not support the telephony feature. In that case, <var>CELLULAR_NETWORK</var> and <var>SIM</var> are not available.<br><br>To check the available <var>SystemInfoPropertyId</var>, <em>tizen.systeminfo.getCapability()</em> can be used.
+        </p>
+        <ul>
+          <li>
+ BATTERY          - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/battery"</em>)          </li>
+          <li>
+ DISPLAY          - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/screen"</em>)          </li>
+          <li>
+ WIFI_NETWORK     - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/network.wifi"</em>)          </li>
+          <li>
+ CELLULAR_NETWORK - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/network.telephony"</em>)          </li>
+          <li>
+ SIM              - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/network.telephony"</em>)          </li>
+        </ul>
+        <p>
+For more information on the SystemInfo features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#SystemInfoPropertyId">SystemInfoPropertyId</a>
+</li>
+<li>1.2. <a href="#SystemInfoNetworkType">SystemInfoNetworkType</a>
+</li>
+<li>1.3. <a href="#SystemInfoDeviceOrientationStatus">SystemInfoDeviceOrientationStatus</a>
+</li>
+<li>1.4. <a href="#SystemInfoSimState">SystemInfoSimState</a>
+</li>
+<li>1.5. <a href="#SystemInfoProfile">SystemInfoProfile</a>
+</li>
+<li>1.6. <a href="#SystemInfoLowMemoryStatus">SystemInfoLowMemoryStatus</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SystemInfoObject">SystemInfoObject</a>
+</li>
+<li>2.2. <a href="#SystemInfo">SystemInfo</a>
+</li>
+<li>2.3. <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a>
+</li>
+<li>2.4. <a href="#SystemInfoOptions">SystemInfoOptions</a>
+</li>
+<li>2.5. <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a>
+</li>
+<li>2.6. <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a>
+</li>
+<li>2.7. <a href="#SystemInfoProperty">SystemInfoProperty</a>
+</li>
+<li>2.8. <a href="#SystemInfoBattery">SystemInfoBattery</a>
+</li>
+<li>2.9. <a href="#SystemInfoCpu">SystemInfoCpu</a>
+</li>
+<li>2.10. <a href="#SystemInfoStorage">SystemInfoStorage</a>
+</li>
+<li>2.11. <a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a>
+</li>
+<li>2.12. <a href="#SystemInfoDisplay">SystemInfoDisplay</a>
+</li>
+<li>2.13. <a href="#SystemInfoDeviceOrientation">SystemInfoDeviceOrientation</a>
+</li>
+<li>2.14. <a href="#SystemInfoBuild">SystemInfoBuild</a>
+</li>
+<li>2.15. <a href="#SystemInfoLocale">SystemInfoLocale</a>
+</li>
+<li>2.16. <a href="#SystemInfoNetwork">SystemInfoNetwork</a>
+</li>
+<li>2.17. <a href="#SystemInfoWifiNetwork">SystemInfoWifiNetwork</a>
+</li>
+<li>2.18. <a href="#SystemInfoCellularNetwork">SystemInfoCellularNetwork</a>
+</li>
+<li>2.19. <a href="#SystemInfoSIM">SystemInfoSIM</a>
+</li>
+<li>2.20. <a href="#SystemInfoPeripheral">SystemInfoPeripheral</a>
+</li>
+<li>2.21. <a href="#SystemInfoMemory">SystemInfoMemory</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#api-features">Related Feature</a>
+</li>
+<li>4. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SystemInfoObject">SystemInfoObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfo">SystemInfo</a></td>
+<td>long long <a href="#SystemInfo::getTotalMemory">getTotalMemory</a> ()<br>
+    long long <a href="#SystemInfo::getAvailableMemory">getAvailableMemory</a> ()<br>
+    <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> <a href="#SystemInfo::getCapabilities">getCapabilities</a> ()<br>
+    any <a href="#SystemInfo::getCapability">getCapability</a> (DOMString key)<br>
+    long <a href="#SystemInfo::getCount">getCount</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property)<br>
+    void <a href="#SystemInfo::getPropertyValue">getPropertyValue</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#SystemInfo::getPropertyValueArray">getPropertyValueArray</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    unsigned long <a href="#SystemInfo::addPropertyValueChangeListener">addPropertyValueChangeListener</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    unsigned long <a href="#SystemInfo::addPropertyValueArrayChangeListener">addPropertyValueArrayChangeListener</a> (<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#SystemInfo::removePropertyValueChangeListener">removePropertyValueChangeListener</a> (unsigned long listenerId)</td>
+</tr>
+<tr>
+<td><a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoOptions">SystemInfoOptions</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a></td>
+<td>void <a href="#SystemInfoPropertySuccessCallback::onsuccess">onsuccess</a> (<a href="#SystemInfoProperty">SystemInfoProperty</a> property)</td>
+</tr>
+<tr>
+<td><a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a></td>
+<td>void <a href="#SystemInfoPropertyArraySuccessCallback::onsuccess">onsuccess</a> (<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties)</td>
+</tr>
+<tr>
+<td><a href="#SystemInfoProperty">SystemInfoProperty</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoBattery">SystemInfoBattery</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoCpu">SystemInfoCpu</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoStorage">SystemInfoStorage</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoDisplay">SystemInfoDisplay</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoDeviceOrientation">SystemInfoDeviceOrientation</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoBuild">SystemInfoBuild</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoLocale">SystemInfoLocale</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoNetwork">SystemInfoNetwork</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoWifiNetwork">SystemInfoWifiNetwork</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoCellularNetwork">SystemInfoCellularNetwork</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoSIM">SystemInfoSIM</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoPeripheral">SystemInfoPeripheral</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemInfoMemory">SystemInfoMemory</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SystemInfoPropertyId">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertyId"></a><h3>1.1. SystemInfoPropertyId</h3>
+<div class="brief">
+ The device property identifier.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoPropertyId { "BATTERY", "CPU", "STORAGE", "DISPLAY", "DEVICE_ORIENTATION", "BUILD", "LOCALE", "NETWORK", "WIFI_NETWORK", "CELLULAR_NETWORK", "SIM", "PERIPHERAL", "MEMORY" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<p><span class="remark"> Remark : </span>
+ <em>LOCALE</em> and <em>PERIPHERAL</em> are supported since Tizen 2.1
+          </p>
+<p><span class="remark"> Remark : </span>
+ <em>MEMORY</em> is supported since Tizen 2.3
+          </p>
+</div>
+<div class="enum" id="SystemInfoNetworkType">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoNetworkType"></a><h3>1.2. SystemInfoNetworkType</h3>
+<div class="brief">
+ Data Network Type.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoNetworkType { "NONE", "2G", "2.5G", "3G", "4G", "WIFI", "ETHERNET", "UNKNOWN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+</div>
+<div class="enum" id="SystemInfoDeviceOrientationStatus">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDeviceOrientationStatus"></a><h3>1.3. SystemInfoDeviceOrientationStatus</h3>
+<div class="brief">
+ Device Orientation Status.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoDeviceOrientationStatus { "PORTRAIT_PRIMARY", "PORTRAIT_SECONDARY", "LANDSCAPE_PRIMARY", "LANDSCAPE_SECONDARY" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+SystemInfo reports the orientation of the device depending on the type of the device and physical position of the device relative to vertical direction.
+A "phone type device" is a device for which the portrait position is the natural orientation.
+A "tab type device" is a device for which the landscape position is basic working orientation.
+          </p>
+          <table>
+            <tr>
+              <th>
+SystemInfoDeviceOrientationStatus              </th>
+              <th>
+phone type device              </th>
+              <th>
+tablet type device              </th>
+            </tr>
+            <tr>
+              <td>
+PORTRAIT_PRIMARY              </td>
+              <td>
+natural position              </td>
+              <td>
+rotated 90 degrees right (clockwise)              </td>
+            </tr>
+            <tr>
+              <td>
+PORTRAIT_SECONDARY              </td>
+              <td>
+upside down, in other words rotated 180 degrees              </td>
+              <td>
+rotated 90 degrees left (anticlockwise)              </td>
+            </tr>
+            <tr>
+              <td>
+LANDSCAPE_PRIMARY              </td>
+              <td>
+rotated 90 degrees left (anticlockwise)              </td>
+              <td>
+natural position              </td>
+            </tr>
+            <tr>
+              <td>
+LANDSCAPE_SECONDARY              </td>
+              <td>
+rotated 90 degrees right (clockwise)              </td>
+              <td>
+upside down, in other words rotated 180 degrees              </td>
+            </tr>
+          </table>
+         </div>
+</div>
+<div class="enum" id="SystemInfoSimState">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoSimState"></a><h3>1.4. SystemInfoSimState</h3>
+<div class="brief">
+ Sim State.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoSimState { "ABSENT", "INITIALIZING", "READY", "PIN_REQUIRED", "PUK_REQUIRED", "NETWORK_LOCKED", "SIM_LOCKED", "UNKNOWN" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+</div>
+<div class="enum" id="SystemInfoProfile">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoProfile"></a><h3>1.5. SystemInfoProfile</h3>
+<div class="brief">
+ Device Profile.
+          </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ <em>"MOBILE_FULL"</em> and <em>"MOBILE_WEB"</em> are deprecated since Tizen 2.3 and will be removed in Tizen 3.0. <br>Beginning with Tizen 2.3, <em>"MOBILE"</em> is returned instead of <em>"MOBILE_FULL"</em>.
+          </i></font></p></div>
+<pre class="webidl prettyprint">  enum SystemInfoProfile { "MOBILE_FULL", "MOBILE_WEB", "MOBILE", "WEARABLE" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<p><span class="remark"> Remark : </span>
+ <em>"MOBILE"</em> and <em>"WEARABLE"</em> are supported since Tizen 2.3
+          </p>
+</div>
+<div class="enum" id="SystemInfoLowMemoryStatus">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoLowMemoryStatus"></a><h3>1.6. SystemInfoLowMemoryStatus</h3>
+<div class="brief">
+ The low memory state of a device.
+          </div>
+<pre class="webidl prettyprint">  enum SystemInfoLowMemoryStatus { "NORMAL", "WARNING" };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <ul>
+            <li>
+NORMAL - indicating the remaining memory is sufficient for an application to run             </li>
+            <li>
+WARNING - indicating the remaining memory is insufficient. Low memory warnings may happen differently according to the system.             </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SystemInfoObject">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoObject"></a><h3>2.1. SystemInfoObject</h3>
+<div class="brief">
+ Defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoObject {
+    readonly attribute <a href="#SystemInfo">SystemInfo</a> systeminfo;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemInfoObject">SystemInfoObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There will be a tizen.systeminfo object that allows accessing the
+functionality of the SystemInfo API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SystemInfo">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo"></a><h3>2.2. SystemInfo</h3>
+<div class="brief">
+ This entry interface queries the information of a system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfo {
+    long long getTotalMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long long getAvailableMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> getCapabilities() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    any getCapability(DOMString key) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long getCount(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValue(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValueArray(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueArrayChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePropertyValueChangeListener(unsigned long listenerId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<div class="description">
+          <p>
+This API offers methods for retrieving system information
+and for subscribing notifications of system information changes.
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemInfo::getTotalMemory">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getTotalMemory"></a><code><b><span class="methodName">getTotalMemory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the total amount of system memory (in bytes).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long long getTotalMemory();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // To get total amount of system memory
+ console.log("The total memory size is " + tizen.systeminfo.getTotalMemory() + " bytes.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getAvailableMemory">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getAvailableMemory"></a><code><b><span class="methodName">getAvailableMemory</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the amount of memory that is not in use (in bytes).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long long getAvailableMemory();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // To get total amount of system memory
+ console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory() + " bytes.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getCapabilities">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getCapabilities"></a><code><b><span class="methodName">getCapabilities</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the capabilities of the device.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ getCapabilities() is deprecated since Tizen 2.3.
+It is recommended to use the getCapability() method (since Tizen 2.3) instead.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> getCapabilities();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+The function must synchronously acquire the capabilities of the device.
+            </p>
+           </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var deviceCapabilities;
+ deviceCapabilities = tizen.systeminfo.getCapabilities();
+ if (deviceCapabilities.bluetooth) {
+     console.log("Bluetooth is supported");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getCapability">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getCapability"></a><code><b><span class="methodName">getCapability</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a device capability related to a given key.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">any getCapability(DOMString key);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+See the available <a href="./systeminfo_capability_keys.html">device capability keys</a>.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">key</span>: 
+ The device capability key for the device
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ any The value of the specified device capability
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> try {
+     // Checks if a device supports bluetooth API or not
+     var bluetooth = tizen.systeminfo.getCapability("http://tizen.org/feature/network.bluetooth");
+     console.log(" Bluetooth = " + bluetooth);
+ } catch (error) {
+     console.log("Error name: " + error.name + ", message: " + error.message);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getCount">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getCount"></a><code><b><span class="methodName">getCount</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the number of system property information provided for a particular system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getCount(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+That is the length of array retrieved by the getPropertyValueArray() method for the given property.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the system property
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The number of property values for the given property. If the property is not supported, 0 is returned.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var count = tizen.systeminfo.getCount("SIM");
+ if (count === 0) {
+     console.log("There is no available SIM card.");
+ } else {
+     console.log("There is(are) " + count + " SIM card(s) available.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getPropertyValue">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getPropertyValue"></a><code><b><span class="methodName">getPropertyValue</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current value of a specified system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPropertyValue(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+The function must asynchronously acquire the current value of the requested property. If it is successful,
+the successCallback must be invoked with an object containing the information provided by the property.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method can be launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported. (since Tizen 2.3)              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ If the given <var>property</var> is not supported, <em>NotSupportedError</em> would be passed through a <em>ErrorCallback()</em> since Tizen 2.3.
+            </p>
+<p><span class="remark"> Remark : </span>
+ If system provides more than one value for the system property, the primary(first) system property is returned through SystemInfoSuccessCallback.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Function called when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Function called when an error occurred while retrieving the properties.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onSuccessCallback(cpu) {
+     console.log("The cpu load is " + cpu.load);
+ }
+
+ function onErrorCallback(error) {
+     console.log("An error occurred " + error.message);
+ }
+
+ tizen.systeminfo.getPropertyValue("CPU", onSuccessCallback, onErrorCallback);
+ </pre>
+</div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onSuccessCallback(cellular) {
+     console.log("The status of the cellular network is " + cellular.status);
+ }
+
+ function onErrorCallback(error) {
+     console.log("An error occurred " + error.message);
+     // if telephony_capability is false but getPropertyValue("CELLULAR_NETWORK, ..) is called, NotSupportedError would be passed.
+ }
+
+ var telephony_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/network.telephony");
+
+ if (telephony_capability === true) {
+     // onSuccessCallback will be invoked.
+     tizen.systeminfo.getPropertyValue("CELLULAR_NETWORK", onSuccessCallback, onErrorCallback);
+ } else {
+     console.log("Telephony feature is not supported. Cellular network related information cannot be retrieved.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::getPropertyValueArray">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::getPropertyValueArray"></a><code><b><span class="methodName">getPropertyValueArray</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current values of a specified system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getPropertyValueArray(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+It is recommended that you check if a device provides one or more than one value for a particular system property via getCount().
+            </p>
+            <p>
+If one particular system property is provided on a device, it returns an array containing one SystemInfoProperty object through <em>SystemInfoPropertyArraySuccessCallback</em> method.<br>If more than one particular system property is provided, multiple SystemInfoProperty objects are returned.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method can be launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported.              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ see getCount().
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback method that is invoked when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Callback method that is invoked when an error occurs while retrieving the properties.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function successCB(property) {
+     console.log("The SIM's current state is " + property.state);
+ }
+
+ function successArrayCB(properties) {
+     console.log("The number of the returned system properties is " + properties.length);
+     for (var i = 0; i &lt; properties.length; i++) {
+         console.log("[" + i + "] SIM's state is " + properties[i].state);
+     }
+ }
+
+ var count = tizen.systeminfo.getCount("SIM");
+ if (count === 0) {
+     console.log("This device does not provide SIM card.");
+ } else if (count &gt; 1) {
+     tizen.systeminfo.getPropertyValueArray("SIM", successArrayCB);
+ } else {
+     tizen.systeminfo.getPropertyValue("SIM", successCB);
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::addPropertyValueChangeListener">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::addPropertyValueChangeListener"></a><code><b><span class="methodName">addPropertyValueChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to allow tracking of changes in one or more system properties.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long addPropertyValueChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+When called, it immediately returns and then asynchronously starts a watch process defined by the following steps:
+            </p>
+            <p>
+1. Register the successCallback to receive system events that the status of the requested properties may have changed.
+            </p>
+            <p>
+2. When a system event is successfully received invoke the associated successCallback with an object containing the property
+values.
+            </p>
+            <p>
+3. Repeat step 2 until removePropertyValueChangeListener function is called.
+            </p>
+            <p>
+There are device properties which are never changed (e.g. "BUILD") and properties which are not changed on some devices
+(e.g. "DEVICE_ORIENTATION" in Tizen TV device). The <em>addPropertyValueChangeListener()</em> method accepts
+any identifier of these properties, but the listener added for them will not be invoked.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The <em>errorCallback</em> can be launched with any of these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported. (since Tizen 2.3)<br>For example, monitoring <var>CELLULAR_NETWORK</var> changes is not supported on a device which does not support the telephony feature.
+              </li>
+            </ul>
+           </div>
+<p><span class="remark"> Remark : </span>
+ The <em>errorCallback()</em> is newly added as an optional parameter since Tizen 2.3.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Function called when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">options</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An object containing the various options for fetching the properties requested. See <a href="#SystemInfoOptions">details</a>.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Function called when an error occurred.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long An identifier used to clear the watch subscription.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value (e.g. the invalid value for <em>options</em>).
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> function onSuccessCallback(cpu) {
+     console.log("The cpu load : " + cpu.load);
+ }
+
+ tizen.systeminfo.addPropertyValueChangeListener("CPU", onSuccessCallback, {lowThreshold : 0.2});
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemInfo::addPropertyValueArrayChangeListener">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::addPropertyValueArrayChangeListener"></a><code><b><span class="methodName">addPropertyValueArrayChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Adds a listener to allow tracking of changes in one or more values of a system property.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">unsigned long addPropertyValueArrayChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property, <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback, optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method can be launched with these error types:
+            </p>
+            <ul>
+              <li>
+NotSupportedError - If the given <var>property</var> is not supported. (since Tizen 2.3)<br>For example, monitoring <var>CELLULAR_NETWORK</var> changes is not supported on a device which does not support the telephony feature.
+              </li>
+            </ul>
+            <p>
+There are device properties which never change (for example "BUILD") and properties which do not change on the current platform
+(for example "DEVICE_ORIENTATION" for some platforms). The <em>addPropertyValueChangeListener()</em> method accepts
+any identifier of these properties, but the listener added for them will not be invoked.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The name of the property to retrieve.
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Function called when the properties have been successfully retrieved.
+                </li>
+          <li class="param">
+<span class="name">options</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ An object containing the various options for fetching the properties requested.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ Function called when an error occurred.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ unsigned long An identifier used to clear the watch subscription.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value (e.g. the invalid value for <em>options</em>).
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="SystemInfo::removePropertyValueChangeListener">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfo::removePropertyValueChangeListener"></a><code><b><span class="methodName">removePropertyValueChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsubscribes notifications for property changes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void removePropertyValueChangeListener(unsigned long listenerId);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If a valid listenerId argument is passed that corresponds to a subscription
+already place, then the watch process MUST immediately terminate and no further
+callback is invoked. If the listenerId argument does not correspond to a valid subscription,
+the method should return without any further action.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">listenerId</span>: 
+ An identifier of the subscription returned by the addPropertyValueChangeListener()/addPropertyValueArrayChangeListener() method.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var id = null;
+ function onSuccessCallback(cpu) {
+    console.log("New value for CPU load is " + cpu.load);
+    if (id != null) { // After receiving the first notification, we clear it
+        tizen.systeminfo.removePropertyValueChangeListener(id);
+    }
+ }
+
+ id = tizen.systeminfo.addPropertyValueChangeListener("CPU", onSuccessCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoDeviceCapability">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDeviceCapability"></a><h3>2.3. SystemInfoDeviceCapability</h3>
+<div class="brief">
+ SystemInfoDeviceCapability object.
+          </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ SystemInfoDeviceCapability is deprecated since Tizen 2.3 and will be removed in Tizen 3.0.
+It is recommended to use the getCapability() method (since Tizen 2.3) instead to query device capabilities.
+          </i></font></p></div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoDeviceCapability {
+    readonly attribute boolean bluetooth;
+
+    readonly attribute boolean nfc;
+
+    readonly attribute boolean nfcReservedPush ;
+
+    readonly attribute unsigned short multiTouchCount;
+
+    readonly attribute boolean inputKeyboard;
+
+    readonly attribute boolean inputKeyboardLayout;
+
+    readonly attribute boolean wifi;
+
+    readonly attribute boolean wifiDirect;
+
+    readonly attribute boolean opengles;
+
+    readonly attribute DOMString openglestextureFormat;
+
+    readonly attribute boolean openglesVersion1_1;
+
+    readonly attribute boolean openglesVersion2_0;
+
+    readonly attribute boolean fmRadio;
+
+    readonly attribute DOMString platformVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString webApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString nativeApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString platformName;
+
+    readonly attribute boolean camera;
+
+    readonly attribute boolean cameraFront;
+
+    readonly attribute boolean cameraFrontFlash;
+
+    readonly attribute boolean cameraBack;
+
+    readonly attribute boolean cameraBackFlash;
+
+    readonly attribute boolean location;
+
+    readonly attribute boolean locationGps;
+
+    readonly attribute boolean locationWps;
+
+    readonly attribute boolean microphone;
+
+    readonly attribute boolean usbHost;
+
+    readonly attribute boolean usbAccessory;
+
+    readonly attribute boolean screenOutputRca;
+
+    readonly attribute boolean screenOutputHdmi;
+
+    readonly attribute DOMString platformCoreCpuArch;
+
+    readonly attribute DOMString platformCoreFpuArch;
+
+    readonly attribute boolean sipVoip;
+
+    readonly attribute DOMString duid;
+
+    readonly attribute boolean speechRecognition;
+
+    readonly attribute boolean speechSynthesis;
+
+    readonly attribute boolean accelerometer;
+
+    readonly attribute boolean accelerometerWakeup;
+
+    readonly attribute boolean barometer;
+
+    readonly attribute boolean barometerWakeup;
+
+    readonly attribute boolean gyroscope;
+
+    readonly attribute boolean gyroscopeWakeup;
+
+    readonly attribute boolean magnetometer;
+
+    readonly attribute boolean magnetometerWakeup;
+
+    readonly attribute boolean photometer;
+
+    readonly attribute boolean photometerWakeup;
+
+    readonly attribute boolean proximity;
+
+    readonly attribute boolean proximityWakeup;
+
+    readonly attribute boolean tiltmeter;
+
+    readonly attribute boolean tiltmeterWakeup;
+
+    readonly attribute boolean dataEncryption;
+
+    readonly attribute boolean graphicsAcceleration;
+
+    readonly attribute boolean push;
+
+    readonly attribute boolean telephony;
+
+    readonly attribute boolean telephonyMms;
+
+    readonly attribute boolean telephonySms;
+
+    readonly attribute boolean screenSizeNormal;
+
+    readonly attribute boolean screenSize480_800;
+
+    readonly attribute boolean screenSize720_1280;
+
+    readonly attribute boolean autoRotation;
+
+    readonly attribute boolean shellAppWidget;
+
+    readonly attribute boolean visionImageRecognition;
+
+    readonly attribute boolean visionQrcodeGeneration;
+
+    readonly attribute boolean visionQrcodeRecognition;
+
+    readonly attribute boolean visionFaceRecognition;
+
+    readonly attribute boolean secureElement;
+
+    readonly attribute boolean nativeOspCompatible;
+
+    readonly attribute <a href="#SystemInfoProfile">SystemInfoProfile</a> profile;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoDeviceCapability::bluetooth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">bluetooth</span></span><div class="brief">
+ Indicates whether the device supports Bluetooth.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nfc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">nfc</span></span><div class="brief">
+ Indicates whether the device supports NFC.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nfcReservedPush">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">nfcReservedPush</span></span><div class="brief">
+ Indicates whether the device supports NFC reserved push.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::multiTouchCount">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">multiTouchCount</span></span><div class="brief">
+ The number of point in Multi-point touch.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::inputKeyboard">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">inputKeyboard</span></span><div class="brief">
+ Indicates whether the device supports the built-in Keyboard.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::inputKeyboardLayout">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">inputKeyboardLayout</span></span><div class="brief">
+ Indicates whether the device supports the built-in keyboard layout.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::wifi">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">wifi</span></span><div class="brief">
+ Indicates whether the device supports Wi-Fi.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::wifiDirect">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">wifiDirect</span></span><div class="brief">
+ Indicates whether the device supports Wi-Fi direct.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::opengles">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">opengles</span></span><div class="brief">
+ Indicates whether the device supports OpenGL-ES.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::openglestextureFormat">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">openglestextureFormat</span></span><div class="brief">
+ The device 3DC texture format for OpenGL-ES.
+One example of possible output is as follows: "3dc/atc/etc/ptc/pvrtc/utc"
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::openglesVersion1_1">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">openglesVersion1_1</span></span><div class="brief">
+ Indicates whether the device supports OpenGL-ES version 1.1.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::openglesVersion2_0">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">openglesVersion2_0</span></span><div class="brief">
+ Indicates whether the device supports OpenGL-ES version 2.0.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::fmRadio">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">fmRadio</span></span><div class="brief">
+ Indicates whether the device supports FM radio.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformVersion</span></span><div class="brief">
+ The version of the platform in the <em>[Major].[Minor].[Patch Version] </em> format. <br>For example, <var>1.0.0 </var> represents a platform version where the major version is <var>1 </var>and the minor and build versions are <var>0</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::webApiVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">webApiVersion</span></span><div class="brief">
+ The version of the Web API in the <em>[Major].[Minor] </em> format. <br>For example, <var>1.0 </var>represents a web api version where the major version is <var>1 </var> and the minor version is <var>0</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nativeApiVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">nativeApiVersion</span></span><div class="brief">
+ The version of the native API in the <em>[Major].[Minor] </em>format.<br>            </div>
+<div class="description">
+            <p>
+For example, <var>1.0</var> represents a native api version where the major version is <var>1 </var>and the minor version is <var>0</var>.
+If a device doesn't provide Tizen native API, nativeApiVersion will be a empty string.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformName</span></span><div class="brief">
+ The name of the platform.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::camera">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">camera</span></span><div class="brief">
+ Indicates whether the device supports camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraFront">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraFront</span></span><div class="brief">
+ Indicates whether the device supports front camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraFrontFlash">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraFrontFlash</span></span><div class="brief">
+ Indicates whether the device supports flash on the front camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraBack">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraBack</span></span><div class="brief">
+ Indicates whether the device supports back-side camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::cameraBackFlash">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">cameraBackFlash</span></span><div class="brief">
+ Indicates whether the device supports flash on the back-side camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::location">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">location</span></span><div class="brief">
+ Indicates whether the device supports GPS or not.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::locationGps">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">locationGps</span></span><div class="brief">
+ Indicates whether the device supports GPS based location feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::locationWps">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">locationWps</span></span><div class="brief">
+ Indicates whether the device supports WPS based location feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::microphone">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">microphone</span></span><div class="brief">
+ Indicates whether the device supports microphone.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::usbHost">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">usbHost</span></span><div class="brief">
+ Indicates whether the device supports USB host.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::usbAccessory">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">usbAccessory</span></span><div class="brief">
+ Indicates whether the device supports USB accessory.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenOutputRca">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenOutputRca</span></span><div class="brief">
+ Indicates whether the device supports RCA output.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenOutputHdmi">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenOutputHdmi</span></span><div class="brief">
+ Indicates whether the device supports HDMI output.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformCoreCpuArch">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformCoreCpuArch</span></span><div class="brief">
+ The device CPU architecture.
+The possible values for this attribute are: armv6, armv7, x86.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::platformCoreFpuArch">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">platformCoreFpuArch</span></span><div class="brief">
+ The device FPU architecture.
+The possible values for this attribute are: vfpv3 / sse2 / sse3 / ssse3.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::sipVoip">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">sipVoip</span></span><div class="brief">
+ Indicates whether the device supports VOIP.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::duid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">duid</span></span><div class="brief">
+ Indicates the Tizen ID, not device's unique ID since Tizen 2.3.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="remark"> Remark : </span>
+ Tizen ID is a randomly generated value based on the model name. <br>It is recommended to use tizen.systeminfo.getCapability("http://tizen.org/system/tizenid") since Tizen 2.3 instead.
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::speechRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">speechRecognition</span></span><div class="brief">
+ Indicates whether the device supports speech recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::speechSynthesis">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">speechSynthesis</span></span><div class="brief">
+ Indicates whether the device supports speech synthesis.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::accelerometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">accelerometer</span></span><div class="brief">
+ Indicates whether the device supports Accelerometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::accelerometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">accelerometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Accelerometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::barometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">barometer</span></span><div class="brief">
+ Indicates whether the device supports Barometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::barometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">barometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Barometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::gyroscope">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">gyroscope</span></span><div class="brief">
+ Indicates whether the device supports Gyroscope sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::gyroscopeWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">gyroscopeWakeup</span></span><div class="brief">
+ Indicates whether the device supports Gyroscope sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::magnetometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">magnetometer</span></span><div class="brief">
+ Indicates whether the device supports Magnetometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::magnetometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">magnetometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Magnetometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::photometer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">photometer</span></span><div class="brief">
+ Indicates whether the device supports Photometer sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::photometerWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">photometerWakeup</span></span><div class="brief">
+ Indicates whether the device supports Photometer sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::proximity">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">proximity</span></span><div class="brief">
+ Indicates whether the device supports Proximity sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::proximityWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">proximityWakeup</span></span><div class="brief">
+ Indicates whether the device supports Proximity sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::tiltmeter">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">tiltmeter</span></span><div class="brief">
+ Indicates whether the device supports Tiltmeter sensor.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::tiltmeterWakeup">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">tiltmeterWakeup</span></span><div class="brief">
+ Indicates whether the device supports Tiltmeter sensor wake-up feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::dataEncryption">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">dataEncryption</span></span><div class="brief">
+ Indicates whether the device supports data encryption.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::graphicsAcceleration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">graphicsAcceleration</span></span><div class="brief">
+ Indicates whether the device supports hardware acceleration for 2D/3D graphics.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::push">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">push</span></span><div class="brief">
+ Indicates whether the device supports push service.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::telephony">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">telephony</span></span><div class="brief">
+ Indicates whether the device supports the telephony feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::telephonyMms">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">telephonyMms</span></span><div class="brief">
+ Indicates whether the device supports the mms feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::telephonySms">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">telephonySms</span></span><div class="brief">
+ Indicates whether the device supports the sms feature.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenSizeNormal">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenSizeNormal</span></span><div class="brief">
+ Indicates whether the device supports the screen normal size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenSize480_800">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenSize480_800</span></span><div class="brief">
+ Indicates whether the device supports the 480 * 800 screen size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::screenSize720_1280">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">screenSize720_1280</span></span><div class="brief">
+ Indicates whether the device supports the 720 * 1280 screen size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::autoRotation">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">autoRotation</span></span><div class="brief">
+ Indicates whether the device supports auto rotation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::shellAppWidget">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">shellAppWidget</span></span><div class="brief">
+ Indicates whether the device supports shell app widget(dynamic box).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionImageRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionImageRecognition</span></span><div class="brief">
+ Indicates whether the device supports vision image recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionQrcodeGeneration">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionQrcodeGeneration</span></span><div class="brief">
+ Indicates whether the device supports vision qrcode generation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionQrcodeRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionQrcodeRecognition</span></span><div class="brief">
+ Indicates whether the device supports vision qrcode recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::visionFaceRecognition">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">visionFaceRecognition</span></span><div class="brief">
+ Indicates whether the device supports vision face recognition.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::secureElement">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">secureElement</span></span><div class="brief">
+ Indicates whether the device supports secure element.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::nativeOspCompatible">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">nativeOspCompatible</span></span><div class="brief">
+ Indicates whether the device supports native osp API.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceCapability::profile">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoProfile </span><span class="name">profile</span></span><div class="brief">
+ Represents the profile of the current device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="SystemInfoOptions">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoOptions"></a><h3>2.4. SystemInfoOptions</h3>
+<div class="brief">
+ An object containing the various options for fetching the properties requested.
+          </div>
+<pre class="webidl prettyprint">  dictionary SystemInfoOptions {
+    unsigned long timeout;
+
+    double highThreshold;
+
+    double lowThreshold;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The <var>highThreshold</var> and <var>lowThreshold</var> values are only applicable to the following <em>SystemInfoPropertyId</em>.
+          </p>
+          <ul>
+            <li>
+ SystemInfoBattery - level : <em>from 0 to 1</em>             </li>
+            <li>
+ SystemInfoCpu - load : <em>from 0 to 1</em>             </li>
+            <li>
+ SystemInfoDisplay - brightness : <em>from 0 to 1</em>             </li>
+          </ul>
+          <p>
+For other cases, it is ignored.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="SystemInfoOptions::timeout"><span class="attrName">unsigned long timeout</span></dt>
+<dd>
+<div class="brief">
+ The number of milliseconds beyond which the operation must be interrupted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="SystemInfoOptions::highThreshold"><span class="attrName">double highThreshold</span></dt>
+<dd>
+<div class="brief">
+ An attribute to indicate that the <em>successCallback()</em> method in the watch
+operation will be triggered only if the device property is a number and its value is greater than or equal to this number.
+This attribute has no effect on the <em>get()</em> method.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+<dt class="member" id="SystemInfoOptions::lowThreshold"><span class="attrName">double lowThreshold</span></dt>
+<dd>
+<div class="brief">
+ An attribute to indicate that the <em>successCallback()</em> method in the watch operation must be triggered only if the property is a number and its value is lower than or equal to this number.
+If both <em>highThreshold </em>and <em>lowThreshold </em>parameters are specified, the <em>successCallback()</em> is triggered if and only if the property value is either lower than the value of <em>lowThreshold</em> or higher than the value of <em>highThreshold</em>.
+This attribute has no effect on the get method.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoPropertySuccessCallback">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertySuccessCallback"></a><h3>2.5. SystemInfoPropertySuccessCallback</h3>
+<div class="brief">
+ Systeminfo specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a> property);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback with SystemInfoProperty as input argument.
+It is used in asynchronous
+operations, such as getPropertyValue() or addPropertyValueChangeListener()
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemInfoPropertySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a> property);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">property</span>: 
+ The property returned from a successful asynchronous operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoPropertyArraySuccessCallback">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertyArraySuccessCallback"></a><h3>2.6. SystemInfoPropertyArraySuccessCallback</h3>
+<div class="brief">
+ Systeminfo specific success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertyArraySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+<div class="description">
+          <p>
+This callback interface specifies a success callback with SystemInfoProperty as input argument.
+It is used in asynchronous operations, such as getPropertyValueArray() or addPropertyValueArrayChangeListener()
+          </p>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemInfoPropertyArraySuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPropertyArraySuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">properties</span>: 
+ The array of SystemInfoProperty objects returned from a successful asynchronous operation.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemInfoProperty">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoProperty"></a><h3>2.7. SystemInfoProperty</h3>
+<div class="brief">
+ This is a common abstract interface used by different types of system information objects.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoProperty {
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+</div>
+<div class="interface" id="SystemInfoBattery">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoBattery"></a><h3>2.8. SystemInfoBattery</h3>
+<div class="brief">
+ This property reflects the general state of the system's battery
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoBattery : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double level;
+
+    readonly attribute boolean isCharging;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoBattery::level">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">level</span></span><div class="brief">
+ An attribute to specify the remaining level of an internal battery, scaled from <var>0 </var>to <var>1</var>:
+            </div>
+<div class="description">
+            <ul>
+              <li>
+<var>0 </var>indicates that the battery level is the lowest and the system is about to enter shutdown mode.              </li>
+              <li>
+<var>1 </var>indicates that the system's charge is maximum.              </li>
+            </ul>
+            <p>
+Any threshold parameter used in a watch operation to monitor this property applies to this attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoBattery::isCharging">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isCharging</span></span><div class="brief">
+ Indicates whether the battery source is currently charging.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoCpu">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoCpu"></a><h3>2.9. SystemInfoCpu</h3>
+<div class="brief">
+ This property reflects the state of the CPUs available to this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoCpu : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double load;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoCpu::load">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">load</span></span><div class="brief">
+  An attribute to indicate the current CPU load, as a number between <var>0.0 </var>and <var>1.0</var>, representing the minimum and maximum values allowed on this system.
+Any threshold parameter used in a watch function to monitor this property applies to this attribute.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoStorage">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoStorage"></a><h3>2.10. SystemInfoStorage</h3>
+<div class="brief">
+ This property exposes the data storage devices connected to this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoStorage : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a>[] units;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoStorage::units">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoStorageUnit[]
+                      </span><span class="name">units</span></span><div class="brief">
+ The array of storage units connected to this device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoStorageUnit">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoStorageUnit"></a><h3>2.11. SystemInfoStorageUnit</h3>
+<div class="brief">
+ This property exposes a single storage device connected to this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoStorageUnit : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString type;
+
+    readonly attribute unsigned long long capacity;
+
+    readonly attribute unsigned long long availableCapacity;
+
+    readonly attribute boolean isRemovable;
+
+    readonly attribute boolean isRemoveable;
+  };</pre>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoStorageUnit::type">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">type</span></span><div class="brief">
+ The type of a storage device. The value is one of the constants defined for this type.
+            </div>
+<div class="description">
+            <p>
+The supported storage unit types are:
+            </p>
+            <ul>
+              <li>
+UNKNOWN              </li>
+              <li>
+INTERNAL               </li>
+              <li>
+USB_DEVICE              </li>
+              <li>
+USB_HOST              </li>
+              <li>
+MMC              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::capacity">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">capacity</span></span><div class="brief">
+ The amount of data that this device can hold, in bytes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::availableCapacity">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long long </span><span class="name">availableCapacity</span></span><div class="brief">
+ The amount of available data that this device can hold, in bytes.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::isRemovable">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRemovable</span></span><div class="brief">
+ An attribute to indicate whether a device can be removed or not.
+            </div>
+<div class="description">
+            <p>
+The following values are supported:
+            </p>
+            <ul>
+              <li>
+<var>true </var> - If this storage unit can be removed from the system (such as an sdcard unplugged)              </li>
+              <li>
+<var>false</var> - If this storage unit cannot be removed from the system              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoStorageUnit::isRemoveable">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRemoveable</span></span><div class="brief">
+ true if this unit can be removed from the system (such as an sdcard unplugged), false otherwise.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ A typographic error.
+            </i></font></p></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoDisplay">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDisplay"></a><h3>2.12. SystemInfoDisplay</h3>
+<div class="brief">
+ This property reflects the information of the Display.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoDisplay : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute unsigned long resolutionWidth;
+
+    readonly attribute unsigned long resolutionHeight;
+
+    readonly attribute unsigned long dotsPerInchWidth;
+
+    readonly attribute unsigned long dotsPerInchHeight;
+
+    readonly attribute double physicalWidth;
+
+    readonly attribute double physicalHeight;
+
+    readonly attribute double brightness;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoDisplay::resolutionWidth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">resolutionWidth</span></span><div class="brief">
+ The total number of addressable pixels in the horizontal direction of a rectangular entity
+(such as Camera, Display, Image, Video, ...) when held in its default orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::resolutionHeight">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">resolutionHeight</span></span><div class="brief">
+ The total number of addressable pixels in the vertical direction of a rectangular element
+(such as Camera, Display, Image, Video, ...) when held in its default orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::dotsPerInchWidth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">dotsPerInchWidth</span></span><div class="brief">
+ Resolution of this device, along its width, in dots per inch.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::dotsPerInchHeight">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned long </span><span class="name">dotsPerInchHeight</span></span><div class="brief">
+ Resolution of this device, along its height, in dots per inch.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::physicalWidth">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">physicalWidth</span></span><div class="brief">
+ The display's physical width in millimeters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::physicalHeight">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">physicalHeight</span></span><div class="brief">
+ The display's physical height in millimeters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDisplay::brightness">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">brightness</span></span><div class="brief">
+ The current brightness of a display ranging between <var>0 </var>to <var>1</var>.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoDeviceOrientation">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoDeviceOrientation"></a><h3>2.13. SystemInfoDeviceOrientation</h3>
+<div class="brief">
+ This property reflects the information of the device orientation in this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoDeviceOrientation : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoDeviceOrientationStatus">SystemInfoDeviceOrientationStatus</a> status;
+
+    readonly attribute boolean isAutoRotation;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoDeviceOrientation::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoDeviceOrientationStatus </span><span class="name">status</span></span><div class="brief">
+ Represents the status of the current device orientation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoDeviceOrientation::isAutoRotation">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isAutoRotation</span></span><div class="brief">
+ whether the device is in autorotation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoBuild">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoBuild"></a><h3>2.14. SystemInfoBuild</h3>
+<div class="brief">
+ This property reflects the information of the current device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoBuild : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString model;
+
+    readonly attribute DOMString manufacturer;
+
+    readonly attribute DOMString buildVersion;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoBuild::model">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">model</span></span><div class="brief">
+ Represents the model name of the current device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoBuild::manufacturer">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">manufacturer</span></span><div class="brief">
+ Represents the manufacturer of the device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoBuild::buildVersion">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">buildVersion</span></span><div class="brief">
+ Represents the build version information of the device.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoLocale">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoLocale"></a><h3>2.15. SystemInfoLocale</h3>
+<div class="brief">
+ This property reflects the locale information of the current device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoLocale : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString language;
+
+    readonly attribute DOMString country;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoLocale::language">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">language</span></span><div class="brief">
+ Indicates the current language setting in the (LANGUAGE)_(REGION) syntax.
+The language setting is in the ISO 630-2 format and the region setting is in the ISO 3166-1 format.
+The language setting is case-sensitive.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoLocale::country">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">country</span></span><div class="brief">
+ Indicates the current country setting in the (LANGUAGE)_(REGION) syntax.
+The language setting is in the ISO 630-2 format and the region setting is in the ISO 3166-1 format.
+The country setting is case-sensitive.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoNetwork">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoNetwork"></a><h3>2.16. SystemInfoNetwork</h3>
+<div class="brief">
+ This property reflects the information of the data network in this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoNetworkType">SystemInfoNetworkType</a> networkType;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoNetwork::networkType">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoNetworkType </span><span class="name">networkType</span></span><div class="brief">
+ Represents the network type of the current data network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoWifiNetwork">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoWifiNetwork"></a><h3>2.17. SystemInfoWifiNetwork</h3>
+<div class="brief">
+ This property reflects the information of the Wi-Fi network in this system.
+          </div>
+<pre class="webidl prettyprint">   [NoInterfaceObject] interface SystemInfoWifiNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString ssid;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute DOMString macAddress;
+
+    readonly attribute double signalStrength;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoWifiNetwork::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">status</span></span><div class="brief">
+ Represents the status (ON or OFF) of the Wi-Fi interface.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::ssid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ssid</span></span><div class="brief">
+ Represents the SSID of the Wi-Fi network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::ipAddress">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipAddress</span></span><div class="brief">
+ Represents the IPv4 address of the Wi-Fi network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::ipv6Address">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipv6Address</span></span><div class="brief">
+ Represents the IPv6 address of the Wi-Fi network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::macAddress">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">macAddress</span></span><div class="brief">
+ Represents the MAC address of the Wi-Fi interface.
+            </div>
+<div class="description">
+            <p>
+It is written in MM:MM:MM:SS:SS:SS format.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li>
+<li class="attribute" id="SystemInfoWifiNetwork::signalStrength">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">double </span><span class="name">signalStrength</span></span><div class="brief">
+ This connection's signal strength, as a normalized value between 0 (no signal detected) and 1 (the level is at its maximum value).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoCellularNetwork">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoCellularNetwork"></a><h3>2.18. SystemInfoCellularNetwork</h3>
+<div class="brief">
+ This property reflects the information of the Cellular network in this system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoCellularNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString apn;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute unsigned short mcc;
+
+    readonly attribute unsigned short mnc;
+
+    readonly attribute unsigned short cellId;
+
+    readonly attribute unsigned short lac;
+
+    readonly attribute boolean isRoaming;
+
+    readonly attribute boolean isFlightMode;
+
+    readonly attribute DOMString imei raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoCellularNetwork::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">status</span></span><div class="brief">
+ Represents the status (ON or OFF) of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::apn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">apn</span></span><div class="brief">
+ Represents an Access Point Name of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::ipAddress">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipAddress</span></span><div class="brief">
+ Represents the IPv4 address of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::ipv6Address">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">ipv6Address</span></span><div class="brief">
+ Represents the IPv6 address of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::mcc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mcc</span></span><div class="brief">
+ Represents Mobile Country Code (MCC) of the cellular network.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::mnc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mnc</span></span><div class="brief">
+ Represents Mobile Network Code (MNC) of the cellular network. MNC is used in combination with MCC (also known as a "MCC / MNC tuple") to uniquely
+identify a mobile phone operator/carrier using the GSM, CDMA, iDEN, TETRA and UMTS public land mobile networks and some satellite mobile networks.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::cellId">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">cellId</span></span><div class="brief">
+ Represents Cell Id.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::lac">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">lac</span></span><div class="brief">
+ Represents Location Area Code.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::isRoaming">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isRoaming</span></span><div class="brief">
+ Whether the connection is set up while the device is roaming.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::isFlightMode">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isFlightMode</span></span><div class="brief">
+ Indicates whether the device is in flight mode.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li>
+<li class="attribute" id="SystemInfoCellularNetwork::imei">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">imei</span></span><div class="brief">
+ Represents the International Mobile Equipment Identity (IMEI).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/systemmanager
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoSIM">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoSIM"></a><h3>2.19. SystemInfoSIM</h3>
+<div class="brief">
+ This property reflects the information of the SIM card information.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoSIM : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoSimState">SystemInfoSimState</a> state raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString operatorName raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msisdn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString iccid raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mcc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mnc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msin raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString spn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SystemInfoSIM::state">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoSimState </span><span class="name">state</span></span><div class="brief">
+ Represents the SIM card state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::operatorName">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">operatorName</span></span><div class="brief">
+ Represents the Operator Name String (ONS) of Common PCN Handset Specification (CPHS) in SIM card.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::msisdn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">msisdn</span></span><div class="brief">
+ Represents the SIM card subscriber number.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/systemmanager
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::iccid">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">iccid</span></span><div class="brief">
+ Represents the Integrated Circuit Card ID.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::mcc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mcc</span></span><div class="brief">
+ Represents the Mobile Country Code (MCC) of SIM provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::mnc">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">mnc</span></span><div class="brief">
+ Represents the Mobile Network Code (MNC) of SIM provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::msin">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">msin</span></span><div class="brief">
+ Represents the Mobile Subscription Identification Number (MSIN) of SIM provider.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ partner
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/systemmanager
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+<li class="attribute" id="SystemInfoSIM::spn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">spn</span></span><div class="brief">
+ Represents the Service Provider Name (SPN) of SIM card.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/system
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type SecurityError, if this attribute is not allowed.
+                </p></li></ul>
+</li></ul>
+        </div>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoPeripheral">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoPeripheral"></a><h3>2.20. SystemInfoPeripheral</h3>
+<div class="brief">
+ This property reflects the peripheral information of the current device.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoPeripheral : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute boolean isVideoOutputOn;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.1
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoPeripheral::isVideoOutputOn">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">boolean </span><span class="name">isVideoOutputOn</span></span><div class="brief">
+ Represents the video out status.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.1
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="SystemInfoMemory">
+<a class="backward-compatibility-anchor" name="::SystemInfo::SystemInfoMemory"></a><h3>2.21. SystemInfoMemory</h3>
+<div class="brief">
+ This property represents information about the memory state on the device system.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemInfoMemory : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoLowMemoryStatus">SystemInfoLowMemoryStatus</a> status;
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.3
+          </p>
+        
+      <div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="SystemInfoMemory::status">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">SystemInfoLowMemoryStatus </span><span class="name">status</span></span><div class="brief">
+ Represents the low memory state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+</li></ul>
+</div>
+</div>
+</div>
+<h2 id="api-features">3. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+        You can check if this API is supported with <em>tizen.systeminfo.getCapability()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device which supports Wi-Fi, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.wifi</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device which supports telephony feature, declare the following feature requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/network.telephony</li>
+</div>
+<p></p>
+                    For more information, see <a href="../../../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Application Filtering</a>.
+</div>
+<h2 id="full-webidl">4. Full WebIDL</h2>
+<pre class="webidl prettyprint">module SystemInfo {
+
+  enum SystemInfoPropertyId { "BATTERY", "CPU", "STORAGE", "DISPLAY", "DEVICE_ORIENTATION", "BUILD", "LOCALE", "NETWORK", "WIFI_NETWORK", "CELLULAR_NETWORK", "SIM", "PERIPHERAL", "MEMORY" };
+
+  enum SystemInfoNetworkType { "NONE", "2G", "2.5G", "3G", "4G", "WIFI", "ETHERNET", "UNKNOWN" };
+
+  enum SystemInfoDeviceOrientationStatus { "PORTRAIT_PRIMARY", "PORTRAIT_SECONDARY", "LANDSCAPE_PRIMARY", "LANDSCAPE_SECONDARY" };
+
+  enum SystemInfoSimState { "ABSENT", "INITIALIZING", "READY", "PIN_REQUIRED", "PUK_REQUIRED", "NETWORK_LOCKED", "SIM_LOCKED", "UNKNOWN" };
+
+  enum SystemInfoProfile { "MOBILE_FULL", "MOBILE_WEB", "MOBILE", "WEARABLE" };
+
+  enum SystemInfoLowMemoryStatus { "NORMAL", "WARNING" };
+
+  [NoInterfaceObject] interface SystemInfoObject {
+    readonly attribute <a href="#SystemInfo">SystemInfo</a> systeminfo;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemInfoObject">SystemInfoObject</a>;
+
+  [NoInterfaceObject] interface SystemInfo {
+    long long getTotalMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long long getAvailableMemory() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#SystemInfoDeviceCapability">SystemInfoDeviceCapability</a> getCapabilities() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    any getCapability(DOMString key) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long getCount(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValue(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void getPropertyValueArray(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                          <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                          optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertySuccessCallback">SystemInfoPropertySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    unsigned long addPropertyValueArrayChangeListener(<a href="#SystemInfoPropertyId">SystemInfoPropertyId</a> property,
+                                        <a href="#SystemInfoPropertyArraySuccessCallback">SystemInfoPropertyArraySuccessCallback</a> successCallback,
+                                        optional <a href="#SystemInfoOptions">SystemInfoOptions</a>? options,
+                                        optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void removePropertyValueChangeListener(unsigned long listenerId) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface SystemInfoDeviceCapability {
+    readonly attribute boolean bluetooth;
+
+    readonly attribute boolean nfc;
+
+    readonly attribute boolean nfcReservedPush ;
+
+    readonly attribute unsigned short multiTouchCount;
+
+    readonly attribute boolean inputKeyboard;
+
+    readonly attribute boolean inputKeyboardLayout;
+
+    readonly attribute boolean wifi;
+
+    readonly attribute boolean wifiDirect;
+
+    readonly attribute boolean opengles;
+
+    readonly attribute DOMString openglestextureFormat;
+
+    readonly attribute boolean openglesVersion1_1;
+
+    readonly attribute boolean openglesVersion2_0;
+
+    readonly attribute boolean fmRadio;
+
+    readonly attribute DOMString platformVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString webApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString nativeApiVersion raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString platformName;
+
+    readonly attribute boolean camera;
+
+    readonly attribute boolean cameraFront;
+
+    readonly attribute boolean cameraFrontFlash;
+
+    readonly attribute boolean cameraBack;
+
+    readonly attribute boolean cameraBackFlash;
+
+    readonly attribute boolean location;
+
+    readonly attribute boolean locationGps;
+
+    readonly attribute boolean locationWps;
+
+    readonly attribute boolean microphone;
+
+    readonly attribute boolean usbHost;
+
+    readonly attribute boolean usbAccessory;
+
+    readonly attribute boolean screenOutputRca;
+
+    readonly attribute boolean screenOutputHdmi;
+
+    readonly attribute DOMString platformCoreCpuArch;
+
+    readonly attribute DOMString platformCoreFpuArch;
+
+    readonly attribute boolean sipVoip;
+
+    readonly attribute DOMString duid;
+
+    readonly attribute boolean speechRecognition;
+
+    readonly attribute boolean speechSynthesis;
+
+    readonly attribute boolean accelerometer;
+
+    readonly attribute boolean accelerometerWakeup;
+
+    readonly attribute boolean barometer;
+
+    readonly attribute boolean barometerWakeup;
+
+    readonly attribute boolean gyroscope;
+
+    readonly attribute boolean gyroscopeWakeup;
+
+    readonly attribute boolean magnetometer;
+
+    readonly attribute boolean magnetometerWakeup;
+
+    readonly attribute boolean photometer;
+
+    readonly attribute boolean photometerWakeup;
+
+    readonly attribute boolean proximity;
+
+    readonly attribute boolean proximityWakeup;
+
+    readonly attribute boolean tiltmeter;
+
+    readonly attribute boolean tiltmeterWakeup;
+
+    readonly attribute boolean dataEncryption;
+
+    readonly attribute boolean graphicsAcceleration;
+
+    readonly attribute boolean push;
+
+    readonly attribute boolean telephony;
+
+    readonly attribute boolean telephonyMms;
+
+    readonly attribute boolean telephonySms;
+
+    readonly attribute boolean screenSizeNormal;
+
+    readonly attribute boolean screenSize480_800;
+
+    readonly attribute boolean screenSize720_1280;
+
+    readonly attribute boolean autoRotation;
+
+    readonly attribute boolean shellAppWidget;
+
+    readonly attribute boolean visionImageRecognition;
+
+    readonly attribute boolean visionQrcodeGeneration;
+
+    readonly attribute boolean visionQrcodeRecognition;
+
+    readonly attribute boolean visionFaceRecognition;
+
+    readonly attribute boolean secureElement;
+
+    readonly attribute boolean nativeOspCompatible;
+
+    readonly attribute <a href="#SystemInfoProfile">SystemInfoProfile</a> profile;
+  };
+
+  dictionary SystemInfoOptions {
+    unsigned long timeout;
+
+    double highThreshold;
+
+    double lowThreshold;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a> property);
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SystemInfoPropertyArraySuccessCallback {
+    void onsuccess(<a href="#SystemInfoProperty">SystemInfoProperty</a>[] properties);
+  };
+
+  [NoInterfaceObject] interface SystemInfoProperty {
+  };
+
+  [NoInterfaceObject] interface SystemInfoBattery : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double level;
+
+    readonly attribute boolean isCharging;
+  };
+
+  [NoInterfaceObject] interface SystemInfoCpu : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute double load;
+  };
+
+  [NoInterfaceObject] interface SystemInfoStorage : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoStorageUnit">SystemInfoStorageUnit</a>[] units;
+  };
+
+  [NoInterfaceObject] interface SystemInfoStorageUnit : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString type;
+
+    readonly attribute unsigned long long capacity;
+
+    readonly attribute unsigned long long availableCapacity;
+
+    readonly attribute boolean isRemovable;
+
+    readonly attribute boolean isRemoveable;
+  };
+
+  [NoInterfaceObject] interface SystemInfoDisplay : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute unsigned long resolutionWidth;
+
+    readonly attribute unsigned long resolutionHeight;
+
+    readonly attribute unsigned long dotsPerInchWidth;
+
+    readonly attribute unsigned long dotsPerInchHeight;
+
+    readonly attribute double physicalWidth;
+
+    readonly attribute double physicalHeight;
+
+    readonly attribute double brightness;
+  };
+
+  [NoInterfaceObject] interface SystemInfoDeviceOrientation : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoDeviceOrientationStatus">SystemInfoDeviceOrientationStatus</a> status;
+
+    readonly attribute boolean isAutoRotation;
+  };
+
+  [NoInterfaceObject] interface SystemInfoBuild : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString model;
+
+    readonly attribute DOMString manufacturer;
+
+    readonly attribute DOMString buildVersion;
+  };
+
+  [NoInterfaceObject] interface SystemInfoLocale : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString language;
+
+    readonly attribute DOMString country;
+  };
+
+  [NoInterfaceObject] interface SystemInfoNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoNetworkType">SystemInfoNetworkType</a> networkType;
+  };
+
+   [NoInterfaceObject] interface SystemInfoWifiNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString ssid;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute DOMString macAddress;
+
+    readonly attribute double signalStrength;
+  };
+
+  [NoInterfaceObject] interface SystemInfoCellularNetwork : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+
+    readonly attribute DOMString status;
+
+    readonly attribute DOMString apn;
+
+    readonly attribute DOMString ipAddress;
+
+    readonly attribute DOMString ipv6Address;
+
+    readonly attribute unsigned short mcc;
+
+    readonly attribute unsigned short mnc;
+
+    readonly attribute unsigned short cellId;
+
+    readonly attribute unsigned short lac;
+
+    readonly attribute boolean isRoaming;
+
+    readonly attribute boolean isFlightMode;
+
+    readonly attribute DOMString imei raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface SystemInfoSIM : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoSimState">SystemInfoSimState</a> state raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString operatorName raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msisdn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString iccid raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mcc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute unsigned short mnc raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString msin raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    readonly attribute DOMString spn raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject] interface SystemInfoPeripheral : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute boolean isVideoOutputOn;
+  };
+
+  [NoInterfaceObject] interface SystemInfoMemory : <a href="#SystemInfoProperty">SystemInfoProperty</a> {
+    readonly attribute <a href="#SystemInfoLowMemoryStatus">SystemInfoLowMemoryStatus</a> status;
+
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html
new file mode 100644 (file)
index 0000000..1b96ba7
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html
@@ -0,0 +1,1756 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<script type="text/javascript" src="snippet.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link href="styles-systeminfo.css" rel="StyleSheet" type="text/css">
+<link href="tizen.css" rel="StyleSheet" type="text/css">
+<title>System Information</title>
+<style>
+  table { width: auto }
+  table td:nth-child(1) { min-width: 32em; }
+  table td:nth-child(2) { min-width: 4em; }
+  table td:nth-child(3) { width: 40em; }
+  table td:nth-child(4) { min-width: 2em; }
+</style>
+</head>
+<body onload="prettyPrint()">
+  <!--<div id="banner">
+Tizen</div>-->
+  <h1>Getting the Device Capabilities through System Information API</h1>
+  <p>The following keys are available to obtain the device capability information using  <a href="./systeminfo.html">SystemInfo API</a>.</p>
+  <ul>
+
+<li>Device Capability keys for Optional APIs:
+  <ul>
+  <li><a href="#account">Account API</a></li>
+  <li><a href="#archive">Archive API</a></li>
+  <li><a href="#badge">Badge API</a></li>
+  <li><a href="#network">Bluetooth API</a></li>
+  <li><a href="#bookmark">Bookmark API</a></li>
+  <li><a href="#calendar">Calendar API</a></li>
+  <li><a href="#network">CallHistory API</a></li>
+  <li><a href="#contact">Contact API</a></li>
+  <li><a href="#datacontrol">DataControl API</a></li>
+  <li><a href="#datasync">DataSynchronization API</a></li>
+  <li><a href="#download">Download API</a></li>
+  <li><a href="#exif">Exif API</a></li>
+  <li><a href="#fmradio">FM Radio API</a></li>
+  <li><a href="#ham">HumanActivityMonitor API</a></li>
+  <li><a href="#sensor">HumanActivityMonitor API - PEDOMETER, WRIST_UP, HRM</a></li>
+  <li><a href="#location">HumanActivityMonitor API - GPS</a></li>
+  <li><a href="#mediakey">MediaKey API</a></li>
+  <li><a href="#messaging">Messaging Email API</a></li>
+  <li><a href="#messaging">Messaging SMS API</a></li>
+  <li><a href="#messaging">Messaging MMS API</a></li>
+  <li><a href="#network">NFC API</a></li>
+  <li><a href="#network">NFC Card Emulation API</a></li>
+  <li><a href="#network">NetworkBearerSelection API</a></li>
+  <li><a href="#notification">Notification API</a></li>
+  <li><a href="#battery">Power API</a></li>
+  <li><a href="#network">Push API</a></li>
+  <li><a href="#network">Secure Element API</a></li>
+  <li><a href="#sensor">Sensor API</a></li>
+  <li><a href="#systemsetting">SystemSetting API</a></li>
+  <li><a href="#websetting">WebSetting API</a></li>
+  </ul>
+</li>
+
+<li>Device Capability keys:
+  <ul>
+  <li><a href="#battery">Battery</a></li>
+  <li><a href="#camera">Camera</a></li>
+  <li><a href="#database">Database</a></li>
+  <li><a href="#graphics">Graphics</a></li>
+  <li><a href="#input">Input</a></li>
+  <li><a href="#led">Led</a></li>
+  <li><a href="#location">Location</a></li>
+  <li><a href="#mediatranscoder">Multimedia transcoder</a></li>
+  <li><a href="#microphone">Microphone</a></li>
+  <li><a href="#multipoint">Multi-point touch</a></li>
+  <li><a href="#network">Network</a></li>
+  <li><a href="#opengl">OpenGL&reg; ES</a></li>
+  <li><a href="#platformfeat">Platform</a></li>
+  <li><a href="#profile">Profile</a></li>
+  <li><a href="#screen">Screen</a></li>
+  <li><a href="#shell">Shell (Dynamic Box)</a></li>
+  <li><a href="#sip">Sip</a></li>
+  <li><a href="#speech">Speech</a></li>
+  <li><a href="#usb">USB</a></li>
+  <li><a href="#webservice">Web service</a></li>
+  </ul>
+</li>
+
+<li>System keys:
+  <ul>
+  <li><a href="#buildinfo">Build Information</a></li>
+  <li><a href="#tizenid">Tizen ID</a></li>
+  <li><a href="#modelname">Model name</a></li>
+  <li><a href="#platformsys">Platform name</a></li>
+  </ul>
+</li>
+
+<p>The following table lists the keys to check if Account API is supported on a Tizen device.</p>
+ <table id="account" border="1" style="width:95%">
+<caption>
+     Table: Account API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/account</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="account.html">Account API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the keys to check if Archive API is supported on a Tizen device.</p>
+ <table id="archive" border="1" style="width:95%">
+<caption>
+     Table: Archive API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/archive</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="archive.html">Archive API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Badge API is supported on a Tizen device.</p>
+ <table id="badge" border="1" style="width:95%">
+<caption>
+     Table: Badge API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/badge</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="badge.html">Badge API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Bookmark API is supported on a Tizen device.</p>
+ <table id="bookmark" border="1" style="width:95%">
+<caption>
+     Table: Bookmark API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/bookmark</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="bookmark.html">Bookmark API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Calendar API is supported on a Tizen device.</p>
+ <table id="calendar" border="1" style="width:95%">
+<caption>
+     Table: Calendar API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/calendar</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="calendar.html">Calendar API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the keys to check if Contact API is supported on a Tizen device.</p>
+ <table id="contact" border="1" style="width:95%">
+<caption>
+     Table: Contact API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/contact</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="contact.html">Contact API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the keys to check if DataControl API is supported on a Tizen device.</p>
+ <table id="datacontrol" border="1" style="width:95%">
+<caption>
+     Table: DataControl API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datacontrol</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="datacontrol.html">DataControl API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if DataSync API is supported on a Tizen device.</p>
+ <table id="datasync" border="1" style="width:95%">
+<caption>
+     Table: DataSynchronization API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="datasync.html">DataSynchronization API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Download API is supported on a Tizen device.</p>
+ <table id="download" border="1" style="width:95%">
+<caption>
+     Table: Download API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="download.html">Download API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require telephony feature. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-weight: bold; font-style: italic;">"CELLULAR"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="download.html#DownloadNetworkType">DownloadNetworkType</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Wi-Fi. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-weight: bold; font-style: italic;">"WIFI"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="download.html#DownloadNetworkType">DownloadNetworkType</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Exif API is supported on a Tizen device.</p>
+ <table id="exif" border="1" style="width:95%">
+<caption>
+     Table: Exif API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/exif</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="exif.html">Exif API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the keys to check if SystemSetting API is supported on a Tizen device.</p>
+ <table id="systemsetting" border="1" style="width:95%">
+<caption>
+     Table: SystemSetting API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html">SystemSetting API</a></span>.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.home_screen</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get the picture on home screen. That means that <span style="font-weight: bold; font-style: italic;">"HOME_SCREEN"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.lock_screen</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get lock screen wallpaper. That means that <span style="font-weight: bold; font-style: italic;">"LOCK_SCREEN"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.incoming_call</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get a ringtone for all incoming calls. That means that <span style="font-weight: bold; font-style: italic;">"INCOMING_CALL"</span> type in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting.notification_email</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/systemsetting</span>, if the device supports a way to change/get a ringtone for all email notifications. That means that <span style="font-weight: bold; font-style: italic;">"NOTIFICATION_EMAIL"</span> in <span style="font-family: Courier New,Courier,monospace"><a href="systemsetting.html#SystemSettingType">SystemSettingType</a></span> is supported.</td>
+    <td>2.3</td>
+</tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if WebSetting API is supported on a Tizen device.</p>
+ <table id="websetting" border="1" style="width:95%">
+<caption>
+     Table: WebSetting API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/websetting</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="websetting.html">WebSetting API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if MediaKey API is supported on a Tizen device.</p>
+ <table id="mediakey" border="1" style="width:95%">
+<caption>
+     Table: MediaKey API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="mediakey.html">MediaKey API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Messaging API is supported on a Tizen device.</p>
+ <table id="messaging" border="1" style="width:95%">
+<caption>
+     Table: Messaging API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/email</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Messaging Email API.</td>
+     <td>2.3</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Messaging SMS API.</td>
+     <td>2.2.1</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Messaging MMS API.</td>
+     <td>2.2.1</td>
+    </tr>
+
+</tbody>
+</table>
+
+
+<p>The following table lists the keys to check if Notification API is supported on a Tizen device.</p>
+ <table id="notification" border="1" style="width:95%">
+<caption>
+     Table: Notification API key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/notification</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="notification.html">Notification API</a></span>.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the keys to check if a device has a battery.</p>
+ <table id="battery" border="1" style="width:95%">
+<caption>
+     Table: battery capability key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/battery</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device has a battery. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/?cp=2_6_3_1_2">W3C Battery Status API</a></span>, <span style="font-family: Courier New,Courier,monospace"><a href="systeminfo.html#SystemInfoBattery">BATTERY</a></span> property in SystemInfo API, and <span style="font-family: Courier New,Courier,monospace"><a href="power.html">Power API</a></span> must be supported.</td>
+    <td>2.3</td>
+</tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the camera feature keys.</p>
+<table id="camera" border="1" style="width:95%">
+<caption>
+     Table: Camera feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides any kind of a camera. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <a href="../../../w3c_api/w3c_api_m.html#getusermedia">W3C getUserMedia</a> and <a href="../../../w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> APIs are supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a back-facing camera.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span> key, if the device provides a back-facing camera with a flash.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span> key, if the device provides a front-facing camera.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span> key, if the device provides a front-facing camera with a flash.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the database feature keys.</p>
+  <table id="database" border="1" style="width:95%">
+<caption>
+     Table: Database feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/database.encryption</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports database encryption.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the FM radio feature keys.</p>
+ <table id="fmradio" border="1" style="width:95%">
+<caption>
+     Table: FM radio feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports an FM radio. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="./fmradio.html">FM Radio API</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the Human Activity Monitor feature keys.</p>
+ <table id="ham" border="1" style="width:95%">
+<caption>
+     Table: Human Activity Monitor keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any of the Human Activity Monitor sensors (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor, http://tizen.org/feature/sensor.pedometer, http://tizen.org/feature/sensor.wrist_up, http://tizen.org/feature/location.batch</span>). If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html">Human Activity Monitor API</a></span> is supported.</td>
+     <td>2.3.0</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the graphics feature keys.</p>
+   <table id="graphics" border="1" style="width:95%">
+<caption>
+     Table: Graphics feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports graphics hardware acceleration.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the led feature key.</p>
+   <table id="led" border="1" style="width:95%">
+<caption>
+     Table: led feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports led.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the input feature keys.</p>
+  <table id="input" border="1" style="width:95%">
+<caption>
+     Table: Input feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device  provides a built-in keyboard supporting any keyboard layout.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the keyboard layout (such as <span style="font-family: Courier New,Courier,monospace">qwerty</span>) supported by the built-in keyboard for this key and returns <span style="font-family: Courier New,Courier,monospace">true</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.
+        <p>If the device does not provide a built-in keyboard, the platform returns an empty string for this key and returns <span style="font-family: Courier New,Courier,monospace">false</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the location feature keys.</p>
+<table id="location" border="1" style="width:95%">
+<caption>
+     Table: Location feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports location positioning.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">
+         http://tizen.org/feature/location</span> key, if the device supports GPS batch feature.
+         If it is <span style="font-family: Courier New,Courier,monospace">true</span>,
+         <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - GPS</a> API is supported.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>,
+         if the device supports the Global Positioning System(GPS). If it is <span style="font-family: Courier New,Courier,monospace">true</span>,
+         <a href="../../../w3c_api/w3c_api_m.html#geo">W3C GeoLocation</a> API is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports  the Wi-Fi-based Positioning System (WPS).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the multimedia transcoder feature key.</p>
+   <table id="mediatranscoder" border="1" style="width:95%">
+<caption>
+     Table: multimedia transcoder feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports multimedia transcoder.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the microphone feature keys.</p>
+<table id="microphone" border="1" style="width:95%">
+<caption>
+     Table: Microphone feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a microphone.
+     If it is <span style="font-family: Courier New,Courier,monospace">true</span>,
+     <a href="../../../w3c_api/w3c_api_m.html#getusermedia">W3C getUserMedia</a> and <a href="../../../w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> APIs are supported.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the multi-point touch feature keys.</p>
+  <table id="multipoint" border="1" style="width:95%">
+<caption>
+     Table: Multi-point touch feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports pinch zoom gestures.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></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>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<p>The following table lists the network feature keys.</p>
+  <table id="network" border="1" style="width:95%">
+<caption>
+     Table: Network feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/capability/network.bluetooth.always_on</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device must always enable Bluetooth. It means that an application cannot change the Bluetooth's state (visibility, connectivity, device name).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="./bluetooth.html">Bluetooth API</a></span> which requires Bluetooth.</td>
+    <td>2.2.1</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Handsfree Profile (HFP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Advanced Audio Distribute Profile (A2DP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Health Device Profile (HDP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Human Input Device (HID).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Low Energy related methods in Bluetooth API.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Bluetooth Object Push Profile (OPP).</td>
+    <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="./nfc.html">NFC API</a></span> which requires Near Field Communication (NFC).</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device is recognized by the NFC card readers.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the http://tizen.org/feature/network.nfc key, if the device supports the NFC reserved push feature.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="./push.html">Push API</a></span> which requires the IP push service provided by
+the Tizen reference implementation.</td>
+    <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports secure elements. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="./se.html">Secure Element API</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports  the telephony related APIs (<span style="font-family: Courier New,Courier,monospace"><a href="./callhistory.html">CallHistory</a></span>, <span style="font-family: Courier New,Courier,monospace"><a href="messaging.html#MessageServiceTag">Messaging SMS</a></span>, <span style="font-family: Courier New,Courier,monospace"><a href="./networkbearerselection.html">NetworkBearerSelection</a></span> APIs).</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports MMS. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="messaging.html#MessageServiceTag">Messaging MMS</a></span> is supported.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports all APIs which require Wi-Fi.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span> key, if the device supports Wi-Fi Direct&trade;.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the OpenGL&reg; ES feature keys.</p>
+<table id="opengl" border="1" style="width:95%">
+<caption>
+     Table: OpenGL&reg; ES feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports any OpenGL&reg; ES version and any texture format.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The supported texture formats for the OpenGL&reg; ES. (e.g. "3dc/atc/etc/ptc").<br>
+         The platform returns an empty string for this key if OpenGL&reg; ES or compressed texture formats are not supported.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the 3DC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ATC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the ETC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PTC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the PVRTC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the UTC texture format for OpenGL&reg; ES.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL&reg; ES version 1.1.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles</span> key, if the device supports the OpenGL&reg; ES version 2.0.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the platform feature keys.</p>
+  <table id="platformfeat" border="1" style="width:95%">
+<caption>
+     Table: Platform feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the Tizen Core API in the [Major].[Minor] format. For example, "1.0" represents a web api version where the major version is 1 and the minor version is 0.
+     If a device doesn't provide Tizen Core API, it returns an empty string("").</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the CPU architecture (e.g. "armv7", "x86") of a device. </td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv6</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv6 CPU architecture. </td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the ARMv7 CPU architecture. </td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the x86 CPU architecture. </td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.frequency</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the frequency at which a core CPU is running. (unit: MHz)</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the FPU architecture (e.g. "vfpv3", "ssse3" of a device.) If there is no FPU on a device, it returns an empty string("").</td>
+     <td>2.3</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE2 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSE3 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the SSSE3 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv2</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV2 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device runs on the VFPV3 FPU architecture.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the Native API in the [Major].[Minor] format. For example, 1.0 represents a native api version where the major version is 1 and the minor version is 0.
+     If a device doesn't provide Tizen Native API, it returns an empty string("").</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.native.osp_compatible</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the bada compatibility mode.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the platform in the [Major].[Minor].[Patch Version] format.
+     For example, 1.0.0 represents a platform version where the major version is 1 and the minor and build versions are 0.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.web.api.version</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The version of the Web API in the [Major].[Minor] format. For example, 1.0 represents a web api version where the major version is 1 and the minor version is 0.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.version.name</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform return the platform version name. (e.g. Tizen 2.0: magnolia, Tizen 2.1: Nectarine)</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the profile feature keys.</p>
+<table id="profile" border="1" style="width:95%">
+<caption>
+     Table: Profile feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/profile</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">SystemInfoProfile</span></td>
+     <td>The platform returns a compliant device profile (such as <span style="font-family: Courier New,Courier,monospace">"MOBILE", "WEARABLE"</span>) for this key.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+<p>The following table lists the screen feature keys.</p>
+<table id="screen" border="1" style="width:95%">
+<caption>
+     Table: Screen feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+    <th style="width:7%">Type</th>
+    <th>Description</th>
+    <th style="width:7%">Version</th>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device has a display screen.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports screen auto-rotation.</td>
+    <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.bpp</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></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>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.large</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size for the coordinate system.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.coordinate_system.size.normal</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the normal screen size for the coordinate system.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.dpi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the number of dots per inch supported by the device for this key.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.height</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.hdmi</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports HDMI output.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.output.rca</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports RCA output.</td>
+     <td>2.2.1</td>
+    </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> if the device supports any of screen sizes and resolutions. (If the device has a display screen, it returns <span style="font-family: Courier New,Courier,monospace">true</span>.)</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.large</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> if the device supports the large screen size.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> the device supports the normal screen size.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 240 x 400 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 320 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 320 x 480 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 360 x 480 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 480 x 800 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 540 x 960 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 600 x 1024 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 720 x 1280 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the 1080 x 1920 resolution for the normal screen size.
+<p>The platform can return <span style="font-family: Courier New,Courier,monospace">true</span> for multiple resolution keys.</p>
+</td>
+     <td>2.2.1</td>
+</tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.width</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">long</span></td>
+     <td>The platform returns the width of the screen in pixels supported by the device for this key.</td>
+     <td>2.2.1</td>
+</tr>
+</tbody>
+</table>
+<p>The following table lists the sensor feature keys.</p>
+<table id="sensor" border="1" style="width:95%">
+<caption>
+     Table: Sensor feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+</tr>
+<tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the acceleration sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span> key, if the device supports the wake-up operation by the acceleration sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the activity recognition.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the barometer (Pressure) sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Pressure Sensor API</a></span> is supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span> key, if the device supports the wake-up operation by the barometer sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gesture recognition.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gravity sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the gyro sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span> key, if the device supports the wake-up operation by the gyro sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - HRM</a></span>.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the humidity sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the linear acceleration sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the magnetic sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Magnetic Sensor API</a></span> and <a href="../../../w3c_api/w3c_api_m.html#sceenori">W3C Screen Orientation</a> are supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span> key, if the device supports the wake-up operation by the magnetic sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - PEDOMETER</a></span>.</td>
+    <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the photometer sensor.  If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Light Sensor API</a></span> is supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span> key, if the device supports the wake-up operation by the photo sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the proximity sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">Proximity Sensor API</a></span> is supported.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span> key, if the device supports the wake-up operation by the proximity sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotation vector sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the temperature sensor.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the tilt sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span> key, if the device supports the wake-up operation by the tilt sensor.</td>
+     <td>2.2.1</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key if the device supports ultraviolet sensor. If it is <span style="font-family: Courier New,Courier,monospace">true</span>, <span style="font-family: Courier New,Courier,monospace"><a href="sensor.html#SensorType">UV Sensor API</a></span> is supported.</td>
+     <td>2.3</td>
+</tr>
+<tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+    <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+    <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key if the device supports <span style="font-family: Courier New,Courier,monospace"><a href="humanactivitymonitor.html#HumanActivityType">HumanActivityMonitor API - WRIST_UP</a></span>.</td>
+    <td>2.3</td>
+</tr>
+
+
+</tbody>
+</table>
+<p>The following table lists the shell(Dynamic Box) feature keys.</p>
+<table id="shell" border="1" style="width:95%">
+<caption>
+     Table: Shell(Dynamic Box) feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the AppWidget (Dynamic Box).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the sip feature keys.</p>
+  <table id="sip" border="1" style="width:95%">
+<caption>
+     Table: Sip feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the Voice over Internet Protocol (VoIP).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the speech feature keys.</p>
+   <table id="speech" border="1" style="width:95%">
+<caption>
+     Table: Speech feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech recognition (STT).</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports speech synthesis (TTS).</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the USB feature keys.</p>
+     <table id="usb" border="1" style="width:95%">
+<caption>
+     Table: USB feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory </span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB client or accessory mode.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the USB host mode.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the web service model feature keys.</p>
+     <table id="webservice" border="1" style="width:95%">
+<caption>
+     Table: Web Service feature keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.service</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the web service model.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the vision feature keys.</p>
+       <table id="vision" border="1" style="width:95%">
+<caption>
+     Table: Vision feature keys
+   </caption>
+<tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports face recognition.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports image recognition.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code generation.</td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">boolean</span></td>
+     <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports QR code recognition.</td>
+     <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the build information key.</p>
+  <table id="buildinfo" border="1" style="width:95%">
+<caption>
+     Table: build information system key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.date</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the build date.(the format : YYYY.MM.DD)</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.string</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the build string including build date and time.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/build.time</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the build time. (the format : HH.MM.SS)</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/manufacturer</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the device manufacturer's name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+<p>The following table lists the Tizen ID system key.</p>
+  <table id="tizenid" border="1" style="width:95%">
+<caption>
+     Table: Tizen ID system keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/tizenid</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the Tizen ID. It is a randomly generated value based on the model name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the model name key.</p>
+  <table id="modelname" border="1" style="width:95%">
+<caption>
+     Table: model name key
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/model_name</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the model name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+<p>The following table lists the platform system keys.</p>
+  <table id="platformsys" border="1" style="width:95%">
+<caption>
+     Table: platform system keys
+   </caption>
+   <tbody>
+<tr>
+<th style="width:27%">Key</th>
+     <th style="width:7%">Type</th>
+     <th>Description</th>
+     <th style="width:7%">Version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.communication_processor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the device communication processor name.</td>
+     <td>2.3</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.name</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the platform name. It must be <q>Tizen</q></td>
+     <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/system/platform.processor</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">DOMString</span></td>
+     <td>The platform returns the device processor name.</td>
+     <td>2.3</td>
+    </tr>
+</tbody>
+</table>
+
+
+
+<div id="footer">
+   <hr size="1">
+<font size="1">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>.</font>
+  </div>
+  <!--start-->
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->
+</body>
+</html>
+
+
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html
new file mode 100644 (file)
index 0000000..07dae8c
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>SystemSetting API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::SystemSetting">
+<div class="supported-platforms"><img class="wearable-optional emulator" title="Mandatory, Supported by Tizen Wearable emulator - Emulator supports only HOME_SCREEN, INCOMING_CALL" src="ww_icon.png"></div>
+<div class="title"><h1>SystemSetting API</h1></div>
+<div class="brief">
+ The SystemSetting API provides interfaces and methods providing web applications with access to various values of the system.
+        </div>
+<div class="description">
+        <p>
+This API provides an interface and methods through features such as:
+        </p>
+        <ul>
+          <li>
+ HOME_SCREEN          </li>
+          <li>
+ LOCK_SCREEN          </li>
+          <li>
+ INCOMING_CALL          </li>
+          <li>
+ NOTIFICATION_EMAIL          </li>
+        </ul>
+        <p>
+SystemSetting API may not be provided in some devices.
+The API capability can be checked by tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting"</em>).
+        </p>
+        <p>
+In addition, not all the above properties may be available even though a device supports SystemSetting API. For instance, a watch device may provide the home screen image but may not support the lock screen wallpaper. <br><br>To check if <var>SystemSettingType</var>(e.g. HOME_SCREEN, LOCK_SCREEN and so on) is supported or not, use SystemInformation API.
+        </p>
+        <ul>
+          <li>
+ HOME_SCREEN        - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.home_screen"</em>)          </li>
+          <li>
+ LOCK_SCREEN        - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.lock_screen"</em>)          </li>
+          <li>
+ INCOMING_CALL      - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.incoming_call"</em>)          </li>
+          <li>
+ NOTIFICATION_EMAIL - tizen.systeminfo.getCapability(<em>"http://tizen.org/feature/systemsetting.notification_email"</em>)          </li>
+        </ul>
+        <p>
+For more information on the SystemSetting features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/system_setting_w.htm">System Setting Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#SystemSettingType">SystemSettingType</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#SystemSettingObject">SystemSettingObject</a>
+</li>
+<li>2.2. <a href="#SystemSettingManager">SystemSettingManager</a>
+</li>
+<li>2.3. <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#SystemSettingObject">SystemSettingObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SystemSettingManager">SystemSettingManager</a></td>
+<td>void <a href="#SystemSettingManager::setProperty">setProperty</a> (<a href="#SystemSettingType">SystemSettingType</a> type, DOMString value, <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)<br>
+    void <a href="#SystemSettingManager::getProperty">getProperty</a> (<a href="#SystemSettingType">SystemSettingType</a> type, <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a></td>
+<td>void <a href="#SystemSettingSuccessCallback::onsuccess">onsuccess</a> (DOMString value)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="SystemSettingType">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingType"></a><h3>1.1. SystemSettingType</h3>
+<div class="brief">
+ Specifies the type of supported system setting.
+          </div>
+<pre class="webidl prettyprint">  enum SystemSettingType {"HOME_SCREEN", "LOCK_SCREEN", "INCOMING_CALL", "NOTIFICATION_EMAIL"};</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported in this release:
+          </p>
+          <ul>
+            <li>
+HOME_SCREEN - For homescreen background image.            </li>
+            <li>
+LOCK_SCREEN - For lockscreen background image.            </li>
+            <li>
+INCOMING_CALL - For incoming call ringtone.            </li>
+            <li>
+NOTIFICATION_EMAIL - For email notification alert tone.            </li>
+          </ul>
+          <p>
+Defines supporting setting types.
+The HOME_SCREEN and LOCK_SCREEN are supported for images files.
+The INCOMING_CALL and NOTIFICATION_EMAIL are supported for sound files.
+          </p>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="SystemSettingObject">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingObject"></a><h3>2.1. SystemSettingObject</h3>
+<div class="brief">
+ The SystemSettingObject interface defines what is instantiated by the <em>Tizen </em>object from the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemSettingObject {
+    readonly attribute <a href="#SystemSettingManager">SystemSettingManager</a> systemsetting;
+  };</pre>
+<pre class="webidl prettyprint">    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemSettingObject">SystemSettingObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.systemsetting </em>object that allows accessing the functionality of the SystemSetting API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="SystemSettingManager">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingManager"></a><h3>2.2. SystemSettingManager</h3>
+<div class="brief">
+ The SystemSettingManager interface is the top-level interface for the SystemSetting API that provides
+access to the module functionalities.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface SystemSettingManager {
+
+     void setProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              DOMString value,
+              <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+     void getProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemSettingManager::setProperty">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingManager::setProperty"></a><code><b><span class="methodName">setProperty</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the property of a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setProperty(<a href="#SystemSettingType">SystemSettingType</a> type, DOMString value, <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method allows the user to set the image or sound file specified as an input parameter as the wallpaper or ringtone of a device.
+            </p>
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value              </li>
+              <li>
+NotSupportedError - If the given <var>type</var> is not supported on the device               </li>
+              <li>
+UnknownError - If any other error occurs              </li>
+            </ul>
+           </div>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+      http://tizen.org/privilege/setting
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+            Setting type to set
+                </li>
+          <li class="param">
+<span class="name">value</span>: 
+           Location path of a wallpaper or ringtone file
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the setting value is successfully set
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the setting value cannot be set
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type SecurityError, if this functionality is not allowed.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Checks whether SystemSetting API is supported.
+ var systemsetting_api_supported = tizen.systeminfo.getCapability("http://tizen.org/feature/systemsetting");
+
+ // Checks whether the picture on home screen can be changed or retrieved through SystemSetting API.
+ var home_screen_system_setting = tizen.systeminfo.getCapability("http://tizen.org/feature/systemsetting.home_screen");
+
+ // Defines the success callback.
+ function successCallback() {
+     console.log("Succeeded in changing the property");
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+   console.log("Failed to change the property. Error : " + error.message);
+ }
+
+ if (systemsetting_api_supported === true) {
+     // tizen.systemsetting will be available.
+     if (home_screen_system_setting === true) {
+         // Sets the home screen image.
+         // The newHomeScreenImagePath variable should hold the path of the image to be set as home screen background
+         tizen.systemsetting.setProperty("HOME_SCREEN", newHomeScreenImagePath, successCallback, errorCallback);
+     } else {
+         // if tizen.systemsetting.setProperty("HOME_SCREEN", ..) is invoked, NotSupportedError would be returned through ErrorCallback.
+     }
+ } else {
+     // tizen.systemsetting will be 'undefined'.
+     console.log("SystemSetting API is not supported on the device.");
+ }
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="SystemSettingManager::getProperty">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingManager::getProperty"></a><code><b><span class="methodName">getProperty</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the value of the property of a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void getProperty(<a href="#SystemSettingType">SystemSettingType</a> type, <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback, optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="description">
+            <p>
+This method allows the user to get the value of the specified system property as wallpaper or ringtone of a device.
+            </p>
+           </div>
+<div class="description">
+            <p>
+The <em>ErrorCallback</em> method is launched with these error types:
+            </p>
+            <ul>
+              <li>
+TypeMismatchError - If any input parameter is not compatible with the expected type for that parameter               </li>
+              <li>
+InvalidValuesError - If any of the input parameters contain an invalid value               </li>
+              <li>
+NotSupportedError - If the given <var>type</var> is not supported on the device               </li>
+              <li>
+UnknownError - If any other error occurs               </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">type</span>: 
+            Type of the property to get
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ Callback function that is called when the setting value is successfully retrieved
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+   Callback function that is called when the setting value cannot be retrieved
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type TypeMismatchError, if any input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError in any other error case.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Defines the success callback
+ function getPropertySuccessCallback(value) {
+     // the case : tizen.systeminfo.getCapability("http://tizen.org/feature/systemsetting.home_screen") returns 'true'.
+     console.log("Succeeded in retrieving the property. The value is " + value);
+ }
+
+ // Defines the error callback.
+ function errorCallback(error) {
+     console.log("Failed to get the property. Error : " + error.message);
+     // If the device does not support to get the image on home screen, NotSupportedError would be thrown.
+ }
+
+ tizen.systemsetting.getProperty("HOME_SCREEN", getPropertySuccessCallback, errorCallback);
+
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="SystemSettingSuccessCallback">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingSuccessCallback"></a><h3>2.3. SystemSettingSuccessCallback</h3>
+<div class="brief">
+ The SystemSettingSuccessCallback interface defines the success callback for getProperty().
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject] interface SystemSettingSuccessCallback {
+    void onsuccess(DOMString value);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SystemSettingSuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::SystemSetting::SystemSettingSuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Called when the value of the system setting property is successfully retrieved.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess(DOMString value);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">value</span>: 
+ The value of the requested property.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module SystemSetting {
+
+  [NoInterfaceObject] interface SystemSettingObject {
+    readonly attribute <a href="#SystemSettingManager">SystemSettingManager</a> systemsetting;
+  };
+    <a href="tizen.html#Tizen">Tizen</a> implements <a href="#SystemSettingObject">SystemSettingObject</a>;
+
+  enum SystemSettingType {"HOME_SCREEN", "LOCK_SCREEN", "INCOMING_CALL", "NOTIFICATION_EMAIL"};
+
+  [NoInterfaceObject] interface SystemSettingManager {
+
+     void setProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              DOMString value,
+              <a href="tizen.html#SuccessCallback">SuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+     void getProperty(<a href="#SystemSettingType">SystemSettingType</a> type,
+              <a href="#SystemSettingSuccessCallback">SystemSettingSuccessCallback</a> successCallback,
+              optional <a href="tizen.html#ErrorCallback">ErrorCallback</a>? errorCallback) raises (<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject] interface SystemSettingSuccessCallback {
+    void onsuccess(DOMString value);
+  };
+
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/time.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/time.html
new file mode 100644 (file)
index 0000000..700d9ed
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/time.html
@@ -0,0 +1,2602 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Time API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Time">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Time API</h1></div>
+<div class="brief">
+  The Time API provides information regarding date/time and time zones.
+        </div>
+<div class="description">
+        <p>
+The JavaScript Date object does not have full timezone support.
+Date objects allow only simple representations to denote a particular location's
+offset from Universal Coordinated Time (UTC). This is typically provided as a +/-
+offset from UTC-0 (also known as Greenwich Mean Time, or GMT) for example, +05:30 denotes
+that a location is 5 hours and 30 minutes ahead of UTC +00:00.
+The issue with this method is not getting the correct
+local time for a given date. The existing methods are sufficient for this purpose.
+The issue is correctly converting to and from local time and UTC for all points in
+time - in any of the past, present, and future - based on an initial time provided.
+This is important for defining relative dates, where a time in a given location may
+observe different UTC offsets, according to any Daylight Savings Rules (DST) in effect
+or any other changes that may occur to a location's time zone over time.
+Without the communication of the explicit time zone rules governing a given date and
+time, the ability to effectively calculate the offset of the local time to UTC or to
+any other time zone at any point in the past or future is lost.
+        </p>
+        <p>
+This API can be used to get TZDate objects with full time zone support, convert them
+between timezones, retrieve available timezones.
+        </p>
+        <p>
+For more information on the Time features, see <a href="../../../../../org.tizen.guides/html/web/tizen/system/time_w.htm">Time Guide</a>.
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc"><li>1.1. <a href="#TimeDurationUnit">TimeDurationUnit</a>
+</li></ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#TimeManagerObject">TimeManagerObject</a>
+</li>
+<li>2.2. <a href="#TimeUtil">TimeUtil</a>
+</li>
+<li>2.3. <a href="#TZDate">TZDate</a>
+</li>
+<li>2.4. <a href="#TimeDuration">TimeDuration</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#TimeManagerObject">TimeManagerObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#TimeUtil">TimeUtil</a></td>
+<td>
+<a href="#TZDate">TZDate</a> <a href="#TimeUtil::getCurrentDateTime">getCurrentDateTime</a> ()<br>
+    DOMString <a href="#TimeUtil::getLocalTimezone">getLocalTimezone</a> ()<br>
+    DOMString[] <a href="#TimeUtil::getAvailableTimezones">getAvailableTimezones</a> ()<br>
+    DOMString <a href="#TimeUtil::getDateFormat">getDateFormat</a> (optional boolean? shortformat)<br>
+    DOMString <a href="#TimeUtil::getTimeFormat">getTimeFormat</a> ()<br>
+    boolean <a href="#TimeUtil::isLeapYear">isLeapYear</a> (long year)<br>
+    void <a href="#TimeUtil::setDateTimeChangeListener">setDateTimeChangeListener</a> (<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback)<br>
+    void <a href="#TimeUtil::unsetDateTimeChangeListener">unsetDateTimeChangeListener</a> ()<br>
+    void <a href="#TimeUtil::setTimezoneChangeListener">setTimezoneChangeListener</a> (<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback)<br>
+    void <a href="#TimeUtil::unsetTimezoneChangeListener">unsetTimezoneChangeListener</a> ()</td>
+</tr>
+<tr>
+<td><a href="#TZDate">TZDate</a></td>
+<td>long <a href="#TZDate::getDate">getDate</a> ()<br>
+    void <a href="#TZDate::setDate">setDate</a> (long date)<br>
+    long <a href="#TZDate::getDay">getDay</a> ()<br>
+    long <a href="#TZDate::getFullYear">getFullYear</a> ()<br>
+    void <a href="#TZDate::setFullYear">setFullYear</a> (long year)<br>
+    long <a href="#TZDate::getHours">getHours</a> ()<br>
+    void <a href="#TZDate::setHours">setHours</a> (long hours)<br>
+    long <a href="#TZDate::getMilliseconds">getMilliseconds</a> ()<br>
+    void <a href="#TZDate::setMilliseconds">setMilliseconds</a> (long ms)<br>
+    long <a href="#TZDate::getMinutes">getMinutes</a> ()<br>
+    void <a href="#TZDate::setMinutes">setMinutes</a> (long minutes)<br>
+    long <a href="#TZDate::getMonth">getMonth</a> ()<br>
+    void <a href="#TZDate::setMonth">setMonth</a> (long month)<br>
+    long <a href="#TZDate::getSeconds">getSeconds</a> ()<br>
+    void <a href="#TZDate::setSeconds">setSeconds</a> (long seconds)<br>
+    long <a href="#TZDate::getUTCDate">getUTCDate</a> ()<br>
+    void <a href="#TZDate::setUTCDate">setUTCDate</a> (long date)<br>
+    long <a href="#TZDate::getUTCDay">getUTCDay</a> ()<br>
+    long <a href="#TZDate::getUTCFullYear">getUTCFullYear</a> ()<br>
+    void <a href="#TZDate::setUTCFullYear">setUTCFullYear</a> (long year)<br>
+    long <a href="#TZDate::getUTCHours">getUTCHours</a> ()<br>
+    void <a href="#TZDate::setUTCHours">setUTCHours</a> (long hours)<br>
+    long <a href="#TZDate::getUTCMilliseconds">getUTCMilliseconds</a> ()<br>
+    void <a href="#TZDate::setUTCMilliseconds">setUTCMilliseconds</a> (long ms)<br>
+    long <a href="#TZDate::getUTCMinutes">getUTCMinutes</a> ()<br>
+    void <a href="#TZDate::setUTCMinutes">setUTCMinutes</a> (long minutes)<br>
+    long <a href="#TZDate::getUTCMonth">getUTCMonth</a> ()<br>
+    void <a href="#TZDate::setUTCMonth">setUTCMonth</a> (long month)<br>
+    long <a href="#TZDate::getUTCSeconds">getUTCSeconds</a> ()<br>
+    void <a href="#TZDate::setUTCSeconds">setUTCSeconds</a> (long seconds)<br>
+    DOMString <a href="#TZDate::getTimezone">getTimezone</a> ()<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::toTimezone">toTimezone</a> (DOMString tzid)<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::toLocalTimezone">toLocalTimezone</a> ()<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::toUTC">toUTC</a> ()<br>
+    <a href="#TimeDuration">TimeDuration</a> <a href="#TZDate::difference">difference</a> (<a href="#TZDate">TZDate</a> other)<br>
+    boolean <a href="#TZDate::equalsTo">equalsTo</a> (<a href="#TZDate">TZDate</a> other)<br>
+    boolean <a href="#TZDate::earlierThan">earlierThan</a> (<a href="#TZDate">TZDate</a> other)<br>
+    boolean <a href="#TZDate::laterThan">laterThan</a> (<a href="#TZDate">TZDate</a> other)<br>
+    <a href="#TZDate">TZDate</a> <a href="#TZDate::addDuration">addDuration</a> (<a href="#TimeDuration">TimeDuration</a> duration)<br>
+    DOMString <a href="#TZDate::toLocaleDateString">toLocaleDateString</a> ()<br>
+    DOMString <a href="#TZDate::toLocaleTimeString">toLocaleTimeString</a> ()<br>
+    DOMString <a href="#TZDate::toLocaleString">toLocaleString</a> ()<br>
+    DOMString <a href="#TZDate::toDateString">toDateString</a> ()<br>
+    DOMString <a href="#TZDate::toTimeString">toTimeString</a> ()<br>
+    DOMString <a href="#TZDate::toString">toString</a> ()<br>
+    DOMString <a href="#TZDate::getTimezoneAbbreviation">getTimezoneAbbreviation</a> ()<br>
+    long <a href="#TZDate::secondsFromUTC">secondsFromUTC</a> ()<br>
+    boolean <a href="#TZDate::isDST">isDST</a> ()<br>
+    <a href="#TZDate">TZDate</a>? <a href="#TZDate::getPreviousDSTTransition">getPreviousDSTTransition</a> ()<br>
+    <a href="#TZDate">TZDate</a>? <a href="#TZDate::getNextDSTTransition">getNextDSTTransition</a> ()</td>
+</tr>
+<tr>
+<td><a href="#TimeDuration">TimeDuration</a></td>
+<td>
+<a href="#TimeDuration">TimeDuration</a> <a href="#TimeDuration::difference">difference</a> (<a href="#TimeDuration">TimeDuration</a> other)<br>
+    boolean <a href="#TimeDuration::equalsTo">equalsTo</a> (<a href="#TimeDuration">TimeDuration</a> other)<br>
+    boolean <a href="#TimeDuration::lessThan">lessThan</a> (<a href="#TimeDuration">TimeDuration</a> other)<br>
+    boolean <a href="#TimeDuration::greaterThan">greaterThan</a> (<a href="#TimeDuration">TimeDuration</a> other)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="TimeDurationUnit">
+<a class="backward-compatibility-anchor" name="::Time::TimeDurationUnit"></a><h3>1.1. TimeDurationUnit</h3>
+<div class="brief">
+ Specifies the TimeDuration unit (milliseconds, seconds, minutes, hours or days).
+          </div>
+<pre class="webidl prettyprint">  enum TimeDurationUnit { "MSECS", "SECS", "MINS", "HOURS", "DAYS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+At least the following values must be supported:
+          </p>
+          <ul>
+            <li>
+MSECS - Indicates a duration in milliseconds            </li>
+            <li>
+SECS - Indicates a duration in seconds             </li>
+            <li>
+MINS - Indicates a duration in minutes             </li>
+            <li>
+HOURS - Indicates a duration in hours             </li>
+            <li>
+DAYS - Indicates a duration in days            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="TimeManagerObject">
+<a class="backward-compatibility-anchor" name="::Time::TimeManagerObject"></a><h3>2.1. TimeManagerObject</h3>
+<div class="brief">
+ The TimeManagerObject interface defines what is instantiated in the tizen object by the Tizen Platform.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface TimeManagerObject {
+    readonly attribute <a href="#TimeUtil">TimeUtil</a> time;
+  };</pre>
+<pre class="webidl prettyprint">  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#TimeManagerObject">TimeManagerObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+There will be a <em>tizen.time</em> object that allows accessing the
+functionality of the Time API.
+          </p>
+         </div>
+</div>
+<div class="interface" id="TimeUtil">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil"></a><h3>2.2. TimeUtil</h3>
+<div class="brief">
+ The TimeUtil interface that provides access to the time API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface TimeUtil {
+    <a href="#TZDate">TZDate</a> getCurrentDateTime() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString[] getAvailableTimezones() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getDateFormat(optional boolean? shortformat) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getTimeFormat() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isLeapYear(long year) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setDateTimeChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetDateTimeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setTimezoneChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetTimezoneChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This interface offers methods to manage date/time as well as timezones such as:
+          </p>
+          <ul>
+            <li>
+Get the current date/time using getCurrentDateTime().            </li>
+            <li>
+Get timezones using getLocalTimezone() and getAvailableTimezones().            </li>
+          </ul>
+         </div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TimeUtil::getCurrentDateTime">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getCurrentDateTime"></a><code><b><span class="methodName">getCurrentDateTime</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the current date/time.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> getCurrentDateTime();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The current TZDate object
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var current_dt = tizen.time.getCurrentDateTime();
+ console.log("current date/time is " + current_dt.toLocaleString());
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::getLocalTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getLocalTimezone"></a><code><b><span class="methodName">getLocalTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the identifier of the local system timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getLocalTimezone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ Timezone The local timezone
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> console.log("The local time zone is " + tizen.time.getLocalTimezone());
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::getAvailableTimezones">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getAvailableTimezones"></a><code><b><span class="methodName">getAvailableTimezones</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets synchronously the identifiers of the timezones supported by the device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString[] getAvailableTimezones();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Zero or more slashes separate different components of a timezone identifier,
+with the most general descriptor first and the most specific one last. For example,
+'Europe/Berlin', 'America/Argentina/Buenos_Aires'.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ The array of time zone identifiers
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var tzids = tizen.time.getAvailableTimezones();
+ console.log("The device supports " + tzids.length + " time zones.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::getDateFormat">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getDateFormat"></a><code><b><span class="methodName">getDateFormat</span></b></code>
+</dt>
+<dd>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getDateFormat(optional boolean? shortformat);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Gets the date format according to the system's locale settings.
+            </p>
+            <p>
+These expressions may be used in the returned string:
+            </p>
+            <ul>
+              <li>
+"d" = day number (1 to 31)              </li>
+              <li>
+"D" = day name              </li>
+              <li>
+"m" = month number (1 to 12)              </li>
+              <li>
+"M" = month name              </li>
+              <li>
+"y" = year              </li>
+            </ul>
+            <p>
+Examples of string formats include: "d/m/y", "y-d-m", "D, M d y".
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">shortformat</span><span class="optional"> [optional]</span><span class="optional"> [nullable]</span>: 
+ The flag indicating whether the user is interested in the short
+date format (23/10/2011) instead of a long date format ("Monday, October 23 2011") <br>By default, this attribute is set to false.
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The date format according to the system's locale settings
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TimeUtil::getTimeFormat">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::getTimeFormat"></a><code><b><span class="methodName">getTimeFormat</span></b></code>
+</dt>
+<dd>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getTimeFormat();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Gets the time format according to the system's locale settings.
+            </p>
+            <p>
+These expressions may be used in the returned string:
+            </p>
+            <ul>
+              <li>
+"h" = hours (0 to 23 or 1 to 12 if AM/PM display)              </li>
+              <li>
+"m" = minutes (0 to 59)              </li>
+              <li>
+"s" = seconds (0 to 59)              </li>
+              <li>
+"ap" = AM/PM display              </li>
+            </ul>
+            <p>
+Examples of string formats include: "h:m:s ap", "h:m:s".
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The time format according to the system's locale settings
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TimeUtil::isLeapYear">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::isLeapYear"></a><code><b><span class="methodName">isLeapYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the given year is a leap year.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean isLeapYear(long year);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">year</span>: 
+ The year to check
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em>, if the year is a leap year
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if any of the input
+parameters contain an invalid value.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var current_dt = tizen.time.getCurrentDateTime();
+ var is_leap = tizen.time.isLeapYear(current_dt.getFullYear());
+ if (is_leap) {
+   console.log("This year is a leap year.");
+ }
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::setDateTimeChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::setDateTimeChangeListener"></a><code><b><span class="methodName">setDateTimeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notification of changes to the time/date on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setDateTimeChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Listener set with <em>setTimezoneChangeListener()</em> method is called when device time was set by the user. <br>            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method to be invoked when device time was set <br>It is not invoked when time passes naturally.
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         var current_dt = tizen.time.getCurrentDateTime();
+         console.log("current date/time is " + current_dt.toLocaleString());
+
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setDateTimeChangeListener(changedCallback);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::unsetDateTimeChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::unsetDateTimeChangeListener"></a><code><b><span class="methodName">unsetDateTimeChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving notification of changes to the time/date on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetDateTimeChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         var current_dt = tizen.time.getCurrentDateTime();
+         console.log("current date/time is " + current_dt.toLocaleString());
+         tizen.time.unsetDateTimeChangeListener();
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setDateTimeChangeListener(changedCallback);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::setTimezoneChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::setTimezoneChangeListener"></a><code><b><span class="methodName">setTimezoneChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets a listener to receive notification of changes to the time zone on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setTimezoneChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="description">
+            <p>
+Listener set with <em>setTimezoneChangeListener()</em> method is called when device time zone has changed.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">changeCallback</span>: 
+ Callback method that is invoked when the time zone has changed
+                </li>
+        </ul>
+</div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         // The new time zone can be retrieved through tizen.time.getLocalTimezone()
+         var zone = tizen.time.getLocalTimezone();
+         console.log("current time zone is " + zone);
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setTimezoneChangeListener(changedCallback);
+
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeUtil::unsetTimezoneChangeListener">
+<a class="backward-compatibility-anchor" name="::Time::TimeUtil::unsetTimezoneChangeListener"></a><code><b><span class="methodName">unsetTimezoneChangeListener</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Unsets the listener to stop receiving notification of changes to the time zone on a device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void unsetTimezoneChangeListener();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.3
+            </p>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var changedCallback = function() {
+     try {
+         var zone = tizen.time.getLocalTimezone();
+         console.log("current time zone is " + zone);
+         tizen.time.unsetTimezoneChangeListener();
+     } catch (err) {
+         console.log (err.name + ": " + err.message);
+     }
+ };
+
+ tizen.time.setTimezoneChangeListener(changedCallback);
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="TZDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate"></a><h3>2.3. TZDate</h3>
+<div class="brief">
+ The TZDate interface represents information regarding a given
+date/time in a predefined timezone.
+If its date/time exceeds the platform limit, TZDate will be invalid.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(optional Date? datetime, optional DOMString? timezone),
+   Constructor(long year, long month, long day, optional long? hours, optional long? minutes, optional long? seconds, optional long? milliseconds, optional DOMString? timezone)]
+
+  interface TZDate {
+    long getDate();
+
+    void setDate(long date);
+
+    long getDay();
+
+    long getFullYear();
+
+    void setFullYear(long year);
+
+    long getHours();
+
+    void setHours(long hours);
+
+    long getMilliseconds();
+
+    void setMilliseconds(long ms);
+
+    long getMinutes();
+
+    void setMinutes(long minutes);
+
+    long getMonth();
+
+    void setMonth(long month);
+
+    long getSeconds();
+
+    void setSeconds(long seconds);
+
+    long getUTCDate();
+
+    void setUTCDate(long date);
+
+    long getUTCDay();
+
+    long getUTCFullYear();
+
+    void setUTCFullYear(long year);
+
+    long getUTCHours();
+
+    void setUTCHours(long hours);
+
+    long getUTCMilliseconds();
+
+    void setUTCMilliseconds(long ms);
+
+    long getUTCMinutes();
+
+    void setUTCMinutes(long minutes);
+
+    long getUTCMonth();
+
+    void setUTCMonth(long month);
+
+    long getUTCSeconds();
+
+    void setUTCSeconds(long seconds);
+
+    DOMString getTimezone();
+
+    <a href="#TZDate">TZDate</a> toTimezone(DOMString tzid) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean earlierThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean laterThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> addDuration(<a href="#TimeDuration">TimeDuration</a> duration) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString toLocaleDateString();
+
+    DOMString toLocaleTimeString();
+
+    DOMString toLocaleString();
+
+    DOMString toDateString();
+
+    DOMString toTimeString();
+
+    DOMString toString();
+
+    DOMString getTimezoneAbbreviation() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long secondsFromUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isDST() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getPreviousDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getNextDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="constructors">
+<h4 id="TZDate::constructor">Constructors</h4>
+<dl>
+<pre class="webidl prettyprint">TZDate(optional Date? datetime, optional DOMString? timezone);</pre>
+<pre class="webidl prettyprint">TZDate(long year, long month, long day, optional long? hours, optional long? minutes, optional long? seconds, optional long? milliseconds, optional DOMString? timezone);</pre>
+<div class="description">
+              <ul>
+                <li>
+<b>year</b> : The year of TZDate. If it is between 0 and 99, 1900 will be added to it like Javascript Date object.                </li>
+              </ul>
+             </div>
+</dl>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TZDate::getDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getDate"></a><code><b><span class="methodName">getDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the month (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getDate();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the month.
+              </div>
+</dd>
+<dt class="method" id="TZDate::setDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setDate"></a><code><b><span class="methodName">setDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the day of the month (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setDate(long date);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the day bigger than the last day of the month or smaller than 1, it will be calculated automatically.
+For example, if TZDate's month is May and parameter is 32, it will be June 1.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">date</span>: 
+ Date to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getDay">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getDay"></a><code><b><span class="methodName">getDay</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the week (from 0-6).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getDay();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the week
+              </div>
+</dd>
+<dt class="method" id="TZDate::getFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getFullYear"></a><code><b><span class="methodName">getFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the year.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getFullYear();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Positive values indicate AD(Anno Domini) years. 0 and negative values indicate BC(Before Christ) years.
+For example, 1 = AD 1, 0 = BC 1, -1 = BC 2.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The year
+              </div>
+</dd>
+<dt class="method" id="TZDate::setFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setFullYear"></a><code><b><span class="methodName">setFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the year.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setFullYear(long year);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">year</span>: 
+ Year to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getHours"></a><code><b><span class="methodName">getHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the hour (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getHours();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The hour
+              </div>
+</dd>
+<dt class="method" id="TZDate::setHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setHours"></a><code><b><span class="methodName">setHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the hour (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setHours(long hours);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the hour bigger than 23 or smaller than 0, it will be calculated automatically.
+For example, if hours is 24, it will set 0 and add to a date.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">hours</span>: 
+ Hours to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getMilliseconds"></a><code><b><span class="methodName">getMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the milliseconds (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMilliseconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The milliseconds
+              </div>
+</dd>
+<dt class="method" id="TZDate::setMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setMilliseconds"></a><code><b><span class="methodName">setMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the milliseconds (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMilliseconds(long ms);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the millisecond bigger than 999 or smaller than 0, it will be calculated automatically.
+For example, if ms is 1000, it will set 0 and add to a second.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ms</span>: 
+ Milliseconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getMinutes"></a><code><b><span class="methodName">getMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the minutes (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMinutes();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The minutes
+              </div>
+</dd>
+<dt class="method" id="TZDate::setMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setMinutes"></a><code><b><span class="methodName">setMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the minutes.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMinutes(long minutes);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the minute bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if minutes is 60, it will set 0 and add to an hour.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">minutes</span>: 
+ Minutes to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getMonth"></a><code><b><span class="methodName">getMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the month (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getMonth();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The month
+              </div>
+</dd>
+<dt class="method" id="TZDate::setMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setMonth"></a><code><b><span class="methodName">setMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the month (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setMonth(long month);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the month bigger than 11 or smaller than 0, it will be calculated automatically.
+For example, if month is 12, it will set 0 and add to a year.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">month</span>: 
+ Month to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getSeconds"></a><code><b><span class="methodName">getSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the seconds (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getSeconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The seconds
+              </div>
+</dd>
+<dt class="method" id="TZDate::setSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setSeconds"></a><code><b><span class="methodName">setSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the seconds (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setSeconds(long seconds);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the second bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if seconds is 60, it will set 0 and add to a minute.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">seconds</span>: 
+ Seconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCDate"></a><code><b><span class="methodName">getUTCDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the month, according to universal time (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCDate();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the month, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCDate">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCDate"></a><code><b><span class="methodName">setUTCDate</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the day of the month, according to universal time (from 1-31).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCDate(long date);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the day bigger than the last day of the month or smaller than 1, it will be calculated automatically.
+For example, if TZDate's month is May and date is 32, it will be June 1.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">date</span>: 
+ Date to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCDay">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCDay"></a><code><b><span class="methodName">getUTCDay</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the day of the week, according to universal time (from 0-6).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCDay();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The day of the week, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::getUTCFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCFullYear"></a><code><b><span class="methodName">getUTCFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the year, according to universal time.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCFullYear();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Positive values indicate AD(Anno Domini) years. 0 and negative values indicate BC(Before Christ) years.
+For example, 1 = AD 1, 0 = BC 1, -1 = BC 2.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The year, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCFullYear">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCFullYear"></a><code><b><span class="methodName">setUTCFullYear</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the year, according to universal time.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCFullYear(long year);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">year</span>: 
+ Year to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCHours"></a><code><b><span class="methodName">getUTCHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the hour, according to universal time (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCHours();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The hour, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCHours">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCHours"></a><code><b><span class="methodName">setUTCHours</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the hour, according to universal time (0-23).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCHours(long hours);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the hour bigger than 23 or smaller than 0, it will be calculated automatically.
+For example, if hours is 24, it will set 0 and add to a date.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">hours</span>: 
+ Hours to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCMilliseconds"></a><code><b><span class="methodName">getUTCMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the milliseconds, according to universal time (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCMilliseconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The milliseconds, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCMilliseconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCMilliseconds"></a><code><b><span class="methodName">setUTCMilliseconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the milliseconds, according to universal time (from 0-999).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCMilliseconds(long ms);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the millisecond bigger than 999 or smaller than 0, it will be calculated automatically.
+For example, if ms is 1000, it will set 0 and add to a second.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">ms</span>: 
+ Milliseconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCMinutes"></a><code><b><span class="methodName">getUTCMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the minutes, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCMinutes();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The minutes, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCMinutes">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCMinutes"></a><code><b><span class="methodName">setUTCMinutes</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the minutes, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCMinutes(long minutes);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the minute bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if minutes is 60, it will set 0 and add to an hour.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">minutes</span>: 
+ Minutes to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCMonth"></a><code><b><span class="methodName">getUTCMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the month, according to universal time (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCMonth();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The month, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCMonth">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCMonth"></a><code><b><span class="methodName">setUTCMonth</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the month, according to universal time (from 0-11).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCMonth(long month);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the month bigger than 11 or smaller than 0, it will be calculated automatically.
+For example, if month is 12, it will set 0 and add to a year.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">month</span>: 
+ Month to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getUTCSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getUTCSeconds"></a><code><b><span class="methodName">getUTCSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the seconds, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long getUTCSeconds();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The seconds, according to universal time
+              </div>
+</dd>
+<dt class="method" id="TZDate::setUTCSeconds">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::setUTCSeconds"></a><code><b><span class="methodName">setUTCSeconds</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Sets the seconds, according to universal time (from 0-59).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void setUTCSeconds(long seconds);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If it tries to set the second bigger than 59 or smaller than 0, it will be calculated automatically.
+For example, if seconds is 60, it will set 0 and add to a minute.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">seconds</span>: 
+ Seconds to set
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="TZDate::getTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getTimezone"></a><code><b><span class="methodName">getTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the timezone identifier.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getTimezone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Zero or more slashes separate different components, with the most general
+descriptor first and the most specific one last. For example,
+'Europe/Berlin', 'America/Argentina/Buenos_Aires'.
+            </p>
+            <p>
+This attribute uniquely identifies the timezone.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string timezone identifier <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toTimezone"></a><code><b><span class="methodName">toTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a copy of the TZDate converted to a given time zone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> toTimezone(DOMString tzid);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">tzid</span>: 
+ Timezone identifier to set
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The new TZDate in given Timezone
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type InvalidValuesError, if the provided TZID
+is not recognized as a valid timezone identifier.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::toLocalTimezone">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocalTimezone"></a><code><b><span class="methodName">toLocalTimezone</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a copy of the TZDate converted to the local time zone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> toLocalTimezone();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The new TZDate in local Timezone
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::toUTC">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toUTC"></a><code><b><span class="methodName">toUTC</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a copy of the TZDate converted to Coordinated Universal Time (UTC).
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> toUTC();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The Date/Time in UTC
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::difference">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::difference"></a><code><b><span class="methodName">difference</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Calculates the difference with another TZDate object.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TimeDuration">TimeDuration</a> difference(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Calculates the difference in time between <em>this</em> and the other object.
+This comparison method takes timezones into consideration for the comparison.
+            </p>
+            <p>
+The TimeDuration that is returned is effectively <em>this</em> - other.
+The return value is a duration in milliseconds both TZDate objects have a time component, in days, otherwise.
+The result value will be:
+            </p>
+            <ul>
+              <li>
+Negative, if other is in the future              </li>
+              <li>
+0 if the two date/times are equal              </li>
+              <li>
+Positive, if other is in the past              </li>
+            </ul>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ The other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TimeDuration The duration in milliseconds between the two date/time objects
+(or in days for comparison between dates with no time component)
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::equalsTo">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::equalsTo"></a><code><b><span class="methodName">equalsTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TZDate is equal to another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean equalsTo(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the timezones into consideration and will return <em>true</em> if the two TZDate objects represent the same instant in different timezones.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the 2 date/times are the same
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::earlierThan">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::earlierThan"></a><code><b><span class="methodName">earlierThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TZDate is earlier than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean earlierThan(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the timezones into consideration.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ The other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em>, if the Date/Time is earlier than the one passed in argument
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::laterThan">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::laterThan"></a><code><b><span class="methodName">laterThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TZDate is later than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean laterThan(<a href="#TZDate">TZDate</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the timezones into consideration.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ The other Date/Time to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em>, if the Date/Time is later than the one passed in argument
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::addDuration">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::addDuration"></a><code><b><span class="methodName">addDuration</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets a new date by adding a duration to the current TZDate object.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a> addDuration(<a href="#TimeDuration">TimeDuration</a> duration);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+If the length of duration is negative, the new date/time will be
+earlier than it used to.
+            </p>
+            <p>
+Note that calling this method does not alter the current object.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">duration</span>: 
+ TimeDuration to add
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The new TZDate by adding a duration
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var now = tizen.time.getCurrentDateTime();
+ var in_one_week = now.addDuration(new tizen.TimeDuration(7, "DAYS"));
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TZDate::toLocaleDateString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocaleDateString"></a><code><b><span class="methodName">toLocaleDateString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date portion of a TZDate object as a string, using locale conventions.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toLocaleDateString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The date portion of the TZDate object as a string, using locale conventions <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toLocaleTimeString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocaleTimeString"></a><code><b><span class="methodName">toLocaleTimeString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the time portion of a TZDate object as a string, using locale conventions.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toLocaleTimeString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The time portion of the TZDate object as a string, using locale conventions <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toLocaleString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toLocaleString"></a><code><b><span class="methodName">toLocaleString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Converts a TZDate object to a string, using locale conventions.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toLocaleString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string representation of the TZDate object, using locale conventions <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toDateString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toDateString"></a><code><b><span class="methodName">toDateString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date portion of a TZDate object as a string.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toDateString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The date portion of the TZDate object as a string <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toTimeString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toTimeString"></a><code><b><span class="methodName">toTimeString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the time portion of a TZDate object as a string.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toTimeString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The time portion of the TZDate object as a string <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::toString">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::toString"></a><code><b><span class="methodName">toString</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Converts a TZDate object to a string.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString toString();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The string representation of the TZDate object <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+</dd>
+<dt class="method" id="TZDate::getTimezoneAbbreviation">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getTimezoneAbbreviation"></a><code><b><span class="methodName">getTimezoneAbbreviation</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Determines the time zone abbreviation to be used at a particular date in the time zone.
+            </div>
+<div class="deprecated"><p><font color="red"><i><b>Deprecated.</b>
+ Some timezones return "GMT[+-]hh:mm". It is inconsistent.
+            </i></font></p></div>
+<div class="synopsis"><pre class="signature prettyprint">DOMString getTimezoneAbbreviation();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+For example, in Toronto this is currently "EST" during the winter months and "EDT" during the
+summer months when daylight savings time is in effect.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ DOMString The abbreviation of the time zone (such as "EST") <br>If TZDate is invalid, it will return 'Invalid Date'.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::secondsFromUTC">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::secondsFromUTC"></a><code><b><span class="methodName">secondsFromUTC</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the number of seconds from Coordinated Universal Time (UTC) offset for the timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">long secondsFromUTC();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Returns the offset (in seconds) from UTC of the timezone, accounting for daylight
+savings if it is in the timezone. For example, if time zone is GMT+8, it will return -32,400.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ long The offset from UTC in seconds
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var offset = tizen.time.getCurrentDateTime().secondsFromUTC();
+ var myDate = new Date();
+ var exp_offset = myDate.getTimezoneOffset()*60;
+ //offset is equals to exp_offset.
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TZDate::isDST">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::isDST"></a><code><b><span class="methodName">isDST</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether Daylight Saving Time(DST) is active for this TZDate.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean isDST();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Indicates if daylight savings are in effect for the time zone and instant
+identified by the TZDate object.
+            </p>
+           </div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean The flag indicating whether the daylight saving are in effect
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::getPreviousDSTTransition">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getPreviousDSTTransition"></a><code><b><span class="methodName">getPreviousDSTTransition</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date of the previous daylight saving time transition for the timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a>? getPreviousDSTTransition();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The date of the previous daylight saving transition (before the instant identified by the TZDate)
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+<dt class="method" id="TZDate::getNextDSTTransition">
+<a class="backward-compatibility-anchor" name="::Time::TZDate::getNextDSTTransition"></a><code><b><span class="methodName">getNextDSTTransition</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Gets the date of the next daylight saving time transition for the timezone.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TZDate">TZDate</a>? getNextDSTTransition();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ TZDate The date of the next daylight saving transition (after the instant identified by the TZDate)
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul><li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li></ul>
+</li></ul>
+        </div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="TimeDuration">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration"></a><h3>2.4. TimeDuration</h3>
+<div class="brief">
+ The TimeDuration interface that contains the length and its associated time unit.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(long long length, optional <a href="#TimeDurationUnit">TimeDurationUnit</a>? unit)]
+  interface TimeDuration
+  {
+    attribute long long length;
+
+    attribute <a href="#TimeDurationUnit">TimeDurationUnit</a> unit;
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean lessThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean greaterThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var now = tizen.time.getCurrentDateTime();
+ var tomorrow = now.addDuration(new tizen.TimeDuration(1, "DAYS")); // Becomes tomorrow, same time.
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="TimeDuration::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">TimeDuration(long long length, optional <a href="#TimeDurationUnit">TimeDurationUnit</a>? unit);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="TimeDuration::length">
+<span class="attrName"><span class="type">long long </span><span class="name">length</span></span><div class="brief">
+ The duration length.
+            </div>
+<div class="description">
+            <p>
+The unit of the duration length (milliseconds, seconds, minutes, hours, or days)
+is determined by the duration unit attribute.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="TimeDuration::unit">
+<span class="attrName"><span class="type">TimeDurationUnit </span><span class="name">unit</span></span><div class="brief">
+ The duration unit (milliseconds, seconds, minutes, hours, or days).
+            </div>
+<div class="description">
+            <p>
+The default value is "MSECS" (milliseconds unit).
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="TimeDuration::difference">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::difference"></a><code><b><span class="methodName">difference</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Calculates the difference between two TimeDuration objects.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint"><a href="#TimeDuration">TimeDuration</a> difference(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+Calculates the difference in time between <em>this</em> and <em>other</em>.
+The TimeDuration that is returned is effectively <em>first</em> - <em>other</em> (that is: positive if the first parameter is larger).
+            </p>
+            <p>
+The returned TimeDuration is the biggest possible unit without losing the precision.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ The new TimeDuration object corresponding to the result of <em>this</em> - <em>other</em>.
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // Assume that event1 and event2 are tizen.CalendarEvent objects.
+ // Computes event1.duration - event2.duration
+ var diff = event1.duration.difference(event2.duration);
+ if (diff.length &gt; 0)
+   console.log("The event1 is longer than event2.");
+ else if (diff.length == 0)
+   console.log("The duration of two events is same.");
+ else
+   console.log("The event1 is shorter than the event2.");
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeDuration::equalsTo">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::equalsTo"></a><code><b><span class="methodName">equalsTo</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TimeDuration is equal to another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean equalsTo(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the units into consideration and will return true
+if the two TimeDuration objects represent the same duration in different units.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the two TimeDuration object represent the same duration
+              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var d1 = new tizen.TimeDuration(60, "MINS"); // 60 minutes
+ var d2 = new tizen.TimeDuration(1, "HOURS"); // 1 hour
+ var ret = d1.equalsTo(d2); // Returns true
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeDuration::lessThan">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::lessThan"></a><code><b><span class="methodName">lessThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TimeDuration is lower than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean lessThan(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the units into consideration when doing the comparison.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the TimeDuration is less than <em>other</em>              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var d1 = new tizen.TimeDuration(1, "HOURS"); // 1 hour
+ var d2 = new tizen.TimeDuration(120, "MINS"); // 120 minutes
+ var ret = d1.lessThan(d2); // Returns true
+ </pre>
+</div>
+</dd>
+<dt class="method" id="TimeDuration::greaterThan">
+<a class="backward-compatibility-anchor" name="::Time::TimeDuration::greaterThan"></a><code><b><span class="methodName">greaterThan</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Checks whether the TimeDuration is greater than another.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean greaterThan(<a href="#TimeDuration">TimeDuration</a> other);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="description">
+            <p>
+This method takes the units into consideration when doing the comparison.
+            </p>
+           </div>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">other</span>: 
+ Other TimeDuration object to compare to
+                </li>
+        </ul>
+</div>
+<div class="returntype">
+<p><span class="return">Return value:</span></p>
+ boolean <em>true</em> if the TimeDuration is greater than <em>other</em>              </div>
+<div class="exceptionlist">
+<p><span class="except">Exceptions:</span></p>
+          <ul class="exception"><li>WebAPIException<ul>
+<li class="list"><p>
+ with error type TypeMismatchError, if the input parameter
+is not compatible with the expected type for that parameter.
+                </p></li>
+<li class="list"><p>
+ with error type UnknownError, if the call failed due to an unknown error.
+                </p></li>
+</ul>
+</li></ul>
+        </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var d1 = new tizen.TimeDuration(120, "MINS"); // 120 minutes
+ var d2 = new tizen.TimeDuration(1, "HOURS"); // 1 hour
+ var ret = d1.greaterThan(d2); // Returns true
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Time {
+
+  enum TimeDurationUnit { "MSECS", "SECS", "MINS", "HOURS", "DAYS" };
+
+  [NoInterfaceObject] interface TimeManagerObject {
+    readonly attribute <a href="#TimeUtil">TimeUtil</a> time;
+  };
+  <a href="tizen.html#Tizen">Tizen</a> implements <a href="#TimeManagerObject">TimeManagerObject</a>;
+
+  [NoInterfaceObject] interface TimeUtil {
+    <a href="#TZDate">TZDate</a> getCurrentDateTime() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString[] getAvailableTimezones() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getDateFormat(optional boolean? shortformat) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString getTimeFormat() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isLeapYear(long year) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setDateTimeChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetDateTimeChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void setTimezoneChangeListener(<a href="tizen.html#SuccessCallback">SuccessCallback</a> changeCallback) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    void unsetTimezoneChangeListener() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+  };
+
+  [Constructor(optional Date? datetime, optional DOMString? timezone),
+   Constructor(long year, long month, long day, optional long? hours, optional long? minutes, optional long? seconds, optional long? milliseconds, optional DOMString? timezone)]
+
+  interface TZDate {
+    long getDate();
+
+    void setDate(long date);
+
+    long getDay();
+
+    long getFullYear();
+
+    void setFullYear(long year);
+
+    long getHours();
+
+    void setHours(long hours);
+
+    long getMilliseconds();
+
+    void setMilliseconds(long ms);
+
+    long getMinutes();
+
+    void setMinutes(long minutes);
+
+    long getMonth();
+
+    void setMonth(long month);
+
+    long getSeconds();
+
+    void setSeconds(long seconds);
+
+    long getUTCDate();
+
+    void setUTCDate(long date);
+
+    long getUTCDay();
+
+    long getUTCFullYear();
+
+    void setUTCFullYear(long year);
+
+    long getUTCHours();
+
+    void setUTCHours(long hours);
+
+    long getUTCMilliseconds();
+
+    void setUTCMilliseconds(long ms);
+
+    long getUTCMinutes();
+
+    void setUTCMinutes(long minutes);
+
+    long getUTCMonth();
+
+    void setUTCMonth(long month);
+
+    long getUTCSeconds();
+
+    void setUTCSeconds(long seconds);
+
+    DOMString getTimezone();
+
+    <a href="#TZDate">TZDate</a> toTimezone(DOMString tzid) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toLocalTimezone() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> toUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean earlierThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean laterThan(<a href="#TZDate">TZDate</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a> addDuration(<a href="#TimeDuration">TimeDuration</a> duration) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    DOMString toLocaleDateString();
+
+    DOMString toLocaleTimeString();
+
+    DOMString toLocaleString();
+
+    DOMString toDateString();
+
+    DOMString toTimeString();
+
+    DOMString toString();
+
+    DOMString getTimezoneAbbreviation() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    long secondsFromUTC() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean isDST() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getPreviousDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    <a href="#TZDate">TZDate</a>? getNextDSTTransition() raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(long long length, optional <a href="#TimeDurationUnit">TimeDurationUnit</a>? unit)]
+  interface TimeDuration
+  {
+    attribute long long length;
+
+    attribute <a href="#TimeDurationUnit">TimeDurationUnit</a> unit;
+
+    <a href="#TimeDuration">TimeDuration</a> difference(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean equalsTo(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean lessThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+
+    boolean greaterThan(<a href="#TimeDuration">TimeDuration</a> other) raises(<a href="tizen.html#WebAPIException">WebAPIException</a>);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.css b/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.css
new file mode 100644 (file)
index 0000000..baac199
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.css
@@ -0,0 +1,929 @@
+.attribute
+{
+    padding-bottom:15px;
+}
+pre
+{
+    /*text-align: left;            -webkit-border-radius: 8px;     -khtml-border-radius: 8px;     -moz-border-radius: 8px;     border-radius: 8px;     border: 1px solid rgba(255, 255, 255, 0.2);     display:block;     color:#2c3123;     margin:15px 0px 15px -8px;     padding:12px 20px 12px 35px;     font-size: 14px;     /*overflow:hidden;*/ /*word-wrap:break-word;*/ /*white-space: normal;*/
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+pre code
+{
+    font-size: 1em;
+    margin: 0px;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+pre webidl
+{
+    font-size: 1em;
+    margin: 0px;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+.prettyprint
+{
+}
+
+
+.signature
+{
+    background-color: #FCE6B9;
+    word-wrap:break-word;
+}
+
+.examplecode
+{
+    background-color: #D5F1FD;
+    word-wrap:break-word;
+}
+
+.webidl
+{
+    background-color: #D9F0C4;
+    word-wrap:break-word;
+}
+
+.prettyprint b
+{
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+
+
+pre select
+{
+    border: 1px solid #c61800;
+}
+
+input
+{
+    font-size: 16px;
+    margin-right: 10px;
+    font-family: Helvetica;
+    padding: 3px;
+}
+input[type="range"]
+{
+    width: 100%;
+}
+
+button
+{
+    margin: 20px 10px 0 0;
+    font-family: Verdana;
+}
+
+button.large
+{
+    font-size: 32px;
+}
+
+pre b
+{
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+pre em
+{
+    font-weight: normal;
+    font-style: normal;
+    color: #18a600;
+}
+pre input[type="range"]
+{
+    height: 6px;
+    cursor: pointer;
+    width: auto;
+}
+
+
+
+
+.product, .product-ua, .product-cc
+{
+}
+
+dfn.external
+{
+    font-weight: normal;
+    font-style: italic;
+}
+
+pre.idl
+{
+    border: solid thin;
+    background: #eee;
+    color: #000;
+    padding: 0.5em;
+}
+
+pre.idl :link, pre.idl :visited
+{
+    color: inherit;
+    background: transparent;
+}
+
+dfn
+{
+    font-style: normal;
+    font-weight: bolder;
+}
+em.ct, em.ct-samp
+{
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: normal;
+}
+
+.issue
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #ffc;
+}
+
+.issue::before
+{
+    content: "Issue";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.comment
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #fff;
+}
+
+.comment::before
+{
+    content: "Comment";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.ws3
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+.ws3::before
+{
+    content: "For WS3 Review";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.ws4
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+.ws4::before
+{
+    content: "Under discussion";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+.note
+{
+    margin-left: 2em;
+    border: 2px solid #CFF6D9;
+    padding: .5em;
+    padding-top: 0px;
+    padding-bottom: 1em;
+    color: #444;
+    background-color: #E2FFF0;
+    font-size: 0.8em;
+}
+
+dd > dl
+{
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 15px;
+}
+
+code
+{
+    font-size: 1.1em;
+    text-decoration: none;
+    color: #002108;
+}
+
+
+.dir_listing li
+{
+    list-style-type: none;
+    font-family: Tahoma, Arial, Helvetica, sans-serif;
+}
+
+span span
+{
+    /*background-color: yellow;*/
+}
+
+li.folder
+{
+    list-style-image: url(images/expanded_folder.png);
+}
+
+.authorguide
+{
+    border: 1px solid #67BBB5;
+    background: #E8EBFC;
+    padding: 1em;
+    font-size: .9em;
+    color: #003;
+}
+
+.authorguide strong
+{
+    padding: .2em;
+    color: #003;
+    border: none;
+    position: relative;
+    display: block;
+    width: 200px;
+    left: -1.5em;
+    top: -1.5em;
+    background: #C6D8E6;
+    text-align: center;
+}
+
+span.notetitle
+{
+    padding: .2em;
+    color: #066;
+    border: none;
+    position: relative;
+    display: block;
+    width: 40px;
+    left: -1.5em;
+    top: -.7em;
+    background: #F2FFF1;
+    padding-left: .2em;
+    text-align: center;
+}
+
+var
+{
+    font-family: "Lucida Console" , Monaco, monospace;
+}
+
+li.folder li
+{
+    list-style-image: none;
+}
+
+.dir_listing .comment
+{
+    border: none;
+    font-family: "Courier New" , Courier, monospace;
+    color: #669933;
+}
+
+.dir_listing img
+{
+    vertical-align: middle;
+}
+
+.redNote
+{
+    color: red;
+}
+
+dl.procedure dt
+{
+    font-weight: normal;
+}
+
+.editorialNote
+{
+    padding: 5px;
+    background-color: #F3B9B7;
+    border: 3px dashed #FFEEB8;
+    color: #444;
+    font-size: 0.8em;
+}
+
+li > ol
+{
+    list-style-type: upper-alpha;
+}
+
+p[id]:after
+{
+    font-size: .8em;
+}
+
+table.wac
+{
+    border-width: 1px;
+    border-spacing: 2px;
+    border-style: outset;
+    border-color: #808080;
+    border-collapse: collapse;
+    background-color: #ffffff;
+}
+
+table.wac th
+{
+    border-width: 1px;
+    padding: 1px;
+    border-style: inset;
+    border-color: #808080;
+    background-color: #ffffff;
+}
+
+table.wac td
+{
+    vertical-align: top;
+    border-width: 1px;
+    padding: 1px;
+    border-style: inset;
+    border-color: #808080;
+    background-color: #ffffff;
+}
+
+.wacreqid
+{
+    font-weight: bold;
+}
+
+.wacreqid_ext
+{
+    font-weight: bold;
+}
+
+wacreqtext
+{
+    font-style: normal;
+}
+
+/* Table styles */
+table
+{
+    border-spacing: 0;
+    border-collapse: collapse;
+    border-bottom: 3px solid #005a9c;
+    margin-bottom: 1em;
+}
+
+th
+{
+    border-top: 2px solid #719cc7;
+    border-right: 1px solid #c6d9f1;
+    border-left: 1px solid #c6d9f1;
+    background-color: #3D9EC9;
+    padding: 4px;
+    color: White;
+    font-size: 9pt;
+    font-weight: bold;
+}
+
+th[scope="row"]
+{
+    background: inherit;
+    color: inherit;
+    border-top: 1px solid #ddd;
+}
+
+td
+{
+    padding: 3px 10px;
+    border-top: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+}
+/*
+th:last-of-type, td:last-of-type
+{
+    border-right: none;
+}
+
+tr:nth-child(even)
+{
+    background: #f0f6ff;
+}
+*/
+.attrName
+{
+    font-size: 10pt;
+    font-weight: bold;
+}
+
+.methodName
+{
+    font-size: 13pt;
+    font-weight: bold;
+}
+
+body
+{
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+:link
+{
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+:visited
+{
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+a:active
+{
+    color: #C00;
+    background: transparent;
+}
+
+a:link img, a:visited img
+{
+    border-style: none;
+}
+/* no border on img links */
+
+a img
+{
+    color: white;
+}
+/* trick to hide the border in Netscape 4 */
+@media all
+{
+    /* hide the next rule from Netscape 4 */
+    a img
+    {
+        color: inherit;
+    }
+    /* undo the color change above */
+}
+
+th, td
+{
+    /* ns 4 */ /*font-family: sans-serif;*/
+    font-size: 10pt;
+}
+
+h1, h2, h3, h4, h5, h6
+{
+    text-align: left;
+    font-family: Arial, Verdana, Helvetica, sans-serif;
+}
+/* background should be transparent, but WebTV has a bug */
+h1, h2, h3, h4
+{
+    color: #005A9C;
+    background: white;
+    padding-top: 0.2em;
+}
+h1
+{
+    font-size: 24pt;
+    color: #0E437D;
+}
+h2
+{
+    font-size: 18pt;
+    color: #0E437D;
+}
+h3
+{
+    font-size: 14pt;
+    color: #1C1C1C;
+}
+h4
+{
+    font-size: 12pt;
+    color: #1C1C1C;
+    font-weight: bold;
+}
+h5
+{
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-style: italic;
+    font-weight: bold;
+}
+h6
+{
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-weight: bold;
+    font-variant: small-caps;
+}
+
+
+.hide
+{
+    display: none;
+}
+
+div.head
+{
+    margin-bottom: 1em;
+}
+div.head h1
+{
+    margin-top: 2em;
+    clear: both;
+}
+div.head table
+{
+    margin-left: 2em;
+    margin-top: 2em;
+}
+
+p.copyright
+{
+    font-size: small;
+}
+p.copyright small
+{
+    font-size: small;
+}
+
+
+a[href] img:hover
+{
+    background: white;
+}
+
+@media screen
+{
+    /* hide from IE3 */
+    a[href]:hover
+    {
+        background: #ffa;
+    }
+}
+
+pre
+{
+    margin-left: 2em;
+}
+/*
+    p {
+      margin-top: 0.6em;
+      margin-bottom: 0.6em;
+    }
+    */
+
+/* opera 3.50 */
+dt, dd
+{
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+pre, code
+{
+    font-family: monospace;
+}
+/* navigator 4 requires this */
+
+ul.toc, ol.toc
+{
+    list-style: disc; /* Mac NS has problem with 'none' */
+    list-style: none;
+}
+
+ul.xmlconfig
+{
+    display: inline-block;
+    padding-right: 3%;
+    border-style: dotted;
+    border-width: 1px;
+}
+
+@media aural
+{
+    h1, h2, h3
+    {
+        stress: 20;
+        richness: 90;
+    }
+    .hide
+    {
+        speak: none;
+    }
+    p.copyright
+    {
+        volume: x-soft;
+        speech-rate: x-fast;
+    }
+    dt
+    {
+        pause-before: 20%;
+    }
+    pre
+    {
+        speak-punctuation: code;
+    }
+}
+
+.toc
+{
+    list-style-type: none;
+}
+
+div.exampleInner pre
+{
+    margin-left: 1em;
+    margin-top: 0em;
+    margin-bottom: 0em;
+}
+div.exampleOuter
+{
+    border: 4px double gray;
+    margin: 0em;
+    padding: 0em;
+}
+div.exampleInner
+{
+    background-color: #d5dee3;
+    border-top-width: 4px;
+    border-top-style: double;
+    border-top-color: #d3d3d3;
+    border-bottom-width: 4px;
+    border-bottom-style: double;
+    border-bottom-color: #d3d3d3;
+    padding: 4px;
+    margin: 0em;
+}
+div.exampleWrapper
+{
+    margin: 4px;
+}
+div.exampleHeader
+{
+    font-weight: bold;
+    margin: 4px;
+}
+
+
+
+.def-api-feature dt, dt .def-device-cap, dt.const code
+{
+    font: bold 100% sans-serif;
+}
+dt.attribute code, dt.method code
+{
+    font: italic 100% sans-serif;
+}
+
+.def-device-caps dd
+{
+    margin-bottom: 2em;
+}
+
+dt.method
+{
+    margin-top: 2em;
+}
+
+.summary td
+{
+    text-align: left;
+    background-color: white;
+    color: inherit;
+    font-family: monospace;
+    white-space: pre;
+    padding: .3em 1em .3em 1em;
+}
+/* Pretty printing styles. Used with prettify.js. */
+
+.str
+{
+    color: #080;
+}
+.kwd
+{
+    color: #008;
+}
+.com
+{
+    color: #800;
+}
+.typ
+{
+    color: #606;
+}
+.lit
+{
+    color: #066;
+}
+.pun
+{
+    color: #660;
+}
+.pln
+{
+    color: #000;
+}
+.tag
+{
+    color: #008;
+}
+.atn
+{
+    color: #606;
+}
+.atv
+{
+    color: #080;
+}
+.dec
+{
+    color: #606;
+}
+.readonly
+{
+    color: red;
+}
+.type
+{
+    color: #F0ACF0;
+}
+.optional
+{
+    font-style: italic;
+}
+
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums
+{
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8
+{
+    list-style-type: none;
+}
+/* Alternate shading for lines */
+li.L1, li.L3, li.L5, li.L7, li.L9
+{
+    background: #eee;
+}
+/*@media print {*/
+.str
+{
+    color: #060;
+}
+.kwd
+{
+    color: #006;
+    font-weight: bold;
+}
+.com
+{
+    color: #600;
+    font-style: italic;
+}
+.typ
+{
+    color: #404;
+    font-weight: bold;
+}
+.lit
+{
+    color: #044;
+}
+.pun
+{
+    color: #440;
+}
+.pln
+{
+    color: #000;
+}
+.tag
+{
+    color: #006;
+    font-weight: bold;
+}
+.atn
+{
+    color: #404;
+}
+.atv
+{
+    color: #060;
+}
+/*}*/
+
+/* div.status Styles */
+a[href].status:link{
+    color: #ffffff;
+    text-decoration: none;
+}
+
+a[href].status:visited{
+    color: #ffffff;
+}
+
+a[href].status:hover{
+    color: #3D9EC9;
+}
+
+/* Footer Styles */
+#footer
+{
+    background-color: #DDDDDD;
+    margin-top: 20px;
+    font-size: .8em;
+    padding: 20px;
+    color: #666;
+}
+
+#footer .sponsor
+{
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    float: right;
+}
+
+#footer .trademark
+{
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    clear: both;
+}
+
+
+#footer ul
+{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#footer li
+{
+    margin-bottom: 2px;
+}
+.version, span.param, .except, .example, .return, .privilege, .remark, .privilegelevel
+{
+    font-weight: bold;
+}
+span.name
+{
+    font-weight: bold;
+}
+
+li.feature
+{
+    margin-left:30px;
+    font-weight: bold;
+}
+
+div.api > div.supported-platforms {
+    float: right;
+}
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html b/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html
new file mode 100644 (file)
index 0000000..723ec09
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html
@@ -0,0 +1,1383 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen.css" media="screen">
+<script type="text/javascript" src="snippet.js"></script><title>Tizen API</title>
+</head>
+<body id="page-content" onload="prettyPrint()">
+<div class="api" id="::Tizen">
+<div class="supported-platforms"><img class="wearable-mandatory emulator" title="Mandatory, Supported by Tizen Wearable emulator" src="ww_icon.png"></div>
+<div class="title"><h1>Tizen API</h1></div>
+<div class="brief">
+ This API provides common Tizen functionality.
+        </div>
+<div class="description">
+        <p>
+The API provides the basic definitions that are used in the Tizen Web Device API.
+These include generic callbacks that are invoked when the operations succeed or fail,
+WebAPIError and WebAPIException that give information of the platform's error and
+filter interfaces that are used to make query statements for searching.
+        </p>
+        <p>
+Additionally, this API specifies the location in the ECMAScript hierarchy in which
+the Tizen Web Device API is instantiated (<em>window.tizen</em>).
+        </p>
+        <p>
+For more information on the Tizen features, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen Guide</a>.  
+        </p>
+       </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#typedefs-section">Type Definitions</a><ul class="toc">
+<li>1.1. <a href="#FilterMatchFlag">FilterMatchFlag</a>
+</li>
+<li>1.2. <a href="#SortModeOrder">SortModeOrder</a>
+</li>
+<li>1.3. <a href="#CompositeFilterType">CompositeFilterType</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#interfaces-section">Interfaces</a><ul class="toc">
+<li>2.1. <a href="#TizenObject">TizenObject</a>
+</li>
+<li>2.2. <a href="#Tizen">Tizen</a>
+</li>
+<li>2.3. <a href="#AbstractFilter">AbstractFilter</a>
+</li>
+<li>2.4. <a href="#AttributeFilter">AttributeFilter</a>
+</li>
+<li>2.5. <a href="#AttributeRangeFilter">AttributeRangeFilter</a>
+</li>
+<li>2.6. <a href="#CompositeFilter">CompositeFilter</a>
+</li>
+<li>2.7. <a href="#SortMode">SortMode</a>
+</li>
+<li>2.8. <a href="#SimpleCoordinates">SimpleCoordinates</a>
+</li>
+<li>2.9. <a href="#WebAPIException">WebAPIException</a>
+</li>
+<li>2.10. <a href="#WebAPIError">WebAPIError</a>
+</li>
+<li>2.11. <a href="#SuccessCallback">SuccessCallback</a>
+</li>
+<li>2.12. <a href="#ErrorCallback">ErrorCallback</a>
+</li>
+</ul>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#TizenObject">TizenObject</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#Tizen">Tizen</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AbstractFilter">AbstractFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AttributeFilter">AttributeFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#AttributeRangeFilter">AttributeRangeFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#CompositeFilter">CompositeFilter</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SortMode">SortMode</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SimpleCoordinates">SimpleCoordinates</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#WebAPIException">WebAPIException</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#WebAPIError">WebAPIError</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#SuccessCallback">SuccessCallback</a></td>
+<td>void <a href="#SuccessCallback::onsuccess">onsuccess</a> ()</td>
+</tr>
+<tr>
+<td><a href="#ErrorCallback">ErrorCallback</a></td>
+<td>void <a href="#ErrorCallback::onerror">onerror</a> (<a href="#WebAPIError">WebAPIError</a> error)</td>
+</tr>
+</tbody>
+</table>
+<div class="typedefs" id="typedefs-section">
+<h2>1. Type Definitions</h2>
+<div class="enum" id="FilterMatchFlag">
+<a class="backward-compatibility-anchor" name="::Tizen::FilterMatchFlag"></a><h3>1.1. FilterMatchFlag</h3>
+<div class="brief">
+ Filter match flags.
+          </div>
+<pre class="webidl prettyprint">  enum FilterMatchFlag { "EXACTLY", "FULLSTRING", "CONTAINS", "STARTSWITH", "ENDSWITH", "EXISTS" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+These values are supported:
+          </p>
+          <ul>
+            <li>
+EXACTLY - Indicates that an attribute value should match exactly with the specified default value.
+For strings, this type of comparison is case-sensitive.            </li>
+            <li>
+FULLSTRING - Indicates String-based comparison and that the attribute value should match the whole string (case insensitive).            </li>
+            <li>
+CONTAINS - Indicates that an attribute value should contain the specified string. This type of comparison works only on strings and is case insensitive.            </li>
+            <li>
+STARTSWITH - Indicates that an attribute value should start with the specified string.
+This type of comparison works only on strings and is case insensitive.            </li>
+            <li>
+ENDSWITH - Indicates that an attribute value should end with the specified string. This type of comparison works only on strings and is case insensitive.            </li>
+            <li>
+EXISTS - Indicates that a filter comparison should match if the specified attribute exists.            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="SortModeOrder">
+<a class="backward-compatibility-anchor" name="::Tizen::SortModeOrder"></a><h3>1.2. SortModeOrder</h3>
+<div class="brief">
+ An enumerator that indicates the sorting order.
+          </div>
+<pre class="webidl prettyprint">  enum SortModeOrder { "ASC", "DESC" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+ASC - Indicates that the sorting order is ascending            </li>
+            <li>
+DESC - Indicates that the sorting order is descending            </li>
+          </ul>
+         </div>
+</div>
+<div class="enum" id="CompositeFilterType">
+<a class="backward-compatibility-anchor" name="::Tizen::CompositeFilterType"></a><h3>1.3. CompositeFilterType</h3>
+<div class="brief">
+ An enumerator that indicates the type of composite filter.
+          </div>
+<pre class="webidl prettyprint">  enum CompositeFilterType { "UNION", "INTERSECTION" };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The following values are supported:
+          </p>
+          <ul>
+            <li>
+UNION - Indicates that the composite is a union of filters ("OR" operator)            </li>
+            <li>
+INTERSECTION - Indicates that the composite is an intersection of filters ("AND" operator)            </li>
+          </ul>
+         </div>
+</div>
+</div>
+<div class="interfaces" id="interfaces-section">
+<h2>2. Interfaces</h2>
+<div class="interface" id="TizenObject">
+<a class="backward-compatibility-anchor" name="::Tizen::TizenObject"></a><h3>2.1. TizenObject</h3>
+<div class="brief">
+ Defines the tizen interface as a part of the window global object.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface TizenObject {
+    readonly attribute <a href="#Tizen">Tizen</a> tizen;
+  };</pre>
+<pre class="webidl prettyprint">  Window implements <a href="#TizenObject">TizenObject</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The <em>Tizen</em> interface is always available within the <em>Window </em>object in the ECMAScript hierarchy.
+          </p>
+         </div>
+</div>
+<div class="interface" id="Tizen">
+<a class="backward-compatibility-anchor" name="::Tizen::Tizen"></a><h3>2.2. Tizen</h3>
+<div class="brief">
+ The root of the Tizen Web Device API.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface Tizen {
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+This is the Tizen root interface.
+It is a property of the ECMAScript global object, as specified by the <em>TizenObject</em> interface.
+          </p>
+         </div>
+</div>
+<div class="interface" id="AbstractFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::AbstractFilter"></a><h3>2.3. AbstractFilter</h3>
+<div class="brief">
+ This is a common interface used by different types of
+object filters.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject] interface AbstractFilter {
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Never use this base interface directly, instead use <em>AbstractFilter</em> subtypes,
+such as <em>AttributeFilter</em>, <em>AttributeRangeFilter</em>, and <em>CompositeFilter</em>.
+          </p>
+         </div>
+</div>
+<div class="interface" id="AttributeFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::AttributeFilter"></a><h3>2.4. AttributeFilter</h3>
+<div class="brief">
+ This interface represents a set of filters.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString attributeName, optional <a href="#FilterMatchFlag">FilterMatchFlag</a>? matchFlag, optional any matchValue)]
+  interface AttributeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute <a href="#FilterMatchFlag">FilterMatchFlag</a> matchFlag setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute any matchValue;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+It represents the query statement for the specified value of <em>matchValue</em> by the rule of <em>matchFlag</em>.
+          </p>
+          <p>
+If no <em>matchValue</em> is defined, the filter matches all objects that have the attribute
+defined (same as the "EXISTS" filter works), otherwise, it only matches objects which have an attribute that match
+the specified value.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree".
+ var count = 100;
+ var offset = 0;
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree :' + contents.length);
+ }
+
+ tizen.content.find(findCB, errorCB, null, albumFilter, null, count, offset);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AttributeFilter::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AttributeFilter(DOMString attributeName, optional <a href="#FilterMatchFlag">FilterMatchFlag</a>? matchFlag, optional any matchValue);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AttributeFilter::attributeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">attributeName</span></span><div class="brief">
+ The name of the object attribute used for filtering.
+            </div>
+<div class="description">
+            <p>
+This is the name of the object attribute exactly as it is defined in
+the object's interface. For attributes of complex type, use fully-qualified names
+(such as 'geolocation.latitude' to filter a video or image content's latitude in a geolocation).
+            </p>
+            <p>
+For attributes of an array type, the filter will match if any value in the array
+matches.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeFilter::matchFlag">
+<span class="attrName"><span class="type">FilterMatchFlag </span><span class="name">matchFlag</span></span><div class="brief">
+ The match flag used for attribute-based filtering.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to "EXACTLY".
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeFilter::matchValue">
+<span class="attrName"><span class="type">any </span><span class="name">matchValue</span></span><div class="brief">
+ The value used for matching.
+            </div>
+<div class="description">
+            <p>
+The filter will match if the attribute value matches the given matchValue.
+            </p>
+            <p>
+This value is not used if the <em>matchFlag</em> is set to "EXISTS".
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="AttributeRangeFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::AttributeRangeFilter"></a><h3>2.5. AttributeRangeFilter</h3>
+<div class="brief">
+ <em>AttributeRangeFilter</em> represents a filter based on an object attribute
+which has values that are within a particular range.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString attributeName, optional any initialValue, optional any endValue)]
+  interface AttributeRangeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute any initialValue;
+
+    attribute any endValue;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Range filters, where only one boundary is set, are available.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> var count = 100;
+ var offset = 0;
+ // Use the modifiedDate attribute with a range that starts today and ends in 1 day
+ // (meaning that you search for all contents modified today)
+ var today = new Date();
+ var today_begin = new Date(today.getFullYear(), today.getMonth(),today.getDate());
+ var today_end = new Date(today.getFullYear(), today.getMonth(),today.getDate()+1);
+ var dateRangeFilter = new tizen.AttributeRangeFilter("modifiedDate", today_begin, today_end);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function findCB(contents) {
+     console.log('The contents modified today :' + contents.length);
+ }
+
+ tizen.content.find(findCB, errorCB, null, dateRangeFilter, null, count, offset);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="AttributeRangeFilter::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">AttributeRangeFilter(DOMString attributeName, optional any initialValue, optional any endValue);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="AttributeRangeFilter::attributeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">attributeName</span></span><div class="brief">
+ The name of the object attribute used for filtering.
+            </div>
+<div class="description">
+            <p>
+The value of this attribute is exactly as it is defined in the object's interface. For attributes of complex type, use fully-qualified names
+(such as 'geolocation.latitude' to filter a video or image content's latitude in a geolocation).
+            </p>
+            <p>
+For attributes of array type, the filter will match if any value in the array
+matches.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeRangeFilter::initialValue">
+<span class="attrName"><span class="type">any </span><span class="name">initialValue</span></span><div class="brief">
+ Objects with an attribute that is greater than or equal to <em>initialValue</em> will match.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="AttributeRangeFilter::endValue">
+<span class="attrName"><span class="type">any </span><span class="name">endValue</span></span><div class="brief">
+ Objects with an attribute that is strictly lower than or equal to <em>endValue</em> will match.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>null</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="CompositeFilter">
+<a class="backward-compatibility-anchor" name="::Tizen::CompositeFilter"></a><h3>2.6. CompositeFilter</h3>
+<div class="brief">
+ <em>CompositeFilter</em> represents a set of filters.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(<a href="#CompositeFilterType">CompositeFilterType</a> type, optional <a href="#AbstractFilter">AbstractFilter</a>[]? filters)]
+  interface CompositeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+
+    attribute <a href="#CompositeFilterType">CompositeFilterType</a> type;
+
+    attribute <a href="#AbstractFilter">AbstractFilter</a>[] filters;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+The composite filters can be one of the following 2 types:
+          </p>
+          <ul>
+            <li>
+The union - used to filter objects that match any of the filters it includes.            </li>
+            <li>
+The intersection - used to filter objects that match all the filters it includes.            </li>
+          </ul>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree", by artist "U2".
+ var count = 100;
+ var offset = 0;
+ var artistFilter = new tizen.AttributeFilter("artists", "EXACTLY", "U2");
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+ var filter = new tizen.CompositeFilter("INTERSECTION", [albumFilter, artistFilter]);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree by U2:' + contents.length);
+ }
+
+ tizen.content.find(findCB, errorCB, null, filter, null, count, offset);
+ </pre>
+</div>
+        
+      <div class="constructors">
+<h4 id="CompositeFilter::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">CompositeFilter(<a href="#CompositeFilterType">CompositeFilterType</a> type, optional <a href="#AbstractFilter">AbstractFilter</a>[]? filters);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="CompositeFilter::type">
+<span class="attrName"><span class="type">CompositeFilterType </span><span class="name">type</span></span><div class="brief">
+ The composite filter type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="CompositeFilter::filters">
+<span class="attrName"><span class="type">AbstractFilter[]
+                      </span><span class="name">filters</span></span><div class="brief">
+ The list of filters in the composite filter.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SortMode">
+<a class="backward-compatibility-anchor" name="::Tizen::SortMode"></a><h3>2.7. SortMode</h3>
+<div class="brief">
+ <em>SortMode</em> is a common interface used for sorting of queried data.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(DOMString attributeName, optional <a href="#SortModeOrder">SortModeOrder</a>? order)]
+  interface SortMode {
+    attribute DOMString attributeName;
+
+    attribute <a href="#SortModeOrder">SortModeOrder</a> order setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Note that the sorting result of list type attributes is not determined.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> // The following example retrieves all songs from the album "The Joshua Tree", by artist "U2", ordered by the track number.
+ var count = 100;
+ var offset = 0;
+ var sortMode = new tizen.SortMode("trackNumber", "ASC");
+ var artistFilter = new tizen.AttributeFilter("artists", "EXACTLY", "U2");
+ var albumFilter = new tizen.AttributeFilter("album", "EXACTLY", "The Joshua Tree");
+ var filter = new tizen.CompositeFilter("INTERSECTION", [albumFilter, artistFilter]);
+
+ function errorCB(err) {
+     console.log( 'The following error occurred: ' +  err.name);
+ }
+
+ function printContent(content, index, contents) {
+     console.log('Track: ' + content.trackNumber + ' Title: ' + content.title + 'Duration: ' + content.duration + 'URL: ' + content.contentURI + 'MIME: ' + content.mimeType);
+ }
+
+ function findCB(contents) {
+     console.log('The Joshua Tree by U2:');
+     contents.forEach(printContent);
+     // Increase the offset as much as the count and then find content again.
+     if (contents.length == count) {
+         offset += count;
+         tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+     }
+ }
+
+ tizen.content.find(findCB, errorCB, null, filter, sortMode, count, offset);
+ </pre>
+</div>
+<div class="constructors">
+<h4 id="SortMode::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">SortMode(DOMString attributeName, optional <a href="#SortModeOrder">SortModeOrder</a>? order);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SortMode::attributeName">
+<span class="attrName"><span class="type">DOMString </span><span class="name">attributeName</span></span><div class="brief">
+ The name of the object attribute used for sorting.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SortMode::order">
+<span class="attrName"><span class="type">SortModeOrder </span><span class="name">order</span></span><div class="brief">
+ The type of the sorting.
+            </div>
+<div class="description">
+            <p>
+By default, this attribute is set to <var>ASC</var>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SimpleCoordinates">
+<a class="backward-compatibility-anchor" name="::Tizen::SimpleCoordinates"></a><h3>2.8. SimpleCoordinates</h3>
+<div class="brief">
+ <em>SimpleCoordinates</em> represents a point (latitude and longitude) in the map coordinate system.
+          </div>
+<pre class="webidl prettyprint">  [Constructor(double latitude, double longitude)]
+  interface SimpleCoordinates {
+    attribute double latitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute double longitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+Latitude and longitude are of the WGS84 datum.
+          </p>
+         </div>
+<div class="constructors">
+<h4 id="SimpleCoordinates::constructor">Constructors</h4>
+<dl><pre class="webidl prettyprint">SimpleCoordinates(double latitude, double longitude);</pre></dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="SimpleCoordinates::latitude">
+<span class="attrName"><span class="type">double </span><span class="name">latitude</span></span><div class="brief">
+ Latitude.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+<li class="attribute" id="SimpleCoordinates::longitude">
+<span class="attrName"><span class="type">double </span><span class="name">longitude</span></span><div class="brief">
+ Longitude.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="WebAPIException">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException"></a><h3>2.9. WebAPIException</h3>
+<div class="brief">
+ Generic exception interface.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface WebAPIException {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+
+    const unsigned short INDEX_SIZE_ERR = 1;
+    const unsigned short DOMSTRING_SIZE_ERR = 2; 
+    const unsigned short HIERARCHY_REQUEST_ERR = 3;
+    const unsigned short WRONG_DOCUMENT_ERR = 4;
+    const unsigned short INVALID_CHARACTER_ERR = 5;
+    const unsigned short NO_DATA_ALLOWED_ERR = 6; 
+    const unsigned short NO_MODIFICATION_ALLOWED_ERR = 7;
+    const unsigned short NOT_FOUND_ERR = 8;
+    const unsigned short NOT_SUPPORTED_ERR = 9;
+    const unsigned short INUSE_ATTRIBUTE_ERR = 10; 
+    const unsigned short INVALID_STATE_ERR = 11;
+    const unsigned short SYNTAX_ERR = 12;
+    const unsigned short INVALID_MODIFICATION_ERR = 13;
+    const unsigned short NAMESPACE_ERR = 14;
+    const unsigned short INVALID_ACCESS_ERR = 15;
+    const unsigned short VALIDATION_ERR = 16; 
+    const unsigned short TYPE_MISMATCH_ERR = 17;
+    const unsigned short SECURITY_ERR = 18;
+    const unsigned short NETWORK_ERR = 19;
+    const unsigned short ABORT_ERR = 20;
+    const unsigned short URL_MISMATCH_ERR = 21;
+    const unsigned short QUOTA_EXCEEDED_ERR = 22;
+    const unsigned short TIMEOUT_ERR = 23;
+    const unsigned short INVALID_NODE_TYPE_ERR = 24;
+    const unsigned short DATA_CLONE_ERR = 25;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This interface will be used by the APIs to throw errors synchronously.
+          </p>
+          <p>
+The attempt to set an attribute value may or may not raise WebAPIException synchronously with error type TypeMismatchError or InvalidValuesError.
+          </p>
+         </div>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="WebAPIException::INDEX_SIZE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INDEX_SIZE_ERR"></a><span class="name">INDEX_SIZE_ERR</span><div class="brief">
+ The index is not in the allowed range.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::DOMSTRING_SIZE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::DOMSTRING_SIZE_ERR"></a><span class="name">DOMSTRING_SIZE_ERR</span><div class="brief">
+ The specified range of text is too large.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::HIERARCHY_REQUEST_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::HIERARCHY_REQUEST_ERR"></a><span class="name">HIERARCHY_REQUEST_ERR</span><div class="brief">
+ The operation would yield an incorrect node tree.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::WRONG_DOCUMENT_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::WRONG_DOCUMENT_ERR"></a><span class="name">WRONG_DOCUMENT_ERR</span><div class="brief">
+ The object is in the wrong document.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_CHARACTER_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_CHARACTER_ERR"></a><span class="name">INVALID_CHARACTER_ERR</span><div class="brief">
+ The string contains invalid characters.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NO_DATA_ALLOWED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NO_DATA_ALLOWED_ERR"></a><span class="name">NO_DATA_ALLOWED_ERR</span><div class="brief">
+ Data is specified for a node that does not support data.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NO_MODIFICATION_ALLOWED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NO_MODIFICATION_ALLOWED_ERR"></a><span class="name">NO_MODIFICATION_ALLOWED_ERR</span><div class="brief">
+ The object cannot be modified.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NOT_FOUND_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NOT_FOUND_ERR"></a><span class="name">NOT_FOUND_ERR</span><div class="brief">
+ The object cannot be found here.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NOT_SUPPORTED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NOT_SUPPORTED_ERR"></a><span class="name">NOT_SUPPORTED_ERR</span><div class="brief">
+ The operation is not supported.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INUSE_ATTRIBUTE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INUSE_ATTRIBUTE_ERR"></a><span class="name">INUSE_ATTRIBUTE_ERR</span><div class="brief">
+ The specified attribute is already in use elsewhere.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_STATE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_STATE_ERR"></a><span class="name">INVALID_STATE_ERR</span><div class="brief">
+ The object is in an invalid state.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::SYNTAX_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::SYNTAX_ERR"></a><span class="name">SYNTAX_ERR</span><div class="brief">
+ The string did not match the expected pattern.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_MODIFICATION_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_MODIFICATION_ERR"></a><span class="name">INVALID_MODIFICATION_ERR</span><div class="brief">
+ The object cannot be modified in this way.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NAMESPACE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NAMESPACE_ERR"></a><span class="name">NAMESPACE_ERR</span><div class="brief">
+ The operation is not allowed by Namespaces in XML.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_ACCESS_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_ACCESS_ERR"></a><span class="name">INVALID_ACCESS_ERR</span><div class="brief">
+ The object does not support the operation or argument.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::VALIDATION_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::VALIDATION_ERR"></a><span class="name">VALIDATION_ERR</span><div class="brief">
+ The operation would cause the node to fail validation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::TYPE_MISMATCH_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::TYPE_MISMATCH_ERR"></a><span class="name">TYPE_MISMATCH_ERR</span><div class="brief">
+ The type of the object does not match the expected type.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::SECURITY_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::SECURITY_ERR"></a><span class="name">SECURITY_ERR</span><div class="brief">
+ The operation is insecure.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::NETWORK_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::NETWORK_ERR"></a><span class="name">NETWORK_ERR</span><div class="brief">
+ A network error occurred.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::ABORT_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::ABORT_ERR"></a><span class="name">ABORT_ERR</span><div class="brief">
+ The operation has been aborted.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::URL_MISMATCH_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::URL_MISMATCH_ERR"></a><span class="name">URL_MISMATCH_ERR</span><div class="brief">
+ The given URL does not match another URL.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::QUOTA_EXCEEDED_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::QUOTA_EXCEEDED_ERR"></a><span class="name">QUOTA_EXCEEDED_ERR</span><div class="brief">
+ The quota has been exceeded.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::TIMEOUT_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::TIMEOUT_ERR"></a><span class="name">TIMEOUT_ERR</span><div class="brief">
+ The operation has timed out.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::INVALID_NODE_TYPE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::INVALID_NODE_TYPE_ERR"></a><span class="name">INVALID_NODE_TYPE_ERR</span><div class="brief">
+ The supplied node is incorrect or has an incorrect ancestor for this operation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+<li class="const" id="WebAPIException::DATA_CLONE_ERR">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIException::DATA_CLONE_ERR"></a><span class="name">DATA_CLONE_ERR</span><div class="brief">
+ The object cannot be cloned.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="WebAPIException::code">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">code</span></span><div class="brief">
+ 16-bit error code.
+            </div>
+<div class="description">
+            <p>
+For the possible values of this attribute, see <a href="http://www.w3.org/TR/dom/#domexception">DOMException</a>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIException::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An error type. The name attribute must return the value it had been initialized with.
+            </div>
+<div class="description">
+            <p>
+This attribute can have one of the following values:
+            </p>
+            <ul>
+              <li>
+UnknownError - An unknown error has occurred.              </li>
+              <li>
+InvalidValuesError - The content of an object does not contain valid values.              </li>
+              <li>
+IOError - An error occurred in communication with the underlying implementation and so the requested method cannot be completed.              </li>
+              <li>
+ServiceNotAvailableError - The requested service is not available.              </li>
+            </ul>
+            <p>
+For other possible values of this attribute, see the values defined in <a href="http://www.w3.org/TR/dom/#error-names-0">DOM error names</a>            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIException::message">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">message</span></span><div class="brief">
+ An error message that describes the details of an encountered error.
+            </div>
+<div class="description">
+            <p>
+This attribute is mainly intended to be used for developers rather than end users, so it should not be used directly in the user interfaces as it is.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="WebAPIError">
+<a class="backward-compatibility-anchor" name="::Tizen::WebAPIError"></a><h3>2.10. WebAPIError</h3>
+<div class="brief">
+ Generic error interface.
+          </div>
+<pre class="webidl prettyprint">  [NoInterfaceObject]
+  interface WebAPIError {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.0
+          </p>
+<div class="description">
+          <p>
+This interface will be used by the APIs in order to return them in the error callback of asynchronous methods.
+          </p>
+         </div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="WebAPIError::code">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">code</span></span><div class="brief">
+ 16-bit error code.
+            </div>
+<div class="description">
+            <p>
+Possible values are defined in <a href="http://www.w3.org/TR/dom/#domexception">DOMException</a>.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIError::name">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">name</span></span><div class="brief">
+ An error type. The name attribute must return the value it had been initialized with.
+            </div>
+<div class="description">
+            <p>
+This attribute can have one of the following values:
+            </p>
+            <ul>
+              <li>
+UnknownError - An unknown error has occurred.              </li>
+              <li>
+InvalidValuesError - The content of an object does not contain valid values.              </li>
+              <li>
+IOError - An error occurred in communication with the underlying implementation and so the requested method cannot be completed.              </li>
+              <li>
+ServiceNotAvailableError - The requested service is not available.              </li>
+            </ul>
+            <p>
+For other possible values of this attribute, see the values defined in <a href="http://www.w3.org/TR/dom/#error-names-0">DOM error names</a>            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+<li class="attribute" id="WebAPIError::message">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString </span><span class="name">message</span></span><div class="brief">
+ An error message that describes the details of the error encountered.
+            </div>
+<div class="description">
+            <p>
+This attribute is not intended to be used directly in the user interfaces
+as it is mainly intended to be useful for developers rather than end users.
+            </p>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.0
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="interface" id="SuccessCallback">
+<a class="backward-compatibility-anchor" name="::Tizen::SuccessCallback"></a><h3>2.11. SuccessCallback</h3>
+<div class="brief">
+ This interface is used in methods that do not require any return value in the success callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface SuccessCallback {
+    void onsuccess ();
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+In case of successful execution of an asynchronous call, <em>SuccessCallback</em> or an API defined callback must be called immediately to notify the user.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">     function onSuccess() {
+         console.log("Application launched successfully");
+     }
+     tizen.application.launch('0pnxz8hbsr.MyFiles', onSuccess);
+ </pre>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="SuccessCallback::onsuccess">
+<a class="backward-compatibility-anchor" name="::Tizen::SuccessCallback::onsuccess"></a><code><b><span class="methodName">onsuccess</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method invoked when the asynchronous call completes successfully.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onsuccess();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="ErrorCallback">
+<a class="backward-compatibility-anchor" name="::Tizen::ErrorCallback"></a><h3>2.12. ErrorCallback</h3>
+<div class="brief">
+ This interface is used in methods that require only an error as an input parameter in the error callback.
+          </div>
+<pre class="webidl prettyprint">  [Callback=FunctionOnly, NoInterfaceObject]
+  interface ErrorCallback {
+
+    void onerror (<a href="#WebAPIError">WebAPIError</a> error);
+  };</pre>
+<p><span class="version">
+            Since: </span>
+ 1.0
+          </p>
+<div class="description">
+          <p>
+If an invalid function (such as null) is passed to the API that accepts ErrorCallback,
+it silently fails and there is no further action.
+          </p>
+         </div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint">  // Define the error callback.
+  function onerror(error) {
+    console.log(error.message);
+  }
+  function onsuccess() {
+      console.log("The application has launched successfully");
+  }
+
+  tizen.application.launch("targetApp0.main", onsuccess, onerror);
+ </pre>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="ErrorCallback::onerror">
+<a class="backward-compatibility-anchor" name="::Tizen::ErrorCallback::onerror"></a><code><b><span class="methodName">onerror</span></b></code>
+</dt>
+<dd>
+<div class="brief">
+ Method that is invoked when an error occurs.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void onerror(<a href="#WebAPIError">WebAPIError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 1.0
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">error</span>: 
+ Generic error.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Tizen {
+  enum FilterMatchFlag { "EXACTLY", "FULLSTRING", "CONTAINS", "STARTSWITH", "ENDSWITH", "EXISTS" };
+
+  enum SortModeOrder { "ASC", "DESC" };
+
+  enum CompositeFilterType { "UNION", "INTERSECTION" };
+
+  [NoInterfaceObject] interface TizenObject {
+    readonly attribute <a href="#Tizen">Tizen</a> tizen;
+  };
+  Window implements <a href="#TizenObject">TizenObject</a>;
+
+  [NoInterfaceObject] interface Tizen {
+  };
+
+  [NoInterfaceObject] interface AbstractFilter {
+  };
+
+  [Constructor(DOMString attributeName, optional <a href="#FilterMatchFlag">FilterMatchFlag</a>? matchFlag, optional any matchValue)]
+  interface AttributeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute <a href="#FilterMatchFlag">FilterMatchFlag</a> matchFlag setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute any matchValue;
+  };
+
+  [Constructor(DOMString attributeName, optional any initialValue, optional any endValue)]
+  interface AttributeRangeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+    attribute DOMString attributeName;
+
+    attribute any initialValue;
+
+    attribute any endValue;
+  };
+
+  [Constructor(<a href="#CompositeFilterType">CompositeFilterType</a> type, optional <a href="#AbstractFilter">AbstractFilter</a>[]? filters)]
+  interface CompositeFilter : <a href="#AbstractFilter">AbstractFilter</a> {
+
+    attribute <a href="#CompositeFilterType">CompositeFilterType</a> type;
+
+    attribute <a href="#AbstractFilter">AbstractFilter</a>[] filters;
+  };
+
+  [Constructor(DOMString attributeName, optional <a href="#SortModeOrder">SortModeOrder</a>? order)]
+  interface SortMode {
+    attribute DOMString attributeName;
+
+    attribute <a href="#SortModeOrder">SortModeOrder</a> order setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };
+
+  [Constructor(double latitude, double longitude)]
+  interface SimpleCoordinates {
+    attribute double latitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+
+    attribute double longitude setraises(<a href="#WebAPIException">WebAPIException</a>);
+  };
+
+  [NoInterfaceObject]
+  interface WebAPIException {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+
+    const unsigned short INDEX_SIZE_ERR = 1;
+    const unsigned short DOMSTRING_SIZE_ERR = 2; 
+    const unsigned short HIERARCHY_REQUEST_ERR = 3;
+    const unsigned short WRONG_DOCUMENT_ERR = 4;
+    const unsigned short INVALID_CHARACTER_ERR = 5;
+    const unsigned short NO_DATA_ALLOWED_ERR = 6; 
+    const unsigned short NO_MODIFICATION_ALLOWED_ERR = 7;
+    const unsigned short NOT_FOUND_ERR = 8;
+    const unsigned short NOT_SUPPORTED_ERR = 9;
+    const unsigned short INUSE_ATTRIBUTE_ERR = 10; 
+    const unsigned short INVALID_STATE_ERR = 11;
+    const unsigned short SYNTAX_ERR = 12;
+    const unsigned short INVALID_MODIFICATION_ERR = 13;
+    const unsigned short NAMESPACE_ERR = 14;
+    const unsigned short INVALID_ACCESS_ERR = 15;
+    const unsigned short VALIDATION_ERR = 16; 
+    const unsigned short TYPE_MISMATCH_ERR = 17;
+    const unsigned short SECURITY_ERR = 18;
+    const unsigned short NETWORK_ERR = 19;
+    const unsigned short ABORT_ERR = 20;
+    const unsigned short URL_MISMATCH_ERR = 21;
+    const unsigned short QUOTA_EXCEEDED_ERR = 22;
+    const unsigned short TIMEOUT_ERR = 23;
+    const unsigned short INVALID_NODE_TYPE_ERR = 24;
+    const unsigned short DATA_CLONE_ERR = 25;
+  };
+
+  [NoInterfaceObject]
+  interface WebAPIError {
+    readonly attribute unsigned short code;
+
+    readonly attribute DOMString name;
+
+    readonly attribute DOMString message;
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface SuccessCallback {
+    void onsuccess ();
+  };
+
+  [Callback=FunctionOnly, NoInterfaceObject]
+  interface ErrorCallback {
+
+    void onerror (<a href="#WebAPIError">WebAPIError</a> error);
+  };
+};</pre>
+</div>
+<div id="page-footer">
+<div class="copyright" align="center">
+         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>.
+            </div>
+<script type="text/javascript">
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.js b/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.js
new file mode 100644 (file)
index 0000000..5d036c4
--- /dev/null
+++ b/org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.js
@@ -0,0 +1,1529 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ * <p>
+ *
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Walks the DOM returning a properly escaped version of innerHTML.
+  * @param {Node} node
+  * @param {Array.<string>} out output buffer that receives chunks of HTML.
+  */
+window['PR_normalizedHtml']
+
+/** Contains functions for creating and registering new language handlers.
+  * @type {Object}
+  */
+  = window['PR']
+
+/** Pretty print a chunk of code.
+  *
+  * @param {string} sourceCodeHtml code as html
+  * @return {string} code as html, but prettier
+  */
+  = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+  * {@code class=prettyprint} and prettify them.
+  * @param {Function?} opt_whenDone if specified, called when the last entry
+  *     has been finished.
+  */
+  = window['prettyPrint'] = void 0;
+
+/** browser detection. @extern @returns false if not IE, otherwise the major version. */
+window['_pr_isIE6'] = function () {
+  var ieVersion = navigator && navigator.userAgent &&
+      navigator.userAgent.match(/\bMSIE ([678])\./);
+  ieVersion = ieVersion ? +ieVersion[1] : false;
+  window['_pr_isIE6'] = function () { return ieVersion; };
+  return ieVersion;
+};
+
+
+(function () {
+  // Keyword lists for various languages.
+  var FLOW_CONTROL_KEYWORDS =
+      "break continue do else for if return while ";
+  var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+      "double enum extern float goto int long register short signed sizeof " +
+      "static struct switch typedef union unsigned void volatile ";
+  var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+      "new operator private protected public this throw true try typeof ";
+  var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+      "concept concept_map const_cast constexpr decltype " +
+      "dynamic_cast explicit export friend inline late_check " +
+      "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+      "template typeid typename using virtual wchar_t where ";
+  var JAVA_KEYWORDS = COMMON_KEYWORDS +
+      "abstract boolean byte extends final finally implements import " +
+      "instanceof null native package strictfp super synchronized throws " +
+      "transient ";
+  var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+      "as base by checked decimal delegate descending event " +
+      "fixed foreach from group implicit in interface internal into is lock " +
+      "object out override orderby params partial readonly ref sbyte sealed " +
+      "stackalloc string select uint ulong unchecked unsafe ushort var ";
+  var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+      "debugger eval export function get null set undefined var with " +
+      "Infinity NaN ";
+  var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+      "goto if import last local my next no our print package redo require " +
+      "sub undef unless until use wantarray while BEGIN END ";
+  var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+      "elif except exec finally from global import in is lambda " +
+      "nonlocal not or pass print raise try with yield " +
+      "False True None ";
+  var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+      " defined elsif end ensure false in module next nil not or redo rescue " +
+      "retry self super then true undef unless until when yield BEGIN END ";
+  var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+      "function in local set then until ";
+  var ALL_KEYWORDS = (
+      CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+      PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+  // token style names.  correspond to css classes
+  /** token style for a string literal */
+  var PR_STRING = 'str';
+  /** token style for a keyword */
+  var PR_KEYWORD = 'kwd';
+  /** token style for a comment */
+  var PR_COMMENT = 'com';
+  /** token style for a type */
+  var PR_TYPE = 'typ';
+  /** token style for a literal value.  e.g. 1, null, true. */
+  var PR_LITERAL = 'lit';
+  /** token style for a punctuation string. */
+  var PR_PUNCTUATION = 'pun';
+  /** token style for a punctuation string. */
+  var PR_PLAIN = 'pln';
+
+  /** token style for an sgml tag. */
+  var PR_TAG = 'tag';
+  /** token style for a markup declaration such as a DOCTYPE. */
+  var PR_DECLARATION = 'dec';
+  /** token style for embedded source. */
+  var PR_SOURCE = 'src';
+  /** token style for an sgml attribute name. */
+  var PR_ATTRIB_NAME = 'atn';
+  /** token style for an sgml attribute value. */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   */
+  var PR_NOCODE = 'nocode';
+
+  /** A set of tokens that can precede a regular expression literal in
+    * javascript.
+    * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+    * list, but I've removed ones that might be problematic when seen in
+    * languages that don't support regular expression literals.
+    *
+    * <p>Specifically, I've removed any keywords that can't precede a regexp
+    * literal in a syntactically legal javascript program, and I've removed the
+    * "in" keyword since it's not a keyword in many languages, and might be used
+    * as a count of inches.
+    *
+    * <p>The link a above does not accurately describe EcmaScript rules since
+    * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+    * very well in practice.
+    *
+    * @private
+    */
+  var REGEXP_PRECEDER_PATTERN = function () {
+      var preceders = [
+          "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+          "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+          "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+          "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+          ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+          "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+          "||=", "~" /* handles =~ and !~ */,
+          "break", "case", "continue", "delete",
+          "do", "else", "finally", "instanceof",
+          "return", "throw", "try", "typeof"
+          ];
+      var pattern = '(?:^^|[+-]';
+      for (var i = 0; i < preceders.length; ++i) {
+        pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+      }
+      pattern += ')\\s*';  // matches at end, and matches empty string
+      return pattern;
+      // CAVEAT: this does not properly handle the case where a regular
+      // expression immediately follows another since a regular expression may
+      // have flags for case-sensitivity and the like.  Having regexp tokens
+      // adjacent is not valid in any language I'm aware of, so I'm punting.
+      // TODO: maybe style special characters inside a regexp as punctuation.
+    }();
+
+  // Define regexps here so that the interpreter doesn't have to create an
+  // object each time the function containing them is called.
+  // The language spec requires a new object created even if you don't access
+  // the $1 members.
+  var pr_amp = /&/g;
+  var pr_lt = /</g;
+  var pr_gt = />/g;
+  var pr_quot = /\"/g;
+  /** like textToHtml but escapes double quotes to be attribute safe. */
+  function attribToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;')
+        .replace(pr_quot, '&quot;');
+  }
+
+  /** escapest html special characters to html. */
+  function textToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;');
+  }
+
+
+  var pr_ltEnt = /&lt;/g;
+  var pr_gtEnt = /&gt;/g;
+  var pr_aposEnt = /&apos;/g;
+  var pr_quotEnt = /&quot;/g;
+  var pr_ampEnt = /&amp;/g;
+  var pr_nbspEnt = /&nbsp;/g;
+  /** unescapes html to plain text. */
+  function htmlToText(html) {
+    var pos = html.indexOf('&');
+    if (pos < 0) { return html; }
+    // Handle numeric entities specially.  We can't use functional substitution
+    // since that doesn't work in older versions of Safari.
+    // These should be rare since most browsers convert them to normal chars.
+    for (--pos; (pos = html.indexOf('&#', pos + 1)) >= 0;) {
+      var end = html.indexOf(';', pos);
+      if (end >= 0) {
+        var num = html.substring(pos + 3, end);
+        var radix = 10;
+        if (num && num.charAt(0) === 'x') {
+          num = num.substring(1);
+          radix = 16;
+        }
+        var codePoint = parseInt(num, radix);
+        if (!isNaN(codePoint)) {
+          html = (html.substring(0, pos) + String.fromCharCode(codePoint) +
+                  html.substring(end + 1));
+        }
+      }
+    }
+
+    return html.replace(pr_ltEnt, '<')
+        .replace(pr_gtEnt, '>')
+        .replace(pr_aposEnt, "'")
+        .replace(pr_quotEnt, '"')
+        .replace(pr_nbspEnt, ' ')
+        .replace(pr_ampEnt, '&');
+  }
+
+  /** is the given node's innerHTML normally unescaped? */
+  function isRawContent(node) {
+    return 'XMP' === node.tagName;
+  }
+
+  var newlineRe = /[\r\n]/g;
+  /**
+   * Are newlines and adjacent spaces significant in the given node's innerHTML?
+   */
+  function isPreformatted(node, content) {
+    // PRE means preformatted, and is a very common case, so don't create
+    // unnecessary computed style objects.
+    if ('PRE' === node.tagName) { return true; }
+    if (!newlineRe.test(content)) { return true; }  // Don't care
+    var whitespace = '';
+    // For disconnected nodes, IE has no currentStyle.
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      // Firefox makes a best guess if node is disconnected whereas Safari
+      // returns the empty string.
+      whitespace = window.getComputedStyle(node, null).whiteSpace;
+    }
+    return !whitespace || whitespace === 'pre';
+  }
+
+  function normalizedHtml(node, out, opt_sortAttrs) {
+    switch (node.nodeType) {
+      case 1:  // an element
+        var name = node.tagName.toLowerCase();
+
+        out.push('<', name);
+        var attrs = node.attributes;
+        var n = attrs.length;
+        if (n) {
+          if (opt_sortAttrs) {
+            var sortedAttrs = [];
+            for (var i = n; --i >= 0;) { sortedAttrs[i] = attrs[i]; }
+            sortedAttrs.sort(function (a, b) {
+                return (a.name < b.name) ? -1 : a.name === b.name ? 0 : 1;
+              });
+            attrs = sortedAttrs;
+          }
+          for (var i = 0; i < n; ++i) {
+            var attr = attrs[i];
+            if (!attr.specified) { continue; }
+            out.push(' ', attr.name.toLowerCase(),
+                     '="', attribToHtml(attr.value), '"');
+          }
+        }
+        out.push('>');
+        for (var child = node.firstChild; child; child = child.nextSibling) {
+          normalizedHtml(child, out, opt_sortAttrs);
+        }
+        if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
+          out.push('<\/', name, '>');
+        }
+        break;
+      case 3: case 4: // text
+        out.push(textToHtml(node.nodeValue));
+        break;
+    }
+  }
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union o the sets o strings matched d by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+
+    function decodeEscape(charsetPart) {
+      if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); }
+      switch (charsetPart.charAt(1)) {
+        case 'b': return 8;
+        case 't': return 9;
+        case 'n': return 0xa;
+        case 'v': return 0xb;
+        case 'f': return 0xc;
+        case 'r': return 0xd;
+        case 'u': case 'x':
+          return parseInt(charsetPart.substring(2), 16)
+              || charsetPart.charCodeAt(1);
+        case '0': case '1': case '2': case '3': case '4':
+        case '5': case '6': case '7':
+          return parseInt(charsetPart.substring(1), 8);
+        default: return charsetPart.charCodeAt(1);
+      }
+    }
+
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        switch (p) {
+          case '\\B': case '\\b':
+          case '\\D': case '\\d':
+          case '\\S': case '\\s':
+          case '\\W': case '\\w':
+            groups.push(p);
+            continue;
+        }
+        var start = decodeEscape(p);
+        var end;
+        if (i + 2 < n && '-' === charsetParts[i + 1]) {
+          end = decodeEscape(charsetParts[i + 2]);
+          i += 2;
+        } else {
+          end = start;
+        }
+        ranges.push([start, end]);
+        // If the range might intersect letters, then expand it.
+        if (!(end < 65 || start > 122)) {
+          if (!(end < 65 || start > 90)) {
+            ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+          }
+          if (!(end < 97 || start > 122)) {
+            ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+          }
+        }
+      }
+
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+
+      // Expand letters to groupts to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+
+      return parts.join('');
+    }
+
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+  var PR_innerHtmlWorks = null;
+  function getInnerHtml(node) {
+    // inner html is hopelessly broken in Safari 2.0.4 when the content is
+    // an html description of well formed XML and the containing tag is a PRE
+    // tag, so we detect that case and emulate innerHTML.
+    if (null === PR_innerHtmlWorks) {
+      var testNode = document.createElement('PRE');
+      testNode.appendChild(
+          document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));
+      PR_innerHtmlWorks = !/</.test(testNode.innerHTML);
+    }
+
+    if (PR_innerHtmlWorks) {
+      var content = node.innerHTML;
+      // XMP tags contain unescaped entities so require special handling.
+      if (isRawContent(node)) {
+        content = textToHtml(content);
+      } else if (!isPreformatted(node, content)) {
+        content = content.replace(/(<br\s*\/?>)[\r\n]+/g, '$1')
+            .replace(/(?:[\r\n]+[ \t]*)+/g, ' ');
+      }
+      return content;
+    }
+
+    var out = [];
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      normalizedHtml(child, out);
+    }
+    return out.join('');
+  }
+
+  /** returns a function that expand tabs to spaces.  This function can be fed
+    * successive chunks of text, and will maintain its own internal state to
+    * keep track of how tabs are expanded.
+    * @return {function (string) : string} a function that takes
+    *   plain text and return the text with tabs expanded.
+    * @private
+    */
+  function makeTabExpander(tabWidth) {
+    var SPACES = '                ';
+    var charInLine = 0;
+
+    return function (plainText) {
+      // walk over each character looking for tabs and newlines.
+      // On tabs, expand them.  On newlines, reset charInLine.
+      // Otherwise increment charInLine
+      var out = null;
+      var pos = 0;
+      for (var i = 0, n = plainText.length; i < n; ++i) {
+        var ch = plainText.charAt(i);
+
+        switch (ch) {
+          case '\t':
+            if (!out) { out = []; }
+            out.push(plainText.substring(pos, i));
+            // calculate how much space we need in front of this part
+            // nSpaces is the amount of padding -- the number of spaces needed
+            // to move us to the next column, where columns occur at factors of
+            // tabWidth.
+            var nSpaces = tabWidth - (charInLine % tabWidth);
+            charInLine += nSpaces;
+            for (; nSpaces >= 0; nSpaces -= SPACES.length) {
+              out.push(SPACES.substring(0, nSpaces));
+            }
+            pos = i + 1;
+            break;
+          case '\n':
+            charInLine = 0;
+            break;
+          default:
+            ++charInLine;
+        }
+      }
+      if (!out) { return plainText; }
+      out.push(plainText.substring(pos));
+      return out.join('');
+    };
+  }
+
+  var pr_chunkPattern = new RegExp(
+      '[^<]+'  // A run of characters other than '<'
+      + '|<\!--[\\s\\S]*?--\>'  // an HTML comment
+      + '|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>'  // a CDATA section
+      // a probable tag that should not be highlighted
+      + '|<\/?[a-zA-Z](?:[^>\"\']|\'[^\']*\'|\"[^\"]*\")*>'
+      + '|<',  // A '<' that does not begin a larger chunk
+      'g');
+  var pr_commentPrefix = /^<\!--/;
+  var pr_cdataPrefix = /^<!\[CDATA\[/;
+  var pr_brPrefix = /^<br\b/i;
+  var pr_tagNameRe = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/;
+
+  /** split markup into chunks of html tags (style null) and
+    * plain text (style {@link #PR_PLAIN}), converting tags which are
+    * significant for tokenization (<br>) into their textual equivalent.
+    *
+    * @param {string} s html where whitespace is considered significant.
+    * @return {Object} source code and extracted tags.
+    * @private
+    */
+  function extractTags(s) {
+    // since the pattern has the 'g' modifier and defines no capturing groups,
+    // this will return a list of all chunks which we then classify and wrap as
+    // PR_Tokens
+    var matches = s.match(pr_chunkPattern);
+    var sourceBuf = [];
+    var sourceBufLen = 0;
+    var extractedTags = [];
+    if (matches) {
+      for (var i = 0, n = matches.length; i < n; ++i) {
+        var match = matches[i];
+        if (match.length > 1 && match.charAt(0) === '<') {
+          if (pr_commentPrefix.test(match)) { continue; }
+          if (pr_cdataPrefix.test(match)) {
+            // strip CDATA prefix and suffix.  Don't unescape since it's CDATA
+            sourceBuf.push(match.substring(9, match.length - 3));
+            sourceBufLen += match.length - 12;
+          } else if (pr_brPrefix.test(match)) {
+            // <br> tags are lexically significant so convert them to text.
+            // This is undone later.
+            sourceBuf.push('\n');
+            ++sourceBufLen;
+          } else {
+            if (match.indexOf(PR_NOCODE) >= 0 && isNoCodeTag(match)) {
+              // A <span class="nocode"> will start a section that should be
+              // ignored.  Continue walking the list until we see a matching end
+              // tag.
+              var name = match.match(pr_tagNameRe)[2];
+              var depth = 1;
+              var j;
+              end_tag_loop:
+              for (j = i + 1; j < n; ++j) {
+                var name2 = matches[j].match(pr_tagNameRe);
+                if (name2 && name2[2] === name) {
+                  if (name2[1] === '/') {
+                    if (--depth === 0) { break end_tag_loop; }
+                  } else {
+                    ++depth;
+                  }
+                }
+              }
+              if (j < n) {
+                extractedTags.push(
+                    sourceBufLen, matches.slice(i, j + 1).join(''));
+                i = j;
+              } else {  // Ignore unclosed sections.
+                extractedTags.push(sourceBufLen, match);
+              }
+            } else {
+              extractedTags.push(sourceBufLen, match);
+            }
+          }
+        } else {
+          var literalText = htmlToText(match);
+          sourceBuf.push(literalText);
+          sourceBufLen += literalText.length;
+        }
+      }
+    }
+    return { source: sourceBuf.join(''), tags: extractedTags };
+  }
+
+  /** True if the given tag contains a class attribute with the nocode class. */
+  function isNoCodeTag(tag) {
+    return !!tag
+        // First canonicalize the representation of attributes
+        .replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,
+                 ' $1="$2$3$4"')
+        // Then look for the attribute we want.
+        .match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/);
+  }
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      source: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+    var notWs = /\S/;
+
+    /**
+     * Lexes job.source and produces an output array job.decorations of style
+     * classes preceded by the position at which they start in job.source in
+     * order.
+     *
+     * @param {Object} job an object like {@code
+     *    source: {string} sourceText plain text,
+     *    basePos: {int} position of job.source in the larger chunk of
+     *        sourceCode.
+     * }
+     */
+    var decorate = function (job) {
+      var sourceCode = job.source, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    if (options['hashComments']) {
+      if (options['cStyleComments']) {
+        // Stop C preprocessor declarations at an unclosed open comment
+        shortcutStylePatterns.push(
+            [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+             null, '#']);
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var keywords = options['keywords'].replace(/^\s+|\s+$/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /** Breaks {@code job.source} around style boundaries in
+    * {@code job.decorations} while re-interleaving {@code job.extractedTags},
+    * and leaves the result in {@code job.prettyPrintedHtml}.
+    * @param {Object} job like {
+    *    source: {string} source as plain text,
+    *    extractedTags: {Array.<number|string>} extractedTags chunks of raw
+    *                   html preceded by their position in {@code job.source}
+    *                   in order
+    *    decorations: {Array.<number|string} an array of style classes preceded
+    *                 by the position at which they start in job.source in order
+    * }
+    * @private
+    */
+  function recombineTagsAndDecorations(job) {
+    var sourceText = job.source;
+    var extractedTags = job.extractedTags;
+    var decorations = job.decorations;
+
+    var html = [];
+    // index past the last char in sourceText written to html
+    var outputIdx = 0;
+
+    var openDecoration = null;
+    var currentDecoration = null;
+    var tagPos = 0;  // index into extractedTags
+    var decPos = 0;  // index into decorations
+    var tabExpander = makeTabExpander(window['PR_TAB_WIDTH']);
+
+    var adjacentSpaceRe = /([\r\n ]) /g;
+    var startOrSpaceRe = /(^| ) /gm;
+    var newlineRe = /\r\n?|\n/g;
+    var trailingSpaceRe = /[ \r\n]$/;
+    var lastWasSpace = true;  // the last text chunk emitted ended with a space.
+
+    // See bug 71 and http://stackoverflow.com/questions/136443/why-doesnt-ie7-
+    var isIE678 = window['_pr_isIE6']();
+    var lineBreakHtml = (
+        isIE678
+        ? (job.sourceNode.tagName === 'PRE'
+           // Use line feeds instead of <br>s so that copying and pasting works
+           // on IE.
+           // Doing this on other browsers breaks lots of stuff since \r\n is
+           // treated as two newlines on Firefox.
+           ? (isIE678 === 6 ? '&#160;\r\n' :
+              isIE678 === 7 ? '&#160;<br>\r' : '&#160;\r')
+           // IE collapses multiple adjacent <br>s into 1 line break.
+           // Prefix every newline with '&#160;' to prevent such behavior.
+           // &nbsp; is the same as &#160; but works in XML as well as HTML.
+           : '&#160;<br />')
+        : '<br />');
+
+    // Look for a class like linenums or linenums:<n> where <n> is the 1-indexed
+    // number of the first line.
+    var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
+    var lineBreaker;
+    if (numberLines) {
+      var lineBreaks = [];
+      for (var i = 0; i < 10; ++i) {
+        lineBreaks[i] = lineBreakHtml + '</li><li class="L' + i + '">';
+      }
+      var lineNum = numberLines[1] && numberLines[1].length 
+          ? numberLines[1] - 1 : 0;  // Lines are 1-indexed
+      html.push('<ol class="linenums"><li class="L', (lineNum) % 10, '"');
+      if (lineNum) {
+        html.push(' value="', lineNum + 1, '"');
+      }
+      html.push('>');
+      lineBreaker = function () {
+        var lb = lineBreaks[++lineNum % 10];
+        // If a decoration is open, we need to close it before closing a list-item
+        // and reopen it on the other side of the list item.
+        return openDecoration
+            ? ('</span>' + lb + '<span class="' + openDecoration + '">') : lb;
+      };
+    } else {
+      lineBreaker = lineBreakHtml;
+    }
+
+    // A helper function that is responsible for opening sections of decoration
+    // and outputing properly escaped chunks of source
+    function emitTextUpTo(sourceIdx) {
+      if (sourceIdx > outputIdx) {
+        if (openDecoration && openDecoration !== currentDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        if (!openDecoration && currentDecoration) {
+          openDecoration = currentDecoration;
+          html.push('<span class="', openDecoration, '">');
+        }
+        // This interacts badly with some wikis which introduces paragraph tags
+        // into pre blocks for some strange reason.
+        // It's necessary for IE though which seems to lose the preformattedness
+        // of <pre> tags when their innerHTML is assigned.
+        // http://stud3.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+        // and it serves to undo the conversion of <br>s to newlines done in
+        // chunkify.
+        var htmlChunk = textToHtml(
+            tabExpander(sourceText.substring(outputIdx, sourceIdx)))
+            .replace(lastWasSpace
+                     ? startOrSpaceRe
+                     : adjacentSpaceRe, '$1&#160;');
+        // Keep track of whether we need to escape space at the beginning of the
+        // next chunk.
+        lastWasSpace = trailingSpaceRe.test(htmlChunk);
+        html.push(htmlChunk.replace(newlineRe, lineBreaker));
+        outputIdx = sourceIdx;
+      }
+    }
+
+    while (true) {
+      // Determine if we're going to consume a tag this time around.  Otherwise
+      // we consume a decoration or exit.
+      var outputTag;
+      if (tagPos < extractedTags.length) {
+        if (decPos < decorations.length) {
+          // Pick one giving preference to extractedTags since we shouldn't open
+          // a new style that we're going to have to immediately close in order
+          // to output a tag.
+          outputTag = extractedTags[tagPos] <= decorations[decPos];
+        } else {
+          outputTag = true;
+        }
+      } else {
+        outputTag = false;
+      }
+      // Consume either a decoration or a tag or exit.
+      if (outputTag) {
+        emitTextUpTo(extractedTags[tagPos]);
+        if (openDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        html.push(extractedTags[tagPos + 1]);
+        tagPos += 2;
+      } else if (decPos < decorations.length) {
+        emitTextUpTo(decorations[decPos]);
+        currentDecoration = decorations[decPos + 1];
+        decPos += 2;
+      } else {
+        break;
+      }
+    }
+    emitTextUpTo(sourceText.length);
+    if (openDecoration) {
+      html.push('</span>');
+    }
+    if (numberLines) { html.push('</li></ol>'); }
+    job.prettyPrintedHtml = html.join('');
+  }
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        source: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.source in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if ('console' in window) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null true false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var sourceCodeHtml = job.sourceCodeHtml;
+    var opt_langExtension = job.langExtension;
+
+    // Prepopulate output in case processing fails with an exception.
+    job.prettyPrintedHtml = sourceCodeHtml;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndExtractedTags = extractTags(sourceCodeHtml);
+      /** Plain text. @type {string} */
+      var source = sourceAndExtractedTags.source;
+      job.source = source;
+      job.basePos = 0;
+
+      /** Even entries are positions in source in ascending order.  Odd entries
+        * are tags that were extracted at that position.
+        * @type {Array.<number|string>}
+        */
+      job.extractedTags = sourceAndExtractedTags.tags;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+      // Integrate the decorations and tags back into the source code to produce
+      // a decorated html string which is left in job.prettyPrintedHtml.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension) {
+    var job = {
+      sourceCodeHtml: sourceCodeHtml,
+      langExtension: opt_langExtension
+    };
+    applyDecorator(job);
+    return job.prettyPrintedHtml;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return (new Date).getTime(); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock.now() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock.now() < endTime; k++) {
+        var cs = elements[k];
+        if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR_registerLangHandler.
+          var langExtension = cs.className.match(/\blang-(\w+)\b/);
+          if (langExtension) { langExtension = langExtension[1]; }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // fetch the content as a snippet of properly escaped HTML.
+            // Firefox adds newlines at the end.
+            var content = getInnerHtml(cs);
+            content = content.replace(/(?:\r\n?|\n)$/, '');
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              sourceCodeHtml: content,
+              langExtension: langExtension,
+              sourceNode: cs
+            };
+            applyDecorator(prettyPrintingJob);
+            replaceWithPrettyPrintedHtml();
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    function replaceWithPrettyPrintedHtml() {
+      var newContent = prettyPrintingJob.prettyPrintedHtml;
+      if (!newContent) { return; }
+      var cs = prettyPrintingJob.sourceNode;
+
+      // push the prettified html back into the tag.
+      if (!isRawContent(cs)) {
+        // just replace the old html with the new
+        cs.innerHTML = newContent;
+      } else {
+        // we need to change the tag to a <pre> since <xmp>s do not allow
+        // embedded tags such as the span tags used to attach styles to
+        // sections of source code.
+        var pre = document.createElement('PRE');
+        for (var i = 0; i < cs.attributes.length; ++i) {
+          var a = cs.attributes[i];
+          if (a.specified) {
+            var aname = a.name.toLowerCase();
+            if (aname === 'class') {
+              pre.className = a.value;  // For IE 6
+            } else {
+              pre.setAttribute(a.name, a.value);
+            }
+          }
+        }
+        pre.innerHTML = newContent;
+
+        // remove the old
+        cs.parentNode.replaceChild(pre, cs);
+        cs = pre;
+      }
+    }
+
+    doWork();
+    content = document.getElementById('content');
+    highlight(content, 'MUST NOT');
+    highlight(content, 'SHALL NOT');
+    highlight(content, 'MAY NOT');
+    highlight(content, 'SHOULD NOT');
+    highlight(content, 'MUST');
+    highlight(content, 'SHALL');
+    highlight(content, 'MAY');
+    highlight(content, 'SHOULD');
+
+  }
+
+function highlight(container,what) {
+    var content = container.innerHTML;
+    pattern = new RegExp(what,'g');
+    replaceWith = '<b>'+what+'</b>',
+    container.innerHTML = content.replace(pattern,replaceWith);
+}
+
+  window['PR_normalizedHtml'] = normalizedHtml;
+  window['prettyPrintOne'] = prettyPrintOne;
+  window['prettyPrint'] = prettyPrint;
+  window['PR'] = {
+        'combinePrefixPatterns': combinePrefixPatterns,
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
+
+window.onload= function() { 
+       prettyPrint();
+};
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon.png b/org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon.png differ
diff --git a/org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon_optional.png b/org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon_optional.png
new file mode 100644 (file)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.web.apireference/html/device_api/wearable/tizen/ww_icon_optional.png differ
diff --git a/org.tizen.web.apireference/html/images/Thumbs.db b/org.tizen.web.apireference/html/images/Thumbs.db
new file mode 100644 (file)
index 0000000..9d05d93
Binary files /dev/null and b/org.tizen.web.apireference/html/images/Thumbs.db differ
diff --git a/org.tizen.web.apireference/html/images/bg_util_bar.gif b/org.tizen.web.apireference/html/images/bg_util_bar.gif
new file mode 100644 (file)
index 0000000..977f94d
Binary files /dev/null and b/org.tizen.web.apireference/html/images/bg_util_bar.gif differ
diff --git a/org.tizen.web.apireference/html/images/btn_top.gif b/org.tizen.web.apireference/html/images/btn_top.gif
new file mode 100644 (file)
index 0000000..d35e824
Binary files /dev/null and b/org.tizen.web.apireference/html/images/btn_top.gif differ
diff --git a/org.tizen.web.apireference/html/images/ico_arr_hidden.gif b/org.tizen.web.apireference/html/images/ico_arr_hidden.gif
new file mode 100644 (file)
index 0000000..9a9d3ff
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ico_arr_hidden.gif differ
diff --git a/org.tizen.web.apireference/html/images/ico_bullet_2_7.gif b/org.tizen.web.apireference/html/images/ico_bullet_2_7.gif
new file mode 100644 (file)
index 0000000..8de872c
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ico_bullet_2_7.gif differ
diff --git a/org.tizen.web.apireference/html/images/mn_division.png b/org.tizen.web.apireference/html/images/mn_division.png
new file mode 100644 (file)
index 0000000..1f7e337
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mn_division.png differ
diff --git a/org.tizen.web.apireference/html/images/mn_fold.png b/org.tizen.web.apireference/html/images/mn_fold.png
new file mode 100644 (file)
index 0000000..1f8d62b
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mn_fold.png differ
diff --git a/org.tizen.web.apireference/html/images/mn_icon.png b/org.tizen.web.apireference/html/images/mn_icon.png
new file mode 100644 (file)
index 0000000..19a0fd3
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mn_icon.png differ
diff --git a/org.tizen.web.apireference/html/images/mw_division.png b/org.tizen.web.apireference/html/images/mw_division.png
new file mode 100644 (file)
index 0000000..8fc3efa
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mw_division.png differ
diff --git a/org.tizen.web.apireference/html/images/mw_fold.png b/org.tizen.web.apireference/html/images/mw_fold.png
new file mode 100644 (file)
index 0000000..a96e013
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mw_fold.png differ
diff --git a/org.tizen.web.apireference/html/images/mw_icon.png b/org.tizen.web.apireference/html/images/mw_icon.png
new file mode 100644 (file)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mw_icon.png differ
diff --git a/org.tizen.web.apireference/html/images/mw_icon_optional.png b/org.tizen.web.apireference/html/images/mw_icon_optional.png
new file mode 100644 (file)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.web.apireference/html/images/mw_icon_optional.png differ
diff --git a/org.tizen.web.apireference/html/images/n_division.png b/org.tizen.web.apireference/html/images/n_division.png
new file mode 100644 (file)
index 0000000..df38a99
Binary files /dev/null and b/org.tizen.web.apireference/html/images/n_division.png differ
diff --git a/org.tizen.web.apireference/html/images/n_fold.png b/org.tizen.web.apireference/html/images/n_fold.png
new file mode 100644 (file)
index 0000000..6336532
Binary files /dev/null and b/org.tizen.web.apireference/html/images/n_fold.png differ
diff --git a/org.tizen.web.apireference/html/images/ui_icon_detail.png b/org.tizen.web.apireference/html/images/ui_icon_detail.png
new file mode 100644 (file)
index 0000000..1f96bb8
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ui_icon_detail.png differ
diff --git a/org.tizen.web.apireference/html/images/ui_icon_overflow.png b/org.tizen.web.apireference/html/images/ui_icon_overflow.png
new file mode 100644 (file)
index 0000000..7823172
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ui_icon_overflow.png differ
diff --git a/org.tizen.web.apireference/html/images/ui_icon_selectall.png b/org.tizen.web.apireference/html/images/ui_icon_selectall.png
new file mode 100644 (file)
index 0000000..bf8b3fb
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ui_icon_selectall.png differ
diff --git a/org.tizen.web.apireference/html/images/w_division.png b/org.tizen.web.apireference/html/images/w_division.png
new file mode 100644 (file)
index 0000000..88d9959
Binary files /dev/null and b/org.tizen.web.apireference/html/images/w_division.png differ
diff --git a/org.tizen.web.apireference/html/images/w_fold.png b/org.tizen.web.apireference/html/images/w_fold.png
new file mode 100644 (file)
index 0000000..1967eb0
Binary files /dev/null and b/org.tizen.web.apireference/html/images/w_fold.png differ
diff --git a/org.tizen.web.apireference/html/images/ww_division.png b/org.tizen.web.apireference/html/images/ww_division.png
new file mode 100644 (file)
index 0000000..65e7ab7
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ww_division.png differ
diff --git a/org.tizen.web.apireference/html/images/ww_fold.png b/org.tizen.web.apireference/html/images/ww_fold.png
new file mode 100644 (file)
index 0000000..b3c1361
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ww_fold.png differ
diff --git a/org.tizen.web.apireference/html/images/ww_icon.png b/org.tizen.web.apireference/html/images/ww_icon.png
new file mode 100644 (file)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ww_icon.png differ
diff --git a/org.tizen.web.apireference/html/images/ww_icon_optional.png b/org.tizen.web.apireference/html/images/ww_icon_optional.png
new file mode 100644 (file)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.web.apireference/html/images/ww_icon_optional.png differ
diff --git a/org.tizen.web.apireference/html/index.htm b/org.tizen.web.apireference/html/index.htm
new file mode 100644 (file)
index 0000000..eb66b32
--- /dev/null
+++ b/org.tizen.web.apireference/html/index.htm
@@ -0,0 +1,565 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 References</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1><a href="cover_page.htm">API References</a></h1>
+
+
+
+<h2><a href="web_api_reference.htm">Web Application</a></h2> 
+
+
+               <h3><a href="device_api/device_api_cover.html">Tizen Device API Reference</a></h3>
+                       <ul>
+                               <li><a href="device_api/mobile/index.html">Mobile Web</a>
+                                       <ul>
+                                               <li><a href="device_api/mobile/tizen/tizen.html">Tizen</a></li>
+                                               <li><a href="device_api/mobile/index.html#Application">Application</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/alarm.html">Alarm</a></li>
+                                                               <li><a href="device_api/mobile/tizen/application.html">Application</a></li>
+                                                               <li><a href="device_api/mobile/tizen/datacontrol.html">Data Control</a></li>
+                                                               <li><a href="device_api/mobile/tizen/package.html">Package</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#Communication">Communication</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/bluetooth.html">Bluetooth</a></li>
+                                                               <li><a href="device_api/mobile/tizen/messaging.html">Messaging</a></li>
+                                                               <li><a href="device_api/mobile/tizen/networkbearerselection.html">Network Bearer Selection</a></li>
+                                                               <li><a href="device_api/mobile/tizen/nfc.html">NFC</a></li>
+                                                               <li><a href="device_api/mobile/tizen/push.html">Push</a></li>
+                                                               <li><a href="device_api/mobile/tizen/se.html">Secure Element</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#Contents">Content</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/content.html">Content</a></li>
+                                                               <li><a href="device_api/mobile/tizen/download.html">Download</a></li>
+                                                               <li><a href="device_api/mobile/tizen/exif.html">Exif</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#I/O">Input/Output</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/archive.html">Archive</a></li>
+                                                               <li><a href="device_api/mobile/tizen/filesystem.html">Filesystem</a></li>
+                                                               <li><a href="device_api/mobile/tizen/messageport.html">Message Port</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#Multimedia">Multimedia</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/mediakey.html">Media Key</a></li>
+                                                               <li><a href="device_api/mobile/tizen/sound.html">Sound</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#Social">Social</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/account.html">Account</a></li>
+                                                               <li><a href="device_api/mobile/tizen/bookmark.html">Bookmark</a></li>
+                                                               <li><a href="device_api/mobile/tizen/calendar.html">Calendar</a></li>
+                                                               <li><a href="device_api/mobile/tizen/callhistory.html">Call History</a></li>
+                                                               <li><a href="device_api/mobile/tizen/contact.html">Contact</a></li>
+                                                               <li><a href="device_api/mobile/tizen/datasync.html">Data Synchronization</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#System">System</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/fmradio.html">FM Radio</a></li>
+                                                               <li><a href="device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor</a></li>
+                                                               <li><a href="device_api/mobile/tizen/power.html">Power</a></li>
+                                                               <li><a href="device_api/mobile/tizen/sensor.html">Sensor</a></li>
+                                                               <li><a href="device_api/mobile/tizen/systeminfo.html">System Information</a></li>
+                                                               <li><a href="device_api/mobile/tizen/systemsetting.html">System Setting</a></li>
+                                                               <li><a href="device_api/mobile/tizen/time.html">Time</a></li>
+                                                               <li><a href="device_api/mobile/tizen/websetting.html">Web Setting</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/mobile/index.html#User Interface">User Interface</a>
+                                                       <ul>
+                                                               <li><a href="device_api/mobile/tizen/badge.html">Badge</a></li>
+                                                               <li><a href="device_api/mobile/tizen/notification.html">Notification</a></li>
+                                                       </ul>
+                                               </li>
+                                       </ul>
+                               </li>
+                               <li><a href="device_api/wearable/index.html">Wearable Web</a>
+                                       <ul>
+                                               <li><a href="device_api/wearable/tizen/tizen.html">Tizen</a></li>
+                                               <li><a href="device_api/wearable/index.html#Application">Application</a>
+                                                       <ul>
+                                                               <li><a href="device_api/wearable/tizen/alarm.html">Alarm</a></li>
+                                                               <li><a href="device_api/wearable/tizen/application.html">Application</a></li>
+                                                               <li><a href="device_api/wearable/tizen/package.html">Package</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/wearable/index.html#Contents">Content</a>
+                                                       <ul>
+                                                               <li><a href="device_api/wearable/tizen/content.html">Content</a></li>
+                                                               <li><a href="device_api/wearable/tizen/download.html">Download</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/wearable/index.html#I/O">Input/Output</a>
+                                                       <ul>
+                                                               <li><a href="device_api/wearable/tizen/filesystem.html">Filesystem</a></li>
+                                                               <li><a href="device_api/wearable/tizen/messageport.html">Message Port</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/wearable/index.html#Multimedia">Multimedia</a>
+                                                       <ul>
+                                                               <li><a href="device_api/wearable/tizen/mediakey.html">Media Key</a></li>
+                                                               <li><a href="device_api/wearable/tizen/sound.html">Sound</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/wearable/index.html#System">System</a>
+                                                       <ul>
+                                                               <li><a href="device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor</a></li>
+                                                               <li><a href="device_api/wearable/tizen/power.html">Power</a></li>
+                                                               <li><a href="device_api/wearable/tizen/sensor.html">Sensor</a></li>
+                                                               <li><a href="device_api/wearable/tizen/systeminfo.html">System Information</a></li>
+                                                               <li><a href="device_api/wearable/tizen/systemsetting.html">System Setting</a></li>
+                                                               <li><a href="device_api/wearable/tizen/time.html">Time</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="device_api/wearable/index.html#User Interface">User Interface</a>
+                                                       <ul>
+                                                               <li><a href="device_api/wearable/tizen/badge.html">Badge</a></li>
+                                                       </ul>
+                                               </li>
+                                       </ul>
+                               </li>
+                       </ul>   
+
+               <h3><a href="ui_fw_api/ui_fw_api_cover.html">Tizen Web UI Framework Reference</a></h3>
+                       <ul>
+                               <li><a href="ui_fw_api/mobile/index.htm">Mobile Web</a>
+                                       <ul>
+                                               <li><a href="ui_fw_api/mobile/page/app_page_layout.htm">Application Page Layout</a>
+                                                       <ul>
+                                                               <li><a href="ui_fw_api/mobile/page/multi_page.htm">Multi-page Layout</a></li>
+                                                               <li><a href="ui_fw_api/mobile/page/page_change.htm">Page Changes</a></li>
+                                                               <li><a href="ui_fw_api/mobile/page/page_event.htm">Page Events and Methods</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="ui_fw_api/mobile/widget_reference.htm">UI Component Reference</a>
+                                                       <ul>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Autodividers.htm">Autodividers</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Button.htm">Button</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Checkboxradio.htm">Checkbox Radio</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Collapsible.htm">Collapsible</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Controlgroup.htm">Control Group</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm">Date-time Picker</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Drawer.htm">Drawer</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_FastScroll.htm">Fast Scroll</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Fliptoggle.htm">Flip Toggle Switch</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Gallery.htm">Gallery</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_ListDivider.htm">List Divider</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Listview.htm">List View</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_MultimediaView.htm">Multimedia View</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Navigation.htm">Navigation Bar</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Notification.htm">Notification</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Popup.htm">Popup</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Progress.htm">Progress</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_ProgressBar.htm">Progress Bar</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_ScrollHandler.htm">Scroll Handler</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_SearchBar.htm">Search Bar</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_SelectMenu.htm">Select Menu</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Slider.htm">Slider</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Swipe.htm">Swipe</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">Tab Bar</a></li>
+                                                               <li><a href="ui_fw_api/mobile/ns_widget_mobile_Tokentextarea.htm">Token Text Area</a></li>
+                                                       </ul>
+                                               </li>
+                                               <li><a href="ui_fw_api/mobile/util/util.htm">Utilities</a>
+                                                       <ul>
+                                                               <li><a href="ui_fw_api/mobile/util/ns_util_DOM.htm">DOM Utility</a></li>
+                                                               <li><a href="ui_fw_api/mobile/util/ns_util_selectors.htm">Selectors Utility</a></li>
+                                                       </ul>
+                                               </li>
+                                       </ul>
+                               </li>
+                               <li><a href="ui_fw_api/wearable/index.htm">Wearable Web</a>
+                                       <ul>
+                                               <li><a href="ui_fw_api/wearable/page/app_page_layout.htm">Application Page Layout</a>
+                                                       <ul>
+                                                               <li><a href="ui_fw_api/wearable/page/multi_page.htm">Multi-page Layout</a></li>
+                                                               <li><a href="ui_fw_api/wearable/page/page_change.htm">Changing Pages</a></li>
+                                                               <li><a href="ui_fw_api/wearable/page/page_event.htm">Handling Page Events</a></li>
+                                                       </ul>
+                                               </li>           
+                                               <li><a href="ui_fw_api/wearable/widgets/widget_reference.htm">UI Component Reference</a>
+                                                       <ul>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_button.htm">Button</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_checkbox.htm">Checkbox and Radio Button</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_indexscrollbar.htm">Index Scroll Bar</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_list.htm">List</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_popup.htm">Popup</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_processing.htm">Processing</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_progress.htm">Progress</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_section_changer.htm">Section Changer</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_slider.htm">Slider</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_swipelist.htm">Swipe List</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_toggleswitch.htm">Toggle Switch</a></li>
+                                                               <li><a href="ui_fw_api/wearable/widgets/widget_virtuallist.htm">Virtual List</a></li>
+                                                       </ul>
+                                               </li>                   
+                                               <li><a href="ui_fw_api/wearable/event/events.htm">Events</a>
+                                                       <ul>
+                                                               <li><a href="ui_fw_api/wearable/event/gesture.htm">Gesture Events</a>
+                                                                       <ul>
+                                                                               <li><a href="ui_fw_api/wearable/event/drag.htm">Drag Event</a></li>
+                                                                               <li><a href="ui_fw_api/wearable/event/swipe.htm">Swipe Event</a></li>
+                                                                       </ul>
+                                                               </li>
+                                                       </ul>
+                                               </li>
+                                       </ul>
+                               </li>
+                       </ul>
+                       
+       <h3><a href="w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a></h3> 
+       
+       <ul>
+               <li><a href="w3c_api/w3c_api_m.html">Mobile Web</a>
+                       <ul>
+                       <li><a href="w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#forms">HTML5 Forms (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-selectors-api-20120628/">Selectors API Level 1</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2010/WD-selectors-api2-20100119/">Selectors API Level 2 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619">Media Queries (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">CSS Transforms</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">CSS Animations Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">CSS Transitions Module Level 3 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">CSS Backgrounds and Borders Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">CSS Flexible Box Layout Module</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">CSS Multi-column Layout Module (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-text-20121113">CSS Text Module Level 3 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823">CSS Fonts Module Level 3 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/PR-WOFF-20121011/">WOFF File Format 1.0</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/">DOM/JavaScript related HTML5 Enhancements</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#history">HTML5 The session history of browsing contexts (Partial)</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#device">Device</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/">Touch Events version 1 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201">DeviceOrientation Event Specification (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-battery-status-20120508">Battery Status API</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-vibration-20120202/">Vibration API</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html?path=5_4_5#event-online">HTML5 Browser state</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-screen-orientation-20120522">The Screen Orientation API</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#graphics">Graphics</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element">HTML5 The canvas element (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-2dcontext-20120329/">HTML Canvas 2D Context (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-map-element.html#svg-0">HTML5 SVG</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#media">Media</a>
+                               <ul>
+                               <li><a href=    "http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-video-element">HTML5 The video element (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-audio-element">HTML5 The audio element (Partial)</a>
+                               </li>
+                               <li><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia-20111130.html">getUserMedia (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/">Web Audio API (Partial)</a>
+                               </li>
+                               <li><a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web Speech (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/">HTML Media Capture</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#communication">Communication</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/CR-websockets-20120920">The WebSocket API</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/">XMLHttpRequest Level 2</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-eventsource-20111020">Server-Sent Events</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501">HTML5 Web Messaging</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#storage">Storage</a>
+                               <ul>
+                               <li><a href=    "http://www.w3.org/TR/2011/CR-webstorage-20111208/">Web Storage</a>
+                               </li>
+                               <li><a href=    "http://www.w3.org/TR/2011/WD-FileAPI-20111020/">File API</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419">File API: Directories and System</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-file-writer-api-20110419/">File API: Writer (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#appcache">HTML5 Application caches</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/">Indexed Database API (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/">Web SQL Database</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#security">Security</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/WD-cors-20120403">Cross-Origin Resource Sharing</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html?path=5_2_8#the-iframe-element">HTML5 The iframe element</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-CSP-20121115">Content Security Policy 1.0 (Partial)</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#ui">UI</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/WD-clipboard-apis-20120223/">Clipboard API and events (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html">HTML5 Drag and drop (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-notifications-20120614">Web Notifications (Partial)</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#performance">Performance and Optimization</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/CR-workers-20120501">Web Workers (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-page-visibility-20120726/">Page Visibility</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/">Timing control for script-based animations</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/REC-navigation-timing-20121217/">Navigation Timing</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#location">Location</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510">Geolocation API Specification</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#widget">Widget</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2011/REC-widgets-20110927/">Widget Packaging and XML Configuration</a></li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-widgets-apis-20110607/">Widget Interface</a></li>
+                               <li><a href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/">XML Digital Signatures for Widgets</a></li>
+                               <li><a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/">Widget Access Request Policy</a></li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#Supplementary">Supplementary</a>
+                               <ul>
+                               <li><a href="https://www.khronos.org/registry/typedarray/specs/1.0/">Typed Array - Khronos</a></li>
+                               <li><a href="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Khronos (Partial)</a></li>
+                               <li><a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI">FullScreen API - Mozilla (Partial)</a></li>
+                               </ul>
+                       </li>
+               </ul>
+               </li>   
+               <li><a href="w3c_api/w3c_api_w.html">Wearable Web</a>
+                       <ul>
+                               <li><a href="w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/forms.html#forms">HTML5 Forms (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/REC-selectors-api-20130221/">Selectors API Level 1</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/">Selectors API Level 2 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">Media Queries</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/WD-css-transforms-1-20131126/">CSS Transforms</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/">CSS Animations Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/">CSS Transitions Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/REC-css3-color-20110607/">CSS Color Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/WD-css3-background-20140204/">CSS Backgrounds and Borders Module Level 3</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/">CSS Flexible Box Layout Module</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/WD-css-text-3-20131010/">CSS Text Module Level 3 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/">CSS Fonts Module Level 3 (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/REC-WOFF-20121213/">WOFF File Format 1.0 </a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/">DOM/JavaScript related HTML5 Enhancements</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#history">HTML5 The session history of browsing contexts (Partial)</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#device">Device</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/">Touch Events version 1</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/">DeviceOrientation Event Specification (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/">Battery Status API </a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/WD-vibration-20140211/">Vibration API </a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#graphics">Graphics</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-canvas-element">HTML5 The canvas element (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-2dcontext-20121217/">HTML Canvas 2D Context (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#svg">HTML5 SVG (Partial)</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#media">Media</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-video-element">HTML5 The video element (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-audio-element">HTML5 The audio element (Partial)</a>
+                               </li>
+                               <li><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia-20111130.html">getUserMedia</a>
+                               </li>
+                               <li><a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web Speech (Partial)</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#communication">Communication</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/CR-websockets-20120920/">The WebSocket API</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/">XMLHttpRequest Level 1</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/">HTML5 Web Messaging</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#storage">Storage</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2011/WD-webstorage-20110901/">Web Storage</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/">File API</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/">Indexed Database API</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#security">Security</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/">Cross-Origin Resource Sharing</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-iframe-element">HTML5 The iframe element</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2012/CR-CSP-20121115/">Content Security Policy 1.0</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#performance">Performance and Optimization</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2012/CR-workers-20120501/">Web Workers (Partial)</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/REC-page-visibility-20130514/">Page Visibility</a>
+                               </li>
+                               <li><a href="http://www.w3.org/TR/2013/CR-animation-timing-20131031/">Timing control for script-based animations</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#location">Location</a>
+                               
+                               <ul><li><a href="http://www.w3.org/TR/2013/REC-geolocation-API-20131024/">Geolocation API Specification</a>
+                               </li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_w.html#widget">Widget</a>
+                               <ul>
+                               <li><a href="http://www.w3.org/TR/2011/REC-widgets-20110927/">Widget Packaging and XML Configuration</a></li>
+                               <li><a href="http://www.w3.org/TR/2011/WD-widgets-apis-20110607/">Widget Interface</a></li>
+                               <li><a href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/">XML Digital Signatures for Widgets</a></li>
+                               </ul>
+                       </li>
+                       <li><a href="w3c_api/w3c_api_m.html#Supplementary">Supplementary</a>
+                               <ul>
+                               <li><a href="w3c_api/camera_w.html">Camera API (Tizen Extension)</a></li>
+                               <li><a href="https://www.khronos.org/registry/typedarray/specs/1.0/">Typed Array - Khronos</a></li>
+                               <li><a href="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Khronos (Partial)</a></li>
+                               </ul>
+                       </li>
+               </ul>
+               </li>
+       </ul>
+       
+<h2><a href="../../org.tizen.native.mobile.apireference/index.html">Native Application</a></h2>
+
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+</div></div></div>
+       
+<div id="footer"><hr size="1"><font size="1">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>.</font></font></div>
+<!--start-->
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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-->
+
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/scripts/common.js b/org.tizen.web.apireference/html/scripts/common.js
new file mode 100644 (file)
index 0000000..60250b6
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){
+       $('#contents table').each(function(){
+               if (!$(this).parent().hasClass('table')) {
+                       $(this).wrap('<div class="table"></div>');
+               }
+       });
+
+       // Lnb Menu Initialize
+       if($('div#contents').find('.lnb').length){
+               if($("ul li.events_news").size() > 0) {
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+               }
+               initLnb();
+               initScript(staticURL + "/js/fixednavbar.js", function(){});
+       }
+
+       //family site
+       if($('div#footer').find('dl#familySlider').length){
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+       }
+
+       // Svn Commit Test
+       
+       // Language Selection
+       if($('div#header').find('.util').length){
+               var $lang = $('div#header').find('.util');
+               $lang.find('a.lang').toggle(function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+                       },function(){
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+                       });
+
+               $lang.bind('mouseleave',function(){
+                       $(this).find('ul.language').hide();
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+               });
+
+               $lang.find('ul.language').children().last().on("keydown", function(e) {
+                       if(e.which == 9 && e.shiftKey) {
+                               return true;
+                       }
+                       
+                       if(e.which == 9) {
+                               e.preventDefault();
+                               $lang.find('ul.language').hide();
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+                               setTimeout(function() {
+                                       $("#searchTop").focus();
+                               }, 1);
+                       }
+               });
+       }
+
+       // Open the Sitemap
+       var $open = $('div#header').find('.bt-open');
+       $open.bind('click',function(){
+               var $self = $(this);
+               var $sitemap = $('div#wrapper').find('div#sitemap');
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+               if($sitemap.is(':visible')){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+                       $self.attr('title','open sitemap');
+               }else{
+                       var source = $self.css('background-image').replace('.gif','_.gif');
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+                       $self.attr('title','close sitemap');
+               }
+               
+               $self.css('background-image',source);
+               $sitemap.slideToggle('fast');
+               
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+                       var source = $self.css('background-image').replace('_.gif','.gif');
+                       $self.css('background-image',source);
+                       $sitemap.slideToggle('fast');
+               });
+
+       });
+
+       // Search Auto Complete
+       var $search = $('div#header').find('fieldset.search');
+       var $searchList = $search.find('#topAutocomplete>ul');
+
+       if($search.length){
+               $search.find('> input').each(function(){
+                       $(this).bind({
+                               keydown : function(e){
+                       
+                                       if(e.type=='keydown'&& $(this).val().length!=0){
+                                               $search.find('#topAutocomplete').show();
+                                               var hei = $searchList.outerHeight();
+                                               if(hei>400){
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
+                                               }
+                                       }
+                                       if(e.keyCode==9){
+                                               $search.unbind('focusout.search');
+                                       }
+                                       if(e.keyCode==40){
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+                                               //window.scrollTo(0,0);
+                                       }
+                               },
+                               focusin : function(e){
+                                       if($(this).val()==='Search'){
+                                               $(this).val('');
+                                       }
+                               },
+                               focusout : function(e){
+                                       if($(this).val().length==0) $(this).val('Search');
+                               }
+                       });
+               });
+
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+               //      if(e.keyCode==40){
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
+               //      }
+               //});
+
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){
+                       if($search.find('> input').val().length==0){
+                               $search.find('> input').val('Search');
+                       }
+                       $search.find('#topAutocomplete').hide();
+               });
+
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
+                       $search.find('> input').val('Search');
+                       $search.find('#topAutocomplete').hide();
+                       
+                       //$search.bind('focusout.search', function(){
+                       //      $(this).find('> input').val('Search');
+                       //      $(this).find('#topAutocomplete').hide();
+                       //});
+               });
+       }
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+       var script = document.createElement("script");
+       script.type = "text/javascript";
+
+       if(script.readyState){ // 인터넷 익스플로러
+               script.onreadystatechange = function(){
+                       if(script.readyState=="loaded" || script.readyState=="complete"){
+                               script.onreadystatechange = null;
+                               callback();
+                       }
+               };
+       }else{  // 다른  브라우저
+               script.onload = function(){
+                       callback();
+               };
+       }
+
+       script.src = url;
+       document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+       var sMenu = $('.lnb');
+       var sItem = sMenu.find('>li');
+
+       sItem.each(function(){
+               if($(this).find('a').hasClass('more')){
+                       if($(this).find('ul').is(":visible")) {
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
+                       } else {
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+                       }
+               }
+       });
+       
+       var setIcoArrText = function(obj) {
+               if(obj.next().is(":visible")) {
+                       obj.text("close submenu");
+               } else {
+                       obj.text("open submenu");
+               }
+       }
+       
+       sItem.find('.ico-arr').on("click", function() {
+               var $that = $(this);
+               var liBox = $that.parent();   
+               var ulBox = $that.next();
+               
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+               
+               if(liBox.hasClass("on")) {
+                       if(ulBox.is(":visible")) {
+                               ulBox.hide();
+                               $that.addClass("ico-on");
+                       } else {
+                               ulBox.show();
+                               $that.removeClass("ico-on");
+                       }
+                       setIcoArrText($that);
+                       return true;
+               }
+               
+               if(liBox.hasClass("active")) {
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+                       ulBox.hide();
+               } else {
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");
+                       ulBox.show();
+               }
+               setIcoArrText($that);
+       });
+
+       sItem.hover(function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+               $(this).find("a").eq(0).addClass("bov");
+       },function(){
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+                $(this).find("a").eq(0).removeClass("bov");
+
+       });
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+       // 롤링할 객체를 변수에 담아둔다.
+       var el = $('#'+container).find('#'+objectId);
+       var lastChild;
+       var speed = 3000;
+       var timer = 0;
+       var autoplay = false;
+
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
+       el.data('animating',false);
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
+
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
+
+       if(arguments.length==4){
+               el.data('autoStart', auto);
+       }
+
+       if(el.data('autoStart')){
+               if(timer==0){
+                       timer = setInterval(moveNextSlide, speed);
+                       autoplay = true;
+               }
+       }
+
+       el.bind({
+               mouseenter:function(){
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+       el.data('prev').bind({
+               click:function(e){
+                       e.preventDefault();
+                       movePrevSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+       el.data('next').bind({
+               click:function(e){
+                       e.preventDefault();
+                       moveNextSlide();
+               },
+               mouseenter:function(){
+
+                       $(this).find('img').addClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer!=0 && el.data('autoStart')){
+                               clearInterval(timer);
+                               timer=0;
+                       }
+               },
+               mouseleave:function(){
+
+                       $(this).find('img').removeClass('btnOn');
+
+                       if(!autoplay) return false;
+
+                       if(timer==0 && el.data('autoStart')){
+                               timer = setInterval(moveNextSlide, speed);
+                       }
+               }
+       });
+
+       function movePrevSlide(){
+               if(!el.data('animating')){
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
+               
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+    function moveNextSlide(){
+               if(!el.data('animating')){
+                       el.data('animating',true);
+
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
+
+                               el.data('animating',false);
+                       });
+               }
+               return false;
+       }
+
+}
+
+function fn_slide(options){
+
+       var opts = jQuery.extend({},options);
+
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
+       var auto = false;
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+       var time;
+
+
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
+       effect = opts.effect;
+       auto = opts.auto;
+
+       if(auto){
+               time = setTimeout('slideShow()',3000);
+       }
+
+       slideShow = function(){
+
+               if(current < len-1){
+                       current++;
+               }else{
+                       current=0;
+               }
+
+               controllStatus();
+
+               moveControl('next');
+
+               time = setTimeout('slideShow()',3000);
+       }
+
+       controllStatus = function(){
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+               if(current>0||current<len-1){                           
+                       $prev.show();
+                       $next.show();
+               }
+               if(current==0){
+                       $prev.hide();
+                       $next.show();
+               }
+               if(current>=len-1){
+                       $prev.show();
+                       $next.hide();
+               }
+       }
+
+       moveControl = function(msg){
+               if(opts.bt!=null){
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
+               }
+
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                       $obj.children().hide();
+                       $obj.children().eq(current).show();
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                       $obj.animate({'left':'-'+size*current},'slow');
+               }
+       }
+
+       $obj.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               }
+       });
+
+       //롤링 버튼 클릭시
+       $bt.bind({
+               mouseenter:function(){
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
+
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+                       controllStatus();
+
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+                               $obj.children().hide();
+                               $obj.children().eq(current).show();
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+                               $obj.animate({'left':'-'+size*current},'slow');
+                       }
+
+                       // 모든 롤링 버튼을 비활성화
+                       $bt.each(function(){
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');
+                                $(this).find('img').attr('src',source);
+                       });
+
+                       // 선택한 롤링버튼을 활성화
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+
+                       return false;
+               }
+       });
+
+       //이전 버튼 클릭시
+       $prev.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
+                       current--;                                                      //이미지 인덱스값 1씩 감소
+
+                       moveControl('prev');
+
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+                       return false;
+               }
+       });
+
+       //다음 버튼 클릭시
+       $next.bind({
+               mouseenter:function(){
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       clearTimeout(time);
+               },
+               mouseleave:function(){
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');
+                       $(this).find('img').attr('src',source);
+                       if(!auto) return false;
+                       time = setTimeout('slideShow()',3000);
+               },
+               click:function(){
+                       current++;                                                      //이미지 인덱스값 1씩 증가
+                       
+                       moveControl('next');
+
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+                       return false;
+               }
+       });
+
+}
+
+// main rolling banner
+function slideMotion1(){
+       var $banner = $('#rolling .motionview'),
+               //$nav = $('#rolling ul.nav'),
+               banner = {prev:null, next:null},
+               size = $banner.children().length;
+               index = 1,
+               speed = 3000,
+               timer = null,
+               auto = true,
+               width = parseInt(100/size),
+               rest = parseInt(100%size);
+
+       var $nav = $('<ul class="nav">').insertAfter($banner);
+
+       $banner.children().each(function(index){
+               index++;
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+               if(index==size){
+                       $nav.children().eq(-1).find('a').css('background-image','none');
+               }
+       });
+
+       if(rest>0){
+               width+=rest;
+               $nav.children().eq(-1).css('width',width+'%');
+       }
+
+       $nav.delegate("li",'click',function(){
+               var idx = $nav.children().index(this);
+               index = idx;
+               banner.prev = $banner.find('a.active');
+               banner.next = $banner.find('a').eq(index);
+
+               clearInterval(timer);
+               auto = false;
+               
+               $nav.trigger('change.banner',banner)
+                       .trigger('change.tab',index);
+
+               return false;
+       });
+
+       $nav.bind('change.banner',function(event, banner){
+               aniMotion();
+       });
+
+       $nav.bind('change.tab',function(event, index){
+               $nav.children().find('a').removeClass('sel');
+               $nav.children().eq(index).find('a').addClass('sel');
+       });
+
+       timer = setInterval(autoMotion, speed);
+
+       function autoMotion(){
+               if(index > size-1) index = 0;
+
+               aniMotion();
+       }
+
+       function aniMotion(){
+               if(auto){
+                       banner.prev = $banner.find('a.active');
+                       banner.next = $banner.find('a').eq(index);
+
+                       $nav.children().find('a').removeClass('sel');
+                       $nav.children().eq(index).find('a').addClass('sel');
+               }
+               banner.prev.addClass('last-active');
+               banner.next.css({'opacity':0.0})
+                       .addClass('active')
+                       .animate({'opacity':1.0}, 1000, function(){
+                               banner.prev.removeClass('active last-active');
+
+                               if(auto){
+                                       index++;
+                               }else{
+                                       index++;
+                                       timer = setInterval(autoMotion, speed*1.5);
+                                       auto = true;
+                               }
+                       });
+       }
+}
+
+// forum list show or hide function
+function toggleFunc(){
+       
+       var defaulNum = [2];
+
+       $('.forum-tit').each(function(){
+               var self = $(this);
+
+               var idx = $('.forum-tit').index(this);
+
+               for(i=0;i<=defaulNum.length;i++){
+                       if(idx==defaulNum[i]){
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+                               self.find('a.toggle').css('background-image',source);
+
+                               self.find('a.toggle').text('Show');
+                               self.addClass('mb35').next().hide();
+                       }
+               }
+
+               self.find('a.toggle').click(function(){
+                       
+                       if(self.next().is(':visible')){
+                               var source = $(this).css('background-image').replace('.gif','_.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Show');
+                               self.addClass('mb35').next().hide();
+                       }else{
+                               var source = $(this).css('background-image').replace('_.gif','.gif');
+                               $(this).css('background-image',source);
+
+                               $(this).text('Hide');
+                               self.removeClass('mb35').next().show();
+                       }
+
+                       return false;
+
+               });
+
+       });
+}
+
+// 파일 업로드
+function fileUpload( width ){
+       //var $img = $('.attach input[type=image]');
+       //var width = $img.attr('width');
+
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+       var $file = $('.attach input.upload').css({
+               "position": "absolute",
+               "top": "0px",
+               "right": "0px",
+               "width": w,
+               "cursor": "pointer",
+               "opacity": "0.0",
+               "height": "23px"
+       });
+       $file.off('change');
+       $file.on('change',function(e){
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+                       return;
+               }
+               var idx = $file.index(this);
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+               var fileErrMsg = {
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+                           ,ext_ko : "지원하지 않는 확장자 입니다."
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"
+                           ,ext_en : "File extention not allowed for upload."
+               };
+               var initFileInput = function(obj) {
+                       $(obj).parent().find('input.file').val("");
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
+                       else $(obj).val("");
+               };
+               
+               var filename = $(this).val();
+               
+               //CHK File ext
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+                                     , "jpg", "png", "zip"];
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+               var findFlag = false;
+               for(var i = 0; i < imgExts.length; i++) {
+                       if(imgExts[i] == fileExt) {
+                               findFlag = true;
+                               break;
+                       }
+               }
+       
+               if(findFlag == false) {
+                       alert( fileErrMsg["ext_" + localeCode] );
+                       initFileInput(this);
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+                       return;
+               }
+               
+               //CHK File Size
+               if(
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
+                               || $.browser.mozilla //FF
+                               || $.browser.safari //Chrome
+               )
+               {
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+                       if( filesize > 200 ) {
+                               alert( fileErrMsg["limit_" + localeCode] );
+                               initFileInput(this);
+                               return;
+                       }
+               }
+               
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+       });
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+       if(!arguments.length) return false;
+       
+       var bt = $('#'+args.bt);
+       var obj = $('#'+args.obj);
+
+       var source = bt.css('background-image');
+       
+       if(obj.is(':visible')){
+               obj.hide();
+       }
+
+       bt.toggle(function(){
+               var src = source.replace('.gif','_.gif');
+               bt.css('background-image', src);
+               obj.show();
+               
+               return false;
+       },function(){
+               var src = source.replace('_.gif','.gif');
+               bt.css('background-image', src);
+               obj.hide();
+
+               return false;
+       });
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+  var $self = $(this);
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+  
+  $self.find('a').bind('click',function(){
+   $("#selArea ul").hide();
+   /*
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+   $answer.hide().find('.conts').hide();
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+   */
+
+   /* 20120822 hjh modify*/
+   /* if ( this open )?  close : all close, e.target open */
+   var cutTtl  = $(this).parent().children("div").html();
+   var ttl     = $(this).parent().parent().children("td.real_question").html();
+   
+   if($(this).parents('tr').next().find('.answer').is(':visible')){
+    $(this).html(cutTtl);
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+     $answer.hide();
+    });
+   }else{
+    titleInit();
+    $(this).html(ttl);
+    $answer.hide().find('.conts').hide();
+    //$answer.slideUp('normal').find('.conts').hide();
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
+   }   
+
+   return false;
+  });
+ });
+
+ $answer.each(function(){
+  var $self = $(this);
+
+  $(this).find('a.bt-close-faq').bind('click',function(){
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");
+   var cutTtl      = question_td.children("div").html();
+   question_td.children("a").html(cutTtl);
+   
+   $self.find('.conts').slideUp('fast',function(){
+    $self.hide();
+   });
+
+   return false;
+  });
+ });
+ 
+ var titleInit = function() {
+  $question.each(function(i) {
+   $(this).find("a").html($(this).find("div").html());
+  });
+ }
+}
+
+
+
+/**
+ *  쓰기페이지 Tab 영역 컨트롤
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+       var tabs = $('.tab-list').find("li");
+       var elements = $( selector );
+
+       $( elements ).each( function( i ) {
+               if( i != 0 )
+               {
+                       $(this).hide();
+               }
+       })
+
+       // Control Tabs
+       $( tabs ).each( function( i ) {
+               $( this ).click( function(){
+                       resetClass();
+
+                       $( this ).find( 'a' ).addClass( "sel" );
+                       $( elements[i] ).show();
+
+                       return false;
+               });
+       });
+
+       // Class 리셋
+       function resetClass()
+       {
+               $( tabs ).each( function( i ) {
+                       $( this ).find( 'a' ).removeClass( 'sel' );
+               });
+
+               $( elements ).each( function( i ) {
+                       $( this ).hide();
+               });
+       }
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn            = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    $("a.remove-btn").eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ obj.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ 
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile    = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj       = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+  var firstCompFile = compFile.eq(0);
+  firstCompFile.prev().prev().val("");
+  if ($.browser.msie) {
+               $(obj).parent().find('input.file').val("");
+               firstCompFile.replaceWith( firstCompFile.clone(true) );
+       } else {
+               firstCompFile.val("");
+               firstCompFile.prev().prev().val("");
+  }
+ } else {
+  obj.parent().remove();
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+  
+  //add-btn event..
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+ 
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+ 
+ setTimeout(function() {
+  $("#" + id).focus();
+ }, 100);
+ 
+ $("#" + id).on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   var that = $(this);
+   setTimeout(function() {
+    that.prev().focus();
+   }, 1);
+  }
+ });
+ 
+ $("#" + id).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/** 
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );
+ 
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+ 
+ inputFile.on("keydown", function(e) {
+  var that = $(this);
+  
+  if(e.which == 9 && e.shiftKey) {
+   return true;
+  }
+  
+  if(e.which === 9) {
+   e.preventDefault();
+   setTimeout(function() {
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ inputFile.on("focusin", function(e) {
+  $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+  $(this).parent().css("outline", "");
+ });
+ 
+ firstAddAction(btnFileAttach, limit, w, btnName);
+ 
+ /*
+ btnFileAttach.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    inputFile.focus();
+   }, 1);
+  }
+ });
+ 
+ btnFileAttach.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ */
+ /**
+  *  2012-08-08 전종호 추가
+  *  파일 Input Text 영역 너비를 잡아주는 메서드
+  */
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+ 
+ $("#" + removeBtnId).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/** 
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+       var isCompareView=false;
+       $("#devicespecs-list > li").each( 
+               function(i){ 
+                       $(".info", this).bind("click", devicespecsListInfoToggle);
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);
+                       
+                       //detail info layer toggle function
+                       function devicespecsListInfoToggle (){
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+                               return false;
+                       }
+       });
+
+
+       /* DEVICE COMPARE 열리는 부분
+       - defualt : close. 
+       - 최초 한번만 열림 
+       - 현재는 compare 버튼에 공통으로 함수 바인딩
+       */
+       function devicespecsCompareOnOff (){
+               if ( isCompareView ) return;
+               var ww = ( isCompareView ) ? "30px":"207px";
+               $("#devicespecs-compare").animate({
+                   height: ww }, 300, "linear", function(){ });
+
+               isCompareView = ( isCompareView ) ? false:true;
+               return false;
+       }
+
+       //compare 버튼 공통으로 클릭 이벤트 걸림 
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/** 
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+       var isImgView = false;
+       var isView = 0;
+       
+       //thumbnail overevent bind
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+       focusDeviceDetail (1);
+       
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.type === "keydown" && e.which == 9) {
+                       setTimeout(function() {
+                               $("#img-viewer-handle a").eq(0).focus();        
+                       }, 1);
+               }
+       });
+       
+       //thumbnail viewarea controll handler bind
+       $("#img-viewer-handle").click(function () {
+               var ww;
+               var src = $("#img-viewer-handle img").attr("src");
+               if ( isImgView ){
+                       ww = "300px";
+                       src = src.replace(".gif", "_.gif");
+                       $("#img-viewer-thumbnail").hide();
+                       $("#device-info").show();
+               }else{
+                       ww = "730px";
+                       src = src.replace("_.gif", ".gif");
+                       $("#img-viewer-thumbnail").show();
+                       $("#device-info").hide();
+                       focusDeviceDetail(1);
+               }
+               
+               $("#img-viewer-handle img").attr("src", src);
+       $("#img-viewer").animate({
+                   width: ww
+                       }, 300, "linear", function(){
+                       if($.browser.msie)
+                               $("#img-inner").css("width", ww);
+               });
+               
+       isImgView = ( isImgView ) ? false:true;
+    });
+
+       //thumbnail overevent function (update date 2012.09.05 kangki)
+       function focusDeviceDetail ( id ) {
+               if ( isView == id ) return;
+
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+               $( "#img-viewer-bic > img").attr("src", imgSrc);
+               isView = (id);          
+       }
+
+       /*toggle devicespecs List*/
+       if($('div#contents').find('.devicespec-tit').length){
+               
+               $('.devicespec-tit').each(function(){
+                       var self = $(this);
+                       $('a', self).bind ("click", fnToggle);
+
+                       function fnToggle(){
+
+                               if ( $(this).parent().parent().next().is(':visible') ){
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+                                       self.find('em').text('Show');
+                                       self.next().hide();
+
+                                       return false;
+                               }else{
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+                                       self.find('em').text('Hide');
+                                       self.next().show();
+
+                                       return false;
+                               }
+                       }
+                                                       
+               });
+       }
+
+       /*all Show Hide devicespecs List*/
+       if($('div#contents').find('.devicespecs-util').length){
+               var self = $('div#contents').find('.devicespecs-util');
+
+               $('.showA', self).bind ("click", function (){
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( !me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+                                       me.find('em').text('Hide');
+                                       me.next().show();
+                               }
+                       });
+                       return false;
+               })
+               $('.hideA', self).bind ("click", function (){
+                       
+                       $('.devicespec-tit').each(function(){
+
+                               var me = $(this);
+                               if ( me.next().is(':visible') ){
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+                                       me.find('em').text('Show');
+                                       me.next().hide();
+                               }
+                                                               
+                       });
+                       return false;
+               })
+       }       
+}
+
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+       var focusTarget = "input";
+
+       $("#searchInput").bind("keydown", checkSearchText);
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+
+       $(".autocomplete").mouseleave(function(){
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".autocomplete").css("visibility", "visible");
+
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+
+                       var hei = $(".autocomplete").find('>ul').outerHeight();
+                       if(hei>400){
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+                       }
+               }
+               else{
+                       $(".autocomplete").css("visibility", "hidden");
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+ */
+
+function setTopScroll(selector) {
+       if ( !selector ) return false;
+       var btn = $( selector );
+       var w = $( window );
+       btn.css( "position", "absolute" );
+
+
+       btn.click( function(){ w.scrollTop( 0 ) } );
+
+       var wheight = w.innerHeight();
+       
+       $(window).resize( function() {
+               wheight = w.innerHeight();
+               redraw();
+       });
+
+       $(window).scroll( function() {
+               redraw();
+       })
+
+       /**
+        *      Top 버튼의 재정렬 메서드
+        */
+       function redraw()
+       {
+               var t = w.scrollTop() + wheight - 289;
+
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {
+                       t = wheight / 2;
+               }
+               
+               btn.clearQueue();
+
+               btn.animate({
+           top: t
+               }, 500, function() {
+           // Animation complete.
+               });
+               //btn.css( "top", t );
+               //console.log( "target : " + t );
+       }
+
+       redraw();
+       /*
+       obj.initTop = position;
+       obj.topLimit = topLimit;
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+       obj.style.position = "absolute";
+       obj.top = obj.initTop;
+       // obj.left = obj.initLeft;
+
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
+               obj.getTop = function() {
+                       return window.pageYOffset;
+               }
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+               obj.getTop = function() {
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+               }
+       } else {
+               obj.getTop = function() {
+                       return 0;
+               }
+       }
+
+       if ( self.innerHeight ) {       //WebKit
+               obj.getHeight = function() {
+                       return self.innerHeight;
+               }
+       } else if( document.documentElement.clientHeight ) {
+               obj.getHeight = function() {
+                       return document.documentElement.clientHeight;
+               }
+       } else {
+               obj.getHeight = function() {
+                       return 500;
+               }
+       }
+
+       obj.move = setInterval( function() {
+               if ( obj.initTop > 0 ) {
+                       pos = obj.getTop() + obj.initTop;
+               } else {
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
+               }
+
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+               if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+               interval = obj.top - pos;
+               obj.top = obj.top - interval / 3;
+               obj.style.top = obj.top + "px";
+       }, 30 )
+       */
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){ 
+       var x,y; 
+       if (window.innerHeight) { // IE 외 모든 브라우저 
+               x = (screen.availWidth - self.innerWidth) / 2; 
+               y = (screen.availHeight - self.innerHeight) / 2; 
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
+               x = (screen.availWidth - document.body.clientWidth) / 2; 
+               y = (screen.availHeight - document.body.clientHeight) / 2; 
+       } 
+       window.moveTo(x,y); 
+}
+
+// Layer Popup Open
+function layer_open(el){
+       var temp = $('#' + el);
+
+       if(!temp.hasClass('sty2')){
+               $('.layer').fadeIn();
+       }
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       if(temp.hasClass('sty2')){
+               temp.fadeIn();
+
+               temp.find('a.cbtn').click(function(e){
+                       temp.fadeOut();
+               });
+               temp.find('a.gbtn').click(function(e){
+                       temp.fadeOut();
+               });
+
+               return false;
+       }
+       // 닫는 버튼 gbtn-c 추가 20130627
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+               $('.layer').fadeOut();
+               return false;
+       });
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+       var temp = $('#' + el);
+       $('input').attr('disabled', 'disabled');
+       $('.layerPop').fadeIn();
+       
+
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+       else temp.css('top', '0px');
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+       else temp.css('left', '0px');
+
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+               $('.layerPop').fadeOut();
+               $('input').removeAttr('disabled');
+               return false;
+       });
+}
+
+
+function pop_account(url){
+       window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+       window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/** 
+ *  [PAGE] Tags
+ *  date : 20120820
+ *  author : 전종호
+ */
+function initTags()
+{
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+       // 마지막 아이템은 제외
+       var eleArr = $(".tag-list").find("li");
+
+       $( eleArr ).each( function( i ) {
+               if( i < eleArr.length - 1 )
+               {
+                       var target = $(this).find("a")[0];
+                       var content = $( target ).html();
+
+                       $( target ).html( content + "," );
+               }
+       })
+}
+
+$(document).ready(function(){
+       $(".tip_info").css("cursor","pointer");
+       $(".tip_info > img").mouseover(function(){
+               $(".tip_cont").css("display","block");
+       });
+       $(".tip_info > img").mouseout(function(){
+               $(".tip_cont").css("display","none");
+       });
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+       var $L = $("#" + id) ;
+       var $D  = $("#" + id + "down") ;
+
+       $T = $("#" + id) ;
+
+       $L.show();
+       isPopup = true ;
+
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+       $("#" + id + "agree").focus() ;
+
+       jQuery(":focusable").focusin(function(e){
+               if (isPopup) {
+                       e.stopPropagation() ;
+                       if ($L.find(jQuery(this)).length > 0) {
+                       } else {
+                               jQuery(this).blur() ;
+                               jQuery("#" + id + " :focusable:first").focus() ;
+                       }
+               }
+       }) ;
+
+       $L.find('.close').click(function(){
+               resetPopup(id) ;
+       });
+
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+       $("#" + T + "down").hide();
+       $("#" + T + "agree").attr("checked", false) ;
+       isPopup = false ;
+       $("#" + T).hide() ;
+       $("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+       if ($("#" + T + "agree").is(':checked')) {
+               commonDownloadLog(F, I) ;
+               resetPopup(T) ;
+       }
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+       if ( "area" === nodeName ) {
+               map = element.parentNode;
+               mapName = map.name;
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+               img = $( "img[usemap=#" + mapName + "]" )[0];
+               return !!img && visible( img );
+       }
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+                       visible( element ) ;
+}
+
+function visible( element ) {
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+               return $.css( this, "visibility" ) === "hidden";
+       }).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device1').hide();
+       
+       $('#thumb_view_btn').hover(function() {
+               $('.view_device1').show();
+       },function() {
+               $('.view_device1').hide();
+       });
+               
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+       $('.view_device2').hide();
+       
+       $('#thumb_view_btn2').hover(function() {
+               $('.view_device2').show();
+       },function() {
+               $('.view_device2').hide();
+       });
+               
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+       var $L = $("#" + popId) ;
+       $L.show(100);
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+       $L.find('.close').click(function(){
+               $L.hide();
+       });
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
diff --git a/org.tizen.web.apireference/html/scripts/core.js b/org.tizen.web.apireference/html/scripts/core.js
new file mode 100644 (file)
index 0000000..68dea4c
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10. 
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+       if (!seperator) seperator = '-';
+
+       date = $.SD.replaceAll(date, seperator, '');
+       date = $.SD.replaceAll(date, '/', '');
+
+       if (date.length !== 8) return null;
+       
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+       if (date.valueOf().toString() === 'NaN') return null;
+
+       return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+       if (!seperator) seperator = '/';
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+       var str, dateString = date.getFullYear();
+
+       str             = "0" + (date.getMonth()+1);
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+       str             = "0" + date.getDate();
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
+
+       return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+       var tnum    = num + "";
+       var tarr    = new Array();
+       var dot     = "";
+       var idxDot  = tnum.indexOf(".");
+       var sign    = "";
+       var tinx    = 0;
+       var fnum    = tnum;
+        
+       
+       if(idxDot > -1) {
+               fnum = tnum.substring(0, idxDot);
+               dot  = tnum.substring(idxDot);
+               tnum = fnum;
+       } 
+       
+       if(tnum.indexOf("-") > -1) {
+               fnum = tnum.substring(1);
+               sign = tnum.substring(0, 1);
+       }
+       
+       for(var inx = fnum.length; inx > 0; ) {
+               tarr[tinx++] = fnum.substring(inx, inx - 3);
+               inx = inx - 3;
+       }
+       
+       return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+       doAjax : function (json) {
+               var param = {
+                       async : json.async,
+                       type : json.type,
+                       dataType : json.dataType,
+                       cache: json.cache,
+                       timeout : json.timeout,
+                       success : json.success,
+                       error : json.error
+               };
+
+               if (param.dataType === 'jsonp') {
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+               } else {
+                       param.url = json.url;
+                       param.data = json.data;
+               }
+               $.ajax(param);
+       },
+       
+       get : function (json) {
+               $.SD.ajax.doAjax({ 
+                       url:json.url,
+                       cache:json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'get', 
+                       dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       },
+       
+       post : function (json) {
+               $.SD.ajax.doAjax({ url:json.url,
+                       cache: json.cache != null ? json.cache : false,
+                       async:json.async != null ? json.async : true,
+                       type:'post', dataType:'json',
+                       data:json.data != null ? json.data : {}, 
+                       timeout:10000, success:json.success, 
+                       error: function(){ if(json.error != null)json.error(); }
+               });
+       }
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+       
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/[0-9]{1,}/.test(pwd) == false) {
+               return false;
+       }
+       
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+               return false;
+       }
+       
+       return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+       var scrollbars  = "no";
+       var resizeable  = "no";
+       
+       if(popObj.scrollbars) {
+               scrollbars = popObj.scrollbars; 
+       }
+       
+       if(popObj.resizeable) {
+               resizeable = popObj.resizeable;
+       }
+       
+       var width  = screen.width;
+       var height = screen.height;
+
+       var x = ( width / 2 ) - ( popObj.width / 2 );
+       var y = ( height / 2 ) - ( popObj.height / 2 );
+
+       var opt = "left=" + x +
+                 ",top=" + y +
+                 ",width=" + popObj.width +
+                 ",height=" + popObj.height +
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+                 ",scrollbars=" + scrollbars +
+                 ",resizable=" + resizeable;
+       var pop = window.open(popObj.url, popObj.target, opt);
+       if(pop) {
+               pop.focus();
+       }
+}
+
+$.SD.isValidDate = function(val) {
+       if(val.length != 8) {
+               return false;
+       }
+       
+       var yyyy = Number(val.substring(0, 4)); 
+       var mm   = Number(val.substring(4, 6));
+       var dd   = Number(val.substring(6));
+       
+       if( mm < 1 || mm > 12 ) {
+               return false;
+       }
+       
+       var endDay  = 0;
+       
+       if( mm == 2 ) {
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+                       endDay = 29;
+               } else {
+                       endDay = 28;
+               }
+               
+       } else {
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+               endDay = endDays[mm - 1];
+       }
+       
+       if( dd <= 0 || dd > endDay ) {
+               return false;
+       } 
+       
+       return true;
+       
+}
+
+$.SD.boardDownload = function(option, func) {
+       var jsonData = {
+               url: "/board/ajaxDwnldProc.do",
+               async: false,
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+                               //location.href = $(obj).attr("href");
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDwnldProc.do",
+               async: false,
+               data: {fileName: fileName, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               location.href = fileFullPath;
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonDownloadLogProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {
+                       if(data.existFileYn == "Y") {
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+                               if(target == 'new'){
+                                       window.open(fileFullPath, '');
+                               }else{
+                                       location.href = fileFullPath;
+                               }
+                               
+                               if(func) {
+                                       func(data);
+                               }       
+                       } else {
+                               alert("File does not exist.");
+                       }
+               }
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+       var jsonData = {
+               url: "/common/ajaxCommonAllShareClickCountProc.do",
+               async: false,
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+       var jsonData = {
+               url: "/common/ajaxCommonClickCountProc.do",
+               data: {categoryName: categoryName, categoryId: categoryId},
+               success: function(data) {}
+       }
+       
+       $.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+       var resultSize = 0;
+       if(str == null){
+               return 0;
+       }
+       for(var i=0; i<str.length; i++){
+         var c = escape(str.charAt(i));
+         if(c.length == 1){
+                 resultSize ++;
+         }     else if(c.indexOf("%u") != -1) {
+                 resultSize += 2;
+         }     else if(c.indexOf("%") != -1) {
+                 resultSize += c.length/3;
+         }
+       }
+       return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+       var tempStr = new String(str);
+       var len = 0;
+       for ( var i = 0; i < str.length; i++) {
+               var c = escape(str.charAt(i));
+               if (c.length == 1)
+                       len++;
+               else if (c.indexOf("%u") != -1)
+                       len += 2;
+               else if (c.indexOf("%") != -1)
+                       len += c.length / 3;
+               if (len > limit) {
+                       tempStr = tempStr.substring(0, i);
+                       break;
+               }
+       }
+       return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/** 
+ * Method pagination 
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+       var info = {
+                        prev : 1
+                       ,first : 1
+                       ,begin : pageInfo.begin - 0
+                       ,current : pageInfo.current - 0
+                       ,end : pageInfo.end - 0
+                       ,last : pageInfo.last - 0
+                       ,next : 1
+               },
+               target  = this, 
+               page    = $('<span class="page"></span>'),
+               prev    = "", 
+               next    = "", 
+               i               = 0, 
+               n               = 0;
+
+       info.begin       = info.begin < 1 ? 1 : info.begin;
+       info.current = info.current < 1 ? 1 : info.current;
+       info.end         = info.end < 1 ? 1 : info.end;
+       info.last        = info.last < 1 ? 1 : info.last;
+
+       info.prev = info.current - 1;
+       info.next = info.current + 1;
+
+       target.addClass("pageNumber");
+       target.addClass("mt20");
+       target.children().remove();
+
+       if (info.first < info.begin) {
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.first);
+               }));
+       }
+
+       if (info.prev >= info.first) {
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.prev);
+               }));
+       }
+
+       i = info.begin;
+       n = info.end;
+       for(; i <= n; i++) {
+               if (i === info.current) {
+                       page.append('<strong>'+i+'</strong>');
+               } else {
+                       (function(index){
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+                                       e.preventDefault();
+                                       func(index);
+                               }));
+                       })(i);
+               }
+       }
+
+       target.append(page);
+
+       if (info.next <= info.last) {
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.next);
+               }));
+       }
+       
+       if (info.last > info.end) {
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+                       e.preventDefault();
+                       func(info.last);
+               }));
+       }       
+};
+
+/**
+ *  Method : popup Show Hide 
+ */
+$.fn.popupShow = function(options) {
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);
+       
+       if($("body div#" + opts.maskId).size() == 0) {
+               $("body").append("<div id='" + opts.maskId + "'></div>");
+               $("#" + opts.maskId).css({
+                       "position" : "absolute",
+                       "left"     : "0",
+                       "top"      : "0",
+                       "z-index"  : "9000",
+                       "background-color" : "#000",
+                       "display"  : "none"
+               });
+       }
+       
+       var mask_layer  = $("#" + opts.maskId);
+       var popup_layer = $(this);
+       
+       popup_layer.css("z-index", "9999");
+       
+       var maskHeight = $(document).height();
+       var maskWidth = $(window).width();
+       
+       mask_layer.css({'width':maskWidth,'height':maskHeight});
+       
+       mask_layer.fadeIn(opts.fadeSec);
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);
+       
+       var winH = $(window).height();
+       var winW = $(window).width();
+       
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+       
+       popup_layer.fadeIn(opts.fadeSec);
+       
+       var init_num = 0;
+       
+       if(init_num == 0) {
+               mask_layer.click(function() {
+                       $(this).hide();
+                       popup_layer.hide();
+               });
+               
+               
+               $("#" + opts.closeId).click( function(e) {
+                       e.preventDefault();
+                       popup_layer.popupHidden(opts.maskId);
+               });
+               
+               
+               $(window).resize( function() {
+                       var maskHeight = $(document).height();
+                       var maskWidth  = $(window).width();
+                       var winH       = $(window).height();
+                       var winW       = $(window).width();
+                       
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});
+                       
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+               });
+               
+               init_num++;
+       }
+};
+
+$.fn.popupHidden = function(maskId) {
+       var id = "#";
+       
+       if(maskId) {
+               id = id + maskId;
+       } else {
+               id = id + $.fn.popupShow.defaults.maskId; 
+       }
+       
+       $(id).hide();
+       $(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+       speed : "slow",
+       fadeLow : 0.8,
+       fadeSec : 100,
+       maskId  : "mask",
+       popupId : "layer-pop",
+       closeId : "layer-pop-close"
+};
+
+/**
+ *  Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+       var that = this;
+       var target = null;
+
+       that.each(function (i, item) {
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+               if (filePath != "") {
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+                       if (!imgExts[fileExt]) {
+                               target = item;
+                               return false;
+                       }
+               }
+       });
+
+       return target;
+}      
+
+/**
+ *  Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+       return this.optional(element) 
+              || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+    var label = $(this).data('label');
+    
+    /*
+    if (event && event.type === 'focusin') {
+      label.hide();
+    } else if (event && event.type === 'focusout') {
+      label.css('opacity', options.placeholderOpacity);
+    }
+    */
+    
+    if (event && event.type !== 'keydown') {
+      toggleLabel(this, label);
+    } else {
+      // Use timeout to catch val() just after the key is pressed
+      // Using keyup is too slow.   
+      (function(input) {
+        setTimeout(function() {
+          toggleLabel(input, label);
+        }, 0);
+      })(this);
+    }
+    
+    if (event && event.type === 'focusin') {
+       label.hide();
+    }
+  };
+  
+  var toggleLabel = function(input, label) {
+    if ($(input).val()) {
+      label.hide();
+    } else {
+      label.show();
+    }
+  };
+
+  $.fn.stickyPlaceholders = function(options) {
+    var defaults = {
+      wrapperClass: 'sticky-placeholder-wrapper',
+      wrapperDisplay: 'block',
+      labelClass: 'sticky-placeholder-label',
+      placeholderAttr: 'placeholder',
+      dataAttr: 'data-sticky-placeholder',
+      placeholderColor: '#000',
+      placeholderOpacity: 0.5,
+      placeholderFocusOpacity: 0.25
+    };
+    options = $.extend(defaults, options);
+
+    return this.each(function() {
+      var input       = $(this),
+          placeholder = input.attr(options.placeholderAttr),
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+          labelStyle;
+
+      // store a reference to each input's label
+      input.data('label', label);
+
+      // remove the placeholder attribute to avoid conflcits
+      input.removeAttr('placeholder');
+      
+      // If the dataAttr is set and it's not equal to the placeholderAttr
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+        input.attr('data-sticky-placeholder', placeholder);
+      }
+
+      labelStyle = {
+        'color': options.placeholderColor,
+        'cursor': 'text',
+        'font-family': input.css('font-family'),
+        'font-weight': input.css('font-weight'),
+        'font-size': input.css('font-size'),
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+        'opacity': options.placeholderOpacity,
+        'padding-left': input.css('padding-left'),
+        'padding-top': input.css('padding-top'),
+        'position': 'absolute',
+        'text-transform': input.css('text-transform'),
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+      };
+      label.css(labelStyle);
+      
+      // hide the placeholder if the input already has a value
+      if (input.val()) {
+        label.hide();
+      }
+
+      $(this).bind('keydown input focusin focusout', function(event) {
+        $.SD.alterParent.call(this, options, event);
+      });
+        
+      // prevent click/dblclick from selecting the label text
+      label.bind('mousedown', function(e) {
+        e.preventDefault();
+      });
+      
+      // call alterParent initially without an event to set up the wrapper elements
+      $.SD.alterParent.call(this, options);
+    });
+  };
+ 
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+       $("#" + file_id).on("keydown", function(e) {
+               var that = $(this);
+               if(e.which == 9 && e.shiftKey) {
+                       return true;
+               }
+               
+               if(e.which === 9) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + after_id).focus();
+                       }, 1);
+               }
+       });
+       
+       $("#" + after_id).on("keydown", function(e) {
+               if(e.which == 9 && e.shiftKey) {
+                       e.preventDefault();
+                       setTimeout(function() {
+                               $("#" + file_id).focus();
+                       }, 1);
+               }
+       });
+}  
+
+$.SD.closeWP = function() {
+       var Browser = navigator.appName;
+       var indexB = Browser.indexOf('Explorer');
+       if (indexB > 0) {
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);
+           window.opener.focus();
+           if (Version >= 7) {
+               window.open('', '_self', '');
+               window.close();
+           }
+           else if (Version == 6) {
+               window.opener = null;
+               window.close();
+           }
+           else {
+               window.opener = '';
+               window.close();
+           }
+       }
+       else {
+           window.close();
+       }
+}
+
+$.SD.profileFacebook = function() {
+       location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+        switch($(this).attr('id')) {
+        case 'changeEn': onClickChangeEn(e);  break;
+        case 'changeZh': onClickChangeZh(e); break;
+        case 'changeKo': onClickChangeKo(e); break;
+        case 'signOut': onClickSignOut(e); break;
+        case 'signUp': onClickSignUp(e); break;
+        case 'signIn': onClickSignIn(e); break;
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+        case 'signOff': onClickSignOff(e); break;
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+        case 'deleteAccount' : onClickDeleteAccount(e); break;
+        }
+});
+ 
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+       e.preventDefault();
+       var $this = $(this);
+       
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+               var sns = $this.attr("id").substring(4).toLowerCase();
+               switch(sns) {
+               case "facebook" :
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+                       $("div.content img").each(function() {
+                               var that = $(this);
+                               if(that.width() > 200 && that.height() > 200) {
+                                       imgUrl = that.attr("src");
+                                       return false;
+                               }
+                       });
+                       
+                       var data = {
+                               app_id : $("#sd_appId").text(),
+                               link : copyUrl,
+                               picture : imgUrl,
+                               name : $("title").text(),
+                               caption : "developer.samsung.com",
+                               description : $("div.content p").eq(0).text(),
+                               redirectUri : "http://" + location.host + "/board/sns.do"
+                       };
+                       var url = "https://www.facebook.com/dialog/feed?" ;
+                       url += "app_id=" + data.app_id + "&" ;
+                       url += "link=" + data.link + "&" ;
+                       url += "picture=" + data.picture + "&" ;
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;
+                       url += "redirect_uri=" + data.redirectUri ;
+                       sendSNS(sns, url, 850, 600);
+                       break;
+               case "twitter" :
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+                       break;
+               }
+       }
+       
+       function sendSNS(sns, url, iWidth, iHeight) {
+               var popObj = { url : url
+                                    , width : iWidth
+                                    , height: iHeight
+                                    , target: sns
+                                    , scrollbars: "yes"
+                                    , resizeable: "yes"};
+       
+               $SD.popupCenter(popObj);
+       }
+})
+ 
+//document rady End #########################################
+ });
+
+;(function(){
+       window.deviceImageError = function(el) {
+               var noImage = noImage || '/images/common/device_details_noimage.gif';
+               if (el.src === noImage) 
+                       return;
+               el.src = noImage;
+       };
+})();
+
+function commonDownload(fileName, categoryId){
+       if (fileName == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!!!")
+               return;
+       }else{
+               $SD.commonDownload(fileName, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+               });
+       }
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+       if (fileFullPath == "" || categoryId == ""){
+               alert("필요한 인자값을 확인해주세요!!")
+               return;
+       }else{
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+               });
+       }
+}
+
+/*
+function layer_view(id){
+
+       var $layer = $('#'+id);
+       var $down  = $('.license-layer').find('a#down');
+
+       $layer.show();
+       $layer.find('.close, #down').click(function(){
+               $layer.hide();
+       });
+
+       function countChecked() {
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
+       }
+
+       $(":checkbox").click(countChecked);
+}
+*/
diff --git a/org.tizen.web.apireference/html/scripts/jquery.util.js b/org.tizen.web.apireference/html/scripts/jquery.util.js
new file mode 100644 (file)
index 0000000..3fc3ad0
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
+ *          
+ *   class: Inside the class attribute, wrapped in curly braces: { }
+ *   
+ *   elem:  Inside a child element (e.g. a script tag). The
+ *          name parameter indicates *which* element.
+ *          
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ * 
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ * 
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ * 
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ * 
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+       metadata : {
+               defaults : {
+                       type: 'class',
+                       name: 'metadata',
+                       cre: /({.*})/,
+                       single: 'metadata'
+               },
+               setType: function( type, name ){
+                       this.defaults.type = type;
+                       this.defaults.name = name;
+               },
+               get: function( elem, opts ){
+                       var settings = $.extend({},this.defaults,opts);
+                       // check for empty string in single property
+                       if ( !settings.single.length ) settings.single = 'metadata';
+                       
+                       var data = $.data(elem, settings.single);
+                       // returned cached data if it already exists
+                       if ( data ) return data;
+                       
+                       data = "{}";
+                       
+                       if ( settings.type == "class" ) {
+                               var m = settings.cre.exec( elem.className );
+                               if ( m )
+                                       data = m[1];
+                       } else if ( settings.type == "elem" ) {
+                               if( !elem.getElementsByTagName )
+                                       return undefined;
+                               var e = elem.getElementsByTagName(settings.name);
+                               if ( e.length )
+                                       data = $.trim(e[0].innerHTML);
+                       } else if ( elem.getAttribute != undefined ) {
+                               var attr = elem.getAttribute( settings.name );
+                               if ( attr )
+                                       data = attr;
+                       }
+                       
+                       if ( data.indexOf( '{' ) <0 )
+                       data = "{" + data + "}";
+                       
+                       data = eval("(" + data + ")");
+                       
+                       $.data( elem, settings.single, data );
+                       return data;
+               }
+       }
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+       return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+       // http://docs.jquery.com/Plugins/Validation/validate
+       validate: function( options ) {
+
+               // if nothing is selected, return nothing; can't chain anyway
+               if (!this.length) {
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+                       return;
+               }
+
+               // check if a validator for this form was already created
+               var validator = $.data(this[0], 'validator');
+               if ( validator ) {
+                       return validator;
+               }
+
+               // Add novalidate tag if HTML5.
+               this.attr('novalidate', 'novalidate');
+
+               validator = new $.validator( options, this[0] );
+               $.data(this[0], 'validator', validator);
+
+               if ( validator.settings.onsubmit ) {
+
+                       var inputsAndButtons = this.find("input, button");
+
+                       // allow suppresing validation by adding a cancel class to the submit button
+                       inputsAndButtons.filter(".cancel").click(function () {
+                               validator.cancelSubmit = true;
+                       });
+
+                       // when a submitHandler is used, capture the submitting button
+                       if (validator.settings.submitHandler) {
+                               inputsAndButtons.filter(":submit").click(function () {
+                                       validator.submitButton = this;
+                               });
+                       }
+
+                       // validate the form on submit
+                       this.submit( function( event ) {
+                               if ( validator.settings.debug )
+                                       // prevent form submit to be able to see console output
+                                       event.preventDefault();
+
+                               function handle() {
+                                       if ( validator.settings.submitHandler ) {
+                                               if (validator.submitButton) {
+                                                       // insert a hidden input as a replacement for the missing submit button
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+                                               }
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );
+                                               if (validator.submitButton) {
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+                                                       hidden.remove();
+                                               }
+                                               return false;
+                                       }
+                                       return true;
+                               }
+
+                               // prevent submit for invalid forms or custom submit handlers
+                               if ( validator.cancelSubmit ) {
+                                       validator.cancelSubmit = false;
+                                       return handle();
+                               }
+                               if ( validator.form() ) {
+                                       if ( validator.pendingRequest ) {
+                                               validator.formSubmitted = true;
+                                               return false;
+                                       }
+                                       return handle();
+                               } else {
+                                       validator.focusInvalid();
+                                       return false;
+                               }
+                       });
+               }
+
+               return validator;
+       },
+       // http://docs.jquery.com/Plugins/Validation/valid
+       valid: function() {
+        if ( $(this[0]).is('form')) {
+            return this.validate().form();
+        } else {
+            var valid = true;
+            var validator = $(this[0].form).validate();
+            this.each(function() {
+                               valid &= validator.element(this);
+            });
+            return valid;
+        }
+    },
+       // attributes: space seperated list of attributes to retrieve and remove
+       removeAttrs: function(attributes) {
+               var result = {},
+                       $element = this;
+               $.each(attributes.split(/\s/), function(index, value) {
+                       result[value] = $element.attr(value);
+                       $element.removeAttr(value);
+               });
+               return result;
+       },
+       // http://docs.jquery.com/Plugins/Validation/rules
+       rules: function(command, argument) {
+               var element = this[0];
+
+               if (command) {
+                       var settings = $.data(element.form, 'validator').settings;
+                       var staticRules = settings.rules;
+                       var existingRules = $.validator.staticRules(element);
+                       switch(command) {
+                       case "add":
+                               $.extend(existingRules, $.validator.normalizeRule(argument));
+                               staticRules[element.name] = existingRules;
+                               if (argument.messages)
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+                               break;
+                       case "remove":
+                               if (!argument) {
+                                       delete staticRules[element.name];
+                                       return existingRules;
+                               }
+                               var filtered = {};
+                               $.each(argument.split(/\s/), function(index, method) {
+                                       filtered[method] = existingRules[method];
+                                       delete existingRules[method];
+                               });
+                               return filtered;
+                       }
+               }
+
+               var data = $.validator.normalizeRules(
+               $.extend(
+                       {},
+                       $.validator.metadataRules(element),
+                       $.validator.classRules(element),
+                       $.validator.attributeRules(element),
+                       $.validator.staticRules(element)
+               ), element);
+
+               // make sure required is at front
+               if (data.required) {
+                       var param = data.required;
+                       delete data.required;
+                       data = $.extend({required: param}, data);
+               }
+
+               return data;
+       }
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+       // http://docs.jquery.com/Plugins/Validation/blank
+       blank: function(a) {return !$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/filled
+       filled: function(a) {return !!$.trim("" + a.value);},
+       // http://docs.jquery.com/Plugins/Validation/unchecked
+       unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+       this.settings = $.extend( true, {}, $.validator.defaults, options );
+       this.currentForm = form;
+       this.init();
+};
+
+$.validator.format = function(source, params) {
+       if ( arguments.length == 1 )
+               return function() {
+                       var args = $.makeArray(arguments);
+                       args.unshift(source);
+                       return $.validator.format.apply( this, args );
+               };
+       if ( arguments.length > 2 && params.constructor != Array  ) {
+               params = $.makeArray(arguments).slice(1);
+       }
+       if ( params.constructor != Array ) {
+               params = [ params ];
+       }
+       $.each(params, function(i, n) {
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+       });
+       return source;
+};
+
+$.extend($.validator, {
+
+       defaults: {
+               messages: {},
+               groups: {},
+               rules: {},
+               errorClass: "error",
+               validClass: "valid",
+               errorElement: "label",
+               focusInvalid: true,
+               errorContainer: $( [] ),
+               errorLabelContainer: $( [] ),
+               onsubmit: true,
+               ignore: ":hidden",
+               ignoreTitle: false,
+               onfocusin: function(element, event) {
+                       this.lastActive = element;
+
+                       // hide error label and remove error class on focus if enabled
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+                               this.addWrapper(this.errorsFor(element)).hide();
+                       }
+               },
+               onfocusout: function(element, event) {
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+                               this.element(element);
+                       }
+               },
+               onkeyup: function(element, event) {
+                       if ( element.name in this.submitted || element == this.lastElement ) {
+                               this.element(element);
+                       }
+               },
+               onclick: function(element, event) {
+                       // click on selects, radiobuttons and checkboxes
+                       if ( element.name in this.submitted )
+                               this.element(element);
+                       // or option elements, check parent select in that case
+                       else if (element.parentNode.name in this.submitted)
+                               this.element(element.parentNode);
+               },
+               highlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+                       } else {
+                               $(element).addClass(errorClass).removeClass(validClass);
+                       }
+               },
+               unhighlight: function(element, errorClass, validClass) {
+                       if (element.type === 'radio') {
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+                       } else {
+                               $(element).removeClass(errorClass).addClass(validClass);
+                       }
+               }
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+       setDefaults: function(settings) {
+               $.extend( $.validator.defaults, settings );
+       },
+
+       messages: {
+               required: "This field is required.",
+               remote: "Please fix this field.",
+               email: "Please enter a valid email address.",
+               url: "Please enter a valid URL.",
+               date: "Please enter a valid date.",
+               dateISO: "Please enter a valid date (ISO).",
+               number: "Please enter a valid number.",
+               digits: "Please enter only digits.",
+               creditcard: "Please enter a valid credit card number.",
+               equalTo: "Please enter the same value again.",
+               accept: "Please enter a value with a valid extension.",
+               maxlength: $.validator.format("Please enter no more than {0} characters."),
+               minlength: $.validator.format("Please enter at least {0} characters."),
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+               range: $.validator.format("Please enter a value between {0} and {1}."),
+               max: $.validator.format("Please enter a value less than or equal to {0}."),
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")
+       },
+
+       autoCreateRanges: false,
+
+       prototype: {
+
+               init: function() {
+                       this.labelContainer = $(this.settings.errorLabelContainer);
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+                       this.submitted = {};
+                       this.valueCache = {};
+                       this.pendingRequest = 0;
+                       this.pending = {};
+                       this.invalid = {};
+                       this.reset();
+
+                       var groups = (this.groups = {});
+                       $.each(this.settings.groups, function(key, value) {
+                               $.each(value.split(/\s/), function(index, name) {
+                                       groups[name] = key;
+                               });
+                       });
+                       var rules = this.settings.rules;
+                       $.each(rules, function(key, value) {
+                               rules[key] = $.validator.normalizeRule(value);
+                       });
+
+                       function delegate(event) {
+                               var validator = $.data(this[0].form, "validator"),
+                                       eventType = "on" + event.type.replace(/^validate/, "");
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+                       }
+                       $(this.currentForm)
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +
+                                               "[type='range'], [type='color'] ",
+                                               "focusin focusout keyup", delegate)
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+                       if (this.settings.invalidHandler)
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/form
+               form: function() {
+                       this.checkForm();
+                       $.extend(this.submitted, this.errorMap);
+                       this.invalid = $.extend({}, this.errorMap);
+                       if (!this.valid())
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                       this.showErrors();
+                       return this.valid();
+               },
+
+               // 원본소스
+               /*
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               this.check( elements[i] );
+                       }
+                       return this.valid();
+               },
+               */
+
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+               checkForm: function() {
+                       this.prepareForm();
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+                                               this.check( this.findByName( elements[i].name )[cnt] );
+                                       }
+                               } else {
+                                       this.check( elements[i] );
+                               }
+                       }
+                       return this.valid();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/element
+               element: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+                       this.lastElement = element;
+                       this.prepareElement( element );
+                       this.currentElements = $(element);
+                       var result = this.check( element );
+                       if ( result ) {
+                               delete this.invalid[element.name];
+                       } else {
+                               this.invalid[element.name] = true;
+                       }
+                       if ( !this.numberOfInvalids() ) {
+                               // Hide error containers on last error
+                               this.toHide = this.toHide.add( this.containers );
+                       }
+                       this.showErrors();
+                       return result;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+               showErrors: function(errors) {
+                       if(errors) {
+                               // add items to error list and map
+                               $.extend( this.errorMap, errors );
+                               this.errorList = [];
+                               for ( var name in errors ) {
+                                       this.errorList.push({
+                                               message: errors[name],
+                                               element: this.findByName(name)[0]
+                                       });
+                               }
+                               // remove items from success list
+                               this.successList = $.grep( this.successList, function(element) {
+                                       return !(element.name in errors);
+                               });
+                       }
+                       this.settings.showErrors
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+                               : this.defaultShowErrors();
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+               resetForm: function() {
+                       if ( $.fn.resetForm )
+                               $( this.currentForm ).resetForm();
+                       this.submitted = {};
+                       this.lastElement = null;
+                       this.prepareForm();
+                       this.hideErrors();
+                       this.elements().removeClass( this.settings.errorClass );
+               },
+
+               numberOfInvalids: function() {
+                       return this.objectLength(this.invalid);
+               },
+
+               objectLength: function( obj ) {
+                       var count = 0;
+                       for ( var i in obj )
+                               count++;
+                       return count;
+               },
+
+               hideErrors: function() {
+                       this.addWrapper( this.toHide ).hide();
+               },
+
+               valid: function() {
+                       return this.size() == 0;
+               },
+
+               size: function() {
+                       return this.errorList.length;
+               },
+
+               focusInvalid: function() {
+                       if( this.settings.focusInvalid ) {
+                               try {
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+                                       .filter(":visible")
+                                       .focus()
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+                                       .trigger("focusin");
+                               } catch(e) {
+                                       // ignore IE throwing errors when focusing hidden elements
+                               }
+                       }
+               },
+
+               findLastActive: function() {
+                       var lastActive = this.lastActive;
+                       return lastActive && $.grep(this.errorList, function(n) {
+                               return n.element.name == lastActive.name;
+                       }).length == 1 && lastActive;
+               },
+
+               elements: function() {
+                       var validator = this,
+                               rulesCache = {};
+
+                       // select all valid inputs inside the form (no submit or reset buttons)
+                       return $(this.currentForm)
+                       .find("input, select, textarea")
+                       .not(":submit, :reset, :image, [disabled]")
+                       .not( this.settings.ignore )
+                       .filter(function() {
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+                               // select only the first element for each name, and only those with rules specified
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+                                       return false;
+
+                               rulesCache[this.name] = true;
+                               return true;
+                       });
+               },
+
+               clean: function( selector ) {
+                       return $( selector )[0];
+               },
+
+               errors: function() {
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+               },
+
+               reset: function() {
+                       this.successList = [];
+                       this.errorList = [];
+                       this.errorMap = {};
+                       this.toShow = $([]);
+                       this.toHide = $([]);
+                       this.currentElements = $([]);
+               },
+
+               prepareForm: function() {
+                       this.reset();
+                       this.toHide = this.errors().add( this.containers );
+               },
+
+               prepareElement: function( element ) {
+                       this.reset();
+                       this.toHide = this.errorsFor(element);
+               },
+
+               check: function( element ) {
+                       element = this.validationTargetFor( this.clean( element ) );
+
+                       var rules = $(element).rules();
+                       var dependencyMismatch = false;
+                       for (var method in rules ) {
+                               var rule = { method: method, parameters: rules[method] };
+                               try {
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+                                       // if a method indicates that the field is optional and therefore valid,
+                                       // don't mark it as valid when there are no other rules
+                                       if ( result == "dependency-mismatch" ) {
+                                               dependencyMismatch = true;
+                                               continue;
+                                       }
+                                       dependencyMismatch = false;
+
+                                       if ( result == "pending" ) {
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );
+                                               return;
+                                       }
+
+                                       if( !result ) {
+                                               this.formatAndAdd( element, rule );
+                                               return false;
+                                       }
+                               } catch(e) {
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+                                                + ", check the '" + rule.method + "' method", e);
+                                       throw e;
+                               }
+                       }
+                       if (dependencyMismatch)
+                               return;
+                       if ( this.objectLength(rules) )
+                               this.successList.push(element);
+                       return true;
+               },
+
+               // return the custom message for the given element and validation method
+               // specified in the element's "messages" metadata
+               customMetaMessage: function(element, method) {
+                       if (!$.metadata)
+                               return;
+
+                       var meta = this.settings.meta
+                               ? $(element).metadata()[this.settings.meta]
+                               : $(element).metadata();
+
+                       return meta && meta.messages && meta.messages[method];
+               },
+
+               // return the custom message for the given element name and validation method
+               customMessage: function( name, method ) {
+                       var m = this.settings.messages[name];
+                       return m && (m.constructor == String
+                               ? m
+                               : m[method]);
+               },
+
+               // return the first defined argument, allowing empty strings
+               findDefined: function() {
+                       for(var i = 0; i < arguments.length; i++) {
+                               if (arguments[i] !== undefined)
+                                       return arguments[i];
+                       }
+                       return undefined;
+               },
+
+               defaultMessage: function( element, method) {
+                       return this.findDefined(
+                               this.customMessage( element.name, method ),
+                               this.customMetaMessage( element, method ),
+                               // title is never undefined, so handle empty string as undefined
+                               !this.settings.ignoreTitle && element.title || undefined,
+                               $.validator.messages[method],
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"
+                       );
+               },
+
+               formatAndAdd: function( element, rule ) {
+                       var message = this.defaultMessage( element, rule.method ),
+                               theregex = /\$?\{(\d+)\}/g;
+                       if ( typeof message == "function" ) {
+                               message = message.call(this, rule.parameters, element);
+                       } else if (theregex.test(message)) {
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+                       }
+                       this.errorList.push({
+                               message: message,
+                               element: element
+                       });
+
+                       this.errorMap[element.name] = message;
+                       this.submitted[element.name] = message;
+               },
+
+               addWrapper: function(toToggle) {
+                       if ( this.settings.wrapper )
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+                       return toToggle;
+               },
+
+               defaultShowErrors: function() {
+                       for ( var i = 0; this.errorList[i]; i++ ) {
+                               var error = this.errorList[i];
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+                               this.showLabel( error.element, error.message );
+                       }
+                       if( this.errorList.length ) {
+                               this.toShow = this.toShow.add( this.containers );
+                       }
+                       if (this.settings.success) {
+                               for ( var i = 0; this.successList[i]; i++ ) {
+                                       this.showLabel( this.successList[i] );
+                               }
+                       }
+                       if (this.settings.unhighlight) {
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+                               }
+                       }
+                       this.toHide = this.toHide.not( this.toShow );
+                       this.hideErrors();
+                       this.addWrapper( this.toShow ).show();
+               },
+
+               validElements: function() {
+                       return this.currentElements.not(this.invalidElements());
+               },
+
+               invalidElements: function() {
+                       return $(this.errorList).map(function() {
+                               return this.element;
+                       });
+               },
+
+               showLabel: function(element, message) {
+                       var label = this.errorsFor( element );
+                       if ( label.length ) {
+                               // refresh error/success class
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+                               // check if we have a generated label, replace the message then
+                               label.attr("generated") && label.html(message);
+                       } else {
+                               // create label
+                               label = $("<" + this.settings.errorElement + "/>")
+                                       .attr({"for":  this.idOrName(element), generated: true})
+                                       .addClass(this.settings.errorClass)
+                                       .html(message || "");
+                               if ( this.settings.wrapper ) {
+                                       // make sure the element is visible, even in IE
+                                       // actually showing the wrapped element is handled elsewhere
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+                               }
+                               if ( !this.labelContainer.append(label).length )
+                                       this.settings.errorPlacement
+                                               ? this.settings.errorPlacement(label, $(element) )
+                                               : label.insertAfter(element);
+                       }
+                       if ( !message && this.settings.success ) {
+                               label.text("");
+                               typeof this.settings.success == "string"
+                                       ? label.addClass( this.settings.success )
+                                       : this.settings.success( label );
+                       }
+                       this.toShow = this.toShow.add(label);
+               },
+
+               errorsFor: function(element) {
+                       var name = this.idOrName(element);
+               return this.errors().filter(function() {
+                               return $(this).attr('for') == name;
+                       });
+               },
+
+               idOrName: function(element) {
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+               },
+
+               validationTargetFor: function(element) {
+                       // if radio/checkbox, validate first element in group instead
+                       if (this.checkable(element)) {
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
+                       }
+                       return element;
+               },
+
+               checkable: function( element ) {
+                       return /radio|checkbox/i.test(element.type);
+               },
+
+               findByName: function( name ) {
+                       // select by name and filter by form for performance over form.find("[name=...]")
+                       var form = this.currentForm;
+                       return $(document.getElementsByName(name)).map(function(index, element) {
+                               return element.form == form && element.name == name && element  || null;
+                       });
+               },
+
+               getLength: function(value, element) {
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               return $("option:selected", element).length;
+                       case 'input':
+                               if( this.checkable( element) )
+                                       return this.findByName(element.name).filter(':checked').length;
+                       }
+                       return value.length;
+               },
+
+               depend: function(param, element) {
+                       return this.dependTypes[typeof param]
+                               ? this.dependTypes[typeof param](param, element)
+                               : true;
+               },
+
+               dependTypes: {
+                       "boolean": function(param, element) {
+                               return param;
+                       },
+                       "string": function(param, element) {
+                               return !!$(param, element.form).length;
+                       },
+                       "function": function(param, element) {
+                               return param(element);
+                       }
+               },
+
+               optional: function(element) {
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+               },
+
+               startRequest: function(element) {
+                       if (!this.pending[element.name]) {
+                               this.pendingRequest++;
+                               this.pending[element.name] = true;
+                       }
+               },
+
+               stopRequest: function(element, valid) {
+                       this.pendingRequest--;
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0
+                       if (this.pendingRequest < 0)
+                               this.pendingRequest = 0;
+                       delete this.pending[element.name];
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+                               $(this.currentForm).submit();
+                               this.formSubmitted = false;
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);
+                               this.formSubmitted = false;
+                       }
+               },
+
+               previousValue: function(element) {
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
+                               old: null,
+                               valid: true,
+                               message: this.defaultMessage( element, "remote" )
+                       });
+               }
+
+       },
+
+       classRuleSettings: {
+               required: {required: true},
+               email: {email: true},
+               url: {url: true},
+               date: {date: true},
+               dateISO: {dateISO: true},
+               dateDE: {dateDE: true},
+               number: {number: true},
+               numberDE: {numberDE: true},
+               digits: {digits: true},
+               creditcard: {creditcard: true}
+       },
+
+       addClassRules: function(className, rules) {
+               className.constructor == String ?
+                       this.classRuleSettings[className] = rules :
+                       $.extend(this.classRuleSettings, className);
+       },
+
+       classRules: function(element) {
+               var rules = {};
+               var classes = $(element).attr('class');
+               classes && $.each(classes.split(' '), function() {
+                       if (this in $.validator.classRuleSettings) {
+                               $.extend(rules, $.validator.classRuleSettings[this]);
+                       }
+               });
+               return rules;
+       },
+
+       attributeRules: function(element) {
+               var rules = {};
+               var $element = $(element);
+
+               for (var method in $.validator.methods) {
+                       var value;
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
+                       if (method === 'required' && typeof $.fn.prop === 'function') {
+                               value = $element.prop(method);
+                       } else {
+                               value = $element.attr(method);
+                       }
+                       if (value) {
+                               rules[method] = value;
+                       } else if ($element[0].getAttribute("type") === method) {
+                               rules[method] = true;
+                       }
+               }
+
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+                       delete rules.maxlength;
+               }
+
+               return rules;
+       },
+
+       metadataRules: function(element) {
+               if (!$.metadata) return {};
+
+               var meta = $.data(element.form, 'validator').settings.meta;
+               return meta ?
+                       $(element).metadata()[meta] :
+                       $(element).metadata();
+       },
+
+       staticRules: function(element) {
+               var rules = {};
+               var validator = $.data(element.form, 'validator');
+               if (validator.settings.rules) {
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+               }
+               return rules;
+       },
+
+       normalizeRules: function(rules, element) {
+               // handle dependency check
+               $.each(rules, function(prop, val) {
+                       // ignore rule when param is explicitly false, eg. required:false
+                       if (val === false) {
+                               delete rules[prop];
+                               return;
+                       }
+                       if (val.param || val.depends) {
+                               var keepRule = true;
+                               switch (typeof val.depends) {
+                                       case "string":
+                                               keepRule = !!$(val.depends, element.form).length;
+                                               break;
+                                       case "function":
+                                               keepRule = val.depends.call(element, element);
+                                               break;
+                               }
+                               if (keepRule) {
+                                       rules[prop] = val.param !== undefined ? val.param : true;
+                               } else {
+                                       delete rules[prop];
+                               }
+                       }
+               });
+
+               // evaluate parameters
+               $.each(rules, function(rule, parameter) {
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+               });
+
+               // clean number parameters
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
+                       if (rules[this]) {
+                               rules[this] = Number(rules[this]);
+                       }
+               });
+               $.each(['rangelength', 'range'], function() {
+                       if (rules[this]) {
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+                       }
+               });
+
+               if ($.validator.autoCreateRanges) {
+                       // auto-create ranges
+                       if (rules.min && rules.max) {
+                               rules.range = [rules.min, rules.max];
+                               delete rules.min;
+                               delete rules.max;
+                       }
+                       if (rules.minlength && rules.maxlength) {
+                               rules.rangelength = [rules.minlength, rules.maxlength];
+                               delete rules.minlength;
+                               delete rules.maxlength;
+                       }
+               }
+
+               // To support custom messages in metadata ignore rule methods titled "messages"
+               if (rules.messages) {
+                       delete rules.messages;
+               }
+
+               return rules;
+       },
+
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+       normalizeRule: function(data) {
+               if( typeof data == "string" ) {
+                       var transformed = {};
+                       $.each(data.split(/\s/), function() {
+                               transformed[this] = true;
+                       });
+                       data = transformed;
+               }
+               return data;
+       },
+
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+       addMethod: function(name, method, message) {
+               $.validator.methods[name] = method;
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+               if (method.length < 3) {
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
+               }
+       },
+
+       methods: {
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/required
+               required: function(value, element, param) {
+                       // check if dependency is met
+                       if ( !this.depend(param, element) )
+                               return "dependency-mismatch";
+                       switch( element.nodeName.toLowerCase() ) {
+                       case 'select':
+                               // could be an array for select-multiple or a string, both are fine this way
+                               var val = $(element).val();
+                               return val && val.length > 0;
+                       case 'input':
+                               if ( this.checkable(element) )
+                                       return this.getLength(value, element) > 0;
+                       default:
+                               return $.trim(value).length > 0;
+                       }
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote
+               remote: function(value, element, param) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+
+                       var previous = this.previousValue(element);
+                       if (!this.settings.messages[element.name] )
+                               this.settings.messages[element.name] = {};
+                       previous.originalMessage = this.settings.messages[element.name].remote;
+                       this.settings.messages[element.name].remote = previous.message;
+
+                       param = typeof param == "string" && {url:param} || param;
+
+                       if ( this.pending[element.name] ) {
+                               return "pending";
+                       }
+                       if ( previous.old === value ) {
+                               return previous.valid;
+                       }
+
+                       previous.old = value;
+                       var validator = this;
+                       this.startRequest(element);
+                       var data = {};
+                       data[element.name] = value;
+                       $.ajax($.extend(true, {
+                               url: param,
+                               mode: "abort",
+                               port: "validate" + element.name,
+                               dataType: "json",
+                               data: data,
+                               success: function(response) {
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;
+                                       var valid = response === true;
+                                       if ( valid ) {
+                                               var submitted = validator.formSubmitted;
+                                               validator.prepareElement(element);
+                                               validator.formSubmitted = submitted;
+                                               validator.successList.push(element);
+                                               validator.showErrors();
+                                       } else {
+                                               var errors = {};
+                                               var message = response || validator.defaultMessage( element, "remote" );
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+                                               validator.showErrors(errors);
+                                       }
+                                       previous.valid = valid;
+                                       validator.stopRequest(element, valid);
+                               }
+                       }, param));
+                       return "pending";
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
+               minlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+               maxlength: function(value, element, param) {
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+               rangelength: function(value, element, param) {
+                       var length = this.getLength($.trim(value), element);
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/min
+               min: function( value, element, param ) {
+                       return this.optional(element) || value >= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/max
+               max: function( value, element, param ) {
+                       return this.optional(element) || value <= param;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/range
+               range: function( value, element, param ) {
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/email
+               email: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/url
+               url: function(value, element) {
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/date
+               date: function(value, element) {
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+               dateISO: function(value, element) {
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/number
+               number: function(value, element) {
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits
+               digits: function(value, element) {
+                       return this.optional(element) || /^\d+$/.test(value);
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+               // based on http://en.wikipedia.org/wiki/Luhn
+               creditcard: function(value, element) {
+                       if ( this.optional(element) )
+                               return "dependency-mismatch";
+                       // accept only spaces, digits and dashes
+                       if (/[^0-9 -]+/.test(value))
+                               return false;
+                       var nCheck = 0,
+                               nDigit = 0,
+                               bEven = false;
+
+                       value = value.replace(/\D/g, "");
+
+                       for (var n = value.length - 1; n >= 0; n--) {
+                               var cDigit = value.charAt(n);
+                               var nDigit = parseInt(cDigit, 10);
+                               if (bEven) {
+                                       if ((nDigit *= 2) > 9)
+                                               nDigit -= 9;
+                               }
+                               nCheck += nDigit;
+                               bEven = !bEven;
+                       }
+
+                       return (nCheck % 10) == 0;
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept
+               accept: function(value, element, param) {
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+               },
+
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+               equalTo: function(value, element, param) {
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+                               $(element).valid();
+                       });
+                       return value == target.val();
+               }
+
+       }
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+       var pendingRequests = {};
+       // Use a prefilter if available (1.5+)
+       if ( $.ajaxPrefilter ) {
+               $.ajaxPrefilter(function(settings, _, xhr) {
+                       var port = settings.port;
+                       if (settings.mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               pendingRequests[port] = xhr;
+                       }
+               });
+       } else {
+               // Proxy ajax
+               var ajax = $.ajax;
+               $.ajax = function(settings) {
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+                       if (mode == "abort") {
+                               if ( pendingRequests[port] ) {
+                                       pendingRequests[port].abort();
+                               }
+                               return (pendingRequests[port] = ajax.apply(this, arguments));
+                       }
+                       return ajax.apply(this, arguments);
+               };
+       }
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+       // only implement if not provided by jQuery core (since 1.4)
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+               $.each({
+                       focus: 'focusin',
+                       blur: 'focusout'
+               }, function( original, fix ){
+                       $.event.special[fix] = {
+                               setup:function() {
+                                       this.addEventListener( original, handler, true );
+                               },
+                               teardown:function() {
+                                       this.removeEventListener( original, handler, true );
+                               },
+                               handler: function(e) {
+                                       arguments[0] = $.event.fix(e);
+                                       arguments[0].type = fix;
+                                       return $.event.handle.apply(this, arguments);
+                               }
+                       };
+                       function handler(e) {
+                               e = $.event.fix(e);
+                               e.type = fix;
+                               return $.event.handle.call(this, e);
+                       }
+               });
+       };
+       $.extend($.fn, {
+               validateDelegate: function(delegate, type, handler) {
+                       return this.bind(type, function(event) {
+                               var target = $(event.target);
+                               if (target.is(delegate)) {
+                                       return handler.apply(target, arguments);
+                               }
+                       });
+               }
+       });
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/scripts/jquery.zclip.min.js b/org.tizen.web.apireference/html/scripts/jquery.zclip.min.js
new file mode 100644 (file)
index 0000000..51471a1
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/scripts/navi.js b/org.tizen.web.apireference/html/scripts/navi.js
new file mode 100644 (file)
index 0000000..badc738
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[
+    var staticURL = "http://img-developer.samsung.com";
+       var sslCall = "";
+
+       if('' !== 'N') {
+               var locationStr = location.href;
+               if(locationStr.indexOf("https://") > -1) {
+                       location.href = "http://" + locationStr.substring(8);
+               }     
+    }
+
+//     if( typeof($) === function ) {
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+               //? ??? ?? ?? ??? ?? ?? ???.
+//     }
+    $SD.pagination.alt = {
+               first:"go first",
+               prev:"go prev",
+               next:"go next",
+               last:"go last"
+    };
+    $(document).ready(function(){
+       var myVar;
+           topSearchInit();//top search ??
+           $('#searchTop').attr("autocomplete","off");
+           var searchingBoolean = false;
+           
+           var topSearchChange = function(){
+               
+               if (searchingBoolean) return;
+               
+                       var searchInput = $('#searchTop').val();
+                       
+                       if($('#searchTop').val() != ""){
+                               $("#topAutocomplete").hide();
+                               searchingBoolean = true;
+                               
+                               var jsonData = {
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+                                               async : true,
+                                               data : { searchInput : searchInput},
+                                               success : function(data){
+                                                       if (searchInput == $('#searchTop').val()){
+                                                               var autoComplete = data.kwdNm;
+                                                               var tmpHtml = "";
+                                                               
+                                                               if (autoComplete.length > 0){
+                                                                       $('#topAutocomplete').children().remove();
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+                                                                       $.each(autoComplete, function(i, item){
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+                                                                               a.data('keyword', item.kwdNm);
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
+                                                                       });
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+                                                                               if(e.which == 9 && e.shiftKey) {
+                                                                                       return true;
+                                                                               }
+                                                                               
+                                                                               if(e.which == 9) {
+                                                                                       e.preventDefault();
+                                                                                       $('#topAutocomplete').hide();   
+                                                                                       setTimeout(function() {
+                                                                                               $("#searchTopBtn").focus();
+                                                                                       }, 1);
+                                                                               }
+                                                                               
+                                                                       });
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});
+                                                                   $("#searchTopBtn").on("focusout", function(e) {
+                                                                               $('#topAutocomplete').hide();
+                                                                       });
+                                                               }else{
+                                                                       $('#topAutocomplete').children().remove();
+                                                               }
+                                                               if($('#searchTop').val() == ""){
+                                                                       $("#topAutocomplete").hide();
+                                                                       searchingBoolean = false;
+                                                                       return;
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               searchingBoolean = false;
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                               if (autoComplete.length == 0){
+                                                                       $("#topAutocomplete").hide();
+                                                               }else{
+                                                                       if (searchInput == $('#searchTop').val()){
+                                                                               $("#topAutocomplete").show();
+                                                                               var $searchList = $("#topAutocomplete").find('ul');
+                                                                               var hei = $searchList.outerHeight();
+                                                                               if(hei>180){
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
+                                                                               }
+                                                                       }else{
+                                                                               searchingBoolean = false;
+                                                                               topSearchChange();
+                                                                       }
+                                                               }
+                                                       }else{
+                                                               searchingBoolean = false;
+                                                               topSearchChange();
+                                                       }
+                                               },
+                                               error : function() {searchingBoolean = false;}
+                                               
+                               };
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
+                               $SD.ajax.get(jsonData);
+                               searchingBoolean = false;
+                       }
+                       
+                       //console.log("/search/autoComplete.do end");
+                       //console.groupEnd();
+               };
+               
+               $('#searchTop').keyup(function(e){
+                       if($('#searchTop').val() == ""){
+                               $('#topAutocomplete').children().remove();
+                               $("#topAutocomplete").hide();
+                       }else{
+                               if(e.which == 13){
+                                       search();
+                               }else{
+                                       topSearchChange();
+                               }
+                       }
+               });
+               
+               var search = function(){
+                       if($.trim($('#searchTop').val()) == ""){
+                               alert('Search keyword is required.');
+                       }else{
+                               $('#topSearchForm').submit();
+                       }
+               };
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){
+                       e.preventDefault();
+                       var keyword = $(this).data('keyword');
+                       $("#searchTop").val(keyword);
+                       $('#topSearchForm').submit();
+               });
+               
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+                       if(e.which == 13) {
+                               e.preventDefault();
+                               var keyword = $(this).data('keyword');
+                               $("#searchTop").val(keyword);
+                               $('#topSearchForm').submit();                   
+                       }
+               });
+               
+               $('#searchTopBtn').click(function(e){
+                       search();       
+               });  
+    });
+    
+    function topSearchEnter(){
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+               alert('Search keyword is required.');
+               return false;
+       }else{
+               return true;
+       }
+    }
+
+/* Tracking Code TOTAL */
+               var _gaq = _gaq || [];
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+               _gaq.push(['_setAccount', 'UA-6892706-3']);
+               _gaq.push(['_setDomainName', 'samsung.com']);
+               _gaq.push(['_setAllowLinker', true]);
+               _gaq.push(['_trackPageview']);
+               (function() {
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                 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);
+               })();
+       
+               <!--// Tracking Code 1 -->
+                       var _gaq = _gaq || [];
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);
+                       _gaq.push(['_trackPageview']);
+                       (function() {
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                         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);
+                       })();
diff --git a/org.tizen.web.apireference/html/scripts/search.js b/org.tizen.web.apireference/html/scripts/search.js
new file mode 100644 (file)
index 0000000..d1ae5ad
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+       var focusTarget = "input";
+
+       //$("#autocomplete").hide();
+
+       //$("#searchInput").bind("keydown", checkSearchText);
+       
+       $("#searchInput").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchInput" ).focusin( function() {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $("#autocomplete").bind("mouseleave",function(){
+               $(this).hide();
+               $("#btnDropdown").removeClass("dropdownoff");
+               $("#btnDropdown").addClass("dropdown");         
+       });
+
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       });
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchInput").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       //$(".autocomplete").css("visibility", "visible");
+                       $("#autocomplete").show();
+                       
+                       $("#btnDropdown").removeClass("dropdown");
+                       $("#btnDropdown").addClass("dropdownoff");
+               }
+               else{
+                       //$(".autocomplete").css("visibility", "hidden");
+                       $("#autocomplete").hide();
+                       
+                       $("#btnDropdown").removeClass("dropdownoff");
+                       $("#btnDropdown").addClass("dropdown");
+               }
+       }
+}
+
+
+
+function topSearchInit()
+{
+       var focusTarget = "input";
+
+       //$("#searchTop").bind("keydown", checkSearchText);
+       
+       $("#searchTop").focusout(function() {
+               if( focusTarget == "dropdown" )
+               {
+                       return false;
+               }
+               else
+               {       
+                       //toggleClass( false );
+               }
+       });
+       
+       $( "#searchTop" ).focusin( function()   {
+               focusTarget = "input";
+       });
+
+       $("#btnDropdown").mousedown( function(){
+               focusTarget = "dropdown";
+       });
+
+       $(".autocomplete ul li").focusin( function() {
+               //
+       });
+       
+       $(".autocomplete ul li:last-child").focusout( function() {
+               toggleClass( false );
+       })
+       
+       $("#btnDropdown").click( function(){
+               //alert("btn click");
+               if( $("#searchInput").val().length == 0 ){ 
+                       return false;
+               }
+               else{
+                       if( $("#btnDropdown").hasClass("dropdown") ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );
+                       }
+               }
+
+               return false;
+       });
+
+       function checkSearchText(){
+               setTimeout(function(){
+                       var txt = $("#searchTop").val();
+
+                       if( txt.length > 0 ){
+                               toggleClass( true );
+                       }
+                       else{
+                               toggleClass( false );   
+                       }
+               }, 1);
+       }
+
+       function toggleClass( bo ){
+               if( bo ){
+                       $(".topAutocomplete").css("visibility", "visible");
+               }else{
+                       $(".topAutocomplete").css("visibility", "hidden");
+                       $("#topAutocomplete").hide();
+               }
+       }
+}
diff --git a/org.tizen.web.apireference/html/scripts/showhide.js b/org.tizen.web.apireference/html/scripts/showhide.js
new file mode 100644 (file)
index 0000000..cf3dc21
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/showhide.js
@@ -0,0 +1,200 @@
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+       me.find('em').text('Hide');
+       me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+       var me = $(this);
+       var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+       if ( me.next().is(':visible') ){
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+               me.find('em').text('Show');
+               me.next().hide();
+       }
+                                       
+});
+return false;
+})
+}      
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+       var idx = $('.devicespec-tit a').index(this);
+
+       if ( $(this).parent().parent().next().is(':visible') ){
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+               self.find('em').text('Show');
+               self.next().hide();
+
+               return false;
+       }else{
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+               self.find('em').text('Hide');
+
+               self.next().show();
+
+               return false;
+       }
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow =  $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+       var openheading = function(target) {
+               var origin = $(target);
+               target = origin.closest('.devicespec-con');
+               if (!(target.length > 0)) {
+                       target = origin.closest('.devicespec-tit');
+               }
+               if (target.length > 0) {
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
+                       }
+               }
+
+               $(window.location.hash)[0].scrollIntoView();
+       };
+
+       $(".opensection").click(function(){
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');
+               openheading(target);
+       });
+
+       if (window.location.hash) {
+               var target = $(window.location.hash);
+               openheading(target);
+               //$(target).focus(); //uncomment if fail to work
+       }
+
+       var isScrolledIntoView = function(elem)
+       {
+               var docViewTop = $('#contents').scrollTop();
+               var docViewBottom = docViewTop + $('#contents').height();
+
+               var elemTop = $(elem).offset().top;
+               var elemBottom = elemTop + $(elem).height();
+
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
+       }
+
+       $('#contents').scroll();
+       
+
+       var updateH = function(){
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+                       $('.help_breadcrumbs').hide();
+               } else {
+                       $('a.top.sms').hide();
+                       $('.help_breadcrumbs').show();
+               }
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
+
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+
+               if ($('a.top').is(':visible'))
+               {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+               } else {
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+               }
+               $('#toc').css('height', $('#toc').css('height') - 5);
+
+               $('#toc_border').height($('#toc').outerHeight() + 5);
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+               $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+               //$('#toc').css('width', $('#toc_border').width() - 40);
+               $('#toc').css('width', $('#toc_border').width() - 49);
+       };
+
+       var updateH_no_toc = function() {
+               if (!isScrolledIntoView($('#contents .content h1')))
+               {
+                       $('a.top.sms').show();
+               } else {
+                       $('a.top.sms').hide();
+               }
+               $('a.top').css('bottom', $('#footer').outerHeight());
+               
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+       }
+
+       if ($('body').hasClass('no-toc')) {
+               updateH = updateH_no_toc;
+       }
+       $(window).resize(updateH);
+       $('#contents').scroll(updateH);
+       $(window).resize();
+       
+       $('a.top').click(function(){$('#contents').scrollTop(0)});
+
+       var hashchanged = function() {
+               if (window.location.hash.length) {
+                       openheading(window.location.hash);
+                       //$(window.location.hash).scrollTo();
+                       $(window.location.hash)[0].scrollIntoView();
+
+               } else 
+               {
+                       $('#contents').scrollTop(0);
+               }
+       };
+
+       if (("onhashchange" in window) && !($.browser.msie)) { 
+               $(window).bind( 'hashchange',hashchanged);
+       }
+       else { 
+               var prevHash = window.location.hash;
+               window.setInterval(function () {
+                       if (window.location.hash != prevHash) {
+                               hashchanged();
+                               prevHash = window.location.hash;
+                       }
+               }, 100);
+       }
+});
diff --git a/org.tizen.web.apireference/html/scripts/snippet.js b/org.tizen.web.apireference/html/scripts/snippet.js
new file mode 100644 (file)
index 0000000..777e9ae
--- /dev/null
+++ b/org.tizen.web.apireference/html/scripts/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm
new file mode 100644 (file)
index 0000000..87aefda
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Tizen Mobile Web UI Framework Reference</title>
+</head>
+<body onload="prettyPrint()" id="content" marginwidth="0" marginheight="0">
+
+<h1>Tizen Mobile Web UI Framework Reference</h1>
+
+<p><b>The Web UI framework is called Tizen Advanced UI (TAU) framework.</b> It provides tools, such as UI components, events, effects, and animations, for Web application development. You can leverage these tools by just selecting the required screen elements and creating the applications.</p>
+
+<table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note"><strong>TAU (Tizen Advanced UI)</strong> is the new name of tizen-web-ui-fw.
+                       <p>Since 2.3, in all documents and source code, TAU is used instead of tizen-web-ui-fw.</p></td>
+               </tr>
+               </tbody>
+</table>
+
+
+<p>The Web UI Framework service is based on a template and works on a Web browser, which runs on the WebKit engine. You can code Web applications using the Web UI Framework, standard HTML5, and Tizen device APIs. You can also use different UI components with CSS animations and rendering optimized for Tizen Web browsers.</p>
+
+<p>The Web UI Framework in mobile Web applications consists of the followings:</p>
+<ul>
+       <li><a href="page/app_page_layout.htm">Page structure and navigation</a>
+       <p>A Web application using Web UI Framework has a basic page structure. Smooth navigation between Web UI Framework-based application pages is provided with a navigation JavaScript library.</p></li>
+       <li><a href="widget_reference.htm">Web UI components</a> and themes
+       <p>The Tizen mobile Web UI Framework supports APIs and CSS themes for Tizen mobile Web UI components.</p></li>
+       <li><a href="util/util.htm">Utilities</a>
+       <p>Some useful special utilities that support easy DOM methods for the Web applications are available with Tizen mobile Web UI Framework.</p></li>
+</ul>
+
+<table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">The Web UI Framework runs only on browsers supporting the HTML5 and CSS standards. The draft version of the W3C specification is not fully supported.</td>
+               </tr>
+               </tbody>
+</table>
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+       <!--start-->
+       <script type="text/javascript">
+               var _gaq = _gaq || [];
+               _gaq.push(['_setAccount', 'UA-25976949-1']);
+               _gaq.push(['_trackPageview']);
+               (function () {
+                       var ga = document.createElement('script');
+                       ga.type = 'text/javascript';
+                       ga.async = true;
+                       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-->
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Autodividers.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Autodividers.htm
new file mode 100644 (file)
index 0000000..0746fac
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Autodividers.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <link href="../styles.css" rel="StyleSheet" type="text/css">
+    <link href="../snippet.css" rel="StyleSheet" type="text/css">
+    <title>Autodividers</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<h1>Autodividers</h1>
+
+<p>The autodividers component is an extension of the <a href="ns_widget_mobile_Listview.htm">list view component</a>, and it automatically creates dividers for a list view.</p>
+
+<b>since:</b> 2.0
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+        <li><a href="#default_selectors">Default Selectors</a></li>
+
+        <li><a href="#html_examples">HTML Examples</a></li>
+
+        <li><a href="#options-list">Options</a></li>
+
+</ol>
+
+<h2><a id="default_selectors"></a>Default Selectors</h2>
+
+<p>By default, all the list view elements with the <code>data-autodividers=&quot;true&quot;</code> attribute are displayed as with automatically-generated dividers for the list items.</p>
+
+<h2><a id="html_examples"></a>HTML Examples</h2>
+
+<p>To add an autodividers component to the application, use the following code:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot; data-autodividers=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Amy&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Arabella&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Barry&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+
+    <h2><a id="options-list"></a>Options</h2>
+    <p>The following table lists the options for the autodividers component.</p>
+    <table>
+        <tbody>
+        <tr>
+            <th>Option</th>
+            <th>Input type</th>
+            <th>Default value</th>
+            <th>Description</th>
+        </tr>
+
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-autodividers</span></td>
+                <td class="option">boolean</td>
+                <td class="option">false</td>
+                <td class="option">Enables the creation of autodividers for a list view component.</td>
+            </tr>
+
+        </tbody>
+    </table>
+
+
+<div id="footer">
+    <hr size="1">
+    <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm
new file mode 100644 (file)
index 0000000..2a75afa
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm
@@ -0,0 +1,603 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Button</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Button</h1>
+
+<p>The button component changes the default browser buttons to special buttons with additional configuration options, such as an icon, corners, and a shadow.</p>
+
+<h2>Table of Contents</h2>
+
+<ol class="toc">
+
+               <li><a href="#default-selectors0.22067294060252607">Default Selectors</a></li>
+
+               <li><a href="#manual-constructor0.8647231981158257">Manual Constructor</a></li>
+
+               <li><a href="#html-examples0.3870438882149756">HTML Examples</a></li>
+
+               <li><a href="#options-for button widget0.28114810213446617">Options</a></li>
+
+               <li><a href="#methods0.8668504238594323">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.22067294060252607"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;button&gt;</code> elements and all <code>&lt;input&gt;</code> elements with the <code>type=&quot;button&quot;</code>, <code>type=&quot;submit&quot;</code>, or <code>type=&quot;reset&quot;</code> attribute are displayed as Tizen Web UI buttons. In addition, all elements with the <code>data-role=&quot;button&quot;</code> attribute are displayed as Tizen Web UI buttons. To prevent a <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code> element from being displayed as a Tizen Web UI button, use the <code>data-role=&quot;none&quot;</code> attribute with the element.</p>
+
+<h2><a id="manual-constructor0.8647231981158257"></a>Manual Constructor</h2>
+
+<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var buttonElement = document.getElementById(&quot;button&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button = tau.widget.Button(buttonElement);
+&lt;/script&gt;
+</pre>
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples0.3870438882149756"></a>HTML Examples</h2>
+
+<ul>
+
+<li>
+
+<p><a id='create-simple button from link using data-role0.20266016316600144'></a>To create a simple button from a link using the <code>data-role</code> attribute:</p>
+
+<pre class="prettyprint">&lt;a href=&quot;#page2&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
+</pre>
+
+</li>
+
+
+
+<li>
+
+<p><a id='create-simple button using button tag0.022702615475282073'></a>To create a simple button using the <code>&lt;button&gt;</code> element:</p>
+
+<pre class="prettyprint">&lt;button&gt;Button element&lt;/button&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p><a id='create-simple button from input using type0.5491938563063741'></a>To create a simple button using the <code>&lt;input&gt;</code> element:</p>
+
+<pre class="prettyprint">&lt;input type=&quot;button&quot; value=&quot;Button&quot; /&gt;
+&lt;input type=&quot;submit&quot; value=&quot;Submit Button&quot; /&gt;
+&lt;input type=&quot;reset&quot; value=&quot;Reset Button&quot; /&gt;
+</pre>
+
+</li>
+
+</ul>
+
+<h2><a id="options-for button widget0.28114810213446617"></a>Options</h2>
+
+<p>The options for a component can be defined as <code>data-...</code> attributes or passed as parameters to the constructor.</p>
+
+<p>You can change an option for the component using the <code>option</code> method.</p>
+
+       <h3>Summary</h3>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-bar</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">If the button is part of a bar, set to <code>true</code>.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-corners</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the corners of the button are shown.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-icon</span></td>
+                               <td class="option">string | null</td>
+                               <td class="option">null</td>
+                               <td class="option">Icon type.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-iconpos</span></td>
+                               <td class="option">&quot;left&quot; | &quot;right&quot; | &quot;top&quot; | &quot;bottom&quot; | &quot;notext&quot; | null</td>
+                               <td class="option">null</td>
+                               <td class="option">Position of the icon.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-iconshadow</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Sets whether the shadow of the button icon is shown.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inline</span></td>
+                               <td class="option">string | null</td>
+                               <td class="option">null</td>
+                               <td class="option">If the value is <code>true</code>, the button has the <code>display = &quot;inline&quot;</code> CSS property.</td>
+                       </tr>
+               
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-style</span></td>
+                               <td class="option">&quot;circle&quot; | &quot;nobg&quot; | null</td>
+                               <td class="option">null</td>
+                               <td class="option">Style of the button.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+
+<h3><a id='inline-buttons0.8866881858557463'></a>Inline Buttons</h3>
+
+<p>By default, all buttons in the body content are styled as block-level elements, so they fill the width of the screen. If you want a more compact button that is only as wide as the text and icons inside it, add the <code>data-inline=&quot;true&quot;</code> attribute to the button.</p>
+
+<pre class="prettyprint">&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
+</pre>
+
+<p>If you have multiple buttons that must sit side-by-side on the same line, add the <code>data-inline=&quot;true&quot;</code> attribute to each button. This styles the buttons to be the width of their content and floats the buttons so that they sit on the same line.</p>
+
+<pre class="prettyprint">&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Save&lt;/a&gt;
+</pre>
+
+<h3><a id='icon-positioning0.689597582211718'></a>Icon Positioning</h3>
+
+<p>By default, all icons in buttons are placed to the left of the button text. This default can be overridden using the <code>data-iconpos</code> attribute.</p>
+
+<pre class="prettyprint">&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot; data-iconpos=&quot;right&quot;&gt;Delete&lt;/a&gt;
+</pre>
+
+<p>Possible values for the <code>data-iconpos</code> attribute:</p>
+
+<ul>
+<li><code>"left"</code>: Creates the button with a left-aligned icon.</li>
+<li><code>"right"</code>: Creates the button with a right-aligned icon.</li>
+<li><code>"top"</code>: Creates the button with the icon positioned above the text.</li>
+<li><code>"bottom"</code>: creates the button with the icon positioned below the text.</li>
+</ul>
+
+<p>You can also create an icon-only button by setting the <code>data-iconpos</code> attribute to <code>"notext"</code>. The button plugin hides the text on-screen, but adds it as a title attribute to the link to provide context for screen readers and devices that support tooltips.</p>
+
+<pre class="prettyprint">&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot; data-iconpos=&quot;notext&quot;&gt;Delete&lt;/a&gt;
+</pre>
+
+<h2><a id="methods0.8668504238594323"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;button&quot; data-role=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var buttonElement = document.getElementById(&quot;button&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button = tau.widget.Button(buttonElement);
+
+&nbsp;&nbsp;&nbsp;// button.methodName(methodArgument1, methodArgument2, ...);
+&nbsp;&nbsp;&nbsp;// For example:
+&nbsp;&nbsp;&nbsp;button.value(&quot;text&quot;);
+&lt;/script&gt;
+</pre></li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// $(&quot;#button&quot;).button(&quot;methodName&quot;, argument1, argument2, ...);
+&nbsp;&nbsp;&nbsp;// For example:
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button(&quot;value&quot;, &quot;new text&quot;);
+&lt;/script&gt;
+</pre></li></ul>
+
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Button <a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the button.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Button <a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the button.</p></td>
+                               </tr>
+                       
+
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Button <a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes a button markup.</p></td>
+                               </tr>
+                       
+               
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string <a href="#method-value">value</a> ( string? value ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets a value.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the button.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Button disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method sets the disabled attribute for the button and changes the look of the button to the disabled state.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Button</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;button&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonWidget = tau.widget.Button(element);
+&nbsp;&nbsp;&nbsp;buttonWidget.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+<div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>                                          
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the button.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Button enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method removes the disabled attribute from the button and changes the look of the button to the enabled state.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Button</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;button&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonWidget = tau.widget.Button(element);
+&nbsp;&nbsp;&nbsp;buttonWidget.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+<div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                               </dd>
+                       
+               
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes a button markup.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Button refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method rebuilds the DOM structure of the button component. It must be called after you manually change the HTML attributes of the component&#39;s DOM structure.</p>
+
+<p>The method is called automatically after any component option is changed.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Button</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;button&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonWidget = tau.widget.Button(element);
+&nbsp;&nbsp;&nbsp;buttonWidget.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                               </dd>
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-value">value</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets a value.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">string value ( string? value) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.3
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method returns the inner text of the button or sets the text of the button.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+                                               <td>string</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>Text to set for the button.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>string</td>
+                                                                       <td>In the get mode, returns the inner text of the button.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;button&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonWidget = tau.widget.Button(element),
+&nbsp;&nbsp;&nbsp;// Value contains inner text of button
+&nbsp;&nbsp;&nbsp;value = buttonWidget.value();
+
+&nbsp;&nbsp;&nbsp;// &quot;New text&quot; will be text of button
+&nbsp;&nbsp;&nbsp;buttonWidget.value(&quot;New text&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+<div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;button&quot; id=&quot;button&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Value contains inner text of button
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button(&quot;value&quot;);
+
+&nbsp;&nbsp;&nbsp;// &quot;New text&quot; will be text of button
+&nbsp;&nbsp;&nbsp;$(&quot;#button&quot;).button(&quot;value&quot;, &quot;New text&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                               </dd>
+                       
+               
+       </dl>
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Checkboxradio.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Checkboxradio.htm
new file mode 100644 (file)
index 0000000..d7c27d1
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Checkboxradio.htm
@@ -0,0 +1,283 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Checkbox Radio</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<h1>Checkbox Radio</h1>
+
+<p>The checkbox radio component changes the default browser checkboxes and radio buttons to a form more adapted to the mobile environment.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#default-selectors0.9922445809934288">Default Selectors</a></li>
+
+               <li><a href="#html-examples0.3427857731003314">HTML Examples</a></li>
+
+               <li><a href="#methods-list">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.9922445809934288"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;input&gt;</code> elements with the <code>type=&quot;checkbox&quot;</code> or <code>type=&quot;radio&quot;</code> attribute are displayed as checkboxes and radio buttons.</p>
+
+<h2><a id="html-examples0.3427857731003314"></a>HTML Examples</h2>
+
+<p>To create a checkbox radio component:</p>
+
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-yes&quot; id=&quot;checkbox-yes&quot; /&gt;
+&lt;label for=&quot;checkbox-yes&quot;&gt;Yes&lt;/label&gt;
+</pre>
+
+
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the component.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the component.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-getCheckedElement">getCheckedElement</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Returns a checked checkbox radio element.</p></td>
+                               </tr>   
+                       
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Checkboxradio</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot;/&gt;&lt;label for=&quot;checkbox-1&quot;&gt;Normal&lt;/label&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;checkbox-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget = tau.widget.Checkboxradio(element);
+&nbsp;&nbsp;&nbsp;checkboxWidget.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Checkboxradio</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot;/&gt;&lt;label for=&quot;checkbox-1&quot;&gt;Normal&lt;/label&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;checkbox-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget = tau.widget.Checkboxradio(element);
+&nbsp;&nbsp;&nbsp;checkboxWidget.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getCheckedElement">getCheckedElement</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns a checked checkbox radio element.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement getCheckedElement ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot;/&gt;&lt;label for=&quot;checkbox-1&quot;&gt;Normal&lt;/label&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;checkbox-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget = tau.widget.Checkboxradio(element);
+&nbsp;&nbsp;&nbsp;checkboxWidget.getCheckedElement();
+&nbsp;&nbsp;&nbsp;// Returns checked checkbox element
+&lt;/script&gt;
+</pre>
+                                               </div>
+
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Collapsible.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Collapsible.htm
new file mode 100644 (file)
index 0000000..439c034
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Collapsible.htm
@@ -0,0 +1,540 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <link href="../styles.css" rel="StyleSheet" type="text/css">
+    <link href="../snippet.css" rel="StyleSheet" type="text/css">
+    <title>Collapsible</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Collapsible</h1>
+
+<p>The collapsible component allows you to expand and collapse content when tapped.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.0.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+        <li><a href="#default-selectors0.23378119827248156">Default Selectors</a></li>
+
+        <li><a href="#manual-constructor0.9637914793565869">Manual Constructor</a></li>
+
+        <li><a href="#html-examples0.4407083713449538">HTML Examples</a></li>
+
+        <li><a href="#options-for collapsible widget0.23674097401089966">Options</a></li>
+
+        <li><a href="#methods0.9661261877045035">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.23378119827248156"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-role=&quot;collapsible&quot;</code> attribute are displayed as collapsible components.</p>
+
+<h2><a id="manual-constructor0.9637914793565869"></a>Manual Constructor</h2>
+
+<p>To manually create a collapsible component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint">&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);
+&lt;/script&gt;
+</pre>
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method:</p>
+
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var collapsible = $(&quot;#collapsible&quot;).collapsible();
+&lt;/script&gt;
+</pre>
+
+<p>The jQuery constructor takes one optional parameter, which is an object defining the configuration options for the component.</p>
+
+<h2><a id="html-examples0.4407083713449538"></a>HTML Examples</h2>
+
+<ul><li>
+<p>To create a collapsible <code>div</code> element using the <code>data-role</code> attribute:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Collapsible head&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+<li>
+<p>To create a collapsible list using the <code>data-role</code> attribute:</p>
+<pre class="prettyprint">
+&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li 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&gt;
+</pre></li></ul>
+
+
+
+<h2><a id="options-for collapsible widget0.23674097401089966"></a>Options</h2>
+
+<p>The options for a component can be defined as <code>data-...</code> attributes or passed as parameters to the constructor.</p>
+
+<p>You can change an option for the component using the <code>option</code> method.</p>
+
+    <h3>Summary</h3>
+
+    <table>
+        <tbody>
+        <tr>
+            <th>Option</th>
+            <th>Input type</th>
+            <th>Default value</th>
+            <th>Description</th>
+        </tr>
+
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-collapse-cue-text</span></td>
+                <td class="option">string</td>
+                <td class="option">&quot;&quot;</td>
+                <td class="option">Cue text for closing the expandable list; used to provide audible feedback.</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-collapsed</span></td>
+                <td class="option">boolean</td>
+                <td class="option">true</td>
+                <td class="option">Sets whether the content must be collapsed on load.</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-collapsed-icon</span></td>
+                <td class="option">string | null</td>
+                <td class="option">null</td>
+                <td class="option">Icon class for a collapsed component.</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-expand-cue-text</span></td>
+                <td class="option">string</td>
+                <td class="option">&quot;&quot;</td>
+                <td class="option">Cue text for opening the expandable list; used to provide audible feedback.</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-expanded-icon</span></td>
+                <td class="option">string | null</td>
+                <td class="option">null</td>
+                <td class="option">Icon class for an expanded component.</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-heading</span></td>
+                <td class="option">string</td>
+                <td class="option">&quot;h1,h2,h3,h4,h5,h6,legend,li&quot;</td>
+                <td class="option">Within the collapsible container, the first immediate child element.</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-iconpos</span></td>
+                <td class="option">string | null</td>
+                <td class="option">null</td>
+                <td class="option">Icon position (the default is right).</td>
+            </tr>
+
+            <tr>
+                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inset</span></td>
+                <td class="option">boolean</td>
+                <td class="option">true</td>
+                <td class="option">Sets whether the component must be shown as an inset.</td>
+            </tr>
+        </tbody>
+    </table>
+
+
+<h2><a id="methods0.9661261877045035"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul>
+
+<li>
+
+<p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">var collapsibleElement = document.getElementById(&quot;collapsible&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;collapsible = tau.widget.Collapsible(collapsibleElement);
+
+collapsible.methodName(methodArgument1, methodArgument2, ...);
+</pre>
+
+</li>
+
+<li>
+
+<p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">$(&quot;.selector&quot;).collapsible(&quot;methodName&quot;, methodArgument1, ...);</pre>
+
+</li>
+
+</ul>
+
+    <h3>Summary</h3>
+    <table class="informaltable">
+        <thead>
+        <tr>
+            <th>Method</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                <tr>
+                    <td>
+                        <pre class="intable prettyprint"><a href="#method-disable">disable</a> (  ) </pre>
+                    </td>
+                    <td><p>Disables the collapsible component.</p></td>
+                </tr>
+
+
+
+                <tr>
+                    <td>
+                        <pre class="intable prettyprint"><a href="#method-enable">enable</a> (  ) </pre>
+                    </td>
+                    <td><p>Enables the collapsible component.</p></td>
+                </tr>
+
+
+
+                <tr>
+                    <td>
+                        <pre class="intable prettyprint"><a href="#method-refresh">refresh</a> (  ) </pre>
+                    </td>
+                    <td><p>Refreshes the collapsible component.</p></td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                   id="method-disable">disable</span></b></code></dt>
+                <dd>
+                    <div class="brief">
+                        <p>Disables the collapsible component.</p>
+                    </div>
+                    <div class="synopsis">
+                        <pre class="signature prettyprint">Collapsible disable ( ) </pre>
+                    </div>
+
+                    <div class="description">
+                        <p>
+                            <p>The method sets the disabled attribute for the collapsible component and adds classes related to the disabled state.</p>
+
+
+
+                        </p>
+                    </div>
+
+
+
+                    <div class="returntype">
+                        <p><span class="return">Return value:</span></p>
+
+                            <table>
+                                <tbody>
+                                <tr>
+                                    <th>Type</th>
+                                    <th>Description</th>
+                                </tr>
+                                <tr>
+                                    <td>Collapsible</td>
+                                    <td>Returns this.</td>
+                                </tr>
+                                </tbody>
+                            </table>
+
+
+                    </div>
+
+                        <div class="example">
+                            <span class="example"><p>Code
+                                example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                            <pre name="code" class="examplecode
+                            prettyprint">
+&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h6&gt;Collapsible head&lt;/h6&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var collapsibleWidget = tau.widget.Collapsible(document.getElementById(&quot;collapsible&quot;));
+&nbsp;&nbsp;&nbsp;collapsibleWidget.disable();
+&lt;/script&gt;
+</pre>
+                        </div>
+
+                        <div class="example">
+                            <span class="example"><p>Code
+                                example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                            <pre name="code" class="examplecode
+                            prettyprint">
+&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h6&gt;Collapsible head&lt;/h6&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#collapsible&quot;).collapsible(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                        </div>
+
+                </dd>
+
+
+
+                <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                   id="method-enable">enable</span></b></code></dt>
+                <dd>
+                    <div class="brief">
+                        <p>Enables the collapsible component.</p>
+                    </div>
+                    <div class="synopsis">
+                        <pre class="signature prettyprint">Collapsible enable ( ) </pre>
+                    </div>
+
+                    <div class="description">
+                        <p>
+                            <p>The method removes the disabled attribute from the collapsible component and adds classes related to the enabled state.</p>
+
+
+                        </p>
+                    </div>
+
+
+
+                    <div class="returntype">
+                        <p><span class="return">Return value:</span></p>
+
+                            <table>
+                                <tbody>
+                                <tr>
+                                    <th>Type</th>
+                                    <th>Description</th>
+                                </tr>
+                                <tr>
+                                    <td>Collapsible</td>
+                                    <td>Returns this.</td>
+                                </tr>
+                                </tbody>
+                            </table>
+
+
+                    </div>
+
+                        <div class="example">
+                            <span class="example"><p>Code
+                                example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                            <pre name="code" class="examplecode
+                            prettyprint">
+&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h6&gt;Collapsible head&lt;/h6&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var collapsibleWidget = tau.widget.Collapsible(document.getElementById(&quot;collapsible&quot;));
+&nbsp;&nbsp;&nbsp;collapsibleWidget.enable();
+&lt;/script&gt;
+</pre>
+                        </div>
+
+                        <div class="example">
+                            <span class="example"><p>Code
+                                example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                            <pre name="code" class="examplecode
+                            prettyprint">
+&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h6&gt;Collapsible head&lt;/h6&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#collapsible&quot;).collapsible(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                        </div>
+
+                </dd>
+
+                <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                   id="method-refresh">refresh</span></b></code></dt>
+                <dd>
+                    <div class="brief">
+                        <p>Refreshes the collapsible component.</p>
+                    </div>
+                    <div class="synopsis">
+                        <pre class="signature prettyprint">Collapsible refresh ( ) </pre>
+                    </div>
+
+                    <div class="description">
+                        <p>
+
+
+                        </p>
+                    </div>
+
+
+
+                    <div class="returntype">
+                        <p><span class="return">Return value:</span></p>
+
+                            <table>
+                                <tbody>
+                                <tr>
+                                    <th>Type</th>
+                                    <th>Description</th>
+                                </tr>
+                                <tr>
+                                    <td>Collapsible</td>
+                                    <td>Returns this.</td>
+                                </tr>
+                                </tbody>
+                            </table>
+
+
+                    </div>
+
+                        <div class="example">
+                            <span class="example"><p>Code
+                                example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                            <pre name="code" class="examplecode
+                            prettyprint">
+&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h6&gt;Collapsible head&lt;/h6&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var collapsibleWidget = tau.widget.Collapsible(document.getElementById(&quot;collapsible&quot;));
+&nbsp;&nbsp;&nbsp;collapsibleWidget.refresh();
+&lt;/script&gt;
+</pre>
+                        </div>
+
+                        <div class="example">
+                            <span class="example"><p>Code
+                                example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                            <pre name="code" class="examplecode
+                            prettyprint">
+&lt;div id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h6&gt;Collapsible head&lt;/h6&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#collapsible&quot;).collapsible(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                        </div>
+
+                </dd>
+
+
+
+
+
+    </dl>
+
+<div id="footer">
+    <hr size="1">
+    <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Controlgroup.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Controlgroup.htm
new file mode 100644 (file)
index 0000000..e03cf15
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Controlgroup.htm
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Control Group</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Control Group</h1>
+
+<p>The control group component improves the  styling of multiple buttons by grouping them into a single block.</p>
+
+       <p><span class="version">Since: </span>
+                                                       2.3
+                                               </p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.7005437843035907">Default Selectors</a></li>
+       
+               <li><a href="#html-examples0.07567197550088167">HTML Examples</a></li>
+       
+               <li><a href="#options-list">Options</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.7005437843035907"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;div&gt;</code> elements with the <code>data-role=&quot;controlgroup&quot;</code> attribute are displayed as control groups.</p>
+
+<h2><a id="html-examples0.07567197550088167"></a>HTML Examples</h2>
+
+<p>To create a control group, use the following code:</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;controlgroup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; data-role=&quot;button&quot;&gt;No&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; data-role=&quot;button&quot;&gt;Cancel&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+
+
+       <h2><a id="options-list"></a>Options</h2>
+    <p>The following table lists the options for the control group component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-type</span></td>
+                               <td class="option">&quot;vertical&quot; | &quot;horizontal&quot;</td>
+                               <td class="option">&quot;vertical&quot;</td>
+                               <td class="option">Direction of the control group.</td>
+                       </tr>
+                       
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-excludeInvisible</span></td>
+                               <td class="option"> true | false</td>
+                               <td class="option">false</td>
+                               <td class="option">Flag specifying exclusion of invisible elements.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm
new file mode 100644 (file)
index 0000000..2513471
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Date-time Picker</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Date-time Picker</h1>
+
+<p>The date-time picker component displays a control that you can use to enter date and time values.</p>
+
+<table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component (not a TAU-based component) is supported by WebKit since Tizen 2.3.</td>
+               </tr>
+               </tbody>
+       </table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#html-examples0.07567197550088167">HTML Examples</a></li>
+       
+</ol>
+
+
+<h2><a id="html-examples0.07567197550088167"></a>HTML Examples</h2>
+
+<p>To create a date-time picker, use an <code>&lt;input&gt;</code> element with the <code>type</code> attribute set to <code>&quot;month&quot;</code>, <code>&quot;week&quot;</code>, <code>&quot;date&quot;</code>, <code>&quot;time&quot;</code>, or <code>&quot;datetime-local&quot;</code>, depending on the type of picker you want to create:</p>
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;div data-role=&quot;fieldcontain&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;month&quot;&gt;Month:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;month&quot; name=&quot;month&quot; id=&quot;month&quot; value=&quot;&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;div data-role=&quot;fieldcontain&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;week&quot;&gt;Week:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;week&quot; name=&quot;week&quot; id=&quot;week&quot; value=&quot;&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;div data-role=&quot;fieldcontain&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;date&quot;&gt;Date:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;date&quot; name=&quot;date&quot; id=&quot;date&quot; value=&quot;&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;div data-role=&quot;fieldcontain&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;time&quot;&gt;Time:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;time&quot; name=&quot;time&quot; id=&quot;time&quot; value=&quot;&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;div data-role=&quot;fieldcontain&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;datetime-l&quot;&gt;Datetime local:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;datetime-local&quot; name=&quot;datetime-l&quot; id=&quot;datetime-l&quot; value=&quot;&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Drawer.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Drawer.htm
new file mode 100644 (file)
index 0000000..1cf91c0
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Drawer.htm
@@ -0,0 +1,380 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Drawer</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Drawer</h1>
+
+<p>The drawer component allows you to open and close a drawer to show or hide the content inside it.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.3.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selector0.8635590926278383">Default Selector</a></li>
+       
+        <li><a href="#html-examples0.06990464706905186">HTML Examples</a></li>
+
+               <li><a href="#drawer-options0.0814934759400785">Options</a></li>
+
+               <li><a href="#drawer-methods0.08396544051356614">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selector0.8635590926278383"></a>Default Selector</h2>
+
+<p>By default, all <code>&lt;div&gt;</code> elements with the <code>data-role=&quot;drawer&quot;</code> attribute are displayed as drawers.</p>
+
+<h2><a id="html-examples0.06990464706905186"></a>HTML Examples</h2>
+
+<p>To create a drawer using the <code>data-role</code> attribute, use the following code:</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;drawer&quot; data-position=&quot;left&quot; id=&quot;leftdrawer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-sub-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;Sub item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="drawer-options0.0814934759400785"></a>Options</h2>
+
+    <h3>Summary</h3>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-duration</span></td>
+                               <td class="option">number</td>
+                               <td class="option">100</td>
+                               <td class="option">Drawer duration in milliseconds.</td>
+                       </tr>           
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-position</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;left&quot;</td>
+                               <td class="option">Drawer position.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-width</span></td>
+                               <td class="option">number</td>
+                               <td class="option">240</td>
+                               <td class="option">Drawer width in pixels.</td>
+                       </tr>
+                       
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-close-on-click</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Bind a click event at overlay and close the drawer.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-overlay</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Set the drawer overlay when the drawer is opened.</td>
+                       </tr>
+
+                       </tbody></table>
+
+<h3><a id="drawer-positioning0.7145300961565226"></a>Drawer Position</h3>
+
+<p>You can set the drawer position manually with the <code>data-position</code> attribute:</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;drawer&quot; data-position=&quot;left&quot; id=&quot;leftdrawer&quot;&gt;</pre>
+
+<p>The possible values for the attribute are:</p>
+
+<ul>
+<li><code>&quot;left&quot;</code>: Drawer appears from the left side.</li>
+<li><code>&quot;right&quot;</code>: Drawer appears from the right side.</li>
+</ul>
+
+<h3><a id='drawer-inner list0.47361634694971144'></a>Drawer Inner List</h3>
+
+<p>The drawer supports 2 inner list styles: main list style and sub-list style. You can set the list style by specifying a class for each inner list item:</p>
+
+<ul>
+<li><code>&quot;ui-drawer-main-list&quot;</code>: Main list style.</li>
+<li><code>&quot;ui-drawer-sub-list&quot;</code>: Sub-list style.</li>
+</ul>
+
+<h2><a id="drawer-methods0.08396544051356614"></a>Methods</h2>
+
+
+       <h3>Summary</h3>
+
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-close">close</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Closes the drawer.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-isOpen">isOpen</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Checks the drawer status.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-open">open</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Opens the drawer.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-close">close</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Closes the drawer.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">close ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                               <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                               <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;drawer&quot; data-position=&quot;left&quot; id=&quot;leftdrawer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-sub-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;Sub item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var drawerElement = document.getElementById(&quot;leftdrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = tau.widget.Drawer(drawerElement);
+&nbsp;&nbsp;&nbsp;drawer.close();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-isOpen">isOpen</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Checks the drawer status.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">isOpen ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       boolean value
+                                               
+                                       </div>
+                                       <div class="example">
+                                               <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                               <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;drawer&quot; data-position=&quot;left&quot; id=&quot;leftdrawer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-sub-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;Sub item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var drawerElement = document.getElementById(&quot;leftdrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = tau.widget.Drawer(drawerElement),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isOpen = drawer.isOpen();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-open">open</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Opens the drawer.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">open ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                               <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                               <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;drawer&quot; data-position=&quot;left&quot; id=&quot;leftdrawer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-main-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;List item 2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-drawer-sub-list&quot;&gt;&lt;a href=&quot;#&quot;&gt;Sub item 1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var drawerElement = document.getElementById(&quot;leftdrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = tau.widget.Drawer(drawerElement);
+&nbsp;&nbsp;&nbsp;drawer.open();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_FastScroll.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_FastScroll.htm
new file mode 100644 (file)
index 0000000..d5d94e6
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_FastScroll.htm
@@ -0,0 +1,513 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Fast Scroll</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<h1>Fast Scroll</h1>
+
+<p>The fast scroll component shows a shortcut list that is bound to its parent scroll bar and list view.</p>
+
+<p>The fast scroll component jumps the scroll view to the selected list divider. If you move the mouse over the shortcut column, the scroll view is moved to the list divider matching the text currently under the mouse cursor. A pop-up containing the text is also displayed.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.0.</td>
+               </tr>
+       </tbody>
+</table>
+
+<p>To use the fast scroll component, add the <code>data-fastscroll=&quot;true&quot;</code> attribute to a list view.</p>
+
+    <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">For the fast scroll component to be visible, the parent list view must have multiple list dividers.</td>
+               </tr>
+               </tbody>
+       </table>
+       
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#default-selectors0.7051363934297115">Default Selectors</a></li>
+
+        <li><a href="#html-examples">Manual Constructor</a></li>
+
+               <li><a href="#options0.5842249826528132">Options</a></li>
+
+               <li><a href="#events-list">Events</a></li>
+
+        <li><a href="#methods0.6541752116754651">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.7051363934297115"></a>Default Selectors</h2>
+
+<p>By default, all list view elements (<code>data-role=&quot;listview&quot;</code>) with the <code>data-fastscroll=&quot;true&quot;</code> attribute are displayed as fast scroll components.</p>
+
+<h2><a id="html-examples"></a>Manual Constructor</h2>
+
+<p>To manually create a fast scroll component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var fastscroll = tau.widget.FastScroll(document.getElementById(&quot;list&quot;));
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var fastscroll = $(&quot;#list&quot;).fastscroll();
+&lt;/script&gt;
+</pre>
+
+
+
+<h2><a id="options0.5842249826528132"></a>Options</h2>
+
+    <p>The following table lists the options for the fast scroll component.</p>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-fastscroll</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the component is enabled.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+       <h2><a id="events-list"></a>Events</h2>
+
+    <p>The following table lists the events related to the fast scroll component.</p>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Event</th>
+                       <th>Description</th>
+               </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">destroyed</span></td>
+                               <td><p>Triggered after the <code>destroy()</code> method is called.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+<h2><a id="methods0.6541752116754651"></a>Methods</h2>
+
+<p>To call a method on the component, use the TAU API:</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;contacts&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;contacts&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts = tau.widget.FastScroll(element, {fastscroll: true});
+&nbsp;&nbsp;&nbsp;contacts.methodName(methodArgument1, methodArgument2, ...);
+&lt;/script&gt;
+</pre>
+
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-destroy">destroy</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Destroys the component.</p></td>
+                               </tr>
+                       
+
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string <a href="#method-indexString">indexString</a> ( string? indexAlphabet ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets an index string.</p></td>
+                               </tr>
+
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes the component.</p></td>
+                               </tr>
+               </tbody>
+       </table>
+       <dl>
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-destroy">destroy</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Destroys the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">destroy ( )</pre>
+                                       </div>
+
+                                               <p><span class="version">Since: </span>
+                                                       2.0
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>This method destroys the current fast scroll component.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;list&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fastscroll = tau.widget.FastScroll(element);
+&nbsp;&nbsp;&nbsp;fastscroll.destroy();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       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 data-role=&quot;listview&quot; data-fastscroll=&quot;true&quot; id=&quot;fastscroll&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#list&quot;).fastscroll(&quot;destroy&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-indexString">indexString</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets an index string.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">?string indexString ( string? indexAlphabet) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.1
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>This method manages the values to be used in the shortcut items.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">indexAlphabet</span></td>
+                                               <td>string</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>Values to be used in the shortcut items.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>?string</td>
+                                                                       <td>Primary and secondary languages.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       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;fastscroll&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Get index string
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;fastscroll&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fastscroll = tau.widget.FastScroll(element, {fastscroll: true});
+&nbsp;&nbsp;&nbsp;fastscroll.indexString();
+
+&nbsp;&nbsp;&nbsp;// Set index string
+&nbsp;&nbsp;&nbsp;fastscroll.indexString(&quot;A,D,J,P,W,Z&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       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 data-role=&quot;listview&quot; data-fastscroll=&quot;true&quot; id=&quot;fastscroll&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#fastscroll&quot;).fastscroll(&quot;indexString&quot;, &quot;A,D,J,P,W,Z&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">refresh ( ) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.0
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method updates and redraws the current fast scroll component.</p>
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;list&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fastscroll = tau.widget.FastScroll(element);
+
+&nbsp;&nbsp;&nbsp;element.insertAdjacentHTML(&quot;beforeend&quot;, &quot;&lt;li&gt;Bruce&lt;/li&gt;&quot;);
+&nbsp;&nbsp;&nbsp;fastscroll.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       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 data-role=&quot;listview&quot; data-fastscroll=&quot;true&quot; id=&quot;fastscroll&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#fastscroll&quot;).append(&quot;&lt;li&gt;Bruno&lt;/li&gt;&quot;);
+&nbsp;&nbsp;&nbsp;$(&quot;#fastscroll&quot;).fastscroll(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Fliptoggle.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Fliptoggle.htm
new file mode 100644 (file)
index 0000000..4f74682
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Fliptoggle.htm
@@ -0,0 +1,515 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Flip Toggle Switch</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Flip Toggle Switch</h1>
+
+<p>The flip toggle switch component is a common UI element on mobile devices, used for binary on/off or true/false data input.</p>
+
+<p>The flip toggle switch component shows a 2-state switch on the screen. If defined with a <code>select</code> element type with <code>option</code> element, the toggles can have labels. You can drag or flip the handle, or tap one side of the switch.</p>
+
+<p>Toggles defined with the <code>select</code> element are supported for backward compatibility.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors">Default Selectors</a>
+                       
+               </li>
+       
+               <li><a href="#manual-constructor">Manual Constructor</a>
+                       
+               </li>
+
+       
+               <li><a href="#options-list">Options</a>
+                       
+               </li>
+       
+               <li><a href="#methods-list">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+
+
+<h2><a id="default-selectors"></a>Default Selectors</h2>
+
+<p>By default, all <code>input</code> elements with the <code>data-role=&quot;toggleswitch&quot;</code> attribute or the <code>select</code> elements with the <code>data-role=&quot;slider&quot;</code> or <code>data-role=&quot;toggleswitch&quot;</code> attribute are displayed as toggle switches.</p>
+
+<p>To add a toggle switch component to the application:</p>
+
+<pre class="prettyprint">
+&lt;input type=&quot;checkbox&quot; data-role=&quot;toggleswitch&quot;&gt;
+
+&lt;input type=&quot;checkbox&quot; id=&quot;checkbox-1&quot; data-role=&quot;toggleswitch&quot;/&gt;
+&lt;label for=&quot;checkbox-1&quot;&gt;&lt;/label&gt;
+
+&lt;select name=&quot;flip-11&quot; id=&quot;flip-11&quot; data-role=&quot;slider&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&gt;
+
+&lt;select name=&quot;flip-11&quot; id=&quot;flip-11&quot; 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&gt;
+
+&lt;select name=&quot;flip-11&quot; id=&quot;flip-11&quot; data-role=&quot;toggleswitch&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option value=&quot;off&quot;&gt;off option&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option value=&quot;on&quot;&gt;on option&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h2><a id="manual-constructor"></a>Manual Constructor</h2>
+
+<p>To manually create a toggle switch component, use the component constructor from the <strong>tau</strong> namespace:</p>
+
+<pre class="prettyprint">
+&lt;select id=&quot;toggle&quot; name=&quot;flip-11&quot; id=&quot;flip-11&quot; data-role=&quot;toggleswitch&quot; data-mini=&quot;true&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var toggleElement = document.getElementById(&quot;toggle&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggle = tau.widget.ToggleSwitch(toggleElement);
+&lt;/script&gt;
+</pre>
+
+
+       <h2><a id="options-list"></a>Options</h2>
+
+<p>The following table lists the options for the toggle switch component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+                       
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-disabled</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Starts the component as enabled or disabled.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-highlight</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">If set, the toggle switch can be highlighted.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inline</span></td>
+                               <td class="option">boolean | null</td>
+                               <td class="option">false</td>
+                               <td class="option">If the value is <code>&quot;true&quot;</code>, the toggle switch has a css property.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-mini</span></td>
+                               <td class="option">boolean | null</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets the size of the toggle switch.</td>
+                       </tr>
+               
+               
+               </tbody>
+       </table>
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">ToggleSwitch <a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the toggle switch.</p></td>
+                               </tr>           
+                               
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">ToggleSwitch <a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the toggle switch.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">ToggleSwitch <a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes a toggle switch markup.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string <a href="#method-value">value</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets a value.</p></td>
+                               </tr>                   
+               
+               </tbody>
+       </table>
+       <dl>
+               
+
+                               
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the toggle switch.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">ToggleSwitch disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method sets disabled attribute on for the toggle switch and changes the look of the toggle switch to the disabled state.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>ToggleSwitch</td>
+                                                                       <td>Return this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var toggle = document.getElementById(&quot;flip-11&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleWidget = tau.widget.ToggleSwitch(toggle),
+&nbsp;&nbsp;&nbsp;toggleWidget.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#flip-11&quot;).toggleswitch(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>           
+               
+                       
+       
+                       
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the toggle switch.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">ToggleSwitch enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method removes the disabled attribute from the toggle switch and changes the look of the toggle switch to the enabled state.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>ToggleSwitch</td>
+                                                                       <td>Return this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var toggle = document.getElementById(&quot;flip-11&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleWidget = tau.widget.ToggleSwitch(toggle),
+&nbsp;&nbsp;&nbsp;toggleWidget.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#flip-11&quot;).toggleswitch(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes a toggle switch markup.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">ToggleSwitch refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method rebuilds the DOM structure of the toggle switch component. It must be called after you manually change the HTML attributes of component&#39;s DOM structure.</p>
+
+<p>The method is called automatically after any component option is changed.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>ToggleSwitch</td>
+                                                                       <td>Return this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var toggle = document.getElementById(&quot;flip-11&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleWidget = tau.widget.ToggleSwitch(toggle),
+&nbsp;&nbsp;&nbsp;toggleWidget.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#flip-11&quot;).toggleswitch(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+
+                                                       
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-value">value</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets a value.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">string value ( ) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.3
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>This method returns the element value or sets the element value.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>string</td>
+                                                                       <td>In the get mode, returns the element value or element.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var toggle = document.getElementById(&quot;flip-11&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleWidget = tau.widget.ToggleSwitch(toggle),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Value contains the index of the select element
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = toggleWidget.value();
+&nbsp;&nbsp;&nbsp;// Sets the index for the toggle
+&nbsp;&nbsp;&nbsp;toggleWidget.value(&quot;1&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;select id=&quot;flip-11&quot; name=&quot;flip-11&quot; 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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Value contains the index of the select element
+&nbsp;&nbsp;&nbsp;$(&quot;#flip-11&quot;).toggleswitch(&quot;value&quot;);
+&nbsp;&nbsp;&nbsp;// Sets the index for the toggle
+&nbsp;&nbsp;&nbsp;$(&quot;#flip-11&quot;).toggleswitch(&quot;value&quot;, &quot;1&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                               
+               
+               </dl>
+       
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Gallery.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Gallery.htm
new file mode 100644 (file)
index 0000000..e011099
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Gallery.htm
@@ -0,0 +1,688 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Gallery</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Gallery</h1>
+
+<p>The gallery component shows images in a gallery on the screen.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.0.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#default">Default Selectors</a></li>
+                                       
+               <li><a href="#html">HTML Examples</a></li>
+
+               <li><a href="#options">Options</a></li>
+       
+               <li><a href="#methods">Methods</a></li>
+       
+</ol>
+
+
+<h2><a id="default"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;div&gt;</code> elements with the <code>data-role=&quot;gallery&quot;</code> attribute are displayed as gallery components.</p>
+
+<h2><a id="html"></a>HTML Examples</h2>
+
+<p>To create and configure a gallery component, use the <code>&lt;div&gt;</code> element with the <code>data-role</code> attribute:</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;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt; &lt;!--Content--&gt;
+&lt;div data-role=&quot;footer&quot; data-position =&quot;fixed&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; data-role=&quot;button&quot; id=&quot;gallery-add&quot;&gt;ADD&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; data-role=&quot;button&quot; id=&quot;gallery-del&quot;&gt;DELETE&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;!--Navbar--&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="options"></a>Options</h2>
+<p>The following table lists the options for the gallery component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-duration</span></td>
+                               <td class="option">number</td>
+                               <td class="option">500</td>
+                               <td class="option">The duration each gallery image is shown.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-flicking</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether flicking is enabled.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-index</span></td>
+                               <td class="option">number</td>
+                               <td class="option">0</td>
+                               <td class="option">Index of the gallery image to be shown.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-vertical-align</span></td>
+                               <td class="option">&quot;top&quot; | &quot;middle&quot; | &quot;bottom&quot;</td>
+                               <td class="option">&quot;top&quot;</td>
+                               <td class="option"><p>Object with default options.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+       <h2><a id="methods"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>         
+                       <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-add">add</a> ( string file ) </pre>
+                                       </td>
+                                       <td><p>Adds an image to the gallery.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-empty">empty</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Removes all images from the gallery.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-hide">hide</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Hides the gallery.</p></td>
+                               </tr>
+                       <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">number <a href="#method-length">length</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Gets the number of images.</p></td>
+                               </tr>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">?number <a href="#method-refresh">refresh</a> ( number? startIndex ) </pre>
+                                       </td>
+                                       <td><p>Refreshes the gallery.</p></td>
+                               </tr>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-remove">remove</a> ( number? index ) </pre>
+                                       </td>
+                                       <td><p>Deletes a specific image from the gallery.<br />If no parameter is defined, the current image is deleted.</p></td>
+                               </tr>
+               
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-show">show</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Displays the gallery.</p></td>
+                               </tr>
+                       <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">?number <a href="#method-value">value</a> ( number index ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets the current index of the gallery.</p></td>
+                               </tr>
+       
+               </tbody>
+       </table>
+       <dl>
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-add">add</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Adds an image to the gallery.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">add ( string file) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                               <p>The file URL of the image must be passed as a parameter.</p>
+                                                       <p>The <code>refresh</code> method must be called after adding. Otherwise, the file is only added, but not displayed.</p>
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Image file URL.</td>
+                                       </tr>
+                               
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+
+galleryWidget.add(&quot;./images/01.jpg&quot;); // Image with attribute src=&quot;./images/01.jpg&quot; is added
+galleryWidget.refresh();
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#gallery&quot;).gallery(&quot;add&quot;, &quot;./images/01.jpg&quot;);
+$(&quot;#gallery&quot;).gallery(&quot;add&quot;, &quot;./images/02.jpg&quot;);
+$(&quot;#gallery&quot;).gallery(&quot;refresh&quot;); // To see changes, &quot;refresh&quot; method must be called
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-empty">empty</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>
+Removes all images from the gallery.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">empty ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+
+                                               </p>
+                                       </div>
+               
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                       
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+
+galleryWidget.empty(); // All images are deleted
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#gallery&quot;).gallery(&quot;empty&quot;);
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-hide">hide</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Hides the gallery.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">hide ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                               <p>The method makes all images invisible and unbinds all touch events.</p>      
+                                               </p>
+                                       </div>
+       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+
+galleryWidget.hide(); // Gallery is hidden
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#gallery&quot;).gallery(&quot;hide&quot;);
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-length">length</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets the number of images.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">number length ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+               
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>number</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;)),
+&nbsp;&nbsp;&nbsp;&nbsp;imagesItems;
+
+imagesLength = galleryWidget.length(); // Number of images
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+imagesLength = $(&quot;#gallery&quot;).gallery(&quot;length&quot;);
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes the gallery.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">?number refresh ( number? startIndex) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method must be called after adding images to the gallery. It is called automatically after changing any component options and calling the <code>value</code> method with a non-empty parameter.</p>
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">startIndex</span></td>
+                                               <td>number</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>Index of the first image.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>?number</td>
+                                                                       <td>Index of the first image to be displayed.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+galleryWidget.refresh();
+
+// Called automatically during option changing (option method) or value setting (value method)
+
+galleryWidget.option(&quot;flicking&quot;, true);
+galleryWidget.value(0);
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#gallery&quot;).gallery(&quot;refresh&quot;);
+
+// Called automatically during option changing (option method) or value setting (value method)
+
+galleryWidget.option(&quot;flicking&quot;, true);
+galleryWidget.value(0);
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-remove">remove</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Deletes a specific image from the gallery.<br />If no parameter is defined, the current image is deleted.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">remove ( number? index) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">index</span></td>
+                                               <td>number</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>Index of the image to be deleted.</td>
+                                       </tr>
+               
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+
+galleryWidget.remove(0); // First image is removed
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#gallery&quot;).gallery(&quot;remove&quot;, 0);
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-show">show</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Displays the gallery.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">show ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                               <p>The method is called on <code>pageshow</code> event and during refreshing.</p>       
+                                               </p>
+                                       </div>
+               
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+
+galleryWidget.show();
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#gallery&quot;).gallery(&quot;show&quot;);
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-value">value</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets the current index of the gallery.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">?number value ( number index) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                               <p>If the parameter is not defined, the current index is returned. Otherwise, the index of the image is set and the proper image is displayed.</p>
+<p>The image index is counted from 0. If a new index is less than 0 or greater than or equal to the length of the images, the index is not changed.</p>        
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">index</span></td>
+                                               <td>number</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Index of the image to be displayed</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>?number</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;)),
+&nbsp;&nbsp;&nbsp;&nbsp;value = galleryWidget.value(); // Value contains the index of the current image
+
+galleryWidget.value(0); // First image is displayed
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+value = $(&quot;#gallery&quot;).gallery(&quot;value&quot;); // Value contains the index of the current image
+
+$(&quot;#gallery&quot;).gallery(&quot;value&quot;,  0); // First image is displayed
+</pre>
+                                               </div>
+                                       
+                               </dd>
+       
+               
+       </dl>
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ListDivider.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ListDivider.htm
new file mode 100644 (file)
index 0000000..1dc7b6c
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ListDivider.htm
@@ -0,0 +1,190 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>List Divider</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>List Divider</h1>
+
+<p>The list divider component creates a list separator, which can be used for grouping list items.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#default-selectors0.8097431478090584">Default Selectors</a></li>
+
+               <li><a href="#manual-constructor0.4427847310435027">Manual Constructor</a></li>
+
+               <li><a href="#examples">HTML Examples</a></li>  
+
+               <li><a href="#options0.6772414387669414">Options</a></li>       
+
+</ol>
+
+<h2><a id="default-selectors0.8097431478090584"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-role=&quot;listdivider&quot;</code> or <code>class=&quot;ui-listdivider&quot;</code> attribute are displayed as list dividers.</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&gt;
+</pre>
+
+<h2><a id="manual-constructor0.4427847310435027"></a>Manual Constructor</h2>
+
+<p>To manually create a list divider component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li id=&quot;listdivider&quot;&gt;Divider&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var listdivider = tau.widget.ListDivider(document.getElementById(&quot;listdivider&quot;));
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li id=&quot;listdivider&quot;&gt;Divider&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#listdivider&quot;).listdivider();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="examples"></a>HTML Examples</h2>
+
+<ul>
+
+<li>
+
+<p>To create a list divider that shows the divider press effect (<code>data-folded=&quot;true&quot;</code>) and no divider line (<code>data-line=&quot;false&quot;</code>):</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot; data-folded=&quot;true&quot data-line=&quot;false&quot;&gt;Item styles&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a list divider that uses the checkbox style:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot; data-style=&quot;check&quot; class=&quot;ui-li-checkbox&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;check&quot;&gt;Select All&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;select-check2&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;select-check1&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;select-check3&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var selectAll = tau.widget.Checkboxradio(document.getElementsByName(&quot;check&quot;)[0]),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;check = [];
+
+&nbsp;&nbsp;&nbsp;check[0] = tau.widget.Checkboxradio(document.getElementsByName(&quot;select-check1&quot;)[0]);
+&nbsp;&nbsp;&nbsp;check[1] = tau.widget.Checkboxradio(document.getElementsByName(&quot;select-check2&quot;)[0]);
+&nbsp;&nbsp;&nbsp;check[2] = tau.widget.Checkboxradio(document.getElementsByName(&quot;select-check3&quot;)[0]);
+
+&nbsp;&nbsp;&nbsp;function checkAllCheckbox() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var val = selectAll.value() === null ? false : true;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in check) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (check.hasOwnProperty(i)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;check[i].element.checked = val;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;check[i].refresh();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;selectAll.on(&quot;change&quot;, checkAllCheckbox);
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a list divider that uses the dialogue style:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot; data-style=&quot;dialogue&quot;&gt;Items&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-dialogue&quot;&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-dialogue&quot;&gt;Item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-dialogue&quot;&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+</ul>
+
+<h2><a id="options0.6772414387669414"></a>Options</h2>
+
+<p>The following table lists the options for the list divider component.</p>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-folded</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether to show the divider press effect.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-line</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Sets whether to show the divider line.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-style</span></td>
+                               <td class="option">&quot;normal&quot; | &quot;checkbox&quot; | &quot;dialogue&quot;</td>
+                               <td class="option">&quot;normal&quot;</td>
+                               <td class="option">Style of the list divider.</td>
+                       </tr>
+
+               
+               </tbody>
+       </table>
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm
new file mode 100644 (file)
index 0000000..785b43a
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm
@@ -0,0 +1,521 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>List View</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<h1>List View</h1>
+
+<p>The list view component is used to display, for example, navigation data, results, and data entries, in a list format.</p>
+
+    <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">
+             <ul>
+              <li>A <a href="ns_widget_mobile_Button.htm">button component</a> placed inside an <code>&lt;a&gt;</code> element is not supported in the list view component. The button component must be placed inside a <code>&lt;div&gt;</code> element.</li>
+              <li>If you implement the list view component differently from what is described in the following examples, you must customize the element positioning for your application.</li>
+             </ul>
+            </td>
+               </tr>
+               </tbody>
+       </table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#default-selectors0.8381957695819438">Default Selectors</a></li>
+
+        <li><a href="#manual-constructor">Manual Constructor</a></li>
+
+               <li><a href="#html-example code0.796579651767388">HTML Examples</a></li>
+
+               <li><a href="#options-list">Options</a></li>
+
+               <li><a href="#events-list">Events</a></li>
+
+               <li><a href="#methods-list">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.8381957695819438"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;ol&gt;</code> and <code>&lt;ul&gt;</code> elements with the <code>data-role=&quot;listview&quot;</code> attribute are displayed as list views.</p>
+
+<h2><a id="manual-constructor"></a>Manual Constructor</h2>
+
+<p>To manually create a list view component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint">&lt;ul id=&quot;list&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Arabella&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Bill&lt;/li&gt;
+&lt;/ul&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;tau.widget.Listview(document.getElementById(&quot;list&quot;));
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method:</p>
+
+<pre class="prettyprint">&lt;ul id=&quot;list&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Arabella&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Bill&lt;/li&gt;
+&lt;/ul&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&#39;#list&#39;).listview();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-example code0.796579651767388"></a>HTML Examples</h2>
+
+<ul>
+
+<li>
+
+<p>To create a basic 1-line list item with or without an anchor:</p>
+
+<pre class="prettyprint">&lt;!--With an anchor--&gt;
+&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Anton&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Barry&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Bill&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;!--Without an anchor--&gt;
+&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Bill&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a 1-line list item with a subtext.</p>
+<p>If the <code>class=&quot;ui-li-multiline&quot;</code> attribute is not used, the subtext is placed next to the main text. With the attribute, the subtext is placed below the main text.</p>
+
+<pre class="prettyprint">
+&lt;!--Subtext next to the main text--&gt;
+&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anton
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Barry
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;!--Subtext below the main text--&gt;
+&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-multiline&quot;&gt;Anton
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-multiline&quot;&gt;Barry
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+</li>
+
+<li>
+
+<p>To create a 1-line list item with a text button or a circle-shaped button:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anton
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Button&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Barry
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot; data-icon=&quot;plus&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-style=&quot;circle&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a 1-line list item with a thumbnail:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Thumbnail--&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;thumbnail.jpg&quot; class=&quot;ui-li-bigicon&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anton
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Thumbnail on the right side--&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-thumbnail-right&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;a.jpg&quot; class=&quot;ui-li-bigicon&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Barry
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a 1-line list item with a checkbox:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-checkbox&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;c1line-check1&quot; /&gt;Anton&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+
+<li>
+
+<p>To create a basic 2-line list item:</p>
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-multiline&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anton
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-multiline&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Barry
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+</li>
+
+
+<li>
+
+<p>To create a 2-line list item with a color bar:</p>
+
+
+<pre class="prettyprint">&lt;ul data-role=&quot;listview&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Color bar, subtext, three star-shaped icons, and text button--&gt;
+&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-multiline&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-color-bar&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: red;&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anton
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;subtext
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;00_winset_icon_favorite_on.png&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;00_winset_icon_favorite_on.png&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;00_winset_icon_favorite_on.png&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;button&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+</pre>
+
+</li>
+
+</ul>
+
+       <h2><a id="options-list"></a>Options</h2>
+
+<p>The following table lists the options for the list view component.</p>      
+       
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inset</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the list view is wrapped by an additional layer.</td>
+                       </tr>           
+               </tbody>
+       </table>
+
+       <h2><a id="events-list"></a>Events</h2>
+
+<p>The following table lists the events related to list view component.</p>    
+       
+       <table>
+               <tbody>
+               <tr>
+                       <th>Event</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">beforerefreshitems</span></td>
+                               <td><p>Triggered before the list view items are refreshed.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-destroy">addItem</a> (HTMLElement listItem, number position) </pre>
+                                       </td>
+                                       <td><p>Adds an item to and refreshes the list view.</p></td>
+                               </tr>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-destroy">refresh</a> ( ) </pre>
+                                       </td>
+                                       <td><p>Refreshes the list view.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-destroy">removeItem</a> (number position) </pre>
+                                       </td>
+                                       <td><p>Removes an item from and refreshes the list view.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-destroy">addItem</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Adds an item to and refreshes the list view.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">addItem (HTMLElement listItem, number position) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">listItem</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>New <code>&lt;li&gt;</code> element.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">position</span></td>
+                                               <td>number</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Position in the list.</td>
+                                       </tr>
+                                       </table></tbody></div>
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">&lt;ul id=&quot;listvi&quot; data-role=&quot;listview&quot;&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;listvi&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listv = tau.widget.Listview(element);
+&nbsp;&nbsp;&nbsp;listv.addItem(&quot;&lt;li&gt;Test&lt;div data-role=&#39;button&#39; data-inline=&#39;true&#39;&gt;TEST&lt;/div&gt;&lt;/li&gt;&quot;, 2);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-destroy">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes the list view.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">&lt;ul id=&quot;listvi&quot; data-role=&quot;listview&quot;&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;listvi&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listv = tau.widget.Listview(element);
+&nbsp;&nbsp;&nbsp;listv.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>
+
+                                       
+                               </dd>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-destroy">removeItem</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Removes an item from and refreshes the list view.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">removeItem (number position) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">position</span></td>
+                                               <td>number</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Position in the list.</td>
+                                       </tr>
+                                       </table></tbody></div>
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;ul id=&quot;listvi&quot; data-role=&quot;listview&quot;&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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;listvi&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listv = tau.widget.Listview(element);
+&nbsp;&nbsp;&nbsp;listv.removeItem(0);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_MultimediaView.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_MultimediaView.htm
new file mode 100644 (file)
index 0000000..6c10deb
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_MultimediaView.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Multimedia View</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Multimedia View</h1>
+
+<p>The multimedia view component displays the audio and video player.</p>
+
+<table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component (not a TAU-based component) is supported by standard HTML since Tizen 2.3.</td>
+               </tr>
+               </tbody>
+       </table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#html-examples">HTML Examples</a></li>
+       
+</ol>
+
+
+<h2><a id="html-examples"></a>HTML Examples</h2>
+
+<p>It is very simple to use the multimedia view in a Web application. For more information, see <a href="http://www.w3schools.com/html/html5_video.asp" target="blank">HTML5 Video</a>.</p>
+
+<ul><li>To create a video view:
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;video data-controls=&quot;true&quot; style=&quot;width:100%;&quot; controls&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;Color_short_version.mp4&quot; type=&quot;video/mp4&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Your browser does not support the video tag.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/video&gt;
+&lt;/div&gt;
+</pre></li>
+<li>To create an audio view:
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;audio data-controls=&quot;true&quot; style=&quot;width:100%;&quot; controls&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source src=&quot;Color_short_version.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Your browser does not support the audio tag.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/audio&gt;
+&lt;/div&gt;
+</pre></li></ul>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Navigation.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Navigation.htm
new file mode 100644 (file)
index 0000000..09ba7c2
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Navigation.htm
@@ -0,0 +1,239 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Navigation Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Navigation Bar</h1>
+
+
+<p>The navigation bar component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation bar, you can move to the target page.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.3.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selector">Default Selector</a>
+                       
+               <li><a href="#html-examples">HTML Examples</a>
+               </li>
+                       
+               </li>
+
+               <li><a href="#methods-list">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+<h2><a id="default-selector"></a>Default Selector</h2>
+
+<p>Make the navigation component with the <code>data-role=&quot;navigation&quot;</code> attribute. For semantic understanding, use the <code>nav</code> element.</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&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&gt;title&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav data-role=&quot;navigation&quot; id=&quot;navigation&quot;&gt;&lt;/nav&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="html-examples"></a>HTML Examples</h2>
+
+<p>To create a navigation bar, an array containing the navigation history is required. Each value of the array must have an identifiable value, such as a name. In the following example, the array is named as &quot;historyArraytoUse&quot;.</p>
+<p>The navigation bar component only provides the creation of the visual navigation bar, no functional navigation. You must separately implement the navigational function in the application using other methods, such as <code>history.go()</code>.</p>
+
+<ul><li><p>Declare the navigation in the HTML code using the <code>data-role</code> attribute:</p></li>
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;navigation-bar&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;!--Declare navigation in header--&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;Navigation bar&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav data-role=&quot;navigation&quot; id=&quot;navigation&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;!--You can include several pages where to move--&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&gt;&lt;a href=&quot;navigation1.html&quot;&gt;Move to Navigation1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;navigation2.html&quot;&gt;Move to Navigation2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li><p>Make a history array and create the navigation bar in the JavaScript code:</p></li>
+<pre class="prettyprint">
+var historyMaker = function(event) 
+{
+&nbsp;&nbsp;&nbsp;// Store the browsing history in navigationHistory array
+&nbsp;&nbsp;&nbsp;var iteration = window.navigationHistory.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targetId = event.target.id;
+
+&nbsp;&nbsp;&nbsp;if (!iteration) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigationHistory.push({pageId : targetId});
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; iteration; i++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (targetId === navigationHistory[i].pageId) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigationHistory.splice(i + 1, iteration - i - 1);
+&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;if (i &gt;= iteration) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigationHistory.push({pageId : targetId});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+},
+
+historyDrawer = function(event) 
+{
+&nbsp;&nbsp;&nbsp;var navi = document.getElementById(&quot;navigation&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;naviWidget = tau.widget.Navigation(navi);
+&nbsp;&nbsp;&nbsp;if (document.getElementsByClassName(&quot;ui-navigation-ul&quot;)[0].childElementCount) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.warn(&quot;Create method should be called only once in a page&quot;);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create navigation component with navigationHistory
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;naviWidget.create(navigationHistory);
+&nbsp;&nbsp;&nbsp;}
+},
+
+historyMove = function(event) 
+{
+&nbsp;&nbsp;&nbsp;var selectedIndex = event.originalEvent.detail,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;barLength = navigationHistory.length;
+&nbsp;&nbsp;&nbsp;// Clear unnecessary array of history out
+&nbsp;&nbsp;&nbsp;navigationHistory.splice(selectedIndex + 1, barLength - selectedIndex );
+&nbsp;&nbsp;&nbsp;history.go(- (barLength - selectedIndex) + 1);
+};
+
+window.navigationHistory = window.navigationHistory || [];
+
+// When page is created and shown, following this event handler need to bind only once
+$(document).one(&quot;pagebeforeshow&quot;, historyMaker);
+$(document).one(&quot;pageshow&quot;, historyDrawer);
+$(&quot;nav&quot;).one(&quot;navigate&quot;, historyMove);
+</pre>
+
+</ul>
+
+
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-create">create</a> ( Array navigationHistory ) </pre>
+                                       </td>
+                                       <td><p>Initiates the making of the navigation bar.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-create">create</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Initiates the making of the navigation bar.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">create ( Array navigationHistory) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">navigationHistory</span></td>
+                                               <td>Array</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+               </dl>
+       
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Notification.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Notification.htm
new file mode 100644 (file)
index 0000000..8d2bc9e
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Notification.htm
@@ -0,0 +1,957 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Notification</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Notification</h1>
+
+<p>The notification component shows a pop-up on the screen for providing notifications.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#default-selectors0.8505647901911288">Default Selectors</a></li>
+
+               <li><a href="#manual-constructor0.923238382441923">Manual Constructor</a></li>
+
+               <li><a href="#html-examples0.8878875768277794">HTML Examples</a></li>
+
+               <li><a href="#options-list">Options</a></li>
+
+               <li><a href="#methods-list">Methods</a></li>
+
+</ol>
+
+<h2><a id="default-selectors0.8505647901911288"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-role=&quot;notification&quot;</code>  attribute are displayed as notifications.</p>
+
+<p>Use the <code>&lt;p&gt;</code> element for messages and the <code>&lt;img&gt;</code> element for icons.</p>
+
+<h2><a id="manual-constructor0.923238382441923"></a>Manual Constructor</h2>
+
+<p>To manually create a notification component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;));
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = $(&quot;#notification&quot;).notification();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples0.8878875768277794"></a>HTML Examples</h2>
+
+<h3><a id='create-notification smallpoup0.3612392577342689'></a>Smallpopup Notification</h3>
+
+<p>A smallpopup notification has a single line of text and is positioned at the bottom of the active page. The smallpopup is the default notification type.</p>
+
+<ul>
+
+<li>
+
+<p>To create a smallpopup notification using the TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpopup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Get component instance or create new instance if component does not exist
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;));
+
+&nbsp;&nbsp;&nbsp;// Open notification
+&nbsp;&nbsp;&nbsp;notification.open();
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a smallpopup notification using the jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Open component using jQuery notation
+&nbsp;&nbsp;&nbsp;$(&quot;#notification&quot;).notification(&quot;open&quot;)
+&lt;/script&gt;
+</pre>
+
+</li>
+
+</ul>
+
+<h3><a id='create-notification ticker0.17640168755315244'></a>Ticker Notification</h3>
+
+<p>A ticker notification has a maximum of 2 lines of text and is positioned at the top of the active page. You can set an icon for a ticker notification.</p>
+
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">You can add an icon only to a ticker notification.</td>
+               </tr>
+               </tbody>
+       </table>
+
+<ul>
+
+<li>
+
+<p>To create a ticker notification using the TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;First line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Get component instance or create new instance if component does not exist
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;));
+
+&nbsp;&nbsp;&nbsp;// Open notification
+&nbsp;&nbsp;&nbsp;notification.open();
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a ticker notification using the jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;First line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Open component using jQuery notation
+&nbsp;&nbsp;&nbsp;$(&quot;#notification&quot;).notification(&quot;open&quot;)
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a ticker notification with an icon using the TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;img src=&quot;icon.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;First line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Open notification
+&nbsp;&nbsp;&nbsp;notification.open();
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a ticker notification with an icon using the jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;img src=&quot;icon.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;First line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Open component using jQuery notation
+&nbsp;&nbsp;&nbsp;$(&quot;#notification&quot;).notification(&quot;open&quot;)
+&lt;/script&gt;
+</pre>
+
+</li>
+
+</ul>
+
+<h3><a id='create-notification wih interval0.0953348446637392'></a>Notification with an Interval</h3>
+
+<p>An interval defines the length of time a notification is displayed. After the time is up, the notification closes automatically. If you do not specify an interval, the notification is displayed until the user manually closes it.</p>
+
+<p>The value of the <code>data-interval</code> attribute is a positive number of milliseconds. For example, <code>data-interval=&quot;2000&quot;</code> sets the notification to close automatically after 2 seconds.</p>
+
+<ul>
+
+<li>
+
+<p>To create a notification with an interval using the TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;ticker&quot; data-interval=&quot;4000&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;img src=&quot;icon.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;I will close in 4* seconds!&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;* starts counting from component opening&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Get component instance or create new instance if component does not exist
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;));
+
+&nbsp;&nbsp;&nbsp;// Open notification
+&nbsp;&nbsp;&nbsp;notification.open();
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li>
+
+<p>To create a notification with an interval using the jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;ticker&quot; data-interval=&quot;4000&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;img src=&quot;icon.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;I will close in 4* seconds!&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;* starts counting from component opening&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Open component using jQuery notation
+&nbsp;&nbsp;&nbsp;$(&quot;#notification&quot;).notification(&quot;open&quot;)
+&lt;/script&gt;
+</pre>
+
+</li>
+
+</ul>
+
+       <h2><a id="options-list"></a>Options</h2>
+
+<p>The following table lists the options for the notification component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-type</span></td>
+                               <td class="option">&quot;smallpopup&quot; | &quot;ticker&quot;</td>
+                               <td class="option">&quot;smallpopup&quot;</td>
+                               <td class="option">Notification type.</td>
+                       </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-interval</span></td>
+                               <td class="option">number</td>
+                               <td class="option">null</td>
+                               <td class="option"><p>Time interval in milliseconds after which the notification closes automatically.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-close">close</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Closes the notification on the screen.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-destroy">destroy</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Removes the component.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the component.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the component.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-icon">icon</a> ( string src ) </pre>
+                                       </td>
+                                       <td><p>Creates an icon or changes an existing icon to a new one.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-open">open</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Displays the notification on the screen.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Notification <a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes the notification and resets its interval, if specified.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-text">text</a> ( string text0, string text1 ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets the notification text.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-close">close</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Closes the notification on the screen.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">close ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;));
+&nbsp;&nbsp;&nbsp;notification.close();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#notificationSelector&quot;).notification(&quot;close&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-destroy">destroy</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Removes the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">destroy ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>The method returns the component back to its pre-initialization state.</p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;)),
+&nbsp;&nbsp;&nbsp;notification.destroy();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#notificationSelector&quot;).notification(&quot;destroy&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>The method adds the <code>display:none</code> style to the component, preventing the notification from being displayed on the screen.</p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Get component instance or create new instance if component does not exist
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;));
+
+&nbsp;&nbsp;&nbsp;// Disable component
+&nbsp;&nbsp;&nbsp;notification.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Disable component
+&nbsp;&nbsp;&nbsp;$(&quot;#notification&quot;).notification(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>The method removes the <code>display:none</code> style from the component, allowing the notification to be displayed on the screen.</p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Get component instance or create new instance if component does not exist
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;));
+
+&nbsp;&nbsp;&nbsp;// Enable component
+&nbsp;&nbsp;&nbsp;notification.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Enable component
+&nbsp;&nbsp;&nbsp;$(&quot;#notification&quot;).notification(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-icon">icon</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Creates an icon or changes an existing icon to a new one.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">icon ( string src) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>The method resets the CSS classes on the image element.</p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">src</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>URL of the image file to use as the icon.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;));
+&nbsp;&nbsp;&nbsp;notification.icon(&quot;some-image.png&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#notificationSelector&quot;).notification(&quot;icon&quot;, &quot;some-image.png&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-open">open</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Displays the notification on the screen.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">open ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;));
+&nbsp;&nbsp;&nbsp;notification.open();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#notificationSelector&quot;).notification(&quot;open&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes the notification and resets its interval, if specified.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Notification refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Notification</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;));
+&nbsp;&nbsp;&nbsp;notification.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;smallpoup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#notificationSelector&quot;).notification(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-text">text</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets the notification text.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array text ( string text0, string text1) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>If no parameters are specified, the method returns the current notification text as an array.</p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">text0</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>First line of notification text.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">text1</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Second line of notification text.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>?Array</td>
+                                                                       <td>If no parameters are specified, returns the current notification text.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;));
+&nbsp;&nbsp;&nbsp;var widgetText = notification.text();
+
+&nbsp;&nbsp;&nbsp;alert(widgetText);
+&nbsp;&nbsp;&nbsp;// Alert &quot;Line of message,Second line of message&quot;
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var widgetText = $(&quot;#notificationSelector&quot;).notification(&quot;text&quot;);
+
+&nbsp;&nbsp;&nbsp;alert(widgetText);
+&nbsp;&nbsp;&nbsp;// Alert &quot;Line of message,Second line of message&quot;
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Second line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notificationSelector&quot;));
+
+&nbsp;&nbsp;&nbsp;notification.text(&quot;This is a new Notification!&quot;, &quot;This is an example&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;notification&quot; id=&quot;notificationSelector&quot; data-type=&quot;ticker&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;Line of message&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#notificationSelector&quot;).notification(&quot;text&quot;, &quot;This is new Notification!&quot;, &quot;This is an example&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm
new file mode 100644 (file)
index 0000000..c8d3f86
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm
@@ -0,0 +1,968 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Popup</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Popup</h1>
+
+<p>The popup component handles creating and managing pop-up windows.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.8939050626941025">Default Selectors</a>
+                       
+               </li>
+       
+
+       
+               <li><a href="#manual-constructor0.5366392943542451">Manual Constructor</a>
+                       
+               </li>
+       
+               <li><a href="#html-examples0.8655443852767348">HTML Examples</a>
+       
+               </li>
+               
+               <li><a href="#context-popup with arrow0.9959437232464552">Context Popup with Arrow</a>
+                       
+               </li>
+       
+               <li><a href="#options-list">Options</a>
+                       
+               </li>
+       
+               <li><a href="#events-list">Events</a>
+                       
+               </li>
+       
+               <li><a href="#methods-list">Methods</a>
+                       
+               </li>
+               
+
+               <li><a href="#opening-popup0.4268628491554409">Opening a Popup</a>
+               
+               </li>
+       
+               <li><a href="#closing-popup0.4531055218540132">Closing a Popup</a>
+               
+               </li>           
+       
+</ol>
+
+<h2><a id="default-selectors0.8939050626941025"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-role=&quot;popup&quot;</code> attribute are displayed as Tizen Web UI popups.</p>
+
+
+<h2><a id="manual-constructor0.5366392943542451"></a>Manual Constructor</h2>
+
+<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popupElement = document.getElementById(&quot;popup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup = tau.widget.Popup(popupElement);
+&nbsp;&nbsp;&nbsp;popup.open();
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popup = $(&quot;#popup&quot;).popup();
+&nbsp;&nbsp;&nbsp;popup.popup(&quot;open&quot;);
+&lt;/script&gt;
+</pre>
+
+
+<h2><a id="html-examples0.8655443852767348"></a>HTML Examples</h2>
+
+<p>If the link has the <span style="font-family: Courier New,Courier,monospace">data-position-to=&quot;window&quot;</span> option in the popup, the popup is opened to a new window after clicking.</p>
+<ul>
+
+<li>To create a simple popup positioned to a window.
+
+<pre class="prettyprint">&lt;!--Definition of the link, which opens the popup and sets its position--&gt;
+&lt;a href=&quot;#center_info&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;!--Definition of the popup, which inherits property position from link--&gt;
+&lt;div id=&quot;center_info&quot; data-role=&quot;popup&quot; class=&quot;center_info&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-text&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Pop-up dialog box, a child window that blocks user interaction to the parent windows&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>To create a popup with a title and button:
+
+<pre class="prettyprint">&lt;a href=&quot;#center_title_1btn&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;!--Definition of popup with a title and button--&gt;
+&lt;div id=&quot;center_title_1btn&quot; data-role=&quot;popup&quot; class=&quot;center_title_1btn&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-title&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Popup title&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-text&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pop-up dialog box, a child window that blocks user interaction to the parent windows
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-button-bg&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; data-rel=&quot;back&quot; data-inline=&quot;true&quot;&gt;Button&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>To create a popup with a menu.
+
+<p>A menu can be created by placing a <a href="ns_widget_mobile_Listview.htm">list view component</a> inside a popup.</p>
+
+<pre class="prettyprint">&lt;a href=&quot;#center_liststyle_1btn&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;div id=&quot;center_liststyle_1btn&quot; data-role=&quot;popup&quot; class=&quot;center_liststyle_1btn&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-title&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Popup title&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-scroller-bg&quot; data-scroll=&quot;y&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; data-icon=&quot;1line-textonly&quot;&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List item 2&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-popup-button-bg&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; data-rel=&quot;back&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+</ul>
+
+
+<h2><a id="context-popup with arrow0.9959437232464552"></a>Context Popup with Arrow</h2>
+
+<p>If the <code>id</code> property is set in the link and the <code>data-position-to=&quot;origin&quot;</code> option in the popup, the context popup is opened after clicking.</p>
+
+<pre class="prettyprint">&lt;!--Definition of the link, which opens a popup with popup id in context style with an arrow--&gt;
+&lt;a href=&quot;#popup&quot; id=&quot;linkId&quot; data-position-to=&quot;origin&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Click to open context popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic context popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The <code>positionTo</code> option has the <code>&quot;origin&quot;</code> value in the popup by default. However, the <code>positionTo</code> property is inherited from the related link and the inherited value has a higher priority during the opening process and overwrites the previous value. So, if you do not change it in the popup and do not set the <code>data-position-to</code> value to other than <code>&quot;origin&quot;</code> in the link, the popup connected with the link is always opened in the context style.</p>
+
+<p>To make sure that the popup is opened in the context style with an arrow, set the <code>data-position-to=&quot;origin&quot;</code> property as well as <code>id</code> as in the example above.</p>
+
+<p>The same result can be achieved by setting the <code>id</code> property only and not setting the <code>positionTo</code> option in the link. This is because the popup has the <code>&quot;origin&quot;</code> value for the <code>positionTo</code> option by default.</p>
+
+<pre class="prettyprint">&lt;!--In link, id is set--&gt;
+&lt;a href=&quot;#popup&quot; id=&quot;linkId&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Click to open context popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>After building the popup, the value of the <code>positionTo</code> option can be changed by using the <code>option</code> method:</p>
+
+<ul><li>With the TAU API (<strong>RECOMMENDED</strong>):
+<pre class="prettyprint">&lt;a href=&quot;#popup&quot; id=&quot;linkId&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Click to open context popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Change value of positionTo option by option method
+&nbsp;&nbsp;&nbsp;var popupWidget = tau.widget.Popup(document.getElementById(&quot;popup&quot;));
+&nbsp;&nbsp;&nbsp;popupWidget.option(&quot;positionTo&quot;, &quot;origin&quot;);
+&lt;/script&gt;
+</pre></li>
+<li>With the jQuery API (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">&lt;a href=&quot;#popup&quot; id=&quot;linkId&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Click to open context popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Change value of positionTo option by option method
+&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;option&quot;, &quot;positionTo&quot;, &quot;origin&quot;);
+&lt;/script&gt;
+</pre></li></ul>
+
+<p>The context popup can also be created manually for elements other than a link by pushing the options, such as <code>positionTo</code> and <code>link</code> to the <code>_open</code> method:</p>
+
+<ul><li>With the TAU API (<strong>RECOMMENDED</strong>):
+<pre class="prettyprint">&lt;!--Element with no properties - popup is opened next to it in context style manually--&gt;
+&lt;div id=&quot;linkId&quot;&gt;Click to open context popup&lt;/div&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Set opening popup on click event
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;linkId&quot;).addEventListener(&quot;click&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Open context popup
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var popupWidget = tau.widget.Popup(document.getElementById(&quot;popup&quot;));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Open with options
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popupWidget.open({link: &quot;linkId&quot;, positionTo: &quot;origin&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+
+</li>
+<li>With the jQuery API (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">&lt;!--Element with no properties - popup is opened next to it in context style manually--&gt;
+&lt;div id=&quot;linkId&quot;&gt;Click to open context popup&lt;/div&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Set opening popup on click event
+&nbsp;&nbsp;&nbsp;$(&quot;#linkId&quot;).on(&quot;click&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Open with options
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;open&quot;, {link: &quot;linkId&quot;, positionTo: &quot;origin&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li></ul>
+
+<p>These options can be also set globally, and then the <code>open</code> method can be called without options:</p>
+<ul><li>This solution can be used only for the TAU API (<strong>RECOMMENDED</strong>):
+
+<pre class="prettyprint">&lt;!--Element with no properties - popup is opened next to it in context style manually--&gt;
+&lt;div id=&quot;linkId&quot;&gt;Link for popup&lt;/div&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Set options
+&nbsp;&nbsp;&nbsp;var popupWidget = tau.widget.Popup(document.getElementById(&quot;popup&quot;));
+&nbsp;&nbsp;&nbsp;popupWidget.option({positionTo: &quot;origin&quot;, link: &quot;linkId&quot;}); // here we set positionTo and id of link, which sets placement of popup
+
+&nbsp;&nbsp;&nbsp;// Set opening popup on click event
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;linkId&quot;).addEventListener(&quot;click&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If options are set, call open method without options
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popupWidget.open();
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li>
+<li>For the jQuery API, the link ID must be always added as an option (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">&lt;!--Element with no properties - popup is opened next to it in context style manually--&gt;
+&lt;div id=&quot;linkId&quot;&gt;Link for popup&lt;/div&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Set positionTo option
+&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;option&quot;, &quot;positionTo&quot;, &quot;origin&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set opening popup on click event
+&nbsp;&nbsp;&nbsp;$(&quot;#linkId&quot;).on(&quot;click&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// For jQuery API, link has to be added as an option
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;open&quot;, {link: &quot;linkId&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li></ul>
+
+       <h2><a id="options-list"></a>Options</h2>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-close-link-selector</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&#39;a[data-rel=&quot;back&quot;]&#39;</td>
+                               <td class="option">Selector for the buttons in the popup.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-direction-priority</span></td>
+                               <td class="option">Array</td>
+                               <td class="option">&quot;bottom&quot;,&quot;top&quot;, &quot;right&quot;, &quot;left&quot;</td>
+                               <td class="option">Directions of the popup placement by priority. First one has the highest priority, last one the lowest.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-history</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the URL is altered when the popup is open to support the back button.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-position-to</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;origin&quot;</td>
+                               <td class="option">Element relative to which the popup is centered.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-shadow</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Sets whether a shadow is drawn around the popup.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-tolerance</span></td>
+                               <td class="option">Object</td>
+                               <td class="option">{t: 10, r: 10, b: 10, l: 10}</td>
+                               <td class="option">Minimum distance from the edge of the window for the corresponding edge of the popup.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-transition</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;pop&quot;</td>
+                               <td class="option">Default transition for the popup.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+       <h2><a id="events-list"></a>Events</h2>
+
+<p>To handle popup events, use the following code:</p>
+
+<pre class="prettyprint">&lt;!--Popup HTML code--&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Use popup events
+&nbsp;&nbsp;&nbsp;var popup = document.getElementById(&quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;popup.addEventListener(&quot;popupafteropen&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Implement code for popupafteropen event
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+
+       <h3>Summary</h3>
+       
+       <table>
+               <tbody>
+               <tr>
+                       <th>Name</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">popupafteropen</span></td>
+                               <td><p>Triggered when process of opening a popup is completed.<br />The event is triggered when the popup has completely appeared on the screen and all associated animations have completed.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">beforeposition</span></td>
+                               <td><p>Triggered before a popup computes the coordinates where it appears.<br />The event is triggered before the popup starts the opening animations and calculates the coordinates. Handling this event gives an opportunity to modify the content of the popup before it appears on the screen.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">popupafterclose</span></td>
+                               <td><p>Triggered when the process of closing a popup is completed.<br />The event is triggered when the popup has completely disappeared from the screen and all associated animations have completed.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">var popupElement = document.getElementById(&quot;popup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;popup = tau.widget.Popup(popupElement);
+
+popup.methodName(methodArgument1, methodArgument2, ...);
+</pre>
+
+</li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">$(&quot;.selector&quot;).popup(&quot;methodName&quot;, methodArgument1, methodArgument2, ...);
+</pre></li></ul>
+       
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+                               
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">* <a href="#method-option">option</a> ( string | Object? name, * value ) </pre>
+                                       </td>
+                                       <td><p>Gets and sets component options.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Popup <a href="#method-refresh">refresh</a> ( Object? options, number? options.positionX, number? options.positionY ) </pre>
+                                       </td>
+                                       <td><p>Refreshes the position of the opened popup.</p></td>
+                               </tr>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#opening-popup0.4268628491554409">Open</a> ( Object? options ) </pre>
+                                       </td>
+                                       <td><p>Opens the popup.</p></td>
+                               </tr>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#closing-popup0.4531055218540132">Close</a> ( Boolean immediate ) </pre>
+                                       </td>
+                                       <td><p>Closes the popup.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-setPositionCB">setPositionCB</a> ( Function callback ) </pre> - <i style="color:red">deprecated</i>
+                                       </td>
+                                       <td><p>Sets a callback, which is called on the <code>resize</code> event. This callback  is used to return the desired position of the popup after resizing.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-setPositionCallback">setPositionCallback</a> ( Function callback )</pre>
+                                       </td>
+                                       <td><p>Sets a callback, which is called on the <code>resize</code> event. This callback  is used to return the desired position of the popup after resizing.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-option">option</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets and sets component options.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">* option ( string | Object? name, * value) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method can work in many contexts:</p>
+       <ul><li>If first argument is of the object type, the method sets values for the options given in the object. The object keys are the names of the options and the values from the object are the values to set.</li>
+
+    <li>If you give only 1 string argument, the method returns the value for the given option.</li>
+
+    <li>If you give 2 arguments, and the first argument is a string, the second argument is interpreted as the value to set.</li></ul>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+                                               <td>string | Object</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>Name of the option.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+                                               <td>*</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Value to set.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>*</td>
+                                                                       <td>Return value of the option or undefined if method is used to set a value.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popupWidget = tau.widget.Popup(document.getElementById(&quot;popup&quot;)),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;optionValue;
+
+&nbsp;&nbsp;&nbsp;optionValue = popupWidget.option(&quot;positionTo&quot;); // Read positionTo value
+&nbsp;&nbsp;&nbsp;popupWidget.option(&quot;positionTo&quot;, &quot;window&quot;) // Set value
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;optionValue = $(&quot;#popup&quot;).popup(&quot;option&quot;, &quot;positionTo&quot;);
+&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;option&quot;, &quot;positionTo&quot;, &quot;window&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>
+Refreshes the position of the opened popup.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Popup refresh ( Object? options) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>In case of the context popup, the position of the arrow is not changed after calling this method. If the new position of the popup content causes disconnection from the arrow, the popup position is corrected automatically. Popup content is always set so that the arrow is placed between the left and right side of the popup container with a proper margin set in the <code>data-tolerance</code> option.</p>
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">options</span></td>
+                                               <td>Object</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>Options.</td>
+                                       </tr>
+                                       </tbody>
+                                       </table>
+
+                                       <div class="parameters">
+                                               <p>The <span style="font-family: Courier New,Courier,monospace">options</span> object contains the following values:</p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Name</th>
+                                               <th>Type</th>
+                                               <th>Description</th>
+                                       </tr>
+
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">options.positionX</span></td>
+                                               <td>number</td>
+                                               <td>Desired horizontal coordinate of the center point in the popup in pixels (it only works if both coordinates are set - top and left).</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">options.positionY</span></td>
+                                               <td>number</td>
+                                               <td>Desired vertical coordinate of the center point in the popup in pixels (it only works if both coordinates are set - top and left).</td>
+                                       </tr>
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Popup</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popupWidget = tau.widget.Popup(document.getElementById(&quot;popup&quot;));
+
+&nbsp;&nbsp;&nbsp;popupWidget.refresh(); // Only refresh original position
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;refresh&quot;, {top: 10, left: 10}); // Set new position for the center point of popup
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-setPositionCB">setPositionCB: <strong style="color:red">deprecated</strong></span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Sets a callback, which is called on the resize event. This callback is used to return the desired position of the popup after resizing.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">setPositionCB ( Function callback) </pre> 
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>This method is deprecated, and the <code>setPositionCallback</code> method must be used to set the callback.</p>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-setPositionCallback">setPositionCallback</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Sets a callback, which is called on the resize event. This callback is used to return the desired position of the popup after resizing.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">setPositionCallback ( Function callback) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>Use this method instead of the deprecated <code>setPositionCB</code>.</p>
+
+
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">callback</span></td>
+                                               <td>Function</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Method called on resizing. It is used to return the desired position of the popup as an object with the &quot;x&quot; and &quot;y&quot; properties.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popupWidget = tau.widget.Popup(document.getElementById(&quot;popup&quot;));
+
+&nbsp;&nbsp;&nbsp;popupWidget.setPositionCallback(function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {x: 10, y: 20};
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;setPositionCallback&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {x: 10, y: 20};
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+
+                       
+               
+       </dl>
+
+<h2><a id="opening-popup0.4268628491554409"></a>Opening a Popup</h2>
+
+<p>There are 2 ways to open a popup:</p>
+
+<ul><li>Open by clicking on a link:
+
+<ul><li><p>If the link has the <code>id</code> of the popup set as the value of the <code>href</code> property, the popup is opened after clicking on the link.</p>
+
+<pre class="prettyprint">&lt;!--Definition of link, which opens popup with popup id--&gt;
+&lt;a href=&quot;#popup&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li><p>Be aware that a context popup with an arrow is opened if the link has the <code>id</code> property and <code>data-position-to=&quot;origin&quot;</code> set as in this example:</p>
+
+<pre class="prettyprint">&lt;!--Definition of link, which opens context popup with popup id--&gt;
+&lt;a href=&quot;#popup&quot; id=&quot;linkId&quot; data-position-to=&quot;origin&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Click to open context popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li><p>To open a window popup, the <code>data-position-to=&quot;window&quot;</code> property must be set in the link or popup.</p>
+
+<pre class="prettyprint">&lt;!--Definition of link, which opens window popup with popup id--&gt;
+&lt;a href=&quot;#popup&quot; id=&quot;linkId&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+</pre></li></ul></li>
+
+<li>Open manually:
+<ul><li><p>To open a popup with the &quot;popup&quot; <code>id</code> property, the <code>tau</code> namespace can be used (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popupElement = document.getElementById(&quot;popup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup = tau.widget.Popup(popupElement);
+&nbsp;&nbsp;&nbsp;popup.open();
+&lt;/script&gt;
+</pre></li>
+
+<li><p>If the jQuery library is loaded, this method can be used (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popup = $(&quot;#popup&quot;).popup();
+&nbsp;&nbsp;&nbsp;popup.popup(&quot;open&quot;);
+&lt;/script&gt;
+</pre></li>
+
+<li><p>With the TAU API, you can open a popup anywhere (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;tau.openPopup(&quot;#popup&quot;);
+&lt;/script&gt;
+</pre></li></ul></li></ul>
+
+<h2><a id="closing-popup0.4531055218540132"></a>Closing a Popup</h2>
+
+<p>There are 2 ways to close a popup:</p>
+
+<ul><li>Close by clicking on a button inside:
+
+<p>If the link inside the popup has the <code>data-rel=&quot;back&quot;</code> property, the popup is closed after clicking on it:</p>
+
+<pre class="prettyprint">&lt;a href=&quot;#center_title_1btn&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;!--Definition of popup with a title and button--&gt;
+&lt;div id=&quot;center_title_1btn&quot; data-role=&quot;popup&quot; class=&quot;center_title_1btn&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-title&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Popup title&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-text&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pop-up dialog box, a child window that blocks user interaction to the parent windows
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-button-bg&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; data-rel=&quot;back&quot; data-inline=&quot;true&quot;&gt;Button&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The selector, which causes closing on click, can be changed by setting the <code>closeLinkSelector</code> option in the popup.</p></li>
+
+<li>Close manually:
+<ul><li><p>To close a popup with the &quot;popup&quot; <code>id</code> property, the <code>tau</code> namespace can be used (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;a href=&quot;#popup&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var popupElement = document.getElementById(&quot;popup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup = tau.widget.Popup(popupElement);
+&nbsp;&nbsp;&nbsp;// Close popup after opening
+&nbsp;&nbsp;&nbsp;popupElement.addEventListener(&quot;popupafteropen&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup.close();
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li>
+
+<li><p>If jQuery library is loaded, this method can be used (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;a href=&quot;#popup&quot; data-position-to=&quot;window&quot;&gt;Click to open popup&lt;/a&gt;
+&lt;div id=&quot;popup&quot; data-role=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).on(&quot;popupafteropen&quot;, function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#popup&quot;).popup(&quot;close&quot;);
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li>
+
+<li><p>With the TAU API, you can close a popup anywhere (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;This is a completely basic popup, no options set.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;tau.closePopup(&quot;#popup&quot;);
+&lt;/script&gt;
+</pre> </li></ul></li></ul>
+       
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Progress.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Progress.htm
new file mode 100644 (file)
index 0000000..ad67c22
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Progress.htm
@@ -0,0 +1,478 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Progress</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Progress</h1>
+
+<p>The progress component shows that an operation is in progress.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.9354383451864123">Default Selectors</a>
+
+               </li>
+       
+               <li><a href="#manual-constructor0.3267326701898128">Manual Constructor</a>
+                       
+               </li>
+               <li><a href="#html-examples0.866303835529834">HTML Examples</a>
+                                               </li>   
+               <li><a href="#options-for widget0.13800429017283022">Options</a>
+
+       
+               <li><a href="#methods0.7043644052464515">Methods</a>
+                       
+               </li>
+       
+       
+</ol>
+
+<h2><a id="default-selectors0.9354383451864123"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-role=&quot;progress&quot;</code> attribute are displayed as progress components.</p>
+
+
+
+<h2><a id="manual-constructor0.3267326701898128"></a>Manual Constructor</h2>
+
+<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress = tau.widget.Progress(element);
+&lt;/script&gt;
+</pre>
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples0.866303835529834"></a>HTML Examples</h2>
+
+<p>To create a simple progress component:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress&quot; data-role=&quot;progress&quot;&gt;&lt;/div&gt;
+</pre>
+
+<h2><a id="options-for widget0.13800429017283022"></a>Options</h2>
+
+<p>The options for a component can be defined as <code>data-...</code> attributes or passed as parameters to the constructor.</p>
+
+<p>You can change an option for the component using the <code>option</code> method.</p>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-running</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Sets whether the progress component is running.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-style</span></td>
+                               <td class="option">&quot;circle&quot; | &quot;pending&quot;</td>
+                               <td class="option">&quot;pending&quot;</td>
+                               <td class="option"><p>Object with the default options.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+<h2><a id="methods0.7043644052464515"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress = tau.widget.Progress(element);
+
+&nbsp;&nbsp;&nbsp;// progress.methodName(argument1, argument2, ...);
+&nbsp;&nbsp;&nbsp;// For example
+&nbsp;&nbsp;&nbsp;progress.show();
+&lt;/script&gt;
+</pre></li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress();
+
+&nbsp;&nbsp;&nbsp;// $(&quot;.selector&quot;).progress(&quot;methodName&quot;, argument1, argument2, ...);
+&nbsp;&nbsp;&nbsp;// For example
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;show&quot;);
+&lt;/script&gt;
+</pre>
+</li></ul>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-hide">hide</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Hides the component.</p></td>
+                               </tr>
+                       
+               
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Progress <a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes the progress.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-running">running</a> ( boolean flag ) </pre>
+                                       </td>
+                                       <td><p>Starts or stops running the progress.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-show">show</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Shows the component.</p></td>
+                               </tr>
+
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+               
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-hide">hide</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Hides the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">hide ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressWidget = tau.widget.Progress(element);
+&nbsp;&nbsp;&nbsp;progressWidget.hide();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress();
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;hide&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes the progress.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Progress refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+
+<p>The method rebuilds the DOM structure of the progress component. It must be called after you manually change the HTML attributes of the component&#39;s DOM structure.</p>
+
+<p>The method is called automatically after any component option is changed.</p>
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Progress</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+$(&quot;#progress&quot;).progress();
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressWidget = tau.widget.Progress(element);
+
+&nbsp;&nbsp;&nbsp;progressWidget.refresh();
+
+&nbsp;&nbsp;&nbsp;// Is also called after
+&nbsp;&nbsp;&nbsp;progressWidget.option(&quot;running&quot;, true);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress();
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-running">running</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Starts or stops running the progress.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">running ( boolean flag) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">flag</span></td>
+                                               <td>boolean</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>If <code>true</code>, the progress component is set to run.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               No return value
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressWidget = tau.widget.Progress(element),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return current state of running
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = progressWidget.running();
+
+&nbsp;&nbsp;&nbsp;progressWidget.running(true); // Starts running
+
+&nbsp;&nbsp;&nbsp;progressWidget.running(false); // Stops running
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress();
+
+&nbsp;&nbsp;&nbsp;// Return current state of running
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;running&quot;);
+
+&nbsp;&nbsp;&nbsp;// Starts running
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;running&quot;, true);
+
+&nbsp;&nbsp;&nbsp;// Stops running
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;running&quot;, false);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-show">show</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Shows the component.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">show ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressWidget = tau.widget.Progress(element);
+
+&nbsp;&nbsp;&nbsp;progressWidget.show();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress();
+&nbsp;&nbsp;&nbsp;$(&quot;#progress&quot;).progress(&quot;show&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ProgressBar.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ProgressBar.htm
new file mode 100644 (file)
index 0000000..870c9e2
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ProgressBar.htm
@@ -0,0 +1,392 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Progress Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Progress Bar</h1>
+
+<p>The progress bar component shows a control that indicates the progress percentage of an on-going operation.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.25044789374805987">Default Selectors</a>
+                       
+               
+               </li>
+       
+               <li><a href="#manual-constructor0.7840281431563199">Manual Constructor</a>
+                       
+               </li>
+               <li><a href="#html-examples0.9146406608633697">HTML Examples</a>
+                                               </li>   
+               <li><a href="#options-for widget0.958138655172661">Options</a>
+                       
+               </li>
+
+       
+               <li><a href="#events-list">Events</a>
+                       
+               </li>
+       
+               <li><a href="#methods0.09717508149333298">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+<h2><a id="default-selectors0.25044789374805987"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-role=&quot;progressbar&quot;</code> attribute are displayed as progress bars.
+
+
+
+<h2><a id="manual-constructor0.7840281431563199"></a>Manual Constructor</h2>
+
+<p>To manually create a progress bar component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = tau.widget.ProgressBar(element);
+&lt;/script&gt;
+</pre>
+
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress-bar&quot;).progressbar();
+&lt;/script&gt;
+</pre>
+
+<p>The jQuery constructor takes one optional parameter, which is an object defining the configuration options for the component.</p>
+
+<h2><a id="html-examples0.9146406608633697"></a>HTML Examples</h2>
+
+<p>To create a simple progress bar:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;progress-bar&quot; data-role=&quot;progressbar&quot;&gt;&lt;/div&gt;
+</pre>
+
+<h2><a id="options-for widget0.958138655172661"></a>Options</h2>
+
+<p>The options for a component can be defined as <code>data-...</code> attributes or passed as parameters to the constructor.</p>
+
+<p>You can change an option for the component using the <code>option</code> method.</p>
+
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-max</span></td>
+                               <td class="option">number</td>
+                               <td class="option">100</td>
+                               <td class="option">Maximum value of the progress bar.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-min</span></td>
+                               <td class="option">number</td>
+                               <td class="option">0</td>
+                               <td class="option">Minimum value of the progress bar.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-value</span></td>
+                               <td class="option">number</td>
+                               <td class="option">0</td>
+                               <td class="option">Current progress value.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+       <h2><a id="events-list"></a>Events</h2>
+<p>The following table lists the events related to the progress bar component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Event</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">change</span></td>
+                               <td><p>Triggered when the value of component changes.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">complete</span></td>
+                               <td><p>Triggered when the value of component reaches the maximum value.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+<h2><a id="methods0.09717508149333298"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = tau.widget.ProgressBar(element);
+
+&nbsp;&nbsp;&nbsp;progressBar.methodName(argument1, argument2, ...);
+&lt;/script&gt;
+</pre>
+
+</li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">$(&quot;.selector&quot;).progressbar(&quot;methodName&quot;, argument1, argument2, ...);
+</pre></li></ul>
+
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">ProgressBar <a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes a progress bar.</p></td>
+                               </tr>
+                       
+
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">number <a href="#method-value">value</a> ( number? value ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets a value.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes a progress bar.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">ProgressBar refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+<p>The method rebuilds the DOM structure of the progress bar component. It must be called after you manually change the HTML attributes of the component&#39;s DOM structure.</p>
+
+<p>The method is called automatically after any component option is changed.</p>
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>ProgressBar</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = tau.widget.ProgressBar(element);
+
+&nbsp;&nbsp;&nbsp;progressBarWidget.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress-bar&quot;).progressbar();
+&nbsp;&nbsp;&nbsp;$(&quot;#progress-bar&quot;).progressbar(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-value">value</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets a value.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">number value ( number? value) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.3
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>Returns the progress bar value or sets the value.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+                                               <td>number</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>New progress bar value.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>number</td>
+                                                                       <td>In the get mode, returns the current progress value.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;progress-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = tau.widget.ProgressBar(element),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Returns current value
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = progressBarWidget.value();
+
+&nbsp;&nbsp;&nbsp;progressBarWidget.value(30); // Sets new value to 30
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#progress-bar&quot;).progressbar();
+&nbsp;&nbsp;&nbsp;// Returns current value
+&nbsp;&nbsp;&nbsp;$(&quot;#progress-bar&quot;).progressbar(&quot;value&quot;);
+
+&nbsp;&nbsp;&nbsp;// Sets new value to 30
+&nbsp;&nbsp;&nbsp;$(&quot;#progress-bar&quot;).progressbar(&quot;value&quot;, 30);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ScrollHandler.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ScrollHandler.htm
new file mode 100644 (file)
index 0000000..e1cb598
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_ScrollHandler.htm
@@ -0,0 +1,461 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Scroll Handler</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Scroll Handler</h1>
+
+<p>The scroll handler component is an extension of the scroll view component, and it adds a scroll button that the user can grab (click) and drag for scrolling the page.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.7969826499465853">Default Selectors</a>
+
+               </li>
+       
+               <li><a href="#manual-constructor0.10807657078839839">Manual Constructor</a>
+                       
+                       
+               </li>
+               <li><a href="#html-examples0.10928850574418902">HTML Examples</a>
+                                               </li>   
+               <li><a href="#options-for scrollhandler0.7957050383556634">Options</a>
+                       
+               </li>
+               <li><a href="#events-list">Events</a>
+                       
+               </li>
+       
+               <li><a href="#methods-list">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+
+
+<h2><a id="default-selectors0.7969826499465853"></a>Default Selectors</h2>
+
+<p>By default, all elements with the <code>data-handler=&quot;true&quot;</code> attribute are displayed as with a scroll handler.</p>
+
+
+
+<h2><a id="manual-constructor0.10807657078839839"></a>Manual Constructor</h2>
+
+<p>To manually create a scroll view with a scroll handler component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+<ul><li><p>ScrollHandler need to set after page component created completely because it has dependency for the page component.</p></li></ul>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var myPage = document.getElementById(&quot;myPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerElement = myPage.querySelector(&quot;[data-role=content]&quot;);
+
+&nbsp;&nbsp;&nbsp;myPage.addEventListener(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.ScrollHandler(handlerElement);
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#myPage&quot;).on(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#myPage &gt; div[data-role=content]&quot;).scrollhandler();
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples0.10928850574418902"></a>HTML Examples</h2>
+
+<ul><li>To create a scroll view with a scroll handler using <code>data-handler</code> attribute:
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page content
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+</ul>
+
+<h2><a id="options-for scrollhandler0.7957050383556634"></a>Options</h2>
+
+<p>The options for a component can be defined as <code>data-...</code> attributes or passed as parameters to the constructor.</p>
+
+<p>You can change an option for the component using the <code>option</code> method.</p>
+
+       <h3>Summary</h3>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-direction</span></td>
+                               <td class="option">&quot;x&quot; | &quot;y&quot;</td>
+                               <td class="option">&quot;y&quot;</td>
+                               <td class="option">Direction of the handler.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-handler</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Sets whether the scroll handler is enabled.</td>
+                       </tr>
+               
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-scroll</span></td>
+                               <td class="option">&quot;x&quot; | &quot;y&quot; | &quot;xy&quot;</td>
+                               <td class="option">&quot;y&quot;</td>
+                               <td class="option">Scrolling direction.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+<h3><a id='enable-handler0.45613842247985303'></a>Enabling the Handler</h3>
+
+<p>You can enable the scroll handler:
+<ul><li>With the <code>data-handler</code> option
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>By passing an object to the constructor (<strong>RECOMMENDED</strong>):
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var myPage = document.getElementById(&quot;myPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerElement = myPage.querySelector(&quot;[data-role=content]&quot;);
+
+&nbsp;&nbsp;&nbsp;myPage.addEventListener(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.ScrollHandler(handlerElement, {&quot;handler&quot;: true});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li>
+
+<li>By using the jQuery API (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#myPage&quot;).on(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#myPage &gt; div[data-role=content]&quot;).scrollhandler({&quot;handler&quot;: true});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li></ul>
+
+
+<h3><a id='direction0.8810285644140095'></a>Handler Direction</h3>
+
+<p>You can set the direction in which the handler is presented. The default value (&quot;y&quot;) means a vertical scroll button.</p>
+
+<p>You can set the direction:
+<ul><li>With the <code>data-direction</code> option
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; data-direction=&quot;y&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>By passing an object to the constructor (<strong>RECOMMENDED</strong>):
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var myPage = document.getElementById(&quot;myPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerElement = myPage.querySelector(&quot;[data-role=content]&quot;);
+
+&nbsp;&nbsp;&nbsp;myPage.addEventListener(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.ScrollHandler(handlerElement, {&quot;scroll&quot;: &quot;y&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li>
+
+<li>By using the jQuery API (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#myPage&quot;).on(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#myPage &gt; div[data-role=content]&quot;).scrollhandler({&quot;scroll&quot;: &quot;y&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li></ul>
+
+<h3><a id='scroll0.46974580734968185'></a>Scrolling Direction</h3>
+
+<p>You can set the direction to which the handler scrolls. The default value (&quot;y&quot;) means vertical.</p>
+
+<p>You can set the direction:
+<ul><li>With the <code>data-scroll</code> option
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; data-scroll=&quot;x&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>By passing an object to the constructor (<strong>RECOMMENDED</strong>):
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var myPage = document.getElementById(&quot;myPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerElement = myPage.querySelector(&quot;[data-role=content]&quot;);
+
+&nbsp;&nbsp;&nbsp;myPage.addEventListener(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.ScrollHandler(handlerElement, {&quot;scroll&quot;: &quot;x&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li>
+
+<li>By using the jQuery API (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#myPage&quot;).on(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#myPage &gt; div[data-role=content]&quot;).scrollhandler({&quot;scroll&quot;: &quot;x&quot;});
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></li></ul>
+
+<h2><a id="events-list"></a>Events</h2>
+
+       <p>The following table lists the events related to the scroll handler component.
+       <h3>Summary</h3>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Name</th>
+                       <th>Description</th>
+               </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">scrollstart</span></td>
+                               <td><p>Triggered when the scrolling operation starts.
+</p></td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">scrollupdate</span></td>
+                               <td><p>Triggered when the scroll is being updated.</p></td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">scrollstop</span></td>
+                               <td><p>Triggered when the scrolling stops.</p></td>
+                       </tr>
+
+               </tbody>
+       </table>
+
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">boolean <a href="#method-enableHandler">enableHandler</a> ( boolean enable ) </pre>
+                                       </td>
+                                       <td><p>Enables or disables the handler.</p></td>
+                               </tr>
+                       
+       
+               </tbody>
+       </table>
+       <dl>
+               
+       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enableHandler">enableHandler</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables or disables the handler.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">boolean enableHandler ( boolean enable) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">enable</span></td>
+                                               <td>boolean</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>boolean</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var myPage = document.getElementById(&quot;myPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerElement = myPage.querySelector(&quot;[data-role=content]&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollhandler;
+
+&nbsp;&nbsp;&nbsp;myPage.addEventListener(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.ScrollHandler(handlerElement);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollhandler.enableHandler(true);
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;page&quot; id=&quot;myPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagecontent
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;#(&quot;#myPage &gt; div[data-role=content]&quot;).scrollhandler(&quot;enableHandler&quot;, true);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SearchBar.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SearchBar.htm
new file mode 100644 (file)
index 0000000..1f32cc4
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SearchBar.htm
@@ -0,0 +1,568 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Search Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<h1>Search Bar</h1>
+
+<p>The search bar component is used to search for page content. It can be placed in the header or within the page content.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.5337990545667708">Default Selectors</a>
+                       
+               </li>
+       
+               <li><a href="#manual-constructor0.7136435771826655">Manual Constructor</a>
+                       
+               </li>
+       
+       <li><a href="#html-examples0.6614409978501499">HTML Examples</a>
+                                               </li>
+       
+
+       
+               <li><a href="#options-list">Options</a>
+                       
+               </li>
+
+               <li><a href="#methods0.952881425851956">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+
+
+<h2><a id="default-selectors0.5337990545667708"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;input&gt;</code> elements with the <code>type=&quot;search&quot;</code> or <code>type=&quot;tizen-search&quot;</code> attribute are displayed as search bars. In addition, all elements with the <code>data-type=&quot;search&quot;</code>, <code>data-type=&quot;tizen-search&quot;</code>, or <code>class=&quot;ui-searchbar&quot;</code> attribute are displayed as search bars.</p>
+
+
+
+<h2><a id="manual-constructor0.7136435771826655"></a>Manual Constructor</h2>
+
+<p>To manually create a search bar component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;search-bar-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;search-bar&quot;&gt;Search Input:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input name=&quot;search&quot; id=&quot;search-bar&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;search-bar-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&gt;Hairston&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Hansbrough&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Allred&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Hanrahan&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Egan&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Dare&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function (document) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var inputElement = document.getElementById(&quot;search-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentElement = document.getElementById(&quot;search-bar-content&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentChildren = contentElement.getElementsByTagName(&quot;li&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentChildrenLength = contentChildren.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageElement = document.getElementById(&quot;search-bar-page&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBar;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function changeHandle(event) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var i,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childText,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = searchBar.value();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; contentChildrenLength; 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;child = contentChildren.item(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childText = child.textContent.toLowerCase();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!value || ~childText.indexOf(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;child.style.display = &quot;block&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child.style.display = &quot;none&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;function createPageHandle() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBar = tau.widget.SearchBar(inputElement, {icon: &quot;call&quot;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBar.on(&quot;change keyup&quot;, changeHandle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageElement.addEventListener(&quot;pagecreate&quot;, createPageHandle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}(document));
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;search-bar-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;search-bar&quot;&gt;Search Input:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input name=&quot;search&quot; id=&quot;search-bar&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;search-bar-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&gt;Hairston&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Hansbrough&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Allred&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Hanrahan&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Egan&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Dare&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function (document) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var inputElement = document.getElementById(&quot;search-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentElement = document.getElementById(&quot;search-bar-content&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentChildren = contentElement.getElementsByTagName(&quot;li&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentChildrenLength = contentChildren.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageElement = document.getElementById(&quot;search-bar-page&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function changeHandle(event) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var i,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childText,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = inputElement.value;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; contentChildrenLength; 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;child = contentChildren.item(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childText = child.textContent.toLowerCase();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!value || ~childText.indexOf(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;child.style.display = &quot;block&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child.style.display = &quot;none&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;function createPageHandle() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#search-bar&quot;).searchbar(inputElement, {icon: &quot;call&quot;}).on(&quot;change keyup&quot;, changeHandle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#search-bar-page&quot;).on(&quot;pagecreate&quot;, createPageHandle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}(document));
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="html-examples0.6614409978501499"></a>HTML Examples</h2>
+
+<p>To create a search bar in the header:</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;search-bar-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;search-bar&quot;&gt;Search Input:&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;search-bar&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;search-bar-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&gt;Hairston&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Hansbrough&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Allred&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Hanrahan&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Egan&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Dare&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function (document) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var inputElement = document.getElementById(&quot;search-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentElement = document.getElementById(&quot;search-bar-content&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentChildren = contentElement.getElementsByTagName(&quot;li&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentChildrenLength = contentChildren.length;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function changeHandle(event) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var i,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childText,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = inputElement.value;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; contentChildrenLength; 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;child = contentChildren.item(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childText = child.textContent.toLowerCase();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!value || ~childText.indexOf(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;child.style.display = &quot;block&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child.style.display = &quot;none&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;inputElement.addEventListener(&quot;change&quot;, changeHandle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inputElement.addEventListener(&quot;keyup&quot;, changeHandle);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}(document));
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+
+       <h2><a id="options-list"></a>Options</h2>
+<p>The following table lists the options for the search bar component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-cancel-btn</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the cancel button is shown.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-icon</span></td>
+                               <td class="option">string | null</td>
+                               <td class="option">null</td>
+                               <td class="option">Icon type on the action button.<br/>
+                               Possible values are the same as in the <a href="ns_widget_mobile_Button.htm">button component.</a> If the option is not set, the action button is not shown.</td>
+                       </tr>
+
+               
+               </tbody>
+       </table>
+
+<h2><a id="methods0.952881425851956"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var searchBarElement = document.getElementById(&#39;search-bar&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBar = tau.widget.SearchBar(searchBarElement);
+
+&nbsp;&nbsp;&nbsp;searchBar.methodName(methodArgument1, methodArgument2, ...);
+&lt;/script&gt;
+</pre></li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;.selector&quot;).searchbar(&#39;methodName&#39;, methodArgument1, methodArgument2, ...);
+&lt;/script&gt;
+</pre></li></ul>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+       
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">SearchBar <a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the search bar.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">SearchBar <a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the search bar.</p></td>
+                               </tr>
+                       
+               
+                       
+       
+
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string <a href="#method-value">value</a> ( string? value ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets an input text value.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the search bar.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">SearchBar disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method sets the disabled attribute for the search bar and changes the look of the search bar to the disabled state.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>SearchBar</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;searchbar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBarWidget = tau.widget.SearchBar(element);
+&nbsp;&nbsp;&nbsp;searchBarWidget.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#searchbar&quot;).searchbar(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the search bar.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">SearchBar enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method removes the disabled attribute from the search bar and changes the look of the search bar to the enabled state.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>SearchBar</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;searchbar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBarWidget = tau.widget.SearchBar(element);
+&nbsp;&nbsp;&nbsp;searchBarWidget.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#searchbar&quot;).searchbar(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+
+               
+                       
+       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-value">value</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets an input text value.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">string value ( string? value) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.3
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>If you call the method with a parameter, it is set as the new input text value. Otherwise, the method returns the input text value.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+                                               <td>string</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td>New input text value.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>string</td>
+                                                                       <td>In the get mode, returns the input text value.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+var searchBarElement = document.getElementById(&quot;searchbar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;searchBarWidget = tau.widget.SearchBar(searchBarElement),
+&nbsp;&nbsp;&nbsp;&nbsp;value = searchBarWidget.value();
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+// Value contains the input text
+$(&quot;#searchbar&quot;).searchbar(&quot;value&quot;);
+    
+// &quot;New text&quot; is the new input value
+$(&quot;#searchbar&quot;).searchbar(&quot;value&quot;, &quot;New text&quot;);   
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SelectMenu.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SelectMenu.htm
new file mode 100644 (file)
index 0000000..20f5245
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_SelectMenu.htm
@@ -0,0 +1,331 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Select Menu</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Select Menu</h1>
+
+<p>The select menu component allows you to create the component in the form of a drop-down list and manage its operation.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.3.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selector">Default Selector</a>
+
+               </li>
+       
+               <li><a href="#manual-constructor">Manual Constructor</a>
+                       
+               </li>
+
+               <li><a href="#html-examples">HTML Examples</a>
+
+                       
+               </li>
+       
+               
+               <li><a href="#options-list">Options</a>
+                       
+               </li>
+       
+               <li><a href="#methods">Methods</a>
+                       
+               </li>
+       
+               
+       
+</ol>
+
+<h2><a id="default-selector"></a>Default Selector</h2>
+
+<p>By default, all <code>&lt;select&gt;</code> elements are displayed as Tizen Web UI SelectMenu components. The <code>data-native-menu=&quot;false&quot;</code> attribute uses a custom drop-down list to select options.</p>
+
+
+
+<h2><a id="manual-constructor"></a>Manual Constructor</h2>
+
+<p>To manually create a select menu component, use the component constructor:</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&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);
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples"></a>HTML Examples</h2>
+
+<ul><li>Creating a select menu
+<p>The default value of the <code>data-native-menu</code> attribute is <code>true</code> and it creates a native SelectMenu. You can create a custom SelectMenu by setting the attribute to <code>false</code>.</p>
+
+<pre class="prettyprint">&lt;select 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&gt;
+</pre></li>
+
+<li>Setting the label type
+
+<p>You can declare the SelectMenu type manually. If you set the <code>data-label</code> attribute to <code>true</code> (default is <code>false</code>), the select menu has a label type. The size of the label type is inherited by its parent element.</p>
+
+<pre class="prettyprint">&lt;div style=&quot;width:300px; height:150px;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;select id=&quot;selectmenu&quot; data-native-menu=&quot;false&quot; data-label=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&quot;1&quot;&gt;Item1&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&quot;2&quot;&gt;Item2&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&quot;3&quot;&gt;Item3&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&quot;4&quot;&gt;Item4&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;/select&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>Setting the inline type
+
+<p>When the <code>data-inline</code> attribute is set to <code>true</code>, the select menu width is determined by its text (default is <code>false</code>).</p>
+
+<pre class="prettyprint">&lt;select id=&quot;selectmenu&quot; data-native-menu=&quot;false&quot; data-inline=&quot;true&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&gt;
+</pre></li>
+
+<li>Using placeholder options
+
+<p>If you use the <code>&lt;option&gt;</code> element with the <code>data-placeholder=&quot;true&quot;</code> attribute, you can make a default placeholder. The default value of the <code>data-hide-placeholder-menu-items</code> attribute is <code>true</code>, and it hides the <code>data-placeholder</code> option. To keep the option visible, use the <code>data-hide-placeholder-menu-items=&quot;false&quot;</code> attribute.</p>
+
+<pre class="prettyprint">&lt;select id=&quot;selectmenu&quot; data-native-menu=&quot;false&quot; data-hide-placeholder-menu-items=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option value=&quot;choose-one&quot; data-placeholder=&quot;true&quot;&gt;Choose an option&lt;/option&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&gt;
+</pre></li></ul>
+
+       <h2><a id="options-list"></a>Options</h2>
+
+       <p>The following table lists the options for the select menu component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-native-menu</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Sets whether the select menu component is of a native or custom type.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-hide-placeholder-menu-items</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Hides or reveals the placeholder option in the drop-down list of the select menu.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inline</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the select menu component is of an inline or normal type.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-label</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the select menu component is of a label or normal type.</td>
+                       </tr>
+               
+                       
+               
+               </tbody>
+       </table>
+
+<h2><a id="methods"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li>TAU API (<strong>RECOMMENDED</strong>):
+
+<pre class="prettyprint">var element = document.getElementById(&quot;selectmenu&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;widget = tau.widget.SelectMenu(element);
+widget.methodName(methodArgument1, methodArgument2, ...);
+</pre></li>
+
+<li>jQuery API (<strong>support for backward compatibility</strong>):
+
+<pre class="prettyprint">$(&quot;.selector&quot;).selectmenu(&quot;methodName&quot;, methodArgument1, methodArgument2, ...);
+</pre></li></ul>
+
+       
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-open">open</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Opens the select menu.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-close">close</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Closes the select menu.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+                       
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-open">open</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Opens the select menu.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">open ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                               <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                               <pre name="code" class="examplecode
+                                                       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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var elSelectMenu = document.getElementById(&quot;selectmenu&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget = tau.widget.SelectMenu(elSelectMenu);
+&nbsp;&nbsp;&nbsp;widget.open();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-close">close</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Closes the select menu.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">close ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       <div class="example">
+                                               <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                               <pre name="code" class="examplecode
+                                                       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&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var elSelectMenu = document.getElementById(&quot;selectmenu&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget = tau.widget.SelectMenu(elSelectMenu);
+&nbsp;&nbsp;&nbsp;widget.close();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+       </dl>
+       
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Slider.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Slider.htm
new file mode 100644 (file)
index 0000000..f721b3d
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Slider.htm
@@ -0,0 +1,530 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Slider</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Slider</h1>
+
+<p>The slider component changes the range-type browser input to sliders.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.42985791829414666">Default Selectors</a>
+                       
+               </li>
+       
+               <li><a href="#manual-constructor0.6728984923101962">Manual Constructor</a>
+                       
+               </li>
+       
+               <li><a href="#html-examples0.5146947458852082">HTML Examples</a>
+                                               </li>
+       
+               <li><a href="#options-list">Options</a>
+                       
+               </li>
+
+               <li><a href="#methods0.2250751326791942">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+<h2><a id="default-selectors0.42985791829414666"></a>Default Selectors</h2>
+
+<p>By default, all <code>&lt;input&gt;</code> elements with the <code>type=&quot;range&quot;</code> attribute and <code>data-type=&quot;range&quot;</code> and <code>data-role=&quot;slider&quot;</code> are displayed as Tizen Web UI sliders.</p>
+
+
+
+<h2><a id="manual-constructor0.6728984923101962"></a>Manual Constructor</h2>
+
+<p>To manually create a slider component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;input id=&quot;slider&quot;&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var sliderElement = document.getElementById(&quot;slider&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slider = tau.widget.TizenSlider(sliderElement);
+&lt;/script&gt;
+</pre>
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;input id=&quot;slider&quot;&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#slider&quot;).slider();
+&lt;/script&gt;
+</pre>
+
+
+<h2><a id="html-examples0.5146947458852082"></a>HTML Examples</h2>
+
+<p>To create slider input:</p>
+
+<pre class="prettyprint">&lt;input type=&quot;range&quot; name=&quot;slider-1&quot; id=&quot;slider&quot; value=&quot;60&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+</pre>
+
+       <h2><a id="options-list"></a>Options</h2>
+    <p>The following table lists the options for the slider component.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-center</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether additional markup is created for pointing to the center of the slider.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-icon</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;&quot;</td>
+                               <td class="option">Icon type.</td>
+                       </tr>
+                       
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inner-label</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Displays the value inside the handler.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-popup</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Sets whether the pop-up is enabled.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-text-left</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;&quot;</td>
+                               <td class="option">Text attached to the left of the slider.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-text-right</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;&quot;</td>
+                               <td class="option">Text attached to the right of the slider.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+
+
+<h2><a id="methods0.2250751326791942"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;input id=&quot;slider&quot; type=&quot;range&quot; name=&quot;slider&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;60&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var slider = document.getElementById(&quot;slider&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slider = tau.widget.TizenSlider(slider);
+
+&nbsp;&nbsp;&nbsp;// slider.methodName(methodArgument1, methodArgument2, ...);
+&nbsp;&nbsp;&nbsp;// For example
+&nbsp;&nbsp;&nbsp;var value = slider.value(&quot;5&quot;);
+&lt;/script&gt;
+</pre></li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;input id=&quot;slider&quot; type=&quot;range&quot; name=&quot;slider&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;60&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// $(&quot;#slider&quot;).TizenSlider(&quot;methodName&quot;, argument1, argument2, ...);
+&nbsp;&nbsp;&nbsp;// For example
+&nbsp;&nbsp;&nbsp;$(&quot;#slider&quot;).slider(&quot;value&quot;, &quot;5&quot;);
+&lt;/script&gt;
+</pre></li></ul>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Slider <a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the slider.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Slider <a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the slider.</p></td>
+                               </tr>
+                       
+               
+                       
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Slider <a href="#method-refresh">refresh</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Refreshes a slider markup.</p></td>
+                               </tr>
+                       
+               
+
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string <a href="#method-value">value</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Gets or sets a value.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the slider.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Slider disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method sets the disabled attribute for the slider and changes the look of the slider to the disabled state.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Slider</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var slider = document.getElementById(&quot;mySlider1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderWidget = tau.widget.TizenSlider(slider);
+&nbsp;&nbsp;&nbsp;sliderWidget.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#mySlider1&quot;).slider(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the slider.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Slider enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method removes the disabled attribute from the slider and changes the look of the slider to the enabled state.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Slider</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var slider = document.getElementById(&quot;mySlider1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderWidget = tau.widget.TizenSlider(slider);
+&nbsp;&nbsp;&nbsp;sliderWidget.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#mySlider1&quot;).slider(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+
+       
+                       
+               
+                       
+       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Refreshes a slider markup.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Slider refresh ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method rebuilds the DOM structure of the slider component. It must be called after you manually change the HTML attributes of the component&#39;s DOM structure.</p>
+
+<p>The method is called automatically after any component option is changed.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Slider</td>
+                                                                       <td>Returns this.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var slider = document.getElementById(&quot;mySlider1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderWidget = tau.widget.TizenSlider(slider);
+&nbsp;&nbsp;&nbsp;sliderWidget.refresh();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#mySlider1&quot;).slider(&quot;refresh&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-value">value</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets or sets a value.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">string value ( ) </pre>
+                                       </div>
+                                       
+                                               <p><span class="version">Since: </span>
+                                                       2.3
+                                               </p>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method returns the element value or sets the element value.</p>
+
+
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>string</td>
+                                                                       <td>In the get mode, returns the element value.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var slider = document.getElementById(&quot;mySlider1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderWidget = tau.widget.TizenSlider(slider);
+&nbsp;&nbsp;&nbsp;// Value contains index of select tag
+&nbsp;&nbsp;&nbsp;value = sliderWidget.value();
+&nbsp;&nbsp;&nbsp;// Sets the index for the slider
+&nbsp;&nbsp;&nbsp;sliderWidget.value(&quot;1&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;input id=&quot;mySlider1&quot; name=&quot;mySlider1&quot; data-popup=&#39;false&#39; type=&quot;range&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Value contains index of select tag
+&nbsp;&nbsp;&nbsp;$(&quot;#mySlider1&quot;).slider(&quot;value&quot;);
+&nbsp;&nbsp;&nbsp;// Sets the index for the slider
+&nbsp;&nbsp;&nbsp;$(&quot;#mySlider1&quot;).slider(&quot;value&quot;, &quot;1&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Swipe.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Swipe.htm
new file mode 100644 (file)
index 0000000..3b22c04
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Swipe.htm
@@ -0,0 +1,413 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Swipe</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<h1>Swipe</h1>
+
+<p>The swipe component shows a list view on the screen where the list items can be swiped vertically to show a menu.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.22067294060252607">Default Selectors</a>
+               
+               </li>
+               <li><a href="#menu-examples0.3870438882149756">Manual Constructor</a></li>
+               <li><a href="#html-examples0.3870438882149756">HTML Examples</a>
+                                               </li>
+               <li><a href="#method-examples">Methods</a></li>
+               <li><a href="#opening-examples">Opening the Swipe component</a></li>
+
+       
+</ol>
+
+<h2><a id="default-selectors0.22067294060252607"></a>Default Selectors</h2>
+
+<p>By default, all HTML elements with the <code>data-role=&quot;swipe&quot;</code> attribute are displayed as swipes.</p>
+
+
+
+<h2><a id="menu-examples0.3870438882149756"></a>Manual Constructor</h2>
+<p>To manually create a swipe component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+<pre class="prettyprint">
+&lt;div id=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cover - swipe to open
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var swipeElement = document.getElementById(&quot;swipe&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipe = tau.widget.Swipe(swipeElement);
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">
+&lt;div id=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cover - swipe to open
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var swipe = $(&quot;#swipe&quot;).swipe();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples0.3870438882149756"></a>HTML Examples</h2>
+
+<p>To create a swipe component using the <code>data-role</code> attribute with one covered item:</p>
+
+<pre class="prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cover - swipe to open
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+<h2><a id="method-examples"></a>Methods</h2>
+<p>To call a method on the component, use one of the existing APIs:</p>
+
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">
+var swipeElement = document.getElementById(&quot;swipe&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;swipe = tau.widget.Swipe(swipeElement);
+swipe.methodName(methodArgument1, methodArgument2, ...);
+</pre></li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">
+$(&quot;.selector&quot;).swipe(&quot;methodName&quot;, methodArgument1, methodArgument2, ...);
+</pre></li></ul>
+
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-open">open</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Runs opening animations.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">boolean <a href="#method-opened">opened</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Checks whether a swipe element is opened.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-close">close</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Runs closing animations.</p></td>
+                               </tr>
+                       
+               
+                       
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+                               
+                       
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-open">open</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Runs opening animations.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">open ( ) </pre>
+                                       </div>
+                                                                               
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swipe
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Second item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var swipeWidget = tau.widget.Swipe(document.getElementById(&quot;swipe&quot;));
+&nbsp;&nbsp;&nbsp;swipeWidget.open();
+&lt;script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div  id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swipe
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Second item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#swipe&quot;).swipe(&quot;open&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-opened">opened</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Checks whether a swipe element is opened.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">boolean opened ( ) </pre>
+                                       </div>
+
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>boolean</td>
+                                                                       <td>True, if the swipe element is opened.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swipe
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Second item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var swipeWidget = tau.widget.Swipe(document.getElementById(&quot;swipe&quot;));
+&nbsp;&nbsp;&nbsp;isOpened = swipeWidget.opened();
+&lt;script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div  id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swipe
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Second item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var isOpened = $(&quot;#swipe&quot;).swipe(&quot;opened&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-close">close</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Runs closing animations.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">close ( ) </pre>
+                                       </div>
+
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swipe
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Second item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var swipeWidget = tau.widget.Swipe(document.getElementById(&quot;swipe&quot;));
+&nbsp;&nbsp;&nbsp;swipeWidget.close();
+&lt;script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swipe
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Second item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#swipe&quot;).swipe(&quot;close&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               
+               
+               </dl>
+
+
+<h2><a id="opening-examples"></a>Opening the Swipe component</h2>
+<p>There are 3 ways to open swipe component (uncover the items of the component):</p>
+<ul><li>Open by swiping over an element:
+<pre class="prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cover - swipe to open
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+
+<li>Open manually by using the <code>open</code> method with the TAU API (<strong>RECOMMENDED</strong>):
+<pre class="prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cover - swipe to open
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var swipeWidget = tau.widget.Swipe(document.getElementById(&quot;swipe&quot;));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeWidget.open();
+&lt;script&gt;
+</pre></li>
+
+<li>Open manually by using the jQuery API (<strong>support for backward compatibility</strong>):
+<pre class="prettyprint">
+&lt;div id=&quot;swipe&quot; data-role=&quot;swipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item-cover&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cover - swipe to open
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;swipe-item&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;First item&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#swipe&quot;).swipe(&quot;open&quot;);
+&lt;script&gt;
+</pre></li></ul>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm
new file mode 100644 (file)
index 0000000..e508100
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm
@@ -0,0 +1,258 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Tab Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Tab Bar</h1>
+
+<p>The tab bar component shows an unordered list of buttons on the screen wrapped together in a single group. It can be placed in the header or footer of the page.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.0.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#default-selectors0.14516900992020965">Default Selectors</a>
+
+                       
+               </li>
+       
+               <li><a href="#manual-constructor0.69354601460509">Manual Constructor</a>
+                       
+               </li>
+               <li><a href="#options">Options</a>
+
+               </li>
+
+               <li><a href="#basic">Creating a Basic Tab Bar</a>
+                                               </li>
+
+               <li><a href="#multi">Creating a Tab Bar with MultiPages</a>
+                                               </li>
+
+       
+</ol>
+
+
+
+<h2><a id="default-selectors0.14516900992020965"></a>Default Selectors</h2>
+
+<p>By default, all HTML elements with the <code>data-role=&quot;tabbar&quot;</code> attribute are displayed as tab bars.</p>
+
+<h2><a id="manual-constructor0.69354601460509"></a>Manual Constructor</h2>
+
+<p>To manually create a tab bar component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;tab-bar-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ready-for-tab-bar&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;#&quot;&gt;Tabbar1&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;Tabbar2&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;Tabbar3&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;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;(function (document) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var pageElement = document.getElementById(&quot;tab-bar-page&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabBarElement = document.getElementById(&quot;ready-for-tab-bar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabBar;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function createPageHandle() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabBar = tau.widget.TabBar(tabBarElement);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageElement.addEventListener(&quot;pagecreate&quot;, createPageHandle);
+&nbsp;&nbsp;&nbsp;}(document));
+&lt;/script&gt;
+</pre>
+
+<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot; id=&quot;ab-bar-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ready-for-tab-bar&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;#&quot;&gt;Tabbar1&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;Tabbar2&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;Tabbar3&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;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;(function (document) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function createPageHandle() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#ready-for-tab-bar&quot;).tabbar();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#tab-bar-page&quot;).on(&quot;pagecreate&quot;, createPageHandle);
+&nbsp;&nbsp;&nbsp;}(document));
+&lt;/script&gt;
+</pre>
+
+<h2><a id="options"></a>Options</h2>
+
+
+<p>The following table lists the options for the tab bar component.</p>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-auto-change</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">If &quot;true&quot;, the component automatically changes the active status of the tab when the user clicks the tab.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-active</span></td>
+                               <td class="option">number</td>
+                               <td class="option">0</td>
+                               <td class="option">Sets the default active tab.</td>
+                       </tr>
+
+               </tbody>
+       </table>
+
+
+<h2><a id="basic"></a>Creating a Basic Tab Bar</h2>
+<p>A basic tab bar is for users who want a tab bar for one page.</p>
+<p>Basically, the page has one tab bar, and when the user clicks the tab, only the content area is changed. Clicking a tab never changes the entire page.</p>
+
+
+<ul><li>To create a simple tab bar in the header:
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&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;#&quot;&gt;Tabbar1&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;Tabbar2&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;Tabbar3&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;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li>To create a simple tab bar in the footer:
+
+<pre class="prettyprint">&lt;div data-role=&quot;page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&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;#&quot;&gt;Tabbar1&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;Tabbar2&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;Tabbar3&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&gt;
+</pre></li></ul>
+
+<h2><a id="multi"></a>Creating a Tab Bar with MultiPages</h2>
+
+<p>To create a tab bar for multiple pages (where clicking a tab changes the entire page), the <code>data-auto-change</code> option must be <code>&quot;false&quot;</code> and you must use the <code>&quot;ui-btn-active&quot;</code> class for each tab:
+
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-tabbar&quot; data-auto-change=&quot;false&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;#first&quot; class=&quot;ui-btn-active&quot;&gt;First&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;#second&quot;&gt;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;#third&quot;&gt;Third&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;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First page
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-tabbar&quot; data-auto-change=&quot;false&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;#first&quot;&gt;First&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;#second&quot; class=&quot;ui-btn-active&quot;&gt;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;#third&quot;&gt;Third&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;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Second page
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;third&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-tabbar&quot; data-auto-change=&quot;false&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;#first&quot;&gt;First&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;#second&quot;&gt;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;#third&quot; class=&quot;ui-btn-active&quot;&gt;Third&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;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Third page
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Tokentextarea.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Tokentextarea.htm
new file mode 100644 (file)
index 0000000..4ce3230
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Tokentextarea.htm
@@ -0,0 +1,960 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Token Text Area</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Token Text Area</h1>
+
+<p>The token text area component changes a text item to a button. When the user types text and the text gets a specific event to change from a text to a button, the input text is changed to a token text area component.</p>
+
+<p>A typical use of this component is to display a number of contacts or phone numbers in a specific area of the screen. When the user to enters text, it is converted to a button, and each button created from entered text forms a token text area component. This component is useful in composing an e-mail or SMS message to a group of addresses, each of which is a clickable item for more actions, such as copying, editing, or removing the address.</p>
+
+<table class="note">
+       <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This component is supported since Tizen 2.0.</td>
+               </tr>
+       </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               
+       
+               <li><a href="#manual-constructor0.8876081134658307">Manual Constructor</a>
+                       
+                       
+               </li>
+       <li><a href="#html-examples0.6324649443849921">HTML Examples</a>
+                       
+               </li>
+               <li><a href="#options-for tokentextarea widget0.2150889951735735">Options</a>
+               
+               </li>
+
+                       
+               <li><a href="#methods0.8635833316948265">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+<h2>Default Selectors</h2>
+
+<p>By default, all the <code>&lt;div&gt;</code> elements with the <code>data-role=&quot;tokentextarea&quot;</code> attribute are displayed as token text area.</p>
+
+
+<h2><a id="manual-constructor0.8876081134658307"></a>Manual Constructor</h2>
+
+<p>To manually create a token text area component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;ns-tokentextarea&quot;&gt;&lt;div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var token = tau.widget.Tokentextarea(document.getElementById(&#39;ns-tokentextarea&#39;));
+&lt;/script&gt;
+</pre>
+
+<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">&lt;div id=&quot;ns-tokentextarea&quot;&gt;&lt;div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentextarea&quot;).tokentextarea();
+&lt;/script&gt;
+</pre>
+
+<h2><a id="html-examples0.6324649443849921"></a>HTML Examples</h2>
+
+<p>To create simple token text area from a <code>&lt;div&gt;</code> element using the <code>data-role</code> attribute:</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;tokentextarea&quot;&gt;&lt;/div&gt;
+</pre>
+
+
+<h2><a id="options-for tokentextarea widget0.2150889951735735"></a>Options</h2>
+
+       <h3>Summary</h3>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-description</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;+ {0}&quot;</td>
+                               <td class="option">Manages the message format.</td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-label</span></td>
+                               <td class="option">string</td>
+                               <td class="option">&quot;To: &quot;</td>
+                               <td class="option">Sets a label as a guide for the user.</td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-link</span></td>
+                               <td class="option">string</td>
+                               <td class="option">null</td>
+                               <td class="option">Sets a URL at the anchor button.</td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+<h3><a id='data-label0.5066850383300334'></a>Guide Labels</h3>
+
+<p>You can provide a custom label to guide the user with the <code>data-label</code> option. For example, while composing an SMS message, a &quot;Send to: &quot; label is a guide for the user to enter a phone number or choose a recipient from the address book.</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;tokentextarea&quot; data-label=&quot;Send to: &quot;&gt;&lt;/div&gt;
+</pre>
+
+<h3><a id='data-link0.03688343823887408'></a>Linked Data</h3>
+
+<p>You can provide a link (with the <code>data-link</code> option) to a page that contains data for the user, for example, an address book. The link contains the ID of the page or the URL of other HTML file. If the value is <code>null</code> (default), the anchor button does not work.</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;tokentextarea&quot; data-link=&quot;bar.html&quot;&gt;&lt;/div&gt;
+</pre>
+
+<h3><a id='data-description0.9191692026797682'></a>Message Format</h3>
+
+<p>You can manage the message format with the <code>data-description</code> option. The message is displayed when the component status changes to <code>focusout</code>.</p>
+
+<pre class="prettyprint">&lt;div data-role=&quot;tokentextarea&quot; data-description=&quot;bar + {0}&quot;&gt;&lt;/div&gt;
+</pre>
+
+
+
+<h3><a id='option-description0.9191692026797682'></a>Getting and Setting Options</h3>
+
+<p>You can use the <code>option</code> method to get and set custom options for the token text area.</p>
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var elementToken = document.getElementById(&quot;ns-tokentextarea&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tokentextarea = tau.widget.TokenTextarea(elementToken);
+
+&nbsp;&nbsp;&nbsp;// Get the label
+&nbsp;&nbsp;&nbsp;tokentextarea.option(&quot;label&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set the label
+&nbsp;&nbsp;&nbsp;tokentextarea.option(&quot;label&quot;, &quot;e-mail To:&quot;);
+
+&nbsp;&nbsp;&nbsp;// Get the link            
+&nbsp;&nbsp;&nbsp;tokentextarea.option(&quot;link&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set the link
+&nbsp;&nbsp;&nbsp;tokentextarea.option(&quot;link&quot;, &quot;favorites.html&quot;);
+
+&nbsp;&nbsp;&nbsp;// Get the message format
+&nbsp;&nbsp;&nbsp;tokentextarea.option(&quot;description&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set the message format
+&nbsp;&nbsp;&nbsp;tokentextarea.option(&quot;description&quot;, &quot;bar + {0}&quot;);
+&lt;/script&gt;
+</pre>
+
+
+
+<h2><a id="methods0.8635833316948265"></a>Methods</h2>
+
+<p>To call a method on the component, use one of the existing API:</p>
+
+<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+
+<pre class="prettyprint">var elementToken = document.getElementById(&quot;ns-tokentext&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;tokentextarea = tau.widget.Tokentextarea(elementToken);
+
+tokentextarea.methodName(methodArgument1, methodArgument2, ...);
+</pre></li>
+
+<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
+
+<pre class="prettyprint">$(&quot;.selector&quot;).tokentextarea(&quot;methodName&quot;, methodArgument1, ...);
+</pre></li></ul>
+
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-add">add</a> ( string messages, number blockIndex ) </pre>
+                                       </td>
+                                       <td><p>Adds a new token text area component button with specified text in the place of the index.</p></td>
+                               </tr>
+
+       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Tokentextarea <a href="#method-disable">disable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Disables the token text area.</p></td>
+                               </tr>
+                       
+               
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Tokentextarea <a href="#method-enable">enable</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Enables the token text area.</p></td>
+                               </tr>           
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-focusIn">focusIn</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Ungroups the elements and sets a focus to the input.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-focusOut">focusOut</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Groups elements and hides the input.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string <a href="#method-inputText">inputText</a> ( string text ) </pre>
+                                       </td>
+                                       <td><p>Manages the component input box text.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">number <a href="#method-length">length</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Returns the block count.</p></td>
+                               </tr>
+                       
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-remove">remove</a> ( number blockIndex ) </pre>
+                                       </td>
+                                       <td><p>Deletes a token text area component button at the specified index position. If no parameter is defined, all token text area component buttons are deleted.</p></td>
+                               </tr>                   
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">?string <a href="#method-select">select</a> ( number blockIndex ) </pre>
+                                       </td>
+                                       <td><p>Selects the token text area button based on its index value.<br />If a parameter is set, the token text area button matching the index value is selected.<br />If a token text area button is selected and the parameter is not set, the method returns the string of the selected button. If no button is selected, the method returns <code>null</code>.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-add">add</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Adds a new token text area component button with specified text in the place of the index.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">add ( string messages, number blockIndex) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>If the index is not set, the token is inserted at the end.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">messages</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">blockIndex</span></td>
+                                               <td>number</td>
+                                               <td>Optional</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;tokenWidget.add(&quot;foobar&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;add&quot;, &quot;foobar&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-disable">disable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Disables the token text area.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Tokentextarea disable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method adds the disabled attribute on the token text area component and changes the look of the component to the disabled state.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentexarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var elementToken = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;elementToken.disable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;disable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-enable">enable</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Enables the token text area.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Tokentextarea enable ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method removes the disabled attribute from the token text area component and changes the look of the component to the enabled state.</p>
+                                               </p>
+                                       </div>
+                                       
+                                       
+
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var elementToken = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;elementToken.enable();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;enable&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-focusIn">focusIn</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Ungroups the elements and sets a focus to the input.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">focusIn ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API (<strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-label=&quot;Send to: &quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ns-tokentext&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;tokenWidget.focusIn(0);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-label=&quot;Send to: &quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ns-tokentext&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;focusIn&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-focusOut">focusOut</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Groups elements and hides the input.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">focusOut ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-label=&quot;Send to: &quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ns-tokentext&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;tokenWidget.focusOut(0);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-label=&quot;Send to: &quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ns-tokentext&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;focusOut&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-inputText">inputText</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Manages the component input box text.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">string inputText ( string text) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>If no parameter is set, the method gets the input box text. If a parameter is set, the parameter text is set in the input box.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">text</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>string</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+
+&nbsp;&nbsp;&nbsp;// Set the text in the input box
+&nbsp;&nbsp;&nbsp;tokenWidget.inputText(&quot;foobar&quot;);
+
+&nbsp;&nbsp;&nbsp;// Get the input box text
+&nbsp;&nbsp;&nbsp;tokenWidget.inputText();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Set the text in the input box
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;inputText&quot;, &quot;foobar&quot;);
+
+&nbsp;&nbsp;&nbsp;// Get the input box text
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;inputText&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-length">length</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the block count.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">number length ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       <p>The method retrieves the number of buttons in the token text area component.</p>
+
+
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>number</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;tokenWidget.length();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;length&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-remove">remove</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Deletes a token text area component button at the specified index position. If no parameter is defined, all token text area component buttons are deleted.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">remove ( number blockIndex) </pre>
+                                       </div>
+                                       
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">blockIndex</span></td>
+                                               <td>number</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-label=&quot;Send to: &quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ns-tokentext&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;tokenWidget.remove(1);
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-label=&quot;Send to: &quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ns-tokentext&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;remove&quot;, 1);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-select">select</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Selects the token text area button based on its index value.<br />If a parameter is set, the token text area button matching the index value is selected.<br />If a token text area button is selected and the parameter is not set, the method returns the string of the selected button. If no button is selected, the method returns null.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">?string select ( number blockIndex) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">blockIndex</span></td>
+                                               <td>number</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>?string</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Select first block
+&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;ns-tokentext&quot;));
+&nbsp;&nbsp;&nbsp;tokenWidget.add(&quot;text 1&quot;);
+&nbsp;&nbsp;&nbsp;tokenWidget.add(&quot;text 2&quot;);
+&nbsp;&nbsp;&nbsp;tokenWidget.select(0);
+
+&nbsp;&nbsp;&nbsp;// Get string from selected block
+&nbsp;&nbsp;&nbsp;tokenWidget.select();
+&lt;/script&gt;
+</pre>
+                                               </div>                                  
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;tokentextarea&quot; id=&quot;ns-tokentext&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;// Select first block
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;add&quot;, &quot;text 1&quot;);
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;add&quot;, &quot;text 2&quot;);
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;select&quot;, &quot;0&quot;);
+
+&nbsp;&nbsp;&nbsp;// Get string from selected block
+&nbsp;&nbsp;&nbsp;$(&quot;#ns-tokentext&quot;).tokentextarea(&quot;select&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+
+                       
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/page/app_page_layout.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/app_page_layout.htm
new file mode 100644 (file)
index 0000000..ce102a3
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/app_page_layout.htm
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head>
+  <script type="text/javascript" src="../../snippet.js"></script>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" />
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" />
+  <title>Application Page Layout</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Application Page Layout</h1>
+<p>In the Web UI Framework for Mobile Web Applications, the page and its elements (header, content, and footer) are all <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> blocks with a specific <span style="font-family: Courier New,Courier,monospace">data-role</span> property. The header is placed at the top, and displays the page title. The content is the area below the header, showing the main content of the page. The footer is at the bottom, and contains the page menu.</p>
+
+<p>The following table describes the specific information for each section.</p>
+
+<table>
+       <caption>Table: Page sections</caption>
+<tbody>
+       <tr>
+               <th style="width:10%;">Section</th>
+               <th>data-role</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td>Page</td>
+               <td><span style="font-family: Courier New,Courier,monospace">"page"</span></td>
+               <td><p>Defines the element as a page.</p>
+               <p>The page component is used to manage a single item in a page-based architecture.</p>
+               <p>A page is composed of the header (optional), content (mandatory), and footer (optional) elements.</p></td>
+       </tr>
+
+       <tr>
+               <td>Header</td>
+               <td><span style="font-family: Courier New,Courier,monospace">"header"</span></td>
+               <td><p>Defines the element as a header.</p>
+               <p>Avoid using the header element on small screens.</p></td>
+       </tr>
+       <tr>
+               <td>Content</td>
+               <td><span style="font-family: Courier New,Courier,monospace">"content"</span></td>
+               <td><p>Defines the element as content.</p></td>
+       </tr>
+       <tr>
+               <td>Footer</td>
+               <td><span style="font-family: Courier New,Courier,monospace">"footer"</span></td>
+               <td><p>Defines the element as a footer.</p>
+               <p>The footer section is mostly used to include option buttons.</p></td>
+       </tr>
+</tbody>
+</table>
+
+
+<p>To add a page to the application, use the following code:</p>
+<pre class="prettyprint">
+&lt;div data-role=&quot;page&quot;&gt;
+
+&lt;!--Page area--&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;&lt;!--Header area--&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;&lt;!--Content area--&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot;&gt;&lt;!--Footer area--&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>In your application, you can:</p>
+<ul>
+<li><a href="multi_page.htm">Create multi-page layouts</a></li>
+<li><a href="page_change.htm">Change the active page</a></li>
+<li><a href="page_event.htm">Handle page events and method</a></li>
+</ul>
+
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/page/multi_page.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/multi_page.htm
new file mode 100644 (file)
index 0000000..33f1d50
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/multi_page.htm
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" />
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" />
+  <title>Multi-page Layout</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+
+<h1>Multi-page Layout</h1>
+<p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in  the application <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+<p>In the multi-page layout, we can define multi pages with <span style="font-family: Courier New,Courier,monospace">data-role=&quot;page&quot;</span> attribute.</p>
+<p>
+You can link to internal pages by referring to the ID of the page. For example, to link to the page with an ID of <span style="font-family: Courier New,Courier,monospace">two</span>, the link element needs the <span style="font-family: Courier New,Courier,monospace">href=&quot;#two&quot;</span> attribute in the code, as in the following example.</p>
+
+<pre class="prettyprint">
+&lt;div data-role=&quot;page&quot; id=&quot;main&quot;&gt;
+    &lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
+        &lt;!--Header--&gt;
+    &lt;/div&gt;
+    &lt;div data-role=&quot;content&quot;&gt;
+        &lt;a href=&quot;#two&quot; data-role=&quot;button&quot;&gt;TWO&lt;/a&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;div data-role=&quot;page&quot; id=&quot;two&quot;&gt;
+    &lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
+        &lt;!--Header--&gt;
+    &lt;/div&gt;
+    &lt;div data-role=&quot;content&quot;&gt;
+        &lt;!--Content--&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>
+To find the currently active page, use the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class.</p>
+
+
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_change.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_change.htm
new file mode 100644 (file)
index 0000000..33e50ba
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_change.htm
@@ -0,0 +1,216 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" />
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" />
+  <title>Page Changes</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Page Changes</h1>
+<p>With the Web UI Framework for Mobile Web Applications library, you can move to any page in your application using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method.</p>
+
+<table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">To change pages with Web UI Framework, <b>DO NOT USE</b> <span style="font-family: Courier New,Courier,monospace">location.href</span> or <span style="font-family: Courier New,Courier,monospace">location.replace</span>. Web UI Framework has a self-method for managing histories, and if you use the above methods, it can cause confusion.
+                       <p>To change pages, use <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> and <span style="font-family: Courier New,Courier,monospace">tau.back()</span>.</p></td>
+               </tr>
+               </tbody>
+</table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#methods-list">Methods</a></li>    
+</ol>
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-back">tau.back</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Loads the previous page in the history list.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-changePage">tau.changePage</a> (toPage, options) </pre>
+                                       </td>
+                                       <td><p>Programmatically changes to another page. The <span style="font-family: Courier New,Courier,monospace">to</span> argument is a page object or string.</p></td>
+                               </tr>
+                       
+               
+                       
+                               
+               </tbody>
+       </table>
+                                                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-back">tau.back</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Loads the previous page in the history list.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">tau.back ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                               <b>Same as:</b> window.history.back()
+                                               </p>
+                                       </div>
+                                       
+                       
+                                               
+                                       </div>
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;tau.back();
+&lt;/script&gt;
+</pre>
+                                               </div>
+
+                                       
+                               </dd>
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-changePage">tau.changePage</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Programmatically changes to another page.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">tau.changePage (toPage, options) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">toPage</span></td>
+                                               <td>HTMLElement | string</td>
+                                               <td>Required</td>
+                                               <td>Target page defined with an HTML element or the relative URL of the page.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">options</span></td>
+                                               <td>Object</td>
+                                               <td>Optional</td>
+                                               <td>Options for changing pages.</td>
+                                       </tr>
+                                       </table></tbody></div>
+
+                                       <div class="parameters">
+                                               <p><span class="param">Options</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Option</th>
+                                               <th>Type</th>
+                                               <th>Value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">transition</span></td>
+                                               <td>string</td>
+                                               <td>'sequential' | 'simultaneous' | 'flip' |'depth' | 'pop' | 'slide' |'turn'</td>
+                                               <td>Transition for the opening page.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">reverse</span></td>
+                                               <td>boolean</td>
+                                               <td>true | false</td>
+                                               <td>If <code>true</code>, the transition must be reversed.</td>
+                                       </tr>
+                                       </table></tbody></div>
+                               
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (using an HTML element):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div data-role=&quot;page&quot; id=&quot;main&quot;&gt;...&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;main&quot;);
+&nbsp;&nbsp;&nbsp;tau.changePage(element, {transition: &#39;flip&#39;, reverse: false});
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                                       <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example (using a URL string):</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+// This is &quot;index.html&quot; and assumes that there is &quot;subPage.html&quot; in same directory
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;tau.changePage(&quot;subPage.html&quot;);
+&lt;/script&gt;
+</pre>
+                                               </div>
+
+                                       
+                               </dd>
+
+
+
+
+
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_event.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_event.htm
new file mode 100644 (file)
index 0000000..3137181
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_event.htm
@@ -0,0 +1,416 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" />
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" />
+  <title>Page Events and Methods</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Page Events and Methods</h1>
+<p>The Web UI Framework supports the &quot;page&quot; as a component. This means that a created page has several events and methods. This section introduces the events and methods in the Web UI Framework Page component.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#events-list">Events</a>
+                       
+               </li>
+               <li><a href="#events-back">Binding the Hardware Back Key Event</a>
+                       
+               </li>
+               <li><a href="#methods-list">Methods</a>
+                       
+               </li>
+       
+</ol>
+
+
+       <h2><a id="events-list"></a>Events</h2>
+<p>The following table lists the events related to pages.</p>
+       <table>
+               <tbody>
+               <tr>
+                       <th>Event</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagebeforechange</span></td>
+                               <td><p>Triggered before switching from the current page.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagebeforecreate</span></td>
+                               <td><p>Triggered before the new page component is created and initialized.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagebeforehide</span></td>
+                               <td><p>Triggered before the current page is about to be closed.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagebeforeload</span></td>
+                               <td><p>Triggered before an external page is loaded.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagebeforeshow</span></td>
+                               <td><p>Triggered before the new page is displayed.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagechange</span></td>
+                               <td><p>Triggered after switching from the current page to the new page.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagechangefailed</span></td>
+                               <td><p>Triggered when the page switching fails.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagecreate</span></td>
+                               <td><p>Triggered after the new page component creation.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pagehide</span></td>
+                               <td><p>Triggered after the current page is hidden.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pageinit</span></td>
+                               <td><p>Triggered after the page component initialization occurs.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pageload</span></td>
+                               <td><p>Triggered after an external page is loaded.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pageremove</span></td>
+                               <td><p>Triggered after an external page is removed from the DOM.</p></td>
+                       </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">pageshow</span></td>
+                               <td><p>Triggered after the new page is displayed.</p></td>
+                       </tr>
+               
+               </tbody>
+       </table>
+
+<h2><a id="events-back"></a>Binding the Hardware Back Key Event</h2>
+
+
+<p>To bind an event callback on the <strong>Back</strong> key, use the following code:</p>
+
+<pre class="prettyprint">
+window.addEventListener(&#39;tizenhwkey&#39;, function(ev) 
+{
+&nbsp;&nbsp;&nbsp;if (ev.originalEvent.keyName == &quot;back&quot;) 
+&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;// Call tizen.application.getCurrentApplication().exit() to exit application 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add script to add another behavior 
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+
+<h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-addBackBtn">addBackBtn</a> (  ) </pre> - <i style="color:red">deprecated</i>
+                                       </td>
+                                       <td><p>Adds the <strong>Back</strong> button.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-blur">blur</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Removes the focus from the page and all descendants.</p></td>
+                               </tr>
+                       
+
+
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-focus">focus</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Sets the focus to the page.</p></td>
+                               </tr>
+                       
+
+                                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-updatePageLayout">updatePageLayout</a> (  ) </pre>
+                                       </td>
+                                       <td><p>Calculates and updates the content height.</p></td>
+                               </tr>
+                       
+               
+
+               
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-addBackBtn">addBackBtn: <strong style="color:red">deprecated</strong></span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Adds the Back button.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">addBackBtn ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="description">
+                                                                                               <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This method is <strong>deprecated</strong> since 2.3 because you can use the hardware <strong>Back</strong> key.</td>
+               </tr>
+               </tbody>
+</table>
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-blur">blur</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Removes the focus from the page and all descendants.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">blur ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This method is only available through the TAU API.</td>
+               </tr>
+               </tbody>
+</table>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;myPage&quot;&gt;&lt;/div&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+&nbsp;&nbsp;&nbsp;var page = tau.widget.Page(document.getElementById(&quot;myPage&quot;));
+&nbsp;&nbsp;&nbsp;page.blur();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+                       
+
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-focus">focus</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Sets the focus to the page. For example, when the page has an input element (the autofocus attribute), it focuses this element automatically.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">focus ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This method is only available through the TAU API.</td>
+               </tr>
+               </tbody>
+</table>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;myPage&quot;&gt;&lt;/div&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+&nbsp;&nbsp;&nbsp;var page = tau.widget.Page(document.getElementById(&quot;myPage&quot;));
+&nbsp;&nbsp;&nbsp;page.focus();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+               
+       
+
+
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-updatePageLayout">updatePageLayout</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Calculates and updates the content height.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">updatePageLayout ( ) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This method is only available through the TAU API.</td>
+               </tr>
+               </tbody>
+</table>
+                                       </div>
+                                       
+                                       
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                                               <div class="example">
+                                                       <span class="example"><p>Code
+                                                               example:</p><p></p></span>
+                                                       <pre name="code" class="examplecode
+                                                       prettyprint">
+&lt;div id=&quot;myPage&quot;&gt;&lt;/div&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+&nbsp;&nbsp;&nbsp;var page = tau.widget.Page(document.getElementById(&quot;myPage&quot;));
+&nbsp;&nbsp;&nbsp;page.updatePageLayout();
+&lt;/script&gt;
+</pre>
+                                               </div>
+                                       
+                               </dd>
+                       
+
+               
+       </dl>
+
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_DOM.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_DOM.htm
new file mode 100644 (file)
index 0000000..2b956e3
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_DOM.htm
@@ -0,0 +1,1535 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../../snippet.css" rel="StyleSheet" type="text/css">
+       <title>DOM Utility</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>DOM Utility</h1>
+
+<p>The DOM utility is a utility object that provides DOM manipulation, and support for CSS properties and DOM attributes.</p>
+
+<h2>Table of Contents</h2>
+
+<ol class="toc">
+       <li><a href="#replace">Replacing jQuery Methods with TAU Methods</a>
+       <ol class="toc">
+       
+               <li><a href="#append">append vs. appendNodes</a>
+                       
+               </li>
+       
+               <li><a href="#replacewith">replaceWith vs. replaceWithNodes</a>
+                       
+               </li>
+       
+               <li><a href="#before">before vs. insertNodesBefore</a>
+                       
+               </li>
+       
+               <li><a href="#wrapinner">wrapInner vs. wrapInHTML</a>
+                       
+               </li></ol></li>
+       
+               <li><a href="#methods-list">DOM Utility Methods</a>
+                       
+       
+                       
+               </li>
+       
+</ol>
+
+<h1><a id="replace"></a>Replacing jQuery Methods with TAU Methods</h1>
+
+<p>Some useful DOM utility methods are supported by the Web UI framework, so you can use TAU-based DOM methods (pure JavaScript) instead of jQuery methods.</p>
+
+<h2><a id="append"></a>append vs. appendNodes</h2>
+
+<p>HTML code before manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>To append an element to the end of a specific node value, manipulate with:</p>
+<ul><li><a id='jquery-manipulation0.3280518683604896'></a>jQuery
+
+<pre class="prettyprint">$(&quot;#second&quot;).append(&quot;&lt;span&gt;Test&lt;/span&gt;&quot;);
+</pre></li>
+
+<li><a id='ns-manipulation0.15247147739864886'></a><strong>TAU</strong>
+
+<pre class="prettyprint">var context = document.getElementById(&quot;second&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;element = document.createElement(&quot;span&quot;);
+element.innerHTML = &quot;Test&quot;;
+tau.util.DOM.appendNodes(context, element);
+</pre></li></ul>
+
+<p>HTML code after manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Test&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="replacewith"></a>replaceWith vs. replaceWithNodes</h2>
+
+<p>HTML code before manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>To replace a node, manipulate with:</p>
+<ul><li><a id='jquery-manipulation0.4654183858074248'></a>jQuery
+
+<pre class="prettyprint">$(&#39;#second&#39;).replaceWith(&quot;&lt;span&gt;Test&lt;/span&gt;&quot;);
+</pre></li>
+
+<li><a id='ns-manipulation0.5650245239958167'></a><strong>TAU</strong>
+
+<pre class="prettyprint">var context = document.getElementById(&quot;second&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;element = document.createElement(&quot;span&quot;);
+element.innerHTML = &quot;Test&quot;;
+tau.util.DOM.replaceWithNodes(context, element);
+</pre></li></ul>
+
+<p>HTML code after manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;span&gt;Test&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="before"></a>before vs. insertNodesBefore</h2>
+
+<p>HTML code before manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>To add an element before a specific node, manipulate with:</p>
+<ul><li><a id='jquery-manipulation0.6407823746558279'></a>jQuery
+
+<pre class="prettyprint">$(&quot;#second&quot;).before(&quot;&lt;span&gt;Test&lt;/span&gt;&quot;);
+</pre></li>
+
+<li><a id='ns-manipulation0.1485148286446929'></a><strong>TAU</strong>
+
+<pre class="prettyprint">var context = document.getElementById(&quot;second&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;element = document.createElement(&quot;span&quot;);
+element.innerHTML = &quot;Test&quot;;
+tau.util.DOM.insertNodesBefore(context, element);
+</pre></li></ul>
+
+<p>HTML code after manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;span&gt;Test&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h2><a id="wrapinner"></a>wrapInner vs. wrapInHTML</h2>
+
+<p>HTML code before manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>To wrap a specific node value inside an element, manipulate with:</p>
+<ul><li><a id='jquery-manipulation0.7609627170022577'></a>jQuery
+
+<pre class="prettyprint">$(&quot;#second&quot;).wrapInner(&quot;&lt;span class=&quot;new&quot;&gt;&lt;/span&gt;&quot;);
+</pre></li>
+
+<li><a id='ns-manipulation0.7331366401631385'></a><strong>TAU</strong>
+
+<pre class="prettyprint">var element = document.getElementById(&quot;second&quot;);
+tau.util.DOM.wrapInHTML(element, &quot;&lt;span class=&quot;new&quot;&gt;&lt;/span&gt;&quot;);
+</pre></li></ul>
+
+<p>HTML code after manipulation:</p>
+
+<pre class="prettyprint">&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;first&quot;&gt;Hello&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;new&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;second&quot;&gt;And&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;third&quot;&gt;Goodbye&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+
+
+
+       <h2><a id="methods-list"></a>DOM Utility Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement,Array <a href="#method-appendNodes">appendNodes</a> (HTMLElement context, HTMLElement | HTMLCollection | NodeList | Array elements) </pre>
+                                       </td>
+                                       <td><p>Appends a node or array-like node list array to the context.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">string,number,null <a href="#method-getCSSProperty">getCSSProperty</a> (HTMLElement element, string property, null, &quot;integer&quot; | &quot;float&quot; | null) </pre>
+                                       </td>
+                                       <td><p>Returns the CSS property for an element.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Object <a href="#method-getData">getData</a> (HTMLElement element) </pre>
+                                       </td>
+                                       <td><p>Returns an object with all the data-* attributes of an element.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">number <a href="#method-getElementHeight">getElementHeight</a> (HTMLElement element, &quot;outer&quot; | null? type = null, boolean? includeOffset = false, boolean? includeMargin = false, string? pseudoSelector = null, boolean? force = false) </pre>
+                                       </td>
+                                       <td><p>Returns the element height from the computed style.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Object <a href="#method-getElementOffset">getElementOffset</a> (HTMLElement element) </pre>
+                                       </td>
+                                       <td><p>Returns the element offset.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">number <a href="#method-getElementWidth">getElementWidth</a> (HTMLElement element, &quot;outer&quot; | null?, boolean? includeOffset = false, boolean? includeMargin = false, string? pseudoSelector = null, boolean? force = false) </pre>
+                                       </td>
+                                       <td><p>Returns the element width from the computed style.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">?string,boolean <a href="#method-getNSData">getNSData</a> (HTMLElement element, string name) </pre>
+                                       </td>
+                                       <td><p>Returns the value of the data-{namespace}-{name} attribute for an element.<br />If the namespace is empty, the attribute data-{name} is used.<br />The method can return a boolean if the attribute value is a &#39;true&#39; or &#39;false&#39; string.</p></td>
+                               </tr>
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement <a href="#method-insertNodeAfter">insertNodeAfter</a> (HTMLElement context, HTMLElement element) </pre>
+                                       </td>
+                                       <td><p>Inserts a node after the context.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement,Array,null <a href="#method-insertNodesBefore">insertNodesBefore</a> (HTMLElement context, HTMLElement | HTMLCollection | NodeList | Array elements) </pre>
+                                       </td>
+                                       <td><p>Inserts a node or array-like node list before the context.</p></td>
+                               </tr>
+                       
+               
+                       
+                               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-removeAllChildren">removeAllChildren</a> (HTMLElement context) </pre>
+                                       </td>
+                                       <td><p>Removes all children.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-removeAttribute">removeAttribute</a> (HTMLElement element, string name) </pre>
+                                       </td>
+                                       <td><p>Removes an attribute and property at the same time.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-removeNSData">removeNSData</a> (HTMLElement element, string name) </pre>
+                                       </td>
+                                       <td><p>Removes the data-{namespace}-{name} attribute from an element.<br />If the namespace is empty, the data-{name} attribute is used.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement,Array,null <a href="#method-replaceWithNodes">replaceWithNodes</a> (HTMLElement context, HTMLElement | HTMLCollection | NodeList | Array elements) </pre>
+                                       </td>
+                                       <td><p>Replaces the context with a node or array-like node list.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-setAttribute">setAttribute</a> (HTMLElement element, string name, Mixed value) </pre>
+                                       </td>
+                                       <td><p>Sets an attribute and property at the same time.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-setNSData">setNSData</a> (HTMLElement element, string name, string | number | boolean value) </pre>
+                                       </td>
+                                       <td><p>Sets the value of the data-{namespace}-{name} attribute for an element.<br />If the namespace is empty, the data-{name} attribute is used.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement,NodeList,Array <a href="#method-wrapInHTML">wrapInHTML</a> (HTMLElement | NodeList | HTMLCollection | Array elements, string html) </pre>
+                                       </td>
+                                       <td><p>Wraps an element or array-like node list in the html markup.</p></td>
+                               </tr>
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-appendNodes">appendNodes</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Appends a node or array-like node list array to the context.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement,Array,null appendNodes (context, elements) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">elements</span></td>
+                                               <td>HTMLElement | HTMLCollection | NodeList | Array</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement,Array,null</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+                               
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getCSSProperty">getCSSProperty</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the CSS property for an element.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">string,number,null getCSSProperty (element, property, def, type) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">property</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">def</span></td>
+                                               <td>string | number | null</td>
+                                               <td>Optional</td>
+                                               <td>null</td>
+                                               <td>Default returned value.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">type</span></td>
+                                               <td>&quot;integer&quot; | &quot;float&quot; | null</td>
+                                               <td>Optional</td>
+                                               <td>null</td>
+                                               <td>Auto type casting.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>string,number,null</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getData">getData</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an object with all the data-* attributes of an element.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Object getData (element) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Base element.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Object</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getElementHeight">getElementHeight</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the element height from the computed style.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">number getElementHeight (element, type, includeOffset, includeMargin, pseudoSelector, force) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">type</span></td>
+                                               <td>&quot;outer&quot; | null</td>
+                                               <td>Optional</td>
+                                               <td>null</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">includeOffset</span></td>
+                                               <td>boolean</td>
+                                               <td>Optional</td>
+                                               <td>false</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">includeMargin</span></td>
+                                               <td>boolean</td>
+                                               <td>Optional</td>
+                                               <td>false</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">pseudoSelector</span></td>
+                                               <td>string</td>
+                                               <td>Optional</td>
+                                               <td>null</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">force</span></td>
+                                               <td>boolean</td>
+                                               <td>Optional</td>
+                                               <td>false</td>
+                                               <td>Checks whether the element is hidden.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>number</td>
+                                                                       <td>height of the element</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getElementOffset">getElementOffset</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the element offset.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Object getElementOffset (element) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Object</td>
+                                                                       <td>Offset object of the element</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getElementWidth">getElementWidth</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the element width from the computed style.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">number getElementWidth (element, type, includeOffset, includeMargin, pseudoSelector, force) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">type</span></td>
+                                               <td>&quot;outer&quot; | null</td>
+                                               <td>Optional</td>
+                                               <td>null</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">includeOffset</span></td>
+                                               <td>boolean</td>
+                                               <td>Optional</td>
+                                               <td>false</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">includeMargin</span></td>
+                                               <td>boolean</td>
+                                               <td>Optional</td>
+                                               <td>false</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">pseudoSelector</span></td>
+                                               <td>string</td>
+                                               <td>Optional</td>
+                                               <td>null</td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">force</span></td>
+                                               <td>boolean</td>
+                                               <td>Optional</td>
+                                               <td>false</td>
+                                               <td>Checks whether the element is hidden.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>number</td>
+                                                                       <td>width of the element</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getNSData">getNSData</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the value of the data-{namespace}-{name} attribute for an element.<br />If the namespace is empty, the data-{name} attribute is used.<br />The method can return a boolean if the attribute value is a &#39;true&#39; or &#39;false&#39; string.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">?string, boolean getNSData (element, name) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Base element.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Name of the attribute.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>?string,boolean</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-insertNodeAfter">insertNodeAfter</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Inserts a node after the context.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement insertNodeAfter (context, element) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-insertNodesBefore">insertNodesBefore</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Inserts a node or array-like node list before the context.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement,Array,null insertNodesBefore (context, elements) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">elements</span></td>
+                                               <td>HTMLElement | HTMLCollection | NodeList | Array</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement,Array,null</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+       
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-removeAllChildren">removeAllChildren</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Removes all children.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">removeAllChildren (context) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-removeAttribute">removeAttribute</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Removes an attribute and property at the same time.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">removeAttribute (element, name) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-removeNSData">removeNSData</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Removes the data-{namespace}-{name} attribute from an element.<br />If the namespace is empty, the data-{name} attribute is used.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">removeNSData (element, name) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Base element.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Name of the attribute.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-replaceWithNodes">replaceWithNodes</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Replaces the context with a node or array-like node list.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement,Array,null replaceWithNodes (context, elements) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">elements</span></td>
+                                               <td>HTMLElement | HTMLCollection | NodeList | Array</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-setAttribute">setAttribute</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Sets an attribute and property at the same time.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">setAttribute (element, name, value) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+                                               <td>Mixed</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-setNSData">setNSData</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Sets the value of the data-{namespace}-{name} attribute for an element.<br />If the namespace is empty, the data-{name} attribute is used.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">setNSData (element, name, value) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Base element.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>Name of the attribute.</td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
+                                               <td>string | number | boolean</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td>New value.</td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                               
+                                                       No return value
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-wrapInHTML">wrapInHTML</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Wraps an element or array-like node list in the html markup.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement,NodeList,Array wrapInHTML (elements, html) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">elements</span></td>
+                                               <td>HTMLElement | NodeList | HTMLCollection | Array</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">html</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement,NodeList,Array</td>
+                                                                       <td>Wrapped element.</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_selectors.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_selectors.htm
new file mode 100644 (file)
index 0000000..350845b
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/util/ns_util_selectors.htm
@@ -0,0 +1,1314 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+       <script type="text/javascript" src="../../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Selectors Utility</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Selectors Utility</h1>
+
+<p>The selectors utility contains functions to get HTML elements by different selectors.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+               <li><a href="#html-code">Using Selectors in the Web UI framework</a>
+                                               </li>
+               <li><a href="#methods-list">Methods</a>
+                       
+                               
+                       
+               </li>
+       
+</ol>
+
+
+
+
+<h2><a id="html-code"></a>Using Selectors in the Web UI framework</h2>
+
+<p>To use selectors in Web UI framework, use the following code:</p>
+
+<pre class="prettyprint">
+tau.util.selectors.getChildrenByClass(HTMLElement, &quot;className&quot;);
+</pre>
+
+
+
+
+       <h2><a id="methods-list"></a>Methods</h2>
+
+       <h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getAllByDataNS">getAllByDataNS</a> ( HTMLElement context, string dataSelector ) </pre>
+                                       </td>
+                                       <td><p>Returns an array of elements from the context with a given data-selector.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getChildrenByClass">getChildrenByClass</a> ( HTMLElement context, string className ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with children with a given class name.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getChildrenByDataNS">getChildrenByDataNS</a> ( HTMLElement context, string dataSelector ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with children passed by a given data-namespace-selector.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getChildrenBySelector">getChildrenBySelector</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with children passed by a given selector.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getChildrenByTag">getChildrenByTag</a> ( HTMLElement context, string tagName ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with children with a given tag name.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement <a href="#method-getClosestByClass">getClosestByClass</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns the first element from the parents of an element with a given class name.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement <a href="#method-getClosestBySelector">getClosestBySelector</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns the first element from the parents of an element passed by a selector.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement <a href="#method-getClosestBySelectorNS">getClosestBySelectorNS</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns the first element from the parents of an element passed by a selector with a namespace.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">HTMLElement <a href="#method-getClosestByTag">getClosestByTag</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns the first element from the parents of an element with a given tag name.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getParents">getParents</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with all the parents of an element.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getParentsByClass">getParentsByClass</a> ( HTMLElement context, string className ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with all the parents of an element with a given class name.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getParentsBySelector">getParentsBySelector</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with all the parents of an element passed by a given selector.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getParentsBySelectorNS">getParentsBySelectorNS</a> ( HTMLElement context, string selector ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with all the parents of an element passed by a given selector with a namespace.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">Array <a href="#method-getParentsByTag">getParentsByTag</a> ( HTMLElement context, string tagName ) </pre>
+                                       </td>
+                                       <td><p>Returns an array with all the parents of an element with a given tag name.</p></td>
+                               </tr>
+                       
+               
+                       
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint">boolean <a href="#method-matchesSelector">matchesSelector</a> ( HTMLElement element, string selector ) </pre>
+                                       </td>
+                                       <td><p>Runs the match implementation of the matchesSelector method on a specified element.</p></td>
+                               </tr>
+                       
+               
+                       
+               
+               </tbody>
+       </table>
+       <dl>
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getAllByDataNS">getAllByDataNS</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array of elements from the context with a given data-selector.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getAllByDataNS ( HTMLElement context, string dataSelector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">dataSelector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getChildrenByClass">getChildrenByClass</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with children with a given class name.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getChildrenByClass ( HTMLElement context, string className) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">className</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getChildrenByDataNS">getChildrenByDataNS</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with children passed by a given data-namespace-selector.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getChildrenByDataNS ( HTMLElement context, string dataSelector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">dataSelector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getChildrenBySelector">getChildrenBySelector</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with children passed by a given selector.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getChildrenBySelector ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getChildrenByTag">getChildrenByTag</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with children with a given tag name.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getChildrenByTag ( HTMLElement context, string tagName) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">tagName</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getClosestByClass">getClosestByClass</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the first element from the parents of an element with a given class name.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement getClosestByClass ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getClosestBySelector">getClosestBySelector</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the first element from the parents of an element passed by a selector.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement getClosestBySelector ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getClosestBySelectorNS">getClosestBySelectorNS</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the first element from the parents of an element passed by a selector with a namespace.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement getClosestBySelectorNS ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getClosestByTag">getClosestByTag</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns the first element from the parents of an element with a given tag name.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">HTMLElement getClosestByTag ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>HTMLElement</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getParents">getParents</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with all the parents of an element.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getParents ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getParentsByClass">getParentsByClass</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with all the parents of an element with a given class name.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getParentsByClass ( HTMLElement context, string className) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">className</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getParentsBySelector">getParentsBySelector</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with all the parents of an element passed by a given selector.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getParentsBySelector ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getParentsBySelectorNS">getParentsBySelectorNS</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with all the parents of an element passed by a given selector with a namespace.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getParentsBySelectorNS ( HTMLElement context, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-getParentsByTag">getParentsByTag</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Returns an array with all the parents of an element with a given tag name.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">Array getParentsByTag ( HTMLElement context, string tagName) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">context</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">tagName</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>Array</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+                               <dt class="method" id="addidp28072"><code><b><span class="methodName"
+                                                                                                                                  id="method-matchesSelector">matchesSelector</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Runs the match implementation of the matchesSelector method on a specified element.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">boolean matchesSelector ( HTMLElement element, string selector) </pre>
+                                       </div>
+                                       
+                                       <div class="description">
+                                               <p>
+                                                       
+                                               </p>
+                                       </div>
+                                       
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required/optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+                                       
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+                                               <td>HTMLElement</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">selector</span></td>
+                                               <td>string</td>
+                                               <td>Required</td>
+                                               <td></td>
+                                               <td></td>
+                                       </tr>
+                                       
+                                       
+                                       </tbody>
+                                       </table>
+                                       </div>
+                                       
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>boolean</td>
+                                                                       <td></td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                                       
+                               </dd>
+                       
+               
+                       
+               
+       </dl>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/util/util.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/util/util.htm
new file mode 100644 (file)
index 0000000..fbd5469
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/util/util.htm
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../../snippet.css" rel="StyleSheet" type="text/css">
+       <title>Utilities</title>
+</head>
+<body onload="prettyPrint()" marginwidth="0" marginheight="0" id="content">
+       
+
+<h1>Utilities</h1>
+
+<p>The Web UI Framework provides utilities that offer easy developing and can replace jQuery methods. With the DOM and selector utility methods, you can use a light logic and achieve better performance for the Web application. The following table displays the utilities provided by the Web UI framework.
+</p>
+
+<table border="1">
+       <caption>Table: Web UI Framework utilities</caption>
+<tbody>
+       <tr>
+               <th>Util name</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><a href="ns_util_DOM.htm">DOM</a></td>
+               <td>Provides DOM methods for elements.</td>
+       </tr>
+       <tr>
+               <td><a href="ns_util_selectors.htm">Selectors</a></td>
+               <td>Provides selector methods for elements.</td>
+       </tr>
+</tbody>
+</table>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+       <!--start-->
+       <script type="text/javascript">
+               var _gaq = _gaq || [];
+               _gaq.push(['_setAccount', 'UA-25976949-1']);
+               _gaq.push(['_trackPageview']);
+               (function () {
+                       var ga = document.createElement('script');
+                       ga.type = 'text/javascript';
+                       ga.async = true;
+                       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-->
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm b/org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm
new file mode 100644 (file)
index 0000000..7e26282
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm
@@ -0,0 +1,180 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+    <script type="text/javascript" src="../snippet.js"></script>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8">
+       <link href="../styles.css" rel="StyleSheet" type="text/css">
+       <link href="../snippet.css" rel="StyleSheet" type="text/css">
+       <title>UI Component Reference</title>
+</head>
+<body onload="prettyPrint()" marginwidth="0" marginheight="0" id="content">
+
+<h1>UI Component Reference</h1>
+
+<p>The Web UI Framework (called as <b>TAU</b>; Tizen Advanced UI framework) provides rich Tizen components that are optimized for the Tizen Web browser.</p>
+
+<p>The following table displays the components provided by the Tizen mobile Web UI Framework service.</p>
+
+<table border="1">
+       <caption>Table: Tizen mobile Web UI Framework components</caption>
+       <tbody>
+       <tr>
+               <th>UI component</th>
+               <th>Description</th>
+       </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Autodividers.htm">Autodividers</a></td>
+                       <td>Autodividers component extension automatically creates dividers for a list view component.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Button.htm">Button</a></td>
+                       <td>Button component changes the default browser buttons to special buttons with additional features, such as icons, corners, and shadows.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Checkboxradio.htm">Checkbox Radio</a></td>
+                       <td>Checkbox radio component changes the default browser checkboxes and radio buttons to a form more adapted to the mobile environment.</td>
+               </tr>
+               
+               <tr>
+                       <td><a href="ns_widget_mobile_Collapsible.htm">Collapsible</a></td>
+                       <td>Collapsible component allows you to expand or collapse content when tapped.</td>
+               </tr>
+
+               <tr>
+                       <td><a href="ns_widget_mobile_Controlgroup.htm">Control Group</a></td>
+                       <td>Control group component improves the styling of multiple buttons by grouping them into a single block.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Datetimepicker.htm">Date-time Picker</a></td>
+                       <td>Date-time picker component shows a control that the user can use to enter date and time values.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Drawer.htm">Drawer</a></td>
+                       <td>Drawer component allows you to open and close a drawer to show or hide the content inside it.</td>
+               </tr>
+       
+
+               <tr>
+                       <td><a href="ns_widget_mobile_FastScroll.htm">Fast Scroll</a></td>
+                       <td>Fast scroll component shows a shortcut list that is bound to its parent scroll bar and respective list view.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Fliptoggle.htm">Flip Toggle Switch</a></td>
+                       <td>Flip toggle switch component is a common UI element used for binary on/off or true/false data input.</td>
+               </tr>
+
+               <tr>
+                       <td><a href="ns_widget_mobile_Gallery.htm">Gallery</a></td>
+                       <td>Gallery component shows images in a gallery on the screen.</td>
+               </tr>
+               
+               <tr>
+                       <td><a href="ns_widget_mobile_ListDivider.htm">List Divider</a></td>
+                       <td>List divider component creates a list separator, which can be used for grouping list items.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Listview.htm">List View</a></td>
+                       <td>List view component is used to display, for example, navigation data, results, and data entries, in a list format.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_MultimediaView.htm">Multimedia View</a></td>
+                       <td>Multimedia view component displays the audio and video player.</td>
+               </tr>
+
+               <tr>
+                       <td><a href="ns_widget_mobile_Navigation.htm">Navigation Bar</a></td>
+                       <td>Navigation bar component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation bar, the user can move to the target page.</td>
+               </tr>
+               
+               <tr>
+                       <td><a href="ns_widget_mobile_Notification.htm">Notification</a></td>
+                       <td>Notification component shows a pop-up on the screen to provide notifications.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Popup.htm">Popup</a></td>
+                       <td>Popup component supports 2 pop-ups: the position-to-window pop-up (like a system pop-up), and the context pop-up.</td>
+               </tr>
+               
+               <tr>
+                       <td><a href="ns_widget_mobile_Progress.htm">Progress</a></td>
+                       <td>Progress component shows that an operation is in progress.</td>
+               </tr>
+
+               <tr>
+                       <td><a href="ns_widget_mobile_ProgressBar.htm">Progress Bar</a></td>
+                       <td>Progress bar component shows a control that indicates the progress percentage of an on-going operation.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_ScrollHandler.htm">Scroll Handler</a></td>
+                       <td>Scroll Handler component is an extension for the scroll view component, and adds a scroll button that looks like a handle.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_SearchBar.htm">Search Bar</a></td>
+                       <td>Search bar component is used to search for page content.</td>
+               </tr>
+
+               <tr>
+                       <td><a href="ns_widget_mobile_SelectMenu.htm">Select Menu</a></td>
+                       <td>Select menu component is used to select one option. It is created as a drop-down list form.</td>
+               </tr>
+               
+               <tr>
+                       <td><a href="ns_widget_mobile_Slider.htm">Slider</a></td>
+                       <td>Slider component changes the range-type browser input to sliders.</td>
+               </tr>
+               
+               <tr>
+                       <td><a href="ns_widget_mobile_Swipe.htm">Swipe</a></td>
+                       <td>Swipe component shows a list view on the screen where the list items can be swiped vertically to show a menu.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_TabBar.htm">Tab Bar</a></td>
+                       <td>Tab bar component shows an unordered list of buttons on the screen wrapped together in a single group.</td>
+               </tr>
+       
+               <tr>
+                       <td><a href="ns_widget_mobile_Tokentextarea.htm">Token Text Area</a></td>
+                       <td>Token text area component changes a text item to a button.</td>
+               </tr>
+       
+       </tbody>
+</table>
+
+
+<div id="footer">
+       <hr size="1">
+       <font size="1">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>.</font>
+       <!--start-->
+       <script type="text/javascript">
+               var _gaq = _gaq || [];
+               _gaq.push(['_setAccount', 'UA-25976949-1']);
+               _gaq.push(['_trackPageview']);
+               (function () {
+                       var ga = document.createElement('script');
+                       ga.type = 'text/javascript';
+                       ga.async = true;
+                       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-->
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/snippet.css b/org.tizen.web.apireference/html/ui_fw_api/snippet.css
new file mode 100644 (file)
index 0000000..538feb6
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/snippet.css
@@ -0,0 +1,136 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln {
+       color: #000
+}
+
+/* plain text */
+
+@media screen {
+       .str {
+               color: #793AFF
+       }
+
+       /* string content */
+       .kwd {
+               color: #7F0055
+       }
+
+       /* a keyword */
+       .com {
+               color: green
+       }
+
+       /* a comment */
+       .typ {
+               color: #1C1C1C
+       }
+
+       /* a type name */
+       .lit {
+               color: black
+       }
+
+       /* a literal value */
+       /* punctuation, lisp open bracket, lisp close bracket */
+       .pun, .opn, .clo {
+               color: #1C1C1C
+       }
+
+       .tag {
+               color: #008
+       }
+
+       /* a markup tag name */
+       .atn {
+               color: #606
+       }
+
+       /* a markup attribute name */
+       .atv {
+               color: #080
+       }
+
+       /* a markup attribute value */
+       .dec, .var {
+               color: #606
+       }
+
+       /* a declaration; a variable name */
+       .fun {
+               color: red
+       }
+
+       /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+       .str {
+               color: #060
+       }
+
+       .kwd {
+               color: #006;
+               font-weight: bold
+       }
+
+       .com {
+               color: #600;
+               font-style: italic
+       }
+
+       .typ {
+               color: #404;
+               font-weight: bold
+       }
+
+       .lit {
+               color: #044
+       }
+
+       .pun, .opn, .clo {
+               color: #440
+       }
+
+       .tag {
+               color: #006;
+               font-weight: bold
+       }
+
+       .atn {
+               color: #404
+       }
+
+       .atv {
+               color: #060
+       }
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+       margin-top: 0;
+       margin-bottom: 0
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 {
+       list-style-type: none
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+       background: #eee
+}
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/snippet.js b/org.tizen.web.apireference/html/ui_fw_api/snippet.js
new file mode 100644 (file)
index 0000000..fdc60e0
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+    // Keyword lists for various languages.
+    // We use things that coerce to strings to make them compact when minified
+    // and to defeat aggressive optimizers that fold large string constants.
+    var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+    var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
+        "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+        "static,struct,switch,typedef,union,unsigned,void,volatile"];
+    var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+        "new,operator,private,protected,public,this,throw,true,try,typeof"];
+    var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+        "concept,concept_map,const_cast,constexpr,decltype," +
+        "dynamic_cast,explicit,export,friend,inline,late_check," +
+        "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+        "template,typeid,typename,using,virtual,where"];
+    var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+            "abstract,boolean,extends,final,finally,implements,import," +
+            "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+            "transient"];
+    var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+            "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+            "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+            "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+            "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+    var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+        "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+        "true,try,unless,until,when,while,yes";
+    var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+            "debugger,eval,export,function,get,null,set,undefined,var,with," +
+            "Infinity,NaN"];
+    var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+        "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+        "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+    var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+        "elif,except,exec,finally,from,global,import,in,is,lambda," +
+        "nonlocal,not,or,pass,print,raise,try,with,yield," +
+        "False,True,None"];
+    var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+        "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+        "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+        "BEGIN,END"];
+    var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+        "function,in,local,set,then,until"];
+    var ALL_KEYWORDS = [
+        CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+            PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+    var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+    // token style names.  correspond to css classes
+    /**
+     * token style for a string literal
+     * @const
+     */
+    var PR_STRING = 'str';
+    /**
+     * token style for a keyword
+     * @const
+     */
+    var PR_KEYWORD = 'kwd';
+    /**
+     * token style for a comment
+     * @const
+     */
+    var PR_COMMENT = 'com';
+    /**
+     * token style for a type
+     * @const
+     */
+    var PR_TYPE = 'typ';
+    /**
+     * token style for a literal value.  e.g. 1, null, true.
+     * @const
+     */
+    var PR_LITERAL = 'lit';
+    /**
+     * token style for a punctuation string.
+     * @const
+     */
+    var PR_PUNCTUATION = 'pun';
+    /**
+     * token style for a punctuation string.
+     * @const
+     */
+    var PR_PLAIN = 'pln';
+
+    /**
+     * token style for an sgml tag.
+     * @const
+     */
+    var PR_TAG = 'tag';
+    /**
+     * token style for a markup declaration such as a DOCTYPE.
+     * @const
+     */
+    var PR_DECLARATION = 'dec';
+    /**
+     * token style for embedded source.
+     * @const
+     */
+    var PR_SOURCE = 'src';
+    /**
+     * token style for an sgml attribute name.
+     * @const
+     */
+    var PR_ATTRIB_NAME = 'atn';
+    /**
+     * token style for an sgml attribute value.
+     * @const
+     */
+    var PR_ATTRIB_VALUE = 'atv';
+
+    /**
+     * A class that indicates a section of markup that is not code, e.g. to allow
+     * embedding of line numbers within code listings.
+     * @const
+     */
+    var PR_NOCODE = 'nocode';
+
+
+
+    /**
+     * A set of tokens that can precede a regular expression literal in
+     * javascript
+     * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+     * has the full list, but I've removed ones that might be problematic when
+     * seen in languages that don't support regular expression literals.
+     *
+     * <p>Specifically, I've removed any keywords that can't precede a regexp
+     * literal in a syntactically legal javascript program, and I've removed the
+     * "in" keyword since it's not a keyword in many languages, and might be used
+     * as a count of inches.
+     *
+     * <p>The link a above does not accurately describe EcmaScript rules since
+     * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+     * very well in practice.
+     *
+     * @private
+     * @const
+     */
+    var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+    /**
+     * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+     * matches the union of the sets of strings matched by the input RegExp.
+     * Since it matches globally, if the input strings have a start-of-input
+     * anchor (/^.../), it is ignored for the purposes of unioning.
+     * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+     * @return {RegExp} a global regex.
+     */
+    function combinePrefixPatterns(regexs) {
+        var capturedGroupIndex = 0;
+
+        var needToFoldCase = false;
+        var ignoreCase = false;
+        for (var i = 0, n = regexs.length; i < n; ++i) {
+            var regex = regexs[i];
+            if (regex.ignoreCase) {
+                ignoreCase = true;
+            } else if (/[a-z]/i.test(regex.source.replace(
+                /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+                needToFoldCase = true;
+                ignoreCase = false;
+                break;
+            }
+        }
+
+        var escapeCharToCodeUnit = {
+            'b': 8,
+            't': 9,
+            'n': 0xa,
+            'v': 0xb,
+            'f': 0xc,
+            'r': 0xd
+        };
+
+        function decodeEscape(charsetPart) {
+            var cc0 = charsetPart.charCodeAt(0);
+            if (cc0 !== 92 /* \\ */) {
+                return cc0;
+            }
+            var c1 = charsetPart.charAt(1);
+            cc0 = escapeCharToCodeUnit[c1];
+            if (cc0) {
+                return cc0;
+            } else if ('0' <= c1 && c1 <= '7') {
+                return parseInt(charsetPart.substring(1), 8);
+            } else if (c1 === 'u' || c1 === 'x') {
+                return parseInt(charsetPart.substring(2), 16);
+            } else {
+                return charsetPart.charCodeAt(1);
+            }
+        }
+
+        function encodeEscape(charCode) {
+            if (charCode < 0x20) {
+                return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+            }
+            var ch = String.fromCharCode(charCode);
+            if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+                ch = '\\' + ch;
+            }
+            return ch;
+        }
+
+        function caseFoldCharset(charSet) {
+            var charsetParts = charSet.substring(1, charSet.length - 1).match(
+                new RegExp(
+                        '\\\\u[0-9A-Fa-f]{4}'
+                        + '|\\\\x[0-9A-Fa-f]{2}'
+                        + '|\\\\[0-3][0-7]{0,2}'
+                        + '|\\\\[0-7]{1,2}'
+                        + '|\\\\[\\s\\S]'
+                        + '|-'
+                        + '|[^-\\\\]',
+                    'g'));
+            var groups = [];
+            var ranges = [];
+            var inverse = charsetParts[0] === '^';
+            for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+                var p = charsetParts[i];
+                if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+                    groups.push(p);
+                } else {
+                    var start = decodeEscape(p);
+                    var end;
+                    if (i + 2 < n && '-' === charsetParts[i + 1]) {
+                        end = decodeEscape(charsetParts[i + 2]);
+                        i += 2;
+                    } else {
+                        end = start;
+                    }
+                    ranges.push([start, end]);
+                    // If the range might intersect letters, then expand it.
+                    // This case handling is too simplistic.
+                    // It does not deal with non-latin case folding.
+                    // It works for latin source code identifiers though.
+                    if (!(end < 65 || start > 122)) {
+                        if (!(end < 65 || start > 90)) {
+                            ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+                        }
+                        if (!(end < 97 || start > 122)) {
+                            ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+                        }
+                    }
+                }
+            }
+
+            // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+            // -> [[1, 12], [14, 14], [16, 17]]
+            ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+            var consolidatedRanges = [];
+            var lastRange = [NaN, NaN];
+            for (var i = 0; i < ranges.length; ++i) {
+                var range = ranges[i];
+                if (range[0] <= lastRange[1] + 1) {
+                    lastRange[1] = Math.max(lastRange[1], range[1]);
+                } else {
+                    consolidatedRanges.push(lastRange = range);
+                }
+            }
+
+            var out = ['['];
+            if (inverse) { out.push('^'); }
+            out.push.apply(out, groups);
+            for (var i = 0; i < consolidatedRanges.length; ++i) {
+                var range = consolidatedRanges[i];
+                out.push(encodeEscape(range[0]));
+                if (range[1] > range[0]) {
+                    if (range[1] + 1 > range[0]) { out.push('-'); }
+                    out.push(encodeEscape(range[1]));
+                }
+            }
+            out.push(']');
+            return out.join('');
+        }
+
+        function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+            // Split into character sets, escape sequences, punctuation strings
+            // like ('(', '(?:', ')', '^'), and runs of characters that do not
+            // include any of the above.
+            var parts = regex.source.match(
+                new RegExp(
+                        '(?:'
+                        + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+                        + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+                        + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+                        + '|\\\\[0-9]+'  // a back-reference or octal escape
+                        + '|\\\\[^ux0-9]'  // other escape sequence
+                        + '|\\(\\?[:!=]'  // start of a non-capturing group
+                        + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+                        + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+                        + ')',
+                    'g'));
+            var n = parts.length;
+
+            // Maps captured group numbers to the number they will occupy in
+            // the output or to -1 if that has not been determined, or to
+            // undefined if they need not be capturing in the output.
+            var capturedGroups = [];
+
+            // Walk over and identify back references to build the capturedGroups
+            // mapping.
+            for (var i = 0, groupIndex = 0; i < n; ++i) {
+                var p = parts[i];
+                if (p === '(') {
+                    // groups are 1-indexed, so max group index is count of '('
+                    ++groupIndex;
+                } else if ('\\' === p.charAt(0)) {
+                    var decimalValue = +p.substring(1);
+                    if (decimalValue && decimalValue <= groupIndex) {
+                        capturedGroups[decimalValue] = -1;
+                    }
+                }
+            }
+
+            // Renumber groups and reduce capturing groups to non-capturing groups
+            // where possible.
+            for (var i = 1; i < capturedGroups.length; ++i) {
+                if (-1 === capturedGroups[i]) {
+                    capturedGroups[i] = ++capturedGroupIndex;
+                }
+            }
+            for (var i = 0, groupIndex = 0; i < n; ++i) {
+                var p = parts[i];
+                if (p === '(') {
+                    ++groupIndex;
+                    if (capturedGroups[groupIndex] === undefined) {
+                        parts[i] = '(?:';
+                    }
+                } else if ('\\' === p.charAt(0)) {
+                    var decimalValue = +p.substring(1);
+                    if (decimalValue && decimalValue <= groupIndex) {
+                        parts[i] = '\\' + capturedGroups[groupIndex];
+                    }
+                }
+            }
+
+            // Remove any prefix anchors so that the output will match anywhere.
+            // ^^ really does mean an anchored match though.
+            for (var i = 0, groupIndex = 0; i < n; ++i) {
+                if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+            }
+
+            // Expand letters to groups to handle mixing of case-sensitive and
+            // case-insensitive patterns if necessary.
+            if (regex.ignoreCase && needToFoldCase) {
+                for (var i = 0; i < n; ++i) {
+                    var p = parts[i];
+                    var ch0 = p.charAt(0);
+                    if (p.length >= 2 && ch0 === '[') {
+                        parts[i] = caseFoldCharset(p);
+                    } else if (ch0 !== '\\') {
+                        // TODO: handle letters in numeric escapes.
+                        parts[i] = p.replace(
+                            /[a-zA-Z]/g,
+                            function (ch) {
+                                var cc = ch.charCodeAt(0);
+                                return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                            });
+                    }
+                }
+            }
+
+            return parts.join('');
+        }
+
+        var rewritten = [];
+        for (var i = 0, n = regexs.length; i < n; ++i) {
+            var regex = regexs[i];
+            if (regex.global || regex.multiline) { throw new Error('' + regex); }
+            rewritten.push(
+                    '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+        }
+
+        return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+    }
+
+
+    /**
+     * Split markup into a string of source code and an array mapping ranges in
+     * that string to the text nodes in which they appear.
+     *
+     * <p>
+     * The HTML DOM structure:</p>
+     * <pre>
+     * (Element   "p"
+     *   (Element "b"
+     *     (Text  "print "))       ; #1
+     *   (Text    "'Hello '")      ; #2
+     *   (Element "br")            ; #3
+     *   (Text    "  + 'World';")) ; #4
+     * </pre>
+     * <p>
+     * corresponds to the HTML
+     * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+     *
+     * <p>
+     * It will produce the output:</p>
+     * <pre>
+     * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+     * </pre>
+     * <p>
+     * where #1 is a reference to the {@code "print "} text node above, and so
+     * on for the other text nodes.
+     * </p>
+     *
+     * <p>
+     * The {@code} spans array is an array of pairs.  Even elements are the start
+     * indices of substrings, and odd elements are the text nodes (or BR elements)
+     * that contain the text for those substrings.
+     * Substrings continue until the next index or the end of the source.
+     * </p>
+     *
+     * @param {Node} node an HTML DOM subtree containing source-code.
+     * @return {Object} source code and the text nodes in which they occur.
+     */
+    function extractSourceSpans(node) {
+        var nocode = /(?:^|\s)nocode(?:\s|$)/;
+
+        var chunks = [];
+        var length = 0;
+        var spans = [];
+        var k = 0;
+
+        var whitespace;
+        if (node.currentStyle) {
+            whitespace = node.currentStyle.whiteSpace;
+        } else if (window.getComputedStyle) {
+            whitespace = document.defaultView.getComputedStyle(node, null)
+                .getPropertyValue('white-space');
+        }
+        var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+        function walk(node) {
+            switch (node.nodeType) {
+                case 1:  // Element
+                    if (nocode.test(node.className)) { return; }
+                    for (var child = node.firstChild; child; child = child.nextSibling) {
+                        walk(child);
+                    }
+                    var nodeName = node.nodeName;
+                    if ('BR' === nodeName || 'LI' === nodeName) {
+                        chunks[k] = '\n';
+                        spans[k << 1] = length++;
+                        spans[(k++ << 1) | 1] = node;
+                    }
+                    break;
+                case 3: case 4:  // Text
+                var text = node.nodeValue;
+                if (text.length) {
+                    if (!isPreformatted) {
+                        text = text.replace(/[ \t\r\n]+/g, ' ');
+                    } else {
+                        text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+                    }
+                    // TODO: handle tabs here?
+                    chunks[k] = text;
+                    spans[k << 1] = length;
+                    length += text.length;
+                    spans[(k++ << 1) | 1] = node;
+                }
+                break;
+            }
+        }
+
+        walk(node);
+
+        return {
+            sourceCode: chunks.join('').replace(/\n$/, ''),
+            spans: spans
+        };
+    }
+
+
+    /**
+     * Apply the given language handler to sourceCode and add the resulting
+     * decorations to out.
+     * @param {number} basePos the index of sourceCode within the chunk of source
+     *    whose decorations are already present on out.
+     */
+    function appendDecorations(basePos, sourceCode, langHandler, out) {
+        if (!sourceCode) { return; }
+        var job = {
+            sourceCode: sourceCode,
+            basePos: basePos
+        };
+        langHandler(job);
+        out.push.apply(out, job.decorations);
+    }
+
+    var notWs = /\S/;
+
+    /**
+     * Given an element, if it contains only one child element and any text nodes
+     * it contains contain only space characters, return the sole child element.
+     * Otherwise returns undefined.
+     * <p>
+     * This is meant to return the CODE element in {@code <pre><code ...>} when
+     * there is a single child element that contains all the non-space textual
+     * content, but not to return anything where there are multiple child elements
+     * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+     * is textual content.
+     */
+    function childContentWrapper(element) {
+        var wrapper = undefined;
+        for (var c = element.firstChild; c; c = c.nextSibling) {
+            var type = c.nodeType;
+            wrapper = (type === 1)  // Element Node
+                ? (wrapper ? element : c)
+                : (type === 3)  // Text Node
+                ? (notWs.test(c.nodeValue) ? element : wrapper)
+                : wrapper;
+        }
+        return wrapper === element ? undefined : wrapper;
+    }
+
+    /** Given triples of [style, pattern, context] returns a lexing function,
+     * The lexing function interprets the patterns to find token boundaries and
+     * returns a decoration list of the form
+     * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+     * where index_n is an index into the sourceCode, and style_n is a style
+     * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+     * all characters in sourceCode[index_n-1:index_n].
+     *
+     * The stylePatterns is a list whose elements have the form
+     * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+     *
+     * Style is a style constant like PR_PLAIN, or can be a string of the
+     * form 'lang-FOO', where FOO is a language extension describing the
+     * language of the portion of the token in $1 after pattern executes.
+     * E.g., if style is 'lang-lisp', and group 1 contains the text
+     * '(hello (world))', then that portion of the token will be passed to the
+     * registered lisp handler for formatting.
+     * The text before and after group 1 will be restyled using this decorator
+     * so decorators should take care that this doesn't result in infinite
+     * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+     * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+     * '<script>foo()<\/script>', which would cause the current decorator to
+     * be called with '<script>' which would not match the same rule since
+     * group 1 must not be empty, so it would be instead styled as PR_TAG by
+     * the generic tag rule.  The handler registered for the 'js' extension would
+     * then be called with 'foo()', and finally, the current decorator would
+     * be called with '<\/script>' which would not match the original rule and
+     * so the generic tag rule would identify it as a tag.
+     *
+     * Pattern must only match prefixes, and if it matches a prefix, then that
+     * match is considered a token with the same style.
+     *
+     * Context is applied to the last non-whitespace, non-comment token
+     * recognized.
+     *
+     * Shortcut is an optional string of characters, any of which, if the first
+     * character, gurantee that this pattern and only this pattern matches.
+     *
+     * @param {Array} shortcutStylePatterns patterns that always start with
+     *   a known character.  Must have a shortcut string.
+     * @param {Array} fallthroughStylePatterns patterns that will be tried in
+     *   order if the shortcut ones fail.  May have shortcuts.
+     *
+     * @return {function (Object)} a
+     *   function that takes source code and returns a list of decorations.
+     */
+    function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+        var shortcuts = {};
+        var tokenizer;
+        (function () {
+            var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+            var allRegexs = [];
+            var regexKeys = {};
+            for (var i = 0, n = allPatterns.length; i < n; ++i) {
+                var patternParts = allPatterns[i];
+                var shortcutChars = patternParts[3];
+                if (shortcutChars) {
+                    for (var c = shortcutChars.length; --c >= 0;) {
+                        shortcuts[shortcutChars.charAt(c)] = patternParts;
+                    }
+                }
+                var regex = patternParts[1];
+                var k = '' + regex;
+                if (!regexKeys.hasOwnProperty(k)) {
+                    allRegexs.push(regex);
+                    regexKeys[k] = null;
+                }
+            }
+            allRegexs.push(/[\0-\uffff]/);
+            tokenizer = combinePrefixPatterns(allRegexs);
+        })();
+
+        var nPatterns = fallthroughStylePatterns.length;
+
+        /**
+         * Lexes job.sourceCode and produces an output array job.decorations of
+         * style classes preceded by the position at which they start in
+         * job.sourceCode in order.
+         *
+         * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+         */
+        var decorate = function (job) {
+            var sourceCode = job.sourceCode, basePos = job.basePos;
+            /** Even entries are positions in source in ascending order.  Odd enties
+             * are style markers (e.g., PR_COMMENT) that run from that position until
+             * the end.
+             * @type {Array.<number|string>}
+             */
+            var decorations = [basePos, PR_PLAIN];
+            var pos = 0;  // index into sourceCode
+            var tokens = sourceCode.match(tokenizer) || [];
+            var styleCache = {};
+
+            for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+                var token = tokens[ti];
+                var style = styleCache[token];
+                var match = void 0;
+
+                var isEmbedded;
+                if (typeof style === 'string') {
+                    isEmbedded = false;
+                } else {
+                    var patternParts = shortcuts[token.charAt(0)];
+                    if (patternParts) {
+                        match = token.match(patternParts[1]);
+                        style = patternParts[0];
+                    } else {
+                        for (var i = 0; i < nPatterns; ++i) {
+                            patternParts = fallthroughStylePatterns[i];
+                            match = token.match(patternParts[1]);
+                            if (match) {
+                                style = patternParts[0];
+                                break;
+                            }
+                        }
+
+                        if (!match) {  // make sure that we make progress
+                            style = PR_PLAIN;
+                        }
+                    }
+
+                    isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+                    if (isEmbedded && !(match && typeof match[1] === 'string')) {
+                        isEmbedded = false;
+                        style = PR_SOURCE;
+                    }
+
+                    if (!isEmbedded) { styleCache[token] = style; }
+                }
+
+                var tokenStart = pos;
+                pos += token.length;
+
+                if (!isEmbedded) {
+                    decorations.push(basePos + tokenStart, style);
+                } else {  // Treat group 1 as an embedded block of source code.
+                    var embeddedSource = match[1];
+                    var embeddedSourceStart = token.indexOf(embeddedSource);
+                    var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+                    if (match[2]) {
+                        // If embeddedSource can be blank, then it would match at the
+                        // beginning which would cause us to infinitely recurse on the
+                        // entire token, so we catch the right context in match[2].
+                        embeddedSourceEnd = token.length - match[2].length;
+                        embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+                    }
+                    var lang = style.substring(5);
+                    // Decorate the left of the embedded source
+                    appendDecorations(
+                            basePos + tokenStart,
+                        token.substring(0, embeddedSourceStart),
+                        decorate, decorations);
+                    // Decorate the embedded source
+                    appendDecorations(
+                            basePos + tokenStart + embeddedSourceStart,
+                        embeddedSource,
+                        langHandlerForExtension(lang, embeddedSource),
+                        decorations);
+                    // Decorate the right of the embedded section
+                    appendDecorations(
+                            basePos + tokenStart + embeddedSourceEnd,
+                        token.substring(embeddedSourceEnd),
+                        decorate, decorations);
+                }
+            }
+            job.decorations = decorations;
+        };
+        return decorate;
+    }
+
+    /** returns a function that produces a list of decorations from source text.
+     *
+     * This code treats ", ', and ` as string delimiters, and \ as a string
+     * escape.  It does not recognize perl's qq() style strings.
+     * It has no special handling for double delimiter escapes as in basic, or
+     * the tripled delimiters used in python, but should work on those regardless
+     * although in those cases a single string literal may be broken up into
+     * multiple adjacent string literals.
+     *
+     * It recognizes C, C++, and shell style comments.
+     *
+     * @param {Object} options a set of optional parameters.
+     * @return {function (Object)} a function that examines the source code
+     *     in the input job and builds the decoration list.
+     */
+    function sourceDecorator(options) {
+        var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+        if (options['tripleQuotedStrings']) {
+            // '''multi-line-string''', 'single-line-string', and double-quoted
+            shortcutStylePatterns.push(
+                [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+                    null, '\'"']);
+        } else if (options['multiLineStrings']) {
+            // 'multi-line-string', "multi-line-string"
+            shortcutStylePatterns.push(
+                [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+                    null, '\'"`']);
+        } else {
+            // 'single-line-string', "single-line-string"
+            shortcutStylePatterns.push(
+                [PR_STRING,
+                    /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+                    null, '"\'']);
+        }
+        if (options['verbatimStrings']) {
+            // verbatim-string-literal production from the C# grammar.  See issue 93.
+            fallthroughStylePatterns.push(
+                [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+        }
+        var hc = options['hashComments'];
+        if (hc) {
+            if (options['cStyleComments']) {
+                if (hc > 1) {  // multiline hash comments
+                    shortcutStylePatterns.push(
+                        [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+
+                } else {
+                    // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+                }
+                fallthroughStylePatterns.push(
+                    [PR_STRING,
+                        /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+                        null]);
+            } else {
+                shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+            }
+        }
+        if (options['cStyleComments']) {
+            fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+            fallthroughStylePatterns.push(
+                [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+        }
+        if (options['regexLiterals']) {
+            /**
+             * @const
+             */
+            var REGEX_LITERAL = (
+                // A regular expression literal starts with a slash that is
+                // not followed by * or / so that it is not confused with
+                // comments.
+                '/(?=[^/*])'
+                // and then contains any number of raw characters,
+                + '(?:[^/\\x5B\\x5C]'
+                // escape sequences (\x5C),
+                +    '|\\x5C[\\s\\S]'
+                // or non-nesting character sets (\x5B\x5D);
+                +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+                // finally closed by a /.
+                + '/');
+            fallthroughStylePatterns.push(
+                ['lang-regex',
+                    new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+                ]);
+        }
+
+        var types = options['types'];
+        if (types) {
+            fallthroughStylePatterns.push([PR_TYPE, types]);
+        }
+
+        var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+        if (keywords.length) {
+            fallthroughStylePatterns.push(
+                [PR_KEYWORD,
+                    new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+                    null]);
+        }
+
+        shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+        fallthroughStylePatterns.push(
+            // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+            [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+            [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+            [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+            [PR_LITERAL,
+                new RegExp(
+                        '^(?:'
+                        // A hex number
+                        + '0x[a-f0-9]+'
+                        // or an octal or decimal number,
+                        + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+                        // possibly in scientific notation
+                        + '(?:e[+\\-]?\\d+)?'
+                        + ')'
+                        // with an optional modifier like UL for unsigned long
+                        + '[a-z]*', 'i'),
+                null, '0123456789'],
+            // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+            [PR_PLAIN,       /^\\[\s\S]?/, null],
+            [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+        return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+    }
+
+    var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+    });
+
+    /**
+     * Given a DOM subtree, wraps it in a list, and puts each line into its own
+     * list item.
+     *
+     * @param {Node} node modified in place.  Its content is pulled into an
+     *     HTMLOListElement, and each line is moved into a separate list item.
+     *     This requires cloning elements, so the input might not have unique
+     *     IDs after numbering.
+     */
+    function numberLines(node, opt_startLineNum) {
+        var nocode = /(?:^|\s)nocode(?:\s|$)/;
+        var lineBreak = /\r\n?|\n/;
+
+        var document = node.ownerDocument;
+
+        var whitespace;
+        if (node.currentStyle) {
+            whitespace = node.currentStyle.whiteSpace;
+        } else if (window.getComputedStyle) {
+            whitespace = document.defaultView.getComputedStyle(node, null)
+                .getPropertyValue('white-space');
+        }
+        // If it's preformatted, then we need to split lines on line breaks
+        // in addition to <BR>s.
+        var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+        var li = document.createElement('LI');
+        while (node.firstChild) {
+            li.appendChild(node.firstChild);
+        }
+        // An array of lines.  We split below, so this is initialized to one
+        // un-split line.
+        var listItems = [li];
+
+        function walk(node) {
+            switch (node.nodeType) {
+                case 1:  // Element
+                    if (nocode.test(node.className)) { break; }
+                    if ('BR' === node.nodeName) {
+                        breakAfter(node);
+                        // Discard the <BR> since it is now flush against a </LI>.
+                        if (node.parentNode) {
+                            node.parentNode.removeChild(node);
+                        }
+                    } else {
+                        for (var child = node.firstChild; child; child = child.nextSibling) {
+                            walk(child);
+                        }
+                    }
+                    break;
+                case 3: case 4:  // Text
+                if (isPreformatted) {
+                    var text = node.nodeValue;
+                    var match = text.match(lineBreak);
+                    if (match) {
+                        var firstLine = text.substring(0, match.index);
+                        node.nodeValue = firstLine;
+                        var tail = text.substring(match.index + match[0].length);
+                        if (tail) {
+                            var parent = node.parentNode;
+                            parent.insertBefore(
+                                document.createTextNode(tail), node.nextSibling);
+                        }
+                        breakAfter(node);
+                        if (!firstLine) {
+                            // Don't leave blank text nodes in the DOM.
+                            node.parentNode.removeChild(node);
+                        }
+                    }
+                }
+                break;
+            }
+        }
+
+        // Split a line after the given node.
+        function breakAfter(lineEndNode) {
+            // If there's nothing to the right, then we can skip ending the line
+            // here, and move root-wards since splitting just before an end-tag
+            // would require us to create a bunch of empty copies.
+            while (!lineEndNode.nextSibling) {
+                lineEndNode = lineEndNode.parentNode;
+                if (!lineEndNode) { return; }
+            }
+
+            function breakLeftOf(limit, copy) {
+                // Clone shallowly if this node needs to be on both sides of the break.
+                var rightSide = copy ? limit.cloneNode(false) : limit;
+                var parent = limit.parentNode;
+                if (parent) {
+                    // We clone the parent chain.
+                    // This helps us resurrect important styling elements that cross lines.
+                    // E.g. in <i>Foo<br>Bar</i>
+                    // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+                    var parentClone = breakLeftOf(parent, 1);
+                    // Move the clone and everything to the right of the original
+                    // onto the cloned parent.
+                    var next = limit.nextSibling;
+                    parentClone.appendChild(rightSide);
+                    for (var sibling = next; sibling; sibling = next) {
+                        next = sibling.nextSibling;
+                        parentClone.appendChild(sibling);
+                    }
+                }
+                return rightSide;
+            }
+
+            var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+
+            // Walk the parent chain until we reach an unattached LI.
+            for (var parent;
+                // Check nodeType since IE invents document fragments.
+                 (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+                copiedListItem = parent;
+            }
+            // Put it on the list of lines for later processing.
+            listItems.push(copiedListItem);
+        }
+
+        // Split lines while there are lines left to split.
+        for (var i = 0;  // Number of lines that have been split so far.
+             i < listItems.length;  // length updated by breakAfter calls.
+             ++i) {
+            walk(listItems[i]);
+        }
+
+        // Make sure numeric indices show correctly.
+        if (opt_startLineNum === (opt_startLineNum|0)) {
+            listItems[0].setAttribute('value', opt_startLineNum);
+        }
+
+        var ol = document.createElement('OL');
+        ol.className = 'linenums';
+        var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+        for (var i = 0, n = listItems.length; i < n; ++i) {
+            li = listItems[i];
+            // Stick a class on the LIs so that stylesheets can
+            // color odd/even rows, or any other row pattern that
+            // is co-prime with 10.
+            li.className = 'L' + ((i + offset) % 10);
+            if (!li.firstChild) {
+                li.appendChild(document.createTextNode('\xA0'));
+            }
+            ol.appendChild(li);
+        }
+
+        node.appendChild(ol);
+    }
+
+    /**
+     * Breaks {@code job.sourceCode} around style boundaries in
+     * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+     * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+     *       span.
+     *    decorations: {Array.<number|string} an array of style classes preceded
+     *       by the position at which they start in job.sourceCode in order
+     * }</pre>
+     * @private
+     */
+    function recombineTagsAndDecorations(job) {
+        var isIE = /\bMSIE\b/.test(navigator.userAgent);
+        var newlineRe = /\n/g;
+
+        var source = job.sourceCode;
+        var sourceLength = source.length;
+        // Index into source after the last code-unit recombined.
+        var sourceIndex = 0;
+
+        var spans = job.spans;
+        var nSpans = spans.length;
+        // Index into spans after the last span which ends at or before sourceIndex.
+        var spanIndex = 0;
+
+        var decorations = job.decorations;
+        var nDecorations = decorations.length;
+        // Index into decorations after the last decoration which ends at or before
+        // sourceIndex.
+        var decorationIndex = 0;
+
+        // Remove all zero-length decorations.
+        decorations[nDecorations] = sourceLength;
+        var decPos, i;
+        for (i = decPos = 0; i < nDecorations;) {
+            if (decorations[i] !== decorations[i + 2]) {
+                decorations[decPos++] = decorations[i++];
+                decorations[decPos++] = decorations[i++];
+            } else {
+                i += 2;
+            }
+        }
+        nDecorations = decPos;
+
+        // Simplify decorations.
+        for (i = decPos = 0; i < nDecorations;) {
+            var startPos = decorations[i];
+            // Conflate all adjacent decorations that use the same style.
+            var startDec = decorations[i + 1];
+            var end = i + 2;
+            while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+                end += 2;
+            }
+            decorations[decPos++] = startPos;
+            decorations[decPos++] = startDec;
+            i = end;
+        }
+
+        nDecorations = decorations.length = decPos;
+
+        var decoration = null;
+        while (spanIndex < nSpans) {
+            var spanStart = spans[spanIndex];
+            var spanEnd = spans[spanIndex + 2] || sourceLength;
+
+            var decStart = decorations[decorationIndex];
+            var decEnd = decorations[decorationIndex + 2] || sourceLength;
+
+            var end = Math.min(spanEnd, decEnd);
+
+            var textNode = spans[spanIndex + 1];
+            var styledText;
+            if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+                // Don't introduce spans around empty text nodes.
+                && (styledText = source.substring(sourceIndex, end))) {
+                // This may seem bizarre, and it is.  Emitting LF on IE causes the
+                // code to display with spaces instead of line breaks.
+                // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+                // space to appear at the beginning of every line but the first.
+                // Emitting an old Mac OS 9 line separator makes everything spiffy.
+                if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+                textNode.nodeValue = styledText;
+                var document = textNode.ownerDocument;
+                var span = document.createElement('SPAN');
+                span.className = decorations[decorationIndex + 1];
+                var parentNode = textNode.parentNode;
+                parentNode.replaceChild(span, textNode);
+                span.appendChild(textNode);
+                if (sourceIndex < spanEnd) {  // Split off a text node.
+                    spans[spanIndex + 1] = textNode
+                        // TODO: Possibly optimize by using '' if there's no flicker.
+                        = document.createTextNode(source.substring(end, spanEnd));
+                    parentNode.insertBefore(textNode, span.nextSibling);
+                }
+            }
+
+            sourceIndex = end;
+
+            if (sourceIndex >= spanEnd) {
+                spanIndex += 2;
+            }
+            if (sourceIndex >= decEnd) {
+                decorationIndex += 2;
+            }
+        }
+    }
+
+
+    /** Maps language-specific file extensions to handlers. */
+    var langHandlerRegistry = {};
+    /** Register a language handler for the given file extensions.
+     * @param {function (Object)} handler a function from source code to a list
+     *      of decorations.  Takes a single argument job which describes the
+     *      state of the computation.   The single parameter has the form
+     *      {@code {
+    *        sourceCode: {string} as plain text.
+     *        decorations: {Array.<number|string>} an array of style classes
+     *                     preceded by the position at which they start in
+     *                     job.sourceCode in order.
+     *                     The language handler should assigned this field.
+     *        basePos: {int} the position of source in the larger source chunk.
+     *                 All positions in the output decorations array are relative
+     *                 to the larger source chunk.
+     *      } }
+     * @param {Array.<string>} fileExtensions
+     */
+    function registerLangHandler(handler, fileExtensions) {
+        for (var i = fileExtensions.length; --i >= 0;) {
+            var ext = fileExtensions[i];
+            if (!langHandlerRegistry.hasOwnProperty(ext)) {
+                langHandlerRegistry[ext] = handler;
+            } else if (window['console']) {
+                console['warn']('cannot override language handler %s', ext);
+            }
+        }
+    }
+    function langHandlerForExtension(extension, source) {
+        if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+            // Treat it as markup if the first non whitespace character is a < and
+            // the last non-whitespace character is a >.
+            extension = /^\s*</.test(source)
+                ? 'default-markup'
+                : 'default-code';
+        }
+        return langHandlerRegistry[extension];
+    }
+    registerLangHandler(decorateSource, ['default-code']);
+    registerLangHandler(
+        createSimpleLexer(
+            [],
+            [
+                [PR_PLAIN,       /^[^<?]+/],
+                [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+                [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+                // Unescaped content in an unknown language
+                ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+                ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+                [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+                ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+                // Unescaped content in javascript.  (Or possibly vbscript).
+                ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+                // Contains unescaped stylesheet content
+                ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+                ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+            ]),
+        ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+    registerLangHandler(
+        createSimpleLexer(
+            [
+                [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+                [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+            ],
+            [
+                [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+                [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+                ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+                [PR_PUNCTUATION,  /^[=<>\/]+/],
+                ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+                ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+                ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+                ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+                ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+                ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+            ]),
+        ['in.tag']);
+    registerLangHandler(
+        createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+    registerLangHandler(sourceDecorator({
+        'keywords': CPP_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'types': C_TYPES
+    }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+    registerLangHandler(sourceDecorator({
+        'keywords': 'null,true,false'
+    }), ['json']);
+    registerLangHandler(sourceDecorator({
+        'keywords': CSHARP_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'verbatimStrings': true,
+        'types': C_TYPES
+    }), ['cs']);
+    registerLangHandler(sourceDecorator({
+        'keywords': JAVA_KEYWORDS,
+        'cStyleComments': true
+    }), ['java']);
+    registerLangHandler(sourceDecorator({
+        'keywords': SH_KEYWORDS,
+        'hashComments': true,
+        'multiLineStrings': true
+    }), ['bsh', 'csh', 'sh']);
+    registerLangHandler(sourceDecorator({
+        'keywords': PYTHON_KEYWORDS,
+        'hashComments': true,
+        'multiLineStrings': true,
+        'tripleQuotedStrings': true
+    }), ['cv', 'py']);
+    registerLangHandler(sourceDecorator({
+        'keywords': PERL_KEYWORDS,
+        'hashComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+    }), ['perl', 'pl', 'pm']);
+    registerLangHandler(sourceDecorator({
+        'keywords': RUBY_KEYWORDS,
+        'hashComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+    }), ['rb']);
+    registerLangHandler(sourceDecorator({
+        'keywords': JSCRIPT_KEYWORDS,
+        'cStyleComments': true,
+        'regexLiterals': true
+    }), ['js']);
+    registerLangHandler(sourceDecorator({
+        'keywords': COFFEE_KEYWORDS,
+        'hashComments': 3,  // ### style block comments
+        'cStyleComments': true,
+        'multilineStrings': true,
+        'tripleQuotedStrings': true,
+        'regexLiterals': true
+    }), ['coffee']);
+    registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+    function applyDecorator(job) {
+        var opt_langExtension = job.langExtension;
+
+        try {
+            // Extract tags, and convert the source code to plain text.
+            var sourceAndSpans = extractSourceSpans(job.sourceNode);
+            /** Plain text. @type {string} */
+            var source = sourceAndSpans.sourceCode;
+            job.sourceCode = source;
+            job.spans = sourceAndSpans.spans;
+            job.basePos = 0;
+
+            // Apply the appropriate language handler
+            langHandlerForExtension(opt_langExtension, source)(job);
+
+            // Integrate the decorations and tags back into the source code,
+            // modifying the sourceNode in place.
+            recombineTagsAndDecorations(job);
+        } catch (e) {
+            if ('console' in window) {
+                console['log'](e && e['stack'] ? e['stack'] : e);
+            }
+        }
+    }
+
+    /**
+     * @param sourceCodeHtml {string} The HTML to pretty print.
+     * @param opt_langExtension {string} The language name to use.
+     *     Typically, a filename extension like 'cpp' or 'java'.
+     * @param opt_numberLines {number|boolean} True to number lines,
+     *     or the 1-indexed number of the first line in sourceCodeHtml.
+     */
+    function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+        var container = document.createElement('PRE');
+        // This could cause images to load and onload listeners to fire.
+        // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+        // We assume that the inner HTML is from a trusted source.
+        container.innerHTML = sourceCodeHtml;
+        if (opt_numberLines) {
+            numberLines(container, opt_numberLines);
+        }
+
+        var job = {
+            langExtension: opt_langExtension,
+            numberLines: opt_numberLines,
+            sourceNode: container
+        };
+        applyDecorator(job);
+        return container.innerHTML;
+    }
+
+    function prettyPrint(opt_whenDone) {
+        function byTagName(tn) { return document.getElementsByTagName(tn); }
+        // fetch a list of nodes to rewrite
+        var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+        var elements = [];
+        for (var i = 0; i < codeSegments.length; ++i) {
+            for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+                elements.push(codeSegments[i][j]);
+            }
+        }
+        codeSegments = null;
+
+        var clock = Date;
+        if (!clock['now']) {
+            clock = { 'now': function () { return +(new Date); } };
+        }
+
+        // The loop is broken into a series of continuations to make sure that we
+        // don't make the browser unresponsive when rewriting a large page.
+        var k = 0;
+        var prettyPrintingJob;
+
+        var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+        var prettyPrintRe = /\bprettyprint\b/;
+
+        function doWork() {
+            var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                clock['now']() + 250 /* ms */ :
+                Infinity);
+            for (; k < elements.length && clock['now']() < endTime; k++) {
+                var cs = elements[k];
+                var className = cs.className;
+                if (className.indexOf('prettyprint') >= 0) {
+                    // If the classes includes a language extensions, use it.
+                    // Language extensions can be specified like
+                    //     <pre class="prettyprint lang-cpp">
+                    // the language extension "cpp" is used to find a language handler as
+                    // passed to PR.registerLangHandler.
+                    // HTML5 recommends that a language be specified using "language-"
+                    // as the prefix instead.  Google Code Prettify supports both.
+                    // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+                    var langExtension = className.match(langExtensionRe);
+                    // Support <pre class="prettyprint"><code class="language-c">
+                    var wrapper;
+                    if (!langExtension && (wrapper = childContentWrapper(cs))
+                        && "CODE" === wrapper.tagName) {
+                        langExtension = wrapper.className.match(langExtensionRe);
+                    }
+
+                    if (langExtension) {
+                        langExtension = langExtension[1];
+                    }
+
+                    // make sure this is not nested in an already prettified element
+                    var nested = false;
+                    for (var p = cs.parentNode; p; p = p.parentNode) {
+                        if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                            p.tagName === 'xmp') &&
+                            p.className && p.className.indexOf('prettyprint') >= 0) {
+                            nested = true;
+                            break;
+                        }
+                    }
+                    if (!nested) {
+                        // Look for a class like linenums or linenums:<n> where <n> is the
+                        // 1-indexed number of the first line.
+                        var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+                        lineNums = lineNums
+                            ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                            : false;
+                        if (lineNums) { numberLines(cs, lineNums); }
+
+                        // do the pretty printing
+                        prettyPrintingJob = {
+                            langExtension: langExtension,
+                            sourceNode: cs,
+                            numberLines: lineNums
+                        };
+                        applyDecorator(prettyPrintingJob);
+                    }
+                }
+            }
+            if (k < elements.length) {
+                // finish up in a continuation
+                setTimeout(doWork, 250);
+            } else if (opt_whenDone) {
+                opt_whenDone();
+            }
+        }
+
+        doWork();
+    }
+
+    /**
+     * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+     * {@code class=prettyprint} and prettify them.
+     *
+     * @param {Function?} opt_whenDone if specified, called when the last entry
+     *     has been finished.
+     */
+    window['prettyPrintOne'] = prettyPrintOne;
+    /**
+     * Pretty print a chunk of code.
+     *
+     * @param {string} sourceCodeHtml code as html
+     * @return {string} code as html, but prettier
+     */
+    window['prettyPrint'] = prettyPrint;
+    /**
+     * Contains functions for creating and registering new language handlers.
+     * @type {Object}
+     */
+    window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+    };
+})();
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/styles.css b/org.tizen.web.apireference/html/ui_fw_api/styles.css
new file mode 100644 (file)
index 0000000..d138fae
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/styles.css
@@ -0,0 +1,1712 @@
+body {
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 9pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th, ol, dl, dd, dt, footer {
+    font-family: Arial, Verdana, Helvetica, sans-serif
+}
+
+/*     Set default font to 9 pt        */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+    font-size: 9pt;
+}
+
+td.option {
+    white-space: nowrap;
+}
+
+pre {
+    font-family: "Courier New", Courier, monospace;
+    margin: 6px 1px;
+    padding: 1em;
+    font-weight: normal;
+    font-style: normal;
+    background-color: #D5F1FD;
+    word-wrap: break-word;
+}
+
+h1 {
+    font-size: 24pt;
+    color: #0E437D;
+}
+
+h2 {
+    font-size: 18pt;
+    color: #0E437D;
+}
+
+h3 {
+    font-size: 14pt;
+    color: #1C1C1C;
+}
+
+h4 {
+    font-size: 12pt;
+    color: #1C1C1C;
+}
+
+h5 {
+    font-size: 10pt;
+    color: #1C1C1C;
+}
+
+h1, h2, h3, h4, h5 {
+    font-weight: bold;
+    font-style: normal;
+    line-height: normal;
+    margin-top: 16pt;
+}
+
+caption, p.caption {
+    font-size: 9pt;
+    color: #1C1C1C;
+    font-weight: bold;
+    text-align: left;
+    margin-top: 20px;
+    margin-bottom: 0;
+}
+
+ol {
+    margin-bottom: 20px;
+}
+
+ul ul, ol ul, ul ol, ol ol {
+    margin-top: 10px;
+}
+
+ul li, ol li {
+    margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+    border-top: 2px solid #719cc7;
+    list-style-position: inside;
+    font-weight: bold;
+    margin-top: 30px;
+    margin-left: -20px;
+    padding-top: 3px;
+    font-size: 12pt;
+}
+
+ol.tutorstep li p {
+    font-size: 9pt;
+    font-weight: normal;
+    margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+    font-size: 9pt;
+    list-style-position: outside;
+    margin-left: 0;
+    font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+    font-size: 9pt;
+    font-weight: normal;
+    margin-top: 5px;
+}
+
+ol li p, ul li p {
+    font-size: 9pt;
+    font-weight: normal;
+    margin-bottom: 2px;
+    margin-top: 2px;
+}
+
+ol ol, ol.tutorstep ol {
+    font-size: 9pt;
+    font-weight: normal;
+    list-style-type: lower-alpha;
+    color: #1C1C1C;
+    border-style: none;
+    margin-top: 10px;
+}
+
+ol.tutorstep ul {
+    margin-top: 10px;
+    font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+    border-style: none;
+    margin-top: 5px;
+    font-size: 9pt;
+}
+
+ul {
+    font-size: 9pt;
+    font-weight: normal;
+    color: #1C1C1C;
+}
+
+/*     End of font face declarations   */
+
+/*     Set table borders and heading row background    */
+table {
+    border: 0;
+    border-collapse: collapse;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    margin-left: 2em;
+}
+
+th {
+    border-top: 2px solid #719cc7;
+    border-right: 1px solid #c6d9f1;
+    border-left: 1px solid #c6d9f1;
+    background-color: #f3f7fb;
+    padding: 4px;
+    color: #719cc7;
+    font-size: 9pt;
+    font-weight: bold;
+}
+
+td {
+    border: 1px solid #c6d9f1;
+    vertical-align: top;
+    padding: 3px 20px 5px 20px;
+}
+
+/*     Notes stand out using a light top & bottom borders with yellow background       */
+table.note {
+    border-top: 2px solid #719cc7;
+    border-left: 0;
+    border-right: 0;
+    width: 100%;
+}
+
+tr.note {
+    text-align: left;
+}
+
+th.note {
+    text-align: left;
+    background-color: #ddd9c3;
+    border-top: 2px solid #719cc7;
+    border-bottom: 1px solid #719cc7;
+    border-right: none;
+
+}
+
+td.note, p.note, div.note {
+    background-color: #eeece1;
+    color: #1C1C1C;
+    padding: 5px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    border: none;
+}
+
+/*     Figure titles are centered and bolded   */
+p.figure, ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+    text-align: center;
+    font-weight: bold;
+}
+
+/*     Red background and white text for things that need fixing before release        */
+.fix {
+    background-color: red;
+    font-weight: bold;
+    color: white;
+}
+
+/*     Footer includes space and a gray line above             */
+#footer {
+    font-size: 9pt;
+    padding-top: 10px;
+    margin-top: 20px;
+    text-align: center;
+    /* border-top:1px solid #EEEEEE; */
+}
+
+caption {
+    font-size: 9pt;
+    color: #1C1C1C;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 0;
+}
+
+div.qindex, div.navpath, div.navtab {
+    background-color: #e8eef2;
+    border: 1px solid #84b0c7;
+    text-align: center;
+    margin: 2px;
+    padding: 2px;
+}
+
+div.qindex, div.navpath {
+    width: 100%;
+    line-height: 140%;
+}
+
+div.navtab {
+    margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+    color: #719cc7;
+    text-decoration: underline;
+    font-weight: bold;
+}
+
+a:hover {
+    color: #0e437d;
+}
+
+a:visited {
+    text-decoration: underline;
+    color: #719cc7;
+    font-weight: bold;
+}
+
+a.qindex {
+    font-weight: bold;
+    padding: 2px;
+}
+
+a.qindex:hover {
+    text-decoration: underline;
+    color: #0e437d;
+    padding: 2px;
+}
+
+a.qindex:visited {
+    text-decoration: underline;
+    font-weight: bold;
+    color: #719cc7;
+    padding: 2px;
+}
+
+a.qindexHL {
+    text-decoration: underline;
+    font-weight: bold;
+    background-color: #6666cc;
+    color: #ffffff;
+    padding: 2px 6px;
+    border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+    text-decoration: none;
+    background-color: #6666cc;
+    color: #ffffff;
+    padding: 2px 6px;
+}
+
+div.banner {
+    padding: 8px 4px 0 4px;
+    /* top right bottom left */
+    border: 1px solid #7f7f7f;
+    width: 100%;
+    text-align: left;
+    font-weight: bold;
+    font-size: 9pt;
+    color: #ffffff;
+}
+
+div.footer {
+    font-size: 9pt;
+    padding-top: 10px;
+    margin-top: 20px;
+    text-align: center;
+}
+
+dl.el {
+    margin-left: -1cm
+}
+
+.fragment {
+    font-family: fixed, monospace;
+    font-size: 105%;
+}
+
+pre.fragment {
+    border: 1px solid #CCCCCC;
+    background-color: #f5f5f5;
+    padding: 4px 6px;
+    margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+    border: 1px solid #CCCCCC;
+    background-color: #f5f5f5;
+    padding: 6px;
+}
+
+div.ah {
+    background-color: black;
+    font-weight: bold;
+    color: #ffffff;
+    margin-bottom: 3px;
+    margin-top: 3px
+}
+
+td.md {
+    background-color: #f5f5f5;
+    font-weight: bold;
+}
+
+td.mdname1 {
+    background-color: #f5f5f5;
+    font-weight: bold;
+    color: #602020;
+}
+
+td.mdname {
+    background-color: #f5f5f5;
+    font-weight: bold;
+    color: #602020;
+    width: 600px;
+}
+
+div.groupHeader {
+    margin-left: 16px;
+    margin-top: 12px;
+    margin-bottom: 6px;
+    font-weight: bold;
+}
+
+div.groupText {
+    margin-left: 16px;
+    font-style: italic;
+}
+
+td.indexkey {
+    background-color: #eeeeff;
+    font-weight: bold;
+    border: 1px solid #CCCCCC;
+    margin: 2px 0 2px 0;
+    padding: 2px 10px;
+}
+
+td.indexvalue {
+    background-color: #eeeeff;
+    border: 1px solid #CCCCCC;
+    padding: 2px 10px;
+    margin: 2px 0;
+}
+
+tr.memlist {
+    background-color: #f0f0f0;
+}
+
+p.formulaDsp {
+    text-align: center;
+}
+
+img.formulaDsp {
+}
+
+img.formulaInl {
+    vertical-align: middle;
+}
+
+/* @group Code Colorization */
+
+span.keyword {
+    color: #008000
+}
+
+span.keywordtype {
+    color: #604020
+}
+
+span.keywordflow {
+    color: #e08000
+}
+
+span.comment {
+    color: #800000
+}
+
+span.preprocessor {
+    color: #806020
+}
+
+span.stringliteral {
+    color: #002080
+}
+
+span.charliteral {
+    color: #008080
+}
+
+span.vhdldigit {
+    color: #ff00ff
+}
+
+span.vhdlchar {
+    color: #000000
+}
+
+span.vhdlkeyword {
+    color: #700070
+}
+
+span.vhdllogic {
+    color: #ff0000
+}
+
+.mdTable {
+    border: 1px solid #868686;
+    background-color: #F4F4FB;
+}
+
+.mdRow {
+    padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+    background-color: #F4F4F4;
+    border: none;
+    margin: 4px;
+    padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+    padding: 0 8px 4px 8px;
+    color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+    border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+    color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+    font-size: 80%;
+    color: #606060;
+    font-weight: normal;
+    margin-left: 3px;
+}
+
+.memnav {
+    background-color: #eeeeff;
+    border: 1px solid #84b0c7;
+    text-align: center;
+    margin: 2px 15px 2px 2px;
+    padding: 2px;
+}
+
+.memitem {
+    padding: 0;
+}
+
+.memname {
+    white-space: nowrap;
+    font-weight: bold;
+}
+
+.memproto, .memdoc {
+    border: 1px solid #9BBCDD;
+}
+
+.memproto {
+    padding: 0;
+    background-color: #D5E2EF;
+    font-weight: bold;
+    -webkit-border-top-left-radius: 8px;
+    -webkit-border-top-right-radius: 8px;
+    -moz-border-radius-topleft: 8px;
+    -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+    padding: 2px 5px;
+    background-color: #eef3f5;
+    border-top-width: 0;
+    -webkit-border-bottom-left-radius: 8px;
+    -webkit-border-bottom-right-radius: 8px;
+    -moz-border-radius-bottomleft: 8px;
+    -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+    margin: 6px 0;
+}
+
+.paramkey {
+    text-align: right;
+}
+
+.paramtype {
+    white-space: nowrap;
+}
+
+.paramname {
+    color: #853E0E;
+    white-space: nowrap;
+}
+
+.paramname em {
+    font-style: normal;
+}
+
+/* @end */
+
+.search {
+    color: #003399;
+    font-weight: bold;
+}
+
+form.search {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+input.search {
+    font-size: 75%;
+    color: #000080;
+    font-weight: normal;
+    background-color: #eeeeff;
+}
+
+td.tiny {
+    font-size: 75%;
+}
+
+.highlight {
+    background-color: #E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse {
+    font-family: "Courier New", Courier, monospace;
+    margin: 0 0;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode {
+    background-color: #fff;
+    color: #000;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_keyword {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_type {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string {
+    color: #2A00FF;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_comment {
+    color: #238E23;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_number {
+    color: #000;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_preproc {
+    color: #3f5fbf;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_function {
+    color: #000;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_url {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_date {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_time {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_file {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_ip {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_name {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_variable {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_newfile {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_difflines {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_selector {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_property {
+    color: #7f0055;
+    font-weight: bold;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_value {
+    color: #00f;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.sh_ide-eclipse .sh_sourceCode .sh_unknown {
+    font-family: "Courier New", Courier, monospace;
+}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML {
+    color: #800000;
+    font-weight: bold;
+}
+
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {
+    position: relative;
+}
+
+*:first-child + html .snippet-wrap {
+    display: inline-block;
+}
+
+* html .snippet-wrap {
+    display: inline-block;
+}
+
+.snippet-reveal {
+    text-decoration: underline;
+}
+
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {
+    position: absolute;
+    top: -99999px;
+    right: 15px;
+    font-size: .9em;
+    z-index: 1;
+    background-color: transparent;
+}
+
+.snippet-wrap .snippet-hide {
+    top: auto;
+    bottom: 1px;
+}
+
+*:first-child + html .snippet-wrap .snippet-hide {
+    bottom: 1px;
+}
+
+* html .snippet-wrap .snippet-hide {
+    bottom: 1px;
+}
+
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {
+    background-color: transparent;
+    margin: 1px;
+    padding: 0;
+}
+
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {
+    padding: 1px;
+    text-decoration: underline;
+}
+
+.snippet-wrap pre.sh_sourceCode {
+    padding: 1px;
+    line-height: 120%;
+    overflow: auto;
+    position: relative;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    box-shadow: 1px 1px #000;
+    -moz-box-shadow: 2px 2px 1px #000;
+    -webkit-box-shadow: 1px 1px 1px #000;
+}
+
+.snippet-wrap pre.snippet-textonly {
+    padding: 1em;
+}
+
+*:first-child + html .snippet-wrap pre.snippet-formatted {
+    padding: 0.5em 0.5em;
+}
+
+* html .snippet-wrap pre.snippet-formatted {
+    padding: 0 0.3em;
+}
+
+.snippet-reveal pre.sh_sourceCode {
+    padding: 0;
+    text-align: right;
+}
+
+.snippet-wrap .snippet-num li {
+    padding-left: 2px;
+}
+
+.snippet-wrap .snippet-no-num {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.snippet-wrap .snippet-no-num li {
+    list-style: none;
+    padding-left: 0;
+}
+
+.snippet-wrap .snippet-num {
+    margin: 1em 0 1em 1em;
+    padding-left: 2px;
+}
+
+.snippet-wrap .snippet-num li {
+    list-style: decimal-leading-zero outside none;
+}
+
+.snippet-wrap .snippet-no-num li.box {
+    padding: 0 6px;
+    margin-left: -6px;
+}
+
+.snippet-wrap .snippet-num li.box {
+    border: 1px solid;
+    list-style-position: inside;
+    margin-left: 0;
+    padding-left: 2px;
+}
+
+*:first-child + html .snippet-wrap .snippet-num li.box {
+    margin-left: -2px;
+}
+
+* html .snippet-wrap .snippet-num li.box {
+    margin-left: -2px;
+}
+
+.snippet-wrap li.box-top {
+    border-width: 0 0 0 !important;
+}
+
+.snippet-wrap li.box-bot {
+    border-width: 0 0 0 !important;
+}
+
+.snippet-wrap li.box-mid {
+    border-width: 0 0 !important;
+}
+
+.snippet-wrap .snippet-num li .box-sp {
+    width: 10px;
+    display: inline-block;
+}
+
+*:first-child + html .snippet-wrap .snippet-num li .box-sp {
+    width: 20px;
+}
+
+* html .snippet-wrap .snippet-num li .box-sp {
+    width: 2px;
+}
+
+.snippet-wrap .snippet-no-num li.box {
+    border: 1px solid;
+}
+
+.snippet-wrap .snippet-no-num li .box-sp {
+    display: none;
+}
+
+.attribute {
+    padding-bottom: 15px;
+}
+
+#content pre {
+    /*text-align: left;            -webkit-border-radius: 8px;     -khtml-border-radius: 8px;     -moz-border-radius: 8px;     border-radius: 8px;     border: 1px solid rgba(255, 255, 255, 0.2);     display:block;     color:#2c3123;     margin:15px 0px 15px -8px;     padding:12px 20px 12px 35px;     font-size: 14px;     /*overflow:hidden;*/
+    /*word-wrap:break-word;*/
+    /*white-space: normal;*/
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+#content pre code {
+    font-size: 1em;
+    margin: 0;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+#content .prettyprint {
+}
+
+#content .signature {
+    background-color: #FCE6B9;
+    word-wrap: break-word;
+}
+
+#content .webidl {
+    background-color: #D9F0C4;
+    word-wrap: break-word;
+}
+
+#content .prettyprint b {
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+
+#content pre select {
+    border: 1px solid #c61800;
+}
+
+#content input {
+    font-size: 16px;
+    margin-right: 10px;
+    font-family: Helvetica,serif;
+    padding: 3px;
+}
+
+#content input[type="range"] {
+    width: 100%;
+}
+
+#content button {
+    margin: 20px 10px 0 0;
+    font-family: Verdana,serif;
+}
+
+#content button.large {
+    font-size: 32px;
+}
+
+#content pre b {
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+
+#content pre em {
+    font-weight: normal;
+    font-style: normal;
+    color: #18a600;
+}
+
+#content pre input[type="range"] {
+    height: 6px;
+    cursor: pointer;
+    width: auto;
+}
+
+#content .product, #content .product-ua, #content .product-cc {
+}
+
+#content dfn.external {
+    font-weight: normal;
+    font-style: italic;
+}
+
+#content pre.idl {
+    border: solid thin;
+    background: #eee;
+    color: #000;
+    padding: 0.5em;
+}
+
+#content pre.idl :link, #content pre.idl :visited {
+    color: inherit;
+    background: transparent;
+}
+
+#content dfn {
+    font-style: normal;
+    font-weight: bolder;
+}
+
+#content em.ct, #content em.ct-samp {
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: normal;
+}
+
+#content .issue {
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #ffc;
+}
+
+#content .issue::before {
+    content: "Issue";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .comment {
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #fff;
+}
+
+#content .comment::before {
+    content: "Comment";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .ws3 {
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+#content .ws3::before {
+    content: "For WS3 Review";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .ws4 {
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+#content .ws4::before {
+    content: "Under discussion";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .note {
+    margin-left: 0;
+    border: 2px solid #E2FFF0;
+    color: #444;
+    background-color: #E2FFF0;
+}
+
+#content dd > dl {
+    padding: 0;
+    margin: 0 0 15px;
+}
+
+#content code {
+    font-size: 1.1em;
+    text-decoration: none;
+    color: #002108;
+}
+
+#content .dir_listing li {
+    list-style-type: none;
+    font-family: Tahoma, Arial, Helvetica, sans-serif;
+}
+
+#content span span {
+    /*background-color: yellow;*/
+}
+
+#content .authorguide {
+    border: 1px solid #67BBB5;
+    background: #E8EBFC;
+    padding: 1em;
+    font-size: .9em;
+    color: #003;
+}
+
+#content .authorguide strong {
+    padding: .2em;
+    color: #003;
+    border: none;
+    position: relative;
+    display: block;
+    width: 200px;
+    left: -1.5em;
+    top: -1.5em;
+    background: #C6D8E6;
+    text-align: center;
+}
+
+#content span.notetitle {
+    padding: .2em;
+    color: #066;
+    border: none;
+    position: relative;
+    display: block;
+    width: 40px;
+    left: -1.5em;
+    top: -.7em;
+    background: #F2FFF1;
+    text-align: center;
+}
+
+#content var {
+    font-family: "Lucida Console", Monaco, monospace;
+}
+
+#content li.folder li {
+    list-style-image: none;
+}
+
+#content .dir_listing .comment {
+    border: none;
+    font-family: "Courier New", Courier, monospace;
+    color: #669933;
+}
+
+#content .dir_listing img {
+    vertical-align: middle;
+}
+
+#content .redNote {
+    color: red;
+}
+
+#content dl.procedure dt {
+    font-weight: normal;
+}
+
+#content .editorialNote {
+    padding: 5px;
+    background-color: #F3B9B7;
+    border: 3px dashed #FFEEB8;
+    color: #444;
+    font-size: 0.8em;
+}
+
+#content p[id]:after {
+    font-size: .8em;
+}
+
+#content table.wac {
+    border-spacing: 2px;
+    border: 1px outset #808080;
+    border-collapse: collapse;
+    background-color: #ffffff;
+}
+
+#content table.wac th {
+    padding: 1px;
+    border: 1px inset #808080;
+    background-color: #ffffff;
+}
+
+#content table.wac td {
+    vertical-align: top;
+    padding: 1px;
+    border: 1px inset #808080;
+    background-color: #ffffff;
+}
+
+#content .wacreqid {
+    font-weight: bold;
+}
+
+#content .wacreqid_ext {
+    font-weight: bold;
+}
+
+/* Table styles */
+#content table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    border-bottom: 3px solid #005a9c;
+    margin-bottom: 1em;
+}
+
+#content th {
+    border-top: 2px solid #719cc7;
+    border-right: 1px solid #c6d9f1;
+    border-left: 1px solid #c6d9f1;
+    background-color: #3D9EC9;
+    padding: 0.5em 4em 0.5em 1em;
+    color: White;
+    font-size: 9pt;
+    font-weight: bold;
+}
+
+#content th[scope="row"] {
+    background: inherit;
+    color: inherit;
+    border-top: 1px solid #ddd;
+}
+
+#content td {
+    padding: 0.5em 4em 0.5em 1em;
+    border-top: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+}
+
+/*
+#content th:last-of-type, td:last-of-type
+{
+    border-right: none;
+}
+
+#content tr:nth-child(even)
+{
+    background: #f0f6ff;
+}
+*/
+#content .attrName {
+    font-size: 10pt;
+    font-weight: bold;
+}
+
+#content .methodName {
+    font-size: 13pt;
+    font-weight: bold;
+}
+
+#content {
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+#content :link {
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+
+#content :visited {
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+
+#content a:active {
+    color: #C00;
+    background: transparent;
+}
+
+#content a:link img, #content a:visited img {
+    border-style: none;
+}
+
+/* no border on img links */
+
+#content a img {
+    color: white;
+}
+
+/* trick to hide the border in Netscape 4 */
+@media all {
+    /* hide the next rule from Netscape 4 */
+    #content a img {
+        color: inherit;
+    }
+
+    /* undo the color change above */
+}
+
+#content th, #content td {
+    /* ns 4 */
+    /*font-family: sans-serif;*/
+    font-size: 10pt;
+}
+
+#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
+    text-align: left;
+    font-family: Arial, Verdana, Helvetica, sans-serif;
+}
+
+/* background should be transparent, but WebTV has a bug */
+#content h1, #content h2, #content h3, #content h4 {
+    color: #005A9C;
+    background: white;
+    padding-top: 0.2em;
+}
+
+#content h1 {
+    font-size: 24pt;
+    color: #0E437D;
+}
+
+#content h2 {
+    font-size: 18pt;
+    color: #0E437D;
+}
+
+#content h3 {
+    font-size: 14pt;
+    color: #1C1C1C;
+}
+
+#content h4 {
+    font-size: 12pt;
+    color: #1C1C1C;
+    font-weight: bold;
+}
+
+#content h5 {
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-style: italic;
+    font-weight: bold;
+}
+
+#content h6 {
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-weight: bold;
+    font-variant: small-caps;
+}
+
+#content .hide {
+    display: none;
+}
+
+#content div.head {
+    margin-bottom: 1em;
+}
+
+#content div.head h1 {
+    margin-top: 2em;
+    clear: both;
+}
+
+#content div.head table {
+    margin-left: 2em;
+    margin-top: 2em;
+}
+
+#content p.copyright {
+    font-size: small;
+}
+
+#content p.copyright small {
+    font-size: small;
+}
+
+#content a[href] img:hover {
+    background: white;
+}
+
+@media screen {
+    /* hide from IE3 */
+    #content a[href]:hover {
+        background: #ffa;
+    }
+}
+
+#content pre {
+    margin-left: 2em;
+}
+
+/*
+       #content  p {
+         margin-top: 0.6em;
+         margin-bottom: 0.6em;
+       }
+       */
+
+/* opera 3.50 */
+#content dt, #content dd {
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+
+#content pre, #content code {
+    font-family: monospace;
+}
+
+/* navigator 4 requires this */
+
+#content ul.xmlconfig {
+    display: inline-block;
+    padding-right: 3%;
+    border: 1px dotted;
+}
+
+@media aural {
+    #content h1, #content h2, #content h3 {
+        stress: 20;
+        richness: 90;
+    }
+
+    #content .hide {
+        speak: none;
+    }
+
+    #content p.copyright {
+        volume: x-soft;
+        speech-rate: x-fast;
+    }
+
+    #content pre {
+        speak-punctuation: code;
+    }
+}
+
+#content div.exampleInner pre {
+    margin-left: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#content div.exampleOuter {
+    border: 4px double gray;
+    margin: 0;
+    padding: 0;
+}
+
+#content div.exampleInner {
+    background-color: #d5dee3;
+    border-top: 4px double #d3d3d3;
+    border-bottom: 4px double #d3d3d3;
+    padding: 4px;
+    margin: 0;
+}
+
+#content div.exampleWrapper {
+    margin: 4px;
+}
+
+#content div.exampleHeader {
+    font-weight: bold;
+    margin: 4px;
+}
+
+#content .def-api-feature dt, #content dt .def-device-cap, #content dt.const code {
+    font: bold 100% sans-serif;
+}
+
+#content dt.attribute code, #content dt.method code {
+    font: italic 100% sans-serif;
+}
+
+#content .def-device-caps dd {
+    margin-bottom: 2em;
+}
+
+#content dt.method {
+    margin-top: 2em;
+}
+
+#content .summary td {
+    text-align: left;
+    background-color: white;
+    color: inherit;
+    font-family: monospace;
+    white-space: pre;
+    padding: .3em 1em .3em 1em;
+}
+
+/* Pretty printing styles. Used with prettify.js. */
+
+#content .str {
+    color: #080;
+}
+
+#content .kwd {
+    color: #008;
+}
+
+#content .com {
+    color: #800;
+}
+
+#content .typ {
+    color: #606;
+}
+
+#content .lit {
+    color: #066;
+}
+
+#content .pun {
+    color: #660;
+}
+
+#content .pln {
+    color: #000;
+}
+
+#content .tag {
+    color: #008;
+}
+
+#content .atn {
+    color: #606;
+}
+
+#content .atv {
+    color: #080;
+}
+
+#content .dec {
+    color: #606;
+}
+
+#content .readonly {
+    color: red;
+}
+
+#content .type {
+    color: #F0ACF0;
+}
+
+#content .optional
+{
+    font-style: italic;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+#content ol.linenums {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+#content li.L0, #content li.L1, #content li.L2, #content li.L3, #content li.L5, #content li.L6, #content li.L7, #content li.L8 {
+    list-style-type: none;
+}
+
+/* Alternate shading for lines */
+#content li.L1, #content li.L3, #content li.L5, #content li.L7, #content li.L9 {
+    background: #eee;
+}
+
+/*@media print {*/
+#content .str {
+    color: #060;
+}
+
+#content .kwd {
+    color: #006;
+    font-weight: bold;
+}
+
+#content .com {
+    color: #600;
+    font-style: italic;
+}
+
+#content .typ {
+    color: #404;
+    font-weight: bold;
+}
+
+#content .lit {
+    color: #044;
+}
+
+#content .pun {
+    color: #440;
+}
+
+#content .pln {
+    color: #000;
+}
+
+#content .tag {
+    color: #006;
+    font-weight: bold;
+}
+
+#content .atn {
+    color: #404;
+}
+
+#content .atv {
+    color: #060;
+}
+
+/*}*/
+
+/* div.status Styles */
+#content a[href].status:link {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+#content a[href].status:visited {
+    color: #ffffff;
+}
+
+#content a[href].status:hover {
+    color: #3D9EC9;
+}
+
+/* Footer Styles */
+#footer {
+    background-color: #DDDDDD;
+    margin-top: 20px;
+    font-size: .8em;
+    padding: 20px;
+    color: #666;
+}
+
+#footer .sponsor {
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    float: right;
+}
+
+#footer .trademark {
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    clear: both;
+}
+
+#footer ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#footer li {
+    margin-bottom: 2px;
+}
+
+.version, span.param, .except, .example, .return, .privilege, .remark, .privilegelevel {
+    font-weight: bold;
+}
+
+span.name {
+    font-weight: bold;
+}
+
+li.feature {
+    margin-left: 30px;
+    font-weight: bold;
+}
+
+#content pre.intable {
+    margin: 0;
+    background: white;
+    padding: 0;
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.toc {
+    list-style-type: decimal;
+    margin-bottom: 0;
+    margin-top: 5px;
+}
+
+ol.toc li {
+    margin-bottom: 0;
+    margin-top: 5px;
+}
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html b/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html
new file mode 100644 (file)
index 0000000..cbff636
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 UI Framework Reference</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <h1>Tizen Web UI Framework Reference</h1>
+
+ 
+<p>Click the profile you want:</p>
+<p><a href="mobile/index.htm"><img alt="Mobile Web" src="../images/mw_division.png"/></a> <a href="wearable/index.htm"><img alt="Wearable Web" src="../images/ww_division.png"/></a></p>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/event/drag.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/drag.htm
new file mode 100644 (file)
index 0000000..95ae118
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/drag.htm
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Drag Event</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Drag Event</h1>
+<p>Drag event is a set of events that are triggered when the user drags on a gesture-enabled element. The following table defines the triggered events.
+</p>
+
+<table>
+       <caption>Table: Drag events</caption>
+<tbody>
+       <tr>
+               <th>Event</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">dragstart</span></td>
+               <td>Triggered when a touch point is placed on the touch surface.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">drag</span></td>
+               <td>Triggered when a touch point is moved along the touch surface.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">dragend</span></td>
+               <td>Triggered when a touch point is removed from the touch surface.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">dragcancel</span></td>
+               <td>Triggered when the touch is cancelled or another gesture is triggered.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>The following table describes the supported drag event options.</p>
+
+<table>
+       <caption>Table: Drag event options</caption>
+<tbody>
+       <tr>
+               <th>Option</th>
+               <th>Type</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">blockHorizontal</span></td>
+               <td>Boolean</td>
+               <td>Prevents the default browser behavior when horizontal dragging movement occurs with care. This makes the element a blocking element.
+               <p>When using the drag gesture, set this to <span style="font-family: Courier New,Courier,monospace">true</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">blockVertical</span></td>
+               <td>Boolean</td>
+               <td>Prevents the default browser behavior when vertical dragging movement occurs with care. This makes the element a blocking element.
+               <p>When using the drag gesture, set this to <span style="font-family: Courier New,Courier,monospace">true</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">threshold</span></td>
+               <td>Integer</td>
+               <td>Minimum required movement before the drag event is triggered.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">delay</span></td>
+               <td>Integer</td>
+               <td>Delay used for the drag lock.
+<p>The drag lock kicks in when the delta timestamp is bigger than the delay. This ensures that locking occurs only when the direction can be reliably determined.</p></td>
+       </tr>
+</tbody>
+</table>
+
+
+<p>To use a drag event in the application, use the following code:</p>
+<pre class="prettyprint">
+var element = document.getElementById(&quot;test_el&quot;);
+tau.event.enableGesture(element, new tau.event.gesture.Drag(
+{
+&nbsp;&nbsp;&nbsp;blockVertical: true
+}));
+
+element.addEventListener(&quot;dragstart&quot;, function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;dragstart&quot;);
+});
+
+element.addEventListener(&quot;drag&quot;, function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;direction = &quot; + e.detail.direction);
+});
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/event/events.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/events.htm
new file mode 100644 (file)
index 0000000..d905e35
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/events.htm
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Events</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Events</h1>
+<p>The Web UI framework (called as <b>TAU</b>; Tizen Advanced UI framework) provides events optimized for the Tizen Web application. The following table displays the events provided by the Tizen wearable Web UI framework.
+</p>
+
+<table>
+       <caption>Table: Tizen wearable Web UI framework events</caption>
+<tbody>
+       <tr>
+               <th>Event Group</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><a href="gesture.htm">Gesture</a></td>
+               <td>Provides drag and swipe events for elements.</td>
+       </tr>
+</tbody>
+</table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/event/gesture.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/gesture.htm
new file mode 100644 (file)
index 0000000..5ee3a74
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/gesture.htm
@@ -0,0 +1,180 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Gesture Events</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Gesture Events</h1>
+<p>The Web UI framework provides gesture events optimized for the Tizen Web application. The following table displays the gesture events provided by the Tizen wearable Web UI framework.
+</p>
+
+<table>
+       <caption>Table: Gesture events</caption>
+<tbody>
+       <tr>
+               <th style="width:10%;">Gesture</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><a href="drag.htm">Drag</a></td>
+               <td>Triggered when the user drags on a gesture-enabled element.</td>
+       </tr>
+       <tr>
+               <td><a href="swipe.htm">Swipe</a></td>
+               <td>Triggered when the user swipes on a gesture-enabled element.</td>
+       </tr>   
+</tbody>
+</table>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>The drag and swipe gestures differ in their speed. A swipe is quick drag, which animates, for example, a block translation. A drag, on the other hand, connects elements with a finger position, and waits for the end event to do something during or at the end of dragging. 
+</p></td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+<p>The following table describes custom gesture event-related methods.</p>
+
+<table>
+       <caption>Table: Event methods</caption>
+<tbody>
+       <tr>
+               <th>Method</th>
+               <th>Parameter</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">enableGesture()</span></td>
+               <td><span style="font-family: Courier New,Courier,monospace">Element</span>: element
+               <p><span style="font-family: Courier New,Courier,monospace">Object</span>: gesture object</p></td>
+               <td><p>Creates a gesture event listener for the element. The first parameter must be an inserted element.</p>
+               </td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">disableGesture()</span></td>
+               <td><span style="font-family: Courier New,Courier,monospace">Element</span>: element
+               <p><span style="font-family: Courier New,Courier,monospace">Object</span>: gesture object</p></td>
+               <td><p>Removes the gesture event listener from the element. The first parameter must be an inserted element.</p></td>
+       </tr>
+</tbody>
+</table>
+
+
+<p>To use a custom event, use the following code:</p>
+<pre class="prettyprint">
+var element = document.getElementById(&quot;test_el&quot;);
+tau.event.enableGesture(element, new tau.event.gesture.Drag(), new tau.event.gesture.Swipe());
+element.addEventListener(&quot;drag&quot;, function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;drag event fired&quot;);
+} );
+element.addEventListener(&quot;swipe&quot;, function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;swipe event fired&quot;);
+} );
+</pre>
+
+<p>The following table displays the custom event detail data.</p>
+
+<table>
+       <caption>Table: Custom event data</caption>
+<tbody>
+       <tr>
+               <th>Property</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">timeStamp</span></td>
+               <td>Time when the event occurs.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pointer</span></td>
+               <td>Position of the first touch. Contains pageX and pageY.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pointers</span></td>
+               <td>Touches (fingers or mouse) on the screen.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">deltaTime</span></td>
+               <td>Total time of the touches on the screen.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">deltaX</span></td>
+               <td>Delta of the touch move on the x axis</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">deltaY</span></td>
+               <td>Delta of the touch move on the y axis</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">velocityX</span></td>
+               <td>Velocity on the x axis.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">velocityY</span></td>
+               <td>Velocity on the y axis.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">angle</span></td>
+               <td>Angle at which the touch moves from the start point.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">direction</span></td>
+               <td>Move direction from the start point. The value matches <span style="font-family: Courier New,Courier,monospace">&quot;UP&quot;|&quot;DOWN&quot;|&quot;LEFT&quot;|&quot;RIGHT&quot;</span>.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">distance</span></td>
+               <td>Moved distance.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">scale</span></td>
+               <td>Scaling of the touches (requires 2 touches).</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">rotation</span></td>
+               <td>Rotation of the touches (requires 2 touches).</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">eventType</span></td>
+               <td>Event type. The value matches <span style="font-family: Courier New,Courier,monospace">&quot;START&quot;|&quot;MOVE&quot;|&quot;END&quot;|&quot;CANCEL&quot;</span>.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">srcEvent</span></td>
+               <td>Source event, such as <span style="font-family: Courier New,Courier,monospace">TouchStart</span> or <span style="font-family: Courier New,Courier,monospace">MouseDown</span>.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">startEvent</span></td>
+               <td>Same properties as above, but calculated from the first touch. The value is used to calculate, for example, distances, deltaTime, and scaling.</td>
+       </tr>   
+</tbody>
+</table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/event/swipe.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/swipe.htm
new file mode 100644 (file)
index 0000000..01e4d8b
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/event/swipe.htm
@@ -0,0 +1,91 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Swipe Event</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Swipe Event</h1>
+<p>Swipe event is triggered when the user swipes on a gesture-enabled element. The following table defines the triggered event.
+</p>
+
+<table>
+       <caption>Table: Swipe event</caption>
+<tbody>
+       <tr>
+               <th>Event</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipe</span></td>
+               <td>Triggered when the user swipes the target element.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>The following table describes the supported swipe event options.</p>
+
+<table>
+       <caption>Table: Swipe event options</caption>
+<tbody>
+       <tr>
+               <th>Option</th>
+               <th>Type</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">velocity</span></td>
+               <td>Integer</td>
+               <td>Minimum required velocity before the swipe event is triggered.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">orientation</span></td>
+               <td>String</td>
+               <td>Swipe orientation. 
+               <p>The possible values are <span style="font-family: Courier New,Courier,monospace">vertical</span> and <span style="font-family: Courier New,Courier,monospace">horizontal</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">timeThreshold</span></td>
+               <td>Integer</td>
+               <td>Time threshold for detecting a swipe event.</td>
+       </tr>
+</tbody>
+</table>
+
+
+<p>To use a swipe event in the application, use the following code:</p>
+<pre class="prettyprint">
+var element = document.getElementById(&quot;test_el&quot;);
+tau.event.enableGesture(element, new tau.event.gesture.Swipe(
+{
+&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;
+}));
+
+element.addEventListener(&quot;swipe&quot;, function(e) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;swipe  = &quot; + e.detail.direction);
+});
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm
new file mode 100644 (file)
index 0000000..0c33c9f
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Tizen Wearable Web UI Framework Reference</title>
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Tizen Wearable Web UI Framework Reference</h1>
+
+<p><b>The Web UI framework is called Tizen Advanced UI (TAU) framework.</b> The Web UI framework is used for page navigation and developing applications based on the Tizen wearable themes.</p>
+
+<p>The Web UI Framework in wearable Web applications consists of the followings:</p>
+<ul>
+       <li>Page navigation
+       <p>Navigation JavaScript library is provided to allow smooth navigation between Tizen wearable application <a href="page/app_page_layout.htm">pages</a>.
+       </p></li>
+       <li>Web theme
+       <p>CSS themes and resources (compatible with the UI component source code) are available for Tizen Wearable Web <a href="widgets/widget_reference.htm">UI components</a>.</p></li>
+       <li>Element events
+       <p>The Tizen Wearable Web UI Framework provides <a href="event/events.htm">events</a> optimized for the Web applications. </p></li>
+</ul>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>The Web UI Framework runs only on browsers supporting the HTML5/CSS standards. The draft version of the W3C specification is not fully supported.</p></td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm
new file mode 100644 (file)
index 0000000..d989306
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm
@@ -0,0 +1,143 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Application Page Layout</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Application Page Layout</h1>
+<p>In the Web UI framework (called as <b>TAU</b>; Tizen Advanced UI framework) for Wearable Web Applications, the application page structure is based on a header and content elements:</p>
+<ul><li>
+<p>The header is placed at the top, and displays the page title.</p></li>
+<li><p> The content is the section below the header, showing the main content of the page.</p></li></ul>
+
+<h2>Basic Layout</h2>
+
+<p>The following table describes the specific information for each section.</p>
+
+<table>
+       <caption>Table: Page sections</caption>
+<tbody>
+       <tr>
+               <th style="width:10%;">Section</th>
+               <th>Class</th>
+               <th>Mandatory</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td rowspan="2">Page</td>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-page</span></td>
+               <td>Yes</td>
+               <td><p>Defines the element as a page.</p>
+               <p>The page component is used to manage a single item in a page-based architecture.</p>
+               <p>A page is composed of header (optional), content (mandatory), and footer (optional) elements.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-page-active</span></td>
+               <td>No</td>
+               <td>If an application has a static start page, insert the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class in the page element to speed up the application launch. The start page with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class can be displayed before the framework is fully loaded.
+<p>If this class is not used, the framework inserts the class automatically to the first page of the application. However, this has a slowing effect on the application launch, because the page is displayed only after the framework is fully loaded.</p></td>
+       </tr>
+       <tr>
+               <td>Header</td>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-header</span></td>
+               <td>No</td>
+               <td><p>Defines the element as a header.</p>
+               <p>As the Tizen wearable device screen size is small, avoid using the header element.</p></td>
+       </tr>
+       <tr>
+               <td>Content</td>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-content</span></td>
+               <td>Yes</td>
+               <td><p>Defines the element as content.</p></td>
+       </tr>
+       <tr>
+               <td>Footer</td>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-footer</span></td>
+               <td>No</td>
+               <td><p>Defines the element as a footer.</p>
+               <p>The footer section is mostly used to include option buttons.</p></td>
+       </tr>
+</tbody>
+</table>
+
+
+<p>To add a page to the application, use the following code:</p>
+<pre class="prettyprint">
+&lt;!--Page layout--&gt;
+&lt;div class=&quot;ui-page ui-page-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer&quot;&gt;&lt;/footer&gt;
+&lt;/div&gt;
+
+&lt;!--Page layout with more button in header--&gt;
+&lt;div class=&quot;ui-page ui-page-active&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;Call menu&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&quot;&gt;Content message&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Footer Button&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<h2>Fixed header/footer Layout</h2>
+<p>You can layout your application with fixed header or fixed footer.<p>
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">This attributes are supported since <strong>2.3</strong></td>
+       </tr>
+       </tbody>
+</table>
+<p>You can use fixed-header/footer very simply by just adding class. Please refer following code:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page ui-scroll-on&quot;&gt;
+       &lt;header class=&quot;ui-header ui-fixed&quot;&gt;
+               &lt;h2 class=&quot;ui-title&quot;&gt;Header Fixed&lt;/h2&gt;
+       &lt;/header&gt;
+       &lt;div class=&quot;ui-content content-padding&quot;&gt;
+               It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday...
+       &lt;/div&gt;
+        &lt;footer class=&quot;ui-footer ui-fixed&quot;&gt;
+               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Footer Button&lt;/a&gt;
+       &lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+
+<h2>Related Document pages</h2>
+<p>In your application, you can:</p>
+<ul>
+<li><a href="multi_page.htm">Create multi-page layouts</a></li>
+<li><a href="page_change.htm">Change the active page</a></li>
+<li><a href="page_event.htm">Handle page events</a></li>
+</ul>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/page/multi_page.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/multi_page.htm
new file mode 100644 (file)
index 0000000..b830eb0
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/multi_page.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Multi-page Layout</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+
+<h1>Multi-page Layout</h1>
+<p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in  the application <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+<p>In the multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> 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>
+<p>
+You can link to internal pages by referring to the ID of the page. For example, to link to the page with an ID of <span style="font-family: Courier New,Courier,monospace">two</span>, the link element needs the <span style="font-family: Courier New,Courier,monospace">href=&quot;#two&quot;</span> attribute in the code, as in the following example.</p>
+
+<pre class="prettyprint">
+&lt;!--Main page--&gt;
+&lt;div id=&quot;one&quot; class=&quot;ui-page ui-page-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer&quot;&gt;&lt;/footer&gt;
+&lt;/div&gt;
+
+&lt;!--Secondary page--&gt;
+&lt;div id=&quot;two&quot; class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer&quot;&gt;&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>
+To find the currently active page, use the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class.</p>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_change.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_change.htm
new file mode 100644 (file)
index 0000000..f89e222
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_change.htm
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Changing Pages</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Changing Pages</h1>
+<p>The following table lists the methods you can use to change the active page.</p>
+<table>
+<caption>Table: Page changing methods</caption>
+<tbody>
+       <tr>
+               <th style="width:40%;">Method</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">tau.changePage(to)</span></td>
+               <td>Programmatically change to another page. The <span style="font-family: Courier New,Courier,monospace">to</span> argument is a page object or string.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">tau.back()</span></td>
+               <td>Loads the previous page in the history list.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>When changing the active page, you can use a page transition. <p>Tizen wearable Web UI framework does not apply transitions by default. To set a custom transition effect, you must add the <span style="font-family: Courier New,Courier,monospace">data-transition</span> attribute to a link:</p>
+<pre class="prettyprint">&lt;a href=&quot;index.html&quot; data-transition=&quot;slideup&quot;&gt;I&#39;ll slide up&lt;/a&gt;</pre>
+
+<p>To set a default custom transition effect for all pages, use the <span style="font-family: Courier New,Courier,monospace">pageTransition</span> property:</p>
+<pre class="prettyprint">/* JavaScript code */
+tau.defaults.pageTransition = &quot;slideup&quot;;
+</pre>
+
+<p>The following table lists the page transition properties.</p>
+<table>
+<caption>Table: Transition properties</caption>
+<tbody>
+       <tr>
+               <th style="width:40%;">Property</th>
+               <th>Value</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">data-transition</span></td>
+               <td><span style="font-family: Courier New,Courier,monospace">none</span></td>
+               <td>Default value, no transition.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">slideup</span></td>
+               <td>Makes the content of the next page slide up, appearing to conceal the content of the previous page.</td>
+       </tr>
+<tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pop</span></td>
+               <td>Makes the content of the next page pop, appearing to conceal the content of the previous page.</td>
+       </tr>
+       
+</tbody>
+</table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_event.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_event.htm
new file mode 100644 (file)
index 0000000..8f8f9e0
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/page/page_event.htm
@@ -0,0 +1,101 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Handling Page Events</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Handling Page Events</h1>
+
+<p>The following table lists the events related to pages.</p>
+<table>
+<caption>Table: Page events</caption>
+<tbody>
+       <tr>
+               <th style="width:40%;">Event</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pagebeforecreate</span></td>
+               <td>Triggered when the page is being initialized, before most plugin auto-initialization occurs.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pagecreate</span></td>
+               <td>Triggered when the page has been created in the DOM (for example, through Ajax) but before all UI components have had an opportunity to enhance the contained markup.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pagebeforeshow</span></td>
+               <td>Triggered on the page we are transitioning to, before the actual transition animation is kicked off.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pageshow</span></td>
+               <td>Triggered on the page we are transitioning to, after the transition animation has completed.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pagebeforehide</span></td>
+               <td>Triggered on the page we are transitioning away from, before the actual transition animation is kicked off.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pagehide</span></td>
+               <td>Triggered on the page we are transitioning away from, after the transition animation has completed.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">pagechange</span></td>
+               <td>Triggered after the <span style="font-family: Courier New,Courier,monospace">changePage()</span> request has finished loading the page into the DOM and all page transition animations have completed.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>To implement page events, use the following code:</p>
+
+<pre class="prettyprint">&lt;div id=&quot;page&quot; class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;  
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;page&quot;);
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;Event&quot;, function(ev) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;</pre>
+
+<p>To bind an event callback on the <strong>Back</strong> key, use the following code:</p>
+
+<pre class="prettyprint">/* JavaScript code */
+window.addEventListener(&#39;tizenhwkey&#39;, function(ev) 
+{
+&nbsp;&nbsp;&nbsp;if (ev.keyName === &quot;back&quot;) 
+&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;/* Call tizen.application.getCurrentApplication().exit() to exit application */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add script to add another behavior */
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm
new file mode 100644 (file)
index 0000000..65fe6c1
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm
@@ -0,0 +1,182 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Button</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Button</h1>
+
+<p>The button component shows on the screen a control that you can use to generate an action event when it is pressed and released. The component is coded with standard HTML anchor and input elements.</p>
+<p>The following table describes the supported button classes.</p>
+<table>
+<caption>Table: Button type classes</caption>
+<tbody>
+       <tr>
+               <th style="width:20%;">Class</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-btn</span></td>
+               <td>Creates the element as a button component.</td>
+       </tr>
+               <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-icon-*</span></td>
+               <td>Creates an icon button in the header area. In the content or footer area, icon images are not supported. 
+               <p>To use this icon class, prefix the class with <span style="font-family: Courier New,Courier,monospace">ui-more</span> in the <span style="font-family: Courier New,Courier,monospace">button</span> element:
+<pre class="prettyprint">
+&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
+</pre>
+               <p>Tizen supports 3 predefined icon CSS styles for wearable applications:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">ui-icon-detail</span> <img alt="ui icon detail" src="../../../images/ui_icon_detail.png" />
+</li> 
+<li><span style="font-family: Courier New,Courier,monospace">ui-icon-overflow</span> <img alt="ui icon overflow" src="../../../images/ui_icon_overflow.png" />
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">ui-icon-selectall</span> <img alt="ui icon selectall" src="../../../images/ui_icon_selectall.png" />
+</li></ul></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-btn-icon</span></td>
+               <td><p>Creates an icon button.</p>
+<p>To use the icon button, add this class to the <span style="font-family: Courier New,Courier,monospace">button</span> element. To insert a custom icon, use the following code:</p>
+               <pre class="prettyprint">
+&lt;div class=&quot;ui-grid-row&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn-icon&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-image: url(images/00_icon_back_ef.png);&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Button Icon
+&nbsp;&nbsp;&nbsp;&lt;/button&gt;
+&lt;/div&gt;
+</pre><p>The Tizen wearable Web UI framework does not provide styles for an icon with text.</p>
+</td>
+</tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-inline</span></td>
+               <td>Creates an inline button.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-multiline</span></td>
+               <td>Creates a multi-line text button.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>To add a button component to the application, use the following code. You can use the <span style="font-family: Courier New,Courier,monospace">disabled</span> attribute to disable a button and prevent the user from clicking it.</p>
+
+<pre class="prettyprint">
+&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/button&gt;
+&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
+&lt;input type=&quot;button&quot; class=&quot;ui-btn&quot; value=&quot;Button&quot; /&gt;
+
+&lt;!--Inline button--&gt;
+&lt;input type=&quot;button&quot; class=&quot;ui-btn ui-inline&quot; value=&quot;Button&quot; /&gt;
+
+&lt;!--Multi-line text button--&gt;
+&lt;a href=&quot;#&quot; class=&quot;ui-btn ui-multiline ui-inline&quot;&gt;A Button&lt;br/&gt;Icon&lt;/a&gt;
+
+&lt;!--Disabled button--&gt;
+&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; disabled=&quot;disabled&quot;&gt;Button disabled&lt;/button&gt;
+</pre>
+
+<h2>Button Color Themes</h2>
+<p>The following table lists the supported button color classes.</p>
+<table>
+<caption>Table: Button color classes</caption>
+<tbody>
+       <tr>
+               <th style="width:40%;">Class</th>
+               <th>Default button color</th>
+               <th>Pressed button color</th>
+               <th>Disabled button color</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-color-red</span></td>
+               <td>#ce2302</td>
+               <td>#dd654e</td>
+               <td>#3d0a0a</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-color-orange</span></td>
+               <td>#ed8600</td>
+               <td>#f0aa56</td>
+               <td>#462805</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-color-green</span></td>
+               <td>#64a323</td>
+               <td>#92be5e</td>
+               <td>#1e3108</td>
+       </tr>
+</tbody>
+</table>
+
+<p>
+<h2>Button Groups</h2>
+<p>You can group buttons in columns or rows. The following table lists the supported  button column and row classes.</p>
+
+<table>
+<caption>Table: Button group classes</caption>
+<tbody>
+       <tr>
+               <th style="width:40%;">Class</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-grid-col-1</span></td>
+               <td>Defines the button column width as 100% of the screen.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-grid-col-2</span></td>
+               <td>Defines the button column width as 50% of the screen.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-grid-col-3</span></td>
+               <td>Defines the button column width as 33% of the screen.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-grid-row</span></td>
+               <td>Arranges the buttons in a row.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>To implement the button groups, use the following code:</p>
+<ul><li><p>For columns:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-grid-col-3&quot; style=&quot;height:76px&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Button Circle&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn ui-color-red&quot; &gt;A Button Circle&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; class=&quot;ui-btn ui-color-orange&quot; value=&quot;Input Button Circle&quot; /&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li><p>For rows:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-grid-row&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Button Circle&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn ui-color-red&quot; &gt;A Button Circle&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; class=&quot;ui-btn ui-color-orange&quot; value=&quot;Input Button Circle&quot; /&gt;
+&lt;/div&gt;
+</pre></li></ul>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_checkbox.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_checkbox.htm
new file mode 100644 (file)
index 0000000..1fd2aed
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_checkbox.htm
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Checkbox and Radio Button</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Checkbox and Radio Button</h1>
+
+<p>Checkbox and Radio Button components shows selectable items:</p>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+
+               <li><a href="#html-example">HTML Examples</a>
+                       <ol class="toc">
+
+                                               <li><a href="#checkbox">How to use Checkbox</a>
+                                               </li>
+                                               <li><a href="#radio">How to use Radio button</a>
+                                               </li>
+
+
+                               </ol>
+               </li>
+
+               <li><a href="#html-example-list">Using checkbox/radio in Listview</a></li>
+
+       
+</ol>
+
+
+<h2 id="html-example">HTML Examples</h2>
+<h3 id="checkbox">How to use Checkbox</h3>
+<p>The checkbox component shows on the screen a list of options where 1 or more can be selected. To add a checkbox component to the application, use the following code:</p>
+
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; name=&quot;mycheck&quot; id=&quot;check-test&quot; checked=&quot;checked&quot;/&gt;
+&lt;label for=&quot;check-test&quot;&gt;Checkbox&lt;/label&gt;
+</pre>
+
+<h3 id="radio">How to use Radio button</h3>
+<p>The radio button component shows a list of options on the screen where only 1 option can be selected. To add a radio button component to the application, use the following code:</p>
+
+<pre class="prettyprint">
+&lt;input type=&quot;radio&quot; name=&quot;radioset&quot; id=&quot;radio-1&quot; /&gt;
+&lt;label for=&quot;radio-1&quot;&gt;Radio&lt;/label&gt;
+</pre>
+
+<h2 id="html-example-list">Using checkbox/radio in Listview</h2>
+
+<p>To add a checkbox or radio button to a list, use the following code:</p>
+<pre class="prettyprint">
+&lt;ul class=&quot;ui-listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-radio&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Radio checked
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radioset&quot; checked=&quot;checked&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-radio&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Radio button
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radioset&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-radio disabled&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Radio disabled
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radioset&quot; disabled=&quot;disabled&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Use the following code in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file of your application to support a wide label tap area:</p>
+
+<pre class="prettyprint">
+.ui-listview li input[type=&quot;checkbox&quot;]:not(.ui-switch-input), 
+.ui-listview li input[type=&quot;radio&quot;]
+{
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;right: 30px;
+&nbsp;&nbsp;&nbsp;top: 0px;
+&nbsp;&nbsp;&nbsp;margin-top: 25px;
+}
+.ui-listview li.li-has-checkbox label, 
+.ui-listview li.li-has-radio label
+{
+&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;padding: 31.5px 94px 31.5px 40px;
+&nbsp;&nbsp;&nbsp;margin: -30px -8px -21px -38px;
+}
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_indexscrollbar.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_indexscrollbar.htm
new file mode 100644 (file)
index 0000000..d9b881d
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_indexscrollbar.htm
@@ -0,0 +1,294 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head><script type="text/javascript" src="../../snippet.js"></script>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link href="../../styles.css" rel="StyleSheet" type="text/css">
+<link href="../../snippet.css" rel="StyleSheet" type="text/css">
+  <title>Index Scroll Bar</title>
+</head>
+
+<body onload="prettyPrint()" id="content">
+
+
+<h1>Index Scroll Bar</h1>
+
+<p>The index scroll bar component shows on the screen a scrollbar with indices, and fires a <span style="font-family: Courier New,Courier,monospace">select</span> event when the index characters are clicked. The following table describes the supported index scroll bar APIs.</p>
+
+<h2>How to create Index Scroll Bar</h2>
+<p>To use index scroll bar, you can refer following APIs.</p>
+
+<table>
+<caption>Table: Index scroll bar APIs</caption>
+<tbody>
+       <tr>
+               <th style="width:20%;">API</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-indexscrollbar</span> class</td>
+               <td><p>Defines the element as an index scroll bar component.
+<p>To show an index scroll bar element on the screen, the <span style="font-family: Courier New,Courier,monospace">ui-indexscrollbar</span> class must be defined.</p>
+</td>
+       </tr>
+               <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">data-index</span> attribute</td>
+               <td><p>Contains a list of index strings, separated by commas.
+<p>For example: <span style="font-family: Courier New,Courier,monospace">data-index=&quot;A,B,C,D&quot;</span></p>
+</td>
+       </tr>
+                       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">tau.IndexScrollbar(element[,options])</span> constructor</td>
+               <td><p>Creates an index scroll bar within the given element.
+<p>The <span style="font-family: Courier New,Courier,monospace">element</span> argument is the element containing the <span style="font-family: Courier New,Courier,monospace">ui-indexscrollbar</span> class.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">options</span> argument  is optional and supports the following properties:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">moreChar</span> (string)
+<p>Character that replaces omitted index characters. Default value is <span style="font-family: Courier New,Courier,monospace">*</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">keepSelectEventDelay</span> (number)
+<p>Time delay between the appearance of the selected indicator and the firing of the <span style="font-family: Courier New,Courier,monospace">select</span> event in milliseconds.  Default value is 50.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">supplementaryIndex</span> (method)
+<p>Method that returns an array of level 2 index characters for a given level 1 index character argument. If the value is <span style="font-family: Courier New,Courier,monospace">null</span>, only the level 1 index scroll bar is shown. Default value is <span style="font-family: Courier New,Courier,monospace">null</span>.</p></li>
+</li>
+</td>
+       </tr>
+</tbody>
+</table>
+
+<p>To add an index scroll bar component to the application, use the following code:
+<pre class="prettyprint">
+&lt;div id=&quot;foo&quot; class=&quot;ui-indexscrollbar&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-index=&quot;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&quot;&gt;&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;(function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var elem = document.getElementById(&quot;foo&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.IndexScrollbar(elem);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.addEventListener(&quot;select&quot;, function(ev)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var index=ev.detail.index;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(index);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;}());
+&lt;/script&gt;
+</pre>
+
+<p>You can retrieve the index value using the <span style="font-family: Courier New,Courier,monospace">event.detail.index</span> property.</p>
+
+<p>In the following example, the list scrolls to the position of the list item defined using the <span style="font-family: Courier New,Courier,monospace">li-divider</span> class, selected by the index scroll bar:</p>
+<pre class="prettyprint">
+&lt;div id=&quot;pageIndexScrollbar&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;IndexScrollbar&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style=&quot;overflow-y:scroll;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;indexscrollbar1&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;ui-indexscrollbar&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-index=&quot;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&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;list1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-divider&quot;&gt;A&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;li&gt;Arabella&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Art&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-divider&quot;&gt;B&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bibi&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Billy&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-divider&quot;&gt;D&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&lt;li&gt;Derek&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Desmond&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;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageIndexScrollbar&quot;), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isb;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagecreate&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 elem = document.getElementById(&quot;indexscrollbar1&quot;), /* Index scroll bar element */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elList = document.getElementById(&quot;list1&quot;), /* List element */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elDividers = elList.getElementsByClassName(&quot;li-divider&quot;), /* List items (dividers) */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller = elList.parentElement, /* List&#39;s parent item (overflow-y:scroll) */
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;indices = [], /* List of index */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elDivider,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, idx;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* For all list dividers */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; elDividers.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;/* Add the list divider elements to the collection */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elDivider = elDividers[i]; /* li element having the li-divider class */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;idx = elDivider.innerText; /* Get a text (index value) */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dividers[idx] = elDivider; /* Remember the element */
+
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;indices.push(idx);
+&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 the data-index attribute to the indexscrollbar element */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* before initializing IndexScrollbar component */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.setAttribute(&quot;data-index&quot;, indices.join(&quot;,&quot;));
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create index scroll bar */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isb = tau.IndexScrollbar(elem);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bind the select callback */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var elDivider,
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;elDivider = dividers[idx];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (elDivider) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 li-divider element */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller.scrollTop = elDivider.offsetTop - elScroller.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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy index scroll bar when page is hidden */
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isb.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}());
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">supplementScroll</span> argument, which shows a level 2 index scroll bar. The application code must contain a level 2 index array for each level 1 index character. The example shows a way to analyze list items and create a dictionary (<span style="font-family: Courier New,Courier,monospace">secondIndex</span>) for level 1 indices for the index scroll bar, and a dictionary (<span style="font-family: Courier New,Courier,monospace">keyItem</span>) for moving list items at runtime:</p>
+
+<pre class="prettyprint">
+&lt;div id=&quot;indexscrollbar2&quot; class=&quot;ui-indexscrollbar&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-index=&quot;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&quot;&gt;
+&lt;/div&gt;
+&lt;ul class=&quot;ui-listview&quot; id=&quot;ibar2_list2;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;&lt;li&gt;Arabella&lt;/li&gt;&lt;li&gt;Art&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;&lt;li&gt;Bibi&lt;/li&gt;&lt;li&gt;Billy&lt;/li&gt;&lt;li&gt;Bob&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Carry&lt;/li&gt;&lt;li&gt;Cibi&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;Daisy&lt;/li&gt;&lt;li&gt;Derek&lt;/li&gt;&lt;li&gt;Desmond&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;(function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageIndexScrollbar2&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index = [],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;supIndex = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elIndex = {};
+&nbsp;&nbsp;&nbsp;&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 elisb = document.getElementById(&quot;indexscrollbar2&quot;), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elList = document.getElementById(&quot;ibar2_list2&quot;), /* List element */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elItems = elList.children, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller = elList.parentElement, /* Scroller (overflow-y:hidden) */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexData = getIndexData(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;array: elItems,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getTextValue: function(array, i) {return array[i].innerText;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 getIndexData(options) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var array = options.array,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getTextValue = options.getTextValue,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item,
+&nbsp;&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;firstIndex = [],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secondIndex = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyItem = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c1 = null, c2 = null,
+&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; array.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;item = array[i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = getTextValue(array, i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (text.length &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;if (!c1 || c1 !== text[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;/* New c1 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c1 = text[0];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstIndex.push(c1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyItem[c1] = item;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secondIndex[c1] = [];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c2 = text[1];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (c2) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secondIndex[c1].push(c2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c2 = &#39;&#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;keyItem[c1+c2] = 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;&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;&nbsp;&nbsp;&nbsp;&nbsp;/* Existing c1 */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (c2 !== text[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;c2 = text[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;secondIndex[c1].push(c2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyItem[c1+c2] = 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&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 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstIndex: firstIndex,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secondIndex: secondIndex,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyItem: keyItem
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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 the data-index attribute to the indexscrollbar element, with the index list above */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elisb.setAttribute(&quot;data-index&quot;, indexData.firstIndex);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create IndexScrollbar */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isb = new tau.IndexScrollbar(elisb, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index: indexData.firstIndex, supplementaryIndex: function(firstIndex) 
+&nbsp;&nbsp;&nbsp;&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 indexData.secondIndex[firstIndex];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bind the select callback */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elisb.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 el,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index = ev.detail.index;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el = indexData.keyItem[index];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (el) 
+&nbsp;&nbsp;&nbsp;&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 li-divider element */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller.scrollTop = el.offsetTop - elScroller.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;&nbsp;&nbsp;&nbsp;/* Destroy index scroll bar when page is hidden */
+&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;isb.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index.length = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;supIndex = {};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elIndex = {};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;}());
+&lt;/script&gt;
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm
new file mode 100644 (file)
index 0000000..8cca688
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>List</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>List</h1>
+
+<p>The list component is used to display, for example, navigation data, results, and data entries. The following table describes the supported list classes.</p>
+
+<table>
+<caption>Table: List classes</caption>
+<tbody>
+       <tr>
+               <th>Class</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-listview</span></td>
+               <td><p>Defines the element as list view component.</td>
+       </tr>
+</tbody>
+</table>
+
+
+<p>To add a list component to the application, use the following code:</p>
+<ul>
+<li>List with basic items
+<p>You can add a basic list component as follows:</p>
+<pre class="prettyprint">&lt;ul class=&quot;ui-listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;1line&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;2line&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;3line&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;4line&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;5line&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+</li>
+<li>List with link items
+<p>You can add a list component with a link and press effect that allows the user to click each list item as follows:</p>
+<pre class="prettyprint">&lt;ul class=&quot;ui-listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;1line&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;2line&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;3line&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;4line&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;5line&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+</li>
+
+</ul>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm
new file mode 100644 (file)
index 0000000..4600fcb
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm
@@ -0,0 +1,323 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Popup</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Popup</h1>
+
+<p>The popup component shows in the middle of the screen a list of items in a pop-up window. It automatically optimizes the pop-up window size within the screen.  The following table describes the supported popup classes.</p>
+<table>
+<caption>Table: Popup classes</caption>
+<tbody>
+       <tr>
+               <th>Class</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><p><span style="font-family: Courier New,Courier,monospace">ui-popup</span></p></td>
+               <td><p>Defines the element as a popup component.</p></td>
+       </tr>
+       <tr>
+               <td><p><span style="font-family: Courier New,Courier,monospace">ui-popup-toast</span></p></td>
+               <td><p>Defines the element as a toast popup (small popup).</p></td>
+       </tr>   
+</tbody>
+</table>
+
+<p>The pop-up window can contain a header, content, and footer area like the page element.</p>
+
+<p>To open a pop-up window from a link, use the <span style="font-family: Courier New,Courier,monospace">data-rel</span> attribute in HTML markup as in the following code:
+</p>
+<pre class="prettyprint">&lt;a href=&quot;#popup&quot; class=&quot;ui-btn&quot; data-rel=&quot;popup&quot;&gt;Open popup when clicking this element.&lt;/a&gt;</pre>
+<p>The following table shows examples of various types of popups.</p>
+
+<table>
+<caption>Table: Popup type examples</caption>
+<tbody>
+       <tr>
+               <th>Type</th>
+               <th>Code example</th>
+       </tr>
+       <tr>
+               <td>Basic popup with header, content, and footer</td>
+               <td><pre class="prettyprint">
+&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Power saving mode&lt;/div&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&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;cancel&quot; class=&quot;ui-btn&quot;&gt;Cancel&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></td>
+       </tr>
+               <tr>
+               <td>Popup with 2 buttons in the footer</td>
+               <td><pre class="prettyprint">
+&lt;div id=&quot;2btnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Delete&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Delete the image?
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-grid-col-2&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;2btnPopup-cancel&quot; class=&quot;ui-btn&quot;&gt;Cancel&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;2btnPopup-ok&quot; class=&quot;ui-btn&quot;&gt;OK&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre></td>
+       </tr>
+               <tr>
+               <td>Popup with checkbox and radio button lists</td>
+               <td><pre class="prettyprint">
+&lt;div id=&quot;listBoxPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;When?&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot; style=&quot;height:243px; overflow-y:scroll&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;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;check-1&quot; class=&quot;ui-popup-checkbox-label&quot;&gt;Yesterday&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;checkbox&quot; name=&quot;checkset&quot; id=&quot;check-1&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&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;check-2&quot; class=&quot;ui-popup-checkbox-label&quot;&gt;Today&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;checkbox&quot; name=&quot;checkset&quot; id=&quot;check-2&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&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;check-3&quot; class=&quot;ui-popup-checkbox-label&quot;&gt;Tomorrow&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;checkbox&quot; name=&quot;checkset&quot; id=&quot;check-3&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;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&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;label for=&quot;radio-1&quot; class=&quot;ui-popup-radio-label&quot;&gt;Mandatory&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radioset&quot; id=&quot;radio-1&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&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;radio-2&quot; class=&quot;ui-popup-radio-label&quot;&gt;Optional&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radioset&quot; id=&quot;radio-2&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;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;listBoxPopup-close&quot; class=&quot;ui-btn&quot;&gt;Close&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre></td>
+       </tr>
+               <tr>
+               <td>Popup with no header and footer</td>
+               <td><pre class="prettyprint">
+&lt;div id=&quot;listNoTitleNoBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot; style=&quot;height:294px; overflow-y:scroll&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;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=""&gt;Ringtones 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=""&gt;Ringtones 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=""&gt;Ringtones 3&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre></td>
+       </tr>
+               <tr>
+               <td>Toast popup</td>
+               <td><pre class="prettyprint">
+&lt;div id=&quot;PopupToast&quot; class=&quot;ui-popup ui-popup-toast&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;Saving contacts to the SIM card&lt;/div&gt;
+&lt;/div&gt;
+</pre></td>
+       </tr>
+</tbody>
+</table>
+
+<h2>Popup Methods</h2>
+<p>To open or close the popup component programmatically, use the methods listed in the following table.</p>
+<table>
+<caption>Table: Popup methods</caption>
+<tbody>
+       <tr>
+               <th>Method</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">tau.openPopup(to)</span></td>
+               <td>Opens a popup by calling the <span style="font-family: Courier New,Courier,monospace">openPopup()</span> method. The <span style="font-family: Courier New,Courier,monospace">to</span> argument is a pop-up container object or string.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">tau.closePopup()</span></td>
+               <td>Closes a popup by calling the <span style="font-family: Courier New,Courier,monospace">closePopup()</span> method.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>To find the currently active popup, use the <span style="font-family: Courier New,Courier,monospace">ui-popup-active</span> class.</p>
+
+<p>To bind the popup to a button, use the following code:</p>
+
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">&lt;!--HTML code--&gt;
+&lt;div id=&quot;1btnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Power saving mode&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;1btnPopup-cancel&quot; class=&quot;ui-btn&quot;&gt;Cancel&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">/* JavaScript code */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Popup opens with button click */
+&nbsp;&nbsp;&nbsp;button.addEventListener(&quot;click&quot;, function(ev) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.openPopup(&quot;#1btnPopup&quot;);
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;/* Popup closes with Cancel button click */
+&nbsp;&nbsp;&nbsp;document.getElementById(&#39;1btnPopup-cancel&#39;).addEventListener(&#39;click&#39;, function(ev)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.closePopup();
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></pre>
+
+<h2>Popup Events</h2>
+<p>The following table lists the events related to pop-ups.</p>
+<table>
+<caption>Table: Popup events</caption>
+<tbody>
+       <tr>
+               <th>Event</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">popupbeforecreate</span></td>
+               <td>Triggered when the pop-up is initialized, before most plugin auto-initialization occurs.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">popupcreate</span></td>
+               <td>Triggered when the pop-up has been created in the DOM (for example, through Ajax) but before all UI components have had an opportunity to enhance the contained markup.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">popupbeforehide</span></td>
+               <td>Triggered on the pop-up we are transitioning away from, before the actual transition animation is kicked off.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">popuphide</span></td>
+               <td>Triggered on the pop-up we are transitioning away from, after the transition animation has completed.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">popupbeforeshow</span></td>
+               <td>Triggered on the pop-up we are transitioning to, before the actual transition animation is kicked off.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">popupshow</span></td>
+               <td>Triggered on the pop-up we are transitioning to, after the transition animation has completed.</td>
+       </tr>
+</tbody>
+</table>
+<p>To use popup events, use the following code:</p>
+
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">&lt;!--Popup html code--&gt;
+&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;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">/* JavaScript code */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Use popup events */
+&nbsp;&nbsp;&nbsp;var popup = document.getElementById(&quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;popup.addEventListener(&quot;popupbeforecreate&quot;, function(ev) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement code for popupbeforecreate event */
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></pre>
+
+<p>Because popup works in asynchronous way due to animation, the features of popup need to work under event like below code:<br>
+If popup is opened or closed by only openPopup() or closePopup() method,
+it might occur exceptional errors or bugs.<br>
+So it is highly recommended to handle the feature by using event.</p>
+
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">&lt;!--Popup html code--&gt;
+&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;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-btn&quot; id=&quot;cancel-btn&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">/* JavaScript code */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* Use popup events */
+&nbsp;&nbsp;&nbsp;var popup = document.getElementById(&quot;popup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cancel = document.getElementById(&quot;cancel-btn&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;openButton.addEventListener(&quot;click&quot;, function() {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.openPopup(&quot;#popup&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;popup.addEventListener(&quot;popupshow&quot;, function(){
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Implement code after popup show completely&quot;);
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;cancel.addEventListener(&quot;click&quot;, function() {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.closePopup();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(window.getComputedStyle(popup).display);//block - not closed yet.
+&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;popup.addEventListener(&quot;popuphide&quot;, function() {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(window.getComputedStyle(popup).display); //none - closed completely.
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre></pre>
+<h2>Popup Transitions</h2>
+<p>Tizen Wearable Web UI framework does not apply transitions by default. To set a custom transition effect for a specific popup component, add the <span style="font-family: Courier New,Courier,monospace">data-transition</span> attribute to a link:</p>
+<pre class="prettyprint">
+&lt;a href=&quot;index.html&quot; data-rel=&quot;popup&quot; data-transition=&quot;slideup&quot;&gt;I&#39;ll slide up&lt;/a&gt;
+</pre>
+
+<p>To set a default custom transition effect for all pop-up windows, use the <span style="font-family: Courier New,Courier,monospace">popupTransition</span> property:
+</p>
+<pre class="prettyprint">/* JavaScript code */
+tau.defaults.popupTransition = &quot;slideup&quot;;
+</pre>
+
+<p>The following table lists the popup transition properties.</p>
+<table>
+<caption>Table: Popup transition properties</caption>
+<tbody>
+       <tr>
+               <th>Property</th>
+               <th>Value</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">popupTransition</span></td>
+               <td><span style="font-family: Courier New,Courier,monospace">none</span></td>
+               <td>Default value, no transition.</td>
+       </tr>
+               <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">slideup</span></td>
+               <td>Makes the content of the pop-up slide up.</td>
+       </tr>
+</tbody>
+</table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div>  
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_processing.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_processing.htm
new file mode 100644 (file)
index 0000000..9223cc1
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_processing.htm
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Processing</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Processing</h1>
+
+<p>The processing component shows on the screen that an operation is in progress.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+               <li><a href="#html-example">HTML Examples</a></li>
+</ol>
+
+<h2 id="html-example">HTML Examples</h2>
+
+<h3>Processing Component</h3>
+<p>To add a processing component to the application, use the following code:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-processing&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ui-processing-text&quot;&gt;
+&nbsp;&nbsp;&nbsp;Description about progress
+&lt;/div&gt;
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_progress.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_progress.htm
new file mode 100644 (file)
index 0000000..765561b
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_progress.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Progress</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Progress</h1>
+
+<p>The progress component shows on the screen a control that indicates the progress percentage of an on-going operation. The component can be scaled to fit inside a parent container.</p>
+<p>The progress component provides the following styles:</p>
+<ul>
+<li>If you implement the <span style="font-family: Courier New,Courier,monospace">ui-progress-indeterminate</span> class, you show an image that looks like an infinite move.</li>
+<li>If you implement no class, you show the default progress style.</li>
+<li>If you implement a <span style="font-family: Courier New,Courier,monospace">div</span> element that can choose 2 classes (<span style="font-family: Courier New,Courier,monospace">ui-progress-proportion</span> or <span style="font-family: Courier New,Courier,monospace">ui-progress-ratio</span>) and a <span style="font-family: Courier New,Courier,monospace">progress</span> element on the same level, you show two elements on the screen (the proportion information is located left below and the ratio information is located right below).</li>
+</ul>
+
+<p>The following table describes the supported progress classes.</p>
+<table>
+<caption>Table: Popup classes</caption>
+<tbody>
+       <tr>
+               <th>Class</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-progress-indeterminate</span></td>
+               <td>Defines the element as a infinite moving progress bar (unknown style).</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-progress-proportion</span></td>
+               <td>Defines the element as a text <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element with a progress proportion.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ui-progress-ratio</span></td>
+               <td>Defines the element as a text <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element with progress ratio.</td>
+       </tr>   
+</tbody>
+</table>
+
+<p>To add a progress component to the application, use the following code:</p>
+
+<pre class="prettyprint">
+&lt;!--Infinite move--&gt;
+&lt;progress class=&quot;ui-progress-indeterminate&quot; max=&quot;100&quot; value=&quot;100&quot;&gt;&lt;/progress&gt;
+
+&lt;!--Default--&gt;
+&lt;progress max=&quot;100&quot; value=&quot;90&quot;&gt;&lt;/progress&gt;
+
+&lt;!--2 elements--&gt;
+&lt;progress max=&quot;100&quot; value=&quot;50&quot;&gt;&lt;/progress&gt;
+&lt;div class=&quot;ui-progress-proportion&quot;&gt;00/20&lt;/div&gt;
+&lt;div class=&quot;ui-progress-ratio&quot;&gt;50%&lt;/div&gt;
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm
new file mode 100644 (file)
index 0000000..ca43785
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>UI Component Reference</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>UI Component Reference</h1>
+
+<p>The Tizen Wearable Web UI framework provides rich Tizen wearable UI components that are optimized for the Tizen wearable Web application. You can use the UI components for:</p>
+<ul>
+       <li>CSS animation</li>
+       <li>Rendering</li>
+</ul>
+
+<p>The following table displays the UI components provided by the Tizen Wearable Web UI framework.</p>
+
+<table border="1">
+       <caption>Table: Tizen Wearable Web UI components</caption>
+               <tbody>
+                       <tr>
+                               <th>UI component</th>
+                               <th>Description</th>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_button.htm">Button</a></td>
+                               <td>Shows a component that can be used to generate an action event.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_checkbox.htm">Checkbox and radio button</a></td>
+                               <td>Shows a list of options where 1 or more can be selected.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_indexscrollbar.htm">Index scroll bar</a></td>
+                               <td>Shows an index scroll bar with indices, usually for the list.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_list.htm">List</a></td>
+                               <td>Shows a list view.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_popup.htm">Popup</a></td>
+                               <td>Shows a pop-up window.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_processing.htm">Processing</a></td>
+                               <td>Shows a control that operates as progress infinitely.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_progress.htm">Progress</a></td>
+                               <td>Shows a control that indicates the linear shape progressbar percentage of an on-going operation.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_section_changer.htm">Section changer</a></td>
+                               <td>Shows a control that you can use to scroll through multiple <span style="font-family: Courier New,Courier,monospace">&lt;section&gt;</span> elements.
+                       </tr>
+                       <tr>
+                               <td><a href="widget_slider.htm">Slider</a></td>
+                               <td>Shows a control that you can use to change values by dragging a handle on a horizontal scale.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_swipelist.htm">Swipe list</a></td>
+                               <td>Shows a list where you can swipe horizontally through a list item to perform a specific task.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_toggleswitch.htm">Toggle switch</a></td>
+                               <td>Shows a 2-state switch.</td>
+                       </tr>
+                       <tr>
+                               <td><a href="widget_virtuallist.htm">Virtual list</a></td>
+                               <td>Shows a list view for large amounts of data.</td>
+                       </tr>
+               </tbody>
+</table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_section_changer.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_section_changer.htm
new file mode 100644 (file)
index 0000000..a164d45
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_section_changer.htm
@@ -0,0 +1,362 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Section Changer</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Section Changer</h1>
+
+<p>The section changer component provides an application architecture, which has multiple sections on a page and enables scrolling through the <span style="font-family: Courier New,Courier,monospace">&lt;section&gt;</span> elements.</p>
+       
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#manual-constructor">How to Create Section Changer</a>
+
+               </li>
+
+               <li><a href="#options-list">Options</a>
+
+               </li>
+
+               <li><a href="#events-list">Events</a>
+
+               </li>
+
+               <li><a href="#methods-list">Methods</a>
+
+                               <ol class="toc">
+
+                                               <li><a href="#method-setActive">setActiveSection</a>
+                                               </li>
+                                               <li><a href="#method-getActiveSectionIndex">getActiveSectionIndex</a>
+                                               </li>
+                                               <li><a href="#method-refresh">refresh</a>
+                                               </li>
+
+                               </ol>
+               </li>
+
+</ol>
+
+<h2 id="manual-constructor">How to Create Section Changer</h2>
+
+<p>To add a section changer component to the application, use the following code:</p>
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">&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 id=&quot;sectionchanger&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&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-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;&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;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">(function() 
+{
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;hasSectionchangerPage&quot;),
+&nbsp;&nbsp;&nbsp;element = document.getElementById(&quot;sectionchanger&quot;),
+&nbsp;&nbsp;&nbsp;sectionChanger, idx=1;
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pageshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the SectionChanger object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChanger = new tau.SectionChanger(element, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular: true,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useBouncingEffect: true
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChanger.destroy();
+&nbsp;&nbsp;&nbsp;});
+})();
+</pre></pre>
+
+
+<h2 id="options-list">Options</h2>
+
+<table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">orientation</span></td>
+                               <td class="option">&quot;horizontal&quot;|&quot;vertical&quot;</td>
+                               <td class="option">&quot;horizontal&quot;</td>
+                               <td class="option"><p>Sets the section changer orientation</p></td>
+                       </tr>
+
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">circular</span></td>
+                               <td class="option">Boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Presents the sections in a circular scroll fashion.</td>
+                       </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">useBouncingEffect</span></td>
+                               <td class="option">Boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">Shows a scroll end effect on the scroll edge.</td>
+                       </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">Items</span></td>
+                               <td class="option">String</td>
+                               <td class="option">&quot;section&quot;</td>
+                               <td class="option">Defines the section element selector.</td>
+                       </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">activeClass</span></td>
+                               <td class="option">String</td>
+                               <td class="option">&quot;section-active&quot;</td>
+                               <td class="option">Specifies the CSS classes which define the active section element.<br>Add the specified class (<span style="font-family: Courier New,Courier,monospace">section-active</span>) to a <span style="font-family: Courier New,Courier,monospace">&lt;section&gt;</span> element to indicate which section must be shown first.<br>By default, the first section is shown first.</td>
+                       </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">fillContent</span></td>
+                               <td class="option">Boolean</td>
+                               <td class="option">true</td>
+                               <td class="option">Declares width of section tag to fill content or not. If fillContent value is set to false, you must set the width of each section tag.</td>
+                       </tr>
+
+               </tbody>
+       </table>
+
+<h2 id="events-list">Events</h2>
+
+<table>
+               <tbody>
+               <tr>
+                       <th>Name</th>
+                       <th>Description</th>
+               </tr>
+               
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">sectionchange</span></td>
+                               <td><p>Triggered when the section is changed.</p></td>
+                       </tr>
+
+               
+               </tbody>
+       </table>
+
+<p>To use the <span style="font-family: Courier New,Courier,monospace">sectionchange</span> event, use the following code:</p>
+<pre class="prettyprint">
+(function() 
+{
+&nbsp;&nbsp;&nbsp;var changer = document.getElementById(&quot;sectionchanger&quot;);
+&nbsp;&nbsp;&nbsp;changer.addEventListener(&quot;sectionchange&quot;, function(evt) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(evt.detail.active + &quot; section is active.&quot;);
+&nbsp;&nbsp;&nbsp;});
+})();
+</pre>
+
+
+<h2 id="methods-list">Methods</h2>
+
+<h3>Summary</h3>
+       <table class="informaltable">
+               <thead>
+               <tr>
+                       <th>Method</th>
+                       <th>Description</th>
+               </tr>
+               </thead>
+               <tbody>
+
+
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-setActive">setActiveSection</a> ( number index ) </pre>
+                                       </td>
+                                       <td><p>Changes the currently active section element (index).
+               <br>For smooth scrolling, the <span style="font-family: Courier New,Courier,monospace">duration</span> parameter must be in milliseconds.</p></td>
+                               </tr>
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-getActiveSectionIndex">getActiveSectionIndex</a> () </pre>
+                                       </td>
+                                       <td><p>Gets the currently active section element&#39;s index.
+               <br>The return value is a number (<span style="font-family: Courier New,Courier,monospace">activeIndex</span>).</p></td>
+                               </tr>
+                               <tr>
+                                       <td>
+                                               <pre class="intable prettyprint"><a href="#method-refresh">refresh</a> () </pre>
+                                       </td>
+                                       <td><p>Updates the section changer form.
+               <br>When you add new section dynamically through JavaScript, you must call the <span style="font-family: Courier New,Courier,monospace">refresh()</span> method to update section information.</p></td>
+                               </tr>
+
+
+               </tbody>
+       </table>
+       <dl>
+
+
+                               <dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-setActive">setActiveSection</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Changes the currently active section element (index).
+               <br>For smooth scrolling, the <span style="font-family: Courier New,Courier,monospace">duration</span> parameter must be in milliseconds.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">setActiveSection ( number index) </pre>
+                                       </div>
+
+                                       <div class="description">
+                                               <p>
+
+                                               </p>
+                                       </div>
+
+                                       <div class="parameters">
+                                               <p><span class="param">Parameters:</span></p>
+                                       <table>
+                                       <tbody>
+                                       <tr>
+                                               <th>Parameter</th>
+                                               <th>Type</th>
+                                               <th>Required / optional</th>
+                                               <th>Default value</th>
+                                               <th>Description</th>
+                                       </tr>
+
+
+                                       <tr>
+                                               <td><span style="font-family: Courier New,Courier,monospace">index</span></td>
+                                               <td>number</td>
+                                               <td>required</td>
+                                               <td></td>
+                                               <td>index which is set be active state.</td>
+                                       </tr>
+
+
+                                       </tbody>
+                                       </table>
+                                       </div>
+
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+
+
+                                                       No Return Value
+
+                                       </div>
+
+                               </dd>
+
+
+               </dl>
+
+
+<dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-getActiveSectionIndex">getActiveSectionIndex</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Gets the currently active section element&#39;s index.
+               <br>The return value is a number (<span style="font-family: Courier New,Courier,monospace">activeIndex</span>).</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">getActiveSectionIndex () </pre>
+                                       </div>
+
+                                       <div class="description">
+                                               <p>
+
+                                               </p>
+                                       </div>
+<div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+                                               
+                                                       <table>
+                                                               <tbody>
+                                                               <tr>
+                                                                       <th>Type</th>
+                                                                       <th>Description</th>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>number</td>
+                                                                       <td>index of active section</td>
+                                                               </tr>
+                                                               </tbody>
+                                                       </table>
+                                               
+                                               
+                                       </div>
+                               </dd>
+
+
+               </dl>
+
+<dt class="method"><code><b><span class="methodName"
+                                                                                                                                  id="method-refresh">refresh</span></b></code></dt>
+                               <dd>
+                                       <div class="brief">
+                                               <p>Updates the section changer form.
+               <br>When you add new section dynamically through JavaScript, you must call the <span style="font-family: Courier New,Courier,monospace">refresh()</span> method to update section information.</p>
+                                       </div>
+                                       <div class="synopsis">
+                                               <pre class="signature prettyprint">refresh () </pre>
+                                       </div>
+
+                                       <div class="description">
+                                               <p>
+
+                                               </p>
+                                       </div>
+
+
+                                       <div class="returntype">
+                                               <p><span class="return">Return value:</span></p>
+
+
+                                                       No Return Value
+
+                                       </div>
+
+                               </dd>
+
+
+               </dl>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_slider.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_slider.htm
new file mode 100644 (file)
index 0000000..968963a
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_slider.htm
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Slider</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Slider</h1>
+
+<p>The slider component shows on the screen a control that you can use to change values by dragging a handle on a horizontal scale.</p>
+
+<p>To add a slider component to the application, use the following code:</p>
+
+<pre class="prettyprint">
+&lt;input type=&quot;range&quot; /&gt;
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_swipelist.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_swipelist.htm
new file mode 100644 (file)
index 0000000..101f23f
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_swipelist.htm
@@ -0,0 +1,225 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Swipe List</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Swipe List</h1>
+
+<p>The swipe list component shows on the screen a list where you can swipe horizontally through a list item to activate a specific feature or perform a specific task. For example, you can swipe a contact in a contact list to call them or to open a message editor in order to write them a message.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+               <li><a href="#manual-constructor">How to Create Swipe List</a>
+
+               </li>
+
+               <li><a href="#options-list">Options</a>
+
+               </li>
+
+               <li><a href="#events-list">Events</a>
+
+               </li>
+</ol>
+
+<h2 id="manual-constructor">How to Create Swipe List</h2>
+<p>To add a swipe list component to the application, use the following code:</p>
+
+<pre class="prettyprint"><pre class="prettyprint" style="border:0px; margin:0px">
+&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;!--List items that can be swiped--&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-swipelist-list&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Andrew&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bill&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Christina&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Daniel&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Edward&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Peter&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sam&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Tom&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;!--Swipe actions--&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist-left&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist-icon&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist-text&quot;&gt;Calling&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist-right&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist-icon&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-swipelist-text&quot;&gt;Message&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;(function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;swipelist&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listElement = page.getElementsByClassName(&quot;ui-swipelist-list&quot;)[0],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeList;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pageshow&quot;, function()     
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make swipe list object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeList = new tau.widget.SwipeList(listElement, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeTarget: &quot;li&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeElement: &quot;.ui-swipelist&quot;
+&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() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeList.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;})();
+&lt;/script&gt;
+</pre></pre>
+
+
+
+<h2 id="options-list">Options</h2>
+
+<p>The following table describes the supported swipe list options.</p>
+<table>
+<tbody>
+       <tr>
+               <th>Option</th>
+               <th>Type</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipeTarget</span></td>
+               <td>String</td>
+               <td>Swipe list selector.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">li</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipeElement</span></td>
+               <td>String</td>
+               <td>Swipe list container selector.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">.ui-swipelist</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipeLeftElement</span></td>
+               <td>String</td>
+               <td>Swipe left container selector.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">.ui-swipelist-left</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipeRightElement</span></td>
+               <td>String</td>
+               <td>Swipe right container selector.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">.ui-swipelist-right</span>.</p></td>
+       </tr>   
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">threshold</span></td>
+               <td>Number</td>
+               <td>Define the threshold (in pixels) for the minimum swipe movement which allows the swipe action to appear.
+               </td>
+       </tr>           
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">animationThreshold</span></td>
+               <td>IntNumbereger</td>
+               <td>Define the threshold (in pixels) for the minimum swipe movement that allows a swipe animation (with a color change) to be shown. The animation threshold is usually the threshold for the next operation after the swipe.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">150</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">animationDuration</span></td>
+               <td>Number</td>
+               <td>Define the swipe list animation duration.
+               <p>Do not change the default value, since it has been defined to show a complete color change.</p>
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">200</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">animationInterval</span></td>
+               <td>Number</td>
+               <td>Define the swipe list animation interval. The animation is called with the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method once every 1/60 seconds. The interval determines how many coordinates the animation proceeds between each call. The animation ends when the coordinates reach the value defined as <span style="font-family: Courier New,Courier,monospace">animationDuration</span>. This option basically allows you to control the speed of the animation.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">8</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ltrStartColor</span></td>
+               <td>String</td>
+               <td>Define the start color for the left-to-right swipe.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">#62a917</span>.</p></td>
+       </tr>   
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">ltrEndColor</span></td>
+               <td>String</td>
+               <td>Define the end color for the left-to-right swipe.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">#58493a</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">rtlStartColor</span></td>
+               <td>String</td>
+               <td>Define the start color for the right-to-left swipe.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">#eaa317</span>.</p></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">rtlEndColor</span></td>
+               <td>String</td>
+               <td>Define the end color for the right-to-left swipe.
+               <p>The default value is <span style="font-family: Courier New,Courier,monospace">#58493a</span>.</p></td>
+       </tr>   
+</tbody>
+</table>
+
+
+
+<h2 id="events-list">Events</h2>
+<p>The following table lists the events related to swipe lists.</p>
+
+<table>
+<tbody>
+       <tr>
+               <th style="width:40%;">Event</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipelist.left</span></td>
+               <td>Triggered when a left-to-right swipe is completed.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">swipelist.right</span></td>
+               <td>Triggered when a right-to-left swipe is completed.</td>
+       </tr>
+
+</tbody>
+</table>
+
+<p>To use the swipe list events, use the following code:</p>
+
+<pre class="prettyprint">
+(function() 
+{
+&nbsp;&nbsp;&nbsp;var slist = document.getElementById(&quot;swipelist&quot;);
+&nbsp;&nbsp;&nbsp;slist.addEventListener(&quot;swipelist.left&quot;, function(evt) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* You can connect your app with a native app (such as phone call or message) using the Device API */
+&nbsp;&nbsp;&nbsp;});
+})();
+</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_toggleswitch.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_toggleswitch.htm
new file mode 100644 (file)
index 0000000..37d32c4
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_toggleswitch.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head> 
+  <script type="text/javascript" src="../../snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="../../styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="../../snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>Toggle Switch</title> 
+ </head> 
+ <body onload="prettyPrint()" id="content"> 
+
+<h1>Toggle Switch</h1>
+
+<p>The toggle switch component shows on the screen a 2-state switch.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+       
+
+               <li><a href="#html-example">HTML Example</a>
+               </li>
+
+</ol>
+
+<h2 id="html-example">HTML Example</h2>
+<h3>Normal size Toggle Switch</h3>
+
+<p>
+To add a toggle switch, you must add the <span style="font-family: Courier New,Courier,monospace">ui-switch</span> class in the <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element. Because toggle switch is dependent on the checkbox component, you must implement the <span style="font-family: Courier New,Courier,monospace">ui-switch-input</span> class in a checkbox <span style="font-family: Courier New,Courier,monospace">input</span> element.</p> 
+<p>To add a toggle switch component to the application, use the following code:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-switch&quot;&gt;
+    &lt;div class=&quot;ui-switch-text&quot;&gt;
+        Toggle Switch
+    &lt;/div&gt;
+    &lt;label class=&quot;ui-toggleswitch&quot;&gt;
+        &lt;input type=&quot;checkbox&quot; class=&quot;ui-switch-input&quot;&gt;
+        &lt;div class=&quot;ui-switch-activation&quot;&gt;
+            &lt;div class=&quot;ui-switch-inneroffset&quot;&gt;
+                &lt;div class=&quot;ui-switch-handler&quot;&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/label&gt;
+&lt;/div&gt;</pre>
+
+
+<h3>Toggle Switch in Listview</h3>
+<p>You can use toggle switch component in list as checkbox/radio. Please refer following code:</p>
+<pre class="prettyprint">&lt;ul class=&quot;ui-listview&quot;&gt;
+    &lt;li class=&quot;li-has-toggle&quot;&gt;
+        &lt;label&gt;
+           Toggle 1
+           &lt;div class=&quot;ui-toggleswitch&quot;&gt;
+               &lt;input type=&quot;checkbox&quot; class=&quot;ui-switch-input&quot;&gt;
+               &lt;div class=&quot;ui-switch-button&quot;&gt;&lt;/div&gt;
+           &lt;/div&gt;
+       &lt;/label&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+   
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+    
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_virtuallist.htm b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_virtuallist.htm
new file mode 100644 (file)
index 0000000..125eed8
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_virtuallist.htm
@@ -0,0 +1,197 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head><script type="text/javascript" src="../../snippet.js"></script>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link href="../../styles.css" rel="StyleSheet" type="text/css">
+<link href="../../snippet.css" rel="StyleSheet" type="text/css">
+  <title>Virtual List</title>
+</head>
+
+<body onload="prettyPrint()" id="content">
+
+<h1>Virtual List</h1>
+
+<p>In the Web environment, it is challenging to display a large amount of data in a list, such as displaying a contact list of over 1000 list items. It takes time to display the entire list in HTML and the DOM manipulation is complex.</p>
+
+<p>The virtual list component is used to display a list of unlimited data elements. The component provides easy access to databases to retrieve and display data. The virtual list component is based on a result set which has a fixed size defined by the developer using the <span style="font-family: Courier New,Courier,monospace">data-row</span>  attribute. A result set must be at least 3 times bigger than size of a clip (number of visible elements).</p>
+
+<h2>Table of Contents</h2>
+
+<ol class="toc">
+
+               <li><a href="#manual-constructor">How to Create Virtual List</a>
+
+               </li>
+
+               <li><a href="#options-list">Options</a>
+
+               </li>
+
+               <li><a href="#methods-list">Methods</a>
+
+               </li>
+</ol>
+
+<h2 id="manual-constructor">How to Create Virtual List</h2>
+<p>To add a virtual list component to the application:</p>
+<ol>
+<li>Create a component container, which is a list element:
+<pre class="prettyprint">
+&lt;ul id=&quot;vlist&quot; class=&quot;ui-listview ui-virtuallistview&quot;&gt;&lt;/ul&gt;
+</pre></li>
+ 
+<li>Insert a virtual list HTML and JSON (<span style="font-family: Courier New,Courier,monospace">virtuallist-db-demo.js</span>) code:
+<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">&lt;script type=&quot;text/javascript&quot; src=&quot;virtuallist-db-demo.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;app.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;../../lib/tau/js/virtuallist.js&quot;&gt;&lt;/script&gt;</pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">/* JSON DATA example in virtuallist-db-demo.js */
+var JSON_DATA = 
+{
+&nbsp;&nbsp;&nbsp;{NAME:&quot;Abdelnaby, Alaa&quot;},
+&nbsp;&nbsp;&nbsp;{NAME:&quot;Abdul-Aziz, Zaid&quot;},
+&nbsp;&nbsp;&nbsp;{NAME:&quot;Abdul-Jabbar, Kareem&quot;},
+&nbsp;&nbsp;&nbsp;{NAME:&quot;Abdul-Rauf, Mahmoud&quot;},
+&nbsp;&nbsp;&nbsp;{NAME:&quot;Abdul-Wahad, Tariq&quot;},
+&nbsp;&nbsp;&nbsp;/* Other list items */
+}
+</pre></pre>
+</li>
+
+<li>Initialize the component and the list item updater function in the <span style="font-family: Courier New,Courier,monospace">app.js</span> file:
+<pre class="prettyprint">
+/* Get HTML element reference */
+var elList = document.getElementById(&quot;vlist&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;/* All config options can be found in virtual list reference */
+&nbsp;&nbsp;&nbsp;&nbsp;vlist = tau.widget.VirtualListview(elList, 
+&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataLength: JSON_DATA.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bufferSize: 40
+&nbsp;&nbsp;&nbsp;&nbsp;});
+/* Update list items */
+vlist.setListItemUpdater(function(elListItem, newIndex) 
+{
+&nbsp;&nbsp;&nbsp;var data = JSON_DATA[newIndex];
+&nbsp;&nbsp;&nbsp;elListItem.innerHTML = &#39;&lt;span class=&quot;ui-li-text-main&quot;>&#39; + data.NAME + &#39;&lt;/span&gt;&#39;;
+});
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">listItemUpdater</span> attribute defines how the list element is updated depending on the data row index. If you do not define the attribute in the configuration, you can set the update feature with the <span style="font-family: Courier New,Courier,monospace">setListItemUpdater()</span> method.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>The virtual list manipulates DOM elements to be more efficient. It does not remove or create list elements before calling the list item update method. It means that the order of the <span style="font-family: Courier New,Courier,monospace">&lt;li&gt;</span> elements is volatile, and you must keep the list element clean from custom classes and attributes.</p></td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+
+<li>When all configuration options are set, use the <span style="font-family: Courier New,Courier,monospace">draw()</span> method to draw the child elements and implement the virtual list:</p>
+<pre class="prettyprint">
+vlist.draw();
+</pre></li>
+
+<li>When you no longer need the component, destroy it using the <span style="font-family: Courier New,Courier,monospace">destroy()</span> method:</p>
+<pre class="prettyprint">
+page.addEventListener(&quot;pagehide&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;vlist.destroy();
+});
+</pre></li>
+</ol>
+
+
+<h2 id="options-list">Options</h2>
+
+<p>The following table describes the virtual list configuration options.</p>
+
+<table>
+<tbody>
+       <tr>
+               <th>Option</th>
+               <th>Type</th>
+               <th>Mandatory</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+      <td><span style="font-family: Courier New,Courier,monospace">dataLength</span></td>
+         <td>Number</td>
+         <td>Yes</td>
+         <td>Defines the number of all data rows.</td>
+       </tr>
+       <tr>
+      <td><span style="font-family: Courier New,Courier,monospace">bufferSize</span></td>
+         <td>Number</td>
+         <td>No</td>
+         <td>Defines the number of virtual list child elements in the result set.
+         <p>The minimum value is 20 and default value is 100. As the value gets higher, the loading time increases while the system performance improves. Pick a value that provides the best performance without excessive loading time and is at least 3 times bigger than the number of displayed items on the device screen.</p></td>
+       </tr>
+       <tr>
+      <td><span style="font-family: Courier New,Courier,monospace">Orientation</span></td>
+         <td>String</td>
+         <td>No</td>
+         <td>Defines the scrolling orientation. The default value is <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>.</p></td>
+       </tr>   
+       <tr>
+      <td><span style="font-family: Courier New,Courier,monospace">listItemUpdater</span></td>
+         <td>Method reference</td>
+         <td>Yes</td>
+         <td>Defines the method which is called to draw a single list item.
+         <p>The method takes the following parameters:
+         <ul>
+      <li><span style="font-family: Courier New,Courier,monospace">elListItem</span>:  HTML <span style="font-family: Courier New,Courier,monospace">&lt;li&gt;</span> element to be parsed</li>
+      <li><span style="font-family: Courier New,Courier,monospace">newIndex</span> (Integer): Row index from the data set</li></ul></p></td>
+       </tr>
+</tbody>
+</table>
+
+<h2 id="methods-list">Methods</h2>
+
+<table>
+<tbody>
+       <tr>
+               <th style="width:40%;">Method</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">draw()</span></td>
+               <td>When all configuration options are set, draws the child elements and implements the virtual list.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">scrollTo(position)</span></td>
+               <td>Scrolls the list to a defined position in pixels.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">scrollToIndex(index)</span></td>
+               <td>Scrolls the list to a defined index.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">setListItemUpdater(function)</span></td>
+               <td>Sets the list item updater function.</td>
+       </tr>   
+</tbody>
+</table>
+
+ <div id="footer"> 
+   <hr size="1" /> 
+   <font size="1">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>.</font> 
+  </div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+
+
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/w3c_api/camera_w.html b/org.tizen.web.apireference/html/w3c_api/camera_w.html
new file mode 100644 (file)
index 0000000..31bc236
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/camera_w.html
@@ -0,0 +1,1506 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen/tizen.css" media="screen">
+<script type="text/javascript" src="tizen/snippet.js"></script><title>Camera API</title>
+</head>
+<body id="content" onload="prettyPrint()">
+<div class="api" id="::Camera">
+<div class="title"><h1>Camera API (Tizen Extension)</h1></div>
+<div class="brief">
+ This API module provides interfaces for configuring camera options, recording video/audio, and capturing images.
+The API is designed to work together with <em>navigator.getUserMedia()</em> API to access media stream object
+and with <em>video</em> element to provide camera preview.
+        </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+        </p>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#::Camera::NavigatorTizenCamera">NavigatorTizenCamera</a>
+</li>
+<li>1.2. <a href="#::Camera::TizenCamera">TizenCamera</a>
+</li>
+<li>1.3. <a href="#::Camera::CreateCameraSuccessCallback">CreateCameraSuccessCallback</a>
+</li>
+<li>1.4. <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a>
+</li>
+<li>1.5. <a href="#::Camera::CameraControl">CameraControl</a>
+</li>
+<li>1.6. <a href="#::Camera::CameraControlSettings">CameraControlSettings</a>
+</li>
+<li>1.7. <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a>
+</li>
+<li>1.8. <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a>
+</li>
+<li>1.9. <a href="#::Camera::CameraMediaRecorder">CameraMediaRecorder</a>
+</li>
+<li>1.10. <a href="#::Camera::CameraImageCapture">CameraImageCapture</a>
+</li>
+<li>1.11. <a href="#::Camera::CameraCapabilities">CameraCapabilities</a>
+</li>
+<li>1.12. <a href="#::Camera::CameraSize">CameraSize</a>
+</li>
+<li>1.13. <a href="#::Camera::CameraArea">CameraArea</a>
+</li>
+<li>1.14. <a href="#::Camera::CameraPictureSettings">CameraPictureSettings</a>
+</li>
+<li>1.15. <a href="#::Camera::CameraRecorderSettings">CameraRecorderSettings</a>
+</li>
+<li>1.16. <a href="#::Camera::CameraError">CameraError</a>
+</li>
+<li>1.17. <a href="#::Camera::CameraSettingErrors">CameraSettingErrors</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#api-features">Related Feature</a>
+</li>
+<li>3. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#::Camera::NavigatorTizenCamera">NavigatorTizenCamera</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::TizenCamera">TizenCamera</a></td>
+<td>void <a href="#createCameraControlidp93720">createCameraControl</a> (<a href="w3c_dependencies.html#::W3C_API_Modules::MediaStream">MediaStream</a> stream, <a href="#::Camera::CreateCameraSuccessCallback">CreateCameraSuccessCallback</a> successCallback, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> errorCallback)</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CreateCameraSuccessCallback">CreateCameraSuccessCallback</a></td>
+<td>void <a href="#handleEventidp103952">handleEvent</a> (<a href="#::Camera::CameraControl">CameraControl</a> cameraControl)</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a></td>
+<td>void <a href="#handleEventidp108776">handleEvent</a> (<a href="#::Camera::CameraError">CameraError</a> error)</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraControl">CameraControl</a></td>
+<td>void <a href="#applySettingsidp122160">applySettings</a> (<a href="#::Camera::CameraControlSettings">CameraControlSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror)<br>boolean <a href="#autoFocusidp128136">autoFocus</a> ()<br>void <a href="#releaseidp129904">release</a> ()</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraControlSettings">CameraControlSettings</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a></td>
+<td>void <a href="#handleEventidp136864">handleEvent</a> ()</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a></td>
+<td>void <a href="#handleEventidp140712">handleEvent</a> (<a href="#::Camera::CameraSettingErrors">CameraSettingErrors</a> errors)</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraMediaRecorder">CameraMediaRecorder</a></td>
+<td>void <a href="#applySettingsidp150280">applySettings</a> (<a href="#::Camera::CameraRecorderSettings">CameraRecorderSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror)<br>void <a href="#startidp156256">start</a> (<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror)<br>void <a href="#stopidp160832">stop</a> (<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror)</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraImageCapture">CameraImageCapture</a></td>
+<td>void <a href="#applySettingsidp171128">applySettings</a> (<a href="#::Camera::CameraPictureSettings">CameraPictureSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror)<br>void <a href="#takePictureidp177080">takePicture</a> (<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror)</td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraCapabilities">CameraCapabilities</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraSize">CameraSize</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraArea">CameraArea</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraPictureSettings">CameraPictureSettings</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraRecorderSettings">CameraRecorderSettings</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraError">CameraError</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::Camera::CameraSettingErrors">CameraSettingErrors</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces">
+<h2>1. Interfaces</h2>
+<div class="interface" id="::Camera::NavigatorTizenCamera">
+<h3>1.1. NavigatorTizenCamera</h3>
+<div class="brief">
+ This interface defines a global object (under <em>navigator</em>) that exposes a single interface for creating a
+<em>CameraControl</em> object.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface NavigatorTizenCamera {
+
+        readonly attribute <a href="#::Camera::TizenCamera">TizenCamera</a> tizCamera;
+    };</pre>
+<pre class="webidl prettyprint">    <a href="w3c_dependencies.html#::W3C_API_Modules::Navigator">Navigator</a> implements <a href="#::Camera::NavigatorTizenCamera">NavigatorTizenCamera</a>;</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="tizCamera">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">TizenCamera </span><span class="name">tizCamera</span></span><div class="brief">
+ An attribute to store tizen camera object.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="::Camera::TizenCamera">
+<h3>1.2. TizenCamera</h3>
+<div class="brief">
+ This interface defines a factory method to create <em>CameraControl</em> object given the <em>MediaStream</em> object as input.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface TizenCamera {
+
+        void createCameraControl(<a href="w3c_dependencies.html#::W3C_API_Modules::MediaStream">MediaStream</a> stream, <a href="#::Camera::CreateCameraSuccessCallback">CreateCameraSuccessCallback</a> successCallback, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> errorCallback);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="createCameraControlidp93720"><code><b><span class="methodName">createCameraControl</span></b></code></dt>
+<dd>
+<div class="brief">
+ Asynchronously create CameraControl object using input stream.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void createCameraControl(<a href="w3c_dependencies.html#::W3C_API_Modules::MediaStream">MediaStream</a> stream, <a href="#::Camera::CreateCameraSuccessCallback">CreateCameraSuccessCallback</a> successCallback, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> errorCallback);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<p><span class="privilegelevel">
+            Privilege level: </span>
+ public
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/camera
+            </p>
+<p><span class="privilege">
+            Privilege: </span>
+ http://tizen.org/privilege/audiorecorder
+            </p>
+<p><span class="remark"> Remark : </span>
+ For video recording and image capture, use <em>http://tizen.org/privilege/camera</em> privilege.
+For audio recording, use <em>http://tizen.org/privilege/audiorecorder</em> privilege.
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">stream</span>: 
+ Stream object obtained from getUserMedia. "audio" of MediaStreamOptions dictionary is supported
+                </li>
+          <li class="param">
+<span class="name">successCallback</span>: 
+ The method to invoke when CameraControl object is created successfully.
+                </li>
+          <li class="param">
+<span class="name">errorCallback</span>: 
+ The method to invoke when an error occurs.
+                </li>
+        </ul>
+</div>
+<div class="example">
+<span class="example"><p>Code example:</p></span><pre name="code" class="examplecode prettyprint"> navigator.webkitGetUserMedia({video:true,audio:true}, gotStream, noStream);
+
+ // For audio recording, use the API as following:
+ // navigator.webkitGetUserMedia({video:false,audio:true}, gotStream, noStream);
+
+ // WARNING :
+ // Audio recording is not supported in initial target platform verison 2.2.1.
+ // Please include following checking and guideline for end user.
+ // if (tizen.systeminfo.getCapabilities().platformVersion === "2.2.1") {
+ //     // Inform the user to upgrade his/her system OS to properly use this application.
+ // }
+
+ function gotStream(stream) {
+   navigator.tizCamera.createCameraControl(stream, gotCamera, noCamera);
+ }
+
+ function noStream() {
+ }
+
+ function gotCamera(cam) {//CameraControl
+   camera = cam;
+ }
+
+ function noCamera() {
+ }
+ </pre>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CreateCameraSuccessCallback">
+<h3>1.3. CreateCameraSuccessCallback</h3>
+<div class="brief">
+ The success callback for TizenCamera.createCameraControl().
+          </div>
+<pre class="webidl prettyprint">    callback interface CreateCameraSuccessCallback {
+
+        void handleEvent(<a href="#::Camera::CameraControl">CameraControl</a> cameraControl);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="handleEventidp103952"><code><b><span class="methodName">handleEvent</span></b></code></dt>
+<dd>
+<div class="brief">
+ Called on successful creation of Camera Control object.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void handleEvent(<a href="#::Camera::CameraControl">CameraControl</a> cameraControl);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">cameraControl</span>: 
+ Created camera control.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraErrorCallback">
+<h3>1.4. CameraErrorCallback</h3>
+<div class="brief">
+ The error callback for any camera error.
+          </div>
+<pre class="webidl prettyprint">    callback interface CameraErrorCallback {
+
+        void handleEvent(<a href="#::Camera::CameraError">CameraError</a> error);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="handleEventidp108776"><code><b><span class="methodName">handleEvent</span></b></code></dt>
+<dd>
+<div class="brief">
+ Called upon Camera API call errors.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void handleEvent(<a href="#::Camera::CameraError">CameraError</a> error);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">error</span>: 
+ Error that occurred.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraControl">
+<h3>1.5. CameraControl</h3>
+<div class="brief">
+ This interface defines attributes and methods to configure camera options, record audio/video, and capture image.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CameraControl {
+
+        readonly attribute <a href="#::Camera::CameraCapabilities">CameraCapabilities</a>   capabilities;
+
+        readonly attribute <a href="#::Camera::CameraMediaRecorder">CameraMediaRecorder</a>  recorder;
+
+        readonly attribute <a href="#::Camera::CameraImageCapture">CameraImageCapture</a>   image;
+
+
+        void applySettings(<a href="#::Camera::CameraControlSettings">CameraControlSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+
+        boolean autoFocus();
+
+        void release();
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="capabilities">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CameraCapabilities </span><span class="name">capabilities</span></span><div class="brief">
+ Represents a collection of camera capabilities that camera device provides.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="recorder">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CameraMediaRecorder </span><span class="name">recorder</span></span><div class="brief">
+ Represents an object defines media recording related methods.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="image">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CameraImageCapture </span><span class="name">image</span></span><div class="brief">
+ Represents an object defines image capture related methods.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="applySettingsidp122160"><code><b><span class="methodName">applySettings</span></b></code></dt>
+<dd>
+<div class="brief">
+ Method to apply new settings to CameraControl object.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void applySettings(<a href="#::Camera::CameraControlSettings">CameraControlSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">settings</span>: 
+ Settings for camera.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ The method to invoke when a new setting is applied successfully.
+                </li>
+          <li class="param">
+<span class="name">onerror</span>: 
+ The method to invoke when setting related error occurs.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="autoFocusidp128136"><code><b><span class="methodName">autoFocus</span></b></code></dt>
+<dd>
+<div class="brief">
+ Method responsible for autofocus.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">boolean autoFocus();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="method" id="releaseidp129904"><code><b><span class="methodName">release</span></b></code></dt>
+<dd>
+<div class="brief">
+ Method to release the camera resource when an application exits the use of camera.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void release();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="::Camera::CameraControlSettings">
+<h3>1.6. CameraControlSettings</h3>
+<div class="brief">
+ The CameraControlSettings object is used as setting parameter in applySettings method.
+          </div>
+<pre class="webidl prettyprint">    dictionary CameraControlSettings {
+
+        <a href="#::Camera::CameraArea">CameraArea</a> focusArea;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="focusArea"><span class="attrName"><a href="#::Camera::CameraArea">CameraArea</a> focusArea</span></dt>
+<dd>
+<div class="brief">
+ Specifies focus area bounds.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraSuccessCallback">
+<h3>1.7. CameraSuccessCallback</h3>
+<div class="brief">
+ Success callback interface for camera methods.
+          </div>
+<pre class="webidl prettyprint">    callback interface CameraSuccessCallback {
+
+        void handleEvent();
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="handleEventidp136864"><code><b><span class="methodName">handleEvent</span></b></code></dt>
+<dd>
+<div class="brief">
+ Called on success.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void handleEvent();
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraSettingErrorCallback">
+<h3>1.8. CameraSettingErrorCallback</h3>
+<div class="brief">
+ Error callback interface for <em>applySettings</em> method.
+          </div>
+<pre class="webidl prettyprint">        callback interface CameraSettingErrorCallback {
+
+            void handleEvent(<a href="#::Camera::CameraSettingErrors">CameraSettingErrors</a> errors);
+        };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="handleEventidp140712"><code><b><span class="methodName">handleEvent</span></b></code></dt>
+<dd>
+<div class="brief">
+ Called on error.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void handleEvent(<a href="#::Camera::CameraSettingErrors">CameraSettingErrors</a> errors);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">errors</span>: 
+ Containing error codes.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraMediaRecorder">
+<h3>1.9. CameraMediaRecorder</h3>
+<div class="brief">
+ This interface defines media recording related methods.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CameraMediaRecorder {
+
+        attribute   onrecordingstatechange;
+
+
+        void applySettings(<a href="#::Camera::CameraRecorderSettings">CameraRecorderSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+
+
+        void start(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+
+
+        void stop(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="onrecordingstatechange">
+<span class="attrName"><span class="type">EventHandler </span><span class="name">onrecordingstatechange</span></span><div class="brief">
+ Recording state change event handler.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="applySettingsidp150280"><code><b><span class="methodName">applySettings</span></b></code></dt>
+<dd>
+<div class="brief">
+ Set new settings for camera recording.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void applySettings(<a href="#::Camera::CameraRecorderSettings">CameraRecorderSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">settings</span>: 
+ New settings for camera recording.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ The method to invoke when new settings is applied successfully.
+                </li>
+          <li class="param">
+<span class="name">onerror</span>: 
+ The method to invoke when some error occurs.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="startidp156256"><code><b><span class="methodName">start</span></b></code></dt>
+<dd>
+<div class="brief">
+ Start recording video using camera device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void start(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ The method to invoke when recording is started successfully.
+                </li>
+          <li class="param">
+<span class="name">onerror</span>: 
+ The method to invoke when some error occurs.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="stopidp160832"><code><b><span class="methodName">stop</span></b></code></dt>
+<dd>
+<div class="brief">
+ Stop recording video using camera device.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void stop(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ The method to invoke when recording is started successfully.
+                </li>
+          <li class="param">
+<span class="name">onerror</span>: 
+ The method to invoke when en error occurs.
+                </li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraImageCapture">
+<h3>1.10. CameraImageCapture</h3>
+<div class="brief">
+ This interface defines image capture related methods.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CameraImageCapture {
+
+        attribute  onshutter;
+
+        void applySettings(<a href="#::Camera::CameraPictureSettings">CameraPictureSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+
+        void takePicture(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="onshutter">
+<span class="attrName"><span class="type">EventHandler </span><span class="name">onshutter</span></span><div class="brief">
+ Shutter event handler.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li></ul>
+</div>
+<div class="methods">
+<h4>Methods</h4>
+<dl>
+<dt class="method" id="applySettingsidp171128"><code><b><span class="methodName">applySettings</span></b></code></dt>
+<dd>
+<div class="brief">
+ Set new settings for camera image capture.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void applySettings(<a href="#::Camera::CameraPictureSettings">CameraPictureSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param">
+<span class="name">settings</span>: 
+ New settings for photo.
+                </li>
+          <li class="param">
+<span class="name">onsuccess</span>: 
+ The method to invoke when new settings is applied successfully.
+                </li>
+          <li class="param">
+<span class="name">onerror</span>: 
+ The method to invoke when en error occurs.
+                </li>
+        </ul>
+</div>
+</dd>
+<dt class="method" id="takePictureidp177080"><code><b><span class="methodName">takePicture</span></b></code></dt>
+<dd>
+<div class="brief">
+ Take picture using camera.
+            </div>
+<div class="synopsis"><pre class="signature prettyprint">void takePicture(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+             </pre></div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<div class="parameters">
+<p><span class="param">Parameters:</span></p>
+<ul>
+          <li class="param"><span class="name">onsuccess</span></li>
+          <li class="param"><span class="name">onerror</span></li>
+        </ul>
+</div>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraCapabilities">
+<h3>1.11. CameraCapabilities</h3>
+<div class="brief">
+ This interface defines a collection of camera capabilities that the camera device provides.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CameraCapabilities {
+
+        readonly attribute <a href="#::Camera::CameraSize">CameraSize</a>[] pictureSizes;
+
+        readonly attribute DOMString[]  pictureFormats;
+
+        readonly attribute DOMString[]  recordingFormats;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul>
+<li class="attribute" id="pictureSizes">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">CameraSize[]  
+                                       </span><span class="name">pictureSizes</span></span><div class="brief">
+ Array containing available picture sizes.
+            </div>
+<div class="description">
+            <p>
+The following values must be supported:
+            </p>
+            <p>
+Device            </p>
+            <ul>
+              <li>
+[320, 240]              </li>
+              <li>
+[320, 320]              </li>
+              <li>
+[640, 480]              </li>
+              <li>
+[640, 640]              </li>
+              <li>
+[1280, 720]              </li>
+              <li>
+[1280, 960]              </li>
+            </ul>
+            <p>
+Emulator            </p>
+            <ul>
+              <li>
+[320, 240]              </li>
+              <li>
+[640, 480]              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="pictureFormats">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]  
+                                       </span><span class="name">pictureFormats</span></span><div class="brief">
+ Array containing available picture formats.
+            </div>
+<div class="description">
+            <p>
+The following formats must be supported:
+            </p>
+            <ul>
+              <li>
+"jpeg"              </li>
+              <li>
+"png"              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+<li class="attribute" id="recordingFormats">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">DOMString[]  
+                                       </span><span class="name">recordingFormats</span></span><div class="brief">
+ Array containing available picture formats.
+            </div>
+<div class="description">
+            <p>
+The following formats must be supported:
+            </p>
+            <ul>
+              <li>
+"3gp"              </li>
+              <li>
+"amr"              </li>
+            </ul>
+           </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li>
+</ul>
+</div>
+</div>
+<div class="dictionary" id="::Camera::CameraSize">
+<h3>1.12. CameraSize</h3>
+<div class="brief">
+ Camera size dictionary.
+          </div>
+<pre class="webidl prettyprint">    dictionary CameraSize {
+
+        long width;
+
+        long height;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="width"><span class="attrName">long width</span></dt>
+<dd>
+<div class="brief">
+ Width of photo/video.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="height"><span class="attrName">long height</span></dt>
+<dd>
+<div class="brief">
+ Height of photo/video.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="::Camera::CameraArea">
+<h3>1.13. CameraArea</h3>
+<div class="brief">
+ Camera area is used to choose specific metric and focus area for the camera, and it contains position of bounds of the area.
+          </div>
+<pre class="webidl prettyprint">    dictionary CameraArea {
+
+        long top;
+
+        long left;
+
+        long bottom;
+
+        long right;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="top"><span class="attrName">long top</span></dt>
+<dd>
+<div class="brief">
+ Top position of selected area.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="left"><span class="attrName">long left</span></dt>
+<dd>
+<div class="brief">
+ Left position of selected area.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="bottom"><span class="attrName">long bottom</span></dt>
+<dd>
+<div class="brief">
+ Bottom position of selected area.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="right"><span class="attrName">long right</span></dt>
+<dd>
+<div class="brief">
+ Right position of selected area.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="::Camera::CameraPictureSettings">
+<h3>1.14. CameraPictureSettings</h3>
+<div class="brief">
+ Camera picture settings is used to set the size, the format, and the file name of pictures.
+          </div>
+<pre class="webidl prettyprint">    dictionary CameraPictureSettings {
+
+        <a href="#::Camera::CameraSize">CameraSize</a> pictureSize;
+
+        DOMString pictureFormat;
+
+        DOMString fileName;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="pictureSize"><span class="attrName"><a href="#::Camera::CameraSize">CameraSize</a> pictureSize</span></dt>
+<dd>
+<div class="brief">
+ Contains size of picture. Only sizes in CameraCapabilities are allowed.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="pictureFormat"><span class="attrName">DOMString pictureFormat</span></dt>
+<dd>
+<div class="brief">
+ Picture format. Available formats described in CameraCapabilities.pictureFormats.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="fileName"><span class="attrName">DOMString fileName</span></dt>
+<dd>
+<div class="brief">
+ File name (without directory) of the picture taken. Files are stored in "/opt/usr/media/Images".
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="dictionary" id="::Camera::CameraRecorderSettings">
+<h3>1.15. CameraRecorderSettings</h3>
+<div class="brief">
+ Camera recorder settings is used to set the maximum file size, the recording format, and the file name of recording video.
+          </div>
+<pre class="webidl prettyprint">    dictionary CameraRecorderSettings {
+
+
+        long maxFileSizeBytes;
+
+        DOMString recordingFormat;
+
+        DOMString fileName;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="attributes">
+<h4>Dictionary members</h4>
+<dl>
+<dt class="member" id="maxFileSizeBytes"><span class="attrName">long maxFileSizeBytes</span></dt>
+<dd>
+<div class="brief">
+ Max size of file in bytes. Maximum file size is 10MB (10485760 bytes).
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="recordingFormat"><span class="attrName">DOMString recordingFormat</span></dt>
+<dd>
+<div class="brief">
+ Format of recording video. Available formats are listed in CameraCapabilities.recordingFormats.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+<dt class="member" id="fileName"><span class="attrName">DOMString fileName</span></dt>
+<dd>
+<div class="brief">
+ File name (without directory) of the recorded video. Files are stored in "/opt/usr/media/Videos".
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</dd>
+</dl>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraError">
+<h3>1.16. CameraError</h3>
+<div class="brief">
+ This interface defines attributes of object passed as error to CameraErrorCallback.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CameraError {
+
+        readonly attribute unsigned short code;
+
+        const unsigned short CREATION_FAILED = 0;
+
+        const unsigned short PERMISSION_DENIED = 1;
+
+        const unsigned short NO_CAMERA = 2;
+
+        const unsigned short PIPELINE_ERR = 3;
+
+    const unsigned short FILE_WRITE_ERR = 4;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="::Camera::CameraError::CREATION_FAILED">
+<span class="name">CREATION_FAILED</span><div class="brief">
+ Code for error occurred during object creation.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraError::PERMISSION_DENIED">
+<span class="name">PERMISSION_DENIED</span><div class="brief">
+ Code for error occurred on permission denied exception.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraError::NO_CAMERA">
+<span class="name">NO_CAMERA</span><div class="brief">
+ Code for error occurred when device has no available camera.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraError::PIPELINE_ERR">
+<span class="name">PIPELINE_ERR</span><div class="brief">
+ Code for error occurred on pipeline error.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraError::FILE_WRITE_ERR">
+<span class="name">FILE_WRITE_ERR</span><div class="brief">
+ Code for error occurred during write to file.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="code">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short </span><span class="name">code</span></span><div class="brief">
+ Error code.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li></ul>
+</div>
+</div>
+<div class="interface" id="::Camera::CameraSettingErrors">
+<h3>1.17. CameraSettingErrors</h3>
+<div class="brief">
+ Error This interface defines attributes of object passed as error to CameraSettingErrorCallback.
+          </div>
+<pre class="webidl prettyprint">    [NoInterfaceObject] interface CameraSettingErrors {
+
+        readonly attribute unsigned short[] codes;
+
+        const unsigned short FOCUS_AREA_ERR = 0;
+
+        const unsigned short PICTURE_SIZE_ERR = 1;
+
+        const unsigned short PICTURE_FORMAT_ERR = 2;
+
+        const unsigned short RECORDING_FORMAT_ERR = 3;
+
+        const unsigned short FILENAME_ERR = 4;
+
+        const unsigned short MAX_FILE_SIZE_BYTES_ERR = 5;
+    };</pre>
+<p><span class="version">
+            Since: </span>
+ 2.2
+          </p>
+<div class="consts">
+<h4>Constants</h4>
+<dl>
+<li class="const" id="::Camera::CameraSettingErrors::FOCUS_AREA_ERR">
+<span class="name">FOCUS_AREA_ERR</span><div class="brief">
+ Code for invalid focus area.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraSettingErrors::PICTURE_SIZE_ERR">
+<span class="name">PICTURE_SIZE_ERR</span><div class="brief">
+ Code for invalid picture size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraSettingErrors::PICTURE_FORMAT_ERR">
+<span class="name">PICTURE_FORMAT_ERR</span><div class="brief">
+ Code for invalid picture format.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraSettingErrors::RECORDING_FORMAT_ERR">
+<span class="name">RECORDING_FORMAT_ERR</span><div class="brief">
+ Code for invalid recording format.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraSettingErrors::FILENAME_ERR">
+<span class="name">FILENAME_ERR</span><div class="brief">
+ Code for invalid file name.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+<li class="const" id="::Camera::CameraSettingErrors::MAX_FILE_SIZE_BYTES_ERR">
+<span class="name">MAX_FILE_SIZE_BYTES_ERR</span><div class="brief">
+ Code for invalid max file size.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+<br><br>
+</li>
+</dl>
+</div>
+<div class="attributes">
+<h4>Attributes</h4>
+<ul><li class="attribute" id="codes">
+<span class="attrName"><span class="readonly">                readonly
+</span><span class="type">unsigned short[]  
+                                       </span><span class="name">codes</span></span><div class="brief">
+ Error code.
+            </div>
+<p><span class="version">
+            Since: </span>
+ 2.2
+            </p>
+</li></ul>
+</div>
+</div>
+</div>
+<h2 id="api-features">2. Related Feature</h2>
+<div id="def-api-features" class="def-api-features">
+                    It is recommended to design feature related code in a modular way. You can check if this API is supported with <em>tizen.systeminfo.getCapabilities()</em> and decide enable/disable codes that need this API.
+                    <div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device with audio recording, define the following requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/media.audio_recording</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device with image capture, define the following requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/media.image_capture</li>
+</div>
+<div class="def-api-feature">
+<p><div class="description">
+            <p>
+To guarantee the running of this application on a device with video recording, define the following requirements in the config file:
+            </p>
+           </div></p>
+<li class="feature">http://tizen.org/feature/media.video_recording</li>
+</div>
+<p></p>
+
+</div>
+<h2 id="full-webidl">3. Full WebIDL</h2>
+<pre class="webidl prettyprint">module Camera {
+
+    [NoInterfaceObject] interface NavigatorTizenCamera {
+
+        readonly attribute <a href="#::Camera::TizenCamera">TizenCamera</a> tizCamera;
+    };
+    <a href="w3c_dependencies.html#::W3C_API_Modules::Navigator">Navigator</a> implements <a href="#::Camera::NavigatorTizenCamera">NavigatorTizenCamera</a>;
+
+
+    [NoInterfaceObject] interface TizenCamera {
+
+        void createCameraControl(<a href="w3c_dependencies.html#::W3C_API_Modules::MediaStream">MediaStream</a> stream, <a href="#::Camera::CreateCameraSuccessCallback">CreateCameraSuccessCallback</a> successCallback, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> errorCallback);
+    };
+
+
+    callback interface CreateCameraSuccessCallback {
+
+        void handleEvent(<a href="#::Camera::CameraControl">CameraControl</a> cameraControl);
+    };
+
+
+    callback interface CameraErrorCallback {
+
+        void handleEvent(<a href="#::Camera::CameraError">CameraError</a> error);
+    };
+
+
+    [NoInterfaceObject] interface CameraControl {
+
+        readonly attribute <a href="#::Camera::CameraCapabilities">CameraCapabilities</a>   capabilities;
+
+        readonly attribute <a href="#::Camera::CameraMediaRecorder">CameraMediaRecorder</a>  recorder;
+
+        readonly attribute <a href="#::Camera::CameraImageCapture">CameraImageCapture</a>   image;
+
+
+        void applySettings(<a href="#::Camera::CameraControlSettings">CameraControlSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+
+        boolean autoFocus();
+
+        void release();
+    };
+
+
+    dictionary CameraControlSettings {
+
+        <a href="#::Camera::CameraArea">CameraArea</a> focusArea;
+    };
+
+
+    callback interface CameraSuccessCallback {
+
+        void handleEvent();
+    };
+
+
+        callback interface CameraSettingErrorCallback {
+
+            void handleEvent(<a href="#::Camera::CameraSettingErrors">CameraSettingErrors</a> errors);
+        };
+
+
+    [NoInterfaceObject] interface CameraMediaRecorder {
+
+        attribute   onrecordingstatechange;
+
+
+        void applySettings(<a href="#::Camera::CameraRecorderSettings">CameraRecorderSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+
+
+        void start(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+
+
+        void stop(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+    };
+
+
+    [NoInterfaceObject] interface CameraImageCapture {
+
+        attribute  onshutter;
+
+        void applySettings(<a href="#::Camera::CameraPictureSettings">CameraPictureSettings</a> settings, <a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraSettingErrorCallback">CameraSettingErrorCallback</a> onerror);
+
+        void takePicture(<a href="#::Camera::CameraSuccessCallback">CameraSuccessCallback</a> onsuccess, <a href="#::Camera::CameraErrorCallback">CameraErrorCallback</a> onerror);
+    };
+
+
+    [NoInterfaceObject] interface CameraCapabilities {
+
+        readonly attribute <a href="#::Camera::CameraSize">CameraSize</a>[] pictureSizes;
+
+        readonly attribute DOMString[]  pictureFormats;
+
+        readonly attribute DOMString[]  recordingFormats;
+    };
+
+
+    dictionary CameraSize {
+
+        long width;
+
+        long height;
+    };
+
+
+    dictionary CameraArea {
+
+        long top;
+
+        long left;
+
+        long bottom;
+
+        long right;
+    };
+
+
+    dictionary CameraPictureSettings {
+
+        <a href="#::Camera::CameraSize">CameraSize</a> pictureSize;
+
+        DOMString pictureFormat;
+
+        DOMString fileName;
+    };
+
+
+    dictionary CameraRecorderSettings {
+
+
+        long maxFileSizeBytes;
+
+        DOMString recordingFormat;
+
+        DOMString fileName;
+    };
+
+
+    [NoInterfaceObject] interface CameraError {
+
+        readonly attribute unsigned short code;
+
+        const unsigned short CREATION_FAILED = 0;
+
+        const unsigned short PERMISSION_DENIED = 1;
+
+        const unsigned short NO_CAMERA = 2;
+
+        const unsigned short PIPELINE_ERR = 3;
+
+    const unsigned short FILE_WRITE_ERR = 4;
+    };
+
+
+    [NoInterfaceObject] interface CameraSettingErrors {
+
+        readonly attribute unsigned short[] codes;
+
+        const unsigned short FOCUS_AREA_ERR = 0;
+
+        const unsigned short PICTURE_SIZE_ERR = 1;
+
+        const unsigned short PICTURE_FORMAT_ERR = 2;
+
+        const unsigned short RECORDING_FORMAT_ERR = 3;
+
+        const unsigned short FILENAME_ERR = 4;
+
+        const unsigned short MAX_FILE_SIZE_BYTES_ERR = 5;
+    };
+};</pre>
+</div>
+<div id="footer">
+<div class="copyright" align="center">              
+                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>. 
+                       </div>
+<script type="text/javascript"> 
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/w3c_api/tizen/snippet.js b/org.tizen.web.apireference/html/w3c_api/tizen/snippet.js
new file mode 100644 (file)
index 0000000..ed1ac43
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/tizen/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,uint,ulong,unchecked,unsafe,ushort,var,byte,"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,null,undefined,var," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.web.apireference/html/w3c_api/tizen/tizen.css b/org.tizen.web.apireference/html/w3c_api/tizen/tizen.css
new file mode 100644 (file)
index 0000000..11e22a9
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/tizen/tizen.css
@@ -0,0 +1,930 @@
+.attribute
+{
+    padding-bottom:15px;
+}
+#content pre
+{
+    /*text-align: left;            -webkit-border-radius: 8px;     -khtml-border-radius: 8px;     -moz-border-radius: 8px;     border-radius: 8px;     border: 1px solid rgba(255, 255, 255, 0.2);     display:block;     color:#2c3123;     margin:15px 0px 15px -8px;     padding:12px 20px 12px 35px;     font-size: 14px;     /*overflow:hidden;*/ /*word-wrap:break-word;*/ /*white-space: normal;*/
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+#content pre code
+{
+    font-size: 1em;
+    margin: 0px;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+#content pre webidl
+{
+    font-size: 1em;
+    margin: 0px;
+    padding: 2px;
+    border: 1px solid #888;
+}
+
+#content .prettyprint
+{
+}
+
+
+#content .signature
+{
+    background-color: #FCE6B9;
+}
+
+#content .examplecode
+{
+    background-color: #D5F1FD;
+}
+
+#content .webidl
+{
+    background-color: #D9F0C4;
+}
+
+#content .prettyprint b
+{
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+
+
+#content pre select
+{
+    border: 1px solid #c61800;
+}
+
+#content input
+{
+    font-size: 16px;
+    margin-right: 10px;
+    font-family: Helvetica;
+    padding: 3px;
+}
+#content input[type="range"]
+{
+    width: 100%;
+}
+
+#content button
+{
+    margin: 20px 10px 0 0;
+    font-family: Verdana;
+}
+
+#content button.large
+{
+    font-size: 32px;
+}
+
+#content pre b
+{
+    font-weight: normal;
+    color: #c61800; /*letter-spacing: -1px;*/
+}
+#content pre em
+{
+    font-weight: normal;
+    font-style: normal;
+    color: #18a600;
+}
+#content pre input[type="range"]
+{
+    height: 6px;
+    cursor: pointer;
+    width: auto;
+}
+
+
+
+#content
+{
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 9pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+    word-wrap: break-word;
+}
+
+#content .product, #content .product-ua, #content .product-cc
+{
+}
+
+#content dfn.external
+{
+    font-weight: normal;
+    font-style: italic;
+}
+
+#content pre.idl
+{
+    border: solid thin;
+    background: #eee;
+    color: #000;
+    padding: 0.5em;
+}
+
+#content pre.idl :link, #content pre.idl :visited
+{
+    color: inherit;
+    background: transparent;
+}
+
+#content dfn
+{
+    font-style: normal;
+    font-weight: bolder;
+}
+#content em.ct, #content em.ct-samp
+{
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: normal;
+}
+
+#content .issue
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #ffc;
+}
+
+#content .issue::before
+{
+    content: "Issue";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .comment
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: #fff;
+}
+
+#content .comment::before
+{
+    content: "Comment";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .ws3
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+#content .ws3::before
+{
+    content: "For WS3 Review";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .ws4
+{
+    padding: 1em;
+    border: 1px solid #f00;
+    background: lightblue;
+}
+
+#content .ws4::before
+{
+    content: "Under discussion";
+    display: block;
+    width: 150px;
+    margin: -1.5em 0 0.5em 0;
+    font-weight: bold;
+    border: 1px solid #f00;
+    background: #fff;
+    padding: 3px 1em;
+}
+
+#content .note
+{
+    margin-left: 2em;
+    border: 2px solid #CFF6D9;
+    padding: .5em;
+    padding-top: 0px;
+    padding-bottom: 1em;
+    color: #444;
+    background-color: #E2FFF0;
+    font-size: 0.8em;
+}
+
+#content dd > dl
+{
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 15px;
+}
+
+#content code
+{
+    font-size: 1.1em;
+    text-decoration: none;
+    color: #002108;
+}
+
+
+#content .dir_listing li
+{
+    list-style-type: none;
+    font-family: Tahoma, Arial, Helvetica, sans-serif;
+}
+
+#content span span
+{
+    /*background-color: yellow;*/
+}
+
+#content li.folder
+{
+    list-style-image: url(images/expanded_folder.png);
+}
+
+#content .authorguide
+{
+    border: 1px solid #67BBB5;
+    background: #E8EBFC;
+    padding: 1em;
+    font-size: .9em;
+    color: #003;
+}
+
+#content .authorguide strong
+{
+    padding: .2em;
+    color: #003;
+    border: none;
+    position: relative;
+    display: block;
+    width: 200px;
+    left: -1.5em;
+    top: -1.5em;
+    background: #C6D8E6;
+    text-align: center;
+}
+
+#content span.notetitle
+{
+    padding: .2em;
+    color: #066;
+    border: none;
+    position: relative;
+    display: block;
+    width: 40px;
+    left: -1.5em;
+    top: -.7em;
+    background: #F2FFF1;
+    padding-left: .2em;
+    text-align: center;
+}
+
+#content var
+{
+    font-family: "Lucida Console" , Monaco, monospace;
+}
+
+#content li.folder li
+{
+    list-style-image: none;
+}
+
+#content .dir_listing .comment
+{
+    border: none;
+    font-family: "Courier New" , Courier, monospace;
+    color: #669933;
+}
+
+#content .dir_listing img
+{
+    vertical-align: middle;
+}
+
+#content .redNote
+{
+    color: red;
+}
+
+#content dl.procedure dt
+{
+    font-weight: normal;
+}
+
+#content .editorialNote
+{
+    padding: 5px;
+    background-color: #F3B9B7;
+    border: 3px dashed #FFEEB8;
+    color: #444;
+    font-size: 0.8em;
+}
+
+#content li > ol
+{
+    list-style-type: upper-alpha;
+}
+
+#content p[id]:after
+{
+    font-size: .8em;
+}
+
+#content table.wac
+{
+    border-width: 1px;
+    border-spacing: 2px;
+    border-style: outset;
+    border-color: #808080;
+    border-collapse: collapse;
+    background-color: #ffffff;
+}
+
+#content table.wac th
+{
+    border-width: 1px;
+    padding: 1px;
+    border-style: inset;
+    border-color: #808080;
+    background-color: #ffffff;
+}
+
+#content table.wac td
+{
+    vertical-align: top;
+    border-width: 1px;
+    padding: 1px;
+    border-style: inset;
+    border-color: #808080;
+    background-color: #ffffff;
+}
+
+#content .wacreqid
+{
+    font-weight: bold;
+}
+
+#content .wacreqid_ext
+{
+    font-weight: bold;
+}
+
+#content wacreqtext
+{
+    font-style: normal;
+}
+
+/* Table styles */
+#content table
+{
+    border-spacing: 0;
+    border-collapse: collapse;
+    border-bottom: 3px solid #005a9c;
+    margin-bottom: 1em;
+}
+
+#content th
+{
+    border-top: 2px solid #719cc7;
+    border-right: 1px solid #c6d9f1;
+    border-left: 1px solid #c6d9f1;
+    background-color: #3D9EC9;
+    padding: 4px;
+    color: White;
+    font-size: 9pt;
+    font-weight: bold;
+}
+
+#content th[scope="row"]
+{
+    background: inherit;
+    color: inherit;
+    border-top: 1px solid #ddd;
+}
+
+#content td
+{
+    padding: 3px 10px;
+    border-top: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+}
+
+#content th:last-of-type, td:last-of-type
+{
+    border-right: none;
+}
+
+#content tr:nth-child(even)
+{
+    background: #f0f6ff;
+}
+
+#content .attrName
+{
+    font-size: 10pt;
+    font-weight: bold;
+}
+
+#content .methodName
+{
+    font-size: 13pt;
+    font-weight: bold;
+}
+
+
+#content
+{
+    background: white;
+    color: #1C1C1C;
+    margin-right: 20px;
+    margin-left: 20px;
+    font-size: 10pt;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+#content :link
+{
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+#content :visited
+{
+    text-decoration: underline;
+    color: #719CC7;
+    font-weight: bold;
+}
+#content a:active
+{
+    color: #C00;
+    background: transparent;
+}
+
+#content a:link img, #content a:visited img
+{
+    border-style: none;
+}
+/* no border on img links */
+
+#content a img
+{
+    color: white;
+}
+/* trick to hide the border in Netscape 4 */
+@media all
+{
+    /* hide the next rule from Netscape 4 */
+    #content a img
+    {
+        color: inherit;
+    }
+    /* undo the color change above */
+}
+
+#content th, #content td
+{
+    /* ns 4 */ /*font-family: sans-serif;*/
+    font-size: 10pt;
+}
+
+#content h1, #content h2, #content h3, #content h4, #content h5, #content h6
+{
+    text-align: left;
+    font-family: Arial, Verdana, Helvetica, sans-serif;
+}
+/* background should be transparent, but WebTV has a bug */
+#content h1, #content h2, #content h3, #content h4
+{
+    color: #005A9C;
+    background: white;
+    padding-top: 0.2em;
+}
+#content h1
+{
+    font-size: 24pt;
+    color: #0E437D;
+}
+#content h2
+{
+    font-size: 18pt;
+    color: #0E437D;
+}
+#content h3
+{
+    font-size: 14pt;
+    color: #1C1C1C;
+}
+#content h4
+{
+    font-size: 12pt;
+    color: #1C1C1C;
+    font-weight: bold;
+}
+#content h5
+{
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-style: italic;
+    font-weight: bold;
+}
+#content h6
+{
+    font-size: 10pt;
+    color: #1C1C1C;
+    font-weight: bold;
+    font-variant: small-caps;
+}
+
+
+#content .hide
+{
+    display: none;
+}
+
+#content div.head
+{
+    margin-bottom: 1em;
+}
+#content div.head h1
+{
+    margin-top: 2em;
+    clear: both;
+}
+#content div.head table
+{
+    margin-left: 2em;
+    margin-top: 2em;
+}
+
+#content p.copyright
+{
+    font-size: small;
+}
+#content p.copyright small
+{
+    font-size: small;
+}
+
+
+#content a[href] img:hover
+{
+    background: white;
+}
+
+@media screen
+{
+    /* hide from IE3 */
+    #content a[href]:hover
+    {
+        background: #ffa;
+    }
+}
+
+#content pre
+{
+    margin-left: 2em;
+}
+/*
+       #content  p {
+         margin-top: 0.6em;
+         margin-bottom: 0.6em;
+       }
+       */
+#content dt, #content dd
+{
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+/* opera 3.50 */
+
+#content pre, #content code
+{
+    font-family: monospace;
+}
+/* navigator 4 requires this */
+
+#content ul.toc, #content ol.toc
+{
+    list-style: disc; /* Mac NS has problem with 'none' */
+    list-style: none;
+}
+
+#content ul.xmlconfig
+{
+    display: inline-block;
+    padding-right: 3%;
+    border-style: dotted;
+    border-width: 1px;
+}
+
+@media aural
+{
+    #content h1, #content h2, #content h3
+    {
+        stress: 20;
+        richness: 90;
+    }
+    #content .hide
+    {
+        speak: none;
+    }
+    #content p.copyright
+    {
+        volume: x-soft;
+        speech-rate: x-fast;
+    }
+    #content dt
+    {
+        pause-before: 20%;
+    }
+    #content pre
+    {
+        speak-punctuation: code;
+    }
+}
+
+#content .toc
+{
+    list-style-type: none;
+}
+
+#content div.exampleInner pre
+{
+    margin-left: 1em;
+    margin-top: 0em;
+    margin-bottom: 0em;
+}
+#content div.exampleOuter
+{
+    border: 4px double gray;
+    margin: 0em;
+    padding: 0em;
+}
+#content div.exampleInner
+{
+    background-color: #d5dee3;
+    border-top-width: 4px;
+    border-top-style: double;
+    border-top-color: #d3d3d3;
+    border-bottom-width: 4px;
+    border-bottom-style: double;
+    border-bottom-color: #d3d3d3;
+    padding: 4px;
+    margin: 0em;
+}
+#content div.exampleWrapper
+{
+    margin: 4px;
+}
+#content div.exampleHeader
+{
+    font-weight: bold;
+    margin: 4px;
+}
+
+
+
+#content .def-api-feature dt, #content dt .def-device-cap, #content dt.const code
+{
+    font: bold 100% sans-serif;
+}
+#content dt.attribute code, #content dt.method code
+{
+    font: italic 100% sans-serif;
+}
+
+#content .def-device-caps dd
+{
+    margin-bottom: 2em;
+}
+
+#content dt.method
+{
+    margin-top: 2em;
+}
+
+#content .summary td
+{
+    text-align: left;
+    background-color: white;
+    color: inherit;
+    font-family: monospace;
+    white-space: pre;
+    padding: .3em 1em .3em 1em;
+}
+/* Pretty printing styles. Used with prettify.js. */
+
+#content .str
+{
+    color: #080;
+}
+#content .kwd
+{
+    color: #008;
+}
+#content .com
+{
+    color: #800;
+}
+#content .typ
+{
+    color: #606;
+}
+#content .lit
+{
+    color: #066;
+}
+#content .pun
+{
+    color: #660;
+}
+#content .pln
+{
+    color: #000;
+}
+#content .tag
+{
+    color: #008;
+}
+#content .atn
+{
+    color: #606;
+}
+#content .atv
+{
+    color: #080;
+}
+#content .dec
+{
+    color: #606;
+}
+#content .readonly
+{
+    color: red;
+}
+#content .type
+{
+    color: #F0ACF0;
+}
+#content .optional, 
+{
+ #   color: #000;
+    #font-weight: bold;
+    font-style: italic;
+}
+
+
+/* Specify class=linenums on a pre to get line numbering */
+#content ol.linenums
+{
+    margin-top: 0;
+    margin-bottom: 0;
+}
+/* IE indents via margin-left */
+#content li.L0, #content li.L1, #content li.L2, #content li.L3, #content li.L5, #content li.L6, #content li.L7, #content li.L8
+{
+    list-style-type: none;
+}
+/* Alternate shading for lines */
+#content li.L1, #content li.L3, #content li.L5, #content li.L7, #content li.L9
+{
+    background: #eee;
+}
+
+/*@media print {*/
+#content .str
+{
+    color: #060;
+}
+#content .kwd
+{
+    color: #006;
+    font-weight: bold;
+}
+#content .com
+{
+    color: #600;
+    font-style: italic;
+}
+#content .typ
+{
+    color: #404;
+    font-weight: bold;
+}
+#content .lit
+{
+    color: #044;
+}
+#content .pun
+{
+    color: #440;
+}
+#content .pln
+{
+    color: #000;
+}
+#content .tag
+{
+    color: #006;
+    font-weight: bold;
+}
+#content .atn
+{
+    color: #404;
+}
+#content .atv
+{
+    color: #060;
+}
+/*}*/
+
+/* div.status Styles */
+#content a[href].status:link{
+    color: #ffffff;
+    text-decoration: none;
+}
+
+#content a[href].status:visited{
+    color: #ffffff;
+}
+
+#content a[href].status:hover{
+    color: #3D9EC9;
+}
+
+/* Footer Styles */
+#footer
+{
+    background-color: #DDDDDD;
+    margin-top: 20px;
+    font-size: .8em;
+    padding: 20px;
+    color: #666;
+}
+
+#footer .sponsor
+{
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    float: right;
+}
+
+#footer .trademark
+{
+    padding: 0 10px 10px 10px;
+    margin-top: 10px;
+    text-align: right;
+    clear: both;
+}
+
+#footer ul
+{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#footer li
+{
+    margin-bottom: 2px;
+}
+.version, span.param, .except, .example, .return
+{
+    font-weight: bold;
+}
+span.name
+{
+    font-weight: bold;
+}
+
diff --git a/org.tizen.web.apireference/html/w3c_api/tizen/tizen.js b/org.tizen.web.apireference/html/w3c_api/tizen/tizen.js
new file mode 100644 (file)
index 0000000..5d036c4
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/tizen/tizen.js
@@ -0,0 +1,1529 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ * <p>
+ *
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Walks the DOM returning a properly escaped version of innerHTML.
+  * @param {Node} node
+  * @param {Array.<string>} out output buffer that receives chunks of HTML.
+  */
+window['PR_normalizedHtml']
+
+/** Contains functions for creating and registering new language handlers.
+  * @type {Object}
+  */
+  = window['PR']
+
+/** Pretty print a chunk of code.
+  *
+  * @param {string} sourceCodeHtml code as html
+  * @return {string} code as html, but prettier
+  */
+  = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+  * {@code class=prettyprint} and prettify them.
+  * @param {Function?} opt_whenDone if specified, called when the last entry
+  *     has been finished.
+  */
+  = window['prettyPrint'] = void 0;
+
+/** browser detection. @extern @returns false if not IE, otherwise the major version. */
+window['_pr_isIE6'] = function () {
+  var ieVersion = navigator && navigator.userAgent &&
+      navigator.userAgent.match(/\bMSIE ([678])\./);
+  ieVersion = ieVersion ? +ieVersion[1] : false;
+  window['_pr_isIE6'] = function () { return ieVersion; };
+  return ieVersion;
+};
+
+
+(function () {
+  // Keyword lists for various languages.
+  var FLOW_CONTROL_KEYWORDS =
+      "break continue do else for if return while ";
+  var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+      "double enum extern float goto int long register short signed sizeof " +
+      "static struct switch typedef union unsigned void volatile ";
+  var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+      "new operator private protected public this throw true try typeof ";
+  var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+      "concept concept_map const_cast constexpr decltype " +
+      "dynamic_cast explicit export friend inline late_check " +
+      "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+      "template typeid typename using virtual wchar_t where ";
+  var JAVA_KEYWORDS = COMMON_KEYWORDS +
+      "abstract boolean byte extends final finally implements import " +
+      "instanceof null native package strictfp super synchronized throws " +
+      "transient ";
+  var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+      "as base by checked decimal delegate descending event " +
+      "fixed foreach from group implicit in interface internal into is lock " +
+      "object out override orderby params partial readonly ref sbyte sealed " +
+      "stackalloc string select uint ulong unchecked unsafe ushort var ";
+  var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+      "debugger eval export function get null set undefined var with " +
+      "Infinity NaN ";
+  var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+      "goto if import last local my next no our print package redo require " +
+      "sub undef unless until use wantarray while BEGIN END ";
+  var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+      "elif except exec finally from global import in is lambda " +
+      "nonlocal not or pass print raise try with yield " +
+      "False True None ";
+  var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+      " defined elsif end ensure false in module next nil not or redo rescue " +
+      "retry self super then true undef unless until when yield BEGIN END ";
+  var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+      "function in local set then until ";
+  var ALL_KEYWORDS = (
+      CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+      PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+  // token style names.  correspond to css classes
+  /** token style for a string literal */
+  var PR_STRING = 'str';
+  /** token style for a keyword */
+  var PR_KEYWORD = 'kwd';
+  /** token style for a comment */
+  var PR_COMMENT = 'com';
+  /** token style for a type */
+  var PR_TYPE = 'typ';
+  /** token style for a literal value.  e.g. 1, null, true. */
+  var PR_LITERAL = 'lit';
+  /** token style for a punctuation string. */
+  var PR_PUNCTUATION = 'pun';
+  /** token style for a punctuation string. */
+  var PR_PLAIN = 'pln';
+
+  /** token style for an sgml tag. */
+  var PR_TAG = 'tag';
+  /** token style for a markup declaration such as a DOCTYPE. */
+  var PR_DECLARATION = 'dec';
+  /** token style for embedded source. */
+  var PR_SOURCE = 'src';
+  /** token style for an sgml attribute name. */
+  var PR_ATTRIB_NAME = 'atn';
+  /** token style for an sgml attribute value. */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   */
+  var PR_NOCODE = 'nocode';
+
+  /** A set of tokens that can precede a regular expression literal in
+    * javascript.
+    * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+    * list, but I've removed ones that might be problematic when seen in
+    * languages that don't support regular expression literals.
+    *
+    * <p>Specifically, I've removed any keywords that can't precede a regexp
+    * literal in a syntactically legal javascript program, and I've removed the
+    * "in" keyword since it's not a keyword in many languages, and might be used
+    * as a count of inches.
+    *
+    * <p>The link a above does not accurately describe EcmaScript rules since
+    * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+    * very well in practice.
+    *
+    * @private
+    */
+  var REGEXP_PRECEDER_PATTERN = function () {
+      var preceders = [
+          "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+          "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+          "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+          "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+          ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+          "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+          "||=", "~" /* handles =~ and !~ */,
+          "break", "case", "continue", "delete",
+          "do", "else", "finally", "instanceof",
+          "return", "throw", "try", "typeof"
+          ];
+      var pattern = '(?:^^|[+-]';
+      for (var i = 0; i < preceders.length; ++i) {
+        pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+      }
+      pattern += ')\\s*';  // matches at end, and matches empty string
+      return pattern;
+      // CAVEAT: this does not properly handle the case where a regular
+      // expression immediately follows another since a regular expression may
+      // have flags for case-sensitivity and the like.  Having regexp tokens
+      // adjacent is not valid in any language I'm aware of, so I'm punting.
+      // TODO: maybe style special characters inside a regexp as punctuation.
+    }();
+
+  // Define regexps here so that the interpreter doesn't have to create an
+  // object each time the function containing them is called.
+  // The language spec requires a new object created even if you don't access
+  // the $1 members.
+  var pr_amp = /&/g;
+  var pr_lt = /</g;
+  var pr_gt = />/g;
+  var pr_quot = /\"/g;
+  /** like textToHtml but escapes double quotes to be attribute safe. */
+  function attribToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;')
+        .replace(pr_quot, '&quot;');
+  }
+
+  /** escapest html special characters to html. */
+  function textToHtml(str) {
+    return str.replace(pr_amp, '&amp;')
+        .replace(pr_lt, '&lt;')
+        .replace(pr_gt, '&gt;');
+  }
+
+
+  var pr_ltEnt = /&lt;/g;
+  var pr_gtEnt = /&gt;/g;
+  var pr_aposEnt = /&apos;/g;
+  var pr_quotEnt = /&quot;/g;
+  var pr_ampEnt = /&amp;/g;
+  var pr_nbspEnt = /&nbsp;/g;
+  /** unescapes html to plain text. */
+  function htmlToText(html) {
+    var pos = html.indexOf('&');
+    if (pos < 0) { return html; }
+    // Handle numeric entities specially.  We can't use functional substitution
+    // since that doesn't work in older versions of Safari.
+    // These should be rare since most browsers convert them to normal chars.
+    for (--pos; (pos = html.indexOf('&#', pos + 1)) >= 0;) {
+      var end = html.indexOf(';', pos);
+      if (end >= 0) {
+        var num = html.substring(pos + 3, end);
+        var radix = 10;
+        if (num && num.charAt(0) === 'x') {
+          num = num.substring(1);
+          radix = 16;
+        }
+        var codePoint = parseInt(num, radix);
+        if (!isNaN(codePoint)) {
+          html = (html.substring(0, pos) + String.fromCharCode(codePoint) +
+                  html.substring(end + 1));
+        }
+      }
+    }
+
+    return html.replace(pr_ltEnt, '<')
+        .replace(pr_gtEnt, '>')
+        .replace(pr_aposEnt, "'")
+        .replace(pr_quotEnt, '"')
+        .replace(pr_nbspEnt, ' ')
+        .replace(pr_ampEnt, '&');
+  }
+
+  /** is the given node's innerHTML normally unescaped? */
+  function isRawContent(node) {
+    return 'XMP' === node.tagName;
+  }
+
+  var newlineRe = /[\r\n]/g;
+  /**
+   * Are newlines and adjacent spaces significant in the given node's innerHTML?
+   */
+  function isPreformatted(node, content) {
+    // PRE means preformatted, and is a very common case, so don't create
+    // unnecessary computed style objects.
+    if ('PRE' === node.tagName) { return true; }
+    if (!newlineRe.test(content)) { return true; }  // Don't care
+    var whitespace = '';
+    // For disconnected nodes, IE has no currentStyle.
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      // Firefox makes a best guess if node is disconnected whereas Safari
+      // returns the empty string.
+      whitespace = window.getComputedStyle(node, null).whiteSpace;
+    }
+    return !whitespace || whitespace === 'pre';
+  }
+
+  function normalizedHtml(node, out, opt_sortAttrs) {
+    switch (node.nodeType) {
+      case 1:  // an element
+        var name = node.tagName.toLowerCase();
+
+        out.push('<', name);
+        var attrs = node.attributes;
+        var n = attrs.length;
+        if (n) {
+          if (opt_sortAttrs) {
+            var sortedAttrs = [];
+            for (var i = n; --i >= 0;) { sortedAttrs[i] = attrs[i]; }
+            sortedAttrs.sort(function (a, b) {
+                return (a.name < b.name) ? -1 : a.name === b.name ? 0 : 1;
+              });
+            attrs = sortedAttrs;
+          }
+          for (var i = 0; i < n; ++i) {
+            var attr = attrs[i];
+            if (!attr.specified) { continue; }
+            out.push(' ', attr.name.toLowerCase(),
+                     '="', attribToHtml(attr.value), '"');
+          }
+        }
+        out.push('>');
+        for (var child = node.firstChild; child; child = child.nextSibling) {
+          normalizedHtml(child, out, opt_sortAttrs);
+        }
+        if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
+          out.push('<\/', name, '>');
+        }
+        break;
+      case 3: case 4: // text
+        out.push(textToHtml(node.nodeValue));
+        break;
+    }
+  }
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union o the sets o strings matched d by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+
+    function decodeEscape(charsetPart) {
+      if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); }
+      switch (charsetPart.charAt(1)) {
+        case 'b': return 8;
+        case 't': return 9;
+        case 'n': return 0xa;
+        case 'v': return 0xb;
+        case 'f': return 0xc;
+        case 'r': return 0xd;
+        case 'u': case 'x':
+          return parseInt(charsetPart.substring(2), 16)
+              || charsetPart.charCodeAt(1);
+        case '0': case '1': case '2': case '3': case '4':
+        case '5': case '6': case '7':
+          return parseInt(charsetPart.substring(1), 8);
+        default: return charsetPart.charCodeAt(1);
+      }
+    }
+
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        switch (p) {
+          case '\\B': case '\\b':
+          case '\\D': case '\\d':
+          case '\\S': case '\\s':
+          case '\\W': case '\\w':
+            groups.push(p);
+            continue;
+        }
+        var start = decodeEscape(p);
+        var end;
+        if (i + 2 < n && '-' === charsetParts[i + 1]) {
+          end = decodeEscape(charsetParts[i + 2]);
+          i += 2;
+        } else {
+          end = start;
+        }
+        ranges.push([start, end]);
+        // If the range might intersect letters, then expand it.
+        if (!(end < 65 || start > 122)) {
+          if (!(end < 65 || start > 90)) {
+            ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+          }
+          if (!(end < 97 || start > 122)) {
+            ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+          }
+        }
+      }
+
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+
+      // Expand letters to groupts to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+
+      return parts.join('');
+    }
+
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+  var PR_innerHtmlWorks = null;
+  function getInnerHtml(node) {
+    // inner html is hopelessly broken in Safari 2.0.4 when the content is
+    // an html description of well formed XML and the containing tag is a PRE
+    // tag, so we detect that case and emulate innerHTML.
+    if (null === PR_innerHtmlWorks) {
+      var testNode = document.createElement('PRE');
+      testNode.appendChild(
+          document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));
+      PR_innerHtmlWorks = !/</.test(testNode.innerHTML);
+    }
+
+    if (PR_innerHtmlWorks) {
+      var content = node.innerHTML;
+      // XMP tags contain unescaped entities so require special handling.
+      if (isRawContent(node)) {
+        content = textToHtml(content);
+      } else if (!isPreformatted(node, content)) {
+        content = content.replace(/(<br\s*\/?>)[\r\n]+/g, '$1')
+            .replace(/(?:[\r\n]+[ \t]*)+/g, ' ');
+      }
+      return content;
+    }
+
+    var out = [];
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      normalizedHtml(child, out);
+    }
+    return out.join('');
+  }
+
+  /** returns a function that expand tabs to spaces.  This function can be fed
+    * successive chunks of text, and will maintain its own internal state to
+    * keep track of how tabs are expanded.
+    * @return {function (string) : string} a function that takes
+    *   plain text and return the text with tabs expanded.
+    * @private
+    */
+  function makeTabExpander(tabWidth) {
+    var SPACES = '                ';
+    var charInLine = 0;
+
+    return function (plainText) {
+      // walk over each character looking for tabs and newlines.
+      // On tabs, expand them.  On newlines, reset charInLine.
+      // Otherwise increment charInLine
+      var out = null;
+      var pos = 0;
+      for (var i = 0, n = plainText.length; i < n; ++i) {
+        var ch = plainText.charAt(i);
+
+        switch (ch) {
+          case '\t':
+            if (!out) { out = []; }
+            out.push(plainText.substring(pos, i));
+            // calculate how much space we need in front of this part
+            // nSpaces is the amount of padding -- the number of spaces needed
+            // to move us to the next column, where columns occur at factors of
+            // tabWidth.
+            var nSpaces = tabWidth - (charInLine % tabWidth);
+            charInLine += nSpaces;
+            for (; nSpaces >= 0; nSpaces -= SPACES.length) {
+              out.push(SPACES.substring(0, nSpaces));
+            }
+            pos = i + 1;
+            break;
+          case '\n':
+            charInLine = 0;
+            break;
+          default:
+            ++charInLine;
+        }
+      }
+      if (!out) { return plainText; }
+      out.push(plainText.substring(pos));
+      return out.join('');
+    };
+  }
+
+  var pr_chunkPattern = new RegExp(
+      '[^<]+'  // A run of characters other than '<'
+      + '|<\!--[\\s\\S]*?--\>'  // an HTML comment
+      + '|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>'  // a CDATA section
+      // a probable tag that should not be highlighted
+      + '|<\/?[a-zA-Z](?:[^>\"\']|\'[^\']*\'|\"[^\"]*\")*>'
+      + '|<',  // A '<' that does not begin a larger chunk
+      'g');
+  var pr_commentPrefix = /^<\!--/;
+  var pr_cdataPrefix = /^<!\[CDATA\[/;
+  var pr_brPrefix = /^<br\b/i;
+  var pr_tagNameRe = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/;
+
+  /** split markup into chunks of html tags (style null) and
+    * plain text (style {@link #PR_PLAIN}), converting tags which are
+    * significant for tokenization (<br>) into their textual equivalent.
+    *
+    * @param {string} s html where whitespace is considered significant.
+    * @return {Object} source code and extracted tags.
+    * @private
+    */
+  function extractTags(s) {
+    // since the pattern has the 'g' modifier and defines no capturing groups,
+    // this will return a list of all chunks which we then classify and wrap as
+    // PR_Tokens
+    var matches = s.match(pr_chunkPattern);
+    var sourceBuf = [];
+    var sourceBufLen = 0;
+    var extractedTags = [];
+    if (matches) {
+      for (var i = 0, n = matches.length; i < n; ++i) {
+        var match = matches[i];
+        if (match.length > 1 && match.charAt(0) === '<') {
+          if (pr_commentPrefix.test(match)) { continue; }
+          if (pr_cdataPrefix.test(match)) {
+            // strip CDATA prefix and suffix.  Don't unescape since it's CDATA
+            sourceBuf.push(match.substring(9, match.length - 3));
+            sourceBufLen += match.length - 12;
+          } else if (pr_brPrefix.test(match)) {
+            // <br> tags are lexically significant so convert them to text.
+            // This is undone later.
+            sourceBuf.push('\n');
+            ++sourceBufLen;
+          } else {
+            if (match.indexOf(PR_NOCODE) >= 0 && isNoCodeTag(match)) {
+              // A <span class="nocode"> will start a section that should be
+              // ignored.  Continue walking the list until we see a matching end
+              // tag.
+              var name = match.match(pr_tagNameRe)[2];
+              var depth = 1;
+              var j;
+              end_tag_loop:
+              for (j = i + 1; j < n; ++j) {
+                var name2 = matches[j].match(pr_tagNameRe);
+                if (name2 && name2[2] === name) {
+                  if (name2[1] === '/') {
+                    if (--depth === 0) { break end_tag_loop; }
+                  } else {
+                    ++depth;
+                  }
+                }
+              }
+              if (j < n) {
+                extractedTags.push(
+                    sourceBufLen, matches.slice(i, j + 1).join(''));
+                i = j;
+              } else {  // Ignore unclosed sections.
+                extractedTags.push(sourceBufLen, match);
+              }
+            } else {
+              extractedTags.push(sourceBufLen, match);
+            }
+          }
+        } else {
+          var literalText = htmlToText(match);
+          sourceBuf.push(literalText);
+          sourceBufLen += literalText.length;
+        }
+      }
+    }
+    return { source: sourceBuf.join(''), tags: extractedTags };
+  }
+
+  /** True if the given tag contains a class attribute with the nocode class. */
+  function isNoCodeTag(tag) {
+    return !!tag
+        // First canonicalize the representation of attributes
+        .replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,
+                 ' $1="$2$3$4"')
+        // Then look for the attribute we want.
+        .match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/);
+  }
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      source: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+    var notWs = /\S/;
+
+    /**
+     * Lexes job.source and produces an output array job.decorations of style
+     * classes preceded by the position at which they start in job.source in
+     * order.
+     *
+     * @param {Object} job an object like {@code
+     *    source: {string} sourceText plain text,
+     *    basePos: {int} position of job.source in the larger chunk of
+     *        sourceCode.
+     * }
+     */
+    var decorate = function (job) {
+      var sourceCode = job.source, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    if (options['hashComments']) {
+      if (options['cStyleComments']) {
+        // Stop C preprocessor declarations at an unclosed open comment
+        shortcutStylePatterns.push(
+            [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+             null, '#']);
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var keywords = options['keywords'].replace(/^\s+|\s+$/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /** Breaks {@code job.source} around style boundaries in
+    * {@code job.decorations} while re-interleaving {@code job.extractedTags},
+    * and leaves the result in {@code job.prettyPrintedHtml}.
+    * @param {Object} job like {
+    *    source: {string} source as plain text,
+    *    extractedTags: {Array.<number|string>} extractedTags chunks of raw
+    *                   html preceded by their position in {@code job.source}
+    *                   in order
+    *    decorations: {Array.<number|string} an array of style classes preceded
+    *                 by the position at which they start in job.source in order
+    * }
+    * @private
+    */
+  function recombineTagsAndDecorations(job) {
+    var sourceText = job.source;
+    var extractedTags = job.extractedTags;
+    var decorations = job.decorations;
+
+    var html = [];
+    // index past the last char in sourceText written to html
+    var outputIdx = 0;
+
+    var openDecoration = null;
+    var currentDecoration = null;
+    var tagPos = 0;  // index into extractedTags
+    var decPos = 0;  // index into decorations
+    var tabExpander = makeTabExpander(window['PR_TAB_WIDTH']);
+
+    var adjacentSpaceRe = /([\r\n ]) /g;
+    var startOrSpaceRe = /(^| ) /gm;
+    var newlineRe = /\r\n?|\n/g;
+    var trailingSpaceRe = /[ \r\n]$/;
+    var lastWasSpace = true;  // the last text chunk emitted ended with a space.
+
+    // See bug 71 and http://stackoverflow.com/questions/136443/why-doesnt-ie7-
+    var isIE678 = window['_pr_isIE6']();
+    var lineBreakHtml = (
+        isIE678
+        ? (job.sourceNode.tagName === 'PRE'
+           // Use line feeds instead of <br>s so that copying and pasting works
+           // on IE.
+           // Doing this on other browsers breaks lots of stuff since \r\n is
+           // treated as two newlines on Firefox.
+           ? (isIE678 === 6 ? '&#160;\r\n' :
+              isIE678 === 7 ? '&#160;<br>\r' : '&#160;\r')
+           // IE collapses multiple adjacent <br>s into 1 line break.
+           // Prefix every newline with '&#160;' to prevent such behavior.
+           // &nbsp; is the same as &#160; but works in XML as well as HTML.
+           : '&#160;<br />')
+        : '<br />');
+
+    // Look for a class like linenums or linenums:<n> where <n> is the 1-indexed
+    // number of the first line.
+    var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
+    var lineBreaker;
+    if (numberLines) {
+      var lineBreaks = [];
+      for (var i = 0; i < 10; ++i) {
+        lineBreaks[i] = lineBreakHtml + '</li><li class="L' + i + '">';
+      }
+      var lineNum = numberLines[1] && numberLines[1].length 
+          ? numberLines[1] - 1 : 0;  // Lines are 1-indexed
+      html.push('<ol class="linenums"><li class="L', (lineNum) % 10, '"');
+      if (lineNum) {
+        html.push(' value="', lineNum + 1, '"');
+      }
+      html.push('>');
+      lineBreaker = function () {
+        var lb = lineBreaks[++lineNum % 10];
+        // If a decoration is open, we need to close it before closing a list-item
+        // and reopen it on the other side of the list item.
+        return openDecoration
+            ? ('</span>' + lb + '<span class="' + openDecoration + '">') : lb;
+      };
+    } else {
+      lineBreaker = lineBreakHtml;
+    }
+
+    // A helper function that is responsible for opening sections of decoration
+    // and outputing properly escaped chunks of source
+    function emitTextUpTo(sourceIdx) {
+      if (sourceIdx > outputIdx) {
+        if (openDecoration && openDecoration !== currentDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        if (!openDecoration && currentDecoration) {
+          openDecoration = currentDecoration;
+          html.push('<span class="', openDecoration, '">');
+        }
+        // This interacts badly with some wikis which introduces paragraph tags
+        // into pre blocks for some strange reason.
+        // It's necessary for IE though which seems to lose the preformattedness
+        // of <pre> tags when their innerHTML is assigned.
+        // http://stud3.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+        // and it serves to undo the conversion of <br>s to newlines done in
+        // chunkify.
+        var htmlChunk = textToHtml(
+            tabExpander(sourceText.substring(outputIdx, sourceIdx)))
+            .replace(lastWasSpace
+                     ? startOrSpaceRe
+                     : adjacentSpaceRe, '$1&#160;');
+        // Keep track of whether we need to escape space at the beginning of the
+        // next chunk.
+        lastWasSpace = trailingSpaceRe.test(htmlChunk);
+        html.push(htmlChunk.replace(newlineRe, lineBreaker));
+        outputIdx = sourceIdx;
+      }
+    }
+
+    while (true) {
+      // Determine if we're going to consume a tag this time around.  Otherwise
+      // we consume a decoration or exit.
+      var outputTag;
+      if (tagPos < extractedTags.length) {
+        if (decPos < decorations.length) {
+          // Pick one giving preference to extractedTags since we shouldn't open
+          // a new style that we're going to have to immediately close in order
+          // to output a tag.
+          outputTag = extractedTags[tagPos] <= decorations[decPos];
+        } else {
+          outputTag = true;
+        }
+      } else {
+        outputTag = false;
+      }
+      // Consume either a decoration or a tag or exit.
+      if (outputTag) {
+        emitTextUpTo(extractedTags[tagPos]);
+        if (openDecoration) {
+          // Close the current decoration
+          html.push('</span>');
+          openDecoration = null;
+        }
+        html.push(extractedTags[tagPos + 1]);
+        tagPos += 2;
+      } else if (decPos < decorations.length) {
+        emitTextUpTo(decorations[decPos]);
+        currentDecoration = decorations[decPos + 1];
+        decPos += 2;
+      } else {
+        break;
+      }
+    }
+    emitTextUpTo(sourceText.length);
+    if (openDecoration) {
+      html.push('</span>');
+    }
+    if (numberLines) { html.push('</li></ol>'); }
+    job.prettyPrintedHtml = html.join('');
+  }
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        source: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.source in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if ('console' in window) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null true false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var sourceCodeHtml = job.sourceCodeHtml;
+    var opt_langExtension = job.langExtension;
+
+    // Prepopulate output in case processing fails with an exception.
+    job.prettyPrintedHtml = sourceCodeHtml;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndExtractedTags = extractTags(sourceCodeHtml);
+      /** Plain text. @type {string} */
+      var source = sourceAndExtractedTags.source;
+      job.source = source;
+      job.basePos = 0;
+
+      /** Even entries are positions in source in ascending order.  Odd entries
+        * are tags that were extracted at that position.
+        * @type {Array.<number|string>}
+        */
+      job.extractedTags = sourceAndExtractedTags.tags;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+      // Integrate the decorations and tags back into the source code to produce
+      // a decorated html string which is left in job.prettyPrintedHtml.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension) {
+    var job = {
+      sourceCodeHtml: sourceCodeHtml,
+      langExtension: opt_langExtension
+    };
+    applyDecorator(job);
+    return job.prettyPrintedHtml;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return (new Date).getTime(); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock.now() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock.now() < endTime; k++) {
+        var cs = elements[k];
+        if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR_registerLangHandler.
+          var langExtension = cs.className.match(/\blang-(\w+)\b/);
+          if (langExtension) { langExtension = langExtension[1]; }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // fetch the content as a snippet of properly escaped HTML.
+            // Firefox adds newlines at the end.
+            var content = getInnerHtml(cs);
+            content = content.replace(/(?:\r\n?|\n)$/, '');
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              sourceCodeHtml: content,
+              langExtension: langExtension,
+              sourceNode: cs
+            };
+            applyDecorator(prettyPrintingJob);
+            replaceWithPrettyPrintedHtml();
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    function replaceWithPrettyPrintedHtml() {
+      var newContent = prettyPrintingJob.prettyPrintedHtml;
+      if (!newContent) { return; }
+      var cs = prettyPrintingJob.sourceNode;
+
+      // push the prettified html back into the tag.
+      if (!isRawContent(cs)) {
+        // just replace the old html with the new
+        cs.innerHTML = newContent;
+      } else {
+        // we need to change the tag to a <pre> since <xmp>s do not allow
+        // embedded tags such as the span tags used to attach styles to
+        // sections of source code.
+        var pre = document.createElement('PRE');
+        for (var i = 0; i < cs.attributes.length; ++i) {
+          var a = cs.attributes[i];
+          if (a.specified) {
+            var aname = a.name.toLowerCase();
+            if (aname === 'class') {
+              pre.className = a.value;  // For IE 6
+            } else {
+              pre.setAttribute(a.name, a.value);
+            }
+          }
+        }
+        pre.innerHTML = newContent;
+
+        // remove the old
+        cs.parentNode.replaceChild(pre, cs);
+        cs = pre;
+      }
+    }
+
+    doWork();
+    content = document.getElementById('content');
+    highlight(content, 'MUST NOT');
+    highlight(content, 'SHALL NOT');
+    highlight(content, 'MAY NOT');
+    highlight(content, 'SHOULD NOT');
+    highlight(content, 'MUST');
+    highlight(content, 'SHALL');
+    highlight(content, 'MAY');
+    highlight(content, 'SHOULD');
+
+  }
+
+function highlight(container,what) {
+    var content = container.innerHTML;
+    pattern = new RegExp(what,'g');
+    replaceWith = '<b>'+what+'</b>',
+    container.innerHTML = content.replace(pattern,replaceWith);
+}
+
+  window['PR_normalizedHtml'] = normalizedHtml;
+  window['prettyPrintOne'] = prettyPrintOne;
+  window['prettyPrint'] = prettyPrint;
+  window['PR'] = {
+        'combinePrefixPatterns': combinePrefixPatterns,
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
+
+window.onload= function() { 
+       prettyPrint();
+};
diff --git a/org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html b/org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html
new file mode 100644 (file)
index 0000000..2969a75
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script 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 and Supplementaries API Reference</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <h1>W3C/HTML5 and Supplementaries API Reference</h1>
+
+ 
+<p>Click the profile you want:</p>
+<p><a href="w3c_api_m.html"><img alt="Mobile Web" src="../images/mw_division.png"/></a> <a href="w3c_api_w.html"><img alt="Wearable Web" src="../images/ww_division.png"/></a></p>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+<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>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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>
+
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/w3c_api/w3c_api_m.html b/org.tizen.web.apireference/html/w3c_api/w3c_api_m.html
new file mode 100644 (file)
index 0000000..a137e79
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/w3c_api_m.html
@@ -0,0 +1,803 @@
+    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+        <link media="screen" href="./tizen/tizen.css" type="text/css" rel="stylesheet">
+        <script type="text/javascript">
+
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-25976949-1']);
+        _gaq.push(['_setDomainName', 'tizen.org']);
+        _gaq.push(['_trackPageview']);
+
+        (function() {
+          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+          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>
+        <title>Tizen Mobile Web W3C/HTML5 and Supplementaries API Reference</title>
+        </head>
+        <body id="content">
+            <div id="title" class="api">
+                <h1>Tizen Mobile Web W3C/HTML5 and Supplementaries API Reference</h3>
+            </div>
+                <p>The APIs listed in this category are all part of the W3C specifications. Some of the APIs are stable while others are draft specifications. The draft APIs are subject to change as the W3C specification evolves.</p>
+                <p>The W3C APIs are categorized based on the functionality to make it easier to locate specific APIs. 
+                 To learn the Tizen features provided by the W3C/HTML5 and  some supplementary APIs, see <a href="../../../org.tizen.guides/html/web/w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a> and <a href="../../../org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm">W3C/HTML5 and Some Supplementaries Tutorials</a>.</p>
+            <div><h4 id="dom">DOM, Forms and Styles</h4>
+                <table width="90%">
+                    <thead>
+                        <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td id="forms" name="forms"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#forms">HTML5 Forms (Partial)</a></td>
+                            <td>HTML5 form features. The content attribute currently not supported is:
+                                <ul>
+                                    <li><code>formnovalidate</code> of <code>form</code> element</li>
+                                </ul>
+                            </td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="selectors1" name="selectors1"><a href="http://www.w3.org/TR/2012/WD-selectors-api-20120628/">Selectors API Level 1</a></td>
+                            <td>API for retrieving Element nodes from the DOM by matching against a group of selectors</td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="selectors2" name="selectors2"><a href="http://www.w3.org/TR/2010/WD-selectors-api2-20100119/">Selectors API Level 2 (Partial)</a></td>
+                            <td>API for retrieving Element nodes from the DOM by matching against a group of selectors, and for testing if a given element matches a particular selector. The methods currently not supported are:
+                            <ul>
+                                <li><code>queryScopedSelector, queryScopedSelectorAll</code> of <code>NodeSelector</code> interface</li>
+                                <li><code>matchesSelector</code> of <code>Element</code> interface</li>
+                            </ul>
+                            </td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="mediaquery" name="mediaquery"><a href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619">Media Queries (Partial)</a></td>
+                            <td>Offers a mechanism that allows adapting the layout and behavior of a Web page based on some of the characteristics of the device, including the screen width/height. The query currently not supported is:
+                            <ul>
+                                <li><code>color-index, min-color-index, max-color-index, resolution, scan, print, 3d-glasses, grid</code></li>
+                            </ul>
+                            </td>
+                            <td align="center">REC</td>
+                        </tr>
+                        <tr>
+                            <td id="transforms" name="transforms"><a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">CSS Transforms</a></td>
+                            <td>CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.</td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="animations" name="animations"><a href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">CSS Animations Module Level 3</a></td>
+                            <td>CSS Animations allow an author to modify CSS property values over time.</td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="transitions" name="transitions"><a href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">CSS Transitions Module Level 3 (Partial)</a></td>
+                            <td>CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. The method and attribute currently not supported are:
+                                <ul>
+                                    <li><code>initTransitionEvent</code> of <code>TransitionEvent</code> interface</li>
+                                    <li><code>pseudoElement</code> of <code>TransitionEvent</code> interface</li>
+                                </ul>
+                            </td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="color" name="color"><a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</a></td>
+                            <td>CSS3 color enhancements related to color values and properties for foreground color and group opacity</td>
+                            <td align="center">REC</td>
+                        </tr>
+                        <tr>
+                            <td id="border" name="border"><a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">CSS Backgrounds and Borders Module Level 3</a></td>
+                            <td>Rounded corners, complex background images, shadow effects.</td>
+                            <td align="center">CR</td>
+                        </tr>
+                        <tr>
+                            <td id="flexi" name="flexi"><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">CSS Flexible Box Layout Module</a></td>
+                            <td>CSS box model optimized for user interface design.</td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="multicolumn" name="multicolumn"><a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">CSS Multi-column Layout Module (Partial)</a></td>
+                            <td>Creates multiple columns for laying out text. The property currently not supported is:
+                                <ul>
+                                    <li><code>column-fill</code></li>
+                                </ul>
+                                The values currently not supported are:
+                                <ul>
+                                    <li><code>column</code>, <code>avoid-page</code> and <code>avoid-column</code> of properties <code>break-before</code> and <code>break-after</code></li>
+                                    <li><code>avoid-page</code> and <code>avoid-column</code> of property <code>break-inside</code> </li>
+                                </ul>
+                            </td>
+                            <td align="center">CR</td>
+                        </tr>
+                        <tr>
+                            <td id="text" name="text"><a href="http://www.w3.org/TR/2012/WD-css3-text-20121113">CSS Text Module Level 3 (Partial)</a></td>
+                            <td>CSS properties for text manipulation and specifies their processing model. The properties currently not supported are:
+                                <ul>
+                                    <li><code>text-justify, text-decoration-color, text-decoration-line, text-decoration-style, text-decoration-skip, hanging-punctuation</code></li>
+                                </ul>
+                            </td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="basicui" name="basicui"><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></td>
+                            <td>User interface related CSS enhancements.</td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="font" name="font"><a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823">CSS Fonts Module Level 3 (Partial)</a></td>
+                            <td>@font-face rule with downloadable font src URL. The features currently not supported are:
+                                <ul>
+                                    <li><code>font-feature-settings, font-language-override, font-synthesis, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-numeric, font-variant-position, font-size-adjust, font-stretch</code></li>
+                                </ul>
+                            </td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="woff" name="woff"><a href="http://www.w3.org/TR/2012/PR-WOFF-20121011/">WOFF File Format 1.0</a></td>
+                            <td>Web Open Font Format: File Format 1.0.</td>
+                            <td align="center">PR</td>
+                        </tr>
+                        <tr>
+                            <td id="dom" name="dom"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/">DOM/JavaScript related HTML5 Enhancements</a></td>
+                            <td>Handy DOM/JavaScript related enhancements in HTML5.</td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="history" name="history"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#history">HTML5 The session history of browsing contexts (Partial)</a></td>
+                            <td>Navigating the sequence of documents in a browsing context. The methods currently not supported are:
+                                <ul>
+                                    <li><code>resolveURL</code> of <code>Location</code> interface</li>
+                                    <li><code>initPopStateEvent</code> of <code>PopStateEvent</code> interface</li>
+                                    <li><code>initPageTransitionEvent</code> of <code>PageTransitionEvent</code> interface</li>
+                                </ul>
+                            </td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div id="device"><h4>Device </h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="touch" name="touch"><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/">Touch Events version 1 (Partial)</a></td>
+                                <td>W3C touch event specification for touch devices. The method currently not supported is:
+                                    <ul>
+                                        <li><code>identifiedTouch</code> of <code>TouchList</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="orientation" name="orientation">
+                                <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201">DeviceOrientation Event Specification (Partial)</a></td>
+                                <td>Provides access to orientation and acceleration data. The method and event currently not supported are:
+                                    <ul>
+                                        <li><code>initAccelerometerEvent</code> of <code>DeviceMotionEvent</code> interface</li>
+                                        <li><code>compassneedscalibration</code> event</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/sensor.accelerometer</code></li>
+                                                <li><code>http://tizen.org/feature/sensor.gyroscope</code></li>
+                                                <li><code>http://tizen.org/feature/sensor.magnetometer</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="battery" name="battery"><a href="http://www.w3.org/TR/2012/CR-battery-status-20120508">Battery Status API </a></td>
+                                <td>W3C Battery API defines new DOM event types that provide information about the battery status of the hosting device. </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="vibration" name="vibration"><a href="http://www.w3.org/TR/2012/WD-vibration-20120202/">Vibration API </a></td>
+                                <td>Haptic feedback API from W3C.</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="browserstate" name="browserstate"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html?path=5_4_5#event-online">HTML5 Browser state</a></td>
+                                <td>Signals when network connectivity is available to the Web environment</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="sceenori" name="screenori"><a href="http://www.w3.org/TR/2012/WD-screen-orientation-20120522">The Screen Orientation API </a></td>
+                                <td>To provide an interface for web applications to be able to read 
+                                    the screen orientation state, to be informed when this state changes 
+                                    and to be able to lock the screen orientation to a specific state</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/sensor.magnetometer</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                           <!-- <tr>
+                                <td id="networkinfo" name="networkinfo"><a href="http://www.w3.org/TR/2012/WD-netinfo-api-20121129/">The Network Information API </a></td>
+                                <td>W3C Network Information API provides an interface for the Web Applications to access the underlying network information (connection info) of the device.</td>
+                                <td align="center">WD</td>
+                            </tr>-->
+                            <!--
+                            <tr>
+                                <td id="sensor" name="sensor"><a href="http://dev.w3.org/2009/dap/system-info/Sensors.html">Sensors</a></td>
+                                <td>W3C Sensors API provides scripted access to the sensors information associated with the hosting device.<br/>Note: Tizen implements the Sensor API under 'tizen' namespace in the version.</td>
+                            </tr>
+                            -->
+                        </tbody>
+                    </table>
+            </div>
+
+            <h4  id="graphics">Graphics</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="canvas" name="canvas"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element">HTML5 The <code>canvas</code> element (Partial)</a></td>
+                                <td>HTML5 canvas element including 2D context and text. The method currently not supported is:
+                                    <ul>
+                                        <li><code>toBlob</code> of <code>HTMLCanvasElement</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="canvas2d" name="canvas2d"><a href="http://www.w3.org/TR/2012/WD-2dcontext-20120329/">HTML Canvas 2D Context (Partial)</a></td>
+                                <td>2D Context for the HTML canvas element. The methods currently not supported are:
+                                    <ul>
+                                        <li><code>drawSystemFocusRing, drawCustomFocusRing, scrollPathIntoView</code> of <code>CanvasRenderingContext2D</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="svg" name="svg"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-map-element.html#svg-0">HTML5 SVG</a></td>
+                                <td>Inline SVG (1.1) support in HTML5</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+            <h4 id="media">Media</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="video" name="video"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-video-element">HTML5 The <code>video</code> element (Partial)</a></td>
+                                <td>HTML5 video element. The attributes currently not supported are:
+                                    <ul>
+                                        <li><code>startOffsetTime</code> and <code>videoTracks</code> of <code>HTMLMediaElement</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="audio" name="audio"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-audio-element">HTML5 The <code>audio</code> element (Partial)</a></td>
+                                <td>HTML5 audio element. The attributes currently not supported are:
+                                    <ul>
+                                        <li><code>startOffsetTime</code> and <code>audioTracks</code> of <code>HTMLMediaElement</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="getusermedia" name="getusermedia"><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia-20111130.html"><code>getUserMedia</code> (Partial)</a>
+                                </td>
+                                <td>API that directly manipulates streams from cameras and microphones. The dictionary member currently not supported is:
+                                    <ul>
+                                        <li><code>audio</code> of <code>MediaStreamOptions</code> dictionary</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/mediacapture</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/camera</code></li>
+                                                <li><code>http://tizen.org/feature/microphone</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    </br>
+                                    <b>*Note: Only the front-facing camera is available in this version (Tizen 2.3 Mobile Profile).</b>
+                                    
+                                </td>
+                                <td align="center">ED</td>
+                            </tr>
+                            <tr>
+                                <td id="webaudio" name="webaudio"><a href=" http://www.w3.org/TR/2012/WD-webaudio-20121213/">Web Audio API (Partial)</a></td>
+                                <td>W3C Web Audio API describes a high-level JavaScript API for processing and synthesizing audio in Web Applications. The interfaces and attribute currently not supported are:
+                                    <ul>
+                                        <li><code>MediaElementAudioSourceNode</code> and <code>MediaStreamAudioSourceNode</code> interfaces
+                                        <li><code>computedValue</code> of <code>AudioParam</code> interface</li>
+                                    </ul>
+                                    The enum string constant value currently not supported for <code>panningModel</code> attribute is:
+                                    <ul>
+                                        <li><code>SOUNDFIELD</code> of <code>PanningModelType</code> enum</li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="webspeech" name="webspeech"><a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web Speech (Partial)</a></td>
+                                <td>W3C Web Speech API defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. The attributes and events currently not supported are:
+                                    <!--
+                                    <ul>
+                                        <li><code>continuous, interimResults, grammars, maxAlternatives, serviceURI</code> of <code>SpeechRecognition</code> interface</li>
+                                        <li><code>onsoundstart, onsoundend, onspeechstart, onspeechend</code> of <code>SpeechRecognition</code> interface</li>
+                                        <li><code>no-speech, aborted, not-allowed, service-not-supported, bad-grammar</code> of <code>SpeechRecognition</code> interface</li>
+                                    </ul>
+                                    -->
+                                    <ul>
+                                        <li><code>rate, pitch, volume, voiceURI</code> of <code>SpeechSynthesis</code> interface</li>
+                                        <li><code>onmark, onboundary</code> of <code>SpeechSynthesis</code> interface</li>
+                                    </ul>
+                                    The interfaces currently not supported are:
+                                    <ul>
+                                        <li><code>SpeechRecognition</code> interface</li>
+                                        <li><code>SpeechSynthesisVoiceList</code> interface</li>
+                                    </ul>
+                                    </br>
+                                    <!--
+                                    <div>SpeechRecognition</div>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/speech.recognition</code></li>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                                <li><code>http://tizen.org/feature/microphone</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    -->
+                                    <div>SpeechSynthesis</div>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>: 
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/speech.synthesis</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">Note</td>
+                            </tr>
+                            <tr>
+                                <td id="mediacapture" name="mediacapture"><a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/">HTML Media Capture </a></td>
+                                <td>Capture and record multimedia content with input tag.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/camera</code></li>
+                                                <li><code>http://tizen.org/feature/microphone</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>   
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+            <div id="communication"><h4>Communication</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="websocket" name="websocket"><a href="http://www.w3.org/TR/2012/CR-websockets-20120920">The WebSocket API</a></td>
+                                <td>Offers bi-directional network connectivity.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <!--
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                        -->
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="httpreq" name="httpreq"><a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/">XMLHttpRequest Level 2</a></td>
+                                <td>Enhancements on XHR, including binary file uploading, formdata submission, transfer progress, etc.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <!--
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                        -->
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="serversent" name="serversent"><a href="http://www.w3.org/TR/2011/WD-eventsource-20111020">Server-Sent Events</a></td>
+                                <td>The API allows triggering DOM events based on push notifications(via HTTP and other protocols).</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <!--
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                        -->
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="messaging" name="messaging"><a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501">HTML5 Web Messaging</a></td>
+                                <td>HTML5 Web Messaging. The postMessage API allows for Web Applications to communicate between each other.
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                        </tbody>
+                    </table>
+            </div>
+            <div id="storage"><h4>Storage</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="webstorage" name="webstorage"><a href="http://www.w3.org/TR/2011/CR-webstorage-20111208/">Web Storage</a></td>
+                                <td>W3C storage specification including session and local storage.
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="file" name="file"><a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/">File API</a></td>
+                                <td>Reads files from local device file system.</td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="directory" name="directory"><a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419">File API: Directories and System</a></td>
+                                <td>API that allows accessing the device file system.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>                     
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                            </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="writer" name="writer"><a href="http://www.w3.org/TR/2011/WD-file-writer-api-20110419/">File API: Writer (Partial)</a></td>
+                                <td>Saves or modifies files in local device file system. The interface and method currently not supported are:
+                                    <ul>
+                                        <li><code>FileSaver</code> interface</li>
+                                        <li><code>saveAs</code> of <code>Window</code> interface</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="cache" name="cache"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#appcache">HTML5 Application caches</a></td>
+                                <td>HTML5 application cache and custom handlers.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <!--
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                        -->
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="database" name="database"><a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/">Indexed Database API (Partial)</a></td>
+                                <td>A database of values and hierarchical objects that integrates naturally with JavaScript, and can be queried and updated very efficiently. The attributes and method currently not supported are:
+                                    <ul>
+                                        <li><code>oldVersion, newVersion</code> of <code>IDBVersionChangeEvent</code> interface</li>
+                                        <li><code>initIDBVersionChangeEvent</code> of <code>IDBVersionChangeEvent</code> interface</li>
+                                    </ul>
+                                    </br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="sql" name="sql"><a href="http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/">Web SQL Database</a></td>
+                                <td>API for storing data in databases that can be queried using a variant of SQL.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br>                              </li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">Note</td>
+                            </tr>
+                        </tbody>
+                    </table>
+            </div>
+            <h4  id="security">Security</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="cross" name="cross"><a href="http://www.w3.org/TR/2012/WD-cors-20120403">Cross-Origin Resource Sharing</a></td>
+                                <td>Sharing of resources across different domains.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <!--
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                        -->
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="iframe" name="iframe"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html?path=5_2_8#the-iframe-element">HTML5 The <code>iframe</code> element</a></td>
+                                <td>Access restriction (sandboxing) for iframe content. The available values of sandbox attribute are:
+                                    <ul>
+                                        <li><code>allow-same-origin, allow-scripts, allow-forms, allow-top-navigation</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="contentsec" name="contentsec"><a href="http://www.w3.org/TR/2012/CR-CSP-20121115">Content Security Policy 1.0 (Partial)</a></td>
+                                <td>Defines a policy language used to declare a set of content restrictions for a web resource, and a mechanism for transmitting the policy from a server to a client where the policy is enforced. The directive currently not supported is:
+                                    <ul>
+                                        <li><code>object-src</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+            <h4  id="ui">UI</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="clipboard" name="clipboard"><a href="http://www.w3.org/TR/2012/WD-clipboard-apis-20120223/">Clipboard API and events (Partial)</a></td>
+                                <td>To describe APIs for clipboard operations such as copy, cut and paste in web applications.
+                                    <ul>
+                                        <li>The constructor of <code>ClipboardEvent</code> interface is not supported.</li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="dnd" name="dnd"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html">HTML5 Drag and drop (Partial)</a></td>
+                                <td>To define an event-based drag-and-drop mechanism. The method currently not supported is:
+                                    <ul>
+                                        <li><code>addElement</code> of <code>DataTransfer</code> interface</li>
+                                    </ul></td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="webnoti" name="webnoti"><a href="http://www.w3.org/TR/2012/WD-notifications-20120614">Web Notifications (Partial)</a></td>
+                                <td>To define an API for displaying simple notifications to the user. The dictionary members currently not supported are:
+                                    <ul>
+                                        <li><code>titleDir, bodyDir</code> of <code>NotificationOptions</code> dictionary</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/notification</code></li>
+                                    </ul> 
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+            <div id="performance"><h4>Performance and Optimization</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="web_workers" name="web_workers"><a href="http://www.w3.org/TR/2012/CR-workers-20120501">Web Workers (Partial)</a></td>
+                                <td>API that allows Web application authors to spawn background workers running scripts in parallel to their main page. The event handlers, interfaces and attributes currently not supported are:
+                                    <ul>
+                                        <li><code>ononline, onoffline</code> of <code>WorkerGlobalScope</code> interface</li>
+                                        <li><code>SharedWorkerGlobalScope</code> and <code>SharedWorker</code> interfaces</li>
+                                        <li><code>lineno, filename</code> of <code>ErrorEvent</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="visibility" name="visibility"><a href="http://www.w3.org/TR/2012/CR-page-visibility-20120726/">Page Visibility </a></td>
+                                <td>This specification defines a means for developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient Web applications.</td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="timing" name="timing"><a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/">Timing control for script-based animations </a></td>
+                                <td>Resource effective animation timing control by user agent.</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td><a href="http://www.w3.org/TR/navigation-timing/">Navigation Timing </a></td>
+                                <td>Tools to Web developers for optimizing their Web applications.<br>(<i>Note: this API is not supported by the beta release of SDK.</i>)</td>
+                                </tr>
+                            -->
+                            <tr>
+                                <td id="navtiming" name="navtiming"><a href="http://www.w3.org/TR/2012/REC-navigation-timing-20121217/">Navigation Timing</a></td>
+                                <td>This specification defines an interface for web applications to access timing information related to navigation and elements.</td>
+                                <td align="center">REC</td>
+                            </tr>
+                        </tbody>
+                    </table>
+            </div>
+
+        <div id="location"><h4>Location</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="geo"><a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510">Geolocation API Specification</a></td>
+                                <td>Provides scripted access to geographical location information associated with the hosting device.
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/location</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>: <code>http://tizen.org/feature/location.gps</code></li>
+                                    </ul>                        
+                                </td>
+                                <td align="center">PR</td>
+                            </tr>
+                        </tbody>
+                    </table>
+        </div>
+        <h4 id="widget">Widget</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="packaging" name="packaging"><a href="http://www.w3.org/TR/2011/REC-widgets-20110927/">Widget Packaging and XML Configuration</a></td>
+                                <td>A packaging format and metadata for a class of software known as <code>widgets.</code>
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                            <tr>
+                                <td id="widget" name="widget"><a href="http://www.w3.org/TR/2011/WD-widgets-apis-20110607/">Widget Interface</a></td>
+                                <td>API for widgets that provides, amongst other things, functionality for accessing a widget's metadata and persistently storing data.
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="signature" name="signature"><a href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/">XML Digital Signatures for Widgets</a></td>
+                                <td>A profile of the XML Signature Syntax and Processing 1.1 specification to allow a widget package to be digitally signed.
+                                </td>
+                                <td align="center">PR</td>
+                            </tr>
+                            <tr>
+                                <td id="accreq" name="accreq"><a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/">Widget Access Request Policy</a></td>
+                                <td>The security model controlling network access from within a widget, as well as a method for authors to request that the user agent grant access to certain network resources or sets thereof.
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+<!-- YHM -->
+
+       <h4 id="Supplementary">Supplementary</h4>
+                     <table width="90%">
+                        <thead>
+                              <tr><th  style="width:20%">Specification</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="typed_array" name="typed_array"><a href="https://www.khronos.org/registry/typedarray/specs/1.0/">Typed Array - Khronos</a></td>
+                                <td>Provides an API for interoperability with native binary data.</td>
+                                </tr>
+                            <tr>
+                                <td id="webgl" name="webgl"><a href="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Khronos (Partial)</a></td>
+                                <td> This specification describes an additional rendering context and support objects for the HTML 5 canvas element. This context allows rendering using an API that conforms closely to the OpenGL ES 2.0 API. The method and attribute currently not supported are:
+                                    <li><code>initWebGLContextEvent</code> of <code>WebGLContextEvent</code> interface</li>
+                                    <li><code>NUM_COMPRESSED_TEXTURE_FORMATS</code> of <code>WebGLRenderingContext</code> interface</li>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td id="fullscreen" name="fullscreen"><a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI">FullScreen API - Mozilla (Partial)</a></td>
+                                <td>Provides a way for an element to be displayed in full screen mode programmatically. The method and attribute currently not supported are:
+                                    <li><code>requestFullScreenWithKeys</code> of element</li>
+                                    <li><code>allowFullScreen</code> of <code>iframe</code> element</li>
+                                <p><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege Level</a>: Public</br>                              
+                                <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/fullscreen</code>  </p>      
+                                </td>
+                                </tr>
+                            <tr>
+                                <td><code>viewport</code> Meta Tag - Apple</td>
+                                <td><p>Allows Web developers control the viewport's size and scale. </br>
+                                            <code>https://developer.apple.com/library/safari/documentation/Appleapplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26</code>
+                                         </p>
+                                       </td>
+                                </tr>
+                            <!--  <tr>
+                                <td><a href="http://www.json.org/">JSON parsing/stringfy (JSON.org Spec)</a></td>
+                                <td>Native JSON parsing and stringfy method support. Currently supported attributes are:
+                                    <li><code>http, mailto, https</code></li>
+                                </td>
+                                </tr>
+                            <tr>
+                                <td><a href="http://www.openmobilealliance.org/Technical/release_program/docs/URI_Schemes/V1_0-20080626-A/OMA-TS-URI_Schemes-V1_0-20080626-A.pdf">URI scheme (tel:, sms:, mmsto:, mailto:) (OMA Spec)</a></td>
+                                <td>Launches native scheme handlers.</td>
+                                </tr> -->
+                        </tbody>
+                    </table>
+               </div> 
+
+
+
+<!--END YHM-->
+
+                <div id="status">
+                    <strong><em>* W3C Specification Status</em></strong>
+                    <ul>
+                        <li>ED = Editor’s Draft</li>
+                        <li>WD = Working Draft</li>
+                        <li>LCWD = Last Call Working Draft</li>
+                        <li>CR = Candidate Recommendation</li>
+                        <li>PR = Proposed Recommendation</li>
+                        <li>REC = Recommendation</li>
+                        <div>
+                            <a href="http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels">(see W3C Technical Report Development Process)</a>
+                        </div>
+                    </ul>
+                    <strong><em>Note: The APIs in ED, WD, LC status are considered to be in preliminary state. Such APIs do not carry a version compatibility promise. They may change in future versions of Tizen if the specifications change.</em></strong>
+                </div>
+                <div id="footer">
+                   <div class="copyright" align="center">
+                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>. 
+                   </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/org.tizen.web.apireference/html/w3c_api/w3c_api_w.html b/org.tizen.web.apireference/html/w3c_api/w3c_api_w.html
new file mode 100644 (file)
index 0000000..f5e705e
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/w3c_api_w.html
@@ -0,0 +1,857 @@
+    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+        <link media="screen" href="./tizen/tizen.css" type="text/css" rel="stylesheet">
+        <script type="text/javascript">
+
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-25976949-1']);
+        _gaq.push(['_setDomainName', 'tizen.org']);
+        _gaq.push(['_trackPageview']);
+
+        (function() {
+          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+          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>
+        <title>Tizen Wearable Web W3C/HTML5 and Supplementaries API Reference</title>
+        </head>
+        <body id="content">
+            <div id="title" class="api">
+                <h1>Tizen Wearable Web W3C/HTML5 and Supplementaries API Reference</h3>
+            </div>
+                <p>The APIs listed in this category are all part of the W3C specifications. Some of the APIs are stable while others are draft specifications. The draft APIs are subject to change as the W3C specification evolves.</p>
+                <p>The W3C APIs are categorized based on the functionality to make it easier to locate specific APIs. 
+                 To learn the Tizen features provided by the W3C/HTML5 and  some supplementary APIs, see <a href="../../../org.tizen.guides/html/web/w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a> and <a href="../../../org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm">W3C/HTML5 and Some Supplementaries Tutorials</a>.</p>
+            <div><h4 id="dom">DOM, Forms and Styles</h4>
+                <table width="90%">
+                    <thead>
+                        <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td id="forms" name="forms"><a href="http://www.w3.org/TR/2014/CR-html5-20140429/forms.html#forms">HTML5 Forms (Partial)</a></td>
+                            <td>HTML5 form features. The method and attribute currently not supported is:
+                                <ul>
+                                    <li><code>getter (RadioNodeList or Element) (DOMString name)
+                                    </code> of <code>HTMLFormElement</code> interface</li>
+                                    <li><code>tooShort
+                                    </code> of <code>ValidityState</code> interface</li>
+                                </ul>
+                            </td>
+                            <td align="center">CR</td>
+                        </tr>
+                        <tr>
+                            <td id="selectors1" name="selectors1"><a href="http://www.w3.org/TR/2013/REC-selectors-api-20130221/">Selectors API Level 1</a></td>
+                            <td>API for retrieving Element nodes from the DOM by matching against a group of selectors</td>
+                            <td align="center">REC</td>
+                        </tr>
+                        <tr>
+                            <td id="selectors2" name="selectors2"><a href="http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/">Selectors API Level 2 (Partial)</a></td>
+                            <td>API for retrieving Element nodes from the DOM by matching against a group of selectors, and for testing if a given element matches a particular selector. The methods currently not supported are:
+                            <ul>
+                                <li><code>find, findAll</code> of <code>Document</code> interface</li>
+                                <li><code>find, findAll</code> of <code>DocumentFragment</code> interface</li>
+                                <li><code>find, findAll</code> of <code>Element</code> interface</li>
+                            </ul>
+                            </td>
+                            <td align="center">Note</td>
+                        </tr>
+                        <tr>
+                            <td id="mediaquery" name="mediaquery"><a href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">Media Queries</a></td>
+                            <td>Offers a mechanism that allows adapting the layout and behavior of a Web page based on some of the characteristics of the device, including the screen width/height.
+                            <!--
+                            The query currently not supported is:
+                            <ul>
+                                <li><code>color-index, min-color-index, max-color-index, resolution, scan, print, 3d-glasses, grid</code></li>
+                            </ul>
+                            -->
+                            </td>
+                            <td align="center">REC</td>
+                        </tr>
+                        <tr>
+                            <td id="transforms" name="transforms"><a href="http://www.w3.org/TR/2013/WD-css-transforms-1-20131126/">CSS Transforms</a></td>
+                            <td>CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.</td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="animations" name="animations"><a href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/">CSS Animations Module Level 3</a></td>
+                            <td>CSS Animations allow an author to modify CSS property values over time.</td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="transitions" name="transitions"><a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/">CSS Transitions Module Level 3</a></td>
+                            <td>CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
+                            <!--
+                            The method and attribute currently not supported are:
+                                <ul>
+                                    <li><code>initTransitionEvent</code> of <code>TransitionEvent</code> interface</li>
+                                    <li><code>pseudoElement</code> of <code>TransitionEvent</code> interface</li>
+                                </ul>
+                            -->
+                            </td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="color" name="color"><a href="http://www.w3.org/TR/2011/REC-css3-color-20110607/">CSS Color Module Level 3</a></td>
+                            <td>CSS3 color enhancements related to color values and properties for foreground color and group opacity</td>
+                            <td align="center">REC</td>
+                        </tr>
+                        <tr>
+                            <td id="border" name="border"><a href="http://www.w3.org/TR/2014/WD-css3-background-20140204/">CSS Backgrounds and Borders Module Level 3</a></td>
+                            <td>Rounded corners, complex background images, shadow effects.</td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="flexi" name="flexi"><a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/">CSS Flexible Box Layout Module</a></td>
+                            <td>CSS box model optimized for user interface design.</td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <!--
+                        <tr>
+                            <td id="multicolumn" name="multicolumn"><a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">CSS Multi-column Layout Module (Partial)</a></td>
+                            <td>Creates multiple columns for laying out text. The property currently not supported is:
+                                <ul>
+                                    <li><code>column-fill</code></li>
+                                </ul>
+                                The values currently not supported are:
+                                <ul>
+                                    <li><code>column</code>, <code>avoid-page</code> and <code>avoid-column</code> of properties <code>break-before</code> and <code>break-after</code></li>
+                                    <li><code>avoid-page</code> and <code>avoid-column</code> of property <code>break-inside</code> </li>
+                                </ul>
+                            </td>
+                            <td align="center">CR</td>
+                        </tr>
+                        -->
+                        <tr>
+                            <td id="text" name="text"><a href="http://www.w3.org/TR/2013/WD-css-text-3-20131010/">CSS Text Module Level 3 (Partial)</a></td>
+                            <td>CSS properties for text manipulation and specifies their processing model. The property and property values currently not supported are:
+                                <ul>
+                                    <li><code>hanging-punctuation</code></li>
+                                    <li><code>full-width</code> of <code>text-transform</code> property</li>
+                                    <li><code>keep-all</code> of <code>word-break</code> property</li>
+                                </ul>
+                            </td>
+                            <td align="center">LCWD</td>
+                        </tr>
+                        <tr>
+                            <td id="basicui" name="basicui"><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></td>
+                            <td>User interface related CSS enhancements.</td>
+                            <td align="center">WD</td>
+                        </tr>
+                        <tr>
+                            <td id="font" name="font"><a href="http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/">CSS Fonts Module Level 3 (Partial)</a></td>
+                            <td>@font-face rule with downloadable font src URL. The properties and property values currently not supported are:
+                                <ul>
+                                    <li><code>font-language-override, font-size-adjust, font-synthesis, font-variant-alternates, font-variant-east-asian, font-variant-numeric, font-variant-position</code></li>
+                                    <li><code>font-variant-caps, petite-caps, all-petite-caps, unicase, titling-caps</code> of <code>font-variant-caps</code> property</li>
+                                </ul>
+                            </td>
+                            <td align="center">CR</td>
+                        </tr>
+                        <tr>
+                            <td id="woff" name="woff"><a href="http://www.w3.org/TR/2012/REC-WOFF-20121213/">WOFF File Format 1.0</a></td>
+                            <td>Web Open Font Format: File Format 1.0.</td>
+                            <td align="center">REC</td>
+                        </tr>
+                        <tr>
+                            <td id="dom" name="dom"><a href="http://www.w3.org/TR/2014/CR-html5-20140429/">DOM/JavaScript related HTML5 Enhancements</a></td>
+                            <td>Handy DOM/JavaScript related enhancements in HTML5.</td>
+                            <td align="center">CR</td>
+                        </tr>
+                        <tr>
+                            <td id="history" name="history"><a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#history">HTML5 The session history of browsing contexts (Partial)</a></td>
+                            <td>Navigating the sequence of documents in a browsing context. The dictionaries currently not supported are:
+                                <ul>
+                                    <li><code>PopStateEventInit</code></li>
+                                    <li><code>HashChangeEventInit</code></li>
+                                    <li><code>PageTransitionEventInit</code></li>
+                                </ul>
+                            </td>
+                            <td align="center">CR</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div id="device"><h4>Device </h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="touch" name="touch"><a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/">Touch Events version 1</a></td>
+                                <td>W3C touch event specification for touch devices. 
+                                <!--
+                                The method currently not supported is:
+                                    <ul>
+                                        <li><code>identifiedTouch</code> of <code>TouchList</code> interface</li>
+                                    </ul>
+                                -->
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                            <tr>
+                                <td id="orientation" name="orientation">
+                                <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/">DeviceOrientation Event Specification (Partial)</a></td>
+                                <td>Provides access to orientation and acceleration data. The event currently not supported is:
+                                    <ul>
+                                        <!-- <li><code>initAccelerometerEvent</code> of <code>DeviceMotionEvent</code> interface</li> -->
+                                        <li><code>compassneedscalibration</code> <!-- and <code>DeviceOrientationEvent</code> interface --></li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/sensor.accelerometer</code></li>
+                                                <li><code>http://tizen.org/feature/sensor.gyroscope</code></li>
+                                                <li><code>http://tizen.org/feature/sensor.magnetometer</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="battery" name="battery"><a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/">Battery Status API</a></td>
+                                <td>W3C Battery API defines new DOM event types that provide information about the battery status of the hosting device. </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="vibration" name="vibration"><a href="http://www.w3.org/TR/2014/WD-vibration-20140211/">Vibration API</a></td>
+                                <td>Haptic feedback API from W3C.</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="browserstate" name="browserstate"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html?path=5_4_5#event-online">HTML5 Browser state</a></td>
+                                <td>Signals when network connectivity is available to the Web environment</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="sceenori" name="screenori"><a href="http://www.w3.org/TR/2012/WD-screen-orientation-20120522">The Screen Orientation API </a></td>
+                                <td>To provide an interface for web applications to be able to read 
+                                    the screen orientation state, to be informed when this state changes 
+                                    and to be able to lock the screen orientation to a specific state</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/sensor.magnetometer</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="networkinfo" name="networkinfo"><a href="http://www.w3.org/TR/2012/WD-netinfo-api-20121129/">The Network Information API </a></td>
+                                <td>W3C Network Information API provides an interface for the Web Applications to access the underlying network information (connection info) of the device.</td>
+                                <td align="center">WD</td>
+                            </tr>
+                            -->
+                            <!--
+                            <tr>
+                                <td id="sensor" name="sensor"><a href="http://dev.w3.org/2009/dap/system-info/Sensors.html">Sensors</a></td>
+                                <td>W3C Sensors API provides scripted access to the sensors information associated with the hosting device.<br/>Note: Tizen implements the Sensor API under 'tizen' namespace in the version.</td>
+                            </tr>
+                            -->
+                        </tbody>
+                    </table>
+            </div>
+
+            <h4  id="graphics">Graphics</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="canvas" name="canvas"><a href="http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-canvas-element">HTML5 The <code>canvas</code> element (Partial)</a></td>
+                                <td>HTML5 canvas element including 2D context and text. The method currently not supported is:
+                                    <ul>
+                                        <li><code>toBlob</code> of <code>HTMLCanvasElement</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="canvas2d" name="canvas2d"><a href="http://www.w3.org/TR/2012/CR-2dcontext-20121217/">HTML Canvas 2D Context (Partial)</a></td>
+                                <td>2D Context for the HTML canvas element. The methods currently not supported are:
+                                    <ul>
+                                        <li><code>drawSystemFocusRing, drawCustomFocusRing, scrollPathIntoView, addHitRegion, removeHitRegion</code> of <code>CanvasRenderingContext2D</code> interface</li>
+                                        <li><code>ellipse</code> of <code>CanvasPathMethods</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="svg" name="svg"><a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#svg">HTML5 SVG (Partial)</a></td>
+                                <td>Inline SVG (1.1) support in HTML5. The attributes and methods currently not supported are:
+                                    <ul>
+                                        <li><code>iccColor</code> of <code>SVGColor</code> interface</li>
+                                        <li><code>title, referrer, domain, URL</code> of <code>SVGDocument</code> interface</li>
+                                        <li><code>kernelUnitLengthX, kernelUnitLengthY</code> of <code>SVGFESpecularLightingElement</code> interface</li>
+                                        <li><code>suspendRedraw, unsuspendRedraw, unsuspendRedrawAll, forceRedraw</code> of <code>SVGSVGElement</code> interface</li>
+                                        <li><code>hasExtension</code> of <code>SVGTests</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+            <h4 id="media">Media</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="video" name="video"><a href="http://www.w3.org/TR/2014/CR-html5-20140429#the-video-element">HTML5 The <code>video</code> element (Partial)</a></td>
+                                <td>HTML5 video element. The attributes currently not supported are:
+                                    <ul>
+                                        <li><code>crossorigin</code> of <code>HTMLMediaElement</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="audio" name="audio"><a href="http://www.w3.org/TR/2014/CR-html5-20140429#the-audio-element">HTML5 The <code>audio</code> element (Partial)</a></td>
+                                <td>HTML5 audio element. The attributes currently not supported are:
+                                    <ul>
+                                        <li><code>crossorigin</code> of <code>HTMLMediaElement</code> interface</li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="getusermedia" name="getusermedia"><a href="http://dev.w3.org/2011/webrtc/editor/archives/20121212/getusermedia.html"><code>getUserMedia</code></a>
+                                </td>
+                                <td>API that directly manipulates streams from cameras and microphones.</br>
+                                <!-- The dictionary member currently not supported is:
+                                    <ul>
+                                        <li><code>audio</code> of <code>MediaStreamOptions</code> dictionary</li>
+                                    </ul>
+                                -->
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/mediacapture</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/camera</code></li>
+                                                <li><code>http://tizen.org/feature/microphone</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    
+                                </td>
+                                <td align="center">ED</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="webaudio" name="webaudio"><a href=" http://www.w3.org/TR/2012/WD-webaudio-20121213/">Web Audio API (Partial)</a></td>
+                                <td>W3C Web Audio API describes a high-level JavaScript API for processing and synthesizing audio in Web Applications. The interfaces and attribute currently not supported are:
+                                    <ul>
+                                        <li><code>MediaElementAudioSourceNode</code> and <code>MediaStreamAudioSourceNode</code> interfaces
+                                        <li><code>computedValue</code> of <code>AudioParam</code> interface</li>
+                                    </ul>
+                                    The enum string constant value currently not supported for <code>panningModel</code> attribute is:
+                                    <ul>
+                                        <li><code>SOUNDFIELD</code> of <code>PanningModelType</code> enum</li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            -->
+                            <tr>
+                                <td id="webspeech" name="webspeech"><a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web Speech (Partial)</a></td>
+                                <td>W3C Web Speech API defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. The attributes and events currently not supported are:
+                                    <!--
+                                    <ul>
+                                        <li><code>continuous, interimResults, grammars, maxAlternatives, serviceURI</code> of <code>SpeechRecognition</code> interface</li>
+                                        <li><code>onsoundstart, onsoundend, onspeechstart, onspeechend</code> of <code>SpeechRecognition</code> interface</li>
+                                        <li><code>no-speech, aborted, not-allowed, service-not-supported, bad-grammar</code> of <code>SpeechRecognition</code> interface</li>
+                                    </ul>
+                                    -->
+                                    <ul>
+                                        <li><code>rate, pitch, volume, voiceURI</code> of <code>SpeechSynthesisUtterance</code> interface</li>
+                                        <li><code>onmark, onboundary</code> of <code>SpeechSynthesisUtterance</code> interface</li>
+                                    </ul>
+                                    The interfaces currently not supported are:
+                                    <ul>
+                                        <li><code>SpeechRecognition</code> interface</li>
+                                        <li><code>SpeechSynthesisVoiceList</code> interface</li>
+                                    </ul>
+                                    </br>
+                                    <!--
+                                    <div>SpeechRecognition</div>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/speech.recognition</code></li>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                                <li><code>http://tizen.org/feature/microphone</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    -->
+                                    <div>SpeechSynthesis</div>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>: 
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/speech.synthesis</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">Note</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="mediacapture" name="mediacapture"><a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/">HTML Media Capture </a></td>
+                                <td>Capture and record multimedia content with input tag.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/camera</code></li>
+                                                <li><code>http://tizen.org/feature/microphone</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>   
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            -->
+                        </tbody>
+                    </table>
+
+            <div id="communication"><h4>Communication</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="websocket" name="websocket"><a href="http://www.w3.org/TR/2012/CR-websockets-20120920/">The WebSocket API</a></td>
+                                <td>Offers bi-directional network connectivity.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="httpreq" name="httpreq"><a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/">XMLHttpRequest Level 1</a></td>
+                                <td>Enhancements on XHR, including binary file uploading, formdata submission, transfer progress, etc.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="serversent" name="serversent"><a href="http://www.w3.org/TR/2011/WD-eventsource-20111020">Server-Sent Events</a></td>
+                                <td>The API allows triggering DOM events based on push notifications(via HTTP and other protocols).</td>
+                                <td align="center">WD</td>
+                            </tr>
+                            -->
+                            <tr>
+                                <td id="messaging" name="messaging"><a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/">HTML5 Web Messaging</a></td>
+                                <td>HTML5 Web Messaging. The postMessage API allows for Web Applications to communicate between each other.
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                        </tbody>
+                    </table>
+            </div>
+            <div id="storage"><h4>Storage</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="webstorage" name="webstorage"><a href="http://www.w3.org/TR/2011/WD-webstorage-20110901/">Web Storage</a></td>
+                                <td>W3C storage specification including session and local storage.
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="file" name="file"><a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/">File API</a></td>
+                                <td>Reads files from local device file system.</td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="directory" name="directory"><a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419">File API: Directories and System</a></td>
+                                <td>API that allows accessing the device file system.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>                     
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                            </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="writer" name="writer"><a href="http://www.w3.org/TR/2011/WD-file-writer-api-20110419/">File API: Writer (Partial)</a></td>
+                                <td>Saves or modifies files in local device file system. The interface and method currently not supported are:
+                                    <ul>
+                                        <li><code>FileSaver</code> interface</li>
+                                        <li><code>saveAs</code> of <code>Window</code> interface</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="cache" name="cache"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#appcache">HTML5 Application caches</a></td>
+                                <td>HTML5 application cache and custom handlers.</td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            -->
+                            <tr>
+                                <td id="database" name="database"><a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/">Indexed Database API</a></td>
+                                <td>A database of values and hierarchical objects that integrates naturally with JavaScript, and can be queried and updated very efficiently. The attributes and method currently not supported are:
+                                    <ul>
+                                        <li><code>oldVersion, newVersion</code> of <code>IDBVersionChangeEvent</code> interface</li>
+                                        <li><code>initIDBVersionChangeEvent</code> of <code>IDBVersionChangeEvent</code> interface</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="sql" name="sql"><a href="http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/">Web SQL Database</a></td>
+                                <td>API for storing data in databases that can be queried using a variant of SQL.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br>                              </li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/unlimitedstorage</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">Note</td>
+                            </tr>
+                            -->
+                        </tbody>
+                    </table>
+            </div>
+            <h4  id="security">Security</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="cross" name="cross"><a href="http://www.w3.org/TR/2014/REC-cors-20140116/">Cross-Origin Resource Sharing</a></td>
+                                <td>Sharing of resources across different domains.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/internet</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/network.internet</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                            <tr>
+                                <td id="iframe" name="iframe"><a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-iframe-element">HTML5 The <code>iframe</code> element</a></td>
+                                <td>Access restriction (sandboxing) for iframe content. The available values of sandbox attribute are:
+                                    <ul>
+                                        <li><code>allow-same-origin, allow-scripts, allow-forms, allow-top-navigation</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="contentsec" name="contentsec"><a href="http://www.w3.org/TR/2012/CR-CSP-20121115/">Content Security Policy 1.0</a></td>
+                                <td>Defines a policy language used to declare a set of content restrictions for a web resource, and a mechanism for transmitting the policy from a server to a client where the policy is enforced. The directive currently not supported is:
+                                    <ul>
+                                        <li><code>object-src</code></li>
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                        </tbody>
+                    </table>
+<!--
+            <h4  id="ui">UI</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+-->
+                            <!--
+                            <tr>
+                                <td id="clipboard" name="clipboard"><a href="http://www.w3.org/TR/2012/WD-clipboard-apis-20120223/">Clipboard API and events (Partial)</a></td>
+                                <td>To describe APIs for clipboard operations such as copy, cut and paste in web applications.
+                                    <ul>
+                                        <li>The constructor of <code>ClipboardEvent</code> interface is not supported.</li>
+                                    </ul>
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            <tr>
+                                <td id="dnd" name="dnd"><a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html">HTML5 Drag and drop (Partial)</a></td>
+                                <td>To define an event-based drag-and-drop mechanism. The method currently not supported is:
+                                    <ul>
+                                        <li><code>addElement</code> of <code>DataTransfer</code> interface</li>
+                                    </ul></td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            -->
+                            <!--
+                            <tr>
+                                <td id="webnoti" name="webnoti"><a href="http://www.w3.org/TR/2012/WD-notifications-20120614">Web Notifications (Partial)</a></td>
+                                <td>To define an API for displaying simple notifications to the user. The dictionary members currently not supported are:
+                                    <ul>
+                                        <li><code>titleDir, bodyDir</code> of <code>NotificationOptions</code> dictionary</li>
+                                    </ul>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/notification</code></li>
+                                    </ul> 
+                                </td>
+                                <td align="center">WD</td>
+                            </tr>
+                            -->
+<!--
+                        </tbody>
+                    </table>
+-->
+
+            <div id="performance"><h4>Performance and Optimization</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="web_workers" name="web_workers"><a href="http://www.w3.org/TR/2012/CR-workers-20120501/">Web Workers (Partial)</a></td>
+                                <td>API that allows Web application authors to spawn background workers running scripts in parallel to their main page. The event handlers, interfaces and attributes currently not supported are:
+                                    <ul>
+                                        <li><code>ononline, onoffline</code> of <code>WorkerGlobalScope</code> interface</li>
+                                        <!--
+                                        <li><code>SharedWorkerGlobalScope</code> and <code>SharedWorker</code> interfaces</li>
+                                        <li><code>lineno, filename</code> of <code>ErrorEvent</code> interface</li>
+                                        -->
+                                    </ul>
+                                </td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <tr>
+                                <td id="visibility" name="visibility"><a href="http://www.w3.org/TR/2013/REC-page-visibility-20130514/">Page Visibility</a></td>
+                                <td>This specification defines a means for developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient Web applications.</td>
+                                <td align="center">REC</td>
+                            </tr>
+                            <tr>
+                                <td id="timing" name="timing"><a href="http://www.w3.org/TR/2013/CR-animation-timing-20131031/">Timing control for script-based animations</a></td>
+                                <td>Resource effective animation timing control by user agent.</td>
+                                <td align="center">CR</td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td><a href="http://www.w3.org/TR/navigation-timing/">Navigation Timing </a></td>
+                                <td>Tools to Web developers for optimizing their Web applications.<br>(<i>Note: this API is not supported by the beta release of SDK.</i>)</td>
+                                </tr>
+                            -->
+                            <!--
+                            <tr>
+                                <td id="navtiming" name="navtiming"><a href="http://www.w3.org/TR/2012/REC-navigation-timing-20121217/">Navigation Timing</a></td>
+                                <td>This specification defines an interface for web applications to access timing information related to navigation and elements.</td>
+                                <td align="center">REC</td>
+                            </tr>
+                            -->
+                        </tbody>
+                    </table>
+            </div>
+        <div id="location"><h4>Location</h4>
+                    <table width="90%">
+                        <thead>
+                              <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="geo"><a href="http://www.w3.org/TR/2013/REC-geolocation-API-20131024/">Geolocation API Specification</a></td>
+                                <td>Provides scripted access to geographical location information associated with the hosting device.</br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/location</code></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/location.gps</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>                        
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                        </tbody>
+                    </table>
+        </div>
+        <h4 id="widget">Widget</h4>
+                    <table width="90%">
+                        <thead>
+                            <tr><th style="width:20%">Specification</th><th>Description</th><th style="width:10%"><a class="status" href="#status">Status *</a></th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="packaging" name="packaging"><a href="http://www.w3.org/TR/2011/REC-widgets-20110927/">Widget Packaging and XML Configuration</a></td>
+                                <td>A packaging format and metadata for a class of software known as <code>widgets.</code>
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                            <tr>
+                                <td id="widget" name="widget"><a href="http://www.w3.org/TR/2011/WD-widgets-apis-20110607/">Widget Interface</a></td>
+                                <td>API for widgets that provides, amongst other things, functionality for accessing a widget's metadata and persistently storing data.
+                                </td>
+                                <td align="center">LCWD</td>
+                            </tr>
+                            <tr>
+                                <td id="signature" name="signature"><a href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/">XML Digital Signatures for Widgets</a></td>
+                                <td>A profile of the XML Signature Syntax and Processing 1.1 specification to allow a widget package to be digitally signed.
+                                </td>
+                                <td align="center">PR</td>
+                            </tr>
+                        <!--
+                            <tr>
+                                <td id="accreq" name="accreq"><a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/">Widget Access Request Policy</a></td>
+                                <td>The security model controlling network access from within a widget, as well as a method for authors to request that the user agent grant access to certain network resources or sets thereof.
+                                </td>
+                                <td align="center">REC</td>
+                            </tr>
+                        -->
+                        </tbody>
+                    </table>
+               
+<!-- YHM -->
+
+       <h4 id="Supplementary">Supplementary</h4>
+                     <table width="90%">
+                        <thead>
+                              <tr><th  style="width:20%">Specification</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td id="camera" name="camera"><a href="camera_w.html">Camera API (Tizen Extension)</a></td>
+                                <td>Provides interfaces for configuring camera options, recording video/audio, and capturing images.</br></br>
+                                    <ul class="xmlconfig">
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege level</a>: Public</br></li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/privilege/camera</code></li>
+                                                <li><code>http://tizen.org/privilege/audiorecorder</code></li>
+                                            </ul>
+                                        </li>
+                                        <li><a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#web">Required feature</a>:
+                                            <ul>
+                                                <li><code>http://tizen.org/feature/media.video_recording</code></li>
+                                                <li><code>http://tizen.org/feature/media.image_capture</code></li>
+                                                <li><code>http://tizen.org/feature/media.audio_recording</code></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </td>
+                                </tr>
+                            <tr>
+                                <td id="typed_array" name="typed_array"><a href="https://www.khronos.org/registry/typedarray/specs/1.0/">Typed Array - Khronos</a></td>
+                                <td>Provides an API for interoperability with native binary data.</td>
+                                </tr>
+                            <tr>
+                                <td id="webgl" name="webgl"><a href="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Khronos (Partial)</a></td>
+                                <td> This specification describes an additional rendering context and support objects for the HTML 5 canvas element. This context allows rendering using an API that conforms closely to the OpenGL ES 2.0 API. The method and attribute currently not supported are:
+                                    <ul>
+                                        <li><code>initWebGLContextEvent</code> of <code>WebGLContextEvent</code> interface</li>
+                                        <li><code>NUM_COMPRESSED_TEXTURE_FORMATS</code> of <code>WebGLRenderingContext</code> interface</li>
+                                    </ul>
+                                </td>
+                            </tr>
+                            <!--
+                            <tr>
+                                <td id="fullscreen" name="fullscreen"><a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI">FullScreen API - Mozilla (Partial)</a></td>
+                                <td>Provides a way for an element to be displayed in full screen mode programmatically. The method and attribute currently not supported are:
+                                    <li><code>requestFullScreenWithKeys</code> of element</li>
+                                    <li><code>allowFullScreen</code> of <code>iframe</code> element</li>
+                                <p><a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege Level</a>: Public</br>                              
+                                <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">Privilege</a>: <code>http://tizen.org/privilege/fullscreen</code>  </p>      
+                                </td>
+                                </tr>
+                                -->
+                            <tr>
+                                <td><code>viewport</code> Meta Tag - Apple</td>
+                                <td><p>Allows Web developers control the viewport's size and scale.  For more details:
+                                        <ul>
+                                            <li>
+                                                  <code>https://developer.apple.com/library/safari/documentation/Appleapplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26</code>
+                                            </li>
+                                        </ul>
+                                         </p>
+                                       </td>
+                                </tr>
+                            <!--  <tr>
+                                <td><a href="http://www.json.org/">JSON parsing/stringfy (JSON.org Spec)</a></td>
+                                <td>Native JSON parsing and stringfy method support. Currently supported attributes are:
+                                    <li><code>http, mailto, https</code></li>
+                                </td>
+                                </tr>
+                            <tr>
+                                <td><a href="http://www.openmobilealliance.org/Technical/release_program/docs/URI_Schemes/V1_0-20080626-A/OMA-TS-URI_Schemes-V1_0-20080626-A.pdf">URI scheme (tel:, sms:, mmsto:, mailto:) (OMA Spec)</a></td>
+                                <td>Launches native scheme handlers.</td>
+                                </tr> -->
+                        </tbody>
+                    </table>
+               </div> 
+
+
+
+<!--END YHM-->
+
+
+                <div id="status">
+                    <strong><em>* W3C Specification Status</em></strong>
+                    <ul>
+                        <li>ED = Editor’s Draft</li>
+                        <li>WD = Working Draft</li>
+                        <li>LCWD = Last Call Working Draft</li>
+                        <li>CR = Candidate Recommendation</li>
+                        <li>PR = Proposed Recommendation</li>
+                        <li>REC = Recommendation</li>
+                        <div>
+                            <a href="http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels">(see W3C Technical Report Development Process)</a>
+                        </div>
+                    </ul>
+                    <strong><em>Note: The APIs in ED, WD, LC status are considered to be in preliminary state. Such APIs do not carry a version compatibility promise. They may change in future versions of Tizen if the specifications change.</em></strong>
+                </div>
+                <div id="footer">
+                   <div class="copyright" align="center">
+                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>. 
+                   </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/org.tizen.web.apireference/html/w3c_api/w3c_dependencies.html b/org.tizen.web.apireference/html/w3c_api/w3c_dependencies.html
new file mode 100644 (file)
index 0000000..208b997
--- /dev/null
+++ b/org.tizen.web.apireference/html/w3c_api/w3c_dependencies.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "html">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<link rel="stylesheet" type="text/css" href="tizen/tizen.css" media="screen">
+<script type="text/javascript" src="tizen/snippet.js"></script><title>W3C_API_Modules API</title>
+</head>
+<body id="content" onload="prettyPrint()">
+<div class="api" id="::W3C_API_Modules">
+<div class="title"><h1>W3C_API_Modules API</h1></div>
+<h2>Table of Contents</h2>
+<ul class="toc">
+<li>1. <a href="#interfaces">Interfaces</a><ul class="toc">
+<li>1.1. <a href="#::W3C_API_Modules::Navigator">Navigator</a>
+</li>
+<li>1.2. <a href="#::W3C_API_Modules::MediaStream">MediaStream</a>
+</li>
+</ul>
+</li>
+<li>2. <a href="#full-webidl">Full WebIDL</a>
+</li>
+</ul>
+<hr>
+<h2 id="method-summary">Summary of Interfaces and Methods</h2>
+<table class="informaltable">
+<thead><tr>
+<th>Interface</th>
+<th>Method</th>
+</tr></thead>
+<tbody>
+<tr>
+<td><a href="#::W3C_API_Modules::Navigator">Navigator</a></td>
+<td></td>
+</tr>
+<tr>
+<td><a href="#::W3C_API_Modules::MediaStream">MediaStream</a></td>
+<td></td>
+</tr>
+</tbody>
+</table>
+<div class="interfaces" id="interfaces">
+<h2>1. Interfaces</h2>
+<div class="interface" id="::W3C_API_Modules::Navigator">
+<h3>1.1. Navigator</h3>
+<div class="brief">
+ This interface is a pointer to W3C <a href="http://www.w3.org/TR/2013/CR-html5-20130806/webappapis.html#navigator">navigator</a> interface.
+          </div>
+<pre class="webidl prettyprint">    interface Navigator {};</pre>
+</div>
+<div class="interface" id="::W3C_API_Modules::MediaStream">
+<h3>1.2. MediaStream</h3>
+<div class="brief">
+ This interface is a pointer to W3C <a href="http://www.w3.org/TR/mediacapture-streams/#mediastream">MediaStream</a> interface.
+          </div>
+<pre class="webidl prettyprint">    interface MediaStream {};</pre>
+</div>
+</div>
+<h2 id="full-webidl">2. Full WebIDL</h2>
+<pre class="webidl prettyprint">module W3C_API_Modules {
+    interface Navigator {};
+
+    interface MediaStream {};
+};</pre>
+</div>
+<div id="footer">
+<div class="copyright" align="center">              
+                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>. 
+                       </div>
+<script type="text/javascript"> 
+
+              var _gaq = _gaq || [];
+              _gaq.push(['_setAccount', 'UA-25976949-1']);
+              _gaq.push(['_setDomainName', 'tizen.org']);
+              _gaq.push(['_trackPageview']);
+
+              (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                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>
+</div>
+</body>
+</html>
diff --git a/org.tizen.web.apireference/html/web_api_reference.htm b/org.tizen.web.apireference/html/web_api_reference.htm
new file mode 100644 (file)
index 0000000..9a32dae
--- /dev/null
+++ b/org.tizen.web.apireference/html/web_api_reference.htm
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script 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 API References</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../org.tizen.guides/html/web/guides_w.htm">Tizen Web Tutorials</a></li>
+                       <li><a href="../../org.tizen.tutorials/html/web/tutorials_w.htm">Tizen Web Guides</a></li>
+               </ul>
+       </div> 
+
+       </div>
+</div> 
+
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Tizen Web API References</h1> 
+  <p>The Tizen Web API specifications for the Tizen mobile and wearable Web profile consist of a collection of existing standards, such as <a href="http://www.w3.org" target="_blank">W3C</a> and <a href="http://www.khronos.org/" target="_blank">Khronos</a>.</p> 
+  <p>In addition to standards-based APIs, the Tizen mobile Web profile has a specific set of APIs, which provide access to device platform capabilities, enabling a rich Web application development environment. </p> 
+  <p>The following API references provide descriptions of all the APIs that can be used for creating Tizen Web applications.</p> 
+  
+  <ul> 
+   <li><a href="device_api/device_api_cover.html">Tizen Web Device API Reference</a> <p>This reference provides the Tizen Web device API specifications.</p></li> 
+   <li><a href="ui_fw_api/ui_fw_api_cover.html">Tizen Web UI Framework Reference</a> <p>This reference provides tools, such as widgets, events, effects, and animations, for Web application development.</p></li> 
+   <li><a href="w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a> <p>This reference provides the Tizen W3C/HTML5 and some supplementary API specifications.</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>
+
+<a class="top sms" href="#"><img src="images/btn_top.gif" alt="Go to top" /></a>
+
+<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>
+  
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+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> 
+
+ </body>
+</html>
diff --git a/org.tizen.web.apireference/index.xml b/org.tizen.web.apireference/index.xml
new file mode 100644 (file)
index 0000000..54c9f85
--- /dev/null
+++ b/org.tizen.web.apireference/index.xml
@@ -0,0 +1,453 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="API References" topic="html/cover_page.htm">
+
+       <topic label="Web Application" href="html/web_api_reference.htm">
+               <topic label="Tizen Web Device API Reference" href="html/device_api/device_api_cover.html">
+                       <topic label="Mobile Web" href="html/device_api/mobile/index.html">
+                               <topic href="html/device_api/mobile/tizen/tizen.html" label="Tizen"></topic>
+               
+                               <topic href="html/device_api/mobile/index.html#Application" label="Application">
+                                       <topic href="html/device_api/mobile/tizen/alarm.html" label="Alarm" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/application.html" label="Application" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/datacontrol.html" label="Data Control" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/package.html" label="Package" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#Communication" label="Communication">
+                                       <topic href="html/device_api/mobile/tizen/bluetooth.html" label="Bluetooth" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/messaging.html" label="Messaging" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/networkbearerselection.html" label="Network Bearer Selection" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/nfc.html" label="NFC" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/push.html" label="Push" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/se.html" label="Secure Element" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#Contents" label="Content">
+                                       <topic href="html/device_api/mobile/tizen/content.html" label="Content" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/download.html" label="Download" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/exif.html" label="Exif" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#I/O" label="Input/Output">
+                               <topic href="html/device_api/mobile/tizen/archive.html" label="Archive" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/filesystem.html" label="Filesystem" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/messageport.html" label="Message Port" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#Multimedia" label="Multimedia">
+                                       <topic href="html/device_api/mobile/tizen/mediakey.html" label="Media Key" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/sound.html" label="Sound" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#Social" label="Social">
+                                       <topic href="html/device_api/mobile/tizen/account.html" label="Account" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/bookmark.html" label="Bookmark" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/calendar.html" label="Calendar" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/callhistory.html" label="Call History" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/contact.html" label="Contact" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/datasync.html" label="Data Synchronization" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#System" label="System">
+                                       <topic href="html/device_api/mobile/tizen/fmradio.html" label="FM Radio" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/humanactivitymonitor.html" label="Human Activity Monitor" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/power.html" label="Power" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/sensor.html" label="Sensor" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/systeminfo.html" label="System Information" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/systemsetting.html" label="System Setting" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/time.html" label="Time" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/websetting.html" label="Web Setting" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/mobile/index.html#User Interface" label="User      Interface">
+                                       <topic href="html/device_api/mobile/tizen/badge.html" label="Badge" ></topic>
+                                       <topic href="html/device_api/mobile/tizen/notification.html" label="Notification" ></topic>
+                               </topic>        
+                       </topic>        
+                       <topic label="Wearable Web" href="html/device_api/wearable/index.html">
+                               <topic href="html/device_api/wearable/tizen/tizen.html" label="Tizen"></topic>
+               
+                               <topic href="html/device_api/wearable/index.html#Application" label="Application">
+                                       <topic href="html/device_api/wearable/tizen/alarm.html" label="Alarm" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/application.html" label="Application" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/package.html" label="Package" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/wearable/index.html#Contents" label="Content">
+                                       <topic href="html/device_api/wearable/tizen/content.html" label="Content" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/download.html" label="Download" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/wearable/index.html#I/O" label="Input/Output">
+                                       <topic href="html/device_api/wearable/tizen/filesystem.html" label="Filesystem" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/messageport.html" label="Message Port" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/wearable/index.html#Multimedia" label="Multimedia">
+                                       <topic href="html/device_api/wearable/tizen/mediakey.html" label="Media Key" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/sound.html" label="Sound" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/wearable/index.html#System" label="System">
+                                       <topic href="html/device_api/wearable/tizen/humanactivitymonitor.html" label="Human Activity Monitor" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/power.html" label="Power" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/sensor.html" label="Sensor" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/systeminfo.html" label="System Information" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/systemsetting.html" label="System Setting" ></topic>
+                                       <topic href="html/device_api/wearable/tizen/time.html" label="Time" ></topic>
+                               </topic>
+
+                               <topic href="html/device_api/wearable/index.html#User Interface" label="User    Interface">
+                                       <topic href="html/device_api/wearable/tizen/badge.html" label="Badge" ></topic>
+                               </topic>        
+                       </topic>
+               </topic>
+               <topic label="Tizen Web UI Framework Reference" href="html/ui_fw_api/ui_fw_api_cover.html">
+                       <topic label="Mobile Web" href="html/ui_fw_api/mobile/index.htm">
+                               <topic href="html/ui_fw_api/mobile/page/app_page_layout.htm" label="Application Page Layout">
+                                       <topic href="html/ui_fw_api/mobile/page/multi_page.htm" label="Multi-page Layout"></topic>
+                                       <topic href="html/ui_fw_api/mobile/page/page_change.htm" label="Page Changes"></topic>
+                                       <topic href="html/ui_fw_api/mobile/page/page_event.htm" label="Page Events and Methods"></topic>
+                               </topic>
+
+                               <topic href="html/ui_fw_api/mobile/widget_reference.htm" label="UI Component Reference">
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Autodividers.htm" label="Autodividers"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Button.htm" label="Button"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Checkboxradio.htm" label="Checkbox Radio"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Collapsible.htm" label="Collapsible"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Controlgroup.htm" label="Control Group"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm" label="Date-time Picker"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Drawer.htm" label="Drawer"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_FastScroll.htm" label="Fast Scroll"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Fliptoggle.htm" label="Flip Toggle Switch"></topic> 
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Gallery.htm" label="Gallery"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_ListDivider.htm" label="List Divider"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm" label="List View"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_MultimediaView.htm" label="Multimedia View"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Navigation.htm" label="Navigation Bar"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Notification.htm" label="Notification"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm" label="Popup"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Progress.htm" label="Progress"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_ProgressBar.htm" label="Progress Bar"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_ScrollHandler.htm" label="Scroll Handler"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_SearchBar.htm" label="Search Bar"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_SelectMenu.htm" label="Select Menu"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Slider.htm" label="Slider"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Swipe.htm" label="Swipe"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm" label="Tab Bar"></topic>
+                                       <topic href="html/ui_fw_api/mobile/ns_widget_mobile_Tokentextarea.htm" label="Token Text Area"></topic>
+                               </topic>
+
+                               <topic href="html/ui_fw_api/mobile/util/util.htm" label="Utilities">
+                                       <topic href="html/ui_fw_api/mobile/util/ns_util_DOM.htm" label="DOM Utility"></topic>
+                                       <topic href="html/ui_fw_api/mobile/util/ns_util_selectors.htm" label="Selectors Utility"></topic>       
+                               </topic>
+                       </topic>
+
+                       
+                       <topic label="Wearable Web" href="html/ui_fw_api/wearable/index.htm">
+                               <topic href="html/ui_fw_api/wearable/page/app_page_layout.htm" label="Application Page Layout">
+                                       <topic href="html/ui_fw_api/wearable/page/multi_page.htm" label="Multi-page Layout"></topic>
+                                       <topic href="html/ui_fw_api/wearable/page/page_change.htm" label="Changing Pages"></topic>
+                                       <topic href="html/ui_fw_api/wearable/page/page_event.htm" label="Handling Page Events"></topic>
+                               </topic>
+                               <topic href="html/ui_fw_api/wearable/widgets/widget_reference.htm" label="UI Component Reference">
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_button.htm" label="Button">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_checkbox.htm" label="Checkbox and Radio Button">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_indexscrollbar.htm" label="Index Scroll Bar">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_list.htm" label="List">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_popup.htm" label="Popup">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_processing.htm" label="Processing">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_progress.htm" label="Progress">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_section_changer.htm" label="Section Changer">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_slider.htm" label="Slider">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_swipelist.htm" label="Swipe List">
+                                       </topic>          
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_toggleswitch.htm" label="Toggle Switch">
+                                       </topic>
+                                       <topic href="html/ui_fw_api/wearable/widgets/widget_virtuallist.htm" label="Virtual List">
+                                       </topic>
+                               </topic>
+                               <topic href="html/ui_fw_api/wearable/event/events.htm" label="Events">
+                                       <topic href="html/ui_fw_api/wearable/event/gesture.htm" label="Gesture Events">
+                                               <topic href="html/ui_fw_api/wearable/event/drag.htm" label="Drag Event"></topic>
+                                               <topic href="html/ui_fw_api/wearable/event/swipe.htm" label="Swipe Event"></topic>
+                                       </topic>
+                               </topic>
+                       </topic>
+               </topic>
+               
+       <topic label="W3C/HTML5 and Supplementaries API Reference" href="html/w3c_api/w3c_api_cover.html">
+               <topic label="Mobile Web" href="html/w3c_api/w3c_api_m.html">
+                       <topic href="html/w3c_api/w3c_api_m.html#dom" label="DOM, Forms and Styles">
+                               <topic href="http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#forms" label="HTML5 Forms (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-selectors-api-20120628/" label="Selectors API Level 1">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2010/WD-selectors-api2-20100119/" label="Selectors API Level 2 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619" label="Media Queries (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/" label="CSS Transforms">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/" label="CSS Animations Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/" label="CSS Transitions Module Level 3 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/REC-css3-color-20110607" label="CSS Color Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-css3-background-20120724/" label="CSS Backgrounds and Borders Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" label="CSS Flexible Box Layout Module">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412" label="CSS Multi-column Layout Module (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-text-20121113" label="CSS Text Module Level 3 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/" label="CSS Basic User Interface Module Level 3 (CSS3 UI)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823" label="CSS Fonts Module Level 3 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/PR-WOFF-20121011/" label="WOFF File Format 1.0">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-html5-20110525/" label="DOM/JavaScript related HTML5 Enhancements">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#history" label="HTML5 The session history of browsing contexts (Partial)">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#device" label="Device">
+                               <topic href="http://www.w3.org/TR/2013/WD-touch-events-20130124/" label="Touch Events version 1 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-orientation-event-20111201" label="DeviceOrientation Event Specification (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-battery-status-20120508" label="Battery Status API">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-vibration-20120202/" label="Vibration API">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html?path=5_4_5#event-online" label="HTML5 Browser state">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-screen-orientation-20120522" label="The Screen Orientation API">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#graphics" label="Graphics">
+                               <topic href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" label="HTML5 The canvas element (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-2dcontext-20120329/" label="HTML Canvas 2D Context (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-html5-20110525/the-map-element.html#svg-0" label="HTML5 SVG">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#media" label="Media">
+                               <topic href=    "http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-video-element" label="HTML5 The video element (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-audio-element" label="HTML5 The audio element (Partial)">
+                               </topic>
+                               <topic href="http://dev.w3.org/2011/webrtc/editor/getusermedia-20111130.html" label="getUserMedia (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-webaudio-20121213/" label="Web Audio API (Partial)">
+                               </topic>
+                               <topic href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html" label="Web Speech (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/" label="HTML Media Capture">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#communication" label="Communication">
+                               <topic href="http://www.w3.org/TR/2012/CR-websockets-20120920" label="The WebSocket API">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/" label="XMLHttpRequest Level 2">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-eventsource-20111020" label="Server-Sent Events">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-webmessaging-20120501" label="HTML5 Web Messaging">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#storage" label="Storage">
+                               <topic href=    "http://www.w3.org/TR/2011/CR-webstorage-20111208/" label="Web Storage">
+                               </topic>
+                               <topic href=    "http://www.w3.org/TR/2011/WD-FileAPI-20111020/" label="File API">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-file-system-api-20110419" label="File API: Directories and System">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-file-writer-api-20110419/" label="File API: Writer (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#appcache" label="HTML5 Application caches">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/" label="Indexed Database API (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/" label="Web SQL Database">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#security" label="Security">
+                               <topic href="http://www.w3.org/TR/2012/WD-cors-20120403" label="Cross-Origin Resource Sharing">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html?path=5_2_8#the-iframe-element" label="HTML5 The iframe element">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-CSP-20121115" label="Content Security Policy 1.0 (Partial)">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#ui" label="UI">
+                               <topic href="http://www.w3.org/TR/2012/WD-clipboard-apis-20120223/" label="Clipboard API and events (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html" label="HTML5 Drag and drop (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-notifications-20120614" label="Web Notifications (Partial)">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#performance" label="Performance and Optimization">
+                               <topic href="http://www.w3.org/TR/2012/CR-workers-20120501" label="Web Workers (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-page-visibility-20120726/" label="Page Visibility">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/" label="Timing control for script-based animations">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/REC-navigation-timing-20121217/" label="Navigation Timing">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#location" label="Location">
+                               <topic href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510" label="Geolocation API Specification">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#widget" label="Widget">
+                               <topic href="http://www.w3.org/TR/2011/REC-widgets-20110927/" label="Widget Packaging and XML Configuration"></topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-widgets-apis-20110607/" label="Widget Interface"></topic>
+                               <topic href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/" label="XML Digital Signatures for Widgets"></topic>
+                               <topic href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/" label="Widget Access Request Policy"></topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_m.html#Supplementary" label="Supplementary">
+                               <topic href="https://www.khronos.org/registry/typedarray/specs/1.0/" label="Typed Array - Khronos"></topic>
+                               <topic href="https://www.khronos.org/registry/webgl/specs/1.0/" label="WebGL - Khronos (Partial)"></topic>
+                               <topic href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI" label="FullScreen API - Mozilla (Partial)"></topic>
+                       </topic>
+               </topic>
+
+               
+               <topic label="Wearable Web" href="html/w3c_api/w3c_api_w.html">
+                       <topic href="html/w3c_api/w3c_api_w.html#dom" label="DOM, Forms and Styles">
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/forms.html#forms" label="HTML5 Forms (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/REC-selectors-api-20130221/" label="Selectors API Level 1">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/" label="Selectors API Level 2 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/" label="Media Queries">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/WD-css-transforms-1-20131126/" label="CSS Transforms">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/" label="CSS Animations Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/" label="CSS Transitions Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/REC-css3-color-20110607/" label="CSS Color Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/WD-css3-background-20140204/" label="CSS Backgrounds and Borders Module Level 3">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/" label="CSS Flexible Box Layout Module">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/WD-css-text-3-20131010/" label="CSS Text Module Level 3 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/" label="CSS Basic User Interface Module Level 3 (CSS3 UI)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/" label="CSS Fonts Module Level 3 (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/REC-WOFF-20121213/" label="WOFF File Format 1.0  ">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/" label="DOM/JavaScript related HTML5 Enhancements">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#history" label="HTML5 The session history of browsing contexts (Partial)">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#device" label="Device">
+                               <topic href="http://www.w3.org/TR/2013/REC-touch-events-20131010/" label="Touch Events version 1">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/" label="DeviceOrientation Event Specification (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-battery-status-20120508/" label="Battery Status API ">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/WD-vibration-20140211/" label="Vibration API ">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#graphics" label="Graphics">
+                               <topic href="http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-canvas-element" label="HTML5 The canvas element (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-2dcontext-20121217/" label="HTML Canvas 2D Context (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#svg" label="HTML5 SVG (Partial)">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#media" label="Media">
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-video-element" label="HTML5 The video element (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-audio-element" label="HTML5 The audio element (Partial)">
+                               </topic>
+                               <topic href="http://dev.w3.org/2011/webrtc/editor/getusermedia-20111130.html" label="getUserMedia">
+                               </topic>
+                               <topic href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html" label="Web Speech (Partial)">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#communication" label="Communication">
+                               <topic href="http://www.w3.org/TR/2012/CR-websockets-20120920/" label="The WebSocket API">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/" label="XMLHttpRequest Level 1">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/" label="HTML5 Web Messaging">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#storage" label="Storage">
+                               <topic href="http://www.w3.org/TR/2011/WD-webstorage-20110901/" label="Web Storage">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/" label="File API">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/" label="Indexed Database API">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#security" label="Security">
+                               <topic href="http://www.w3.org/TR/2014/REC-cors-20140116/" label="Cross-Origin Resource Sharing">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#the-iframe-element" label="HTML5 The iframe element">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2012/CR-CSP-20121115/" label="Content Security Policy 1.0">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#performance" label="Performance and Optimization">
+                               <topic href="http://www.w3.org/TR/2012/CR-workers-20120501/" label="Web Workers (Partial)">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/REC-page-visibility-20130514/" label="Page Visibility">
+                               </topic>
+                               <topic href="http://www.w3.org/TR/2013/CR-animation-timing-20131031/" label="Timing control for script-based animations">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#location" label="Location">
+                               <topic href="http://www.w3.org/TR/2013/REC-geolocation-API-20131024/" label="Geolocation API Specification">
+                               </topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#widget" label="Widget">
+                               <topic href="http://www.w3.org/TR/2011/REC-widgets-20110927/" label="Widget Packaging and XML Configuration"></topic>
+                               <topic href="http://www.w3.org/TR/2011/WD-widgets-apis-20110607/" label="Widget Interface"></topic>
+                               <topic href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/" label="XML Digital Signatures for Widgets"></topic>
+                       </topic>
+                       <topic href="html/w3c_api/w3c_api_w.html#Supplementary" label="Supplementary">
+                               <topic href="html/w3c_api/camera_w.html" label="Camera API (Tizen Extension)"></topic>
+                               <topic href="https://www.khronos.org/registry/typedarray/specs/1.0/" label="Typed Array - Khronos"></topic>
+                               <topic href="https://www.khronos.org/registry/webgl/specs/1.0/" label="WebGL - Khronos (Partial)"></topic>
+                       </topic>
+               </topic>
+       </topic>
+</topic>                               
+
+<topic label="Native Application" href="../org.tizen.native.mobile.apireference/index.html">
+       <link toc="../org.tizen.native.mobile.apireference/toc.xml" />
+</topic>       
+       
+</toc>
diff --git a/org.tizen.web.apireference/plugin.xml b/org.tizen.web.apireference/plugin.xml
new file mode 100644 (file)
index 0000000..90140e5
--- /dev/null
+++ b/org.tizen.web.apireference/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+       <extension point="org.eclipse.help.toc">
+               <toc file="index.xml" primary="true" />
+       </extension>
+</plugin>
Domain: SDK / Documents;